/* theme.css — LE SOCLE VISUEL COMMUN du programme CLSB « PFE to Talent ».
 *
 * Un seul endroit pour les couleurs, les espacements, l'échelle de texte et
 * les composants partagés (boutons, en-tête, pied). Chaque page garde sa
 * mise en page propre ; elle n'a plus à redéclarer ce qui est ici.
 *
 * Deux distances de lecture, deux échelles :
 *   - l'écran projeté (lisible à 8 mètres) : tailles fluides en vw/vh ;
 *   - le téléphone (jouable au pouce) : tailles fixes en rem, cibles ≥ 44 px.
 */

:root {
  /* ── couleurs de marque, mesurées sur le logo ─────────────────────────── */
  --blue:       #0054A6;
  --blue-dark:  #003E7C;
  --blue-deep:  #002B56;
  --blue-mid:   #2E86E0;
  --blue-soft:  #8FC2F0;
  --blue-pale:  #D6E9FB;
  --wash:       #EAF4FE;
  --gold:       #E2A93B;
  --gold-ink:   #8a6415;     /* l'or, quand il doit se LIRE (texte) */
  --rouge:      #E5262A;
  --vert:       #8EC048;
  --vert-ink:   #5EA02F;

  /* ── neutres teintés vers le bleu : jamais de blanc ni de noir purs ────── */
  --fond:       oklch(98.2% 0.008 250);
  --fond-2:     oklch(95.5% 0.016 250);
  --surface:    oklch(99.2% 0.004 250);
  --ligne:      oklch(90% 0.03 250);
  --ink:        #0B2E52;
  --ink-soft:   #4A6C90;
  --ink-faint:  oklch(70% 0.06 250);

  /* ── espacements, échelle 4 pt ────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  /* ── texte : l'écran projeté (fluide) ─────────────────────────────────── */
  --t-kicker:  clamp(10.5px, 0.85vw, 12.5px);
  --t-body:    clamp(13px, 1.2vw, 17.5px);
  --t-lead:    clamp(15px, 1.5vw, 22px);
  --t-h2:      clamp(20px, 2.3vw, 34px);
  --t-h1:      clamp(26px, 3.2vw, 48px);
  --t-hero:    clamp(34px, 5vw, 78px);

  --police-titre: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --police-texte: 'Archivo', system-ui, sans-serif;

  --rayon:    14px;
  --rayon-lg: 20px;
  --ombre:    0 24px 56px -32px rgba(0, 43, 86, .5);
  --ombre-sm: 0 10px 28px -20px rgba(0, 43, 86, .45);

  --barre-h: 52px;   /* la barre de navigation du grand écran */
}

*, *::before, *::after { box-sizing: border-box; }
/* Un élément `hidden` est caché, POINT — même si sa classe lui donne un
   display:flex. Sans cette règle, un calque en display:flex restait visible
   malgré l'attribut (vu sur le détail 2014–2026, sur mobile). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police-texte);
  color: var(--ink);
  background: radial-gradient(1200px 700px at 50% -10%, var(--surface), var(--wash) 58%, #DCEBFA 100%);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
img, svg, video { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── le respect des préférences de mouvement ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── composants partagés ───────────────────────────────────────────────── */
.logo-delice { display: block; height: clamp(30px, 3.6vh, 42px); margin: 0 auto; }
.kicker {
  font-size: var(--t-kicker); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-soft); font-weight: 600;
}
.titre-ecran {
  font-family: var(--police-titre); font-weight: 800; font-size: var(--t-h1);
  line-height: 1.08; color: var(--blue); margin: 0;
}
.sous-titre { color: var(--ink-soft); font-size: var(--t-body); margin-top: var(--space-xs); }

.btn {
  font-family: var(--police-texte); font-weight: 600; font-size: 14.5px;
  padding: 11px 24px; border-radius: 999px; min-height: 44px;
  border: 1.5px solid var(--blue-soft); background: var(--surface); color: var(--blue);
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--wash); }
.btn:active { transform: translateY(1px); }
.btn.primaire { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primaire:hover { background: var(--blue-dark); }
.btn.or { background: var(--gold); border-color: var(--gold); color: #3a2a06; }
.btn.danger { border-color: #f3b2b3; color: var(--rouge); }
.btn.fantome { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

.pied {
  flex: 0 0 auto; display: flex; gap: var(--space-md); justify-content: center; align-items: center;
  flex-wrap: wrap; padding-top: clamp(10px, 1.8vh, 22px);
}
.conn {
  position: fixed; right: 14px; bottom: 12px; z-index: 45; font-size: 12px; color: var(--rouge);
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 999px; padding: 4px 10px;
}
.conn:empty { display: none; }

/* ── le grand écran : la barre de navigation réserve de la place ──────── */
body.avec-barre .wrap { padding-top: calc(var(--barre-h) + 10px); }   /* le contenu commence sous la barre */

/* ── responsive : l'écran projeté ouvert sur un téléphone ─────────────── */
@media (max-width: 720px) {
  :root {
    --t-kicker: 10.5px; --t-body: 14px; --t-lead: 15.5px;
    --t-h2: 20px; --t-h1: 24px; --t-hero: 34px;
  }
  body { overflow: auto !important; }
  .wrap { min-height: 100%; height: auto !important; padding: 12px 14px 20px !important; }
  .pied { gap: 8px; }
  .pied .btn { flex: 1 1 calc(50% - 8px); padding: 11px 12px; font-size: 13.5px; }
  .conn { bottom: 8px; right: 8px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  .logo-delice { height: 26px; }
}