/* ============================================================
   NGOUVOU by la patat' — feuille principale
   Palette relevée sur les visuels du client, pas inventée :
   jaune #FED605, magenta #E70280, bleu #021E50, crème #EFD1AB.
   ============================================================ */
:root{
  --nuit:#04081A;--nuit2:#070D24;--bleu:#021E50;--bleu-vif:#0058B2;
  --jaune:#FED605;--jaune-chaud:#FFB800;--magenta:#E70280;--rose:#FB4995;
  --bordeaux:#8E0B2E;--creme:#EFD1AB;--blanc:#fff;--gris:#9aa3b8;--gris2:#6b7590;
  --titre:'Archivo Black','Arial Black','Helvetica Neue',Impact,sans-serif;
  --texte:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --large:min(100% - 2.4rem,72rem);
  --etroit:min(100% - 2.4rem,44rem);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--nuit);color:var(--blanc);font-family:var(--texte);
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.dedans{width:var(--large);margin-inline:auto}
.etroit{width:var(--etroit);margin-inline:auto}
img{max-width:100%;height:auto}

/* ---------- entête ---------- */
.entete{position:fixed;inset:0 0 auto;z-index:60;padding:1rem 0;
  transition:background .35s ease,backdrop-filter .35s ease,padding .35s ease}
.entete.pose{background:rgba(4,8,26,.86);padding:.6rem 0;
  border-bottom:1px solid rgba(254,214,5,.14)}
.entete .dedans{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.marque{font-family:var(--titre);font-size:1.15rem;color:var(--jaune);
  text-decoration:none;letter-spacing:-.01em;line-height:1}
.marque small{display:block;font-family:var(--texte);font-style:italic;
  font-size:.62rem;color:var(--creme);letter-spacing:.02em;font-weight:400}
.nav{display:flex;gap:1.7rem;font-size:.85rem}
.nav a{color:var(--gris);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--jaune)}
@media(max-width:860px){.nav{display:none}}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:50px;padding:.85rem 1.6rem;border-radius:99px;border:0;cursor:pointer;
  font-family:var(--texte);font-size:.92rem;font-weight:700;text-decoration:none;
  background:linear-gradient(100deg,var(--jaune),var(--jaune-chaud));color:var(--nuit);
  box-shadow:0 10px 30px rgba(254,214,5,.22);transition:transform .18s,box-shadow .18s}
.bouton:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(254,214,5,.3)}
.bouton.fantome{background:transparent;color:var(--creme);
  border:1px solid rgba(239,209,171,.35);box-shadow:none}
.bouton.fantome:hover{border-color:var(--jaune);color:var(--jaune)}
.bouton.petit{min-height:42px;padding:.55rem 1.15rem;font-size:.8rem}

/* ============================================================
   LE HÉRO PILOTÉ AU DÉFILEMENT
   Une piste haute, un canvas collant dedans. Le défilement ne
   fait pas bouger la page : il change l'image dessinée.
   ============================================================ */
.piste{position:relative;height:380vh}
.scene{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:#000}
.scene canvas,.scene .repli{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
.scene::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,8,26,.55) 0%,transparent 22%,
    transparent 58%,rgba(4,8,26,.92) 100%)}

.beats{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  padding:0 1.4rem;pointer-events:none;text-align:center}
/* En portrait le plan des canettes occupe le haut de l'écran : les textes
   descendent pour ne pas passer par-dessus. */
@media(orientation:portrait) and (max-width:900px){
  .beats{align-items:end;padding-bottom:11vh}
}
.beat{grid-area:1/1;opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease}
.beat.vu{opacity:1;transform:none}
.beat .sur{display:inline-block;font-size:.64rem;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--nuit);background:var(--jaune);
  padding:.32rem .9rem;border-radius:4px;font-weight:800;margin-bottom:1.1rem}
