/* ==========================================================================
   LA BASE — salon-la-base.fr
   Feuille de styles unique. DA v3 « sobre institutionnel ».
   Référence : source_design/Home LA BASE responsive.dc.html (lecture seule).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Fontes auto-hébergées (RGPD : aucune requête vers fonts.gstatic.com)
   -------------------------------------------------------------------------- */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/poppins-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-mono-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-mono-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* --------------------------------------------------------------------------
   2 · Tokens
   -------------------------------------------------------------------------- */
:root{
  /* couleurs */
  --ink:#10163A;
  --blue:#0000FF;
  --orange:#F26636;
  --grey:#5A5A7E;
  --grey-2:#9A9AB8;
  --bg:#EFF1F6;
  --white:#fff;
  --navy:#0B1240;

  /* filets */
  --line:rgba(0,0,255,.12);
  --line-2:rgba(0,0,255,.15);
  --line-3:rgba(0,0,255,.25);
  --line-o:rgba(242,102,54,.35);

  /* formes */
  --r-cta:3px;
  --r-card:4px;

  /* rythme */
  --pad-x:clamp(18px,4vw,56px);
  --pad-y:clamp(56px,7vw,100px);
  --header-h:76px;
  --maxw:1440px;

  /* typo */
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,Menlo,monospace;
}

/* --------------------------------------------------------------------------
   3 · Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden}

img,video,svg{display:block;max-width:100%}

a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--orange)}

h1,h2,h3,h4,p,figure,blockquote{margin:0}

button{font:inherit;color:inherit;background:none;border:0;padding:0}

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

::selection{background:var(--blue);color:#fff}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue);color:#fff;font-weight:700;font-size:14px;
  padding:14px 22px;border-radius:0 0 var(--r-cta) 0;
}
.skip-link:focus{left:0;color:#fff}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4 · Blocs de section
   -------------------------------------------------------------------------- */
.section{padding:var(--pad-y) var(--pad-x)}
.section--white{background:var(--white)}
.section--bg{background:var(--bg)}
.section--navy{background:var(--navy);color:#fff}

/* limite la ligne de contenu sur les très grands écrans ;
   au format de validation (1440 px) le rendu est inchangé */
.inner{max-width:var(--maxw);margin-inline:auto}

.eyebrow{
  font:700 12px/1 var(--mono);
  letter-spacing:3px;
  color:var(--orange);
  margin-bottom:12px;
}

.h2{
  font:800 clamp(26px,3vw,38px)/1.15 var(--sans);
  letter-spacing:-1px;
  text-transform:uppercase;
  color:var(--ink);
}

.h3{font:800 clamp(22px,2.4vw,30px)/1.2 var(--sans);letter-spacing:-.5px}

.lead{font-size:clamp(15px,1.6vw,18px);line-height:1.65;color:var(--grey);max-width:70ch}
.muted{color:var(--grey)}

.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:40px;
}

