/* =====================================================================
   Quid Novi · Piste A « Grand office » · SOCLE COMMUN
   Partagé par toutes les pages. Voir DESIGN.md pour le contrat.
   ===================================================================== */

/* ---------- 1. Polices (locales) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-var-italic.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/hanken-grotesk-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
/* Replis aux mêmes métriques (mesurées dans le navigateur) : le texte ne saute pas quand la vraie police arrive */
@font-face {
  font-family: "Newsreader repli"; src: local("Georgia"); font-style: normal;
  size-adjust: 100.14%; ascent-override: 73.9%; descent-override: 26.96%; line-gap-override: 0%;
}
@font-face {
  font-family: "Newsreader repli"; src: local("Georgia Italic"), local("Georgia-Italic"); font-style: italic;
  size-adjust: 90.77%; ascent-override: 81.52%; descent-override: 29.75%; line-gap-override: 0%;
}
@font-face {
  font-family: "Hanken repli"; src: local("Arial"), local("ArialMT"); font-style: normal;
  size-adjust: 100.57%; ascent-override: 99.44%; descent-override: 29.83%; line-gap-override: 0%;
}

/* ---------- 2. Jetons ---------- */
:root {
  /* Couleurs */
  --abysse: #021c2a;          /* pied de page */
  --profond: #032536;         /* grands aplats, texte des titres */
  --petrole: #03476b;         /* couleur de marque, accents sur blanc */
  --eau: #d0dfdf;             /* lumière : boutons sur fond profond, italiques */
  --eau-pale: #e9f0f0;        /* chapitre clair alternatif */
  --blanc: #ffffff;
  --encre: #0b2433;           /* texte courant */
  --gris: #4a5d68;            /* texte secondaire sur blanc (6,9:1) */
  --filet: rgba(3, 37, 54, .16);
  --filet-clair: rgba(208, 223, 223, .22);
  --texte-clair: rgba(233, 240, 240, .84);
  --alerte: #9c3517;          /* erreur sur fond clair (7,3:1 sur blanc) */
  --alerte-clair: #f0a58c;    /* erreur sur fond profond (7,9:1) */

  /* Polices */
  --serif: "Newsreader", "Newsreader repli", Georgia, serif;
  --sans: "Hanken Grotesk", "Hanken repli", "Segoe UI", system-ui, sans-serif;

  /* Échelle d'espacement stricte : 8, 16, 24, 40, 64, 104, 168 */
  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 104px; --e7: 168px;
  /* Paliers fluides construits sur l'échelle */
  --rythme-chapitre: clamp(var(--e6), 11vw, var(--e7));   /* haut et bas de chapitre */
  --rythme-bloc: clamp(var(--e5), 7vw, var(--e6));        /* entre deux blocs d'un chapitre */
  --rythme-titre: clamp(var(--e4), 4vw, var(--e5));       /* entre titre et contenu */

  /* Mise en page */
  --marge: clamp(16px, 4.4vw, 72px);
  --largeur: 1680px;
  --gouttiere: clamp(var(--e2), 2vw, var(--e3));
  --entete: 76px;

  /* Mouvement */
  --ease: cubic-bezier(.22, .9, .24, 1);
  --ease-rideau: cubic-bezier(.76, 0, .24, 1);
  --lent: 1.4s;

  /* Flèche (masque SVG) */
  --fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M12.6 1 19 7l-6.4 6M18.6 7H1' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='m2 2 6 6-6 6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--entete); }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--eau); color: var(--profond); }

:focus-visible { outline: 2px solid var(--petrole); outline-offset: 3px; }
.sur-fonce :focus-visible, .chapitre--profond :focus-visible, .pied :focus-visible, .menu-plein :focus-visible { outline-color: var(--eau); }
/* Contextes sombres du haut de page : en-tête transparent ou défilé sur une ouverture, ouverture, tête des pages, carte pleine */
.entete:not(.est-plein):not(.entete--clair) :focus-visible, .ouverture :focus-visible, .tete :focus-visible, .carte-sujet--plein :focus-visible { outline-color: var(--eau); }

