/* ===================================================================
   JEUNESSE 2027 — habillage web
   DA : typo CyGrotesk Grand massive, fond navy, slogans SVG,
   formes polygones angulaires, palette Gen-Z (vert/rose/acid/jaune)
   =================================================================== */

/* ---------- fonts ---------- */
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandLight.otf") format("opentype"); font-weight:300; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandRegular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandMedium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandBold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandHeavy.otf") format("opentype"); font-weight:800; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../fonts/CyGroteskStd-GrandBlack.otf") format("opentype"); font-weight:900; font-display:swap; }

/* ---------- tokens (palette DA exacte) ---------- */
:root{
  --navy:   #1a0a3d;     /* fond principal */
  --navy-2: #241452;     /* cartes / panneaux */
  --navy-3: #30206b;     /* hover */
  --green:  #11d761;     /* vert vif */
  --pink:   #ff385f;     /* rose flashy */
  --acid:   #c8f402;     /* vert citrine */
  --yellow: #f3ff47;     /* jaune */
  --pink-2: #f46ebd;     /* rose clair */
  --white:  #ffffff;

  --ink:    var(--navy); /* alias : plus de noir, on tape dans le navy */

  --max:    1440px;
  --pad:    clamp(20px, 4vw, 64px);
  --radius: 18px;

  --t-1:    clamp(14px, 1vw + 8px, 16px);
  --t-h3:   clamp(24px, 1.6vw + 12px, 34px);
  --t-h2:   clamp(35px, 6.4vw, 90px);
  --t-h1:   clamp(64px, 12.5vw, 200px);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:"CyGroteskGrand","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:500; font-size:var(--t-1); line-height:1.45;
  color:var(--white); background:var(--navy);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
  text-wrap:balance;
}
img,svg{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:.88; letter-spacing:-.02em; }
p{ margin:0 0 1em; }
.sr,.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; background:var(--acid); color:var(--navy); padding:.5em 1em; z-index:9999; }
::selection{ background:var(--acid); color:var(--navy); }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:14px var(--pad);
  background:rgba(26,10,61,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.1);
  transition:box-shadow .3s ease;
}
.brand{ display:inline-flex; flex:0 0 auto; }
.brand a{ display:inline-flex; }
.brand-logo{ height:46px; width:auto; flex:0 0 auto; }
.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:clamp(8px,1vw,16px); }
.nav a{
  font-weight:700; font-size:11px; letter-spacing:.01em; text-transform:uppercase;
  padding:6px 2px; position:relative; color:var(--white); white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px;
  background:var(--acid); transform:translateX(-50%); transition:width .3s ease;
}
.nav a:hover::after{ width:100%; }
.nav-cta{ display:none; }   /* visible uniquement dans le burger */
.cta-mini{
  background:var(--acid); color:var(--navy);
  padding:10px 18px; border-radius:999px; font-weight:800; font-size:13px;
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .2s ease, background .2s ease;
}
.cta-mini:hover{ background:var(--green); transform:translateY(-1px); }
.burger{ display:none; background:none; border:0; padding:8px; }
.burger span{ display:block; width:24px; height:2px; margin:5px 0; background:var(--white); }

/* burger dès que le menu ne tient plus en entier ; le bouton Signer reste visible, à gauche du burger */
@media (max-width:1300px){
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:var(--navy); border-bottom:1px solid rgba(255,255,255,.12);
    padding:18px var(--pad) 26px;
  }
  .nav.is-open{ display:block; }
  .nav ul{ flex-direction:column; gap:14px; align-items:flex-start; }
  .nav a{ font-size:18px; }
  .cta-mini{ display:none; }                      /* le bouton Signer passe dans le burger */
  .burger{ display:block; margin-left:auto; }
  .nav-cta{ display:block; margin-top:8px; }
  .nav-cta a{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--acid); color:var(--navy); font-size:15px; font-weight:800;
    padding:12px 22px; border-radius:999px; text-transform:uppercase;
  }
  .nav-cta a::after{ display:none; }
}

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative; min-height:100svh; overflow:hidden;
  padding:120px var(--pad) 60px;
  display:flex; flex-direction:column;
  background:var(--navy);
}
/* formes polygones décoratives en fond du hero */
.hero-shapes{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.9;
}
.hero-shapes svg{ position:absolute; height:128%; top:-14%; width:auto; }
.hero-shapes .shapes-right{ right:-8%; }
.hero-shapes .shapes-left{ left:-26%; transform:scaleX(-1); opacity:.4; }
.hero-shapes .sh-a{ fill:var(--green); opacity:.16; }
.hero-shapes .sh-b{ fill:var(--navy-2); opacity:.9; }
.hero-shapes .sh-c{ fill:var(--pink); opacity:.14; }
.hero-shapes .sh-d{ fill:var(--acid); opacity:.14; }
@media (max-width:680px){ .hero-shapes{ opacity:.55; } .hero-shapes .shapes-left{ display:none; } }

.hero > *{ position:relative; z-index:1; }

.hero-meta{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white);
}
.dot{ width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(17,215,97,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(17,215,97,.55);} 70%{box-shadow:0 0 0 14px rgba(17,215,97,0);} 100%{box-shadow:0 0 0 0 rgba(17,215,97,0);} }

/* logo JEUNESSE 2027 — SVG animé (un mot à la fois, dissolution dans le fond, boucle).
   Le viewBox a des marges latérales transparentes pour la dissolution ; on annule la
   marge gauche pour réaligner les mots sur le bord gauche du hero. */
.hero-logo{
  --logoH:clamp(320px,52svh,600px);
  display:block; height:var(--logoH); width:auto; max-width:none;
  margin:10px 0 22px;

}

.hero-tag{ font-size:clamp(20px,2vw,30px); font-weight:500; max-width:24ch; line-height:1.15; margin:0 0 18px; color:var(--white); }

