/*
Theme Name: La Forge
Theme URI: https://www.laforge-fitness.fr
Author: La Forge
Description: Thème sur-mesure pour La Forge (Ploufragan / Saint-Brieuc). Aucun page builder — HTML/PHP natif.
Version: 1.0
Text Domain: laforge
*/

html{color-scheme: dark;}
:root{
  --black:#000000;
  --white:#FFFFFF;
  --white-70: rgba(255,255,255,.70);
  --white-45: rgba(255,255,255,.45);
  --hairline: rgba(255,255,255,.14);

  --font-display: 'Switzer', Helvetica, Arial, sans-serif; /* Confirmée — police réelle de theyardgym.com */
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;

  /* Échelle d'espacement — utilisée pour toute la respiration du site */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 28px;
  --space-4: 48px;
  --space-5: 80px;
  --space-6: clamp(96px, 12vw, 160px);
  --space-7: clamp(140px, 16vw, 220px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

/* ============ NAV ============ */
header.site-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
}
.logo{
  font-family:var(--font-display);
  font-size:20px;
  letter-spacing:.04em;
  text-decoration:none;
}
nav.primary ul{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
nav.primary a{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--white-70);
  transition:color .2s ease;
}
nav.primary a:hover, nav.primary a:focus-visible{color:var(--white);}
.nav-cta{
  border:1px solid var(--white);
  padding:10px 18px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--white); color:var(--black);}
.nav-toggle{display:none;}

@media (max-width:860px){
  nav.primary{display:none;}
  .nav-toggle{
    display:block; background:none; border:1px solid var(--white-45);
    color:var(--white); font-size:12px; letter-spacing:.08em;
    text-transform:uppercase; padding:12px 18px; min-height:44px;
  }
}
@media (max-width:480px){
  .nav-cta{display:none;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.75) 78%, rgba(0,0,0,.95) 100%),
    repeating-linear-gradient(115deg, #050505 0 2px, #0d0d0d 2px 4px);
}
.hero-media video, .hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:0 auto; width:100%;
  padding:0 var(--gutter) 72px;
}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--white-70); margin:0 0 18px;
}
h1.hero-title{
  font-family:var(--font-display);
  font-size:clamp(52px, 11vw, 156px);
  line-height:.90;
  margin:0 0 20px;
  text-transform:uppercase;
  letter-spacing:-.015em;
}
.hero-sub{
  font-size:clamp(16px, 1.6vw, 20px);
  color:var(--white-70);
  max-width:640px;
  margin:0 0 32px;
}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:14px 28px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--white);
  transition:background .2s ease, color .2s ease;
}
.btn.primary{background:var(--white); color:var(--black);}
.btn.primary:hover{background:transparent; color:var(--white);}
.btn.ghost{color:var(--white);}
.btn.ghost:hover{background:var(--white); color:var(--black);}

/* ============ MARQUEE SIGNATURE ============ */
.marquee{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  padding:22px 0;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  gap:48px;
  animation:scroll-left 28s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display);
  font-size:clamp(22px, 3.4vw, 40px);
  text-transform:uppercase;
  color:var(--white-45);
}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ============ SECTION GENERIC ============ */
section{padding:var(--space-6) 0;}
.section-head{max-width:820px; margin:0 0 var(--space-5);}
.section-head .eyebrow{margin-bottom:14px;}
h2{
  font-family:var(--font-display);
  font-size:clamp(34px, 5.5vw, 60px);
  text-transform:uppercase;
  line-height:1.0;
  margin:0 0 20px;
}
.lede{color:var(--white-70); font-size:19px; margin:0; max-width:52ch;}
.eyebrow{font-weight:600;}

/* ============ COURS (blocs alternés) ============ */
.course{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  align-items:center;
  padding:var(--space-5) 0;
  border-top:1px solid var(--hairline);
}
.course:nth-child(even){direction:rtl;}
.course:nth-child(even) > *{direction:ltr;}
.course-media{
  aspect-ratio:4/3;
  background:#0c0c0c;
  border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px;
  font-size:12px; color:var(--white-45); letter-spacing:.04em;
  overflow:hidden;
}
.course-media img{width:100%; height:100%; object-fit:cover;}
.course-name{
  font-family:var(--font-display);
  font-size:clamp(24px, 3vw, 36px);
  text-transform:uppercase;
  margin:0 0 var(--space-2);
}
.course-tag{
  font-size:13px; color:var(--white-45);
  letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 var(--space-2);
}
.course p{color:var(--white-70); margin:0 0 var(--space-3); line-height:1.65;}
.course a.more{
  display:inline-block; margin-top:12px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:4px;
}

