/* ==========================================================================
   CARBURACŒUR · Couche atmosphère + mouvement
   Se greffe par-dessus site.css. Aucun style de base n'est réécrit ici :
   si on retire ce fichier et motion.js, le site retombe sur sa version sobre.
   ========================================================================== */

/* ---------- 1. ATMOSPHÈRE : le fond qui vit derrière tout le site ---------- */
body{background:transparent}

.atmo{position:fixed;inset:0;z-index:-10;overflow:hidden;pointer-events:none;
  background:var(--atmo-base,#ffffff);
  transition:background 1.1s var(--ease)}
.atmo .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-o,.5);
  transition:opacity 1.1s var(--ease),background 1.1s var(--ease);will-change:transform}
.atmo .b1{width:62vw;height:62vw;left:-14vw;top:-18vw;background:var(--blob-1,rgba(52,173,228,.30))}
.atmo .b2{width:52vw;height:52vw;right:-16vw;top:24vh;background:var(--blob-2,rgba(30,151,206,.22))}
.atmo .b3{width:70vw;height:70vw;left:12vw;top:120vh;background:var(--blob-3,rgba(14,119,172,.18))}

/* grain : ce qui distingue un fond « imprimé » d'un aplat numérique */
.atmo .grain{position:absolute;inset:-200%;opacity:.055;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 7s steps(6) infinite}
@keyframes grainshift{
  0%{transform:translate(0,0)}16%{transform:translate(-4%,-3%)}33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)}66%{transform:translate(4%,3%)}83%{transform:translate(-5%,-2%)}
  100%{transform:translate(0,0)}}

/* les sections claires laissent respirer l'atmosphère */
.sec--soft{background:transparent;position:relative}
.sec--soft::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent,rgba(237,241,246,.72) 12%,rgba(237,241,246,.72) 88%,transparent)}
:root[data-theme="dark"] .sec--soft::before{
  background:linear-gradient(180deg,transparent,rgba(13,18,25,.68) 12%,rgba(13,18,25,.68) 88%,transparent)}

/* ---------- 2. LES BLOCS SOMBRES DEVIENNENT DES DÉGRADÉS ---------- */
.stats,.cta-final,.guests{position:relative;overflow:hidden}
.stats::before,.cta-final::before,.guests::before{content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(52,173,228,.34),transparent 58%),
    radial-gradient(90% 120% at 92% 100%,rgba(14,119,172,.40),transparent 60%),
    linear-gradient(160deg,#0b111a 0%,#0a0d12 55%,#070a0f 100%)}
.stats > *,.cta-final > *,.guests > *{position:relative;z-index:1}

/* chiffres en dégradé, avec un balayage lumineux au premier passage */
.stats .num{background:linear-gradient(96deg,#fff 12%,#8ed3f4 46%,#fff 78%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 3. RÉVÉLATION DES TITRES (masque ligne à ligne) ---------- */
.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;will-change:transform}

/* ---------- 4. PROFONDEUR ET SURVOL ---------- */
/* halo qui suit le curseur sur les cartes */
.pillar,.pcard,.cs-car,.sponsor,.pilot-card{position:relative}
.pillar::after,.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(52,173,228,.16),transparent 62%)}
.pillar:hover::after,.pcard:hover::after{opacity:1}
.pillar--dark::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(196,168,106,.18),transparent 62%)}

/* balayage lumineux sur les boutons pleins */
.btn-primary{position:relative;overflow:hidden;isolation:isolate}
.btn-primary::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease)}
.btn-primary:hover::before{left:130%}

/* bordure qui s'allume sur les panneaux piliers */
.pillar{isolation:isolate}
.pillar::before{content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:0;
  transition:opacity .5s var(--ease);
  background:conic-gradient(from 140deg,rgba(52,173,228,.9),rgba(196,168,106,.55),rgba(52,173,228,.9))}
.pillar:hover::before{opacity:1}

/* ---------- 5. SÉQUENCE HORIZONTALE (les temps forts) ---------- */
.hscroll{position:relative}
.hscroll-track{display:flex;gap:1.4rem;will-change:transform}
.hscroll-track > *{flex:0 0 clamp(280px,26vw,380px)}
@media(max-width:900px){
  .hscroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) .6rem}
  .hscroll::-webkit-scrollbar{display:none}
  .hscroll-track{transform:none !important}
  .hscroll-track > *{flex:0 0 78vw;scroll-snap-align:center}
}

