:root{
  --encre:#171210;
  --encre-2:#241B17;
  --ivoire:#F4EDE0;
  --sable:#E4D8C4;
  --kola:#A6382B;
  --kola-clair:#E8907E;
  --feuille:#2E5E4E;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:100px;
  --dur:.55s; --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --ease-out-quint:cubic-bezier(.22,1,.36,1);
  --t-feedback:130ms; --t-etat:240ms; --t-layout:380ms; --t-entree:640ms;
  --pad:clamp(20px,5vw,64px);
  --max:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ivoire); color:var(--encre);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; font-weight:450;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wm{font-family:"Gabarito","Manrope",sans-serif; font-weight:900; line-height:1.02; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(2.9rem,8.2vw,6.2rem)}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.15rem,2vw,1.4rem); font-weight:700; letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
img,svg{max-width:100%}
.wrap{width:min(var(--max),100% - var(--pad)*2); margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- amorce de section --- */
.kicker{
  font-family:"Manrope",sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--kola);
  display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem;
}
.kicker::before{content:""; width:26px; height:26px; flex:none; background:currentColor;
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
.sombre .kicker{color:var(--kola-clair)}

/* --- boutons --- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; padding:.95rem 1.5rem;
  border-radius:var(--r-pill); font-weight:700; font-size:1rem; text-decoration:none;
  border:2px solid transparent; transition:transform var(--dur) var(--ease), background .25s, color .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn--kola{background:var(--kola); color:#fff}
.btn--kola:hover{background:#8E2C21}
.btn--ligne{border-color:currentColor}
.sombre .btn--ligne{color:var(--ivoire)}
.btn svg{width:20px;height:20px;flex:none}

/* --- nav --- */
header{position:sticky; top:0; z-index:60; background:rgba(23,18,16,.94); backdrop-filter:blur(8px); color:var(--ivoire)}
.nav{display:flex; align-items:center; gap:1.4rem; padding:.85rem 0; min-height:64px}
.marque{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ivoire); margin-right:auto}
.marque .mk{width:30px;height:30px;color:var(--kola-clair)}
.wm{font-size:1.6rem; letter-spacing:-.03em}
.nav__liens{display:flex; gap:1.5rem; font-size:.95rem; font-weight:600}
.nav__liens a{text-decoration:none; opacity:.8; transition:opacity .2s}
.nav__liens a:hover{opacity:1}
.lang{display:flex; align-items:center; gap:.35rem; font-size:.82rem; font-weight:700; letter-spacing:.06em}
.lang a{text-decoration:none; opacity:.55}
.lang a:hover{opacity:1}
.lang .actif{opacity:1; color:var(--kola-clair)}
.nav .btn{padding:.6rem 1.1rem; font-size:.9rem; white-space:nowrap}
@media(max-width:560px){.nav .btn .long{display:none}}
@media(max-width:900px){.nav__liens{display:none}}