.visuel-masque {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: 16px; top: 0; z-index: 100; transform: translateY(-120%);
  background: var(--eau); color: var(--profond); padding: 16px 16px; text-decoration: none; font-weight: 600;
}
.evitement:focus { transform: translateY(16px); }
#contenu[tabindex="-1"]:focus { outline: none; }
.evitement:focus-visible { outline-color: var(--eau); }
/* Sans socle.js, l’en-tête reste opaque : jamais de texte blanc sur un chapitre blanc */
html:not(.socle-pret) .entete:not(.entete--clair) { background: var(--profond); }
.insecable { white-space: nowrap; }

/* ---------- 4. Typographie ---------- */
.titre-affiche, .titre-chapitre, .titre-section, .serif {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
}
.titre-affiche {
  font-size: clamp(3.3rem, 1.4rem + 9vw, 10.5rem);
  line-height: .9; letter-spacing: -.045em; font-weight: 380;
}
.titre-chapitre {
  font-size: clamp(2.9rem, 1.3rem + 5.6vw, 7rem);
  line-height: .95; letter-spacing: -.04em; font-weight: 380;
}
.titre-section {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1; letter-spacing: -.03em; font-weight: 400;
}
em { font-style: italic; font-weight: 340; }
.titre-affiche em, .titre-chapitre em, .titre-section em { letter-spacing: -.03em; }
.chapeau {
  font-family: var(--serif); font-variation-settings: "opsz" 24;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.75rem);
  line-height: 1.32; letter-spacing: -.01em; font-weight: 400;
}
.surtitre, .etiquette {
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.etiquette { font-weight: 600; letter-spacing: .12em; color: var(--petrole); }
.sur-fonce .etiquette, .chapitre--profond .etiquette { color: var(--eau); }

/* ---------- 5. Boutons et liens ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .85em;
  min-height: 52px; padding: 0 1.5em;
  font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease);
}
/* Flèche dessinée (jamais un trait seul) */
.bouton::after {
  content: ""; flex: none; width: 1.15em; height: .8em;
  background: currentColor; -webkit-mask: var(--fleche) center / contain no-repeat; mask: var(--fleche) center / contain no-repeat;
  transition: transform .5s var(--ease);
}
.bouton::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease-rideau);
}
.bouton:hover::before, .bouton:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.bouton:hover::after, .bouton:focus-visible::after { transform: translateX(5px); }
.bouton:active { transform: translateY(1px); }
.bouton--eau { background: var(--eau); color: var(--profond); }
.bouton--eau::before { background: var(--blanc); }
.bouton--profond { background: var(--profond); color: var(--blanc); }
.bouton--profond::before { background: var(--petrole); }
.bouton--sans-fleche::after { display: none; }

.lien-fleche {
  display: inline-flex; align-items: center; gap: .7em;
  font-weight: 600; text-decoration: none; padding: .35em 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease);
}
.lien-fleche::after {
  content: ""; flex: none; width: .5em; height: .8em;
  background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat;
  transition: transform .4s var(--ease);
}
.lien-fleche:hover { background-size: 0 1px; background-position: 100% 100%; }
.lien-fleche:hover::after { transform: translateX(4px); }

