/*
Theme Name: Coloc Starter
Theme URI: https://coloc.coop/
Author: Studio Creatif Coloc
Author URI: https://coloc.coop/
Description: Theme starter optimise pour WordPress avec ACF, WPML, Yoast, Ninja Forms. Grille 12 colonnes, pixel perfect, responsive.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coloc
Tags: custom, grid, responsive, acf, wpml
*/

/* ========================================
   00. FONTS
   Montserrat : Google Fonts (inc/enqueue.php)
   Bagnard : pas sur Google Fonts, auto-hebergee
   ======================================== */
@font-face {
  font-family: 'Bagnard';
  src: url('assets/fonts/Bagnard.woff2') format('woff2'), /* 10 Ko ; .otf en secours (vieux navigateurs) */
       url('assets/fonts/Bagnard.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   01. CSS VARIABLES
   ======================================== */
:root {
  --color-primary: #00639A;
  --color-primary-light: #007DBD;
  --color-primary-lighter: #0095DA;
  --color-secondary: #58AB40;
  --color-secondary-dark: #438231;
  --color-secondary-light: #A3CF62;
  --color-dark: #2D2B2A;
  --color-gray: #99908C;
  --color-light: #FFFFFF;
  --bg-primary: #00406C;
  --bg-beige: #FEECD4;
  --bg-green: #F1F6D7;
  --bg-blue-light: #D5E7F1;

  --nav-bg: #E8ECEF;
  --nav-color: #113E5F;
  --nav-color-hover: #1F5A8A;

  /* Palette UI kit Situs */
  --color-navy: #113E5F;
  --color-green: #7BC89E;
  --color-green-pale: #EBF8F1;
  --color-gray-pale: #F4F6F8;

  --font-family: 'Montserrat', sans-serif;
  --font-heading: 'Bagnard', Georgia, serif;
  /* 20px au-dessus de 1024, puis passage progressif a 16px a 768 (plus de saut en tablette) */
  --font-size-base: clamp(16px, calc(4px + 1.5625vw), 20px);
  --line-height-base: 1.4;
  --letter-spacing: 0;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 3.75rem;

  --container-max: 1440px;

  /* marges laterales des sections (1920 : 47px pour header, footer et grilles de cartes ;
     200px pour les textes des sections). 1024 et moins : tout passe a la marge etroite */
  --pad-wide: clamp(var(--gutter), 2.45vw, 2.35rem);
  --pad-content: clamp(var(--gutter), 10.4vw, 10rem);

  /* taille des petits titres verts / sous-titres : 25px jusqu'a 1440, 20px minimum */
  --fs-lead: clamp(20px, calc(10.54px + 1.004vw), 25px);

  /* icones (masques et fonds) ; couleur = currentColor ou background-color de l'element */
  --icon-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-34 -52 68 86'%3E%3Cpath fill='%237BC89E' d='M0-51.2L-25.12-20.63A32.5 32.5 0 1 0 25.12-20.63C14-33 -2-38 0-51.2Z'/%3E%3C/svg%3E"); /* goutte verte (puces) */
  --bullet-w: 0.5rem;  /* taille unique des puces-gouttes du site */
  --bullet-h: 0.65rem;
  --icon-arrow-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E"); /* fleche diagonale (ronds des cartes) */
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M16 1l5 5-5 5'/%3E%3C/svg%3E"); /* fleche droite (boutons) */
  --icon-arrow-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h20M16 1l5 5-5 5'/%3E%3C/svg%3E"); /* fleche droite fine (rond equipe) */
  --pattern-gouttes: url('assets/images/pattern-gouttes.svg');
  --gutter: 2rem;
  --transition: 0.2s ease-out;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-full: 100px;

  --menu-direction: right;
  --menu-speed: 300ms;
  --menu-overlay-opacity: 0.5;
  --menu-overlay-blur: 4px;
}

/* 1280 et moins : marges laterales reduites partout (textes ~77px et header/footer/grilles ~31px a 1280) */
@media (max-width: 1280px) {
  :root {
    --gutter: 1.25rem;
    --pad-content: clamp(var(--gutter), 6vw, 10rem);
  }
}

@media (max-width: 1024px) {
  :root { --pad-content: var(--pad-wide); }
}

/* ========================================
   02. RESET & BASE
   ======================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  color: var(--color-dark);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* menu ouvert : page bloquee ; la largeur de la barre de defilement retiree est compensee (calculee en JS) */
body.menu-open { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

a:hover { text-decoration: none; }

ul, ol { list-style: none; }

svg * {
  transition: fill var(--transition), stroke var(--transition);
}

/* ========================================
   03. TYPOGRAPHY
   ======================================== */
/* UI kit : base 20px -> 1rem = 20px */
h1, h2, h3, h4, h5, h6 { letter-spacing: 0; }

h1, h2, h4 { font-family: var(--font-heading); font-weight: 400; }
h3, h5, h6 { font-family: var(--font-family); font-weight: 500; }

h1 { font-size: 3rem; line-height: 1.017; }                              /* Bagnard 60/61 */
h2 { font-size: clamp(1.75rem, calc(17.7px + 1.687vw), 2.1rem); line-height: 1.071; color: var(--color-primary); } /* Bagnard 42/45 ; < 1440 : reste plus petit que le H1 */
h3 { font-size: 1.6rem; line-height: 1.094; color: var(--color-primary); } /* Montserrat Medium 32/35 */
h4 { font-size: 1.4rem; line-height: 1.107; color: var(--color-primary); } /* Bagnard 28/31 */
h5 { font-size: 1.25rem; line-height: 1.12; }                            /* Montserrat Medium 25/28 */
h6 { font-size: 0.8rem; line-height: 1.3; }

p {
  font-size: 1rem;
  line-height: 1.4;                                                      /* Montserrat Regular 20/28 */
  font-weight: 400;
  letter-spacing: var(--letter-spacing);
}

/* elements de liste : meme taille que les paragraphes a toutes les resolutions
   (les listes stylees, menus, etapes, etc. gardent leur propre taille) */
li { font-size: 1rem; }

p:last-child { margin-bottom: 0; }

@media (max-width: 1440px) {
  h1, h2, .imageTexte__intro { text-wrap: balance; }
  h2 { font-size: clamp(28px, calc(17.7px + 1.687vw), 34px); }   /* 34px max, puis meme descente fluide jusqu'a 28px */
  p, li { font-size: 0.9rem; }
}

@media (max-width: 1280px) {
  h1 { font-size: 52px; }   /* mobile : 2rem (regle 768 plus bas) */
  h2 { font-size: clamp(28px, calc(17.7px + 1.687vw), 32px); }   /* 32px max, puis descente fluide jusqu'a 28px */
  p, li { font-size: 0.8rem; }
}

/* mobile : texte courant a 14px (base de 16px a cette largeur) */
@media (max-width: 768px) {
  p, li { font-size: 0.875rem; }
}

/* ========================================
   04. LAYOUT
   ======================================== */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main { flex: 1; }

.maxW {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}

.container {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.section-full {
  display: block;
  width: 100%;
}

/* ========================================
   05. SPACING UTILITIES
   ======================================== */
.padTB60 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }
.padTB40 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.padTB { padding-top: var(--spacing-xxl); padding-bottom: var(--spacing-xxl); }
.padLR { padding-left: var(--gutter); padding-right: var(--gutter); }
.padTB0 { padding-top: 0; }
.padB0 { padding-bottom: 0; }
.marB0 { margin-bottom: 0; }
.marT15 { margin-top: 1.5rem; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }

/* ========================================
   06. BACKGROUND UTILITIES
   ======================================== */
.bg-white { background-color: var(--color-light); }
.bg-primary { background-color: var(--bg-primary); }
.bg-beige { background-color: var(--bg-beige); }
.bg-green { background-color: var(--bg-green); }
.bg-blue-light { background-color: var(--bg-blue-light); }

/* ========================================
   07. FLEX UTILITIES
   ======================================== */
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-top { display: flex; align-items: flex-start; }

.inverted { direction: rtl; }
.inverted > * { direction: ltr; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ========================================
   08. BUTTONS
   ======================================== */
.btn {
  display: inline-block;
  text-align: center;
  border-radius: var(--radius-full);
  padding: 0.8em 1.6em;
  font-size: 0.9rem;
  line-height: 1.444;                                                    /* Montserrat Medium 18/26 */
  font-weight: 500;
  cursor: pointer;
  /* survol : fondu de couleur (fond, texte / fleche, contour) */
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

@media (max-width: 1280px) {
  .btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

.btn-primary { background-color: var(--color-primary); color: var(--color-light); }
.btn-primary:hover { background-color: var(--color-primary-light); color: var(--color-light); }

.btn-secondary { background-color: var(--color-secondary); color: var(--color-light); }
.btn-secondary:hover { background-color: var(--color-secondary-dark); color: var(--color-light); }

/* UI kit : vert -> marine au survol */
.btn-green { background-color: var(--color-green); color: var(--color-light); }
.btn-green:hover { background-color: var(--color-navy); color: var(--color-light); }

/* UI kit, sur fond marine : vert -> blanc / texte vert au survol */
.servicesBlock .btn-green:hover,
.servicesBlock .btn-green:focus-visible { background-color: var(--color-light); color: var(--color-green); }

.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 12px 1.1em 7px; /* maquette : 45px de haut, texte centre optiquement */
}

.btn-arrow::after {
  content: '';
  width: 1.15em;
  height: 0.7em;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
          mask: var(--icon-arrow) center / contain no-repeat;
}

/* UI kit : marine -> vert au survol */
.btn-navy { background-color: var(--color-navy); color: var(--color-light); }
.btn-navy:hover { background-color: var(--color-green); color: var(--color-light); }

/* UI kit : contour blanc -> fond blanc au survol */
.btn-outline-white { background-color: transparent; color: var(--color-light); box-shadow: inset 0 0 0 1px var(--color-light); }
.btn-outline-white:hover { background-color: var(--color-light); color: var(--color-navy); }

/* ========================================
   09. 12-COLUMN GRID
   ======================================== */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--gutter) * -0.5);
  margin-right: calc(var(--gutter) * -0.5);
}

.col {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: calc(var(--gutter) * 0.5);
  padding-right: calc(var(--gutter) * 0.5);
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (max-width: 1024px) {
  .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Points de rupture du projet : 1910, 1680, 1440, 1280, 1024, 768 (mobile) */
@media (max-width: 768px) {
  :root { --gutter: 1rem; --font-size-base: 16px; }
  h1 { font-size: 2rem; }
  /* h2 : la regle fluide (min 1.75rem = 28px) descend seule jusqu'a 28px, sans saut a 768 */
  h3 { font-size: 1.35rem; }
  h4 { font-size: 1.15rem; }
  .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
  .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%; max-width: 100%;
  }
}

.hidden { display: none !important; }
@media (max-width: 1024px) { .hidden-md { display: none !important; } }
@media (max-width: 768px) { .hidden-sm { display: none !important; } }

.ctn-2col { padding-left: 16.666667%; padding-right: 16.666667%; }
.ctn-3col { padding-left: 25%; padding-right: 25%; }
.ctn-4col { padding-left: 33.333333%; padding-right: 33.333333%; }
.ctn-5col { padding-left: 41.666667%; padding-right: 41.666667%; }
.ctn-6col { padding-left: 50%; padding-right: 50%; }

/* Print styles already at bottom */

/* ========================================
   10. HEADER
   ======================================== */
/* Maquette : header pleine largeur, ~47px de marge laterale */
#masthead { padding: 1.35rem 0 1.55rem; }
#masthead .maxW { max-width: none; }
#masthead .container { padding-left: var(--pad-wide); padding-right: var(--pad-wide); }
/* Logo header : 212 x 81 (le fichier de la mediatheque est la version grand format du footer) */
.main-logo img,
.custom-logo-link img,
.custom-logo {
  width: 212px;
  height: 81px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}
.site-title { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); }

.main-menu {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  /* 92px a 1920 (barre a 351px, logo 212px), diminue avec la largeur */
  margin-left: clamp(1.5rem, calc(8.75vw - 76px), 4.6rem);
}

.main-menu > .menu {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 3.3rem;
  padding: 0.4rem 0.8rem 0.4rem 1.9rem;
  background-color: var(--nav-bg);
  border-radius: 0.3rem;
}

.main-menu .menu li {
  display: inline-block;
  position: relative;
}

.main-menu > .menu > li > a {
  display: inline-block;
  /* espacement fluide : 63.5px a 1920 (maquette), diminue avec la barre pour que le menu reste sur une ligne
     (des paliers fixes cassaient juste au-dessus de chaque point de rupture, surtout avec une barre de defilement) */
  padding: 0.5rem clamp(0.5rem, calc(8.06vw - 91.2px), 3.175rem) 0.5rem 0;
  font-size: 1rem;
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--nav-color);
}

/* Maquette : element survole / sous-menu ouvert / page courante en vert (hors CTA) */
.main-menu > .menu > li:not(:last-child) > a:hover,
.main-menu > .menu > li:not(:last-child):focus-within > a,
.main-menu > .menu > .menu-item-has-children:hover > a,
.main-menu > .menu > .current-menu-item:not(:last-child) > a,
.main-menu > .menu > .current-menu-ancestor > a {
  color: var(--color-green);
}

/* Dernier item = CTA « Prendre un rendez-vous » */
.main-menu > .menu > li:last-child {
  margin-left: auto;
}

.main-menu > .menu > li:last-child > a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0 0 0.5rem;
  font-weight: 600;
}

