/* ============================================================
   CGROBOTICS — Design System
   Palette : bleu nuit, bleu électrique, cyan, orange/doré (accent)
   ============================================================ */

:root {
  color-scheme: light;
  /* Couleurs de marque */
  --navy-950: #060a1a;
  --navy-900: #0a1128;
  --navy-800: #101a3d;
  --navy-700: #172454;
  --blue-500: #2563eb;
  --blue-400: #3b82f6;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --gold-400: #f5a524;
  --gold-300: #ffc857;
  --white: #ffffff;
  --ink-900: #0b1120;
  --ink-600: #4b5872;
  --ink-400: #8b96ad;

  /* Thème clair (par défaut) */
  --bg-body: #f5f7fc;
  --bg-surface: #ffffff;
  --bg-surface-alt: #eef1fb;
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-400);
  --border-color: rgba(11, 17, 32, 0.08);
  --header-bg: rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 10px 30px -12px rgba(10, 17, 40, 0.18);
  --shadow-card: 0 4px 20px -8px rgba(10, 17, 40, 0.12);

  --gradient-hero: radial-gradient(circle at 15% 20%, rgba(37,99,235,0.55), transparent 45%),
                    radial-gradient(circle at 85% 15%, rgba(34,211,238,0.35), transparent 40%),
                    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-700) 100%);
  --gradient-accent: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
  --gradient-gold: linear-gradient(135deg, var(--gold-400), var(--gold-300));

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

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

[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #070b1a;
  --bg-surface: #0f1730;
  --bg-surface-alt: #131d3c;
  --text-primary: #f2f5ff;
  --text-secondary: #b7c0dd;
  --text-muted: #7c88a8;
  --border-color: rgba(255, 255, 255, 0.08);
  --header-bg: rgba(7, 11, 26, 0.85);
  --shadow-soft: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-body);
  color: var(--text-primary);
  transition: background var(--transition), color var(--transition);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}

p { line-height: 1.7; color: var(--text-secondary); margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { padding: 0; margin: 0; list-style: none; }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--blue-500); color: #fff;
  padding: 10px 16px; z-index: 999; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border-color);
}
/* Le fond et le flou "verre dépoli" sont posés sur ::before plutôt que
   directement sur .site-header. Raison, trouvée en testant le menu mobile en
   direct : un backdrop-filter posé sur un élément fait de cet élément le
   "containing block" de TOUS ses descendants en position:fixed (ici,
   .main-nav en plein écran quand le menu est ouvert) — au lieu de se
   positionner par rapport à l'écran entier, le menu se retrouvait positionné
   par rapport au header lui-même (76px de haut), et ne montrait donc qu'un
   bandeau quasi vide au lieu du menu complet. En déplaçant le flou sur un
   pseudo-élément (un simple descendant, pas le header lui-même), l'effet
   visuel reste identique mais .site-header ne crée plus ce piège. */
.site-header::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text-primary); min-width: 0; overflow: hidden; }
.brand-mark { color: var(--cyan-400); display: flex; flex-shrink: 0; }
/* flex-shrink:0 + width/height explicites (posés en PHP depuis les dimensions
   réelles du fichier, voir includes/header.php) empêchent le header — flex et
   serré sur mobile entre logo, texte, bouton "S'inscrire" et bouton menu — de
   comprimer le logo horizontalement et de le déformer. object-fit:contain et
   max-width sont un filet de sécurité si jamais le ratio calculé était plus
   large que prévu. La hauteur passe par la variable --logo-height (posée en
   inline depuis Admin → Réglages) plutôt que par une propriété height en
   inline : ça permet à la media query ci-dessous de la resserrer sur mobile
   sans rien perdre du réglage admin sur desktop. width:auto recalcule
   toujours la largeur proportionnellement, grâce aux attributs width/height
   HTML qui donnent au navigateur le vrai ratio du fichier. */
.brand-mark-logo { flex-shrink: 0; }
.brand-mark-logo img { height: var(--logo-height, 52px); width: auto; max-width: 200px; display: block; object-fit: contain; }
/* Le nom du site, lui, peut légitimement manquer de place sur un très petit
   écran (logo + "CGROBOTICS" + bouton thème + bouton d'inscription + menu).
   Plutôt que de laisser le texte déborder et se faire recouvrir par les
   boutons suivants (le bug observé), on le laisse se réduire proprement et
   se tronquer avec "…" — dégradation propre au lieu d'un chevauchement visuel. */
.brand-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em;
  flex-shrink: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-year {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-left: 3px;
}

.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a {
  font-size: 0.95rem; font-weight: 500; color: var(--text-secondary);
  position: relative; padding: 6px 0; transition: color var(--transition);
  white-space: nowrap;
}
.main-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--gradient-accent); transition: width var(--transition);
}
.main-nav a:hover, .main-nav a.active { color: var(--text-primary); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.theme-toggle {
  border: 1px solid var(--border-color); background: var(--bg-surface);
  width: 42px; height: 42px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 1.1rem; transition: transform var(--transition), border-color var(--transition);
}
.theme-toggle:hover { transform: scale(1.08); border-color: var(--cyan-400); }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: inline; }

.header-cta { display: none; }
@media (min-width: 900px) { .header-cta { display: inline-flex; } }

