/* =====================================================================
   Cabinet LAO THIANE - feuille de style unique
   Systeme visuel : DESIGN_SYSTEM_2026-09-03.md, brand_tokens.json v0.2
   Mobile d'abord. Aucun framework. Aucune ressource distante.
   ===================================================================== */

/* --- 1. Polices -------------------------------------------------------
   Les WOFF2 ne sont pas encore livres (voir assets/fonts/LISEZMOI.md).
   Tant qu'ils manquent, les replis prennent la main et la page reste
   entierement lisible : les tailles, les interlignes et les hauteurs de
   bloc sont identiques dans les deux cas. */

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Faces de repli calees sur les metriques des deux familles, pour que la
   substitution ne deplace pas le bouton d'appel de la zone haute. */
@font-face {
  font-family: "Repli sans";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 98%;
  descent-override: 27%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Repli serif";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 93%;
  ascent-override: 97%;
  descent-override: 29%;
  line-gap-override: 0%;
}

/* --- 2. Jetons -------------------------------------------------------- */

:root {
  /* surfaces */
  --surface-page: #FAF5E9;
  --surface-card: #FFFFFF;
  --surface-tint: #FCF6D2;
  --surface-invert: #513118;
  /* encres */
  --ink-title: #3B2311;
  --ink-body: #513118;
  --ink-muted: #6E5A3E;
  --ink-invert: #FFFFFF;
  --ink-footer: #FCF6D2;
  /* accent et traits */
  --accent-gold: #8A6416;       /* v1.29 : or, texte et icones (4,93:1 sur creme) */
  --accent-gold-deep: #6B4C0F;  /* v1.29 : or profond, survol des liens */
  --accent-bouton: #DE9E3B;     /* v1.29 : or vif du sceau, fond des boutons */
  --accent-bouton-deep: #C9862B;/* v1.29 : survol des boutons */
  --ink-on-bouton: #3B2311;     /* v1.29 : texte sur or vif, 6,32:1 */
  --line-soft: #E3D9BC;
  --line-strong: #A08450;
  --focus-ring: #8A6416;
  /* espacement, base 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  /* gabarit */
  --container-max: 1120px;
  --container-text: 700px;
  --container-narrow: 560px;
  --radius: 2px;
  /* 2026-09-11 v1.23 : tokens AJOUTES pour l'elevation et la respiration.
     --radius de la charte est conserve tel quel pour le logo et les champs. */
  --radius-panneau: 10px;
  --radius-carte: 8px;
  /* 2026-09-16 v1.27 : opacites remontees. Memes jetons, meme teinte d ombre
     derivee de --ink-title, seule l intensite change. */
  --ombre-carte: 0 1px 2px rgba(59,35,17,.06), 0 10px 24px -8px rgba(59,35,17,.18);
  --ombre-carte-survol: 0 3px 6px rgba(59,35,17,.10), 0 20px 40px -12px rgba(59,35,17,.28);
  --ombre-panneau: 0 2px 4px rgba(59,35,17,.05), 0 24px 56px -20px rgba(59,35,17,.22);
  --header-h: 56px;
  /* familles */
  --font-title: "Source Sans 3", "Repli sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Serif 4", "Repli serif", Georgia, "Times New Roman", serif;
}

/* --- 3. Base ---------------------------------------------------------- */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--ink-title);
  margin: 0;
}

h1 { font-size: 1.75rem; line-height: 1.18; }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; line-height: 1.3; }

p, ul, ol { margin: 0; }
p + p { margin-top: var(--space-4); }

a { color: var(--accent-gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 5px var(--focus-ring);
  border-radius: var(--radius);
}

img { max-width: 100%; height: auto; }

.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 4. Gabarit ------------------------------------------------------- */

.conteneur {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.colonne-texte { max-width: var(--container-text); }
.colonne-etroite { max-width: var(--container-narrow); }

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface-card);
  border: 2px solid var(--accent-gold);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-title);
  font-weight: 600;
}
.lien-evitement:focus {
  left: var(--space-5);
  top: var(--space-2);
}

main { display: block; }
.section { margin-top: var(--space-16); }  /* le desktop est regle dans la media query 768px */
.section:first-child { margin-top: 0; }

/* --- 5. En-tete ------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: var(--header-h);
  background: var(--surface-page);
  border-bottom: 1px solid var(--line-soft);
}
.entete-barre {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.marque {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink-title);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.marque:hover { color: var(--accent-gold); }
.marque > span { display: inline-block; }
.marque-sceau {
  width: 26px;
  height: 39px;
  margin-right: 10px;
  flex: 0 0 auto;
  display: block;
}
@media (min-width: 1024px) {
  .marque-sceau { width: 30px; height: 45px; margin-right: 12px; }
}

.entete-tel { display: none; }

.btn-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-body);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.js .btn-menu { display: inline-flex; }
.btn-menu .trait { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.btn-menu .trait::before,
.btn-menu .trait::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.btn-menu .trait::before { top: -6px; }
.btn-menu .trait::after { top: 6px; }
.btn-menu[aria-expanded="true"] .trait { background: transparent; }
.btn-menu[aria-expanded="true"] .trait::before { top: 0; transform: rotate(45deg); }
.btn-menu[aria-expanded="true"] .trait::after { top: 0; transform: rotate(-45deg); }

/* Navigation : repliee sur telephone quand le script est actif, deployee
   en clair au-dela de 768 px. Sans script, elle reste accessible en bas
   de page, ou elle est reprise en entier. */
.nav-principale { display: none; }
.js .nav-principale[data-ouvert="true"] {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;
  overflow-y: auto;
  background: var(--surface-page);
  padding: var(--space-4) var(--space-5) var(--space-10);
  z-index: 29;
}
.nav-liste { list-style: none; margin: 0; padding: 0; }
.nav-liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--space-2) 0;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--ink-body);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
}
.nav-liste a::after { content: "\203A"; color: var(--accent-gold); font-size: 1.25rem; }
.nav-liste a:hover { color: var(--accent-gold); text-decoration: underline; }
.nav-liste a[aria-current="page"] {
  color: var(--ink-title);
  border-left: 3px solid var(--accent-gold);
  padding-left: var(--space-3);
}
.nav-appel { margin-top: var(--space-6); }

body.menu-ouvert { overflow: hidden; }

/* --- 6. Fil d'Ariane -------------------------------------------------- */

.fil-ariane {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-muted);
  padding-top: var(--space-4);
}
.fil-ariane ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fil-ariane li + li::before { content: "\203A"; color: var(--line-strong); margin-right: var(--space-2); }
.fil-ariane a { color: var(--ink-muted); }

