/* =====================================================================
   ALUREA — Système de design
   Direction artistique : éditorial, architectural, matière.
   Encre / Blanc / Laiton. Filets fins, grandes respirations,
   typographie à empattements pour le propos, sans-serif pour l'outil.
   ===================================================================== */

/* Polices hébergées sur le site : plus rapide, et aucune donnée envoyée à Google (RGPD). */
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-latin-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Manrope'; src: url(/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }

/* ------------------------------ Jetons ----------------------------- */
:root {
  /* Matières */
  --encre-900: #08131F;
  --encre-800: #0E2033;
  --encre-700: #163049;
  --encre-600: #22456A;
  --encre-400: #4E7398;
  --encre-200: #9DB5CC;

  --ivoire:    #F8FAFC;
  --papier:    #FFFFFF;
  --craie:     #FFFFFF;
  --sable:     #F2F5F8;
  --gris-100:  #E3E8EE;
  --gris-300:  #B3BCC7;
  --gris-500:  #66717E;

  --laiton:       #A97B34;
  --laiton-clair: #D2A55E;
  --laiton-pale:  #EEF2F7;
  /* L'ivoire chaud des documents imprimés (SABLE dans src/lib/documents.js) :
     le sceau s'en sert pour que l'écran et le PDF soient le même objet. */
  --parchemin:    #F6F2E9;

  --sauge:     #4B7A5B;
  --sauge-pale:#E3EFE6;
  --terre:     #B4603A;
  --terre-pale:#F7E7DE;
  --grenat:    #92322C;
  --grenat-pale:#F8E3E1;

  /* Rôles — thème clair par défaut */
  --fond:          var(--craie);
  --fond-eleve:    var(--craie);
  --fond-creux:    var(--sable);
  --texte:         var(--encre-900);
  --texte-doux:    #4A5A69;
  --texte-tenu:    var(--gris-500);
  --filet:         rgba(8, 19, 31, .10);
  --filet-fort:    rgba(8, 19, 31, .24);
  --accent:        var(--laiton);
  --accent-contraste: #FFFFFF;

  /* Typographie */
  --display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --texte-famille: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rythme */
  --r1: .25rem; --r2: .5rem;  --r3: .75rem; --r4: 1rem;
  --r5: 1.5rem; --r6: 2rem;   --r7: 3rem;   --r8: 4.5rem;
  --r9: 7rem;   --r10: 10rem;

  --rayon:    2px;
  --rayon-md: 4px;
  --rayon-lg: 8px;
  --rayon-pilule: 999px;

  --ombre-1: 0 1px 2px rgba(8,19,31,.05), 0 1px 1px rgba(8,19,31,.04);
  --ombre-2: 0 4px 16px rgba(8,19,31,.07), 0 1px 3px rgba(8,19,31,.05);
  --ombre-3: 0 18px 50px rgba(8,19,31,.13), 0 4px 12px rgba(8,19,31,.07);

  --gouttiere: clamp(1.25rem, 5vw, 4rem);
  --largeur: 1240px;
  --largeur-texte: 68ch;

  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}

/* Sections encre : on inverse les rôles, pas les composants. */
.encre {
  --fond:       var(--encre-900);
  --fond-eleve: var(--encre-800);
  --fond-creux: var(--encre-700);
  --texte:      var(--ivoire);
  --texte-doux: #A8BDD0;
  --texte-tenu: #6E8AA3;
  --filet:      rgba(255,255,255, .16);
  --filet-fort: rgba(255,255,255, .34);
  --accent:     var(--laiton-clair);
  --accent-contraste: var(--encre-900);
  background: var(--fond);
  color: var(--texte);
}

@media all { /* thème sombre uniquement sur demande explicite */
  :root[data-theme="dark"] {
    --fond:       var(--encre-900);
    --fond-eleve: var(--encre-800);
    --fond-creux: var(--encre-700);
    --texte:      var(--ivoire);
    --texte-doux: #A8BDD0;
    --texte-tenu: #6E8AA3;
    --filet:      rgba(255,255,255, .16);
    --filet-fort: rgba(255,255,255, .34);
    --accent:     var(--laiton-clair);
    --accent-contraste: var(--encre-900);
    --sauge-pale: rgba(75,122,91,.22);
    --terre-pale: rgba(180,96,58,.22);
    --grenat-pale: rgba(146,50,44,.22);
    --laiton-pale: rgba(210,165,94,.18);
    --parchemin:   rgba(210,165,94,.10);
  }
  :root[data-theme="dark"] .encre {
    --fond: var(--encre-800);
    --fond-eleve: var(--encre-700);
  }
}
:root[data-theme="dark"] {
  --fond: var(--encre-900); --fond-eleve: var(--encre-800); --fond-creux: var(--encre-700);
  --texte: var(--ivoire); --texte-doux: #A8BDD0; --texte-tenu: #6E8AA3;
  --filet: rgba(255,255,255,.16); --filet-fort: rgba(255,255,255,.34);
  --accent: var(--laiton-clair); --accent-contraste: var(--encre-900);
  --sauge-pale: rgba(75,122,91,.22); --terre-pale: rgba(180,96,58,.22);
  --grenat-pale: rgba(146,50,44,.22); --laiton-pale: rgba(210,165,94,.18);
}