/* ---------- 6. En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  color: var(--blanc);
  transition: background-color .4s ease, color .4s ease, transform .5s var(--ease), box-shadow .4s ease;
}
.entete--clair { color: var(--profond); } /* pages sans ouverture sombre */
.entete-barre {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
  height: var(--entete); padding: 0 var(--marge);
}
.entete-logo { display: block; position: relative; width: 132px; flex: none; }
.entete-logo img { width: 132px; height: auto; transition: opacity .35s ease; }
.entete-logo .logo-fonce { position: absolute; inset: 0; opacity: 0; }
.entete--clair .logo-clair, .entete.est-plein .logo-clair { opacity: 0; }
.entete--clair .logo-fonce, .entete.est-plein .logo-fonce { opacity: 1; }
.entete-chapitre {
  margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  padding-left: clamp(16px, 2vw, 24px); border-left: 1px solid currentColor;
  height: 1.4em; line-height: 1.4em; overflow: hidden; opacity: .8; white-space: nowrap;
}
.entete-chapitre span { display: block; transition: transform .5s var(--ease), opacity .3s ease; }
.entete-chapitre span.sort { transform: translateY(-110%); opacity: 0; }
.entete-chapitre span.entre { transform: translateY(110%); opacity: 0; transition: none; }
.entete.folio-visible .entete-chapitre { opacity: 0; } /* le folio dit déjà le chapitre */
.entete-chapitre { transition: opacity .35s ease; }
.entete-nav { margin-left: auto; }
.entete-nav ul { display: flex; gap: clamp(16px, 1.8vw, 40px); }
.entete-nav a {
  text-decoration: none; font-size: .9375rem; font-weight: 500; padding: 8px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.entete-nav a:hover, .entete-nav a[aria-current="true"], .entete-nav a[aria-current="page"] { background-size: 100% 1px; }
.entete-rdv {
  flex: none; text-decoration: none; font-weight: 600; font-size: .9375rem;
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 24px; border: 1px solid currentColor; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.entete-rdv:hover { background: var(--eau); color: var(--profond); border-color: var(--eau); }
.entete-menu {
  display: none; background: none; border: 1px solid currentColor;
  padding: 8px 16px; font-weight: 600; font-size: .9375rem; cursor: pointer; min-height: 44px;
}
.entete.est-plein { background: var(--blanc); color: var(--profond); box-shadow: 0 1px 0 var(--filet); }
.entete.est-plein .entete-rdv:hover, .entete--clair .entete-rdv:hover { background: var(--profond); color: var(--blanc); border-color: var(--profond); }

.menu-plein {
  position: fixed; inset: 0; z-index: 45; background: var(--profond); color: var(--blanc);
  padding: 104px var(--marge) 40px; display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.menu-plein[hidden] { display: none; }
.menu-plein ol a {
  display: block; text-decoration: none; font-family: var(--serif); font-variation-settings: "opsz" 72;
  font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.12; letter-spacing: -.03em; padding: 4px 0;
}
.menu-plein ol a:hover { color: var(--eau); font-style: italic; }
.menu-plein-pied { display: grid; gap: 16px; margin-top: 40px; }
.menu-plein-pied > a:first-child { font-size: 1.25rem; font-weight: 600; }
body.menu-ouvert { overflow: hidden; }
body.menu-ouvert .entete { background: var(--profond); color: var(--blanc); box-shadow: none; transform: none; }
body.menu-ouvert .entete .logo-clair { opacity: 1; }
body.menu-ouvert .entete .logo-fonce { opacity: 0; }

/* ---------- 7. Chapitres et folio ---------- */
.chapitre { position: relative; padding: var(--rythme-chapitre) 0; }
.contenu, .chapitre > *:not(.chapitre-fond), .chapitre-interieur {
  width: calc(100% - 2 * var(--marge)); max-width: calc(var(--largeur) - 2 * var(--marge));
  margin-left: auto; margin-right: auto;
}
.chapitre-interieur > * { width: auto; max-width: none; }
.chapitre--blanc { background: var(--blanc); }
.chapitre--eau { background: var(--eau-pale); }
.chapitre--profond { color: var(--blanc); background: var(--blanc); }
.chapitre--profond.apres-eau { background: var(--eau-pale); }
.chapitre--profond .chapitre-fond {
  position: absolute; inset: 0; background: var(--profond);
  clip-path: inset(var(--ouv-h, 0px) var(--ouv-l, 0px) 0 var(--ouv-l, 0px));
}
.chapitre--profond .chapitre-interieur { position: relative; }
.chapitre--profond .chapeau, .chapitre--profond p { color: var(--texte-clair); }
.chapitre--profond .titre-chapitre em { color: var(--eau); }
.chapitre--blanc .titre-chapitre, .chapitre--eau .titre-chapitre { color: var(--profond); }
.chapitre--blanc .titre-chapitre em, .chapitre--eau .titre-chapitre em { color: var(--petrole); }

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

.folio {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--gris); padding-bottom: 16px; border-bottom: 1px solid var(--filet);
  margin-bottom: var(--rythme-bloc);
}
.folio--clair { color: var(--texte-clair); border-color: var(--filet-clair); }
.folio span:last-child { color: var(--petrole); }
.folio--clair span:last-child { color: var(--eau); }

/* ---------- 8. Photos : toujours en couleur naturelle ---------- */
/* Règle : jamais affichée au-delà de 1,25 fois sa taille native.
   Survol : zoom lent et léger, rien d'autre sur l'image. */
.photo { position: relative; overflow: hidden; background: var(--eau-pale); }
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lent) var(--ease); }
.photo--survol:hover img, a:hover > .photo--survol img, .carte:hover .photo--survol img { transform: scale(1.035); }
.legende { font-size: .8125rem; color: var(--gris); margin-top: 16px; }

