/* =========================================================
   QUALICONNECT — Visite Virtuelle Interactive
   Design : premium, épuré, glassmorphism (cyan raffiné)
   Lifting UI/UX : OLED dark, contraste renforcé, glows maîtrisés,
   Space Grotesk pour les titres, hotspots accessibles (≥44px).
   ========================================================= */

:root {
  /* — Fond profond (OLED) — */
  --bg:          #04060c;
  --bg-2:        #070b16;

  /* — Accents "connectivité" : cyan + indigo — */
  --accent:      #38d6f5;
  --accent-2:    #7c8cff;
  --accent-ink:  #042029;          /* texte sur fond accent (contraste fort) */

  /* — Texte — */
  --text:        #f6f9ff;
  --text-dim:    rgba(233, 240, 255, .74);
  --text-faint:  rgba(233, 240, 255, .52);

  /* — Surface des encadrés (opaque, pas de transparence) — */
  --glass-bg:    linear-gradient(160deg, #151e34 0%, #0c1322 100%);
  --glass-brd:   rgba(255, 255, 255, .12);
  --glass-blur:  26px;

  /* — Échelle d'espacement — */
  --sp-1: 6px; --sp-2: 10px; --sp-3: 16px; --sp-4: 24px; --sp-5: 34px;

  /* — Échelle de z-index — */
  --z-video: 1; --z-ui: 5; --z-hotspot: 6; --z-progress: 8; --z-loader: 1000;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --shadow:      0 28px 70px -24px rgba(0, 0, 0, .72);
  --radius:      20px;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

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

html { scroll-behavior: auto; }            /* le scroll-jacking gère lui-même */

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* =========================================================
   ÉCRAN DE CHARGEMENT
   ========================================================= */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(130% 120% at 50% 28%, #0a1326 0%, var(--bg) 72%);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader__brand {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: .4em;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-left: .4em;
}
.loader__bar {
  width: min(300px, 62vw); height: 3px; border-radius: 99px;
  background: rgba(255, 255, 255, .1); overflow: hidden;
}
.loader__fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s var(--ease);
}
.loader__hint {
  font-size: .76rem; letter-spacing: .22em; color: var(--text-faint);
  text-transform: uppercase;
}

/* =========================================================
   ÉCRAN D'ACCUEIL (la visite ne démarre qu'au clic)
   ========================================================= */
.gate {
  position: fixed; inset: 0; z-index: 950;
  display: grid; place-items: center; text-align: center; padding: 0 24px;
  background: radial-gradient(120% 100% at 50% 28%, rgba(10, 18, 38, .82), rgba(3, 5, 12, .93));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .7s var(--ease), visibility .7s;
}
.gate.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__inner { max-width: 560px; }
.gate__logo { width: 84px; height: 84px; border-radius: 22px; mix-blend-mode: screen; margin-bottom: 18px; }
.gate__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 7vw, 4rem); letter-spacing: -.02em; line-height: 1.05; }
.gate__title b { color: var(--accent); }
.gate__sub { margin: 16px auto 16px; color: var(--text-dim); font-size: clamp(1.02rem, 2.2vw, 1.18rem); font-weight: 300; max-width: 760px; white-space: nowrap; }
.gate__benefits { list-style: none; padding: 0; margin: 0 auto 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gate__benefits li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--text-dim); }
.gate__benefits li::before { content: "✓"; color: var(--accent); font-weight: 700; }
.gate__lead { margin: 24px auto 28px; color: var(--text-faint); font-size: .95rem; font-weight: 400; }
.gate__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gate__link {
  background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  color: var(--text-dim); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
.gate__link:hover, .gate__link:focus-visible { color: #fff; outline: none; }
.gate__btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 17px 34px; border: 0; border-radius: 99px; font-family: var(--font-body);
  font-weight: 600; font-size: 1.05rem; color: var(--accent-ink);
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  box-shadow: 0 16px 46px -10px rgba(56, 214, 245, .6);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gate__btn:hover, .gate__btn:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 58px -10px rgba(56, 214, 245, .85); outline: none; }
.gate__btn--ghost { background: none; color: var(--text); border: 1px solid var(--glass-brd); box-shadow: none; text-decoration: none; }
.gate__btn--ghost:hover, .gate__btn--ghost:focus-visible { transform: translateY(-3px); background: rgba(255, 255, 255, .05); border-color: var(--accent); box-shadow: none; }
.gate__poleslabel { margin: 22px 0 12px; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.gate__poles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; margin: 0 auto; }
.gate__pole {
  --cc: var(--c, var(--accent));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-width: 0;
  padding: 11px 18px; border-radius: 99px; font-size: .94rem; font-weight: 600; color: #fff;
  background: color-mix(in srgb, var(--cc) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc) 58%, transparent);
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.gate__pole span { font-size: 1.1rem; line-height: 1; }
.gate__pole:hover, .gate__pole:focus-visible {
  transform: translateY(-2px); outline: none;
  background: color-mix(in srgb, var(--cc) 40%, transparent);
  border-color: color-mix(in srgb, var(--cc) 90%, transparent);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--cc) 90%, transparent);
}
@media (max-width: 760px) {
  .gate__logo { width: 64px; height: 64px; margin-bottom: 14px; }
  .gate__sub { white-space: normal; }
  .gate__benefits { gap: 6px; margin-bottom: 18px; }
  .gate__lead { margin-bottom: 22px; }
  .gate__poles { gap: 8px; max-width: 340px; }
  .gate__pole { font-size: .84rem; padding: 11px 8px; gap: 6px; }
}

