/* =========================================================
   iTUSA — global UX layout contract
   Loaded AFTER page-specific CSS.

   Purpose:
   - one shared horizontal grid aligned with the navigation
   - subtle off-white side gutters on large screens
   - readable text measures without artificial title locks
   - predictable image behaviour
   - consistent responsive spacing

   Page-specific styles may define composition and content, but should
   not redefine the site's principal width or outer gutters.
   ========================================================= */

:root{
  --container-max: 1280px;
  --max-width: var(--container-max);
  --page-gutter: clamp(20px, 2.4vw, 36px);
  --gutter: var(--page-gutter);
  --page-inset: var(--page-gutter);
  /* Rythme resserré. L'écart visible entre deux blocs vaut deux fois
     cette valeur, puisque chaque section porte son propre padding :
     60px de chaque côté donnent 120px entre blocs, contre 168 avant. */
  --section-y: 60px;
  --section-y-tab: 46px;
  --section-y-mob: 36px;
  --measure: 68ch;
  /* Surfaces : trois valeurs claires nettement distinctes les unes des
     autres. #F7F6F2 était trop proche du blanc pour se voir. */
  --page-canvas: #E7E2D8;   /* marges latérales — cadre chaud visible   */
  --surface:     #FFFFFF;   /* sections claires principales             */
  --surface-alt: #F2EEE6;   /* sections claires alternées               */

  /* Accent : le lime de l'app. Le lime pur ne passe pas sur fond clair
     (contraste ~1,9:1, illisible), donc une version encrée lui répond
     pour tout ce qui est texte sur clair (contraste ~4,8:1). */
  --lime-ink:    #4F6700;   /* 6,4:1 sur blanc, 5,6:1 sur alterné, 5,0:1 sur canvas
                                 — #5E7B00 tombait à 4,2:1 sur les fonds alternés */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --radius-sm: 2px;
  --radius-md: 6px;

  /* Police display du système de titres. Chaque page la redéfinissait dans
     son :root local — sauf team.html, qui utilisait var(--font-display) six
     fois sans jamais la définir : Archivo y était téléchargée mais jamais
     rendue (var() non défini = déclaration font-family invalide, retour à
     Outfit héritée). Définie ici une fois pour toutes, les :root locaux
     identiques restent sans effet. */
  --font-display: 'Archivo', 'Outfit', system-ui, -apple-system, sans-serif;
}

html, body{ background: var(--page-canvas); }
/* overflow-x:clip, not hidden. `hidden` turns the body into a scroll
   container, which silently kills `position: sticky` on descendants —
   here the .lp-bar on /apply and the sticky element in site.css.
   `clip` prevents the same horizontal overflow without that side effect. */
body{ overflow-x: clip; }