/* ---------- 9. Formulaires ---------- */
.formulaire { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 24px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .champ legend { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--petrole); }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(3, 37, 54, .35);
  color: var(--encre); font: inherit; font-size: 1.125rem; padding: 8px 0 8px; border-radius: 0;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ input:not([type="radio"]):not([type="checkbox"]):focus, .champ textarea:focus { outline: none; border-bottom-color: var(--petrole); box-shadow: 0 1px 0 var(--petrole); }
.champ input[aria-invalid="true"], .champ textarea[aria-invalid="true"] { border-bottom-color: var(--alerte); }
.champ-choix { border: 0; padding: 0; margin: 0; flex-direction: row; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.champ-choix legend { float: left; width: 100%; margin-bottom: 4px; padding: 0; }
.champ-choix label { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; color: inherit; font-weight: 400; cursor: pointer; min-height: 44px; }
.champ-choix input { appearance: none; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; margin: 0; display: grid; place-content: center; cursor: pointer; }
.champ-choix input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; transform: scale(0); transition: transform .25s var(--ease); }
.champ-choix input:checked::before { transform: scale(1); }
.formulaire-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.formulaire-mention { font-size: .875rem; margin: 0; max-width: 36ch; }
.formulaire-retour { margin: 0; min-height: 1.6em; }
/* Variante sur fond profond */
.sur-fonce .champ label, .sur-fonce .champ legend, .chapitre--profond .champ label, .chapitre--profond .champ legend { color: var(--eau); }
.sur-fonce .champ input, .sur-fonce .champ textarea, .chapitre--profond .champ input, .chapitre--profond .champ textarea { color: var(--blanc); border-bottom-color: rgba(208, 223, 223, .45); }
.chapitre--profond .champ input:not([type="radio"]):not([type="checkbox"]):focus, .chapitre--profond .champ textarea:focus { border-bottom-color: var(--eau); box-shadow: 0 1px 0 var(--eau); outline: 2px solid var(--eau); outline-offset: 2px; }
.chapitre--profond .champ input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):focus, .chapitre--profond .champ textarea[aria-invalid="true"]:focus { border-bottom-color: var(--alerte-clair); box-shadow: 0 1px 0 var(--alerte-clair); }
.chapitre--profond .champ input[aria-invalid="true"], .chapitre--profond .champ textarea[aria-invalid="true"] { border-bottom-color: var(--alerte-clair); }
.chapitre--profond .champ-choix { color: var(--blanc); }
.chapitre--profond .champ-choix input { border-color: var(--eau); }
.chapitre--profond .champ-choix input::before { background: var(--eau); }
.champ-choix input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.chapitre--profond .champ-choix input:focus-visible { outline-color: var(--eau); }
/* Sur fond profond, les champs de saisie portent un fond léger : ils se lisent comme des champs, pas comme des filets */
.chapitre--profond .champ input[type="text"], .chapitre--profond .champ input[type="tel"], .chapitre--profond .champ input[type="email"], .chapitre--profond .champ textarea { background: rgba(208, 223, 223, .07); padding: 8px 16px; }
.chapitre--profond .formulaire-retour { color: var(--eau) !important; }
/* Formulaire de contact réel (contact.php) : facultatif, accord, champ piège, états d'envoi */
.champ-facultatif { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .85; }
.champ-piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulaire { position: relative; }
.champ-accord { flex-direction: row; align-items: flex-start; gap: var(--e2); }
.champ-accord input { appearance: none; flex: none; width: 22px; height: 22px; margin: 2px 0 0; border: 1px solid currentColor; border-radius: 3px; display: grid; place-content: center; cursor: pointer; background: transparent; }
.champ-accord input::before { content: ""; width: 12px; height: 12px; background: currentColor; clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 37% 70%); transform: scale(0); transition: transform .2s var(--ease); }
.champ-accord input:checked::before { transform: scale(1); }
.champ-accord input:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.champ-accord input[aria-invalid="true"] { border-color: var(--alerte); }
.champ .champ-accord label, .champ-accord label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: .9375rem; line-height: 1.55; color: inherit; cursor: pointer; }
.champ-accord a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.chapitre--profond .champ-accord { color: var(--texte-clair); }
.chapitre--profond .champ-accord label { color: var(--texte-clair); }
.chapitre--profond .champ-accord a { color: var(--eau); }
.chapitre--profond .champ-accord input { border-color: var(--eau); color: var(--eau); box-shadow: none; }
.chapitre--profond .champ-accord input[aria-invalid="true"] { border-color: var(--alerte-clair); }
.formulaire .formulaire-mention { max-width: 46ch; }
.formulaire-retour:empty { min-height: 0; margin-bottom: -24px; } /* aucune rangée vide tant qu’il n’y a rien à dire */
.formulaire-retour.est-envoi, .formulaire-retour.est-ok, .formulaire-retour.est-erreur, .formulaire-etat { padding: var(--e2) var(--e3); border: 1px solid currentColor; background: rgba(208, 223, 223, .08); line-height: 1.5; }
.formulaire-retour.est-ok { border-color: var(--eau); }
.formulaire-retour.est-erreur, .formulaire-etat--erreur { border-color: var(--alerte-clair); }
.formulaire-etat { margin: 0; display: none; scroll-margin-top: calc(var(--entete) + 140px); }
html:not(.js) .formulaire-etat:target { display: block; }
.chapitre--profond .formulaire-etat { color: var(--eau); }
.formulaire [data-envoyer][disabled] { opacity: .6; cursor: progress; }
/* Choix de l'office obligatoire : message sous les deux boutons, pastilles cernées en cas d'oubli */
.champ-erreur { flex-basis: 100%; margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--alerte); }
.champ-erreur[hidden] { display: none; }
.champ-accord { flex-wrap: wrap; }
.champ-accord label { flex: 1 1 0; min-width: 0; }
.champ-accord .champ-erreur { padding-left: calc(22px + var(--e2)); }
.formulaire-retour:focus { outline: none; }
.champ-choix input[aria-invalid="true"] { border-color: var(--alerte); border-width: 2px; }
.chapitre--profond .champ-erreur { color: var(--alerte-clair); }
.chapitre--profond .champ-choix input[aria-invalid="true"] { border-color: var(--alerte-clair); }