.beat h1,.beat h2{font-family:var(--titre);line-height:.94;letter-spacing:-.02em;
  font-size:clamp(2.6rem,11vw,6.5rem);color:var(--jaune);
  text-shadow:4px 4px 0 var(--magenta),-2px -2px 0 var(--magenta),
              2px -2px 0 var(--magenta),-2px 2px 0 var(--magenta)}
/* Le troisième temps porte deux mots longs et arrive sur les canettes :
   au même corps que « NGOUVOU », il écrasait le plan. On le descend et on
   lui enlève le contour, il n'a plus à crier, l'image parle. */
.beat.sobre h2{font-size:clamp(1.5rem,4.4vw,2.6rem);letter-spacing:.06em;
  line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.85);color:var(--creme)}
.beat .sous{font-style:italic;font-size:clamp(1rem,3.6vw,1.5rem);color:var(--creme);
  margin-top:.6rem}
.beat p{color:var(--creme);font-size:clamp(.98rem,2.6vw,1.25rem);max-width:34rem;
  margin:1rem auto 0;line-height:1.55}
.beat .actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:1.8rem;pointer-events:auto}

.defiler{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;z-index:4;
  font-size:.66rem;letter-spacing:3px;text-transform:uppercase;color:var(--gris);
  transition:opacity .4s}
.defiler::after{content:'';display:block;width:1px;height:26px;margin:.5rem auto 0;
  background:linear-gradient(180deg,var(--jaune),transparent);
  animation:coule 1.8s ease-in-out infinite}