/* =========================================================
   SCÈNE FIXE (vidéo + UI)
   ========================================================= */
.stage {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  overflow: hidden; z-index: var(--z-video);
}
.stage__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.stage__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
/* PC : rendu par le canvas (séquence d'images) -> la vidéo est masquée */
@media (min-width: 761px) { .stage__video  { display: none; } }
/* Mobile : rendu par la vidéo -> le canvas est masqué */
@media (max-width: 760px)  { .stage__canvas { display: none; } }
/* Dégradés pour garder le texte lisible (contraste) */
.stage__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(135% 95% at 50% 48%, transparent 42%, rgba(2, 4, 10, .62) 100%),
    linear-gradient(to bottom, rgba(2, 4, 10, .42) 0%, transparent 20%, transparent 68%, rgba(2, 4, 10, .6) 100%);
}

/* =========================================================
   COUCHE UI
   ========================================================= */
.ui { position: absolute; inset: 0; z-index: var(--z-ui); }

.scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease);
}
.scene.is-active { opacity: 1; visibility: visible; }

.scroll-track { position: relative; z-index: 0; width: 100%; }

/* =========================================================
   1. INTRO
   ========================================================= */
.scene--intro { display: grid; place-items: center; text-align: center; padding: 0 6vw; }
/* Voile sombre à l'arrivée (comme l'écran de fin) pour des textes plus lisibles */
.scene--intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 45%, rgba(3, 5, 12, .58) 0%, rgba(3, 5, 12, .84) 100%);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.intro { position: relative; z-index: 1; }
.intro__eyebrow {
  font-size: .8rem; letter-spacing: .46em; color: var(--accent);
  margin-bottom: 1.2rem; padding-left: .46em; font-weight: 600;
}
.intro__title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 8vw, 6.2rem); font-weight: 600;
  line-height: 1.0; letter-spacing: -.025em;
  text-shadow: 0 10px 50px rgba(0, 0, 0, .6);
}
.intro__title span {
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.intro__sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 2.2vw, 1.28rem); color: var(--text-dim); font-weight: 300; }