@media (max-width:760px){
  .course, .course:nth-child(even){grid-template-columns:1fr; direction:ltr;}
}

/* ============ CITATION FONDATEURS ============ */
.quote-block{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  text-align:center;
  padding:var(--space-6) var(--gutter);
}
.quote-block blockquote{
  max-width:820px; margin:0 auto 24px;
  font-family:var(--font-display);
  font-size:clamp(22px, 3vw, 34px);
  line-height:1.15;
  text-transform:none;
  text-wrap:balance;
}
.quote-block cite{
  font-style:normal; color:var(--white-45);
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
}

/* ============ CTA FINAL ============ */
.final-cta{
  text-align:center;
  padding:var(--space-7) var(--gutter);
}
.final-cta h2{margin-bottom:var(--space-3);}

/* ============ FOOTER ============ */
footer.site-footer{
  border-top:1px solid var(--hairline);
  padding:56px var(--gutter) 32px;
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:32px;
  justify-content:space-between;
}
.footer-brand{font-family:var(--font-display); font-size:18px; margin:0 0 8px; text-transform:uppercase;}
.footer-tag{color:var(--white-45); font-size:14px; margin:0;}
.footer-links{list-style:none; display:flex; gap:20px; padding:0; margin:0; flex-wrap:wrap;}
.footer-links a{font-size:13px; color:var(--white-70); text-decoration:none;}
.footer-links a:hover{color:var(--white);}
.footer-bottom{
  max-width:var(--maxw); margin:32px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--white-45);
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--white); color:var(--black);
  padding:10px 16px; z-index:100;
}
.skip-link:focus{left:16px; top:16px;}

/* Switzer est livrée en plusieurs graisses (400 à 700) : on fixe
   explicitement le poids partout où la police de titre est utilisée. */
.logo, h1.hero-title, .marquee-track span, h2, .course-name,
.quote-block blockquote, .footer-brand {
  font-weight:700;
}

/* ============ EN-TÊTE DE PAGE façon "THE SPACE" / "THE TRAINING" ============ */
.page-header{
  display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:flex-end;
  padding:var(--space-5) 0 var(--space-3);
}
.page-header .split-title{
  margin:0;
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; line-height:.88;
  font-size:clamp(48px, 9vw, 128px);
  flex:1 1 420px;
}
.page-header .split-title span{display:block;}
.page-header .split-title .rule{
  border-top:1px solid var(--hairline);
  margin:14px 0;
}
.page-header .intro{
  flex:1 1 320px;
  max-width:480px;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--white-70); line-height:1.7;
  padding-bottom:8px;
}

/* ============ LISTE EN LIGNES : vignette + titre + description ============ */
.thumb-row-list{border-top:1px solid var(--hairline);}
.thumb-row{
  display:grid;
  grid-template-columns:220px 1fr 1.4fr;
  gap:var(--space-4);
  align-items:center;
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--hairline);
}
.thumb-row .thumb-media{
  aspect-ratio:1/1;
  background:#0c0c0c;
  border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--white-45); text-align:center; padding:10px;
  overflow:hidden;
}
.thumb-row .thumb-media img{width:100%; height:100%; object-fit:cover;}
.thumb-row .thumb-title{
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:clamp(22px,2.6vw,36px);
  margin:0;
}
.thumb-row p{color:var(--white-70); font-size:15px; margin:0;}

@media (max-width:760px){
  .thumb-row{grid-template-columns:110px 1fr; grid-template-areas:"media title" "media desc";}
  .thumb-row .thumb-media{grid-area:media;}
  .thumb-row .thumb-title{grid-area:title;}
  .thumb-row p{grid-area:desc;}
}

/* ============ Colonne éditoriale (récit, pas de grille produit) ============ */
.editorial{
  max-width:720px;
  margin:0 auto;
  font-size:19px;
  line-height:1.95;
  color:var(--white-70);
}
.editorial p{margin:0 0 var(--space-5);}
.editorial-wrap{max-width:960px; margin:0 auto; padding:0 var(--gutter);}
.editorial-wrap .full-photo{
  aspect-ratio:16/9;
  background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--white-45);
  margin:var(--space-5) 0;
}

