/* ==========================================================================
   Maxime Mekki-Kaddache — Avocat
   Feuille unique. Aucun bundler, aucune dépendance.

   Le langage visuel est relevé sur un cabinet international : encre vert
   très sombre, serif de labeur à fort contraste pour les titres, grotesque
   pour le texte, immenses respirations, et quatre signes qui reviennent
   partout — le filet vertical devant un lien, le filet horizontal au-dessus
   d'un chapô, la liste à filets, le bloc plein vert.

   La couleur d'accent n'est jamais décorative : elle ne sert qu'à dire
   « ici on peut aller ». Un filet vert posé pour faire joli et le signe
   cesse instantanément de vouloir dire quelque chose.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Polices — auto-hébergées, jamais servies par un tiers.
   Le site d'un avocat expose l'adresse IP de qui le consulte ; un appel à
   fonts.gstatic.com la transmettrait à Google sans consentement, ce que la
   CNIL déconseille et qu'un tribunal allemand a déjà sanctionné (Munich,
   20 janv. 2022). 100 Ko servis depuis le même domaine règlent la question.
   Les italiques ne sont pas embarquées : le gabarit n'en emploie aucune.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/instrument-sans-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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/instrument-sans-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/playfair-display-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: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/playfair-display-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;
}


/* Les italiques. Elles ne sont pas décoratives ici : un nom d'arrêt et une
   locution latine — « quota litis », « restitutio in integrum » — s'écrivent
   en italique, et l'oblique synthétisée par le navigateur se voit. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../polices/instrument-sans-italique-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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../polices/playfair-display-italique-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;
}

/* --------------------------------------------------------------------------
   2. Vocabulaire
   -------------------------------------------------------------------------- */
:root {
  /* Encres. Le vert très sombre remplace le noir partout : c'est lui qui
     donne au blanc sa teinte, et un vrai noir à côté paraîtrait sale. */
  --encre: #00342b;
  --encre-doux: #3d6a5f;          /* texte secondaire sur blanc — 7,1:1 */
  --vert: #00884d;                /* liens et texte accentué — 4,53:1, AA */
  --vert-vif: #009c57;            /* filets, flèches, survols — 3,56:1 */
  --filet-pale: #cbe1d3;          /* séparateurs de liste */
  --blanc: #fff;
  --creme: #f6f4f0;               /* respiration, jamais un support */
  --vert-pale: #adccc7;           /* texte secondaire sur l'encre — 8,0:1 */

  /* Familles */
  --serif: 'Playfair Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Échelle typographique. Les bornes hautes sont relevées sur la référence
     à 1457 px de large ; le vw central les reproduit exactement à cette
     largeur et les fait fondre proprement de part et d'autre. */
  --t-geant: clamp(2.6rem, 4.7vw, 4.75rem);        /* 68 px */
  --t-titre: clamp(2.3rem, 4vw, 4rem);             /* 58 px */
  --t-section: clamp(1.9rem, 3.2vw, 3rem);         /* 46 px */
  --t-declaration: clamp(1.45rem, 2.35vw, 2.25rem);/* 34 px */
  --t-item: clamp(1.2rem, 1.65vw, 1.5rem);         /* 24 px */
  --t-chapo: clamp(1.1rem, 1.65vw, 1.5rem);        /* 24 px */
  --t-corps: 1.09375rem;                            /* 17,5 px */
  --t-petit: 0.9375rem;                             /* 15 px */
  --t-oeil: 0.75rem;                                /* 12 px — l'œil-de-bœuf */

  /* Grille. La marge gauche est aussi le rail : le nom vertical y vit, et
     c'est pour cela qu'elle ne descend jamais sous ce qu'il lui faut. */
  --marge: clamp(1.25rem, 9.3vw, 12rem);
  --gouttiere: clamp(1rem, 1.65vw, 1.5rem);
  --esp-section: clamp(4.5rem, 11vw, 10.5rem);
  --esp-bloc: clamp(2.5rem, 5.5vw, 5rem);

  /* Hauteur commune de l'en-tête et de la barre « sur cette page ».
     Le bouton du tiroir est centré dessus : les deux doivent la partager,
     sinon il tombe à cheval sur le bord de la barre. */
  --h-barre: 4.5rem;

  --duree: .55s;
  --courbe: cubic-bezier(.22, .68, .3, 1);
  --sortie: cubic-bezier(0, 0, .2, 1);   /* ease-out, celle du rideau */
}

/* --------------------------------------------------------------------------
   3. Fondations
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Le site n'a qu'une tenue, claire. Sans cette ligne, un navigateur réglé en
     sombre inverse les formulaires et les barres de défilement, et le vert
     très sombre du site se retrouve sur un fond gris qu'il n'a pas prévu. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barre collante ne doit pas recouvrir la cible d'une ancre. */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--t-corps);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.est-fige { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--encre); color: var(--blanc); }

hr { border: 0; margin: 0; }