/* --------------------------------------------------------------------------
   5 · Boutons
   -------------------------------------------------------------------------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-cta);
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.cta:hover{transform:translateY(-2px)}

/* plein bleu */
.cta--blue{background:var(--blue);color:#fff;padding:15px 26px;font-size:15px}
.cta--blue:hover{color:#fff;box-shadow:0 7px 18px rgba(0,0,255,.20)}

/* contour bleu */
.cta--blue-ghost{border:2px solid var(--blue);color:var(--blue);background:rgba(255,255,255,.7);padding:13px 26px;font-size:15px}
.cta--blue-ghost:hover{color:var(--blue);box-shadow:0 7px 18px rgba(0,0,255,.20)}

/* plein orange */
.cta--orange{background:var(--orange);color:#fff;padding:15px 26px;font-size:15px}
.cta--orange:hover{color:#fff;box-shadow:0 7px 18px rgba(242,102,54,.24)}

/* contour orange */
.cta--orange-ghost{border:2px solid var(--orange);color:var(--orange);padding:13px 26px;font-size:15px}
.cta--orange-ghost:hover{color:var(--orange);box-shadow:0 7px 18px rgba(242,102,54,.24)}

/* contour blanc, sur fond navy */
.cta--white-ghost{border:2px solid rgba(255,255,255,.7);color:#fff;padding:13px 26px;font-size:15px}
.cta--white-ghost:hover{color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.22)}

/* plein blanc, sur fond navy */
.cta--white{background:#fff;color:var(--navy);padding:14px 22px;font-size:14px}
.cta--white:hover{color:var(--navy);box-shadow:0 7px 18px rgba(0,0,0,.22)}

/* CTA segmenté : libellé + sous-libellé de cible */
.cta--dual{flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:18px 30px}
.cta--dual.cta--blue-ghost,
.cta--dual.cta--white-ghost{padding:16px 30px}
.cta__label{font-weight:700;font-size:16px}
.cta__target{font-size:11.5px;font-weight:400;opacity:.8}
.cta--blue-ghost .cta__target{opacity:.7}
.cta--white-ghost .cta__target{opacity:.75}

.ctas{display:flex;gap:16px;flex-wrap:wrap}

.link-arrow{font-size:14.5px;font-weight:600;text-decoration:none}
.link-arrow:hover{text-decoration:underline}

/* --------------------------------------------------------------------------
   6 · En-tête
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad-x);
  height:var(--header-h);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.header__logo{display:flex;align-items:center}
.header__logo img{height:46px;width:auto}

.nav{display:flex;align-items:center;gap:32px}
.nav a{
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  padding:4px 0;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--blue)}
.nav a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}

.header__actions{display:flex;align-items:center;gap:22px}

.link-partner{
  font:400 12px/1 var(--mono);letter-spacing:1px;
  color:var(--grey);text-decoration:underline;
}
.link-partner:hover{color:var(--orange)}

.header .cta--blue{padding:12px 24px;font-size:14px}

.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:30px;height:30px;cursor:pointer;
}
.burger span{display:block;height:2px;background:var(--blue);transition:transform .22s ease, opacity .22s ease}
.burger span:last-child{background:var(--orange)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* tiroir mobile */
.drawer{
  position:fixed;inset:var(--header-h) 0 0;z-index:49;
  background:var(--white);
  padding:32px var(--pad-x) 48px;
  display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  /* visibility bascule instantanément à l'ouverture (sinon le premier lien n'est
     pas encore focusable) et seulement après le fondu à la fermeture */
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.drawer[data-open="true"]{
  transform:none;opacity:1;visibility:visible;
  transition:opacity .22s ease, transform .22s ease, visibility 0s;
}
.drawer a{
  font:700 20px/1.2 var(--sans);color:var(--ink);text-decoration:none;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.drawer a:hover,.drawer a[aria-current="page"]{color:var(--blue)}
.drawer .cta{margin-top:24px;align-self:flex-start}
.drawer .link-partner{margin-top:12px}

/* --------------------------------------------------------------------------
   7 · Hero d'accueil
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(92vh,860px);
  overflow:hidden;
  background:var(--bg);
  display:flex;align-items:center;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Voile du hero. Les deux premières bornes (0 % et 46 %) sont celles de la maquette :
   elles couvrent la colonne de texte et ne doivent pas bouger, le contraste du H1 et
   du sous-titre en dépend. Au-delà, le voile tombe à zéro pour laisser voir la vidéo,
   zone où aucun texte n'est posé. */
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.62) 46%,
    rgba(255,255,255,.10) 66%,
    rgba(255,255,255,0)   80%);
}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,255,.04) 0,rgba(0,0,255,.04) 1px,transparent 1px,transparent 96px),
    repeating-linear-gradient(90deg,rgba(0,0,255,.04) 0,rgba(0,0,255,.04) 1px,transparent 1px,transparent 96px);
}
.hero__content{
  position:relative;
  display:flex;flex-direction:column;gap:22px;
  padding:64px var(--pad-x);
  max-width:820px;
}
.hero__kicker{font:700 clamp(10.5px,1.2vw,13px)/1 var(--mono);letter-spacing:3px;color:var(--orange)}
.hero__title{
  font:800 clamp(46px,7.5vw,84px)/1 var(--sans);
  letter-spacing:-2px;text-transform:uppercase;color:var(--ink);
}
.hero__logo{display:block;width:clamp(260px,36vw,400px);max-width:100%;height:auto}
.hero__sub{font:600 clamp(18px,2.2vw,28px)/1.3 var(--sans);color:var(--ink);max-width:600px;text-wrap:pretty}
.hero__sub strong{color:var(--blue);font-weight:800}
.hero__baseline{font:700 clamp(11px,1.1vw,14px)/1.5 var(--mono);letter-spacing:5px;color:var(--grey)}

/* symbole radar */
.sym{
  position:absolute;right:2vw;top:50%;transform:translateY(-50%);
  width:min(44vw,620px);height:min(44vw,620px);
  pointer-events:none;
}
.sym__ring{position:absolute;inset:-9%;border:1px solid rgba(0,0,255,.18);border-radius:50%}
.sym__ring--dashed{inset:-20%;border:1px dashed rgba(0,0,255,.22);animation:spin 90s linear infinite}
.sym__sweep{
  position:absolute;inset:-20%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(0,0,255,.14),rgba(0,0,255,.03) 55deg,transparent 75deg);
  animation:spin 6s linear infinite;
}
.sym__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sym__blip{position:absolute;border-radius:50%}
.sym__blip--a{left:18%;top:24%;width:8px;height:8px;background:var(--orange);animation:blink 2.4s ease infinite}
.sym__blip--ring{left:18%;top:24%;width:8px;height:8px;border:1px solid var(--orange);animation:pulseRing 2.4s ease infinite}
.sym__blip--b{left:70%;top:64%;width:6px;height:6px;background:var(--blue);animation:blink 3.1s .8s ease infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.1}}
@keyframes pulseRing{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.6);opacity:0}}
@keyframes colMove{from{transform:translateY(0)}to{transform:translateY(-50%)}}