/* lien Instagram du collectif, sous la tagline */
.hero-insta{
  display:inline-flex; align-self:flex-start; align-items:center; gap:9px;
  margin:0 0 34px;
  padding:9px 17px 9px 14px;
  border:1.5px solid rgba(255,255,255,.4); border-radius:999px;
  color:var(--white); font-weight:700; font-size:15px; text-decoration:none;
  transition:color .25s ease, background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.hero-insta-ico{ display:block; }
.hero-insta:hover{ color:var(--navy); background:var(--acid); border-color:var(--acid); transform:translateY(-2px); }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 26px; border-radius:999px;
  font-weight:800; font-size:15px; text-transform:uppercase;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, color .25s ease, box-shadow .25s ease;
  border:2px solid transparent;
}
.btn:hover{ transform:translateY(-2px); }
.btn--primary{ background:var(--acid); color:var(--navy); }
.btn--primary:hover{ background:var(--green); box-shadow:0 12px 28px rgba(17,215,97,.35); }
.btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn--ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }
.btn--white{ background:var(--white); color:var(--navy); }
.btn--white:hover{ background:var(--acid); }
.btn-arrow{ transition:transform .3s ease; }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.hero-bottom{
  margin-top:auto; padding-top:28px;
  display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-end;
  border-top:1px solid rgba(255,255,255,.18);
}
.counter-num{ display:block; font-size:clamp(40px,5vw,72px); font-weight:900; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--acid); }
.counter-label{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.loading{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; min-width:280px; max-width:420px; }
.loading-label,.loading-pct{ font-weight:800; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.loading-bar{ height:8px; background:rgba(255,255,255,.16); border-radius:999px; overflow:hidden; }
.loading-fill{ display:block; height:100%; width:0; background:var(--green); transition:width 1.6s cubic-bezier(.2,.8,.2,1); }

/* =====================================================
   MARQUEE
   ===================================================== */
.marquee{ overflow:hidden; padding:18px 0; border-block:2px solid var(--navy); }
.marquee--green{ background:var(--green); color:var(--navy); }
.marquee--pink{ background:var(--pink); color:var(--white); }
.marquee--acid{ background:var(--acid); color:var(--navy); }
.marquee-track{
  display:flex; gap:32px; align-items:center; white-space:nowrap;
  animation:scroll 32s linear infinite;
  font-weight:900; font-size:clamp(28px,4vw,56px); letter-spacing:-.01em; text-transform:uppercase; line-height:1; width:max-content;
}
.marquee--pink .marquee-track{ animation-duration:26s; }
.marquee-dot{ font-size:.5em; transform:translateY(-.2em); }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } .dot{ animation:none; } }

/* =====================================================
   SECTIONS
   ===================================================== */
.section{ padding:clamp(70px,9vw,140px) var(--pad); position:relative; }
.section--navy{ background:var(--navy); color:var(--white); }
.section--green{ background:var(--green); color:var(--navy); }
.section--pink{ background:var(--pink); color:var(--white); }

.eyebrow{
  display:inline-block; font-weight:800; font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border:1.5px solid currentColor; border-radius:999px; margin-bottom:28px;
}
.section-title{ font-size:var(--t-h2); text-transform:uppercase; line-height:.85; letter-spacing:-.02em; max-width:14ch; font-weight:600; }
.section-lede{ margin-top:28px; font-size:clamp(17px,1.2vw,22px); line-height:1.4; max-width:60ch; font-weight:500; }
.section--navy .section-lede{ color:rgba(255,255,255,.85); }

.hl{ display:inline-block;  transform:translateY(-.02em); }
.hl--green{ color:var(--green); }
.hl--acid{ color:var(--acid); }
.hl--pink{ color:var(--pink); }
.hl--white{ color:var(--white); }

/* ----- mouvement ----- */
.grid-2{ margin-top:60px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(40px,6vw,90px); align-items:start; }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; } }
.lede p{ font-size:clamp(17px,1.2vw,22px); line-height:1.45; font-weight:500; }
.section--navy .lede strong{ color:var(--acid); font-weight:800; }
.pillars{ display:grid; gap:18px; }
.pillars li{
  position:relative; border-radius:var(--radius); padding:28px 28px 26px;
  display:grid; grid-template-columns:auto 1fr; gap:8px 22px; align-items:start;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  overflow:hidden; isolation:isolate;
}
.pillars li:nth-child(1){ background:var(--navy-2); color:var(--white); }
.pillars li:nth-child(2){ background:var(--green); color:var(--navy); }
.pillars li:nth-child(3){ background:var(--pink); color:var(--white); }
.pillars li:hover{ transform:translate(-4px,-4px); }
.pillar-num{ grid-row:1 / span 2; font-weight:900; font-size:46px; line-height:1; }
.pillars li:nth-child(1) .pillar-num{ color:var(--acid); }
.pillars li:nth-child(2) .pillar-num{ color:var(--navy); }
.pillars li:nth-child(3) .pillar-num{ color:var(--acid); }
.pillars h3{ font-size:var(--t-h3); text-transform:uppercase; font-weight:900; }
.pillars p{ margin:6px 0 0; font-weight:500; opacity:.92; }

/* ----- propositions ----- */
/* ---- 10 priorités : une seule grande forme navy-2, numéros en couleur ---- */
.props{ position:relative; margin-top:clamp(40px,6vw,72px); }
.props-shape{
  position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  top:calc(-1 * clamp(34px,5vw,80px)); bottom:calc(-1 * clamp(34px,5vw,80px));
  background:var(--navy-2);
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
}
.props-grid{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px,4vw,52px) clamp(40px,6vw,96px);
  padding:clamp(56px,8vw,104px) clamp(24px,4vw,64px);
}
.prop-col{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(28px,4vw,48px); }
.props .prop{
  display:grid; grid-template-columns:auto 1fr; column-gap:clamp(16px,2vw,28px); row-gap:8px;
  background:none; border:0; border-radius:0; padding:0; min-height:0;
  -webkit-clip-path:none; clip-path:none; overflow:visible; isolation:auto; transition:none;
}
.props .prop::before{ display:none; }
.props .prop:hover{ transform:none; }

/* numéro et titre sur la même ligne de grille, centrés verticalement l'un sur l'autre
   (le plus court se cale au milieu du plus haut) ; le texte vient sur la 2e ligne, aligné sous le titre */
/* colonne numéro à largeur fixe + chiffres alignés à droite → tous les titres démarrent au même x */
.props .prop-num{ grid-column:1; grid-row:1; align-self:center; display:block; width:2.1em; text-align:right; color:rgba(255,255,255,.42); font-weight:900; font-size:clamp(40px,4.4vw,72px); line-height:.82; letter-spacing:-.04em; margin:0; }
.props .prop-title{ grid-column:2; grid-row:1; align-self:center; color:var(--white); font-size:clamp(16px,1.6vw,22px); text-transform:uppercase; font-weight:600; line-height:1.05; margin:0; }
.props .prop-text{ grid-column:2; grid-row:2; color:var(--white); opacity:.8; font-weight:500; font-size:clamp(14px,1vw,16px); line-height:1.35; margin:0; }

@media (max-width:680px){
  .props-grid{ grid-template-columns:1fr; }
}
.props-foot{ margin-top:50px; }

/* =====================================================
   SLOGANS (posts insta @jeunesse2027)
   ===================================================== */