/* --- 7. Zone haute ---------------------------------------------------- */

.zone-haute { padding-top: var(--space-6); }
.ligne-lieu { margin-top: var(--space-3); font-size: 1.0625rem; line-height: 1.5; }
.ligne-cible { margin-top: var(--space-2); font-size: 1.0625rem; line-height: 1.5; }

.bloc-autorite {
  margin-top: var(--space-5);
  background: var(--surface-tint);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius);
  padding: 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-body);
}
.bloc-autorite b { font-weight: 600; }

.actions { margin-top: var(--space-5); }
.actions > * + * { margin-top: var(--space-3); }

/* --- 8. Boutons ------------------------------------------------------- */

.bouton-principal,
.bouton-secondaire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  border-radius: var(--radius);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 0 var(--space-6);
  white-space: nowrap;
}
.bouton-principal {
  height: 52px;
  background: var(--accent-bouton);
  color: var(--ink-on-bouton);
  border: 1px solid var(--accent-gold);
}
.bouton-principal:hover { background: var(--accent-bouton-deep); }
.bouton-principal:active { background: var(--accent-bouton-deep); transform: translateY(1px); }
.bouton-secondaire {
  height: 48px;
  background: var(--surface-card);
  color: var(--ink-body);
  border: 1.5px solid var(--line-strong);
}
.bouton-secondaire:hover { border-color: var(--accent-gold); color: var(--accent-gold); }
.icone-combine { flex: none; }

/* --- 9. Cartes metiers ------------------------------------------------ */

.cartes { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: var(--space-5); }
.carte {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--space-6);
  min-height: 56px;
  position: relative;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.carte:hover {
  box-shadow: var(--ombre-carte-survol);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
@media (prefers-reduced-motion: reduce) {
  .carte { transition: none; }
  .carte:hover { transform: none; }
}
.carte h3 { margin: 0; }
.carte h3 a { color: var(--ink-title); text-decoration: none; }
.carte h3 a::after { content: ""; position: absolute; inset: 0; }
.carte p { margin-top: var(--space-2); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }
.carte .chevron { position: absolute; right: var(--space-4); top: var(--space-4); color: var(--accent-gold); }
.carte:hover { border-color: var(--accent-gold); }
.carte:hover h3 a { color: var(--accent-gold); text-decoration: underline; }
.carte:hover .chevron { transform: translateX(2px); }
.carte:active { background: var(--surface-page); }
.carte:has(a:focus-visible) { box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 5px var(--focus-ring); }

/* --- 10. Contenu editorial ------------------------------------------- */

.chapeau { font-size: 1.1875rem; line-height: 1.5; margin-top: var(--space-4); }
.section h2 + p, .section h2 + ul, .section h2 + .liste-titres { margin-top: var(--space-4); }
.section > * + h2 { margin-top: var(--space-10); }

.liste-puces { list-style: none; margin: 0; padding: 0; }
.liste-puces li { position: relative; padding-left: var(--space-5); margin-top: var(--space-2); }
.liste-puces li:first-child { margin-top: 0; }
.liste-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  background: var(--accent-gold);
}
.liste-titres { list-style: none; margin: 0; padding: 0; }
.liste-titres li + li { margin-top: var(--space-2); }

.liens-missions { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.liens-missions li { margin-top: var(--space-2); }
.liens-missions li:first-child { margin-top: 0; }

.valeur-attendue { color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.55; }
.mention-maj { color: var(--ink-muted); font-size: 0.9375rem; margin-top: var(--space-6); }

.adresse { font-style: normal; }
.adresse p + p { margin-top: var(--space-2); }

/* Emplacement reserve au portrait du dirigeant. Aucune image n'est posee
   tant que la photographie n'est pas fournie : la boite reste vide et le
   texte ne bouge pas le jour ou elle arrive. */
.zone-portrait { display: none; }

/* --- Portrait EN PLEIN TEXTE (08/09) -----------------------------------
   Arbitrage de Chris : vu la definition de la photo fournie, pas de calage
   a droite dans l'entree de page, mais une image dans le fil du texte, a la
   largeur de la colonne. Le calage a droite obligeait a un cadrage serre 4:5
   sur une source qui coupe deja le haut du crane ; en paysage, le sujet
   occupe moins de hauteur et le defaut ne se voit plus. */
.portrait-texte { margin: var(--space-8) 0; }
/* 2026-09-11 v1.22 : retour au portrait PAYSAGE 1664x928 valide par Chris.
   Le plafond de 380 px de la v1.21 tombe : une image large s'affiche sur toute
   la largeur de colonne, tres en dessous de sa taille native, donc nette. */
.portrait-texte img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--surface-tint);
}
/* --- Illustration de page (10/09, v1.20) -------------------------------
   Meme gabarit que le portrait du dirigeant : pleine largeur de colonne,
   dans le fil du texte, sous l'entree de page. L'image est decorative :
   son alt est vide et elle n'est pas annoncee aux lecteurs d'ecran. */
.illustration-page { margin: var(--space-8) 0; }
.illustration-page img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--surface-tint);
}

.portrait-texte figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-title);
  font-size: 0.875rem; line-height: 1.5; color: var(--ink-muted);
}
/* 2026-09-06 : des qu'une photo EXISTE, le bloc s'affiche, y compris sur
   telephone ou la charte le veut sous le H2 du dirigeant. Sans photo, il reste
   invisible et ne reserve rien. */
.avec-portrait:has(.zone-portrait img) .zone-portrait {
  display: block; width: 100%; max-width: 320px;
  margin: var(--space-6) 0 0;
}
.zone-portrait img {
  display: block; width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; border-radius: var(--radius);
}
.zone-portrait figcaption {
  font-family: var(--font-title); font-size: 0.8125rem; color: var(--ink-muted);
  margin-top: var(--space-2); letter-spacing: .01em;
}

/* --- 10ter. Entree de page, numerotation des sections, motif ----------
   2026-09-06, v1.5. Mesure du 06/09 sur les 9 pages : H1 a 40 px pour un corps
   a 17-18 px (ratio 2,2), longueur de ligne de 52 a 67 caracteres, serif en
   lecture et sans-serif en titrage. Autrement dit la typographie etait DEJA
   reglee, contrairement a ce que trois modeles externes ont suppose. Le defaut
   mesure etait ailleurs : HUIT pages sur neuf sans aucun troisieme niveau de
   titre et sans carte, trois a quatre paragraphes pour deux a cinq listes a
   puces. Des catalogues, pas des pages. Ce bloc ajoute les deux niveaux qui
   manquaient : une entree de page qui distingue les rubriques, et une
   progression numerotee a l'interieur des pages de mission. */