/* Le lien d'évitement : premier élément focusable de chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: .9rem 1.4rem;
  font-size: var(--t-petit);
  font-weight: 600;
}
.evitement:focus { left: 0; }

/* Utilitaire d'accessibilité : rend un libellé aux lecteurs d'écran sans
   l'afficher. Gardé même inemployé — c'est le seul moyen correct de le
   faire, et le réécrire de mémoire se rate. */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   4. Grille
   Douze colonnes dans la largeur utile, marges égales. Le contenu se place
   par colonnes nommées plutôt que par largeurs en pourcentage : c'est ce qui
   fait que le chapô d'une page tombe exactement sous le même axe que la
   deuxième colonne d'une liste, trois sections plus bas.
   -------------------------------------------------------------------------- */
.cadre {
  padding-inline: var(--marge);
}

.grille {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gouttiere);
}

/* Placements récurrents.

   ── RÈGLE, payée sur tout le site ─────────────────────────────────────────
   Un placement de grille ne s'écrit JAMAIS en `style="grid-column:…"`. Un
   style en ligne pèse plus qu'une media query : l'élément garde alors ses
   colonnes de bureau sur un téléphone, et la section s'y réduit à une bande
   de cent pixels. Le défaut ne se voit pas en développant sur un grand écran,
   et il touche toutes les pages à la fois.

   Tout placement passe donc par une de ces classes, et toutes se replient
   sur pleine largeur sous 900 px. `outils/verifier.py` refuse un
   `style="grid-column"` en ligne. */
.col-gauche   { grid-column: 1 / span 6; }
.col-gauche-r { grid-column: 2 / span 5; }   /* retrait d'une colonne */
.col-droite   { grid-column: 8 / span 5; }
.col-milieu   { grid-column: 3 / span 8; }
.col-large    { grid-column: 1 / -1; }

/* Le couple qui structure la plupart des sections : le titre à gauche sur
   quatre colonnes, le contenu en face. */
.tete          { grid-column: 1 / span 4; }
.tete--large   { grid-column: 1 / span 5; }
.corps         { grid-column: 6 / -1; }
.corps--decale { grid-column: 7 / -1; }

/* Le bloc d'appel de fin de page, en retrait d'une colonne. */
.bloc-appel   { grid-column: 2 / span 9; }

/* Le portrait de la page de présentation. */
.col-portrait { grid-column: 2 / span 3; }

/* --------------------------------------------------------------------------
   5. Le rail — le nom, debout, à gauche, qui ne bouge jamais
   C'est l'ancre de toute la mise en page : la marge gauche n'existe pas pour
   respirer, elle existe parce qu'il est là.
   -------------------------------------------------------------------------- */
.rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--marge);
  z-index: 40;
  /* Grille plutot que flex : les deux exemplaires du nom — l'encre et sa
     copie claire — doivent occuper exactement la meme case. */
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  align-content: start;
  padding-top: clamp(3.5rem, 9vh, 5rem);
  pointer-events: none;
}
.rail > * { grid-area: 1 / 1; }

.rail__nom {
  pointer-events: auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.6rem);
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--encre);
  white-space: nowrap;
  transition: color var(--duree) var(--courbe);
}
.rail__nom:hover { color: var(--vert); }

/* Le second exemplaire, blanc, découpé sur la bande. Les deux occupent
   exactement la même boîte ; seule la découpe change. */
.rail__nom--clair {
  color: var(--blanc);
  pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
.rail__nom:hover ~ .rail__nom--clair { color: var(--vert-pale); }

/* --------------------------------------------------------------------------
   6. En-tête
   Au repos : la navigation, en clair, en haut à droite.
   Au défilement : elle s'efface et cède la place au bouton du tiroir, au même
   endroit — c'est ce glissement qui fait la signature, pas le hamburger.
   -------------------------------------------------------------------------- */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding-inline: var(--marge);
  min-height: var(--h-barre);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
}
.entete > * { pointer-events: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.9vw, 1.75rem);
  transition: opacity .4s var(--courbe), visibility .4s var(--courbe);
}
.entete.est-reduite .nav { opacity: 0; visibility: hidden; }

.nav__lien {
  font-size: 1rem;
  line-height: 1.2;
  color: var(--encre);
  position: relative;
  padding-block: .35rem;
  white-space: nowrap;
  transition: color .3s var(--courbe);
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--vert-vif);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--courbe);
}
.nav__lien:hover { color: var(--vert); }
.nav__lien:hover::after,
.nav__lien[aria-current='page']::after { transform: scaleX(1); }
.nav__lien[aria-current='page'] { color: var(--vert); }

/* Le déroulé « Domaines » */
.nav__groupe { position: relative; }

.nav__bouton {
  font: inherit;
  font-size: 1rem;
  background: none;
  border: 0;
  padding: .35rem 0;
  margin: 0;
  color: var(--encre);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .3s var(--courbe);
}
.nav__bouton:hover, .nav__groupe.est-ouverte .nav__bouton { color: var(--vert); }

.nav__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .3s var(--courbe);
}
.nav__groupe.est-ouverte .nav__caret { transform: rotate(180deg); }

