/* ---------- polices auto-hébergées ---------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(polices/newsreader-latin.woff2) format('woff2-variations');
  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:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(polices/newsreader-latin-ext.woff2) format('woff2-variations');
  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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(polices/newsreader-latin-italique.woff2) format('woff2-variations');
  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:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;
  src:url(polices/newsreader-latin-ext-italique.woff2) format('woff2-variations');
  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:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(polices/archivo-latin.woff2) format('woff2-variations');
  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:100 900;font-display:swap;
  src:url(polices/archivo-latin-ext.woff2) format('woff2-variations');
  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}

/* ════════════════════════════════════════════════════════════
   figma.css · reprise HTML de la maquette Figma « accueil »
   Valeurs relevées sur les exports PDF vectoriels 360 / 768 / 1280 / 1440.
   Le palier 768 commande la plage 768-1023 : en-tête replié, photo à fond
   perdu à droite, grilles à deux colonnes. La navigation déployée
   reprend à 1024, la grille de bureau à 1280.
   ════════════════════════════════════════════════════════════ */

:root{
  /* Couleurs échantillonnées sur le rendu PDF. Un nom par couleur : deux
     noms pour une même valeur, c'est la garantie qu'un prochain changement
     n'en touchera qu'un. Trois alias ont donc été retirés le 15 octobre
     2026, ils valaient exactement navy, crème et mute. Les noms à jour et
     les paires de contraste réellement employées sont dans palette.py,
     que l'interface d'édition lit ici même. */
  --navy:#01104F;          /* texte courant, aplats, pied de page */
  --navy-survol:#02186E;   /* survol des aplats bleus, un ton au-dessus */
  --creme:#FEF3D9;         /* bandes biographie et questions fréquentes */
  --gris:#F5F5F4;          /* cartes urgence et formulaire */
  --rule:#E2E0DA;
  --rule-navy:rgba(255,255,255,.16);
  --mute:#5A5E68;          /* légendes, et bordure des champs, 6,49:1 sur blanc */
  --mute-inv:rgba(255,255,255,.66);
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;

  /* ---- échelle typographique ----
     Le site a compté 41 tailles de police distinctes pour 82 déclarations,
     dont neuf valeurs décimales et dix valeurs entassées entre 10 et 16 px.
     Personne ne distingue 12,5 de 13 ni 15 de 15,3 : ce n'étaient pas des
     intentions, c'étaient des restes d'export Figma et de collages
     successifs. Les paliers et les rapports de tailles ne changent pas, ils
     portent maintenant un nom, et les doublons se sont rabattus sur le
     voisin le plus proche, le 15 octobre 2026.

     Règle à tenir : une nouvelle taille se prend dans cette liste. Si
     aucune ne convient, c'est ici qu'on en ajoute une, avec son rôle écrit
     à côté, et pas dans la règle qui en a besoin. Aucune décimale.

     Trois tailles échappent volontairement à l'échelle : le 0 du burger,
     qui cache un libellé, et les deux valeurs en em de .todo::before et du
     signe de la FAQ, qui doivent suivre le texte qu'elles accompagnent.

     Les variantes par palier sont plus bas, en redéfinition de ces mêmes
     variables : c'est la méthode déjà employée pour --pad et --hdr, et
     elle évite de répéter la règle qui s'en sert. */

  /* interface, en pixels fixes */
  --t-micro:11px;          /* étiquettes, mentions, pastilles, filigranes */
  --t-mini:13px;           /* fil d'Ariane, légendes, repères, listes du pied */
  --t-petit:14px;          /* navigation resserrée, menu déroulant */
  --t-base:15px;           /* navigation, boutons, fiche, sélecteur */
  --t-base-l:16px;         /* champs de saisie, menu replié, texte d'accompagnement */

  /* prose et titres, fluides */
  --t-corps:clamp(13px,1.484vw,19px);     /* corps de page */
  --t-courant:clamp(15px,1.3vw,18px);     /* réponses de FAQ, coordonnées */
  --t-courant-s:clamp(13px,1.16vw,15px);  /* pages légales, cartes d'erreurs */
  --t-dom:clamp(10px,1.11vw,16px);        /* les quatre domaines du bandeau */
  --t-h4:clamp(17px,1.4vw,19px);          /* h3 du corps, h2 des pages légales */
  --t-h3:clamp(17px,1.5vw,21px);          /* questions de FAQ, pastille, cartes sœurs */
  --t-h3-l:clamp(17px,1.797vw,23px);      /* titres des cartes domaines */
  --t-h2-s:clamp(21px,1.95vw,25px);       /* h2 du corps */
  --t-h2:clamp(22px,2.62vw,34px);         /* h2 d'une colonne */
  --t-h2-l:clamp(25px,3.13vw,40px);       /* titres de section */
  --t-h2-xl:clamp(27px,3.67vw,47px);      /* h2 global */
  --t-h1:clamp(27px,5.86vw,75px);         /* h1 de l'accueil */
  --t-h1-bio:clamp(27px,3.35vw,48px);     /* h1 de la biographie, qui tient dans sa colonne */
  --t-h1-page:clamp(25px,4.35vw,56px);    /* h1 des pages intérieures et de la 404 */

  /* ---------- échelle d'espacement ----------
     Même histoire que la typographie : 89 valeurs distinctes d'écart, de
     marge et de remplissage, dont 41 en pixels et 48 en clamp, pour un
     rendu qui n'en distinguait qu'une quinzaine. 25 et 26, 36 et 38, 44 et
     46 se répondaient sans raison. Huit pas fixes, cinq respirations
     fluides, deux sauts de paragraphe, le 16 octobre 2026.

     Les pas fixes servent aux écarts courts, ceux qui n'ont pas à bouger
     avec la largeur de l'écran : remplissage de bouton, gouttière de liste,
     écart d'une étiquette à son texte. Les respirations servent aux écarts
     longs, qui doivent se resserrer sur téléphone : marge entre deux blocs,
     écart d'un titre à son contenu, hauteur d'une section.

     Règle à tenir : la même que pour la typographie. Un nouvel écart se
     prend dans cette liste, et si aucun pas ne convient c'est ici qu'on en
     ajoute un. Les corrections optiques de 1, 2 et 3 px restent en dur dans
     leur règle : ce ne sont pas des écarts de mise en page mais des
     rattrapages d'alignement, et les nommer les ferait passer pour des
     intentions. */

  /* pas fixes */
  --e1:4px;    /* décalage d'une étiquette, gouttière d'une pastille */
  --e2:8px;    /* écart court dans un groupe, remplissage vertical serré */
  --e3:12px;   /* remplissage de bouton, écart d'un repère à son texte */
  --e4:18px;   /* écart d'un titre à son contenu dans le corps */
  --e5:26px;   /* remplissage de carte, écart entre deux champs */
  --e6:38px;   /* gouttière de grille, écart entre deux groupes */
  --e7:56px;   /* écart haut de pied de page, fin de colonne */
  --e8:80px;   /* écart entre deux blocs d'une même page */

  /* respirations fluides */
  --r1:clamp(16px,2vw,26px);    /* marge basse d'un paragraphe de tête */
  --r2:clamp(24px,3vw,40px);    /* marge entre deux blocs voisins */
  --r3:clamp(32px,4vw,58px);    /* écart d'un titre de section à son contenu */
  --r4:clamp(40px,5vw,72px);    /* gouttière entre deux colonnes */
  --r5:clamp(56px,8vw,110px);   /* hauteur d'une section, haut et bas */

  /* sauts de paragraphe, en em pour suivre le corps du texte */
  --saut-p:1.55em;        /* prose pleine largeur */
  --saut-p-col:1.3em;     /* prose en colonne étroite, où l'œil revient plus vite */

  /* Une exception assumée, pour la bande de l'accueil : sa hauteur sous
     l'en-tête. Elle est réglée sur la photo et sur le relevé de maquette
     cité plus bas, pas sur l'échelle, et la rabattre déplacerait la seule
     composition du site qui ait été mesurée au pixel. La nommer suffit :
     les paliers deviennent des redéfinitions ici, et les règles qui
     recalculaient tout cela plus bas disparaissent.
     Il y avait là une deuxième exception, --bandeau-gap, l'écart entre le
     monogramme et la ligne des domaines. Elle est retirée le 19 octobre
     2026 : cette ligne ne se pose plus à un écart fixe du logo, elle se
     centre dans le vide qui la sépare de la pastille. Voir .bandeau-dom. */
  --bandeau-haut:clamp(44px,9.44vw,136px);

  /* gouttière : 20 / 40 / 64 / 120 */
  --pad:20px;

  /* hauteur de l'en-tête collante. Le bandeau de l'accueil s'en sert pour
     remonter dessous : une seule valeur à tenir à jour, ici et au palier
     360 où l'en-tête se resserre. */
  --hdr:84px;
}
/* Le h1 des pages intérieures suit une autre courbe sur téléphone : 4,35vw
   y tomberait à 17 px, sous le plancher de 25 px, et le titre perdrait le
   rapport qu'il doit garder avec la bande qui le porte. */