.hamburger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); background: var(--bg-surface); cursor: pointer;
}
.hamburger span {
  width: 20px; height: 2px; background: var(--text-primary); margin: 0 auto;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Header responsif (mobile) ----------
   Placé APRÈS .brand/.header-actions/.theme-toggle/.header-cta/.hamburger :
   en CSS, à spécificité égale, c'est l'ordre dans le fichier qui décide, pas
   la position de la media query. Un bloc responsive écrit plus haut que la
   règle de base qu'il doit écraser est silencieusement ignoré — c'est très
   exactement le bug qui a fait revenir le gap à 14px malgré la media query
   lors du test précédent. Valeurs ci-dessous calculées à partir des largeurs
   réellement mesurées sur le site (logo à son ratio natif ~1.61:1, bouton
   "S'inscrire" ~91px pleine taille), pas estimées à l'œil. */
@media (max-width: 960px) {
  .main-nav {
    /* top/right/bottom/left explicites plutôt que le raccourci "inset" :
       ce dernier n'est pas reconnu par certains navigateurs mobiles plus
       anciens (Safari <14.1, Chrome/WebView Android <87) — sans repli, le
       panneau perd son positionnement plein écran et ne montre qu'un
       bandeau au lieu du menu complet, exactement le symptôme observé
       ("fonctionne sur certains téléphones, pas sur d'autres"). */
    position: fixed; top: 76px; right: 0; bottom: 0; left: 0; background: var(--bg-body);
    flex-direction: column; align-items: stretch; padding: 24px; gap: 4px;
    transform: translateX(100%); transition: transform var(--transition);
    overflow-y: auto;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav a { padding: 14px 6px; border-bottom: 1px solid var(--border-color); }
}
@media (min-width: 961px) { .hamburger { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--radius-pill); font-weight: 600;
  font-size: 0.95rem; cursor: pointer; border: none; transition: all var(--transition);
  white-space: nowrap;
}
/* Bug sitewide préexistant (vérifié en direct sur cgrobotics.crte.tech,
   indépendant de la fonctionnalité de paiement) : "display: inline-flex"
   ci-dessus est une règle auteur, qui bat TOUJOURS le [hidden] par défaut du
   navigateur, quelle que soit la spécificité — même cause que les gotchas
   .payment-method-logo[hidden] / .payment-method-fallback[hidden] /
   .payment-step-logo[hidden] documentés plus bas dans ce fichier. Concrètement,
   #prevBtn/#nextBtn/#submitBtn du formulaire d'inscription (voir inscription.js,
   qui bascule leur .hidden selon l'étape courante) restaient TOUS visibles en
   permanence, quelle que soit l'étape — les trois boutons superposés. Cette
   règle corrige tout bouton .btn masqué via l'attribut hidden, site entier. */
.btn[hidden] { display: none; }
.btn-sm { padding: 10px 20px; font-size: 0.88rem; }
.btn-primary {
  background: var(--gradient-accent); color: #fff;
  box-shadow: 0 8px 24px -8px rgba(37,99,235,0.6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(37,99,235,0.75); }
.btn-gold { background: var(--gradient-gold); color: var(--navy-950); box-shadow: 0 8px 24px -8px rgba(245,165,36,0.55); }
.btn-gold:hover { transform: translateY(-2px); }
.btn-outline {
  background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-color);
}
.btn-outline:hover { border-color: var(--cyan-400); color: var(--cyan-400); }
.btn-ghost-light { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.22); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background-image: linear-gradient(160deg, rgba(6,10,26,0.88) 0%, rgba(10,17,40,0.78) 55%, rgba(23,36,84,0.85) 100%), url('/assets/img/hero-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  padding: 150px 0 110px;
}
.hero::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 880px; margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 18px; border-radius: var(--radius-pill); font-size: 0.85rem;
  font-weight: 600; letter-spacing: .04em; margin-bottom: 28px; backdrop-filter: blur(6px);
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 12px var(--cyan-300); }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; margin-bottom: 22px;
}
.hero h1 .accent {
  background: linear-gradient(135deg, var(--cyan-300), var(--gold-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-tagline { font-size: clamp(0.85rem, 1.6vw, 1.05rem); color: rgba(255,255,255,0.85); max-width: 620px; margin: 0 auto 34px; font-style: italic; }

/* Page publique "J'y serai !" — grand format visuel et festif */
.jyserai-hero {
  min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--gradient-hero); color: #fff; padding: 80px 0;
}
.jyserai-title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(3rem, 10vw, 7rem); line-height: 1;
  background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px; animation: jyserai-pop 700ms ease-out;
}
@keyframes jyserai-pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.jyserai-sub { font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: rgba(255,255,255,0.88); max-width: 560px; margin: 0 auto 20px; }
.jyserai-counter { font-size: 1.05rem; color: var(--gold-400); font-weight: 600; margin-bottom: 32px; }
.btn-lg { font-size: 1.15rem; padding: 18px 42px; }
.jyserai-form { max-width: 420px; margin: 32px auto 0; text-align: left; }
.jyserai-confirmed { animation: jyserai-pop 500ms ease-out; }
.jyserai-logo { height: 64px; width: auto; margin: 0 auto 24px; display: block; }
.jyserai-dates { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--cyan-300); font-size: clamp(0.95rem, 2vw, 1.15rem); margin-bottom: 18px; }

.jyserai-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px; }

.project-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; max-width: 820px; }
.project-gallery-item { display: block; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; }
.project-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.project-gallery-item:hover img { transform: scale(1.05); }
.jyserai-wall-card { text-align: center; }
.jyserai-wall-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--bg-surface); box-shadow: var(--shadow-card); margin-bottom: 10px;
}
.jyserai-wall-card p { font-size: 0.85rem; font-weight: 600; margin: 0; color: var(--text-secondary); }