.nav__deroule {
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  transform: translate(-50%, -.5rem);
  min-width: 17rem;
  background: var(--blanc);
  border-top: 2px solid var(--vert-vif);
  box-shadow: 0 20px 50px -25px rgba(0, 52, 43, .35);
  padding: .5rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--courbe), transform .28s var(--courbe), visibility .28s;
}
.nav__groupe.est-ouverte .nav__deroule {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__deroule a {
  display: block;
  padding: .8rem 1.4rem;
  font-size: var(--t-petit);
  color: var(--encre);
  transition: background .25s var(--courbe), color .25s var(--courbe);
}
.nav__deroule a:hover, .nav__deroule a[aria-current='page'] {
  background: var(--creme);
  color: var(--vert);
}

/* Le bouton du tiroir : trois traits, qui se croisent une fois ouvert. */
.brule {
  --trait: 2px;
  /* Hors du flux, calé sur la marge : dans le flux, il gardait sa place même
     invisible et poussait la navigation de 40 px vers l'intérieur, où elle ne
     tombait plus sur l'axe de la dernière colonne. */
  position: absolute;
  right: var(--marge);
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 1.5rem;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--courbe), visibility .4s var(--courbe);
}
.entete.est-reduite .brule,
.brule.est-forcee { opacity: 1; visibility: visible; }

.brule span {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--trait);
  background: var(--encre);
  transition: transform .4s var(--courbe), opacity .25s var(--courbe), background .3s;
}
.brule span:nth-child(1) { top: .25rem; }
.brule span:nth-child(2) { top: .69rem; }
.brule span:nth-child(3) { top: 1.13rem; }

body.tiroir-ouvert .brule span { background: var(--blanc); }
body.tiroir-ouvert .brule span:nth-child(1) { transform: translateY(.44rem) rotate(45deg); }
body.tiroir-ouvert .brule span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
body.tiroir-ouvert .brule span:nth-child(3) { transform: translateY(-.44rem) rotate(-45deg); }

body.tiroir-ouvert .entete .nav { opacity: 0; visibility: hidden; }
body.tiroir-ouvert .rail__nom { color: var(--blanc); }

/* --------------------------------------------------------------------------
   7. Le tiroir
   -------------------------------------------------------------------------- */
.tiroir {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--encre);
  color: var(--blanc);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem var(--marge) 3rem;
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .65s var(--courbe), visibility .65s;
}
.tiroir[data-ouvert='oui'] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}

.tiroir__liste { list-style: none; margin: 0; padding: 0; }

.tiroir__liste > li {
  border-top: 1px solid rgba(173, 204, 199, .28);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .5s var(--courbe), transform .5s var(--courbe);
}
.tiroir[data-ouvert='oui'] .tiroir__liste > li { opacity: 1; transform: none; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(1) { transition-delay: .18s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(2) { transition-delay: .24s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(3) { transition-delay: .30s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(4) { transition-delay: .36s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(5) { transition-delay: .42s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(6) { transition-delay: .48s; }
.tiroir[data-ouvert='oui'] .tiroir__liste > li:nth-child(7) { transition-delay: .54s; }

.tiroir__lien {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: clamp(.7rem, 1.6vh, 1.15rem) 0;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--blanc);
  transition: color .3s var(--courbe), padding-left .4s var(--courbe);
}
.tiroir__lien:hover { color: var(--vert-pale); padding-left: 1rem; }
.tiroir__lien[aria-current='page'] { color: var(--vert-pale); }

.tiroir__num {
  font-family: var(--sans);
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--vert-vif);
  flex: none;
  width: 2rem;
}

.tiroir__pied {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  font-size: var(--t-petit);
  color: var(--vert-pale);
}
.tiroir__pied a { color: var(--blanc); border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; }
.tiroir__pied a:hover { border-color: var(--vert-vif); color: var(--vert-pale); }

/* --------------------------------------------------------------------------
   8. Signes récurrents
   -------------------------------------------------------------------------- */

/* L'œil-de-bœuf : le mot en capitales qui annonce ce qu'on lit. */
.oeil {
  display: block;
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}

/* Retour au niveau supérieur : la flèche coudée de la référence. */
.oeil--retour {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  transition: color .3s var(--courbe);
}
.oeil--retour:hover { color: var(--vert); }
.oeil--retour::before {
  content: '';
  display: inline-block;
  position: relative;
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  transition: width .38s var(--courbe);
}
.oeil--retour::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: .45rem; height: .45rem;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: 0 50%;
}
.oeil--retour { position: relative; }
.oeil--retour:hover::before { width: 2.4rem; }

/* Le filet horizontal — il ouvre un chapô, il ne souligne jamais un titre. */
.filet {
  display: block;
  height: 2px;
  background: var(--vert-vif);
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.filet--pale { background: var(--filet-pale); height: 1px; }

/* Le lien à filet vertical — la forme d'appel du site.
   Jamais habillé en bouton : c'est ce qui le distingue d'un site marchand. */
.lien-filet {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding: .9rem 0 .9rem 1.35rem;
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vert);
  transition: color .3s var(--courbe);
}
.lien-filet::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vert-vif);
  transition: background .3s var(--courbe);
}
.lien-filet:hover { color: var(--encre); }
.lien-filet:hover::before { background: var(--encre); }

.lien-filet--clair { color: var(--vert-pale); }
.lien-filet--clair:hover { color: var(--blanc); }
.lien-filet--clair::before { background: var(--vert-vif); }
.lien-filet--clair:hover::before { background: var(--blanc); }

/* La flèche longue. Elle s'allonge au survol — le seul mouvement gratuit
   que s'autorise le gabarit, et il tient en deux propriétés. */
.fleche {
  display: inline-block;
  position: relative;
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
  transition: width .38s var(--courbe);
}
.fleche::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: .48rem; height: .48rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: 100% 50%;
}
a:hover .fleche, button:hover .fleche { width: 3.35rem; }