/* ---------- 10. Pied de page ---------- */
.pied { background: var(--abysse); color: var(--texte-clair); }
.pied a { text-decoration: none; }
.pied a:not(.bouton):hover { color: var(--blanc); text-decoration: underline; text-underline-offset: 4px; }
.pied-labels {
  max-width: var(--largeur); margin: 0 auto; padding: 40px var(--marge);
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; border-bottom: 1px solid var(--filet-clair);
}
.pied-labels-titre { margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--eau); }
.pied-labels ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.pied-labels li { background: var(--blanc); height: 72px; padding: 8px 16px; display: flex; align-items: center; }
.pied-labels img { height: 52px; width: auto; }
.pied-labels .pied-label-large img { height: 40px; }
.pied-corps {
  max-width: var(--largeur); margin: 0 auto; padding: clamp(64px, 7vw, 104px) var(--marge);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr .9fr; gap: 40px clamp(24px, 3vw, 64px);
}
.pied-marque img { width: 200px; margin-bottom: 24px; }
.pied-marque p { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; color: var(--blanc); max-width: 18ch; margin-bottom: 24px; }
.pied-marque .pied-courriel { font-family: var(--sans); font-size: .9375rem; line-height: 1.6; color: var(--texte-clair); max-width: none; margin: 0 0 24px; }
.pied-courriel a { color: var(--blanc); overflow-wrap: anywhere; }
.pied-titre { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--eau); font-weight: 600; margin-bottom: 16px; }
.pied-col p { font-size: .9375rem; }
.pied-col li { font-size: .9375rem; }
/* Cibles tactiles du plan du site et du bas de page : au moins 28 px de haut */
.pied-col li a, .pied-bas a { display: inline-block; padding: 4px 0; }
.pied-legal { font-size: .8125rem !important; color: rgba(233, 240, 240, .76); }
.pied-bas {
  max-width: var(--largeur); margin: 0 auto; padding: 24px var(--marge) 40px; border-top: 1px solid var(--filet-clair);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; font-size: .8125rem;
}
.pied-bas p { margin: 0; }
.pied-bas ul { display: flex; gap: 24px; }