/* --- hero --- */
.hero{position:relative; background:var(--encre); color:var(--ivoire); overflow:hidden; padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,88px)}
.hero__grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,320px); gap:clamp(28px,5vw,60px); align-items:end; position:relative; z-index:2}
.hero h1 .rouge{color:var(--kola-clair)}
.hero__intro{max-width:34ch; font-size:clamp(1.05rem,1.6vw,1.22rem); opacity:.85; margin-top:1.6rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero__preuves{align-self:end; padding-left:clamp(0px,2vw,28px); border-left:1px solid rgba(244,237,224,.18)}
.hero__preuves ul{list-style:none; margin:0; padding:0; display:grid; gap:.85rem; font-size:.98rem}
.hero__preuves li{display:flex; gap:.65rem; align-items:flex-start; opacity:.85; line-height:1.45}
.hero__preuves li::before{content:""; width:14px;height:14px;margin-top:.36em;flex:none;background:var(--kola-clair);
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
@media(max-width:880px){.hero__preuves{border-left:0; padding-left:0; padding-top:1.6rem; border-top:1px solid rgba(244,237,224,.18)}}
.hero__decor{position:absolute; right:-5%; bottom:-34%; width:min(30vw,360px); opacity:.42; z-index:1; pointer-events:none; transform-origin:bottom center}
.hero__villes{margin-top:clamp(36px,5vw,58px); display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.6; position:relative; z-index:2}
@media(max-width:880px){.hero__grid{grid-template-columns:1fr}}

/* --- bandeau défilant --- */
.ruban{background:var(--kola); color:#fff; padding:.85rem 0; overflow:hidden; white-space:nowrap}
.ruban__piste{display:inline-flex; align-items:center; gap:2rem; animation:glisse 32s linear infinite; font-family:"Gabarito",sans-serif; font-weight:700; font-size:1.05rem; letter-spacing:.02em}
.ruban__piste span{display:inline-flex; align-items:center; gap:2rem}
.ruban__piste i{width:14px;height:14px;flex:none;background:#fff; display:inline-block;
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
@keyframes glisse{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ruban__piste{animation:none}}

/* --- sections --- */
section{padding:clamp(56px,8vw,110px) 0}
.sombre{background:var(--encre); color:var(--ivoire)}
.creme{background:var(--sable)}
.intro-large{max-width:56ch; font-size:clamp(1.05rem,1.5vw,1.2rem)}

/* --- registre (listes à filets, anti-cartes) --- */
.registre{border-top:1px solid rgba(23,18,16,.16); margin-top:2.6rem}
.sombre .registre{border-color:rgba(244,237,224,.2)}
.registre__ligne{display:grid; grid-template-columns:108px minmax(0,1fr) minmax(0,1.15fr); gap:clamp(14px,3vw,40px);
  padding:1.7rem 0; border-bottom:1px solid rgba(23,18,16,.16); align-items:baseline}
.sombre .registre__ligne{border-color:rgba(244,237,224,.2)}
.registre__num{font-family:"Gabarito",sans-serif; font-weight:900; font-size:1.05rem; color:var(--kola); letter-spacing:.04em; white-space:nowrap}
.sombre .registre__num{color:var(--kola-clair)}
.registre__ligne p{margin:0; opacity:.82; font-size:.98rem}
@media(max-width:760px){.registre__ligne{grid-template-columns:1fr} .registre__ligne p{grid-column:2}}

/* --- avant / apres --- */
.bascule{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,56px); margin-top:2.8rem}
.bascule h3{margin-bottom:1.2rem}
.bascule ul{list-style:none; margin:0; padding:0; display:grid; gap:.9rem; font-size:1rem}
.bascule li{display:flex; gap:.7rem; align-items:flex-start; padding-bottom:.9rem; border-bottom:1px solid rgba(23,18,16,.12)}
.bascule li::before{content:""; width:14px;height:14px;margin-top:.4em;flex:none;background:currentColor;
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
.bascule .avant{color:rgba(23,18,16,.55)}
.bascule .avant li::before{opacity:.4}
.bascule .apres{color:var(--encre)}
.bascule .apres li::before{background:var(--feuille)}
@media(max-width:760px){.bascule{grid-template-columns:1fr}}

/* --- inclus --- */
.inclus{columns:2; column-gap:clamp(24px,5vw,64px); margin-top:2.6rem; list-style:none; padding:0}
.inclus li{break-inside:avoid; display:flex; gap:.7rem; align-items:flex-start; padding:.8rem 0; border-bottom:1px solid rgba(23,18,16,.12); font-size:.99rem}
.inclus li::before{content:""; width:14px;height:14px;margin-top:.42em;flex:none;background:var(--kola);
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
@media(max-width:700px){.inclus{columns:1}}

/* --- tarifs --- */
.tarifs{margin-top:2.8rem; border-top:2px solid var(--encre)}
.tarif{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto; gap:clamp(14px,3vw,36px);
  padding:1.9rem 0; border-bottom:1px solid rgba(23,18,16,.18); align-items:center}
.tarif--phare{background:linear-gradient(90deg,rgba(166,56,43,.07),transparent 70%); padding-inline:clamp(12px,2vw,22px); margin-inline:calc(clamp(12px,2vw,22px)*-1)}
.tarif__nom{font-family:"Gabarito",sans-serif; font-weight:900; font-size:1.35rem}
.tarif__note{display:block; font-family:"Manrope",sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--kola); margin-top:.35rem}
.tarif p{margin:0; font-size:.96rem; opacity:.8}
.tarif__prix{font-family:"Gabarito",sans-serif; font-weight:900; font-size:clamp(1.5rem,2.6vw,2rem); white-space:nowrap; text-align:right}
.tarif__prix small{display:block; font-family:"Manrope",sans-serif; font-weight:600; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-top:.3rem}
@media(max-width:820px){.tarif{grid-template-columns:1fr} .tarif__prix{text-align:left}}
.apres-tarifs{margin-top:2.4rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,40px); font-size:.97rem}
@media(max-width:760px){.apres-tarifs{grid-template-columns:1fr}}
.apres-tarifs h3{margin-bottom:.6rem}

/* --- paiement --- */
.paiement{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:start; margin-top:2.6rem}
.ops{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem}
.op{border:1px solid rgba(244,237,224,.28); border-radius:var(--r-pill); padding:.5rem 1.1rem; font-weight:700; font-size:.9rem}
.echeance{border-left:3px solid var(--kola-clair); padding-left:1.2rem; margin-top:1.8rem}
.echeance strong{display:block; font-family:"Gabarito",sans-serif; font-size:1.15rem}
@media(max-width:820px){.paiement{grid-template-columns:1fr}}

/* --- faq --- */
.faq{margin-top:2.4rem; border-top:1px solid rgba(23,18,16,.18)}
.faq details{border-bottom:1px solid rgba(23,18,16,.18)}
.faq summary{cursor:pointer; list-style:none; padding:1.35rem 0; font-family:"Gabarito",sans-serif; font-weight:700; font-size:1.1rem; display:flex; gap:1rem; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-size:1.5rem; color:var(--kola); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 1.4rem; max-width:70ch; opacity:.85; margin:0}

/* --- contact --- */
.contact{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,64px); margin-top:2.6rem; align-items:start}
form{display:grid; gap:.9rem}
label{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.7; display:block; margin-bottom:.35rem}
input,select,textarea{width:100%; font:inherit; font-size:1rem; padding:.85rem 1rem; border-radius:var(--r-sm);
  border:1px solid rgba(244,237,224,.3); background:var(--encre-2); color:var(--ivoire)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--kola-clair); outline-offset:1px}
textarea{min-height:120px; resize:vertical}
.wa{display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; font-family:"Gabarito",sans-serif; font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2rem); color:var(--kola-clair)}
.wa svg{width:34px;height:34px;flex:none}
@media(max-width:820px){.contact{grid-template-columns:1fr}}

