/* ═══════════════════════════════════════════════════════════════════════
   PORTAIL-SUBPAGE.CSS — Styles de contenu consolidés pour les sous-pages SDE

   Charger APRÈS portail-unifie.css (en-tête / pied / navigation).
   Contient les tokens de design et tous les styles de sections de contenu
   extraits des anciens fichiers CSS. Remplace le chargement de 9 fichiers
   séparés par un seul fichier consolidé.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════ DESIGN SYSTEM TOKENS ═══════ */
/* ═══════════ DESIGN SYSTEM SDE — HARMONISÉ avec l'application ═══════════ */
:root {
  /* Couleurs institutionnelles — palette unifiée SDE */
  --nuit: #0f1e3d;
  --nuit-2: #1b2f5b;
  --nuit-3: #2c4377;
  --or: #e2c26a;
  --or-lum: #e2c26a;
  --or-marque: #b8901f;
  --or-sombre: #85650f;
  --ivoire: #eef0f5;
  --bordeaux: #641D2D;

  /* Surfaces & texte — Mode sombre (défaut) */
  --fond: #0a0f1d;
  --surface: #121a2e;
  --surface-2: #19233b;
  --texte: #e8ebf4;
  --texte-2: #a4adc4;
  --gris: #b8c1d8;
  --bordure: rgba(43,67,119,.4);
  --voile: rgba(10,15,29,.85);

  /* Gradient tokens */
  --grad-hero: linear-gradient(160deg, #0a0f1d 0%, #121a2e 50%, #0a0f1d 100%);
  --grad-or: linear-gradient(135deg, #b8901f, #e2c26a);
  --grad-bordeaux: linear-gradient(135deg, #641D2D, #8B2E3D);
  --ombre: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
  --ombre-carte: 0 2px 12px rgba(0,0,0,.3);

  /* Typographie — unifiée avec l'app SDE */
  --f-titre: "Saira Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --f-texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-marque: "Saira Stencil One", "Saira Condensed", Impact, "Arial Narrow", sans-serif;

  /* Spatial */
  --r: 10px;
  --r-lg: 20px;
  --gutter: 16px;
  --max: 1200px;

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --duree: .35s;
}

/* Mode clair — aligné sur l'app SDE */
:root[data-theme="light"] {
  --or: #85650f;
  --or-lum: #b8901f;
  --fond: #eef0f5;
  --surface: #ffffff;
  --surface-2: #f3f5f9;
  --texte: #161e35;
  --texte-2: #535c75;
  --gris: #535c75;
  --bordure: rgba(221,225,234,.6);
  --voile: rgba(238,240,245,.85);
  --grad-hero: linear-gradient(160deg, #eef0f5 0%, #ffffff 50%, #eef0f5 100%);
  --ombre: 0 1px 2px rgba(15,30,61,.06), 0 12px 32px rgba(15,30,61,.14);
  --ombre-carte: 0 2px 12px rgba(15,30,61,.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --or: #85650f;
    --or-lum: #b8901f;
    --fond: #eef0f5;
    --surface: #ffffff;
    --surface-2: #f3f5f9;
    --texte: #161e35;
    --texte-2: #535c75;
    --gris: #535c75;
    --bordure: rgba(221,225,234,.6);
    --voile: rgba(238,240,245,.85);
    --grad-hero: linear-gradient(160deg, #eef0f5 0%, #ffffff 50%, #eef0f5 100%);
    --ombre: 0 1px 2px rgba(15,30,61,.06), 0 12px 32px rgba(15,30,61,.14);
    --ombre-carte: 0 2px 12px rgba(15,30,61,.08);
  }
}

/* ═══════ BASE ═══════ */
/* ═══════════ BASE ═══════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--f-texte); font-size: 16px; line-height: 1.7; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background var(--duree) var(--ease), color var(--duree) var(--ease); }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--or); text-decoration: none; transition: color var(--duree) var(--ease); }
a:hover, a:focus-visible { color: var(--or-lum); }
button { font: inherit; border: none; cursor: pointer; background: none; color: inherit; }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

/* Skip link */
.skip { position: absolute; top: -100%; left: var(--gutter); z-index: 9999; padding: 8px 16px; background: var(--or); color: var(--nuit); border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 8px; }

/* Enveloppe */
.enveloppe { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: var(--r); font-weight: 600; font-size: .95rem; line-height: 1.4; transition: all var(--duree) var(--ease); white-space: nowrap; }
.bouton svg { width: 16px; height: 16px; flex-shrink: 0; }
.b-or { background: var(--grad-or); color: var(--nuit); }
.b-or:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(184,144,31,.4); color: var(--nuit); }
.b-contour { border: 1.5px solid var(--or); color: var(--or); background: transparent; }
.b-contour:hover { background: var(--or); color: var(--nuit); }
.b-nuit { background: var(--nuit); color: var(--ivoire); border: 1.5px solid var(--bordure); }
.b-nuit:hover { background: var(--surface-2); }
.b-ligne { color: var(--or); padding-left: 0; padding-right: 0; }
.b-ligne:hover { color: var(--or-lum); }
.b-bordeaux { background: var(--grad-bordeaux); color: #fff; }
.b-bordeaux:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ═══════════ SECTION COMMON ═══════════ */
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section:nth-child(even) { background: var(--surface); }
.tete-section { text-align: center; margin-bottom: 40px; }
.surtitre { font-family: var(--f-titre); font-size: .85rem; letter-spacing: .15em; text-transform: uppercase; color: var(--or); margin-bottom: 8px; font-weight: 600; }
.chapo { color: var(--texte-2); font-size: 1.05rem; max-width: 680px; margin: 12px auto 0; }

/* ═══════ HERO ═══════ */
/* ═══════════ HERO ═══════════ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--grad-hero); padding: 100px var(--gutter) 60px; }
.hero-fond { position: absolute; inset: 0; }
.hero-fond picture { display: contents; }
.hero-fond img { width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hero-voile { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,18,27,.7) 0%, rgba(16,18,27,.4) 40%, rgba(16,18,27,.85) 100%); }
:root[data-theme="light"] .hero-voile { background: linear-gradient(to bottom, rgba(247,244,237,.7) 0%, rgba(247,244,237,.4) 40%, rgba(247,244,237,.85) 100%); }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-contenu { position: relative; z-index: 2; text-align: center; max-width: 900px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; background: rgba(184,144,31,.12); border: 1px solid rgba(184,144,31,.25); border-radius: 100px; font-size: .8rem; font-weight: 500; color: var(--or); margin-bottom: 24px; backdrop-filter: blur(8px); }
.hero-badge .pulse { width: 8px; height: 8px; background: var(--or); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.5); } }
.hero h1 { font-size: clamp(2rem, 6vw, 3.8rem); font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; margin-bottom: 20px; }
.hero h1 .accent { background: var(--grad-or); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sous { font-size: clamp(1rem, 2.5vw, 1.2rem); color: var(--texte-2); max-width: 700px; margin: 0 auto 32px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.hero-verset { margin-top: 12px; min-height: 70px; }
.hero-verset blockquote { font-style: italic; color: var(--texte-2); font-size: .95rem; transition: opacity .4s var(--ease); max-width: 600px; margin: 0 auto; }
.hero-verset cite { display: block; font-style: normal; color: var(--or); font-size: .8rem; margin-top: 6px; font-family: var(--f-titre); letter-spacing: .08em; }
.hero-points { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.hero-points { gap: 0 !important; }
.hero-points button { width: 24px; height: 24px; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.hero-points button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gris); transition: all .25s var(--ease); }
.hero-points button[aria-pressed="true"] { width: 32px; }
.hero-points button[aria-pressed="true"]::before { background: var(--or); width: 22px; border-radius: 4px; }

/* Scroll indicator */
.scroll-ind { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--gris); font-size: .75rem; animation: rebond 2s ease-in-out infinite; }
.scroll-ind svg { width: 20px; height: 20px; }
@keyframes rebond { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* ═══════ BENTO GRID ═══════ */
/* ═══════════ BENTO GRID ═══════════ */
.bento { padding: clamp(48px, 8vw, 80px) 0; }
.bento-grille { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 16px; }
.bento-carte { position: relative; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; overflow: hidden; transition: all var(--duree) var(--ease); cursor: pointer; text-decoration: none; color: var(--texte); display: flex; flex-direction: column; gap: 12px; }
.bento-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre); border-color: var(--or); color: var(--texte); }
.bento-carte:hover .bento-fleche { transform: translate(4px, -4px); color: var(--or); }
.bento-icone { width: 44px; height: 44px; border-radius: 10px; background: rgba(184,144,31,.12); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.bento-carte h3 { font-size: 1.1rem; }
.bento-carte p { font-size: .9rem; color: var(--texte-2); flex: 1; }
.bento-fleche { margin-top: auto; align-self: flex-end; width: 20px; height: 20px; color: var(--gris); transition: all .25s var(--ease); }
.bento-carte.grand { grid-column: span 2; }
@media (max-width: 768px) {
  .bento-grille { grid-template-columns: 1fr 1fr; }
  .bento-carte.grand { grid-column: span 2; }
}
@media (max-width: 500px) {
  .bento-grille { grid-template-columns: 1fr; }
  .bento-carte.grand { grid-column: span 1; }
}

/* ═══════ RÉSUMÉ & ÉGLISES ═══════ */
/* ═══════════ RÉSUMÉ (3 cartes stats) ═══════════ */
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; }
.resume-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; transition: all var(--duree) var(--ease); text-align: center; }
.resume-carte:hover { border-color: var(--or); transform: translateY(-2px); box-shadow: var(--ombre-carte); }
.resume-carte .rc-icone { font-size: 2rem; margin-bottom: 10px; }
.resume-carte h3 { font-size: 1.05rem; margin-bottom: 6px; }
.resume-carte p { font-size: .9rem; color: var(--texte-2); }

/* ═══════════ ÉGLISES PARTENAIRES ═══════════ */
.eglises { background: var(--surface); padding: clamp(40px, 6vw, 60px) 0; }
.eglises-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; text-align: center; }
.eglises-liste div { padding: 20px 16px; border-radius: var(--r); background: var(--surface-2); }
.eglises-liste h3 { font-size: .95rem; color: var(--or); font-weight: 600; }
.eglises-liste small { color: var(--gris); font-size: .8rem; }


/* ═══════ IN FIRE ═══════ */
/* ═══════════ IN FIRE ═══════════ */
.infire { background: radial-gradient(ellipse at 30% 60%, rgba(100,29,45,.4), transparent 70%), var(--nuit); color: var(--ivoire); padding: clamp(60px, 10vw, 100px) 0; }
:root[data-theme="light"] .infire { background: radial-gradient(ellipse at 30% 60%, rgba(100,29,45,.15), transparent 70%), var(--surface-2); color: var(--texte); }
.infire-contenu { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.infire h2 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 10px; }
.infire h2 span { background: var(--grad-or); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.infire .theme { font-size: 1.05rem; color: var(--or-lum); font-style: italic; margin-bottom: 16px; }
.infire p { color: var(--texte-2); }
.decompte { display: flex; gap: 16px; margin: 24px 0; }
.decompte-cel { text-align: center; }
.decompte-cel b { display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); font-family: var(--f-titre); color: var(--or); }
.decompte-cel small { font-size: .75rem; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.if-orateurs { margin-top: 16px; }
.if-orateurs h3 { font-size: 1rem; margin-bottom: 8px; }
.if-orateurs li { color: var(--texte-2); font-size: .95rem; margin-bottom: 4px; padding-left: 16px; position: relative; }
.if-orateurs li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--or); }
.if-lieu { margin-top: 16px; padding: 16px; background: rgba(184,144,31,.08); border: 1px solid rgba(184,144,31,.15); border-radius: var(--r); }
.if-lieu h3 { font-size: .95rem; margin-bottom: 6px; }
.if-lieu p { font-size: .9rem; }
.if-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.if-aside { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; }
.if-aside h3 { font-size: 1.05rem; margin-bottom: 12px; }
.if-aside form { display: flex; flex-direction: column; gap: 12px; }
.if-aside label { font-size: .9rem; color: var(--texte-2); }
.if-aside input, .if-aside select { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte); font-size: 1rem; font-family: var(--f-texte); min-height: 44px; }
.if-aside input:focus, .if-aside select:focus { outline: 2px solid var(--or); outline-offset: 2px; border-color: var(--or); }
.if-faq { margin-top: 20px; }
.if-faq details { border-bottom: 1px solid var(--bordure); }
.if-faq summary { padding: 12px 0; font-weight: 500; font-size: .95rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.if-faq summary::after { content: "+"; color: var(--or); font-size: 1.2rem; transition: transform .25s; }
.if-faq details[open] summary::after { content: "−"; }
.if-faq p { padding: 0 0 12px; font-size: .9rem; color: var(--texte-2); }
#if-prog { margin-top: 16px; }
#if-prog-l { padding-left: 16px; font-size: .9rem; color: var(--texte-2); }
#if-prog-l li { margin-bottom: 4px; }
.v-erreur { color: var(--bordeaux); font-size: .85rem; }
.yango-aide { font-size: .8rem; color: var(--gris); margin-top: 4px; }
@media (max-width: 768px) { .infire-contenu { grid-template-columns: 1fr; } }

/* Barre IN FIRE mobile */
.barre-if { position: fixed; bottom: 70px; left: 0; right: 0; z-index: 90; background: var(--bordeaux); padding: 10px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.barre-if span { font-size: .85rem; color: #fff; font-weight: 600; }
.barre-if a { font-size: .8rem; }
@media (min-width: 769px) { .barre-if { display: none !important; } }


/* ═══════ AGENDA ═══════ */
/* ═══════════ AGENDA ═══════════ */
.agenda-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; justify-content: center; }
.agenda-filtres button { padding: 8px 16px; border-radius: 100px; font-size: .85rem; font-weight: 500; color: var(--texte-2); background: var(--surface-2); border: 1px solid transparent; transition: all .2s var(--ease); }
.agenda-filtres button.actif { background: var(--or); color: var(--nuit); border-color: var(--or); }
.agenda-filtres button:hover:not(.actif) { border-color: var(--bordure); color: var(--or); }

/* ═══════ MOUVEMENT (VMI, valeurs, 5 axes) ═══════ */
/* ═══════════ MOUVEMENT (VMI, valeurs) ═══════════ */
.vmi { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px; }
.vmi-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; transition: all var(--duree) var(--ease); }
.vmi-carte:hover { border-color: var(--or); transform: translateY(-2px); }
.vmi-carte h3 { color: var(--or); font-size: 1rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.vmi-carte p { font-size: .95rem; color: var(--texte-2); }
.nom-sde { text-align: center; padding: 40px 20px; margin: 20px 0; }
.nom-sde h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin-bottom: 16px; }
.nom-sde blockquote { font-style: italic; color: var(--texte-2); font-size: .95rem; margin: 10px 0; }
.nom-sde cite { color: var(--or); font-size: .8rem; font-style: normal; font-family: var(--f-titre); }
.valeurs-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 20px; }
.valeur { background: var(--surface-2); padding: 16px; border-radius: var(--r); font-size: .9rem; font-weight: 500; text-align: center; border: 1px solid transparent; transition: all .2s var(--ease); }
.valeur:hover { border-color: var(--or); }