/* Les trois échelles de prose se rejoignent à 16 px sur téléphone, le
   16 octobre 2026. Elles plafonnaient à 13, 15 et 13 px, c'est-à-dire moins
   que sur tablette, alors que c'est l'écran le plus éloigné de l'œil et celui
   qu'on lit en marchant.

   Sur les grands écrans ces trois échelles se distinguent pour une raison de
   mesure : une pleine largeur, une colonne de réponse, une page légale n'ont
   pas le même nombre de caractères par ligne. Sur téléphone il n'y a qu'une
   mesure, une seule colonne de 350 px, donc une seule taille de corps. Un
   texte de loi, une réponse de FAQ et une carte d'erreur s'y lisent au même
   pas que la biographie : c'est ce que demande le lecteur qui fait défiler
   une page du haut en bas sans changer de distance de lecture.

   À 16 px cette colonne porte environ 44 caractères par ligne, dans la
   fourchette lisible. Les pages s'allongent d'un quart, c'est le prix assumé.
   Ce qui reste en dessous de 16 px sur téléphone n'est pas du corps de texte
   mais de l'interface : fil d'Ariane, renvoi de source, mention sous un
   champ, listes du pied de page.

   Écrits en pixels fixes et non en clamp : sous 768 px le terme en vw de ces
   trois échelles ne dépasse jamais son plancher, un clamp n'y ajouterait que
   du bruit. */
@media(max-width:767px){:root{--hdr:64px;--t-h1-page:clamp(23px,6.2vw,34px);
  --t-corps:16px;
  --t-courant:16px;
  --t-courant-s:16px}}
@media(min-width:768px){:root{--pad:40px}}
/* Entre 768 et 1279 px, quatre planchers remontent. À 768 px de large, 1,484vw
   ne vaut que 11,4 px et 5,86vw 45 px : sans ces planchers le corps de page et
   les titres rapetisseraient sur tablette au lieu de tenir leur rang. Ils
   étaient écrits en quatre règles qui redéclaraient body, h1, h2 et h3 ; ce
   sont les mêmes valeurs, posées sur les variables. */
@media(min-width:768px) and (max-width:1279px){:root{
  --t-corps:clamp(14px,1.484vw,19px);
  --t-h3-l:23px;
  --t-h2-xl:clamp(30px,3.67vw,47px);
  --t-h1:clamp(50px,5.86vw,75px)}}
@media(min-width:1280px){:root{--pad:64px}}
@media(min-width:1440px){:root{--pad:120px;--bandeau-haut:92px}}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#fff;color:var(--navy);font-family:var(--serif);
  font-size:var(--t-corps);line-height:1.62;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
h1{font-size:var(--t-h1);line-height:1.08}
h2{font-size:var(--t-h2-xl);line-height:1.14}
h3{font-size:var(--t-h3-l);line-height:1.3;font-weight:500}
em{font-style:italic}
p+p{margin-top:var(--saut-p)}
/* Un paragraphe qui reprend après une liste garde l'écart des paragraphes :
   p+p ne le voit plus, la liste s'étant glissée entre les deux. */
ul+p{margin-top:var(--saut-p)}
.legende{font-family:var(--ui);font-size:var(--t-mini);line-height:1.55;color:var(--mute)}

/* ---------- lien d'évitement ---------- */
.evite{position:fixed;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
  font-family:var(--ui);font-size:var(--t-petit);font-weight:600;text-decoration:none;padding:var(--e3) var(--e4)}
.evite:focus{left:0}

/* ---------- focus visible ----------
   Le contour se dessine en dehors de l'élément, à deux ou trois pixels :
   c'est donc la couleur du bloc derrière qui décide, pas celle du bouton.
   Navy partout, blanc sur les deux seuls fonds sombres du site, le pied de
   page et l'en-tête transparente posée sur le bandeau bleu de l'accueil.
   La règle de l'en-tête reprend le sélecteur d'état exact utilisé plus bas,
   de sorte que le contour redevient navy au même moment que l'en-tête
   redevient blanche au défilement. Elle couvre d'un coup le logo, les liens
   de navigation, le bouton Domaines, le burger et le bouton téléphone, qui
   recevaient tous un contour navy invisible sur la bande. */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
