/* ══════════════════════════════════════════════════════════════════════
   ComptAC's — la feuille du site.

   La direction vient de la marque et du métier, pas d'un modèle :
     - le LOGO (carte de visite et signature d'Adeline Carol) : COMPTA en
       Playfair Display vert forêt, puis un grand A sauge et un grand C
       menthe qui se SUPERPOSENT en transparence — A·C, Adeline Carol ;
     - le MÉTIER : la partie double. Deux lettres qui se doublent, deux
       colonnes qui s'équilibrent, le grand-livre et ses filets fins, le
       DOUBLE FILET qui souligne un total.

   D'où quatre motifs, et rien d'autre : le MONOGRAMME (en grand, en
   filigrane), le CALQUE (une photo n'est jamais seule, un plan menthe la
   double, décalé), le DOUBLE FILET (avant chaque titre, sous chaque solde)
   et le POINT MÉDIAN « • » du logo.

   Les couleurs sont des PIGMENTS (--p-*) qui n'alimentent que des JETONS
   de rôle (--fond, --texte, --accent…). Aucune règle n'emploie un pigment
   directement, sauf le monogramme et les calques (sauge, menthe) : une
   palette change sans relire la feuille, et .section--sable / --sombre
   redéfinissent les MÊMES jetons.

   Le sauge et le menthe sont DÉCORATIFS : trop clairs pour porter du texte
   sur fond blanc (3,8:1 et 1,4:1). Un texte « couleur de la marque » prend
   --accent-encre (le sauge assombri, 5,7:1).
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Les pigments — écrasés par le thème (administration, palettes). */
  --p-fond: #ffffff;
  --p-sable: #eef5f2;
  --p-encre: #1f332c;
  --p-doux: #4d5f58;
  --p-accent: #2b453d;
  --p-accent-clair: #d9ece6;
  --p-accent-profond: #3a7060;
  --p-sauge: #578e7e;
  --p-menthe: #badcd4;
  --p-sombre: #1e312a;
  --p-sur-sombre: #eef5f2;
  --accent-texte: #ffffff;

  /* Les rôles. */
  --fond: var(--p-fond);
  --surface: color-mix(in srgb, var(--p-fond) 70%, var(--p-sable));
  --carte: var(--p-fond);
  --texte: var(--p-encre);
  --texte-doux: var(--p-doux);
  --accent: var(--p-accent);
  --accent-sur: var(--accent-texte);
  --accent-encre: var(--p-accent-profond);
  --filet: var(--p-accent-profond);
  --lisere: color-mix(in srgb, var(--p-encre) 12%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-encre) 26%, transparent);
  --sable: var(--p-sable);
  --calque: var(--p-menthe);
  --mono-a: var(--p-sauge);
  --mono-c: var(--p-menthe);

  /* Alias attendus par le module de réservation du parc (contrat). */
  --primary: var(--accent);
  --primary-text: var(--accent-sur);
  --text: var(--texte);
  --bg: var(--fond);

  --titre-police: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --texte-police: 'Source Sans 3', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --ui-police: var(--texte-police);

  /* Le titre suit aussi la HAUTEUR : sur un 1280 × 800, trois lignes à
     6 rem pousseraient les repères sous le premier écran. */
  --t-hero: min(clamp(2.7rem, 1.4rem + 4.4vw, 5.9rem), 9.4svh);
  --t-section: clamp(2.4rem, 1.4rem + 3.2vw, 4.4rem);
  --t-carte: clamp(1.4rem, 1.2rem + .7vw, 1.95rem);

  --large: 1360px;
  --marge: clamp(1rem, 4vw, 3rem);
  --rythme: clamp(4.5rem, 3rem + 6vw, 9rem);
  --rayon: 18px;
  --rayon-s: 10px;
  --ombre: 0 28px 60px -34px color-mix(in srgb, var(--p-encre) 55%, transparent);
  --haut-entete: 96px;
  --barre-appel: 0px;
}

/* Les sections redéfinissent les MÊMES jetons : un composant s'écrit une
   fois et fonctionne des trois côtés. */
.section--sable, .hero--page, .hero--partie {
  --fond: var(--p-sable);
  --surface: var(--p-fond);
  --carte: var(--p-fond);
  --calque: color-mix(in srgb, var(--p-menthe) 80%, var(--p-sauge));
}
.section--sombre, .pied, .appel, .hero--calques {
  --fond: var(--p-sombre);
  --surface: color-mix(in srgb, var(--p-sombre) 86%, var(--p-sur-sombre));
  --carte: color-mix(in srgb, var(--p-sombre) 90%, var(--p-sur-sombre));
  --texte: var(--p-sur-sombre);
  --texte-doux: color-mix(in srgb, var(--p-sur-sombre) 78%, var(--p-sombre));
  /* Sur le vert forêt, le bouton plein devient menthe, le texte qu'il
     porte devient le vert forêt. */
  --accent: var(--p-menthe);
  --accent-sur: var(--p-sombre);
  --accent-encre: var(--p-menthe);
  --filet: var(--p-menthe);
  --lisere: color-mix(in srgb, var(--p-sur-sombre) 16%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-sur-sombre) 34%, transparent);
  --sable: color-mix(in srgb, var(--p-sombre) 80%, var(--p-sur-sombre));
  --mono-a: var(--p-sauge);
  --mono-c: var(--p-menthe);
}

/* ── Les surfaces du navigateur ────────────────────────────────────── */

::selection { background: var(--p-menthe); color: var(--p-encre); }
input, textarea { caret-color: var(--p-accent-profond); }
html { scrollbar-width: thin; scrollbar-color: var(--p-sauge) transparent; }

/* ── Réinitialisation ──────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  scroll-padding-top: calc(var(--haut-entete) + 1.2rem);
  background: var(--p-sombre);
}

body {
  margin: 0;
  background: var(--p-fond);
  color: var(--texte);
  font: 400 clamp(1.04rem, 1rem + .22vw, 1.16rem)/1.65 var(--texte-police);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img[hidden] { display: none; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button, [role="button"], .bouton, .pastille, .pagination button, .tiroir-bascule,
.select-habille__bouton, .barre-appel a, .tiroir__nav a, .question summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--titre-police);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 700; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 3px;
  border-radius: 4px;
}

.ic { flex: none; display: inline-block; vertical-align: middle; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: .8rem 1.3rem; background: var(--p-accent); color: var(--accent-texte); font-weight: 700;
}
.saut-contenu:focus { left: .5rem; top: .5rem; }
.conteneur { width: 100%; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); }

/* ── Les motifs ────────────────────────────────────────────────────── */

/* Le double filet : celui qui souligne un total dans le grand-livre. Posé
   avant chaque titre, et collé à lui (un demi-rem). */
.double-filet {
  display: block; flex: none; width: 3.4rem; height: 7px;
  border-block: 1.5px solid var(--filet);
}

/* Le monogramme : le A sauge passe devant le C menthe, en transparence. */
.monogramme { overflow: visible; }
.monogramme text { font-family: var(--titre-police); font-size: 420px; }
.monogramme__a { font-weight: 700; fill: var(--mono-a); }
.monogramme__c { font-weight: 500; fill: var(--mono-c); }
/* Sur un fond clair, le A se « multiplie » sur le C : leur recouvrement
   fonce, comme deux encres transparentes. */
.monogramme__a { mix-blend-mode: multiply; }
.hero--calques .monogramme__a, .pied .monogramme__a, .appel .monogramme__a { mix-blend-mode: normal; }

/* La photo doublée d'un calque : le menthe, décalé derrière elle. */
.photo-calque { position: relative; isolation: isolate; }
.photo-calque__fond {
  position: absolute; z-index: -1; inset: 12% -7% -7% 14%;
  border-radius: var(--rayon); background: var(--calque);
}
.photo-calque--inverse .photo-calque__fond { inset: 12% 14% -7% -7%; }
.photo-calque__photo { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--rayon); background: var(--sable); }
.photo-calque__photo img { width: 100%; height: 100%; object-fit: cover; }

.pastille-photo { position: absolute; z-index: 4; overflow: hidden; border-radius: 50%; aspect-ratio: 1; border: 6px solid var(--fond); box-shadow: var(--ombre); background: var(--sable); }
.pastille-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Sections et titres ────────────────────────────────────────────── */

.section { position: relative; padding-block: var(--rythme); background: var(--fond); color: var(--texte); }
.section > .conteneur { position: relative; z-index: 1; }
/* Deux sections claires qui se suivent : un filet, jamais un aplat gris. */
.section:not([class*="section--"]) + .section:not([class*="section--"]) { border-top: 1px solid var(--lisere); }