/* --------------------------------------------------------------------------
   9. Typographie de contenu
   -------------------------------------------------------------------------- */
.geant, .titre, .section-titre, .declaration {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--encre);
  margin: 0;
  letter-spacing: -.005em;
}
.titre, .section-titre { text-wrap: balance; }
.geant { text-wrap: pretty; }

.geant       { font-size: var(--t-geant);       line-height: 1.08; }
.titre       { font-size: var(--t-titre);       line-height: 1.08; }
.section-titre { font-size: var(--t-section);   line-height: 1.1; }
.declaration { font-size: var(--t-declaration); line-height: 1.22; text-wrap: pretty; }

.chapo {
  font-size: var(--t-chapo);
  line-height: 1.34;
  color: var(--encre);
  margin: 0;
  text-wrap: pretty;
}
.chapo + .chapo { margin-top: 1.1em; }

.prose { max-width: 40em; }
.prose p { margin: 0 0 1.35em; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }
.prose em { font-style: italic; }

.prose a:not(.lien-filet) {
  color: var(--vert);
  border-bottom: 1px solid var(--filet-pale);
  padding-bottom: 1px;
  transition: border-color .3s var(--courbe), color .3s var(--courbe);
}
.prose a:not(.lien-filet):hover { border-color: var(--vert-vif); color: var(--encre); }

.prose h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-item);
  line-height: 1.2;
  margin: 2.5em 0 .75em;
}
.prose h3:first-child { margin-top: 0; }

.prose ul { list-style: none; margin: 0 0 1.35em; padding: 0; }
.prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7em;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .68em;
  width: .5rem; height: 1px;
  background: var(--vert-vif);
}

.petit { font-size: var(--t-petit); line-height: 1.5; }
.doux  { color: var(--encre-doux); }

/* Une note de bas de bloc — la mention de prudence qu'un site d'avocat doit
   porter à côté d'un chiffre ou d'un formulaire. */
.mention {
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--encre-doux);
  border-left: 2px solid var(--filet-pale);
  padding-left: 1.1rem;
  margin: 0;
  max-width: 42em;
}

/* --------------------------------------------------------------------------
   10. Sections
   -------------------------------------------------------------------------- */
.section { padding-block: var(--esp-section); }
.section--serree { padding-block: clamp(3rem, 6.5vw, 6rem); }
.section--sommet {
  padding-top: clamp(8rem, 15vh, 11rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.section--sommet > .grille { width: 100%; }

/* La bande pleine : le seul aplat de couleur du site.
   Elle déborde des marges — c'est ce débord qui la fait lire comme un
   changement de registre et non comme une carte posée sur la page. */
.bande {
  background: var(--encre);
  color: var(--blanc);
  padding-block: var(--esp-section);
}
.bande .geant, .bande .titre, .bande .section-titre,
.bande .declaration, .bande .chapo { color: var(--blanc); }
.bande .oeil { color: var(--vert-pale); }
.bande .prose { color: var(--vert-pale); }
.bande .prose strong { color: var(--blanc); }
.bande .filet--pale { background: rgba(173, 204, 199, .28); }

/* Le bloc vert encadré, qui ne déborde pas : celui de la référence, posé
   dans la colonne de gauche en face d'une liste. */
.pave {
  background: var(--encre);
  color: var(--blanc);
  padding: clamp(2rem, 3.5vw, 3.25rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pave .section-titre, .pave .declaration { color: var(--blanc); }
.pave .oeil { color: var(--vert-pale); }
.pave p { color: var(--vert-pale); }
.pave .lien-filet { margin-top: auto; }

/* --------------------------------------------------------------------------
   11. La liste à filets
   Un filet en haut, le titre en serif, la flèche à droite. C'est la forme
   que prend toute énumération qui mène quelque part.
   -------------------------------------------------------------------------- */
.liste-filet { list-style: none; margin: 0; padding: 0; }

.liste-filet--deux {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 3.5vw, 3.5rem);
}

.liste-filet > li { border-top: 1px solid var(--filet-pale); }

.liste-filet__lien {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1.5rem;
  padding: clamp(1.4rem, 2.4vw, 2rem) 0 clamp(2rem, 4vw, 3.25rem);
  color: var(--encre);
  transition: color .3s var(--courbe);
}
.liste-filet__lien:hover { color: var(--vert); }

.liste-filet__titre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-item);
  line-height: 1.18;
  margin: 0;
  text-wrap: pretty;
}

.liste-filet__desc {
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--encre-doux);
  margin: .85rem 0 0;
  max-width: 34em;
}

.liste-filet__lien .fleche { color: var(--vert-vif); margin-top: .55em; }

/* La même liste, mais sans destination : une énumération de prestations.
   Pas de flèche, pas de survol — rien ne laisse croire qu'on peut cliquer. */
