/* =========================================================================
   Camille Henry, avocate — feuille de styles unique
   Palette : eau profonde (accent) + cuivre (chiffres) sur un neutre calcaire.
   Typographie : Archivo partout ; Source Serif 4 uniquement en citation.
   Trois états de thème gérés : clair, sombre système, sombre forcé.
   ========================================================================= */

/* -------------------------------------------------------------------------
   POLICES SERVIES PAR NOUS, PAS PAR GOOGLE
   -------------------------------------------------------------------------
   Ces fichiers étaient chargés depuis fonts.googleapis.com. Deux raisons de
   les avoir rapatriés, la seconde plus importante que la première :

   1. Performance. La feuille de style de Google est bloquante au rendu, sur
      une connexion supplémentaire : le texte n'apparaît qu'après deux
      allers-retours vers un tiers. Ici, la police part du même serveur, dans
      la même connexion déjà ouverte.

   2. Données personnelles. Charger une police depuis les serveurs de Google
      transmet l'adresse IP du visiteur aux États-Unis, sans son consentement.
      Des juridictions européennes ont déjà tranché en ce sens, et la CNIL
      traite l'opération comme un transfert. Sur le site d'un cabinet
      d'avocats — où l'on consulte « conflit entre associés » ou « céder mon
      fonds » — cette adresse IP est une donnée sensible par le contexte.

   Archivo est une police variable : UN seul fichier couvre les graisses 400
   à 700, d'où la plage `font-weight: 400 700`. De Source Serif 4, on ne
   charge que l'italique : c'est le seul usage (les citations).

   Les variantes `latin-ext` ne sont téléchargées par le navigateur que si la
   page contient un caractère de leur `unicode-range` — le français n'en a
   pas besoin, elles ne coûtent donc rien en pratique.

   ⚠️ Si une police est un jour remplacée, RENOMMER le fichier : les en-têtes
   de cache (voir ecrire_htaccess dans build.py) les gardent un an.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/archivo-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fond:         #EFEDE8;
  --surface:      #F8F7F4;
  --surface-2:    #E5E2DA;
  --encre:        #16242A;
  --encre-2:      #47585E;
  --encre-3:      #7C8C90;
  --trait:        #D6D2C8;
  --eau:          #0E5C63;
  --eau-clair:    #14787F;
  --cuivre:       #A2612C;
  /* Sur fond encre, le cuivre foncé tombe sous le seuil de lisibilité :
     ce ton-ci est réservé aux textes posés sur fond sombre. */
  --cuivre-clair: #E7B37C;
  --sur-eau:      #F8F7F4;   /* texte posé sur l'accent */
  --ombre:        0 1px 2px rgba(22,36,42,.05), 0 14px 40px -22px rgba(22,36,42,.30);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond:         #0E1619;
    --surface:      #141F23;
    --surface-2:    #1A272B;
    --encre:        #ECEAE4;
    --encre-2:      #A9B6B9;
    --encre-3:      #7B8A8E;
    --trait:        #24343A;
    --eau:          #6FC3C4;
    --eau-clair:    #8FD8D8;
    --cuivre:       #D8975C;
    --cuivre-clair: #E7B37C;
    --sur-eau:      #0E1619;
    --ombre:        0 1px 2px rgba(0,0,0,.5), 0 14px 40px -22px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"] {
  --fond:         #0E1619;
  --surface:      #141F23;
  --surface-2:    #1A272B;
  --encre:        #ECEAE4;
  --encre-2:      #A9B6B9;
  --encre-3:      #7B8A8E;
  --trait:        #24343A;
  --eau:          #6FC3C4;
  --eau-clair:    #8FD8D8;
  --cuivre:       #D8975C;
  --cuivre-clair: #E7B37C;
  --sur-eau:      #0E1619;
  --ombre:        0 1px 2px rgba(0,0,0,.5), 0 14px 40px -22px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.024em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.enveloppe { width: min(1120px, 100% - 3rem); margin-inline: auto; }

.sur-titre {
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--eau);
}

.lien-souligne {
  color: var(--eau); text-decoration: underline; text-underline-offset: 3px;
}

:focus-visible { outline: 2px solid var(--eau); outline-offset: 3px; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0;
  background: var(--eau); color: var(--sur-eau); padding: .7rem 1.2rem; z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- bandeau ébauche */
.bandeau {
  background: var(--encre); color: var(--fond);
  font-size: .78rem; padding: .55rem 0; line-height: 1.5;
}
.bandeau .enveloppe { display: flex; gap: 1rem; flex-wrap: wrap; align-items: baseline; }
.bandeau strong { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .68rem; }
.bandeau span { opacity: .82; }

/* ------------------------------------------------------------------- en-tête */
header.site {
  border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: blur(12px);
}
header.site .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.2rem; padding: .95rem 0; flex-wrap: nowrap;
}
.marque {
  text-decoration: none; display: flex; flex-direction: column;
  line-height: 1.25; flex: 0 0 auto;
}
.marque b {
  font-size: 1.06rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}
.marque em {
  font-style: normal; font-size: .62rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--encre-3); white-space: nowrap;
}