/* --- refs --- */
.refs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,32px); margin-top:2.4rem}
.ref{border-top:2px solid var(--kola); padding-top:1rem}
.ref b{font-family:"Gabarito",sans-serif; font-size:1.15rem; display:block}
.ref span{font-size:.9rem; opacity:.7}
@media(max-width:760px){.refs{grid-template-columns:1fr}}

/* --- footer --- */
footer{background:var(--encre); color:var(--ivoire); padding:clamp(44px,6vw,70px) 0 2.4rem}
.pied{display:flex; flex-wrap:wrap; gap:1.6rem 3rem; align-items:flex-start; justify-content:space-between}
.pied a{text-decoration:none; opacity:.75}
.pied a:hover{opacity:1}
.pied nav{display:grid; gap:.5rem; font-size:.95rem}
.mention{margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(244,237,224,.16); font-size:.82rem; opacity:.55}

/* --- reveal --- */
.js .rv{opacity:0; transform:translateY(22px)}
.js .rv.vu{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* ============================================================
   Motifs · jeu graphique des trois pays
   ndop (Cameroun) · tissage (Cote d'Ivoire) · indigo (Senegal)
   wax et cauris (partages)
   ============================================================ */

section{position:relative; isolation:isolate; overflow-x:clip}
.tapis::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-repeat:repeat; opacity:.055;
}
.tapis--ndop::before{background-image:url("motif-ndop-encre.svg"); background-size:160px 160px}
.sombre.tapis--ndop::before{background-image:url("motif-ndop-ivoire.svg"); background-size:170px 170px; opacity:.05}
.tapis--wax::before{background-image:url("motif-wax-kola.svg"); background-size:190px 190px; opacity:.045}
.sombre.tapis--wax::before{background-image:url("motif-wax-ivoire.svg"); background-size:260px 260px; opacity:.022}
.tapis--indigo::before{background-image:url("motif-indigo-encre.svg"); background-size:150px 150px; opacity:.05}
.tapis--tissage::before{background-image:url("motif-tissage-encre.svg"); background-size:140px 140px; opacity:.04}

/* Bande de tissage entre deux sections */
.bande-tissage{height:18px; background:url("motif-tissage-kola.svg") repeat-x center/auto 18px; opacity:.9; background-color:var(--encre)}
.bande-tissage--claire{background-image:url("motif-tissage-encre.svg"); background-color:var(--sable); opacity:.9}

/* Separateur cauris */
.cauris{display:block; width:min(320px,70%); margin:2.8rem 0 0; height:26px;
  background:url("filet-cauris-kola.svg") no-repeat left center/contain}
.sombre .cauris{background-image:url("filet-cauris-clair.svg")}

/* Colonne decorative de cauris */
.pile-cauris{display:flex; flex-direction:column; gap:.9rem; align-items:center}
.pile-cauris img{width:34px; height:auto}

/* Decor du hero, deuxieme couche */
.hero__wax{position:absolute; left:-9%; bottom:-22%; width:min(46vw,520px); opacity:.14; z-index:1; pointer-events:none}

/* Cartouche de section a motif */
.cartouche{
  position:relative; border:1px solid rgba(244,237,224,.22); border-radius:var(--r-lg);
  padding:clamp(22px,3.4vw,38px); background:var(--encre-2); overflow:hidden;
}
.cartouche::before{
  content:""; position:absolute; inset:0; opacity:.07; pointer-events:none;
  background:url("motif-ndop-ivoire.svg") repeat; background-size:120px 120px;
}
.cartouche > *{position:relative}
.cartouche h3{margin-bottom:.6rem}
.cartouche p{margin:0; opacity:.85; font-size:.97rem}

/* Grille du dev sur mesure */
.grille-dev{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2.4vw,24px); margin-top:2.6rem}
@media(max-width:900px){.grille-dev{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grille-dev{grid-template-columns:1fr}}
.grille-dev .cartouche{display:flex; flex-direction:column; gap:.35rem}
.grille-dev .num{font-family:"Gabarito",sans-serif; font-weight:900; font-size:.82rem; letter-spacing:.14em; color:var(--kola-clair)}

/* Ligne de stacks */
.stacks{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem}
.stacks span{border:1px solid rgba(244,237,224,.24); border-radius:var(--r-pill); padding:.45rem 1rem; font-size:.86rem; font-weight:600; opacity:.85}

/* Refs sur 4 colonnes */
.refs--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.refs--4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.refs--4{grid-template-columns:1fr}}
.ref em{display:block; font-style:normal; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--kola); margin-top:.5rem; font-weight:700}