@keyframes coule{0%,100%{opacity:.2;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
.piste.avance .defiler{opacity:0}

/* la barre de progression du film */
.jauge-film{position:absolute;left:0;bottom:0;height:2px;z-index:5;width:0;
  background:linear-gradient(90deg,var(--magenta),var(--jaune))}

/* ---------- sections ---------- */
.bloc{position:relative;padding:clamp(4rem,11vw,8rem) 0}
.bloc-clair{background:var(--nuit2)}
.sur-titre{font-size:.64rem;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--jaune);margin-bottom:1rem}
h2.titre{font-family:var(--titre);font-size:clamp(1.9rem,5.4vw,3.4rem);line-height:1.02;
  letter-spacing:-.02em;margin-bottom:1.2rem}
h2.titre em{font-style:normal;color:var(--jaune)}
.chapeau{color:var(--creme);font-size:clamp(1rem,2.4vw,1.15rem);max-width:38rem;
  line-height:1.65}

/* apparition au défilement */
.app{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.app.vu{opacity:1;transform:none}

/* ---------- le manifeste ---------- */
.manifeste{text-align:center}
.manifeste .phrase{font-family:var(--titre);font-size:clamp(1.6rem,5.6vw,3.2rem);
  line-height:1.12;letter-spacing:-.02em;max-width:20ch;margin:0 auto;
  background:linear-gradient(100deg,var(--jaune),var(--creme) 60%,var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.manifeste p{color:var(--gris);max-width:36rem;margin:1.6rem auto 0}

/* ---------- la gamme ---------- */
.gamme{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.parfum{position:relative;border-radius:22px;padding:2rem 1.2rem 1.6rem;text-align:center;
  border:1px solid rgba(255,255,255,.09);overflow:hidden;
  background:linear-gradient(170deg,color-mix(in srgb,var(--teinte) 22%,transparent),
    rgba(255,255,255,.02) 62%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s}
.parfum:hover{transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--teinte) 55%,transparent)}
.parfum::before{content:'';position:absolute;left:50%;top:6%;translate:-50% 0;
  width:120%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--teinte) 30%,transparent),
    transparent 70%)}
.parfum img{position:relative;width:auto;height:clamp(200px,26vw,330px);margin:0 auto;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.parfum h3{position:relative;font-family:var(--titre);font-size:clamp(1rem,2.6vw,1.5rem);
  margin-top:1.2rem;color:var(--blanc)}
.parfum .note{position:relative;font-size:.78rem;color:var(--creme);margin-top:.3rem}
.parfum .drapeau{position:relative;display:inline-block;margin-top:.7rem;font-size:.6rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--nuit);background:var(--creme);
  padding:.22rem .6rem;border-radius:3px;font-weight:800}
@media(max-width:700px){
  .gamme{grid-template-columns:1fr;gap:1rem}
  /* La canette à gauche, tout le texte à droite. Sans le grid-row qui la
     fait courir sur toutes les lignes, les quatre éléments se répartissent
     en zigzag entre les deux colonnes. */
  .parfum{display:grid;grid-template-columns:auto 1fr;align-items:center;
    gap:0 1.3rem;text-align:left;padding:1.2rem}
  .parfum picture{grid-row:1/span 3;align-self:center}
  .parfum img{height:172px}
  .parfum h3{margin-top:0;align-self:end}
  .parfum .note{align-self:start;margin-top:.35rem}
  .parfum .drapeau{justify-self:start;margin-top:.6rem;align-self:start}
}

/* ---------- devenir revendeur ---------- */
.pro-grille{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
@media(max-width:900px){.pro-grille{grid-template-columns:1fr}}
.arguments{display:grid;gap:.9rem;margin-top:2rem}
.argument{display:flex;gap:1rem;align-items:flex-start;
  border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:1.1rem 1.2rem;
  background:rgba(255,255,255,.03)}
.argument b{display:block;font-size:.98rem;margin-bottom:.2rem}
.argument span{font-size:.87rem;color:var(--gris);line-height:1.6}
.argument .num{flex:none;font-family:var(--titre);font-size:1.1rem;color:var(--jaune);
  width:34px;height:34px;display:grid;place-items:center;border-radius:9px;
  background:rgba(254,214,5,.12)}
.carte-contact{border:1px solid rgba(254,214,5,.3);border-radius:24px;padding:2rem;
  background:linear-gradient(160deg,rgba(254,214,5,.1),rgba(231,2,128,.06) 70%)}
.carte-contact h3{font-family:var(--titre);font-size:1.35rem;margin-bottom:.5rem}
.carte-contact p{color:var(--creme);font-size:.9rem;margin-bottom:1.4rem}
.liens-contact{display:grid;gap:.6rem}
.lien{display:flex;align-items:center;gap:.9rem;min-height:58px;padding:.8rem 1rem;
  border-radius:14px;text-decoration:none;color:var(--blanc);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  transition:background .2s,border-color .2s,transform .18s}
.lien:hover{background:rgba(255,255,255,.1);border-color:rgba(254,214,5,.45);
  transform:translateY(-2px)}
.lien svg{width:22px;height:22px;flex:none;fill:currentColor}
.lien b{display:block;font-size:.93rem}
.lien span{font-size:.78rem;color:var(--gris)}
.lien.vedette{background:linear-gradient(100deg,var(--jaune),var(--jaune-chaud));
  color:var(--nuit);border-color:transparent}
.lien.vedette span{color:rgba(4,8,26,.7)}

/* ---------- le distributeur ---------- */
.jsoi-grille{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,4vw,3rem);
  align-items:center}
@media(max-width:760px){.jsoi-grille{grid-template-columns:1fr}}
.jsoi-chip{background:var(--creme);border-radius:16px;padding:1rem 1.4rem;
  line-height:0;justify-self:start}
.jsoi-chip img{width:170px;mix-blend-mode:multiply}
.faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;
  margin-top:2rem}
.fait{border-top:2px solid var(--magenta);padding-top:.9rem}
.fait b{display:block;font-family:var(--titre);font-size:1.5rem;color:var(--jaune);
  line-height:1.1}
.fait span{font-size:.82rem;color:var(--gris)}

/* ---------- pied ---------- */
.pied{border-top:1px solid rgba(255,255,255,.1);padding:3rem 0 2.5rem;
  background:var(--nuit2)}