.slogans{ background:var(--navy); }
.slogans-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.slogans-handle{ font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--acid); font-size:clamp(15px,1.4vw,20px); }
.slogans-grid{
  margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
@media (max-width:880px){ .slogans-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .slogans-grid{ grid-template-columns:1fr; } }
.slogan-card{
  position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1;
  transform:translateY(28px) scale(.96); opacity:0;
  transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s ease, box-shadow .3s ease;
}
.slogan-card.is-in{ transform:none; opacity:1; }
.slogan-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.slogan-card:hover{ box-shadow:0 20px 50px -20px rgba(0,0,0,.6); }
.slogan-card:hover img{ transform:scale(1.05) rotate(-1deg); }

/* =====================================================
   MANIFESTE
   ===================================================== */
.section--manifeste{
  background:var(--navy); color:var(--white);
  padding-block:clamp(110px,14vw,200px); text-align:left;
  background-image:
    radial-gradient(circle at 12% 10%, rgba(17,215,97,.16), transparent 35%),
    radial-gradient(circle at 90% 80%, rgba(255,56,95,.14), transparent 40%);
}
.manif{ font-size:var(--t-h2); text-transform:uppercase; line-height:.92; letter-spacing:-.02em; max-width:18ch; font-weight:600; margin-top:14px; }
.manif-line{ display:block; }
.manif-line--strike{ position:relative; color:rgba(255,255,255,.42); }
.manif-line--accent{ color:var(--green); }
.manif-sig{ margin-top:36px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:14px; color:rgba(255,255,255,.7); }

/* ----- texte intégral du manifeste (sous la forme d'accroche) ----- */
.manifeste-text{
  max-width:64ch;
  margin:clamp(56px,8vw,110px) auto 0;
  padding-inline:clamp(2px,2vw,20px);
}
.manif-intro{
  margin:0 0 clamp(34px,4.5vw,56px);
  font-size:clamp(20px,1.9vw,30px); line-height:1.28; font-weight:600;
}
.manif-intro strong{ color:var(--acid); font-weight:800; }
.manif-body{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,28px); }
.manif-body p{
  margin:0; font-size:clamp(16px,1.18vw,19px); line-height:1.62;
  font-weight:400; color:rgba(255,255,255,.84);
}
.manif-body strong{ color:var(--white); font-weight:700; }
/* .hl en flux normal dans le corps : évite la virgule orpheline après « Jeunesse 2027 » */
.manif-body .hl{ display:inline; transform:none; }
.manif-tag{ font-weight:700; color:var(--white); }
.manif-quote{
  margin:clamp(44px,5.5vw,72px) 0; padding-left:clamp(20px,3vw,34px);
  border-left:4px solid var(--pink);
  font-size:clamp(22px,2.6vw,36px); line-height:1.14; letter-spacing:-.01em;
  font-weight:800; text-transform:uppercase;
}
.manif-finale{
  margin:clamp(52px,6.5vw,88px) 0 0;
  font-size:clamp(42px,8vw,104px); line-height:.88; letter-spacing:-.035em;
  font-weight:800; text-transform:uppercase;
}
.manif-finale-line{ display:block; }
.manif-finale-line--accent{ color:var(--green); }
.manifeste-text .manif-sig{ margin-top:clamp(22px,3vw,36px); }

/* =====================================================
   CHIFFRES
   ===================================================== */
.stats .section-title{ max-width:18ch; margin-top:6px; }
/* grande forme bord à bord derrière les chiffres (identique à méthodologie) */
.stats-wrap{ position:relative; margin-top:clamp(40px,6vw,72px); }
.stats-shape{
  position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  top:calc(-1 * clamp(34px,5vw,80px)); bottom:calc(-1 * clamp(34px,5vw,80px));
  background:var(--navy-2);
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
}
.stats-grid{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(32px,5vw,64px) clamp(20px,3vw,44px); padding:clamp(56px,8vw,104px) clamp(24px,4vw,64px); }
@media (max-width:860px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){ .stats-grid{ grid-template-columns:1fr; } }
/* plus de carte ni de forme : juste le chiffre + le label sur le fond navy */
.stat{
  background:none; padding:0; min-height:0; border:0; border-radius:0;
  -webkit-clip-path:none; clip-path:none; overflow:visible; isolation:auto;
  display:flex; flex-direction:column; gap:12px; transition:none;
}
.stat:hover{ transform:none; }
.stat-num{ font-weight:900; font-size:clamp(48px,5vw,82px); line-height:.85; letter-spacing:-.04em; display:block; }
.stat-unit{ font-size:.45em; letter-spacing:0; vertical-align:.12em; }
.stat p{ margin:0; color:var(--white); opacity:.82; font-weight:500; font-size:clamp(15px,1.1vw,18px); line-height:1.4; max-width:30ch; }

/* chiffres en couleurs de la charte */
.stats-grid .stat:nth-child(1) .stat-num{ color:var(--green); }
.stats-grid .stat:nth-child(2) .stat-num{ color:var(--acid); }
.stats-grid .stat:nth-child(3) .stat-num{ color:var(--pink); }
.stats-grid .stat:nth-child(4) .stat-num{ color:var(--yellow); }
.stats-grid .stat:nth-child(5) .stat-num{ color:var(--pink-2); }
.stats-grid .stat:nth-child(6) .stat-num{ color:var(--green); }
.stats-grid .stat:nth-child(7) .stat-num{ color:var(--acid); }
.stats-grid .stat:nth-child(8) .stat-num{ color:var(--pink); }
.stat p em{ font-style:normal; opacity:.55; font-size:.86em; }
.stat p em a{ color:inherit; text-decoration:underline; text-underline-offset:2px; transition:color .2s ease; }
.stat p em a:hover{ color:var(--acid); }

/* =====================================================
   FORME ANGULAIRE DES ENCARTS
   On remplace les coins arrondis par une des formes polygonales des SVG
   (forme04 d'OK-07/OK-09) : bord gauche plein, pointe à droite.
   ===================================================== */
:root{
  /* forme04 normalisée (slant 28.93% / 71.07%) */
  --forme: polygon(0 0, 100% 28.93%, 100% 71.07%, 0 100%);
}
.pillars li,
.prop{
  border-radius:0;
  -webkit-clip-path:var(--forme);
          clip-path:var(--forme);
}
/* on dégage la pointe droite pour ne pas rogner le texte */
.pillars li{ padding-right:clamp(34px,5vw,64px); }
.prop{ padding-right:clamp(40px,5vw,70px); }
.prop--big{ padding-right:clamp(60px,8vw,140px); }

/* =====================================================
   CTA — Rejoindre
   ===================================================== */