.intro__scroll { margin-top: 3.4rem; display: flex; justify-content: center; }
.intro__mouse {
  width: 27px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 16px; display: flex; justify-content: center; padding-top: 8px;
}
.intro__wheel { width: 4px; height: 8px; border-radius: 4px; background: #fff; animation: wheel 1.6s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }

/* =========================================================
   HOTSPOTS (point lumineux + carte glassmorphism)
   Hit-target ≥ 44px (accessibilité tactile), visuel plus petit.
   ========================================================= */
.hotspot {
  position: absolute;
  width: 46px; height: 46px;             /* zone cliquable accessible */
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  z-index: var(--z-hotspot);
  border-radius: 50%;
}
.hotspot:focus-visible { outline: none; }
.hotspot:focus-visible .hotspot__dot {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--accent), 0 0 18px rgba(56, 214, 245, .8);
}
.hotspot__dot {
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 62%);
  box-shadow: 0 0 0 4px rgba(56, 214, 245, .22), 0 0 14px rgba(56, 214, 245, .8);
  transition: box-shadow .3s var(--ease);
}
.hotspot__pulse {
  position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(3); opacity: 0; }
  100% { opacity: 0; }
}

/* Points lumineux masqués (PC & mobile) : les cartes s'affichent
   automatiquement, le marqueur visuel n'est plus nécessaire. */
.hotspot__dot, .hotspot__pulse { display: none; }

/* La carte — style UNIQUE pour les 6 encarts d'offres */
.card {
  position: absolute; width: 330px; max-width: 80vw;
  padding: var(--sp-4) calc(var(--sp-4) + 2px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
  text-align: left;
  opacity: 0; pointer-events: none;
  transform: translateY(22px);
  transition: opacity .55s var(--ease-out), transform .6s var(--ease-out);
}
/* Liseré d'accent en haut de carte */
.card::before {
  content: ""; position: absolute; top: 0; left: var(--sp-4); right: var(--sp-4); height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}
/* Placement CONTEXTUEL (PC) : zone basse, du côté opposé au sujet de la vidéo */
.card--bl { left: 5vw;  bottom: 9vh; }                       /* bas-gauche  */
.card--br { right: 5vw; bottom: 9vh; }                       /* bas-droite  */
.card--bc { left: 50%; bottom: 9vh; margin-left: -165px; }   /* bas-centre  */

/* La carte s'affiche automatiquement quand sa scène est active */
.scene.is-active .card { opacity: 1; pointer-events: auto; transform: translateY(0); }

.card__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: var(--sp-2);
}
.card__tag::before { content: ""; width: 16px; height: 1.5px; background: var(--accent); }
.card__title {
  font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 600; margin-bottom: var(--sp-2);
  letter-spacing: -.01em; line-height: 1.2;
  color: #ffffff;
}
.card__text { font-size: .9rem; line-height: 1.6; color: var(--text-dim); font-weight: 300; }

/* =========================================================
   ENCARTS AUTOMATIQUES (panels)
   ========================================================= */
.panel {
  position: absolute; max-width: 420px;
  padding: var(--sp-5) calc(var(--sp-5) + 2px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  border-radius: calc(var(--radius) + 2px);
  /* fond opaque : pas de flou nécessaire */
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.panel--left { top: 50%; left: 6vw; transform: translateY(-50%); max-width: 388px; }
.panel--big  { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 580px; text-align: center; }

/* Variante "carte" : même style que les 4 cartes d'offres
   (petit encart aligné à gauche, liseré d'accent en haut, titre blanc). */
.panel--card {
  max-width: 340px;
  padding: var(--sp-4) calc(var(--sp-4) + 2px);
  border-radius: var(--radius);
}
.panel--card::before {
  content: ""; position: absolute; top: 0; left: var(--sp-4); right: var(--sp-4); height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px;
}
.panel--card .panel__title {
  font-size: 1.18rem; color: #ffffff; line-height: 1.2; margin-bottom: var(--sp-2);
}
.panel--card .panel__tag::before { width: 16px; }

/* Slide-up à l'activation */
.scene--panel .panel { transition: transform .65s var(--ease-out), opacity .55s var(--ease-out); }
.scene--panel:not(.is-active) .panel--left { transform: translateY(calc(-50% + 34px)); opacity: 0; }
.scene--panel:not(.is-active) .panel--big  { transform: translate(-50%, calc(-50% + 34px)); opacity: 0; }

.panel__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: var(--sp-3);
}
.panel__tag::before { content: ""; width: 20px; height: 1.5px; background: var(--accent); }
.panel--big .panel__tag { justify-content: center; }
.panel__title {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.2vw, 2.05rem); font-weight: 600;
  margin-bottom: var(--sp-3); letter-spacing: -.018em; line-height: 1.12;
}
.panel__text { font-size: clamp(.94rem, 1.5vw, 1.04rem); line-height: 1.68; color: var(--text-dim); font-weight: 300; }