/* ═══════════ PARCOURS 5 AXES ═══════════ */
.cinq-axes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; margin: 20px 0; }
.cinq-axes li { padding: 20px 10px; position: relative; }
.cinq-axes li::after { content: ""; position: absolute; top: 30px; right: -2px; width: 4px; height: 2px; background: var(--or); }
.cinq-axes li:last-child::after { display: none; }
.cinq-axes svg { width: 32px; height: 32px; margin: 0 auto 8px; color: var(--or); }
.cinq-axes h3 { font-size: .85rem; font-weight: 600; }
.cinq-axes p { font-size: .75rem; color: var(--texte-2); margin-top: 4px; }
@media (max-width: 700px) { .cinq-axes { grid-template-columns: 1fr 1fr; } .cinq-axes li::after { display: none; } }

/* ═══════ HISTOIRE (timeline) ═══════ */
/* ═══════════ HISTOIRE (timeline) ═══════════ */
.frise { list-style: none; padding: 0; position: relative; counter-reset: frise; }
.frise::before { content: ""; position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: var(--grad-or); }
.frise li { display: flex; gap: 20px; padding: 20px 0; position: relative; }
.frise-num { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--surface); border: 2px solid var(--or); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; color: var(--or); font-size: 1rem; position: relative; z-index: 1; }
.frise-contenu h3 { font-size: 1rem; margin-bottom: 4px; }
.frise-contenu p { font-size: .9rem; color: var(--texte-2); }

/* ─── Frise enrichie : badges de phase ─── */
.frise-date {
  display: inline-block;
  padding: 3px 10px;
  background: rgba(226,194,106,.12);
  border: 1px solid rgba(226,194,106,.3);
  border-radius: 999px;
  font-family: var(--f-titre, inherit);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--or, #e2c26a);
  margin-bottom: 6px;
}

