/* ============================================================
Landing Academie Vases d'Honneur - styles des sections.
Les couleurs et le rythme viennent de tokens.css, lui-meme
DERIVE des primitives de l'application (voir jetons.mjs) :
n'ecrivez jamais une couleur en dur ici.
TYPOGRAPHIE (02/08/2026)
------------------------
Le texte d'interface suit l'echelle de l'application :
var(--vh-text-xs..2xl). Elle descendait ici jusqu'a 9,5px.
Trois familles de valeurs y echappent, et c'est deliberé :
1. TYPOGRAPHIE D'AFFICHAGE - les clamp() des titres de hero et
de section (jusqu'a 60px). L'echelle de l'app s'arrete a 32px
parce qu'elle regit du texte d'INTERFACE ; un titre de vitrine
n'a ni la meme fonction ni les memes contraintes. Les plier a
2xl reviendrait a fabriquer une echelle a rallonge que le
produit n'utiliserait jamais.
2. LA MAQUETTE DE TELEPHONE (.phone) - 7,5 a 9px. Ce n'est pas du
texte mais un DESSIN de l'application, incline de 8 degres. Le
lire n'est pas le but ; le reconnaitre l'est.
3. Les micro-valeurs <= 3px, qui alignent plutot qu'elles n'espacent.
============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-padding-top est indispensable : l'en-tete est fixe et haut de 74 px.
Sans lui, un clic sur une entree du menu amene la section a y=0 et ses
premieres lignes passent sous la barre. */
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{font-family:var(--sans);color:var(--ink);background:#ffffff;font-size:var(--vh-text-md);line-height:1.65;overflow-x:hidden}
/* height:auto est indispensable : les images portent des attributs width/height
(qui suppriment le saut de mise en page au chargement), et sans cela cette
hauteur en dur écraserait le calcul par aspect-ratio du CSS. Les règles plus
loin qui fixent une hauteur explicite restent prioritaires. */
img{max-width:100%;height:auto;display:block}
/* Titres en Poppins. Cette géométrique demande un interlettrage plus serré que
Georgia aux grandes tailles, et une hauteur de ligne plus courte : sans ces
ajustements, les titres paraissent lâches et flottants. */
h1,h2,h3,.serif{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;line-height:1.15}
h1{letter-spacing:-.035em}
section{padding:var(--sec) 24px}
.wrap{max-width:1160px;margin:0 auto}
.overline{font-size:var(--vh-text-xs);font-weight:700;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold-dark)}
.s-head{max-width:660px;margin:0 auto 44px;text-align:center}
.s-head h2{font-size:clamp(27px,3.6vw,40px);margin-top:12px;line-height:1.18}
.s-head p{color:var(--ink-2);margin-top:14px;font-size:var(--vh-text-md)}
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:12px;padding:15px 28px;font-family:var(--sans);font-size:var(--vh-text-md);font-weight:600;cursor:pointer;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s}
.btn:hover{transform:translateY(-2px)}
.btn-green{background:var(--green);color:#fff;box-shadow:0 8px 24px rgba(14,111,102,.28)}
.btn-green:hover{background:var(--green-d)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--green-950);box-shadow:0 8px 24px rgba(201,162,39,.35)}
.btn-line{background:transparent;color:var(--ink);border:1.5px solid #d8d2c4}
.btn-line:hover{border-color:var(--ink);background:#fff}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes floatTilt{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-8deg) translateY(-13px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
/* ===== Header ===== */
/* Filet de separation sous l'en-tete : leger et gris translucide des le haut de
page, un peu plus marque une fois l'en-tete devenu opaque. */
header{position:fixed;inset:0 0 auto 0;z-index:50;padding:0 24px;border-bottom:1px solid rgba(27,36,39,.07);transition:background .3s,border-color .3s}
header .bar{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:clamp(12px,1.9vw,28px);height:74px}
/* Fond quasi opaque : a .92 les gros titres du hero restaient lisibles en
filigrane derriere la barre. Le flou seul ne suffit pas a les effacer. */
header.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* Bandeau de la prochaine rentrée, au-dessus de la barre. Visible en haut de page seulement :
il s'efface dès qu'on défile, et les ancres gardent leurs 92 px de marge. En haut de page il
loge dans la marge supérieure du hero (150 px, 138 px sous 940 px) : son arrivée, après la
réponse de l'API, ne décale donc rien. */
.intake-bar{margin:0 -24px;padding:8px 24px;background:var(--green-950);color:rgba(255,255,255,.86);font-size:var(--vh-text-sm);line-height:1.45;text-align:center}
.intake-bar p{max-width:1160px;margin:0 auto}
.intake-bar b{color:#fff;font-weight:600}
.intake-bar a{margin-left:10px;color:var(--gold-2);font-weight:600;text-decoration:none;white-space:nowrap}
.intake-bar a:hover{text-decoration:underline}
header.scrolled .intake-bar{display:none}
@media(max-width:760px){.intake-bar{font-size:var(--vh-text-xs)}}
/* Logo : le PNG livre est deja detoure (1524x515, fond transparent), il remplit
donc directement sa boite. Ne pas y remettre de recadrage : les anciens
decalages negatifs visaient une source 1920x1080 a larges marges et rognaient
le fichier actuel (le « A » d'Academie disparaissait). Le ratio du conteneur
reprend celui du fichier : aucune deformation, place reservee avant chargement. */
.logo{display:flex;align-items:center;text-decoration:none;color:var(--ink)}
.logo-mark{display:block;height:44px;aspect-ratio:1524/515;flex-shrink:0}
.logo-mark img{display:block;width:100%;height:100%;object-fit:contain}
.logo-chip{background:#fff;border-radius:12px;padding:10px 16px;display:inline-block}
.logo-chip .logo-mark{height:34px}
/* L'en-tete se compresse progressivement au lieu de casser d'un coup :
les entrees de menu, les boutons et leurs ecarts suivent la largeur
de la fenetre entre 880 px et 1360 px. */
nav.main{display:flex;gap:clamp(13px,1.8vw,26px);margin-left:auto}
nav.main a{color:var(--ink-2);text-decoration:none;font-size:clamp(var(--vh-text-sm),.95vw,var(--vh-text-base));font-weight:600;white-space:nowrap}
nav.main a:hover{color:var(--green)}
header .btn{padding:11px clamp(14px,1.5vw,22px);font-size:clamp(var(--vh-text-sm),.95vw,var(--vh-text-base));white-space:nowrap}
/* Seuil cale sur l'espagnol, la langue au menu le plus long : sous 980 px
les entrees ne tiennent plus sur une ligne, le menu s'efface. C'est lui
qui portait le margin-left:auto — les controles restants le reprennent
pour rester colles au bord droit. */
@media(max-width:980px){nav.main{display:none}.lang{margin-left:auto}}
/* ===== Hero ===== */
.hero{padding:150px 24px var(--sec);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-220px;right:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--gold-50),transparent 68%)}
.hero::after{content:"";position:absolute;bottom:-260px;left:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--green-50),transparent 66%)}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;position:relative;z-index:2}
/* 138 px = les 74 px de l'en-tete fixe + 64 px de respiration. En dessous,
la premiere ligne du hero venait friser la barre. */
@media(max-width:940px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:138px}}
.hero h1{font-size:clamp(36px,5.1vw,60px);line-height:1.1}
.hero h1 em{font-style:italic;color:var(--green)}
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:12px;background:var(--gold-50);z-index:-1;border-radius:4px}
.hero .sub{margin-top:22px;font-size:var(--vh-text-md);color:var(--ink-2);max-width:500px}
.hero .ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:14px;margin-top:34px}
/* flex-shrink:0 est indispensable : sans lui, les avatars sont comprimes
par le texte sur ecran etroit et deviennent ovales (largeur < hauteur). */
.trust .avs{display:flex;flex:none}
.trust .avs img{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;border:2.5px solid var(--ivory);margin-left:-10px}
.trust .avs img:first-child{margin-left:0}
.trust p{font-size:var(--vh-text-sm);color:var(--ink-2)}
.trust b{color:var(--ink)}
.stars{color:var(--gold);letter-spacing:2px;font-size:var(--vh-text-base)}
.hero-visual{position:relative;min-height:480px}
/* Cadre carre, comme la photo source : au format portrait, object-fit:cover
rognait les cotes et amputait la Bible et la main du pasteur. */
.hv-main{width:86%;aspect-ratio:1/1;border-radius:26px;object-fit:cover;box-shadow:0 34px 70px rgba(27,36,39,.25)}
.hv-card{position:absolute;top:6%;right:-2%;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:0 20px 44px rgba(27,36,39,.18);font-size:var(--vh-text-sm);animation:floatY 7s ease-in-out infinite;z-index:3}
.hv-card b{display:block;font-family:var(--serif);font-size:var(--vh-text-lg);color:var(--green)}
.hv-badge{position:absolute;left:-3%;bottom:16%;background:var(--green-d);color:#fff;border-radius:14px;padding:12px 16px;font-size:var(--vh-text-xs);box-shadow:0 18px 40px rgba(5,39,35,.4);animation:floatY 8s ease-in-out infinite;z-index:3;display:flex;gap:10px;align-items:center}
.hv-badge .dot{width:9px;height:9px;flex:none;border-radius:50%;background:#ff6b5e}
@media(max-width:940px){.hero-visual{min-height:0}.hv-main{width:100%}}
/* ===== Marquee ===== */
.strip{background:var(--green-950);color:rgba(255,255,255,.78);padding:17px 0;overflow:hidden}
.marquee{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee ul{display:flex;list-style:none;gap:56px;padding:0 28px;font-size:var(--vh-text-base);letter-spacing:.5px;white-space:nowrap}
.marquee li b{color:var(--gold-2)}
/* ===== Stats ===== */
.stats{padding:var(--sec) 24px;background:var(--ivory)}
.stats .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;text-align:center}
.stat b{font-family:var(--serif);font-size:clamp(34px,4vw,46px);color:var(--green);display:block;line-height:1}
.stat b .count{font-size:inherit;font-family:inherit;color:inherit;display:inline;margin:0;line-height:inherit}
.stat > span{display:block;margin-top:10px;color:var(--ink-2);font-size:var(--vh-text-base)}
.stat .bar{width:34px;height:3px;background:var(--gold);margin:16px auto 0;border-radius:2px}
/* ===== Méthode (cartes photo) ===== */
.mcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.mcard{background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.mcard:hover{transform:translateY(-6px);box-shadow:0 26px 52px rgba(27,36,39,.13)}
.mcard .ph{position:relative;aspect-ratio:16/10.5;overflow:hidden}
.mcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mcard:hover .ph img{transform:scale(1.05)}
.mcard .ph .tg{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);border-radius:8px;padding:5px 12px;font-size:var(--vh-text-xs);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mcard .bd{padding:24px 26px 28px}
.mcard h3{font-size:var(--vh-text-lg);margin-bottom:8px}
.mcard p{font-size:var(--vh-text-base);color:var(--ink-2)}
.tg.c1{color:var(--green)} .tg.c2{color:var(--coral)} .tg.c3{color:var(--gold-dark)}
/* ===== Programme ===== */
.prog{background:var(--ivory-2)}
/* Grand écran : les trois classes de front, la bande du stage en dessous. Plus étroit, chaque
classe devient à son tour une bande pleine largeur, bâtie comme celle du stage — texte à gauche,
cours à droite. Une grille à deux colonnes laissait la Classe III seule sur sa ligne et étirait
la Classe II à la hauteur des onze cours de la Classe I. Au téléphone, tout s'empile. */
.prog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.prog-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:980px) and (min-width:641px){
.pcard:not(.stage){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"lvl list" "name list" "desc list" "foot list";column-gap:52px;align-items:start}
.pcard:not(.stage) .lvl{grid-area:lvl}
.pcard:not(.stage) h3{grid-area:name}
.pcard:not(.stage) p.d{grid-area:desc}
.pcard:not(.stage) ul{grid-area:list;margin:0}
.pcard:not(.stage) .foot{grid-area:foot;align-self:end;margin-top:0}
}
.pcard{background:var(--card);border-radius:var(--r);padding:30px 26px;position:relative;border-top:5px solid var(--green);box-shadow:0 6px 22px rgba(27,36,39,.06);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 48px rgba(27,36,39,.12)}
.pcard.a2{border-top-color:var(--coral)}
.pcard.a3{border-top-color:var(--gold)}
.pcard .lvl{font-size:var(--vh-text-xs);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--green)}
.pcard.a2 .lvl{color:var(--coral)} .pcard.a3 .lvl{color:var(--gold-dark)}
.pcard h3{font-size:var(--vh-text-xl);margin:10px 0 4px}
.pcard p.d{color:var(--ink-3);font-size:var(--vh-text-base);margin-bottom:16px}
.pcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.pcard li{display:flex;gap:10px;font-size:var(--vh-text-base);color:var(--ink-2)}
.pcard li::before{content:"✓";color:var(--green);font-weight:700}
.pcard.a2 li::before{color:var(--coral)} .pcard.a3 li::before{color:var(--gold-dark)}
.pcard .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:var(--vh-text-sm);color:var(--ink-3);align-items:center;gap:10px;flex-wrap:wrap}
.pcard ul{margin-bottom:18px}
.pcard h3{min-height:0}
.tagx{background:var(--green-50);color:var(--green);border-radius:7px;padding:4px 11px;font-size:var(--vh-text-xs);font-weight:700}
.pcard.a2 .tagx{background:var(--coral-50);color:var(--coral)}
.pcard.a3 .tagx{background:var(--gold-50);color:var(--gold-dark)}
/* Intertitre dans une liste de cours (les doctrines de la Classe I) : pas une entrée, donc pas de coche. */
.pcard li.grp{margin-top:6px;font-size:var(--vh-text-xs);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-3)}
.pcard li.grp::before{content:none}
/* Classe IV — le stage. Bande pleine largeur sous les trois classes d'enseignement :
le texte à gauche, les étapes numérotées à droite, empilés sur petit écran. */
.pcard.stage{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.1fr;gap:26px 52px;align-items:center}
.pcard.stage .d{margin-bottom:16px}
.pcard.stage .stage-intro .tagx{display:inline-block}
.pcard.stage .stage-steps{list-style:none;counter-reset:etape;display:flex;flex-direction:column;gap:16px}
.pcard.stage .stage-steps li{counter-increment:etape;align-items:center;gap:14px}
.pcard.stage .stage-steps li::before{content:counter(etape);flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--gold-50);color:var(--gold-dark);font-size:var(--vh-text-sm)}
@media(max-width:640px){.pcard.stage{grid-template-columns:1fr}}
/* ===== Église & fondateur ===== */
.church{background:var(--ivory);overflow:hidden}
.church .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center}
@media(max-width:940px){.church .wrap{grid-template-columns:1fr;gap:34px}}
/* z-index:0 est indispensable : il ouvre un contexte d'empilement pour que le
cadre decoratif, en z-index -1, se glisse derriere le portrait sans passer
derriere le fond blanc de la section. */
.pastor{position:relative;z-index:0}
/* Cadre decale : un simple filet vert, deporte vers le haut a droite, qui
ramene la couleur de la charte autour du champagne du portrait. */
.pastor::before{content:"";position:absolute;inset:-20px -20px 44px 44px;border:2px solid rgba(14,111,102,.34);border-radius:24px;z-index:-1;pointer-events:none}
@media(max-width:520px){.pastor::before{inset:-12px -12px 28px 28px}}
/* Fond champagne compose dans le fichier, aux memes proportions que le cadre :
rien a raccorder. La famille or plutot que le vert — la section est sur fond
blanc et le panneau « L'application » juste en dessous est deja vert profond.
Le degrade CSS ne sert que de filet si le ratio du cadre venait a changer. */
.pastor img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border:2px solid rgba(201,162,39,.42);border-radius:22px;box-shadow:0 28px 60px rgba(27,36,39,.24);background:linear-gradient(115deg,#faf4e6,#d6c7a6)}
.pastor .cap{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(8,63,58,.9);backdrop-filter:blur(6px);color:#fff;border-radius:14px;padding:13px 16px}
.pastor .cap b{display:block;font-family:var(--serif);font-size:var(--vh-text-md)}
.pastor .cap span{font-size:var(--vh-text-xs);opacity:.82}
.church h2{font-size:clamp(26px,3.4vw,38px);line-height:1.18}
.church h2 em{font-style:italic;color:var(--green)}
.church .quote{font-family:var(--serif);font-style:italic;font-size:var(--vh-text-md);line-height:1.55;color:var(--ink);border-left:3px solid var(--gold);padding-left:18px;margin:22px 0}
.church p.t{color:var(--ink-2);font-size:var(--vh-text-md)}
.church .mini{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.church .mini figure{margin:0;position:relative;border-radius:14px;overflow:hidden}
.church .mini img{width:100%;aspect-ratio:4/3.4;object-fit:cover;transition:transform .5s}
.church .mini figure:hover img{transform:scale(1.05)}
.church .mini figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 12px 9px;background:linear-gradient(transparent,rgba(8,20,18,.82));color:#fff;font-size:var(--vh-text-xs);font-weight:600}
/* ===== Boutique ===== */
.shop{background:var(--ivory-2)}
/* Les quatre livres de front sur grand ecran ; en dessous, trois, deux puis un
(le suivant depasse), pour qu'une carte garde ~230 px — titre, prix et bouton
« Commander » y tiennent. Le defilement est natif (scroll-snap), donc fluide
au doigt ; les fleches precedent / suivant le pilotent, et le script les
masque quand tout tient. */
.bk-carousel{position:relative}
.bk-grid{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;overscroll-behavior-x:contain;margin:0 -24px;padding:6px 24px 8px;scrollbar-width:none}
.bk-grid::-webkit-scrollbar{display:none}
.bk{display:flex;flex-direction:column;flex:0 0 calc((100% - 3 * 26px) / 4);scroll-snap-align:start}
@media(max-width:1079px){.bk{flex-basis:calc((100% - 2 * 26px) / 3)}}
@media(max-width:779px){.bk{flex-basis:calc((100% - 26px) / 2)}}
@media(max-width:559px){.bk{flex-basis:84%}}
/* Les cartes hors ecran ne declenchent pas l'observateur d'apparition :
sans cette regle elles resteraient invisibles jusqu'au premier glissement. */
.bk-grid .reveal{opacity:1;transform:none}
/* Fleches communes aux carrousels (boutique et galerie). Le script les masque
quand tout tient dans la largeur ([hidden] doit alors l'emporter sur le
display:flex) et les desactive en bout de piste. */
.carousel-nav[hidden]{display:none}
.carousel-nav{position:absolute;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(27,36,39,.16);transition:background .18s,color .18s,border-color .18s,opacity .18s;z-index:4}
.carousel-nav svg{width:20px;height:20px}
.carousel-nav:hover{background:var(--green);color:#fff;border-color:var(--green)}
.carousel-nav[disabled]{opacity:.3;cursor:default;box-shadow:none}
.carousel-nav[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.bk-prev,.gal-prev{left:-14px}
.bk-next,.gal-next{right:-14px}
/* Centrees sur la hauteur des livres, quelle que soit la largeur des cartes. */
.bk-prev,.bk-next{top:36%}
/* Au telephone : la galerie se contente du glissement, mais la boutique garde
ses fleches, posees au bord du livre plutot qu'a l'exterieur de l'ecran. */
@media(max-width:760px){.gal-prev,.gal-next{display:none}.bk-prev{left:2px}.bk-next{right:2px}.bk-prev,.bk-next{width:40px;height:40px}}
/* ===== Livres en 3D =====
Chaque support est une boîte en perspective : la couverture de face, le dos à gauche, la
tranche des pages en haut. Le livre reste droit — le regard est placé au-dessus de lui, il
ne bascule pas — et se tourne de face au survol, ou quand l'un de ses liens a le focus.
La marge du bas absorbe le bord le plus proche, que la perspective agrandit. */
.bk-3d{--t:22px;--spine:#1f5c47;--spine-fg:#fff;width:94%;margin:12px 0 30px 4%;perspective:1100px;perspective-origin:20% -70%;filter:drop-shadow(16px 20px 18px rgba(27,36,39,.24));transition:filter .55s cubic-bezier(.2,.6,.2,1)}
.bk-book{position:relative;aspect-ratio:2/3;transform-style:preserve-3d;transform:rotateY(12deg);transition:transform .55s cubic-bezier(.2,.6,.2,1)}
/* Au survol, le livre se tourne de face et avance : il grossit autour de son centre (un
translateZ le ferait glisser vers le bas, le regard étant placé au-dessus), et son ombre
s'élargit comme s'il s'éloignait de la page. */
.bk:hover .bk-book,.bk:focus-within .bk-book{transform:rotateY(0) scale(1.05)}
.bk:hover .bk-3d,.bk:focus-within .bk-3d{filter:drop-shadow(22px 30px 26px rgba(27,36,39,.3))}
.bk-face{position:absolute;backface-visibility:hidden}
.bk-front{inset:0;transform:translateZ(calc(var(--t) / 2));border-radius:1px 4px 4px 1px;overflow:hidden;background:#fff}
.bk-front > img{width:100%;height:100%;object-fit:cover}
/* Le mors de la reliure et un reflet discret, comme sur une couverture cartonnée. */
.bk-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.3) 0,rgba(0,0,0,.08) 2.2%,rgba(255,255,255,.22) 3.4%,rgba(255,255,255,0) 9%,rgba(255,255,255,0) 88%,rgba(0,0,0,.06) 100%)}
/* Le dos : charnière sur le bord gauche de la couverture, face tournée vers l'extérieur.
Son titre est décoratif (masqué des lecteurs d'écran) : il suit l'échelle de l'illustration
plutôt que le plancher de 12 px du texte d'interface. */
.bk-spine{top:0;left:0;width:var(--t);height:100%;transform-origin:left center;transform:translateZ(calc(var(--t) / -2)) rotateY(-90deg);display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(0,0,0,.12)),var(--spine)}
.bk-spine span{writing-mode:vertical-rl;font-size:calc(var(--vh-text-xs) * .75);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;max-height:90%;overflow:hidden;text-overflow:ellipsis;color:var(--spine-fg)}
/* La tranche des pages, vue par le haut. */
.bk-top{top:0;left:0;width:100%;height:var(--t);transform-origin:center top;transform:translateZ(calc(var(--t) / -2)) rotateX(90deg);background:repeating-linear-gradient(0deg,#fbf9f3 0 1px,#e7e2d6 1px 2px)}
/* Couleur de chaque dos, relevée sur sa couverture. */
.spine-b1{--spine:#deb686;--spine-fg:#b0090d}
.spine-b2{--spine:#048b50}
.spine-b3{--spine:#016a4c}
.spine-b4{--spine:#a26201}
/* Couverture dessinée, quand la photo d'un livre manque. */
.bk-cover{display:flex;flex-direction:column;padding:26px 22px 22px 30px;color:#fff}
.bk-c1{background:linear-gradient(150deg,#0a4741,#0e6f66)}
.bk-c2{background:linear-gradient(150deg,#7a5f1c,#c9a227)}
.bk-c3{background:linear-gradient(150deg,#123a45,#2a6a78)}
.bk-c4{background:linear-gradient(150deg,#1a5230,#2e8b57)}
.bk-cover .em{font-size:var(--vh-text-xs);letter-spacing:2.2px;text-transform:uppercase;opacity:.85;font-weight:700}
.bk-cover h3{font-size:var(--vh-text-lg);line-height:1.22;margin-top:24px;color:#fff}
.bk-cover .au{margin-top:auto;font-size:var(--vh-text-xs);opacity:.85;letter-spacing:.4px}
.bk-body{padding-top:16px;display:flex;flex-direction:column;flex:1}
.bk-body .tg2{font-size:var(--vh-text-xs);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-dark)}
.bk-body .ttl{font-weight:600;color:var(--ink);font-size:var(--vh-text-md);margin-top:5px}
.bk-body .dsc{font-size:var(--vh-text-sm);color:var(--ink-3);margin-top:3px}
/* Pied de carte pousse en bas et separe par un filet : les prix s'alignent
d'une carte a l'autre au lieu de flotter apres un texte de longueur
variable. Le montant porte le poids, la seconde devise devient une
pastille — la ligne cesse d'etre plate. */
.bk-buy{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px;border-top:1px solid var(--line);flex-wrap:wrap}
.bk-price{display:flex;flex-direction:column;align-items:flex-start;gap:6px;line-height:1}
.bk-price b{font-size:var(--vh-text-xl);font-weight:600;color:var(--green);letter-spacing:-.02em}
.bk-price small{padding:3px 9px;border-radius:999px;background:var(--green-50);color:var(--green);font-size:var(--vh-text-xs);font-weight:600;letter-spacing:.3px}
/* Le kit n'a pas de seconde devise mais une condition : la pastille, qui
convient a « 8 000 FCFA », s'etirerait en losange sur une phrase. */
.btn-buy{background:var(--green);color:#fff;border-radius:10px;padding:10px 17px;font-size:var(--vh-text-sm);font-weight:600;border:none;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .2s,transform .18s}
.btn-buy:hover{background:var(--green-d);transform:translateY(-2px)}
/* ===== App ===== */
/* Le téléphone déborde de 96px au-dessus du panneau et 104px en dessous :
on réserve cet espace en marge externe pour ne pas empiéter sur les sections
voisines, tout en gardant le padding interne au rythme commun. */
.app{color:#fff;overflow:visible;position:relative;background:radial-gradient(520px 520px at 86% -6%,rgba(226,187,74,.15),transparent 65%),var(--green-950);padding:var(--sec) 24px;margin:104px 0 88px}
.app .wrap{display:grid;grid-template-columns:1fr .95fr;gap:60px;align-items:center;position:relative}
@media(max-width:940px){.app .wrap{grid-template-columns:1fr}}
.app h2{font-size:clamp(27px,3.5vw,38px);line-height:1.18}
.app h2 em{font-style:italic;color:var(--gold-2)}
.app .feat{display:flex;gap:14px;margin-top:24px}
.app .feat .n{width:30px;height:30px;border-radius:50%;background:rgba(226,187,74,.16);color:var(--gold-2);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--vh-text-base);flex-shrink:0;font-family:var(--serif)}
.app .feat b{display:block;font-size:var(--vh-text-md)}
.app .feat p{font-size:var(--vh-text-base);color:rgba(255,255,255,.72);margin-top:2px}
/* Badges des boutiques. Fond noir borde d'un filet clair : le noir seul se
confondrait avec le vert profond du panneau. */
.stores{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.store{display:inline-flex;align-items:center;gap:13px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:13px;padding:12px 22px;text-decoration:none;transition:transform .18s,border-color .18s,background .18s}
.store:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.6);background:#141414}
.store-glyph{width:28px;height:28px;flex:none}
.store small{display:block;font-size:var(--vh-text-xs);letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:500}
.store b{display:block;font-size:var(--vh-text-md);font-weight:600;line-height:1.2;margin-top:1px}
/* align-self:stretch est le point cle : sans lui, la zone visuelle garde sa
hauteur propre (min-height) et se centre dans la rangee. Les decalages du
telephone se mesurent alors depuis une boite figee, et tout ajout dans la
colonne de texte rogne le debordement. En s'etirant a la rangee, la boite
suit la hauteur du panneau et le debordement reste constant. */
.app-visual{position:relative;min-height:420px;align-self:stretch}
.app-visual::before{content:"";position:absolute;inset:6% 14%;border-radius:50%;background:radial-gradient(circle,rgba(226,187,74,.2),transparent 62%)}
/* La hauteur vient du ratio, pas d'un ancrage haut ET bas : ancre aux deux
bouts, le telephone s'etirait avec la colonne de texte et finissait en
bouteille. aspect-ratio le garde aux proportions d'un vrai telephone
(9/19.3) quoi qu'il arrive ; seul « top » le positionne.
Elargi sans regagner de hauteur : le ratio passe de 9/19.3 a 9/18.1, ce
qui reste celui d'un appareil courant (1:2,01, entre un Galaxy et un
iPhone). 654 px de haut dans les deux cas.
top -82px = 60px de padding du panneau + 22px de debordement. */
.phone{position:absolute;right:6%;top:-82px;width:325px;aspect-ratio:9/18.1;background:#0b0d0f;border-radius:44px;padding:12px;box-shadow:0 46px 90px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,255,255,.09);transform:rotate(-8deg);animation:floatTilt 9s ease-in-out infinite;z-index:5}
.phone .scr{background:#f6f7f6;border-radius:34px;overflow:hidden;font-size:var(--vh-text-xs);color:var(--ink);height:100%;display:flex;flex-direction:column;position:relative}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:76px;height:17px;background:#0b0d0f;border-radius:10px;z-index:5}
.phone .p-top{background:var(--green-d);color:#fff;padding:36px 16px 14px;font-weight:700;font-size:var(--vh-text-base)}
.phone .p-nav{margin-top:auto;display:flex;justify-content:space-around;padding:9px 0 12px;border-top:1px solid #e6e8e6;background:#fff;font-size:7.5px;color:var(--ink-3);font-weight:600}
.phone .p-nav span{display:flex;flex-direction:column;align-items:center;gap:3px}
.phone .p-nav i{width:14px;height:14px;border-radius:4px;background:#dfe3e0}
.phone .p-nav .on{color:var(--green)}
.phone .p-nav .on i{background:var(--green)}
.phone .p-top span{display:block;font-weight:400;font-size:var(--vh-text-xs);opacity:.75;margin-top:3px}
.phone .p-b{padding:13px 13px 16px;display:flex;flex-direction:column;gap:10px}
.p-card{background:#fff;border:1px solid #e6e8e6;border-radius:12px;padding:11px}
.p-card b{font-size:var(--vh-text-xs)}
.p-meter{height:6px;background:#e8ebe9;border-radius:3px;margin-top:7px}
.p-meter i{display:block;height:100%;width:68%;background:var(--green);border-radius:3px}
.p-row{display:flex;align-items:center;gap:9px}
.p-play{width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.p-live{background:var(--green);color:#fff;border-radius:12px;padding:11px;display:flex;justify-content:space-between;align-items:center}
.p-live .lv{background:#e5484d;border-radius:4px;padding:2px 7px;font-size:8.5px;font-weight:800}
/* En mobile le téléphone repasse dans le flux : plus de débordement, donc plus de réserve. */
/* Une seule colonne : les badges se centrent comme le telephone juste en dessous. */
@media(max-width:940px){.stores{justify-content:center}.app{margin:0}.app-visual{min-height:0}.phone{position:relative;right:auto;top:auto;bottom:auto;width:252px;aspect-ratio:auto;margin:-40px auto 0;transform:rotate(-3deg);animation:floatY 9s ease-in-out infinite}.phone .scr{aspect-ratio:9/18.6;height:auto}}
/* ===== Témoignages ===== */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;box-shadow:0 6px 22px rgba(27,36,39,.05)}
.tcard .stars{margin-bottom:14px}
.tcard p{font-family:var(--serif);font-size:var(--vh-text-md);font-style:italic;line-height:1.55}
.tcard .who{display:flex;align-items:center;gap:13px;margin-top:22px}
/* flex:none — sans lui le nom et la promotion compriment l'avatar sur ecran
etroit : la largeur cede, la hauteur reste a 48 px, le cercle devient ovale. */
.tcard .who img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover}
.tcard .who b{font-size:var(--vh-text-base)}
.tcard .who span{display:block;font-size:var(--vh-text-xs);color:var(--ink-3)}
/* ===== Galerie ===== */
/* Galerie rattachée aux témoignages : écart interne réduit, puis rythme normal */
#temoignages{padding-bottom:0}
.gal{padding:var(--gap) 24px var(--sec)}
.gal-carousel{position:relative}
/* align-items:flex-start est indispensable : sans lui les vignettes s'etirent
toutes a la hauteur de la plus basse et le decalage disparait. */
.gal-track{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;overscroll-behavior-x:contain;margin:0 -24px;padding:0 24px 8px;scrollbar-width:none}
.gal-track::-webkit-scrollbar{display:none}
/* Largeur explicite plutot que flex-basis : sur un element remplace comme
, la taille intrinseque du fichier l'emporte sur la base flex et la
vignette s'affichait a ses 700 px d'origine. */
.gal img{flex:none;width:clamp(196px,23.5%,272px);scroll-snap-align:start;aspect-ratio:1/1.15;object-fit:cover;border-radius:18px;transition:transform .4s}
.gal img:hover{transform:scale(1.03)}
/* Le decalage tenait a nth-child(2) et (4) : il ne valait que pour quatre
vignettes. En visant les paires, il suit n'importe quel nombre de photos. */
.gal img:nth-child(even){margin-top:26px}
/* Les vignettes hors ecran ne declenchent pas l'observateur d'apparition. */
.gal-track .reveal{opacity:1;transform:none}
.gal-prev,.gal-next{top:170px}
/* ===== FAQ ===== */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:12px}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:var(--vh-text-md);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--serif);font-size:var(--vh-text-xl);color:var(--green);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 20px;color:var(--ink-2);font-size:var(--vh-text-base)}
/* ===== CTA final (photo) ===== */
.cta-f{position:relative;color:#fff;text-align:center;padding:var(--sec) 24px;overflow:hidden}
/* object-position ancre le cadrage en haut : par defaut cover rogne autant en
haut qu'en bas et coupe les visages des que la section se raccourcit. Ancree
ainsi, la perte se fait uniquement par le bas, sur les pieds. */
.cta-f .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.cta-f::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,39,35,.82),rgba(5,39,35,.9))}
.cta-f .wrap{position:relative;z-index:2}
/* Message d'appel : une phrase entiere, donc ni majuscules ni interlettrage.
L'habillage « overline » convient a trois mots, pas a cent caracteres. */
.cta-f .cta-lead{color:var(--gold-2);font-size:clamp(var(--vh-text-base),1.5vw,var(--vh-text-md));font-weight:500;max-width:46ch;margin:0 auto 16px;line-height:1.55}
.cta-f h2{font-size:clamp(28px,4vw,46px)}
.cta-f h2 em{font-style:italic;color:var(--gold-2)}
.cta-f p{color:rgba(255,255,255,.82);margin:18px auto 0;max-width:520px}
.cta-f .ctas{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-f .info{margin-top:28px;font-size:var(--vh-text-sm);color:rgba(255,255,255,.65)}
.cta-f p.intake-cta{margin-top:22px;color:var(--gold-2);font-weight:600}
.cta-f p.intake-cta b{color:#fff}
footer{background:var(--green-950);color:rgba(255,255,255,.65);padding:var(--sec) 24px 30px;font-size:var(--vh-text-base)}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:var(--vh-text-sm);letter-spacing:1.6px;text-transform:uppercase;margin-bottom:14px;font-family:var(--sans)}
footer a{color:rgba(255,255,255,.65);text-decoration:none;display:block;margin-bottom:9px}
footer a:hover{color:var(--gold-2)}
footer .logo b,footer .logo{color:#fff}
footer .legal{max-width:1160px;margin:40px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:var(--vh-text-xs);color:rgba(255,255,255,.45)}
footer .legal a{display:inline;margin:0 0 0 14px}
/* ===== Utilitaires ===== */
/* Remplacent les style="..." en ligne de l'ancienne version : le gabarit reste
lisible et la CSP n'a pas besoin d'autoriser les styles inline. */
.note-center{text-align:center;margin-top:26px;font-size:var(--vh-text-base);color:var(--ink-3)}
.overline-gold{color:var(--gold-2)}
.mt-14{margin-top:14px}
.footer-intro{max-width:300px;margin-top:14px}
.faq-section{background:var(--ivory-2)}
.p-b1{font-size:var(--vh-text-xs)}
.p-b2{font-size:var(--vh-text-xs);opacity:.8}
.p-muted{color:var(--ink-3);font-size:var(--vh-text-xs)}
.p-row-between{display:flex;justify-content:space-between;align-items:center}
.p-score{color:var(--green)}
/* ===== Accessibilité ===== */
/* Lien d'évitement : premier élément focusable, invisible jusqu'au Tab. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--green);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
/* Anneau de focus visible partout — jamais d'outline:none sans remplacement. */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
/* ===== Sélecteur de langue =====
Un plutôt qu'un