.main-menu > .menu > li:last-child > a::after {
  content: '';
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--nav-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / 58% no-repeat;
  transition: transform var(--transition), background-color var(--transition);
}

.main-menu > .menu > li:last-child > a:hover::after {
  transform: rotate(45deg);
  background-color: var(--nav-color-hover);
}

/* Sous-menu (maquette menu_hover) : panneau blanc 2 colonnes, ~10px sous la barre,
   texte aligne sur celui de l'element parent, trait vert en tete de chaque colonne */
.main-menu .menu .sub-menu {
  --submenu-gap: 0.95rem; /* bas de l'element -> bas de la barre + 10px */
  position: absolute;
  top: calc(100% + var(--submenu-gap));
  left: -2.3rem;
  z-index: 999;
  display: grid;
  grid-template-columns: repeat(2, 13rem);
  gap: 1.05rem 2.2rem;
  padding: 1.6rem 2.3rem 1.4rem;
  background-color: var(--color-light);
  border-radius: 0.4rem;
  box-shadow: 0 6px 24px rgba(17, 62, 95, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}

/* pont invisible : le sous-menu reste ouvert quand la souris traverse l'espace */
.main-menu .menu .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--submenu-gap);
}

.main-menu .menu .menu-item-has-children:hover > .sub-menu,
.main-menu .menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1440px) {
  /* sous-menus plus etroits, tous alignes sur le texte de leur parent (comme a 1920) :
     la version etroite tient dans l'ecran jusqu'a 1025px, y compris pour « Outils » */
  .main-menu .menu .sub-menu { grid-template-columns: repeat(2, 11rem); gap: 1rem 1.6rem; padding: 1.4rem 1.8rem 1.3rem; left: -1.8rem; }
  .main-menu > .menu > li > a { font-size: 0.9rem; }
  /* logo 180px (meme proportion que 212x81) et rond fleche du CTA reduit */
  .main-logo img, .custom-logo-link img, .custom-logo { width: 180px; height: 69px; }
  .main-menu > .menu > li:last-child > a::after { width: 2rem; height: 2rem; }
}

/* 1025-1280 : le menu complet doit tenir sur une ligne (hamburger a 1024) */
@media (max-width: 1280px) {
  .main-menu { margin-left: 1.5rem; }
  .main-menu > .menu { padding-left: 1rem; padding-right: 0.5rem; }
  /* un peu plus d'espace entre les liens (21px a 1280, 16px a 1025), possible grace aux marges reduites */
  .main-menu > .menu > li > a { padding-right: clamp(0.7rem, calc(1.96vw - 4px), 1.1rem); font-size: 0.8rem; }
  .main-menu > .menu > li:last-child > a { gap: 0.6rem; }
  .main-menu > .menu > li:last-child > a::after { width: 2rem; height: 2rem; }
  .main-logo img, .custom-logo-link img, .custom-logo { width: 150px; height: 57px; }

  /* colonnes un peu plus etroites : « Outils » garde une marge avec le bord droit a 1025px */
  .main-menu .menu .sub-menu { grid-template-columns: repeat(2, 10.4rem); }
}

.main-menu .menu .sub-menu li { display: block; margin: 0; }

/* trait vert au-dessus de chaque colonne (2 premiers elements) */
.main-menu .menu .sub-menu > li:nth-child(-n+2)::before {
  content: '';
  display: block;
  width: 1.9rem;
  height: 4px;
  margin-bottom: 1.2rem;
  background-color: var(--color-green);
}

/* Montserrat 18/22, marine -> vert au survol (UI kit) */
.main-menu .menu .sub-menu a {
  display: block; /* evite le decalage vertical quand un lien fait 2 lignes */
  font-size: 0.9rem;
  line-height: 1.22;
  color: var(--color-navy);
}

.main-menu .menu .sub-menu a:hover,
.main-menu .menu .sub-menu a:focus-visible,
.main-menu .menu .sub-menu .current-menu-item > a { color: var(--color-green); }

.lang-selector {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.lang-selector a, .lang-selector span {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.lang-selector .lang-current {
  font-weight: 600;
  color: var(--color-primary);
}

/* ========================================
   11. MOBILE MENU
   ======================================== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.hamburger {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-dark);
  position: relative;
  transition: var(--transition);
}

.hamburger::before, .hamburger::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-dark);
  position: absolute;
  transition: var(--transition);
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

.menu-toggle[aria-expanded="true"] .hamburger { background-color: transparent; }
/* X : traits allonges (28px x racine de 2) et recentres pour occuper la meme largeur que les 3 lignes du burger */
.menu-toggle[aria-expanded="true"] .hamburger::before,
.menu-toggle[aria-expanded="true"] .hamburger::after { width: 39.6px; left: -5.8px; }
.menu-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); top: 0; }
.menu-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); top: 0; }

.menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, var(--menu-overlay-opacity));
  backdrop-filter: blur(var(--menu-overlay-blur));
  -webkit-backdrop-filter: blur(var(--menu-overlay-blur));
  z-index: 999;
  opacity: 0;
  /* menu ferme : invisible ET non cliquable (sinon le voile transparent bloque tous les clics de la page) */
  visibility: hidden;
  transition: opacity var(--menu-speed), visibility 0s linear var(--menu-speed);
}

.menu-overlay.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

.mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 85vw;
  max-width: 380px;
  height: 100vh;
  background-color: var(--color-light);
  z-index: 1000;
  transform: translateX(100%);
  /* ferme : cache (ombre qui depassait sur le bord droit, liens atteignables au clavier) */
  visibility: hidden;
  transition: transform var(--menu-speed) ease-out, visibility 0s linear var(--menu-speed);
  overflow-y: auto;
  /* haut : sous la croix du bouton hamburger (qui reste au-dessus du panneau), avec de l'espace ;
     droite : bord du contenu (traits, +) aligne sur le bord droit du X (marge du header + 8px de jeu du bouton 44px) */
  padding: 7rem calc(var(--pad-wide) + 8px + var(--scrollbar-w, 0px)) 1rem 1.25rem;
  color: var(--color-navy);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.mobile-menu.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }

.mobile-menu .menu { padding: 0; }
.mobile-menu .menu li { display: block; border-bottom: 1px solid rgba(0,0,0,0.08); }
.mobile-menu .menu li a { display: block; padding: 0.75rem 0; font-size: 1.1rem; font-weight: 500; color: var(--color-navy); }
.mobile-menu .menu .sub-menu a { padding: 0.6rem 0; font-size: 0.95rem; } /* 2e niveau : plus petit */

/* le lien parent va a sa page ; le bouton + (ajoute en JS) ouvre le sous-menu */
.mobile-menu .menu-item-has-children { position: relative; }
.mobile-menu .menu-item-has-children > a { padding-right: 3rem; }

.mobile-menu .submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: calc(1.1rem * var(--line-height-base) + 1.5rem); /* hauteur de la ligne du lien parent */
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  text-align: right; /* + aligne sur le bord droit du X */
  cursor: pointer;
}

.mobile-menu .submenu-toggle::before { content: '+'; }
.mobile-menu .menu-item-has-children.is-active > .submenu-toggle::before { content: '\2212'; } /* signe moins */

.mobile-menu .sub-menu {
  display: none;
  padding-left: 1rem;
  opacity: 0;
  transition: opacity var(--menu-speed);
}

.mobile-menu .menu-item-has-children.is-active .sub-menu {
  display: block;
  opacity: 1;
}

.mobile-menu .lang-selector {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  display: flex;
  gap: 0.5rem;
}

/* Bouton « Prendre un rendez-vous » a cote du burger : meme style que le CTA du menu desktop
   (texte en gras + rond marine fleche) ; visible seulement avec le menu hamburger */
.header-cta { display: none; }

/* Menu hamburger a partir de 1024px */
@media (max-width: 1024px) {
  #masthead { padding-bottom: 0.9rem; }
  .menu-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; }
  .main-menu { display: none; }
  .mobile-menu { display: block; }
  .menu-overlay { display: block; }

  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;  /* groupe le bouton avec le burger, a droite */
    margin-right: 1.5rem;  /* espace avec le burger */
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--nav-color);
  }

  .header-cta::after {
    content: '';
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--nav-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M8 6h10v10'/%3E%3C/svg%3E") center / 58% no-repeat;
    transition: background-color var(--transition);
  }

  .header-cta:hover::after,
  .header-cta:focus-visible::after { background-color: var(--color-green); }

  .header-cta__short { display: none; }
}

/* petit ecran : libelle court pour garder logo, bouton et burger sur une ligne */
@media (max-width: 480px) {
  .header-cta__long { display: none; }
  .header-cta__short { display: inline; }
  .header-cta { margin-right: 1rem; }
}

/* tres petit ecran (< 400px) : logo un peu reduit pour laisser la place au bouton */
@media (max-width: 400px) {
  .main-logo img, .custom-logo-link img, .custom-logo { width: 130px; height: 50px; }
  .header-cta { margin-right: 0.75rem; }
}

@media (max-width: 340px) {
  .main-logo img, .custom-logo-link img, .custom-logo { width: 112px; height: 43px; }
}

/* ========================================
   12. FOOTER
   ======================================== */
/* Footer : meme grille que les services (maquette) : 4 colonnes de 440px, ecart 17px, a partir
   de 47px ; marge de droite = marge de gauche + ecart (3e colonne au centre de la page)
   logo | heures | tel | copyright */
#colophon {
  background-color: var(--color-light);
  padding: 4.5rem 0 4rem;
  color: var(--color-navy);
}

@media (max-width: 1440px) {
  #colophon { padding-top: 3rem; }
}

@media (max-width: 1280px) {
  #colophon { padding: 2.25rem 0 2.5rem; }
}

#colophon .maxW { max-width: none; }

.siteFooter {
  --grid-pad: var(--pad-wide);
  --grid-gap: 0.85rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem var(--grid-gap);
  padding-left: var(--grid-pad);
  padding-right: calc(var(--grid-pad) + var(--grid-gap));
}

.siteFooter p { color: var(--color-navy); }