/* ============ Mosaïque photo (Le Lieu — impact visuel prioritaire) ============ */
.photo-mosaic{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:4px;
}
.photo-mosaic .cell{
  background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px;
  font-size:11px; color:var(--white-45);
  overflow:hidden;
}
.photo-mosaic .cell img{width:100%; height:100%; object-fit:cover;}
.photo-mosaic .cell--wide{grid-column:span 2; aspect-ratio:21/9;}
.photo-mosaic .cell--tall{aspect-ratio:3/4;}
.photo-mosaic .cell--square{aspect-ratio:1/1;}
.photo-mosaic-row3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
  margin-top:4px;
}
@media (max-width:700px){
  .photo-mosaic, .photo-mosaic-row3{grid-template-columns:1fr;}
  .photo-mosaic .cell--wide{grid-column:span 1;}
}

/* ============ Formulaire de contact ============ */
.contact-form{display:flex; flex-direction:column; gap:var(--space-3);}
.contact-form label{
  display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--white-45); margin-bottom:8px;
}
.contact-form input, .contact-form textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--hairline);
  color:var(--white); font-family:var(--font-body); font-size:16px;
  padding:10px 0; outline:none;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--white);}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form button{
  align-self:flex-start; margin-top:var(--space-2);
  background:var(--white); color:var(--black); border:none;
  padding:14px 28px; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
}
.contact-form button:hover{background:var(--white-70);}
.contact-form-notice{
  font-size:13px; padding:12px 16px; border:1px solid var(--hairline); margin-bottom:var(--space-2);
}
.contact-form--wide{max-width:none;}
.contact-form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
}
@media (max-width:700px){
  .contact-form-row{grid-template-columns:1fr;}
}

/* ============ Accordéon FAQ ============ */
.faq-list{border-top:1px solid var(--hairline); max-width:900px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--hairline);}
.faq-question{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; background:none; border:none; cursor:pointer;
  padding:var(--space-3) 0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(16px,2vw,20px); text-transform:uppercase;
  color:var(--white); text-align:left;
}
.faq-question .icon{
  font-size:22px; font-weight:400; flex-shrink:0; margin-left:var(--space-3);
  transition:transform .25s ease;
}
.faq-item.is-open .faq-question .icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease;
}
.faq-answer p{
  color:var(--white-70); font-size:16px; line-height:1.7;
  padding-bottom:var(--space-3); max-width:70ch;
}

body{overflow-x:hidden;}

/* ============ Contenu natif WordPress (Gutenberg) — pages éditables ============ */
.entry-content{
  max-width:720px;
  margin:0 auto;
  font-size:19px;
  line-height:1.75;
  color:var(--white-70);
}
.entry-content p{margin:0 0 var(--space-4);}
.entry-content h2{font-size:clamp(28px,4vw,48px); margin:var(--space-5) 0 var(--space-3);}
.entry-content h3{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:24px; margin:var(--space-4) 0 var(--space-2);}
.entry-content img{
  width:100%; height:auto; display:block;
  margin:var(--space-5) 0;
}
.entry-content figure{margin:var(--space-5) 0;}
.entry-content figcaption{font-size:13px; color:var(--white-45); margin-top:8px; text-align:center;}
.entry-content blockquote{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3vw,32px); line-height:1.2;
  color:var(--white); text-transform:none;
  border-left:none; margin:var(--space-5) 0; padding:0;
  text-align:center;
}
.entry-content a{color:var(--white); text-decoration:underline; text-underline-offset:4px;}
.entry-content ul, .entry-content ol{padding-left:1.2em;}
.entry-content .wp-block-columns{gap:var(--space-4);}
.entry-content .wp-block-image.alignfull img, .entry-content .wp-block-image.alignwide img{
  width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
  max-width:100vw;
}