.bloc-titre { display: flex; flex-direction: column; gap: .6rem; max-width: 50rem; margin-bottom: clamp(2.2rem, 4vw, 3.6rem); }
.bloc-titre--centre { margin-inline: auto; text-align: center; align-items: center; }
.bloc-titre .chapo { margin-top: .6rem; }
.titre-section { font-size: var(--t-section); max-width: 15em; }
.chapo { font-size: clamp(1.1rem, 1rem + .35vw, 1.32rem); color: var(--texte-doux); max-width: 40em; line-height: 1.55; }
.texte { color: var(--texte-doux); max-width: 38em; }
.texte + .texte { margin-top: 1em; }

/* ── Boutons ───────────────────────────────────────────────────────────
   Une ligne, jamais coupée : le libellé est court par contrat. Des angles
   à peine adoucis — la rigueur du métier, sans la raideur. */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 50px; padding: .8rem 1.5rem;
  border: 1.5px solid transparent; border-radius: 6px;
  font-family: var(--ui-police); font-size: 1rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.bouton--grand { min-height: 56px; padding-inline: 1.8rem; font-size: 1.04rem; }
.bouton--accent { background: var(--accent); color: var(--accent-sur); }
.bouton--contour { border-color: var(--lisere-fort); color: var(--texte); background: transparent; }
.bouton--clair { background: var(--p-menthe); color: var(--p-sombre); }
.bouton--contour-clair { border-color: color-mix(in srgb, var(--p-sur-sombre) 45%, transparent); color: var(--p-sur-sombre); }
@media (hover: hover) and (pointer: fine) {
  .bouton--accent:hover, .bouton--clair:hover { box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--p-encre) 70%, transparent); transform: translateY(-1px); }
  .bouton--contour:hover { border-color: var(--texte); }
  .bouton--contour-clair:hover { border-color: var(--p-sur-sombre); }
  .bouton:hover .ic { transform: translateX(2px); }
}
.bouton .ic { transition: transform .25s; }

/* Un lien qui avance : souligné d'un filet, comme une ligne pointée. */
.lien-fleche {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ui-police); font-size: .98rem; font-weight: 600; color: var(--texte);
  border-bottom: 1.5px solid var(--filet); padding-bottom: .15rem;
  transition: gap .25s;
}
.lien-fleche .ic { color: var(--accent-encre); }
@media (hover: hover) and (pointer: fine) { .lien-fleche:hover { gap: .75rem; } }

/* ── En-tête ───────────────────────────────────────────────────────────
   Posé SUR le haut de page (fixed) : le héros reste plein écran, et
   l'en-tête prend un fond dès qu'on défile. */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 90;
  color: var(--p-encre);
  transition: background-color .35s, box-shadow .35s, color .35s;
}
.entete.est-defilee {
  background: color-mix(in srgb, var(--p-fond) 96%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--lisere);
}
.entete__dedans {
  display: flex; align-items: center; gap: 1.6rem;
  max-width: var(--large); margin-inline: auto;
  min-height: 92px; padding: .5rem var(--marge);
  transition: min-height .35s;
}
.entete.est-defilee .entete__dedans { min-height: 72px; }
.marque { display: flex; align-items: center; gap: 1rem; flex: none; }
/* Deux versions du logo : la verte sur fond clair, la crème sur fond
   sombre. Le ton vient du thème (data-ton sur <html>) — et le haut de page
   « Calques », vert forêt, prend la crème tant qu'on n'a pas défilé. */
html:not([data-ton="sombre"]) .marque__logo--fond-sombre,
html[data-ton="sombre"] .marque__logo--fond-clair { display: none; }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .marque__logo--fond-clair { display: none; }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .marque__logo--fond-sombre { display: block; }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) { color: var(--p-sur-sombre); }
.marque__logo { height: 50px; width: auto; transition: height .35s; }
.entete.est-defilee .marque__logo { height: 38px; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.25; padding-left: 1rem; border-left: 1px solid var(--lisere-fort); }
.marque__texte b { font-family: var(--titre-police); font-size: 1rem; font-weight: 500; }
.marque__texte span { font-size: .84rem; color: var(--p-doux); }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .marque__texte { border-left-color: color-mix(in srgb, var(--p-sur-sombre) 35%, transparent); }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .marque__texte span { color: color-mix(in srgb, var(--p-sur-sombre) 78%, var(--p-sombre)); }

.menu { margin-left: auto; }
.menu ul { display: flex; gap: clamp(1rem, 1.8vw, 2.1rem); }
.menu a {
  position: relative; display: inline-block; padding-block: .55rem;
  font-family: var(--ui-police); font-size: 1rem; font-weight: 600; white-space: nowrap;
}
/* Le lien actif est souligné du double filet. */
.menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .15rem; height: 5px;
  border-block: 1.5px solid currentColor; opacity: .85;
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.menu a.est-actif::after, .menu a:hover::after { transform: scaleX(1); }
/* En mode édition, le ::after d'un lien porte l'étiquette de l'éditeur :
   le filet du menu s'y mêlait. On le rend à l'éditeur. */
body.edit-mode .menu a[data-edit]::after { border: 0; opacity: 1; left: 50%; right: auto; bottom: auto; height: auto; z-index: 10000; transform: translateX(-50%); }

.entete__actions { display: flex; align-items: center; gap: .7rem; }
.entete__tel { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 .6rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.entete__contact { min-height: 46px; padding-inline: 1.2rem; font-size: .95rem; }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .entete__contact { background: var(--p-menthe); color: var(--p-sombre); }

.choix-langue { position: relative; }
.choix-langue__bouton { min-height: 44px; padding: 0 .8rem; background: none; border: 1px solid var(--lisere-fort); border-radius: 6px; font-size: .85rem; font-weight: 600; letter-spacing: .08em; }
html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .choix-langue__bouton { border-color: color-mix(in srgb, var(--p-sur-sombre) 35%, transparent); }
.choix-langue__liste { position: absolute; right: 0; top: calc(100% + .4rem); display: none; flex-direction: column; min-width: 10rem; padding: .4rem; background: var(--p-fond); color: var(--p-encre); border: 1px solid var(--lisere); border-radius: var(--rayon-s); box-shadow: var(--ombre); }
.choix-langue[data-ouvert] .choix-langue__liste { display: flex; }
.choix-langue__liste a, .choix-langue__liste span { padding: .55rem .8rem; border-radius: 6px; }
.choix-langue__liste span { font-weight: 700; background: var(--p-sable); }
@media (hover: hover) and (pointer: fine) { .choix-langue__liste a:hover { background: var(--p-sable); } }

.tiroir-bascule { display: none; place-items: center; width: 48px; height: 48px; padding: 0; background: none; border: 0; color: inherit; }
.tiroir-bascule__croix { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__menu { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__croix { display: block; }

/* ── Le tiroir ─────────────────────────────────────────────────────── */

.tiroir {
  position: fixed; inset: var(--haut-entete) 0 0; z-index: 85;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: 1.6rem var(--marge) calc(1.6rem + env(safe-area-inset-bottom));
  background: var(--p-fond); color: var(--p-encre); overflow-y: auto; overscroll-behavior: contain;
}
.tiroir[hidden] { display: none; }
.tiroir__nav a {
  display: block; padding: .55rem 0;
  font-family: var(--titre-police); font-size: clamp(1.9rem, 7.4vw, 2.6rem); font-weight: 500; line-height: 1.15;
  border-bottom: 1px solid var(--lisere);
}
.tiroir__nav a.est-actif { font-style: italic; color: var(--p-accent-profond); }
.tiroir__pied { display: flex; flex-direction: column; gap: .9rem; }
.tiroir__contact { width: 100%; }
.tiroir__appel { display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: var(--rayon-s); border: 1.5px solid var(--lisere-fort); }
.tiroir__appel-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--p-sable); }
.tiroir__appel-texte { display: flex; flex-direction: column; line-height: 1.3; }
.tiroir__appel-texte i { font-style: normal; font-size: .88rem; color: var(--p-doux); }
.tiroir__appel-texte b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.tiroir__adresse { color: var(--p-doux); font-size: .98rem; }
.tiroir__langues { display: flex; gap: .4rem; }
.tiroir__langues a, .tiroir__langues span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 1px solid var(--lisere-fort); border-radius: 6px; }
.tiroir__langues span { font-weight: 700; background: var(--p-sable); }

/* ── Bandeau d'annonce ─────────────────────────────────────────────── */

.annonce { background: var(--p-accent); color: var(--accent-texte); font-size: .92rem; }
.annonce[hidden] { display: none; }
.annonce__dedans { display: flex; align-items: center; justify-content: center; gap: .9rem; min-height: 40px; padding-block: .35rem; text-align: center; line-height: 1.45; }
.annonce a { font-weight: 700; border-bottom: 1.5px solid currentColor; white-space: nowrap; }
.annonce__fermer { display: grid; place-items: center; width: 34px; height: 34px; margin-left: .3rem; padding: 0; background: none; border: 0; color: inherit; opacity: .8; }