/* Logo footer : 306 x 117, haut du logo aligne sur le haut des textes */
.siteFooter__logo img {
  width: 306px;
  height: 117px;
  margin-top: 4px;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 1440 et moins : logo 256px (meme proportion que 306x117) */
@media (max-width: 1440px) {
  .siteFooter__logo img { width: 256px; height: 98px; }
}

/* Montserrat 18/26 */
.siteFooter__heures p,
.siteFooter__contact p {
  font-size: 0.9rem;
  line-height: 1.44;
}

.siteFooter__title { font-weight: 600; margin-bottom: 3px; }
.siteFooter__note { margin-top: 0.5rem; }
/* Montserrat 14/18, coupee apres « periode » comme la maquette */
.siteFooter__heures .siteFooter__note { max-width: 15rem; font-size: 0.7rem; line-height: 1.286; }

.siteFooter__contact p + p { margin-top: 1.35rem; }
.siteFooter__contact strong { font-weight: 600; }
.siteFooter__contact a { color: inherit; font-weight: 600; }
/* survol : vert, comme les autres liens du pied de page */
.siteFooter__contact a:hover,
.siteFooter__contact a:focus-visible { color: var(--color-green); }

/* Colonne legale : copyright en haut, politique en bas */
.siteFooter__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.copyRight p { margin-bottom: 0; font-size: 0.7rem; line-height: 1.8; }
.copyRight a,
.siteFooter__privacy { color: var(--color-navy); text-decoration: underline; }
.siteFooter__privacy { margin-top: auto; font-size: 0.7rem; }
.copyRight a:hover,
.siteFooter__privacy:hover { color: var(--color-green); }

.social-icons { display: inline-flex; gap: 0.5rem; }
.social-icons a { color: var(--color-navy); font-size: 1.1rem; transition: var(--transition); }
.social-icons a:hover { color: var(--color-green); }

/* 1280 et moins : 2 blocs par ligne, alignes sur les sections 50/50 : meme marge de gauche que
   les textes et meme ecart que .contactBlock__inner (Nous joindre) */
@media (max-width: 1280px) {
  .siteFooter {
    --grid-pad: var(--pad-content);
    --grid-gap: 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-right: var(--grid-pad);
  }
}

@media (max-width: 768px) {
  #colophon { padding: var(--spacing-xl) 0; }
  .siteFooter { grid-template-columns: 1fr; gap: 2rem; padding-right: var(--grid-pad); }
  .siteFooter__logo img { width: 224px; height: 85px; }
  /* 13px minimum pour rester lisible (0.7rem = 11.2px avec la base mobile de 16px) */
  .siteFooter__heures .siteFooter__note,
  .copyRight p,
  .siteFooter__privacy { font-size: 0.8125rem; }

  /* une seule colonne : contenu centre */
  .siteFooter { text-align: center; }
  .siteFooter__logo img { margin-left: auto; margin-right: auto; object-position: center; }
  .siteFooter__heures .siteFooter__note { margin-left: auto; margin-right: auto; text-wrap: balance; }
  .siteFooter__legal { align-items: center; }
}

/* ========================================
   13. NINJA FORMS
   ======================================== */
.ninja-forms-wrapper .nf-field-container { margin-bottom: 15px; }
.ninja-forms-wrapper .label-above .nf-field-label { margin-bottom: 2px; }
.ninja-forms-wrapper label { font-size: 14px; font-weight: 500; }

.ninja-forms-wrapper input:not([type="submit"]),
.ninja-forms-wrapper select.ninja-forms-field:not([multiple]),
.ninja-forms-wrapper .list-select-wrap .nf-field-element > div {
  padding: 8px 12px;
  height: auto;
  color: var(--color-dark);
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-sm);
  background-color: var(--color-light);
}

.ninja-forms-wrapper .list-select-wrap .nf-field-element > div { height: 35px; }
.ninja-forms-wrapper .list-radio-wrap .nf-field-element ul { margin-top: 5px; }
.ninja-forms-wrapper .listradio-wrap li,
.ninja-forms-wrapper .list-radio-wrap .nf-field-element li label { margin-bottom: 4px; padding-left: 0; }
.ninja-forms-wrapper .nf-error.field-wrap .nf-field-element:after { display: none; }
.ninja-forms-wrapper .nf-error .nf-error-msg { font-size: 12px; color: #c0392b; }
.ninja-forms-wrapper textarea { background-color: var(--color-light); border: 1px solid var(--color-gray); border-radius: var(--radius-sm); padding: 12px; }

.ninja-forms-wrapper .nf-form-content input[type="submit"],
.ninja-forms-wrapper .ninja-forms-field-button {
  border-radius: var(--radius-full);
  padding: 0.8em 1.6em;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.nf-field-container.subForm { background-color: var(--color-light); padding: 15px; }

/* ========================================
   14. FLEXIBLE CONTENT BLOCKS
   ======================================== */

/* Banner */
/* Maquette 1920 : marges laterales 200px, cercle 760px, 153px entre cercle et texte */
.homeBanner {
  position: relative;
  overflow: hidden;
  padding: 4.36rem 0 4.85rem;
  background: linear-gradient(to bottom, var(--color-light) 60%, #F6FBF9 84%, var(--color-green-pale) 100%); /* courbe de la maquette */
}

.homeBanner .maxW { max-width: 1920px; }

.homeBanner .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.homeBanner__inner {
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(18rem, 1fr); /* cercle 760px a 1920 */
  gap: clamp(2rem, 8vw, 7.65rem);
  align-items: center;
}

.homeBanner__media { position: relative; }

.homeBanner__circle {
  width: 100%;
  aspect-ratio: 760 / 720; /* ovale leger, comme la maquette */
  border-radius: 50%;
  overflow: hidden;
}

/* cadrage de la maquette : photo a sa taille reelle (1163x776 pour un cercle de 760),
   decalee de -116px / -52px ; en % de la largeur du cercle pour suivre toutes les tailles */
.homeBanner__img {
  width: 153.03%;
  max-width: none;
  height: auto;
  margin: -6.84% 0 0 -15.26%;
}

/* Alignees sur le bord gauche du cercle, proportionnelles a sa taille :
   153px de large et 53px du bas pour un cercle de 760x720 (maquette) */
.homeBanner__shapes {
  position: absolute;
  left: 0;
  bottom: 7.36%;
  width: 20.13%;
  height: auto;
}

.homeBanner__content {
  max-width: 31rem;
  color: var(--color-navy);
}

.homeBanner__content h1 {
  font-size: clamp(2rem, 3.15vw, 3rem); /* 60px a 1920 */
  color: var(--color-navy);
  margin-bottom: 0.95rem;
}

/* Sous-titre : Montserrat Medium 25/28 vert */
.homeBanner__content h2 {
  font-family: var(--font-family);
  font-weight: 500;
  /* 25px jusqu'a 1440, puis diminue au rythme des titres H2, 20px minimum */
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 0.9rem;
}

.homeBanner__content p { color: var(--color-navy); }
.homeBanner__content .btn { margin-top: 2.1rem; }

/* 1024 et moins : moins d'espace sous le menu, autour de la section et au-dessus du bouton */
@media (max-width: 1024px) {
  .homeBanner { padding: 1.5rem 0 3rem; }
  .homeBanner__content .btn { margin-top: 1.3rem; }
}

/* 1024 et moins : une colonne (cercle centre, texte dessous). En 2 colonnes, le texte garde 360px
   minimum et le cercle tombait a ~210px vers 770px ; ici il reste autour de 420px (21rem) */
@media (max-width: 1024px) {
  .homeBanner__inner { grid-template-columns: 1fr; gap: 2rem; }
  .homeBanner__media { margin: 0 auto; width: 100%; max-width: 21rem; }
  .homeBanner__content { max-width: none; }
  .homeBanner__content h1 { margin-bottom: 1.25rem; }
}

@media (max-width: 768px) {
  .homeBanner { padding: var(--spacing-md) 0 var(--spacing-xl); }
  .homeBanner__inner { gap: var(--spacing-lg); }
  .homeBanner__media { max-width: 26rem; } /* 416px avec la base mobile de 16px */
  .homeBanner__content h1 { font-size: 2rem; }
}

/* Services juridiques
   Maquette 1920 : marges 47px, 4 colonnes de 440px, ecarts 18px / 30px, cartes 361px */
.servicesBlock {
  position: relative;
  padding: 4.6rem 0 4.75rem;
  background-color: var(--color-navy);
  border-bottom: 1rem solid var(--color-green);
  color: var(--color-light);
}

/* Motif de gouttes en bas de section */
.servicesBlock::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* hauteur = nombre entier de rangees (1 rangee = 46.25px, tuile = 2 rangees) et motif
     cale en haut : la premiere rangee n'est jamais coupee */
  --pattern-rows: 6;
  --pattern-shift: 9px;  /* > 0 : motif remonte ; < 0 : motif descend (derniere rangee coupee) */
  --pattern-x: -10px;
  height: calc(var(--pattern-rows) * 46.25px + var(--pattern-shift));
  background: var(--pattern-gouttes) left var(--pattern-x) top 0 / 85px 92.5px repeat;
  pointer-events: none;
}

.servicesBlock .maxW { max-width: none; }

/* Grille de la maquette : colonnes de 440px, ecart 17px, a partir de 47px. La marge de droite
   = marge de gauche + ecart : la 3e colonne demarre pile au centre de la page (961px a 1920),
   alignee avec les textes de droite des autres sections */
.servicesBlock__grid {
  --grid-pad: var(--pad-wide);
  --grid-gap: 0.85rem;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(18.05rem, auto);
  gap: 1.45rem var(--grid-gap);
  padding-left: var(--grid-pad);
  padding-right: calc(var(--grid-pad) + var(--grid-gap));
}

/* Texte aligne sur celui de la banniere (200px du bord a 1920) */
.servicesBlock__intro {
  grid-column: span 2;
  align-self: start;
  max-width: 38rem;
  padding: 2.55rem 0 0 clamp(0px, 8vw, 7.65rem);
}

.servicesBlock__intro h2 {
  color: var(--color-light);
  margin-bottom: 1.05rem;
}

.servicesBlock__intro p { color: var(--color-light); }
.servicesBlock__intro .btn { margin-top: 2.1rem; }

/* 1024 et moins (grille) : moins de marges et moins d'espace au-dessus du bouton */
@media (max-width: 1024px) {
  .servicesBlock--grille { padding: 3rem 0 3.25rem; }
  .servicesBlock__intro .btn { margin-top: 1.3rem; }
}

@media (max-width: 1440px) {
  .servicesBlock__intro { max-width: 30rem; }
}

/* Cartes */
.serviceCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.5rem;
  padding: 2.5rem 2rem 2.5rem 2.5rem;
  border-radius: 0.8rem;
  color: var(--color-navy);
  --swap-speed: 0.35s;
}

.serviceCard.is-green { background-color: var(--color-green); }
.serviceCard.is-white { background-color: var(--color-light); }

/* Rond fleche : fond = background-color, fleche = currentColor */
.serviceCard__arrow {
  position: absolute;
  top: 1rem;
  right: 0.85rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-light);
  transition: background-color var(--swap-speed) ease, color var(--swap-speed) ease;
}

.serviceCard__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-diag) center / 55% no-repeat;
          mask: var(--icon-arrow-diag) center / 55% no-repeat;
}

/* la fleche prend toujours la couleur du fond de la carte */
.serviceCard.is-green .serviceCard__arrow { color: var(--color-green); }
.serviceCard.is-white .serviceCard__arrow { background-color: var(--color-green); color: var(--color-light); }

/* UI kit survol : carte verte -> rond blanc / fleche verte ; carte blanche -> rond marine */
.serviceCard.is-green:hover .serviceCard__arrow,
.serviceCard.is-green:focus-visible .serviceCard__arrow { background-color: var(--color-light); color: var(--color-green); }
.serviceCard.is-white:hover .serviceCard__arrow,
.serviceCard.is-white:focus-visible .serviceCard__arrow { background-color: var(--color-navy); }

/* Cartes avec description : 3 rangees (espace libre / icone / texte). Le « sizer » invisible
   (hauteur de l'icone + description) couvre les 3 rangees : la carte a d'emblee la hauteur de l'etat
   survol et c'est l'espace libre du haut qui absorbe la bascule -> l'icone remonte, la carte ne grandit pas */
.serviceCard.has-desc {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 0;
}

.serviceCard.has-desc .serviceCard__icon { grid-row: 2; grid-column: 1; margin-bottom: 1.5rem; }
.serviceCard.has-desc .serviceCard__body { grid-row: 3; grid-column: 1; }

.serviceCard__sizer {
  grid-row: 1 / 4;
  grid-column: 1;
  padding-top: calc(2.6rem + 1.5rem); /* icone + ecart */
  visibility: hidden;
  pointer-events: none;
}

/* Bascule titre -> description : chaque bloc anime sa propre hauteur (grille 1 rangee 1fr <-> 0fr),
   la hauteur totale passe en douceur du titre a la description et l'icone remonte sans saut */
.serviceCard__body {
  display: flex;
  flex-direction: column;
}

.serviceCard__swap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--swap-speed) ease, opacity var(--swap-speed) ease;
}

.serviceCard__swap > * { min-height: 0; }

/* le repli a 0fr exige overflow: hidden (cartes avec description seulement) ; padding + marge negative :
   la zone de decoupe deborde un peu du texte sans changer la mise en page -> accents, jambages et
   lettres en bout de ligne ne sont jamais rognes */