/* compte à rebours */
.countdown{
  display:flex;align-items:center;gap:24px;
  border:1px solid rgba(0,0,255,.2);
  background:rgba(255,255,255,.85);
  border-radius:var(--r-card);
  padding:18px 28px;width:fit-content;
}
.countdown__unit{display:flex;flex-direction:column;align-items:center;gap:2px}
.countdown__num{font:800 clamp(28px,3.4vw,44px)/1 var(--sans);color:var(--blue);font-variant-numeric:tabular-nums}
.countdown__unit:first-child .countdown__num{color:var(--orange)}
.countdown__label{font:400 9.5px/1 var(--mono);letter-spacing:2px;color:var(--grey)}

/* --------------------------------------------------------------------------
   8 · Bandeau repères
   -------------------------------------------------------------------------- */
.band{
  display:flex;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.band > div{
  flex:1;display:flex;align-items:center;gap:18px;
  padding:36px clamp(20px,4vw,56px);
}
.band > div + div{border-left:1px solid var(--line)}
.band__num{
  font:800 clamp(48px,5vw,84px)/1 var(--sans);
  color:transparent;-webkit-text-stroke:2.5px var(--blue);
}
.band__num--orange{-webkit-text-stroke-color:var(--orange)}
.band__txt{font-size:15px;line-height:1.4;font-weight:600}
.band__txt small{display:block;color:var(--grey);font-size:13px;font-weight:400}

/* --------------------------------------------------------------------------
   9 · Manifeste
   -------------------------------------------------------------------------- */
.manifesto{padding:clamp(56px,8vw,110px) clamp(18px,12vw,180px);background:var(--bg)}
.manifesto blockquote{
  font:600 clamp(18px,2.5vw,32px)/1.5 var(--sans);
  letter-spacing:-.3px;color:var(--ink);text-wrap:pretty;
}
.manifesto .accent-blue{color:var(--blue);font-weight:800}
.manifesto .accent-orange{color:var(--orange);font-weight:800}

/* --------------------------------------------------------------------------
   10 · Grilles
   -------------------------------------------------------------------------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.gorg{display:grid;grid-template-columns:340px 1fr 1fr;gap:48px;align-items:center}

/* --------------------------------------------------------------------------
   11 · Cartes
   -------------------------------------------------------------------------- */
.card{
  border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-2);
  background:var(--bg);
  display:flex;flex-direction:column;
}
.card--white{background:var(--white)}
.card__media{width:100%;height:280px;object-fit:cover}
.card__body{padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.card__num{font:700 11px/1 var(--mono);letter-spacing:2px;color:var(--orange)}
.card__title{font:800 22px/1.2 var(--sans);letter-spacing:-.5px}
.card__text{font-size:14px;line-height:1.6;color:var(--grey)}

/* les 3 piliers — bande pleine largeur, filets à 1 px */
.pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.pillars > div{
  background:var(--white);padding:44px 38px;
  display:flex;flex-direction:column;gap:14px;
  transition:background-color .2s ease;
}
.pillars > div:hover{background:var(--bg)}
.pillars h3{font:800 24px/1.2 var(--sans);letter-spacing:-.5px}
.pillars p{font-size:15px;line-height:1.6;color:var(--grey)}

/* --------------------------------------------------------------------------
   12 · Programme — double parcours
   -------------------------------------------------------------------------- */
.track{
  border-radius:var(--r-card);
  padding:clamp(24px,3vw,44px);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
}
.track--talents{
  border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(0,0,255,.06),transparent 55%),var(--bg);
}
.track--colloque{
  border:1px solid var(--line-o);
  background:linear-gradient(160deg,rgba(242,102,54,.07),transparent 55%),var(--white);
}
.track p{font-size:15px;line-height:1.65;color:var(--grey)}
.track p strong{color:var(--ink)}
.track .cta{margin-top:6px}

