/*
  CPAN MONDE — Design tokens & styles partagés
  Palette extraite du logo (assets/images/logo-cpan.webp) :
   - Bleu  #489AFF (dominant, mesuré sur la colombe)
   - Orange #FF7A00 (point médian du dégradé de la flamme)
   - Blanc #FFFFFF (couleur de base neutre)
  Toutes les nuances 50→900 sont dérivées de ces deux valeurs.
  Contrastes vérifiés WCAG AA — voir le brief de refonte pour le détail.

  IMPORTANT : ce fichier est chargé partout avec ?v=2 dans son adresse
  (voir <link rel="stylesheet"> de chaque page). À chaque modification de ce
  fichier, incrémenter ce numéro de version sur les 16 pages qui le
  chargent, sinon les visiteurs ayant déjà visité le site garderont
  l'ancienne feuille de style en cache et verront un rendu cassé.
*/

:root{
  /* --- Neutres --- */
  --white:#FFFFFF;
  --panel:#FFFFFF;
  --surface-page:#FFFFFF;
  --surface:#F7F9FC;
  --surface-2:#EEF2F8;
  --ink:#0B1220;
  --ink-muted:#5B6B82;
  --border:#E2E8F1;

  /* --- Bleu CPAN (logo) --- */
  --blue-50:#F0F7FF;  --blue-100:#DBEBFF; --blue-200:#B2D5FF; --blue-300:#7AB6FF;
  --blue-400:#4297FF; --blue-500:#489AFF; --blue-600:#0065E0; --blue-700:#0050B2;
  --blue-800:#003B85; --blue-900:#002757;

  /* --- Orange CPAN (flamme) --- */
  --orange-50:#FFF7F0;  --orange-100:#FFECDB; --orange-200:#FFD7B2; --orange-300:#FFBA7A;
  --orange-400:#FF9D42; --orange-500:#FF7A00; --orange-600:#E06B00; --orange-700:#B25500;
  --orange-800:#853F00; --orange-900:#572900;

  --shadow-sm: 0 1px 2px rgba(11,18,32,.05), 0 4px 12px -6px rgba(11,18,32,.12);
  --shadow-md: 0 10px 30px -12px rgba(11,18,32,.22);
  --shadow-lg: 0 30px 70px -24px rgba(11,18,32,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 88px;
  --header-h-scrolled: 68px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.font-display{ font-family:'Fraunces','Georgia',serif; }
h1,h2,h3,h4{ font-family:'Fraunces','Georgia',serif; letter-spacing:-0.01em; }

::selection{ background:var(--orange-200); color:var(--ink); }

/* Respecte le scroll-margin pour les ancres sous le header sticky */
section[id], div[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue-600);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--orange-500); flex:none; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:15px; line-height:1; white-space:nowrap;
  padding:14px 26px; border-radius:12px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background:var(--orange-700); color:var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background:var(--orange-800); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-outline{ background:transparent; color:var(--white); border:1.5px solid rgba(255,255,255,.35); }
.btn-outline:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); transform: translateY(-2px); }
.btn-outline-dark{ background:transparent; color:var(--blue-800); border:1.5px solid var(--border); }
.btn-outline-dark:hover{ border-color:var(--blue-600); background:var(--blue-50); transform: translateY(-2px); }
.btn-link{ color:var(--blue-600); font-weight:700; font-size:14.5px; display:inline-flex; align-items:center; gap:6px; }
.btn-link .arrow{ transition: transform .25s var(--ease); }
.btn-link:hover .arrow{ transform: translateX(4px); }

/* ---------- Cartes ---------- */
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card-hover:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }

/* ---------- Header ---------- */
#site-header{
  position:sticky; top:0; z-index:50;
  background:var(--blue-900);
  transition: padding .35s var(--ease), box-shadow .35s var(--ease);
}
#site-header .header-inner{ padding-block:22px; transition: padding .35s var(--ease); }
#site-header.scrolled{ box-shadow: var(--shadow-md); }

#site-header.scrolled .header-inner{ padding-block:12px; }
#site-header .nav-link{
  position:relative; color:rgba(255,255,255,.78); font-weight:500; font-size:14.5px;
  transition: color .2s var(--ease);
}
#site-header .nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--orange-500);
  transform: scaleX(0); transform-origin:left; transition: transform .25s var(--ease);
}
#site-header .nav-link:hover{ color:#fff; }
#site-header .nav-link:hover::after{ transform: scaleX(1); }
#site-header .nav-link[aria-current="page"]{ color:#fff; }
#site-header .nav-link[aria-current="page"]::after{ transform: scaleX(1); }