.section--cta{
  background:var(--navy); color:var(--white);
  text-align:left; padding-block:clamp(100px,12vw,180px); position:relative; overflow:hidden;
}
.cta-title{ font-size:var(--t-h2); text-transform:uppercase; line-height:.85; letter-spacing:-.02em; font-weight:600; margin:8px 0 28px; }
.cta-title span{ display:block; }
.cta-lede{ font-size:clamp(17px,1.3vw,22px); max-width:60ch; color:rgba(255,255,255,.85); line-height:1.45; margin-bottom:40px; }
.signup{ display:flex; gap:10px; flex-wrap:wrap; background:var(--white); padding:10px; border-radius:999px; max-width:620px; }
.signup input{ flex:1; min-width:0; border:0; outline:0; background:transparent; padding:0 18px; font:inherit; font-weight:600; font-size:17px; color:var(--navy); }
.signup input::placeholder{ color:rgba(26,10,61,.5); }
.signup button{ background:var(--navy); color:var(--white); border:0; border-radius:999px; padding:16px 28px; font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:14px; position:relative; transition:background .25s ease, color .25s ease; }
.signup button:hover{ background:var(--green); color:var(--navy); }
.signup-done{ display:none; }
.signup.is-sent{ background:var(--green); }
.signup.is-sent input{ color:var(--navy); }
.signup.is-sent button{ background:var(--navy); color:var(--green); }
.signup.is-sent .signup-default{ display:none; }
.signup.is-sent .signup-done{ display:inline; }
.socials{ margin-top:46px; display:flex; flex-wrap:wrap; gap:22px 32px; }
.socials a{ font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:15px; border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .25s ease, color .25s ease; }
.socials a:hover{ color:var(--acid); border-color:var(--acid); }

/* =====================================================
   FOOTER amU (style maquette, couleurs DA)
   ===================================================== */

/* =============================================================================
FOOTER
========================================================================== */

/* Infuse footer */


.footer-infuse {
    display: flex;
    flex-direction: row;
    font-family: 'Luciole-Bold', sans-serif;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    gap: 10px;
    margin-top: 50px;
    flex-wrap: wrap;
}

.footer-infuse-inside {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.blocanim-footer {
    width: 40px;
    z-index: 200;
    right: 0px;
    top: 2px;
}

.footer-infuse a {
    display: flex;
    align-items: center;

    position: relative;
    padding: 10px;
    height: 25px;
    border: 1px dotted #fff;
    border-radius: 4px;
    color: #fff;
    text-transform: none;
    text-decoration: none;
    background-color: none;
    transition: all 1s ease;
}

.footer-infuse a:hover {
    background-color: #fff;
    color: #2d2d3d;
}




.footer a:hover .blocanim-contour-blanc {
    fill: none;
    stroke: #2d2d3d;
}

.footer a:hover .blocanim-fond-blanc {
    fill: #2d2d3d;
    stroke: #2d2d3d;
}



/* Styles généraux pour le footer */
.footer {
    position: relative;
    font-size: 12px;
    /* Taille de police plus petite */
    color: white;
    /* Texte blanc */
    display: flex;
    flex-direction: column;
    /* Organisation verticale des sections */
    margin-top: 200px;
    background:var(--navy);
}

/* Conteneur principal du footer */
.footer-haut {
    display: flex;
    flex-direction: column;
    /* Sections organisées verticalement */
    gap: 20px;
    /* Espacement entre les sections */
    padding: 20px;
    /* Espacement interne */
    min-height: 500px;
}

/* Section "Nous suivre" et flèche de retour */
.rs {
    display: flex;
    /* Active Flexbox */
    align-items: center;
    /* Aligne les éléments verticalement */
    justify-content: space-between;
    /* Sépare les réseaux sociaux et la flèche */
    margin-top: 50px;
    transition: filter 0.3s ease;
}

/* Aligner les icônes des réseaux sociaux */
.rs div {
    display: flex;
    /* Aligne horizontalement le texte et les icônes */
    align-items: center;
    /* Centre verticalement */
}

/* Aligner les icônes des réseaux sociaux */
.rs div div {
    margin-right: 20px;
    text-align: left;
}



.rs a svg {
    fill: #ffffff;
    /* couleur réelle au hover */
    height: 20px;
    /* Taille des icônes */
    width: 20px;
    margin: 0 2px;
    /* Espacement horizontal entre les icônes */
    border: 1px solid white;
    /* Bordure initiale */
    transition: filter 0.5s ease;
    align-content: center;
}




.rs a:hover svg {
    fill: var(--green);
    /* couleur réelle au hover */
    transition: fill 0.3s ease;
    border: 1px solid var(--green);
    /* Bordure initiale */

}

#fleche-retour {
    animation: fleche-retour;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

@keyframes fleche-retour {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-10%);
    }

    100% {
        transform: translateY(0);
    }
}




/* Séparateur */
.footer-separateur {
    border-bottom: 0.5px solid white;
    /* Ligne blanche */
    width: 100%;
    /* Occupe toute la largeur */
}

/* Footer menu */
.footer-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
}

/* Les 3 liens légaux restent en ligne */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px 24px;
}

.footer-menu .link-underlined a {
    position: relative;
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Ligne centrée */
.footer-menu .link-underlined a::after {
    content: "";
    position: absolute;
    left: 50%;
    /* point d’ancrage central */
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transform: translateX(-50%);
    /* repositionne exactement au centre */
    transition: width 0.3s ease;
}

/* Animation : la ligne s’étend vers les côtés */
.footer-menu .link-underlined:hover a::after {
    width: 100%;
    /* s’étend des deux côtés à partir du centre */
}




/* Mention institutionnelle sous les liens légaux (même police que le menu) */
.footer-menu .footer-mention {
    flex-basis: 100%;
    width: 100%;
    margin: 0.7rem 0 0;
    max-width: 760px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}
.footer-menu .footer-mention a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}
.footer-menu .footer-mention a:hover {
    color: var(--acid, #c8f402);
}

.footer-menu div img {
    width: 100px;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

/* Effet au survol du logo (optionnel, remplace le soulignement) */
.footer-menu div a:hover img {
    transform: scale(1.05); /* Léger grossissement */
    opacity: 0.9;
}




/* Conteneur principal du footer */
.footer-bas {
    display: flex;
    gap: 20px;
    /* Espacement entre les sections */
}

.copyright {
    flex: 1;
    /* Laisse le texte prendre l'espace disponible */
    white-space: nowrap;
    /* Empêche le texte d’être coupé */
    display: flex;
    /* Active Flexbox pour le logo */
    align-items: flex-end;
    /* Positionne le logo en bas */
    height: auto;
    padding-left: 20px;
    padding-bottom: 20px;
}

/* Logo du footer */
.footer-logo {
    align-self: flex-end;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: auto;
    width: 100%;
    opacity: 0;
    transition: opacity .3s ease;
}

.footer-logo.active {
    opacity: 1;
}

.footer-logo img,
.footer-logo svg {
    width: 500px;
    height: auto;
    max-width: 100%;
}

.footer-logo-01 {
    fill:var(--navy);
}

.footer-logo-02 {
    fill: #fff;
}

.footer-logo.active #blocA,
.footer-logo.active #lettre_a {
    animation: footer-logo-translate 1s 0s 1 both;
}

.footer-logo.active #blocM,
.footer-logo.active #lettre_m {
    animation: footer-logo-translate 1s .3s 1 both;
}