.serviceCard.has-desc .serviceCard__swap > * {
  overflow: hidden;
  padding: 0.15em 0.1em;
  margin: -0.15em -0.1em;
}

.serviceCard__swap:last-child:not(:first-child) { grid-template-rows: 0fr; opacity: 0; }

.serviceCard.has-desc:hover .serviceCard__swap:first-child,
.serviceCard.has-desc:focus-visible .serviceCard__swap:first-child { grid-template-rows: 0fr; opacity: 0; }
.serviceCard.has-desc:hover .serviceCard__swap:last-child,
.serviceCard.has-desc:focus-visible .serviceCard__swap:last-child { grid-template-rows: 1fr; opacity: 1; }

/* Montserrat 20/28 */
.serviceCard__desc {
  color: var(--color-navy);
}

/* Ecrans tactiles (pas de survol) : titre et description affiches ensemble */
@media (hover: none) {
  .serviceCard.has-desc .serviceCard__body { gap: 0.75rem; }
  .serviceCard.has-desc .serviceCard__swap { grid-template-rows: 1fr; opacity: 1; }
  .serviceCard__sizer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .serviceCard { --swap-speed: 0s; }
}

/* SVG inline : prend la couleur du texte (utiliser currentColor dans les SVG) */
.serviceCard__icon {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--color-navy);
}

@media (max-width: 1024px) {
  .serviceCard__icon { width: 2.2rem; height: 2.2rem; }
}

.serviceCard__icon svg,
.serviceCard__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bagnard 28/32 (cartes services et outils) */
.serviceCard__title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.143;
  color: var(--color-navy);
}

/* l'image remplit sa case sans imposer sa hauteur a la rangee */
.servicesBlock__image {
  position: relative;
  grid-column: span 2;
  border-radius: 0.8rem;
  overflow: hidden;
}

.servicesBlock__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 1680 et moins : marge interieure uniforme */
@media (max-width: 1680px) {
  .serviceCard { padding: 1.5rem; }
}

/* 1025-1320 : cartes trop etroites (< 288px) pour « des successions » en 28px sur une ligne -> titre fluide */
@media (min-width: 1025px) and (max-width: 1320px) {
  .servicesBlock__grid .serviceCard { padding-left: 1.1rem; padding-right: 1.1rem; }
  .servicesBlock__grid .serviceCard__title { font-size: clamp(1.1rem, calc(3.3vw - 11px), 1.4rem); }
}

@media (max-width: 1024px) {
  /* 1re rangee (texte d'intro) a la hauteur de son contenu, la hauteur mini ne vaut que pour les cartes */
  .servicesBlock__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(15rem, auto); }
  .servicesBlock__intro { padding: 0 0 0.5rem; } /* + gap de la grille (1.45rem) avant les cartes */
  .servicesBlock__image { min-height: 18rem; }
}

@media (max-width: 768px) {
  .servicesBlock { padding: var(--spacing-xl) 0; }
  .servicesBlock::after { --pattern-rows: 4; }
  .servicesBlock__grid { grid-template-columns: 1fr; grid-auto-rows: minmax(12rem, auto); gap: 1rem; padding-right: var(--grid-pad); }
  .servicesBlock__intro,
  .servicesBlock__image { grid-column: auto; }
}

/* 3 cartes seulement : l'image garde ses 2 colonnes a droite, la 3e carte se place juste a cote
   (la case vide tombe sous l'intro) */
.servicesBlock__grid > .serviceCard:nth-child(4):has(+ .servicesBlock__image) { grid-column: 2; }
.servicesBlock__grid > .serviceCard:nth-child(4) + .servicesBlock__image { grid-column: 3 / span 2; }

@media (max-width: 1024px) {
  .servicesBlock__grid > .serviceCard:nth-child(4):has(+ .servicesBlock__image) { grid-column: auto; }
  .servicesBlock__grid > .serviceCard:nth-child(4) + .servicesBlock__image { grid-column: span 1; }
}

@media (max-width: 768px) {
  .servicesBlock__grid > .serviceCard:nth-child(4) + .servicesBlock__image { grid-column: auto; }
}

/* Disposition « rangee » (ex. Outils et conseils pratiques)
   Maquette 1920 : conteneur 200px, en-tete titre+bouton | texte a 961px, 4 cartes 359x295 ecart 29px */
.servicesBlock--rangee { padding-top: 4.65rem; }
.servicesBlock--rangee::after { --pattern-rows: 5; --pattern-shift: -20px; --pattern-x: 0px; }
.servicesBlock--rangee .maxW { max-width: 1920px; }

.servicesBlock__rangee {
  position: relative;
  z-index: 1;
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.servicesBlock__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.servicesBlock__headLeft { padding-right: 2rem; }
.servicesBlock__headLeft h2 { color: var(--color-light); margin-bottom: 1.85rem; }
.servicesBlock__headRight { max-width: 38rem; }
.servicesBlock__headRight p { color: var(--color-light); }

.servicesBlock__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.45rem;
  margin-top: 3.4rem;
}

/* Titre fluide : 28px quand la carte le permet, sinon reduit juste assez pour garder « Testament notarie »
   sur une ligne (evite les titres sur 3 lignes) */
.servicesBlock--rangee .serviceCard__title { font-size: clamp(0.95rem, calc(2.28vw - 10.1px), 1.4rem); }

/* Cartes blanches, icone et titre a hauteur fixe */
.servicesBlock--rangee .serviceCard {
  min-height: 14.75rem;
  justify-content: flex-start;
  gap: 1.15rem;
  padding: 6.8rem 1.65rem 1.5rem;
  transition: background-color var(--swap-speed) ease;
}

.servicesBlock--rangee .serviceCard__icon { width: 2.1rem; height: 2.1rem; }
.servicesBlock--rangee .serviceCard__arrow { top: 0.75rem; right: 0.7rem; width: 1.3rem; height: 1.3rem; }

/* UI kit survol : carte blanche -> verte, rond vert -> blanc / fleche verte */
.servicesBlock--rangee .serviceCard:hover,
.servicesBlock--rangee .serviceCard:focus-visible { background-color: var(--color-green); }
.servicesBlock--rangee .serviceCard:hover .serviceCard__arrow,
.servicesBlock--rangee .serviceCard:focus-visible .serviceCard__arrow { background-color: var(--color-light); color: var(--color-green); }

/* 1440 et moins : cartes plus etroites */
@media (max-width: 1440px) {
  .servicesBlock__cards { gap: 1rem; }
  .servicesBlock--rangee .serviceCard { padding-left: 1.3rem; padding-right: 1.3rem; }
  .servicesBlock--rangee .serviceCard__title { font-size: clamp(0.95rem, calc(2.28vw - 9px), 1.4rem); }
}

/* 1280 et moins : marges laterales reduites pour garder 4 cartes lisibles */
@media (max-width: 1280px) {
  .servicesBlock__rangee { padding-left: clamp(var(--gutter), 5vw, 4rem); padding-right: clamp(var(--gutter), 5vw, 4rem); }
  .servicesBlock__cards { gap: 1rem; }
  .servicesBlock--rangee .serviceCard { padding-left: 1.1rem; padding-right: 1.1rem; }
  .servicesBlock--rangee .serviceCard__title { font-size: clamp(0.95rem, calc(2.59vw - 6.8px), 1.4rem); }
}

@media (max-width: 1024px) {
  /* empilement : titre, texte, bouton */
  .servicesBlock__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-md); }
  .servicesBlock__headLeft { display: contents; }
  .servicesBlock__headLeft h2 { order: 1; margin-bottom: 0; }
  .servicesBlock__headRight { order: 2; padding-top: 0; max-width: none; }
  .servicesBlock__headLeft .btn { order: 3; }
  .servicesBlock__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicesBlock--rangee .serviceCard__title { font-size: 1.4rem; } /* 2 colonnes : cartes assez larges */
}

@media (max-width: 768px) {
  .servicesBlock__cards { gap: 1rem; margin-top: var(--spacing-lg); }
  .servicesBlock--rangee .serviceCard { min-height: 12rem; padding-top: 4rem; } /* titres sur 1 ou 2 lignes : meme hauteur */
}

/* 2 colonnes jusqu'a 600px, puis 1 colonne */
@media (max-width: 599px) {
  .servicesBlock__cards { grid-template-columns: 1fr; }
}

/* Image pleine largeur + texte (ex. Notre mission)
   Maquette 1920 : image 557px de haut, colonnes a 200px et 961px, gouttes 174px qui chevauchent l'image */
.imageTexte {
  padding-bottom: 6.6rem;
  color: var(--color-navy);
}

/* accueil, 1025-1280 : moins d'espace sous la section et au-dessus du texte de droite
   (1024 et moins : marges uniformes en fin de feuille) */
@media (min-width: 1025px) and (max-width: 1280px) {
  .home .imageTexte { padding-bottom: 4.5rem; }
  .home .imageTexte__right { padding-top: 1.5rem; }
}

.imageTexte__image {
  height: clamp(16rem, 29vw, 28rem);
  overflow: hidden;
}

.imageTexte__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.imageTexte .maxW { max-width: 1920px; }

.imageTexte .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.imageTexte__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

/* colonne droite au milieu de la page (961px a 1920)
   colonne gauche calee en haut : gouttes toujours a cheval sur l'image et titre/intro toujours juste
   sous les gouttes (la droite reste alignee en bas ; a 1920 la gauche est la plus haute -> maquette) */
.imageTexte__left { align-self: start; max-width: 30rem; padding-right: 2rem; }

/* Gouttes proportionnelles a l'image (meme regle que sa hauteur : 174px pour 557px a 1920) ;
   chevauchement sur l'image (37px) et ecart jusqu'au titre (67px) proportionnels a leur taille */
.imageTexte__shapes {
  --shapes-w: clamp(5rem, 9.06vw, 8.7rem);
  display: block;
  width: var(--shapes-w);
  height: auto;
  margin: calc(var(--shapes-w) * -0.213) 0 calc(var(--shapes-w) * 0.385);
  position: relative;
}

.imageTexte__left h2 {
  color: var(--color-navy);
  margin-bottom: 1.2rem;
}

/* Montserrat Medium 25/28 */
.imageTexte__intro {
  /* 25px jusqu'a 1440, puis diminue au rythme des titres H2, 20px minimum */
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.12;
}

@media (max-width: 1680px) {
  .imageTexte__intro { line-height: 1.32; }
}

/* espace minimal sous l'image quand le texte de droite est plus haut que la colonne gauche */
/* -2px : la colonne (760px a 1920) manque de 0.4px pour garder « engageons » sur la 2e ligne comme la maquette */
.imageTexte__right { max-width: 38.5rem; margin-right: -2px; padding-top: 2.5rem; }
.imageTexte__right p { color: var(--color-navy); }
.imageTexte__right .btn { margin-top: 2.1rem; }

@media (max-width: 768px) {
  .imageTexte { padding-bottom: var(--spacing-xl); }
  .imageTexte__inner { grid-template-columns: 1fr; gap: var(--spacing-lg); }
  .imageTexte__left { padding-right: 0; }
  .imageTexte__right { padding-top: 0; }
}

/* Équipe
   Maquette 1920 : panneau gris sur la moitie gauche, photos ovales 367x347 sur fond vert,
   bouton fleche 90px (marine -> vert au survol), membres espaces de 836px */
.teamBlock {
  --photo: clamp(10rem, 19.1vw, 18.35rem);
  --pad: var(--pad-content);
  position: relative;
  padding: 4.65rem 0 4.7rem;
  margin-bottom: 6.75rem;
  color: var(--color-navy);
}

.teamBlock::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  background-color: var(--color-gray-pale);
  border-radius: 0 0.8rem 0.8rem 0;
}

.teamBlock .maxW { max-width: 1920px; }

.teamBlock .container {
  position: relative;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.teamBlock__title {
  color: var(--color-navy);
  margin-bottom: 1.85rem;
}

.teamBlock__list {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); /* 836px / 684px a 1920 */
  gap: 3rem 0;
}

.teamMember {
  position: relative;
  display: grid;
  grid-template-columns: var(--photo) minmax(0, 1fr);
  column-gap: 2.35rem;
  align-items: center;
  color: var(--color-navy);
}

/* Le 1er membre ne depasse jamais le panneau gris (50% de la largeur, 960px max au-dela de 1920) :
   son nom passe a la ligne plutot que de deborder */