nav.principal { display: flex; gap: 1.75rem; flex: 1 1 auto; justify-content: center; min-width: 0; }
nav.principal a {
  text-decoration: none; font-size: .92rem; font-weight: 500; color: var(--encre);
  padding-bottom: 4px; border-bottom: 2px solid transparent; white-space: nowrap;
  transition: border-color .16s ease, color .16s ease;
}
nav.principal a:hover { color: var(--eau); border-bottom-color: var(--eau); }
nav.principal a[aria-current] { color: var(--eau); border-bottom-color: var(--eau); }
/* Sous 1100 px le menu ne tient plus sans se casser : bascule en menu déroulant. */
@media (max-width: 1100px) { nav.principal { display: none; } }

.bascule-menu {
  display: none; background: none; border: 1px solid var(--trait);
  color: var(--encre); font: inherit; font-size: .8rem; padding: .55rem .9rem;
  cursor: pointer; white-space: nowrap;
}
@media (max-width: 1100px) { .bascule-menu { display: block; } }
/* Le panneau vit DANS l'en-tête collant : il s'ouvre donc sous la barre, où
   que l'on soit dans la page. Placé en frère après l'en-tête, il s'ouvrait au
   sommet du document — invisible dès qu'on avait fait défiler. */
nav.mobile {
  display: none; border-top: 1px solid var(--trait);
  background: var(--surface);
  /* Un menu plus haut que l'écran pousserait ses derniers liens hors de
     portée : il défile alors sur lui-même. `dvh` tient compte de la barre
     d'adresse mobile, qui apparaît et disparaît au défilement. */
  max-height: calc(100dvh - 4.5rem); overflow-y: auto;
  overscroll-behavior: contain;
}
nav.mobile.ouvert { display: block; }
nav.mobile ul { list-style: none; margin: 0; padding: .5rem 0 1rem; display: grid; }
nav.mobile a { display: block; padding: .7rem 0; text-decoration: none; color: var(--encre-2); border-bottom: 1px solid var(--trait); }
nav.mobile a:last-child { border-bottom: none; }

/* Sous 620 px, le nom + « Menu » + « Me contacter » ne tiennent pas sur une
   ligne : l'en-tête débordait de 136 px à 360 px de large, et poussait toute
   la page en défilement horizontal. Le bouton de contact bascule dans le menu
   déroulant, où il reste accessible en un geste. */
@media (max-width: 620px) {
  header.site .enveloppe { gap: .9rem; }
  header.site > .enveloppe > .bouton { display: none; }
  .marque b { font-size: .9rem; letter-spacing: .1em; }
  .marque em { font-size: .58rem; }
}
nav.mobile a.contact-mobile {
  color: var(--eau); font-weight: 600;
}

/* ------------------------------------------------------------------- boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--eau); color: var(--sur-eau);
  padding: .72rem 1.4rem; border: 1px solid var(--eau);
  text-decoration: none; font-size: .84rem; font-weight: 500;
  letter-spacing: .04em; white-space: nowrap; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.bouton:hover { background: var(--eau-clair); border-color: var(--eau-clair); }
.bouton.fantome { background: transparent; color: var(--encre); border-color: var(--trait); }
.bouton.fantome:hover { background: transparent; border-color: var(--eau); }
header.site .bouton { flex: 0 0 auto; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }

/* --------------------------------------------------------------------- héros */
.heros { padding: 1.4rem 0 3.5rem; }
/* Sur grand écran, le texte occupe la colonne de gauche et la photo la
   colonne de droite sur toute la hauteur. Sur mobile, tout retombe en une
   colonne et la photo se retrouve JUSTE SOUS LE TITRE — c'est l'ordre du
   balisage, on n'a rien à réordonner. */
.heros .grille {
  display: grid; grid-template-columns: 1.15fr .85fr;
  column-gap: 4.5rem; row-gap: 0; align-items: start;
}
.heros .grille > .sur-titre { grid-column: 1; grid-row: 1; }
.heros .grille > h1         { grid-column: 1; grid-row: 2; }
.heros .grille > .chapo     { grid-column: 1; grid-row: 3; }
.heros .grille > .citation  { grid-column: 1; grid-row: 4; }
.heros .grille > .actions   { grid-column: 1; grid-row: 5; }
/* span EXPLICITE, pas `1 / -1` : sans grid-template-rows déclaré, la grille
   explicite n'a qu'une ligne, -1 y retombe, et la photo écrasait la première
   rangée à 540 px en repoussant le titre en bas de page. */
.heros .grille > .portrait  { grid-column: 2; grid-row: 1 / span 5; align-self: start; }