.liste-plate { list-style: none; margin: 0; padding: 0; }
.liste-plate > li {
  border-top: 1px solid var(--filet-pale);
  padding: clamp(1.1rem, 1.9vw, 1.5rem) 0;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1rem;
  align-items: baseline;
}
.liste-plate__num {
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--vert-vif);
}
.liste-plate__titre {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-item);
  line-height: 1.2;
  margin: 0;
}
.liste-plate__desc {
  grid-column: 2;
  font-size: var(--t-petit);
  line-height: 1.55;
  color: var(--encre-doux);
  margin: .6rem 0 0;
  max-width: 40em;
}

/* --------------------------------------------------------------------------
   12. Le pli — deux colonnes, texte serif à gauche, corps à droite
   -------------------------------------------------------------------------- */
.pli { row-gap: clamp(2rem, 4vw, 3rem); }
.pli__enonce { grid-column: 2 / span 5; }
.pli__corps  { grid-column: 8 / span 5; }

/* --------------------------------------------------------------------------
   13. Chiffres et repères
   -------------------------------------------------------------------------- */
.reperes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.repere { border-top: 2px solid var(--vert-vif); padding-top: 1.25rem; }
.repere__valeur {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1;
  margin: 0 0 .5rem;
}
.repere__texte { font-size: var(--t-petit); color: var(--encre-doux); margin: 0; }
.bande .repere__texte { color: var(--vert-pale); }

/* --------------------------------------------------------------------------
   14. Portrait
   -------------------------------------------------------------------------- */
.portrait { position: relative; }
.portrait img {
  width: 100%;
  filter: grayscale(1) contrast(1.02);
}
.portrait__legende {
  margin-top: 1rem;
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
/* Le filet vertical vert posé sur le bord de l'image. Il se pose sur le cadre
   et non sur la figure : la figure comprend la légende, et le filet descendait
   alors sous la photo. */
.portrait__cadre { position: relative; }
.portrait--filet .portrait__cadre::after {
  content: '';
  position: absolute;
  right: -1px; bottom: 0;
  width: 4px; height: 38%;
  background: var(--vert-vif);
}

/* --------------------------------------------------------------------------
   15. Barre « sur cette page » + progression de lecture
   -------------------------------------------------------------------------- */
/* La barre et l'en-tête doivent avoir EXACTEMENT la même hauteur.
   Le bouton du tiroir flotte dans l'en-tête, centré sur elle ; quand la barre
   apparaît en dessous et qu'elle est plus basse, le bouton tombe à cheval sur
   son filet inférieur et déborde dans la page. La hauteur commune est donc
   une variable, et non deux paddings choisis séparément. */
.sommaire {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 44;
  min-height: var(--h-barre);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  padding-inline: var(--marge);
  display: flex;
  align-items: center;
  gap: 2rem;
  transform: translateY(-100%);
  transition: transform .45s var(--courbe);
}
.sommaire.est-visible { transform: none; }

.sommaire__etiquette {
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre);
  flex: none;
}
.sommaire__courant {
  font-size: var(--t-petit);
  color: var(--encre-doux);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sommaire__liens {
  margin-left: auto;
  margin-right: 5.25rem;
  display: flex;
  gap: 1.75rem;
  flex: none;
}
.sommaire__liens a {
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vert);
  transition: color .3s var(--courbe);
}
.sommaire__liens a:hover { color: var(--encre); }

.progression {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--filet-pale);
}
.progression__jauge {
  height: 100%;
  width: 0;
  background: var(--vert-vif);
  transform-origin: 0 50%;
}

/* --------------------------------------------------------------------------
   16. Formulaire
   Champs sans caisson : un simple filet vert sous la ligne de saisie.
   -------------------------------------------------------------------------- */
.formulaire { max-width: 52rem; }

.champs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.75rem);
}
.champ--plein { grid-column: 1 / -1; }

.champ { display: flex; flex-direction: column; }

.champ label {
  font-size: var(--t-petit);
  font-weight: 500;
  color: var(--encre);
  margin-bottom: .55rem;
}
.champ .obligatoire { color: var(--vert); }

.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: var(--t-corps);
  color: var(--encre);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--vert-vif);
  border-radius: 0;
  padding: .6rem .15rem .7rem;
  width: 100%;
  transition: border-color .3s var(--courbe), background .3s var(--courbe);
  -webkit-appearance: none;
  appearance: none;
}
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }

.champ select {
  background-image: linear-gradient(45deg, transparent 50%, var(--vert) 50%),
                    linear-gradient(135deg, var(--vert) 50%, transparent 50%);
  background-position: right 1rem center, right .65rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.25rem;
  cursor: pointer;
}

.champ input::placeholder,
.champ textarea::placeholder { color: #8ca9a0; opacity: 1; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-bottom-color: var(--encre);
  background: var(--creme);
}
.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
  outline: 2px solid var(--vert);
  outline-offset: 3px;
}

.champ--errone input,
.champ--errone select,
.champ--errone textarea { border-bottom-color: #b3261e; }

.champ__erreur {
  font-size: var(--t-petit);
  color: #b3261e;
  margin: .5rem 0 0;
  min-height: 0;
}

/* Consentement */
.consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--encre-doux);
}
.consentement input[type='checkbox'] {
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--vert);
  border: 0;
  padding: 0;
  flex: none;
}
.consentement a { color: var(--vert); border-bottom: 1px solid var(--filet-pale); }