.teamMember:first-child {
  max-width: calc(min(50vw, 960px) - var(--pad) - 2rem);
}

.teamMember__photo {
  width: var(--photo);
  aspect-ratio: 367 / 349; /* ovale leger, comme la maquette */
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-green);
}

/* Photos detourees avec ~10px transparents au-dessus de la tete : on remonte l'image
   (3.3% de sa largeur, proportionnel) pour que les cheveux touchent le haut de l'ovale,
   l'ovale coupe le bas des epaules (comme la maquette) */
.teamMember__photo img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -3.3%;
}

/* image par defaut (motif Situs) : deja aux proportions de l'ovale, pas de decalage */
.teamMember__photo .teamMember__default { margin-top: 0; }

/* Montserrat Medium 32/35 */
.teamMember__name {
  overflow-wrap: break-word;
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.094;
  color: var(--color-navy);
  margin-bottom: 3rem;
}

.teamMember__arrow {
  position: absolute;
  left: var(--photo);
  bottom: 0;
  width: calc(var(--photo) * 0.25);
  height: calc(var(--photo) * 0.25);
  border-radius: 50%;
  background-color: var(--color-navy);
  color: var(--color-light);
  transition: background-color var(--transition);
}

.teamMember__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-thin) center / 52% no-repeat;
          mask: var(--icon-arrow-thin) center / 52% no-repeat;
}

/* Court texte (page Équipe) : nom a cote de la photo, texte dessous sur toute la largeur du membre,
   fleche au bas de la photo (et non plus au bas du membre) */
.teamMember--texte .teamMember__info { display: contents; }
.teamMember--texte .teamMember__name { margin-bottom: 0; }
.teamMember--texte .teamMember__arrow { top: calc(var(--photo) * 349 / 367 - var(--photo) * 0.25); bottom: auto; }

.teamMember__text {
  grid-column: 1 / -1;
  max-width: 36rem;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-navy);
}

/* UI kit survol : rond marine -> vert */
a.teamMember:hover .teamMember__arrow,
a.teamMember:focus-visible .teamMember__arrow { background-color: var(--color-green); }


/* 1280 et moins : photo plus petite pour laisser le nom sur 2 lignes */
@media (max-width: 1280px) {
  .teamBlock { --photo: clamp(9rem, 16vw, 18.35rem); }
  .teamMember { column-gap: 1.5rem; }
  .teamMember__name { font-size: 1.1rem; }
}

/* accueil, 769-1280 : photos un peu plus grandes (le mobile garde 9.5rem) */
@media (min-width: 769px) and (max-width: 1280px) {
  .home .teamBlock { --photo: clamp(9rem, 18vw, 18.35rem); }
}

/* 1024 et moins : panneau pleine largeur, membres empiles */
@media (max-width: 1024px) {
  .teamMember:first-child { max-width: none; }
  /* membres cote a cote jusqu'a 769px ; photo : meme regle fluide qu'a 1280 (pas de saut) */
  .teamBlock__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
}

@media (max-width: 768px) {
  .teamBlock { --photo: 9.5rem; padding: var(--spacing-xl) 0; margin-bottom: var(--spacing-xl); }
  /* membres empiles : la separation gris / blanc devient horizontale. Panneau gris pleine largeur,
     et le 2e membre recouvre tout ce qui est sous lui en blanc (depuis le milieu de l'ecart entre les
     membres jusqu'en bas de la section, bords compris ; la section coupe le debordement) */
  .teamBlock { overflow: hidden; }
  .teamBlock::before { width: 100%; border-radius: 0; }
  .teamMember:last-child:not(:first-child) {
    background-color: var(--color-light);
    box-shadow: 0 0 0 100vmax var(--color-light);
    clip-path: inset(-1.5rem -100vmax -100vmax -100vmax); /* 1.5rem = moitie de l'ecart entre membres */
  }
  .teamBlock__list { grid-template-columns: 1fr; }
  .teamMember { column-gap: 1.5rem; }
  .teamMember__name { font-size: 1.15rem; margin-bottom: 1.5rem; }
  .teamMember__text { margin-top: 1.2rem; }
}

/* ========================================
   PAGES INTERIEURES (maquette validee : page À propos)
   ======================================== */

/* Sections pages interieures : memes marges que l'accueil (textes a 200px a 1920) */
.innerBanner .maxW,
.imageAccroche .maxW,
.cardsList .maxW,
.history .maxW { max-width: 1920px; }

.innerBanner .container { position: relative; z-index: 1; } /* au-dessus du motif */

.innerBanner .container,
.imageAccroche .container,
.cardsList .container,
.history .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.imageAccroche__content p + p,
.cardsList__intro p + p { margin-top: 1em; }

/* Banniere interieure : marine, motif de gouttes (2 rangees) et bande verte, comme la section services */
.innerBanner {
  position: relative;
  overflow: hidden;
  padding: 4rem 0 calc(2 * 46.25px + 2.5rem); /* hauteur du motif + marge */
  background-color: var(--color-navy);
  border-bottom: 1rem solid var(--color-green);
  color: var(--color-light);
}

.innerBanner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2 * 46.25px);
  background: var(--pattern-gouttes) left -10px top 0 / 85px 92.5px repeat;
  pointer-events: none;
}


/* meme taille pour tous les titres (celle des titres longs), a toutes les resolutions */
.innerBanner h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.8rem);
  line-height: 1.08;
  color: var(--color-light);
}

@media (max-width: 1440px) {
  .innerBanner { padding: 3rem 0 calc(2 * 12px + 1.75rem); }
}

/* Montserrat Medium 25/28 vert (comme le sous-titre de la banniere d'accueil) */
.innerBanner__lead {
  margin-top: 1.3rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.12;
  color: var(--color-green);
}

/* Image + accroche : meme grille que la liste de cartes (texte aligne sur la 1re carte),
   photo de la hauteur du texte, un peu plus etroite que sa colonne */
.imageAccroche {
  padding: 6rem 0;
  color: var(--color-navy);
}

.imageAccroche__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: stretch;
}

.imageAccroche__media {
  min-height: 22rem;
  margin-right: calc(clamp(2rem, 5vw, 6rem) - 1.5rem); /* 664px de large a 1920 */
  border-radius: 0.8rem;
  overflow: hidden;
}

.imageAccroche__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
}

.imageAccroche__content { max-width: 48rem; align-self: center; }

/* Boite de texte (barre « Titres ») : H1/H2 = phrase d'accroche en Bagnard,
   H3/H4 = petit titre vert, comme la banniere d'accueil (accroche puis petit titre) */
.imageAccroche__content h1,
.imageAccroche__content h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.imageAccroche__content h3,
.imageAccroche__content h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 1.25rem;
}

/* accroche seule (sans petit titre) : plus d'air avant le texte */
.imageAccroche__content :is(h1, h2) + p { margin-top: 0.75rem; }

.imageAccroche__content p { color: var(--color-navy); }

/* Liste de cartes : intro a gauche, cartes blanches 2x2 sur fond gris */
.cardsList {
  padding: 6rem 0;
  background-color: var(--color-gray-pale);
  color: var(--color-navy);
}

.cardsList__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.cardsList__intro { max-width: 34rem; }
.cardsList__intro h2 { color: var(--color-navy); margin-bottom: 1.4rem; }
.cardsList__intro p { color: var(--color-navy); }
.cardsList__intro .btn { margin-top: 2.1rem; }

.cardsList__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cardsList__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.2rem;
  min-height: 12rem;
  padding: 1.65rem;
  background-color: var(--color-light);
  border-radius: 0.8rem;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--color-navy);
}

@media (max-width: 1280px) {
  .cardsList__item { font-size: 20px; }
}

.cardsList__icon { width: 2.1rem; height: 2.1rem; object-fit: contain; }

/* 1600 et moins : colonne des cartes plus large (60 / 40) pour que les titres restent dans les cartes ;
   1200 et moins : intro au-dessus, cartes 2 x 2 en dessous */
@media (max-width: 1600px) {
  .cardsList__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (max-width: 1200px) {
  .cardsList__inner { grid-template-columns: 1fr; }
  .cardsList__intro { max-width: none; }
}

/* Historique : zigzag de cartes autour d'une ligne verte, derniere etape en vert pale */
.history {
  padding: 6rem 0;
  color: var(--color-navy);
}

.history__title {
  color: var(--color-navy);
  margin-bottom: 3rem;
  text-align: center;
}

.history__list {
  position: relative;
  display: grid;
  gap: 1.5rem;
}

.history__list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--color-green);
}

.history__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* point sur la ligne */
.history__item::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2rem;
  width: 1.3rem;
  height: 1.3rem;
  margin-left: -0.65rem;
  border-radius: 50%;
  background-color: var(--color-navy);
  box-shadow: 0 0 0 0.4rem var(--color-light);
}

.history__card {
  grid-column: 1;
  margin-right: 3.5rem;
  padding: 1.8rem 2rem;
  background-color: var(--color-gray-pale);
  border-radius: 0.8rem;
  text-align: right;
}

.history__item:nth-child(even) .history__card {
  grid-column: 2;
  margin: 0 0 0 3.5rem;
  text-align: left;
}

.history__card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1;
  margin-bottom: 0.8rem;
  color: var(--color-navy);
}

/* Montserrat 18/26 */
.history__card p {
  font-size: 0.9rem;
  line-height: 1.44;
  color: var(--color-navy);
}

.history__item--now::before { background-color: var(--color-green); }
.history__item--now .history__card { background-color: var(--color-green-pale); }

/* Equipe : bouton sous les membres */
.teamBlock__cta { position: relative; margin-top: 3rem; }

/* Equipe en derniere section (avant le footer) : marge reduite ; sur l'accueil elle precede la section Outils */
.site-main > .teamBlock:last-child { margin-bottom: 2rem; }

@media (max-width: 1024px) {
  .imageAccroche__inner { grid-template-columns: 1fr; }
  .imageAccroche__media { min-height: 0; margin-right: 0; aspect-ratio: 16 / 9; }

  /* historique : ligne a gauche, cartes empilees */
  .history__title { text-align: left; }
  .history__list::before { left: 0.65rem; }
  .history__item { grid-template-columns: 1fr; padding-left: 2.8rem; }
  .history__item::before { left: 0.65rem; }
  .history__card,
  .history__item:nth-child(even) .history__card { grid-column: 1; margin: 0; text-align: left; }
}

@media (max-width: 768px) {
  .innerBanner { padding: 2.5rem 0 calc(2 * 46.25px + 2rem); }
  .imageAccroche,
  .cardsList,
  .history { padding: 3.5rem 0; }
  .cardsList__list { grid-template-columns: 1fr; }
  .cardsList__item { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; }
  .site-main > .teamBlock:last-child { margin-bottom: 1.5rem; }
}

/* Cartes de services (page « Nos services ») : 4 cartes grises sur une rangee ;
   toute la carte est un lien */
.svcGrid .maxW,
.svcCta .maxW { max-width: 1920px; }

.svcGrid .container,
.svcCta .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.svcGrid { padding: 6rem 0; }

.svcGrid__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.svcCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 2.4rem 1.8rem 2rem;
  border-radius: 0.8rem;
  background-color: var(--color-gray-pale);
  color: var(--color-navy);
  --swap-speed: 0.35s;
}

.svcCard__icon { width: 2.2rem; height: 2.2rem; object-fit: contain; margin-bottom: 0.2rem; }
.svcCard__title { font-size: 1.5rem; line-height: 1.1; color: var(--color-navy); }
.svcCard p { font-size: 0.95rem; margin-bottom: 0.6rem; color: var(--color-navy); }

/* boutons alignes en bas des cartes d'une meme rangee */
.svcCard__btn { margin-top: auto; }

/* rond fleche (comme les cartes de l'accueil) : fond = background-color, fleche = currentColor */
.svcCard__arrow {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-green);
  color: var(--color-light);
  transition: background-color var(--swap-speed) ease, color var(--swap-speed) ease;
}

.svcCard__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-diag) center / 55% no-repeat;
          mask: var(--icon-arrow-diag) center / 55% no-repeat;
}

/* survol : rond marine ; le faux bouton suit la carte */
.svcCard:hover .svcCard__arrow,
.svcCard:focus-visible .svcCard__arrow { background-color: var(--color-navy); }
a.svcCard:hover .svcCard__btn { background-color: var(--color-green); }
.svcCard:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; }