/* la carte des temps forts gagne de la matière */
.hscroll-track .pcard{background:var(--bg-card);border:1px solid var(--border);
  box-shadow:var(--shadow-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hscroll-track .pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-2)}

/* compteur de progression de la séquence */
.hscroll-bar{height:2px;background:var(--border);border-radius:2px;margin-top:2rem;overflow:hidden}
.hscroll-bar i{display:block;height:100%;width:0%;border-radius:2px;
  background:linear-gradient(90deg,var(--blue),var(--blue-700))}

/* ---------- 6. DÉTAILS ---------- */
.concours-band .cb-media img{will-change:transform}
.hero-media{will-change:transform}
.hero .hero-inner{will-change:transform,opacity}

/* on ne bouge rien pour qui ne veut pas de mouvement */
@media (prefers-reduced-motion:reduce){
  .atmo .grain{animation:none}
  .atmo .blob{filter:blur(70px)}
  .btn-primary::before{display:none}
}

/* ==========================================================================
   PICTOS AU TRAIT (remplacent les emoji) + LA CAUSE + SLOGAN
   Style Apple/Porsche : trait fin, monochrome, aucune couleur décorative.
   ========================================================================== */
.pcard .pic{background:transparent;box-shadow:none;border:1px solid var(--border);
  width:52px;height:52px;border-radius:14px}
.pcard .pic svg{width:24px;height:24px;color:var(--blue-700);stroke-width:1.4}
.feature-list .fi .ic svg,.info .ic svg{width:22px;height:22px;color:var(--blue-700);stroke-width:1.4}
.feature-list .fi .ic,.info .ic{background:transparent;border:1px solid var(--border)}
.asso .heart svg{width:16px;height:16px;color:var(--blue);opacity:.75;stroke-width:1.6}
:root[data-theme="dark"] .pcard .pic svg,
:root[data-theme="dark"] .feature-list .fi .ic svg{color:var(--blue)}

/* ---------- lisibilité du hero : le texte prime sur la photo ---------- */
.hero::after{background:
  linear-gradient(180deg,rgba(6,10,15,.62) 0%,rgba(6,10,15,.28) 26%,rgba(6,10,15,.68) 62%,rgba(5,8,12,.96) 100%),
  linear-gradient(96deg,rgba(5,8,12,.72) 0%,rgba(5,8,12,.34) 48%,transparent 78%)}
.hero h1{text-shadow:0 2px 40px rgba(0,0,0,.45)}
.hero-sub{color:rgba(255,255,255,.94);text-shadow:0 1px 20px rgba(0,0,0,.5);font-weight:400}
.hero-meta .hm{text-shadow:0 1px 14px rgba(0,0,0,.55)}

.hero-kicker{display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.1rem;
  padding:.44rem .9rem .44rem .7rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.22);background:rgba(8,12,18,.42);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.78rem;font-weight:640;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hero-kicker .hk-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 0 rgba(52,173,228,.55);animation:pouls 2.6s var(--ease) infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(52,173,228,.5)}70%{box-shadow:0 0 0 9px rgba(52,173,228,0)}100%{box-shadow:0 0 0 0 rgba(52,173,228,0)}}