/* Le bouton d'envoi reprend la forme du lien à filet : le site n'a pas de
   boutons pleins, et en introduire un ici ferait basculer la page dans un
   registre marchand. */
.envoi {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  padding: .9rem 0 .9rem 1.35rem;
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vert);
  transition: color .3s var(--courbe);
}
.envoi::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--vert-vif);
  transition: background .3s var(--courbe);
}
.envoi:hover:not(:disabled) { color: var(--encre); }
.envoi:hover:not(:disabled)::before { background: var(--encre); }
.envoi:disabled { opacity: .45; cursor: progress; }

.reponse {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--vert-vif);
  background: var(--creme);
  font-size: var(--t-petit);
  line-height: 1.55;
}
.reponse[hidden] { display: none; }
.reponse--echec { border-left-color: #b3261e; }

/* --------------------------------------------------------------------------
   17. Coordonnées
   -------------------------------------------------------------------------- */
.coordonnees { list-style: none; margin: 0; padding: 0; }
.coordonnees > li { border-top: 1px solid var(--filet-pale); padding: 1.35rem 0; }
.bande .coordonnees > li { border-top-color: rgba(173, 204, 199, .28); }
.coordonnees dt {
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin-bottom: .45rem;
}
.bande .coordonnees dt { color: var(--vert-pale); }
.coordonnees dd { margin: 0; font-size: var(--t-corps); }
.coordonnees dd a { transition: color .3s var(--courbe); }
.coordonnees dd a:hover { color: var(--vert); }
.bande .coordonnees dd a:hover { color: var(--vert-pale); }

/* --------------------------------------------------------------------------
   18. Tableau (honoraires)
   -------------------------------------------------------------------------- */
.grille-tarifs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0 clamp(1.5rem, 3.5vw, 3.5rem);
}
.tarif { border-top: 2px solid var(--vert-vif); padding: 1.5rem 0 clamp(2rem, 3.5vw, 3rem); }
.tarif__nom {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-item);
  line-height: 1.2;
  margin: 0 0 .9rem;
}
.tarif__prix {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1;
  color: var(--vert);
  margin: 0 0 .35rem;
  font-variant-numeric: tabular-nums;
}
.tarif__unite {
  font-family: var(--sans);
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre-doux);
  margin: 0 0 1.1rem;
}
.tarif__texte { font-size: var(--t-petit); line-height: 1.55; color: var(--encre-doux); margin: 0; }
.tarif ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.tarif ul li {
  position: relative;
  padding-left: 1.35rem;
  font-size: var(--t-petit);
  line-height: 1.5;
  color: var(--encre-doux);
  margin-bottom: .5rem;
}
.tarif ul li::before {
  content: '';
  position: absolute; left: 0; top: .62em;
  width: .5rem; height: 1px; background: var(--vert-vif);
}

/* --------------------------------------------------------------------------
   19. Questions dépliantes
   -------------------------------------------------------------------------- */
.questions { border-bottom: 1px solid var(--filet-pale); }

.question { border-top: 1px solid var(--filet-pale); }
.question > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.25;
  color: var(--encre);
  transition: color .3s var(--courbe);
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary:hover { color: var(--vert); }

.question__signe {
  position: relative;
  width: 1rem; height: 1rem;
  flex: none;
}
.question__signe::before,
.question__signe::after {
  content: '';
  position: absolute;
  background: var(--vert-vif);
  transition: transform .35s var(--courbe), opacity .3s var(--courbe);
}
.question__signe::before { left: 0; top: 50%; width: 100%; height: 1.5px; transform: translateY(-50%); }
.question__signe::after  { top: 0; left: 50%; height: 100%; width: 1.5px; transform: translateX(-50%); }
.question[open] .question__signe::after { transform: translateX(-50%) scaleY(0); opacity: 0; }

.question__corps {
  padding: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
  max-width: 46em;
}
.question__corps p { margin: 0 0 1em; }
.question__corps p:last-child { margin-bottom: 0; }
.question__corps > * { color: var(--encre-doux); }

/* --------------------------------------------------------------------------
   20. Pied de page
   -------------------------------------------------------------------------- */
.pied {
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--filet-pale);
}

.pied__grille { row-gap: clamp(2.5rem, 4vw, 3.5rem); }
.pied__bloc { grid-column: span 3; }
.pied__bloc--filet {
  border-left: 2px solid var(--vert-vif);
  padding-left: clamp(1.25rem, 2vw, 2rem);
}

.pied__titre {
  font-size: var(--t-oeil);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 1.4rem;
}

.pied__liste { list-style: none; margin: 0; padding: 0; }
.pied__liste li { margin-bottom: .85rem; }
.pied__liste a {
  font-size: var(--t-petit);
  color: var(--encre-doux);
  transition: color .3s var(--courbe);
}
.pied__liste a:hover { color: var(--vert); }