/* ══ Les hauts de page ═════════════════════════════════════════════════
   100 svh ET PLEIN : les repères sont dedans, en pied d'écran. Le texte
   est ANCRÉ EN HAUT par un rembourrage constant : le titre tombe à la
   même hauteur sur toutes les pages. Le héros est en grid, jamais en flex
   (un flex:1 écrasait la largeur du conteneur). */

.hero { position: relative; display: grid; min-height: 100svh; overflow: hidden; background: var(--fond); color: var(--texte); isolation: isolate; }
.hero[hidden] { display: none; }
.hero__dedans {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-rows: 1fr auto;
  column-gap: clamp(2rem, 5vw, 5.5rem);
  width: 100%; max-width: var(--large); margin-inline: auto;
  padding: calc(var(--haut-entete) + clamp(1rem, 5vh, 4.5rem)) var(--marge) 0;
}
.hero__texte { grid-column: 1; grid-row: 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 3; }
.hero .reperes { position: relative; z-index: 3; }
.hero__surtitre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: clamp(1rem, 2.4vh, 1.6rem); font-family: var(--titre-police); font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); color: var(--accent-encre); }
.hero__surtitre .point { color: var(--mono-a); }
.titre-hero { font-size: var(--t-hero); line-height: 1.02; max-width: 11em; letter-spacing: -.02em; }
.chapo--hero { margin-top: clamp(1.1rem, 2.4vh, 1.7rem); max-width: 34em; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: clamp(1.5rem, 3.4vh, 2.5rem); }

.hero__visuel { grid-column: 2; grid-row: 1; position: relative; display: grid; place-items: center; min-height: 0; }

/* Les repères. Une valeur tient en un ou deux mots ; le point médian du
   logo les sépare. */
.reperes {
  grid-column: 1 / -1; grid-row: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1rem, 3vh, 3rem);
  border-top: 1px solid var(--lisere-fort);
}
.repere { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: clamp(.8rem, 2.2vh, 1.5rem) 1.4rem clamp(.9rem, 2.6vh, 1.9rem) 0; }
.repere + .repere { padding-left: 1.6rem; }
.repere + .repere::before { content: '•'; position: absolute; left: 0; top: clamp(.8rem, 2.2vh, 1.5rem); font-family: var(--titre-police); font-size: 1.6rem; line-height: 1; color: var(--mono-a); }
.repere b { font-family: var(--titre-police); font-size: clamp(1.45rem, 1.05rem + 1vw, 2.15rem); font-weight: 500; line-height: 1.05; white-space: nowrap; }
.repere span { font-size: .92rem; color: var(--texte-doux); line-height: 1.4; }

/* ── A · Monogramme ── */
.hero--monogramme { background: color-mix(in srgb, var(--p-menthe) 9%, var(--p-fond)); }
/* Un filet de grand-livre à peine visible, pour que le blanc du haut de
   page ne se confonde pas avec celui de la section suivante. */
.hero--monogramme::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* La teinte « sable » de la palette : menthe pâle sur Forêt, vert à
     peine plus clair sur Nuit — jamais un gris terne. */
  background: linear-gradient(90deg, transparent calc(50% + 2rem), var(--p-sable) calc(50% + 2rem));
}
.monogramme-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; width: min(100%, 31rem); }
.monogramme-hero .monogramme { width: 100%; height: auto; max-height: min(58svh, 34rem); }
.monogramme-hero__legende { font-family: var(--titre-police); font-style: italic; font-size: 1.1rem; color: var(--texte-doux); }

/* ── B · Partie double ── */
.hero--partie {
  /* Le papier du grand-livre : des filets horizontaux très fins, et la
     double marge verticale à gauche (--marge-livre : contre le bord sur
     téléphone, sinon elle traverse le texte). */
  --marge-livre: 2.2rem;
  --trait-livre: color-mix(in srgb, var(--p-sauge) 45%, transparent);
  background:
    linear-gradient(90deg, transparent var(--marge-livre), var(--trait-livre) var(--marge-livre), var(--trait-livre) calc(var(--marge-livre) + 1px), transparent calc(var(--marge-livre) + 1px), transparent calc(var(--marge-livre) + 5px), var(--trait-livre) calc(var(--marge-livre) + 5px), var(--trait-livre) calc(var(--marge-livre) + 6px), transparent calc(var(--marge-livre) + 6px)),
    repeating-linear-gradient(180deg, transparent 0 2.35rem, color-mix(in srgb, var(--p-sauge) 16%, transparent) 2.35rem calc(2.35rem + 1px)),
    var(--p-sable);
}
.grand-livre {
  position: relative; z-index: 2; width: min(100%, 33rem);
  padding: clamp(1.3rem, 2.4vw, 2rem) clamp(1.3rem, 2.6vw, 2.2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--p-fond); color: var(--p-encre);
  border: 1px solid var(--lisere); border-radius: 4px;
  box-shadow: 0 40px 80px -46px color-mix(in srgb, var(--p-encre) 60%, transparent);
  font-variant-numeric: tabular-nums;
}
.grand-livre__titre { padding-bottom: .9rem; margin-bottom: .2rem; border-bottom: 1px solid var(--lisere-fort); font-family: var(--titre-police); font-style: italic; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.5rem); }
.grand-livre__colonnes { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.grand-livre__col { padding: .9rem 1.1rem 1rem 0; }
.grand-livre__col--nous { padding: .9rem 0 1rem 1.2rem; border-left: 4.5px double color-mix(in srgb, var(--p-sauge) 70%, transparent); }
.grand-livre__tete { margin-bottom: .6rem; font-family: var(--ui-police); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-accent-profond); }
.grand-livre ul { display: flex; flex-direction: column; }
/* Une grille, pas un flex : une ligne qui plie (« de overstap naar een
   vennootschap ») ne déplace pas sa coche — les coches restent en colonne. */
.grand-livre li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .6rem; padding-block: .5rem; border-bottom: 1px dotted var(--lisere-fort); font-size: 1.04rem; line-height: 1.35; }
.grand-livre li .ic { margin-top: calc((1lh - 17px) / 2); color: var(--p-accent-profond); }
.grand-livre__solde { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: .4rem; padding-top: .9rem; }
.grand-livre__solde span { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--p-doux); }
.grand-livre__solde b { font-family: var(--titre-police); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 1.2rem + .8vw, 2rem); padding-bottom: .1rem; border-bottom: 4.5px double var(--p-accent-profond); }
.hero--partie .pastille-photo { width: clamp(7rem, 15svh, 10.5rem); right: max(-1rem, calc(50% - 20rem)); top: 4%; border-color: var(--p-sable); }