.pied-in{display:grid;grid-template-columns:1.2fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:760px){.pied-in{grid-template-columns:1fr;gap:1.6rem}}
.pied .legal{font-size:.74rem;color:var(--gris2);line-height:1.7}
.pied .legal b{color:var(--creme);font-weight:600}
.pied-liens{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-size:.8rem}
.pied-liens a{color:var(--gris);text-decoration:none}
.pied-liens a:hover{color:var(--jaune)}
.avert{margin-top:1.6rem;font-size:.7rem;color:var(--gris2);line-height:1.6;
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:.7rem .9rem;
  background:rgba(0,0,0,.3)}
.credit{margin-top:1.6rem;font-size:.72rem;color:#4a5268}
.credit a{color:#6d7794;text-decoration:none}
.credit a:hover{color:var(--jaune)}

/* ---------- pages intérieures ---------- */
.tete-simple{padding:8rem 0 3rem;border-bottom:1px solid rgba(255,255,255,.1);
  background:radial-gradient(120% 70% at 30% 0%,rgba(0,88,178,.25),transparent 62%)}
.tete-simple h1{font-family:var(--titre);font-size:clamp(2rem,6vw,3.2rem);
  color:var(--jaune);line-height:1.02}
.prose{max-width:46rem}
.prose h2{font-family:var(--titre);font-size:1.25rem;color:var(--jaune);
  margin:2.4rem 0 .8rem}
.prose p{color:var(--gris);font-size:.92rem;margin-bottom:.9rem;line-height:1.75}
.prose p b{color:var(--creme)}
.prose a{color:var(--jaune);text-decoration:none;border-bottom:1px solid rgba(254,214,5,.3)}
.prose table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem;font-size:.86rem}
.prose th,.prose td{padding:.6rem .7rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.08);color:var(--gris)}
.prose th{color:var(--creme);width:34%;font-weight:600}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .app,.beat{opacity:1;transform:none}
  .piste{height:auto}
  .scene{position:relative;height:76svh}
}


/* ---------- ce qu'il y a dedans ---------- */
.dedans-produit{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,3.5rem);
  align-items:start}
@media(max-width:860px){.dedans-produit{grid-template-columns:1fr}}
.reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;
  margin-top:2rem}
.repere{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1.1rem;
  background:rgba(255,255,255,.03)}
.repere b{display:block;font-family:var(--titre);font-size:1.35rem;color:var(--jaune);
  line-height:1.1}
.repere span{font-size:.8rem;color:var(--gris);display:block;margin-top:.25rem}
.jus{margin-top:2rem;border-left:3px solid var(--magenta);padding:.2rem 0 .2rem 1.2rem}
.jus b{display:block;font-size:1rem;color:var(--creme);margin-bottom:.4rem}
.jus p{font-size:.9rem;color:var(--gris);line-height:1.7}
.nutri{border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;
  background:rgba(255,255,255,.03)}
.nutri-tete{padding:.9rem 1.2rem;background:rgba(231,2,128,.16);
  border-bottom:1px solid rgba(255,255,255,.1)}
.nutri-tete b{display:block;font-family:var(--titre);font-size:.95rem;color:var(--blanc)}
.nutri-tete span{font-size:.74rem;color:var(--creme)}
.nutri table{width:100%;border-collapse:collapse;font-size:.84rem}
.nutri td{padding:.5rem 1.2rem;border-bottom:1px solid rgba(255,255,255,.06);color:var(--gris)}
.nutri td+td{text-align:right;color:var(--creme);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.nutri tr:last-child td{border-bottom:0}
.nutri tr.fort td{color:var(--blanc);font-weight:600}
.nutri-pied{padding:.7rem 1.2rem;font-size:.7rem;color:var(--gris2);line-height:1.5;
  border-top:1px solid rgba(255,255,255,.1)}