/* Maison Bana Bilaka. Grammaire commune posée sur le système du studio.
   Jetons : papier #F6F3EE, encre #14110F, latérite #B8471F (un seul usage par écran),
   pierre #D8D1C6, sable #E7E1D7, gris #6B645C. Instrument Serif + Inter.
   Espacements et rayons repris du design-system (design-system/maison-bana-bilaka/MASTER.md),
   palette et polices imposées par Judith (05/09/2026). */
:root{
  --papier:#F6F3EE; --encre:#14110F; --laterite:#B8471F; --pierre:#D8D1C6; --sable:#E7E1D7; --gris:#6B645C; --gris-fonce:#5A554E;
  --nuit:#0C0A09;
  --esp-xs:4px; --esp-sm:8px; --esp-md:24px; --esp-lg:32px; --esp-xl:48px; --esp-2xl:64px; --esp-3xl:96px;
  --rayon:8px; --rayon-carte:12px; --rayon-pilule:999px;
  --ombre-sm:0 1px 2px rgba(20,17,15,.05); --ombre-md:0 4px 6px rgba(20,17,15,.10); --ombre-lg:0 10px 15px rgba(20,17,15,.10);
  --vite:180ms; --moyen:300ms; --lent:600ms; --courbe:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
img,video{max-width:100%}

/* ---------- barre de navigation commune ---------- */
.barre-maison{position:sticky;top:0;z-index:60;background:rgba(246,243,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--sable)}
.barre-maison .dedans{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-md);height:66px;padding-left:6vw;padding-right:6vw}
.barre-maison .marque-maison{font-family:'Instrument Serif',Georgia,serif;font-size:19px;letter-spacing:.01em;white-space:nowrap;color:var(--encre);display:inline-flex;align-items:center;min-height:44px}
.barre-maison .marque-maison em{font-style:italic}
.barre-maison .menu{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.barre-maison .menu a{color:var(--gris);padding:11px 0;display:inline-block;min-height:44px;line-height:22px;transition:color var(--vite) ease;border-bottom:1px solid transparent}
.barre-maison .menu a:hover{color:var(--encre)}
.barre-maison .menu a[aria-current="page"]{color:var(--encre);border-bottom-color:var(--laterite)}
.barre-maison .langue{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.barre-maison .action{display:inline-flex;align-items:center;gap:9px;background:var(--encre);color:var(--papier);border-radius:var(--rayon-pilule);padding:11px 18px;font-size:14px;font-weight:500;min-height:44px;white-space:nowrap;transition:background var(--vite) ease,transform var(--vite) ease}
.barre-maison .action:hover{background:var(--laterite)}
.barre-maison .action:active{transform:translateY(1px)}
.barre-maison .action svg{width:15px;height:15px;flex:none}
.bouton-menu{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:1px solid var(--sable);border-radius:var(--rayon);color:var(--encre);cursor:pointer}
.bouton-menu svg{width:20px;height:20px}
.tiroir{display:none;border-top:1px solid var(--sable);padding:var(--esp-sm) 6vw var(--esp-md)}
.tiroir a{display:block;padding:13px 0;font-size:16px;font-weight:500;color:var(--encre);border-bottom:1px solid var(--sable);min-height:44px}
.tiroir a:last-child{border-bottom:none}
.tiroir[data-ouvert="oui"]{display:block}
@media (max-width:1000px){
  .barre-maison .menu{display:none}
  .bouton-menu{display:inline-flex}
}
@media (max-width:520px){.barre-maison .action{display:none}}

/* ---------- héros sombre du hall ---------- */
.heros-hall{position:relative;min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--nuit);overflow:hidden;color:var(--papier)}
.heros-hall .fond{position:absolute;inset:0}
.heros-hall .fond video,.heros-hall .fond img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.heros-hall .voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,10,9,.55) 0%,rgba(12,10,9,.18) 34%,rgba(12,10,9,.72) 82%,rgba(12,10,9,.94) 100%)}
.heros-hall .dedans{position:relative;padding:0 6vw var(--esp-3xl);max-width:1240px;width:100%}
.heros-hall h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2.3rem,6vw,4.8rem);line-height:1.03;letter-spacing:-.02em;max-width:17ch;text-wrap:balance;color:var(--papier)}
.heros-hall h1 em{font-style:italic}
.heros-hall .promesse{margin-top:var(--esp-md);max-width:56ch;font-size:clamp(1rem,1.6vw,1.16rem);color:rgba(246,243,238,.86);line-height:1.6}
.heros-hall .boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--esp-lg)}
.bouton{display:inline-flex;align-items:center;gap:9px;border-radius:var(--rayon-pilule);padding:14px 24px;font-size:15px;font-weight:500;min-height:48px;transition:background var(--vite) ease,color var(--vite) ease,border-color var(--vite) ease,transform var(--vite) ease;cursor:pointer}
.bouton:active{transform:translateY(1px)}
.bouton svg{width:16px;height:16px;flex:none}
.bouton-plein{background:var(--laterite);color:var(--papier);border:1px solid var(--laterite)}
.bouton-plein:hover{background:#9E3C1A;border-color:#9E3C1A}
.bouton-clair{background:transparent;color:var(--papier);border:1px solid rgba(246,243,238,.55)}
.bouton-clair:hover{background:rgba(246,243,238,.12);border-color:var(--papier)}
.bouton-encre{background:var(--encre);color:var(--papier);border:1px solid var(--encre)}
.bouton-encre:hover{background:var(--laterite);border-color:var(--laterite)}
.bouton-contour{background:transparent;color:var(--encre);border:1px solid var(--encre)}
.bouton-contour:hover{background:var(--encre);color:var(--papier)}
.heros-hall .signal{position:absolute;right:6vw;bottom:var(--esp-md);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:rgba(246,243,238,.6)}

/* ---------- corps en papier ---------- */
.corps-maison{background:var(--papier);color:var(--encre)}
.bloc{padding:var(--esp-3xl) 6vw}
.bloc-large{max-width:1240px;margin:0 auto}
.chapeau{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--sable);padding-bottom:14px;margin-bottom:var(--esp-xl)}
.chapeau h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.05;letter-spacing:-.01em}
.etiquette{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);font-weight:500}