.jyserai-floating-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  background: var(--gradient-gold); color: #1a1200; font-weight: 700; font-size: 0.95rem;
  padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 30px -8px rgba(245,165,36,0.55);
  text-decoration: none; display: flex; align-items: center; gap: 8px;
  transition: transform var(--transition), box-shadow var(--transition);
  animation: jyserai-float-pulse 2.6s ease-in-out infinite;
}
.jyserai-floating-btn:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 36px -8px rgba(245,165,36,0.7); }
@keyframes jyserai-float-pulse {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(245,165,36,0.55); }
  50% { box-shadow: 0 10px 30px -4px rgba(245,165,36,0.85); }
}
@media (max-width: 600px) {
  .jyserai-floating-btn { bottom: 16px; right: 16px; padding: 12px 18px; font-size: 0.85rem; }
}
.hero-credit { font-size: 0.8rem; color: var(--blue-500); font-weight: 600; margin-top: 24px; letter-spacing: .05em; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-bottom: 40px; color: rgba(255,255,255,0.9); font-weight: 500; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* Countdown */
.countdown { display: flex; gap: 14px; justify-content: center; margin: 48px 0 8px; flex-wrap: wrap; }
.countdown-item {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md); padding: 16px 22px; min-width: 90px; backdrop-filter: blur(8px);
}
.countdown-number { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--cyan-300); }
.countdown-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.7); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--bg-surface-alt); }
.section-dark { background: var(--navy-950); color: #fff; }
.section-dark p { color: rgba(255,255,255,0.72); }
.section-header { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-eyebrow {
  display: inline-block; color: var(--blue-500); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; font-size: 0.8rem; margin-bottom: 12px;
}
.section-dark .section-eyebrow { color: var(--cyan-400); }
.section-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; }
.stat-card {
  text-align: center; background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); padding: 36px 20px; box-shadow: var(--shadow-card);
}
.stat-number {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { color: var(--text-secondary); font-weight: 500; margin-top: 6px; }

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.card {
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.card-media { aspect-ratio: 4/3; background: var(--bg-surface-alt); overflow: hidden; position: relative; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }

.team-photo-trio {
  display: flex; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-surface-alt);
}
.team-photo-trio img {
  flex: 1 1 0; min-width: 0; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 400ms ease, filter var(--transition);
  filter: grayscale(15%);
}
.card:hover .team-photo-trio img { transform: scale(1.05); filter: grayscale(0%); }
.card:hover .card-media img { transform: scale(1.06); }

/* Variante pour les photos qu'on ne veut jamais recadrer (ex: portraits de
   robots) — montre l'image entière, quitte à laisser un léger espace vide
   sur les côtés si son format ne correspond pas exactement au cadre. */
.card-media-contain img { object-fit: contain; background: var(--bg-surface-alt); }
.card-badge {
  position: absolute; top: 12px; left: 12px; background: var(--gradient-accent); color: #fff;
  font-size: 0.72rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.card-body p { font-size: 0.92rem; flex: 1; }
.card-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 0.8rem; color: var(--text-muted); }
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-link { margin-top: 16px; font-weight: 600; color: var(--blue-500); display: inline-flex; align-items: center; gap: 6px; }

/* Glass card (glassmorphism léger) */
.glass-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 32px;
}

/* ---------- Timeline (parcours / programme) ---------- */
.timeline { position: relative; max-width: 780px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--blue-500), var(--cyan-400));
}
.timeline-item { position: relative; padding-left: 62px; margin-bottom: 36px; }
.timeline-dot {
  position: absolute; left: 12px; top: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gradient-accent); box-shadow: 0 0 0 6px var(--bg-body);
}
.timeline-time { font-weight: 700; color: var(--blue-500); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .04em; }
.timeline-item h4 { margin: 6px 0 4px; }

.program-day-tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.program-day-tab {
  padding: 10px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-color);
  background: var(--bg-surface); cursor: pointer; font-weight: 600; transition: all var(--transition);
}
.program-day-tab.active { background: var(--gradient-accent); color: #fff; border-color: transparent; }
.program-day-panel { display: none; }
.program-day-panel.active { display: block; }

/* ---------- Prize cards ---------- */
.prize-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 28px; }
.prize-card {
  text-align: center; padding: 44px 28px; border-radius: var(--radius-lg);
  background: var(--bg-surface); border: 1px solid var(--border-color); box-shadow: var(--shadow-card);
  position: relative;
}
.prize-card.rank-1 { border: 1.5px solid var(--gold-400); transform: scale(1.03); box-shadow: 0 16px 40px -14px rgba(245,165,36,0.4); }
.prize-rank {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff;
  background: var(--gradient-gold);
  background-size: cover; background-position: center; position: relative; overflow: hidden;
}
.prize-rank[style*="background-image"]::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(10,17,40,0.45);
}
.prize-rank span { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.prize-card:not(.rank-1) .prize-rank { background: var(--gradient-accent); }
.prize-amount { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin: 10px 0; color: var(--gold-400); }
.prize-items { text-align: left; margin-top: 18px; }
.prize-items li { padding: 6px 0; color: var(--text-secondary); display: flex; gap: 8px; align-items: baseline; }
.prize-items li::before { content: '✓'; color: var(--cyan-400); font-weight: 700; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-card); max-width: 780px; margin: 0 auto;
  /* Réinitialise la couleur du texte au lieu d'hériter celle d'une section
     parente (ex: .jyserai-hero force du texte blanc) — sinon, en thème clair,
     ce fond blanc se retrouve avec du texte blanc hérité, donc invisible. */
  color: var(--text-primary);
}
.form-card h3, .form-card p { color: inherit; }
.form-group { margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }
label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.92rem; }
label .required { color: #e11d48; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password],
input[type=number], input[type=file], select, textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color);
  background: var(--bg-surface-alt); color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}
textarea { min-height: 120px; resize: vertical; }

/* Corrige le texte invisible quand le navigateur remplit automatiquement un
   champ (Nom, Email...) : il impose souvent un fond clair que le site ne
   peut pas changer normalement, ce qui rend le texte blanc illisible. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-surface-alt) inset !important;
  box-shadow: 0 0 0px 1000px var(--bg-surface-alt) inset !important;
  caret-color: var(--text-primary);
  transition: background-color 5000s ease-in-out 0s;
}
.form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 6px; }
.form-error { color: #e11d48; font-size: 0.82rem; margin-top: 6px; }
/* Bug préexistant découvert en construisant la modale de paiement (donc
   présent partout ailleurs sur le site, pas seulement ici) : ".form-card h3,
   .form-card p { color: inherit; }" (voir plus haut) a une spécificité plus
   forte (classe + élément = 0,1,1) que ".form-hint" et ".form-error" seuls
   (classe seule = 0,1,0), et l'emporte donc systématiquement dès que ces
   textes sont des <p> à l'intérieur d'un .form-card — exactement le cas de
   tous les indices d'aide du formulaire d'inscription ("JPG, PNG ou WEBP —
   5 Mo max.", etc.), qui s'affichaient donc dans la couleur de texte
   principale au lieu de la couleur atténuée prévue. Sans rapport avec le
   paiement, mais corrigé au passage avec la même méthode que le reste du
   site : une sélection plus spécifique plutôt qu'un pari sur l'ordre du
   fichier. */