/* ---------- LA CAUSE ---------- */
.cause{color:#EEF3F8;position:relative;overflow:hidden}
.cause::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 120% at 50% -10%,rgba(52,173,228,.22),transparent 62%),
             linear-gradient(180deg,#080c12 0%,#0a0f16 60%,#070a0f 100%)}
.cause > *{position:relative;z-index:1}
.cause-head{max-width:64ch;margin:0 auto;text-align:center}
.cause-head h2{color:#fff;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;margin:.7rem 0 1.1rem}
.cause-head h2 em{font-style:normal;color:var(--blue)}
.cause-head .lead{color:#9AA6B4;margin:0 auto}

.cause-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3.4rem}
@media(max-width:820px){.cause-figures{grid-template-columns:1fr;gap:1.6rem}}
.cf{text-align:center;padding:2rem 1rem;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.028)}
.cf .n{display:block;font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:800;font-stretch:var(--wide);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(96deg,#fff 10%,#8ed3f4 48%,#fff 82%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cf .k{display:block;margin-top:.9rem;font-size:.9rem;color:#8fa0b1;line-height:1.45}

/* le ruban des associations : deux lignes qui se croisent */
.cause-ticker{margin-top:3.4rem;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ct-row{overflow:hidden;padding:.55rem 0}
.ct-track{display:flex;align-items:center;gap:1.6rem;width:max-content;will-change:transform}
.ct-track span{font-size:clamp(1.1rem,2.2vw,1.7rem);font-weight:700;font-stretch:var(--wide);
  color:rgba(238,243,248,.34);white-space:nowrap;transition:color .4s var(--ease)}
.ct-row:hover .ct-track span{color:rgba(238,243,248,.62)}
.ct-track i{width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.6;flex:0 0 auto}

.cause-note{text-align:center;margin-top:2.6rem;color:#8fa0b1;font-size:.98rem}
.cause-note a{color:#fff;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:2px;
  transition:border-color .3s}
.cause-note a:hover{border-color:var(--blue)}

/* ---------- SLOGAN DÉFILANT ---------- */
.slogan{padding:2.4rem 0;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.slogan-track{display:flex;align-items:center;gap:2.4rem;width:max-content;will-change:transform}
.slogan-track span{font-size:clamp(1.8rem,5vw,3.6rem);font-weight:800;font-stretch:var(--wide);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(10,13,18,.32)}
:root[data-theme="dark"] .slogan-track span{-webkit-text-stroke-color:rgba(238,243,248,.30)}
.slogan-track span:nth-child(4n+1){color:var(--fg);-webkit-text-stroke:0}
.slogan-track i{width:9px;height:9px;border-radius:50%;background:var(--blue);flex:0 0 auto}

/* ==========================================================================
   NOTRE PARRAIN
   Traitement éditorial : portrait plein cadre, nom en très gros, et les deux
   baptêmes présentés comme des lignes de programme, pas comme des cartes.
   ========================================================================== */
.parrain{color:#EEF3F8;position:relative;overflow:hidden}
.parrain::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(80% 100% at 18% 20%,rgba(52,173,228,.20),transparent 60%),
             linear-gradient(180deg,#070a0f 0%,#0a0f16 100%)}
.parrain > *{position:relative;z-index:1}

.parrain-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:900px){.parrain-grid{grid-template-columns:1fr;gap:2.2rem}}

.pr-photo{position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.pr-photo img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block;
  filter:contrast(1.04) saturate(.96)}
.pr-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,10,15,.72) 100%)}
.pr-tag{position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
  padding:.45rem .9rem;border-radius:100px;border:1px solid rgba(255,255,255,.26);
  background:rgba(8,12,18,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-size:.72rem;font-weight:680;letter-spacing:.12em;text-transform:uppercase;color:#fff}

.pr-body h2{color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;letter-spacing:-.035em;
  margin:.6rem 0 1.2rem}
.pr-body .lead{color:#9AA6B4;max-width:56ch}

.pr-offres{margin:2.4rem 0 2.2rem;border-top:1px solid rgba(255,255,255,.12)}
.pr-offre{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  padding:1.3rem .4rem;border-bottom:1px solid rgba(255,255,255,.12);
  transition:background .4s var(--ease),padding-left .4s var(--ease)}
.pr-offre:hover{background:rgba(255,255,255,.04);padding-left:1rem}
.pr-offre .o-rang{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:#5f6f80;
  font-variant-numeric:tabular-nums}
.pr-offre .o-titre{display:block;font-size:1.12rem;font-weight:720;color:#fff;line-height:1.25}
.pr-offre .o-detail{display:block;margin-top:.28rem;font-size:.88rem;color:#8fa0b1;line-height:1.45}
.pr-offre .o-chiffres{text-align:right;white-space:nowrap}
.pr-offre .o-chiffres b{display:block;font-size:1.32rem;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pr-offre .o-chiffres i{display:block;margin-top:.2rem;font-style:normal;font-size:.76rem;
  letter-spacing:.06em;text-transform:uppercase;color:#7c8b9b}

/* la F40 est l'exception : c'est le seul endroit du site où l'or apparaît */
.pr-offre--or .o-rang{color:#c4a86a}
.pr-offre--or .o-titre{color:#f0e2c2}
.pr-offre--or .o-chiffres b{color:#c4a86a}
.pr-offre--or:hover{background:rgba(196,168,106,.07)}

@media(max-width:560px){
  .pr-offre{grid-template-columns:auto 1fr;gap:.9rem 1rem}
  .pr-offre .o-chiffres{grid-column:2;text-align:left;margin-top:.5rem}
  .pr-offre .o-chiffres b{display:inline;margin-right:.6rem}
  .pr-offre .o-chiffres i{display:inline}
}