footer :focus-visible,
.js-clair .hdr-clair:not(.hdr-opaque) :focus-visible{outline-color:#fff;outline-offset:3px}

/* ---------- en-tête ----------
   Le filet du bas est une ombre intérieure et non une bordure. Une bordure
   occuperait un pixel de hauteur en plus des 84 px de l'en-tête, et comme le
   bandeau de l'accueil remonte d'exactement 84 px, ce pixel laissait passer
   une ligne blanche tout en haut de la page. L'ombre, elle, se peint à
   l'intérieur sans rien occuper : l'en-tête mesure 84 px dans les deux états,
   le bandeau démarre bien à zéro, et le filet ne déplace plus rien quand il
   apparaît au défilement. */
.hdr{position:sticky;top:0;z-index:50;background:#fff;
  box-shadow:inset 0 -1px 0 var(--rule)}
.hdr .in{display:flex;align-items:center;gap:var(--e4);min-height:84px}
.hdr .mono{flex:none}
.hdr .mono img{height:44px;width:auto}
.hdr .nom{font-family:var(--ui);font-size:var(--t-base);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.hdr .nom span{display:block;font-family:var(--ui);font-size:var(--t-mini);font-weight:400;
  letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-top:2px}
.hdr nav{margin-left:auto;display:flex;align-items:center;gap:var(--e6);
  font-family:var(--ui);font-size:var(--t-base);font-weight:600}
.hdr nav a{text-decoration:none}
.hdr nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hdr .tel{background:var(--navy);color:#fff;font-size:var(--t-mini);font-weight:600;
  padding:var(--e2) var(--e4);letter-spacing:.01em}
.hdr .tel:hover{text-decoration:none;background:var(--navy-survol)}
.hdr .mono .l-blanc{display:none}

/* ---------- en-tête posée sur le bandeau bleu ----------
   Elle ne devient transparente que si le JavaScript tourne : la classe
   js-clair est posée par clair.js, appelé depuis le <head> pour agir avant
   le premier affichage. Sans JavaScript rien n'est ajouté et l'en-tête reste
   blanche, lisible partout. hdr-opaque la rend au blanc dès que la bande
   est franchie. */
.js-clair .hdr-clair:not(.hdr-opaque){background:transparent;box-shadow:none;
  color:#fff}
.js-clair .hdr-clair:not(.hdr-opaque) .nom span{color:#fff}
.js-clair .hdr-clair:not(.hdr-opaque) .mono .l-bleu{display:none}
.js-clair .hdr-clair:not(.hdr-opaque) .mono .l-blanc{display:block}
.js-clair .hdr-clair:not(.hdr-opaque) .tel,
.js-clair .hdr-clair:not(.hdr-opaque) .tel-m{background:#fff;color:var(--navy)}
.js-clair .hdr-clair:not(.hdr-opaque) .tel:hover{background:var(--creme)}
.js-clair .hdr-clair:not(.hdr-opaque) .dep>button::after{border-color:#fff}
.js-clair .hdr-clair:not(.hdr-opaque) .burger::before,
.js-clair .hdr-clair:not(.hdr-opaque) .burger::after,
.js-clair .hdr-clair:not(.hdr-opaque) .burger span{background:#fff}
.js-clair .hdr-clair:not(.hdr-opaque) .burger{color:#fff}
/* Le panneau déroulant et le menu replié gardent leur fond blanc et leur
   texte navy : ils se détachent de la bande, ils n'en font pas partie. */
.js-clair .hdr-clair:not(.hdr-opaque) .dep-pan,
.js-clair .hdr-clair:not(.hdr-opaque) .mmenu{color:var(--navy)}
.hdr-clair{transition:background .2s linear,box-shadow .2s linear}
@media(prefers-reduced-motion:reduce){.hdr-clair{transition:none}}

/* ---------- menu déroulant des domaines ---------- */
.dep{position:relative}
.dep>button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--e2)}
.dep>button::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--navy);
  border-bottom:1.5px solid var(--navy);transform:rotate(45deg) translateY(-2px);
  transition:transform .15s}
.dep>button:hover{text-decoration:underline;text-underline-offset:5px}
.dep-pan{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  margin-top:var(--e4);background:#fff;border:1px solid var(--rule);
  min-width:272px;padding:var(--e2) 0;opacity:0;visibility:hidden;
  transition:opacity .14s,visibility .14s;box-shadow:0 12px 32px rgba(1,16,79,.09)}
.dep-pan::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.dep:hover .dep-pan,.dep:focus-within .dep-pan{opacity:1;visibility:visible}
.dep:hover>button::after,.dep:focus-within>button::after{transform:rotate(225deg) translateY(-2px)}
/* Échap doit refermer le panneau sans déplacer le focus, or le focus sur le
   bouton est précisément ce qui ouvre le panneau : les deux règles ci-dessus
   le rouvriraient aussitôt. Cette classe, posée par commun.js, annule l'état
   ouvert le temps que le focus reste là. Elle vient après les deux règles et
   pèse autant : c'est l'ordre qui tranche, ne pas la remonter. commun.js la
   retire dès que le focus sort du menu ou que la souris y revient. */
.dep.ferme .dep-pan{opacity:0;visibility:hidden}
.dep.ferme>button::after{transform:rotate(45deg) translateY(-2px)}
.dep-pan a{display:block;padding:var(--e3) var(--e4);font-size:var(--t-petit);font-weight:500}
.dep-pan a:hover{background:var(--gris);text-decoration:none}
.dep-pan a[aria-current]{background:var(--gris)}

.burger{display:none;margin-left:auto;background:none;border:0;color:var(--navy);
  font-family:var(--ui);font-size:0;cursor:pointer;width:34px;height:34px;position:relative}
.burger::before,.burger::after,.burger span{content:"";position:absolute;left:5px;right:5px;
  height:2px;background:var(--navy)}
.burger::before{top:10px}.burger span{top:16px}.burger::after{top:22px}
/* Panneau mobile : il vit dans le header collant et se pose PAR-DESSUS le
   contenu, en absolu, pour s'ouvrir la ou l'on se trouve dans la page.
   L'ouverture est animee par grid-template-rows, display ne se transitionne
   pas. visibility garde les liens hors du parcours clavier quand c'est ferme. */
.mmenu{position:absolute;left:0;right:0;top:100%;background:#fff;
  box-shadow:0 1px 0 var(--rule),0 14px 28px rgba(1,16,79,.10);
  display:grid;grid-template-rows:0fr;visibility:hidden;
  max-height:calc(100svh - 84px);overflow:hidden auto;overscroll-behavior:contain;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1),visibility .28s}
.mmenu>.wrap{min-height:0}
.mmenu.on{grid-template-rows:1fr;visibility:visible}
@media(prefers-reduced-motion:reduce){.mmenu{transition:none}}
.mmenu .wrap{display:flex;flex-direction:column;gap:2px}
.mmenu .wrap>:first-child{margin-top:var(--e3)}
.mmenu .wrap>:last-child{margin-bottom:var(--e4)}
.mmenu a{font-family:var(--ui);font-size:var(--t-base-l);font-weight:600;text-decoration:none;padding:var(--e3) 0;
  border-bottom:1px solid var(--rule)}
.mmenu .grp{font-family:var(--ui);font-size:var(--t-base-l);font-weight:600;padding:var(--e3) 0;
  border-bottom:1px solid var(--rule)}
.mmenu .sous{display:flex;flex-direction:column;border-bottom:1px solid var(--rule)}
.mmenu .sous a{display:block;font-size:var(--t-petit);font-weight:400;padding:var(--e2) 0 var(--e2) var(--e4);
  border-bottom:0;color:var(--mute)}
.mmenu .grp{border-bottom:0}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-size:var(--t-base);font-weight:600;text-decoration:none;
  padding:var(--e3) var(--e5);min-height:53px;border:1px solid var(--navy);text-align:center}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--navy-survol)}
.btn-ghost{background:#fff;color:var(--navy)}
.btn-ghost:hover{background:var(--gris)}

/* ---------- bandeau bleu de l'accueil ----------
   Le fond n'est plus empilé ici. Le bleu, la façade du 115 rue de la
   Pompe et le grain arrivent mêlés dans une seule image, composée hors
   du site : le cadrage et le dosage se décident dans le logiciel de
   retouche, là où ils se voient, et non en trois couches CSS réglées à
   l'aveugle. Le site n'en garde que le navy, visible le temps que
   l'image arrive, et sur un navigateur qui refuse les images.
   Le bandeau remonte sous l'en-tête collante, qui se pose dessus en
   transparence : d'où la marge négative compensée par le remplissage. */
.bandeau{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  margin-top:calc(var(--hdr) * -1);
  padding-top:calc(var(--hdr) + var(--bandeau-haut));padding-bottom:0;
  display:flex;flex-direction:column;align-items:center;
  min-height:clamp(520px,53.2vw,766px)}

/* Le fond composé, commun à l'accueil et aux pages intérieures. Il est
   décoratif : aucune information ne s'y lit, d'où l'alternative vide et
   le retrait de l'arbre d'accessibilité. Le CSS le recadre, il ne le
   déforme jamais. */
.bandeau-fond{position:absolute;inset:0;pointer-events:none}
.bandeau-fond img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%}
/* Le logo descend du haut : les 220 px relevés sur la maquette à 1440 de
   large sont tenus par le padding haut de .bandeau, et c'est le seul écart
   de la composition qui reste mesuré.
   Aucun écart ici, donc, et c'est voulu : la ligne des domaines ne se place
   plus par rapport au logo mais par rapport au vide qu'elle occupe. Elle
   prend des marges automatiques, plus bas, et le gap les contrarierait en
   ajoutant sa valeur au-dessus d'elle seulement.
   Ce bloc s'étire jusqu'au haut de la pastille, puisqu'il porte flex:1 et
   que la pastille le suit dans .bandeau : son bord bas est donc la seconde
   référence du centrage. */
.bandeau-in{position:relative;z-index:1;width:100%;max-width:1440px;
  padding:0 var(--pad);margin:0 auto;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:0}

/* Le bloc logo reprend le fichier du logo tel quel : le monogramme, un
   filet fin, la mention AVOCAT. La largeur commune est portée par le bloc,
   et tout ce qui suit s'exprime en pourcentages de cette largeur, relevés
   au pixel sur ce fichier, où le monogramme fait 1108 px de large : vide de
   10,38 %, filet large de 40,61 %, vide de 5,60 %, mention large de 56,50 %.
   Les quatre domaines et la pastille descendent d'autant, sans une ligne de
   changement chez eux : c'est l'intérêt du bloc. */
.bandeau-logo{width:clamp(148px,22.08vw,318px);
  display:flex;flex-direction:column;align-items:center}
/* Les trois pièces partagent le même verre. */
.mono-verre,.mono-trait,.mono-avocat{
  background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(18px) saturate(.6) brightness(1.6);
  backdrop-filter:blur(18px) saturate(.6) brightness(1.6)}