@media (max-width: 940px) {
  .heros { padding: 1.8rem 0 3rem; }
  .heros .grille { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .heros .grille > .sur-titre,
  .heros .grille > h1,
  .heros .grille > .chapo,
  .heros .grille > .citation,
  .heros .grille > .actions,
  .heros .grille > .portrait { grid-column: 1; grid-row: auto; }
  /* La photo n'a plus besoin d'être aussi haute qu'un écran de bureau. */
  .heros .grille > .portrait { max-height: 60vh; margin: .4rem 0; }
  .heros .chapo, .heros .citation { margin-top: 0; }
  .heros .actions { margin-top: .4rem; }
}
.heros h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1;
  margin: .85rem 0 0; letter-spacing: -.028em;
}
.heros h1 em { font-style: normal; color: var(--eau); }
.heros .chapo { font-size: 1.1rem; color: var(--encre-2); max-width: 33em; margin: 1.5rem 0 0; }

.citation {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.22rem; font-style: italic; line-height: 1.55;
  color: var(--encre); border-left: 2px solid var(--cuivre);
  padding-left: 1.3rem; margin: 1.9rem 0 0; max-width: 27em;
}

.portrait {
  width: 100%; aspect-ratio: 4 / 5; max-height: 540px;
  object-fit: cover; object-position: 50% 18%;
  display: block; border: 1px solid var(--trait); box-shadow: var(--ombre);
}

/* ------------------------------------------------------------------ sections */
section { padding: 4.5rem 0; border-top: 1px solid var(--trait); }
section > .enveloppe > header { max-width: 44em; margin-bottom: 2.6rem; }
/* Filet d'attaque : porté par le sur-titre, donc présent sur TOUTES les
   ouvertures — héros, pages internes et sections — sans exception à gérer.
   `currentColor` lui donne automatiquement la teinte du sur-titre. */
.sur-titre::before {
  content: ""; display: block; width: 44px; height: 3px;
  background: currentColor; margin-bottom: 1.05rem;
}
/* Deux exceptions : dans un encadré, le filet ferait doublon avec la bordure. */
.reponse-courte .sur-titre::before { display: none; }
section h1 {
  font-size: clamp(1.95rem, 3.7vw, 2.85rem); line-height: 1.12;
  letter-spacing: -.028em; margin-top: .55rem;
}
/* Même accent coloré que sur l'accueil : un segment du titre en couleur. */
section h1 em, article h1 em { font-style: normal; color: var(--eau); }
section h2 { font-size: clamp(1.75rem, 3.1vw, 2.5rem); line-height: 1.16; margin-top: .55rem; }
/* :not(.sur-titre) est indispensable : sans lui, cette règle ajoutait
   1,15 rem au-dessus du sur-titre sur les pages ouvrant par un <header>,
   et pas sur celles ouvrant par un <div> — d'où un écart de 18 px entre
   pages, invisible dans le code et flagrant à l'écran. */
section > .enveloppe > header p:not(.sur-titre) {
  color: var(--encre-2); margin-top: 1.15rem; font-size: 1.03rem;
}
.fond-doux { background: var(--surface); }

