/*
 * kokrea.art — main.css (production)
 * CSS global complet — tous les styles extraits des fichiers PHP
 * Éco-conçu : variables CSS, reset minimal, pas de !important
 * Accessible : WCAG AA, focus visible, aria-friendly
 * Auteur : Pierre-Yves Huan | design9 | contact@design9.fr
 */

/* ═══════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES
═══════════════════════════════════════════════════════════ */
:root {
  /* Couleurs */
  --c-dark:    #071420;
  --c-mid:     #0d2238;
  --c-ocean:   #1a3a5c;
  --c-sand:    #d4b896;
  --c-salt:    #f0ebe3;
  --c-gold:    #c4923a;
  --c-gold-h:  #a67830;
  --c-green:   #2d5a3d;
  --c-green-l: #4caf82;
  --c-coral:   #c4573a;
  --c-blue:    #3a82c4;
  --c-muted:   rgba(212,184,150,.45);
  --c-border:  rgba(212,184,150,.15);
  --c-surface: rgba(13,34,56,.65);

  /* Typographie */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Josefin Sans', system-ui, -apple-system, sans-serif;

  /* Espacements */
  --sp-xs:  .25rem;
  --sp-sm:  .5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2.5rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;

  /* Bordures */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-full: 9999px;

  /* Ombres */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.45);

  /* Transitions */
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .45s ease;

  /* Layout */
  --max-w:      1100px;
  --max-w-text: 680px;

  /* Images WebP */
  --img-hero:    url('../img/hero-noirmoutier.webp');
  --img-nm-hero: url('../img/noirmoutier-hero.webp');
  --img-gois:    url('../img/gois.webp');
  --img-chateau: url('../img/chateau-noirmoutier.webp');
  --img-salines: url('../img/salines.webp');
  --img-sunset:  url('../img/noirmoutier-sunset.webp');
  --img-cta:     url('../img/cta-bg.webp');
}

/* ═══════════════════════════════════════════════════════════
   2. RESET
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  background: var(--c-dark);
  color: var(--c-salt);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}
img, video, svg { display: block; max-width: 100%; }
a  { color: inherit; }
ul, ol { list-style: none; }
table  { border-collapse: collapse; }
button, input, select, textarea { font: inherit; border: none; background: none; color: inherit; }

/* ═══════════════════════════════════════════════════════════
   3. ACCESSIBILITÉ
═══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; top: -100%; left: var(--sp-md);
  background: var(--c-gold); color: var(--c-dark);
  padding: var(--sp-sm) var(--sp-md);
  font-size: .85rem; font-weight: 600;
  border-radius: var(--radius-sm); z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-md); }
.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;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-data: reduce) {
  .parallax-bg { background-image: none !important; }
  .particles   { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   4. TYPOGRAPHIE
═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 300; line-height: 1.15; color: var(--c-salt);
}
h1 { font-size: clamp(2rem,6vw,4rem); }
h2 { font-size: clamp(1.5rem,4vw,2.6rem); }
h3 { font-size: clamp(1.1rem,2.5vw,1.6rem); }
h4 { font-size: 1.1rem; }
p  { max-width: 70ch; }

.t-display { font-family: var(--f-display); font-style: italic; color: var(--c-sand); }
.t-label   { font-size: .58rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold); display: block; margin-bottom: .5rem; }
.t-muted   { color: var(--c-muted); }
.t-gold    { color: var(--c-gold); }
.t-green   { color: var(--c-green-l); }
.t-coral   { color: var(--c-coral); }
.t-sand    { color: var(--c-sand); }
.t-center  { text-align: center; }
.t-serif   { font-family: var(--f-display); }
.t-italic  { font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   5. LAYOUT
═══════════════════════════════════════════════════════════ */
.container    { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--sp-lg); }
.container-sm { max-width: var(--max-w-text); margin-inline: auto; padding-inline: var(--sp-lg); }
.section      { padding-block: var(--sp-3xl); }
.section-alt  { background: rgba(240,235,227,.025); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }

.grid-2    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.grid-3    { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
.grid-4    { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--sp-md); }

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-xs { gap: var(--sp-xs); }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }

/* ═══════════════════════════════════════════════════════════
   6. NAVBAR (public)
═══════════════════════════════════════════════════════════ */
.navbar {
  position: relative; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md) var(--sp-xl);
  border-bottom: 1px solid rgba(212,184,150,.07);
}
.navbar-fixed {
  position: fixed; top: 0; left: 0; right: 0;
  background: rgba(7,20,32,.92);
  backdrop-filter: blur(12px);
  z-index: 200;
}
.navbar-brand { text-decoration: none; line-height: 1; }
.navbar-logo  {
  font-family: var(--f-display);
  font-size: 1.6rem; font-weight: 300; letter-spacing: .04em; color: var(--c-salt);
}
.navbar-logo span { color: var(--c-gold); }
.navbar-tagline {
  font-size: .5rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--c-muted); display: block; margin-top: .1rem;
}

/* Nav links desktop */
.nav-links {
  display: flex; align-items: center; gap: var(--sp-lg);
}
.nav-link {
  font-size: .63rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--c-muted); text-decoration: none; transition: color var(--t-base);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--c-sand); }
.nav-link.active { color: var(--c-gold); }

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px; cursor: pointer;
  padding: 8px; background: none; border: none;
  width: 40px; height: 40px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--c-sand); border-radius: 1px;
  transition: transform var(--t-base), opacity var(--t-base);
  pointer-events: none;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: rgba(7,20,32,.97);
    backdrop-filter: blur(16px);
    flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-xl); z-index: 199;
    padding: var(--sp-xl);
  }
  .nav-links.nav-open { display: flex; }
  .nav-links .nav-link { font-size: 1.1rem; letter-spacing: .15em; }
  .nav-links .btn { font-size: .85rem; padding: .9rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════
   7. ADMIN SIDEBAR
═══════════════════════════════════════════════════════════ */
.admin-layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex-shrink: 0;
  background: rgba(13,34,56,.97);
  border-right: 1px solid var(--c-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; overflow-y: auto;
}
.sidebar-brand { padding: 1.3rem 1.2rem .9rem; border-bottom: 1px solid var(--c-border); }
.sidebar-logo  { font-family: var(--f-display); font-size: 1.15rem; font-weight: 300; color: var(--c-sand); }
.sidebar-logo span { color: var(--c-gold); }
.sidebar-sub   { font-size: .5rem; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); display: block; margin-top: .15rem; }

.sidebar-nav { flex: 1; padding: .8rem 0; }
.sidebar-section { font-size: .48rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-muted); padding: .75rem 1.2rem .28rem; }

.sidebar-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem 1.1rem;
  color: rgba(212,184,150,.62); text-decoration: none;
  font-size: .7rem; letter-spacing: .07em;
  transition: all var(--t-fast);
  border-left: 2px solid transparent;
}
.sidebar-link:hover  { color: var(--c-sand); background: rgba(212,184,150,.04); }
.sidebar-link.active { color: var(--c-gold); border-left-color: var(--c-gold); background: rgba(196,146,58,.06); }
.sidebar-link .si    { font-size: .95rem; width: 1.1rem; text-align: center; flex-shrink: 0; }
.sidebar-link .badge-count {
  margin-left: auto;
  background: var(--c-coral); color: #fff;
  border-radius: var(--radius-full);
  font-size: .52rem; padding: .1rem .38rem;
  min-width: 18px; text-align: center;
}

/* Geo nav in sidebar */
.geo-nav { padding: .8rem 1rem; border-top: 1px solid var(--c-border); }
.geo-nav-title { font-size: .48rem; letter-spacing: .28em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.geo-btn {
  display: block; width: 100%; text-align: left;
  padding: .38rem .7rem; font-size: .65rem; color: var(--c-muted);
  background: none; border: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--t-fast); text-decoration: none;
}
.geo-btn:hover  { background: rgba(212,184,150,.06); color: var(--c-sand); }
.geo-btn.active { background: rgba(58,130,196,.1); color: var(--c-blue); border: 1px solid rgba(58,130,196,.25); }

.sidebar-footer { padding: .9rem 1.1rem; border-top: 1px solid var(--c-border); font-size: .62rem; color: var(--c-muted); }
.sidebar-footer a { color: var(--c-coral); text-decoration: none; }
.sidebar-footer a:hover { color: var(--c-sand); }

/* Admin main area */
.admin-main { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.admin-topbar {
  background: rgba(13,34,56,.97); border-bottom: 1px solid var(--c-border);
  padding: .9rem 1.8rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem;
  position: sticky; top: 0; z-index: 50;
}
.admin-title { font-family: var(--f-display); font-size: 1.35rem; font-weight: 300; color: var(--c-sand); }
.breadcrumb  { font-size: .62rem; color: var(--c-muted); display: flex; align-items: center; gap: .4rem; }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-sand); }
.breadcrumb-sep { color: var(--c-border); }
.admin-content { padding: 1.5rem 1.8rem; flex: 1; }