/* Menu mobile */
#mobile-menu{
  max-height:0; overflow:hidden; opacity:0;
  transition: max-height .4s var(--ease), opacity .3s var(--ease);
  background:var(--blue-900); border-top:1px solid rgba(255,255,255,.08);
}
#mobile-menu.open{ max-height:min(85vh,720px); opacity:1; overflow-y:auto; }
#menu-toggle{ position:relative; width:26px; height:20px; }
#menu-toggle span{
  position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px;
  transition: transform .3s var(--ease), opacity .25s var(--ease), top .3s var(--ease);
}
#menu-toggle span:nth-child(1){ top:0; }
#menu-toggle span:nth-child(2){ top:9px; }
#menu-toggle span:nth-child(3){ top:18px; }
#menu-toggle.open span:nth-child(1){ top:9px; transform:rotate(45deg); }
#menu-toggle.open span:nth-child(2){ opacity:0; }
#menu-toggle.open span:nth-child(3){ top:9px; transform:rotate(-45deg); }

/* ---------- Hero glow (flamme) ---------- */
.hero-glow{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.hero-glow::before, .hero-glow::after{
  content:""; position:absolute; border-radius:50%; filter: blur(70px);
  animation: glow-pulse 7s ease-in-out infinite alternate;
}
.hero-glow::before{
  width:520px; height:520px; left:50%; top:-140px; margin-left:-260px;
  background: radial-gradient(circle, var(--orange-500) 0%, transparent 70%); opacity:.35;
}
.hero-glow::after{
  width:600px; height:600px; right:-200px; bottom:-260px;
  background: radial-gradient(circle, var(--blue-500) 0%, transparent 70%); opacity:.3;
  animation-delay: 1.2s;
}
@keyframes glow-pulse{
  from{ transform:scale(.92); opacity:.28; }
  to{ transform:scale(1.08); opacity:.42; }
}
.flame-flicker{ animation: flame-flicker 3.2s ease-in-out infinite; transform-origin:50% 85%; }
@keyframes flame-flicker{
  0%,100%{ transform:scale(1) rotate(0deg); }
  25%{ transform:scale(1.03) rotate(-1deg); }
  50%{ transform:scale(.98) rotate(0.5deg); }
  75%{ transform:scale(1.02) rotate(-0.5deg); }
}

/* ---------- Reveal au scroll ---------- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--stagger-i, 0) * 80ms); }

/* ---------- Compteurs / barre de progression ---------- */
.progress-track{ height:10px; background:var(--surface-2); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--orange-400), var(--orange-500)); width:0%; transition: width 1.4s var(--ease); border-radius:99px; }

/* ---------- Galerie photo + visionneuse (lightbox) ---------- */
.gallery-item{
  display:block; width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:14px;
  border:1px solid var(--border); padding:0; background:var(--surface); cursor:zoom-in;
  position:relative;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item::after{
  content:"⤢"; position:absolute; right:10px; bottom:10px; width:30px; height:30px; border-radius:8px;
  background:rgba(11,18,32,.55); color:#fff; font-size:14px; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s var(--ease);
}
.gallery-item:hover::after, .gallery-item:focus-visible::after{ opacity:1; }

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(6,10,20,.92);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:min(92vw,920px); max-height:76vh; object-fit:contain; border-radius:12px; box-shadow:var(--shadow-lg); }
.lightbox figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:100%; }
.lightbox figcaption{ color:rgba(255,255,255,.75); font-size:13px; text-align:center; max-width:640px; }
.lightbox-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:22px;
  display:flex; align-items:center; justify-content:center; transition: background .2s var(--ease);
}
.lightbox-btn:hover{ background:rgba(255,255,255,.2); }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
.lightbox-close{
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; font-size:20px;
  display:flex; align-items:center; justify-content:center; transition: background .2s var(--ease);
}
.lightbox-close:hover{ background:rgba(255,255,255,.2); }
@media (max-width:640px){
  .lightbox-btn{ width:38px; height:38px; font-size:18px; }
  .lightbox-prev{ left:6px; } .lightbox-next{ right:6px; }
}