/* Entree de page. Le libelle reprend le libelle de NAVIGATION, jamais une
   formule inventee, et le sceau existant sert de repere sans nouvel actif. */
.rubrique {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.rubrique-sceau { display: block; flex: none; }

/* Numerotation des sections. Purement decorative : le numero est genere en CSS,
   donc absent du DOM et invisible des lecteurs d'ecran, et aucune information
   ne repose sur lui seul. */
.sections-numerotees { counter-reset: section; }
.sections-numerotees > .section { counter-increment: section; }
.sections-numerotees > .section > h2 { position: relative; }
.sections-numerotees > .section > h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--line-strong);
}
/* Le bloc contact et le renvoi vers les autres missions ferment la page : ce
   sont de la navigation, pas des etapes de la mission. Hors progression. */
.sections-numerotees > .bloc-contact,
.sections-numerotees > .section-annexe { counter-increment: none; }
.sections-numerotees > .section-annexe > h2::before { content: none; }

/* Puce carree en or, a la place du disque par defaut. */
.liste-puces li::marker, .liste-longue li::marker { color: var(--accent-gold); }

/* Motif de fond. ⚠️ Il DEROGE a art_direction.imagerie.interdits, qui rangeait
   « motif de fond » et « filigrane de monogramme » parmi les interdits.
   Derogation levee par Chris le 2026-09-06, tracee dans brand_tokens.json.
   Contraintes qu'il respecte : jamais derriere du texte courant, decoratif donc
   aria-hidden, retire a l'impression, et derive de la geometrie IGN reelle de
   l'ile, pas d'un ornement invente. */
.zone-haute-page { position: relative; }

/* 🔴 Le motif n'apparait qu'A PARTIR DE 1024 px, et ce n'est pas un choix
   esthetique. Mesure du 06/09 : pose sans condition de largeur, son debord de
   120 px a droite ELARGISSAIT LE DOCUMENT et provoquait un defilement
   horizontal sur 8 pages en 360 px (460 px de large pour 360 de fenetre) et sur
   6 pages en 768 px. Le site interdit le defilement horizontal. En dessous de
   1024 px il n'y a de toute facon pas de marge ou le loger. */
@media (min-width: 1024px) {
  .zone-haute-page::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -28px;
    width: 300px;
    height: 270px;
    /* Chemin RELATIF a la feuille de style, donc valable a la racine comme dans un
       sous-dossier de preprod. Les polices ci-dessus l'etaient deja ; celle-ci
       etait restee en absolu et cassait hors racine. */
    background: url("motif-ile.svg") no-repeat center / contain;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
  }
}
@media print { .zone-haute-page::after { display: none; } }

/* --- 10bis. Bloc lieu et carte de situation --------------------------- */

/* La carte est le SEUL visuel du site avec les logos institutionnels. Elle est
   servie depuis assets/, jamais depuis un service tiers : le storyboard interdit
   toute ressource distante, ce qui est aussi ce qui evite la banniere de
   consentement. Fond de carte IGN Admin Express + INSEE, Licence Ouverte Etalab. */
.lieu-carte { margin: var(--space-6) 0 0; }
.lieu-carte img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.lieu-carte figcaption {
  margin-top: var(--space-3);
  max-width: 420px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.lieu-carte figcaption { max-width: 420px; }

/* Cadre de la carte. Le bouton se pose SUR l'image, jamais a cote : c'est la
   carte elle-meme qu'on demande a remplacer. Sans JavaScript le bouton reste
   inerte et l'image IGN suffit, ce qui est le bon echec. */
.carte-cadre { position: relative; max-width: 420px; }
.carte-declencheur {
  position: absolute;
  left: 50%;
  bottom: var(--space-3);
  transform: translateX(-50%);
  width: auto;
  white-space: nowrap;
  box-shadow: 0 0 0 3px var(--surface-card);
}
.lieu-carte.carte-chargee .carte-cadre { aspect-ratio: 10 / 9; }
.lieu-carte.carte-chargee iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}

/* --- 11. Bloc contact de bas de page --------------------------------- */

.bloc-contact {
  margin-top: var(--space-10);
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: var(--space-5);
  max-width: var(--container-text);
}
.bloc-contact h2 { font-size: 1.375rem; }
.bloc-contact p { margin-top: var(--space-3); }
.bloc-contact .actions { margin-top: var(--space-4); }
.bloc-contact .adresse { margin-top: var(--space-4); font-size: 0.9375rem; line-height: 1.55; color: var(--ink-muted); }

/* --- 12. Pied de page ------------------------------------------------- */

.pied {
  margin-top: var(--space-16);
  background: var(--surface-invert);
  color: var(--ink-footer);
  padding: var(--space-10) 0;
}
.pied a { color: var(--ink-footer); }
.pied-sceau { width: 34px; height: 51px; display: block; margin-bottom: var(--space-4); }
.pied a:focus-visible { box-shadow: 0 0 0 2px var(--surface-invert), 0 0 0 5px var(--ink-footer); }
.pied-bloc + .pied-bloc { margin-top: var(--space-6); }
.pied .adresse { font-size: 0.9375rem; line-height: 1.6; }
.pied-liens { list-style: none; margin: 0; padding: 0; }
.pied-liens li { margin: 0; }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; }
.pied-mentions { font-size: 0.9375rem; line-height: 1.6; margin-top: var(--space-6); }
.pied-nom { font-family: var(--font-title); font-weight: 600; }
.pied-ordre {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(252, 246, 210, 0.22);
}
.pied-ordre p { margin: 0; font-size: 0.875rem; line-height: 1.65; max-width: 68ch; }
.pied-ordre a { text-decoration: underline; text-underline-offset: 3px; }

/* --- 13. Pages breves : 404 et 410 ------------------------------------ */

.page-breve { padding-top: var(--space-10); }
.page-breve .actions { max-width: 360px; }

/* --- 14. Au-dela de 600 px ------------------------------------------- */