/* =========================================================
   OUTRO + CTA
   ========================================================= */
.scene--outro { display: grid; place-items: center; text-align: center; padding: 0 6vw; }
.scene--outro::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(3, 5, 12, .7);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.outro { position: relative; z-index: 1; max-width: 660px; }
.outro__eyebrow { font-size: .8rem; letter-spacing: .46em; color: var(--accent); margin-bottom: 1.1rem; font-weight: 600; padding-left: .46em; }
.outro__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.7rem); font-weight: 600; line-height: 1.06; letter-spacing: -.025em;
}
.outro__sub { margin: 1.4rem 0 2.5rem; font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--text-dim); font-weight: 300; }

.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 17px 32px; border-radius: 99px;
  font-weight: 600; font-size: 1.03rem; text-decoration: none; color: var(--accent-ink);
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  box-shadow: 0 14px 42px -10px rgba(56, 214, 245, .55);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 20px 54px -10px rgba(56, 214, 245, .8); }
.cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cta svg { transition: transform .3s var(--ease); }
.cta:hover svg { transform: translateX(4px); }

/* ---- Grille de pôles (choix de pôle, écran de fin) ---- */
.outro__poles-label {
  margin-top: 28px; font-size: .8rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 600;
}
.polegrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  max-width: 600px; margin: 18px auto 0;
}
.polegrid__card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 14px; border-radius: 16px; text-decoration: none;
  background: var(--glass-bg); border: 1px solid var(--glass-brd);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.polegrid__card:hover, .polegrid__card:focus-visible {
  transform: translateY(-3px); border-color: var(--c); outline: none;
  box-shadow: 0 0 0 1px var(--c), 0 14px 34px -12px var(--c);
}
.polegrid__emoji { font-size: 1.75rem; line-height: 1; }
.polegrid__name { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: #fff; text-align: center; }
@media (max-width: 760px) {
  .polegrid { grid-template-columns: repeat(2, 1fr); max-width: 360px; gap: 10px; margin-top: 12px; }
  .polegrid__card { padding: 16px 10px; }
  .outro__poles-label { margin-top: 20px; }
}

/* =========================================================
   BARRE DE PROGRESSION
   ========================================================= */
.progress {
  position: absolute; left: 0; bottom: 0; z-index: var(--z-progress);
  width: 100%; height: 3px; background: rgba(255, 255, 255, .07);
}
.progress__fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(56, 214, 245, .7);
}

/* =========================================================
   BARRE DE MARQUE (mobile) — logo + nom toujours visibles + pôle courant
   ========================================================= */
.topbar { display: none; }   /* masquée sur ordinateur */

