/* ==========================================================================
   RESPONSIVE-DESKTOP.CSS v5 — ADAPTATIF FLUIDE
   Aucun breakpoint fixe. Tout est relatif au viewport réel (vw/vh/clamp).
   Fonctionne peu importe la résolution ET la mise à l'échelle Windows.
   Logique : le navigateur reçoit toujours la taille CSS réelle du viewport,
   quelle que soit la mise à l'échelle système (100%, 125%, 150%, 175%...).
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────────
   PRINCIPE :
   - Windows 100% @ 1920px  → viewport CSS = 1920px
   - Windows 125% @ 1920px  → viewport CSS = 1536px
   - Windows 150% @ 1920px  → viewport CSS = 1280px
   En utilisant uniquement vw/vh, le rendu s'adapte automatiquement.
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   VARIABLE RACINE — un seul multiplicateur qui pilote tout
   1vw ≈ 1% de la largeur CSS réelle du navigateur
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* Taille de base fluide : petite sur petit viewport, grande sur grand viewport */
    --fs-base:    clamp(13px, 1.1vw, 20px);

    /* Espacements fluides */
    --sp-xs:  clamp(0.25rem, 0.4vw, 0.5rem);
    --sp-sm:  clamp(0.4rem,  0.7vw, 0.9rem);
    --sp-md:  clamp(0.7rem,  1.2vw, 1.6rem);
    --sp-lg:  clamp(1rem,    2vw,   3rem);
    --sp-xl:  clamp(1.5rem,  3vw,   5rem);

    /* Hauteur navbar fluide */
    --navbar-h: clamp(48px, 6vh, 72px);

    /* Padding top sections (sous la navbar) */
    --section-pt: clamp(56px, 7.5vh, 95px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FONT-SIZE RACINE — fluide, pas de breakpoints
   ───────────────────────────────────────────────────────────────────────────── */

html {
    font-size: clamp(13px, 1.1vw, 20px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVBAR
   ───────────────────────────────────────────────────────────────────────────── */

.navbar {
    padding: clamp(0.4rem, 0.6vh, 0.9rem) 0;
    min-height: var(--navbar-h);
}

.nav-container {
    padding: 0 clamp(1rem, 2.5vw, 4rem);
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1.5rem);
}

.logo {
    height: clamp(30px, 4vh, 54px);
    width: auto;
    flex-shrink: 0;
}

.nav-links {
    flex-wrap: nowrap;
    overflow: hidden;
    gap: clamp(0.5rem, 1.3vw, 2.2rem);
}

.nav-link {
    font-size: clamp(0.5rem, 0.72vw, 0.9rem);
    white-space: nowrap;
}

.nav-cta {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.52rem, 0.72vw, 0.9rem);
    padding: clamp(0.38rem, 0.6vh, 0.8rem) clamp(0.8rem, 1.4vw, 2rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────────────────── */

.hero-content {
    padding-top: var(--section-pt);
    padding-left: clamp(1rem, 2vw, 3rem);
    padding-right: clamp(1rem, 2vw, 3rem);
    padding-bottom: clamp(0.4rem, 1vh, 1.5rem);
    gap: 0;
    /* Largeur max : ni trop étroite ni trop large */
    max-width: clamp(600px, 72vw, 1200px);
    overflow: visible;
}

/* Status bar */
.hero-status-bar {
    margin-bottom: clamp(0.2rem, 0.5vh, 0.7rem);
    margin-top: 0;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.hsb-segment {
    padding: clamp(0.3rem, 0.55vh, 0.65rem) clamp(0.6rem, 1.1vw, 1.5rem);
    font-size: clamp(0.5rem, 0.65vw, 0.8rem);
    gap: clamp(0.3rem, 0.5vw, 0.65rem);
    white-space: nowrap;
}

.hsb-counter {
    font-size: clamp(0.75rem, 1vw, 1.2rem);
}

.hsb-counter-suffix {
    font-size: clamp(0.45rem, 0.58vw, 0.7rem);
}

/* Logo — la clé : ratio fixe par rapport au viewport */
.hero-logo-wrap {
    margin-top: clamp(0.5rem, 1.5vh, 2.5rem);
    margin-bottom: clamp(-2rem, -2.5vh, -0.8rem);
}

.hero-logo-img {
    /*
      Logique : le logo fait 35% de la largeur CSS du viewport.
      Si le viewport vaut 1200px (1920@125%) → 420px ✓
      Si le viewport vaut 1536px (1920@100%) → 537px ✓
      Si le viewport vaut 1024px (laptop)    → 358px ✓
      min/max pour éviter les extrêmes.
    */
    width: clamp(200px, 35vw, 620px) !important;
    height: auto;
}

/* Tagline */
.hero-tagline-wrap {
    margin-bottom: clamp(0.2rem, 0.45vh, 0.6rem);
    gap: 0;
}

.hero-tagline-top {
    font-size: clamp(0.95rem, 1.8vw, 2.1rem) !important;
    text-align: center;
    line-height: 1.35;
}

.hero-tagline-bot {
    font-size: clamp(0.82rem, 1.3vw, 1.55rem) !important;
    margin-top: clamp(-1.2rem, -1.5vh, -0.6rem);
}

/* Pills */
.hero-pills {
    margin-bottom: clamp(0.6rem, 1vh, 1.3rem);
    gap: clamp(0.3rem, 0.55vw, 0.75rem);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-pill {
    font-size: clamp(0.55rem, 0.68vw, 0.82rem) !important;
    padding: clamp(0.28rem, 0.42vh, 0.52rem) clamp(0.55rem, 0.9vw, 1.1rem);
    white-space: nowrap;
}

/* CTA button */
.hero-cta {
    margin-bottom: clamp(0.5rem, 0.85vh, 1.1rem);
}

.hero-cta-texts {
    padding: clamp(0.7rem, 1.1vh, 1.3rem) clamp(0.7rem, 1vw, 1.3rem);
}

.hero-cta-main {
    font-size: clamp(0.75rem, 0.95vw, 1.15rem) !important;
    white-space: nowrap;
}

.hero-cta-sub {
    font-size: clamp(0.55rem, 0.68vw, 0.82rem);
}

.hero-cta-icon,
.hero-cta-arrow {
    width: clamp(32px, 3.8vw, 50px);
}

/* Social proof */
.hero-proof {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    gap: 0;
}

.hero-proof-stat {
    padding: clamp(0.3rem, 0.55vh, 0.7rem) clamp(0.55rem, 1vw, 1.4rem);
    flex-wrap: wrap;
    justify-content: center;
}

.hero-proof-val {
    font-size: clamp(0.72rem, 0.9vw, 1.1rem) !important;
    white-space: nowrap;
}

.hero-proof-lbl {
    font-size: clamp(0.5rem, 0.62vw, 0.76rem) !important;
    white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ABOUT
   ───────────────────────────────────────────────────────────────────────────── */

.about-wrapper {
    grid-template-columns: 1fr 1.35fr;
    gap: clamp(1.2rem, 2.5vw, 4rem);
    padding: var(--section-pt) clamp(1.5rem, 3vw, 5rem) clamp(0.8rem, 1.8vh, 2rem);
    max-width: clamp(700px, 88vw, 1500px);
    overflow-y: auto;
    max-height: 100vh;
    align-items: start;
}

.about-text-col h2 {
    font-size: clamp(1.6rem, 2.8vw, 3.8rem);
}

.about-desc {
    font-size: clamp(0.78rem, 0.88vw, 1.02rem);
    line-height: 1.72;
}

.about-tag {
    font-size: clamp(0.65rem, 0.72vw, 0.88rem);
    padding: clamp(0.25rem, 0.38vh, 0.45rem) clamp(0.5rem, 0.85vw, 1rem);
}

.about-cta-btn {
    font-size: clamp(0.75rem, 0.85vw, 1rem);
    padding: clamp(0.6rem, 0.9vh, 1rem) clamp(1.2rem, 1.9vw, 2.8rem);
    margin-top: clamp(0.7rem, 1.2vh, 1.6rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FEATURES
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── FEATURES : adaptatif toutes résolutions + scaling Windows ─────────────
   Architecture :
   .scroll-section.features       → 100vh, flex column, align-items:center
     └─ .section-container        → width:100%, padding horizontal
          └─ .full-height-container → flex column, hauteur = 100vh - navbar
               ├─ .section-header  → flex-shrink:0 (hauteur fixe)
               └─ .features-grid  → flex:1 + min-height:0 (prend le reste)
                    └─ .feature-card → height:100% par rangée de grille

   Clé : on utilise height = calc(100vh - var(--navbar-h)) sur le container
   pour contraindre explicitement sans débordement, quelle que soit la mise
   à l'échelle Windows (100% / 125% / 150% / 175%).
   ───────────────────────────────────────────────────────────────────────────── */

/* Le scroll-section est déjà display:flex flex-direction:column align-items:center.
   On s'assure que le section-container occupe toute la hauteur disponible. */
.features.scroll-section {
    justify-content: flex-start;
    padding-top: 0;
    /* Permet le scale hover des cards sans coupure */
    overflow: visible;
}

.features .section-container.full-height-container {
    /* Hauteur totale = viewport moins navbar */
    height: calc(100vh - var(--navbar-h));
    max-height: calc(100vh - var(--navbar-h));
    padding-top: var(--section-pt);
    padding-bottom: clamp(0.8rem, 1.5vh, 2rem);
    gap: clamp(0.4rem, 0.8vh, 1rem);
    justify-content: flex-start;
    overflow: visible;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.features-header {
    flex-shrink: 0;
    padding-bottom: clamp(0.25rem, 0.5vh, 0.6rem);
}

.features-eyebrow, .section-eyebrow {
    font-size: clamp(0.55rem, 0.7vw, 0.82rem);
    margin-bottom: clamp(0.15rem, 0.25vh, 0.35rem);
}

.features-title {
    font-size: clamp(1.4rem, 2.2vw, 3rem) !important;
    line-height: 1.12;
}

.features-subtitle {
    font-size: clamp(0.63rem, 0.78vw, 0.9rem);
    margin-top: clamp(0.1rem, 0.25vh, 0.4rem);
}

/* header-line sous le titre */
.features .header-line {
    margin-top: clamp(0.3rem, 0.5vh, 0.7rem);
}

.features-grid {
    /* 3 colonnes fixes — même avec scaling Windows 150% (viewport ~1280px) */
    grid-template-columns: repeat(3, 1fr) !important;
    /* 2 rangées qui se partagent l'espace restant */
    grid-template-rows: 1fr 1fr;
    gap: clamp(0.4rem, 0.7vw, 0.9rem);
    /* flex:1 + min-height:0 = occupe tout l'espace restant sans déborder */
    flex: 1;
    min-height: 0;
    width: 100%;
    align-items: stretch;
    overflow: visible;
}

.feature-card {
    /* La card remplit entièrement sa cellule de grille */
    height: 100%;
    min-height: 0; /* pas de min-height qui ferait déborder */
}

.feature-card h3 { font-size: clamp(0.72rem, 0.9vw, 1.1rem); }
.feature-card p  { font-size: clamp(0.6rem, 0.72vw, 0.88rem); line-height: 1.5; }

/* ─────────────────────────────────────────────────────────────────────────────
   GALLERY
   ───────────────────────────────────────────────────────────────────────────── */

.gal-header {
    padding-top: var(--section-pt);
    padding-bottom: clamp(0.8rem, 1.5vh, 2.2vh);
}

.gal-title {
    font-size: clamp(1.2rem, 2.1vw, 2.6rem);
}

.gal-strip {
    height: clamp(90px, calc((100vh - var(--section-pt) - 4vh) / 3), 225px);
    min-height: 90px;
}

.gal-card {
    width: clamp(140px, 16vw, 330px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   REVIEWS
   ───────────────────────────────────────────────────────────────────────────── */

.rev-wrapper {
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(1.2rem, 2.5vw, 4rem);
    padding: var(--section-pt) clamp(1.5rem, 3vw, 5rem) clamp(0.8rem, 1.8vh, 2rem);
    max-width: clamp(700px, 88vw, 1500px);
}

.rev-title {
    font-size: clamp(1.5rem, 2.6vw, 3.2rem) !important;
}

.rev-stats {
    padding: clamp(0.7rem, 1vh, 1.3rem) clamp(0.9rem, 1.4vw, 1.7rem);
    gap: clamp(0.8rem, 1.3vw, 1.8rem);
    flex-wrap: wrap;
}

.rev-stat-num {
    font-size: clamp(1.2rem, 1.8vw, 2.4rem);
}

.rev-cta-main {
    font-size: clamp(0.95rem, 1.5vw, 1.8rem);
    flex-wrap: wrap;
    justify-content: center;
}

.rev-track-wrap {
    height: calc(100vh - var(--section-pt) - 2vh);
}

.rev-card {
    padding: clamp(0.75rem, 1vh, 1.3rem) clamp(0.85rem, 1.2vw, 1.5rem);
}

.rev-card-quote {
    font-size: clamp(0.75rem, 0.84vw, 0.98rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SCENARIOS / MISSION
   ───────────────────────────────────────────────────────────────────────────── */

.mission-wrapper {
    grid-template-columns: 1fr 1.55fr;
    gap: clamp(1.2rem, 2.5vw, 4rem);
    padding: var(--section-pt) clamp(1.5rem, 2.2vw, 2.5rem) clamp(0.8rem, 1.8vh, 1.5rem);
    max-width: clamp(700px, 88vw, 1500px);
}

.mission-title {
    font-size: clamp(1.5rem, 2.4vw, 2.9rem) !important;
}

.mission-item {
    padding: clamp(0.55rem, 0.85vh, 1rem) clamp(0.7rem, 1vw, 1.2rem);
}

.mission-panel {
    height: calc(100vh - var(--section-pt) - 2vh);
    max-height: clamp(350px, 68vh, 720px);
}

.brief-name {
    font-size: clamp(1.4rem, 2.4vw, 3.1rem);
}

.brief-desc {
    font-size: clamp(0.78rem, 0.88vw, 1.02rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PC SPECS
   ───────────────────────────────────────────────────────────────────────────── */

.specs-wrapper {
    padding: var(--section-pt) clamp(1.5rem, 2.5vw, 3rem) clamp(0.8rem, 1.8vh, 1.5rem);
    gap: clamp(0.8vh, 1.3vh, 2.2vh);
    max-width: clamp(600px, 82vw, 1300px);
    justify-content: center;
}

.specs-title {
    font-size: clamp(1.7rem, 2.8vw, 3.3rem) !important;
}

.specs-panels {
    gap: clamp(0.7rem, 1vw, 1.4rem);
}

.specs-panel {
    padding: clamp(0.9rem, 1.3vh, 1.6rem) clamp(1.1rem, 1.4vw, 1.8rem);
    gap: clamp(0.5rem, 0.9vh, 1rem);
}

.specs-row {
    padding: clamp(0.35rem, 0.52vh, 0.68rem) clamp(0.45rem, 0.62vw, 0.65rem);
}

.specs-row-val {
    font-size: clamp(0.68rem, 0.78vw, 0.93rem);
}

.specs-row-key {
    font-size: clamp(0.5rem, 0.58vw, 0.68rem);
}

.specs-bottom {
    padding: clamp(0.6rem, 0.9vh, 1.1rem) clamp(1rem, 1.4vw, 1.7rem);
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.8vw, 1rem);
}

.specs-note {
    font-size: clamp(0.68rem, 0.78vw, 0.9rem);
}

.specs-cta {
    padding: clamp(0.6rem, 0.9vh, 0.95rem) clamp(1.1rem, 1.6vw, 2.2rem);
    font-size: clamp(0.72rem, 0.85vw, 1.02rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PCS (Requirements card)
   ───────────────────────────────────────────────────────────────────────────── */

.pcs-wrapper {
    padding: var(--section-pt) clamp(1.5rem, 2.5vw, 3rem) clamp(0.8rem, 1.8vh, 1.5rem);
    gap: clamp(1.4vh, 1.9vh, 3vh);
    max-width: clamp(560px, 76vw, 1150px);
}

.pcs-title {
    font-size: clamp(1.5rem, 2.6vw, 3rem) !important;
}

.pcs-card {
    padding: clamp(1.1rem, 1.7vw, 2.4rem);
}

.pcs-val {
    font-size: clamp(0.72rem, 0.84vw, 0.98rem);
}

.pcs-key {
    font-size: clamp(0.5rem, 0.58vw, 0.66rem);
}

.pcs-bottom {
    padding: clamp(0.6rem, 0.95vh, 1.1rem) clamp(1rem, 1.4vw, 1.6rem);
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.8vw, 1rem);
}

.pcs-cta {
    padding: clamp(0.6rem, 0.9vh, 0.95rem) clamp(1.1rem, 1.6vw, 2rem);
    font-size: clamp(0.72rem, 0.84vw, 0.98rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOW TO PLAY
   ───────────────────────────────────────────────────────────────────────────── */

.htp-wrapper {
    padding: var(--section-pt) clamp(1.5rem, 2.5vw, 3rem) clamp(1.2rem, 2vh, 2.2rem);
    gap: clamp(1.2vh, 1.9vh, 3vh);
    max-width: clamp(600px, 82vw, 1300px);
}

.htp-title {
    font-size: clamp(1.7rem, 3.2vw, 4rem) !important;
}

.htp-steps {
    gap: clamp(0.8rem, 1.4vw, 2.4rem);
}

.htp-step-card {
    padding: clamp(0.9rem, 1.4vw, 1.9rem);
    gap: clamp(0.4rem, 0.75vh, 0.85rem);
}

.htp-step-icon-wrap {
    width: clamp(36px, 4.2vw, 58px);
    height: clamp(36px, 4.2vw, 58px);
}

.htp-step-title {
    font-size: clamp(0.8rem, 1vw, 1.18rem);
}

.htp-step-desc {
    font-size: clamp(0.7rem, 0.82vw, 0.97rem);
}

.htp-cta {
    padding: clamp(0.8rem, 1.1vh, 1.2rem) clamp(1.7rem, 2.4vw, 2.8rem);
    font-size: clamp(0.8rem, 0.97vw, 1.12rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────────────────────────────────── */

.cta-wrapper {
    padding: var(--section-pt) clamp(1.5rem, 2vw, 2.5rem) clamp(1.2rem, 1.8vh, 2rem);
}

.cta-content {
    max-width: clamp(500px, 72vw, 1050px);
    gap: 0 !important;
}

.cta-headline-line1,
.cta-headline-line2 {
    font-size: clamp(2.2rem, 5.5vw, 7.5rem);
    white-space: nowrap;
}

.cta-eyebrow {
    margin-bottom: clamp(0.5rem, 0.9vh, 1.2rem);
}

.cta-sub {
    font-size: clamp(0.85rem, 1vw, 1.22rem) !important;
    margin: 0 0 clamp(0.8rem, 1.4vh, 1.8rem) 0 !important;
}

.cta-stats {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.9vw, 1.4rem);
    padding: clamp(0.45rem, 0.72vh, 0.78rem) clamp(0.9rem, 1.7vw, 2.2rem);
    margin-bottom: clamp(0.9rem, 1.5vh, 1.9rem);
}

.cta-stat-num {
    font-size: clamp(0.92rem, 1.15vw, 1.45rem);
}

.cta-stat-label {
    font-size: clamp(0.54rem, 0.62vw, 0.76rem);
}

.cta-main-btn {
    padding: clamp(0.85rem, 1.1vh, 1.28rem) clamp(1.3rem, 2.2vw, 3.1rem);
    gap: clamp(0.7rem, 0.95vw, 1.3rem);
    margin-bottom: clamp(0.45rem, 0.82vh, 1rem);
}

.cta-btn-main {
    font-size: clamp(0.82rem, 1vw, 1.22rem);
    white-space: nowrap;
}

.cta-btn-sub {
    font-size: clamp(0.58rem, 0.68vw, 0.82rem);
}

.cta-disclaimer {
    font-size: clamp(0.65rem, 0.78vw, 0.94rem) !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.2rem, 0.35vw, 0.5rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────────────────────────────────────── */

.modal-overlay {
    padding: clamp(0.5rem, 1.2vh, 1.5rem);
}

.modal-content {
    max-width: clamp(340px, 30vw, 520px);
    padding: clamp(1.4rem, 1.9vh, 2.4rem) clamp(1.4rem, 1.9vw, 2.4rem) clamp(1.1rem, 1.6vh, 2rem);
    max-height: clamp(300px, 82vh, 740px);
    overflow-y: auto;
}

.modal-title {
    font-size: clamp(1.4rem, 2.8vw, 2.3rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.footer {
    padding: clamp(0.4rem, 0.72vh, 0.9rem) clamp(1.2rem, 1.9vw, 2.6rem);
}

.footer-container {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 0.88vh, 1.6rem);
}

.footer-logo {
    width: clamp(75px, 8.5vw, 140px);
}

.footer-links {
    flex-wrap: wrap;
    gap: clamp(0.8rem, 1.6vw, 2.5rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   OVERFLOW PREVENTION
   ───────────────────────────────────────────────────────────────────────────── */

.scroll-section { overflow-x: hidden; }
.hero-status-bar, .hero-proof { max-width: 100%; overflow: hidden; }
.features-grid { max-width: 100%; overflow: visible; }
.section-divider.warning-tape { overflow: hidden; max-width: 100vw; }
.gal-strips { width: 100%; max-width: 100vw; overflow-x: hidden; }
.feature-lightbox-inner { max-width: min(90vw, 1200px); max-height: min(80vh, 900px); }
.video-carousel-track-wrapper { max-width: 100%; }
.cta-button, .about-cta-btn, .rev-cta, .mission-cta,
.specs-cta, .htp-cta, .cta-main-btn, .pcs-cta { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   TOUJOURS VISIBLE SUR DESKTOP
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and (min-width: 1024px) {
    .side-nav { display: flex !important; right: clamp(0.6rem, 1.2vw, 2rem); }
    .nav-links { display: flex !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SEULE EXCEPTION : hauteur d'écran insuffisante (laptops 768px de haut)
   On ne peut pas éviter ça car c'est vh-dépendant
   ───────────────────────────────────────────────────────────────────────────── */

@media screen and (max-height: 720px) {
    :root {
        --section-pt: clamp(48px, 6.5vh, 64px);
    }

    .hero-logo-img {
        width: clamp(160px, min(30vw, 26vh * 2.1), 380px) !important;
    }

    .hero-tagline-top {
        font-size: clamp(0.88rem, 1.6vw, 1.7rem) !important;
    }

    .hero-pills { margin-bottom: clamp(0.4rem, 0.7vh, 0.8rem); }
    .hero-cta { margin-bottom: clamp(0.35rem, 0.6vh, 0.7rem); }

    .cta-headline-line1, .cta-headline-line2 {
        font-size: clamp(1.8rem, 4.5vw, 5rem);
    }

    .cta-sub { font-size: 0.85rem !important; margin-bottom: 0.65rem !important; }
    .cta-stat-label { display: none; }
    .cta-main-btn { padding: 0.7rem 1.5rem; }

    /* Sur écrans bas : le container est déjà contraint par calc(100vh - navbar),
       les cards héritent automatiquement via height:100% sur la grille */
    .features .section-container.full-height-container {
        padding-bottom: clamp(0.4rem, 0.8vh, 1rem);
        gap: clamp(0.25rem, 0.5vh, 0.6rem);
    }
    .mission-panel { max-height: clamp(320px, 60vh, 500px); }
    .gal-strip { max-height: 145px; min-height: 78px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   FEATURE CARDS — RECADRAGE IMAGES
   background-position: center top → garde le haut de l'image visible
   (personnages et décors ne sont plus coupés quand les cards sont petites)
   ───────────────────────────────────────────────────────────────────────────── */

.feature-bg {
    background-size: cover;
    background-position: center 20%;
}

/* Lightbox — image centrée verticalement avec léger offset vers le haut */
.feature-lightbox-bg {
    background-size: cover;
    background-position: center 25%;
}