@media (min-width: 600px) {
  .conteneur { padding: 0 var(--space-6); }
  .cartes { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
  .actions > * + * { margin-top: 0; }
  .bouton-principal, .bouton-secondaire { width: auto; }
}

/* --- 15. Au-dela de 768 px ------------------------------------------- */

@media (min-width: 768px) {
  body { font-size: 1.125rem; line-height: 1.65; }
  h1 { font-size: 2.5rem; line-height: 1.12; }
  /* 2026-09-16 v1.27 : RETOUR AU PALIER DE LA CHARTE, 1.75rem. La v1.23 avait
     pousse ce clamp jusqu a 2.375rem en croyant creuser la hierarchie. Mesure du
     16/09 : h1 rendait 40 px et h2 38 px, deux points d ecart, donc la page et
     chacune de ses sections pesaient le meme poids. type_scale donne 40/28/20/18. */
  h2 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; }
  h3 { font-size: 1.25rem; line-height: 1.3; }
  .chapeau { font-size: 1.3125rem; }
  .conteneur { padding: 0 var(--space-8); }

  /* De 768 a 1023 px, l'en-tete reste sur une seule ligne de 56 px et la
     navigation reste repliee derriere le bouton de menu : les huit libelles
     de la copy ne tiennent pas sur une ligne a ces largeurs, et les faire
     revenir a la ligne dans la barre les ferait sortir de l'ecran par le
     haut. Le numero de telephone, lui, s'affiche des 768 px. */
  .entete-tel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ink-body);
    text-decoration: none;
    white-space: nowrap;
  }
  .entete-tel:hover { color: var(--accent-gold); text-decoration: underline; }

  .section { margin-top: clamp(72px, 6vw, 112px); }  /* v1.23 : c'etait 64px, cause n1 de l'effet a plat */
  .zone-haute { padding-top: var(--space-12); }
  .zone-haute-accueil {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-rows: auto auto;
    gap: var(--space-8);
    align-items: start;
    /* 2026-09-06, v1.3 : sans `align-content: start`, la hauteur excedentaire de
       la grille se repartissait dans les rangees et ouvrait un trou de 56 px
       entre le titre et les boutons d'appel. Mesure en navigateur, pas a l'oeil. */
    align-content: start;
  }
  .zone-haute-accueil .zone-haute-titre { grid-column: 1; grid-row: 1; }
  /* 2026-09-06, v1.3 : la marge s'ajoutait a l'ecart de grille de 32 px et
     ouvrait 56 px entre la ligne de cible et le bouton d'appel. L'ecart de
     grille suffit. */
  .zone-haute-accueil .zone-haute-actions { grid-column: 1; grid-row: 2; margin-top: 0; }
  .zone-haute-accueil .zone-haute-preuve { grid-column: 2; grid-row: 1 / span 2; }
  .bloc-autorite { margin-top: 0; padding: var(--space-5); font-size: 1rem; }
  .bloc-contact { padding: var(--space-6); }
  .pied { padding: var(--space-20) 0 var(--space-10); }
  .pied-colonnes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .pied-bloc + .pied-bloc { margin-top: 0; }
  .liste-longue { columns: 2; column-gap: var(--space-8); }
  .liste-longue li { break-inside: avoid; }
  /* 2026-09-06, v1.3 : la colonne de portrait ne se reserve QUE si une photo est
     REELLEMENT posee. Mesure du 06/09 en navigateur : sans image, `1fr 320px`
     amputait la colonne de lecture de 636 a 284 px, soit environ 40 caracteres
     par ligne contre les 68 de la regle typographique, avec 320 x 400 px de vide
     a cote. Le `:has()` remet la grille tout seul le jour ou l'image arrive, sans
     toucher au HTML ; un navigateur qui ne le connait pas rend une colonne pleine
     largeur, ce qui est le bon echec. */
  /* 2026-09-06, v1.10 : la photo est arrivee, et elle a REVEILLE le defaut
     corrige le matin meme. Poser `1fr 320px` dans une colonne de lecture de
     636 px ramenait le texte a 284 px, exactement la valeur d'avant correction.
     La grille est donc repoussee au bloc 1400 px plus bas, ou le conteneur a
     assez de marge a droite pour loger le portrait SANS prendre sur le texte.
     Ici, le portrait se contente d'exister sous le texte. */


  /* Bloc lieu : l'adresse a gauche, la carte de situation a droite. */
}

/* --- 16. Au-dela de 1024 px ------------------------------------------ */