/* ── C · Calques ── */
.hero--calques { background: var(--fond); }
.hero__filigrane { position: absolute; z-index: 0; right: -6%; bottom: -18%; width: min(62vw, 46rem); opacity: .07; pointer-events: none; }
.hero__filigrane .monogramme { width: 100%; height: auto; }
.hero__filigrane .monogramme text { fill: var(--p-sur-sombre); }
.calques { position: relative; width: min(100%, 34rem); aspect-ratio: 1 / 1.02; max-height: 62svh; }
.calque { position: absolute; border-radius: var(--rayon); }
.calque span { position: absolute; left: 1.2rem; bottom: 1rem; right: 1rem; font-family: var(--titre-police); font-size: clamp(1.2rem, 1rem + .8vw, 1.75rem); line-height: 1.1; }
.calque--photo { inset: 0 6% 26% 12%; overflow: hidden; transform: rotate(-2.5deg); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .65); background: var(--sable); }
.calque--photo img { width: 100%; height: 100%; object-fit: cover; }
.calque--menthe { left: 0; bottom: 8%; width: 50%; height: 27%; background: color-mix(in srgb, var(--p-menthe) 84%, transparent); color: var(--p-sombre); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.calque--sauge { right: 0; bottom: 0; width: 46%; height: 24%; background: color-mix(in srgb, var(--p-sauge) 86%, transparent); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.calque--clair { right: 2%; top: -3%; width: 36%; height: 22%; background: color-mix(in srgb, var(--p-sur-sombre) 92%, transparent); color: var(--p-sombre); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, .6); }
/* Le texte blanc sur le sauge : contraste 3,8:1 au mieux — réservé aux
   grandes lettres (Playfair ≥ 1,4 rem, « grand texte » au sens du WCAG). */

/* ── Le haut des autres pages : même ancrage, la photo doublée ── */
.hero--page { min-height: auto; background: var(--fond); }
.hero--page .hero__dedans { grid-template-rows: auto; padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero--page .photo-calque--page { justify-self: end; width: min(100%, 30rem); height: clamp(18rem, 48svh, 32rem); }
.hero--page .hero__visuel { place-items: center end; padding-right: 7%; }
.hero--page .titre-hero { font-size: clamp(2.7rem, 1.6rem + 3.9vw, 5.3rem); }
.hero--page .photo-calque__fond { background: var(--p-menthe); }

/* Grand écran : la photo DÉBORDE dans la section suivante — la limite
   entre les deux fonds devient un geste voulu, pas une coupure. */
@media (min-width: 901px) {
  .hero--page { overflow: visible; z-index: 2; --debord: clamp(4rem, 8vw, 7rem); }
  .hero--page .photo-calque--page { margin-bottom: calc(-1 * var(--debord)); }
  .hero--page + .section { padding-top: calc(var(--rythme) + clamp(3rem, 6vw, 5rem)); }
  .hero--page + .fiches-services { padding-top: calc(clamp(4rem, 8vw, 7rem) + 1.6rem); }
  .hero--page .photo-calque__photo { box-shadow: 0 34px 70px -32px color-mix(in srgb, var(--p-encre) 55%, transparent); }
}

/* ── Le commutateur de relecture ── */
.commutateur {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 95;
  width: 19.5rem; padding: 0 .8rem .8rem; max-height: calc(100svh - 2rem); overflow-y: auto;
  background: rgba(18, 30, 26, .97); color: #fff;
  border-radius: 14px; box-shadow: 0 22px 50px rgba(0, 0, 0, .35);
  font-size: .9rem;
}
.commutateur[hidden] { display: none; }
.commutateur.est-repliee { padding-bottom: 0; }
.commutateur.est-repliee .commutateur__corps { display: none; }
.commutateur__poignee { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 50px; padding: 0 .2rem; background: none; border: 0; color: #fff; }
.commutateur__poignee .ic { transform: rotate(90deg); transition: transform .2s; }
.commutateur.est-repliee .commutateur__poignee .ic { transform: rotate(-90deg); }
.commutateur__titre { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.commutateur__groupe { display: flex; align-items: center; justify-content: space-between; margin: .4rem 0 .35rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.commutateur__choix { display: grid; gap: .3rem; }
.commutateur__choix button { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .7rem; text-align: left; background: rgba(255, 255, 255, .06); border: 1px solid transparent; border-radius: 8px; color: rgba(255, 255, 255, .86); }
.commutateur__choix button[aria-checked="true"] { background: rgba(255, 255, 255, .14); border-color: #badcd4; color: #fff; }
.commutateur__choix strong { font-weight: 600; }
.commutateur__choix--rangee { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-bottom: .3rem; }
.commutateur__choix--rangee button { justify-content: center; padding-inline: .3rem; min-height: 40px; }
.commutateur__pastilles { display: inline-flex; flex: none; }
.commutateur__pastilles i { width: 16px; height: 16px; border-radius: 50%; margin-left: -5px; border: 1px solid rgba(255, 255, 255, .5); }
.commutateur__pastilles i:first-child { margin-left: 0; }
.commutateur__rejouer { display: inline-flex; align-items: center; gap: .3rem; min-height: 30px; padding: 0 .6rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: none; color: #fff; font-size: .72rem; letter-spacing: .04em; text-transform: none; }
.commutateur__rejouer .ic { transform: rotate(180deg) scaleX(-1); }

/* ══ L'accueil ═════════════════════════════════════════════════════════ */

/* Pour qui : quatre profils. Celui qu'Adeline cite « surtout » porte un
   badge et un fond menthe — la case de l'administration décide lequel. */
.clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.client { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.5rem, 2.4vw, 2.1rem); background: var(--carte); border: 1px solid var(--lisere); border-radius: var(--rayon); }
.client[hidden] { display: none; }
.client:has(.client__badge:not([hidden])) { background: var(--p-accent-clair); border-color: transparent; color: var(--p-encre); --texte-doux: var(--p-doux); }
.client__badge { align-self: flex-start; display: inline-flex; min-height: 1.9rem; align-items: center; padding: .15rem .8rem; border-radius: 999px; background: var(--p-accent); color: var(--accent-texte); font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
.client__badge[hidden] { display: none; }
.client__nom { font-size: var(--t-carte); }
.client__texte { color: var(--texte-doux); }
/* Mise en avant : sur grand écran, la carte « Et surtout » est plus large
   que les autres — « complémentaire » y tient sur une ligne. La grille
   suit la carte, où qu'elle soit dans l'ordre (case de l'administration). */
@media (min-width: 1241px) {
  .clients { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: dense; }
  .clients:has(.client__badge:not([hidden])) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .client:has(.client__badge:not([hidden])) { grid-column: span 2; }
}
.client__nom { hyphens: manual; overflow-wrap: normal; }

/* Les services, en lignes de grand-livre. Le rang se compte en CSS : une
   ligne masquée dans l'administration ne laisse pas de trou. */
.services-apercu__dedans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.services-apercu__tete { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; position: sticky; top: calc(var(--haut-entete) + 2rem); }
.services-apercu__tete .bloc-titre { margin-bottom: 1.4rem; }
.lignes-services { counter-reset: rang; border-top: 1.5px solid var(--texte); }
.ligne-service { counter-increment: rang; border-bottom: 1px solid var(--lisere-fort); }
.ligne-service[hidden] { display: none; }
.ligne-service__lien { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; grid-template-areas: "rang nom fleche" "rang accroche fleche"; column-gap: 1rem; row-gap: .2rem; align-items: center; padding: clamp(1.1rem, 2vw, 1.6rem) 0; }
.ligne-service__rang { grid-area: rang; align-self: start; font-family: var(--titre-police); font-size: 1.15rem; color: var(--accent-encre); font-variant-numeric: lining-nums tabular-nums; padding-top: .35rem; }
.ligne-service__rang::before { content: counter(rang, decimal-leading-zero); }
.ligne-service__nom { grid-area: nom; font-family: var(--titre-police); font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.3rem); line-height: 1.1; }
.ligne-service__accroche { grid-area: accroche; color: var(--texte-doux); }
.ligne-service__fleche { grid-area: fleche; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--lisere-fort); color: var(--accent-encre); transition: background-color .25s, color .25s, transform .25s; }
@media (hover: hover) and (pointer: fine) {
  .ligne-service__lien:hover .ligne-service__fleche { background: var(--accent); color: var(--accent-sur); border-color: var(--accent); transform: translateX(3px); }
  .ligne-service__lien:hover .ligne-service__nom { color: var(--accent-encre); }
}

/* Image + texte. */
.duo__dedans { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2.6rem, 6vw, 6.5rem); align-items: center; }
.duo--inverse .duo__image { order: 2; justify-self: end; }
.duo__image { width: calc(100% - 2rem); max-width: 31rem; aspect-ratio: 4 / 4.4; }
.duo__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; min-width: 0; }
.duo__texte .bloc-titre { margin-bottom: 0; }
.duo__texte > .texte + .texte { margin-top: -.3rem; }
.duo__boutons { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; }
.duo__badge { order: -1; margin-bottom: -.4rem; }

/* Les listes pointées : une coche dans un petit carré, comme une ligne
   cochée du grand-livre. */
.liste-pointee { display: flex; flex-direction: column; gap: .6rem; }
.liste-pointee li { position: relative; padding-left: 2rem; }
.liste-pointee li::before {
  content: ''; position: absolute; left: 0; top: calc((1lh - 1.2rem) / 2); width: 1.2rem; height: 1.2rem; border-radius: 4px;
  background: var(--p-accent-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a7060' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.6 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.encart-points { width: 100%; max-width: 36rem; padding: 1.2rem 1.4rem; border-radius: var(--rayon-s); background: var(--surface); border: 1px solid var(--lisere); }
.section--sable .encart-points { background: var(--p-fond); }

/* Les secteurs. */
.secteurs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.1rem, 2.2vw, 2rem); }
.secteur { display: flex; flex-direction: column; gap: .6rem; }
.secteur[hidden] { display: none; }
.secteur__photo { position: relative; margin-bottom: .6rem; aspect-ratio: 4 / 4.8; overflow: hidden; border-radius: var(--rayon); background: var(--sable); }
.secteur__photo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, color-mix(in srgb, var(--p-menthe) 45%, transparent)); mix-blend-mode: multiply; pointer-events: none; }
.secteur__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .secteur:hover .secteur__photo img { transform: scale(1.04); } }
.secteur__nom { font-size: var(--t-carte); }
.secteur__texte { color: var(--texte-doux); }