/* Appel a l'action : bandeau vert pale, texte aligne sur la 2e colonne (comme « Notre mission ») */
.svcCta {
  padding: 5rem 0;
  background-color: var(--color-green-pale);
  color: var(--color-navy);
}

@media (max-width: 1440px) {
  .svcCta { padding: 3rem 0; }
}

.svcCta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.svcCta h2 { color: var(--color-navy); }
.svcCta__content p { max-width: 38rem; color: var(--color-navy); }
.svcCta__content p + p { margin-top: 1em; }
.svcCta__content .btn { margin-top: 2.1rem; }

/* appel a l'action en derniere section (avant le footer) */
.site-main > .svcCta:last-child { margin-bottom: 2rem; }

/* Page 404 : bouton d'accueil, puis liens vers les pages utiles */
.page404__actions { margin-top: 2.1rem; }
.svcCta__content .page404__actions .btn { margin-top: 0; }
.page404__liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.page404__liens a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.page404__liens a:hover { color: var(--color-green); }

/* 1680 et moins : cartes plus larges (marges du header), ecart et marge interieure reduits */
@media (max-width: 1680px) {
  .svcGrid .container {
    padding-left: var(--pad-wide);
    padding-right: var(--pad-wide);
  }
  .svcGrid__list { gap: 0.9rem; }
  .svcCard { padding: 1.5rem; }
  .svcCard__arrow { top: 1rem; right: 1rem; }
}

/* 4 colonnes trop etroites : 2x2 */
@media (max-width: 1280px) {
  .svcGrid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .svcCta__inner { grid-template-columns: 1fr; gap: 1.2rem; }
}

@media (max-width: 768px) {
  .svcGrid { padding: 3rem 0; }
  .svcGrid__list { grid-template-columns: 1fr; }
  .svcCard__title { font-size: 1.6rem; }
  .site-main > .svcCta:last-child { margin-bottom: 1.5rem; }
}

/* Services detailles (page « Nos services ») : sommaire, puis une section par service
   (goutte + titre colles au defilement a gauche, texte a droite), fonds alternes blanc / vert pale */
.svcDetailNav .maxW,
.svcDetail .maxW { max-width: 1920px; }

.svcDetailNav .container,
.svcDetail .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

/* Sommaire : bande grise sous la banniere, un lien par service.
   Colle en haut de l'ecran, tel quel, le long des sections (parent .svcDetails, qui s'arrete avant
   l'appel a l'action). main.js donne sa hauteur a --svc-nav-h (ancres, titres colles des services). */
.svcDetailNav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 2.2rem 0;
  background-color: var(--color-gray-pale);
}

/* ancre d'un service : sous le sommaire colle */
.svcDetails .svcDetail { scroll-margin-top: var(--svc-nav-h, 0px); }

.svcDetailNav__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.svcDetailNav__link {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.1rem 1.4rem;
  border-radius: 0.8rem;
  background-color: var(--color-light);
  color: var(--color-navy);
  text-decoration: none;
  transition: background-color 0.2s;
}

/* fleche vers le bas : la section est plus loin sur la meme page */
.svcDetailNav__link::after {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 0.6rem;
  margin-left: auto;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transform: rotate(90deg);
}

.svcDetailNav__link:hover { background-color: var(--color-green-pale); }
.svcDetailNav__link:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 3px; }

.svcDetailNav__icon { flex: none; display: flex; }
.svcDetailNav__icon svg,
.svcDetailNav__icon img { width: 2rem; height: 2rem; }

.svcDetailNav__title { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.1; }

/* Une section par service */
.svcDetail { padding: 6rem 0; color: var(--color-navy); }
.svcDetail--alt { background-color: var(--color-green-pale); }

.svcDetail__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.svcDetail__head { position: sticky; top: calc(var(--svc-nav-h, 0px) + 2rem); }

/* goutte verte du site (--icon-drop, 68 x 86), icone centree dans sa partie ronde */
.svcDetail__drop {
  position: relative;
  display: block;
  width: 5.5rem;
  height: 6.95rem;
  margin-bottom: 1.6rem;
  background: var(--icon-drop) center / contain no-repeat;
}

.svcDetail__drop svg,
.svcDetail__drop img {
  position: absolute;
  left: 50%;
  top: 60.5%;
  width: 2.6rem;
  height: 2.6rem;
  transform: translate(-50%, -50%);
}

.svcDetail h2 { color: var(--color-navy); max-width: 30rem; }

.svcDetail__body > * { max-width: 38rem; color: var(--color-navy); }
.svcDetail__body > * + * { margin-top: 1em; }

/* premier paragraphe = introduction du service */
.svcDetail__body > p:first-child { font-size: var(--fs-lead); line-height: 1.35; }
.svcDetail__body > p:first-child + * { margin-top: 1.4em; }
.svcDetail__body > .promiseLine { margin-top: 2.2rem; }

/* Phrase d'engagement (menu « Formats ») : conclusion en serif, precedee d'une goutte */
.promiseLine {
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--color-navy);
}

.promiseLine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 0.75rem;
  height: 0.95rem;
  background: var(--icon-drop) center / contain no-repeat;
}

@media (max-width: 1024px) {
  .svcDetail__inner { grid-template-columns: 1fr; gap: 2rem; }
  .svcDetail__head { position: static; display: flex; align-items: center; gap: 1.2rem; }
  .svcDetail__drop { flex: none; width: 3.9rem; height: 4.95rem; margin-bottom: 0; }
  .svcDetail__drop svg,
  .svcDetail__drop img { width: 1.9rem; height: 1.9rem; }
}

@media (max-width: 768px) {
  .svcDetailNav { padding: 1.5rem 0; }
  .svcDetail { padding: 3.5rem 0; }
  .promiseLine { font-size: 1.2rem; }
}

/* Formulaire (page « Prendre un rendez-vous ») : intro a gauche, Ninja Forms dans une carte grise a droite */
.formBlock .maxW { max-width: 1920px; }

.formBlock .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

.formBlock { padding: 6rem 0; color: var(--color-navy); }

.formBlock__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* formulaire plus large : 2 champs par rangee */
  gap: 3rem;
  align-items: start;
}

.formBlock__intro h2 { max-width: 30rem; margin-bottom: 1.6rem; color: var(--color-navy); }
.formBlock__intro p { max-width: 32rem; color: var(--color-navy); }
.formBlock__intro p + p { margin-top: 1em; }
.formBlock__intro a { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.formBlock__intro a:hover { color: var(--color-green); }

.formBlock__card { padding: 2.6rem 2.8rem; background-color: var(--color-gray-pale); border-radius: 0.8rem; }

/* champs Ninja Forms */
.formBlock .nf-form-fields-required { margin-bottom: 1.6rem; font-size: 0.85rem; }
.formBlock nf-cells { display: flex; gap: 1.2rem; }
.formBlock .nf-cell { flex: 1 1 0; min-width: 0; width: auto !important; padding: 0 !important; } /* largeurs du constructeur ignorees : gap */
.formBlock .nf-field-container { margin-bottom: 1.3rem; }
.formBlock .label-above .nf-field-label { margin-bottom: 0.45rem; }
.formBlock .nf-field-label label,
.formBlock .nf-field-label .nf-label-span { font-size: 0.85rem; font-weight: 600; color: var(--color-navy); }
.formBlock .ninja-forms-req-symbol { color: var(--color-navy); }

.formBlock .nf-form-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.formBlock .nf-form-content select,
.formBlock .nf-form-content textarea {
  width: 100%;
  height: auto;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-navy) 22%, transparent);
  border-radius: var(--radius-sm);
  background-color: var(--color-light);
  font-family: var(--font-family);
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formBlock .nf-form-content textarea { height: 9rem; resize: vertical; }

/* 1280 et moins : cases et textes du formulaire plus compacts */
@media (max-width: 1280px) {
  .formBlock .nf-field-label label,
  .formBlock .nf-field-label .nf-label-span { font-size: 0.8rem; }
  .formBlock .nf-form-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .formBlock .nf-form-content select,
  .formBlock .nf-form-content textarea { padding: 0.55rem 0.85rem; font-size: 0.85rem; }
  .formBlock .nf-form-content textarea { height: 7rem; }
}

/* liste deroulante : fleche marine */
.formBlock .nf-form-content select {
  padding-right: 2.6rem;
  -webkit-appearance: none;
          appearance: none;
  background: var(--color-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23113E5F' stroke-width='1.6'/%3E%3C/svg%3E") right 1rem center / 0.75rem no-repeat;
  cursor: pointer;
}

.formBlock .nf-form-content input:focus,
.formBlock .nf-form-content select:focus,
.formBlock .nf-form-content textarea:focus {
  outline: none;
  border-color: var(--color-navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-green) 45%, transparent);
}

/* cases a cocher (moments preferes, consentement) */
.formBlock .nf-form-content input[type="checkbox"] {
  width: 1.1rem !important;
  height: 1.1rem;
  margin: 0.15em 0 0;
  accent-color: var(--color-navy);
  cursor: pointer;
}

.formBlock .listcheckbox-wrap ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; }
.formBlock .listcheckbox-wrap li { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 !important; padding: 0 !important; }
.formBlock .listcheckbox-wrap li input { float: none; margin: 0.15em 0 0 !important; }
.formBlock .listcheckbox-wrap li label { margin: 0 !important; color: var(--color-navy); }

/* consentement : case a gauche, texte a droite */
.formBlock .checkbox-container .field-wrap { flex-direction: row; align-items: flex-start; gap: 0.7rem; }
.formBlock .checkbox-container .nf-field-element { order: 5; flex: 0 0 auto; width: auto; }
.formBlock .checkbox-container .nf-field-label { order: 10; width: auto; padding: 0; margin: 0; }
/* texte des cases a cocher : consentement et choix des listes (moments preferes), meme taille a toutes les resolutions */
.formBlock .checkbox-container .nf-field-label label,
.formBlock .listcheckbox-wrap li label { font-size: 0.85rem; font-weight: 500; line-height: 1.45; cursor: pointer; }

/* 1280 et moins : pas plus grand que les etiquettes des champs (0.8rem) */
@media (max-width: 1280px) {
  .formBlock .checkbox-container .nf-field-label label,
  .formBlock .listcheckbox-wrap li label { font-size: 0.8rem; }
}
.formBlock .checkbox-container .nf-field-label a { text-decoration: underline; text-underline-offset: 0.15em; }
.formBlock .checkbox-container .nf-after-field { width: 100%; }

/* erreurs */
.formBlock .nf-error-msg { margin-top: 0.35rem; font-size: 0.8rem; font-weight: 500; color: #b42318; }
.formBlock .nf-error .ninja-forms-field { border-color: #b42318 !important; }
.formBlock .nf-form-errors .nf-error-msg { margin-top: 1rem; }

/* bouton d'envoi : comme .btn.btn-navy */
.formBlock .nf-form-content input[type="submit"] {
  width: auto;
  margin-top: 0.4rem;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-navy);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.444;
  color: var(--color-light);
  cursor: pointer;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.formBlock .nf-form-content input[type="submit"]:hover,
.formBlock .nf-form-content input[type="submit"]:focus-visible { background-color: var(--color-green); color: var(--color-navy); }
.formBlock .nf-form-content input[type="submit"]:disabled { opacity: 0.6; cursor: wait; }

/* 1280 et moins : meme taille que les autres boutons */
@media (max-width: 1280px) {
  .formBlock .nf-form-content input[type="submit"] { font-size: 16px; }
}

/* message de confirmation apres l'envoi */
.formBlock .nf-response-msg { padding: 1.6rem 1.8rem; background-color: var(--color-green-pale); border-radius: 0.8rem; color: var(--color-navy); }
.formBlock .nf-response-msg p + p { margin-top: 0.8em; }

@media (max-width: 1024px) {
  .formBlock__inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .formBlock { padding: 3.5rem 0; }
  .formBlock__card { padding: 2rem 1.4rem; }
  .formBlock nf-cells { flex-direction: column; gap: 0; }
}

/* Pages de services (Droit immobilier, des personnes, des successions, des affaires) */
.navyBlock .maxW,
.textTwoCol .maxW,
.listCta .maxW { max-width: 1920px; }

.navyBlock .container,
.textTwoCol .container,
.listCta .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

/* Image + accroche : pastilles optionnelles sous le texte (ex. « Nous vérifions pour vous : ») */
.imageAccroche__pills { margin-top: 2rem; }
.imageAccroche__pillsTitle { font-weight: 600; margin-bottom: 0.9rem; }
.imageAccroche__pillsList { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.imageAccroche__pillsList li {
  position: relative;
  padding: 0.55rem 1.1rem 0.55rem 2rem;
  border-radius: var(--radius-full);
  background-color: var(--color-green-pale);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-navy);
}

.imageAccroche__pillsList li::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 50%;
  width: var(--bullet-w);
  height: var(--bullet-h);
  transform: translateY(-50%);
  background: var(--icon-drop) center / contain no-repeat;
}

/* Section marine (etapes ou cartes) : motif de gouttes (2 rangees) et bande verte */
.navyBlock {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 calc(2 * 46.25px + 4rem);
  background-color: var(--color-navy);
  border-bottom: 1rem solid var(--color-green);
  color: var(--color-light);
}

@media (max-width: 1440px) {
  .navyBlock { padding: 4rem 0 calc(2 * 46.25px + 2.5rem); }
}

.navyBlock::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(2 * 46.25px);
  background: var(--pattern-gouttes) left -10px top 0 / 85px 92.5px repeat;
  pointer-events: none;
}