@media (min-width: 1024px) {
  /* 2026-09-06, v1.2 : les cartes de missions passent de 3 a 2 colonnes au-dela
     de 1024 px. Le cabinet compte desormais QUATRE missions et non cinq, le
     commissariat aux comptes ayant ete arrete : une grille de 3 laissait une
     carte seule sur la deuxieme rangee, ce qui se lit comme un trou. */
  .cartes { grid-template-columns: repeat(2, 1fr); }

  /* La carte de situation se met a cote de l'adresse A PARTIR DE 1024 px seulement.
     Mesures du 06/09 : a 768 px la grille `1fr 380px` ramenait la colonne de texte
     a 292 px, et dans une colonne de lecture de 700 px (page Contact) a 224 px.
     C'est le meme defaut que la colonne de portrait corrigee le meme jour : une
     grille a deux colonnes posee dans un espace trop etroit ampute le texte. */
  /* 2026-09-06, v1.6 : la colonne de texte etait en `1fr`, donc elle occupait
     644 px pour un contenu qui en remplit 370, et la carte partait se coller au
     bord droit. Resultat mesure : un vide de pres de 280 px EN PLEIN MILIEU du
     bloc, que Chris a vu tout de suite. La colonne prend desormais la largeur de
     son contenu et la carte se pose juste a cote : le blanc passe a droite du
     couple, ou il se lit comme une marge et non comme un trou. */
  .lieu-grille {
    display: grid;
    grid-template-columns: minmax(0, max-content) 380px;
    justify-content: start;
    gap: var(--space-8);
    align-items: start;
  }
  .colonne-texte .lieu-grille { grid-template-columns: 1fr; }

  /* Portrait A COTE du texte : uniquement a partir de 1280 px, ou la marge
     droite du conteneur peut l'accueillir. Le bloc DEBORDE dans cette marge au
     lieu de rogner la colonne de lecture.
     Seuil a 1400 px et non 1280 : mesure du 06/09, a 1280 le bord droit du
     portrait tombait a 1310 px pour une fenetre de 1280, donc defilement
     horizontal. Le seuil se deduit de la mesure, il ne se choisit pas. */
  /* 2026-09-06, correction. La grille a deux colonnes reservait la HAUTEUR du
     portrait dans le flux : le bloc du dirigeant ne fait que trois lignes, le
     portrait 400 px, et il restait ~250 px de blanc SOUS le texte, dans la
     colonne de lecture. Un trou, pas une marge. Le portrait est desormais pose
     en absolu DANS LA MARGE DROITE : meme position a l'ecran, mais il ne
     commande plus la hauteur de la section, donc la suivante remonte. */
  /* 2026-09-06, v1.12. Le portrait etait pose au niveau de la section du
     dirigeant, c'est-a-dire BAS dans la page, pendant que le haut a droite du
     titre restait vide. Il remonte dans l'entree de page : la photo tient le
     blanc du haut, et elle arrive avec le nom qui la designe dans le chapeau.
     Toujours en absolu dans la marge, donc elle ne commande aucune hauteur. */
  @media (min-width: 1400px) {
    .avec-portrait:has(.zone-portrait img) { position: relative; }
    .avec-portrait:has(.zone-portrait img) .zone-portrait {
      position: absolute;
      top: 0;
      left: 100%;
      margin-left: var(--space-8);
      margin-top: 0;
      width: 300px;
    }
    /* le motif de l'ile vivait exactement a cet endroit : deux elements
       decoratifs au meme endroit se contrarient, le motif s'efface. */
    .zone-haute-page.avec-portrait:has(.zone-portrait img)::after { display: none; }

    /* La colonne de texte reste centree et la photo deborde d'un seul cote :
       l'ensemble penche donc a droite. On decale toute la colonne de la MOITIE
       du debord, 300 + 32 sur deux, pour recentrer le couple texte + photo.
       `left` sur un element positionne ne cree pas de zone de defilement a
       gauche, contrairement a une marge negative. */
    .colonne-texte:has(.zone-portrait img) { position: relative; left: -166px; }
  }

  /* En-tete sur deux niveaux : bandeau d'identite, puis rangee de
     navigation. Aucun libelle n'est raccourci, aucune hauteur n'est
     figee : la barre grandit avec son contenu au lieu de le rogner. */
  .entete { min-height: 116px; }
  .entete-barre { flex-wrap: wrap; row-gap: 0; }
  .marque { order: 1; min-height: 72px; }
  .entete-tel { order: 2; min-height: 72px; }
  .js .btn-menu, .btn-menu { display: none; }
  .nav-principale, .js .nav-principale[data-ouvert="true"] {
    order: 3;
    flex-basis: 100%;
    display: block;
    position: static;
    padding: 0;
    background: transparent;
    overflow: visible;
    border-top: 1px solid var(--line-soft);
  }
  .nav-liste { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
  .nav-liste a {
    min-height: 44px;
    font-size: 0.9375rem;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) 0;
  }
  .nav-liste a::after { content: none; }
  .nav-liste a[aria-current="page"] {
    border-left: none;
    padding-left: 0;
    border-bottom: 2px solid var(--accent-gold);
  }
  .nav-appel { display: none; }
}

/* --- 17. Mouvement ---------------------------------------------------- */

.carte .chevron, .bouton-principal { transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .carte:hover .chevron { transform: none; }
  .bouton-principal:active { transform: none; }
}

/* --- 18. Impression --------------------------------------------------- */

@media print {
  .entete, .nav-principale, .btn-menu, .lien-evitement { display: none; }
  body { background: #FFFFFF; color: #000000; }
}

/* --- Bloc d'entree de l'accueil (11/09, v1.22) -------------------------
   Demande de Jack : alleger l'accueil, remplacer le paragraphe de
   presentation par la phrase de l'ancien site posee a cote d'une photo,
   et ne garder qu'un seul bouton vers la page Le cabinet.
   Deux colonnes a partir de 52rem, empilees en dessous. */
.entree-accueil {
  display: grid; gap: var(--space-6);
  align-items: center;
  margin: var(--space-8) 0 var(--space-10);
}
.promesse {
  margin: 0;
  font-family: var(--font-body);   /* Source Serif 4, comme la maquette de Jack */
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.25;
  color: var(--ink-title);
  text-wrap: balance;
}
/* Ligne d'appui sous la promesse, ajoutee en v1.25 pour la seconde phrase
   de Jack du 16/09. Elle n'est pas en italique : deux lignes italiques
   d'affilee font bloc et la promesse perd son relief. */
.promesse-appui {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--ink-muted, inherit);
  text-wrap: balance;
}
.entree-accueil-action { margin: var(--space-5) 0 0; }
.entree-accueil-image { margin: 0; }
.entree-accueil-image img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); background: var(--surface-tint);
}
/* Le bouton reste pleine largeur sur telephone, comme les autres boutons du
   site, et reprend sa largeur naturelle des qu'il y a de la place. Sans cela
   il s'etire sur toute la colonne et ecrase la promesse. */
@media (min-width: 40rem) {
  .entree-accueil-action .bouton-principal {
    display: inline-flex; width: auto;
    padding-inline: var(--space-6);
  }
}
@media (min-width: 52rem) {
  .entree-accueil {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-8);
  }
}

/* --- Respiration et decoupage (11/09, v1.23) ---------------------------
   Retour de Chris : la page etait "a plat sur fond jaune". Trois causes
   mesurees : 40 px seulement entre les sections, des titres de section a
   22 px, et aucune elevation nulle part sauf les anneaux de focus.
   Correctif : rythme vertical double, titres agrandis, cartes posees sur
   une ombre douce, et un panneau blanc qui detache un bloc du fond creme. */

.panneau {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-panneau);
  box-shadow: var(--ombre-panneau);
  padding: var(--space-8) var(--space-6);
}
@media (min-width: 52rem) {
  .panneau { padding: var(--space-12) var(--space-10); }
}
.panneau > h2:first-child { margin-top: 0; }
/* Une carte posee dans un panneau blanc perd son ombre : deux blancs
   superposes se lisent mal. Elle garde son trait, c'est suffisant. */
.panneau .carte { box-shadow: none; background: var(--surface-page); }
.panneau .carte:hover { box-shadow: var(--ombre-carte); }

/* Le bloc d'entree gagne de l'air sous lui, il ouvre la page. */
.entree-accueil { margin-bottom: clamp(var(--space-12), 5vw, var(--space-20)); }
.entree-accueil-image img { box-shadow: var(--ombre-panneau); border-radius: var(--radius-panneau); }

/* --- Revelation au defilement ------------------------------------------
   Chaque bloc monte de 14 px en apparaissant. Desactive si la personne a
   demande moins d'animations, et desactive aussi si le script ne tourne
   pas : sans la classe .js-revele, rien n'est cache. */