/* Les étapes : des colonnes de grand-livre, reliées par un filet. */
.etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.4rem); counter-reset: etape; }
.etape { position: relative; display: flex; flex-direction: column; gap: .7rem; padding-top: 1.4rem; border-top: 1.5px solid var(--texte); }
.etape__rang { font-family: var(--titre-police); font-size: clamp(2.6rem, 2rem + 1.6vw, 3.6rem); line-height: 1; color: var(--mono-a); font-variant-numeric: lining-nums; }
.etape h3 { font-size: var(--t-carte); }
.etape p { color: var(--texte-doux); max-width: 22em; }

/* Les adresses. */
.adresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.adresse { display: flex; flex-direction: column; gap: .9rem; padding: clamp(1.8rem, 3vw, 2.8rem); background: var(--carte); border: 1px solid var(--lisere); border-radius: var(--rayon); }
.adresse--bureaux { background: var(--p-accent-clair); border-color: transparent; color: var(--p-encre); --texte-doux: var(--p-doux); }
.adresse__role { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-encre); }
.adresse--bureaux .adresse__role { color: var(--p-accent-profond); }
.adresse__ville { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.adresse__rue, .adresse__note { color: var(--texte-doux); }
.adresse .lien-fleche { align-self: flex-start; margin-top: auto; }

/* L'appel de bas de page : le vert forêt, le monogramme en filigrane. */
.appel { position: relative; overflow: hidden; padding-block: var(--rythme); background: var(--fond); color: var(--texte); text-align: center; }
.appel__filigrane { position: absolute; left: 50%; top: 50%; width: min(70vw, 40rem); transform: translate(-50%, -48%); opacity: .08; pointer-events: none; }
.appel__filigrane .monogramme { width: 100%; height: auto; }
.appel__filigrane .monogramme text { fill: var(--p-sur-sombre); }
.appel__dedans { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.appel .titre-section { margin-inline: auto; }
.appel .chapo { margin-inline: auto; }
.appel__numero { margin-top: .4rem; font-family: var(--titre-police); font-size: clamp(2.4rem, 1.5rem + 4vw, 5rem); font-weight: 500; line-height: 1; white-space: nowrap; font-variant-numeric: lining-nums; border-bottom: 4.5px double var(--p-menthe); padding-bottom: .3rem; }
.appel__boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.2rem; }

/* ══ Services ══════════════════════════════════════════════════════════ */

.fiches-services { padding-top: 0; }
/* Le sommaire colle sous l'en-tête. Son fond ne se pose qu'une fois collé
   (mesure directe au défilement, script.js), quasi opaque. */
.sommaire { position: sticky; top: var(--haut-entete); z-index: 40; padding-block: .9rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.sommaire.est-collee { background: color-mix(in srgb, var(--p-fond) 97%, transparent); border-bottom-color: var(--lisere); }
.pastilles { display: flex; gap: .5rem; flex-wrap: wrap; }
.pastilles li[hidden] { display: none; }
.pastille { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 1.1rem; border-radius: 6px; border: 1px solid var(--lisere-fort); background: var(--p-fond); font-size: .95rem; font-weight: 600; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.pastille.est-active { background: var(--p-accent); border-color: var(--p-accent); color: var(--accent-texte); }
@media (hover: hover) and (pointer: fine) { .pastille:not(.est-active):hover { border-color: var(--texte); } }

.fiches { display: flex; flex-direction: column; gap: clamp(4.5rem, 9vw, 8rem); counter-reset: fiche; }
/* La page réserve déjà l'en-tête (scroll-padding-top du html) : la fiche
   ne s'écarte QUE de la hauteur du sommaire collé, mesurée par script.js.
   Reprendre --haut-entete ici le compterait deux fois — la fiche visée
   s'arrêtait ~400 px trop bas (correctif de Reflex Zone, 12/10/2026). */
.fiche-service { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.6rem, 6vw, 6rem); align-items: center; scroll-margin-top: var(--haut-sommaire, 4.6rem); counter-increment: fiche; }
.fiche-service[hidden] { display: none; }
.fiche-service--inverse .fiche-service__photo { order: 2; justify-self: end; }
.fiche-service__photo { width: calc(100% - 2rem); max-width: 30rem; aspect-ratio: 4 / 4.4; }
.fiche-service__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.fiche-service__rang { font-family: var(--titre-police); font-size: 1.2rem; color: var(--accent-encre); padding-bottom: .3rem; border-bottom: 4.5px double var(--filet); font-variant-numeric: lining-nums; }
.fiche-service__rang::before { content: counter(fiche, decimal-leading-zero); }
.fiche-service__nom { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.8rem); }
.fiche-service__accroche { font-family: var(--titre-police); font-style: italic; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.35; color: var(--accent-encre); }
.fiche-service__points { display: flex; flex-direction: column; gap: .8rem; width: 100%; padding: 1.3rem 1.5rem; border-radius: var(--rayon-s); background: var(--surface); border: 1px solid var(--lisere); }
.fiche-service__points h3 { font-family: var(--ui-police); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-encre); }
.fiche-service__points:has(ul:empty) { display: none; }
.fiche-service__points .liste-pointee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: .6rem 1.4rem; }

.faq__dedans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq { display: flex; flex-direction: column; }
.question { border-bottom: 1px solid var(--lisere-fort); }
.question:first-child { border-top: 1.5px solid var(--texte); }
.question summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: 56px; padding-block: 1.1rem; list-style: none; cursor: pointer; font-family: var(--titre-police); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); line-height: 1.3; }
.question summary::-webkit-details-marker { display: none; }
.question__signe { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--p-fond); border: 1px solid var(--lisere-fort); color: var(--p-accent-profond); transition: transform .3s; }
.question[open] .question__signe { transform: rotate(45deg); }
.question p { padding: 0 3rem 1.4rem 0; color: var(--texte-doux); }

/* ══ Le cabinet ════════════════════════════════════════════════════════ */

.adeline__dedans { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.4rem, 6vw, 6rem); align-items: start; }
.adeline__portrait { position: relative; width: calc(100% - 2rem); max-width: 26rem; aspect-ratio: 4 / 5; border-radius: var(--rayon); background: var(--p-sable); overflow: hidden; display: grid; place-items: center; }
.adeline__monogramme { width: 70%; }
.adeline__monogramme .monogramme { width: 100%; height: auto; }
.adeline__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adeline__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.adeline__texte .bloc-titre { margin-bottom: 0; }
.adeline__texte > .texte + .texte { margin-top: -.3rem; }
.adeline__titre { font-family: var(--titre-police); font-style: italic; font-size: clamp(1.2rem, 1.1rem + .4vw, 1.45rem); color: var(--accent-encre); }

.engagements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 2.6vw, 2.4rem); }
.engagement { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.6rem, 2.6vw, 2.2rem); background: var(--carte); border-radius: var(--rayon); }
.engagement__rang { font-family: var(--titre-police); font-size: 2.6rem; line-height: 1; color: var(--mono-a); }
.engagement h3 { font-size: var(--t-carte); }
.engagement p { color: var(--texte-doux); }

/* ══ Contact ═══════════════════════════════════════════════════════════ */

.contact__dedans { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__coordonnees { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.contact__coordonnees .bloc-titre { margin-bottom: 0; }
.contact__telephone { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--titre-police); font-size: clamp(2.1rem, 1.5rem + 2vw, 3.1rem); font-weight: 500; line-height: 1.1; white-space: nowrap; font-variant-numeric: lining-nums; }
.contact__telephone .ic { color: var(--accent-encre); }
.contact__horaires { width: 100%; padding-top: 1.2rem; border-top: 1px solid var(--lisere); }
.fiche { display: flex; flex-direction: column; width: 100%; }
.fiche > div { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 1rem; align-items: start; padding-block: .9rem; border-top: 1px solid var(--lisere); }
.fiche > div[hidden] { display: none; }
.fiche dt { font-size: .92rem; color: var(--texte-doux); padding-top: .1rem; }
.fiche dd { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fiche dd a { border-bottom: 1.5px solid var(--filet); }
.contact__formulaire { padding: clamp(1.6rem, 3vw, 3rem); border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--lisere); }
.contact__formulaire .bloc-titre { margin-bottom: 1.8rem; }

.horaires { display: flex; flex-direction: column; }
.horaire { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: 1rem; padding-block: .45rem; border-bottom: 1px solid var(--lisere); }
.horaire dd { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.horaire dd span, .horaire dd em { white-space: nowrap; }
.horaire .ferme { color: var(--texte-doux); }
.horaires-bloc[hidden], .sur-rdv[hidden] { display: none; }
.sur-rdv { display: flex; flex-direction: column; gap: .4rem; }
.sur-rdv__titre { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--titre-police); font-size: 1.45rem; }
.sur-rdv__titre .ic { color: var(--accent-encre); }
.sur-rdv__texte { color: var(--texte-doux); font-size: .98rem; }

/* Le formulaire. */
.formulaire { display: flex; flex-direction: column; gap: 1.1rem; }
.formulaire__rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.1rem; }
.champ { display: flex; flex-direction: column; gap: .4rem; }
/* Deux lignes de haut, texte en bas : les champs d'une rangée s'alignent
   même si un libellé plie. */
