/* ═══════════════ STUDIA SUP — LP SCROLL-SCRUB ═══════════════ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --green: #2E9E4F;
  --green-dark: #1B6B35;
  --blue: #1E88C7;
  --yellow: #F2C230;
  --black: #0B120E;
  --white: #F7F9F8;
  --glass-bg: rgba(11, 18, 14, 0.55);
  --glass-border: rgba(255, 255, 255, 0.15);
  --display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --stage-half: 28.2vh; /* demi-largeur colonne 9:16 en desktop (≈ 56.25vh / 2) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: auto; }

body {
  font-family: var(--body);
  background: var(--black);
  color: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* hidden ferait de body un conteneur de défilement et casserait le
     sticky de l'en-tête sur Safari iOS ; clip coupe sans conteneur. */
  overflow-x: hidden;
}
@supports (overflow-x: clip) {
  body { overflow-x: clip; }
}

body.is-loading { overflow: hidden; }

h1, h2, h3, .btn { font-family: var(--display); }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════ PRÉCHARGEUR ═══════════ */
#preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
  transition: opacity .6s ease, visibility .6s;
}
#preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__logo img { display: block; width: min(280px, 70vw); height: auto; }
.preloader__track { width: min(240px, 60vw); height: 3px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.preloader__bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--blue)); border-radius: 3px; transition: width .25s ease; }
.preloader__pct { font-size: .95rem; font-variant-numeric: tabular-nums; color: rgba(247,249,248,.75); }
.preloader__hint { font-size: .8rem; color: rgba(247,249,248,.45); letter-spacing: .04em; }

/* ═══════════ SCRUB — SCÈNE ═══════════ */
.scrub { height: 700vh; position: relative; }

.scrub__pin {
  position: relative;
  height: 100vh; height: 100dvh;
  width: 100%;
  overflow: hidden;
}

.stage { position: absolute; inset: 0; }

#frameCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Logo persistant en haut de l'expérience scrub */
.stage__logo {
  position: absolute; z-index: 5;
  top: calc(20px + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%);
  width: min(360px, 88vw); height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}

.fallback__logo { width: 200px; max-width: 60vw; height: auto; margin-bottom: 18px; }