/* ─── Organigramme visuel ─── */
.organigramme { max-width: 900px; margin: 0 auto; }
.orga-niveau { display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; }
.orga-niveau + .orga-niveau { margin-top: 0; }
.orga-ligne { width: 2px; height: 32px; background: linear-gradient(180deg, var(--or, #e2c26a), rgba(226,194,106,.3)); margin: 0 auto; }
.orga-branche { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; position: relative; }
.orga-branche::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226,194,106,.3), var(--or, #e2c26a), rgba(226,194,106,.3), transparent);
}
.orga-carte {
  background: var(--surface, #121a2e);
  border: 1px solid rgba(226,194,106,.28);
  border-radius: var(--r-md, 14px);
  padding: 18px 20px;
  text-align: center;
  min-width: 160px;
  max-width: 240px;
  flex: 1;
  position: relative;
}
.orga-carte::before {
  content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--or, #e2c26a), transparent);
}
.orga-carte.orga-leader {
  border-color: var(--or, #e2c26a);
  background: linear-gradient(145deg, rgba(226,194,106,.08), var(--surface, #121a2e));
  min-width: 220px; max-width: 300px;
}
.orga-carte .orga-icone { font-size: 1.5rem; margin-bottom: 6px; }
.orga-carte h4 {
  font-family: var(--f-titre, inherit);
  font-size: .92rem; font-weight: 700;
  color: var(--texte, #e8ebf4);
  margin: 0 0 4px;
}
.orga-carte.orga-leader h4 { color: var(--or, #e2c26a); }
.orga-carte p {
  font-size: .78rem; color: var(--texte-2, #a4adc4);
  margin: 0;
}
.orga-carte .dog-tag { margin-top: 8px; font-size: .6rem; }
@media (max-width: 600px) {
  .orga-branche { flex-direction: column; align-items: center; gap: 10px; }
  .orga-branche::before { display: none; }
  .orga-carte { max-width: 280px; width: 100%; }
}
:root[data-theme="light"] .orga-carte { background: #fff; }
:root[data-theme="light"] .orga-carte.orga-leader { background: linear-gradient(145deg, rgba(184,144,31,.06), #fff); }

/* ─── Galerie de vie ─── */
.galerie-vie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.galerie-vie figure {
  position: relative;
  border-radius: var(--r-md, 14px);
  overflow: hidden;
  aspect-ratio: 4/3;
  margin: 0;
}
.galerie-vie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease, cubic-bezier(.22,1,.36,1));
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .galerie-vie figure:hover img { transform: scale(1.05); }
}
.galerie-vie figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: #f7f4ed;
  font-size: .82rem; font-weight: 600;
}
:root[data-theme="light"] .galerie-vie figcaption { background: linear-gradient(transparent, rgba(15,30,61,.6)); }

/* ═══════ PRÉSENCE INTERNATIONALE ═══════ */
/* ═══════════ PRÉSENCE INTERNATIONALE ═══════════ */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.point { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--bordure); transition: all .2s var(--ease); }
.point:hover { border-color: var(--or); }
.point.siege { border-color: var(--or); background: rgba(184,144,31,.06); }
.iso { width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: var(--or); flex-shrink: 0; }
.point b { font-size: .95rem; display: block; }
.point small { font-size: .8rem; color: var(--texte-2); display: block; }
.pt-contact { font-size: .78rem; color: var(--gris); display: block; margin-top: 2px; }

/* ═══════ RESPONSABLES (bios) ═══════ */
/* ═══════════ RESPONSABLES (bios) ═══════════ */
.bios { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; }
.bio { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; }
.bio header { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.bio .mono { width: 52px; height: 52px; border-radius: 50%; background: var(--grad-or); color: var(--nuit); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.bio img.mono { width: 72px; height: 72px; object-fit: cover; border: 2px solid var(--or); box-shadow: 0 0 0 4px rgba(226,194,106,.15); }
.bio h3 { font-size: 1.1rem; margin-bottom: 2px; }
.bio .titre-sd { color: var(--or); font-size: .85rem; font-weight: 600; }
.bio .role { font-size: .85rem; color: var(--texte-2); }
.bio .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bio .tags span { font-size: .75rem; padding: 3px 10px; border-radius: 100px; background: rgba(184,144,31,.1); color: var(--or); }
.bio-accroche { font-size: .95rem; color: var(--texte-2); font-style: italic; margin-bottom: 12px; border-left: 3px solid var(--or); padding-left: 14px; }
.bio-texte p { font-size: .9rem; color: var(--texte-2); margin-bottom: 10px; }
.bio-devise { font-family: var(--f-titre); font-size: .85rem; color: var(--or); margin-top: 16px; letter-spacing: .06em; }
.bio-invit { text-align: center; margin-top: 28px; color: var(--texte-2); font-size: .95rem; }

/* ═══════ PÔLES ═══════ */
/* ═══════════ PÔLES ═══════════ */
.intro-poles { text-align: center; color: var(--texte-2); margin-bottom: 20px; font-size: .95rem; }
.poles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.pole { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); overflow: hidden; text-align: left; transition: all var(--duree) var(--ease); cursor: pointer; }
.pole:hover { border-color: var(--or); transform: translateY(-3px); box-shadow: var(--ombre-carte); }
.pole-img img { width: 100%; height: 140px; object-fit: cover; }
.pole-corps { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.pole .num { font-size: .75rem; color: var(--or); font-family: var(--f-titre); letter-spacing: .1em; }
.pole-titre { font-family: var(--f-titre); font-size: .95rem; font-weight: 600; }
.pole-acc { font-size: .8rem; color: var(--texte-2); }
.pole-plus { font-size: .8rem; color: var(--or); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.pole-plus svg { width: 14px; height: 14px; }

/* ═══════ PROGRAMMES ═══════ */
/* ═══════════ PROGRAMMES ═══════════ */
.programmes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.programme { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 24px; transition: all var(--duree) var(--ease); }
.programme:hover { border-color: var(--or); transform: translateY(-2px); }
.programme.feu { border-color: var(--bordeaux); }
.prog-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--r); margin-bottom: 14px; }
.rythme { font-size: .75rem; color: var(--or); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.programme h3 { font-size: 1.05rem; margin: 6px 0; }
.programme p { font-size: .9rem; color: var(--texte-2); margin-bottom: 10px; }
.programme a { font-size: .85rem; color: var(--or); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.programme a svg { width: 14px; height: 14px; }

/* Agenda rdv */
.rdv { position: relative; }
.rdv .quand { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rdv .jour { display: flex; flex-direction: column; align-items: center; background: var(--or); color: var(--nuit); border-radius: var(--r); padding: 6px 12px; min-width: 52px; }
.rdv .jour b { font-size: 1.4rem; font-family: var(--f-titre); line-height: 1; }
.rdv .jour small { font-size: .7rem; text-transform: uppercase; }
.rdv .lieu { font-size: .85rem; color: var(--gris); }
.rdv-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.rdv-actions a, .rdv-actions button { font-size: .85rem; color: var(--or); display: inline-flex; align-items: center; gap: 4px; }
.rdv-actions button { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════ CAP 2026-2028 ═══════ */
/* ═══════════ CAP 2026-2028 ═══════════ */
.cap { background: var(--nuit); color: var(--ivoire); border-radius: var(--r-lg); padding: clamp(28px, 5vw, 48px); display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
:root[data-theme="light"] .cap { background: var(--nuit); color: var(--ivoire); }
.cap .axes { list-style: none; counter-reset: axe; padding: 0; }
.cap .axes li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(184,144,31,.15); counter-increment: axe; }
.cap .axes li::before { content: counter(axe); font-family: var(--f-titre); font-weight: 700; color: var(--or); font-size: 1.2rem; min-width: 24px; }
.cap .axes b { display: block; font-size: .95rem; color: var(--ivoire); }
.cap .axes span span { font-size: .85rem; color: var(--texte-2); }
@media (max-width: 768px) { .cap { grid-template-columns: 1fr; } }

/* ═══════ RESSOURCES ═══════ */
/* ═══════════ RESSOURCES ═══════════ */
.res-filtres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.res-filtres button { padding: 7px 14px; border-radius: 100px; font-size: .84rem; background: var(--surface-2); color: var(--texte-2); transition: all .2s var(--ease); }
.res-filtres button.actif { background: var(--or); color: var(--nuit); }
.res-compteur { font-size: .85rem; color: var(--gris); margin-bottom: 14px; text-align: center; }
.ressources-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.ressource-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 20px; cursor: pointer; transition: all var(--duree) var(--ease); }
.ressource-carte:hover { border-color: var(--or); transform: translateY(-2px); }
.res-type { font-size: .8rem; color: var(--or); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.res-icone { font-size: 1rem; }
.ressource-carte h3 { font-size: 1rem; margin-bottom: 6px; }
.res-auteur { font-size: .85rem; color: var(--texte-2); margin-bottom: 8px; }
.res-meta { display: flex; gap: 8px; font-size: .78rem; color: var(--gris); flex-wrap: wrap; }
.res-dispo { background: rgba(184,144,31,.1); color: var(--or); padding: 2px 8px; border-radius: 4px; }
.res-description { color: var(--gris); font-size: .9rem; margin: 8px 0 12px; }
.res-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.res-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 13px; border-radius: 8px; border: 1px solid var(--or); color: var(--or); font-weight: 800; text-decoration: none; }
.res-actions .res-download { background: var(--or); color: #11182a; }

/* ═══════ GALERIE & LIGHTBOX ═══════ */
/* ═══════════ GALERIE ═══════════ */
.galerie { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
.galerie li { cursor: pointer; overflow: hidden; border-radius: var(--r-lg); }
.galerie-ouvrir { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; }
.galerie-ouvrir:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.galerie-legende { flex: 1; display: block; font-size: .82rem; color: var(--texte-2); padding: 10px 12px; background: var(--surface); }
.galerie picture { display: contents; }
.galerie img { width: 100%; height: 240px; object-fit: cover; transition: transform var(--duree) var(--ease); }
@media (max-width: 640px) { .galerie img { height: 170px; } .galerie-legende { font-size: .76rem; padding: 8px 10px; } }
.galerie li:hover img, .galerie-ouvrir:focus-visible img { transform: scale(1.04); }
.galerie figcaption { font-size: .82rem; color: var(--texte-2); padding: 10px 12px; background: var(--surface); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; }
.lightbox.active { display: flex; }
.lightbox img { max-width: 90vw; max-height: 75vh; border-radius: var(--r); }
.lightbox-fermer { position: absolute; top: 16px; right: 16px; color: #fff; font-size: 1.8rem; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 2.5rem; padding: 10px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-caption { color: #ccc; font-size: .9rem; text-align: center; }
.lightbox-compteur { color: var(--gris); font-size: .8rem; }

/* ═══════ PROJETS ═══════ */
/* ═══════════ PROJETS ═══════════ */
.projets-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.projet-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 24px; }
.pj-statut { font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; display: inline-block; margin-bottom: 10px; }
.pj-encours { background: rgba(184,144,31,.15); color: var(--or); }
.pj-realise { background: rgba(100,29,45,.15); color: var(--bordeaux); }
:root[data-theme="dark"] .pj-realise { color: #e08090; }
.projet-carte h3 { font-size: 1.05rem; margin-bottom: 8px; }
.projet-carte p { font-size: .9rem; color: var(--texte-2); }
.pj-barre { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; margin-top: 14px; }
.pj-barre > div { height: 100%; background: var(--grad-or); border-radius: 3px; width: 0; transition: width 1.2s var(--ease); }
.pj-barre.vu > div { width: var(--cible); }


/* ═══════ SOUTENIR ═══════ */
/* ═══════════ SOUTENIR ═══════════ */
.soutenir-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.soutenir-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 20px; text-align: center; transition: all var(--duree) var(--ease); }
.soutenir-carte:hover { border-color: var(--or); transform: translateY(-2px); }
.sc-icone { font-size: 2rem; margin-bottom: 10px; }
.soutenir-carte h3 { font-size: 1.05rem; margin-bottom: 8px; }
.soutenir-carte p { font-size: .9rem; color: var(--texte-2); }


/* ═══════ REJOINDRE & FORMULAIRE ═══════ */
/* ═══════════ REJOINDRE ═══════════ */
.parcours-rejoindre { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
.etape-carte { display: block; background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 20px; text-decoration: none; color: var(--texte); transition: all var(--duree) var(--ease); }
.etape-carte:hover { border-color: var(--or); transform: translateY(-2px); color: var(--texte); }
.ec-num { font-family: var(--f-titre); font-size: 1.6rem; font-weight: 700; color: var(--or); margin-bottom: 6px; }
.etape-carte h3 { font-size: 1rem; margin-bottom: 4px; }
.etape-carte p { font-size: .85rem; color: var(--texte-2); }

.rejoindre { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 768px) { .rejoindre { grid-template-columns: 1fr; } }
.chemin { list-style: none; padding: 0; counter-reset: chemin; }
.chemin li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bordure); }
.chemin li > span:first-child { width: 32px; height: 32px; border-radius: 50%; background: var(--or); color: var(--nuit); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.chemin b { display: block; font-size: .95rem; }
.chemin small { font-size: .85rem; color: var(--texte-2); }

.formulaire { display: flex; flex-direction: column; gap: 14px; }
.legende { font-size: .82rem; color: var(--gris); }
.oblig { color: var(--bordeaux); font-size: .75rem; font-weight: 500; }
:root[data-theme="dark"] .oblig { color: #e08090; }
.facult { color: var(--gris); font-size: .75rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 500px) { .champs { grid-template-columns: 1fr; } }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font-size: .88rem; font-weight: 500; }
.champ input, .champ select, .champ textarea { padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--bordure); background: var(--surface-2); color: var(--texte); font-size: .95rem; font-family: var(--f-texte); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--or); outline-offset: 2px; }
.champ textarea { min-height: 80px; resize: vertical; }
.aide { font-size: .78rem; color: var(--gris); }
.accord { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--texte-2); cursor: pointer; }
.accord input { margin-top: 4px; flex-shrink: 0; }
.erreur { color: var(--bordeaux); font-size: .88rem; padding: 8px 12px; background: rgba(100,29,45,.1); border-radius: var(--r); }
:root[data-theme="dark"] .erreur { color: #e08090; }
.envoi { margin-top: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--or); border-radius: var(--r-lg); }
.envoi b { color: var(--or); }
.envoi pre { white-space: pre-wrap; font-size: .85rem; color: var(--texte-2); background: var(--surface-2); padding: 12px; border-radius: var(--r); margin: 12px 0; font-family: var(--f-texte); }
.envoi .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ═══════════ ESPACE MEMBRE & CONTACT ═══════════ */
.acces { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.carte-acces { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); padding: 28px 24px; }
.pour { font-size: .78rem; color: var(--or); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.carte-acces h3 { font-size: 1.2rem; margin-bottom: 10px; }
.carte-acces ul { padding-left: 18px; margin-bottom: 16px; }
.carte-acces li { font-size: .9rem; color: var(--texte-2); margin-bottom: 4px; }
.carte-acces .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.carte-acces small { font-size: .8rem; }
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 28px; padding: 24px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--bordure); }
.contact div { display: flex; flex-direction: column; gap: 4px; }
.contact small { font-size: .78rem; color: var(--gris); }
.contact b { font-size: .95rem; }
.copier { font-size: .78rem; color: var(--or); text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; }

/* ═══════ FAQ ═══════ */
/* ═══════════ FAQ ═══════════ */
.faq-liste details { border-bottom: 1px solid var(--bordure); }
.faq-liste summary { padding: 16px 0; font-weight: 500; font-size: 1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-liste summary::after { content: "+"; color: var(--or); font-size: 1.3rem; flex-shrink: 0; transition: transform .25s; }
.faq-liste details[open] summary::after { content: "−"; }
.faq-rep { padding: 0 0 16px; font-size: .95rem; color: var(--texte-2); }

/* ═══════════ CONFIDENTIALITÉ ═══════════ */
.confidentialite h3 { font-size: 1.05rem; margin-top: 20px; margin-bottom: 8px; color: var(--or); }
.confidentialite p { font-size: .95rem; color: var(--texte-2); margin-bottom: 10px; }

/* ═══════ TOAST ═══════ */
/* ═══════════ TOAST ═══════════ */
.res-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--nuit); color: var(--ivoire); padding: 12px 24px; border-radius: var(--r); font-size: .9rem; opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 100; white-space: nowrap; border: 1px solid var(--bordure); }
.res-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════ RETOUR EN HAUT ═══════ */
/* ═══════════ RETOUR EN HAUT ═══════════ */
.retour-haut { position: fixed; bottom: 80px; right: 16px; z-index: 90; width: 44px; height: 44px; border-radius: 50%; background: var(--or); color: var(--nuit); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(184,144,31,.3); opacity: 0; transform: translateY(12px); pointer-events: none; transition: all .3s var(--ease); }
.retour-haut.visible { opacity: 1; transform: none; pointer-events: auto; }
.retour-haut svg { width: 20px; height: 20px; }

/* ═══════ POLE DIALOG ═══════ */
/* ═══════════ POLE DIALOG ═══════════ */
.fiche-pole { border: none; background: transparent; padding: 0; max-width: 720px; width: 95vw; border-radius: var(--r-lg); overflow: hidden; }
.fiche-pole::backdrop { background: rgba(0,0,0,.7); }
.fp-boite { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--r-lg); max-height: 90vh; display: flex; flex-direction: column; }
.fp-image { position: relative; }
.fp-image img { width: 100%; height: 200px; object-fit: cover; }
.fp-fermer { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.fp-corps { padding: 28px 24px; overflow-y: auto; flex: 1; }
.fp-corps .num { font-size: .75rem; color: var(--or); font-family: var(--f-titre); letter-spacing: .1em; }
.fp-corps h2 { font-size: 1.3rem; margin: 4px 0 10px; }
.fp-chapo { font-size: .95rem; color: var(--texte-2); margin-bottom: 20px; }
.fp-corps h3 { font-size: .95rem; color: var(--or); margin: 20px 0 8px; }
.fp-liste { padding-left: 18px; }
.fp-liste li { font-size: .9rem; color: var(--texte-2); margin-bottom: 4px; }
.fp-depts { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-depts span { font-size: .8rem; padding: 4px 12px; border-radius: 100px; background: rgba(184,144,31,.1); color: var(--or); }
.fp-projets { display: grid; gap: 10px; }
.fp-projet { padding: 12px; background: var(--surface-2); border-radius: var(--r); }
.fp-projet small { font-size: .75rem; color: var(--or); }
.fp-projet b { display: block; font-size: .9rem; margin: 2px 0; }
.fp-projet p { font-size: .85rem; color: var(--texte-2); }
.fp-verset { border-left: 3px solid var(--or); padding: 12px 16px; font-style: italic; font-size: .92rem; color: var(--texte-2); margin: 20px 0; }
.fp-verset cite { display: block; font-style: normal; color: var(--or); font-size: .8rem; margin-top: 6px; font-family: var(--f-titre); }
.fp-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.fp-nav { display: flex; justify-content: space-between; padding: 12px 24px; border-top: 1px solid var(--bordure); }
.fp-nav button { font-size: .85rem; color: var(--or); display: flex; align-items: center; gap: 4px; }
.fp-corps.change { animation: glisse-corps .3s var(--ease); }
@keyframes glisse-corps { from { opacity: 0; transform: translateX(var(--dx, 30px)); } to { opacity: 1; transform: none; } }

/* ═══════ ANIMATIONS ═══════ */
/* ═══════════ ANIMATIONS ═══════════ */
/* Scroll reveal */
html.anim .revele { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
html.anim .revele.vu { opacity: 1; transform: none; }

/* Parallax subtle */
.parallax { will-change: transform; }

/* ── v11 : Ripple tactile ── */
.ripple-host { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: var(--or-marque); opacity: .18; transform: scale(0); pointer-events: none; animation: ripple-out .55s ease-out forwards; }
@keyframes ripple-out { to { transform: scale(2.5); opacity: 0; } }

/* ── v11 : Transitions cartes ── */
.bento-carte { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.resume-carte { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.if-aside { transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.bouton { transition: background .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease), color .15s var(--ease); }

/* ── v11 : Nav mobile active indicator ── */
.nav-mobile a.act::after { content: ""; display: block; width: 20px; height: 3px; border-radius: 3px; background: var(--or-marque); margin-top: 2px; animation: nav-point .25s ease-out; }
@keyframes nav-point { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── v11 : Section fade-in ── */
html.anim .section { animation: section-in .5s ease-out both; }
@keyframes section-in { from { opacity: 0; } to { opacity: 1; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html.anim .revele { opacity: 1; transform: none; }
  .ripple { display: none !important; }
}

/* ═══════ ACCESSIBILITÉ ═══════ */
/* ═══════════ ACCESSIBILITÉ ═══════════ */
.masque-visuel { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Liens au milieu d'un texte : soulignés, pas seulement colorés */
.resume-carte p a, .bio-invit a, .chapo a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Thème clair : les zones restées bleu nuit (en-tête, cap, pied de page) gardent les couleurs du thème sombre */
:root[data-theme="light"] :is(.entete, .cap, .pied) { --or: #e2c26a; --or-lum: #e2c26a; --texte: #e8ebf4; --texte-2: #b8c1d8; --gris: #b8c1d8; }
:root[data-theme="light"] :is(.agenda-filtres button.actif, .res-filtres button.actif, .rdv .jour) { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.entete, .cap, .pied) { --or: #e2c26a; --or-lum: #e2c26a; --texte: #e8ebf4; --texte-2: #b8c1d8; --gris: #b8c1d8; }
  :root:not([data-theme="dark"]) :is(.agenda-filtres button.actif, .res-filtres button.actif, .rdv .jour) { color: #fff; }
}
/* …sauf le grand menu déroulant sur ordinateur, posé sur fond clair */
@media (min-width: 1025px) {
  :root[data-theme="light"] .entete .mega-menu { --or: #85650f; --or-lum: #b8901f; --texte: #161e35; --texte-2: #535c75; --gris: #535c75; }
}
@media (min-width: 1025px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .entete .mega-menu { --or: #85650f; --or-lum: #b8901f; --texte: #161e35; --texte-2: #535c75; --gris: #535c75; }
}

/* ═══════ HYBRIDE — TOKENS SUPPLÉMENTAIRES ═══════ */
:root {
  --vert: #7ED8A8;
  --bleu-clair: #7EB4FF;
  --violet: #B49FE8;
  --voile: rgba(10,15,29,.55);
  --r-md: 14px;
  --grad-nuit:
    radial-gradient(ellipse 60% 50% at 15% 8%, rgba(90,65,150,.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 18%, rgba(226,194,106,.14) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 50% 95%, rgba(30,60,130,.22) 0%, transparent 60%);
}
:root[data-theme="light"] {
  --voile: rgba(255,255,255,.65);
  --grad-nuit:
    radial-gradient(ellipse 60% 50% at 15% 8%, rgba(90,65,150,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 18%, rgba(226,194,106,.08) 0%, transparent 65%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --voile: rgba(255,255,255,.65);
    --grad-nuit:
      radial-gradient(ellipse 60% 50% at 15% 8%, rgba(90,65,150,.06) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 85% 18%, rgba(226,194,106,.08) 0%, transparent 65%);
  }
}

/* ─── Fond cosmique + starfield : OPT-IN via <body data-cosmique>.
   Ainsi les pages vitrine en profitent, l'app membre (utilitaire)
   charge le même CSS pour ses utilitaires sans voir son fond modifié. ─── */
body[data-cosmique] { background-image: var(--grad-nuit), linear-gradient(180deg, var(--fond, #0a0f1d), var(--fond, #0a0f1d)); background-attachment: fixed; }
:root[data-theme="light"] body[data-cosmique] { background-image: var(--grad-nuit), linear-gradient(180deg, var(--fond, #eef0f5), var(--fond, #eef0f5)); }

body[data-cosmique]::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 28% 14%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 48% 6%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 64% 11%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 78% 7%, rgba(226,194,106,.7), transparent),
    radial-gradient(1px 1px at 92% 13%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 55% 24%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 82% 28%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 32% 42%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 70% 48%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.5px 1.5px at 15% 60%, rgba(226,194,106,.4), transparent),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.3), transparent),
    radial-gradient(1px 1px at 42% 80%, rgba(255,255,255,.35), transparent);
}
:root[data-theme="light"] body[data-cosmique]::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-cosmique]::before { opacity: .3; }
}
/* Pas d'étoiles au-dessus du contenu si une image de fond hero est présente */
body[data-cosmique] .hero-fond { z-index: 1; }
body[data-cosmique] :is(main, header, footer, .entete, .pied, .nav-mobile, .retour-haut) { position: relative; z-index: 1; }

/* ═══════ GLASSMORPHISM (contenu) ═══════ */
.verre {
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  background: var(--voile);
  border: 1px solid rgba(255,255,255,.08);
}
:root[data-theme="light"] .verre { border-color: rgba(15,30,61,.08); }

/* ═══════ CARTE RDV (vitrée) ═══════ */
/* Carte rendez-vous (prochain événement) : vitrée + lueur dorée */
.carte-rdv {
  position: relative;
  border-radius: var(--r-lg, 20px);
  padding: 28px;
  overflow: hidden;
}
.carte-rdv::before {
  content: ''; position: absolute; top: -1px; left: 20%; right: 20%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,194,106,.6), transparent);
}
.carte-rdv::after {
  content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(226,194,106,.2) 0%, transparent 70%);
}


/* ═══════ TABLEAU DE BORD ═══════ */
/* ═══════ 2. TABLEAU DE BORD ═══════ */
.grille-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi {
  background: rgba(18,26,46,.6);
  border: 1px solid rgba(43,67,119,.4);
  border-radius: var(--r-md);
  padding: 22px;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}
:root[data-theme="light"] .kpi { background: #fff; border-color: rgba(15,30,61,.1); }
.kpi:hover, .kpi:focus-visible { border-color: rgba(226,194,106,.4); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.25); color: inherit; }
.kpi.urgent { border-color: rgba(226,194,106,.55); box-shadow: 0 0 0 1px rgba(226,194,106,.35), 0 10px 28px rgba(226,194,106,.15); }
.kpi-tete { display: flex; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.kpi-label { font-family: var(--f-titre); font-size: .68rem; color: var(--texte-2, #a4adc4); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.kpi-icone { color: var(--or); opacity: .9; width: 20px; height: 20px; flex-shrink: 0; }
.kpi-chiffre { font-family: var(--f-titre); font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--texte, #e8ebf4); }
.kpi-sous { margin-top: 10px; font-size: .78rem; color: var(--texte-2, #a4adc4); line-height: 1.4; }
.kpi-sous strong { color: var(--or); font-weight: 700; }
.kpi-delta { margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--vert); font-weight: 600; }
.kpi-delta.en-baisse { color: #E8906F; }

.barre { height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
:root[data-theme="light"] .barre { background: rgba(15,30,61,.08); }
.barre-remplissage { height: 100%; background: linear-gradient(90deg, #b8901f, #e2c26a); border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1); }

.grille-analyses { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.carte-chart {
  background: rgba(18,26,46,.6);
  border: 1px solid rgba(43,67,119,.4);
  border-radius: var(--r-md);
  padding: 22px;
  min-width: 0;
}
:root[data-theme="light"] .carte-chart { background: #fff; border-color: rgba(15,30,61,.1); }
.carte-chart.large { grid-column: span 2; }
@media (max-width: 680px) { .carte-chart.large { grid-column: span 1; } }

.chart-barres { display: flex; align-items: end; gap: 10px; height: 160px; padding: 0 4px; margin-top: 16px; }
.chart-barre { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.chart-barre .valeur { font-size: .72rem; color: var(--texte, #e8ebf4); font-weight: 700; }
.chart-barre .fuseau { width: 100%; background: linear-gradient(180deg, #e2c26a, #85650f); border-radius: 5px 5px 0 0; min-height: 12px; transition: transform .25s ease; }
.chart-barre:hover .fuseau { transform: scaleY(1.03); transform-origin: bottom; }
.chart-barre .legende { font-size: .72rem; color: var(--texte-2, #a4adc4); font-family: var(--f-titre); letter-spacing: .05em; }

.ligne-progression { margin-bottom: 16px; }
.ligne-progression:last-child { margin-bottom: 0; }
.ligne-progression .tete-l { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: .82rem; }
.ligne-progression .valeur-l { color: var(--or); font-weight: 700; font-size: .78rem; }

/* Filtres de période (chips dashboard) */
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres .filtre {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--texte-2, #a4adc4);
  font-size: .72rem;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--f-titre);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.filtres .filtre:hover { color: var(--or); border-color: rgba(226,194,106,.3); }
.filtres .filtre.actif, .filtres .filtre[aria-pressed="true"] { background: rgba(226,194,106,.15); border-color: var(--or); color: var(--or); }
:root[data-theme="light"] .filtres .filtre { background: rgba(15,30,61,.03); border-color: rgba(15,30,61,.08); }

/* ═══════ BENTO AMPLIFIÉ ═══════ */
/* ═══════ 3. BENTO — amplifié ═══════
   Préserve l'existant .bento-carte et ajoute des variantes gradients */
.bento-carte { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; min-width: 0; }
.bento-carte:hover { border-color: rgba(226,194,106,.4); }

/* Variantes de teintes pour les cartes bento (à appliquer en complément de .bento-carte) */
.bento-carte.v-phare { background: linear-gradient(145deg, rgba(90,65,150,.4), rgba(14,18,32,.85)), radial-gradient(circle at 80% 20%, rgba(226,194,106,.25), transparent 50%); }
.bento-carte.v-formation { background: linear-gradient(145deg, rgba(30,60,130,.4), rgba(14,18,32,.85)); }
.bento-carte.v-traversee { background: linear-gradient(145deg, rgba(139,94,52,.3), rgba(14,18,32,.85)); }
.bento-carte.v-action { background: linear-gradient(145deg, rgba(126,216,168,.18), rgba(14,18,32,.85)); }
.bento-carte.v-bordeaux { background: linear-gradient(145deg, rgba(100,29,45,.35), rgba(14,18,32,.85)); }
:root[data-theme="light"] .bento-carte.v-phare,
:root[data-theme="light"] .bento-carte.v-formation,
:root[data-theme="light"] .bento-carte.v-traversee,
:root[data-theme="light"] .bento-carte.v-action,
:root[data-theme="light"] .bento-carte.v-bordeaux { background: var(--surface, #fff); }

/* Grille bento asymétrique (12 colonnes) — alternative à .bento-grille existante */
.bento-asym { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(170px, auto); gap: 16px; }
.c-7x2 { grid-column: span 7; grid-row: span 2; }
.c-5x2 { grid-column: span 5; grid-row: span 2; }
.c-8x2 { grid-column: span 8; grid-row: span 2; }
.c-4x2 { grid-column: span 4; grid-row: span 2; }
.c-6x1 { grid-column: span 6; }
.c-4x1 { grid-column: span 4; }
@media (max-width: 980px) {
  .c-7x2, .c-5x2, .c-8x2, .c-4x2 { grid-row: span 1; }
  .c-7x2, .c-8x2 { grid-column: span 7; }
  .c-5x2, .c-4x2 { grid-column: span 5; }
}
@media (max-width: 680px) {
  .bento-asym { grid-template-columns: 1fr; }
  .c-7x2, .c-5x2, .c-8x2, .c-4x2, .c-6x1, .c-4x1 { grid-column: span 1; }
}

/* Étiquettes (pills) catégorielles */
.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .64rem; font-family: var(--f-titre); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.e-or { background: rgba(226,194,106,.15); color: var(--or); }
.e-bleu { background: rgba(126,180,255,.12); color: var(--bleu-clair); }
.e-vert { background: rgba(126,216,168,.15); color: var(--vert); }
.e-violet { background: rgba(180,159,232,.15); color: var(--violet); }
.e-bordeaux { background: rgba(100,29,45,.2); color: #E8906F; }
.e-neutre { background: rgba(255,255,255,.08); color: var(--texte-2, #a4adc4); }

/* Statistiques compactes à l'intérieur d'une carte bento */
.stats-mini { display: flex; align-items: center; gap: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); margin-top: auto; flex-wrap: wrap; }
.stats-mini > div { min-width: 0; }
.stats-mini b { font-family: var(--f-titre); font-size: 1.4rem; color: var(--or); display: block; line-height: 1; }
.stats-mini.v-bleu b { color: var(--bleu-clair); }
.stats-mini.v-vert b { color: var(--vert); }
.stats-mini small { font-size: .62rem; color: var(--texte-2, #a4adc4); letter-spacing: .12em; text-transform: uppercase; display: block; margin-top: 3px; }

/* Orbite décorative (compteur mensuel, calendrier) */
.orbite { flex: 0 0 180px; position: relative; height: 180px; display: flex; align-items: center; justify-content: center; }
.orbite .cercle-1 { position: absolute; width: 170px; height: 170px; border: 1px dashed rgba(226,194,106,.25); border-radius: 50%; }
.orbite .cercle-2 { position: absolute; width: 115px; height: 115px; border: 1px dashed rgba(226,194,106,.35); border-radius: 50%; }
.orbite .noyau { position: absolute; width: 68px; height: 68px; background: radial-gradient(circle, #e2c26a, #85650f); border-radius: 50%; box-shadow: 0 0 36px rgba(226,194,106,.5); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-size: 1.6rem; font-weight: 700; color: var(--nuit); }
.orbite .satellite { position: absolute; background: var(--or); border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
  .orbite .cercle-1 { animation: tourne 24s linear infinite; }
  .orbite .cercle-2 { animation: tourne 16s linear infinite reverse; }
  @keyframes tourne { to { transform: rotate(360deg); } }
}

/* ═══════ KANBAN ═══════ */
/* ═══════ 4. KANBAN ═══════ */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.colonne {
  background: rgba(14,20,36,.5);
  border: 1px solid rgba(43,67,119,.4);
  border-radius: var(--r-md);
  padding: 16px;
  min-width: 0;
}
:root[data-theme="light"] .colonne { background: #fff; border-color: rgba(15,30,61,.1); }
.colonne-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.colonne-nom { display: flex; align-items: center; gap: 10px; font-family: var(--f-titre); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.puce { width: 10px; height: 10px; border-radius: 50%; }
.puce-bleu { background: var(--bleu-clair); }
.puce-or { background: var(--or); }
.puce-violet { background: var(--violet); }
.puce-vert { background: var(--vert); }
.puce-rouge { background: #E8906F; }
.compteur { font-family: var(--f-titre); font-size: .72rem; color: var(--texte-2, #a4adc4); background: rgba(255,255,255,.06); padding: 2px 9px; border-radius: 999px; font-weight: 600; }
:root[data-theme="light"] .compteur { background: rgba(15,30,61,.06); }

.ticket {
  background: rgba(28,36,60,.8);
  border: 1px solid rgba(43,67,119,.4);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: grab;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: block;
  text-decoration: none;
  color: inherit;
}
a.ticket:hover, a.ticket:focus-visible { color: inherit; cursor: pointer; }
:root[data-theme="light"] .ticket { background: var(--surface-2, #f3f5f9); border-color: rgba(15,30,61,.08); }
.ticket:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.25); border-color: rgba(226,194,106,.3); }
.ticket:active { cursor: grabbing; }
.ticket-tete { display: flex; justify-content: space-between; margin-bottom: 10px; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-date { font-family: var(--f-titre); font-size: .66rem; color: var(--texte-2, #a4adc4); letter-spacing: .05em; }
.ticket-titre { font-size: .88rem; font-weight: 700; margin-bottom: 4px; line-height: 1.35; color: var(--texte, #e8ebf4); font-family: var(--f-texte); text-transform: none; letter-spacing: normal; }
.ticket-sous { font-size: .74rem; color: var(--texte-2, #a4adc4); margin-bottom: 10px; line-height: 1.4; }
.ticket-pied { display: flex; align-items: center; justify-content: space-between; }
.ticket.urgent { border-color: rgba(226,194,106,.35); box-shadow: 0 0 0 1px rgba(226,194,106,.2); }
.ticket.urgent-flag, .urgent-flag { font-family: var(--f-titre); font-size: .66rem; color: var(--or); font-weight: 700; letter-spacing: .12em; }
.ticket.fait { opacity: .68; }
.ticket.fait .ticket-titre { text-decoration: line-through; text-decoration-color: rgba(232,235,244,.3); }

/* Avatars rondelles d'équipe */
.avatars { display: flex; }
.avatars .av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--fond, #0a0f1d); font-size: .7rem; font-family: var(--f-titre); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; color: var(--nuit); background: #ccc; }
.avatars .av + .av { margin-left: -8px; }
.av-or { background: linear-gradient(145deg, #e2c26a, #85650f); }
.av-bleu { background: linear-gradient(145deg, #7EB4FF, #4A6FA5); color: var(--nuit); }
.av-vert { background: linear-gradient(145deg, #7ED8A8, #4A8870); color: var(--nuit); }
.av-violet { background: linear-gradient(145deg, #B49FE8, #7A5FB8); color: var(--nuit); }

/* ═══════ UTILITAIRES VISUELS ═══════ */
/* ═══════ Finitions utilitaires ═══════ */
.pulse { animation: pulse-doux 2.4s ease-in-out infinite; }
@keyframes pulse-doux { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .orbite .cercle-1, .orbite .cercle-2 { animation: none; }
}

/* Badge « phare » (événement à la une) — à poser sur un article de section */
.ruban-phare {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(226,194,106,.12); color: var(--or);
  border: 1px solid rgba(226,194,106,.3);
  padding: 6px 14px; border-radius: 999px;
  font-size: .72rem; font-family: var(--f-titre);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.ruban-phare .pt { width: 6px; height: 6px; background: var(--or); border-radius: 50%; }

/* Dégradé doré sur titres emphatiques (<em> dans h1/h2, et .accent déjà présent) */
.h-degrade em, .titre-degrade em,
.hero h1 .accent {
  font-style: normal;
  background: linear-gradient(135deg, #e2c26a 0%, #f0d586 50%, #b8901f 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Boutons pilule — version harmonisée avec la direction hybride (en complément des .bouton existants) */
.bouton.pilule, .bouton[data-pilule] { border-radius: 999px; }

/* Bandeau CTA vitré en fin de section */
.cta-band {
  margin-top: 44px; border-radius: var(--r-lg, 20px); padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cta-band h3 { font-size: 1.3rem; margin-bottom: 4px; color: var(--texte, #e8ebf4); }
.cta-band p { font-size: .85rem; color: var(--texte-2, #a4adc4); margin: 0; }
@media (max-width: 720px) {
  .cta-band { flex-direction: column; align-items: stretch; text-align: center; }
  .cta-band .bouton { justify-content: center; }
}

/* ═══════ KPI BADGES ═══════ */
/* ─── KPI : badges de croissance stylisés + goal bars ─── */
.kpi-growth {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 999px;
  font-family: var(--f-titre, inherit);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 10px;
}
.kpi-growth.up { background: rgba(126,216,168,.15); color: var(--vert, #7ED8A8); }
.kpi-growth.down { background: rgba(232,144,111,.15); color: #E8906F; }
.kpi-growth.steady { background: rgba(255,255,255,.08); color: var(--texte-2, #a4adc4); }
.kpi-growth svg { width: 10px; height: 10px; flex-shrink: 0; }

.kpi-goal {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(226,194,106,.2);
}
.kpi-goal-l {
  display: flex; justify-content: space-between;
  font-size: .68rem; color: var(--texte-2, #a4adc4);
  font-family: var(--f-titre, inherit);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  margin-bottom: 6px;
}
.kpi-goal-l b { color: var(--or, #e2c26a); font-weight: 700; }


/* ═══════ FICHE-DOSSIER MILITAIRE ═══════ */
/* ─── Fiche-dossier (inspiration dossier confidentiel) ─── */
.dossier {
  position: relative;
  background: linear-gradient(180deg, rgba(10,15,29,.95), rgba(5,7,14,.95)),
              repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(226,194,106,.015) 4px, rgba(226,194,106,.015) 5px);
  border: 1px solid rgba(226,194,106,.3);
  border-radius: var(--r-md, 14px);
  padding: 32px 28px 24px;
  overflow: hidden;
}
:root[data-theme="light"] .dossier {
  background: linear-gradient(180deg, #fff, #f3f5f9);
  border-color: rgba(184,144,31,.35);
}
.dossier::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--or, #e2c26a), transparent);
}
.dossier::after {
  content: '';
  position: absolute; top: 10px; right: 10px;
  width: 24px; height: 24px;
  border-top: 2px solid var(--or, #e2c26a);
  border-right: 2px solid var(--or, #e2c26a);
  opacity: .5;
}
.dossier-ruban {
  position: absolute; top: 14px; left: -2px;
  padding: 4px 14px 4px 16px;
  background: linear-gradient(90deg, #85650f, #e2c26a);
  color: #0f1e3d;
  font-family: var(--f-titre, inherit);
  font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}
.dossier-tete {
  display: flex; justify-content: space-between; align-items: start;
  gap: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(226,194,106,.2);
  margin-bottom: 20px;
}
.dossier-id {
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .7rem; color: var(--texte-2, #a4adc4);
  letter-spacing: .1em; text-transform: uppercase;
}
.dossier-id b { color: var(--or, #e2c26a); }
.dossier-grille {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .78rem;
}
.dossier-grille dt {
  color: var(--texte-2, #a4adc4);
  text-transform: uppercase; letter-spacing: .06em; font-size: .68rem;
}
.dossier-grille dd {
  color: var(--texte, #e8ebf4);
  margin: 0 0 4px;
}
.dossier-attribut {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.dossier-attribut .n {
  flex: 0 0 100px;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--texte-2, #a4adc4);
}
.dossier-attribut .b {
  flex: 1; height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px; overflow: hidden;
}
.dossier-attribut .b i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #85650f, #e2c26a);
}
.dossier-attribut .v {
  flex: 0 0 42px; text-align: right;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .7rem; color: var(--or, #e2c26a);
  font-weight: 700;
}
@media (max-width: 540px) {
  .dossier { padding: 32px 20px 20px; }
  .dossier-grille { grid-template-columns: 1fr; }
}

/* ═══════ ÉLÉVATION DOUCE ═══════ */
/* ─── Élévation douce (soft UI) : cartes qui respirent ─── */
.carte-flotte {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 8px 24px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.carte-flotte:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 4px rgba(0,0,0,.35),
    0 16px 42px rgba(0,0,0,.3),
    0 0 0 1px rgba(226,194,106,.15),
    inset 0 1px 0 rgba(255,255,255,.06);
}
:root[data-theme="light"] .carte-flotte {
  box-shadow:
    0 1px 2px rgba(15,30,61,.06),
    0 8px 24px rgba(15,30,61,.08);
}
:root[data-theme="light"] .carte-flotte:hover {
  box-shadow:
    0 2px 4px rgba(15,30,61,.08),
    0 16px 42px rgba(15,30,61,.12),
    0 0 0 1px rgba(184,144,31,.2);
}

/* Appliqué par défaut aux KPI, aux tickets kanban et aux cartes bento */
.kpi, .ticket, .bento-carte {
  transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .25s ease, box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.kpi:hover, .ticket:hover, .bento-carte:hover {
  box-shadow:
    0 2px 4px rgba(0,0,0,.3),
    0 16px 36px rgba(0,0,0,.28),
    0 0 0 1px rgba(226,194,106,.2);
}
:root[data-theme="light"] .kpi:hover,
:root[data-theme="light"] .ticket:hover,
:root[data-theme="light"] .bento-carte:hover {
  box-shadow:
    0 2px 4px rgba(15,30,61,.06),
    0 16px 36px rgba(15,30,61,.12),
    0 0 0 1px rgba(184,144,31,.25);
}

/* ─── Divider doré « OR » (inspiré login neumorphism) ─── */
.div-ou {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0;
  color: var(--texte-2, #a4adc4);
  font-family: var(--f-titre, inherit);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700;
}
.div-ou::before, .div-ou::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,194,106,.3), transparent);
}


/* ═══════ TOUCHE MILITAIRE ═══════ */
/* ═══════════════════════════════════════════════════════════════════════
   TOUCHE MILITAIRE — Soldats de l'Éternel

   Accents stencil, chevrons, bandes diagonales, langage opérationnel
   discret. S'applique au-dessus des styles existants sans dépendre d'une
   classe sur le body : les surtitres gagnent naturellement en gravité.
   ═══════════════════════════════════════════════════════════════════════ */

/* Surtitre : barre latérale dorée façon galon */
.tete-section .surtitre {
  position: relative;
  padding-left: 14px;
  display: inline-block;
  color: var(--or, #e2c26a);
}
.tete-section { max-width: 850px; margin-inline: auto; }
.tete-section .surtitre::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px;
  background: linear-gradient(180deg, #e2c26a, #85650f);
  border-radius: 1px;
}

/* Chevrons triples façon galon de grade — à appliquer librement */
.galon {
  display: inline-flex; gap: 2px;
  color: var(--or, #e2c26a);
}
.galon::before, .galon::after, .galon > span {
  content: '>';
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-weight: 700; font-size: .72em;
  letter-spacing: -.1em;
  opacity: .7;
}
.galon::after { opacity: 1; }

/* Bannière opérationnelle — en tête de section stratégique */
.op-banniere {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 10px;
  background: linear-gradient(90deg, rgba(226,194,106,.14), transparent);
  border-left: 3px solid var(--or, #e2c26a);
  border-radius: 2px;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--or, #e2c26a);
  margin-bottom: 10px;
}
.op-banniere b { color: var(--texte, #e8ebf4); font-weight: 700; }

/* Rayures militaires diagonales — accent décoratif discret */
.rayures-mil {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(226,194,106,.08) 0,
    rgba(226,194,106,.08) 4px,
    transparent 4px,
    transparent 10px
  );
}

/* Badge « grade » minimal — pour une étape, un pôle, une étape de parcours */
.grade {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: linear-gradient(145deg, #0f1e3d, #1b2f5b);
  border: 2px solid var(--or, #e2c26a);
  color: var(--or, #e2c26a);
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-weight: 700; font-size: .78rem;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(226,194,106,.2), 0 2px 4px rgba(0,0,0,.3);
  position: relative;
}
.grade::before, .grade::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px; background: rgba(226,194,106,.4);
}
.grade::before { top: 4px; }
.grade::after { bottom: 4px; }

/* ─── Menu dynamique : bouton d'action flottant « COMMANDEMENT » ─── */
.fab-cmd {
  position: fixed;
  right: 20px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(145deg, #e2c26a, #85650f);
  color: #0f1e3d;
  border: 2px solid rgba(226,194,106,.6);
  border-radius: 999px;
  font-family: var(--f-titre, inherit);
  font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0,0,0,.4), 0 0 0 4px rgba(226,194,106,.12);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.fab-cmd:hover, .fab-cmd:focus-visible {
  color: #0f1e3d;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 0 6px rgba(226,194,106,.2);
}
.fab-cmd svg { width: 16px; height: 16px; flex-shrink: 0; }
.fab-cmd .pt {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0f1e3d; display: inline-block;
  animation: pulse-doux 2s ease-in-out infinite;
}
@media (max-width: 720px) {
  .fab-cmd { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); right: 14px; padding: 10px 14px 10px 12px; font-size: .72rem; }
  .fab-cmd .lbl { display: none; }
  .fab-cmd { gap: 0; }
}

/* ─── Dog-tag (identifiant discret pour les points SDE, pôles, etc.) ─── */
.dog-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(10,15,29,.6);
  border: 1px solid rgba(226,194,106,.3);
  border-left: 3px solid var(--or, #e2c26a);
  border-radius: 2px;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-2, #a4adc4);
}
.dog-tag b { color: var(--or, #e2c26a); font-weight: 700; }
:root[data-theme="light"] .dog-tag { background: rgba(255,255,255,.6); }

/* ─── Fiche de pôle : accents dossier militaire ─── */
.fp-boite {
  background: linear-gradient(180deg, rgba(10,15,29,.98), rgba(5,7,14,.98)) !important;
  border: 1px solid rgba(226,194,106,.35) !important;
  position: relative;
}
.fp-boite::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--or, #e2c26a), transparent);
  z-index: 2;
}
.fp-boite::after {
  content: 'DOSSIER'; position: absolute; top: 10px; left: 14px; z-index: 3;
  padding: 3px 10px;
  background: linear-gradient(90deg, #85650f, #e2c26a);
  color: #0f1e3d;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  font-size: .62rem; font-weight: 800; letter-spacing: .18em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.fp-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,29,.3) 0%, transparent 50%, rgba(10,15,29,.95) 100%);
  pointer-events: none;
}
.fp-corps .num {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(226,194,106,.12);
  border: 1px solid rgba(226,194,106,.3);
  border-left: 3px solid var(--or, #e2c26a);
  border-radius: 2px;
  font-family: 'DMMono', 'GeistMono-Regular', ui-monospace, monospace;
  letter-spacing: .14em;
  margin-bottom: 10px;
}
:root[data-theme="light"] .fp-boite {
  background: linear-gradient(180deg, #fff, #f3f5f9) !important;
  border-color: rgba(184,144,31,.35) !important;
}

/* ═══════ SOUS-PAGES — INTRO, NAVIGATION, MODALES ═══════ */
.sde-subpage .sde-intro { padding: clamp(60px,9vw,104px) 20px 44px; text-align:center; background:linear-gradient(145deg,#111e38,#222b49 65%,#111a2d); border-bottom:1px solid rgba(226,194,106,.18); }
.sde-subpage .sde-intro .sde-kicker { color:#e2c26a; text-transform:uppercase; letter-spacing:.15em; font-size:.75rem; font-weight:800; }
.sde-subpage .sde-intro h1 { color:#f7f4ed; font-family:var(--f-titre,"Saira Condensed",sans-serif); font-size:clamp(2.35rem,5vw,4.8rem); line-height:1.13; margin:10px 0; }
.sde-subpage .sde-intro p { max-width:720px; margin:10px auto; color:#bec8db; font-size:clamp(.95rem,1.8vw,1.14rem); }
.sde-subpage .sde-crumbs { margin-top:20px; font-size:.87rem; color:#ced4e4; }
.sde-subpage .sde-crumbs a { color:#e2c26a; }
.sde-subpage .sde-page-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.sde-subpage .sde-page-actions a { display:inline-flex; align-items:center; justify-content:center; background:#e2c26a; color:#131a2d; border-radius:12px; padding:9px 18px; font-weight:800; min-height:44px; text-decoration:none; }
.sde-subpage .sde-page-actions a.sde-secondary { background:transparent; color:#f7f4ed; border:1px solid #e2c26a; }
.sde-subpage .sde-further { padding:40px 16px 70px; background:#101827; color:#e8ebf4; text-align:center; }
.sde-subpage .sde-further a { display:inline-flex; padding:10px 20px; border:1px solid #e2c26a; border-radius:12px; margin:8px; min-height:44px; align-items:center; color:#e2c26a; }
.sde-subpage .sde-further h2 { color:#f7f4ed; font-size:clamp(1.6rem,3vw,2.5rem); margin-bottom:18px; }
.sde-subpage .sde-page-footer { background:#0c1322; color:#c7cad5; padding:34px 16px 120px; text-align:center; border-top:1px solid rgba(226,194,106,.18); }
.sde-subpage .sde-page-footer a { margin:0 8px; }
.sde-subpage main { display:block; }
.sde-subpage section[id] { scroll-margin-top: 88px; }
html:not(.anim) .sde-subpage .revele { opacity:1 !important; transform:none !important; }
.sde-subpage .section { overflow:clip; }
.sde-subpage .sde-search-empty[hidden],.sde-subpage [hidden] { display:none !important; }
.sde-subpage .sde-simple-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; max-width:1150px; margin:28px auto; }
.sde-subpage .sde-simple-grid a { display:flex; flex-direction:column; gap:8px; background:#19233b; padding:24px; border:1px solid rgba(226,194,106,.28); border-radius:18px; color:#e8ebf4; min-height:150px; }
.sde-subpage .sde-simple-grid strong { color:#e2c26a; font-size:1.2rem; }
.sde-subpage .sde-simple-grid span { color:#bac6d5; }
.sde-subpage #rejoindre .formulaire { max-width:100%; }
.sde-subpage .sde-modal { position:fixed; inset:0; z-index:2200; background:rgba(3,7,16,.93); display:none; align-items:center; justify-content:center; padding:20px; }
.sde-subpage .sde-modal[aria-hidden="false"] { display:flex; }
.sde-subpage .sde-modal img { max-width:min(92vw,1250px); max-height:78vh; object-fit:contain; }
.sde-subpage .sde-modal .sde-modal-close { position:absolute; right:22px; top:18px; background:#e2c26a; border-radius:30px; padding:5px 13px; color:#0f1e3d; font-size:25px; }
.sde-subpage .sde-modal figcaption { color:white; text-align:center; padding:8px; }
.sde-subpage .sde-modal :is(.sde-modal-prev,.sde-modal-next) { position:absolute; z-index:2; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:54px; color:#0f1e3d; background:#e2c26a; border-radius:12px; font-size:2.3rem; font-weight:800; }
.sde-subpage .sde-modal .sde-modal-prev { left:12px; }
.sde-subpage .sde-modal .sde-modal-next { right:12px; }
.sde-subpage .sde-modal button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
@media (max-width:600px) { .sde-subpage .sde-modal :is(.sde-modal-prev,.sde-modal-next) { width:34px; height:48px; background:rgba(226,194,106,.9); } }

@media (prefers-reduced-motion:reduce) { .sde-subpage * { scroll-behavior:auto !important; } }

/* ═══════ DYNAMIQUE — FILTRES, RDV, PROGRESSION ═══════ */
.sde-dyn-tools{max-width:1100px;margin:26px auto 28px;padding:20px;border:1px solid var(--bordure,rgba(226,194,106,.22));border-radius:20px;background:var(--surface, #121a2e);box-shadow:var(--ombre-carte,0 8px 20px rgba(0,0,0,.15))}
.sde-dyn-filtres{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 18px}
.sde-dyn-filtre{border:1px solid rgba(200,164,81,.4);border-radius:999px;padding:10px 16px;min-height:44px;background:transparent;color:var(--texte,#e8ebf4);cursor:pointer;font:700 .91rem var(--f-texte,system-ui,sans-serif);transition:background .2s ease,color .2s ease,transform .2s ease}
.sde-dyn-filtre[aria-pressed="true"]{background:#c8a451;color:#10121b;border-color:#c8a451}
.sde-dyn-filtre:hover{border-color:#e7c878;transform:translateY(-2px)}
.sde-dyn-filtre:focus-visible,.sde-dyn-recherche input:focus-visible,.sde-dyn-retour:focus-visible{outline:3px solid #e7c878;outline-offset:3px}
.sde-dyn-recherche{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px;text-align:left;font-weight:700;color:var(--texte,#e8ebf4)}
.sde-dyn-recherche span{font-size:.9rem}
.sde-dyn-recherche input{width:100%;min-height:50px;padding:12px 16px;border:1px solid rgba(200,164,81,.48);border-radius:12px;color:var(--texte,#e8ebf4);background:var(--surface-2,#19233b);font:inherit;font-size:16px}
.sde-dyn-recherche input::placeholder{color:var(--texte-2,#abb9d0)}
.sde-dyn-resultats{margin:12px 0 0;text-align:center;color:var(--texte-2,#abb9d0);font-size:.9rem}
.sde-dyn-vide{max-width:660px;margin:12px auto 0;text-align:center;color:var(--texte,#e8ebf4)}
#parcours-sde .sde-parcours-card[hidden],.sde-dyn-retour[hidden],.sde-dyn-vide[hidden]{display:none!important}
.sde-dyn-rdv{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1100px;margin:24px auto;padding:20px 22px;border-left:5px solid #c8a451;border-radius:16px;background:linear-gradient(115deg,#161f38,#31253b);color:#fff;box-shadow:0 9px 25px rgba(3,9,21,.2)}
.sde-dyn-rdv>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.sde-dyn-rdv-label{color:#e7c878;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.sde-dyn-rdv strong{font-size:clamp(1.05rem,2.1vw,1.45rem);line-height:1.3}
.sde-dyn-rdv>div>span:last-child{color:#dae1ed;font-size:.9rem}
.sde-dyn-rdv a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:10px 16px;border-radius:10px;background:#c8a451;color:#10121b!important;font-weight:800;text-decoration:none}
.sde-dyn-rdv a:focus-visible{outline:3px solid #fff;outline-offset:3px}
.sde-dyn-progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:1800;pointer-events:none}
.sde-dyn-progression span{display:block;width:0;height:100%;background:linear-gradient(90deg,#641d2d,#c8a451);transition:width .08s linear}
.sde-dyn-retour{position:fixed;right:20px;bottom:22px;z-index:900;width:48px;height:48px;border:1px solid rgba(200,164,81,.5);border-radius:50%;background:#111e35;color:#e7c878;box-shadow:0 8px 20px rgba(0,0,0,.3);font-size:28px;line-height:1;cursor:pointer}
@media(max-width:1024px){.sde-dyn-retour{bottom:calc(100px + env(safe-area-inset-bottom,0px));right:12px}}
@media(max-width:600px){.sde-dyn-tools{margin:18px 0 22px;padding:14px}.sde-dyn-filtres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sde-dyn-filtre{padding:9px 8px;font-size:.81rem}.sde-dyn-rdv{flex-direction:column;align-items:flex-start;padding:17px}.sde-dyn-rdv a{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.sde-dyn-filtre,.sde-dyn-progression span{transition:none!important}.sde-dyn-filtre:hover{transform:none!important}}
:root[data-motion="reduced"] .sde-dyn-filtre,:root[data-motion="reduced"] .sde-dyn-progression span{transition:none!important}
:root[data-motion="reduced"] .sde-dyn-filtre:hover{transform:none!important}
/* ═══════ RAFFINEMENTS VISUELS ═══════ */
:root { --gutter: clamp(16px, 3vw, 40px); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 5px; }
.enveloppe > *, .mega-menu-cols > *, .vmi > *, .bios > * { min-width: 0; }
.chapo, .hero-sous { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
.tete-section { max-width: 850px; margin-inline: auto; margin-bottom: clamp(28px, 4vw, 48px); }
.tete-section .surtitre { display: inline-flex; align-items: center; gap: 12px; }
.tete-section .surtitre::before, .tete-section .surtitre::after { content: ''; width: 24px; height: 1px; background: currentColor; opacity: .55; }
.hero { min-height: min(900px, calc(100svh - 64px)); padding-block: clamp(72px, 10vw, 120px) 80px; }
.hero-contenu { max-width: 960px; }
.hero h1 { font-size: clamp(2.35rem, 6.2vw, 5.3rem); line-height: 1.04; letter-spacing: .015em; }
.hero-sous { max-width: 650px; line-height: 1.8; }
.hero-badge { padding: 8px 18px; letter-spacing: .06em; }
.hero-fond img { opacity: .32; }
.hero-actions .bouton { min-height: 50px; }
.bento-carte, .resume-carte, .vmi > *, .projet, .ressource-carte { border-color: color-mix(in srgb, var(--or) 18%, var(--bordure)); }
.bento-carte { padding: clamp(22px, 3vw, 34px); }
.bento-carte h3 { font-size: 1.35rem; }
.bento-carte:focus-visible { border-color: var(--or); }
.vmi, .bios, .points, .programmes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pied-grille, .contact-grille { overflow-wrap: anywhere; }
.btn-motion { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.2); border-radius: var(--r); color: #e8ebf4; display: inline-grid; place-items: center; flex-shrink: 0; }
.btn-motion:hover { border-color: #e2c26a; color: #e2c26a; }
.btn-motion[aria-pressed='true'] { background: rgba(226,194,106,.12); border-color: #e2c26a; }
.btn-motion:disabled { cursor: default; }
.nav-membre-mobile { display: none; }
@media (max-width: 480px) {
  .entete .marque small { font-size: .58rem; }
  .entete .marque { gap: 6px; }
  .entete .logo { width: 30px; height: 30px; }
  .entete .marque b { font-size: 1.05rem; }
  .entete .enveloppe { gap: 8px; }
  .btn-theme, .btn-motion, .burger { width: 40px; height: 44px; }
  .hero { padding-top: 64px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .bouton { justify-content: center; white-space: normal; }
  .hero-badge { font-size: .72rem; padding-inline: 12px; }
  .scroll-ind { display: none; }
  .if-compte .cd-nombre { font-size: 1.8rem; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-motion='full'] .galerie-ouvrir img { transition: transform .5s var(--ease); }
  html[data-motion='full'] .galerie-ouvrir:hover img { transform: scale(1.035); }
}
html[data-motion='reduced'] *, html[data-motion='reduced'] *::before, html[data-motion='reduced'] *::after { animation: none !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
html[data-motion='reduced'] { scroll-behavior: auto !important; }
html[data-motion='reduced'] .revele { opacity: 1 !important; transform: none !important; }
html[data-motion='reduced'] .ripple { display: none !important; }

/* ═══════ RECHERCHE & TOAST ═══════ */
.sde-shell-search-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;min-height:42px;border:1px solid rgba(226,194,106,.3);
  padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.04);
  color:#f0d586;font:700 .85rem "Atkinson Hyperlegible",system-ui,sans-serif;cursor:pointer;
}
.sde-shell-search-btn:hover{background:rgba(226,194,106,.14)}
.sde-shell-search-btn svg{width:18px;height:18px;stroke:currentColor;fill:none}
.sde-shell-search-dialog {
  width:min(680px,calc(100% - 28px));
  max-height:min(85svh,700px);
  background:var(--surface,#121a2e);
  color:var(--texte,#e8ebf4);
  border:1px solid rgba(226,194,106,.42);
  border-radius:20px;
  padding:clamp(18px,3vw,28px);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}
.sde-shell-search-dialog::backdrop{background:rgba(3,8,24,.76);backdrop-filter:blur(3px)}
.sde-shell-search-dialog h2{font-size:1.5rem;margin:0 0 8px;color:var(--texte,#e8ebf4)}
.sde-shell-search-dialog p{color:var(--texte-2,#bac6d5);font-size:.88rem;margin:0 0 14px}
.sde-shell-search-dialog .sde-search-controls{display:flex;gap:8px;align-items:center}
.sde-shell-search-dialog input{
  flex:1;min-width:0;width:100%;min-height:48px;
  border:1px solid var(--sde-shell-line);
  border-radius:12px;padding:11px 13px;
  background:var(--surface-2,#19233b);
  color:var(--texte,#e8ebf4);
  font:inherit;font-size:16px;
}
.sde-shell-search-dialog input:focus-visible{outline:3px solid var(--sde-gold);outline-offset:2px}
.sde-search-close{
  border-radius:12px;min-width:44px;min-height:44px;background:var(--surface-2,#19233b);
  color:var(--texte,#e8ebf4);border:1px solid var(--sde-shell-line);font-size:1.35rem;cursor:pointer;
}
.sde-shell-search-results{display:grid;gap:7px;margin:16px 0 4px;overflow-y:auto;max-height:50vh}
.sde-shell-search-results a{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  border-radius:12px;border:1px solid var(--sde-shell-line);
  padding:12px 14px;text-decoration:none;color:var(--texte,#e8ebf4);
  min-height:52px;background:var(--surface-2,#19233b);
}
.sde-shell-search-results a:hover,.sde-shell-search-results a:focus-visible {
  color:var(--or,#e2c26a);border-color:var(--sde-gold);
}
.sde-shell-search-results small{color:var(--texte-2,#bac6d5)}
.sde-shell-search-empty{padding:20px 10px;color:var(--texte-2,#bac6d5)}
.sde-shell-theme {
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid rgba(226,194,106,.32);border-radius:12px;
  color:#f0d586;cursor:pointer;background:transparent;font-size:1.15rem;
}
.sde-shell-toast{
  position:fixed;z-index:1500;right:16px;bottom:calc(92px + env(safe-area-inset-bottom,0px));
  background:#172644;color:#f7f4ed;border:1px solid rgba(226,194,106,.45);
  padding:12px 17px;border-radius:12px;max-width:min(420px,calc(100vw - 32px));
  box-shadow:0 14px 36px rgba(4,12,30,.35);font-weight:700;
}
.sde-shell-reveal{
  transition:opacity .5s var(--sde-ease),transform .5s var(--sde-ease);
}
.sde-shell-motion-ready .sde-shell-reveal:not(.sde-shell-shown){
  opacity:0;transform:translateY(14px);
}
@media (min-width:1025px) {.sde-shell-toast{bottom:24px}}
@media (max-width:1050px) {
  .sde-shell-public-tag{display:none}
}
@media (max-width:720px) {
  body.sde-portal .entete .sde-shell-secure{padding:8px 10px;font-size:.78rem}
  .sde-shell-toolbar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin}
  .sde-shell-toolbar a{flex:none}
  .sde-shell-search-btn .sde-search-desktop-label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sde-shell-reveal,.sde-shell-search-results a,
  body.sde-portal .sde-parcours-card{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}
}

/* ═══════ COMPATIBILITÉ — body.sde-unifie + contenu ancien ═══════ */
/* Le body utilise désormais les styles de portail-unifie.css (fond ivoire,
   typographie Atkinson/Saira). Les sections de contenu qui supposent un
   fond sombre doivent le déclarer explicitement. */
body.sde-unifie .section:nth-child(even) { background: var(--surface, #121a2e); }
body.sde-unifie .hero { color: var(--texte, #e8ebf4); }
body.sde-unifie .cap { color: var(--ivoire, #eef0f5); }

/* Les boutons .bouton récupèrent le style SDE (pas le style portail) */
body.sde-unifie .bouton { font-family: var(--f-texte, "Atkinson Hyperlegible", system-ui, sans-serif); }

/* L'intro de sous-page reste en fond sombre */
body.sde-unifie .sde-intro { color: #f7f4ed; }