.js-revele .a-reveler { opacity: 0; transform: translateY(14px); }
.js-revele .a-reveler.est-visible {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .js-revele .a-reveler { opacity: 1; transform: none; }
  .js-revele .a-reveler.est-visible { transition: none; }
}

/* --- 14. Bandes pleine largeur alternees (2026-09-16, v1.26) ------------
   Enseignement du site de reference releve le 11/09 : ce qui aere une page,
   ce n'est pas la marge, c'est que deux blocs voisins ne partagent pas le
   meme fond. La page alterne donc creme de page et creme soutenu.

   La bande sort du conteneur SANS toucher au HTML des sept pages. L'ombre
   portee de 100vmax peint la couleur jusqu'aux bords de l'ecran, et le
   clip-path la coupe en haut et en bas pour qu'elle ne deborde que
   lateralement. Pas de 100vw, qui ajouterait une barre de defilement
   horizontale des qu'une barre verticale est presente. */
.bande {
  background: var(--surface-tint);
  box-shadow: 0 0 0 100vmax var(--surface-tint);
  clip-path: inset(0 -100vmax);
  padding-block: var(--space-12);
  margin-top: var(--space-16);
}
/* 2026-09-16 v1.27b : DEUX BANDES QUI SE SUIVENT SE TOUCHENT.
   La v1.27 laissait la marge de 64 px entre elles, ce qui produisait un liseré
   de fond de page entre la bande creme et la bande brune, puis un second entre
   la derniere bande et le pied. Sur la reference, les plans sont jointifs : une
   bande se termine ou la suivante commence, jamais sur une lisiere. */
.bande + .bande,
.bande + .bande-sombre,
.bande-sombre + .bande,
.bande-sombre + .bande-sombre { margin-top: 0; }

/* Et quand la page se termine sur une bande, le pied s y accroche directement. */
main:has(> .conteneur > .bande:last-child) + .pied,
main:has(> .conteneur > .bande-sombre:last-child) + .pied { margin-top: 0; }

/* Le panneau blanc pose DANS une bande garde son contraste : il est deja
   un plan distinct, il n'a pas besoin de l'ombre en plus. */
.bande .panneau { box-shadow: none; }

/* --- Bande de trois preuves (accueil) ----------------------------------
   Les trois faits viennent du site lui-meme : la page Contact pour le
   quartier, les mentions legales pour l'immatriculation du 1er octobre
   2001, la page Le cabinet pour le dirigeant qui conduit les missions.
   Aucun delai de reponse, aucun type de client, aucun forfait : la maquette
   de demarchage les affichait, ils etaient inventes par le prestataire. */
.bande-preuves { padding-block: var(--space-10); }
.preuves {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-6);
}
.preuves > li { padding-left: 0; }
.preuves dt {
  font-family: var(--font-title);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.preuves dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.35;
  color: var(--ink-title);
}
@media (min-width: 48rem) {
  .preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .preuves > li + li {
    padding-left: var(--space-8);
    border-left: 1px solid var(--line-soft);
  }
}


/* --- 15. Composition reprise du site de reference (2026-09-16, v1.27) ----
   Consigne de Chris : se rapprocher de la MISE EN FORME de la reference, que
   Jack aime, SANS toucher aux couleurs ni aux polices de la charte. Tout ce
   qui suit n emploie donc que les jetons existants : les deux polices deja
   chargees, le brun, la creme, l or.

   Ce qui est repris de la reference : la tete de section centree, la pastille
   de surtitre, le titre sur deux lignes dont la seconde en accent, la bande
   sombre pleine largeur, l icone dans un carre arrondi, le vis-a-vis image et
   texte. Ce qui n est PAS repris : sa palette vert-nuit, ses polices, son
   registre commercial. */

/* Tete de section centree ------------------------------------------------ */
.tete-section { text-align: center; max-width: 42rem; margin-inline: auto; }
.tete-section h2 { margin-top: 0; }
.tete-section .chapeau { margin-top: var(--space-4); color: var(--ink-muted); }
.sections-numerotees > .section > .tete-section h2::before { content: none; }

/* Pastille de surtitre --------------------------------------------------- */
.pastille {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--surface-page);
  font-family: var(--font-title);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.pastille::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-gold); flex: none;
}

/* Seconde ligne de titre en accent --------------------------------------
   Elle reprend le procede DEJA present sur ce site depuis la v1.0, la
   promesse d accueil en Source Serif 4 italique. Aucune police nouvelle,
   aucune couleur nouvelle : --font-body et --accent-gold sont de la charte. */
.titre-accent {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--accent-gold);
  letter-spacing: 0;
}

/* Bande sombre pleine largeur ------------------------------------------- */
.bande-sombre {
  background: var(--surface-invert);
  box-shadow: 0 0 0 100vmax var(--surface-invert);
  clip-path: inset(0 -100vmax);
  color: var(--ink-footer);
  padding-block: var(--space-16);
  margin-top: var(--space-16);
  border-radius: 0;
  border: 0;
}
.bande-sombre h2, .bande-sombre h3 { color: var(--ink-invert); }
.bande-sombre .chapeau, .bande-sombre p { color: var(--ink-footer); }
.bande-sombre .pastille {
  background: transparent;
  border-color: rgba(252,246,210,.28);
  color: var(--ink-footer);
}
.bande-sombre .carte {
  background: rgba(252,246,210,.06);
  border-color: rgba(252,246,210,.18);
  box-shadow: none;
}
.bande-sombre .carte:hover { background: rgba(252,246,210,.11); border-color: rgba(252,246,210,.34); }
.bande-sombre .carte h3 a { color: var(--ink-invert); }
.bande-sombre .carte:hover h3 a { color: var(--surface-tint); }
.bande-sombre .carte p { color: rgba(252,246,210,.82); }
.bande-sombre .chevron { color: var(--surface-tint); }
/* 🔴 Sur fond brun, la ligne d accent ne peut pas rester en --accent-gold :
   #804000 sur #513118 est illisible. Elle passe en creme, et c est l italique
   serif qui la distingue de la premiere ligne, pas la couleur. */
.bande-sombre .titre-accent { color: var(--surface-tint); }

/* Icone de carte dans un carre arrondi ----------------------------------- */
.carte-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--space-4);
  border-radius: var(--radius-carte);
  background: var(--surface-invert);
  color: var(--surface-tint);
  flex: none;
}
.bande-sombre .carte-icone { background: var(--surface-tint); color: var(--surface-invert); }
.carte-icone svg { display: block; }