/* ============ Sous-menus (déroulant desktop / dépliant mobile) ============ */
nav.primary li{position:relative;}
nav.primary .sub-menu{
  list-style:none; margin:0; padding:0;
  position:absolute; top:100%; left:0;
  background:var(--black); border:1px solid var(--hairline);
  min-width:200px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
nav.primary li:hover > .sub-menu,
nav.primary li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
nav.primary .sub-menu li{border-bottom:1px solid var(--hairline);}
nav.primary .sub-menu li:last-child{border-bottom:none;}
nav.primary .sub-menu a{
  display:block; padding:12px 16px;
  font-size:12px; white-space:nowrap;
}
nav.primary .sub-menu a:hover{background:var(--white); color:var(--black);}

/* Menu mobile : sous-menu toujours visible, en retrait */
.mobile-nav .sub-menu{
  list-style:none; margin:0 0 8px; padding-left:20px;
}
.mobile-nav .sub-menu a{
  font-size:clamp(16px,4vw,20px);
  padding:10px 0;
  color:var(--white-70);
}

nav.primary li.menu-item-has-children > a::after{
  content:"▾"; font-size:9px; margin-left:5px; opacity:.6;
}
.mobile-nav li.menu-item-has-children > a::after{
  content:"▾"; font-size:14px; margin-left:8px; opacity:.6;
}

/* ============ Bandeau logos partenaires/affiliations ============ */
.partner-logos{
  border-top:1px solid var(--hairline);
  padding:var(--space-5) 0;
}
.partner-logos .eyebrow{text-align:center; margin-bottom:var(--space-4);}
.partner-logos-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--space-5);
}
.partner-logos-row .logo-slot{
  width:180px; height:110px;
  display:flex; align-items:center; justify-content:center;
  filter:grayscale(1) brightness(0) invert(1); /* logos affichés en blanc, cohérent avec la charte */
  opacity:.85;
}
.partner-logos-row .logo-slot img{max-width:100%; max-height:100%; object-fit:contain;}
.partner-logos-row .logo-slot.is-empty{
  border:1px dashed var(--white-45); filter:none; opacity:1;
  font-size:10px; color:var(--white-45); text-align:center; padding:8px;
}
@media (max-width:600px){
  .partner-logos-row{gap:var(--space-3);}
  .partner-logos-row .logo-slot{width:140px; height:80px;}
}

/* ============ Planning (tableau compact) ============ */
.planning-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.planning-table{
  width:100%; border-collapse:collapse;
  min-width:640px; /* force le scroll horizontal plutôt que d'écraser les colonnes sur mobile */
}
.planning-table th, .planning-table td{
  border:1px solid var(--hairline);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
  font-size:13px;
}
.planning-table thead th{
  font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:13px;
  color:var(--white); background:rgba(255,255,255,.04);
}
.planning-time-cell{
  font-family:var(--font-display); font-weight:700;
  color:var(--white); white-space:nowrap;
  background:rgba(255,255,255,.04);
}
.planning-course{
  display:block; color:var(--white-70);
  padding:2px 0;
}
.planning-course + .planning-course{
  border-top:1px solid var(--hairline);
  margin-top:4px; padding-top:6px;
}

:focus-visible{outline:2px solid var(--white); outline-offset:3px;}

/* ============ MOTION : reveal au scroll ============ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* ============ Interactions : hover médias & liens ============ */
.course-media{
  position:relative;
  transition:border-color .3s ease;
}
.course-media img{transition:transform .6s cubic-bezier(.16,1,.3,1);}
.course:hover .course-media img{transform:scale(1.04);}
.course:hover .course-media{border-color:var(--white-70);}

.more{position:relative; padding-bottom:2px;}
.more::after{
  content:"→"; display:inline-block; margin-left:6px;
  transition:transform .25s ease;
}
.more:hover::after{transform:translateX(4px);}

/* nav qui se resserre légèrement au scroll */
header.site-nav{transition:padding .3s ease, background .3s ease;}
header.site-nav.is-scrolled .nav-inner{padding-top:12px; padding-bottom:12px;}

/* hero : parallax léger + apparition orchestrée au chargement */
.hero-media{transition:transform .1s linear;}
.hero-content > *{
  opacity:0; transform:translateY(24px);
  animation:hero-in .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-content .eyebrow{animation-delay:.1s;}
.hero-content h1{animation-delay:.22s;}
.hero-content .hero-sub{animation-delay:.36s;}
.hero-content .btn-row{animation-delay:.48s;}
@keyframes hero-in{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .hero-content > *{animation:none; opacity:1; transform:none;}
  .hero-media{transition:none;}
}

/* ============ Indicateur de scroll + son (hero) ============ */
.hero-scroll-cue{
  position:absolute; left:var(--gutter); bottom:28px; z-index:3;
  display:flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--white-70);
}
.hero-scroll-cue svg{width:12px; height:12px; animation:bob 1.6s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(4px);}}
.hero-sound-toggle{
  position:absolute; right:var(--gutter); top:100px; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:var(--white); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; border:none; cursor:pointer;
}

/* ============ Paragraphe justifié avec mot cerclé ============ */
.statement{
  text-align:justify;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px, 3.6vw, 46px);
  line-height:1.25;
  text-transform:uppercase;
  max-width:1100px;
}
.statement .circled{
  display:inline-block;
  border:1px solid var(--white);
  border-radius:999px;
  padding:2px 18px;
}