@media (max-width: 900px) {
  .sidebar     { transform: translateX(-100%); transition: transform var(--t-base); }
  .sidebar.open { transform: translateX(0); }
  .admin-main  { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════
   8. BOUTONS
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-sm); padding: .75rem 1.75rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--t-base);
  border: 1px solid transparent; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary {
  background: linear-gradient(135deg,var(--c-gold),var(--c-gold-h));
  color: var(--c-dark); border-color: transparent;
}
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(196,146,58,.42);
  filter: brightness(1.06);
}
.btn-secondary  { background: none; border-color: var(--c-border); color: var(--c-sand); }
.btn-secondary:hover, .btn-secondary:focus-visible { border-color: var(--c-gold); color: var(--c-gold); }
.btn-success    { background: rgba(45,90,61,.2); border-color: rgba(45,90,61,.5); color: var(--c-green-l); }
.btn-danger     { background: rgba(196,87,58,.15); border-color: rgba(196,87,58,.4); color: var(--c-coral); }
.btn-danger:hover { background: rgba(196,87,58,.28); }
.btn-blue       { background: rgba(58,130,196,.2); border-color: rgba(58,130,196,.3); color: var(--c-blue); }
.btn-blue:hover { background: rgba(58,130,196,.32); }
.btn-ghost      { background: none; border: none; color: var(--c-muted); padding: var(--sp-sm); font-size: .7rem; }
.btn-ghost:hover { color: var(--c-sand); }
.btn-sm  { padding: .4rem .9rem; font-size: .6rem; letter-spacing: .15em; }
.btn-lg  { padding: 1rem 2.5rem; font-size: .78rem; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════
   9. FORMULAIRES
═══════════════════════════════════════════════════════════ */
.form-group { margin-bottom: var(--sp-md); }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.form-label {
  display: block; font-size: .58rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--c-muted); margin-bottom: .35rem;
}
.form-required { color: var(--c-coral); margin-left: 2px; }
.form-hint  { font-size: .65rem; color: var(--c-muted); margin-top: .3rem; }
.form-error { font-size: .68rem; color: var(--c-coral); margin-top: .3rem; }
.form-control {
  width: 100%;
  background: rgba(240,235,227,.06); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); color: var(--c-salt);
  font-size: .9rem; padding: .65rem .9rem;
  outline: none; transition: border-color var(--t-base), box-shadow var(--t-base);
  -webkit-appearance: none;
}
.form-control:focus        { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(196,146,58,.12); }
.form-control::placeholder { color: rgba(212,184,150,.28); }
textarea.form-control   { resize: vertical; min-height: 90px; }
select.form-control option { background: var(--c-mid); color: var(--c-salt); }
.form-check {
  display: flex; align-items: center; gap: var(--sp-sm);
  cursor: pointer; font-size: .82rem; color: var(--c-sand);
}
.form-check input { accent-color: var(--c-gold); width: 1rem; height: 1rem; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════
   10. ALERTES & BADGES
═══════════════════════════════════════════════════════════ */
.alert {
  padding: .8rem 1rem; border-radius: var(--radius-sm);
  font-size: .82rem; line-height: 1.5;
  display: flex; align-items: flex-start; gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.alert-icon    { flex-shrink: 0; }
.alert-success { background: rgba(76,175,130,.12); border: 1px solid rgba(76,175,130,.3); color: var(--c-green-l); }
.alert-error   { background: rgba(196,87,58,.12);  border: 1px solid rgba(196,87,58,.3);  color: #f0a080; }
.alert-info    { background: rgba(58,130,196,.1);   border: 1px solid rgba(58,130,196,.28); color: #8ab8e8; }
.alert-warning { background: rgba(196,146,58,.1);   border: 1px solid rgba(196,146,58,.28); color: var(--c-sand); }

.badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem; border-radius: var(--radius-full);
  font-size: .58rem; letter-spacing: .06em; border: 1px solid currentColor;
}
.badge-gold  { color: var(--c-gold);    background: rgba(196,146,58,.1); }
.badge-green { color: var(--c-green-l); background: rgba(76,175,130,.1); }
.badge-coral { color: var(--c-coral);   background: rgba(196,87,58,.1); }
.badge-blue  { color: var(--c-blue);    background: rgba(58,130,196,.1); }
.badge-muted { color: var(--c-muted);   background: rgba(240,235,227,.05); border-color: var(--c-border); }

/* ═══════════════════════════════════════════════════════════
   11. CARDS — toute la surface cliquable
═══════════════════════════════════════════════════════════ */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.card-header {
  padding: var(--sp-md) var(--sp-lg);
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md);
}
.card-title { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sand); }
.card-body  { padding: var(--sp-lg); }

/* Card cliquable — TOUTE LA SURFACE */
.card-link {
  display: block; text-decoration: none; color: inherit;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  cursor: pointer; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.card-link:hover  { transform: translateY(-4px); border-color: rgba(196,146,58,.38); box-shadow: var(--shadow-md); }
.card-link:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.card-link::before { content: ''; position: absolute; inset: 0; z-index: 0; } /* clickable overlay */
.card-link > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   12. KPI / STAT CARDS (admin)
═══════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.kpi {
  background: rgba(240,235,227,.03); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 1rem;
  position: relative; overflow: hidden;
}
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--kpi-color, var(--c-gold)); }
.kpi-val { font-family: var(--f-display); font-size: 2rem; font-weight: 300; color: var(--kpi-color, var(--c-gold)); line-height: 1; }
.kpi-lbl { font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); margin-top: .3rem; }

/* Game cards (admin dashboard) — CLIQUABLES */
.game-cards  { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.2rem; margin-bottom: 1.5rem; }
.game-card   { display: block; text-decoration: none; color: inherit; position: relative; }
.game-card-inner {
  background: rgba(13,34,56,.7); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); overflow: hidden;
  transition: all var(--t-base);
  height: 100%;
}
.game-card:hover .game-card-inner,
.game-card:focus-visible .game-card-inner {
  border-color: rgba(196,146,58,.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.game-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: var(--radius-md); }
.game-card-img  { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; position: relative; }
.game-card-body { padding: 1rem 1.1rem; }
.game-card-name { font-family: var(--f-display); font-size: 1.1rem; color: var(--c-salt); margin-bottom: .3rem; }
.game-card-meta { font-size: .65rem; color: var(--c-muted); margin-bottom: .8rem; }
.game-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.gcs     { background: rgba(240,235,227,.04); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: .5rem .6rem; text-align: center; }
.gcs-val { font-family: var(--f-display); font-size: 1.2rem; color: var(--c-gold); line-height: 1; }
.gcs-lbl { font-size: .52rem; letter-spacing: .1em; color: var(--c-muted); margin-top: .15rem; }

/* Card "+" pour créer un nouveau parcours */
.game-card-new .game-card-inner {
  border-style: dashed; border-color: rgba(196,146,58,.3);
  display: flex; align-items: center; justify-content: center;
  min-height: 220px; flex-direction: column; gap: .8rem;
}
.game-card-new:hover .game-card-inner { border-color: var(--c-gold); background: rgba(196,146,58,.06); }
.game-card-new .plus-icon { font-size: 2.5rem; color: rgba(196,146,58,.5); transition: color var(--t-base); }
.game-card-new:hover .plus-icon { color: var(--c-gold); }
.game-card-new .plus-lbl { font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
.game-card-new:hover .plus-lbl { color: var(--c-sand); }

/* Sub cards (étapes/questions) */
.sub-cards      { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.sub-card       { display: block; text-decoration: none; color: inherit; }
.sub-card-inner {
  background: rgba(13,34,56,.7); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: 1.2rem;
  transition: all var(--t-base); height: 100%;
}
.sub-card:hover .sub-card-inner,
.sub-card:focus-visible .sub-card-inner { border-color: rgba(196,146,58,.4); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sub-card:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; border-radius: var(--radius-md); }
.sub-card-icon  { font-size: 1.8rem; margin-bottom: .6rem; }
.sub-card-title { font-family: var(--f-display); font-size: 1.05rem; color: var(--c-salt); margin-bottom: .2rem; }
.sub-card-count { font-size: .65rem; color: var(--c-muted); }

/* ═══════════════════════════════════════════════════════════
   13. TABLES (admin)
═══════════════════════════════════════════════════════════ */
.table-card { background: rgba(13,34,56,.7); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; }
.tc-header  { padding: .75rem 1.2rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tc-title   { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-sand); }
.table-wrap { overflow-x: auto; }
.table      { width: 100%; border-collapse: collapse; }
.table th   { font-size: .53rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); font-weight: 400; padding: .6rem 1rem; text-align: left; border-bottom: 1px solid var(--c-border); background: rgba(255,255,255,.02); white-space: nowrap; }
.table td   { padding: .7rem 1rem; font-size: .76rem; color: rgba(212,184,150,.82); border-bottom: 1px solid rgba(212,184,150,.05); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(212,184,150,.03); }
.bar-track  { height: 4px; background: rgba(212,184,150,.1); border-radius: var(--radius-full); overflow: hidden; width: 80px; display: inline-block; vertical-align: middle; margin-left: .4rem; }
.bar-fill   { height: 100%; background: linear-gradient(90deg, var(--c-green), var(--c-gold)); border-radius: var(--radius-full); }
.status-active    { color: var(--c-green-l); }
.status-completed { color: var(--c-gold); }
.status-abandoned { color: var(--c-coral); }

/* ═══════════════════════════════════════════════════════════
   14. PARALLAX
═══════════════════════════════════════════════════════════ */
.parallax-section { position: relative; overflow: hidden; min-height: 60vh; }
.parallax-bg {
  position: absolute; inset: -20%;
  background-attachment: fixed; background-size: cover; background-position: center;
  z-index: 0; will-change: transform;
}
.parallax-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(7,20,32,.55) 0%,rgba(7,20,32,.82) 100%);
  z-index: 1;
}
.parallax-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3xl) var(--sp-lg);
}
@media (max-width: 768px) {
  .parallax-bg { background-attachment: scroll; inset: 0; }
  .parallax-content { padding: var(--sp-2xl) var(--sp-lg); }
}