/* ---------- Espace membre : formulaires ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field select{
  width:100%; padding:12px 14px; border:1.5px solid var(--border); border-radius:10px;
  font-size:15px; font-family:inherit; color:var(--ink); background:var(--panel);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px var(--blue-100);
}
.field input.field-invalid, .field select.field-invalid{ border-color:#D64545; }
.field-hint{ font-size:12.5px; color:var(--ink-muted); margin-top:6px; }
.field-error{ font-size:12.5px; color:#B91C1C; margin-top:6px; display:none; }
.field-error.is-visible{ display:block; }

.password-field{ position:relative; }
.password-field input{ padding-right:64px; }
.password-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:12px; font-weight:700; color:var(--blue-600); background:none; border:none; padding:8px;
}
.password-toggle:hover{ color:var(--blue-700); }

.password-strength{ display:flex; gap:4px; margin-top:10px; }
.password-strength-bar{ flex:1; height:4px; border-radius:99px; background:var(--surface-2); transition: background .25s var(--ease); }
.password-strength-bar.filled-weak{ background:#D64545; }
.password-strength-bar.filled-medium{ background:var(--orange-500); }
.password-strength-bar.filled-strong{ background:#1C9A6C; }
.password-strength-label{ font-size:12px; color:var(--ink-muted); margin-top:6px; }

.checkbox-field{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-field input{ margin-top:3px; width:18px; height:18px; accent-color:var(--blue-600); flex:none; }
.checkbox-field label{ font-size:13.5px; color:var(--ink-muted); line-height:1.55; }

/* ---------- Espace membre : alertes ---------- */
.alert{ border-radius:14px; padding:16px 18px; font-size:14px; line-height:1.65; }
.alert-info{ background:var(--blue-50); color:var(--blue-800); border:1px solid var(--blue-200); }
.alert-warning{ background:var(--orange-50); color:var(--orange-800); border:1px solid var(--orange-200); }
.alert-error{ background:#FEF2F2; color:#991B1B; border:1px solid #FECACA; }
.alert-success{ background:#F0FBF6; color:#0F6B47; border:1px solid #BFE8D5; }

/* ---------- Espace membre : icône compte (header) ---------- */
.account-icon{
  position:relative; display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.85);
  font-size:13px; font-weight:600; padding:9px; border-radius:10px;
  transition: background .2s var(--ease), color .2s var(--ease); background:none; border:none;
}
.account-icon:hover{ background:rgba(255,255,255,.08); color:#fff; }
.account-icon svg{ width:22px; height:22px; flex:none; }
.account-icon .account-label{ display:none; }
@media (min-width:1024px){ .account-icon .account-label{ display:inline; } }
.account-icon .account-initials{
  width:26px; height:26px; border-radius:50%; background:var(--orange-500); color:#fff;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;
}

.account-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:210px; background:var(--panel);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:60;
}
.account-menu.open{ opacity:1; visibility:visible; transform:none; }

/* ---------- Sélecteur de langue (header) ---------- */
.lang-switch{
  position:relative; display:flex; align-items:center; gap:6px; color:rgba(255,255,255,.85);
  font-size:13px; font-weight:700; padding:9px; border-radius:10px;
  transition: background .2s var(--ease), color .2s var(--ease); background:none; border:none;
}
.lang-switch:hover{ background:rgba(255,255,255,.08); color:#fff; }
.lang-switch svg{ width:18px; height:18px; flex:none; }
.lang-switch-current{ text-transform:uppercase; letter-spacing:.03em; }
.lang-switch-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:170px; background:var(--panel);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:60;
}
.lang-switch-menu.open{ opacity:1; visibility:visible; transform:none; }
.lang-switch-menu a{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:8px;
  font-size:14px; color:var(--ink); background:none; border:none; font-family:inherit;
}
.lang-switch-menu a:hover{ background:var(--surface); }
.lang-switch-menu a[aria-current="true"]{ color:var(--blue-600); font-weight:700; }
.lang-switch-flag{ font-size:16px; line-height:1; }
.account-menu a, .account-menu button{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:8px;
  font-size:14px; color:var(--ink); background:none; border:none; font-family:inherit;
}
.account-menu a:hover, .account-menu button:hover{ background:var(--surface); }

/* ---------- Espace membre : fenêtre modale ---------- */
.auth-modal{
  position:fixed; inset:0; z-index:210; background:rgba(6,10,20,.72);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.auth-modal[hidden]{ display:none; }
.auth-modal-card{
  background:var(--panel); border-radius:18px; box-shadow:var(--shadow-lg);
  max-width:420px; width:100%; padding:32px 28px; text-align:center; position:relative;
}
.auth-modal-icon{
  width:52px; height:52px; border-radius:50%; background:var(--orange-50); color:var(--orange-600);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px;
}
.auth-modal-card h3{ font-size:19px; margin-bottom:10px; }
.auth-modal-card p{ font-size:14px; color:var(--ink-muted); line-height:1.6; }
.auth-modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background:var(--surface); border:none; color:var(--ink-muted); font-size:16px;
}
.auth-modal-close:hover{ background:var(--surface-2); }

/* ---------- Défi 100 Partenaires : compte à rebours ---------- */
.challenge-box{
  position:relative; color:#fff; border-radius:20px; padding:32px 24px; text-align:center;
  overflow:hidden;
}
.challenge-box.challenge-box-solid{ background:var(--blue-900); }
.challenge-box .eyebrow{ color:var(--orange-300); }
.challenge-box p.lead{ color:rgba(255,255,255,.7); margin-top:10px; }

/* Grille technologique discrète en fond du bloc */
.challenge-box::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(122,182,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,182,255,.06) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 85%);
}
.challenge-box > *{ position:relative; z-index:1; }