/* portes */
.portes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-lg)}
.porte{display:block;background:var(--papier);border:1px solid var(--sable);border-radius:var(--rayon-carte);overflow:hidden;transition:border-color var(--moyen) ease,box-shadow var(--moyen) ease,transform var(--moyen) ease}
.porte:hover{border-color:var(--pierre);box-shadow:var(--ombre-lg);transform:translateY(-3px)}
.porte .vitre{aspect-ratio:16/10;overflow:hidden;background:var(--pierre)}
.porte .vitre img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--lent) var(--courbe);will-change:transform}
.porte:hover .vitre img{transform:scale(1.05)}
.porte .texte{padding:var(--esp-md)}
.porte h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.6rem;line-height:1.1;display:flex;align-items:center;justify-content:space-between;gap:12px}
.porte h3 svg{width:18px;height:18px;flex:none;color:var(--laterite);transition:transform var(--moyen) var(--courbe)}
.porte:hover h3 svg{transform:translateX(5px)}
.porte p{margin-top:var(--esp-sm);color:var(--gris);font-size:15px;line-height:1.55}
@media (max-width:1000px){.portes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.portes{grid-template-columns:1fr}}

/* preuve chiffrée */
.preuve{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--esp-lg);border-top:1px solid var(--sable);border-bottom:1px solid var(--sable);padding:var(--esp-xl) 0}
.preuve .cellule b{display:block;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preuve .cellule span{display:block;margin-top:var(--esp-sm);font-size:13px;color:var(--gris)}
.source-chiffres{margin-top:var(--esp-md);font-size:12.5px;color:var(--gris)}
.liste-chaines{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:var(--esp-md);font-size:14px}
.liste-chaines a{color:var(--gris);border-bottom:1px solid var(--pierre);padding:4px 0;transition:color var(--vite) ease,border-color var(--vite) ease}
.liste-chaines a:hover{color:var(--encre);border-color:var(--encre)}
@media (max-width:860px){.preuve{grid-template-columns:repeat(2,1fr);gap:var(--esp-md)}}

/* manifeste */
.manifeste p{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(1.4rem,3vw,2.15rem);line-height:1.28;max-width:26ch;text-wrap:balance}
.manifeste p+p{margin-top:var(--esp-md)}
.manifeste .signature{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--laterite);margin-top:var(--esp-lg);font-size:clamp(1.2rem,2.4vw,1.7rem)}