/* Le monogramme, en verre. Le masque découpe le tracé du logo dans un blanc
   à 35 %, et le filtre d'arrière-plan floute la photo sous ce tracé : c'est
   le flou qui fait l'effet, l'aplat ne sert qu'à poser une teinte.
   Le masque et le backdrop-filter doivent rester sur le même élément. Un
   masque posé sur le parent en ferait une racine d'arrière-plan et le filtre
   n'aurait plus rien à flouter.
   Le tracé est écrit ici en entier, et non appelé depuis Logo blanc.svg :
   un fichier SVG appelé comme masque est refusé par Chrome quand la page
   est ouverte depuis le disque, et le monogramme disparaissait. C'est une
   copie conforme de Logo blanc.svg : si le logo change un jour, les deux
   se changent ensemble. */
.mono-verre{width:100%;aspect-ratio:280.19/249.36;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20id='Calque_2'%20data-name='Calque%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280.19%20249.36'%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1%20%7B%20fill:%20%23fff;%20%7D%20%3C/style%3E%3C/defs%3E%3Cg%20id='Calque_2-2'%20data-name='Calque%202'%3E%3Cpath%20class='cls-1'%20d='M260.3,166.55c-7.27-4.26-25.77-7.35-36.84-9.44,9.52-1.63,26.12-6.08,32-10.26,9.91-6.97,15.37-15.82,15.37-29.6s-6.11-25.15-18.34-32.43c-12.15-7.27-30.34-10.84-54.49-10.84h-76.7v1.7c5.96-.39,11.45.7,16.64,3.02,5.42,2.55,8.51,10.29,9.13,23.3v74.47c5.78-4.79,9.47-7.41,14.78-10.66,1.55-.84,2.62-1.4,4.3-2.24l1.73-.81c1.23-.55,2.84-1.22,4.04-1.7,3.86-1.53,7.19-1.82,7.19-1.82l14.29-.88c11.55.36,28.58,3.31,41.27,14.22,8.9,7.58,14.78,15.94,14.78,28.95s-3.25,23.3-9.83,31.04c-6.58,7.74-17.57,11.76-33.05,12.15-15.56.46-24.46-1.24-26.7-5.03-2.32-3.79-3.41-8.44-3.41-13.78v-61.44c-1.79.9-2.87,1.5-5.55,2.83-3.39,1.8-8.78,5.26-11.24,7.4-6.38,5.54-14.33,9.8-14.33,9.8-19.31,8.88-38.26,7.59-51.88,7.21-20.35-.57-39.61-8.37-53.7-22.84l.15.31c-13.54-16.1-20.28-38-20.28-65.71s6.66-50.77,19.97-67.03c13.23-16.25,31.5-24.38,54.72-24.38,16.41,0,39.31,6.22,46.01,10.42,12.88,8.08,19.56,12.04,24.89,31.25h3.17V6.57h-4.64c-2.24,1.08-5.73,2.24-10.37,3.33-4.72,1.08-9.6.77-14.71-.93C120.52,3.08,103.91-1.01,89.1.22c-30.58,2.54-45.2,12.57-59.53,26.33C9.67,45.65,0,70.59,0,100.77s10.06,56.35,30.19,74.92c2.79,2.63,8.75,7.04,8.75,7.04,17.18,12.38,40.14,17.78,47.97,18.1,16.86.69,32.85-.08,47.01-6.43,4.49-2.01,8.9-4.41,13.16-7.2v34.13c0,9.44-1.24,16.1-3.79,20.12-2.4,3.87-9.75,5.96-21.98,6.11v1.78h83.51c25.08,0,43.88-3.95,56.5-11.92,12.62-7.97,18.89-19.74,18.89-35.37s-6.66-27.63-19.89-35.53ZM171.67,157.29v-63.64c0-4.26.54-7.97,1.78-10.99,1.16-3.02,7.28-4.95,18.34-5.88,11.07-1.01,21.36,1.7,30.88,7.89,9.52,6.27,14.86,17.49,15.87,33.59,0,11.3-3.58,20.98-10.39,26.4-6.89,5.5-19.59,9.76-34.14,10.55l-22.35,2.08Z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20id='Calque_2'%20data-name='Calque%202'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20280.19%20249.36'%3E%3Cdefs%3E%3Cstyle%3E%20.cls-1%20%7B%20fill:%20%23fff;%20%7D%20%3C/style%3E%3C/defs%3E%3Cg%20id='Calque_2-2'%20data-name='Calque%202'%3E%3Cpath%20class='cls-1'%20d='M260.3,166.55c-7.27-4.26-25.77-7.35-36.84-9.44,9.52-1.63,26.12-6.08,32-10.26,9.91-6.97,15.37-15.82,15.37-29.6s-6.11-25.15-18.34-32.43c-12.15-7.27-30.34-10.84-54.49-10.84h-76.7v1.7c5.96-.39,11.45.7,16.64,3.02,5.42,2.55,8.51,10.29,9.13,23.3v74.47c5.78-4.79,9.47-7.41,14.78-10.66,1.55-.84,2.62-1.4,4.3-2.24l1.73-.81c1.23-.55,2.84-1.22,4.04-1.7,3.86-1.53,7.19-1.82,7.19-1.82l14.29-.88c11.55.36,28.58,3.31,41.27,14.22,8.9,7.58,14.78,15.94,14.78,28.95s-3.25,23.3-9.83,31.04c-6.58,7.74-17.57,11.76-33.05,12.15-15.56.46-24.46-1.24-26.7-5.03-2.32-3.79-3.41-8.44-3.41-13.78v-61.44c-1.79.9-2.87,1.5-5.55,2.83-3.39,1.8-8.78,5.26-11.24,7.4-6.38,5.54-14.33,9.8-14.33,9.8-19.31,8.88-38.26,7.59-51.88,7.21-20.35-.57-39.61-8.37-53.7-22.84l.15.31c-13.54-16.1-20.28-38-20.28-65.71s6.66-50.77,19.97-67.03c13.23-16.25,31.5-24.38,54.72-24.38,16.41,0,39.31,6.22,46.01,10.42,12.88,8.08,19.56,12.04,24.89,31.25h3.17V6.57h-4.64c-2.24,1.08-5.73,2.24-10.37,3.33-4.72,1.08-9.6.77-14.71-.93C120.52,3.08,103.91-1.01,89.1.22c-30.58,2.54-45.2,12.57-59.53,26.33C9.67,45.65,0,70.59,0,100.77s10.06,56.35,30.19,74.92c2.79,2.63,8.75,7.04,8.75,7.04,17.18,12.38,40.14,17.78,47.97,18.1,16.86.69,32.85-.08,47.01-6.43,4.49-2.01,8.9-4.41,13.16-7.2v34.13c0,9.44-1.24,16.1-3.79,20.12-2.4,3.87-9.75,5.96-21.98,6.11v1.78h83.51c25.08,0,43.88-3.95,56.5-11.92,12.62-7.97,18.89-19.74,18.89-35.37s-6.66-27.63-19.89-35.53ZM171.67,157.29v-63.64c0-4.26.54-7.97,1.78-10.99,1.16-3.02,7.28-4.95,18.34-5.88,11.07-1.01,21.36,1.7,30.88,7.89,9.52,6.27,14.86,17.49,15.87,33.59,0,11.3-3.58,20.98-10.39,26.4-6.89,5.5-19.59,9.76-34.14,10.55l-22.35,2.08Z'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
/* Le filet fait 2,6 px sur un monogramme de 1108, soit 0,23 % : à 318 px de
   large cela donnerait 0,75 px, et sous le pixel un filet se délave au lieu
   de s'affiner. On le fixe donc à 1 px à toutes les tailles. */
.mono-trait{width:40.61%;height:1px;margin-top:10.38%}
/* La mention AVOCAT. Le verre ne se découpe qu'avec un masque, et un masque
   ne sait pas composer du texte : la police du site n'existe pas dans le
   document du masque. Le mot est donc converti en tracés, relevés sur
   Archivo Regular, la police d'interface du site, avec 0,396 em
   d'interlettrage. C'est la lecture exacte du fichier du logo : largeurs de
   lettres et épaisseurs de fûts identiques au pixel près. Conséquence
   assumée, ce n'est plus du texte, d'où le aria-hidden posé sur le bloc
   dans build.py. Si la mention change un jour, c'est ce tracé qu'il faut
   régénérer, pas une chaîne à réécrire. */
.mono-avocat{width:56.5%;margin-top:5.6%;aspect-ratio:608.84/71;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608.84%2071.00'%3E%3Cpath%20fill='%23fff'%20d='M0%2069.8%2027.11%201.2H39.56L66.73%2069.8H56.44L49.79%2052.81H16.37L9.77%2069.8ZM19.51%2044.66H46.61L38.28%2023.16Q37.93%2022.26%2037.35%2020.68Q36.78%2019.11%2036.09%2017.15Q35.4%2015.18%2034.68%2013.14Q33.97%2011.11%2033.38%209.42H32.74Q32.09%2011.38%2031.17%2013.98Q30.25%2016.58%2029.36%2019.04Q28.47%2021.5%2027.83%2023.16ZM133.74%2069.8%20108.1%201.2H118.39L136.02%2049.78Q136.6%2051.19%20137.21%2053Q137.82%2054.8%20138.42%2056.5Q139.03%2058.21%20139.47%2059.52H140.06Q140.54%2058.26%20141.1%2056.59Q141.66%2054.91%20142.29%2053.13Q142.92%2051.35%20143.45%2049.83L160.89%201.2H170.86L145.21%2069.8ZM250.91%2071Q240.25%2071%20232.57%2067.08Q224.88%2063.16%20220.78%2055.26Q216.67%2047.36%20216.67%2035.5Q216.67%2023.54%20220.78%2015.69Q224.88%207.84%20232.57%203.92Q240.25%200%20250.91%200Q261.66%200%20269.32%203.92Q276.98%207.84%20281.08%2015.69Q285.18%2023.54%20285.18%2035.5Q285.18%2047.36%20281.08%2055.26Q276.98%2063.16%20269.32%2067.08Q261.66%2071%20250.91%2071ZM250.91%2062.85Q256.57%2062.85%20261.09%2061.3Q265.61%2059.76%20268.8%2056.53Q271.98%2053.31%20273.68%2048.36Q275.38%2043.41%20275.38%2036.61V34.5Q275.38%2027.64%20273.68%2022.67Q271.98%2017.69%20268.8%2014.47Q265.61%2011.24%20261.09%209.7Q256.57%208.15%20250.91%208.15Q245.25%208.15%20240.75%209.7Q236.24%2011.24%20233.06%2014.47Q229.88%2017.69%20228.21%2022.67Q226.54%2027.64%20226.54%2034.5V36.61Q226.54%2043.41%20228.21%2048.36Q229.88%2053.31%20233.06%2056.53Q236.24%2059.76%20240.75%2061.3Q245.25%2062.85%20250.91%2062.85ZM367.85%2071Q357.35%2071%20350.04%2067.16Q342.73%2063.32%20338.92%2055.45Q335.1%2047.58%20335.1%2035.5Q335.1%2017.63%20343.77%208.81Q352.43%200%20367.94%200Q376.72%200%20383.52%202.85Q390.33%205.71%20394.22%2011.44Q398.11%2017.18%20398.11%2025.95H388.44Q388.44%2019.94%20385.92%2016.01Q383.4%2012.07%20378.8%2010.11Q374.19%208.15%20367.96%208.15Q360.75%208.15%20355.56%2010.96Q350.37%2013.77%20347.67%2019.62Q344.97%2025.46%20344.97%2034.68V36.83Q344.97%2045.87%20347.67%2051.62Q350.37%2057.37%20355.53%2060.11Q360.69%2062.85%20368.01%2062.85Q374.35%2062.85%20379.01%2060.91Q383.67%2058.98%20386.21%2055.05Q388.75%2051.12%20388.75%2045.11H398.11Q398.11%2053.97%20394.15%2059.7Q390.2%2065.44%20383.37%2068.22Q376.54%2071%20367.85%2071ZM443.12%2069.8%20470.23%201.2H482.68L509.85%2069.8H499.56L492.91%2052.81H459.49L452.89%2069.8ZM462.63%2044.66H489.73L481.4%2023.16Q481.05%2022.26%20480.47%2020.68Q479.9%2019.11%20479.21%2017.15Q478.52%2015.18%20477.8%2013.14Q477.09%2011.11%20476.5%209.42H475.86Q475.21%2011.38%20474.29%2013.98Q473.37%2016.58%20472.48%2019.04Q471.59%2021.5%20470.95%2023.16ZM575.63%2069.8V9.46H552.12V1.2H608.84V9.46H585.14V69.8Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20608.84%2071.00'%3E%3Cpath%20fill='%23fff'%20d='M0%2069.8%2027.11%201.2H39.56L66.73%2069.8H56.44L49.79%2052.81H16.37L9.77%2069.8ZM19.51%2044.66H46.61L38.28%2023.16Q37.93%2022.26%2037.35%2020.68Q36.78%2019.11%2036.09%2017.15Q35.4%2015.18%2034.68%2013.14Q33.97%2011.11%2033.38%209.42H32.74Q32.09%2011.38%2031.17%2013.98Q30.25%2016.58%2029.36%2019.04Q28.47%2021.5%2027.83%2023.16ZM133.74%2069.8%20108.1%201.2H118.39L136.02%2049.78Q136.6%2051.19%20137.21%2053Q137.82%2054.8%20138.42%2056.5Q139.03%2058.21%20139.47%2059.52H140.06Q140.54%2058.26%20141.1%2056.59Q141.66%2054.91%20142.29%2053.13Q142.92%2051.35%20143.45%2049.83L160.89%201.2H170.86L145.21%2069.8ZM250.91%2071Q240.25%2071%20232.57%2067.08Q224.88%2063.16%20220.78%2055.26Q216.67%2047.36%20216.67%2035.5Q216.67%2023.54%20220.78%2015.69Q224.88%207.84%20232.57%203.92Q240.25%200%20250.91%200Q261.66%200%20269.32%203.92Q276.98%207.84%20281.08%2015.69Q285.18%2023.54%20285.18%2035.5Q285.18%2047.36%20281.08%2055.26Q276.98%2063.16%20269.32%2067.08Q261.66%2071%20250.91%2071ZM250.91%2062.85Q256.57%2062.85%20261.09%2061.3Q265.61%2059.76%20268.8%2056.53Q271.98%2053.31%20273.68%2048.36Q275.38%2043.41%20275.38%2036.61V34.5Q275.38%2027.64%20273.68%2022.67Q271.98%2017.69%20268.8%2014.47Q265.61%2011.24%20261.09%209.7Q256.57%208.15%20250.91%208.15Q245.25%208.15%20240.75%209.7Q236.24%2011.24%20233.06%2014.47Q229.88%2017.69%20228.21%2022.67Q226.54%2027.64%20226.54%2034.5V36.61Q226.54%2043.41%20228.21%2048.36Q229.88%2053.31%20233.06%2056.53Q236.24%2059.76%20240.75%2061.3Q245.25%2062.85%20250.91%2062.85ZM367.85%2071Q357.35%2071%20350.04%2067.16Q342.73%2063.32%20338.92%2055.45Q335.1%2047.58%20335.1%2035.5Q335.1%2017.63%20343.77%208.81Q352.43%200%20367.94%200Q376.72%200%20383.52%202.85Q390.33%205.71%20394.22%2011.44Q398.11%2017.18%20398.11%2025.95H388.44Q388.44%2019.94%20385.92%2016.01Q383.4%2012.07%20378.8%2010.11Q374.19%208.15%20367.96%208.15Q360.75%208.15%20355.56%2010.96Q350.37%2013.77%20347.67%2019.62Q344.97%2025.46%20344.97%2034.68V36.83Q344.97%2045.87%20347.67%2051.62Q350.37%2057.37%20355.53%2060.11Q360.69%2062.85%20368.01%2062.85Q374.35%2062.85%20379.01%2060.91Q383.67%2058.98%20386.21%2055.05Q388.75%2051.12%20388.75%2045.11H398.11Q398.11%2053.97%20394.15%2059.7Q390.2%2065.44%20383.37%2068.22Q376.54%2071%20367.85%2071ZM443.12%2069.8%20470.23%201.2H482.68L509.85%2069.8H499.56L492.91%2052.81H459.49L452.89%2069.8ZM462.63%2044.66H489.73L481.4%2023.16Q481.05%2022.26%20480.47%2020.68Q479.9%2019.11%20479.21%2017.15Q478.52%2015.18%20477.8%2013.14Q477.09%2011.11%20476.5%209.42H475.86Q475.21%2011.38%20474.29%2013.98Q473.37%2016.58%20472.48%2019.04Q471.59%2021.5%20470.95%2023.16ZM575.63%2069.8V9.46H552.12V1.2H608.84V9.46H585.14V69.8Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* Sans filtre d'arrière-plan, un blanc à 35 % laisserait un monogramme
   fantôme sur une zone claire de la photo. On rend alors le blanc presque
   plein : l'effet est perdu, la lisibilité est gardée. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mono-verre,.mono-trait,.mono-avocat{background:rgba(255,255,255,.92)}
}
/* La ligne des domaines se centre entre le bas du logo et le haut de la
   pastille. Les marges automatiques d'un élément flexible absorbent le vide
   disponible et le partagent à égalité au-dessus et en dessous : c'est le
   centrage demandé, et il se tient seul à toutes les largeurs, sans valeur
   à redéclarer par palier.
   Avant le 19 octobre 2026 cette ligne était collée au logo à 47 px, selon
   le relevé de la maquette, et les 110 px restants s'ouvraient sous elle.
   Le remplissage vertical est un plancher, pas un écart : il s'ajoute de
   part et d'autre, donc il ne décentre rien. Il existe parce que la bande
   n'a pas partout du vide à partager. Hauteurs calculées : 141 px de vide à
   1440, 53 px à 1280, mais 11 px à 1098, zéro vers 1024 et 27 px à 768. Sur
   cette plage le centrage ne peut rien gagner et la ligne viendrait toucher
   le logo et la pastille. 26 px est la plus petite des trois valeurs que
   l'ancien écart prenait selon le palier, et c'est une marche de l'échelle
   d'espacement. La bande grandit alors au-delà de son min-height, ce qui
   est son comportement normal. */
.bandeau-dom{margin-block:auto;padding-block:var(--e5);
  font-family:var(--ui);font-size:var(--t-dom);
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  line-height:1.9;text-align:center;color:#fff;max-width:62em}

/* La pastille de disponibilité ferme la bande, posée sur sa bordure basse. */
.dispo{position:relative;z-index:1;background:var(--navy);color:#fff;
  width:min(317px,100% - 2*var(--pad));
  padding:var(--e4) var(--e5);text-align:center}
.dispo .k{display:inline-flex;align-items:center;gap:var(--e2);font-family:var(--ui);
  font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme)}
.dispo .k i{width:7px;height:7px;border-radius:50%;background:var(--creme);display:block}
.dispo .v{font-family:var(--serif);font-size:var(--t-h3);
  line-height:1.2;margin-top:var(--e2);color:var(--creme)}
/* La maquette tient la disponibilité sur une ligne : le retour inscrit
   dans le texte 1.14 devient une espace, pour que la page dise mot pour
   mot ce que le document de relecture fait lire à Charlotte. */

/* ---------- bande biographie ---------- */
.bio{background:var(--creme);padding-top:var(--e7);padding-bottom:0;position:relative;z-index:1}
/* Le titre tient sur une ligne dans sa colonne : 75 px débordaient. La
   règle est plus spécifique que le h1 général, donc les paliers tablette
   et téléphone redonnent leur taille au titre, plus bas. */
.bio h1{font-size:var(--t-h1-bio);margin-bottom:var(--e6)}
.bio-grid{display:grid;grid-template-columns:476px 1fr;gap:var(--e6);align-items:start}
/* Le titre est passé dans la colonne de texte, comme sur la maquette. La
   photo descend donc d'une hauteur de titre pour que les deux colonnes
   repartent ensemble : hauteur de ligne du h1, plus sa marge basse. Le
   calcul suit le clamp du titre, rien à retoucher d'un palier à l'autre. */
.bio-grid>img{width:100%;height:auto;
  margin-top:calc(var(--t-h1-bio) * 1.08 + var(--e6))}
/* Les deux filets reposent sur rgba(1,16,79), soit le navy du site. Ils
   portaient rgba(3,17,76) venu du collage HTML, un second bleu marine sans
   raison d'exister : invisible à 18 % d'opacité, mais c'est une valeur que
   personne ne pensera à changer en même temps que les autres. */
.fiche{margin-top:var(--e6);border-top:1px solid rgba(1,16,79,.18)}
.fiche div{display:grid;grid-template-columns:102px 1fr;gap:var(--e3);padding:var(--e3) 0;
  border-bottom:1px solid rgba(1,16,79,.18)}
.fiche span:first-child{font-family:var(--ui);font-size:var(--t-mini);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute)}
.fiche span:last-child{font-family:var(--ui);font-size:var(--t-base);font-weight:600}
.bio .btn{margin-top:var(--e6)}