.slot{
  font:700 12px/1 var(--mono);letter-spacing:2px;
  border-radius:var(--r-cta);padding:6px 12px;
}
.slot--blue{color:var(--blue);border:1px solid rgba(0,0,255,.35)}
.slot--orange{color:var(--orange);border:1px solid rgba(242,102,54,.45)}

.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:12.5px;color:var(--grey);
  border:1px solid var(--line-3);border-radius:var(--r-cta);
  padding:5px 12px;
}

/* --------------------------------------------------------------------------
   13 · Organisation
   -------------------------------------------------------------------------- */
.portrait{position:relative;max-width:340px}
.portrait::before{
  content:"";position:absolute;inset:-14px 14px 14px -14px;
  border:2px solid rgba(242,102,54,.5);border-radius:var(--r-card);pointer-events:none;
}
.portrait__img{
  position:relative;border-radius:var(--r-card);overflow:hidden;
  width:100%;height:420px;object-fit:cover;background:var(--bg);
}

.medialist{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;
}
.medialist > div{
  background:var(--white);padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.medialist__logo{width:auto;object-fit:contain;flex:none}
.medialist__name{font:700 13px/1 var(--mono);letter-spacing:1px}
.medialist__stat{font-size:14px;color:var(--grey)}
.medialist__stat strong{font:800 22px/1 var(--sans);color:var(--blue)}

/* cartes co-organisateurs (page Organisation) */
.orgcard{
  background:var(--white);border:1px solid var(--line-2);border-radius:var(--r-card);
  padding:32px 30px;display:flex;flex-direction:column;gap:22px;
}
/* Boîte à logo : fond blanc car les trois marques n'ont pas le même traitement
   (SUD OUEST rouge détouré, PLACÉCO transparent, TV7 pavé rouge plein).
   Les hauteurs sont réglées logo par logo dans le HTML : une hauteur unique
   déséquilibrerait le bandeau, les proportions allant de 1,34 à 4,68. */
.orgcard__logo{
  height:88px;display:flex;align-items:center;justify-content:center;
  padding:14px 18px;
  border:1px solid var(--line);border-radius:var(--r-cta);
  background:var(--white);
}
.orgcard__logo img{max-width:100%;width:auto;object-fit:contain}
.orgcard__stats{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.orgcard__stats li{display:flex;align-items:baseline;gap:12px}
.orgcard__stats b{font:800 26px/1 var(--sans);color:var(--blue);min-width:110px}
.orgcard__stats span{font-size:14px;color:var(--grey)}

/* --------------------------------------------------------------------------
   14 · Partenaires — colonnes défilantes
   -------------------------------------------------------------------------- */
.partners{
  position:relative;
  border-top:1px solid var(--line);
  padding:clamp(56px,7vw,90px) 0 64px;
  overflow:hidden;background:var(--white);
}
.partners__head{text-align:center;margin-bottom:44px;position:relative;z-index:2;padding:0 18px}
.marquee{position:relative;height:min(60vw,520px)}
.marquee__cols{position:absolute;inset:0;display:flex;justify-content:center;gap:clamp(12px,2vw,26px)}
.marquee__col{width:clamp(120px,15vw,210px);overflow:hidden}
.marquee__col--wide{width:clamp(140px,16vw,230px)}
.marquee__col--far{filter:blur(3px);opacity:.3;transform:scale(.9)}
.marquee__col--near{filter:blur(1.2px);opacity:.55;transform:scale(.96)}
.marquee__track{animation:colMove 26s linear infinite}
.marquee__col:nth-child(1) .marquee__track{animation-duration:34s}
.marquee__col:nth-child(2) .marquee__track{animation-duration:26s;animation-direction:reverse}
.marquee__col:nth-child(3) .marquee__track{animation-duration:20s}
.marquee__col:nth-child(4) .marquee__track{animation-duration:30s;animation-direction:reverse}
.marquee__col:nth-child(5) .marquee__track{animation-duration:38s}
.marquee__item{
  height:clamp(70px,8vw,110px);margin-bottom:20px;
  border:1px solid rgba(0,0,255,.18);border-radius:var(--r-card);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font:400 10px/1 var(--mono);letter-spacing:1.5px;color:var(--grey);
}
.marquee__col--far .marquee__item{border-color:rgba(0,0,255,.14);color:var(--grey-2)}
.marquee__col--wide .marquee__item{
  height:clamp(78px,8.5vw,120px);
  border:1.5px solid rgba(0,0,255,.35);background:var(--white);
  font-weight:700;font-size:11px;color:var(--blue);
  box-shadow:0 8px 30px rgba(0,0,255,.1);
}
.marquee__fade{position:absolute;left:0;right:0;height:110px;pointer-events:none}
.marquee__fade--top{top:0;background:linear-gradient(var(--white),transparent)}
.marquee__fade--bottom{bottom:0;background:linear-gradient(transparent,var(--white))}
.partners__foot{text-align:center;margin-top:40px;position:relative;z-index:2}

/* --------------------------------------------------------------------------
   15 · Conversion finale
   -------------------------------------------------------------------------- */
.final{
  position:relative;
  padding:clamp(60px,8vw,110px) var(--pad-x);
  text-align:center;background:var(--navy);overflow:hidden;
}
.final__sym{
  position:absolute;right:-120px;bottom:-160px;
  width:min(46vw,520px);opacity:.18;pointer-events:none;
}
.final__kicker{
  font:700 clamp(10.5px,1.1vw,13px)/1 var(--mono);letter-spacing:3px;
  color:var(--orange);position:relative;margin-bottom:16px;
}
.final__title{
  font:800 clamp(28px,4vw,46px)/1.1 var(--sans);letter-spacing:-1px;
  text-transform:uppercase;color:#fff;position:relative;margin-bottom:32px;
}
.final .ctas{justify-content:center;margin-bottom:40px;position:relative}

/* --------------------------------------------------------------------------
   16 · Formulaires
   -------------------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:18px;max-width:620px}
.form--inline{flex-direction:row;align-items:stretch;gap:0;width:min(460px,100%);margin-inline:auto}
.form--inline .field{flex:1;position:relative;gap:0}
.form--inline input{
  height:100%;border-right:none;border-radius:var(--r-cta) 0 0 var(--r-cta);
}
/* l'erreur ne doit pas pousser le bouton : elle se pose sous le champ */
.form--inline .field__error{position:absolute;top:100%;left:0;margin-top:6px}
.form--inline .cta{border-radius:0 var(--r-cta) var(--r-cta) 0;white-space:nowrap}
.footer .form--inline{width:100%;margin-inline:0}

.field{display:flex;flex-direction:column;gap:7px;text-align:left}
.field label{font:700 11px/1 var(--mono);letter-spacing:1.5px;color:var(--grey)}

input,textarea{
  font:400 14px/1.5 var(--sans);color:var(--ink);
  background:var(--white);
  border:1px solid var(--line-3);border-radius:var(--r-cta);
  padding:13px 16px;width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
input::placeholder,textarea::placeholder{color:var(--grey-2)}
input:focus,textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,0,255,.12);
}
textarea{resize:vertical;min-height:120px}

.field.is-error input,.field.is-error textarea{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,102,54,.15)}
.field__error{font-size:12.5px;color:var(--orange);display:none}
.field.is-error .field__error{display:block}