/* ═══════════════════════════════════════════════════════════
   15. JEUX — ÉTOILES, PROGRESS, GAME UI
═══════════════════════════════════════════════════════════ */
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .25rem; }
.stars-input input { display: none; }
.stars-input label { font-size: 2rem; cursor: pointer; color: rgba(212,184,150,.18); transition: color var(--t-fast); -webkit-text-stroke: 1px rgba(212,184,150,.25); }
.stars-input input:checked ~ label,
.stars-input label:hover,
.stars-input label:hover ~ label { color: var(--c-gold); -webkit-text-stroke: none; }
.stars-display { display: inline-flex; gap: 2px; }
.star-on  { color: var(--c-gold); }
.star-off { color: rgba(212,184,150,.18); }

.progress-track { height: 3px; background: rgba(212,184,150,.1); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill  { height: 100%; background: linear-gradient(90deg,var(--c-green),var(--c-gold)); border-radius: var(--radius-full); transition: width .6s ease; }
.progress-dots  { display: flex; gap: .35rem; align-items: center; justify-content: center; padding: .5rem; }
.progress-dot   { width: 7px; height: 7px; border-radius: 50%; background: rgba(212,184,150,.18); transition: all var(--t-base); }
.progress-dot.done    { background: var(--c-green); }
.progress-dot.current { background: var(--c-gold); transform: scale(1.4); }

/* ═══════════════════════════════════════════════════════════
   16. PWA / INSTALL / SHARE
═══════════════════════════════════════════════════════════ */
.install-banner {
  position: fixed; bottom: var(--sp-md); left: var(--sp-md); right: var(--sp-md);
  background: var(--c-mid); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: var(--sp-md) var(--sp-lg);
  display: flex; align-items: center; gap: var(--sp-md);
  box-shadow: var(--shadow-lg); z-index: 500;
  transform: translateY(120%); transition: transform var(--t-slow);
}
.install-banner.visible { transform: translateY(0); }
.install-banner-icon { font-size: 2rem; flex-shrink: 0; }
.install-banner-text { flex: 1; }
.install-banner-text strong { display: block; font-size: .85rem; color: var(--c-salt); margin-bottom: .2rem; }
.install-banner-text small  { font-size: .7rem; color: var(--c-muted); }

.share-strip { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; }
.share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem 1rem; border-radius: var(--radius-full);
  font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  text-decoration: none; border: none; cursor: pointer;
  transition: filter var(--t-fast), transform var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}