/* ---------- cartes domaines ---------- */
.domaines{padding-top:var(--r5);padding-bottom:var(--r5)}
.domaines h2{margin-bottom:var(--r3);max-width:none}
.dom{display:grid;grid-template-columns:repeat(3,1fr)}
.dom a{display:flex;flex-direction:column;text-decoration:none;padding:var(--e5);
  border:1px solid var(--rule);margin:0 -1px -1px 0;min-height:264px}
.dom a:hover{background:#FCFCFB}
.dom .urg{background:var(--gris)}
.dom .urg:hover{background:#EFEFEE}
.dom .tt{display:flex;align-items:baseline;gap:var(--e3)}
.dom .tag{font-family:var(--ui);font-size:var(--t-micro);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);border-bottom:.5px solid var(--mute);padding-bottom:2px}
.dom p{margin-top:var(--e4);color:var(--navy)}
.dom .fl{margin-top:auto;padding-top:var(--e5);font-family:var(--ui);font-size:var(--t-mini);font-weight:500}
.dom .fl i{font-style:normal;border-bottom:1px solid var(--navy);padding-bottom:var(--e1)}

/* ---------- sections reprises de Accueil-v3 ---------- */
section.creme{background:var(--creme)}
/* La FAQ reprend la façade du bandeau, à peine posée sur le crème. Le
   texte passe au-dessus grâce au z-index de .wrap, la photo n'est qu'un
   fond : elle n'a ni alt ni rôle, d'où le pseudo-élément. */
section.creme#faq{position:relative;overflow:hidden}
/* La photo est calée en haut et son échelle ne dépend que de la largeur de
   la fenêtre, jamais de la hauteur de la section. C'est ce qui l'empêche de
   se remettre à l'échelle quand une question s'ouvre : au lieu de grossir,
   elle s'étend vers le bas, et c'est bien la marge basse qui s'ouvre.
   La hauteur du cadre vaut 53,34vw, soit exactement celle que la photo
   occupe une fois tirée à 160 % de la largeur : le dégradé de masque tombe
   donc toujours sur son bord inférieur, et non quelque part au milieu de la
   section. Sans lui une ligne horizontale apparaîtrait là où elle s'arrête.
   Le facteur 160 % reprend l'échelle actuelle : le remplissage « cover »
   tirait déjà la photo à environ 149 % sur un écran de 1440, le cadrage ne
   bouge donc pas à l'œil. */
section.creme#faq::before{content:"";position:absolute;pointer-events:none;
  top:0;left:0;right:0;height:53.34vw;
  background:url("img/immeuble-rue-de-la-pompe-paris-16e-4-1600.webp") 50% 0/160% auto no-repeat;
  opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
section.creme#faq>.wrap{position:relative;z-index:1}
#avis,#contact,#faq{padding-top:var(--r5);padding-bottom:var(--r5)}
.sec-head{margin-bottom:var(--r3)}
.sec-head h2{max-width:30ch}
.avis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e5);flex-wrap:wrap}