@media (max-width: 760px) and (orientation: portrait) {
  .topbar {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    position: fixed; z-index: 7;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 70px; right: 14px;   /* place pour le menu burger à gauche */
    padding: 11px 16px 12px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .topbar::before {
    content: ""; position: absolute; top: 0; left: var(--sp-4); right: var(--sp-4); height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent); border-radius: 2px;
  }
  .topbar__row { display: flex; align-items: center; gap: 10px; }
  .topbar__logo {
    width: 30px; height: 30px; border-radius: 8px;
    object-fit: cover; mix-blend-mode: screen;   /* le fond sombre du logo s'efface */
  }
  .topbar__name {
    font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
    letter-spacing: .005em; color: #fff; line-height: 1;
  }
  .topbar__name b { color: var(--accent); font-weight: 600; }
  .topbar__pole {
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; line-height: 1;
    opacity: 0; transition: opacity .4s var(--ease);
  }
  .topbar__pole.is-visible { opacity: 1; }
}

/* =========================================================
   RESPONSIVE — TÉLÉPHONE (≤ 760px)
   Les cartes et panneaux deviennent des "feuilles" en bas d'écran
   (pattern mobile), avec textes plus grands et cibles tactiles.
   ========================================================= */
@media (max-width: 760px) {

  /* Vidéo ENTIÈRE visible sur mobile : on n'utilise plus le recadrage
     "cover" (qui coupe les côtés, ex. les caméras à droite). Les fines
     bandes sombres haut/bas se fondent dans le fond. */
  .stage { background: #04060c; }
  .stage__video { object-fit: contain; }

  /* Le pôle s'affiche dans la barre du haut -> on masque le tag des cartes */
  .card__tag, .panel__tag { display: none; }

  /* --- Toutes les cartes : "feuille" en bas d'écran --- */
  .card {
    position: fixed; top: auto;
    left: 14px; right: 14px;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; margin: 0;
    padding: var(--sp-4);
    transform: translateY(26px);
  }
  .card::before { left: 22px; right: 22px; }
  .card__title { font-size: 1.2rem; }
  .card__text  { font-size: 1rem; line-height: 1.55; }

  /* --- Intro / Outro : tailles adaptées au portrait --- */
  .intro__title { font-size: clamp(2.1rem, 11.5vw, 3.4rem); line-height: 1.06; }
  .intro__title span { display: block; }   /* "Qualiconnect" sur sa propre ligne */
  .intro__eyebrow { letter-spacing: .38em; }
  .intro__sub   { font-size: 1.05rem; }
  .intro__scroll { margin-top: 2.6rem; }
  .outro__title { font-size: clamp(1.95rem, 9vw, 2.7rem); }
  .outro__sub   { font-size: 1.02rem; }
  .cta { width: 100%; justify-content: center; padding: 16px 24px; }

  /* La barre de progression un peu plus visible au doigt */
  .progress { height: 4px; }
}

/* =========================================================
   PORTRAIT (téléphone) : cartes ancrées SOUS la bande vidéo.
   La vidéo 16:9 est centrée et occupe 56.25vw de hauteur ; son bas
   se situe donc à (50vh + 28.125vw). On place les cartes juste en
   dessous, dans la zone noire, pour qu'elles ne couvrent jamais l'image.
   ========================================================= */
@media (max-width: 760px) and (orientation: portrait) {
  .card {
    top: calc(50vh + 28.125vw + 10px);   /* repli navigateurs sans dvh */
    top: calc(50dvh + 28.125vw + 10px);  /* aligné sur la hauteur réelle */
    bottom: auto;

    /* Hauteur IDENTIQUE pour toutes les cartes, calée dans la zone noire
       sous la vidéo et au-dessus de la barre du navigateur (dvh). */
    height: calc(50vh - 28.125vw - 26px);              /* repli */
    height: min(228px, calc(50dvh - 28.125vw - 26px)); /* hauteur réelle */
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
}

/* =========================================================
   ACCESSIBILITÉ — Réduction des animations
   (le scroll-jacking peut provoquer des nausées : on calme tout)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hotspot__pulse, .intro__wheel { animation: none; }
  .scene, .card, .panel, .cta { transition-duration: .01ms; }
}