/* ---------- 11. Apparitions (actives seulement avec JS) ---------- */
.js [data-apparait] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-apparait].est-visible { opacity: 1; transform: none; }
.mot { white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .06em .14em; margin: -.16em -.06em -.14em; }
.mot > span { display: inline-block; transform: translateY(108%); transition: transform 1.05s var(--ease); transition-delay: calc(var(--ligne, 0) * 90ms); }
.est-revele .mot > span { transform: none; }
/* Volet : l'observateur suit le conteneur, seul l'enfant .photo est masqué */
.js [data-volet] > .photo { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--ease-rideau); }
.js [data-volet] > .photo img { transform: scale(1.06); transition: transform 1.6s var(--ease); }
.js [data-volet].est-visible > .photo { clip-path: inset(0 0 0 0); }
.js [data-volet].est-visible > .photo img { transform: none; }
/* Filet de secours : si js/socle.js ne s’exécute pas dans les 3 s, tout le contenu caché redevient visible */
@keyframes secours-socle { to { opacity: 1; transform: none; clip-path: none; } }
.js:not(.socle-pret) [data-apparait], .js:not(.socle-pret) [data-volet] > .photo, .js:not(.socle-pret) [data-volet] > .photo img { animation: secours-socle 0s 3s forwards; }

/* ---------- 12. Adaptations communes ---------- */
@media (max-width: 1180px) {
  .entete-nav { display: none; }
  .entete-menu { display: inline-flex; align-items: center; }
  .entete-rdv { margin-left: auto; }
  .pied-corps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .entete-chapitre { display: none; }
}
@media (max-width: 560px) {
  :root { --entete: 64px; }
  .entete-logo, .entete-logo img { width: 112px; }
  /* Le rendez-vous reste à portée de pouce dans l'en-tête, en version compacte */
  .entete-barre { gap: var(--e1); }
  .entete-rdv, .entete-menu { padding: 8px 12px; font-size: .875rem; }
  .formulaire { grid-template-columns: 1fr; }
  .formulaire-pied .bouton { width: 100%; }
  .pied-corps { grid-template-columns: 1fr; }
  .pied-labels li { height: 60px; padding: 8px 8px; }
  .pied-labels img { height: 42px; }
  .pied-labels .pied-label-large img { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .js [data-apparait], .mot > span, .js [data-volet] > *, .js [data-volet] img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .chapitre--profond .chapitre-fond { clip-path: none !important; }
  .photo img { transform: none !important; }
}
/* Le logo CIL ne fait que 48 × 32 px : jamais agrandi */
.pied-labels .pied-label-cil img { height: 32px; }

/* =====================================================================
   13. Finition : typographie, progression, aimantation, états
   ===================================================================== */
/* Titres équilibrés, paragraphes sans orphelin, lignes de 60 à 75 signes */
.titre-affiche, .titre-chapitre, .titre-section, h1, h2, h3 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; hanging-punctuation: first; }
main p { max-width: 68ch; }
.chapeau { max-width: 40ch; }

/* Progression du chapitre courant : filet sous l'en-tête, hauteur fixe, jamais de saut */
.entete-progression {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: var(--eau); transform-origin: left center; transform: scaleX(var(--progression, 0));
  opacity: 0; transition: opacity .4s ease;
}
.entete.est-plein .entete-progression { background: var(--petrole); opacity: 1; }
.entete-barre { height: var(--entete); min-height: var(--entete); max-height: var(--entete); }

/* Aimantation douce des boutons (pointeur fin uniquement, voir socle.js) */
.magnetique { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .5s var(--ease), color .45s var(--ease); will-change: transform; }
.magnetique.est-aimante { transition: transform .15s linear, color .45s var(--ease); }

/* États : focus visible net, activité perceptible */
a:active, button:active { opacity: .85; }
.bouton:focus-visible, .entete-rdv:focus-visible, .entete-menu:focus-visible { outline-offset: 4px; }
.entete-nav a:focus-visible { outline-offset: 6px; }
.lien-fleche:focus-visible { outline-offset: 6px; background-size: 0 1px; }

/* Compteurs : chiffres à chasse fixe pour éviter tout décalage */
[data-compteur] { font-variant-numeric: tabular-nums lining-nums; }

@media (prefers-reduced-motion: reduce) {
  .magnetique { transform: none !important; }
  .entete-progression { transition: none; }
}
/* Sur une ouverture sombre, l'en-tête devient opaque dès qu'on défile : aucun texte ne passe dessous */
.entete.est-defile:not(.est-plein):not(.entete--clair) { background: var(--profond); box-shadow: 0 1px 0 var(--filet-clair); }