.footer-logo.active #blocU,
.footer-logo.active #lettre_U {
    animation: footer-logo-translate 1s .6s 1 both;
}

@keyframes footer-logo-translate {
    0% {
        transform: translateY(200%)
    }

    100% {
        transform: translateY(0)
    }
}


.retour-top {
    transition: filter 0.3s ease;
}

.retour-top a {
    transition: filter 0.3s ease;
}
/* =============================================================================
RESPONSIVE FOOTER
========================================================================== */

@media only screen and (max-width: 800px) {

    .footer-infuse {
        flex-direction: column;

    }


}


@media only screen and (max-width: 700px) {

    /* Footer Menu — liens empilés sur mobile */
    .footer-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}



@media only screen and (max-width: 600px) {

    /* Conteneur principal du footer */
    .footer-bas {
        flex-direction: column;
        gap: 0px;
    }

    /* Logo image */
    .footer-logo svg {
        width: 100%;
        /* Responsive : ne dépasse pas le conteneur */
    }
}

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- responsive misc ---------- */
@media (max-width:520px){
  .hero{ padding-top:90px; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; }
  .loading{ width:100%; }
  .signup{ border-radius:18px; }
  .signup input{ width:100%; padding:14px 14px; }
}

/* =====================================================
   NOUVELLES SECTIONS (relève, manifeste forme, méthodo, médias, comité, partenaires)
   ===================================================== */
:root{ --forme-r: polygon(100% 0, 0 28.93%, 0 71.07%, 100% 100%); }

/* ----- carrousels de portraits (La relève / Comité) ----- */
.carousel{
  /* conteneur scrollable : défilement auto (piloté en JS) + scroll tactile au doigt */
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:none; margin-top:44px;
  /* marge verticale interne : le liseré de l'expert sélectionné (outline-offset) n'est pas rogné */
  padding-block:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel-track{ display:flex; gap:clamp(16px,2vw,28px); width:max-content; }
@media (prefers-reduced-motion:reduce){ .carousel-track{ flex-wrap:nowrap; } }

.person{ flex:0 0 auto; width:clamp(170px,20vw,240px); margin:0; }
.person-photo{
  display:block; width:100%; aspect-ratio:3/4; object-fit:cover;
  background:var(--c,var(--navy-2));
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
}
.person:nth-child(even) .person-photo{ -webkit-clip-path:var(--forme-r); clip-path:var(--forme-r); }
.person figcaption{ margin-top:14px; }
.person-name{ display:block; font-weight:600; text-transform:uppercase; font-size:15px; letter-spacing:-.01em; }
.person-meta{ display:block; font-size:13px; opacity:.72; margin-top:3px; line-height:1.3; }
.comite .person{ width:clamp(140px,15vw,196px); }
/* comité : portraits ronds — cadre rond FIXE, la photo zoome à l'intérieur */
.comite .person-frame{
  display:block; width:100%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; background:var(--navy-3);
}
.comite .person-photo,
.comite .person:nth-child(even) .person-photo{
  -webkit-clip-path:none; clip-path:none; border-radius:0;
  width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;
  background:var(--navy-3);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.comite .person:hover .person-photo,
.comite .person:focus-visible .person-photo{ transform:scale(1.1); }
.comite figcaption{ text-align:center; }
.comite .person-meta{ opacity:.78; }

/* ----- LA RELÈVE : photo centrée, infos centrées dessous (MÊME layout desktop & responsive) ----- */
.releve{
  position:relative; margin-top:clamp(40px,6vw,72px);
  --c:var(--yellow);                       /* forme géométrique jaune (fixe) */
  --photoH:clamp(300px,40vw,520px);        /* hauteur des portraits */
}

/* bloc de couleur : démarre sur le bas de la photo, bord à bord, bas plat.
   z-index:1 → la forme passe DEVANT la photo (la photo émerge de derrière) */
.releve-bg{
  position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  top:calc(var(--photoH) * .58); bottom:0; z-index:1;
  background:var(--c);
  -webkit-clip-path:polygon(0 0, 100% 28.93%, 100% 100%, 0 100%);
          clip-path:polygon(0 0, 100% 28.93%, 100% 100%, 0 100%);
  transition:background-color .85s cubic-bezier(.4,0,.2,1);
}

/* stage : la photo seule, DERRIÈRE la forme (z-index:0) */
.releve-stage{ position:relative; z-index:0; min-height:var(--photoH); }

/* chaque portrait empilé : photo centrée */
.rslide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
  /* fondu pur (pas de translation) + promotion de calque : crossfade fluide
     et identique sur Chrome / Safari, sans double-image décalée */
  transition:opacity .45s ease;
  will-change:opacity; backface-visibility:hidden; transform:translateZ(0);
}
.rslide.is-active{ opacity:1; }
.rslide.is-leaving{ opacity:0; }

/* photos purement décoratives : aucune interaction au survol (ni clic, ni sélection, ni glissé) */
.rslide-photo{
  flex:0 0 auto; height:var(--photoH); width:auto; object-fit:contain;
  pointer-events:none; user-select:none; -webkit-user-drag:none;
}

/* titre + texte affichés DEVANT la forme jaune (z-index:2), en navy pour le contraste */
.releve-text{
  position:relative; z-index:2;
  width:min(760px,100%); margin:0 auto;
  padding:clamp(20px,3vw,38px) clamp(10px,2vw,24px) clamp(40px,6vw,76px);
  text-align:center; color:var(--navy);
}
.releve-text .section-title{
  color:var(--navy); max-width:18ch; margin:0 auto; line-height:.95;
  font-size:clamp(28px,4.2vw,56px);
}
.releve-text .hl--pink{ color:var(--pink); }
.releve-lede{
  margin:clamp(14px,2vw,24px) auto 0; max-width:48ch;
  font-size:clamp(16px,1.35vw,21px); line-height:1.45; font-weight:600; color:var(--navy);
}

@media (prefers-reduced-motion:reduce){
  .rslide{ transition:opacity .4s ease; transform:none; }
  .rslide.is-leaving{ transform:none; }
}

/* ----- manifeste dans une forme (forme2.svg, collée bord à bord) ----- */
.shape-card{
  background:var(--navy-2); color:var(--white);
  margin-inline:calc(var(--pad) * -1);   /* déborde le padding de section : collée à gauche/droite */
  /* padding haut/bas généreux : le texte reste dans la zone pleine de la forme (pente haut-droite / bas-droite) */
  padding:clamp(88px,14vw,200px) clamp(100px,18vw,320px) clamp(88px,14vw,200px);
  padding-left:max(clamp(40px,6vw,84px), calc(var(--pad) + 20px));
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
}
.shape-card .eyebrow{ display:inline-block; margin-bottom:18px; }
.shape-card .manif{ font-size:var(--t-h2); margin-top:0; }

/* ----- méthodologie : 3 phases sur une grande forme bord à bord ----- */
.phases{ position:relative; margin-top:clamp(40px,6vw,72px); }
.phases-shape{
  position:absolute; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  /* forme plus haute que le contenu (débordement vertical) sans déplacer les textes */
  top:calc(-1 * clamp(34px,5vw,80px)); bottom:calc(-1 * clamp(34px,5vw,80px));
  background:var(--navy-2);                                  /* même forme/couleur que partenaires */
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
}
.phases-list{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,60px); padding:clamp(56px,8vw,104px) clamp(24px,4vw,64px);
}
@media (max-width:820px){ .phases-list{ grid-template-columns:1fr; gap:clamp(36px,6vw,56px); } }
.phase{ background:none; padding:0; border:0; border-radius:0; display:flex; flex-direction:column; gap:14px; }
.phase-num{ font-weight:900; font-size:clamp(48px,5vw,82px); line-height:.85; color:var(--acid); letter-spacing:-.04em; }
.phase-title{ font-size:var(--t-h3); text-transform:uppercase; }
.phase-text{ font-weight:500; opacity:.82; line-height:1.5; flex:1; }
.phase-date{ font-weight:800; color:var(--acid); font-size:14px; letter-spacing:.02em; }