.champ__libelle { display: flex; align-items: flex-end; min-height: 2.4em; font-size: .96rem; font-weight: 600; }
.champ input, .champ textarea {
  width: 100%; min-height: 52px; font-size: max(16px, 1rem); padding: .85rem 1rem;
  background: var(--p-fond); color: var(--p-encre);
  border: 1px solid var(--lisere-fort); border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.champ textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.champ input:focus, .champ textarea:focus { outline: 0; border-color: var(--p-accent-profond); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p-menthe) 70%, transparent); }
.champ__requis { color: var(--accent-encre); font-weight: 700; }
.champ__aide { font-size: .88rem; color: var(--texte-doux); }
.champ__erreur { display: none; font-size: .9rem; color: #a3301f; }
.champ.est-fautif input, .champ.est-fautif textarea { border-color: #a3301f; }
.champ.est-fautif .champ__erreur { display: block; }

/* Le <select> natif, gardé hors de vue MAIS dans la page (c'est lui que
   le formulaire envoie). Dimensions FORCÉES : un width:100% l'emporterait. */
.select-habille { position: relative; }
.select-habille > select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.select-habille__bouton { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-height: 52px; padding: .85rem 1rem; background: var(--p-fond); color: var(--p-encre); border: 1px solid var(--lisere-fort); border-radius: 6px; text-align: left; }
.select-habille__bouton .ic { color: var(--p-doux); transform: rotate(90deg); transition: transform .2s; pointer-events: none; }
.select-habille__bouton > span { pointer-events: none; }
.select-habille[data-ouvert] .select-habille__bouton .ic { transform: rotate(-90deg); }
.select-habille[data-ouvert] .select-habille__bouton { border-color: var(--p-accent-profond); }
.select-habille__liste { position: absolute; left: 0; right: 0; top: calc(100% + .35rem); z-index: 30; display: none; flex-direction: column; max-height: 16rem; overflow-y: auto; overscroll-behavior: contain; padding: .35rem; background: var(--p-fond); border: 1px solid var(--lisere-fort); border-radius: var(--rayon-s); box-shadow: var(--ombre); }
.select-habille[data-ouvert] .select-habille__liste { display: flex; }
.select-habille[data-vers-haut] .select-habille__liste { top: auto; bottom: calc(100% + .35rem); }
.select-habille__liste button { min-height: 44px; padding: .6rem .8rem; border: 0; border-radius: 6px; background: transparent; color: var(--p-doux); text-align: left; }
.select-habille__liste button[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .select-habille__liste button:hover { background: var(--p-sable); color: var(--p-encre); } }
.select-habille__liste button[aria-selected="true"] { color: var(--p-encre); font-weight: 700; background: var(--p-accent-clair); }
.select-habille--sombre .select-habille__bouton { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
.select-habille--sombre .select-habille__liste { background: #1b2a24; border-color: rgba(255, 255, 255, .18); }
.select-habille--sombre .select-habille__liste button { color: rgba(255, 255, 255, .82); }

.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__mention { font-size: .9rem; color: var(--texte-doux); max-width: 68ch; }
.formulaire .bouton { align-self: flex-start; margin-top: .4rem; }
.formulaire__retour { padding: .9rem 1.1rem; border-radius: var(--rayon-s); font-size: 1rem; }
.formulaire__retour[hidden] { display: none; }
.formulaire__retour.est-reussi { background: #e3f1ea; color: #22533f; }
.formulaire__retour.est-echoue { background: #f6e1db; color: #8a2a1c; }

/* La carte : un plan dessiné, Google seulement au clic. */
.carte-lieu { position: relative; overflow: hidden; aspect-ratio: 16 / 8; border-radius: var(--rayon); background: var(--p-sable); box-shadow: var(--ombre); }
.carte-lieu iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.carte-lieu__facade { position: absolute; inset: 0; }
.carte-lieu__plan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-lieu__epingle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); color: var(--p-accent); filter: drop-shadow(0 6px 8px rgba(20, 40, 30, .3)); }
.carte-lieu__epingle .ic { fill: var(--p-menthe); }
.carte-lieu__boite { position: absolute; left: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; max-width: 24rem; padding: 1.4rem 1.6rem; border-radius: var(--rayon-s); background: color-mix(in srgb, var(--p-fond) 97%, transparent); color: var(--p-encre); box-shadow: var(--ombre); }
.carte-lieu__nom { font-family: var(--titre-police); font-size: 1.6rem; line-height: 1.1; }
.carte-lieu__boutons { display: flex; flex-wrap: wrap; gap: .5rem; }
.carte-lieu__boite small { font-size: .84rem; color: var(--p-doux); }
.carte-lieu__attribution { position: absolute; right: .6rem; bottom: .5rem; padding: .15rem .5rem; border-radius: 6px; background: color-mix(in srgb, var(--p-fond) 90%, transparent); font-size: .76rem; color: var(--p-doux); }

/* La 404 : le monogramme seul. */
.hero--erreur .hero__visuel { place-items: center; padding-right: 0; }
.erreur__monogramme { width: min(100%, 22rem); }
.erreur__monogramme .monogramme { width: 100%; height: auto; }

/* ══ Pied de page ══════════════════════════════════════════════════════ */

.pied { position: relative; overflow: hidden; background: var(--fond); color: var(--texte); padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: calc(1.5rem + var(--barre-appel)); }
.pied__monogramme { position: absolute; right: -4%; bottom: -16%; width: min(40vw, 28rem); opacity: .06; pointer-events: none; }
.pied__monogramme .monogramme { width: 100%; height: auto; }
.pied__monogramme .monogramme text { fill: var(--p-sur-sombre); }
.pied__dedans { position: relative; display: grid; grid-template-columns: 1.3fr .8fr 1.1fr 1.4fr; gap: 2.5rem; max-width: var(--large); margin-inline: auto; padding-inline: var(--marge); }
.pied__bloc { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pied h2 { font-size: 1.35rem; font-style: italic; color: var(--p-menthe); }
.marque--pied .marque__logo { height: auto; width: min(100%, 15rem); }
.pied__apropos { color: var(--texte-doux); font-size: .98rem; max-width: 26em; }
.pied__liens { display: flex; flex-direction: column; gap: .45rem; }
.pied__liens a, .pied__coordonnees a, .pied__lieu a { transition: color .2s; }
@media (hover: hover) and (pointer: fine) { .pied__liens a:hover, .pied__coordonnees a:hover, .pied__lieu a:hover { color: var(--p-menthe); } }
.pied__coordonnees { display: flex; flex-direction: column; gap: .8rem; }
.pied__coordonnees li { display: flex; align-items: flex-start; gap: .75rem; }
.pied__coordonnees .ic, .pied__lieu-nom .ic { margin-top: calc((1lh - 17px) / 2); color: var(--p-menthe); }
/* Le rôle (« Bureaux », « Siège social ») ouvre le bloc : l'icône se cale
   sur SA ligne, plus basse que celle du texte courant. */
.pied__lieu-nom .ic { margin-top: calc((1.6rem - 17px) / 2); }
.pied__coordonnees li > span { min-width: 0; overflow-wrap: anywhere; }
.pied__reseau[hidden] { display: none; }
.pied__lieu { display: flex; flex-direction: column; gap: .6rem; }
.pied__lieu + .pied__lieu { padding-top: 1rem; border-top: 1px solid var(--lisere); }
.pied__lieu-nom { display: flex; align-items: flex-start; gap: .6rem; }
.pied__lieu-nom > span { display: flex; flex-direction: column; }
.pied__lieu-role { line-height: 1.6rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.pied .horaire { grid-template-columns: minmax(6rem, 1fr) auto; font-size: .96rem; }
.pied .horaire:last-child { border-bottom: 0; }
.pied .sur-rdv { padding-left: 1.65rem; }
.pied .sur-rdv__titre { font-size: 1.15rem; }
.pied .sur-rdv__titre .ic { display: none; }
.pied__bas { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; max-width: var(--large); margin: 3.5rem auto 0; padding: 1.4rem var(--marge) 0; border-top: 1px solid var(--lisere); font-size: .88rem; color: var(--texte-doux); }
.pied__bas a { border-bottom: 1px solid var(--lisere-fort); }
.pied__bas [hidden] { display: none; }
.pied__itaa { flex-basis: 100%; order: -1; }

/* ── Barre d'action mobile : fond OPAQUE, séparateurs en bordure ───── */

.barre-appel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  background: var(--p-sombre); border-top: 2px solid var(--p-menthe);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), visibility .4s;
}
.barre-appel a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-height: 62px; padding: .55rem .3rem;
  border-left: 1px solid color-mix(in srgb, var(--p-sur-sombre) 14%, transparent);
  color: var(--p-sur-sombre); font-size: .84rem; font-weight: 600;
  min-width: 0; text-align: center; line-height: 1.15; text-wrap: balance; hyphens: auto; overflow-wrap: break-word;
}
.barre-appel a:first-child { border-left: 0; background: var(--p-menthe); color: var(--p-sombre); }
.barre-appel.est-cachee { transform: translateY(100%); visibility: hidden; }

/* ── Visionneuse ───────────────────────────────────────────────────────
   ⚠ `display` CONDITIONNÉ à [open]. Posée sur toutes les pages, elle ne
   sert que si une mosaïque est ajoutée un jour. */

.visionneuse:not([open]) { display: none; }
.visionneuse[open] {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; gap: .6rem;
  position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  margin: 0; padding: clamp(.8rem, 3vw, 2rem);
  border: 0; background: rgba(14, 24, 20, .97); color: #fff; overscroll-behavior: contain;
}
.visionneuse::backdrop { background: rgba(14, 24, 20, .9); }
.visionneuse__cadre { position: relative; grid-area: 1 / 2; min-height: 0; }
.visionneuse__cadre img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 12px; }
.visionneuse__fermer { position: absolute; top: clamp(.8rem, 3vw, 2rem); right: clamp(.8rem, 3vw, 2rem); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%; color: #fff; }
.visionneuse__nav { align-self: center; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; background: rgba(255, 255, 255, .1); border: 0; border-radius: 50%; color: #fff; }
.visionneuse__nav--avant { grid-area: 1 / 1; }
.visionneuse__nav--avant .ic { transform: rotate(180deg); }
.visionneuse__nav--apres { grid-area: 1 / 3; }
.visionneuse__pied { grid-area: 2 / 1 / 3 / 4; display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; height: 3.2rem; }
.visionneuse__legende { text-align: center; font-family: var(--titre-police); font-size: 1.2rem; font-style: italic; color: rgba(255, 255, 255, .92); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.visionneuse__compteur { text-align: right; font-size: .88rem; color: rgba(255, 255, 255, .65); white-space: nowrap; font-variant-numeric: tabular-nums; }
.visionneuse__points { display: none; }
.visionneuse--seule .visionneuse__nav, .visionneuse--seule .visionneuse__compteur, .visionneuse--seule .visionneuse__points { display: none !important; }

/* ── Entrées ───────────────────────────────────────────────────────────
   Seules les SUITES entrent, chaque élément à son tour (le retard est
   posé par le script). L'opacité de départ n'existe QUE sous html.js :
   un échec du script ne livre jamais une page vide. */

.js [data-entre] { opacity: 0; transform: translateY(18px); }
.js [data-entre].est-vue { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.25, 1, .5, 1), transform .8s cubic-bezier(.25, 1, .5, 1); }

/* ── L'entrée du haut de page : RÉGLABLE (theme.entree, theme.entreeVitesse)
   Les éléments se CHEVAUCHENT presque entièrement, sur une courbe sans
   à-coup, et ne montent que de quelques pixels. */

:root { --x: 1; --doux: cubic-bezier(.33, .08, .25, 1); --tres-doux: cubic-bezier(.25, .1, .25, 1); }
html[data-entree-vitesse="lente"] { --x: 1.55; }
html[data-entree-vitesse="rapide"] { --x: .6; }

@keyframes e-monte { from { opacity: 0; transform: translateY(16px); } }
@keyframes e-fond { from { opacity: 0; } }
@keyframes e-voile { from { opacity: 1; } to { opacity: 0; } }
@keyframes e-eclot { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(75% at 50% 55%); } }
@keyframes photo-secours { to { opacity: 1; transform: none; clip-path: none; } }
/* Le monogramme se compose : le C arrive d'en bas à droite, le A d'en haut
   à gauche, et ils se posent l'un sur l'autre. */
@keyframes mono-c { from { opacity: 0; transform: translate(26px, 30px); } }
@keyframes mono-a { from { opacity: 0; transform: translate(-22px, -26px); } }
/* Les calques se posent l'un après l'autre. */
@keyframes calque-pose { from { opacity: 0; transform: translateY(26px) scale(.97); } }
/* Les lignes du grand-livre s'écrivent. */
@keyframes ligne-ecrite { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

.mvt[data-entree="fondu"] :is(.hero__texte > *, .hero .reperes) {
  animation: e-monte calc(1.8s * var(--x)) var(--doux) backwards;
}
.mvt[data-entree="fondu"] .hero__texte > .titre-hero { animation-delay: calc(.05s * var(--x)); }
.mvt[data-entree="fondu"] .hero__texte > .chapo { animation-delay: calc(.28s * var(--x)); }
.mvt[data-entree="fondu"] .hero__texte > .hero__boutons { animation-delay: calc(.5s * var(--x)); }
.mvt[data-entree="fondu"] .hero .reperes { animation-delay: calc(.72s * var(--x)); }

.mvt:is([data-entree="souffle"], [data-entree="eclosion"]) :is(.hero__texte > *, .hero .reperes) {
  animation: e-fond calc(2.2s * var(--x)) var(--tres-doux) calc(.7s * var(--x)) backwards;
}
.mvt:is([data-entree="souffle"], [data-entree="eclosion"]) .hero .reperes { animation-delay: calc(1.1s * var(--x)); }

.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .monogramme-hero .monogramme__c { animation: mono-c calc(1.9s * var(--x)) var(--doux) calc(.2s * var(--x)) backwards; transform-box: fill-box; }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .monogramme-hero .monogramme__a { animation: mono-a calc(1.9s * var(--x)) var(--doux) calc(.45s * var(--x)) backwards; transform-box: fill-box; }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .hero .calque:not(.calque--photo) { animation: calque-pose calc(1.4s * var(--x)) var(--doux) backwards; }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .hero .calque--menthe { animation-delay: calc(.55s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .hero .calque--sauge { animation-delay: calc(.8s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .hero .calque--clair { animation-delay: calc(1.05s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre li { animation: ligne-ecrite calc(.9s * var(--x)) var(--doux) backwards; }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre__col--nous li:nth-child(1) { animation-delay: calc(.5s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre__col--nous li:nth-child(2) { animation-delay: calc(.7s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre__col--nous li:nth-child(3) { animation-delay: calc(.9s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre__col--nous li:nth-child(n + 4) { animation-delay: calc(1.1s * var(--x)); }
.mvt:is([data-entree="fondu"], [data-entree="souffle"], [data-entree="eclosion"]) .grand-livre__solde b { animation: ligne-ecrite calc(1.1s * var(--x)) var(--doux) calc(1.35s * var(--x)) backwards; }

.mvt[data-entree="voile"] .hero:not([hidden])::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: var(--p-fond);
  animation: e-voile calc(2.4s * var(--x)) var(--tres-doux) calc(.15s * var(--x)) forwards;
}

/* Les photos attendent d'être chargées (script.js pose .est-chargee).
   Sans script, rien n'est masqué ; un secours les montre après 2,5 s. */
.mvt .hero img[data-attend]:not(.est-chargee) { animation: photo-secours 1.2s ease 2.5s forwards; }
.mvt[data-entree="fondu"] .hero img[data-attend]:not(.est-chargee) { opacity: 0; transform: scale(1.06); }
.mvt[data-entree="fondu"] .hero img[data-attend].est-chargee {
  transition: opacity calc(2.2s * var(--x)) var(--tres-doux), transform calc(3.4s * var(--x)) var(--doux);
}
.mvt[data-entree="souffle"] .hero img[data-attend]:not(.est-chargee) { opacity: 0; transform: scale(1.22); }
.mvt[data-entree="souffle"] .hero img[data-attend].est-chargee {
  transition: opacity calc(1.6s * var(--x)) var(--tres-doux), transform calc(7s * var(--x)) cubic-bezier(.16, .6, .3, 1);
}
.mvt[data-entree="eclosion"] .hero img[data-attend]:not(.est-chargee) { clip-path: circle(0% at 50% 55%); }
.mvt[data-entree="eclosion"] .hero img[data-attend].est-chargee {
  animation: e-eclot calc(2.4s * var(--x)) cubic-bezier(.5, 0, .2, 1) forwards;
}
.mvt .hero img[data-attend].est-chargee { opacity: 1; transform: none; }
.mvt .hero .pastille-photo img.est-chargee { transition-delay: calc(.45s * var(--x)); animation-delay: calc(.45s * var(--x)); }
.mvt:is([data-entree="voile"], [data-entree="aucune"]) .hero img[data-attend] { opacity: 1; transform: none; clip-path: none; animation: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-entre], .js [data-entre].est-vue { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero img[data-attend] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ══ Paliers ═══════════════════════════════════════════════════════════ */

/* Les écrans larges mais PEU HAUTS (tablette à l'horizontale, portable
   1280 × 800) : les écarts du haut de page cèdent avant les repères. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero__dedans { padding-top: calc(var(--haut-entete) + 1rem); }
  .hero__surtitre { margin-bottom: .7rem; }
  .chapo--hero { margin-top: 1rem; }
  .hero__boutons { margin-top: 1.4rem; }
  .repere { padding-block: .7rem .8rem; }
  .repere + .repere::before { top: .7rem; }
  .monogramme-hero .monogramme { max-height: 46svh; }
  .calques { max-height: 52svh; }
  .grand-livre li { padding-block: .35rem; }
}

@media (max-width: 1440px) {
  .entete__tel span { display: none; }
  .entete__tel { width: 46px; justify-content: center; padding: 0; border: 1px solid var(--lisere-fort); border-radius: 6px; }
  html[data-page="accueil"][data-hero="calques"] .entete:not(.est-defilee) .entete__tel { border-color: color-mix(in srgb, var(--p-sur-sombre) 35%, transparent); }
}

@media (max-width: 1240px) {
  .menu { display: none; }
  .tiroir-bascule { display: grid; }
  .entete__actions { margin-left: auto; }
  .pied__dedans { grid-template-columns: 1fr 1fr; }
  .clients, .secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.6rem; }
}

@media (max-width: 1024px) {
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .repere:nth-child(3) { padding-left: 0; }
  .repere:nth-child(3)::before { display: none; }
  .repere:nth-child(n + 3) { border-top: 1px solid var(--lisere); }
  .faq__dedans, .services-apercu__dedans { grid-template-columns: 1fr; }
  .services-apercu__tete { position: static; }
  .engagements { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  :root { --haut-entete: 76px; }
  .entete__dedans { min-height: 72px; gap: .8rem; }
  .marque__logo, .entete.est-defilee .marque__logo { height: 34px; }
  .entete__contact { display: none; }

  /* Une colonne : texte, PUIS le visuel, puis les repères. */
  .hero__dedans { grid-template-columns: 1fr; grid-template-rows: auto; padding-top: calc(var(--haut-entete) + 1.6rem); }
  .hero__texte { grid-column: 1; grid-row: auto; order: 1; }
  .hero .reperes { grid-column: 1; grid-row: auto; order: 3; margin-top: .4rem; }
  /* Sur une colonne, les décors restent DANS le cadre. */
  .hero__visuel { grid-column: 1; grid-row: auto; order: 2; padding-block: 2rem 1.6rem; overflow: hidden; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); }
  .hero--monogramme::before { display: none; }
  .hero--partie { --marge-livre: .35rem; }
  .monogramme-hero { width: min(70%, 18rem); }
  .grand-livre { width: min(100%, 30rem); }
  .hero--partie .pastille-photo { width: 5.5rem; right: calc(var(--marge) - .4rem); top: 1rem; }
  .calques { width: min(92%, 26rem); }
  .hero__filigrane { width: 90vw; bottom: -8%; }
  /* Les pages intérieures : texte et boutons à leur taille, la photo
     prend la place qui reste. */
  .hero--page .hero__dedans { padding-bottom: 2.4rem; }
  .hero--page .hero__visuel { padding: 1.4rem var(--marge) 1rem; place-items: center; }
  .hero--page .photo-calque--page { justify-self: center; width: min(84%, 24rem); height: auto; aspect-ratio: 4 / 3.4; }

  .duo__dedans, .contact__dedans, .fiche-service, .adeline__dedans { grid-template-columns: 1fr; }
  .duo__image, .duo--inverse .duo__image { order: 0; justify-self: center; width: min(86%, 26rem); }
  .fiche-service--inverse .fiche-service__photo { order: 0; justify-self: start; }
  .fiche-service__photo { width: min(86%, 26rem); }
  .adeline__portrait { width: min(70%, 18rem); }
  .adresses { grid-template-columns: 1fr; }
  .carte-lieu { aspect-ratio: auto; height: 34rem; }
  .carte-lieu__boite { right: 1rem; max-width: none; }

  .barre-appel { display: flex; }
  :root { --barre-appel: 62px; }
}

@media (max-width: 700px) {
  /* Sur petit écran, le sommaire DÉFILE de côté ; la pastille touchée se
     recentre (script.js). */
  .pastilles { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); scroll-padding-inline: var(--marge); }
  .pastilles::-webkit-scrollbar { display: none; }
  .clients, .secteurs { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; gap: 2rem; }
  .secteur__photo { aspect-ratio: 4 / 3; }
  .pied__dedans { grid-template-columns: 1fr; }
  .fiche > div { grid-template-columns: 1fr; gap: .2rem; }
  .question p { padding-right: 0; }
  .marque__texte { display: none; }
  .ligne-service__lien { grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-areas: "rang nom" "rang accroche"; }
  .ligne-service__fleche { display: none; }
}

@media (max-width: 640px) {
  /* La visionneuse sur téléphone : flèches ET indicateur, toujours. */
  .visionneuse[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto auto; }
  .visionneuse__cadre { grid-area: 1 / 1; }
  .visionneuse__pied { display: contents; }
  .visionneuse__legende { grid-row: 2; padding-inline: .5rem; }
  .visionneuse__vide { display: none; }
  .visionneuse__nav { grid-row: 3; width: 48px; height: 48px; align-self: center; }
  .visionneuse__nav--avant { grid-area: 3 / 1; justify-self: start; }
  .visionneuse__nav--apres { grid-area: 3 / 1; justify-self: end; }
  .visionneuse__compteur { grid-area: 3 / 1; justify-self: center; text-align: center; transform: translateY(-.55rem); }
  .visionneuse__points { grid-area: 3 / 1; justify-self: center; display: flex; gap: .4rem; transform: translateY(.75rem); }
  .visionneuse__points i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
  .visionneuse__points i.est-actif { background: #fff; }
}

@media (max-width: 480px) {
  .titre-section, .fiche-service__nom { hyphens: auto; }
  .titre-hero { font-size: clamp(2.3rem, 10.4vw, 3rem); }
  .chapo--hero { font-size: 1.04rem; }
  .hero__boutons { width: 100%; }
  .hero__boutons .bouton { flex: 1 1 100%; }
  .repere { padding-right: .6rem; }
  .repere + .repere { padding-left: 1.1rem; }
  .repere:nth-child(odd) { padding-left: 0; }
  .repere:nth-child(odd)::before { display: none; }
  .repere b { font-size: 1.32rem; }
  .repere span { font-size: .84rem; }
  .bouton--grand { width: 100%; }
  .appel__boutons { width: 100%; }
  .duo__boutons .bouton, .formulaire .bouton, .fiche-service__texte > .bouton { width: 100%; }
  .carte-lieu__boutons .bouton { flex: 1 1 100%; }
  .contact__telephone { font-size: 2rem; }
  .grand-livre__colonnes { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .grand-livre__col { padding-right: .7rem; }
  .grand-livre__col--nous { padding-left: .8rem; }
  .grand-livre li { font-size: .96rem; }
}

@media (max-width: 480px) and (max-height: 760px) {
  .annonce { font-size: .84rem; }
  .hero__dedans { padding-top: calc(var(--haut-entete) + 1rem); }
  .chapo--hero { margin-top: .8rem; font-size: .98rem; line-height: 1.5; }
  .hero__boutons { margin-top: 1.1rem; gap: .5rem; }
  .hero__boutons .bouton { min-height: 48px; }
  .repere { padding-block: .6rem .7rem; }
}

/* ── Cibles tactiles : 44 px au doigt, sans toucher à la mise en page ── */
@media (pointer: coarse) {
  .pied__liens a, .pied__coordonnees a, .pied__bas a, .fiche dd a, .pied__lieu-nom a {
    display: inline-block;
    padding-block: max(0px, calc((44px - 1lh) / 2));
    margin-block: min(0px, calc((1lh - 44px) / 2));
  }
  .lien-fleche { min-height: 44px; }
  .annonce__fermer { min-width: 44px; min-height: 44px; }
}