/* ============ Bande de 3 photos avec labels superposés ============ */
.photo-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:4px solid var(--white);
}
.photo-strip .cell{
  position:relative; aspect-ratio:3/4;
  background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px;
  font-size:10px; color:var(--white-45);
}
.photo-strip .cell .label{
  position:absolute; bottom:20px; left:20px;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,2.6vw,32px); text-transform:uppercase;
  color:var(--white);
}
@media (max-width:760px){
  .photo-strip{grid-template-columns:1fr;}
}

/* ============ Section "partenaire" (affiliation) ============ */
.partner-section{padding:var(--space-6) 0; border-top:1px solid var(--hairline);}
.partner-section h2{max-width:820px;}
.partner-section .lede{margin-bottom:var(--space-4);}
.partner-section .partner-media{
  aspect-ratio:21/9;
  background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--white-45);
}

/* ============ Citation fondateur avec photo ============ */
.quote-block-v2{
  display:grid; grid-template-columns:280px 1fr; gap:var(--space-4);
  align-items:start; padding:var(--space-6) var(--gutter);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.quote-block-v2 .quote-media{
  aspect-ratio:4/3; background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--white-45); text-align:center; padding:12px;
}
.quote-block-v2 blockquote{
  margin:0 0 20px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(22px,3vw,34px); line-height:1.2; text-transform:none;
  text-wrap:balance;
}
.quote-block-v2 cite{font-style:normal; color:var(--white-45); font-size:13px; letter-spacing:.06em; text-transform:uppercase;}
@media (max-width:700px){
  .quote-block-v2{grid-template-columns:1fr;}
}

/* ============ Section "reel" : photo + texte aux coins + bouton Play ============ */
.reel-section{
  position:relative;
  min-height:70vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.reel-media{
  position:absolute; inset:0;
  background:#0c0c0c; border:1px dashed var(--white-45);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--white-45);
}
.reel-overlap-text{
  position:relative; z-index:2; width:100%;
  padding:0 var(--gutter);
}
.reel-overlap-text .tl, .reel-overlap-text .br{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px, 8vw, 110px);
  line-height:.95; text-transform:uppercase;
  color:var(--white);
}
.reel-overlap-text .tl{display:block;}
.reel-overlap-text .br{display:block; text-align:right; margin-top:24px;}

/* ============ Menu mobile (drawer) ============ */
.mobile-nav{
  position:fixed; inset:0; z-index:150;
  background:var(--black);
  display:flex; flex-direction:column;
  padding:24px var(--gutter) 40px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-20px);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.mobile-nav.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}
.mobile-nav-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:48px;
}
.mobile-nav-close{
  background:none; border:1px solid var(--white-45); color:var(--white);
  width:44px; height:44px; border-radius:50%; font-size:18px; cursor:pointer;
}
.mobile-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.mobile-nav a{
  display:block; padding:16px 0;
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px,7vw,34px); text-transform:uppercase;
  color:var(--white); text-decoration:none;
}
.mobile-nav .nav-cta{
  margin-top:32px; text-align:center; padding:16px;
}

@media (min-width:861px){
  .mobile-nav, .mobile-nav-close{display:none;}
}

/* ============ Cartes tarifs ============ */
.pricing-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--hairline); border:1px solid var(--hairline);
}
.pricing-card{background:var(--black); padding:var(--space-4) var(--space-3);}
.pricing-card h3{
  font-family:var(--font-display); font-weight:700;
  font-size:20px; text-transform:uppercase; line-height:1.2;
  margin:0 0 20px; min-height:48px;
}
.pricing-card .price{
  border-top:1px solid var(--hairline); padding-top:16px; margin-bottom:20px;
}
.pricing-card .price strong{
  font-family:var(--font-display); font-weight:700; font-size:32px;
}
.pricing-card .price span{color:var(--white-45); font-size:14px;}
.pricing-card ul{list-style:none; margin:0; padding:0;}
.pricing-card li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--white-70);
  padding:8px 0; border-top:1px solid var(--hairline);
}
.pricing-card li:first-child{border-top:none;}
.pricing-card li::before{content:"✓"; color:var(--white); flex-shrink:0;}
.pricing-note{
  font-size:12px; color:var(--white-45); text-align:center;
  margin-top:24px; line-height:1.7;
}

/* ============ Correctif : masquer le cadre pointillé une fois une vraie image insérée ============ */
.course-media:has(img), .course-media:has(video),
.thumb-row .thumb-media:has(img),
.editorial-wrap .full-photo:has(img),
.photo-mosaic .cell:has(img),
.photo-strip .cell:has(img),
.partner-section .partner-media:has(img),
.quote-block-v2 .quote-media:has(img),
.reel-media:has(img), .reel-media:has(video){
  border:none;
  background:none;
  padding:0;
}