.navyBlock__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.navyBlock--cards .navyBlock__inner { display: block; }

/* Boite de texte (barre « Titres ») : H1/H2 = phrase d'accroche en Bagnard (blanc),
   H3/H4 = petit titre vert */
.navyBlock__intro h1,
.navyBlock__intro h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.9vw, 2.8rem);
  line-height: 1.15;
  color: var(--color-light);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

.navyBlock__intro h3,
.navyBlock__intro h4 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 1.25rem;
}

.navyBlock__intro :is(h1, h2) + p { margin-top: 0.75rem; }

.navyBlock__intro p { color: var(--color-light); max-width: 34rem; }

/* etapes numerotees : cartes blanches */
.stepsList { display: grid; gap: 1rem; }

.stepsList__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.4rem 1.6rem;
  background-color: var(--color-light);
  border-radius: 0.8rem;
  color: var(--color-navy);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.25;
}

@media (max-width: 1440px) {
  .stepsList__item { font-size: 1.2rem; }
}

.stepsList__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-green);
  font-size: 1.4rem;
  color: var(--color-navy);
}

/* 1280 et moins : etapes plus compactes (texte, rond chiffre et marges) */
@media (max-width: 1280px) {
  .stepsList { gap: 0.8rem; }
  .stepsList__item { gap: 1.1rem; padding: 1rem 1.25rem; font-size: 1rem; }
  .stepsList__num { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

.navyBlock__after { margin-top: 1.5rem; color: var(--color-light); font-size: 0.9rem; line-height: 1.44; }

/* cartes blanches, 3 par rangee */
.navyCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }

.navyCards__item {
  padding: 2.4rem 2.2rem;
  background-color: var(--color-light);
  border-radius: 0.8rem;
  color: var(--color-navy);
}

.navyCards__item h2 {
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  line-height: 1.12;
  margin-bottom: 1.1rem;
  color: var(--color-navy);
  text-wrap: balance;
}

/* Montserrat 18/26 */
.navyCards__item p,
.navyCards__item li { font-size: 0.9rem; line-height: 1.44; color: var(--color-navy); }
.navyCards__item p + p { margin-top: 1em; }

/* encadre de mise en garde (« Attention : ... ») */
.noteBox { padding: 0.9rem 1.1rem; background-color: var(--color-green-pale); border-radius: 0.8rem; }
.noteBox strong { font-weight: 600; }

/* Texte deux colonnes : titre a gauche, texte a droite */
.textTwoCol { padding: 6rem 0; color: var(--color-navy); }

.textTwoCol__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.textTwoCol h2 { color: var(--color-navy); max-width: 30rem; }
.textTwoCol__body p { max-width: 38rem; color: var(--color-navy); }
.textTwoCol__body p + p { margin-top: 1em; }

/* avec image : photo a gauche (comme Image + accroche), titre + texte a droite */
.textTwoCol--image .textTwoCol__inner { align-items: stretch; }

.textTwoCol__media {
  min-height: 22rem;
  margin-right: calc(clamp(2rem, 5vw, 6rem) - 1.5rem);
  border-radius: 0.8rem;
  overflow: hidden;
}

.textTwoCol__media img { width: 100%; height: 100%; object-fit: cover; }
.textTwoCol__content { align-self: center; }
.textTwoCol--image h2 { margin-bottom: 1.5rem; }

/* Liste : fond gris, titre + intro a gauche, puces-gouttes a droite
   (le rendez-vous suit dans un bloc Appel a l'action separe) */
.listCta {
  padding: 5rem 0; /* comme l'appel a l'action qui suit */
  background-color: var(--color-gray-pale);
  color: var(--color-navy);
}

.listCta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.listCta h2 { color: var(--color-navy); margin-bottom: 1.2rem; }
.listCta__lead { max-width: 36rem; color: var(--color-navy); }
.listCta__list { display: grid; gap: 1rem; }

.listCta__list li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.25;
}

@media (max-width: 1440px) {
  .listCta__list li { font-size: 1.2rem; }
}

.listCta__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1lh - var(--bullet-h)) / 2); /* centree sur la 1re ligne */
  width: var(--bullet-w);
  height: var(--bullet-h);
  background: var(--icon-drop) center / contain no-repeat;
}

/* derniere section avant le footer */
.site-main > .listCta:last-child { margin-bottom: 2rem; }

@media (max-width: 1280px) {
  .navyCards { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .navyBlock__inner { grid-template-columns: 1fr; }
  .textTwoCol__inner { grid-template-columns: 1fr; gap: 1.2rem; }
  .textTwoCol--image .textTwoCol__inner { gap: 2rem; }
  .textTwoCol__media { min-height: 0; margin-right: 0; aspect-ratio: 16 / 9; }
  .listCta__inner { grid-template-columns: 1fr; gap: 1.6rem; }
}

@media (max-width: 768px) {
  .navyBlock { padding: 3.5rem 0 calc(2 * 46.25px + 2.5rem); }
  .stepsList__item { font-size: 1.1rem; padding: 1.1rem 1.2rem; }
  .navyCards__item { padding: 1.8rem 1.6rem; }
  .textTwoCol { padding: 3.5rem 0; }
  .listCta { padding: 3.5rem 0; }
  .site-main > .listCta:last-child { margin-bottom: 1.5rem; }
  .listCta__list li { font-size: 1.15rem; }
}

/* Fiche notaire (profil) */
.profileBody .maxW { max-width: 1920px; }

.profileBody .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

/* photos detourees : on remonte l'image pour que les cheveux touchent le haut de l'ovale */
.profileFacts__photo img { display: block; width: 100%; height: auto; margin-top: -3.3%; }

/* Fiche notaire : carte grise (photo en medaillon qui depasse du haut) + biographie */
.profileBody {
  padding: 2.5rem 0 6rem; /* haut reduit : le medaillon depasse de la carte */
  color: var(--color-navy);
}

.profileBody__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-top: 4rem; /* place pour la moitie du medaillon */
}

.profileFacts {
  position: relative;
  display: grid;
  gap: 2.4rem;
  max-width: 36rem;
  padding: 5rem 2.8rem 2.6rem;
  background-color: var(--color-gray-pale);
  border-radius: 0.8rem;
}

.profileFacts__medal {
  position: absolute;
  top: 0;
  left: 2.8rem;
  transform: translateY(-50%);
}

.profileFacts__photo {
  width: 8rem;
  aspect-ratio: 367 / 349;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-green);
  box-shadow: 0 0 0 0.5rem var(--color-light);
}

/* Montserrat Medium 25/28 vert */
.profileFacts h2 {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 1.1rem;
}

/* parcours : annee en colonne, ou intitule (Bagnard) + precision */
.profileFacts__path { display: grid; gap: 1rem; }

.profileFacts__path li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: 1rem;
  align-items: baseline;
}

.profileFacts__year { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-navy); }
.profileFacts__path span:last-child { font-size: 0.9rem; line-height: 1.44; }

.profileFacts__path--noyear li { grid-template-columns: 1fr; }
.profileFacts__path--noyear li span:last-child { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; }

.profileFacts__path--noyear em {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-family);
  font-style: normal;
  font-size: 0.9rem;
}

/* champs de pratique : pastilles blanches, sans goutte */
.profileFacts__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.profileFacts__pills li {
  position: relative;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  background-color: var(--color-light);
  font-size: 0.9rem;
  font-weight: 500;
}


/* implication : liste a puces-gouttes */
.profileFacts__list { display: grid; gap: 0.7rem; }
.profileFacts__list li { position: relative; padding-left: 1.2rem; font-size: 0.9rem; line-height: 1.44; }

.profileFacts__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1lh - var(--bullet-h)) / 2);
  width: var(--bullet-w);
  height: var(--bullet-h);
  background: var(--icon-drop) center / contain no-repeat;
}

.profileBio p { max-width: 38rem; color: var(--color-navy); }
.profileBio p + p { margin-top: 1em; }

/* 1er paragraphe en accroche (Bagnard) */
.profileBio p:first-child {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  line-height: 1.2;
  margin-bottom: 1.6rem;
}

@media (max-width: 1024px) {
  .profileBody__inner { grid-template-columns: 1fr; padding-top: 2.8rem; }
  .profileFacts { max-width: none; } /* la carte (avec la photo) reste avant la biographie */
}

@media (max-width: 768px) {
  .profileBody { padding: 2rem 0 3.5rem; }
  .profileFacts { padding: 4.5rem 1.6rem 2rem; }
  .profileFacts__medal { left: 1.6rem; }
  .profileFacts__photo { width: 7rem; }
}

/* Page Nous joindre : coordonnees + heures */
.contactBlock .maxW { max-width: 1920px; }

.contactBlock .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

/* coordonnees a gauche, heures a droite (grille de « Notre mission ») */
.contactBlock { padding: 6rem 0 4rem; /* bas reduit : la carte Google suit */ color: var(--color-navy); }

.contactBlock__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* Montserrat Medium 25/28 vert */
.contactBlock__label {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 1.25rem;
}

.contactBlock__address {
  max-width: 30rem;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  font-style: normal;
  line-height: 1.2;
}

/* l'adresse ouvre l'itineraire Google Maps */
.contactBlock__address a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
.contactBlock__address a:hover { color: var(--color-green); }
.contactBlock__address .nowrap { white-space: nowrap; }

.contactList {
  display: grid;
  gap: 1.6rem;
  max-width: 34rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 2px solid var(--nav-bg);
}