/* Tints synchronisés au scroll */
.tint {
  position: absolute; inset: 0;
  mix-blend-mode: overlay;
  opacity: 0;
  pointer-events: none;
}
.tint--blue   { background: #1E88C7; }
.tint--green  { background: #2E9E4F; }
.tint--yellow { background: #F2C230; }

/* Film grain */
.grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* Vignette */
.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 75% at 50% 45%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ═══════════ OVERLAYS ═══════════ */
.overlay { position: absolute; pointer-events: none; }
.overlay a, .overlay button { pointer-events: auto; }

/* Hero */
.overlay--hero {
  inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: 24px 24px calc(112px + env(safe-area-inset-bottom, 0px));
  text-align: left;
}
.hero__eyebrow {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(247,249,248,.85);
  margin-bottom: 14px; max-width: 32ch;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.hero__title {
  font-size: clamp(2.3rem, 9vw, 3.6rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.hero__scroll {
  margin-top: 22px; font-size: .9rem; color: rgba(247,249,248,.8);
  display: flex; align-items: center; gap: 8px;
}
.hero__arrow { display: inline-block; animation: pulse-down 1.6s ease-in-out infinite; }
@keyframes pulse-down {
  0%, 100% { transform: translateY(0); opacity: .7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Cartes filières — glass */
.card {
  left: 4%; width: 92%;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 18px 20px;
  opacity: 0; visibility: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.card__emoji { font-size: 1.6rem; margin-bottom: 6px; }
.card__title { font-size: 1.18rem; font-weight: 800; line-height: 1.2; margin-bottom: 6px; }
.card__desc { font-size: .9rem; color: rgba(247,249,248,.82); margin-bottom: 10px; }
.card__jobs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.card__jobs li {
  font-size: .76rem; padding: 4px 10px; border-radius: 99px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12);
}
.card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.badge {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--yellow); border: 1px solid rgba(242,194,48,.4);
  padding: 4px 10px; border-radius: 99px;
}
.card__cta {
  font-family: var(--display); font-weight: 700; font-size: .88rem;
  color: var(--white); text-decoration: none;
  background: var(--green);
  padding: 12px 16px; border-radius: 12px;
  min-height: 48px; display: inline-flex; align-items: center;
  transition: background .2s;
}
.card__cta:hover { background: var(--green-dark); }

/* Overlay CTA final */
.overlay--cta {
  inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 24px 24px calc(64px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.cta__title {
  font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 800; line-height: 1.15;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
  margin-bottom: 22px;
  opacity: 0; visibility: hidden;
}
.cta__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 340px; opacity: 0; visibility: hidden; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px;
  border-radius: 14px; border: none; cursor: pointer;
  font-weight: 800; font-size: 1.05rem; text-decoration: none;
  transition: transform .15s ease, background .2s, box-shadow .2s;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--green); color: #fff; box-shadow: 0 8px 28px rgba(46,158,79,.4); }
.btn--primary:hover { background: var(--green-dark); }
.btn--ghost {
  background: rgba(255,255,255,.1); color: var(--white);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: rgba(255,255,255,.18); }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--full { width: 100%; }
.btn--pulse { animation: btn-pulse 2s ease-in-out infinite; }
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 8px 28px rgba(46,158,79,.4); }
  50% { box-shadow: 0 8px 40px rgba(46,158,79,.75); }
}

/* ═══════════ DESKTOP ≥ 768px — plein écran cinémascope (vidéo 16:9) ═══════════ */
@media (min-width: 768px) {
  /* Le canvas couvre tout le viewport avec le set de frames 16:9 */
  .overlay--hero { padding: 48px 56px 110px; }
  .overlay--cta  { padding: 48px 56px 72px; }

  /* Logo en haut à gauche sur desktop */
  .stage__logo {
    left: 56px; transform: none;
    top: 28px;
  }

  .hero__title { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }

  /* 768–1023px : cartes centrées en bas, par-dessus la vidéo */
  .card { left: 50%; transform: translateX(-50%); width: min(440px, 88vw); }
}

/* ≥ 1024px : cartes latérales alternées par-dessus la vidéo */
@media (min-width: 1024px) {
  .card {
    width: min(370px, 34vw);
    bottom: auto; top: 50%; transform: translateY(-50%);
    background: rgba(11,18,14,.62);
  }
  .card--right { left: auto; right: 5vw; }
  .card--left  { left: 5vw; right: auto; }
}

/* ═══════════ FALLBACK VIDÉO ═══════════ */
#fallbackExperience { padding-bottom: 48px; }
.fallback__video-wrap { display: flex; justify-content: center; background: #000; }
.fallback__video-wrap video { width: 100%; max-width: 56vh; max-height: 92vh; display: block; }
.fallback__hero { padding: 40px 24px 8px; max-width: 720px; margin: 0 auto; }
.fallback__cards { display: grid; gap: 20px; padding: 28px 24px; max-width: 720px; margin: 0 auto; }
.fallback__cards .card {
  position: static; opacity: 1; visibility: visible; width: 100%; transform: none;
}
.fallback__cards .card::before { display: none; }
.fallback__cta { padding: 12px 24px 32px; max-width: 720px; margin: 0 auto; text-align: center; }
.fallback__cta .cta__title, .fallback__cta .cta__actions { opacity: 1; visibility: visible; }
.fallback__cta .cta__actions { margin: 0 auto; }

/* ═══════════ SECTIONS POST-SCRUB ═══════════ */
.cred {
  padding: 56px 24px;
  background: linear-gradient(180deg, var(--black), #101a13);
}
.cred__inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; justify-content: center;
}

/* Badge officiel MESRS (image fournie, fond blanc) */
.mesrs-badge {
  flex: 0 0 auto;
  background: #fff;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.mesrs-badge img { display: block; width: 160px; height: 160px; border-radius: 6px; }
.cred__thumb {
  flex: 0 0 auto; background: none; border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; padding: 4px; cursor: pointer; min-width: 48px; min-height: 48px;
}
.cred__thumb img { display: block; border-radius: 4px; }
.cred__text { font-size: .95rem; color: rgba(247,249,248,.85); }
.cred__text strong { color: var(--white); }

.process { padding: 64px 24px; background: #101a13; }
.process__title {
  text-align: center; font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800;
  margin-bottom: 40px;
}
.process__steps {
  list-style: none; max-width: 720px; margin: 0 auto;
  display: grid; gap: 18px;
}
@media (min-width: 768px) { .process__steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 22px 18px;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--green); color: #fff; font-weight: 800; font-family: var(--display);
  margin-bottom: 12px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .87rem; color: rgba(247,249,248,.75); }

/* Section CTA inscription — fond sombre continu (pas de dégradé clair) */
.cta-section {
  background: #101a13;
  padding: 88px 24px 96px;
  text-align: center;
}
.cta-section__inner { max-width: 720px; margin: 0 auto; }
.cta-section__eyebrow {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 14px;
}
.cta-section__title {
  font-size: clamp(1.9rem, 6vw, 2.8rem); font-weight: 800; line-height: 1.12;
  margin-bottom: 16px;
}
.cta-section__sub { color: rgba(247,249,248,.75); margin-bottom: 32px; }
.cta-section__actions {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: 420px; margin: 0 auto 26px;
}
.cta-section__actions .btn { width: 100%; }
.btn--xl { min-height: 60px; font-size: 1.12rem; padding: 16px 32px; }
.cta-section__reassure {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
  font-size: .85rem; color: rgba(247,249,248,.65);
}

#inscriptionForm { display: grid; gap: 18px; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; font-family: var(--display); }
.req { color: var(--green-dark); }
.opt { color: rgba(11,18,14,.5); font-weight: 400; }
.field input, .field select {
  width: 100%; min-height: 52px;
  padding: 12px 16px;
  border: 2px solid rgba(11,18,14,.16); border-radius: 12px;
  font-size: 1rem; font-family: var(--body);
  background: #fff; color: var(--black);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46,158,79,.15);
}
.hp-field { position: absolute; left: -9999px; }

.form-success {
  background: #fff; border: 2px solid var(--green);
  border-radius: 18px; padding: 32px; text-align: center;
  display: grid; gap: 12px; justify-items: center;
}
.form-success__title { font-size: 1.3rem; font-weight: 800; font-family: var(--display); }

/* ═══════════ PILL OFFICIELLE MESRS ═══════════ */
/* Composant partagé : la preuve institutionnelle ouvre la lecture
   (cachet de la section L'école) et la ferme (barre de footer). Une
   seule définition, donc un rendu strictement identique aux deux
   endroits. */
.pill-mesrs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--yellow);
  background: rgba(242,194,48,.08);
  color: var(--yellow);
  font-family: 'Space Grotesk', var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
}
.pill-mesrs svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Footer — thème sombre continu */
.footer {
  background: var(--black); color: rgba(247,249,248,.72);
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: .9rem;
  display: grid; gap: 6px;
}
.footer__brand { font-family: var(--display); font-weight: 800; letter-spacing: .15em; color: var(--white); font-size: 1.1rem; }
.footer__brand span { color: var(--green); }
.footer a { color: var(--green); }
.footer__legal { font-size: .78rem; color: rgba(247,249,248,.45); }

/* Menu mobile ouvert : la bulle WhatsApp se retire. Elle flotte à la
   racine du document alors que le panneau vit dans l'en-tête ; aucun
   z-index ne pouvait la faire passer dessous sans casser l'empilement. */
body.menu-mobile-ouvert .wa-float,
body.menu-mobile-ouvert .ctrl-flottant {
  opacity: 0; transform: scale(.85); pointer-events: none;
}

/* ═══════════ WHATSAPP FLOTTANT ═══════════ */
.wa-float {
  position: fixed;
  right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s ease, transform .35s ease;
}
.wa-float.is-visible { opacity: 1; transform: scale(1); }

/* ═══════════ LIGHTBOX ═══════════ */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; }
.lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; border: none;
  font-size: 1.2rem; cursor: pointer;
}

/* ═══════════ REVEALS ═══════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════ BASCULE DE LANGUE FR / EN ═══════════ */
/* Composant partagé : en-tête React de l'accueil et en-têtes vanilla des
   pages filières / inscription. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
/* Ce sont des liens, pas des boutons : sans JavaScript, ?lang=en reste une
   navigation valide et la bascule fonctionne quand même. */
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: rgba(247,249,248,.65);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.lang-switch__btn:hover { color: var(--white); }
.lang-switch__btn[aria-current="true"] {
  background: var(--green);
  color: var(--black);
  cursor: default;
}

/* Le corps reste masqué le temps que js/traduction.js pose l'anglais.
   La classe n'existe que si JavaScript tourne, et langue.js garantit son
   retrait au bout de 800 ms quoi qu'il arrive. */
.i18n-attente body { visibility: hidden; }

/* ═══════════ BASCULE DE THÈME (☀ / 🌙) ═══════════ */
/* Même pastille que .lang-switch, à sa droite. Injectée seulement sur
   les pages de lecture : l'accueil et l'expérience restent sombres. */
.theme-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 3px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}
/* Deux icônes au trait fin plutôt que des emojis : ceux-ci imposaient
   leur propre couleur (une lune jaune, un soleil orange) au milieu d'une
   charte verte, et leur dessin changeait d'un téléphone à l'autre. Ici
   chaque état a sa nuance de vert — menthe pour la nuit, lime pour le
   jour — et l'état actif s'affirme par un fond teinté, pas par un aplat
   qui écraserait la nuance. */
.theme-switch__btn {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: rgba(134,239,172,.5);
  line-height: 1;
  cursor: pointer;
  transition: color .25s ease, background-color .25s ease;
}
.theme-switch__btn .ts-ico {
  display: block; width: 16px; height: 16px;
}
.theme-switch__btn:hover { color: #86EFAC; }
.theme-switch__btn[data-theme-btn="clair"]:hover { color: #BEF264; }
.theme-switch__btn[aria-current="true"] {
  background: rgba(46,158,79,.24);
  color: #6EE7A0;
  cursor: default;
}
.theme-switch__btn[data-theme-btn="clair"][aria-current="true"] {
  background: rgba(163,230,53,.2);
  color: #BEF264;
}

/* Sur téléphone, les deux pastilles voisinent avec un logo et un CTA :
   à taille pleine elles repoussaient « Candidater » hors de l'écran.
   Elles se resserrent ici — donc sur toutes les pages qui les affichent,
   pas seulement celles qui chargent accueil.css. La hauteur de la cible
   tactile reste à 32 px, seule la largeur cède. */
@media (max-width: 560px) {
  .lang-switch, .theme-switch { padding: 2px; }
  .lang-switch__btn { min-width: 26px; padding: 0 4px; font-size: .66rem; letter-spacing: .02em; }
  .theme-switch__btn { min-width: 26px; padding: 0 3px; }
  .theme-switch__btn .ts-ico { width: 15px; height: 15px; }
}
@media (max-width: 379px) {
  .lang-switch__btn { min-width: 23px; padding: 0 3px; }
  .theme-switch__btn { min-width: 23px; padding: 0 2px; }
}

/* ═══════════ LA LANGUE DESCEND EN PIED DE PAGE SUR TÉLÉPHONE ═══════════
   Trois contrôles se disputaient l'en-tête d'un écran de 375 px. La
   langue est le moins urgent des trois — on la choisit une fois, pas à
   chaque page — alors elle rejoint le pied de page, où l'on cherche déjà
   les réglages du site. Le thème, lui, reste à portée de pouce : on en
   change au fil de la lecture, selon la lumière. */
.pied-langue { display: none; }
@media (max-width: 620px) {
  .hd__actions .lang-switch,
  .ins-header__reglages .lang-switch { display: none; }
  .pied-langue {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin: 18px auto 0;
  }
  .pied-langue__label {
    font-family: var(--display); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(247,249,248,.45);
  }
  .pied-langue .lang-switch { padding: 3px; }
  .pied-langue .lang-switch__btn {
    min-width: 42px; min-height: 36px; padding: 0 12px; font-size: .76rem;
  }
}