.form{background:var(--gris);padding:var(--r3)}
.avert{border-left:2px solid var(--navy);padding-left:var(--e4);margin-bottom:var(--e5);max-width:80ch}
.ts{font-size:var(--t-base-l);line-height:1.6;color:var(--mute)}
/* champs appariés : deux par ligne */
.quatre{display:grid;grid-template-columns:1fr;column-gap:var(--e4);row-gap:0}
@media(min-width:600px){.quatre{grid-template-columns:1fr 1fr}}
.champ{display:block;margin-top:var(--e4)}
.champ span{display:block;font-family:var(--ui);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--e2)}
/* La mention « (facultatif) » du champ téléphone, dans les deux formulaires.
   Elle vit à l'intérieur du libellé, qui est en capitales, gras et très
   interlettré : on annule les trois, sinon la mention pèse autant que le
   libellé qu'elle commente. display:inline annule le block hérité de
   .champ span, sans quoi elle tomberait sur sa propre ligne. */
.champ .fac{display:inline;font-weight:400;letter-spacing:.06em;
  text-transform:none;margin:0}
.champ input,.champ textarea{width:100%;border:1px solid var(--mute);background:#fff;
  font-family:var(--serif);font-size:var(--t-base-l);color:var(--navy);padding:var(--e3)}