/* lettre de la maison */
.lettre{background:var(--sable);border-radius:var(--rayon-carte);padding:var(--esp-xl) var(--esp-lg)}
.lettre h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;max-width:20ch}
/* sur le sable, le gris clair tombe a 4,48:1 : on descend d'un cran pour tenir le AA */
.lettre p{margin-top:var(--esp-sm);color:var(--gris-fonce);max-width:56ch;font-size:15px}
.lettre form{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--esp-md);align-items:flex-end}
.champ{display:flex;flex-direction:column;gap:6px;flex:1 1 260px}
.champ label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-fonce);font-weight:500}
.champ input{padding:13px 16px;min-height:48px;border:1px solid var(--pierre);border-radius:var(--rayon);font-size:16px;font-family:inherit;background:var(--papier);color:var(--encre);transition:border-color var(--vite) ease,box-shadow var(--vite) ease}
.champ input:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(20,17,15,.12)}

/* bandeau des conditions du studio */
.bandeau-conditions{background:var(--encre);color:var(--papier);padding:var(--esp-md) 6vw}
.bandeau-conditions .dedans{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font-size:13.5px}
.bandeau-conditions b{font-weight:500}
.bandeau-conditions .puce{display:inline-flex;align-items:center;gap:8px;color:rgba(246,243,238,.88)}
.bandeau-conditions .puce svg{width:14px;height:14px;flex:none;color:var(--papier)}
.appartenance{font-size:13px;letter-spacing:.02em;color:var(--gris);margin-top:10px}

/* pied de page de la maison */
.pied-maison{background:var(--papier);border-top:1px solid var(--sable);padding:var(--esp-xl) 6vw var(--esp-lg)}
.pied-maison .dedans{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--esp-lg)}
.pied-maison .marque{font-family:'Instrument Serif',Georgia,serif;font-size:1.35rem}
.pied-maison p,.pied-maison li{font-size:13px;color:var(--gris);line-height:1.7}
.pied-maison h3{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);font-weight:500;margin-bottom:var(--esp-sm)}
.pied-maison ul{list-style:none;margin:0;padding:0}
.pied-maison a{color:var(--gris);transition:color var(--vite) ease}
.pied-maison a:hover{color:var(--encre)}
.pied-maison .bas{max-width:1240px;margin:var(--esp-lg) auto 0;padding-top:var(--esp-md);border-top:1px solid var(--sable);font-size:12px;color:var(--gris);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (max-width:800px){.pied-maison .dedans{grid-template-columns:1fr}}

/* pages d'annonce (Academy, Livres) */
.annonce{padding:var(--esp-3xl) 6vw var(--esp-xl)}
.annonce .dedans{max-width:1240px;margin:0 auto}
.annonce h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(2.2rem,5.4vw,3.9rem);line-height:1.04;letter-spacing:-.02em;max-width:18ch;text-wrap:balance;margin-top:var(--esp-md)}
.annonce h1 em{font-style:italic}
.annonce .amorce{margin-top:var(--esp-md);max-width:58ch;color:var(--gris);font-size:17px}
.promesses{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-lg);margin-top:var(--esp-2xl)}
.promesses .item{border-top:1px solid var(--sable);padding-top:var(--esp-md)}
.promesses .item svg{width:22px;height:22px;color:var(--laterite);display:block;margin-bottom:12px}
.promesses .item h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.35rem;line-height:1.15}
.promesses .item p{margin-top:var(--esp-sm);color:var(--gris);font-size:15px;line-height:1.6}
@media (max-width:860px){.promesses{grid-template-columns:1fr}}

/* chaînes */
.chaines{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--esp-lg)}
.chaine{border-top:1px solid var(--sable);padding-top:var(--esp-md);display:block}
.chaine h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:1.45rem;line-height:1.15;display:flex;align-items:center;justify-content:space-between;gap:12px}
.chaine h3 svg{width:16px;height:16px;color:var(--laterite);flex:none;transition:transform var(--moyen) var(--courbe)}
.chaine:hover h3 svg{transform:translateX(5px)}
.chaine p{margin-top:var(--esp-sm);color:var(--gris);font-size:15px;line-height:1.6}
.chaine .compte{margin-top:10px;font-size:12.5px;color:var(--gris);font-variant-numeric:tabular-nums}
@media (max-width:760px){.chaines{grid-template-columns:1fr}}

/* apparitions */
[data-reveal]{opacity:0;transform:translateY(18px)}
.pas-de-gsap [data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important;transform:none!important}
  .porte:hover .vitre img{transform:none}
  .heros-hall .fond video,.heros-hall .fond img{will-change:auto}
  *{scroll-behavior:auto!important}
}