/* Canonical navigation/content grid. */
.site-nav-inner,
.container,
.footer-inner,
.lp-bar-inner,
.ty-inner{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* The content canvas is centred on exactly the same width as the nav.
   Background colour may change section-by-section, but the outer frame does not. */
main > section,
main > .proof-band,
main > .hero-sub-mobile,
main > .draft-banner-wrap,
main > .legal-body,
.lp-hero,
.lp-section,
.lp-band,
.lp-form-wrap,
main.ty{
  width: min(100%, var(--container-max));
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* Nested containers should not create a second, narrower page grid. */
main .container{
  max-width: 100%;
}

/* Shared typography: headings can breathe. Reading copy stays readable. */
.section-title{
  max-width: none;
  /* `balance` répartissait le titre sur des lignes égales et le faisait
     casser avant d'avoir rempli la largeur : c'est ce qui donnait
     l'impression d'un titre coincé sur une petite colonne.
     `pretty` évite seulement les orphelins, sans rétrécir. */
  text-wrap: pretty;
}

.hero-text h1,
.legal-hero h1,
.ty h1,
.lp-problem-head .section-title,
.lp-people-text .section-title{
  max-width: none;
  text-wrap: pretty;
}

.hero-overlay h1,
.lp-hero h1,
.title-media-section .title-on-media{
  max-width: 28ch;
  text-wrap: balance;
}

.body-copy,
.lp-problem-body,
.lp-form-sub,
.legal-body p,
.legal-body li{
  max-width: var(--measure);
}

/* Un chapeau centré appartient au même bloc que les cartes qui le suivent :
   il doit tenir la même largeur, pas une colonne plus étroite au milieu.
   La limite de lecture (--measure) reste en vigueur pour le texte courant
   aligné à gauche, où elle a un sens. */
[class$="-header"] > .body-copy,
[class$="-intro"] > .body-copy,
[class$="-inner"] > .body-copy,
[class$="-header"] > .body-copy > p,
[class$="-intro"] > .body-copy > p,
.problem-intro .body-copy,
.response-header .body-copy,
.acad-intro .body-copy,
.closing-header p,
.section-header > .body-copy{
  max-width: none;
}

/* Idem pour les titres de ces mêmes blocs. */
[class$="-header"] > .section-title,
[class$="-intro"] > .section-title,
[class$="-header"] > h2,
[class$="-intro"] > h2{
  max-width: none;
}

/* Remove viewport-calculated padding from component layouts now that the
   sections themselves live inside the central page frame. */
.hero-text{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.hero-media + .hero-text,
.hero > .hero-text:last-child{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.split > .split-text,
.split > .split-text:first-child,
.split > .split-text:last-child{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}
.hero-overlay{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Images always obey their layout role; never stretch or distort. */
img{
  display: block;
  max-width: 100%;
  height: auto;
}
.hero-media img,
.split-media img,
[class*="-photo"] img,
[class*="-portrait"] img{
  object-fit: cover;
}

/* Better visual rhythm for final CTAs and FAQs where the page-specific
   markup does not wrap content in .container. */
.final-cta-inner,
.faq-header,
.faq-list{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* =========================================================
   APPLY — conversion-first image merchandising
   ========================================================= */
.lp-bar-inner{ min-height: 64px; }
.lp-hero-inner,
.lp-inner,
.lp-form-inner{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.lp-hero-inner{
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.lp-hero h1{ line-height: 1.04; }
.lp-hero h1 > span{ display: block; }
.lp-hero-media{
  align-self: center;
  /* Révision du 23/08 (retour d'Ihsane : « la vidéo est petite ») — le
     ratio 16:9 posé au Lot 2 convenait à l'image en colonne, pas à une
     vidéo : en desktop le média est désormais un panneau pleine hauteur
     (règle .lp-hero .lp-hero-media de la page, spécificité 0-2-0), comme
     sur les autres pages. Le 16:9 ne subsiste qu'en mode empilé — voir
     les media queries plus bas. Pas de ratio ici : une base 16:9
     recréerait la contradiction dormante que le Lot 2 avait éliminée. */
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.lp-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Pré-câblage de la boucle P1a (chantier 10) : le jour où le <video>
   commenté d'apply.html est réactivé, il remplit le cadre comme l'image,
   sans retomber dans le rendu intrinsèque qui rognait la vidéo portrait. */
.lp-hero-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lp-trust{ margin-top: 56px; }
.lp-problem{
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 64px);
}
.lp-quote-wide{ gap: 20px 36px; }

.lp-people{
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.lp-people-media{
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.lp-people-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-card-media img{
  width: min(100%, 180px);
  max-width: 180px;
  height: auto;
}

/* The court image becomes a short editorial band, not another hero. */
.lp-band{ overflow: visible; }
.lp-band img{
  width: 100%;
  height: clamp(260px, 30vw, 460px);
  object-fit: cover;
  object-position: center;
}
.lp-band-caption{
  background: var(--white);
  margin: 0;
  padding: 12px var(--page-gutter) 16px;
}

.lp-form-layout{
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(28px, 4vw, 44px);
}
.lp-form-card{ max-width: none; }

/* =========================================================
   Responsive system
   ========================================================= */
@media (max-width: 1024px){
  :root{ --page-gutter: clamp(20px, 3.6vw, 32px); }

  .hero-text{
    padding-top: var(--section-y-tab);
    padding-bottom: var(--section-y-tab);
  }

  .split > .split-text,
  .split > .split-text:first-child,
  .split > .split-text:last-child{
    padding-top: var(--section-y-tab);
    padding-bottom: var(--section-y-tab);
  }

  .lp-hero-inner{ grid-template-columns: 1fr; }
  .lp-hero-media{
    width: min(100%, 760px);
    aspect-ratio: 16 / 9;
    justify-self: start;
  }
  .lp-problem{ grid-template-columns: 1fr; gap: 24px; }
  .lp-people{ grid-template-columns: 1fr; }
  .lp-people-media{ max-width: 340px; justify-self: start; margin-inline: 0; }
  .lp-form-layout{ grid-template-columns: 1fr; }
  .lp-form-aside{ order: -1; }
}

@media (max-width: 640px){
  :root{ --page-gutter: 20px; }

  .section-title{ text-wrap: pretty; }
  .hero-overlay h1,
  .lp-hero h1,
  .title-media-section .title-on-media{ max-width: none; }

  .hero-text,
  .split > .split-text,
  .split > .split-text:first-child,
  .split > .split-text:last-child{
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
  }

  .lp-hero-media{ aspect-ratio: 16 / 9; } /* LOT 2 — même ratio partout */
  .lp-people-media{ max-width: 280px; }
  .lp-band img{ height: 220px; }
  .lp-form-card{ padding: 28px 20px; }
  .lp-form-aside{ padding: 26px 22px; }
}


/* =========================================================
   SURFACES — alternance lisible, et rien qui se confonde
   avec le pied de page
   ========================================================= */

/* Sections claires principales. */
.problem-section, .team-section, .proof-section, .closing-testimonials,
.life-section, .week-section, .stay-section, .tech-section, .rfm-section,
.spec-section, .test-section, .clin-section, .env-split, .prin-section,
.pillars-section, .form-section, .practical-section, .fb-body{
  background: var(--surface);
}

/* Sections claires alternées — distinctes du blanc ET du canvas. */
.acad-body, .coach-section, .wk1-section, .faq-section, .comp-section,
.selector-section, .phil, .platform-section, .lp-section.alt{
  background: var(--surface-alt);
}

/* Le bloc final ne doit pas se fondre dans le pied de page.
   Il passe sur le navy le plus clair de la palette : le pied de page
   reste en navy-deep, la marche est visible. */
.final-cta{ background: var(--navy-lift); }
.site-footer{ border-top: 1px solid rgba(255,255,255,.10); }

/* =========================================================
   ACCENT LIME
   ========================================================= */

/* Bouton principal : lime plein, texte navy. Contraste ~11:1. */
.btn-primary{ background: var(--lime); color: var(--navy-deep); }
.btn-primary:hover{ background: #B9E81F; color: var(--navy-deep); }

/* Sur fond clair, le lime encré ; sur fond sombre, le lime pur. */
.section-label{ color: var(--lime-ink); }
.on-navy .section-label,
.navy .section-label,
.final-cta .section-label,
.response-section .section-label,
.programs-section .section-label,
.system-section .section-label,
.flow-section .section-label,
.expect-section .section-label,
.lp-section.navy .section-label,
.lp-form-wrap .section-label{ color: var(--lime); }

.link-nav{ text-decoration-color: var(--lime-ink); }
.on-navy .link-nav,
.final-cta .link-nav,
.lp-form-wrap .link-nav{ color: var(--white); text-decoration-color: var(--lime); }

.btn-secondary-nav.on-navy{ border-color: var(--lime); }
.btn-secondary-nav.on-navy:hover{ background: var(--lime); color: var(--navy-deep); }

/* Chiffres, pastilles et repères de séquence. */
.lp-num, .lp-fact b, .proof-figure, .stay-tier,
.acad-card .lp-num, .co-figure{ color: var(--lime-ink); }
.lp-section.navy .lp-fact b,
.lp-trust .lp-fact b,
.final-cta .proof-figure,
.response-section .proof-figure,
.programs-section .proof-figure{ color: var(--lime); }

/* Icônes : même règle claire/sombre. */
.icon{ color: var(--lime-ink); }
.on-navy .icon, .navy .icon, .final-cta .icon,
.response-section .icon, .programs-section .icon,
.system-section .icon, .flow-section .icon,
.expect-section .icon, .lp-section.navy .icon{ color: var(--lime); }

/* Filets et bordures d'accent. */
.lp-academics{ border-left-color: var(--lime-ink); }
.lp-quote-wide{ border-top-color: var(--grey-mid); }
.lp-steps li::before{ border-color: var(--lime); color: var(--lime); }

/* =========================================================
   ALTERNANCE — collisions relevées page par page
   ========================================================= */
.lp-section{ background: var(--surface); }
.lp-section.alt{ background: var(--surface-alt); }
.lp-section.navy{ background: var(--navy); }

/* academy : env-split et week-section étaient toutes deux blanches. */
.week-section{ background: var(--surface-alt); }
/* team : prin-section et test-section étaient toutes deux blanches. */
.test-section{ background: var(--surface-alt); }



/* =========================================================
   PREUVE AU CONTACT DU CTA
   Un témoignage court juste avant chaque bloc d'appel à l'action.
   Fond clair alterné : il sépare visuellement le CTA navy de la
   section qui précède, et il est lu dans la même fenêtre que le bouton.
   ========================================================= */
.cta-proof{
  background: var(--surface-alt);
  padding: var(--space-6) 0;
  max-width: var(--container-max);
  margin-inline: auto;
}
.cta-proof-quote{
  margin: 0;
  border-left: 3px solid var(--lime-ink);
  padding-left: clamp(20px, 2.5vw, 32px);
  display: grid;
  gap: 16px;
}
.cta-proof-quote p{
  margin: 0;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height: 1.5;
  font-weight: 300;
  font-style: italic;
  color: var(--navy);
  max-width: 62ch;
}
.cta-proof-quote cite{ font-style: normal; display: block; }
.cta-proof-quote cite b{
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
}
.cta-proof-quote cite span{
  display: block;
  font-size: .85rem;
  color: var(--grey-warm-light);
  line-height: 1.5;
  margin-top: 3px;
}


/* =========================================================
   ACCENT CONTEXTUEL — remplacement complet du doré
   ---------------------------------------------------------
   Le doré apparaissait 363 fois dans le CSS des pages, toujours via
   var(--gold). Plutôt que de réécrire chaque occurrence, on redéfinit
   le jeton lui-même — et on le rend contextuel.

   Les propriétés personnalisées héritent : --gold vaut le lime encré
   partout par défaut (lisible sur fond clair), et repasse au lime pur
   à l'intérieur de tout bloc à fond sombre. Un même var(--gold) donne
   donc automatiquement la bonne valeur selon l'endroit, sans exception
   à écrire élément par élément.
   ========================================================= */
:root{
  --gold:           var(--lime-ink);
  --gold-navy-lift: var(--lime-ink);
  --gold-soft:      color-mix(in srgb, var(--lime-ink) 45%, transparent);
}

.acad-card, .clin-mock-panel, .co-separator, .coach-section, .device-frame,
.device-mockup, .expect-section, .final-cta, .flow-section, .found-mock,
.foundation-section, .hero, .hero-media, .hero-overlay, .hero-panel, .legal-hero,
.lp-bar, .lp-form-aside, .lp-form-wrap, .lp-hero, .lp-section.navy, .lp-trust,
.map-frame, .map-panel, .on-navy-bg, .pcar-ph, .ph.on-navy, .plat-gallery-frame,
.prin-section, .pro-split, .prob-card.with, .proc-num, .proc-section, .prog-card,
.programs-section, .proof-band, .remote-tri-wrap, .remote-triangle-wrap, .resp-card,
.response-section, .salim-photo-ph, .sel-card.selected, .site-footer, .site-nav,
.site-nav-dropmenu, .site-nav-lang-panel, .site-nav-panel, .success-state,
.system-section, .tech-role-card, .testimonial-card, .week-day.intensive,
.week-link-band, .on-navy{
  --gold:           var(--lime);
  --gold-navy-lift: var(--lime);
  --gold-soft:      color-mix(in srgb, var(--lime) 45%, transparent);
}

/* Navigation : l'état actif et le survol étaient dorés. */
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"],
.site-nav .is-active{ color: var(--lime); }
.site-nav a[aria-current="page"]{ border-bottom-color: var(--lime); }

/* Titres de tuiles et de cartes. var(--gold) résout tout seul en lime
   encré sur fond clair et en lime pur dans les cartes sombres. */
.lp-card h3, .acad-card h3, .prin-card h3, .stay-card h3, .comp-block h3,
.env-block h3, .resp-card h3, .prog-card h3, .prob-card h3, .tech-role-card h3,
.spec-card h3, .coach-card h3, .fb-card h3, .life-card h3, .stay-daily-item h3,
[class$="-card"] h3, [class$="-tile"] h3, .card h3{
  color: var(--gold);
}

/* Sous-titres et intertitres qui restaient dorés. */
.section-label, .eyebrow, .lp-eyebrow, .fb-eyebrow, .stay-tier,
.co-eyebrow, .clin-eyebrow{ color: var(--gold); }


/* =========================================================
   COMPACITÉ
   Le vide ne venait pas seulement du rythme de section : environ
   180 marges fixes de 36 à 64px s'ajoutaient par-dessus, à
   l'intérieur des blocs. On les ramène à l'échelle d'espacement.
   ========================================================= */

/* Chapeau de section → grille qui suit. */
[class$="-header"], [class$="-intro"], .section-header,
.foundation-header, .proc-header, .cmp-header, .faq-header,
.week-header, .life-header, .wk1-header, .stay-header, .prin-header,
.coach-intro, .spec-intro, .clin-intro, .co-sub, .fb-intro,
.acad-intro, .problem-intro, .platform-header, .proof-header,
.programs-header, .response-header, .pillars-header, .tech-intro,
.closing-header, .lp-problem-head{
  margin-bottom: var(--space-5);
}

/* Eyebrow → titre. */
.section-label, .lp-eyebrow, .fb-eyebrow{ margin-bottom: 10px; }

/* Titre → texte d'introduction. */
.section-title + .body-copy,
.section-title + p,
[class$="-header"] .section-title,
[class$="-intro"] .section-title{ margin-bottom: var(--space-3); }

/* Grilles et bandes qui suivent un chapeau. */
.lp-grid, .lp-results, .lp-videos, .acad-grid, .prin-grid, .pillar-grid,
.stay-grid, .comp-blocks, .env-blocks-row, .life-grid, .wk1-band,
.rfm-facts, .flow-rationale, .proof-cards, .cta-steps, .lp-academics,
.stay-daily{
  margin-top: var(--space-5);
}

/* Citations et notes intercalaires. */
.lp-quote-wide, .cta-proof-quote, .week-quote, .env-quote,
.proc-quote, .cmp-exit, .life-note, .fb-parent-note{
  margin-top: var(--space-5);
  margin-bottom: 0;
}

/* Le bloc de preuve avant le CTA reste serré contre lui. */
.cta-proof{ padding: var(--space-5) 0; }

@media (max-width: 640px){
  [class$="-header"], [class$="-intro"], .section-header{
    margin-bottom: var(--space-4);
  }
  .lp-grid, .lp-results, .lp-videos, .acad-grid, .stay-grid{
    margin-top: var(--space-4);
  }
}

/* =========================================================
   BLOCS D'APPEL À L'ACTION
   Fond navy, bouton lime. Un CTA doit trancher avec la page,
   c'est sa fonction. Le passage en surface claire de la passe
   précédente était une erreur : elle est annulée ici.
   ========================================================= */
.final-cta{ background: var(--navy); }
.lp-form-wrap{ background: var(--navy); }

/* Le lockup blanc redevient visible sur fond sombre. */
.final-cta .brand-mark{ display: block; }

/* Bouton lime plein sur navy : contraste 11:1, impossible à manquer. */
.final-cta .btn-primary,
.lp-form-wrap .btn-primary,
.lp-submit{
  background: var(--lime);
  color: var(--navy-deep);
  border-color: var(--lime);
}
.final-cta .btn-primary:hover,
.lp-form-wrap .btn-primary:hover,
.lp-submit:hover{ background: #B9E81F; color: var(--navy-deep); }

/* =========================================================
   BLOC DE CLÔTURE
   Placé après chaque CTA. Il remplit deux rôles : séparer le navy
   du CTA de celui du pied de page, et offrir un rebond éditorial
   plutôt qu'une sortie sèche.
   ========================================================= */
.closing-band{
  background: var(--surface-alt);
  padding: var(--space-6) 0;
  max-width: var(--container-max);
  margin-inline: auto;
}
.closing-band .container{
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.closing-quote{ margin: 0; border-left: 3px solid var(--lime-ink); padding-left: 26px; }
.closing-quote p{
  margin: 0 0 14px;
  font-size: clamp(1rem, .92rem + .4vw, 1.2rem);
  line-height: 1.55;
  font-weight: 300;
  font-style: italic;
  color: var(--navy);
}
.closing-quote cite{ font-style: normal; }
.closing-quote cite b{ display: block; font-size: .92rem; font-weight: 600; color: var(--navy); }
.closing-quote cite span{ display: block; font-size: .82rem; color: var(--grey-warm-light); line-height: 1.5; margin-top: 3px; }

.closing-links{ display: flex; flex-direction: column; gap: 10px; }
.closing-links a{
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--grey-mid);
  position: relative;
}
.closing-links a::before{
  content: "\2192";
  position: absolute; left: 0; color: var(--lime-ink);
}
.closing-links a:last-child{ border-bottom: none; }
.closing-links a:hover,
.closing-links a:focus-visible{ color: var(--lime-ink); }

@media (max-width: 900px){
  .closing-band .container{ grid-template-columns: 1fr; gap: 28px; }
}

/* =========================================================
   BLOC RAFAEL FONT DE MORA (« Designed for elite players… »)
   Le portrait 1086×1448 était posé dans une colonne de 45% avec une
   hauteur minimale de 620px : l'image se recadrait mal et écrasait le
   texte. On lui donne un vrai cadre portrait, borné, centré
   verticalement, et on rééquilibre les deux colonnes.
   ========================================================= */
.env-split .split{
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  min-height: 0;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-block: var(--section-y);
}
.env-split .split > .split-text{ padding-block: 0; }
.env-split .split-media{
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.env-split .split-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
@media (max-width: 1024px){
  .env-split .split{ grid-template-columns: 1fr; padding-block: var(--section-y-tab); }
  /* Empile, l'image se centre (retour du 29/08 : collee a gauche, elle
     se lisait comme un defaut de mise en page). */
  .env-split .split-media{ max-width: 320px; margin-inline: auto; }
}

/* =========================================================
   ACADEMICS — l'université d'abord
   La colonne image portait une seule photo de signature. Le campus
   passe devant : c'est lui qui répond à l'objection scolaire.
   ========================================================= */
.acad-split{ grid-template-columns: minmax(0, 1fr) minmax(320px, .92fr); gap: clamp(28px, 4vw, 52px); }
.acad-media{ display: grid; gap: 16px; }
.acad-campus{ margin: 0; }
.acad-campus-ph{
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  background: var(--navy-lift);
  border: 2px dashed var(--lime);
  border-radius: var(--radius-sm);
}
.acad-campus-ph b{ color: var(--lime); font-size: .82rem; letter-spacing: .08em; }
.acad-campus-ph span{ color: var(--grey-warm); font-size: .8rem; line-height: 1.55; }
.acad-campus-ph code{ color: var(--grey-mid); font-size: .74rem; }
.acad-campus figcaption{
  margin-top: 10px; font-size: .82rem; color: var(--grey-warm); font-style: italic;
}
.acad-signing{ aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); }

/* Lien sortant vers l'école : visible comme un lien, pas comme du gras. */
.acad-link{
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lime);
}
.acad-link:hover, .acad-link:focus-visible{ color: var(--lime); }

@media (max-width: 1024px){
  .acad-split{ grid-template-columns: 1fr; }
}

/* =========================================================
   ACCOMMODATION — vignettes rehaussées
   104×78px était trop discret. On monte à un format qui donne de la
   présence sans repasser en fiche de réservation.
   ========================================================= */
.stay-grid{ gap: 4px; }
.stay-card{
  gap: clamp(20px, 2.5vw, 32px);
  padding: var(--space-4) 0;
  align-items: center;
}
.stay-card img{
  width: clamp(180px, 20vw, 240px);
  height: clamp(120px, 13.5vw, 160px);
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.stay-card h3{ font-size: 1.12rem; }
.stay-card p{ font-size: .92rem; }
@media (max-width: 640px){
  .stay-card{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .stay-card img{ width: 100%; height: clamp(150px, 45vw, 200px); }
}


/* Notes et aides de formulaire sur fond navy : #6E6860 tombait à 3,0:1.
   --grey-warm donne 6,6:1 sur navy. */
.lp-form-wrap .lp-required-note,
.lp-form-wrap .lp-help,
.final-cta .cta-audience-line{ color: var(--grey-warm); }

/* .caption est conçue pour vivre sur photo ou navy ; posée sur le fond
   blanc de .title-media-body elle tombait à 1,35:1. */
.title-media-body .caption{ color: var(--grey-warm-light); }

/* Turnstile : le widget ne réserve de la place que s'il s'affiche
   (mode interaction-only), pour ne pas créer de décalage de mise en page. */
.cf-turnstile{ margin: 18px 0 0; min-height: 0; }
.cf-turnstile:not(:empty){ margin-bottom: 8px; }

/* =========================================================
   LOT 1 — ÉCHELLE HERO COMMUNE (bloc 1 de chaque page)
   ---------------------------------------------------------
   Avant : trois échelles effectives coexistaient dans les blocs
   display de fin de feuille — index et academy plafonnaient à
   2.6rem (les deux pages les plus vues avaient les plus petits
   titres), apply montait avec une pente différente, les huit
   autres pages partageaient déjà clamp(1.7, 1.2+2.2vw, 2.9).

   Après : l'échelle dominante devient LA règle, posée ici (chargé
   en dernier, spécificité égale 0-1-1 → elle gagne partout).
   La direction display reste intacte : Archivo, capitales,
   graisse 800, interlettrage resserré.

   Hors périmètre volontaire : privacy, terms et les deux pages
   /thanks n'ont pas le système display (Outfit, casse normale,
   plus petit) — registre utilitaire assumé.
   ========================================================= */
.hero-overlay h1,
.hero-text h1,
.lp-hero h1{
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
  font-weight: 800;
  letter-spacing: .012em;
}

/* Sous-titre de hero : sept tailles (de .98 à 1.09rem) deviennent une.
   Les largeurs de lecture (max-width en ch) restent celles de chaque
   page : c'est un choix de colonne, pas de gamme. */
.hero-sub,
.hero-subtitle,
.lp-hero .lp-sub{
  font-size: 1.06rem;
  line-height: 1.62;
  font-weight: 300;
}

/* =========================================================
   LOT 11 — BANDE DE LIAISON ÉCOSYSTÈME (pages programmes)
   Une phrase + un lien vers /app, en blanc avec filet haut :
   sépare aussi visuellement les blocs navy qu'elle relie.
   ========================================================= */
.eco-band{
  background: var(--white);
  border-top: 1px solid var(--grey-mid);
  padding: var(--space-6) 0;
  max-width: var(--max-width);
  margin: 0 auto;
}
.eco-band .container{
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 32px;
}
.eco-band p{
  margin: 0; font-size: .95rem; font-weight: 300;
  color: var(--grey-dark); line-height: 1.6; max-width: 62ch;
}
.eco-band b{ color: var(--navy); font-weight: 600; }
.eco-band .link-nav{ white-space: nowrap; font-weight: 600; }

/* =========================================================
   BLOC DE CLÔTURE — MOTIF « SUITE DE LECTURE »
   Contrainte globale de la revue du 26/08 : les trois liens de
   fin de page suivent partout la même logique — court paragraphe
   d'introduction, puis les liens sur une même ligne.
   Le motif d'origine (.closing-band seul) empile les liens en
   colonne dans la moitié droite d'une grille prévue pour recevoir
   une citation à gauche : sans citation, le bloc se lit comme une
   liste orpheline. Posé ici sous une classe MODIFICATRICE pour
   n'être écrit qu'une fois sur les quatre pages concernées ;
   aucune page existante ne bouge tant qu'elle ne la porte pas.
   ========================================================= */
.closing-band.closing-next .container{
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}
.closing-next-intro{ max-width: 62ch; }
.closing-next-intro h2{
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-stretch: 112%;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .022em;
  line-height: 1.1;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
  color: var(--navy);
}
.closing-next-intro p{
  margin: 0;
  font-size: 1rem; font-weight: 300; line-height: 1.6;
  color: var(--grey-dark);
}
/* Les liens passent en ligne. Le filet inférieur, qui séparait des
   entrées empilées, n'a plus de sens à l'horizontale : il est retiré. */
.closing-band.closing-next .closing-links{
  flex-direction: row;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  margin-top: var(--space-3);
}
.closing-band.closing-next .closing-links a{
  border-bottom: none;
  padding: 0 0 0 22px;
}
/* Sous 640px la ligne se casserait de toute façon : on revient à la
   pile, filets compris, qui reste plus lisible au pouce. */
@media (max-width: 640px){
  .closing-band.closing-next .closing-links{ flex-direction: column; gap: 0; margin-top: var(--space-4); }
  .closing-band.closing-next .closing-links a{ padding: 12px 0 12px 22px; border-bottom: 1px solid var(--grey-mid); }
  .closing-band.closing-next .closing-links a:last-child{ border-bottom: none; }
}