.pied__bas {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--filet-pale);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  font-size: var(--t-petit);
  color: var(--encre-doux);
}
.pied__legaux { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.pied__legaux a { transition: color .3s var(--courbe); }
.pied__legaux a:hover { color: var(--vert); }

/* --------------------------------------------------------------------------
   21. Descente en bas de premier écran
   -------------------------------------------------------------------------- */
/* La descente, reprise de la référence jusqu'à son geste d'arrivée : la
   barre se déploie d'abord en LARGEUR depuis le coin, puis se rétracte en
   HAUTEUR — deux mouvements dans une seule animation, et c'est ce qui la
   fait lire comme une jauge qui se met en place plutôt que comme un bouton
   qui apparaît. La flèche, elle, descend depuis le haut, se pose, et sort
   par le bas. */
.descente {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 30;
  width: 2.5rem;
  transition: opacity .45s var(--courbe), visibility .45s;
}
.descente.est-partie { opacity: 0; visibility: hidden; }

.descente__aplat {
  width: 100%;
  height: clamp(9rem, 30vh, 18rem);
  background: var(--vert-vif);
  transform: scaleX(0);
  transform-origin: left bottom;
}
:root[data-anim] .descente__aplat { animation: deployer 3s 1.6s forwards; }

@keyframes deployer {
  0%   { transform: scaleX(0) scaleY(1); }
  50%  { transform: scaleX(1) scaleY(1); }
  100% { transform: scaleX(1) scaleY(.4); }
}

.descente__bouton {
  position: absolute;
  left: 0; bottom: 0;
  width: 2.5rem; height: 2.5rem;
  border: 0;
  padding: 0;
  background: var(--encre);
  color: var(--blanc);
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background .3s var(--courbe);
}
.descente__bouton:hover { background: var(--vert); }

.descente__bouton span {
  display: block;
  width: 1px; height: 1rem;
  background: currentColor;
  position: relative;
}
:root[data-anim] .descente__bouton span { animation: pointer 3s forwards; }

.descente__bouton span::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: .4rem; height: .4rem;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: 50% 100%;
}

@keyframes pointer {
  0%        { transform: translateY(-200%); }
  25%, 75%  { transform: translateY(0); }
  100%      { transform: translateY(200%); }
}

/* --------------------------------------------------------------------------
   22. Révélations
   L'état masqué est conditionné à :root[data-anim], posé avant la première
   peinture. Une animation n'est jamais la condition d'affichage du contenu :
   sans JavaScript, l'attribut n'est pas là et tout est visible.
   -------------------------------------------------------------------------- */
:root[data-anim] .paraitre {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity .8s var(--courbe), transform .8s var(--courbe);
  will-change: opacity, transform;
}
:root[data-anim] .paraitre.est-la {
  opacity: 1;
  transform: none;
  will-change: auto;
}
:root[data-anim] .paraitre[data-retard='1'] { transition-delay: .09s; }
:root[data-anim] .paraitre[data-retard='2'] { transition-delay: .18s; }
:root[data-anim] .paraitre[data-retard='3'] { transition-delay: .27s; }
:root[data-anim] .paraitre[data-retard='4'] { transition-delay: .36s; }

/* ————— L'arrivée sur la page —————

   Le geste est celui de la référence, relevé sur ses keyframes : un voile
   plein passé sur le bloc de titre se RÉTRACTE vers la droite, pendant que
   l'œil puis le titre glissent depuis la gauche. Aucune opacité n'entre en
   jeu — c'est le voile qui découvre, pas un fondu, et c'est ce qui lui donne
   sa netteté.

   Le premier écran ne passe donc PAS par l'observateur : le faire dépendre
   d'un IntersectionObserver, ce serait faire dépendre le titre de la page du
   moment où un script s'exécute. Une animation CSS démarre seule, dès la
   première peinture.

   Et le voile est au repos à scaleX(0) — c'est-à-dire absent. Sans
   `data-anim`, donc sans JavaScript, il ne se pose jamais sur le titre :
   l'état par défaut est celui d'après l'animation, jamais celui d'avant. */
.seuil { position: relative; }

.voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--vert);
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}

:root[data-anim] .voile { animation: retirer 1.4s var(--sortie) forwards; }
:root[data-anim] .seuil > *:not(.voile) { animation: glisser 1.4s var(--sortie) forwards; }
:root[data-anim] .seuil > *:nth-child(2) { animation-delay: .21s; }
:root[data-anim] .seuil > *:nth-child(3) { animation-delay: .35s; }
:root[data-anim] .seuil > *:nth-child(4) { animation-delay: .42s; }
:root[data-anim] .seuil > *:nth-child(5) { animation-delay: .49s; }
:root[data-anim] .seuil > *:nth-child(6) { animation-delay: .56s; }

@keyframes retirer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Le titre glisse, il n'apparaît pas : c'est le voile qui le découvre.

   La référence glisse de -20 %, mais son voile couvre le bandeau sur toute la
   largeur. Ici le voile s'arrête à la marge : un décalage proportionnel ferait
   sortir le titre à sa gauche, sur le rail, hors du rideau qui est censé le
   cacher. Une valeur absolue tient dans la marge quelle que soit la largeur
   du bloc, et le geste est le même à l'œil. */
@keyframes glisser {
  from { transform: translateX(-2.75rem); }
  to   { transform: none; }
}

/* Le premier écran de l'accueil : le portrait à gauche, le titre en face.
   La photo occupe une seule rangée de la grille et s'étend sur celles du
   texte — sans quoi elle pousserait le titre sous elle. */