.champ input{height:44px}
.champ textarea{min-height:170px;resize:vertical;line-height:1.55}
.champ input:focus,.champ textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
.consent{display:flex;gap:var(--e3);align-items:flex-start;margin-top:var(--e5);max-width:88ch;
  font-family:var(--ui);font-size:var(--t-mini);line-height:1.55;color:var(--mute)}
.consent input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--navy)}
.envoi{display:flex;align-items:center;gap:var(--e5);flex-wrap:wrap;margin-top:var(--e5)}
.envoi .legende{max-width:46ch}

/* ---------- les deux FAQ ----------
   Un seul jeu de règles pour l'accueil, qui porte la classe .faq, et pour
   les pages domaines, qui portent .qr. Les deux blocs avaient divergé sur
   douze points, dont deux polices : la question était en Newsreader sur
   l'accueil et en Archivo sur les domaines, et l'écart de corps atteignait
   28 % sur téléphone. Tout est écrit ici désormais, et page.css ne garde
   que le fond et les respirations de la bande intérieure.
   Newsreader partout, y compris là où Archivo tenait le rôle.
   Les deux corps ne sont pas inventés, ils sont empruntés à des paliers
   déjà en service. La question prend clamp(17px,1.5vw,21px), celui des
   cartes .soeurs et de la carte disponibilité. La réponse prend
   clamp(15px,1.3vw,18px), celui des coordonnées de la page contact.
   Le rapport entre les deux vaut 1,17 à toutes les largeurs, et c'est le
   point qui compte : la question doit se lire comme une question. Prendre
   le corps du texte courant pour la réponse, soit 19 px, l'aurait collée
   à la question à 19,2 px au palier 1280, et les deux niveaux se seraient
   confondus.
   Le premier calage, repris des pages domaines, écrivait la FAQ à 15 px là
   où la page courait à 19 : la FAQ était plus petite que la page qui la
   portait, et c'était l'incohérence de fond, pas une question de goût. */
#faq .sec-head h2,.faq-bande h2{font-size:var(--t-h2-l);font-weight:400}
.faq,.qr{border-top:1px solid rgba(1,16,79,.15);max-width:840px}
.faq details,.qr details{border-bottom:1px solid rgba(1,16,79,.15)}
.faq summary,.qr summary{list-style:none;cursor:pointer;position:relative;
  padding:var(--e4) var(--e6) var(--e4) 0;font-size:var(--t-h3);font-weight:400;
  line-height:1.4}
.faq summary::-webkit-details-marker,
.qr summary::-webkit-details-marker{display:none}
/* Le signe est centré sur la hauteur de la ligne et non ancré en haut :
   sur une question qui passe à deux lignes, un signe collé au bord
   supérieur se décroche de son titre. C'est le seul point où les pages
   domaines avaient raison contre l'accueil.
   La taille est en em, donc relative à la question. Elle valait 19 px
   fixes, ce qui faisait un rapport de 1,27 en bureau et de 1,52 sur
   téléphone : le même signe pesait deux poids différents selon la largeur
   de l'écran. En em le rapport ne bouge plus. */
.faq summary::after,.qr summary::after{content:"+";position:absolute;
  right:8px;top:50%;transform:translateY(-50%);font-family:var(--ui);
  font-size:1.15em;line-height:1;font-weight:400;color:var(--navy)}
/* U+2212, le vrai signe moins. Le tiret demi-cadratin qui tenait ce rôle
   sur l'accueil est un signe de ponctuation, pas un opérateur. */
.faq details[open] summary::after,
.qr details[open] summary::after{content:"\2212"}
/* La couleur est écrite en rgba, pas en opacity. Une opacité posée sur la
   réponse se battrait avec l'animation du dépli, qui pilote justement
   l'opacité de 0 à 1 : la réponse sautait de 1 à 0,85 en fin de mouvement.
   Le rgba rend la même couleur sans toucher à l'opacité. */
.faq .rep,.qr .rep{padding:0 var(--e6) var(--e5) 0;max-width:72ch;
  font-size:var(--t-courant);line-height:1.6;color:rgba(1,16,79,.85)}
/* La hauteur n'est animée que pendant le mouvement : commun.js pose la classe
   puis la retire, si bien qu'au repos la réponse garde sa hauteur automatique
   et ne se laisse pas couper si le texte se recompose. Sans JavaScript rien de
   ceci ne s'applique : le dépli est instantané et la FAQ fonctionne quand même.
   La règle vaut aussi pour .qr, la FAQ des pages intérieures : même dépli,
   même glissement, le visiteur n'a pas à réapprendre le geste d'une page
   à l'autre. L'exclusivité, en revanche, ne vaut que sur l'accueil, où la
   photo de fond demande que la section garde une hauteur comparable.
   Deux durées, et non une. L'ouverture prend .42s, la fermeture .3s : la
   place est libérée avant d'être occupée, et c'est ce décalage que l'œil
   lit comme de la fluidité. Une seule durée pour les deux donnait un
   échange à somme nulle, donc un à-coup.
   L'opacité suit la hauteur : le texte qui se referme sort, au lieu de se
   faire trancher par le bord du cadre. */
.faq .rep.anim,.qr .rep.anim{overflow:hidden;
  transition:height .42s cubic-bezier(.33,1,.68,1),
             opacity .34s cubic-bezier(.33,1,.68,1)}
.faq .rep.anim.ferme,.qr .rep.anim.ferme{
  transition:height .3s cubic-bezier(.33,1,.68,1),opacity .2s linear}
@media(prefers-reduced-motion:reduce){
  .faq .rep.anim,.qr .rep.anim,
  .faq .rep.anim.ferme,.qr .rep.anim.ferme{transition:none}}