/* parcours */
.parcours .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .parcours .grille { grid-template-columns: 1fr; gap: 2.4rem; } }
.parcours p { color: var(--encre-2); }
.parcours p + p { margin-top: 1.1rem; }
.colonne-droite { display: flex; flex-direction: column; gap: 1.6rem; }
.photo-cabinet {
  width: 100%; aspect-ratio: 11 / 10; object-fit: cover; object-position: 50% 26%;
  display: block; border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.encart { border: 1px solid var(--trait); padding: 1.8rem 1.7rem; background: var(--fond); }
.encart h3 { font-size: 1.18rem; margin-bottom: .6rem; }
.encart p { font-size: .94rem; color: var(--encre-2); }
.encart p + p { margin-top: 1rem; }

/* domaines — chaque carte porte son propre ton, posé en filet d'attaque */
.domaines { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--trait); }
.domaine { --ton: var(--eau); }
.domaine.t1 { --ton: var(--eau); }
.domaine.t2 { --ton: var(--cuivre); }
.domaine.t3 { --ton: #3D5A80; }
.domaine.t4 { --ton: #4E6B4A; }
.domaine.t5 { --ton: #8A3F4E; }
.domaine.t6 { --ton: #5B6B7A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .domaine.t3 { --ton: #8FAAD4; }
  :root:not([data-theme="light"]) .domaine.t4 { --ton: #9BC094; }
  :root:not([data-theme="light"]) .domaine.t5 { --ton: #D98E9E; }
  :root:not([data-theme="light"]) .domaine.t6 { --ton: #A9BAC9; }
}
:root[data-theme="dark"] .domaine.t3 { --ton: #8FAAD4; }
:root[data-theme="dark"] .domaine.t4 { --ton: #9BC094; }
:root[data-theme="dark"] .domaine.t5 { --ton: #D98E9E; }
:root[data-theme="dark"] .domaine.t6 { --ton: #A9BAC9; }
.domaine::before {
  content: ""; display: block; width: 30px; height: 3px;
  background: var(--ton); margin-bottom: .6rem;  /* était 1rem */
}
.domaine h3 a:hover { color: var(--ton); }
.domaine .en-savoir { color: var(--ton); }
@media (max-width: 800px) { .domaines { grid-template-columns: 1fr; } }
.domaine { padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--trait); }  /* resserré 28/08 (était 1.9rem 0 2rem) */
.domaines .domaine:nth-child(odd) { border-right: 1px solid var(--trait); padding-right: 1.7rem; }  /* était 2.4rem */
@media (max-width: 800px) { .domaines .domaine:nth-child(odd) { border-right: none; padding-right: 0; } }
@media (min-width: 801px) { .domaines .domaine:nth-child(even) { padding-left: 1.7rem; } }  /* était 2.4rem */
.domaine h3 { font-size: 1.24rem; margin-bottom: .3rem; }  /* était .45rem */
.domaine h3 a { text-decoration: none; }
.domaine h3 a:hover { color: var(--eau); }
.domaine p { font-size: .94rem; color: var(--encre-2); }
.domaine ul { margin: .8rem 0 .9rem; padding-left: 1.1rem; font-size: .89rem; color: var(--encre-2); }
.domaine li { margin-bottom: .2rem; }
.domaine .en-savoir { font-size: .88rem; font-weight: 600; text-decoration: none; display: inline-block; margin-top: .2rem; }
.domaine .en-savoir:hover { text-decoration: underline; text-underline-offset: 3px; }

/* bloc sombre (mandataire / appel) */
.sombre { background: var(--encre); color: var(--fond); border-top: none; }
.sombre h2, .sombre h3 { color: var(--fond); }
.sombre p { color: color-mix(in srgb, var(--fond) 80%, var(--encre)); }
.sombre .sur-titre { color: var(--cuivre-clair); }
.sombre .grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) { .sombre .grille { grid-template-columns: 1fr; gap: 2.4rem; } }
.sombre .bouton { background: var(--cuivre-clair); border-color: var(--cuivre-clair); color: #16242A; }
.sombre .bouton:hover { background: var(--fond); border-color: var(--fond); color: var(--encre); }
.fiches { display: grid; gap: 1rem; }
.fiche-mini {
  border: 1px solid color-mix(in srgb, var(--fond) 24%, transparent);
  padding: 1.1rem 1.3rem; display: flex; justify-content: space-between;
  gap: 1.5rem; align-items: baseline;
}
.fiche-mini b { font-weight: 500; font-size: .97rem; }
.fiche-mini small { display: block; color: color-mix(in srgb, var(--fond) 74%, var(--encre)); font-size: .84rem; }
.fiche-mini .prix {
  font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--cuivre-clair); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* honoraires */
.honoraires .grille { display: grid; grid-template-columns: .95fr 1.05fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .honoraires .grille { grid-template-columns: 1fr; gap: 2.4rem; } }
.honoraires .grille > div > p { color: var(--encre-2); }
.tarifs { border: 1px solid var(--trait); background: var(--surface); }
.tarif-ligne {
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
  padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--trait);
}
.tarif-ligne:last-child { border-bottom: none; }
.tarif-ligne span { font-size: .94rem; }
.tarif-ligne b {
  font-size: 1.14rem; font-weight: 600; color: var(--eau);
  white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* observatoire */
.chiffre-clef {
  display: flex; gap: 2.2rem; align-items: baseline; flex-wrap: wrap;
  padding-bottom: 1.8rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--trait);
}
.chiffre-clef .valeur {
  font-size: clamp(2.5rem, 5.4vw, 3.6rem); font-weight: 600; line-height: 1;
  color: var(--eau); font-variant-numeric: tabular-nums; letter-spacing: -.035em;
}
.chiffre-clef .explication { max-width: 30em; font-size: .97rem; color: var(--encre-2); }

.table-enveloppe { overflow-x: auto; border: 1px solid var(--trait); background: var(--fond); }
table.marche { border-collapse: collapse; width: 100%; min-width: 560px; }
table.marche th, table.marche td {
  text-align: left; padding: .85rem 1.25rem; border-bottom: 1px solid var(--trait);
}
table.marche thead th {
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-3); font-weight: 600;
}
table.marche tbody tr:last-child td { border-bottom: none; }
table.marche td.num, table.marche th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.marche td.prix { font-weight: 600; }
table.marche tbody tr:hover { background: var(--surface); }

.appui-cuivre {
  margin-top: 1.3rem; font-size: .95rem; color: var(--encre-2); max-width: 54em;
  border-left: 2px solid var(--cuivre); padding-left: 1.15rem;
}
.note-methode { font-size: .83rem; color: var(--encre-3); margin-top: 1.2rem; max-width: 56em; line-height: 1.6; }

/* --------------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--trait); max-width: 56em; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  cursor: pointer; padding: 1.15rem 0; list-style: none; font-weight: 600;
  font-size: 1.03rem; display: flex; justify-content: space-between;
  gap: 1.5rem; align-items: baseline; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--eau); font-weight: 400; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-bottom: 1.3rem; color: var(--encre-2); max-width: 62ch; }

/* ------------------------------------------------------------ page article */
.page-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 4rem; padding: 2.5rem 0 4.5rem; align-items: start; }
@media (max-width: 1000px) { .page-article { grid-template-columns: 1fr; gap: 2.8rem; } }

/* ------------------------------------------------- ouverture de page
   L'espacement fil d'Ariane -> titre était piloté par des styles en ligne
   répétés sur chaque page, et deux pages ouvraient sur un <div> quand les
   autres ouvraient sur un <header> : l'écart variait de 59 à 77 px selon la
   page. Une seule règle le fixe désormais, quelle que soit la structure. */
.fil { font-size: .78rem; color: var(--encre-3); padding-top: 1.5rem; margin-bottom: 0; }
main > section:first-of-type { border-top: none; padding-top: 2rem; }
main > .page-article { padding-top: 2rem; }
.fil a { text-decoration: none; }
.fil a:hover { color: var(--eau); }

article h1 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); line-height: 1.16; }
article h2 { font-size: clamp(1.3rem, 2.1vw, 1.55rem); margin: 2.6rem 0 .85rem; }
article h3 { font-size: 1.06rem; margin: 1.7rem 0 .45rem; }
article p { margin-bottom: 1.05rem; color: var(--encre-2); }
article strong { color: var(--encre); font-weight: 600; }
article ul, article ol { color: var(--encre-2); padding-left: 1.3rem; margin: 0 0 1.15rem; }
article li { margin-bottom: .4rem; }

.signature-article {
  display: flex; gap: .85rem; align-items: center; flex-wrap: wrap;
  font-size: .83rem; color: var(--encre-2);
  margin: 1.4rem 0 2rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--trait);
}
.pastille {
  width: 34px; height: 34px; border-radius: 50%; background: var(--eau);
  color: var(--sur-eau); display: grid; place-items: center;
  font-size: .73rem; font-weight: 600; letter-spacing: .04em; flex: 0 0 auto;
}

/* Le bloc que les moteurs de réponse extraient : une réponse autonome,
   placée avant tout développement. */
.reponse-courte {
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 3px solid var(--eau); padding: 1.4rem 1.6rem; margin-bottom: 2.3rem;
}
.reponse-courte p { font-size: 1.04rem; margin: 0; }
.reponse-courte .sur-titre { display: block; margin-bottom: .55rem; }

.donnee {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: center;
  background: var(--encre); padding: 1.5rem 1.7rem; margin: 1.9rem 0;
}
@media (max-width: 620px) { .donnee { grid-template-columns: 1fr; gap: .7rem; } }
.donnee .valeur {
  font-size: 2.3rem; font-weight: 600; letter-spacing: -.035em; line-height: 1;
  color: var(--cuivre-clair); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.donnee p { margin: 0; color: color-mix(in srgb, var(--fond) 82%, var(--encre)); font-size: .92rem; }
.donnee .source { font-size: .76rem; margin-top: .45rem; color: color-mix(in srgb, var(--fond) 62%, var(--encre)); }

.a-verifier { border: 1px solid var(--trait); background: var(--surface); padding: 1.5rem 1.7rem; margin: 1.9rem 0; }
.a-verifier h3 { margin-top: 0; }
.a-verifier ol { margin-bottom: 0; }

.boite-auteur {
  display: grid; grid-template-columns: 96px 1fr; gap: 1.3rem; align-items: start;
  border: 1px solid var(--trait); background: var(--surface); padding: 1.6rem; margin-top: 2.8rem;
}
@media (max-width: 620px) { .boite-auteur { grid-template-columns: 1fr; } }
.boite-auteur img { width: 96px; height: 120px; object-fit: cover; object-position: 50% 18%; display: block; }
.boite-auteur h3 { margin: 0 0 .1rem; font-size: 1.03rem; }
.boite-auteur .role { font-size: .79rem; color: var(--encre-3); margin-bottom: .65rem; }
.boite-auteur p { font-size: .89rem; margin-bottom: .85rem; color: var(--encre-2); }

.appel {
  margin-top: 2.3rem; background: var(--eau); color: var(--sur-eau); padding: 1.9rem 2rem;
  display: flex; justify-content: space-between; gap: 2rem; align-items: center; flex-wrap: wrap;
}
.appel h3 { font-size: 1.15rem; margin-bottom: .25rem; color: var(--sur-eau); }
.appel p { margin: 0; font-size: .92rem; opacity: .9; }
.appel .bouton { background: var(--fond); color: var(--encre); border-color: var(--fond); }
.appel .bouton:hover { background: var(--surface); border-color: var(--surface); }

aside.laterale { position: sticky; top: 5.5rem; display: grid; gap: 1.8rem; }
@media (max-width: 1000px) { aside.laterale { position: static; } }
aside.laterale .bloc { border: 1px solid var(--trait); background: var(--surface); padding: 1.25rem 1.35rem; }
aside.laterale h4 {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-3); margin: 0 0 .85rem;
}
aside.laterale ol.sommaire { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
aside.laterale ol.sommaire a { text-decoration: none; color: var(--encre-2); font-size: .86rem; }
aside.laterale ol.sommaire a:hover { color: var(--eau); }
aside.laterale ul.liens { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
aside.laterale ul.liens a { text-decoration: none; font-weight: 500; font-size: .89rem; }
aside.laterale ul.liens a:hover { color: var(--eau); }
aside.laterale ul.liens small { display: block; color: var(--encre-3); font-weight: 400; font-size: .79rem; }
aside.laterale p { font-size: .87rem; color: var(--encre-2); }

/* ------------------------------------------------------- liste des conseils */
.liste-guides { display: grid; gap: 0; border-top: 1px solid var(--trait); }
.guide-ligne {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: 1.5rem 0; border-bottom: 1px solid var(--trait); text-decoration: none;
}
.guide-ligne:hover h3 { color: var(--eau); }
.guide-ligne h3 { font-size: 1.13rem; margin-bottom: .35rem; }
.guide-ligne p { font-size: .92rem; color: var(--encre-2); max-width: 60ch; }
.guide-ligne .meta { font-size: .76rem; color: var(--encre-3); white-space: nowrap; text-align: right; }
@media (max-width: 700px) {
  .guide-ligne { grid-template-columns: 1fr; gap: .5rem; }
  .guide-ligne .meta { text-align: left; }
}

/* ---------------------------------------------------------------- annonces */
.grille-annonces { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.5rem; }
.carte-annonce {
  border: 1px solid var(--trait); background: var(--surface);
  display: flex; flex-direction: column; box-shadow: var(--ombre);
}
.carte-annonce { border-top: 3px solid var(--eau); }
.carte-annonce:nth-child(2) { border-top-color: var(--cuivre); }
.carte-annonce:nth-child(3) { border-top-color: #4E6B4A; }
.carte-annonce .haut { padding: 1.3rem 1.4rem .9rem; border-bottom: 1px solid var(--trait); }
.carte-annonce h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.carte-annonce .lieu { font-size: .84rem; color: var(--encre-3); }
.carte-annonce dl {
  display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem;
  margin: 0; padding: 1.1rem 1.4rem; font-size: .88rem; flex: 1;
}
.carte-annonce dt { color: var(--encre-3); }
.carte-annonce dd { margin: 0; font-variant-numeric: tabular-nums; }
.carte-annonce .pied {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.4rem 1.2rem; border-top: 1px solid var(--trait);
}
.carte-annonce .prix {
  font-size: 1.35rem; font-weight: 600; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; color: var(--eau);
}
.carte-annonce .ref { font-size: .76rem; color: var(--encre-3); }

/* ---------------------------------------------------------------- contact */
.contact .grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4rem; align-items: start; }
@media (max-width: 900px) { .contact .grille { grid-template-columns: 1fr; gap: 2.4rem; } }
.coordonnees { display: grid; gap: 1.2rem; font-size: .93rem; color: var(--encre-2); }
.coordonnees strong {
  display: block; color: var(--encre); font-weight: 600; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .25rem;
}
.coordonnees a { color: var(--eau); }

.formulaire { display: grid; gap: 1rem; }
.formulaire label { font-size: .8rem; font-weight: 500; display: grid; gap: .35rem; }
.formulaire input, .formulaire textarea, .formulaire select {
  font: inherit; font-size: .93rem; padding: .7rem .85rem;
  border: 1px solid var(--trait); background: var(--surface); color: var(--encre);
}
.formulaire textarea { min-height: 140px; resize: vertical; }
.formulaire .mention { font-size: .78rem; color: var(--encre-3); line-height: 1.55; }

/* ------------------------------------------------------------------- pied */
footer.site { padding: 3rem 0 3.5rem; border-top: 1px solid var(--trait); background: var(--surface); }
footer.site .colonnes {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem;
  padding-bottom: 2.2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--trait);
}
@media (max-width: 860px) { footer.site .colonnes { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 520px) { footer.site .colonnes { grid-template-columns: 1fr; } }
footer.site h4 {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-3); margin: 0 0 .9rem;
}
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
footer.site a { text-decoration: none; font-size: .88rem; color: var(--encre-2); }
footer.site a:hover { color: var(--eau); }
footer.site .mention { font-size: .78rem; color: var(--encre-3); max-width: 62em; line-height: 1.6; }
footer.site .signature-pied { font-size: .88rem; color: var(--encre-2); }

/* Ouverture de la page « Le cabinet » : même grille que le héros. */
.ouverture-cabinet {
  display: grid; grid-template-columns: 1.15fr .85fr;
  column-gap: 4rem; row-gap: 0; align-items: start;
}
.ouverture-cabinet > .sur-titre     { grid-column: 1; grid-row: 1; }
.ouverture-cabinet > h1             { grid-column: 1; grid-row: 2; margin-bottom: 1.4rem; }
.ouverture-cabinet > .texte-cabinet { grid-column: 1; grid-row: 3; }
.ouverture-cabinet > .portrait      { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
@media (max-width: 940px) {
  .ouverture-cabinet { grid-template-columns: 1fr; row-gap: 1.6rem; }
  .ouverture-cabinet > .sur-titre,
  .ouverture-cabinet > h1,
  .ouverture-cabinet > .texte-cabinet,
  .ouverture-cabinet > .portrait { grid-column: 1; grid-row: auto; }
  .ouverture-cabinet > h1 { margin-bottom: 0; }
  .ouverture-cabinet > .portrait { max-height: 60vh; margin: .4rem 0; }
}

/* ==================================================== correctifs responsive
   Trois débordements horizontaux mesurés sous 414 px, tous dus au même
   mécanisme : un enfant de grille ne peut pas rétrécir sous la largeur de son
   contenu (min-width: auto par défaut). Le conteneur défilant de la table
   était donc inopérant — la page entière partait en défilement latéral. */

/* 1. Article : les tables de marché (min-width 560) empêchaient la colonne
      de rétrécir. C'est LE correctif qui débloque les pages Conseils. */
.page-article > article,
.page-article > aside,
.contact .grille > *,
.honoraires .grille > *,
.sombre .grille > *,
.parcours .grille > * { min-width: 0; }

/* 2. Formulaire : les champs gardaient leur largeur intrinsèque (un <select>
      se dimensionne sur sa plus longue option). */
.formulaire input,
.formulaire textarea,
.formulaire select { width: 100%; min-width: 0; max-width: 100%; }

/* 3. Cartes d'annonces : minmax(290px, 1fr) ne peut pas descendre sous 290 px,
      alors que la colonne n'en fait que 272 à 320 px de large. */
.grille-annonces { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }

/* ------------------------------------------------------- carte des prix */
.bloc-carte { margin-top: 3rem; }
.bloc-carte h2 { margin-bottom: .8rem; }
.carte-cadre {
  border: 1px solid var(--trait); background: var(--surface);
  padding: 1rem; display: flex; justify-content: center;
}
.carte-prix { width: 100%; max-width: 640px; height: auto; display: block; }
/* Le fond du tracé suit le thème : sans ça, les liserés blancs entre
   départements disparaissent en thème sombre. */
.carte-prix path { stroke: var(--surface); }
.carte-prix .legende { fill: var(--encre-2); }

table.marche td a {
  color: var(--eau); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--eau) 35%, transparent);
}
table.marche td a:hover { border-bottom-color: var(--eau); }

/* -------------------------------------------------- filtres des annonces */
.filtres-annonces {
  display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: end;
  border: 1px solid var(--trait); background: var(--surface);
  padding: 1.2rem 1.4rem; margin-bottom: 1.8rem;
}
.filtres-annonces label {
  display: grid; gap: .3rem; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3);
}
.filtres-annonces select {
  font: inherit; font-size: .92rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--encre);
  padding: .5rem .7rem; border: 1px solid var(--trait); background: var(--fond);
  min-width: 0; max-width: 100%;
}
.filtres-annonces .compteur {
  margin-left: auto; font-size: .85rem; color: var(--encre-2);
  font-weight: 500; white-space: nowrap;
}
@media (max-width: 620px) {
  .filtres-annonces { gap: .9rem; }
  .filtres-annonces label { flex: 1 1 100%; }
  .filtres-annonces .compteur { margin-left: 0; }
}

.aucun-resultat {
  border: 1px solid var(--trait); background: var(--surface);
  padding: 1.6rem 1.8rem; color: var(--encre-2); font-size: .95rem;
}

/* Les deux appels à l'action de la carte : le premier compte, le second aide. */
.actions-carte {
  display: flex; gap: .6rem; flex-wrap: wrap;
  padding: 0 1.4rem 1.3rem; margin-top: -.2rem;
}
.actions-carte .bouton { font-size: .8rem; padding: .58rem 1rem; }
.carte-annonce h3 a { text-decoration: none; }
.carte-annonce h3 a:hover { color: var(--eau); }
.carte-annonce[hidden] { display: none; }

/* ------------------------------------------------- visuel des notes */
.visuel-note { margin: 2.2rem 0; }
.visuel-note img {
  width: 100%; max-width: 420px; height: auto; display: block;
  border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.visuel-note figcaption {
  font-size: .84rem; color: var(--encre-3); margin-top: .7rem; max-width: 420px;
}


/* Filtre des conseils par rubrique — apparaît à partir de six articles. */
.filtres-conseils {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.8rem;
}
.filtre-conseil {
  font: inherit; font-size: .88rem; cursor: pointer;
  padding: .45rem .9rem;
  border: 1px solid var(--trait); background: var(--fond);
  color: var(--encre-2); border-radius: 2px;
  transition: border-color .15s, color .15s;
}
.filtre-conseil:hover { border-color: var(--eau); color: var(--encre); }
.filtre-conseil span {
  color: var(--encre-3); font-size: .8rem; margin-left: .25rem;
  font-variant-numeric: tabular-nums;
}
.filtre-conseil.actif {
  border-color: var(--eau); background: var(--eau); color: var(--sur-eau);
}
.filtre-conseil.actif span { color: inherit; opacity: .75; }
/* ⚠️ L'attribut `hidden` ne suffit PAS ici.
   La feuille du navigateur lui applique `display:none`, mais toute règle
   d'auteur qui pose un `display` l'emporte — et `.guide-ligne` est en
   `display:grid`. Le filtre marquait donc les lignes comme cachées, et elles
   restaient visibles : la fonction semblait morte alors qu'elle marchait.
   Le `!important` est justifié : masquer doit gagner sur toute mise en page. */
.guide-ligne[hidden] { display: none !important; }

.filtres-conseils__vide {
  color: var(--encre-2); font-size: .95rem; padding: 1.5rem 0;
}


/* ---------------------------------------------------------------- Mentions
   Une page de référence, pas un article : on vient y chercher une information
   précise. D'où les données d'identité en tableau de définitions, et une
   mesure de texte courte — un paragraphe sur 1200 px ne se lit pas. */
.page-legale { max-width: 44rem; margin: 0 auto; padding: 3rem 0 4rem; }
.page-legale header { margin-bottom: 2.4rem; }
.chapo-legal {
  color: var(--encre-2); font-size: 1.02rem; line-height: 1.65;
  margin-top: .8rem; max-width: 34rem;
}
.carte-legale {
  border: 1px solid var(--trait); background: var(--surface);
  padding: 1.5rem 1.7rem; margin-bottom: 1.2rem;
}
.carte-legale--attente { border-left: 3px solid var(--cuivre); }
.carte-legale h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.carte-legale p { color: var(--encre-2); font-size: .95rem; line-height: 1.7; margin: 0; }

.identite-legale {
  display: grid; grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .55rem 1.6rem; margin: 0; font-size: .95rem;
}
.identite-legale dt {
  color: var(--encre-3); font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; padding-top: .18rem;
}
.identite-legale dd { margin: 0; color: var(--encre); line-height: 1.55; }
.a-completer { color: var(--cuivre); font-style: italic; }

.bloc-legal { padding: 1.6rem 0; border-top: 1px solid var(--trait); }
.bloc-legal h2 { font-size: 1.02rem; margin: 0 0 .6rem; }
.bloc-legal p {
  color: var(--encre-2); font-size: .95rem; line-height: 1.75;
  margin: 0; max-width: 36rem;
}

@media (max-width: 600px) {
  .identite-legale { grid-template-columns: 1fr; gap: .2rem .8rem; }
  .identite-legale dd { margin-bottom: .7rem; }
}

/* Liens de voisinage territorial (page d'observatoire d'un département ou
   d'une région). Deux colonnes sur écran large : une région compte jusqu'à
   treize départements, une colonne unique ferait une liste interminable. */
.liens-territoires {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: grid; gap: .1rem 1.6rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.liens-territoires li { padding: .3rem 0; border-bottom: 1px solid var(--trait); }
.liens-territoires a { color: var(--encre); text-decoration: none; }
.liens-territoires a:hover { color: var(--eau); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   simulateur d'estimation
   Le calcul vit dans la page ; ces règles ne servent qu'à le rendre lisible.
   Champs larges et espacés : on y saisit des montants à six chiffres, souvent
   depuis un téléphone, une liasse fiscale à côté.
--------------------------------------------------------------------------- */
.simu { margin-top: 2.2rem; }
.simu fieldset {
  border: 0; border-top: 1px solid var(--trait);
  margin: 0 0 1.8rem; padding: 1.4rem 0 0;
}
.simu legend {
  padding: 0 .7rem 0 0; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-3);
}
.simu-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.6rem; }
.simu-grille-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) {
  .simu-grille, .simu-grille-3 { grid-template-columns: 1fr; }
}
.simu-champ { display: grid; gap: .35rem; }
.simu-champ > span { font-size: .84rem; color: var(--encre-2); line-height: 1.35; }
.simu-champ input, .simu-champ select {
  font: inherit; font-size: 1.02rem; color: var(--encre);
  padding: .68rem .8rem; border: 1px solid var(--trait);
  background: var(--surface); width: 100%; min-width: 0;
  font-variant-numeric: tabular-nums;
}
.simu-champ input:focus, .simu-champ select:focus { border-color: var(--eau); }
.simu-aide { margin-top: .9rem; font-size: .84rem; color: var(--encre-3); line-height: 1.55; }
.simu-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }

.simu-resultat { margin-top: 2.4rem; }
.simu-fourchette {
  border-left: 3px solid var(--eau); background: var(--surface);
  padding: 1.5rem 1.7rem;
}
.simu-etiquette {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--encre-3); margin: 0 0 .5rem;
}
.simu-valeur {
  font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 0;
}
.simu-bornes {
  margin: .5rem 0 0; color: var(--encre-2); font-size: .96rem;
  font-variant-numeric: tabular-nums;
}
.simu-notes {
  margin: 1.4rem 0 0; padding-left: 1.15rem; display: grid; gap: .7rem;
  color: var(--encre-2); font-size: .92rem; line-height: 1.6;
}
.simu-reserve {
  margin-top: 1.5rem; border-left: 3px solid var(--cuivre);
  background: var(--surface); padding: 1rem 1.2rem;
  font-size: .89rem; color: var(--encre-2); line-height: 1.6;
}
.simu-rappel { margin-top: 1rem; font-size: .89rem; color: var(--encre-3); line-height: 1.6; }
.simu-vide {
  border-left: 3px solid var(--cuivre); background: var(--surface);
  padding: 1rem 1.2rem; font-size: .93rem; color: var(--encre-2);
}