.form__status{font-size:13.5px;line-height:1.5;color:var(--grey);min-height:1.2em}
.form__status.is-success{color:var(--blue);font-weight:600}
.form__status.is-error{color:var(--orange);font-weight:600}

/* variante sur fond navy */
.section--navy .field label{color:rgba(255,255,255,.7)}
.section--navy input,.section--navy textarea,
.final input{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.section--navy input::placeholder,.section--navy textarea::placeholder,
.final input::placeholder{color:rgba(255,255,255,.7)}
.section--navy input:focus,.section--navy textarea:focus,
.final input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.2)}
.section--navy .form__status{color:rgba(255,255,255,.75)}
.section--navy .form__status.is-success{color:#fff}

/* --------------------------------------------------------------------------
   17 · Pied de page
   -------------------------------------------------------------------------- */
.footer{
  background:var(--white);
  border-top:1px solid var(--line);
  padding:56px var(--pad-x) 28px;
}
.footer__grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:40px;
  padding-bottom:36px;border-bottom:1px solid rgba(0,0,255,.1);
}
.footer__brand{display:flex;flex-direction:column;gap:14px}
.footer__brand img{height:50px;width:auto;align-self:flex-start}
.footer__baseline{font:700 11px/1.5 var(--mono);letter-spacing:2.5px;color:var(--grey)}
.footer__social{display:flex;gap:10px}
.footer__social a{
  width:34px;height:34px;border:1px solid var(--line-3);border-radius:var(--r-cta);
  display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--mono);color:var(--blue);text-decoration:none;
}
.footer__social a:hover{border-color:var(--orange);color:var(--orange)}
.footer__title{font:700 11px/1 var(--mono);letter-spacing:2px;color:var(--orange);margin-bottom:12px}
.footer__list{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:2.2;color:var(--grey)}
.footer__list a{color:var(--grey);text-decoration:none}
.footer__list a:hover{color:var(--blue)}
.footer__legal{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;
  font-size:12px;color:var(--grey-2);
}
.footer__legal a{color:var(--grey-2);text-decoration:none}
.footer__legal a:hover{color:var(--blue)}