.share-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.share-fb   { background: #1877f2; color: #fff; }
.share-tw   { background: #000;    color: #fff; }
.share-wa   { background: #25d366; color: #fff; }
.share-li   { background: #0077b5; color: #fff; }
.share-copy { background: rgba(212,184,150,.12); color: var(--c-sand); border: 1px solid var(--c-border); }

/* ═══════════════════════════════════════════════════════════
   17. MODAL
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65); z-index: 800;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-md);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--c-mid); border: 1px solid var(--c-border);
  border-radius: var(--radius-md); padding: var(--sp-xl);
  width: 100%; max-width: 480px;
  transform: translateY(20px); transition: transform var(--t-base);
  position: relative;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
  position: absolute; top: var(--sp-md); right: var(--sp-md);
  background: none; border: none; color: var(--c-muted);
  font-size: 1.2rem; cursor: pointer; padding: var(--sp-xs); transition: color var(--t-fast);
}
.modal-close:hover { color: var(--c-salt); }
.modal-title { font-family: var(--f-display); font-size: 1.3rem; font-weight: 300; color: var(--c-salt); margin-bottom: var(--sp-md); }

/* ═══════════════════════════════════════════════════════════
   18. DIVIDERS
═══════════════════════════════════════════════════════════ */
.divider      { height: 1px; background: linear-gradient(90deg,transparent,var(--c-border),transparent); margin-block: var(--sp-lg); }
.divider-gold { width: 52px; height: 1px; background: linear-gradient(90deg,var(--c-gold),transparent); margin-block: var(--sp-md); }
.divider-center { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════
   19. REVEAL ANIMATION
═══════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }

/* ═══════════════════════════════════════════════════════════
   20. FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer { border-top: 1px solid var(--c-border); background: rgba(7,20,32,.85); }
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-xl);
  padding: var(--sp-3xl) var(--sp-xl) var(--sp-xl);
  max-width: var(--max-w); margin-inline: auto;
}
.footer-logo    { font-family: var(--f-display); font-size: 1.4rem; font-weight: 300; color: var(--c-salt); margin-bottom: .3rem; }
.footer-logo span { color: var(--c-gold); }
.footer-tagline { font-size: .62rem; color: var(--c-muted); line-height: 1.6; margin-bottom: var(--sp-md); }
.footer-credit  { font-size: .58rem; color: rgba(212,184,150,.28); line-height: 1.8; font-style: normal; }
.footer-credit a { color: rgba(196,146,58,.45); text-decoration: none; transition: color var(--t-fast); }
.footer-credit a:hover { color: var(--c-gold); }
.footer-col-title { font-size: .53rem; letter-spacing: .26em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--sp-md); opacity: .85; }
.footer-link { display: block; font-size: .68rem; color: var(--c-muted); text-decoration: none; margin-bottom: .48rem; transition: color var(--t-fast); }
.footer-link:hover { color: var(--c-sand); }
.footer-bar  {
  border-top: 1px solid var(--c-border); padding: var(--sp-md) var(--sp-xl);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-sm);
  max-width: var(--max-w); margin-inline: auto;
}
.footer-copy  { font-size: .56rem; color: rgba(212,184,150,.22); }
.footer-legal { display: flex; gap: var(--sp-md); }
.footer-legal a { font-size: .56rem; color: rgba(212,184,150,.22); text-decoration: none; }
.footer-legal a:hover { color: var(--c-muted); }

/* ═══════════════════════════════════════════════════════════
   21. PAGES SPÉCIFIQUES
═══════════════════════════════════════════════════════════ */

/* --- AUTH (login / reset) --- */
.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 100% 70% at 70% 110%,rgba(45,90,61,.2) 0%,transparent 60%),
    radial-gradient(ellipse 80% 50% at 20% -10%,rgba(196,146,58,.1) 0%,transparent 55%),
    linear-gradient(170deg,#071420 0%,#0d2238 35%,#1a3a5c 65%,#0f2d47 100%);
}
.auth-stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 25%,rgba(212,184,150,.5) 0%,transparent 100%),
    radial-gradient(1px 1px at 75% 15%,rgba(212,184,150,.35) 0%,transparent 100%),
    radial-gradient(2px 2px at 45% 55%,rgba(196,146,58,.3) 0%,transparent 100%),
    radial-gradient(1px 1px at 5% 50%,rgba(196,146,58,.4) 0%,transparent 100%);
}
.auth-wrap {
  position: relative; z-index: 10;
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 2rem 1.5rem;
}
.auth-brand { text-align: center; margin-bottom: 2rem; }
.auth-logo  {
  font-family: var(--f-display); font-size: 2rem; font-weight: 300;
  color: var(--c-salt); text-decoration: none; display: inline-block;
}
.auth-logo span { color: var(--c-gold); }
.auth-wave  { display: block; width: 50px; height: 1px; background: linear-gradient(90deg,transparent,var(--c-gold),transparent); margin: .7rem auto 0; }
.auth-card  {
  width: 100%; max-width: 420px;
  background: rgba(13,34,56,.82); backdrop-filter: blur(20px);
  border: 1px solid var(--c-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth-tabs  { display: flex; border-bottom: 1px solid var(--c-border); }
.auth-tab   {
  flex: 1; background: none; border: none; color: var(--c-muted);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .85rem; cursor: pointer; position: relative; transition: color var(--t-base);
}
.auth-tab.active { color: var(--c-gold); }
.auth-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: var(--c-gold); }
.auth-body  { padding: 1.8rem 1.6rem; }
.auth-hint  { margin-top: 1.2rem; padding: .8rem; background: rgba(45,90,61,.12); border: 1px solid rgba(45,90,61,.25); border-radius: var(--radius-sm); }
.auth-hint p { font-size: .63rem; color: rgba(212,184,150,.55); text-align: center; line-height: 1.6; max-width: 100%; }
.auth-link  {
  display: block; text-align: center; margin-top: .9rem;
  font-size: .63rem; color: var(--c-muted); text-decoration: none;
  border-bottom: 1px solid rgba(212,184,150,.2); width: fit-content; margin-inline: auto;
  transition: color var(--t-base);
}
.auth-link:hover { color: var(--c-sand); }
.auth-back  {
  margin-top: 1.2rem; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--c-muted); text-decoration: none; transition: color var(--t-base);
}
.auth-back:hover { color: var(--c-sand); }

/* Password strength */
.pwd-strength-bar  { height: 3px; background: rgba(212,184,150,.1); border-radius: var(--radius-full); margin-top: .4rem; overflow: hidden; }
.pwd-strength-fill { height: 100%; border-radius: var(--radius-full); transition: all var(--t-base); }
.pwd-strength-text { font-size: .58rem; margin-top: .2rem; }

/* --- ONBOARDING --- */
.ob-bg { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 100% 70% at 70% 110%,rgba(45,90,61,.2) 0%,transparent 60%),linear-gradient(170deg,#071420 0%,#0d2238 40%,#1a3a5c 100%); }
.ob-wrap { position: relative; z-index: 10; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
.ob-logo { font-family: var(--f-display); font-size: 1.7rem; font-weight: 300; color: var(--c-salt); text-decoration: none; }
.ob-logo span { color: var(--c-gold); }
.ob-card { width: 100%; max-width: 520px; background: rgba(13,34,56,.88); backdrop-filter: blur(18px); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; }
.ob-steps { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 1.5rem .6rem; border-bottom: 1px solid var(--c-border); }
.ob-step-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; }
.ob-step-dot.done     { background: rgba(76,175,130,.2); border: 1px solid rgba(76,175,130,.5); color: var(--c-green-l); }
.ob-step-dot.current  { background: rgba(196,146,58,.2); border: 1px solid var(--c-gold); color: var(--c-gold); }
.ob-step-dot.upcoming { background: rgba(240,235,227,.05); border: 1px solid var(--c-border); color: var(--c-muted); }
.ob-step-lbl { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.ob-step-lbl.current { color: var(--c-sand); }
.ob-connector { width: 20px; height: 1px; background: var(--c-border); }
.ob-body  { padding: 1.5rem 1.6rem; }
.ob-skip  { display: block; text-align: center; margin-top: .8rem; font-size: .62rem; color: var(--c-muted); text-decoration: none; border-bottom: 1px solid rgba(212,184,150,.2); width: fit-content; margin-inline: auto; transition: color var(--t-base); }
.ob-skip:hover { color: var(--c-sand); }
.mode-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; }
.mode-card { border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: .8rem .5rem; text-align: center; cursor: pointer; transition: all var(--t-base); background: rgba(240,235,227,.03); }
.mode-card:hover   { border-color: rgba(196,146,58,.4); }
.mode-card.selected { border-color: var(--c-gold); background: rgba(196,146,58,.1); }
.mode-icon  { font-size: 1.4rem; margin-bottom: .3rem; }
.mode-lbl   { font-size: .67rem; color: var(--c-muted); }
.mode-card.selected .mode-lbl { color: var(--c-gold); }

/* --- GAME --- */
.game-app  { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.game-header {
  flex-shrink: 0; background: rgba(13,34,56,.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border); padding: .8rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.game-brand { font-family: var(--f-display); font-size: 1rem; font-weight: 300; color: var(--c-sand); letter-spacing: .05em; white-space: nowrap; }
.game-meta  { display: flex; align-items: center; gap: .8rem; font-size: .65rem; letter-spacing: .1em; color: rgba(212,184,150,.6); }
.timer-badge { background: rgba(196,146,58,.15); border: 1px solid rgba(196,146,58,.3); border-radius: 20px; padding: .2rem .6rem; color: var(--c-gold); font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.game-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.game-screen  { display: none; }
.game-screen.active { display: block; }
.logout-link  { color: rgba(212,184,150,.4); font-size: .6rem; letter-spacing: .1em; text-decoration: none; padding: .3rem; transition: color var(--t-fast); }
.logout-link:hover { color: var(--c-sand); }

/* Game nav screen */
.nav-screen { padding: 1.5rem 1.2rem; }
.stage-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .6rem; letter-spacing: .25em; text-transform: uppercase; color: var(--c-gold); margin-bottom: .8rem; }
.stage-title { font-family: var(--f-display); font-size: clamp(1.6rem,6vw,2.2rem); font-weight: 300; line-height: 1.15; color: var(--c-salt); margin-bottom: .4rem; }
.stage-location { font-size: .7rem; letter-spacing: .15em; color: var(--c-sand); opacity: .7; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .3rem; }
.stage-photo { width: 100%; border-radius: var(--radius-md); margin-bottom: 1rem; max-height: 200px; object-fit: cover; border: 1px solid var(--c-border); }
.stage-description { font-family: var(--f-display); font-size: 1rem; font-style: italic; color: var(--c-sand); opacity: .85; line-height: 1.6; margin-bottom: 1.2rem; }
.map-card { background: rgba(240,235,227,.05); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.2rem; }
.map-container { height: 200px; background: linear-gradient(135deg,#1a3a5c,#0d2238); display: flex; align-items: center; justify-content: center; color: var(--c-sand); font-size: .8rem; }
.map-info { padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.distance-display { font-size: .65rem; letter-spacing: .1em; color: var(--c-sand); opacity: .7; }
.distance-value   { font-size: 1.2rem; font-weight: 600; color: var(--c-gold); }
.location-status  { text-align: center; padding: .8rem; font-size: .7rem; color: var(--c-sand); opacity: .7; letter-spacing: .05em; }
.location-status.locating   { color: var(--c-gold); opacity: 1; animation: pulse 1.5s ease infinite; }
.location-status.in-range   { color: var(--c-green-l); opacity: 1; }
.location-status.out-range  { color: var(--c-coral); opacity: 1; }
.cultural-box   { background: rgba(45,90,61,.12); border: 1px solid rgba(45,90,61,.25); border-radius: var(--radius-md); padding: 1rem; margin-top: 1rem; }
.cultural-label { font-size: .55rem; letter-spacing: .25em; text-transform: uppercase; color: var(--c-green-l); margin-bottom: .5rem; }
.cultural-text  { font-family: var(--f-display); font-size: .95rem; color: var(--c-sand); opacity: .85; line-height: 1.6; }

/* Boutons jeu */
.btn-nav {
  width: 100%; background: linear-gradient(135deg,var(--c-green),#1e4228);
  border: 1px solid rgba(45,90,61,.5); border-radius: var(--radius-sm); padding: 1rem;
  color: var(--c-salt); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
  cursor: pointer; transition: all var(--t-base); display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: .8rem;
}
.btn-nav:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-arrived {
  width: 100%; background: linear-gradient(135deg,var(--c-gold),var(--c-gold-h));
  border: none; border-radius: var(--radius-sm); padding: 1rem;
  color: #0d1f30; font-size: .7rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  cursor: pointer; transition: all var(--t-base); display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-arrived:disabled { opacity: .4; cursor: not-allowed; }
.btn-arrived-failed { background: linear-gradient(135deg,#c4573a,#8a3a20); }

/* Question screen */
.question-screen { padding: 1.5rem 1.2rem; }
.q-stage-label   { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-gold); margin-bottom: .5rem; }
.q-title         { font-family: var(--f-display); font-size: clamp(1.3rem,5vw,1.8rem); font-weight: 300; color: var(--c-salt); }
.question-card   { background: rgba(240,235,227,.05); border: 1px solid rgba(212,184,150,.2); border-radius: var(--radius-md); padding: 1.5rem 1.2rem; margin-bottom: 1.2rem; position: relative; overflow: hidden; }
.question-text   { font-family: var(--f-display); font-size: clamp(1rem,3.5vw,1.2rem); font-style: italic; font-weight: 400; color: var(--c-salt); line-height: 1.7; }
.diff-facile  { background: rgba(45,90,61,.25); color: var(--c-green-l); border: 1px solid rgba(45,90,61,.4); border-radius: var(--radius-full); display: inline-block; padding: .2rem .6rem; font-size: .6rem; margin-top: .8rem; }
.diff-moyen   { background: rgba(196,146,58,.15); color: var(--c-gold); border: 1px solid rgba(196,146,58,.3); border-radius: var(--radius-full); display: inline-block; padding: .2rem .6rem; font-size: .6rem; margin-top: .8rem; }
.diff-difficile { background: rgba(196,87,58,.15); color: #e0896e; border: 1px solid rgba(196,87,58,.3); border-radius: var(--radius-full); display: inline-block; padding: .2rem .6rem; font-size: .6rem; margin-top: .8rem; }
.errors-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-size: .7rem; color: var(--c-sand); opacity: .7; }
.error-dot  { width: 10px; height: 10px; border-radius: 50%; background: rgba(212,184,150,.2); border: 1px solid rgba(212,184,150,.3); transition: all var(--t-base); }
.error-dot.used { background: var(--c-coral); border-color: var(--c-coral); }
.answer-textarea {
  width: 100%; background: rgba(240,235,227,.06); border: 1px solid rgba(212,184,150,.25);
  border-radius: var(--radius-sm); color: var(--c-salt);
  font-family: var(--f-display); font-size: 1.1rem; padding: 1rem;
  resize: none; min-height: 90px; outline: none; transition: all var(--t-base); -webkit-appearance: none;
}
.answer-textarea:focus { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(196,146,58,.1); }
.hint-btn { background: none; border: none; color: rgba(212,184,150,.5); font-size: .65rem; letter-spacing: .1em; cursor: pointer; padding: .3rem 0; text-decoration: underline; text-underline-offset: 2px; transition: color var(--t-base); }
.hint-btn:hover { color: var(--c-sand); }
.hint-box { background: rgba(196,146,58,.1); border: 1px solid rgba(196,146,58,.2); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .8rem; color: var(--c-sand); opacity: .85; margin-top: .5rem; display: none; font-style: italic; }
.feedback-box { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .85rem; display: none; }
.feedback-box.show   { display: block; animation: slideIn .3s ease; }
.feedback-wrong   { background: rgba(196,87,58,.2); border: 1px solid rgba(196,87,58,.4); color: #e0896e; }
.feedback-correct { background: rgba(45,90,61,.25); border: 1px solid rgba(45,90,61,.5); color: var(--c-green-l); }
.btn-submit {
  width: 100%; background: linear-gradient(135deg,var(--c-ocean),#1e4a6e);
  border: 1px solid rgba(212,184,150,.2); border-radius: var(--radius-sm); padding: .9rem;
  color: var(--c-salt); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; cursor: pointer; transition: all var(--t-base); margin-bottom: .6rem;
}
.btn-submit:hover { border-color: var(--c-gold); }
.btn-check {
  width: 100%; background: linear-gradient(135deg,var(--c-gold),var(--c-gold-h));
  border: none; border-radius: var(--radius-sm); padding: 1rem;
  color: #0d1f30; font-size: .75rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase;
  cursor: pointer; transition: all var(--t-base); display: none; align-items: center; justify-content: center; gap: .5rem;
}
.btn-check:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(196,146,58,.4); }

/* ═══════════════════════════════════════════════════════════
   22. REVIEW PAGE
═══════════════════════════════════════════════════════════ */
.review-page     { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.review-top-bar  { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 2rem; }
.review-brand    { font-family: var(--f-display); font-size: 1.1rem; font-weight: 300; color: var(--c-sand); text-decoration: none; }
.review-top-link { font-size: .6rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); text-decoration: none; transition: color var(--t-fast); }
.review-top-link:hover { color: var(--c-sand); }
.confetti-icon   { font-size: 3.5rem; animation: bounce .8s ease infinite alternate; }
.finish-title    { font-family: var(--f-display); font-size: clamp(2rem,6vw,3rem); font-weight: 300; color: var(--c-gold); margin: .5rem 0 .3rem; }
.finish-sub      { font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--c-muted); }
.stats-grid-3    { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin: 1.5rem 0; }
.stat-card-r     { background: rgba(240,235,227,.04); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1.2rem .8rem; text-align: center; }
.stat-val-r      { font-family: var(--f-display); font-size: 1.8rem; font-weight: 300; color: var(--c-gold); line-height: 1; }
.stat-lbl-r      { font-size: .55rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); margin-top: .3rem; }
.stat-compare    { font-size: .6rem; color: var(--c-green-l); margin-top: .2rem; }
.review-actions  { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 1.5rem; }
.review-action   { padding: .85rem; border-radius: var(--radius-sm); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; text-align: center; transition: all var(--t-base); display: block; }
.review-cards    { display: grid; gap: .8rem; margin-top: 1rem; }
.review-card-item { background: rgba(240,235,227,.03); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; }

/* ═══════════════════════════════════════════════════════════
   23. CONTRIBUTOR PAGE
═══════════════════════════════════════════════════════════ */
.contrib-appbar  { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: .9rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.contrib-page    { max-width: 1000px; margin: 0 auto; padding: 2rem 1.5rem; }
.contrib-tabs    { display: flex; gap: 0; border-bottom: 1px solid var(--c-border); margin-bottom: 2rem; }
.contrib-tab     { background: none; border: none; color: var(--c-muted); font-size: .63rem; letter-spacing: .2em; text-transform: uppercase; padding: .8rem 1.2rem; cursor: pointer; transition: all var(--t-base); position: relative; text-decoration: none; display: inline-block; }
.contrib-tab.active { color: var(--c-gold); }
.contrib-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--c-gold); }
.contrib-tab-panel { display: none; }
.contrib-tab-panel.active { display: block; }
.avatar-wrap { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.5rem; }
.avatar      { width: 64px; height: 64px; border-radius: 50%; background: rgba(196,146,58,.15); border: 2px solid var(--c-border); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; overflow: hidden; flex-shrink: 0; }
.avatar img  { width: 100%; height: 100%; object-fit: cover; }
.type-grid   { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; margin-bottom: 1rem; }
.type-option { display: none; }
.type-label  { display: block; padding: .7rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; text-align: center; transition: all var(--t-base); font-size: .7rem; letter-spacing: .08em; }
.type-label:hover { border-color: rgba(196,146,58,.4); }
.type-option:checked + .type-label { border-color: var(--c-gold); background: rgba(196,146,58,.1); color: var(--c-gold); }
.type-icon   { display: block; font-size: 1.5rem; margin-bottom: .3rem; }
.proposal-card { background: rgba(240,235,227,.03); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: .8rem; }
.proposal-note { background: rgba(196,146,58,.08); border: 1px solid rgba(196,146,58,.2); border-radius: var(--radius-sm); padding: .5rem .8rem; font-size: .75rem; color: var(--c-sand); margin-top: .6rem; }

/* ═══════════════════════════════════════════════════════════
   24. ANIMATIONS
═══════════════════════════════════════════════════════════ */
@keyframes pulse     { 0%,100%{opacity:.6;} 50%{opacity:1;} }
@keyframes bounce    { from{transform:translateY(0);} to{transform:translateY(-8px);} }
@keyframes slideIn   { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
@keyframes waveDrift { from{transform:translateX(-20px);} to{transform:translateX(20px);} }
@keyframes fadeIn    { from{opacity:0;} to{opacity:1;} }

/* ═══════════════════════════════════════════════════════════
   25. RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); padding: var(--sp-xl) var(--sp-lg); }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .sub-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --sp-3xl: 3rem; --sp-xl: 1.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .navbar   { padding: var(--sp-md) var(--sp-lg); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bar  { flex-direction: column; text-align: center; }
  .container   { padding-inline: var(--sp-md); }
  .section     { padding-block: var(--sp-2xl); }
  .stats-grid-3 { grid-template-columns: 1fr; }
  .review-actions { grid-template-columns: 1fr; }
  .mode-grid   { grid-template-columns: repeat(3,1fr); }
  .type-grid   { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   26. PRINT
═══════════════════════════════════════════════════════════ */
@media print {
  .navbar, .site-footer, .install-banner, .modal-overlay, .sidebar { display: none; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════════════════
   27. CLASSES UTILITAIRES COMPLÉMENTAIRES
═══════════════════════════════════════════════════════════ */

/* Typographie complémentaire */
.t-sm    { font-size: .72rem; }
.t-xs    { font-size: .62rem; }
.t-2xs   { font-size: .55rem; }
.t-lg    { font-size: 1.1rem; }
.t-xl    { font-size: 1.3rem; }
.lh-lg   { line-height: 1.7; }
.lh-md   { line-height: 1.5; }
.fw-300  { font-weight: 300; }
.fw-600  { font-weight: 600; }
.ls-wide { letter-spacing: .2em; }
.tt-up   { text-transform: uppercase; }

/* Display */
.d-block  { display: block; }
.d-flex   { display: flex; }
.d-inline { display: inline; }
.d-none   { display: none; }
.d-grid   { display: grid; }

/* Overflow */
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden  { overflow: hidden; }

/* Sizing */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.max-w-sm { max-width: 120px; }
.max-w-md { max-width: 260px; }
.max-w-text { max-width: 100%; }

/* Margin/padding utilitaires */
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.ml-auto { margin-left: auto; }
.mt-xs { margin-top: var(--sp-xs); }
.mt-sm { margin-top: var(--sp-sm); }
.mt-md { margin-top: var(--sp-md); }
.mt-lg { margin-top: var(--sp-lg); }
.mb-sm { margin-bottom: var(--sp-sm); }
.mb-md { margin-bottom: var(--sp-md); }
.mb-lg { margin-bottom: var(--sp-lg); }
.p-sm  { padding: var(--sp-sm); }
.p-md  { padding: var(--sp-md); }
.p-lg  { padding: var(--sp-lg); }

/* Couleurs admin compatibilité (anciens noms) */
.c-gold   { color: var(--c-gold); }
.c-muted  { color: var(--c-muted); }
.c-green  { color: var(--c-green-l); }
.c-coral  { color: var(--c-coral); }
.c-blue   { color: var(--c-blue); }
.c-sand   { color: var(--c-sand); }
.c-salt   { color: var(--c-salt); }

/* Tableau admin */
.td-sm    { font-size: .68rem; }
.td-xs    { font-size: .62rem; }
.td-wrap  { max-width: 260px; font-size: .72rem; line-height: 1.4; }
.td-ans   { max-width: 140px; font-size: .7rem; color: var(--c-green-l); }
.td-hint  { max-width: 120px; font-size: .66rem; color: var(--c-muted); }
.td-stage { display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(196,146,58,.15);color:var(--c-gold);font-size:.68rem;font-weight:600;border:1px solid rgba(196,146,58,.3); }
.td-gold  { color: var(--c-gold); font-weight: 600; }
.td-flex  { display: flex; gap: .3rem; flex-wrap: wrap; }

/* Inline form pour delete/edit */
.form-inline { display: inline; }

/* Error page */
.error-msg { color: red; font-family: sans-serif; padding: 2rem; }

/* Admin var compatibility aliases */
:root {
  --gold:       var(--c-gold);
  --sand:       var(--c-sand);
  --salt:       var(--c-salt);
  --green:      var(--c-green-l);
  --coral:      var(--c-coral);
  --blue:       var(--c-blue);
  --border:     var(--c-border);
  --muted:      var(--c-muted);
  --surface:    var(--c-surface);
  --text-muted: var(--c-muted);
  --ocean:      var(--c-ocean);
  --seaweed:    var(--c-green);
  --m:          var(--c-muted);
}

/* Share strip centré */
.share-strip-center {
  justify-content: center;
  padding: 1rem 0;
}

/* Bloc note suggestion section */
.suggest-note {
  padding: .6rem .8rem;
  background: rgba(196,146,58,.07);
  border: 1px solid rgba(196,146,62,.2);
  border-radius: var(--radius-sm);
  font-size: .54rem;
  font-weight: 300;
  color: var(--c-muted);
}

/* Optional label hint */
.label-hint {
  font-size: .54rem;
  font-weight: 300;
  color: var(--c-muted);
  margin-left: .3rem;
}

/* Barre de progression inline */
.bar-inline { width: var(--w,100%); }

/* Responsive fix suggerer layout */
@media (max-width: 768px) {
  .suggest-layout { grid-template-columns: 1fr !important; }
  .intro-layout   { grid-template-columns: 1fr !important; }
  .parallax-content[style*="flex-start"] { justify-content: center !important; padding-left: var(--sp-lg) !important; text-align: center !important; }
  .parallax-content[style*="flex-end"]   { justify-content: center !important; padding-right: var(--sp-lg) !important; text-align: center !important; }
}

/* ═══════════════════════════════════════════════════════════
   28. CLASSES PAGES — index, noirmoutier, game
═══════════════════════════════════════════════════════════ */

/* ── Hero sections ── */
.hero-full       { min-height: 100vh; }
.hero-55         { min-height: 55vh; }
.hero-50         { min-height: 50vh; }
.hero-col        { flex-direction: column; }
.hero-col-pt     { flex-direction: column; padding-top: 4rem; }
.hero-center-box { max-width: 700px; margin: auto; }
.hero-680        { max-width: 680px; margin: auto; }
.hero-cta-col    { flex-direction: column; text-align: center; }

/* Overlay variantes */
.overlay-nm  { background: linear-gradient(180deg,rgba(7,20,32,.35) 0%,rgba(7,20,32,.78) 80%,rgba(7,20,32,.95) 100%); }
.overlay-l   { background: linear-gradient(90deg,rgba(7,20,32,.75) 0%,rgba(7,20,32,.2) 60%,transparent 100%); }
.overlay-r   { background: linear-gradient(270deg,rgba(7,20,32,.75) 0%,rgba(7,20,32,.2) 60%,transparent 100%); }

/* Parallax content position variants */
.pc-left  { justify-content: flex-start; padding-left: var(--sp-3xl); }
.pc-right { justify-content: flex-end;   padding-right: var(--sp-3xl); }
.pc-left .pc-box  { max-width: 360px; }
.pc-right .pc-box { max-width: 360px; text-align: right; }

/* ── Hero typography ── */
.hero-h1-xl  { font-size: clamp(2.5rem,8vw,5.5rem); font-weight: 300; color: var(--c-salt); line-height: 1.05; margin-bottom: .8rem; }
.hero-h1-nm  { font-size: clamp(2.5rem,8vw,5rem);   font-weight: 300; line-height: 1.05; color: var(--c-salt); margin-bottom: .6rem; }
.hero-sub-xl { font-size: clamp(1rem,2.5vw,1.4rem);  margin-bottom: 2.5rem; margin-inline: auto; max-width: 520px; line-height: 1.65; }
.hero-sub-nm { font-size: clamp(1rem,2.5vw,1.35rem); margin-bottom: .8rem; line-height: 1.65; margin-inline: auto; }
.hero-cta-h  { font-size: clamp(2rem,5vw,3.4rem);    font-weight: 300; color: var(--c-salt); margin-bottom: .5rem; }
.hero-cta-nm { font-size: clamp(1.8rem,5vw,3rem);    color: var(--c-salt); margin-bottom: .6rem; font-weight: 300; }
.hero-stat-v { font-size: 2rem; font-weight: 300; }
.hero-stat-l { font-size: .55rem; }
.hero-stat-mb{ margin-bottom: 3rem; }
.gal-h3      { font-size: clamp(1.5rem,4vw,2.4rem); color: var(--c-salt); margin-bottom: .5rem; }
.gal-p       { font-size: .8rem; line-height: 1.6; max-width: 100%; }
.gal-label   { margin-bottom: .6rem; }

/* ── Section headers ── */
.sec-header-600  { max-width: 600px; margin-bottom: var(--sp-xl); }
.sec-header-500  { max-width: 500px; margin-bottom: var(--sp-xl); }
.sec-header-auto { margin: 0 auto var(--sp-xl); }
.sec-lead-1      { font-size: 1.05rem; line-height: 1.7; max-width: 100%; }
.sec-lead-2      { font-size: 1.1rem;  line-height: 1.7; max-width: 100%; }
.sec-intro-p     { font-size: 1.05rem; line-height: 1.7; max-width: 100%; margin-bottom: var(--sp-md); }
.sec-intro-sm    { font-size: .8rem; line-height: 1.6; max-width: 100%; margin-bottom: var(--sp-lg); }

/* ── Parcours / feature cards ── */
.pcard-img       { height: 145px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; }
.pcard-img-nm    { background: linear-gradient(135deg,#0d2238,#1a4a6e); }
.pcard-body      { padding: var(--sp-md); }
.pcard-meta      { margin-bottom: .55rem; }
.pcard-name      { font-size: 1.2rem; margin-bottom: .3rem; }
.pcard-desc      { font-size: .72rem; line-height: 1.5; margin-bottom: .85rem; max-width: 100%; }
.pcard-foot      { border-top: 1px solid var(--c-border); padding-top: .7rem; }
.pcard-stages    { font-size: .6rem; }
.pcard-soon      { opacity: .62; }
.pcard-badge-pos { position: absolute; top: .7rem; right: .7rem; }

.feat-icon       { font-size: 1.4rem; margin-bottom: .6rem; }
.feat-title      { font-size: .98rem; margin-bottom: .28rem; }
.feat-desc       { font-size: .71rem; line-height: 1.55; max-width: 100%; }

/* ── Step card (concept) ── */
.step-body       { padding: var(--sp-lg); position: relative; overflow: hidden; }
.step-num-bg     { font-size: 3.5rem; font-weight: 300; color: rgba(196,146,58,.1); position: absolute; top: .3rem; right: .9rem; line-height: 1; }
.step-icon       { font-size: 1.6rem; margin-bottom: .7rem; }
.step-title      { font-size: 1.05rem; margin-bottom: .35rem; }
.step-desc       { font-size: .74rem; line-height: 1.55; max-width: 100%; }

/* ── Review / blockquote ── */
.review-quote    { font-family: var(--f-display); font-style: italic; font-size: .97rem; color: rgba(212,184,150,.82); line-height: 1.65; margin: var(--sp-sm) 0 var(--sp-md); border: none; padding: 0; }
.review-quote p  { max-width: 100%; }
.review-footer   { font-size: .6rem; }

/* ── Suggest section ── */
.suggest-layout  { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-3xl); align-items: start; }
.suggest-pill    { display: inline-flex; align-items: center; gap: .35rem; background: rgba(45,90,61,.15); border: 1px solid rgba(45,90,61,.3); border-radius: var(--radius-full); padding: .28rem .72rem; margin: .18rem; font-size: .66rem; color: rgba(212,184,150,.65); }
.suggest-pill-v  { font-size: .58rem; }
.suggest-box     { padding: var(--sp-md); background: rgba(196,146,58,.07); border: 1px solid rgba(196,146,58,.2); border-radius: var(--radius-md); }
.suggest-box-t   { margin-bottom: .35rem; }
.suggest-box-p   { font-size: .73rem; line-height: 1.5; max-width: 100%; margin-bottom: .55rem; }
.suggest-link    { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(196,146,58,.3); }
.mt-xl-share     { margin-top: var(--sp-xl); }
.share-label-sm  { font-size: .58rem; color: rgba(212,184,150,.4); margin-bottom: .7rem; }

/* CTA sections */
.cta-sub-text    { margin-bottom: 2rem; font-size: 1.1rem; max-width: 100%; }
.cta-sub-nm      { margin-bottom: 2rem; max-width: 480px; margin-inline: auto; font-size: 1rem; line-height: 1.65; }
.footer-dim      { opacity: .35; }

/* ── Noirmoutier intro ── */
.intro-layout    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3xl); align-items: center; }
.intro-card-sm   { padding: .8rem; }
.intro-img-ph    { border-radius: var(--radius-md); border: 1px solid var(--c-border); height: 420px; background: linear-gradient(135deg,#0d2238,#1a4a6e); }
.nm-meta-t       { font-size: .9rem; color: var(--c-salt); margin-top: .3rem; }
.nm-meta-s       { font-size: .62rem; }
.gal-section-pt  { padding-block: var(--sp-xl); }

/* ══════════════════════════════════════════════════════════
   ÉTAPE LIST — style Google Material step list
══════════════════════════════════════════════════════════ */
.etape-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-xl);
}

/* Chaque ligne d'étape */
.etape-row {
  display: grid;
  grid-template-columns: 40px 52px 1fr;
  gap: var(--sp-md);
  align-items: flex-start;
  padding: var(--sp-lg) 0;
  position: relative;
  transition: background var(--t-base);
}
.etape-row:hover { background: rgba(212,184,150,.02); border-radius: var(--radius-md); }
.etape-divider   { border-bottom: 1px solid rgba(212,184,150,.07); }

/* Numéro d'étape */
.etape-num-wrap {
  display: flex;
  align-items: flex-start;
  padding-top: .2rem;
  justify-content: center;
}
.etape-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(196,146,58,.12);
  border: 1.5px solid rgba(196,146,58,.3);
  color: var(--c-gold);
  font-size: .72rem;
  font-weight: 600;
  font-family: var(--f-body);
  flex-shrink: 0;
}

/* Icône lieu */
.etape-icon-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(240,235,227,.04);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

/* Contenu texte */
.etape-content {
  flex: 1;
  min-width: 0;
  padding-top: .1rem;
}

/* En-tête : titre + badges sur la même ligne */
.etape-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-bottom: .45rem;
}
.etape-h3 {
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--c-salt);
  line-height: 1.3;
  margin: 0;
}
.etape-badges {
  display: flex;
  gap: .3rem;
  flex-shrink: 0;
  align-items: center;
  flex-wrap: wrap;
}

/* Description */
.etape-desc {
  font-size: .78rem;
  color: rgba(212,184,150,.65);
  line-height: 1.6;
  max-width: 100%;
  margin-bottom: .35rem;
}

/* Localisation */
.etape-location {
  font-size: .68rem;
  color: rgba(212,184,150,.38);
  letter-spacing: .04em;
  max-width: 100%;
}

/* CTA sous la liste */
.etape-cta {
  margin-top: var(--sp-2xl);
  padding: var(--sp-xl);
  background: rgba(196,146,58,.06);
  border: 1px solid rgba(196,146,58,.2);
  border-radius: var(--radius-md);
  text-align: center;
}
.etape-cta-hint {
  margin-top: var(--sp-sm);
  font-size: .65rem;
  color: var(--c-muted);
  letter-spacing: .08em;
  max-width: 100%;
  margin-inline: auto;
}

/* Responsive */
@media (max-width: 640px) {
  .etape-row {
    grid-template-columns: 32px 44px 1fr;
    gap: var(--sp-sm);
    padding: var(--sp-md) 0;
  }
  .etape-number {
    width: 24px;
    height: 24px;
    font-size: .65rem;
  }
  .etape-icon-wrap {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  .etape-h3     { font-size: .95rem; }
  .etape-desc   { font-size: .74rem; }
  .etape-header { flex-direction: column; gap: .3rem; }
  .etape-badges { justify-content: flex-start; }
}

/* Infos card */
.info-icon       { font-size: 1.5rem; margin-bottom: .6rem; }
.info-title      { font-size: .95rem; margin-bottom: .35rem; }
.info-desc       { font-size: .72rem; line-height: 1.55; max-width: 100%; }

/* ── Game page specifics ── */
.game-modal-icon { font-size: 3rem; margin-bottom: .8rem; text-align: center; }
.game-modal-h    { font-size: 1.3rem; margin-bottom: .6rem; text-align: center; }
.game-modal-p    { font-size: .85rem; line-height: 1.6; margin-bottom: var(--sp-lg); max-width: 100%; }
.game-finish     { font-size: 2rem; margin-bottom: .5rem; }
.game-timer-pos  { font-size: .55rem; text-align: right; }
.game-spacer     { height: .8rem; }
.game-hint-row   { margin-top: .5rem; display: flex; justify-content: space-between; align-items: center; }
.game-char-count { font-size: .6rem; color: rgba(212,184,150,.4); }
.game-answer-full { text-align: center; width: 100%; }
.game-failed-banner { background: rgba(196,87,58,.12); border: 1px solid rgba(196,87,58,.3); border-radius: var(--radius-sm); padding: .6rem .9rem; margin-bottom: .8rem; font-size: .82rem; line-height: 1.5; }
.game-failed-title  { display: block; margin-bottom: .3rem; color: var(--c-coral); font-weight: 600; }
.game-cultural-icon { font-size: 2.5rem; }
.game-loc-hint      { font-size: .7rem; color: var(--c-sand); opacity: .7; margin-top: .3rem; }
.game-errors-lbl    { margin-left: .3rem; }

/* ── Admin small tweaks ── */
.admin-date      { font-size: .62rem; }
.admin-nav-sep   { margin-bottom: .4rem; }
.admin-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* ── Responsive fixes ── */
@media (max-width: 768px) {
  .suggest-layout  { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .intro-layout    { grid-template-columns: 1fr; }
  .pc-left         { justify-content: center; padding-left: var(--sp-lg); text-align: center; }
  .pc-right        { justify-content: center; padding-right: var(--sp-lg); text-align: center; }
  .pc-left .pc-box, .pc-right .pc-box { max-width: 100%; text-align: center; }
  .navbar-fixed    { padding-inline: var(--sp-md); }
}
@media (max-width: 640px) {
  .admin-form-2col { grid-template-columns: 1fr; }
  .hero-cta-col    { padding-inline: var(--sp-md); }
}

/* ═══════════════════════════════════════════════════════════
   29. CLASSES SUPPLÉMENTAIRES (review, reset, contributor)
═══════════════════════════════════════════════════════════ */

/* Navbar padding-top offset */
.navbar-offset { padding-top: 64px; }

/* Feature card padding */
.feat-pad    { padding: var(--sp-lg); }
.feat-pad-lg { padding: 1.3rem; }

/* Margin utilitaires supplémentaires */
.mt-auto { margin-top: auto; }
.mb-xl   { margin-bottom: var(--sp-xl); }
.mb-xs   { margin-bottom: var(--sp-xs); }
.mr-sm   { margin-right: var(--sp-sm); }

/* Review page */
.review-page  { max-width: 680px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.review-topbar{ display: flex; align-items: center; justify-content: space-between; padding: 1rem 0 2rem; }
.stats-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin: 1.5rem 0; }

/* Reset page specifics */
.reset-wrap  { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; position: relative; z-index: 10; }
.reset-card  { width: 100%; max-width: 420px; background: rgba(13,34,56,.82); backdrop-filter: blur(18px); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 2rem 1.8rem; }
.done-icon   { font-size: 3rem; text-align: center; margin-bottom: .8rem; }
.done-text   { font-family: var(--f-display); font-size: 1.2rem; font-style: italic; color: var(--c-sand); text-align: center; line-height: 1.6; margin-bottom: var(--sp-lg); }

/* Contributor appbar */
.contrib-barlink { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); text-decoration: none; padding: .3rem; transition: color var(--t-fast); }
.contrib-barlink:hover { color: var(--c-sand); }
.contrib-barlink.active { color: var(--c-gold); }
.contrib-avatar-info h3 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 300; color: var(--c-salt); }
.contrib-avatar-info small { font-size: .6rem; letter-spacing: .1em; color: var(--c-muted); }
.contrib-section-desc { font-family: var(--f-display); font-size: 1rem; font-style: italic; color: var(--c-muted); line-height: 1.6; margin-bottom: var(--sp-lg); padding: 1rem 1.2rem; border-left: 2px solid var(--c-gold); background: rgba(196,146,58,.05); }

/* Color alias */
.t-blue   { color: var(--c-blue); }
.t-blue-l { color: #8ab8e8; }

/* Badge positionnement absolu pour cards */
.badge-abs-tr { position: absolute; top: .7rem; right: .7rem; }

/* Admin session status */
.status-reviewing { color: var(--c-blue); }

/* Admin modal */
.modal-form .form-group { margin-bottom: .85rem; }
.admin-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

/* Admin detail header */
.detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--c-border); }
.detail-icon   { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.detail-title  { font-family: var(--f-display); font-size: 1.5rem; font-weight: 300; color: var(--c-salt); }
.detail-sub    { font-size: .65rem; color: var(--c-muted); }

/* Card couleurs jeux */
.nm-img { background: linear-gradient(135deg,#0d2238,#1a4a6e); }
.br-img { background: linear-gradient(135deg,#1a2d0d,#2d4a1a); }
.pv-img { background: linear-gradient(135deg,#3d2a0d,#5a3d1a); }
.al-img { background: linear-gradient(135deg,#2d0d1a,#4a1a2d); }

/* Table bar width dynamique (inline inévitable) */
/* .bar-fill width est toujours inline pour les valeurs dynamiques PHP */

/* Suggest layout grid responsive */
.grid-1-1-2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-3xl); align-items: start; }
@media (max-width: 768px) { .grid-1-1-2 { grid-template-columns: 1fr; gap: var(--sp-xl); } }

/* Bounce animation pour review */
@keyframes bounce-r { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-12px) rotate(5deg); } }
.confetti-icon { animation: bounce-r .8s ease infinite alternate; }

/* Scrollbar admin */
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }

/* ═══════════════════════════════════════════════════════════
   30. CLASSES FINALES (issu de l'audit)
═══════════════════════════════════════════════════════════ */

/* Inline anchor helpers */
.link-block-center { display: block; text-align: center; text-decoration: none; }
.link-inline-muted { color: var(--c-muted); font-size: .65rem; text-decoration: none; }

/* Share strip centré dans config.php htmlFoot */
.share-center { justify-content: center; padding: 1rem 0; }
.share-lbl    { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--c-muted); }

/* Contrib page heading */
.contrib-h1 { font-family: var(--f-display); font-size: clamp(1.6rem,4vw,2.2rem); font-weight: 300; color: var(--c-salt); }
.contrib-lead { font-family: var(--f-display); font-size: 1rem; font-style: italic; color: var(--c-muted); margin-top: .4rem; }
.contrib-note { background: rgba(196,146,58,.05); border: 1px solid rgba(196,146,58,.15); border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: .7rem; }

/* Game failed banner */
.game-failed-banner strong { display: block; margin-bottom: .3rem; color: var(--c-coral); font-weight: 600; }

/* Admin table inline badge */
.td-badge-circle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(196,146,58,.15); color: var(--c-gold); font-size: .68rem; font-weight: 600; border: 1px solid rgba(196,146,58,.3); }
.td-green-light  { font-size: .7rem; color: var(--c-green-l); }
.td-center-gold  { color: var(--c-gold); font-weight: 600; text-align: center; }
.td-hint-block   { font-size: .6rem; color: var(--c-muted); margin-top: .3rem; display: block; }
.td-desc         { max-width: 260px; font-size: .72rem; line-height: 1.4; }

/* Review dynamic stars (color inline inévitable) */
.star-gold   { color: var(--c-gold);              font-size: .9rem; }
.star-empty  { color: rgba(212,184,150,.2);        font-size: .9rem; }

/* Modal icon wrapper */
.modal-icon-lg { font-size: 3rem; margin-bottom: .8rem; text-align: center; }

/* Admin login */
.admin-tagline-sm { font-size: .52rem; margin-top: .6rem; }

/* Spacer */
.spacer-sm { height: var(--sp-sm); }
.spacer-md { height: var(--sp-md); }
.spacer-lg { height: var(--sp-lg); }

/* Date time display */
.admin-time { font-size: .62rem; color: var(--c-muted); }

/* Section header centré compact */
.sec-center-compact { max-width: 500px; margin: 0 auto var(--sp-xl); text-align: center; }

/* background-image inline est inévitable pour parallax dynamique PHP */
/* Les background-image avec PHP var() restent en inline */

/* ═══════════════════════════════════════════════════════════
   31. CLASSES FINALES admin/index
═══════════════════════════════════════════════════════════ */
/* KPI card avec couleur PHP dynamique = inline inévitable */
/* Badge position absolue cards */
.badge-card-tr { position: absolute; top: .6rem; right: .6rem; }
/* Card placeholder texte */
.card-placeholder { padding: .8rem 0; font-size: .72rem; color: var(--c-muted); line-height: 1.5; }
/* Form note */
.form-note { font-size: .78rem; margin-bottom: 1.2rem; max-width: 100%; }
/* Inline small filter */
.filter-sm { max-width: 120px; font-size: .66rem; }
/* Actions row */
.actions-row { display: flex; gap: .8rem; margin-top: .5rem; }
/* Geo btn font */
.geo-font { font-size: .65rem; }

/* ═══════════════════════════════════════════════════════════
   32. CLASSES FINALES (contributor, game, review)
═══════════════════════════════════════════════════════════ */
.contrib-empty { text-align: center; padding: 3rem; color: var(--c-muted); font-family: var(--f-display); font-size: 1.1rem; font-style: italic; }
.contrib-note2 { background: rgba(196,146,58,.05); border: 1px solid rgba(196,146,58,.15); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.contrib-status { font-size: .8rem; }
.contrib-admin-note { font-size: .78rem; color: var(--c-muted); line-height: 1.5; }
.game-warn-box { background: rgba(196,87,58,.12); border: 1px solid rgba(196,87,58,.3); border-radius: var(--radius-sm); padding: .6rem .9rem; margin-bottom: .8rem; font-size: .76rem; color: #e0896e; line-height: 1.4; }
.review-italic-sand { font-family: var(--f-display); font-style: italic; font-size: .95rem; color: rgba(212,184,150,.8); line-height: 1.6; margin-top: .8rem; }
.mb-xl-block { margin-bottom: var(--sp-xl); }

/* admin/index.php — déplacé depuis inline */
/* Styles admin spécifiques non couverts par main.css */
.nm-img { background: linear-gradient(135deg,#0d2238,#1a4a6e); }
.br-img { background: linear-gradient(135deg,#1a2d0d,#2d4a1a); }
.pv-img { background: linear-gradient(135deg,#3d2a0d,#5a3d1a); }
.al-img { background: linear-gradient(135deg,#2d0d1a,#4a1a2d); }
.status-reviewing { color: var(--c-blue); }
.detail-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--c-border); }
.detail-icon  { width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0; }
.modal-form .form-group { margin-bottom:.85rem; }

/* ═══════════════════════════════════════════════════════════
   33. CLASSES ULTIMES (login, proposals)
═══════════════════════════════════════════════════════════ */
/* Login modal body text */
.modal-body-text { font-size: .85rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 100%; }
/* Login auth card note */
.auth-note       { font-size: .62rem; margin-top: .8rem; max-width: 100%; }
/* Proposals table gold center */
.td-gold-center  { text-align: center; color: var(--c-gold); }

/* ══════════════════════════════════════════════════════════
   UX — STANDARDS GOOGLE (touch targets, spacing, readability)
══════════════════════════════════════════════════════════ */

/* Touch targets minimum 48×48px (Google Material 3) */
.btn, .nav-link, .footer-link, .auth-tab,
.sidebar-link, .geo-btn, .card-link, .game-card {
  min-height: 44px;
}
.btn-sm { min-height: 36px; }

/* Sections : espacement cohérent façon Google */
.section        { padding-block: clamp(3rem, 8vw, 6rem); }
.section-tight  { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Grid cards : gap généreux */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 3vw, 1.5rem);
}

/* Section header : espacement standardisé */
.sec-header {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.sec-header .t-label  { margin-bottom: .5rem; }
.sec-header h2        { margin-bottom: .6rem; }
.sec-header p         { margin-top: .8rem; }
.sec-header .divider-gold { margin: .9rem auto 0; }

/* Lisibilité des paragraphes (Google recommande 45-75 chars) */
.prose    { max-width: 65ch; line-height: 1.75; }
.prose-lg { max-width: 75ch; line-height: 1.75; font-size: 1.05rem; }

/* CTA sections : padding et fond différencié */
.cta-section {
  padding: clamp(3rem, 8vw, 5rem) var(--sp-lg);
  text-align: center;
  border-top: 1px solid var(--c-border);
}
.cta-section h2 { margin-bottom: .5rem; }
.cta-section p  { margin-bottom: 1.8rem; color: var(--c-muted); max-width: 55ch; margin-inline: auto; }
.cta-btns {
  display: flex;
  gap: var(--sp-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Feature grid (index.php) */
.feature-card {
  padding: var(--sp-lg);
  background: rgba(240,235,227,.03);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-base), transform var(--t-base);
}
.feature-card:hover {
  border-color: rgba(196,146,58,.3);
  transform: translateY(-3px);
}
.feature-icon  { font-size: 1.4rem; margin-bottom: .6rem; }
.feature-title { font-family: var(--f-display); font-size: 1rem; margin-bottom: .3rem; }
.feature-desc  { font-size: .75rem; color: var(--c-muted); line-height: 1.6; max-width: 100%; }

/* Parcours cards (index.php) */
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}
.parcours-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.parcours-card:hover {
  transform: translateY(-5px);
  border-color: rgba(196,146,58,.4);
  box-shadow: var(--shadow-md);
}
.parcours-card-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  position: relative;
}
.parcours-card-body  { padding: var(--sp-md) var(--sp-md) var(--sp-md); }
.parcours-card-name  { font-family: var(--f-display); font-size: 1.2rem; margin-bottom: .3rem; }
.parcours-card-desc  { font-size: .73rem; color: var(--c-muted); line-height: 1.55; max-width: 100%; margin-bottom: .9rem; }
.parcours-card-foot  { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: .7rem; }
.parcours-card-meta  { font-size: .6rem; color: var(--c-muted); }
.parcours-card.soon  { opacity: .62; pointer-events: none; }

/* Reviews grid */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.review-card {
  padding: var(--sp-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
}
.review-stars   { display: flex; gap: 2px; margin-bottom: .5rem; }
.review-quote   { font-family: var(--f-display); font-style: italic; font-size: .97rem; color: rgba(212,184,150,.82); line-height: 1.65; margin-bottom: .7rem; }
.review-author  { font-size: .6rem; letter-spacing: .08em; color: var(--c-muted); }
.review-date    { font-size: .56rem; color: rgba(212,184,150,.28); margin-left: .4rem; }

/* Hero stats strip */
.hero-stats {
  display: flex;
  gap: clamp(1.5rem, 5vw, 3rem);
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stat-val { font-family: var(--f-display); font-size: 2rem; font-weight: 300; color: var(--c-gold); line-height: 1; }
.hero-stat-lbl { font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); margin-top: .2rem; }

/* Step cards (concept section) */
.step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.step-card {
  background: rgba(240,235,227,.04);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-lg) var(--sp-md);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base);
}
.step-card:hover { border-color: rgba(196,146,58,.35); transform: translateY(-3px); }
.step-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,var(--c-gold),transparent); opacity: 0; transition: opacity var(--t-base); }
.step-card:hover::before { opacity: 1; }
.step-num   { font-family: var(--f-display); font-size: 3.5rem; font-weight: 300; color: rgba(196,146,58,.08); position: absolute; top: .3rem; right: .8rem; line-height: 1; }
.step-icon  { font-size: 1.6rem; margin-bottom: .65rem; }
.step-title { font-family: var(--f-display); font-size: 1.05rem; margin-bottom: .35rem; color: var(--c-salt); }
.step-desc  { font-size: .74rem; color: var(--c-muted); line-height: 1.6; max-width: 100%; }

/* Suggest section layout */
.suggest-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-3xl);
  align-items: start;
}
@media (max-width: 768px) {
  .suggest-layout { grid-template-columns: 1fr; gap: var(--sp-xl); }
}

/* Intro layout (noirmoutier.php) */
.intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3xl);
  align-items: center;
}
@media (max-width: 768px) {
  .intro-layout { grid-template-columns: 1fr; gap: var(--sp-xl); }
}

/* ── Responsive global fixes ── */
@media (max-width: 640px) {
  .cards-grid      { grid-template-columns: 1fr; }
  .step-cards      { grid-template-columns: 1fr 1fr; }
  .parcours-grid   { grid-template-columns: 1fr; }
  .reviews-grid    { grid-template-columns: 1fr; }
  .hero-stats      { gap: 1.5rem; }
  .cta-btns        { flex-direction: column; align-items: center; }
  .cta-btns .btn   { width: 100%; max-width: 280px; }
}
@media (max-width: 400px) {
  .step-cards { grid-template-columns: 1fr; }
}

/* ── RESET PAGE ─────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-decoration: none;
  margin-bottom: var(--sp-lg);
  transition: color var(--t-fast);
}
.back-link:hover { color: var(--c-sand); }

.card-sub {
  font-size: .75rem;
  color: var(--c-muted);
  margin-top: .3rem;
  margin-bottom: var(--sp-md);
  max-width: 100%;
}

.btn-outline {
  background: none;
  border: 1px solid var(--c-border);
  color: var(--c-sand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-base);
}
.btn-outline:hover { border-color: var(--c-gold); color: var(--c-gold); }

.btn-gold {
  background: linear-gradient(135deg, var(--c-gold), var(--c-gold-h));
  color: var(--c-dark);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--t-base);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(196,146,58,.42); }

.link-block-center {
  display: block;
  text-align: center;
  margin-top: var(--sp-md);
}

/* Reset page card wrapper */
.reset-wrap {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}
.reset-card {
  width: 100%;
  max-width: 440px;
  background: rgba(13,34,56,.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-xl) var(--sp-lg);
}
.reset-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--c-salt);
  margin-bottom: .4rem;
}
.reset-sub {
  font-size: .72rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: var(--sp-lg);
  max-width: 100%;
}