/* ============================================================
   Texture et relief · grain, papier, plis origami
   ============================================================ */

/* Grain superpose, sur fonds sombres uniquement */
.grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url("texture-grain.svg") repeat; background-size:200px 200px;
  opacity:.12; mix-blend-mode:overlay;
}
.creme.grain::after{background-image:url("texture-papier.svg"); background-size:160px 160px; opacity:.22; mix-blend-mode:multiply}
@media(prefers-reduced-motion:no-preference){
  .hero{background-image:radial-gradient(110% 85% at 82% 6%, rgba(166,56,43,.20), transparent 58%)}
}

/* Bande de pli origami entre deux sections */
.pli{display:block; width:100%; height:clamp(34px,4.4vw,60px); line-height:0}
.pli img{width:100%; height:100%; display:block; object-fit:fill}

/* Relief : cartes et cartouches en volume plie */
.relief{
  position:relative;
  box-shadow:
    0 1px 0 rgba(244,237,224,.10) inset,
    0 18px 36px -22px rgba(0,0,0,.75),
    0 2px 0 rgba(0,0,0,.35);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.relief:hover{
  transform:translateY(-4px) rotate(-.25deg);
  box-shadow:
    0 1px 0 rgba(244,237,224,.16) inset,
    0 26px 48px -22px rgba(0,0,0,.8),
    0 3px 0 rgba(0,0,0,.4);
}
.clair .relief, .creme .relief{
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 16px 30px -22px rgba(23,18,16,.5), 0 2px 0 rgba(23,18,16,.10);
}

/* Coin corne, effet feuille pliee */
.corne{position:relative; overflow:hidden}
.corne::after{
  content:""; position:absolute; top:0; right:0; width:34px; height:34px;
  background:linear-gradient(225deg, var(--ivoire) 0 50%, transparent 50%);
  opacity:.14;
}

/* Scene 3D legere pour la carte prix du hero */
.scene{perspective:1200px}
.scene > *{transform:rotateY(-4deg) rotateX(2deg); transform-style:preserve-3d; transition:transform .8s var(--ease)}
.scene:hover > *{transform:rotateY(0deg) rotateX(0deg)}
@media(max-width:880px){.scene > *{transform:none}}

/* Origami decoratif */
.origami{position:absolute; pointer-events:none; z-index:1}
.origami--eventail{right:-4%; bottom:-6%; width:min(34vw,320px); opacity:.5}
.origami--prisme{left:-3%; top:12%; width:min(14vw,120px); opacity:.35}
.origami--arche{right:-6%; top:-8%; width:min(40vw,420px); opacity:.5}
@media(max-width:880px){.origami{display:none}}

/* Le mark en relief plie, usage titre */
.mark-plie{width:clamp(84px,10vw,132px); height:auto; display:block; margin-bottom:1.4rem;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}

/* ============================================================
   Chevauchements et animations
   ============================================================ */

/* Chevauchement : un bloc qui mord sur la section precedente */
.chevauche{position:relative; z-index:5; margin-top:calc(clamp(48px,7vw,96px) * -1)}
.chevauche--bas{margin-bottom:calc(clamp(48px,7vw,96px) * -1); position:relative; z-index:5}
@media(max-width:760px){.chevauche{margin-top:calc(clamp(24px,5vw,40px) * -1)}
  .chevauche--bas{margin-bottom:calc(clamp(24px,5vw,40px) * -1)}}

/* Decalage vertical d'une colonne */
.decale{transform:translateY(clamp(18px,3vw,44px))}
@media(max-width:880px){.decale{transform:none}}

/* Superposition de deux plans dans une meme cellule */
.superpose{position:relative}
.superpose .plan-arriere{position:absolute; inset:auto auto -8% -6%; width:62%; z-index:0; opacity:.55}
.superpose .plan-avant{position:relative; z-index:2}
@media(max-width:880px){.superpose .plan-arriere{display:none}}

/* Titre a mot chevauchant */
.mot-fantome{position:absolute; left:-2%; top:-.35em; font-family:"Gabarito",sans-serif; font-weight:900;
  font-size:clamp(5rem,16vw,13rem); line-height:.8; color:transparent;
  -webkit-text-stroke:2px rgba(166,56,43,.16); z-index:0; pointer-events:none; user-select:none; white-space:nowrap}
.sombre .mot-fantome{-webkit-text-stroke-color:rgba(232,144,126,.14)}
@media(max-width:760px){.mot-fantome{display:none}}

/* Reveals : direction et cascade */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.js .rv--gauche{transform:translateX(-34px)}
.js .rv--droite{transform:translateX(34px)}
.js .rv--zoom{transform:scale(.94)}
.js .rv.vu{opacity:1; transform:none}

/* Parallaxe douce */
[data-parallax]{will-change:transform}

/* Rotation lente d'un decor */
@keyframes tourne{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.tourne{animation:tourne 90s linear infinite}
@media(prefers-reduced-motion:reduce){.tourne{animation:none}}

/* Soulignement anime des liens de nav */
.nav__liens a{position:relative}
.nav__liens a::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:var(--kola-clair); transition:right .35s var(--ease)}
.nav__liens a:hover::after{right:0}

/* Ligne de registre : glissement au survol */
.registre__ligne{transition:padding-left .4s var(--ease), background .4s var(--ease)}
.registre__ligne:hover{padding-left:.9rem; background:linear-gradient(90deg, rgba(166,56,43,.07), transparent 55%)}
.sombre .registre__ligne:hover{background:linear-gradient(90deg, rgba(232,144,126,.09), transparent 55%)}

@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1 !important; transform:none !important}
  .relief:hover{transform:none}
  .scene > *{transform:none}
}