/* --------------------------------------------------------------------------
   18 · Hero de page intérieure
   -------------------------------------------------------------------------- */
.pagehero{
  position:relative;overflow:hidden;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:clamp(52px,7vw,96px) var(--pad-x) clamp(44px,6vw,80px);
}
.pagehero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(0,0,255,.035) 0,rgba(0,0,255,.035) 1px,transparent 1px,transparent 96px),
    repeating-linear-gradient(90deg,rgba(0,0,255,.035) 0,rgba(0,0,255,.035) 1px,transparent 1px,transparent 96px);
}
.pagehero > *{position:relative;z-index:1}
.pagehero h1{
  font:800 clamp(34px,5vw,60px)/1.05 var(--sans);
  letter-spacing:-1.5px;text-transform:uppercase;color:var(--ink);
}
.pagehero .lead{margin-top:18px}

/* --------------------------------------------------------------------------
   19 · Timeline de la journée
   -------------------------------------------------------------------------- */
.timeline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:56px}
.timeline__period{--period-color:var(--blue);display:grid;grid-template-rows:auto 1fr;gap:24px;min-width:0}
.timeline__period--pm{--period-color:#d92d3a}
.timeline__segment{display:grid;grid-template-columns:16px minmax(0,1fr) 16px;row-gap:10px;align-items:center}
/* Shared grid cells place each dot centre exactly at a line endpoint. */
.timeline__line{grid-area:1 / 1 / 2 / 4;height:3px;margin-inline:8px;background:var(--period-color)}
.timeline__dot{
  grid-row:1;width:16px;height:16px;border-radius:50%;background:var(--white);
  border:3px solid var(--period-color);z-index:1;
}
.timeline__dot--start,.timeline__hour--start{grid-column:1}
.timeline__dot--end,.timeline__hour--end{grid-column:3}
.timeline__hour{grid-row:2;justify-self:center;font:700 13px/1 var(--mono);letter-spacing:1px;color:var(--ink)}
.timeline__block{
  border-radius:var(--r-card);padding:24px 28px;
  display:flex;flex-direction:column;gap:6px;
}
.timeline__block--am{background:rgba(0,0,255,.06);border:1px solid var(--line-2)}
.timeline__block--pm{background:rgba(242,102,54,.07);border:1px solid var(--line-o)}
.timeline__block h3{font:800 19px/1.25 var(--sans);letter-spacing:-.3px}
.timeline__block p{font-size:13.5px;line-height:1.55;color:var(--grey)}

/* --------------------------------------------------------------------------
   20 · Blocs alternés média + texte
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
/* colonne image resserrée : évite le vide entre un portrait étroit et le texte */
.split--portrait{grid-template-columns:minmax(260px,420px) 1fr}
.split--reverse .split__media{order:2}
/* visuel d'un bloc alterné — même gabarit que le placeholder .ph--media qu'il remplace */
.split__img{
  width:100%;
  height:clamp(240px,32vw,400px);
  object-fit:cover;
  border-radius:var(--r-card);
  border:1px solid var(--line-2);
  background:var(--bg);
}
.split__body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.split__body p{font-size:15px;line-height:1.65;color:var(--grey)}
.split__body p strong{color:var(--ink)}

/* --------------------------------------------------------------------------
   21 · Placeholders (visuels et logos non fournis)
   -------------------------------------------------------------------------- */
.ph{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;
  background:#E4E7F0;
  border:1px dashed var(--line-3);border-radius:var(--r-card);
  color:var(--grey);font:400 12px/1.5 var(--mono);letter-spacing:1px;
  overflow:hidden;
}
.ph::before,.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px));
  pointer-events:none;
}
.ph::after{background:linear-gradient(to bottom right,transparent calc(50% - 1px),var(--line) 50%,transparent calc(50% + 1px))}
.ph span{position:relative;z-index:1;background:#E4E7F0;padding:6px 10px}
.ph--logo{min-height:96px;font-size:11px}

/* --------------------------------------------------------------------------
   22 · Badges de recommandation (arbitrage client)
   -------------------------------------------------------------------------- */
.reco{
  display:inline-flex;align-items:center;gap:6px;
  font:700 10px/1 var(--mono);letter-spacing:1.5px;text-transform:uppercase;
  color:var(--orange);border:1px solid var(--line-o);border-radius:2px;
  padding:5px 9px;vertical-align:middle;
}
.reco::before{content:"◆";font-size:8px}

/* --------------------------------------------------------------------------
   23 · Niveaux de partenariat
   -------------------------------------------------------------------------- */
.tier{margin-bottom:56px}
.tier__head{
  display:flex;align-items:center;gap:16px;margin-bottom:24px;
}
.tier__label{
  font:700 12px/1 var(--mono);letter-spacing:2.5px;text-transform:uppercase;color:var(--blue);
}
.tier__rule{flex:1;height:1px;background:var(--line)}
.tier--premium .grid-logos{grid-template-columns:repeat(2,1fr);max-width:840px}
.tier--premium .ph--logo{min-height:200px;font-size:12px}
.tier--officiel .grid-logos{grid-template-columns:repeat(4,1fr)}
.tier--officiel .ph--logo{min-height:120px}
.tier--institutionnel .grid-logos{grid-template-columns:repeat(5,1fr)}
.grid-logos{display:grid;gap:20px}

/* --------------------------------------------------------------------------
   24 · Sessions à annoncer
   -------------------------------------------------------------------------- */
.session{
  border:1px dashed var(--line-3);border-radius:var(--r-card);
  background:var(--bg);padding:28px 24px;
  display:flex;flex-direction:column;gap:10px;min-height:180px;
  justify-content:center;text-align:center;
}
.session__tag{font:700 10.5px/1 var(--mono);letter-spacing:2px;color:var(--grey-2)}
.session__title{font:700 16px/1.3 var(--sans);color:var(--grey)}

/* --------------------------------------------------------------------------
   25 · Apparition au défilement
   -------------------------------------------------------------------------- */
/* état par défaut = visible : sans JS (ou si le script échoue) aucun bloc
   ne peut rester masqué. La classe .js est posée en <head> avant le rendu. */
.js [data-reveal]{opacity:0;transform:translateY(26px)}
.js [data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------------------
   26 · Points de rupture
   -------------------------------------------------------------------------- */
/* Tablette — la source repliait toutes les grilles en 1 colonne dès 1080 px, ce qui
   donnait des cartes pleine largeur illisibles autour de 1024. On ne replie ici que
   les grilles réellement trop serrées ; le reste tient jusqu'à 900. */
@media (max-width:1080px){
  .gorg{grid-template-columns:1fr;gap:32px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tier--officiel .grid-logos{grid-template-columns:repeat(3,1fr)}
  .tier--institutionnel .grid-logos{grid-template-columns:repeat(4,1fr)}
  .portrait{max-width:none}
}

@media (max-width:900px){
  .g3,.g2,.g4{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .split,.split--reverse,.split--portrait{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .timeline{grid-template-columns:1fr;row-gap:32px}

  .nav{display:none}
  .header__actions .link-partner{display:none}
  .burger{display:flex}

  /* mobile : le texte occupe presque toute la largeur, un dégradé n'aiderait pas.
     Voile plat abaissé de .68 à .58 — le H1 reste à 5,75 de contraste (seuil 3). */
  .hero__veil{background:rgba(255,255,255,.58)}
  .sym{right:-24vw;top:6%;transform:none;width:70vw;height:70vw;opacity:.85}

  .band{flex-direction:column}
  .band > div + div{border-left:none;border-top:1px solid var(--line)}

  .marquee__col--far{display:none}

  .ctas > .cta{width:100%;align-items:center;text-align:center}
  .cta--dual{align-items:center;text-align:center}

  .footer__grid{grid-template-columns:1fr;gap:28px}

  .countdown{gap:14px;padding:16px 18px;width:auto;justify-content:space-between}

  .tier--premium .grid-logos,
  .tier--officiel .grid-logos,
  .tier--institutionnel .grid-logos{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:600px){
  .form--inline{flex-direction:column;width:100%}
  .form--inline input{border-right:1px solid var(--line-3);border-radius:var(--r-cta)}
  .form--inline .cta{border-radius:var(--r-cta);margin-top:10px;width:100%}
  .final input{border-right-color:rgba(255,255,255,.4)}
}

/* --------------------------------------------------------------------------
   27 · Mouvement réduit
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{opacity:1 !important;transform:none !important}
  .cta:hover{transform:none}
  .marquee__track{animation:none}
  .sym__sweep,.sym__ring--dashed{animation:none}
}