/* Vis-a-vis image et texte sur les pages de mission ----------------------
   Corrige le defaut releve sur la v1.26 : la bande coloree soulignait le vide
   a droite de la colonne de texte. L illustration vient s y loger.

   Le bloc sort de la colonne de 700 px pour reprendre la largeur du conteneur,
   1080 px de contenu. La sortie vaut donc (1080 - 700) / 2 = 190 px de chaque
   cote, et elle n est posee qu a partir de 1200 px, largeur a laquelle le
   conteneur est deja plafonne : en dessous, le calcul deborderait. */
.vis-a-vis > .zone-haute { padding-top: var(--space-6); }
@media (min-width: 75rem) {
  .vis-a-vis {
    margin-inline: -190px;
    display: grid;
    grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
  }
  .vis-a-vis > .illustration-page { margin: 0; }
}

/* Bouton d appel permanent dans l en-tete, a partir de 1024 px ----------- */
@media (min-width: 64rem) {
  .entete-action { display: inline-flex; }
}
.entete-action { display: none; }


/* --- 16. Chargement des blocs (2026-09-16, v1.27) -----------------------
   La revelation au defilement existait depuis la v1.23 et couvrait deja les
   sections. Deux manques restaient sur les blocs neufs. */

/* a. UNE BANDE NE GLISSE PAS, ELLE SE FOND.
   Le deplacement de 14 px applique a une bande pleine largeur decolle son
   fond de la bande voisine pendant la transition : un liseré clair apparait
   le temps de l animation, exactement le defaut corrige plus haut, mais
   fugace. Les bandes gardent donc l opacite et perdent le deplacement. */
.js-revele .bande.a-reveler,
.js-revele .bande-sombre.a-reveler { transform: none; }

/* b. CASCADE A L INTERIEUR DU BLOC.
   Les cartes et les preuves montent l une apres l autre, 70 ms d ecart, au
   lieu d apparaitre d un seul tenant. C est ce qui donne a la reference son
   effet de chargement. Le retard est plafonne a quatre pas : au-dela, le
   dernier element se fait attendre et la page parait lente. */