.countdown{ display:flex; align-items:center; gap:6px; justify-content:center; margin:28px 0 22px; flex-wrap:wrap; }
.countdown-box{
  position:relative; min-width:78px; padding:14px 10px 12px;
  background:linear-gradient(180deg, rgba(122,182,255,.1), rgba(255,255,255,.03));
  border:1px solid rgba(122,182,255,.4); border-radius:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px -6px rgba(66,151,255,.55);
  animation: countdown-glow 2.6s ease-in-out infinite;
}
.countdown-box:nth-child(2){ animation-delay:.15s; }
.countdown-box:nth-child(3){ animation-delay:.3s; }
.countdown-box:nth-child(4){ animation-delay:.45s; }
.countdown-box .num{
  font-family:'Orbitron','Fraunces',monospace; font-size:30px; font-weight:700; line-height:1; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  text-shadow: 0 0 10px rgba(122,182,255,.85), 0 0 22px rgba(66,151,255,.5);
}
.countdown-box .lbl{
  font-family:'Orbitron','Inter',sans-serif;
  font-size:9px; text-transform:uppercase; letter-spacing:.16em; color:rgba(122,182,255,.75);
  margin-top:6px; display:block;
}
.countdown-sep{
  font-family:'Orbitron',monospace; font-size:22px; font-weight:700; color:rgba(122,182,255,.55);
  align-self:flex-start; margin-top:16px; animation: countdown-blink 1.6s steps(1,end) infinite;
}
@keyframes countdown-glow{
  0%, 100%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px -8px rgba(66,151,255,.45); }
  50%{ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 28px -4px rgba(66,151,255,.75); }
}
@keyframes countdown-blink{ 50%{ opacity:.15; } }
.countdown-ended .countdown{ opacity:.5; }
.countdown-ended .countdown-box{ animation:none; }

.challenge-progress-track{ height:8px; background:rgba(255,255,255,.15); border-radius:99px; overflow:hidden; max-width:360px; margin:0 auto; }
.challenge-progress-fill{
  height:100%; background:linear-gradient(90deg, var(--blue-400), var(--orange-500)); border-radius:99px;
  transition:width 1.4s var(--ease); box-shadow:0 0 10px rgba(66,151,255,.6);
}

@media (prefers-reduced-motion: reduce){
  .countdown-box{ animation:none !important; }
  .countdown-sep{ animation:none !important; }
}

/* ---------- Bandeau "Prochain rendez-vous" ---------- */
.next-event-banner{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg, var(--orange-800), var(--orange-600) 55%, var(--orange-800));
}
.next-event-banner::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
  background-size:240% 100%;
  animation: next-event-sweep 5.5s linear infinite;
}
.next-event-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(122,182,255,.9), transparent);
  background-size:220% 100%;
  animation: next-event-sweep 3.2s linear infinite;
}
@keyframes next-event-sweep{ from{ background-position:220% 0; } to{ background-position:-40% 0; } }

.next-event-inner{ position:relative; z-index:1; }

.next-event-live{ position:relative; width:9px; height:9px; flex:none; }
.next-event-live .dot{ position:absolute; inset:0; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.9); }
.next-event-live .ping{
  position:absolute; inset:0; border-radius:50%; background:#fff;
  animation: next-event-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes next-event-ping{ 0%{ transform:scale(1); opacity:.7; } 100%{ transform:scale(2.8); opacity:0; } }

.next-event-label{
  font-family:'Orbitron','Inter',sans-serif; font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.8);
}
.next-event-text{ text-shadow:0 0 14px rgba(255,255,255,.35); }