.seuil__portrait {
  grid-column: 1 / span 4;
  grid-row: 1 / span 4;
  align-self: center;
  margin: 0;
}
.seuil__col { grid-column: 6 / -1; }
.seuil__col:first-of-type { margin-top: 0; }

.seuil .chapo { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.seuil .chapo + .seuil__col { margin-top: clamp(1.25rem, 2.2vw, 1.75rem); }

/* --------------------------------------------------------------------------
   23. Adaptation
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .col-gauche, .col-gauche-r, .pli__enonce { grid-column: 1 / span 7; }
  .col-droite, .pli__corps { grid-column: 8 / span 5; }
  .bloc-appel { grid-column: 1 / -1; }
  .pied__bloc { grid-column: span 4; }
}

@media (max-width: 900px) {
  :root { --marge: clamp(1.25rem, 6vw, 4rem); }

  /* Le rail passe à l'horizontale, en haut à gauche : le nom reste le
     premier signe de la page, il cesse simplement d'être debout. */
  .rail {
    position: fixed;
    inset: 0 auto auto 0;
    width: auto;
    height: auto;
    min-height: 4rem;
    align-items: center;
    padding: 0 var(--marge);
    justify-content: flex-start;
  }
  .rail__nom {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: clamp(.95rem, 3.2vw, 1.2rem);
    letter-spacing: .06em;
  }
  /* Le fond blanc sous le nom, sinon il se pose sur le texte au défilement. */
  .rail::before {
    content: '';
    position: fixed;
    inset: 0 0 auto 0;
    height: 4rem;
    background: var(--blanc);
    z-index: -1;
    opacity: 0;
    transition: opacity .35s var(--courbe);
  }
  .rail.est-posee::before { opacity: 1; }
  body.tiroir-ouvert .rail::before { opacity: 0; }

  .entete { min-height: 4rem; }
  .nav { display: none; }
  .brule { opacity: 1; visibility: visible; }

  .section--sommet { padding-top: clamp(7rem, 16vh, 10rem); }

  .col-gauche, .col-gauche-r, .col-droite, .col-milieu,
  .pli__enonce, .pli__corps, .seuil__col,
  .tete, .tete--large, .corps, .corps--decale, .bloc-appel,
  .col-portrait { grid-column: 1 / -1; }

  /* Le portrait ne prend pas toute la largeur d'un téléphone : à 390 px il
     ferait 440 px de haut et repousserait le texte hors de l'écran. */
  .col-portrait { max-width: 15rem; }

  .seuil__portrait {
    grid-column: 1 / -1;
    grid-row: auto;
    max-width: 13rem;
  }

  .liste-filet--deux { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .pied__bloc { grid-column: span 6; }
  .pied__bloc--filet { border-left: 0; border-top: 2px solid var(--vert-vif); padding: 1.5rem 0 0; }

  .sommaire { min-height: 4rem; gap: 1rem; }
  .sommaire__liens { display: none; }
}

@media (max-width: 620px) {
  .pied__bloc { grid-column: 1 / -1; }
  .grille-tarifs { grid-template-columns: 1fr; }
  .descente { display: none; }
  .liste-plate > li { grid-template-columns: 1fr; }
  .liste-plate__num { display: block; margin-bottom: .4rem; }
  .liste-plate__desc { grid-column: 1; }
  .tiroir { justify-content: flex-start; padding-top: 6rem; }
}

/* --------------------------------------------------------------------------
   24. Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  :root[data-anim] .paraitre { opacity: 1; transform: none; }
  :root[data-anim] .seuil > *, :root[data-anim] .voile { animation: none; }
  .tiroir { transition: none; }
}

/* --------------------------------------------------------------------------
   25. Impression
   Un contrat se relit sur papier ; une page d'honoraires aussi.
   -------------------------------------------------------------------------- */
@media print {
  :root { --marge: 0; }
  .rail, .entete, .tiroir, .sommaire, .descente, .pied__legaux { display: none !important; }
  body { font-size: 11pt; line-height: 1.45; color: #000; }
  .bande, .pave { background: #fff !important; color: #000 !important; }
  .bande *, .pave * { color: #000 !important; }
  .section { padding-block: 1.5rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #444; }
  .paraitre { opacity: 1 !important; transform: none !important; }
  .seuil > *, .voile { animation: none !important; }
  .voile { display: none !important; }

  /* Un bouton d'envoi imprimé n'envoie rien ; les coordonnées, elles, servent. */
  .envoi, .reponse { display: none !important; }
  .champ input, .champ select, .champ textarea { border-bottom: 1px solid #999; }

  /* Une grille d'honoraires coupée en deux au milieu d'un prix est illisible :
     c'est la page qu'on imprime le plus, et celle qu'on relit à côté d'un
     devis. */
  .tarif, .repere, .question, .liste-plate > li, .liste-filet > li,
  .coordonnees > li { break-inside: avoid; page-break-inside: avoid; }
  .section-titre, .titre, h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .question[open] .question__corps { display: block; }

  /* Les questions repliées se déplient à l'impression : imprimer une page de
     questions sans les réponses n'aurait aucun sens. */
  .question > summary ~ * { display: block !important; }
  .question__signe { display: none; }
}