.js-revele .a-reveler .cartes > li,
.js-revele .a-reveler .preuves > li,
.js-revele .a-reveler .liste-titres > li { opacity: 0; transform: translateY(10px); }
.js-revele .a-reveler.est-visible .cartes > li,
.js-revele .a-reveler.est-visible .preuves > li,
.js-revele .a-reveler.est-visible .liste-titres > li {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.js-revele .a-reveler.est-visible :is(.cartes, .preuves, .liste-titres) > li:nth-child(1) { transition-delay: .06s; }
.js-revele .a-reveler.est-visible :is(.cartes, .preuves, .liste-titres) > li:nth-child(2) { transition-delay: .13s; }
.js-revele .a-reveler.est-visible :is(.cartes, .preuves, .liste-titres) > li:nth-child(3) { transition-delay: .20s; }
.js-revele .a-reveler.est-visible :is(.cartes, .preuves, .liste-titres) > li:nth-child(n+4) { transition-delay: .27s; }

/* c. La tete de section arrive avant ce qu elle annonce. */
.js-revele .a-reveler .tete-section { opacity: 0; transform: translateY(10px); }
.js-revele .a-reveler.est-visible .tete-section {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}

/* d. Rien de tout cela si la personne a demande moins d animations. */
@media (prefers-reduced-motion: reduce) {
  .js-revele .a-reveler :is(.cartes, .preuves, .liste-titres) > li,
  .js-revele .a-reveler .tete-section { opacity: 1; transform: none; transition: none; }
}

/* --- 17. « Autres missions » en cartes (2026-09-16, v1.27) --------------
   Constat de Chris : les pages interieures etaient graphiquement pauvres a
   cote de l accueil. Le renvoi vers les autres missions y etait une liste de
   trois liens soulignes, la ou l accueil porte des cartes a icone. Meme
   composant, memes libelles, AUCUN mot neuf : seule la forme change. */
.cartes-annexe { margin-top: var(--space-6); }
.carte-mission { padding: var(--space-5) var(--space-6); }
.carte-mission h3 { margin: 0; font-size: 1.0625rem; }
.carte-mission .carte-icone { width: 34px; height: 34px; margin-bottom: var(--space-3); }
.carte-mission .carte-icone svg { width: 19px; height: 19px; }
@media (min-width: 48rem) {
  .cartes-annexe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 18. Coins arrondis et elevation, alignement general (2026-09-16) ---
   Consigne de Chris : aligner les appels a l action, la carte et les blocs sur
   le traitement deja pose sur l image d accueil, coin arrondi et ombre.
   Un seul rayon et une seule ombre pour toute la page : sans cela, un bloc a
   2 px pose a cote d un bloc a 10 px se lit comme un defaut de rendu.
   Les jetons employes existent depuis la v1.23 : --radius-carte, --radius-panneau,
   --ombre-carte, --ombre-panneau. Aucun jeton neuf. */

/* a. Les boutons. Ils portaient le rayon de 2 px de la charte, herite des champs
      de formulaire. Ils passent au rayon de carte et prennent l elevation legere. */
.bouton-principal, .bouton-secondaire {
  border-radius: var(--radius-carte);
  box-shadow: var(--ombre-carte);
}
.bouton-principal:hover, .bouton-secondaire:hover { box-shadow: var(--ombre-carte-survol); }
.entete-action { box-shadow: none; }        /* dans l en-tete, l ombre ferait doublon avec le filet */
.entete-action:hover { box-shadow: var(--ombre-carte); }

/* b. Le bloc de contact de bas de page : meme traitement que le panneau blanc
      de l accueil, dont il est le pendant. */
.bloc-contact {
  border-radius: var(--radius-panneau);
  border-color: var(--line-soft);
  box-shadow: var(--ombre-panneau);
  padding: var(--space-6);
}

/* c. La carte de situation et son cadre, image IGN comme iframe Google. */
.lieu-carte img, .carte-cadre, .lieu-carte iframe {
  border-radius: var(--radius-panneau);
}
.carte-cadre {
  overflow: hidden;                          /* sinon l iframe deborde du coin arrondi */
  box-shadow: var(--ombre-panneau);
}

/* d. Les illustrations de page et le portrait, au meme rayon que l image
      d accueil. Le portrait sortait de la charte sur ce point precis, qui
      demandait « rayon 2px, aucune ombre » : ce point est aligne sur la
      decision du 16/09 et doit etre inscrit avec les deux autres. */
.illustration-page img, .portrait-texte img {
  border-radius: var(--radius-panneau);
  box-shadow: var(--ombre-panneau);
}

/* e. Le panneau blanc des missions et les cartes gardent leur rayon : ils
      etaient deja alignes. Le champ de formulaire, lui, NE bouge PAS : le
      rayon de 2 px y est une convention de saisie, pas une decoration. */

/* --- 19. Blocs empiles sur les pages interieures (2026-09-16) -----------
   Constat de Chris : les pages interieures restaient pauvres. Idee retenue,
   la sienne : des blocs les uns en dessous des autres, comme un accordeon
   deja deplie. Chaque section devient donc une carte posee sur le fond de
   page, au meme rayon et a la meme elevation que le reste du site.
   La bande coloree est RETIREE de ces pages : une bande derriere une carte
   fait deux contours concurrents. L accueil garde ses bandes, il n a pas de
   blocs empiles. AUCUN MOT N A BOUGE : seule l enveloppe change. */
.bloc-empile {
  background: var(--surface-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-panneau);
  box-shadow: var(--ombre-panneau);
  padding: var(--space-8) var(--space-6);
  margin-top: var(--space-6);
}
.bloc-empile:first-child { margin-top: 0; }
.bloc-empile > h2 { margin-top: 0; }
.bloc-empile .cartes { margin-top: var(--space-6); }
/* Une carte posee DANS un bloc blanc perd son ombre : deux blancs superposes
   se lisent mal. Elle garde son filet, comme dans le panneau de l accueil. */
.bloc-empile .carte { box-shadow: none; background: var(--surface-page); }
.bloc-empile .carte:hover { box-shadow: var(--ombre-carte); }
@media (min-width: 48rem) {
  .bloc-empile { padding: var(--space-10) var(--space-8); }
}

/* --- 20. Traitement des puces, le meme partout (2026-09-16) -------------
   Trois listes de contenu coexistaient avec trois traitements : le carre or
   sur .liste-puces, rien sur .liste-titres, rien sur .liens-missions. Elles
   prennent toutes le carre or, a la meme taille, au meme retrait et a la
   meme hauteur. Le fil d Ariane et la navigation gardent le leur : ce sont
   des reperes, pas des listes de contenu. */
.liste-titres, .liens-missions { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.liste-titres li, .liens-missions li {
  position: relative;
  padding-left: var(--space-5);
  margin-top: var(--space-2);
}
.liste-titres li:first-child, .liens-missions li:first-child { margin-top: 0; }
.liste-titres li::before, .liens-missions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 4px;
  height: 4px;
  background: var(--accent-gold);
}

/* --- 21. Retouches du 16/09, second lot ---------------------------------
   a. La legende sous le portrait est retiree du HTML sur consigne de Chris :
      elle repetait le titre pose juste au-dessus. */

/* b. « Autres missions » et le bloc des missions du cabinet partagent
      desormais le meme traitement : bande sombre, tete centree, cartes a
      icone creme. La bande sombre en fin de page se colle au pied. */
main:has(> .conteneur > .bande-sombre:last-of-type) + .pied { margin-top: 0; }
.bande-sombre.section-annexe { margin-top: var(--space-16); }
.bande-sombre .cartes { margin-top: var(--space-8); }

/* c. La tete de page des quatre missions reprend celle de « Le cabinet » :
      une seule colonne, rubrique, titre, chapeau. Le vis-a-vis est retire du
      HTML ; la regle qui le portait n a plus d objet et reste neutralisee. */
.vis-a-vis { display: contents; }

/* --- 22. La bande sombre des pages interieures tient toute la largeur ----
   Posee telle quelle dans la colonne de lecture de 700 px, elle peignait le
   fond jusqu aux bords mais laissait ses cartes tassees a gauche, et trois
   cartes dans une grille de deux donnaient une rangee de deux puis une carte
   seule. Elle reprend donc la largeur du conteneur, 1080 px, comme le bloc
   des missions de l accueil, et passe a trois colonnes.
   La sortie de colonne vaut (1080 - 700) / 2 = 190 px de chaque cote, et elle
   n est posee qu a partir de 1200 px, largeur a laquelle le conteneur est
   deja plafonne : en dessous, le calcul deborderait. */
@media (min-width: 75rem) {
  .colonne-texte > .bande-sombre { margin-inline: -190px; padding-inline: 0; }
  .colonne-texte > .bande-sombre .cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 23. Numerotation : une section sans titre ne compte pas (16/09) -----
   Defaut signale par Chris. Sur Fiscal et juridique et sur Social et paie,
   le premier bloc est une section SANS h2 : elle porte les paragraphes de
   Jack repris de sa relecture du matin. Elle n affichait donc aucun numero,
   mais elle incrementait quand meme le compteur, et toute la page etait
   decalee d un rang : « Paie et declarations » s annoncait 02 alors qu elle
   est la premiere.
   La regle ne compte plus que les sections qui portent effectivement un
   titre, donc un numero visible. Le compteur et l affichage disent enfin la
   meme chose. */
.sections-numerotees > .section:not(:has(> h2)) { counter-increment: none; }

/* --- 24. La vignette de carte porte l illustration de la section (16/09) -
   Consigne de Chris : ce ne sont plus des pictogrammes mais l image de
   chacune des sections. Les quatre gravures existent deja dans assets/,
   ce sont celles des pages de mission. Elles sont cadrees en carre, sujet
   centre, sur le fond creme qui est deja le leur.
   2026-09-16, correction : la carte ne sert PAS la gravure de 1240x928 et de
   200 Ko pour un carre de 56 px. Quatre vignettes de 168x168 et d environ
   35 Ko sont derivees des memes gravures, recadrees au centre. Elles sont
   assez legeres pour se charger tout de suite, ce qui supprime au passage un
   faux defaut de recette : en chargement differe, quatre images situees en
   bas de page etaient encore vides au moment du controle et comptaient comme
   images cassees. */
.carte-icone { overflow: hidden; padding: 0; }
.carte-icone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Le carre passe de 40 a 56 px : une gravure a 40 px n est plus lisible. */
.carte-icone { width: 56px; height: 56px; background: var(--surface-tint); }
.carte-mission .carte-icone { width: 48px; height: 48px; }
.carte-mission .carte-icone img { width: 100%; height: 100%; }

/* v1.30 (27/09/2026) : les images passent dans un <picture> (WebP responsive).
   display: contents rend la mise en page identique a la v1.29 : l image reste
   l enfant direct de son conteneur pour tous les selecteurs existants. */
picture { display: contents; }