/* Lockup de marque : grelas + africa */
.wm em{
  font-family:"Manrope",sans-serif; font-style:normal; font-weight:700;
  font-size:.38em; letter-spacing:.22em; text-transform:uppercase;
  margin-left:.45em; color:var(--kola-clair); vertical-align:.28em;
}
footer .wm em, header .wm em{opacity:.9}
@media(max-width:420px){.wm em{display:none}}

/* ============================================================
   Bandeau de références clients · rail d'écrans
   ============================================================ */
.mur{margin-top:2.8rem; position:relative}
.mur__piste{
  display:flex; gap:clamp(14px,2vw,22px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem .4rem 1.4rem; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad);
  scrollbar-width:none;
}
.mur__piste::-webkit-scrollbar{display:none}
.case{
  flex:0 0 clamp(230px,25vw,272px); scroll-snap-align:start;
  border-radius:var(--r-lg); padding:1.3rem 1.3rem 0; color:var(--ivoire);
  display:flex; flex-direction:column; min-height:376px; overflow:hidden; position:relative;
  background-color:var(--case-1, #171210);
  background-image:linear-gradient(165deg, var(--case-2, #241B17) 0%, var(--case-1, #171210) 78%);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.7);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.case:hover{transform:translateY(-5px); box-shadow:0 26px 44px -24px rgba(0,0,0,.8)}
.case--kola{--case-1:#8E2C21; --case-2:#A6382B}
.case--feuille{--case-1:#22493D; --case-2:#2E5E4E}
.case--sable{--case-1:#6E2119; --case-2:#8E2C21}
.case__tag{font-size:.68rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; opacity:.75}
.case__nom{font-family:"Gabarito",sans-serif; font-weight:900; font-size:1.18rem; line-height:1.05; margin:.35rem 0 .3rem}
.case__quoi{font-size:.85rem; opacity:.78; line-height:1.42; margin:0 0 1rem}
.case__ecran{
  margin-top:auto; align-self:center; width:64%; border-radius:16px 16px 0 0;
  border:5px solid rgba(23,18,16,.55); border-bottom:0; overflow:hidden;
  transform:translateY(10px) rotate(-3deg); transform-origin:bottom center;
  box-shadow:0 -6px 26px -8px rgba(0,0,0,.55);
  transition:transform var(--dur) var(--ease);
}
.case:hover .case__ecran{transform:translateY(4px) rotate(-1.5deg)}
.case__ecran img{display:block; width:100%; height:auto}
.case--texte{justify-content:flex-start; padding-bottom:1.3rem}
.case--texte .case__mark{width:52px; height:52px; margin-top:auto; opacity:.9}
.case__liste{list-style:none; margin:.4rem 0 0; padding:0; font-size:.85rem; display:grid; gap:.5rem; opacity:.85}
.case__liste li{display:flex; gap:.5rem; align-items:flex-start}
.case__liste li::before{content:""; width:11px;height:11px;margin-top:.4em;flex:none;background:currentColor;
  -webkit-mask:url("logo-mark.svg") center/contain no-repeat; mask:url("logo-mark.svg") center/contain no-repeat}
.mur__note{margin-top:.6rem; font-size:.85rem; opacity:.6}
@media(max-width:520px){.case{flex-basis:78vw}}

/* ============================================================
   Patterns d'animation
   Lois : impeccable/animate (durees, easings, un seul moment
   signature, prefers-reduced-motion). Registre : gpt-tasteskill
   (pin, scrub, scale-on-scroll, hover physics), reverse en GSAP CDN.
   ============================================================ */

/* --- Barre de progression de lecture (couche feedback) --- */
.progres{position:absolute; left:0; right:0; bottom:0; height:2px; background:transparent; overflow:hidden}
.progres span{display:block; height:100%; width:100%; background:var(--kola-clair);
  transform:scaleX(0); transform-origin:0 50%}

/* --- Pattern 1 · choregraphie d'entree du hero (le moment signature) --- */
.js .lever{opacity:0}
.js .lever.pret{opacity:1}

/* --- Pattern 2 · titre epingle pendant que le registre defile --- */
.semaine{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); column-gap:clamp(24px,5vw,72px); row-gap:1.6rem; align-items:start}
.colle{position:sticky; top:104px; align-self:start}
.semaine__liste{margin-top:0; border-top:1px solid rgba(23,18,16,.16)}
.semaine__liste .registre__ligne{grid-template-columns:78px minmax(0,1fr); row-gap:0; column-gap:clamp(12px,2vw,26px); align-items:baseline}
.semaine__liste .registre__ligne p{grid-column:2; margin-top:.45rem}
@media(max-width:900px){
  .semaine{grid-template-columns:1fr; gap:1.4rem}
  .colle{position:static}
  .semaine__liste{margin-top:1.4rem}
}

/* --- Pattern 3 · revelation de texte au scrub --- */
.scrub{display:inline}
.scrub .mot{display:inline-block; opacity:.16; will-change:opacity}
@media(prefers-reduced-motion:reduce){.scrub .mot{opacity:1}}

/* --- Pattern 4 · physique de survol (cartes, boutons, liens) --- */
.btn{will-change:transform}
.btn:active{transform:translateY(0) scale(.97); transition-duration:var(--t-feedback)}
.case:active{transform:translateY(-2px) scale(.995)}
.cartouche.relief{transition:transform var(--t-layout) var(--ease-out-quart), box-shadow var(--t-layout) var(--ease-out-quart)}
.tarif{transition:background var(--t-etat) var(--ease-out-quart), padding-left var(--t-etat) var(--ease-out-quart)}
.tarif:hover{padding-left:.9rem; background:linear-gradient(90deg, rgba(166,56,43,.06), transparent 60%)}
.tarif--phare:hover{background:linear-gradient(90deg, rgba(166,56,43,.12), transparent 70%)}
.op{transition:border-color var(--t-etat) var(--ease-out-quart), transform var(--t-etat) var(--ease-out-quart)}
.op:hover{border-color:var(--kola-clair); transform:translateY(-2px)}
.faq summary{transition:color var(--t-etat) var(--ease-out-quart), padding-left var(--t-etat) var(--ease-out-quart)}
.faq summary:hover{color:var(--kola); padding-left:.5rem}
.sombre .faq summary:hover{color:var(--kola-clair)}
input,select,textarea{transition:border-color var(--t-etat) var(--ease-out-quart), background var(--t-etat) var(--ease-out-quart)}
input:focus,textarea:focus,select:focus{background:#2C211B}

/* --- Pattern 5 · echelle et fondu des ecrans au defilement --- */
.case__ecran img{will-change:transform}

/* --- Le ruban se met en pause au survol (respect de la lecture) --- */
.ruban:hover .ruban__piste{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .progres span{transform:scaleX(0) !important}
  .js .lever{opacity:1 !important}
  .btn:active, .case:active, .tarif:hover, .op:hover, .faq summary:hover{transform:none; padding-left:0}
}