/* grandpossible.com : design system V2 « Trajectoires » (charte Grand Possible)
   Concept : l'étoile du logo et la trajectoire des humanautes. Héros sombres
   constellés, ligne de trajectoire signature, sections claires disciplinées. */
:root{
  --turq:#008796; --turq2:#00A0AF; --turq-clair:#7FD8E2;
  --tang:#F07823; --vert:#49BB69; --indigo:#2B479C; --rouge:#EE404A;
  --encre-fonce:#0B2226; --encre-hero:#0E2A30;
  --fond:#FBFBF8; --encre:#1C2B2E; --sourdine:#5C6B70;
  --ligne:#E6E2D8; --carte:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:"Crimson Pro",Georgia,serif; font-size:19px; line-height:1.65;
}
.mont{font-family:"Montserrat",sans-serif}
img{max-width:100%; display:block}
a{color:var(--turq)}

/* ---------- Révélations au défilement ---------- */
[data-reveal]{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
}

/* ---------- Barre du haut (transparente sur les héros sombres) ---------- */
.topbar{position:absolute; top:0; left:0; right:0; z-index:50; background:transparent}
.topbar.solide{
  position:fixed; background:linear-gradient(95deg,#008796,#00A0AF);
  box-shadow:0 2px 14px rgba(28,43,46,.18);
}
.topbar-inner{
  max-width:1160px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar.solide .topbar-inner{padding:12px 28px}
.topbar .logo img{height:46px; width:auto; transition:height .2s ease}
.topbar.solide .logo img{height:40px}
.nav{display:flex; gap:2px; align-items:center; white-space:nowrap}
.nav a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px;
  color:#fff; text-decoration:none; padding:9px 12px; border-radius:9px;
  transition:background .15s ease;
}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav a.actif{background:rgba(255,255,255,.18)}
.nav a.cta{background:#fff; color:var(--turq); margin-left:4px}
.nav a.cta:hover{background:#EAF7F8}

/* ---------- Étoiles et constellation ---------- */
.constellation{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible}
.constellation line{stroke:rgba(127,216,226,.16); stroke-width:1}
.constellation .etoile{transform-origin:center; transform-box:fill-box}
@media (prefers-reduced-motion: no-preference){
  .constellation .etoile{animation:scintiller 5s ease-in-out infinite}
  .constellation .etoile:nth-child(3n){animation-delay:1.4s}
  .constellation .etoile:nth-child(3n+1){animation-delay:2.8s}
}
@keyframes scintiller{0%,100%{opacity:.45; transform:scale(.9)}50%{opacity:1; transform:scale(1.12)}}

/* ---------- Trajectoire signature ---------- */
.trajectoire{display:block; width:100%; height:70px; overflow:visible}
.trajectoire .trace{fill:none; stroke:var(--turq2); stroke-width:2; stroke-linecap:round; opacity:.85}
.trajectoire .jalons circle{fill:var(--turq-clair)}
.trajectoire .jalons circle.j-tang{fill:var(--tang)}
.trajectoire .jalons circle.j-vert{fill:var(--vert)}
.trajectoire-hero{position:absolute; bottom:-2px; left:0; right:0; z-index:2}
@media (prefers-reduced-motion: no-preference){
  .trajectoire .pouls{
    fill:none; stroke:var(--tang); stroke-width:2.5; stroke-linecap:round;
    stroke-dasharray:30 1600; animation:filer 8s linear infinite;
  }
  .trajectoire .jalons circle{transform-origin:center; transform-box:fill-box; animation:scintiller 5s ease-in-out infinite}
  .trajectoire .jalons circle:nth-child(2){animation-delay:1.6s}
  .trajectoire .jalons circle:nth-child(3){animation-delay:3.2s}
}
@keyframes filer{from{stroke-dashoffset:0}to{stroke-dashoffset:-1630}}

/* ---------- Héros cinématographique (accueil) ---------- */
.hero-cine{
  position:relative; background:var(--encre-hero); color:#fff; overflow:hidden;
  min-height:88vh; display:flex; align-items:center;
}
.hero-cine::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 520px at 82% 18%, rgba(0,160,175,.2), transparent 65%),
             radial-gradient(560px 420px at 8% 92%, rgba(43,71,156,.16), transparent 60%);
}
.hero-photo-fond{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:78% center;
  -webkit-mask-image:linear-gradient(100deg, transparent 30%, rgba(0,0,0,.5) 52%, #000 74%);
          mask-image:linear-gradient(100deg, transparent 30%, rgba(0,0,0,.5) 52%, #000 74%);
  filter:saturate(.85); opacity:.8;
}
.hero-photo-fond::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,42,48,.5), rgba(14,42,48,.1) 45%, rgba(11,34,38,.6));
}
.hero-contenu{
  position:relative; z-index:1; max-width:1160px; margin:0 auto; width:100%;
  padding:150px 28px 120px;
}
.hero-contenu .colonne{max-width:720px}
.surtitre{
  display:inline-block; font-family:"Montserrat",sans-serif; font-weight:800;
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--turq-clair);
  border:1.5px solid rgba(127,216,226,.55); border-radius:999px; padding:8px 18px; margin-bottom:28px;
}
h1{
  font-family:"Montserrat",sans-serif; font-weight:900; margin:0 0 24px;
  font-size:clamp(34px,4.6vw,58px); line-height:1.08; letter-spacing:-.02em; color:#fff;
}
h1 em{font-style:normal; color:var(--turq-clair); position:relative; white-space:nowrap}
h1 em svg{position:absolute; left:0; right:0; bottom:-10px; width:100%; height:14px; overflow:visible}
h1 em svg path{
  stroke:var(--tang); stroke-width:4; fill:none; stroke-linecap:round;
  stroke-dasharray:600; stroke-dashoffset:600; animation:tracer 1s ease .7s forwards;
}
@keyframes tracer{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  h1 em svg path{animation:none; stroke-dashoffset:0}
}
.hero-cine .lede{
  font-size:clamp(19px,2vw,22.5px); color:rgba(255,255,255,.88); max-width:58ch; margin:0 0 36px;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-block; font-family:"Montserrat",sans-serif; font-weight:700; font-size:16px;
  text-decoration:none; padding:15px 28px; border-radius:12px; border:0; cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:focus-visible{outline:3px solid var(--tang); outline-offset:3px}
.btn-plein{background:var(--tang); color:#fff}
.btn-plein:hover{background:#D9660F; transform:translateY(-1px)}
.btn-fantome{border:2px solid rgba(255,255,255,.55); color:#fff}
.btn-fantome:hover{background:rgba(255,255,255,.1)}
.btn-ligne{border:2px solid var(--turq); color:var(--turq)}
.btn-ligne:hover{background:rgba(0,135,150,.07)}
.btn-turq{background:var(--turq); color:#fff}
.btn-turq:hover{background:#00707D; transform:translateY(-1px)}
.btn-blanc{background:#fff; color:var(--turq)}
.btn-blanc:hover{background:#EAF7F8; transform:translateY(-1px)}

/* Entrée orchestrée du héros */
.hero-contenu .colonne > *{opacity:0; transform:translateY(18px); animation:lever .7s ease forwards}
.hero-contenu .surtitre{animation-delay:.05s}
.hero-contenu h1{animation-delay:.15s}
.hero-contenu .lede{animation-delay:.3s}
.hero-contenu .hero-cta{animation-delay:.45s}
@keyframes lever{to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){
  .hero-contenu .colonne > *{opacity:1; transform:none; animation:none}
}

/* ---------- Bandeaux des pages intérieures ---------- */
.bandeau{
  position:relative; min-height:400px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center 30%; background-color:var(--encre-hero);
  color:#fff; overflow:hidden;
}
.bandeau::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,42,48,.55), rgba(11,34,38,.3) 45%, rgba(11,34,38,.8));
}
.bandeau.court{min-height:320px}
.bandeau .titre{
  position:relative; z-index:3; max-width:1160px; margin:0 auto; width:100%;
  padding:150px 28px 70px;
}
.bandeau h1{margin:0; font-size:clamp(32px,4.8vw,54px)}
.bandeau .sous{font-size:clamp(18px,2vw,21px); color:rgba(255,255,255,.85); max-width:62ch; margin:16px 0 0}
.bandeau .surtitre{margin-bottom:20px}
.bandeau .trajectoire-hero{z-index:2}
.filariane{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; margin:0 0 18px;
}
.filariane a{color:#B5E8EE; text-decoration:none}
.filariane a:hover{text-decoration:underline}

/* ---------- Sections ---------- */
.scene{max-width:1160px; margin:0 auto; padding:72px 28px}
.scene-tete{max-width:66ch; margin:0 auto 44px; text-align:center}
.eyebrow{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tang); margin:0 0 12px;
}
h2{font-family:"Montserrat",sans-serif; font-weight:800; font-size:clamp(27px,3.6vw,40px); line-height:1.12; margin:0 0 14px; letter-spacing:-.01em}
h2 em{font-style:normal; color:var(--turq)}
h3{font-family:"Montserrat",sans-serif; font-weight:800; font-size:19px; line-height:1.3; margin:0 0 8px}
.scene-tete p{margin:0; color:var(--sourdine); font-size:18.5px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.duo img{border-radius:16px; box-shadow:0 18px 44px rgba(28,43,46,.15)}
.prose{max-width:70ch; margin:0 auto}
.prose p{margin:0 0 24px; font-size:19.5px}
.prose p:first-of-type{font-size:22px}
.prose p:first-of-type::first-letter{
  font-family:"Montserrat",sans-serif; font-weight:900; color:var(--turq);
  font-size:62px; line-height:.9; float:left; padding:6px 12px 0 0;
}

/* ---------- Bande citation pleine largeur ---------- */
.bande-citation{
  position:relative; background-size:cover; background-position:center; background-color:var(--encre-fonce);
  display:flex; align-items:center; min-height:340px; overflow:hidden;
}
.bande-citation::after{content:""; position:absolute; inset:0; background:rgba(8,38,44,.62)}
.bande-citation blockquote{
  position:relative; z-index:1; max-width:920px; margin:0 auto; padding:70px 28px;
  color:#fff; font-family:"Montserrat",sans-serif; font-weight:800; text-align:center;
  font-size:clamp(22px,3vw,34px); line-height:1.28;
}
.bande-citation blockquote em{font-style:normal; color:var(--turq-clair)}

/* ---------- Initiatives ---------- */
.initiatives{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.initiative{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  padding:32px 28px; border-top:5px solid var(--turq);
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.initiative:hover{transform:translateY(-4px); box-shadow:0 18px 40px rgba(28,43,46,.11)}
.initiative:nth-child(2){border-top-color:var(--indigo)}
.initiative:nth-child(3){border-top-color:var(--tang)}
.initiative:nth-child(4){border-top-color:var(--vert)}
.initiative img{height:60px; width:auto; margin-bottom:18px; align-self:flex-start}
.initiative p{margin:0 0 16px; font-size:17px; color:var(--sourdine); flex:1}
.initiative .lien{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px;
  color:var(--turq); text-decoration:none;
}
.initiative .lien:hover{text-decoration:underline}

/* ---------- Vitrine sombre (balado) ---------- */
.vitrine{
  background:var(--encre-fonce); color:#fff; border-radius:24px;
  padding:60px 56px;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center;
  position:relative; overflow:hidden;
}
.vitrine::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 420px at 12% 110%, rgba(0,160,175,.24), transparent 65%);
}
.vitrine > *{position:relative}
.vitrine .cover img{border-radius:16px; box-shadow:0 26px 60px rgba(0,0,0,.45); transform:rotate(-2deg)}
.vitrine h2{color:#fff}
.vitrine .eyebrow{color:var(--turq-clair)}
.vitrine p{color:rgba(255,255,255,.86)}
.plateformes{display:flex; gap:14px; margin-top:24px; align-items:center; flex-wrap:wrap}
.plateformes a img{height:48px; width:auto; transition:transform .15s ease}
.plateformes a:hover img{transform:translateY(-3px)}
.lecteur{margin-top:36px; grid-column:1 / -1}
.video-cadre{position:relative; padding-top:56.25%; border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(28,43,46,.2)}
.video-cadre iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
wistia-player{border-radius:16px; overflow:hidden; box-shadow:0 18px 44px rgba(0,0,0,.3)}

/* ---------- Profils (coanimation, invités) ---------- */
.profils{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.profils.quatre{grid-template-columns:repeat(4,1fr)}
.profil{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  overflow:hidden; text-align:center; display:flex; flex-direction:column;
  box-shadow:0 4px 16px rgba(28,43,46,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.profil:hover{transform:translateY(-4px); box-shadow:0 16px 38px rgba(28,43,46,.12)}
.profil .visuel{overflow:hidden}
.profil .visuel img{width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 20%; transition:transform .35s ease}
.profil:hover .visuel img{transform:scale(1.045)}
.profil .corps{padding:18px 18px 20px; flex:1; display:flex; flex-direction:column}
.profil .role{font-size:16px; color:var(--sourdine); margin:0; flex:1}
.profil .ecouter{
  display:inline-block; margin-top:14px; align-self:center;
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px;
  color:#fff; background:var(--turq); text-decoration:none;
  padding:9px 20px; border-radius:999px; transition:background .15s ease;
}
.profil .ecouter:hover{background:#00707D}
.profil-sociaux{display:flex; gap:8px; justify-content:center; margin-top:12px; flex-wrap:wrap}
.profil-sociaux a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px;
  color:var(--turq); text-decoration:none; border:1.5px solid var(--ligne);
  border-radius:999px; padding:5px 12px; transition:background .15s ease, border-color .15s ease;
}
.profil-sociaux a:hover{border-color:var(--turq); background:rgba(0,135,150,.06)}

/* ---------- Répertoire des épisodes (balado) ---------- */
.filtres{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  margin:0 0 14px;
}
.filtres .groupe{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.puce{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px;
  border:1.5px solid var(--ligne); background:#fff; color:var(--encre);
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.puce:hover{border-color:var(--turq)}
.puce[aria-pressed="true"]{background:var(--turq); border-color:var(--turq); color:#fff}
.puce .compte{opacity:.65; font-weight:600; margin-left:4px}
.puce:focus-visible{outline:3px solid var(--tang); outline-offset:2px}
.filtres-outils{display:flex; gap:12px; justify-content:center; align-items:center; flex-wrap:wrap; margin:0 0 34px}
.recherche{
  font-family:"Crimson Pro",Georgia,serif; font-size:17.5px; color:var(--encre);
  border:1.5px solid var(--ligne); border-radius:999px; background:#fff;
  padding:11px 20px; width:min(340px, 100%);
}
.recherche:focus{outline:none; border-color:var(--turq); box-shadow:0 0 0 3px rgba(0,135,150,.14)}
.tri{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:13.5px;
  border:1.5px solid var(--ligne); background:#fff; color:var(--sourdine);
  border-radius:999px; padding:10px 18px; cursor:pointer;
}
.tri:hover{border-color:var(--turq); color:var(--turq)}
.tri:focus-visible{outline:3px solid var(--tang); outline-offset:2px}
.repertoire{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.episode{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  padding:22px 24px; display:flex; gap:20px; align-items:flex-start;
  box-shadow:0 4px 16px rgba(28,43,46,.04);
  transition:transform .2s ease, box-shadow .2s ease;
}
.episode:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(28,43,46,.1)}
.episode.cache{display:none}
.ep-num{
  font-family:"Montserrat",sans-serif; font-weight:900; font-size:34px; line-height:1;
  color:var(--turq); opacity:.9; min-width:58px; padding-top:2px;
}
.ep-num::before{content:"ép."; display:block; font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--sourdine); opacity:.8; margin-bottom:3px}
.ep-corps{flex:1}
.ep-meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:8px}
.ep-date{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--sourdine);
}
.badge{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:4px 11px;
}
.badge-ministre{background:rgba(240,120,35,.13); color:#C25A0B}
.badge-terrain{background:rgba(0,135,150,.12); color:var(--turq)}
.badge-discussion{background:rgba(43,71,156,.11); color:var(--indigo)}
.episode h3{font-size:17.5px; margin:0 0 6px}
.ep-gens{margin:0 0 12px; font-size:15.5px; color:var(--sourdine)}
.ep-lien{
  display:inline-block; font-family:"Montserrat",sans-serif; font-weight:700; font-size:13.5px;
  color:var(--turq); text-decoration:none;
}
.ep-lien:hover{text-decoration:underline}
.repertoire-vide{
  display:none; text-align:center; color:var(--sourdine); padding:40px 0; grid-column:1 / -1;
}
.repertoire-vide.visible{display:block}

/* ---------- Bande défilante (Journée GP) ---------- */
.bande-defilante{background:var(--tang); color:#fff; overflow:hidden; padding:15px 0}
.bande-defilante .piste{
  display:flex; gap:0; white-space:nowrap; width:max-content;
  animation:defile 28s linear infinite;
}
.bande-defilante span{font-family:"Montserrat",sans-serif; font-weight:800; font-size:19px; padding:0 18px}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .bande-defilante .piste{animation:none}
}

/* ---------- Avantages (pourquoi assister) ---------- */
.avantages{display:flex; flex-direction:column; gap:18px}
.avantage{
  background:var(--carte); border:1px solid var(--ligne); border-radius:14px;
  padding:20px 24px; border-left:5px solid var(--turq);
}
.avantage strong{font-family:"Montserrat",sans-serif; font-weight:800; font-size:18px}
.avantage p{margin:6px 0 0; color:var(--sourdine); font-size:17.5px}

/* ---------- Cartes (rattrapage, médias) ---------- */
.cartes{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.carte{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  overflow:hidden; text-decoration:none; color:var(--encre); display:flex; flex-direction:column;
  box-shadow:0 4px 16px rgba(28,43,46,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.carte:hover{transform:translateY(-5px); box-shadow:0 20px 44px rgba(28,43,46,.14)}
.carte .visuel{overflow:hidden; aspect-ratio:1200/630}
.carte .visuel img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.carte:hover .visuel img{transform:scale(1.045)}
.carte .corps{padding:22px 24px 24px}
.carte p{margin:0 0 14px; color:var(--sourdine); font-size:17px}
.carte .lien{font-family:"Montserrat",sans-serif; font-weight:700; font-size:14.5px; color:var(--turq)}
.centre{text-align:center; margin-top:36px}

/* ---------- Témoignages ---------- */
.temoignages{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.temoignage{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px;
  padding:28px 26px; display:flex; flex-direction:column;
}
.temoignage blockquote{margin:0 0 16px; font-size:17.5px; font-style:italic; flex:1}
.temoignage blockquote::before{
  content:"«"; display:block; font-family:"Montserrat",sans-serif; font-weight:900;
  font-size:44px; line-height:.6; color:var(--turq-clair); margin-bottom:12px;
}
.temoignage .auteur{font-family:"Montserrat",sans-serif; font-weight:700; font-size:15px; color:var(--turq)}

/* ---------- Partenaires ---------- */
.logos-bande{display:flex; gap:44px; align-items:center; justify-content:center; flex-wrap:wrap}
.logos-bande img{height:64px; width:auto}
.logos-bande img.haut{height:84px}

/* ---------- FAQ ---------- */
.faq{max-width:820px; margin:0 auto}
.faq details{
  background:var(--carte); border:1px solid var(--ligne); border-radius:12px;
  padding:0 22px; margin-bottom:12px;
}
.faq summary{
  cursor:pointer; font-family:"Montserrat",sans-serif; font-weight:700; font-size:17px;
  padding:18px 0; list-style:none; position:relative; padding-right:34px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  color:var(--tang); font-size:26px; font-weight:800;
}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px; color:var(--sourdine)}

/* ---------- Ressources ---------- */
.ressources-liste{max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:12px}
.ressource{
  background:var(--carte); border:1px solid var(--ligne); border-left:5px solid var(--turq);
  border-radius:12px; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  text-decoration:none; color:var(--encre);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ressource:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(28,43,46,.1)}
.ressource.vers-classe-zen{border-left-color:var(--vert)}
.ressource.vers-ase{border-left-color:var(--tang)}
.ressource.vers-ancrage{border-left-color:var(--indigo)}
.ressource .titre{font-family:"Montserrat",sans-serif; font-weight:700; font-size:16.5px}
.ressource .vers{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:13.5px;
  color:var(--turq); white-space:nowrap;
}

/* ---------- Bande invitation / CTA sombre ---------- */
.bande-invitation{
  position:relative; background-size:cover; background-position:center; background-color:var(--encre-fonce);
  overflow:hidden;
}
.bande-invitation::after{content:""; position:absolute; inset:0; background:rgba(8,38,44,.62)}
.bande-invitation .contenu{
  position:relative; z-index:1; max-width:880px; margin:0 auto; padding:76px 28px;
  text-align:center; color:#fff;
}
.bande-invitation img.symbole{height:74px; width:auto; margin:0 auto 26px}
.bande-invitation p{
  font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:clamp(20px,2.6vw,27px); line-height:1.4; margin:0;
}
.bande-invitation em{font-style:normal; color:var(--turq-clair)}
.bande-invitation h2{color:#fff}
.bande-invitation .hero-cta{justify-content:center; margin-top:28px}

/* ---------- Formulaire contact ---------- */
.formulaire{max-width:640px; margin:0 auto}
.formulaire label{
  display:block; font-family:"Montserrat",sans-serif; font-weight:700; font-size:15px;
  margin:20px 0 6px;
}
.formulaire input, .formulaire textarea, .formulaire select{
  width:100%; padding:13px 14px; font-family:"Crimson Pro",Georgia,serif; font-size:18px;
  border:1.5px solid var(--ligne); border-radius:10px; background:#fff; color:var(--encre);
}
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus{
  outline:none; border-color:var(--turq); box-shadow:0 0 0 3px rgba(0,135,150,.15);
}
.formulaire button{margin-top:26px}
.coordonnees-bloc{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:880px;
  margin:48px auto 0;
}
.coordonnee{
  background:var(--carte); border:1px solid var(--ligne); border-radius:16px; padding:26px;
  text-align:center;
}
.coordonnee h3{color:var(--turq)}
.coordonnee p{margin:0; font-size:17.5px}

/* ---------- Pied de page ---------- */
.footer{
  background:var(--encre-fonce); color:#fff; margin-top:72px; position:relative; overflow:hidden;
}
.footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 480px at 85% -10%, rgba(0,160,175,.18), transparent 65%);
}
.footer .trajectoire{margin-top:-2px; position:relative}
.footer a{color:#fff}
.footer-inner{position:relative; max-width:1160px; margin:0 auto; padding:52px 28px 30px}
.footer-grille{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:44px; align-items:start}
.footer img.logo{height:34px; width:auto; margin-bottom:22px}
.footer h4{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--turq-clair); margin:0 0 14px;
}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:8px}
.footer li a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.footer li a:hover{border-bottom-color:#fff}
.footer .adresse p{margin:0 0 8px}
.footer .adresse a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.footer a.btn-blanc{color:var(--turq)}
.sociaux{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.sociaux a{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px; color:#fff;
  text-decoration:none; border:1.5px solid rgba(255,255,255,.45); border-radius:999px;
  padding:8px 17px; transition:background .15s ease, border-color .15s ease;
}
.sociaux a:hover{background:rgba(255,255,255,.12); border-color:#fff}
.footer .droits{
  font-size:15px; color:rgba(255,255,255,.7); text-align:center;
  border-top:1px solid rgba(255,255,255,.16); padding-top:22px; margin-top:44px;
}
.footer .droits a{color:rgba(255,255,255,.85)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-cine{min-height:0}
  .hero-photo-fond{
    -webkit-mask-image:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.5) 55%, #000 85%);
            mask-image:linear-gradient(180deg, transparent 30%, rgba(0,0,0,.5) 55%, #000 85%);
    background-position:center bottom; opacity:.45;
  }
  .hero-contenu{padding:150px 22px 90px}
  .vitrine{grid-template-columns:1fr; padding:44px 28px; gap:34px}
  .vitrine .cover{max-width:320px; margin:0 auto}
  .duo{grid-template-columns:1fr}
  .cartes{grid-template-columns:1fr}
  .temoignages{grid-template-columns:1fr}
  .initiatives{grid-template-columns:1fr}
  .profils,.profils.quatre{grid-template-columns:repeat(2,1fr)}
  .repertoire{grid-template-columns:1fr}
  .footer-grille{grid-template-columns:1fr; gap:32px}
  .coordonnees-bloc{grid-template-columns:1fr}
  .topbar{position:absolute}
  .topbar.solide{position:fixed}
  .topbar-inner{flex-direction:column; gap:8px; padding:14px 16px}
  .topbar.solide .topbar-inner{padding:10px 16px}
  .topbar .logo img{height:38px}
  .nav{justify-content:center}
  .nav a{font-size:13.5px; padding:8px 11px}
  .bandeau{min-height:340px}
  .bandeau .titre{padding-top:190px}
}
@media (max-width:540px){
  .profils,.profils.quatre{grid-template-columns:1fr}
  .nav{flex-wrap:wrap; white-space:normal; justify-content:center}
  .vitrine{border-radius:0; margin:0 -20px}
  .episode{flex-direction:column; gap:12px}
  .ep-num{min-width:0}
  h1{font-size:clamp(27px,8vw,36px)}
  .bandeau .titre{padding-top:210px}
}

/* ---------- Répertoire : double lien (page + YouTube) ---------- */
.ep-liens{display:flex; gap:18px; flex-wrap:wrap; align-items:center}
.ep-lien.secondaire{color:var(--sourdine)}
.ep-lien.secondaire:hover{color:var(--turq)}

/* ---------- Page épisode (show notes) ---------- */
.bandeau .ep-hero-gens{
  font-family:"Montserrat",sans-serif; font-weight:600; font-size:16px;
  color:rgba(255,255,255,.9); margin:14px 0 0; max-width:60ch;
}
.bandeau .ep-meta .badge{font-size:11px}
.ep-player{max-width:960px; margin:0 auto}
.ep-ecouter{
  display:flex; gap:18px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin:26px 0 0;
}
.ep-ecouter a img{height:42px; width:auto; transition:transform .15s ease}
.ep-ecouter a:hover img{transform:translateY(-3px)}
.ep-ecouter .extrait-lien{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px;
  color:var(--turq); text-decoration:none;
}
.ep-ecouter .extrait-lien:hover{text-decoration:underline}

.notes{max-width:880px; margin:0 auto}
.notes-bloc{margin:0 0 48px}
.notes-bloc:last-child{margin-bottom:0}
.notes h2{text-align:left; font-size:clamp(24px,3vw,32px); margin-bottom:20px}
.notes-bloc > p{font-size:19.5px; color:var(--encre); margin:0}

.invites-liste{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.invite{
  background:var(--carte); border:1px solid var(--ligne); border-left:5px solid var(--turq);
  border-radius:14px; padding:22px 24px;
}
.invite h3{margin:0 0 4px}
.invite .role{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12.5px;
  letter-spacing:.05em; text-transform:uppercase; color:var(--tang); margin:0 0 12px;
}
.invite p{margin:0; color:var(--sourdine); font-size:16.5px}

.chapitres{list-style:none; margin:0; padding:0; border-top:1px solid var(--ligne)}
.chapitres li{border-bottom:1px solid var(--ligne)}
.chapitres a{
  display:flex; gap:18px; align-items:baseline; padding:13px 8px;
  text-decoration:none; color:var(--encre); transition:background .15s ease;
}
.chapitres a:hover{background:rgba(0,135,150,.05)}
.chapitres .tc{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:14px;
  color:var(--turq); min-width:58px;
}
.chapitres .ch-titre{font-size:17px}

.notes-liens{list-style:none; margin:0; padding:0}
.notes-liens li{
  position:relative; padding:11px 0 11px 24px; color:var(--encre); font-size:17px;
  border-bottom:1px solid var(--ligne);
}
.notes-liens li::before{content:"▸"; position:absolute; left:0; color:var(--tang)}
.notes-liens a{color:var(--turq)}

.commandite{
  background:var(--carte); border:1px solid var(--ligne); border-left:5px solid var(--tang);
  border-radius:14px; padding:22px 24px; color:var(--sourdine); font-size:16.5px;
}

.epnav{
  max-width:1160px; margin:16px auto 0; padding:0 28px;
  display:flex; gap:16px; justify-content:space-between; align-items:stretch; flex-wrap:wrap;
}
.epnav a{
  flex:1; min-width:230px; background:var(--carte); border:1px solid var(--ligne);
  border-radius:14px; padding:16px 22px; text-decoration:none; color:var(--encre);
  transition:transform .15s ease, box-shadow .15s ease;
}
.epnav a:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(28,43,46,.1)}
.epnav .sens{
  font-family:"Montserrat",sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sourdine);
}
.epnav .titre-ep{
  font-family:"Montserrat",sans-serif; font-weight:800; font-size:15px;
  color:var(--turq); display:block; margin-top:5px; line-height:1.25;
}
.epnav .suivant{text-align:right}
.epnav .retour{flex:0 0 auto; text-align:center; display:flex; flex-direction:column; justify-content:center}
@media (max-width:760px){
  .invites-liste{grid-template-columns:1fr}
  .epnav{flex-direction:column}
  .epnav .suivant{text-align:left}
}