.form-card .form-hint { color: var(--text-muted); }
.form-card .form-error { color: #e11d48; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; }
.radio-card {
  border: 1.5px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; cursor: pointer;
  text-align: center; transition: all var(--transition); background: var(--bg-surface-alt);
}
.radio-card input { display: none; }
.radio-card.selected, .radio-card:has(input:checked) { border-color: var(--blue-400); background: rgba(37,99,235,0.08); }
/* Mise en évidence d'un radio-card requis et non renseigné (voir
   validateCurrentStep dans inscription.js) : son <input> réel est
   display:none (juste au-dessus), donc la bulle de validation native du
   navigateur ne peut pas s'afficher dessus — cette bordure est le seul
   retour visuel disponible pour signaler "il faut choisir une option ici". */
.radio-card.field-invalid { border-color: #e11d48; background: rgba(225,29,72,0.08); }

/* Stepper (inscription) */
.stepper { display: flex; justify-content: space-between; margin-bottom: 44px; max-width: 780px; margin-inline: auto; overflow-x: auto; gap: 4px; }
.step-item { flex: 1; text-align: center; position: relative; min-width: 84px; }
.step-circle {
  width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-surface-alt); border: 2px solid var(--border-color); font-weight: 700; font-size: 0.85rem;
}
.step-item.active .step-circle, .step-item.done .step-circle { background: var(--gradient-accent); color: #fff; border-color: transparent; }
.step-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
.step-item.active .step-label { color: var(--text-primary); }

.team-member-row {
  border: 1.5px solid var(--border-color); border-radius: var(--radius-md);
  padding: 18px; margin-bottom: 16px; background: var(--bg-surface-alt);
}
.team-member-row .form-row:last-of-type { margin-bottom: 14px; }
.member-row-title { font-size: 0.95rem; margin-bottom: 14px; color: var(--text-secondary); }
.member-minor-section {
  border-top: 1px dashed var(--border-color); padding-top: 14px; margin-top: 4px; margin-bottom: 14px;
}
.btn-remove { background: none; border: none; color: #e11d48; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.btn-remove-member {
  color: #e11d48; border-color: #fecdd3; background: transparent;
}
.btn-remove-member:hover { background: #fee2e2; border-color: #e11d48; }
.btn-add-member { margin-top: 8px; }

/* ---------- Étape « Paiement » (inscription) ----------
   Choix délibéré : contrairement au reste du site (qui suit le thème clair/
   sombre via les variables --bg-surface / --text-* etc.), cette étape reste
   TOUJOURS claire, même en mode sombre. C'est la convention quasi universelle
   des interfaces de paiement (Stripe, PayPal, Mobile Money...) : une present-
   ation neutre et prévisible inspire confiance au moment de payer, quel que
   soit le thème du site autour. On utilise donc des couleurs fixes ici plutôt
   que les variables de thème.

   Historique : cette section vivait auparavant dans une modale ouverte juste
   avant la soumission finale (.payment-modal, avec overlay/backdrop/bouton de
   fermeture). Le paiement est désormais une VRAIE étape du parcours (étape 3,
   entre "Équipe" et "Résumé") comme les autres — elle utilise donc simplement
   .form-step comme les autres étapes, avec Suivant/Précédent génériques. La
   carte claire (.payment-step) ne sert plus qu'à distinguer visuellement
   cette étape du reste du formulaire (thème sombre) ; ce n'est plus un
   dialogue superposé, donc plus de position:fixed, de backdrop ni de bouton
   de fermeture à gérer — une simplification bienvenue. */
.payment-step {
  background: #ffffff; color: #101426;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: 32px;
}
.payment-step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.payment-step-logo { height: 40px; width: auto; flex-shrink: 0; }
/* Même gotcha que .payment-method-logo[hidden] plus bas : "img { display:block }"
   (règle globale du site) bat le [hidden] par défaut du navigateur. */
.payment-step-logo[hidden] { display: none; }
.payment-step-header h2 { margin: 0; font-size: 1.3rem; color: #101426; }
.payment-step-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.payment-step h3 { font-size: 0.95rem; color: #101426; margin: 0 0 14px; }
.payment-summary-card { background: #eef1f6; border-radius: var(--radius-md); padding: 18px; }
.payment-summary-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(16, 20, 38, 0.08); font-size: 0.9rem; color: #4b5568;
}
.payment-summary-row:last-child { border-bottom: none; }
.payment-summary-row strong { color: #101426; }
.payment-summary-total { margin-top: 6px; padding-top: 14px; border-top: 1.5px solid rgba(16, 20, 38, 0.12); }
.payment-summary-total strong { color: var(--gold-400); font-size: 1.05rem; }
.payment-amount-box {
  display: flex; justify-content: space-between; align-items: center;
  background: #eef1f6; border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 18px;
}
.payment-amount-box span { font-size: 0.85rem; color: #4b5568; }
.payment-amount-box strong { font-size: 1.15rem; color: var(--gold-400); }
.payment-method-cards { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.payment-amount-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.payment-amount-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.payment-amount-row strong { white-space: nowrap; }
.payment-amount-row span { flex: 1 1 auto; }
.payment-amount-stack .payment-amount-row strong { font-size: 1.05rem; }
.payment-amount-total { padding-top: 10px; border-top: 1.5px solid rgba(16, 20, 38, 0.12); }
.payment-amount-total span { font-weight: 700; color: #101426; }
.payment-amount-total strong { font-size: 1.3rem; }
.payment-fee-note { align-self: flex-start; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; background: #eef1f6; border: 1px dashed rgba(16, 20, 38, 0.25); }
.payment-fee-note span { font-size: 0.8rem; color: #4b5568; }
.payment-fee-note strong { font-size: 1rem; color: var(--gold-400); }
/* Regroupe la carte cliquable et le numéro de l'organisateur à utiliser pour
   ce mode précis (voir inscription.php) : le numéro doit rester sous SON
   logo, pas centré sous toute la rangée — d'où ce wrapper par option plutôt
   que d'ajouter le numéro comme simple frère de .payment-method-cards. */
.payment-method-option { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.payment-method-number { margin: 0; font-size: 0.82rem; font-weight: 700; color: #101426; }
.payment-method-card {
  /* Un peu plus large que les icônes génériques habituelles : les logos
     officiels fournis (bannières Airtel Money / MTN Mobile Money) sont assez
     détaillés — une case trop petite les aurait rendus illisibles. */
  flex: 0 0 auto; width: 104px; height: 64px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #eef1f6; overflow: hidden;
}
.payment-method-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Même gotcha que .payment-method-fallback[hidden] plus bas : la règle
   globale "img { display:block }" (ligne ~88) est une règle auteur qui bat
   systématiquement le [hidden] par défaut du navigateur. Sans cette ligne,
   l'icône de logo cassée resterait visible/mise en page même après
   this.hidden = true dans le onerror de inscription.php. */
.payment-method-logo[hidden] { display: none; }
.payment-method-fallback {
  font-size: 0.68rem; font-weight: 700; text-align: center; line-height: 1.2; color: #fff;
  border-radius: var(--radius-sm); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
}
/* Le "display:flex" ci-dessus, une fois posé par une règle auteur, l'emporte
   toujours sur le style UA par défaut de [hidden] (display:none) — quelle que
   soit la spécificité, une règle auteur bat systématiquement l'agent
   utilisateur. Sans cette ligne, le repli resterait visible en permanence,
   même quand le vrai logo se charge sans erreur. On regagne donc [hidden]
   explicitement, avec une spécificité plus forte que la règle ci-dessus pour
   ne dépendre d'aucun ordre de déclaration. */
.payment-method-fallback[hidden] { display: none; }
.payment-method-fallback-airtel { background: #e30613; }
.payment-method-fallback-mtn { background: #ffcb05; color: #101426; }
.payment-step .form-group { margin-bottom: 18px; }
.payment-step input[type="tel"],
.payment-step input[type="text"] {
  background: #f7f8fb; color: #101426; border: 1.5px solid rgba(16, 20, 38, 0.12);
}
.payment-step label { color: #101426; }
@media (max-width: 640px) {
  .payment-step-body { grid-template-columns: 1fr; gap: 24px; }
  .payment-step { padding: 22px; }
}

/* ---------- Gallery / lightbox ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.gallery-item { border-radius: var(--radius-md); overflow: hidden; cursor: pointer; aspect-ratio: 1; position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.gallery-item:hover img { transform: scale(1.1); }
.lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(6,10,26,0.94); z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); }
.lightbox-close { position: absolute; top: 24px; right: 32px; color: #fff; font-size: 2rem; cursor: pointer; background: none; border: none; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 1.8rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; }
.lightbox-prev { left: 24px; } .lightbox-next { right: 24px; }

/* ---------- Partners ---------- */
.partner-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 24px; }
.partner-card {
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 28px; text-align: center; box-shadow: var(--shadow-card);
}
.partner-card-logo { width: 90px; height: 90px; object-fit: contain; margin: 0 auto 16px; display: block; }
.partner-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.partner-card p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 16px; }

/* Récit continu — page Projets, mise en page éditoriale façon reportage */
.story { max-width: 700px; margin: 0 auto; padding: 0 24px; }
.story-lead {
  font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.4;
  color: var(--text-primary); margin-bottom: 28px;
}
.story p { font-size: 1.05rem; line-height: 1.85; color: var(--text-secondary); margin-bottom: 24px; }
.story-figure { margin: 40px 0; }
.story-figure img {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); display: block;
}
.story-figure figcaption {
  text-align: center; font-weight: 700; color: var(--gold-400); font-family: var(--font-display);
  margin-top: 12px; font-size: 0.95rem;
}
.story-video-caption {
  text-align: center; font-weight: 700; color: var(--gold-400); font-family: var(--font-display);
  margin-top: 40px; margin-bottom: 4px !important; font-size: 1.05rem;
}
.story-video-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.story-video-caption + .story-video-links { margin-top: 16px; }

/* Photo de vision en pleine largeur (sort du couloir de texte étroit) */
.story-figure-full { max-width: 1400px; margin: 48px auto; padding: 0 24px; }
.story-figure-full img {
  width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); display: block;
}
/* Vue eclatee du CGBot : image entiere (pas de recadrage 21/9), qui remplit la carte */
.story-figure-full.cgbot-figure img { aspect-ratio: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .story-figure-full.cgbot-figure { padding: 0 12px; } }
.story-figure-full figcaption {
  text-align: center; font-weight: 700; color: var(--gold-400); font-family: var(--font-display);
  margin-top: 14px; font-size: 1rem;
}

/* Étapes en cartes horizontales : image à gauche, description à droite */
.story-stage-cards { max-width: 1300px; margin: 48px auto; padding: 0 24px; display: flex; flex-direction: column; gap: 36px; }
.story-stage-card {
  display: grid; grid-template-columns: 480px 1fr; gap: 40px; align-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 36px; box-shadow: var(--shadow-card);
}
.story-stage-card img { width: 100%; aspect-ratio: 900/515; object-fit: cover; border-radius: var(--radius-md); display: block; }
.story-stage-card p { font-size: 1.1rem; line-height: 1.8; color: var(--text-secondary); margin: 0; }

.cgbot-parts-heading { font-family: var(--font-display); font-size: 1.15rem; color: var(--gold-400); margin: 28px 0 12px; }
.cgbot-parts-heading:first-child { margin-top: 8px; }
.cgbot-parts-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 8px 24px; }
.cgbot-parts-list li { padding: 8px 0 8px 22px; border-bottom: 1px solid var(--border-color); font-size: 0.95rem; color: var(--text-secondary); position: relative; }
.cgbot-parts-list li::before { content: '▸'; position: absolute; left: 0; color: var(--blue-500); font-weight: 700; }
@media (max-width: 900px) {
  .story-stage-card { grid-template-columns: 1fr; }
  .story-stage-card img { margin-bottom: 12px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: rgba(255,255,255,0.85); padding: 72px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand p { color: rgba(255,255,255,0.6); margin-top: 14px; font-size: 0.9rem; }
.footer-org { font-size: 0.82rem; color: var(--cyan-300) !important; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: .06em; color: #fff; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.65); margin-bottom: 12px; font-size: 0.92rem; transition: color var(--transition); }
.footer-col a:hover { color: var(--cyan-300); }
.footer-admin-link { opacity: 0.5; font-size: 0.8rem; }

/* Utilitaire d'accessibilité : masque visuellement un texte tout en le
   laissant lisible par les lecteurs d'écran (norme "sr-only", réutilisable
   partout ailleurs sur le site si besoin). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icônes "Suivez-nous" : contrairement aux autres liens du footer (chacun
   sur sa propre ligne via ".footer-col a"), Facebook et WhatsApp forment un
   petit groupe d'icônes rondes côte à côte, comme sur la quasi-totalité des
   sites pro. On sélectionne via ".footer-col .footer-social-link" (deux
   classes) plutôt que ".footer-social-link" seul : ça garantit une
   spécificité CSS plus forte que ".footer-col a" (une classe + un type), donc
   ce style l'emporte à coup sûr, indépendamment de l'ordre des règles dans
   le fichier. Le texte ("Facebook", "WhatsApp") reste dans le HTML pour
   l'accessibilité, simplement masqué visuellement via .sr-only — seule
   l'icône est visible. Cette mise en page ne dépend pas de la largeur de la
   colonne : elle reste identique en desktop (colonnes étroites) comme en
   mobile (colonne pleine largeur). */
.footer-col .footer-social-links {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.footer-col .footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}
.footer-col .footer-social-link:hover {
  background: var(--cyan-300);
  color: var(--navy-950);
}
.footer-bottom { padding: 22px 0; text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.45); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Misc ---------- */
.flash-message { padding: 14px 0; text-align: center; font-weight: 600; }
.flash-success { background: #dcfce7; color: #166534; }
.flash-error { background: #fee2e2; color: #991b1b; }
.flash-info { background: #dbeafe; color: #1e40af; }

.badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 700; }
.badge-blue { background: rgba(37,99,235,0.12); color: var(--blue-500); }
.badge-gold { background: rgba(245,165,36,0.14); color: #b45309; }
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: var(--bg-surface-alt); color: var(--text-muted); }

.breadcrumb { padding: 20px 0; font-size: 0.85rem; color: var(--text-muted); }
.breadcrumb a { color: var(--blue-500); }

.page-hero {
  background: var(--gradient-hero); color: #fff; padding: 120px 0 60px; text-align: center;
}
.page-hero h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto; }

/* Variante avec photo de fond floutée, réservée à une page spécifique (ex: inscription)
   via une classe additionnelle — n'affecte pas les autres pages utilisant .page-hero. */
.page-hero-inscription { position: relative; overflow: hidden; }
.page-hero-inscription::before {
  content: '';
  position: absolute; top: -16px; right: -16px; bottom: -16px; left: -16px;
  background-image: url('/assets/img/inscription-bg.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: blur(10px) brightness(0.45) saturate(1.1);
  z-index: 0;
}
.page-hero-inscription .container { position: relative; z-index: 1; }

/* Variante avec photo de fond floutée pour la page Concours (réutilise hero-bg.jpg,
   déjà utilisée sur l'accueil, pour rester cohérent visuellement). */
.page-hero-concours { position: relative; overflow: hidden; }
.page-hero-concours::before {
  content: '';
  position: absolute; top: -16px; right: -16px; bottom: -16px; left: -16px;
  background-image: url('/assets/img/hero-bg.jpg');
  background-size: cover;
  background-position: center 35%;
  filter: blur(10px) brightness(0.45) saturate(1.1);
  z-index: 0;
}
.page-hero-concours .container { position: relative; z-index: 1; }

/* Photos de fond thématiques, une par page, dans le même esprit visuel */
.page-hero-prix::before { background-image: url('/assets/img/heroes/hero-prix.jpg') !important; }
.page-hero-robots::before { background-image: url('/assets/img/heroes/hero-robots.jpg') !important; }
.page-hero-equipes::before { background-image: url('/assets/img/heroes/hero-equipes.jpg') !important; }
.page-hero-reglement::before { background-image: url('/assets/img/heroes/hero-reglement.jpg') !important; }
.page-hero-projets::before { background-image: url('/assets/img/heroes/hero-projets.jpg') !important; }
.page-hero-galerie::before { background-image: url('/assets/img/heroes/hero-galerie.jpg') !important; }
.page-hero-partenaires::before { background-image: url('/assets/img/heroes/hero-partenaires.jpg') !important; }
.page-hero-contact::before { background-image: url('/assets/img/heroes/hero-contact.jpg') !important; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }

[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
[data-animate].in-view { opacity: 1; transform: translateY(0); }

.table-responsive { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); border-radius: var(--radius-md); overflow: hidden; }
table.data-table th, table.data-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
table.data-table th { background: var(--bg-surface-alt); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: .04em; color: var(--text-muted); }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.pagination a, .pagination span { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); font-weight: 600; font-size: 0.88rem; }
.pagination a:hover { border-color: var(--blue-400); }
.pagination .current { background: var(--gradient-accent); color: #fff; border-color: transparent; }

.confirmation-card { max-width: 680px; margin: 0 auto; text-align: center; }
.confirmation-icon { width: 90px; height: 90px; border-radius: 50%; background: #dcfce7; color: #16a34a; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; margin: 0 auto 24px; }
.reg-number { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-500); margin: 14px 0; }
.confirmation-notice {
  background: rgba(37,99,235,0.08); border: 1.5px solid rgba(37,99,235,0.25); border-radius: var(--radius-md);
  padding: 16px 20px; margin: 20px 0; font-weight: 600; color: var(--blue-500); font-size: 0.95rem;
}
.confirmation-notice-success { background: #dcfce7; border-color: rgba(22,163,74,0.3); color: #166534; }
.confirmation-notice-error { background: #fee2e2; border-color: rgba(225,29,72,0.3); color: #991b1b; }
.confirmation-details { text-align: left; background: var(--bg-surface-alt); border-radius: var(--radius-md); padding: 24px; margin: 24px 0; }
.confirmation-details dl { display: grid; grid-template-columns: 160px 1fr; row-gap: 10px; }

.reglement-table { width: 100%; border-collapse: collapse; margin: 20px 0 32px; }
.reglement-table th, .reglement-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-color); }
.reglement-table th { color: var(--text-secondary); font-weight: 700; background: var(--bg-surface-alt); }
.reglement-table td:last-child, .reglement-table th:last-child { text-align: right; font-weight: 700; color: var(--blue-500); }

.section ul { margin: 0 0 24px; padding-left: 22px; }
.section ul li { margin-bottom: 12px; line-height: 1.6; }
.section ul li:last-child { margin-bottom: 0; }

.epreuve-block { margin-bottom: 40px; }
.epreuve-img { width: 100%; max-width: 300px; border-radius: var(--radius-md); display: block; margin: 0 0 18px; }
.epreuve-block h4 { margin-bottom: 10px; }

.contact-map { margin-top: 32px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.contact-map iframe { display: block; }
.confirmation-details dt { font-weight: 600; color: var(--text-muted); }
.confirmation-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }

/* ---------- Ticket / confirmation : couleurs de l'affiche (noir, rouge, blanc, jaune) ---------- */
@media screen {
  .confirmation-card { background: #0a0a0f; color: #fff; border-radius: 20px; padding: 36px 28px; border-top: 6px solid #c80000; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6); }
  .ticket-head { margin: 0 0 18px; }
  .ticket-eyebrow { color: #e11d24; font-weight: 800; letter-spacing: .3em; font-size: .8rem; text-transform: uppercase; }
  .ticket-title { color: #fff; font-weight: 800; line-height: 1.1; font-size: 1.9rem; margin-top: 6px; text-transform: uppercase; }
  .ticket-title span { color: #e11d24; display: block; }
  .confirmation-card h1 { color: #fff; }
  .confirmation-card > p { color: #d4d4dc; }
  .confirmation-icon { background: #e11d24; color: #fff; }
  .reg-number { display: inline-block; background: #17171d; color: #ffc800; padding: 10px 22px; border-radius: 12px; border-left: 4px solid #e11d24; }
  .confirmation-notice { background: #17171d; border-color: rgba(225,29,36,0.5); color: #fff; }
  .confirmation-notice-success { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); color: #86efac; }
  .confirmation-notice-error { background: rgba(225,29,36,0.15); border-color: rgba(225,29,36,0.6); color: #fca5a5; }
  .confirmation-details { background: #17171d; }
  .confirmation-card .confirmation-details dt { color: #9a9aa8; }
  .confirmation-card .confirmation-details dd { color: #fff; }
  .confirmation-card .badge-gold { background: rgba(255,200,0,0.15); color: #ffc800; }
  .confirmation-card .badge-green { background: rgba(34,197,94,0.18); color: #86efac; }
  .confirmation-card .badge-red { background: rgba(225,29,36,0.2); color: #fca5a5; }
  #qrcode-container canvas, #qrcode-container img { background: #fff; padding: 14px; border-radius: 14px; box-sizing: content-box; }
  .confirmation-card .form-hint { color: #9a9aa8; }
  .confirmation-card .btn-outline { color: #fff; border-color: rgba(255,255,255,0.35); }
  .confirmation-card .btn-primary { background: #e11d24; background-image: none; color: #fff; }
}

/* ---------- Repli pour navigateurs sans support de aspect-ratio ---------- */
/* Safari < 15 (iOS 14 et antérieur, encore répandu sur certains téléphones)
   ignore la propriété aspect-ratio : sans cette règle, ces conteneurs (des
   <div> sans dimension intrinsèque) s'effondrent à hauteur nulle, et l'image
   à l'intérieur (height:100% d'un parent à hauteur indéterminée) disparaît
   avec eux — d'où une galerie/cartes visuellement vides sur ces appareils,
   alors que tout fonctionne normalement sur un navigateur récent. On retombe
   ici sur la technique classique du padding-bottom en pourcentage, qui donne
   la même hauteur par un calcul indépendant du support de aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
  .gallery-item { height: 0; padding-bottom: 100%; }
  .gallery-item img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

  .project-gallery-item { height: 0; padding-bottom: 75%; position: relative; }
  .project-gallery-item img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

  .card-media { height: 0; padding-bottom: 75%; }
  .card-media img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
}

@media print {
  .site-header, .site-footer, .confirmation-actions, .no-print { display: none !important; }

  /* Ticket compact : tout doit tenir sur une seule page à l'impression. */
  @page { margin: 12mm; size: auto; }
  html, body { background: #fff !important; }
  .section { padding: 0 !important; }
  .container.confirmation-card { max-width: 100%; margin: 0; }

  .confirmation-card img[alt="CGROBOTICS"] { height: 44px !important; margin-bottom: 10px !important; }
  .confirmation-icon { width: 52px; height: 52px; font-size: 1.6rem; margin: 0 auto 10px; }
  .confirmation-card h1 { font-size: 1.4rem; margin-bottom: 6px; }
  .confirmation-card > p { font-size: 0.82rem; margin-bottom: 10px; }
  .confirmation-notice { padding: 10px 14px; margin: 10px 0; font-size: 0.82rem; }
  .reg-number { font-size: 1.3rem; margin: 8px 0; }
  .confirmation-details { padding: 14px; margin: 12px 0; }
  .confirmation-details dl { row-gap: 5px; grid-template-columns: 130px 1fr; }
  .confirmation-details dt, .confirmation-details dd { font-size: 0.82rem; }
  #qrcode-container { margin: 14px 0 !important; }
  #qrcode-container canvas, #qrcode-container img { width: 130px !important; height: 130px !important; }
  .form-hint { font-size: 0.72rem; }
}

/* ---------- Header responsif (mobile) ----------
   Placé tout en bas du fichier ET avec le préfixe ".site-header" sur chaque
   sélecteur : ce n'était pas suffisant à soi seul. En CSS, à spécificité
   ÉGALE, c'est l'ordre dans le fichier qui décide — et deux bugs successifs
   sont venus de règles de même spécificité que la base (.header-actions,
   puis .btn-sm) placées trop tôt. Plutôt que de dépendre indéfiniment de la
   position dans le fichier (fragile : n'importe quel ajout futur au-dessus
   peut recasser l'ordre), chaque règle ci-dessous est délibérément rendue
   PLUS SPÉCIFIQUE que ce qu'elle doit écraser (ex. ".site-header .header-cta"
   à deux classes bat ".btn-sm" à une seule, quel que soit l'ordre) : elle
   gagne par construction, pas par chance de position. Valeurs calculées à
   partir des largeurs réellement mesurées sur le site (logo à son ratio
   natif ~1.61:1, bouton "S'inscrire" ~91px pleine taille), et vérifiées en
   conditions réelles sur les largeurs CSS de tous les iPhone en circulation
   (320 à 430px) et sur les gammes Android courantes (360-412px). */
@media (max-width: 480px) {
  /* Priorité confirmée : le nom du site reste toujours entièrement lisible.
     C'est le logo qui cède le plus de place (il reste identifiable réduit),
     pas le texte — la troncature "…" sur .brand-text plus haut ne reste
     qu'un filet de sécurité pour un futur logo au ratio inhabituel. */
  .site-header .container { padding: 0 14px; }
  .site-header .header-inner { gap: 14px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark-logo img { height: 34px; }
  .site-header .brand-text { font-size: 1rem; }
  .site-header .header-actions { gap: 8px; }
}
@media (max-width: 400px) {
  /* Sous ~400px (iPhone standard 390/393px, la plupart des Android
     360-412px), même un logo à 34px ne laisse plus assez de place pour
     garder aussi le bouton mode sombre/clair à côté du nom complet et du
     bouton d'inscription. Le bouton thème (le moins essentiel des trois)
     cède sa place ici ; le nom du site et le bouton d'inscription restent,
     eux, toujours pleinement affichés, jusqu'à 320px de large (iPhone SE
     1ère génération, le plus petit iPhone encore en circulation). */
  .site-header .theme-toggle { display: none; }
  .site-header .header-cta { padding: 8px 12px; }
  .site-header .header-inner { gap: 10px; }
  .site-header .header-actions { gap: 6px; }
}
@media (max-width: 340px) {
  /* Filet de sécurité supplémentaire pour les très rares écrans sous
     340px : quelques pixels de plus repris sur les marges et le bouton
     d'inscription. */
  .site-header .container { padding: 0 10px; }
  .site-header .header-cta { padding: 8px 10px; }
  .site-header .header-actions { gap: 4px; }
}

/* ---------- Zoom d'image (assets/js/zoom.js) ---------- */
.zoom-wrap { position: relative; }
.zoom-badge {
  position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px;
  background: rgba(16, 20, 38, 0.82); color: #fff; font-size: 0.85rem; font-weight: 600;
  pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.zoom-wrap:hover .zoom-badge, .zoom-wrap:focus-visible .zoom-badge { background: var(--gold-400, #f5a623); color: #101426; }
.zoom-wrap:focus-visible { outline: 3px solid var(--gold-400, #f5a623); outline-offset: 4px; border-radius: var(--radius-lg); }
.zoom-viewer { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(5, 8, 18, 0.95); }
.zoom-viewer.open { display: block; }
body.zoom-open { overflow: hidden; }
.zoom-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; display: flex; align-items: center; justify-content: center; cursor: grab; }
.zoom-viewer.is-zoomed .zoom-stage { cursor: grabbing; }
.zoom-img {
  max-width: 96vw; max-height: 86vh; width: auto; height: auto; background: #fff; border-radius: 12px;
  user-select: none; -webkit-user-drag: none; will-change: transform; transform-origin: center center;
}
.zoom-toolbar { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; z-index: 2; }
.zoom-toolbar button {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(16, 20, 38, 0.82); color: #fff; font-size: 1.25rem; font-weight: 700; cursor: pointer;
}
.zoom-toolbar button:hover, .zoom-toolbar button:focus-visible { background: var(--gold-400, #f5a623); color: #101426; outline: none; }
.zoom-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(16, 20, 38, 0.82); text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); pointer-events: none; max-width: 92vw; transition: opacity .3s; }
.zoom-viewer.is-zoomed .zoom-hint { opacity: 0; }

/* ---------- Ticket imprimé / PDF : mise en page professionnelle (A4, noir / rouge / blanc) ---------- */
@media screen { .ticket-print-foot { display: none; } }
@media print {
  @page { margin: 0; size: A4 portrait; }
  html, body { margin: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .container.confirmation-card { max-width: 100%; padding: 0; margin: 0; background: #fff; color: #0a0a0f; border: 0; box-shadow: none; border-radius: 0; text-align: left; }
  .ticket-band { background: #0a0a0f; padding: 12mm 16mm 9mm; border-bottom: 3mm solid #c80000; display: flex; align-items: center; justify-content: space-between; gap: 10mm; }
  .confirmation-card .ticket-band img[alt="CGROBOTICS"] { height: 18mm !important; width: auto; margin: 0 !important; display: block; }
  .ticket-head { display: block !important; text-align: right; margin: 0; }
  .ticket-eyebrow { color: #e11d24; font-size: 9pt; }
  .ticket-title { color: #fff; font-size: 19pt; font-weight: 800; line-height: 1.1; margin-top: 2mm; text-transform: uppercase; }
  .ticket-title span { color: #e11d24; display: block; }
  .ticket-eyebrow { font-weight: 800; letter-spacing: .3em; text-transform: uppercase; }
  .container.confirmation-card { min-height: 296mm; display: flex; flex-direction: column; }
  .ticket-print-foot { margin-top: auto !important; }
  .jyserai-fab, [class*="jyserai"] { display: none !important; }
  .confirmation-icon, .confirmation-notice, .confirmation-card > p { display: none !important; }
  .confirmation-card h1 { color: #0a0a0f; font-size: 20pt; margin: 9mm 16mm 0; text-transform: uppercase; letter-spacing: .04em; }
  .ticket-body { display: grid; grid-template-columns: 1fr 62mm; gap: 9mm; padding: 6mm 16mm 4mm; align-items: start; }
  .reg-number { display: block; background: none; color: #c80000; font-size: 22pt; margin: 0 0 5mm; padding: 0 0 0 4mm; border-left: 3mm solid #c80000; }
  .confirmation-details { background: #f4f4f6; border-radius: 3mm; padding: 6mm; margin: 0; }
  .confirmation-details dl { grid-template-columns: 30mm 1fr; row-gap: 3mm; }
  .confirmation-card .confirmation-details dt { color: #666; font-size: 9pt; }
  .confirmation-card .confirmation-details dd { color: #0a0a0f; font-size: 10.5pt; font-weight: 600; }
  .ticket-qr { text-align: center; border: .5mm solid #0a0a0f; border-radius: 4mm; padding: 6mm 4mm; }
  #qrcode-container { margin: 0 0 3mm !important; justify-content: center; }
  #qrcode-container canvas, #qrcode-container img { width: 48mm !important; height: 48mm !important; padding: 0 !important; background: none !important; border-radius: 0 !important; }
  .confirmation-card .form-hint { font-size: 8pt; color: #555; margin: 0; }
  .ticket-print-foot { display: block; margin-top: 10mm; background: #c80000; color: #fff; padding: 7mm 16mm; font-size: 10pt; line-height: 1.6; }
  .ticket-print-foot strong { color: #ffc800; }
}