/* ----- soutien médias ----- */
.media-grid{ margin-top:54px; display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; align-items:stretch; }
.media-logo{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:130px; padding:24px; text-align:center;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:rgba(255,255,255,.8);
}
.media-logo small{ font-weight:600; font-size:12px; letter-spacing:.06em; opacity:.7; text-transform:none; }
.media-logo--feature{
  grid-column:span 2; background:var(--green); color:var(--navy); border-color:transparent;
  font-size:clamp(26px,3.2vw,46px); line-height:1;
}
.media-logo--feature small{ color:var(--navy); opacity:.8; }
@media (max-width:560px){ .media-logo--feature{ grid-column:span 1; } }

/* ----- partenaires : grande forme bord à bord, logos par-dessus ----- */
.partners{ position:relative; margin-top:clamp(40px,6vw,72px); }
.partners-shape{
  position:absolute; inset:0; left:calc(var(--pad) * -1); right:calc(var(--pad) * -1);
  background:var(--navy-2);                                  /* même couleur que la forme du manifeste */
  -webkit-clip-path:var(--forme); clip-path:var(--forme);   /* forme2 : bord gauche/droit plein */
}
.partners-logos{
  position:relative; display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between;
  gap:clamp(18px,3vw,44px); padding:clamp(48px,7vw,92px) clamp(24px,4vw,64px);
}
.partner{ flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; }
/* logos en blanc pour ressortir sur la forme navy (transparence conservée) */
.partner img{
  max-width:100%; max-height:46px; width:auto; height:auto; object-fit:contain;
  filter:brightness(0) invert(1);
}
/* hugo a un fond coloré intégré : on garde ses couleurs d'origine */
.partner img[src*="hugo"]{ filter:none; max-height:58px; }
/* placeholder « à venir » (médias) */
.partner--soon{
  font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(12px,1.1vw,14px); color:rgba(255,255,255,.5); text-align:center;
}
@media (max-width:760px){
  /* grille : chaque logo a une cellule de largeur définie (sinon les SVG s'effondrent) */
  .partners-logos{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    gap:34px 24px; align-items:center; justify-items:center;
    padding:clamp(42px,9vw,72px) clamp(18px,4vw,36px);
  }
  .partner{ width:100%; min-width:0; }
  .partner img{ max-width:100%; max-height:42px; }
  .partner img[src*="hugo"]{ max-height:52px; }
}