/* ----------------------------- Réglages ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--texte-famille);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--laiton); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--rayon);
}

/* ---------------------------- Typographie -------------------------- */
.display, h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.034em;
  text-wrap: balance;
}

.t-mega   { font-size: clamp(2.5rem, 6.4vw, 5.2rem); line-height: 1.02; }
.t-geant  { font-size: clamp(2.05rem, 4.2vw, 3.5rem); }
.t-grand  { font-size: clamp(1.75rem, 3vw, 2.6rem); }
.t-moyen  { font-size: clamp(1.4rem, 2.2vw, 1.95rem); line-height: 1.18; }
.t-petit  { font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.3; }

h4, h5, h6 {
  font-family: var(--texte-famille);
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.3;
}
h4 { font-size: 1.1rem; }

.sourcil {
  font-family: var(--texte-famille);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--texte-tenu);
  display: flex;
  align-items: center;
  gap: var(--r3);
}
.sourcil::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.sourcil.nu::before { display: none; }

.chapo {
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  line-height: 1.6;
  color: var(--texte-doux);
  max-width: 56ch;
  text-wrap: pretty;
}

.numero {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--texte-tenu);
  font-variant-numeric: tabular-nums;
}

.chiffre {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

.souligne-laiton {
  background-image: linear-gradient(transparent 62%, color-mix(in oklab, var(--accent) 34%, transparent) 62%);
  background-repeat: no-repeat;
}

/* ------------------------------ Trame ------------------------------ */
.conteneur { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.conteneur-etroit { max-width: 820px; }
.conteneur-large { max-width: 1480px; }

.section { padding-block: clamp(3.5rem, 9vw, var(--r9)); }
.section-serree { padding-block: clamp(2.5rem, 6vw, var(--r8)); }

.grille { display: grid; gap: var(--r5); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-asym { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); }
@media (max-width: 900px) {
  .g2, .g3, .g4, .g-asym { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .g4-mobile-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.pile, .pile-1, .pile-2, .pile-3, .pile-4, .pile-5, .pile-6, .pile-7 { display: flex; flex-direction: column; }
.pile-2 > a, .pile-3 > a { width: fit-content; }
.pile-1 { gap: var(--r1); } .pile-2 { gap: var(--r2); } .pile-3 { gap: var(--r3); }
.pile-4 { gap: var(--r4); } .pile-5 { gap: var(--r5); } .pile-6 { gap: var(--r6); }
.pile-7 { gap: var(--r7); }
.rang { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.rang-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--r4); flex-wrap: wrap; }

.filet { height: 1px; background: var(--filet); border: 0; }
.filet-fort { height: 1px; background: var(--filet-fort); border: 0; }

/* ----------------------------- Boutons ----------------------------- */
.btn {
  --btn-fond: var(--texte);
  --btn-texte: var(--fond);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.6em;
  font-size: .92rem; font-weight: 600; letter-spacing: .005em;
  background: var(--btn-fond); color: var(--btn-texte);
  border: 1px solid var(--btn-fond);
  border-radius: var(--rayon-pilule);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition),
              border-color var(--transition), color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ombre-2); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-laiton { --btn-fond: var(--laiton); --btn-texte: #fff; }
.encre .btn-laiton { --btn-fond: var(--laiton-clair); --btn-texte: var(--encre-900); }
.btn-fantome { --btn-fond: transparent; --btn-texte: var(--texte); border-color: var(--filet-fort); }
.btn-fantome:hover { border-color: var(--texte); background: color-mix(in oklab, var(--texte) 6%, transparent); }
.btn-lien {
  background: none; border: 0; padding: .3em 0; color: var(--texte);
  font-weight: 600; font-size: .92rem; cursor: pointer;
  border-bottom: 1px solid var(--accent); border-radius: 0;
}
.btn-lien:hover { transform: none; box-shadow: none; color: var(--accent); }
.btn-lg { padding: 1.08em 2em; font-size: 1rem; }
.btn-sm { padding: .58em 1.05em; font-size: .82rem; }
.btn-bloc { width: 100%; }

.fleche { transition: transform var(--transition); }
.btn:hover .fleche { transform: translateX(3px); }

/* ------------------------------ Cartes ----------------------------- */
.carte {
  background: var(--fond-eleve);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  padding: clamp(1.25rem, 2.4vw, 2rem);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.carte-interactive { cursor: pointer; }
.carte-interactive:hover { border-color: var(--filet-fort); transform: translateY(-2px); box-shadow: var(--ombre-2); }
.carte-plate { background: transparent; border: 0; padding: 0; }
.carte-creuse { background: var(--fond-creux); }

.etiquette {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .3em .7em;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--rayon-pilule);
  background: var(--fond-creux); color: var(--texte-doux);
  border: 1px solid var(--filet);
  white-space: nowrap;
}
.etiquette-laiton  { background: var(--laiton-pale);  color: #6E4C16; border-color: transparent; }
.etiquette-sauge   { background: var(--sauge-pale);   color: #2E5539; border-color: transparent; }
.etiquette-terre   { background: var(--terre-pale);   color: #7E3D20; border-color: transparent; }
.etiquette-grenat  { background: var(--grenat-pale);  color: #6E211C; border-color: transparent; }
@media all { /* thème sombre uniquement sur demande explicite */
  :root[data-theme="dark"] .etiquette-laiton { color: var(--laiton-clair); }
  :root[data-theme="dark"] .etiquette-sauge  { color: #86C39A; }
  :root[data-theme="dark"] .etiquette-terre  { color: #E09A72; }
  :root[data-theme="dark"] .etiquette-grenat { color: #E58A83; }
}

/* ---------------------------- Formulaires -------------------------- */
.champ { display: flex; flex-direction: column; gap: .4rem; }
.champ > label {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texte-tenu);
}
.saisie, select.saisie, textarea.saisie {
  width: 100%;
  padding: .82em 1em;
  background: var(--fond-eleve);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-md);
  font-size: .96rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.saisie:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}
.saisie::placeholder { color: var(--texte-tenu); }
textarea.saisie { min-height: 7rem; resize: vertical; line-height: 1.6; }
.aide { font-size: .8rem; color: var(--texte-tenu); }
.erreur { font-size: .82rem; color: var(--grenat); }
@media all { /* thème sombre uniquement sur demande explicite */ :root[data-theme="dark"] .erreur { color: #E58A83; } }

/* --------------------------- Barres et jauges ---------------------- */
.jauge {
  height: 6px; width: 100%;
  background: var(--fond-creux);
  border-radius: var(--rayon-pilule);
  overflow: hidden;
}
.jauge > i {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 700ms cubic-bezier(.22,.8,.3,1);
}
.jauge-sauge > i { background: var(--sauge); }
.jauge-terre > i { background: var(--terre); }
.jauge-epaisse { height: 10px; }

/* Jauge segmentée — une case = une heure (Passeport 42 h) */
.segments { display: grid; grid-template-columns: repeat(42, 1fr); gap: 2px; }
.segments > i {
  aspect-ratio: 1 / 2.4;
  background: var(--fond-creux);
  border-radius: 1px;
  transition: background 300ms;
}
.segments > i.faite    { background: var(--sauge); }
.segments > i.encours  { background: var(--laiton-clair); }
.segments > i.deonto   { background: var(--encre-600); }
.segments > i.discrim  { background: var(--terre); }

/* ------------------------------ Divers ----------------------------- */
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.relatif { position: relative; }
.centre { text-align: center; }
.centre .sourcil, .centre .chapo { margin-inline: auto; }
.centre .sourcil { justify-content: center; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.media { overflow: hidden; border-radius: var(--rayon-lg); background: var(--fond-creux); position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media-repli {
  background:
    radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--laiton) 26%, transparent), transparent 60%),
    linear-gradient(160deg, var(--encre-700), var(--encre-900));
}

.anim .reveler { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1); }
.anim .reveler.vu { opacity: 1; transform: none; }

/* --------------------------- Barre de navigation ------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(14px);
  background: color-mix(in oklab, var(--fond) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.nav.collee { border-bottom-color: var(--filet); }
.nav-int { display: flex; align-items: center; justify-content: space-between; gap: var(--r5); height: 72px; }
.nav-liens { display: flex; align-items: center; gap: var(--r5); }
.nav-liens a { font-size: .9rem; font-weight: 500; text-decoration: none; color: var(--texte-doux); transition: color var(--transition); }
.nav-liens a:hover { color: var(--texte); }
@media (max-width: 880px) { .nav-liens.masquable { display: none; } }

.logo { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--texte); }
.logo-marque { width: 2.15rem; height: 2.15rem; flex: none; margin-top: -3px; }
.logo span { align-self: center; }
.logo b {
  font-family: var(--display); font-weight: 700; font-size: 1.12rem;
  letter-spacing: .16em;
}
.logo span { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-tenu); }

/* ------------------------------- Pied ------------------------------ */
.pied { border-top: 1px solid var(--filet); padding-block: var(--r7) var(--r6); }
.pied a { font-size: .875rem; color: var(--texte-doux); text-decoration: none; }
.pied a:hover { color: var(--texte); }

/* ---------------------------- Utilitaires -------------------------- */
.doux { color: var(--texte-doux); }
.tenu { color: var(--texte-tenu); }
.laiton { color: var(--accent); }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: -.01em; }
.petit { font-size: .875rem; }
.minus { font-size: .78rem; }
.gras { font-weight: 600; }
.tabulaire { font-variant-numeric: tabular-nums; }
.max-texte { max-width: var(--largeur-texte); }
.pleine-hauteur { min-height: 100svh; }
.sans-liste { list-style: none; padding: 0; margin: 0; }
.cache { display: none !important; }
@media (max-width: 720px) { .cache-mobile { display: none !important; } }
@media (min-width: 721px) { .cache-bureau { display: none !important; } }


/* ======================= Mobile : menu et barre d'onglets ======================= */
@media (max-width: 560px) {
  .nav .logo span { display: none; }
  .nav-int { gap: var(--r3); }
  .nav .btn-sm { padding: .55em .95em; }
}
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--filet-fort); border-radius: 50%;
          background: transparent; color: inherit; cursor: pointer; place-items: center; flex: none; }
.burger i, .burger i::before, .burger i::after { display: block; width: 16px; height: 1.5px; background: currentColor;
          position: relative; transition: transform .3s ease, background .3s ease; content: ''; }
.burger i::before { position: absolute; top: -5px; } .burger i::after { position: absolute; top: 5px; }
@media (max-width: 880px) { .nav:has(.nav-liens.masquable) .burger { display: grid; } }

.volet { position: fixed; inset: 0; z-index: 1000; background: var(--encre-900); color: #fff;
         display: flex; flex-direction: column; gap: 1.5rem;
         padding: 0 var(--gouttiere) max(1.6rem, env(safe-area-inset-bottom));
         overflow-y: auto; overscroll-behavior: contain;
         opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
.menu-ouvert .volet { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.menu-ouvert body { position: fixed; left: 0; right: 0; overflow: hidden; }
.volet-haut { display: flex; align-items: center; justify-content: space-between; height: 72px; flex: none;
              border-bottom: 1px solid rgba(255,255,255,.12); }
.volet-haut .logo, .volet-haut .logo b { color: #fff; }
.volet-fermer { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent;
                color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.volet nav { display: flex; flex-direction: column; flex: 1; padding-top: .5rem; }
.volet nav a { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-size: clamp(1.3rem, 5.4vw, 1.6rem); line-height: 1.2; color: #fff;
               text-decoration: none; padding: .95rem 0; border-bottom: 1px solid rgba(255,255,255,.1);
               transform: translateY(12px); opacity: 0; transition: transform .5s cubic-bezier(.2,.8,.3,1), opacity .5s; }
.menu-ouvert .volet nav a { transform: none; opacity: 1; }
.volet nav a:nth-child(2) { transition-delay: .04s; } .volet nav a:nth-child(3) { transition-delay: .08s; }
.volet nav a:nth-child(4) { transition-delay: .12s; } .volet nav a:nth-child(5) { transition-delay: .16s; }
.volet nav a:nth-child(6) { transition-delay: .2s; }
.volet .volet-pied { display: grid; gap: 1rem; flex: none; }
.volet .volet-pied p { font-size: .8rem; color: rgba(255,255,255,.55); }

/* Barre d'onglets de l'application (mobile) */
.onglets-app { display: none; }
@media (max-width: 760px) {
  .onglets-app { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
                 background: color-mix(in oklab, var(--fond) 92%, transparent); backdrop-filter: saturate(180%) blur(16px);
                 border-top: 1px solid var(--filet); padding: .35rem .4rem max(.35rem, env(safe-area-inset-bottom)); }
  .onglets-app a { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .45rem 0 .3rem;
                   font-size: .66rem; font-weight: 600; letter-spacing: .02em; color: var(--texte-tenu); text-decoration: none; border-radius: 12px; }
  .onglets-app a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .onglets-app a[aria-current="page"] { color: var(--texte); }
  .onglets-app a[aria-current="page"] svg { stroke: var(--accent); }
  body.avec-onglets { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.avec-onglets .pied { display: none; }
  /* Dans l'application sur téléphone, la navigation est en bas : la barre du haut défile avec la page. */
  body.avec-onglets > .nav { position: relative; }
  body.avec-onglets .compteur { top: 0; }
  body.avec-onglets #annonces { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* Filtres défilants sur mobile */
@media (max-width: 640px) {
  .defile-mobile { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gouttiere) * -1);
                   padding-inline: var(--gouttiere); scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .defile-mobile::-webkit-scrollbar { display: none; }
  .defile-mobile > * { flex: none; scroll-snap-align: start; }
}

/* Confort tactile */
@media (hover: none) { .btn, .filtre, .onglet { min-height: 44px; } }
input, select, textarea { font-size: max(16px, 1em); }  /* évite le zoom automatique sur iPhone */
@media (max-width: 760px) { body.avec-onglets .burger { display: none !important; } }
@media (max-width: 560px) { .nav:has(.nav-liens.masquable) .nav-int > a.btn { display: none; } }

/* ============================ Coach : chat ============================ */
.chat { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.chat-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: 1rem; overscroll-behavior: contain; }
.chat-ligne { display: flex; gap: .6rem; align-items: flex-end; max-width: 100%; }
.chat-ligne.moi { justify-content: flex-end; }
.chat-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--encre-900); color: #fff; display: grid; place-items: center; }
.chat-avatar svg { width: 17px; height: 17px; }
.chat-avatar.grand { width: 40px; height: 40px; } .chat-avatar.grand svg { width: 22px; height: 22px; }
.chat-bulle { max-width: min(84%, 620px); padding: .75rem 1rem; border-radius: 18px; font-size: .93rem; line-height: 1.6;
              background: var(--fond-creux); color: var(--texte); border-bottom-left-radius: 6px; overflow-wrap: anywhere; }
.chat-bulle > * + * { margin-top: .55em; }
.chat-bulle ul, .chat-bulle ol { padding-left: 1.2em; }
.chat-bulle strong { font-weight: 650; }
.chat-ligne.moi .chat-bulle { background: var(--encre-900); color: #fff; border-bottom-left-radius: 18px; border-bottom-right-radius: 6px; }
.chat-sources { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.chat-source { font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--texte-doux); background: var(--fond);
               border: 1px solid var(--filet); border-radius: 999px; padding: .25rem .6rem; }
.chat-source:hover { border-color: var(--accent); color: var(--texte); }
.chat-retour { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: .74rem; color: var(--texte-tenu); }
.chat-retour button { border: 1px solid var(--filet-fort); background: transparent; border-radius: 999px; padding: .15rem .6rem; font-size: .72rem; cursor: pointer; color: var(--texte-doux); }
.chat-points { display: flex; gap: .3rem; padding: .95rem 1rem; }
.chat-points i { width: 7px; height: 7px; border-radius: 50%; background: var(--texte-tenu); animation: chat-point 1.2s infinite ease-in-out; }
.chat-points i:nth-child(2) { animation-delay: .15s; } .chat-points i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-point { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.chat-bas { border-top: 1px solid var(--filet); padding: .7rem 1rem max(.8rem, env(safe-area-inset-bottom)); background: var(--fond); }
.chat-sugg { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .6rem; scrollbar-width: none; }
.chat-sugg::-webkit-scrollbar { display: none; }
.chat-sugg.replie { display: none; }
.chat-sugg button { flex: none; font-size: .8rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--filet-fort);
                    background: var(--fond); color: var(--texte-doux); cursor: pointer; }
.chat-sugg button:hover { border-color: var(--accent); color: var(--texte); }
.chat-form { display: flex; gap: .5rem; align-items: flex-end; border: 1px solid var(--filet-fort); border-radius: 22px; padding: .35rem .35rem .35rem 1rem; background: var(--fond-eleve); }
.chat-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
.chat-saisie { flex: 1; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: max(16px, .95rem); line-height: 1.45; padding: .45rem 0; max-height: 160px; color: var(--texte); }
.chat-envoyer { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-envoyer svg { width: 20px; height: 20px; }
.chat-envoyer:disabled { opacity: .5; }
.chat-mention { font-size: .72rem; color: var(--texte-tenu); margin-top: .5rem; }
/* L'avis de transparence : lisible sans crier, permanent sans encombrer.
   Il dit à l'apprenant qu'il écrit à une machine — article 50 du règlement
   européen sur l'IA, applicable depuis le 2 août 2026. */
.chat-avis {
  margin: 0; padding: .7rem .9rem; font-size: .76rem; line-height: 1.55;
  color: var(--texte-doux); background: var(--fond-creux, #f6f3ec);
  border-bottom: 1px solid var(--filet);
}
.chat-avis b { color: var(--texte); font-weight: 600; }
.chat-humain { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* Bulle flottante + panneau */
.coach-flottant { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; align-items: center; gap: .6rem;
                  padding: .45rem 1.1rem .45rem .45rem; border-radius: 999px; border: 0; background: var(--encre-900); color: #fff;
                  box-shadow: var(--ombre-3); cursor: pointer; font-weight: 600; font-size: .9rem; }
.coach-flottant-icone { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); display: grid; place-items: center; }
.coach-flottant-icone svg { width: 20px; height: 20px; }
.coach-ouvert .coach-flottant { opacity: 0; pointer-events: none; }
.coach-panneau { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; width: min(420px, calc(100vw - 2.5rem)); height: min(640px, calc(100svh - 2.5rem));
                 background: var(--fond); border: 1px solid var(--filet); border-radius: 20px; box-shadow: var(--ombre-3);
                 display: flex; flex-direction: column; overflow: hidden;
                 opacity: 0; transform: translateY(16px) scale(.98); visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.coach-panneau.ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
.coach-panneau-haut { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--filet); }
.coach-panneau-haut .gras { font-size: .95rem; }
.coach-panneau-fermer { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--filet-fort); background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--texte); }
.coach-panneau-chat { flex: 1; min-height: 0; }
.point-vert { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sauge); margin-right: .4rem; vertical-align: 1px; }
@media (max-width: 760px) {
  .coach-flottant { bottom: calc(80px + env(safe-area-inset-bottom)); right: 1rem; padding: .4rem; }
  .coach-flottant-texte { display: none; }
  .coach-panneau { inset: 0; width: auto; height: auto; border-radius: 0; border: 0; z-index: 1000; }
  .coach-ouvert body { overflow: hidden; }
}
@media (max-width: 760px) { body.avec-onglets .coach-flottant { display: none; } }
/* Un bouton ne doit jamais déborder de l'écran : sur téléphone, les libellés longs passent à la ligne. */
.btn { max-width: 100%; }
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; line-height: 1.3; } }

/* ============================ Fenêtres ============================ */
.fenetre-fond { position: fixed; inset: 0; z-index: 1300; background: rgba(8,19,31,.5); backdrop-filter: blur(4px);
                display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity .2s ease; }
.fenetre-fond.vu { opacity: 1; }
.fenetre { position: relative; width: min(460px, 100%); max-height: calc(100svh - 2rem); overflow-y: auto; background: var(--fond);
           border-radius: 20px; padding: 1.8rem 1.6rem 1.5rem; box-shadow: var(--ombre-3); transform: translateY(10px) scale(.98); transition: transform .2s ease; }
.fenetre.large { width: min(640px, 100%); }
.fenetre-fond.vu .fenetre { transform: none; }
.fenetre-x { position: absolute; top: .9rem; right: .9rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--filet-fort);
             background: transparent; font-size: 1.3rem; cursor: pointer; color: var(--texte); }
.fenetre-titre { font-family: var(--display); font-weight: 650; font-size: 1.35rem; letter-spacing: -.02em; padding-right: 2.5rem; line-height: 1.2; }
.fenetre-texte { font-size: .92rem; color: var(--texte-doux); margin-top: .6rem; line-height: 1.55; }
.fenetre-champs { display: grid; gap: .9rem; margin-top: 1.2rem; }
.fenetre-case { display: flex; gap: .6rem; align-items: flex-start; font-size: .86rem; color: var(--texte-doux); line-height: 1.45; cursor: pointer; }
.fenetre-case input { margin-top: .2rem; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.fenetre-case a { color: var(--accent); font-weight: 600; }
.fenetre .erreur { margin-top: .8rem; min-height: 1em; }
.fenetre-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
@media (max-width: 480px) { .fenetre-actions .btn { flex: 1 1 100%; } .fenetre-fond { align-items: end; padding: 0; } .fenetre { border-radius: 20px 20px 0 0; padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } }
.btn-danger { --btn-fond: var(--grenat); --btn-texte: #fff; }

/* ===================== Sceau d'enregistrement =====================
   Le cartouche qui porte la déclaration d'activité.

   Parti pris : il cite les DOCUMENTS. Le double filet laiton, l'ivoire,
   le numéro en chasse fixe tabulaire sont exactement ceux de la
   convention et de l'attestation en PDF. Le visiteur qui reçoit son
   attestation retrouve le même objet — c'est ce qui fait qu'un sceau
   est cru, bien plus qu'un logo de plus.

   Ce qu'il ne fait PAS, et c'est délibéré : aucune reprise des symboles
   de la République, aucun bleu-blanc-rouge, aucune forme évoquant un
   cachet officiel. L'enregistrement n'est pas un agrément, et le dessin
   ne doit pas dire le contraire de la mention qu'il porte.
   ================================================================= */
.sceau {
  position: relative; display: grid; gap: 1.4rem; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.6rem 1.7rem; background: var(--parchemin);
  border-top: 2px solid var(--laiton); border-bottom: 1px solid var(--filet);
  border-radius: var(--rayon-md);
}
/* Le second filet, fin, posé sous le premier : c'est le double filet des
   documents, et il ne se voit que de près — comme sur un papier gravé. */
.sceau::before { content: ''; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: var(--laiton-clair); opacity: .55; }
@media (min-width: 860px) { .sceau { grid-template-columns: auto 1px minmax(0, 1fr); gap: 1.8rem; } }

.sceau-filet { display: none; align-self: stretch; background: var(--filet); }
@media (min-width: 860px) { .sceau-filet { display: block; } }

.sceau-num { text-align: left; }
.sceau-num .sourcil { color: #6E4C16; }
.sceau-num b {
  display: block; margin-top: .45rem; font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem); letter-spacing: .04em;
  font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap;
}
/* « N° » n'est pas un chiffre : le laisser en chasse fixe le fait peser
   autant que le numéro lui-même, et c'est le numéro qu'on vient lire. */
.sceau-num b i {
  font-family: var(--texte-famille); font-style: normal; font-weight: 600;
  font-size: .6em; letter-spacing: .02em; color: var(--texte-doux);
  margin-right: .4em; vertical-align: .12em;
}
.sceau-num > span { display: block; margin-top: .3rem; font-size: .78rem; color: var(--texte-doux); }

.sceau-dit { font-size: .92rem; line-height: 1.55; color: var(--texte-doux); }
.sceau-dit b { color: var(--texte); font-weight: 650; }
/* La mention obligatoire. Elle est plus discrète que le reste, jamais
   cachée : la réduire à l'invisible serait la retirer. */
.sceau-note { margin-top: .7rem; font-size: .76rem; line-height: 1.45; color: var(--texte-tenu); }

/* La version d'une ligne : pieds de page, et partout où le cartouche
   complet serait du bruit. Même contenu, même ordre, moins de place. */
.sceau-ligne {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  font-size: .8rem; line-height: 1.5; color: var(--texte-tenu);
  padding-top: .9rem; border-top: 1px solid var(--filet);
}
.sceau-ligne b { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texte-doux); letter-spacing: .03em; }
.sceau-ligne em { font-style: normal; opacity: .82; }

/* ================== Le renouvellement, face à face ================
   La réassurance que cherche le visiteur tient en une question : « et
   le jour où ma CCI me demande des comptes, j'ai quoi ? » On y répond
   par une CORRESPONDANCE — ce qui est exigé à gauche, ce qui est remis
   à droite — plutôt que par un logo emprunté.

   Le parti pris tient en une phrase : la CCI est nommée comme
   DESTINATAIRE, jamais comme caution. Aucune marque de tiers n'entre
   sur cette page, et le dessin ne doit rien suggérer que le texte ne
   dise. Deux colonnes, un filet laiton entre elles, la même famille que
   le sceau d'enregistrement — c'est la continuité qui rassure, pas
   l'emprunt.
   ================================================================= */
.face-a-face { display: grid; gap: 0; border: 1px solid var(--filet); border-radius: var(--rayon-md); overflow: hidden; }
@media (min-width: 820px) { .face-a-face { grid-template-columns: 1fr 1fr; } }

.face-col { padding: 1.7rem 1.6rem 1.8rem; }
.face-col + .face-col { border-top: 1px solid var(--filet); }
@media (min-width: 820px) { .face-col + .face-col { border-top: 0; border-left: 1px solid var(--filet); } }
/* La colonne de gauche est l'exigence : fond neutre, ton administratif.
   Celle de droite est la réponse : le parchemin des documents. */
.face-exige { background: var(--fond-creux); }
.face-remis { background: var(--parchemin); }

.face-col h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; margin: .5rem 0 0; }
.face-col .sourcil { color: var(--texte-tenu); }
.face-remis .sourcil { color: #6E4C16; }
.face-col p.minus { margin-top: .4rem; color: var(--texte-doux); }

.face-liste { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .75rem; }
.face-liste li { position: relative; padding-left: 1.8rem; font-size: .9rem; line-height: 1.5; color: var(--texte-doux); }
.face-liste li b { color: var(--texte); font-weight: 600; }
/* Le repère : un trait, pas une coche. Une coche verte sur la colonne
   des exigences laisserait croire qu'elles sont déjà satisfaites. */
.face-liste li::before { content: ''; position: absolute; left: 0; top: .72em; width: 1.15rem; height: 1px; background: var(--filet-fort); }
.face-remis .face-liste li::before { background: var(--accent); height: 2px; top: .68em; }


/* La phrase de conformité dans le hero : un filet laiton à gauche, le
   registre de la promesse. Elle est sur fond sombre, d'où les valeurs. */
.hero-conforme {
  margin-top: 1.6rem; padding-left: 1rem; max-width: 58ch;
  border-left: 2px solid var(--laiton-clair);
  font-size: .95rem; line-height: 1.6; color: #C6D3DF;
}
.hero-conforme b { color: #FFFFFF; font-weight: 600; }
.hero-conforme em { display: block; margin-top: .35rem; font-style: normal; font-size: .82rem; color: #8FA3B6; }
.hero-conforme em b { font-family: var(--mono); font-weight: 600; color: var(--laiton-clair);
                      letter-spacing: .05em; font-variant-numeric: tabular-nums; }


/* ---------------- v121 : contacts, WhatsApp, avis, organisme ---------------- */
.contacts { display: flex; flex-wrap: wrap; gap: .6rem; }
.contact-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .55rem 1rem; border-radius: var(--rayon-pilule, 999px);
  border: 1px solid var(--filet-fort, rgba(255,255,255,.3)); background: var(--fond-eleve, #fff); color: var(--texte, #08131F); font-weight: 600; font-size: .9rem; text-decoration: none; }
.contact-btn svg { width: 20px; height: 20px; flex: none; }
.encre .contact-btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.28); }
.contact-btn:focus-visible, .wa-flottant:focus-visible { outline: 3px solid var(--accent, #C9A24B); outline-offset: 2px; }
.contact-btn .num { font-weight: 500; opacity: .85; }
.wa-flottant { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 6px 22px rgba(8,19,31,.22); border: 1px solid rgba(8,19,31,.08); }
.wa-flottant svg { width: 30px; height: 30px; }
@media (max-width: 600px) { .wa-flottant { width: 46px; height: 46px; right: 12px; } .wa-flottant svg { width: 26px; height: 26px; } }
.etoiles { display: inline-flex; gap: 1px; vertical-align: -3px; }
.avis-resume { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .9rem; }
.avis-grille { display: grid; gap: var(--r4, 1rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.avis-carte { margin: 0; }
.avis-pastille { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fond-creux, #F3F5F8); font-weight: 700; color: var(--accent, #C9A24B); }
.identite-liste { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.2rem; font-size: .92rem; }
.identite-liste dt { color: var(--texte-tenu, #6B7785); }
.identite-liste dd { margin: 0; font-weight: 600; }
@media (max-width: 560px) { .identite-liste { grid-template-columns: 1fr; } .identite-liste dd { margin-bottom: .4rem; } }

/* v121 — le numéro de déclaration ressort en doré (posé par le serveur). */
.nda-or { color: var(--accent); font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hero .nda-or, header .nda-or, .section-sombre .nda-or { color: var(--laiton-clair); }