.contactList dt { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.contactList dd { font-size: 1rem; }
.contactList dd + dd { margin-top: 1rem; }
.contactList a { font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.contactList a:hover { color: var(--color-green); }
.contactList__who { display: block; font-size: 0.9rem; }

/* heures d'ouverture : carte grise */
.hoursCard { padding: 2.6rem 2.8rem; background-color: var(--color-gray-pale); border-radius: 0.8rem; }
.hoursCard h2 { font-size: 2.1rem; margin-bottom: 1.6rem; color: var(--color-navy); }
.hoursTable { width: 100%; border-collapse: collapse; }

.hoursTable th,
.hoursTable td {
  padding: 0.85rem 0;
  border-bottom: 2px solid var(--nav-bg);
}

.hoursTable th { text-align: left; font-size: 1rem; font-weight: 500; }
.hoursTable td { text-align: right; font-family: var(--font-heading); font-size: 1.2rem; }

/* jours de fermeture en gris */
.hoursTable tr.is-closed th,
.hoursTable tr.is-closed td { color: color-mix(in srgb, var(--color-navy) 55%, transparent); }

.hoursCard .noteBox { margin-top: 1.6rem; font-size: 0.9rem; line-height: 1.44; }

@media (max-width: 1280px) {
  .hoursTable th { font-size: 0.9rem; }
  .hoursTable td { font-size: 1.05rem; }
  .hoursCard .noteBox { font-size: 0.8rem; }
}

@media (max-width: 1024px) {
  .contactBlock__inner { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .contactBlock { padding: 3.5rem 0 2.5rem; }
  .hoursCard { padding: 2rem 1.6rem; }
  .hoursCard h2 { font-size: 1.75rem; }
}

/* Pages Outils : liste des outils, articles, autres outils */
.toolsGrid .maxW,
.article .maxW,
.otherTools .maxW { max-width: 1920px; }

.toolsGrid .container,
.article .container,
.otherTools .container {
  padding-left: var(--pad-content);
  padding-right: var(--pad-content);
}

/* banniere a titre long (question sur deux lignes) */
.innerBanner--article h1 {
  max-width: 60rem;
  text-wrap: balance;
}

/* Liste des outils : cartes de la section Outils de l'accueil, 3 par rangee, sur fond gris */
.toolsGrid { padding: 6rem 0; background-color: var(--color-gray-pale); color: var(--color-navy); }
.toolsGrid__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.45rem; }

.toolsGrid .serviceCard {
  min-height: 14.75rem;
  justify-content: flex-start;
  gap: 1.15rem;
  padding: 6.8rem 1.65rem 1.5rem;
  transition: background-color var(--swap-speed) ease;
}

.toolsGrid .serviceCard__title { font-size: 1.4rem; }
.toolsGrid .serviceCard__icon { width: 2.1rem; height: 2.1rem; }
.toolsGrid .serviceCard__arrow { top: 0.75rem; right: 0.7rem; width: 1.3rem; height: 1.3rem; }
.toolsGrid .serviceCard:hover,
.toolsGrid .serviceCard:focus-visible { background-color: var(--color-green); }
.toolsGrid .serviceCard:hover .serviceCard__arrow,
.toolsGrid .serviceCard:focus-visible .serviceCard__arrow { background-color: var(--color-light); color: var(--color-green); }

/* Autres outils : petites cartes blanches (vertes au survol), 5 par rangee */
.otherTools { padding: 6rem 0; background-color: var(--color-gray-pale); color: var(--color-navy); }

@media (max-width: 1280px) {
  .otherTools { padding: 4rem 0; }
}
.otherTools h2 { margin-bottom: 2.4rem; color: var(--color-navy); }
.toolCards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.site-main > .otherTools:last-child { margin-bottom: 2rem; }

.toolCard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.15rem;
  min-height: 12rem;
  padding: 1.6rem 1.4rem;
  background-color: var(--color-light);
  border-radius: 0.8rem;
  color: var(--color-navy);
  transition: background-color 0.35s ease;
}

.toolCard img { width: 2.1rem; height: 2.1rem; object-fit: contain; }
.toolCard h3 { font-family: var(--font-heading); font-weight: 400; font-size: 1.15rem; line-height: 1.143; color: var(--color-navy); }

.toolCard__arrow {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: var(--color-green);
  color: var(--color-light);
  transition: background-color 0.35s ease, color 0.35s ease;
}

.toolCard__arrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow-diag) center / 55% no-repeat;
          mask: var(--icon-arrow-diag) center / 55% no-repeat;
}

.toolCard:hover,
.toolCard:focus-visible { background-color: var(--color-green); }
.toolCard:hover .toolCard__arrow,
.toolCard:focus-visible .toolCard__arrow { background-color: var(--color-light); color: var(--color-green); }

/* Article : colonne gauche (sommaire + rendez-vous), texte a droite */
.article { padding: 6rem 0; color: var(--color-navy); }

.article__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.article__side { display: grid; gap: 1.5rem; max-width: 26rem; }

/* collee au defilement seulement si elle tient dans la hauteur de l'ecran (classe ajoutee par main.js) */
.article__side.is-sticky { position: sticky; top: 2rem; }

.article__toc { padding: 2.2rem 2.4rem; background-color: var(--color-gray-pale); border-radius: 0.8rem; }

.article__tocTitle {
  font-weight: 500;
  font-size: var(--fs-lead);
  line-height: 1.12;
  color: var(--color-green);
  margin-bottom: 1.2rem;
}

.article__nav ol { display: grid; gap: 0.2rem; }

.article__nav a {
  display: block;
  padding: 0.45rem 0;
  border-bottom: 2px solid var(--nav-bg);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}

.article__nav li:last-child a { border-bottom: 0; }
.article__nav a:hover { color: var(--color-green); }

.article__rdv { display: flex; flex-direction: column; align-items: flex-start; }
.article__rdv h2 { font-size: 1.5rem; line-height: 1.12; hyphens: none; color: var(--color-navy); margin-bottom: 1.1rem; }
.article__rdv p { font-size: 0.9rem; line-height: 1.44; color: var(--color-navy); }
.article__rdv .btn { margin-top: 1.6rem; }

/* 1280 et moins : texte des boites grises a la taille des paragraphes */
@media (max-width: 1280px) {
  .article__nav a,
  .article__rdv p { font-size: 0.8rem; }
}

/* texte de l'article (contenu de l'editeur) */
.article__body { max-width: 42rem; }
.article__body > * + * { margin-top: 1.1rem; }

.article__body h2 {
  margin-top: 3.2rem;
  padding-top: 2.6rem;
  border-top: 2px solid var(--nav-bg);
  font-size: clamp(1.75rem, calc(17.7px + 1.687vw), 2.1rem); /* meme echelle que les H2 du site */
  line-height: 1.071;
  color: var(--color-navy);
  scroll-margin-top: 2rem;
}

.article__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article__body h3 { margin-top: 2rem; font-family: var(--font-family); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--color-navy); }
.article__body p { color: var(--color-navy); }

/* liste a puces : gouttes vertes */
.article__body ul { display: grid; gap: 0.7rem; }
.article__body ul li { position: relative; padding-left: 1.2rem; line-height: 1.4; }

.article__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1lh - var(--bullet-h)) / 2);
  width: var(--bullet-w);
  height: var(--bullet-h);
  background: var(--icon-drop) center / contain no-repeat;
}

/* liste numerotee : etapes numerotees (cartes grises, numero dans un rond vert) */
.article__body ol { display: grid; gap: 1rem; counter-reset: etape; }
.article__body > ol { margin-top: 1.6rem; }

.article__body ol li {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.1rem 1.4rem;
  background-color: var(--color-gray-pale);
  border-radius: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  counter-increment: etape;
}

.article__body ol li::before {
  content: counter(etape);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: var(--color-green);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-navy);
}

/* encadres (menu « Formats » de l'editeur) : .noteBox (vert) et .article__box (gris) */
.article__box { padding: 2rem 2.2rem; background-color: var(--color-gray-pale); border-radius: 0.8rem; }
.article__box h3 { margin-top: 0; margin-bottom: 1rem; }
.article__box p { margin-top: 1rem; font-size: 0.9rem; line-height: 1.44; }
.article__box li { font-size: 0.9rem; } /* meme taille que les paragraphes de l'encadre */

/* pleine largeur (sans colonne de gauche) : texte aligne sur le bord des autres sections,
   lignes limitees a ~1000px pour rester lisibles */
.article__inner--full { display: block; }
.article__inner--full .article__body { max-width: 50rem; }

/* politique de temoins : Complianz genere le texte dans un div#cmplz-document et
   ajoute son CSS (texte 14px, H2/H3 22px, puces disc en plus des gouttes vertes).
   Ses selecteurs portent un id : on remet ici le style de l'article. */
.article__body #cmplz-document { max-width: none; font-size: inherit; }
.article__body #cmplz-document > * + * { margin-top: 1.1rem; }
.article__body #cmplz-document h2 { margin-top: 3.2rem; font-size: clamp(1.75rem, calc(17.7px + 1.687vw), 2.1rem); }
.article__body #cmplz-document h3 { margin-top: 2rem; font-size: 1rem; }
.article__body #cmplz-document p,
.article__body #cmplz-document li { font-size: inherit; }
.article__body #cmplz-document ul { list-style: none; margin: 0; }
.article__body #cmplz-document > ul { margin-top: 1.1rem; }

/* grand ecran : colonne de texte plus large, sommaire et rendez-vous dans une seule carte */
@media (min-width: 1025px) {
  .article__inner { grid-template-columns: minmax(20rem, 1fr) minmax(0, 1.6fr); gap: 4rem; }
  .article__side { gap: 0; padding: 2.2rem 2.4rem; background-color: var(--color-gray-pale); border-radius: 0.8rem; }
  .article__side > .article__toc { padding: 0; background: none; border-radius: 0; }
  .article__side > .article__toc + .article__toc { margin-top: 1.8rem; padding-top: 1.8rem; border-top: 2px solid var(--nav-bg); }
}

/* ecrans peu hauts (portables) : carte plus compacte pour qu'elle reste collee plus souvent */
@media (min-width: 1025px) and (max-height: 860px) {
  .article__side { padding: 1.6rem 1.9rem; }
  .article__side > .article__toc + .article__toc { margin-top: 1.2rem; padding-top: 1.2rem; }
  .article__side .article__tocTitle { margin-bottom: 0.6rem; }
  .article__side .article__nav a { padding: 0.3rem 0; }
  .article__side .article__rdv h2 { margin-bottom: 0.6rem; }
  .article__side .article__rdv .btn { margin-top: 1rem; }
}

@media (max-width: 1440px) {
  .toolCards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .toolsGrid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .toolCards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article__inner { grid-template-columns: 1fr; }
  /* sommaire, texte, puis rendez-vous (cartes separees) */
  .article__side { display: contents; }
  .article__rdv { order: 2; }
  /* sommaire et carte rendez-vous : meme largeur max que le texte (bords droits alignes) */
  .article__toc { max-width: 42rem; }
  /* moins d'espace au-dessus et au-dessous du trait qui separe les H2 */
  .article__body h2 { margin-top: 2rem; padding-top: 1.6rem; }
  .article__body #cmplz-document h2 { margin-top: 2rem; }
}

@media (max-width: 768px) {
  .toolsGrid,
  .otherTools,
  .article { padding: 3.5rem 0; }
  .site-main > .otherTools:last-child { margin-bottom: 1.5rem; }
  .toolsGrid .serviceCard { min-height: 12rem; padding-top: 4rem; }
  .toolCards { grid-template-columns: 1fr; gap: 0.8rem; }
  .toolCard { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; padding: 1.4rem 3rem 1.4rem 1.4rem; }
  .article__toc { padding: 1.8rem 1.6rem; }
  .article__box { padding: 1.6rem 1.4rem; }
}

@media (max-width: 599px) {
  .toolsGrid__cards { grid-template-columns: 1fr; }
}

/* 1024 et moins : marges laterales etroites (voir --pad-content dans :root) ;
   la rangee Outils de l'accueil a une regle propre a 1280, a remplacer ici */
@media (max-width: 1024px) {
  .servicesBlock__rangee { padding-left: var(--pad-wide); padding-right: var(--pad-wide); }
  /* marges symetriques (la marge droite + ecart ne sert qu'a la grille 4 colonnes du desktop) */
  .servicesBlock__grid,
  .siteFooter { padding-right: var(--grid-pad); }
}

/* ========================================
   MARGES ENTRE LES SECTIONS : 1024 ET MOINS
   Meme marge partout (celle de l'accueil a 1024 : 3rem en haut et en bas, ~48px en mobile).
   Place en fin de feuille pour s'imposer sur les regles de chaque section.
   ======================================== */
@media (max-width: 1024px) {
  .imageAccroche,
  .cardsList,
  .history,
  .svcGrid,
  .svcCta,
  .formBlock,
  .textTwoCol,
  .listCta,
  .contactBlock,
  .toolsGrid,
  .otherTools,
  .article { padding-top: 3rem; padding-bottom: 3rem; }

  .teamBlock { padding-top: 3rem; padding-bottom: 3rem; margin-bottom: 3rem; }
  .imageTexte { padding-bottom: 3rem; }
  .profileBody { padding-bottom: 3rem; }   /* haut garde : le medaillon depasse de la carte */

  /* sections avec motif de gouttes : 3rem en haut, motif + 2rem en bas */
  .servicesBlock--rangee { padding-top: 3rem; padding-bottom: 3.25rem; }
  .navyBlock { padding-top: 3rem; padding-bottom: calc(2 * 46.25px + 2rem); }
  .innerBanner { padding-top: 2.5rem; padding-bottom: calc(2 * 20px); }
}

/* mobile : banniere interieure un peu plus courte ; pas de bouton rendez-vous a cote du burger (il est dans le menu) */
@media (max-width: 768px) {
  .innerBanner { padding-bottom: 2.4rem; }
  .header-cta { display: none; }
}

/* ========================================
   15. PRINT STYLES
   ======================================== */
@media print {
  #masthead, #colophon, .menu-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
}