@media (prefers-reduced-motion: reduce){
  .next-event-banner::before, .next-event-banner::after, .next-event-live .ping{ animation:none !important; }
}

/* ---------- Bandeau cookies ---------- */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150;
  max-width:600px; margin:0 auto; background:var(--blue-900); color:#fff;
  border-radius:16px; box-shadow:var(--shadow-lg); padding:20px 22px;
  animation: cookie-in .4s var(--ease);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{ font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.85); margin:0; }
.cookie-banner a{ color:#fff; text-decoration:underline; }
.cookie-banner .cookie-actions{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.cookie-banner .cookie-actions > *{ flex:1; white-space:nowrap; }
@keyframes cookie-in{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cookie-banner{ animation:none; } }

/* ---------- Sélecteur de thème (header) ---------- */
.theme-toggle-btn{
  position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; color:rgba(255,255,255,.85); background:none; border:none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.theme-toggle-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
.theme-toggle-btn svg{ width:20px; height:20px; }

.theme-menu{
  position:absolute; top:calc(100% + 10px); right:0; width:250px; background:var(--panel);
  border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg);
  padding:16px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; z-index:60;
}
.theme-menu.open{ opacity:1; visibility:visible; transform:none; }
.theme-menu-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.theme-menu-row p{ font-size:13.5px; font-weight:600; color:var(--ink); margin:0; }

.theme-switch{ position:relative; display:inline-flex; width:42px; height:24px; flex:none; }
.theme-switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.theme-switch-track{
  position:absolute; inset:0; background:var(--surface-2); border-radius:99px;
  transition: background .2s var(--ease);
}
.theme-switch-track::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:var(--shadow-sm); transition: transform .2s var(--ease);
}
.theme-switch input:checked ~ .theme-switch-track{ background:var(--blue-600); }
.theme-switch input:checked ~ .theme-switch-track::after{ transform:translateX(18px); }

.theme-bg-picker{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.theme-bg-picker p{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); margin:0 0 10px; }
.theme-swatches{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.theme-swatch{
  position:relative; height:38px; border-radius:9px; border:2px solid transparent; cursor:pointer;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.theme-swatch:hover{ transform:translateY(-1px); }
.theme-swatch.active{ border-color:var(--blue-500); }
.theme-swatch-ciel{ background:linear-gradient(160deg,#8FC3FF 0%,#EAF4FF 55%,#FFFFFF 100%); }
.theme-swatch-aube{ background:linear-gradient(160deg,#FFD79A 0%,#FF9D5C 45%,#2A2F63 100%); }
.theme-swatch-nuit{ background:radial-gradient(circle at 30% 30%,#3A5A9C 0%,#0B1226 60%,#03040A 100%); }
.theme-swatch-flamme{ background:linear-gradient(160deg,#FF9D42 0%,#8A2E00 45%,#0B0E14 100%); }

/* ---------- Mode sombre : fond paradisiaque ---------- */
.cpan-paradise-bg{
  position:fixed; inset:0; z-index:-1; overflow:hidden; opacity:0; pointer-events:none;
  transition: opacity .5s var(--ease);
}
html[data-theme="dark"] .cpan-paradise-bg{ opacity:1; }
.cpan-bg-layer{ position:absolute; inset:0; opacity:0; transition: opacity .6s var(--ease); background:#05070C; }
html[data-theme="dark"][data-bg="ciel"] .cpan-bg-layer.ciel,
html[data-theme="dark"][data-bg="aube"] .cpan-bg-layer.aube,
html[data-theme="dark"][data-bg="nuit"] .cpan-bg-layer.nuit,
html[data-theme="dark"][data-bg="flamme"] .cpan-bg-layer.flamme{ opacity:1; }

.cpan-bg-layer.ciel{ background:radial-gradient(ellipse 80% 55% at 50% 0%,#2E5C9E 0%,#0C1424 55%,#05070C 100%); }
.cpan-bg-layer.ciel::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 8%, rgba(255,255,255,.5) 0%, transparent 42%);
  filter:blur(10px);
}
.cpan-bg-layer.aube{ background:linear-gradient(180deg,#3A2E6E 0%,#8A3D5C 38%,#E0793C 62%,#0B0E14 100%); }
.cpan-bg-layer.nuit{ background:radial-gradient(circle at 20% 15%,#1B2A55 0%,#080B16 55%,#020306 100%); }
.cpan-bg-layer.nuit::before{
  content:""; position:absolute; inset:0; background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 60% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 45%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.5) 50%, transparent 51%);
  background-size:100% 100%;
}
.cpan-bg-layer.flamme{ background:radial-gradient(ellipse 70% 50% at 50% 100%,#B24A00 0%,#3A1400 45%,#080604 75%,#05070C 100%); }
.cpan-bg-glow{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:.4;
  animation: cpan-glow-pulse 9s ease-in-out infinite alternate;
}
.cpan-bg-layer.ciel .cpan-bg-glow{ width:520px; height:520px; left:50%; top:-160px; margin-left:-260px; background:radial-gradient(circle,#8FC3FF 0%,transparent 70%); }
.cpan-bg-layer.aube .cpan-bg-glow{ width:560px; height:560px; left:50%; bottom:-220px; margin-left:-280px; background:radial-gradient(circle,#FFB25E 0%,transparent 70%); }
.cpan-bg-layer.nuit .cpan-bg-glow{ width:480px; height:480px; right:-160px; top:20%; background:radial-gradient(circle,#4A6BC2 0%,transparent 70%); animation-delay:1s; }
.cpan-bg-layer.flamme .cpan-bg-glow{ width:600px; height:600px; left:50%; bottom:-260px; margin-left:-300px; background:radial-gradient(circle,#FF7A00 0%,transparent 70%); }
@keyframes cpan-glow-pulse{ from{ transform:scale(.9); opacity:.28; } to{ transform:scale(1.06); opacity:.46; } }

/* ---------- Mode sombre : jetons de couleur ---------- */
html[data-theme="dark"]{
  --surface-page: rgba(10,13,22,.62);
  --panel: rgba(20,25,38,.78);
  --surface: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.09);
  --ink: #F3F5FA;
  --ink-muted: rgba(243,245,250,.62);
  --border: rgba(255,255,255,.14);
}
html[data-theme="dark"] body{ background:transparent; }
html[data-theme="dark"] .card{ backdrop-filter: blur(18px); }
html[data-theme="dark"] section.bg-surface-page{ backdrop-filter: blur(10px); }
html[data-theme="dark"] .eyebrow{ color:var(--blue-300); }
html[data-theme="dark"] ::selection{ background:var(--orange-600); color:#fff; }
html[data-theme="dark"] .btn-outline-dark{ color:var(--blue-300); border-color:rgba(255,255,255,.22); }
html[data-theme="dark"] .btn-outline-dark:hover{ border-color:var(--blue-400); background:rgba(66,151,255,.12); }
html[data-theme="dark"] .alert-info{ background:rgba(66,151,255,.12); border-color:rgba(66,151,255,.3); color:#CFE3FF; }
html[data-theme="dark"] .alert-warning{ background:rgba(255,122,0,.12); border-color:rgba(255,122,0,.32); color:#FFD9AD; }
html[data-theme="dark"] .alert-error{ background:rgba(214,69,69,.15); border-color:rgba(214,69,69,.38); color:#FFC9C9; }
html[data-theme="dark"] .alert-success{ background:rgba(28,154,108,.15); border-color:rgba(28,154,108,.38); color:#BDEED7; }
html[data-theme="dark"] .gallery-item{ border-color:var(--border); }
html[data-theme="dark"] .theme-swatch:not(.active){ opacity:.85; }

/* ---------- Transition de page ---------- */
body{ opacity:1; transition: opacity .22s ease; }
body.page-exit{ opacity:0; }

/* ---------- Accessibilité : réduction des animations ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-glow::before, .hero-glow::after{ animation:none !important; }
  .flame-flicker{ animation:none !important; }
  .progress-fill{ transition:none !important; }
  body{ transition:none !important; }
  .cpan-bg-glow{ animation:none !important; }
  * { scroll-behavior:auto !important; }
}

/* ---------- Scrollbar fine (cosmétique, non bloquante) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--surface); }
::-webkit-scrollbar-thumb{ background:var(--blue-200); border-radius:99px; }

/* ---------- Accessibilité : lien « Aller au contenu » ---------- */
.skip-link{
  position:absolute; left:12px; top:-100px; z-index:10000;
  padding:10px 18px; border-radius:8px;
  background:#B25500; color:#fff; font:600 14px/1.2 Inter,system-ui,sans-serif; text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,.35); transition:top .15s;
}
.skip-link:focus{ top:12px; outline:3px solid #fff; outline-offset:2px; }
main[tabindex="-1"]:focus{ outline:none; }