/* ===== responsive : tailles de texte + formes à bords pleins (le contenu reste dessus) ===== */
@media (max-width:760px){
  /* sur petit écran, la forme garde ses bords gauche/droit pleins (léger biseau en haut seulement) */
  :root{ --forme: polygon(0 0, 100% 4%, 100% 100%, 0 100%); }

  .section-title,
  .manif, .shape-card .manif,
  .phase-title,
  .props .prop-title,
  .cta-title{ overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
  .section-title .hl{ display:inline; transform:none; }   /* la partie colorée suit le retour à la ligne */
  .section-title{ font-size:clamp(26px,7vw,44px); }
  /* titre de la relève (sur la forme jaune) : casse entre les mots, sans césure */
  .releve-text .section-title{ font-size:clamp(22px,6vw,32px); word-break:normal; hyphens:none; }
  .manif,
  .shape-card .manif{ font-size:clamp(23px,6.6vw,44px); max-width:none; }
  .phase-title{ font-size:clamp(18px,4.8vw,28px); }
  .props .prop-title{ font-size:clamp(15px,4vw,20px); }

  /* manifeste : padding raisonnable maintenant que la forme couvre tout */
  .shape-card{
    padding:clamp(40px,9vw,70px) clamp(22px,5vw,30px);
    padding-left:max(clamp(22px,5vw,30px), calc(var(--pad) + 8px));
  }
}

/* =====================================================
   PANNEAU DÉTAIL (étudiant · expert · priorité)
   Une forme angulaire (comme celle sous les logos partenaires)
   qui se DÉROULE sous la section, au clic sur un élément.
   ===================================================== */
/* éléments cliquables */
.rslide.is-active,
.comite .person{ cursor:pointer; }
.comite .person:focus-visible{
  outline:3px solid var(--acid); outline-offset:6px; border-radius:4px;
}
/* le rond du comité ne bouge pas : c'est la photo qui zoome (voir .person-photo) */
.comite .person.is-selected .person-frame{ outline:4px solid var(--acid); outline-offset:4px; }
.comite .person.is-selected .person-photo{ transform:scale(1.1); }

/* panneau déroulant pleine largeur (bord à bord, comme .partners-shape) */
.reveal-panel{
  display:grid; grid-template-rows:0fr;
  margin-inline:calc(var(--pad) * -1);   /* déborde le padding de section : bord à bord */
  margin-top:0;
  transition:grid-template-rows .6s cubic-bezier(.2,.8,.2,1), margin-top .6s cubic-bezier(.2,.8,.2,1);
}
.reveal-panel.is-open{ grid-template-rows:1fr; margin-top:clamp(40px,6vw,72px); }
.reveal-panel__inner{ overflow:hidden; min-height:0; }

/* la forme qui s'ouvre COLLE celle du dessus et en adopte l'angle */
/* étudiants : le bloc du diaporama a un bas PLAT → forme DROITE, collée */
.reveal-panel--voix.is-open{ margin-top:0; }
/* étudiants : le panneau n'affiche QUE la bio (nom/méta déjà sous la photo),
   centré sur la même largeur que le bloc d'infos pour s'aligner dessous */
.reveal-panel--voix .reveal-panel__shape{
  -webkit-clip-path:none; clip-path:none;
  /* prend la couleur du portrait actif (--c piloté en JS), comme le fond du diaporama */
  background:var(--c, var(--green)); color:var(--navy);
  transition:background-color .85s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(8px,1.5vw,18px) 0 clamp(40px,6vw,72px);
}
.reveal-panel--voix .reveal-panel__eyebrow,
.reveal-panel--voix .reveal-panel__title,
.reveal-panel--voix .reveal-panel__meta{ display:none; }
.reveal-panel--voix .reveal-panel__text{
  width:min(620px,100%); max-width:none; padding-inline:clamp(10px,2vw,24px);
  margin:0; text-align:left; color:rgba(26,10,61,.9);
}
.reveal-panel--voix .reveal-panel__close{
  width:min(620px,100%); padding-inline:clamp(10px,2vw,24px);
  margin:clamp(22px,3vw,32px) 0 0; color:var(--navy); border-color:transparent;
}
.reveal-panel--voix .reveal-panel__close:hover{ color:var(--navy); border-color:var(--navy); opacity:1; }
/* priorités : grande forme EN BIAIS (--forme) → on garde le biais et on colle */
.reveal-panel--priorites.is-open{ margin-top:0; }
/* experts (#comite) : inchangé (forme --forme + léger écart conservés) */

/* la forme : navy-2, même polygone angulaire que les partenaires */
.reveal-panel__shape{
  position:relative;
  background:var(--navy-2); color:var(--white);
  -webkit-clip-path:var(--forme); clip-path:var(--forme);
  /* padding généreux : le texte reste dans la zone pleine de la pointe (haut-droite / bas-droite) */
  padding:clamp(54px,8vw,104px) clamp(90px,15vw,240px) clamp(54px,8vw,104px);
  padding-left:max(clamp(40px,6vw,84px), calc(var(--pad) + 20px));
}

/* contenu : cascade rejouée à chaque ouverture / changement d'élément */
.reveal-panel__shape > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.9,.25,1);
}
.reveal-panel__shape.show > *{ opacity:1; transform:none; }
.reveal-panel__shape.show .reveal-panel__eyebrow{ transition-delay:.18s; }
.reveal-panel__shape.show .reveal-panel__title{ transition-delay:.24s; }
.reveal-panel__shape.show .reveal-panel__meta{ transition-delay:.30s; }
.reveal-panel__shape.show .reveal-panel__text{ transition-delay:.36s; }
.reveal-panel__shape.show .reveal-panel__close{ transition-delay:.42s; }

.reveal-panel__eyebrow{
  display:inline-block; font-weight:800; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; padding:6px 12px; margin:0 0 18px;
  border:1.5px solid var(--c,var(--acid)); color:var(--c,var(--acid)); border-radius:999px;
}
.reveal-panel__title{
  font-size:clamp(28px,4.4vw,56px); text-transform:uppercase;
  line-height:.9; letter-spacing:-.02em; font-weight:900; margin:0;
  color:var(--c,var(--white)); overflow-wrap:break-word; hyphens:auto;
}
.reveal-panel__meta{
  margin:14px 0 0; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(13px,1.2vw,16px); color:rgba(255,255,255,.75);
}
.reveal-panel__text{
  margin:22px 0 0; font-weight:500; line-height:1.55;
  font-size:clamp(16px,1.3vw,20px); max-width:46ch; color:rgba(255,255,255,.92);
}
.reveal-panel__close{
  margin:30px 0 0; background:none; border:0; padding:0 0 3px;
  color:var(--white); font-weight:800; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; display:inline-flex; align-items:center; gap:9px;
  border-bottom:2px solid transparent; opacity:.85;
  transition:opacity .25s ease, color .25s ease, border-color .25s ease;
}
.reveal-panel__close:hover{ opacity:1; color:var(--c,var(--acid)); border-color:currentColor; }

@media (prefers-reduced-motion:reduce){
  .reveal-panel{ transition:none; }
  .reveal-panel__shape > *{ transition:opacity .25s ease; transform:none; }
}

/* ----- badge flottant « avec le soutien de HugoDécrypte » ----- */
.hugo-badge{
  position:fixed; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); z-index:900;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:var(--green); color:var(--white);
  padding:6px 12px; border-radius:999px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  font-weight:800; font-size:9px; text-transform:uppercase; letter-spacing:.03em;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hugo-badge:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.42); }
.hugo-badge span{ line-height:1; }
.hugo-badge img{ height:30px; width:auto; display:block; }
@media (max-width:560px){
  .hugo-badge{ padding:6px 10px; font-size:8px; }
  .hugo-badge img{ height:26px; }
}

/* ====================================================================
   Bloc institutionnel de pied de page (signal de confiance Google)
   ================================================================== */
/* =====================================================
   CARTE DES ORIGINES (Leaflet + OpenStreetMap teinté DA)
   ===================================================== */
.carte-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.carte-stat{
  display:inline-flex; align-items:baseline; gap:8px;
  padding:7px 15px; border:1.5px solid rgba(255,255,255,.18); border-radius:999px;
  font-weight:600; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.78);
}
.carte-stat b{ font-size:19px; font-weight:900; color:var(--acid); letter-spacing:-.01em; }