/* ---------- pied de page ---------- */
footer{background:var(--navy);color:#fff;padding-top:var(--e7);padding-bottom:var(--e5)}
.f-top{display:grid;grid-template-columns:1fr;gap:var(--e6)}
@media(min-width:860px){.f-top{grid-template-columns:1.15fr .85fr .85fr 1.15fr}}
.f-logo img{height:58px;width:auto}
.f-logo p{font-family:var(--ui);font-size:var(--t-mini);line-height:1.6;color:var(--mute-inv);margin-top:var(--e4);max-width:34ch}
.f-logo .li{display:inline-flex;align-items:center;gap:var(--e2);margin-top:var(--e4);
  border:1px solid var(--rule-navy);padding:var(--e2) var(--e3);font-family:var(--ui);font-size:var(--t-mini);
  text-decoration:none}
.f-logo .li svg{width:15px;height:15px;fill:#fff}
footer .f-titre{font-family:var(--ui);font-size:var(--t-micro);font-weight:600;letter-spacing:.16em;
  line-height:1.4;text-transform:uppercase;color:var(--mute-inv);margin-bottom:var(--e4)}
footer ul{list-style:none;display:flex;flex-direction:column;gap:var(--e3);
  font-family:var(--ui);font-size:var(--t-mini)}
footer ul a{text-decoration:none}
footer ul a:hover{text-decoration:underline;text-underline-offset:4px}
.f-map{display:block;margin-top:var(--e4);border:1px solid var(--rule-navy);overflow:hidden;position:relative}
.f-map img{width:100%;height:auto}
.f-map .go{position:absolute;right:10px;bottom:10px;background:#fff;color:var(--navy);
  font-family:var(--ui);font-size:var(--t-micro);font-weight:600;padding:var(--e2) var(--e3)}
.f-bas{border-top:1px solid var(--rule-navy);margin-top:var(--e7);padding-top:var(--e5)}
.f-bas .liens{display:flex;gap:var(--e5);flex-wrap:wrap;font-family:var(--ui);font-size:var(--t-mini)}
.f-bas .liens a{text-decoration:none}
.f-bas p{font-family:var(--ui);font-size:var(--t-micro);line-height:1.6;color:var(--mute-inv);margin-top:var(--e4);max-width:110ch}

/* ════════════ palier 1280 ════════════ */
@media(min-width:1440px){
  .bandeau{min-height:785px}
  .bio-grid{grid-template-columns:476px 1fr}
}

/* ════════════ en-tête replié, sous 1024 ════════════
   Le PDF 768 montre le monogramme, le pictogramme de menu et la
   pastille téléphone centrée. La navigation déployée ne revient qu'à
   1024, où les quatre entrées tiennent sans repli. */
@media(max-width:1023px){
  .hdr .nom{display:none}
  .hdr nav{display:none}
  .hdr .tel{display:none}
  .hdr .tel-m{display:inline-flex;margin:0 auto;background:var(--navy);color:#fff;
    font-family:var(--ui);font-size:var(--t-mini);font-weight:600;padding:var(--e2) var(--e4);
    text-decoration:none;letter-spacing:.01em}
  .burger{display:block;margin-left:0}
}
@media(min-width:1024px){
  .hdr .tel-m{display:none}
}
@media(min-width:1024px) and (max-width:1279px){
  .hdr nav{gap:var(--e4);font-size:var(--t-petit)}
  .hdr .nom{font-size:var(--t-petit)}
}

/* ════════════ palier 768 à 1279 ════════════
   Relevé sur « B · 768 Tablette/accueil.pdf », puis repris sur la
   maquette d'accueil validée en octobre : le haut de page est devenu un
   bandeau bleu plein, la photo en robe n'y est plus. */
@media(min-width:768px) and (max-width:1279px){
  /* Les quatre planchers de ce palier sont passés dans :root, en haut du
     fichier, avec le reste de l'échelle. Il ne reste ici que l'interligne du
     h1, qui se resserre quand le titre grandit. */
  h1{line-height:1.0}

  /* bandeau : même composition, resserrée */
  .bandeau{min-height:clamp(470px,52vw,640px)}
  .dispo{padding:var(--e4)}

  /* biographie : titre sur toute la largeur, photo à gauche, texte à
     droite, fiche et bouton repassés pleine largeur dessous */
  .bio{padding-top:var(--e6);padding-bottom:var(--e6)}
  .bio-grid{grid-template-columns:253px minmax(0,1fr);column-gap:var(--e3);row-gap:0}
  .bio-grid>div{display:contents}
  .bio-grid>div>h1{grid-column:1/-1;grid-row:1;margin-bottom:var(--e6);
    font-size:var(--t-h1)}
  .bio-grid>img{grid-column:1;grid-row:2/5;align-self:start;margin-top:0;
    width:253px;height:373px;object-fit:cover;margin-left:0}
  .bio-grid>div>p{grid-column:2}
  .bio-grid>div>.fiche{grid-column:1/-1;margin-top:3px}
  .bio-grid>div>.btn{grid-column:1/-1;justify-self:center;margin-top:var(--e3)}
  .fiche div{grid-template-columns:143px 1fr}

  /* domaines : deux colonnes. Le remplissage de la section, l'écart sous le
     titre et le remplissage des cartes sont passés sur l'échelle, qui porte
     déjà la variation par largeur : trois règles de moins ici. */
  .dom{grid-template-columns:repeat(2,1fr)}
  .dom a{min-height:253px}
  .sec-head h2{max-width:none}
}

/* ════════════ palier 360 ════════════ */
@media(max-width:767px){
  .hdr .in{min-height:64px;gap:var(--e3)}
  .mmenu{max-height:calc(100svh - 64px)}
  .hdr .mono img{height:36px}
  .hdr .nom{display:none}
  .hdr nav{display:none}
  .hdr .tel-m{display:inline-flex;margin:0 auto;background:var(--navy);color:#fff;
    font-family:var(--ui);font-size:var(--t-mini);font-weight:600;padding:var(--e2) var(--e3);text-decoration:none}
  .burger{display:block;margin-left:0}

  /* bandeau : moins haut, mais la composition ne change pas. Le choix du
     fichier de fond n'est plus écrit ici : le srcset de l'image s'en
     charge, le téléphone prend la largeur 480 ou 768 tout seul. */
  .bandeau{min-height:clamp(430px,118vw,560px)}
  .bandeau-dom{letter-spacing:.08em;line-height:2.1}
  .dispo{padding:var(--e4);width:100%}
  /* Sur téléphone la section est bien plus haute que large : une photo
     calée en haut n'en couvrirait que le premier quart et se lirait comme
     une bande. On revient donc au remplissage classique. Le léger
     changement d'échelle à l'ouverture d'une question y est invisible,
     la section étant déjà très haute. */
  section.creme#faq::before{inset:0;height:auto;
    background:url("img/immeuble-rue-de-la-pompe-paris-16e-4-768.webp") center/cover no-repeat;
    -webkit-mask-image:none;mask-image:none}

  /* biographie : titre d'abord, puis la photo, puis le texte. L'ordre du
     HTML met la photo en tête pour le bureau, on le rétablit ici.

     Le gap:0 n'est pas un réglage mais une réparation, le 16 octobre 2026.
     La grille de bureau porte un écart de colonne de 38 px ; en passant en
     colonne flex ici, cet écart s'ajoutait à la marge propre de chaque
     élément. Le titre se détachait de la photo de 64 px au lieu de 26, et
     deux paragraphes de 58 px au lieu de 20. */
  .bio{padding-top:var(--e5);padding-bottom:var(--e6)}
  .bio-grid{display:flex;flex-direction:column;gap:0}
  .bio-grid>div{display:contents}
  .bio-grid>div>h1{order:1;text-align:center;margin-bottom:var(--e5);
    font-size:var(--t-h1)}
  .bio-grid>img{order:2;margin-top:0;margin-bottom:var(--e5)}
  .bio-grid>div>p{order:3}
  .bio-grid>div>.fiche{order:4}
  .bio-grid>div>.btn{order:5}
  .fiche div{grid-template-columns:88px 1fr;gap:var(--e2)}
  /* Les deux lignes de la fiche descendaient à 10 et 11 px. Elles tiennent
     maintenant la même taille, le plus petit pas de l'échelle, et la ligne
     de gauche gagne un pixel : à 10 px, en capitales interlettrées, elle
     était à la limite du lisible sur un téléphone. */
  .fiche span:first-child,.fiche span:last-child{font-size:var(--t-micro)}
  .bio .btn{margin-top:var(--e6);width:100%}

  .dom{grid-template-columns:1fr}
  .dom a{min-height:0}
  .dom .tt{flex-wrap:wrap;gap:var(--e2)}
  .dom p{margin-top:var(--e3)}
  .dom .fl{padding-top:var(--e4);font-size:var(--t-micro)}
}