.carte-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 22px; }
.carte-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px; font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.03em; border:1.5px solid transparent;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.carte-btn--primary{ background:var(--acid); color:var(--navy); }
.carte-btn--primary:hover{ background:var(--green); transform:translateY(-1px); }
.carte-btn--ghost{ background:none; color:var(--white); border-color:rgba(255,255,255,.28); }
.carte-btn--ghost:hover{ border-color:var(--acid); color:var(--acid); }

.carte-stage{
  position:relative; margin-top:6px;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px -45px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.03);
  background:#0c0524;
}
.carte-map{ height:clamp(420px,64vh,640px); width:100%; background:#0c0524; }
.carte-map.leaflet-container{ font-family:inherit; }

/* teinte DA : on colorise les tuiles grises de CARTO -> navy / violet électrique */
.carte-map .leaflet-tile-pane{
  filter:grayscale(1) brightness(.62) contrast(1.04) sepia(1) hue-rotate(202deg) saturate(2.6) brightness(1.05);
}

/* contrôles + attribution dans la DA */
.carte-map .leaflet-bar{ border:none; box-shadow:0 6px 20px -8px rgba(0,0,0,.7); }
.carte-map .leaflet-bar a{
  background:var(--navy-2); color:var(--white); border-bottom:1px solid rgba(255,255,255,.12);
  width:34px; height:34px; line-height:34px; font-size:19px; font-weight:700;
}
.carte-map .leaflet-bar a:hover{ background:var(--navy-3); color:var(--acid); }
.carte-map .leaflet-bar a:first-child{ border-radius:10px 10px 0 0; }
.carte-map .leaflet-bar a:last-child{ border-radius:0 0 10px 10px; }
.carte-map .leaflet-control-attribution{
  background:rgba(26,10,61,.74); color:rgba(255,255,255,.55); font-size:10px; padding:2px 8px; border-radius:0 8px 0 0;
}
.carte-map .leaflet-control-attribution a{ color:var(--acid); }

/* ---------- marqueurs villes ---------- */
.ori-mk{ background:none; border:0; }
.ori-in{
  position:absolute; left:50%; top:50%; width:0; height:0;
  opacity:0; transform:scale(0); transform-origin:center;
}
.ori-dot,.ori-ring{ position:absolute; left:0; top:0; border-radius:50%; transform:translate(-50%,-50%); }
.ori-dot{
  width:var(--d,16px); height:var(--d,16px); background:var(--c,#fff);
  box-shadow:0 0 0 2px var(--navy), 0 0 14px 1px var(--c,#fff);
  transition:box-shadow .25s ease;
}
.ori-ring{ width:var(--d,16px); height:var(--d,16px); border:2px solid var(--c,#fff); opacity:0; }
.ori-mk.is-active .ori-dot{ box-shadow:0 0 0 3px var(--navy), 0 0 0 6px var(--c,#fff), 0 0 22px 4px var(--c,#fff); }
/* compteur (nombre de jeunes) au centre du point */
.ori-num{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%);
  font-weight:900; line-height:1; color:var(--navy); pointer-events:none;
  font-size:calc(var(--d,22px) * .5); letter-spacing:-.02em;
}

/* entrée (révélée au scroll) + pulsation */
.carte-stage.is-revealed .ori-in{ animation:ori-pop .55s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay:calc(var(--i,0) * 26ms); }
.carte-stage.is-revealed .ori-ring{ animation:ori-pulse 2.8s ease-out infinite; animation-delay:calc(var(--i,0) * 90ms); }
@keyframes ori-pop{ to{ opacity:1; transform:scale(1); } }
@keyframes ori-pulse{ 0%{ transform:translate(-50%,-50%) scale(1); opacity:.65; } 70%{ opacity:0; } 100%{ transform:translate(-50%,-50%) scale(3.4); opacity:0; } }

/* hub Aix-Marseille */
.ori-mk--hub .ori-dot{ width:18px; height:18px; box-shadow:0 0 0 3px var(--navy), 0 0 0 5px var(--c), 0 0 24px 5px var(--c); }
.ori-mk--hub .ori-ring{ width:18px; height:18px; border-width:2px; }
.ori-hublabel{
  position:absolute; left:50%; top:16px; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--acid); text-shadow:0 1px 5px rgba(0,0,0,.85);
}

/* ---------- arcs en pointillés ---------- */
.arc-path{ filter:drop-shadow(0 0 3px rgba(0,0,0,.55)); }
.arc-path--flow{
  stroke-dasharray:1 11; stroke-linecap:round;
  animation:arc-flow 1.1s linear infinite;
}
@keyframes arc-flow{ to{ stroke-dashoffset:-24; } }

/* ---------- popup DA ---------- */
.ori-popup .leaflet-popup-content-wrapper{
  background:var(--navy-2); color:var(--white); border-radius:14px;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 70px -22px rgba(0,0,0,.85);
}
.ori-popup .leaflet-popup-content{ margin:16px 18px 15px; line-height:1.3; }
.ori-popup .leaflet-popup-tip{ background:var(--navy-2); border:1px solid rgba(255,255,255,.14); }
.ori-popup a.leaflet-popup-close-button{ color:rgba(255,255,255,.55); font-size:20px; padding:8px 9px 0 0; }
.ori-popup a.leaflet-popup-close-button:hover{ color:var(--acid); }
.ori-pop__count{ display:block; font-weight:900; font-size:30px; line-height:1; color:var(--c,#fff); letter-spacing:-.03em; }
.ori-pop__city{ font-size:22px; text-transform:uppercase; font-weight:600; margin:4px 0 2px; line-height:.95; }
.ori-pop__sub{ margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.ori-pop__names{ display:flex; flex-wrap:wrap; gap:6px; max-height:148px; overflow:auto; padding-right:4px; }
.ori-pop__names span{ font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.09); color:rgba(255,255,255,.9); }
.ori-pop__names::-webkit-scrollbar{ width:6px; }
.ori-pop__names::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:3px; }

/* ---------- overlay d'activation (tactile) ---------- */
.carte-activate{
  position:absolute; inset:0; z-index:1200; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(12,5,36,.34);
}
.carte-activate span{
  background:var(--acid); color:var(--navy); padding:13px 24px; border-radius:999px;
  font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  box-shadow:0 14px 40px -12px rgba(0,0,0,.7);
}
.carte-stage.is-live .carte-activate{ display:none; }
@media (hover:hover){ .carte-activate{ display:none; } }   /* desktop : jamais d'overlay */

.carte-note{ margin-top:14px; font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.5); }

@media (max-width:760px){
  .carte-map{ height:clamp(360px,56vh,520px); }
  .carte-btn{ flex:1 1 auto; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .ori-in{ opacity:1; transform:scale(1); animation:none; }
  .ori-ring{ display:none; }
  .arc-path--flow{ animation:none; }
}