/* ==========================================================================
MENTAL D'ACIER — On l'appelait Papa Joe
Feuille de style principale — thème sombre « encre & or »
Aucune dépendance externe. Toutes les polices sont locales.
--------------------------------------------------------------------------
SOMMAIRE
01. Polices locales
02. Variables de thème (couleurs, rythme, ombres)
03. Réinitialisation & bases
04. Typographie
05. Utilitaires & conteneurs
06. Boutons
07. En-tête / navigation
08. Hero
09. Bandeau de chiffres
10. Sections génériques
11. Livre 3D
12. Carte narrative défilante
13. Décorations & prix
14. Avis lecteurs
15. Points de vente
16. Producteurs / presse
17. Auteur
18. FAQ
19. Contact & formulaire
20. Pied de page
21. Responsive
========================================================================== */
/* ==========================================================================
01. POLICES LOCALES
========================================================================== */
@font-face{
font-family:"Lora";src:url("../fonts/lora-var.woff") format("woff");
font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
font-family:"Lora";src:url("../fonts/lora-italic-var.woff") format("woff");
font-weight:400 700;font-style:italic;font-display:swap;
}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-light.woff") format("woff");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
/* ==========================================================================
02. VARIABLES DE THÈME
Pour changer l'ambiance du site, il suffit de modifier ces valeurs.
========================================================================== */
:root{
/* Fonds */
--ink:#0a0e13; /* fond principal, encre nocturne */
--ink-2:#0e141c; /* fond alterné des sections */
--panel:#121924; /* cartes et panneaux */
--panel-2:#161f2b; /* panneaux survolés */
--line:rgba(201,162,39,.20); /* filets dorés discrets */
--line-soft:rgba(255,255,255,.08);
/* Or */
--gold:#c9a227;
--gold-hi:#ffd75e;
--gold-deep:#8c6f16;
--gold-grad:linear-gradient(135deg,#f6d97a 0%,#c9a227 42%,#8c6f16 100%);
/* Textes */
--cream:#fce7de;
/* --cream:#ece7de; */
--text:#cfd4dc;
--muted:#f2f2f2;
/* --muted:#8b93a2; */
--muted-2:#c0c0c0;
/* --muted-2:#69707d; */
/* Divers */
--radius:14px;
--radius-lg:22px;
--shadow:0 18px 50px -18px rgba(0,0,0,.85);
--shadow-lg:0 40px 90px -30px rgba(0,0,0,.9);
--maxw:1240px;
--ease:cubic-bezier(.22,.61,.36,1);
/* Carte narrative */
--route-rest:#d9d2c2; /* trajet au repos, crème neutre */
--route-done:#b08e3c; /* chemin déjà accompli */
--route-live:#ffd75e; /* tronçon de l'étape active */
--halo:rgba(0,0,0,.62);
}
/* ==========================================================================
03. RÉINITIALISATION & BASES
========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* --------------------------------------------------------------------------
ANCRES ET EN-TÊTE COLLANT
L'en-tête reste affiché en haut de la fenêtre pendant tout le défilement.
Sans précaution, une section atteinte depuis le menu vient se caler
exactement à y = 0 : ses 73 premiers pixels — la hauteur de l'en-tête —
passent DESSOUS et deviennent invisibles.
La plupart des sections s'en tiraient grâce à leur marge intérieure haute,
mais de justesse : sur mobile, leur titre arrivait à 0 ou 1 pixel du bord
de l'en-tête, collé contre lui. Et la bande dorée « Distinctions », qui
n'a aucune marge haute, laissait franchement le haut du diplôme recouvert.
scroll-margin-top demande simplement au navigateur d'arrêter le défilement
un peu plus haut que le bord de la cible. Cette propriété n'agit QUE lors
d'un saut vers une ancre : la mise en page ordinaire n'est pas déplacée
d'un seul pixel.
⚠ La règle vise volontairement les SECTIONS et les TITRES, et rien d'autre.
Les conteneurs #book3d et #storymap en sont exclus : book3d.js les recentre
lui-même avec scrollIntoView({block:"center"}), et une marge fausserait ce
centrage.
FOCUS CLAVIER (B26). Quand on avance ou recule à la touche Tab, le
navigateur n'amène l'élément focalisé qu'au BORD de la fenêtre : en
remontant, il arrivait sous l'en-tête collant ; en descendant sur mobile,
sous la barre d'achat fixe. scroll-padding déclare ces deux bandes comme
« hors de la zone visible » pour TOUT défilement automatique (focus,
ancres, scrollIntoView) :
• en haut, la hauteur de l'en-tête, partout ;
• en bas, la hauteur de la barre d'achat, sous 1024 px et seulement sur
les pages qui l'ont (classe js-buybar posée sur par main.js —
sans JavaScript, la barre ne monte jamais).
Comme scroll-padding-top compte DÉJÀ la hauteur de l'en-tête, la marge des
ancres (scroll-margin-top) ne garde que le petit espace de respiration :
les sections arrivent exactement au même endroit qu'avant.
-------------------------------------------------------------------------- */
:root{--hdr-h:73px}
:root{--buybar-h:4.6rem} /* hauteur de la barre d'achat mobile (.buybar, 71 px mesurés) */ /* .hdr__in : min-height 72px + 1px de bordure basse */
html{scroll-padding-top:var(--hdr-h)}
section[id],main[id],h1[id],h2[id],h3[id]{scroll-margin-top:.9rem}
body{
margin:0;background:var(--ink);color:var(--text);
font-family:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
font-weight:300;font-size:16.5px;line-height:1.72;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--gold-hi);text-decoration:none}
a:hover{color:#fff}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
::selection{background:rgba(201,162,39,.32);color:#fff}
hr{border:0;border-top:1px solid var(--line-soft);margin:2.5rem 0}
/* Fond texturé très discret : grain + halo doré */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(1200px 700px at 78% -8%,rgba(201,162,39,.10),transparent 62%),
radial-gradient(900px 620px at 6% 12%,rgba(60,90,140,.09),transparent 60%);
}
main,header,footer{position:relative;z-index:1}
/* ==========================================================================
04. TYPOGRAPHIE
========================================================================== */
h1,h2,h3,h4,.serif{font-family:"Lora",Georgia,"Times New Roman",serif;font-weight:600;color:var(--cream);line-height:1.14;margin:0 0 .6em}
h1{font-size:clamp(2.35rem,6.2vw,4.6rem);letter-spacing:-.015em}
h2{font-size:clamp(1.85rem,4.2vw,3.05rem);letter-spacing:-.01em}
h3{font-size:clamp(1.2rem,2.2vw,1.6rem)}
h4{font-size:1.06rem}
p{margin:0 0 1.15em}
strong,b{color:var(--cream);font-weight:500}
em{font-style:italic}
.lead{font-size:clamp(1.05rem,1.55vw,1.24rem);color:#b9c0cb;line-height:1.75}
.kicker{
display:inline-block;font-family:"Poppins",sans-serif;font-weight:500;
/* font-size:.735rem;letter-spacing:.24em;text-transform:uppercase; */
font-size:.935rem;letter-spacing:.24em;text-transform:uppercase;
color:var(--gold);margin:0 0 1.1rem;
}
.kicker--line::before{content:"";display:inline-block;width:26px;height:1px;background:var(--gold);vertical-align:middle;margin-right:.7rem}
.gold{color:var(--gold-hi)}
.serif-quote{font-family:"Lora",Georgia,serif;font-style:italic;color:var(--cream)}
.small{font-size:.96rem}
.muted{color:var(--muted)}
.center{text-align:center}
.balance{text-wrap:balance}
/* ==========================================================================
05. UTILITAIRES & CONTENEURS
========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}
.wrap--narrow{max-width:860px}
.section{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.section--alt{background:var(--ink-2)}
.section--alt::after,.section::after{content:none}
.section-head{max-width:760px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head.center{margin-inline:auto;text-align:center}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:0}
.grid{display:grid;gap:clamp(1.1rem,2.4vw,1.9rem)}
.card{
background:linear-gradient(180deg,var(--panel),rgba(10,14,19,.6));
border:1px solid var(--line-soft);border-radius:var(--radius);
padding:clamp(1.35rem,2.4vw,2rem);transition:border-color .35s var(--ease),transform .35s var(--ease),background .35s var(--ease);
}
.card:hover{border-color:var(--line);transform:translateY(-3px);background:linear-gradient(180deg,var(--panel-2),rgba(10,14,19,.6))}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#0a0e13;padding:.7rem 1.1rem;z-index:200;font-weight:500}
.skip-link:focus{left:.6rem;top:.6rem}
/* Apparition au défilement */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ==========================================================================
06. BOUTONS
========================================================================== */
.btn{
--bg:transparent;--fg:var(--cream);--bd:rgba(236,231,222,.28);
display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
padding:1.02rem 1.85rem;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
font-family:"Poppins",sans-serif;font-weight:500;font-size:.79rem;letter-spacing:.15em;text-transform:uppercase;
border-radius:9px;cursor:pointer;text-align:center;
transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
will-change:transform;
}
.btn:hover{transform:translateY(-2px);color:#fff}
.btn:active{transform:translateY(0)}
.btn--gold{
background:var(--gold-grad);color:#15100a;border-color:transparent;font-weight:700;
box-shadow:0 12px 34px -14px rgba(201,162,39,.9),inset 0 1px 0 rgba(255,255,255,.4);
}
.btn--gold:hover{color:#15100a;box-shadow:0 18px 42px -12px rgba(255,215,94,.75),inset 0 1px 0 rgba(255,255,255,.55)}
.btn--ghost{border-color:rgba(236,231,222,.26);background:rgba(255,255,255,.02)}
.btn--ghost:hover{border-color:var(--gold);background:rgba(201,162,39,.09)}
.btn--sm{padding:.72rem 1.15rem;font-size:.7rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-row.center{justify-content:center}
/* ==========================================================================
07. EN-TÊTE / NAVIGATION
========================================================================== */
.hdr{
position:sticky;top:0;z-index:120;
background:rgba(10,14,19,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease);
}
.hdr.is-stuck{background:rgba(8,11,16,.94);border-bottom-color:var(--line-soft)}
.hdr__in{display:flex;align-items:center;gap:1.2rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.72rem;color:var(--cream);flex:0 0 auto}
.brand:hover{color:var(--cream)}
.brand__mark{
width:38px;height:38px;flex:0 0 38px;border-radius:10px;
display:grid;place-items:center;background:linear-gradient(160deg,#141b26,#0a0e13);
border:1px solid var(--line);font-family:"Lora",serif;font-weight:700;color:var(--gold-hi);font-size:1.14rem;line-height:1;
}
.brand__txt{display:flex;flex-direction:column;line-height:1.12}
.brand__t{font-family:"Lora",serif;font-weight:600;font-size:1.02rem;letter-spacing:.01em}
.brand__s{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.nav{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav a{
color:var(--text);font-size:.815rem;font-weight:400;padding:.55rem .72rem;border-radius:7px;
transition:color .25s,background .25s;white-space:nowrap;
}
/* Lien actif : la page courante (« page ») ou, sur l'accueil, la section
visible (« location », posé par main.js). */
.nav a:hover,.nav a[aria-current="page"],.nav a[aria-current="location"]{color:var(--gold-hi);background:rgba(201,162,39,.08)}
/* Les boutons gardent leur propre couleur, quelle que soit leur place dans la nav */
.nav a.btn--gold,.nav a.btn--gold:hover,.hdr__cta a.btn--gold{color:#15100a;background:var(--gold-grad)}
.nav a.btn--ghost,.nav a.btn--ghost:hover{color:var(--cream)}
.hdr__cta{margin-left:.5rem}
.lang{display:flex;gap:.2rem;margin-left:.4rem;padding-left:.7rem;border-left:1px solid var(--line-soft)}
.lang a{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .5rem;color:var(--muted)}
.lang a.is-on{color:var(--gold-hi)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-soft);background:transparent;border-radius:9px;cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:1.5px;background:var(--cream);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--cream);transition:transform .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
/* ==========================================================================
08. HERO
========================================================================== */
.hero{position:relative;padding:clamp(3rem,7vw,6rem) 0 clamp(3.5rem,7vw,6rem);overflow:hidden}
.hero::before{
content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;
background:radial-gradient(760px 520px at 72% 34%,rgba(201,162,39,.16),transparent 66%);
pointer-events:none;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__title{margin-bottom:.5em}
.hero__title .sub{display:block;font-size:.44em;font-style:italic;color:var(--gold-hi);font-weight:400;margin-top:.35em;letter-spacing:.01em}
.hero__lead{max-width:56ch}
.hero__cta{margin-top:2rem}
.hero__note{margin-top:1.15rem;font-size:.8rem;color:var(--muted-2);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.hero__note span{display:inline-flex;align-items:center;gap:.4rem}
.hero__note span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 5px}
.hero__book{position:relative;display:grid;place-items:center;perspective:1600px}
.hero__cover{
position:relative;width:min(100%,392px);
transition:transform .6s var(--ease);
}
.hero__book:hover .hero__cover{transform:translateY(-6px)}
.hero__cover img{
border-radius:3px 7px 7px 3px;
box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.08);
}
/* Tranche du livre : bande verticale à gauche, dessinée en CSS pur.
Aucune transformation 3D ici : c'est ce qui provoquait des artefacts
de rendu (couverture tronquée en triangle) sur certains navigateurs. */
.hero__cover::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:13px;z-index:2;
border-radius:3px 0 0 3px;pointer-events:none;
background:linear-gradient(90deg,#04060a 0%,#171208 42%,rgba(63,55,36,.85) 78%,rgba(217,210,194,.28) 100%);
}
.hero__cover::after{
content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:3px 7px 7px 3px;
background:linear-gradient(112deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 76%,rgba(255,255,255,.06) 100%);
}
.award-pill{
display:inline-flex;align-items:center;gap:.7rem;padding:.5rem .95rem .5rem .55rem;
border:1px solid var(--line);border-radius:100px;background:rgba(201,162,39,.07);
font-size:.735rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:1.4rem;
}
.award-pill img{width:26px;height:26px;flex:0 0 26px}
/* ==========================================================================
09. BANDEAU DE CHIFFRES
========================================================================== */
.stats{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(0,0,0,.28)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:clamp(1.6rem,3vw,2.4rem) 1rem;text-align:center;border-left:1px solid var(--line-soft)}
.stat:first-child{border-left:0}
.stat__n{font-family:"Lora",serif;font-weight:600;color:var(--gold-hi);font-size:clamp(1.7rem,3.6vw,2.65rem);line-height:1;display:block}
.stat__l{font-size:.71rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted);margin-top:.6rem;display:block}
/* ==========================================================================
10. SECTIONS GÉNÉRIQUES
========================================================================== */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
.pull{
border-left:2px solid var(--gold);padding:.2rem 0 .2rem 1.5rem;margin:2rem 0;
font-family:"Lora",serif;font-style:italic;font-size:clamp(1.1rem,2vw,1.42rem);color:var(--cream);line-height:1.55;
}
.figure{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.figure img{width:100%}
.figure figcaption{padding:.85rem 1.1rem;font-size:.78rem;color:var(--muted);background:rgba(0,0,0,.4)}
/* ==========================================================================
11. LIVRE 3D
========================================================================== */
.book3d-section{background:
radial-gradient(900px 600px at 50% 0%,rgba(201,162,39,.09),transparent 62%),var(--ink-2)}
.book-stage{
position:relative;width:100%;min-height:min(64vh,520px);
display:grid;place-items:center;perspective:2400px;perspective-origin:50% 46%;
touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;
}
.book-stage.is-drag{cursor:grabbing}
.book-stage::after{ /* ombre portée au sol */
content:"";position:absolute;left:50%;bottom:6%;width:56%;height:34px;transform:translateX(-50%);
background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 70%);filter:blur(9px);pointer-events:none;
}
.book{
position:relative;transform-style:preserve-3d;
transition:transform .9s var(--ease);
will-change:transform;
}
.book__leaf{position:absolute;top:0;left:0;transform-style:preserve-3d;backface-visibility:hidden}
/* Faces plates du volume */
.face{position:absolute;top:0;left:0;background-size:cover;background-position:center;backface-visibility:hidden;overflow:hidden}
.face--front,.face--back{border-radius:2px 5px 5px 2px;box-shadow:inset 0 0 60px rgba(0,0,0,.45)}
.face--front::after,.face--back::after{ /* reflet du vernis */
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.07) 100%);
}
.face--spine{border-radius:4px 0 0 4px}
.face--edge{background:linear-gradient(90deg,#cdc4ad,#f2ece0 22%,#ded5c0 55%,#b7ac93)}
.face--top,.face--bottom{background:repeating-linear-gradient(90deg,#e8e1cf 0 2px,#cfc6ae 2px 3px)}
/* Pages intérieures */
.page{
position:absolute;top:0;left:0;transform-style:preserve-3d;transform-origin:left center;
transition:transform 1.05s var(--ease);will-change:transform;
}
.page__side{
position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;
background:linear-gradient(105deg,#efe9dc 0%,#e6dfd0 52%,#dcd3c1 100%);
color:#241f18;padding:9% 9% 8%;
display:flex;flex-direction:column;
box-shadow:inset 0 0 42px rgba(120,100,60,.20);
}
.page__side--back{transform:rotateY(180deg)}
.page__side::before{ /* ombre de reliure */
content:"";position:absolute;top:0;bottom:0;left:0;width:11%;
background:linear-gradient(90deg,rgba(80,64,36,.34),transparent);pointer-events:none;
}
.page__side--back::before{left:auto;right:0;background:linear-gradient(270deg,rgba(80,64,36,.34),transparent)}
.page__num{position:absolute;bottom:4.2%;left:0;right:0;text-align:center;font-size:calc(.66rem * var(--page-k,1));letter-spacing:.16em;color:#8a7b5f;pointer-events:none}
.page__kicker{font-size:calc(.6rem * var(--page-k,1));letter-spacing:.22em;text-transform:uppercase;color:#9a7f2e;margin-bottom:.7rem;font-weight:500}
.page__title{font-family:"Lora",serif;font-weight:600;color:#1c1811;font-size:calc(clamp(.95rem,1.45vw,1.28rem) * var(--page-k,1));line-height:1.24;margin:0 0 .75rem}
.page__rule{width:38px;height:2px;background:#b99a3a;margin-bottom:.9rem;flex:0 0 auto}
/* --page-k : facteur de taille du texte des pages, posé par layout() dans
book3d.js. Il vaut 1 tant que tout tient ; sur une page trop petite
(320 px, plein écran en paysage) ou avec une police agrandie par le
visiteur, il descend jusqu'à ce qu'aucune face ne déborde. Les faces ont
une hauteur fixe et overflow:hidden : sans lui, la fin du texte, l'ornement
et le numéro de page étaient coupés (B35). */
.page__text{font-family:"Lora",serif;font-size:calc(clamp(.62rem,.94vw,.86rem) * var(--page-k,1));line-height:1.62;color:#39311f;overflow:hidden;flex:1 1 auto}
.page__text p{margin:0 0 .7em}
.page--title .page__side{align-items:center;justify-content:center;text-align:center;background:linear-gradient(145deg,#f1ebde,#ddd4c2)}
.book-ui{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;margin-top:1.6rem}
.book-ui__group{display:flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:100px;padding:.3rem}
.icon-btn{
width:42px;height:42px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--cream);
display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.icon-btn:hover:not(:disabled){background:rgba(201,162,39,.14);color:var(--gold-hi);border-color:var(--line)}
.icon-btn:disabled{opacity:.3;cursor:not-allowed}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.book-counter{font-size:.76rem;letter-spacing:.1em;color:var(--muted);min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.book-hint{margin-top:1rem;text-align:center;font-size:.78rem;color:var(--muted-2)}
.book-hint kbd{
font-family:inherit;font-size:.72rem;border:1px solid var(--line-soft);border-radius:5px;
padding:.1rem .38rem;color:var(--text);background:rgba(255,255,255,.04);margin:0 .12rem;
}
/* Plein écran */
.book-fs{
position:fixed;inset:0;z-index:200;display:none;
background:radial-gradient(1200px 800px at 50% 40%,#0d131b,#05070a 72%);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.book-fs.is-open{display:block}
body.book-fs-open{overflow:hidden}
.book-fs__close{position:absolute;top:14px;right:14px;z-index:3}
/* Hauteur FIXE (et non minimale) : avec min-height, la scène grandissait
avec le livre qu'elle contient, et layout() (book3d.js), qui mesure la
scène pour calculer la taille du livre, se servait de sa propre sortie.
Sur un téléphone en paysage (390 px de haut), le livre dépassait alors en
bas de l'écran et la barre de commandes se posait sur les pages (B28). */
.book-fs .book-stage{height:100dvh;min-height:0;padding:64px 12px 116px}
.book-fs .book-ui{position:absolute;left:0;right:0;bottom:22px;margin:0}
/* Écran bas (téléphone en paysage) : marges resserrées, titre du calque
retiré, commandes collées au bas de l'écran. Le bouton ✕ reste. */
@media (max-height:520px){
.book-fs .book-stage{padding:40px 12px 64px}
.book-fs__title{display:none}
.book-fs .book-ui{bottom:6px}
.book-fs__close{top:6px;right:8px}
}
.book-fs__title{position:absolute;top:20px;left:20px;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
/* Sommaire des extraits (liens rapides) */
.extract-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem;margin-top:2.2rem}
.extract-chip{
text-align:left;padding:.85rem 1rem;border:1px solid var(--line-soft);border-radius:11px;background:rgba(255,255,255,.02);
cursor:pointer;transition:border-color .3s,background .3s,transform .3s;color:var(--text);
}
.extract-chip:hover,.extract-chip.is-on{border-color:var(--line);background:rgba(201,162,39,.08);transform:translateY(-2px)}
.extract-chip b{display:block;font-family:"Lora",serif;font-weight:600;color:var(--cream);font-size:.97rem;margin-bottom:.15rem}
.extract-chip span{font-size:.774rem;color:var(--muted)}
/* ==========================================================================
12. CARTE NARRATIVE DÉFILANTE
========================================================================== */
.storymap{position:relative}
.sm__grid{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.sm__sticky{position:sticky;top:88px;align-self:start}
.sm__map{
position:relative;width:100%;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line-soft);box-shadow:var(--shadow-lg);background:#0a0e13;
aspect-ratio:1600/1032; /* rapport exact de carte-fond.jpg (1,5504) */
}
.sm__viewport{position:absolute;inset:0;overflow:hidden}
.sm__inner{
position:absolute;inset:0;transform-origin:50% 50%;
transition:transform 1.05s var(--ease);will-change:transform;
}
.sm__img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:brightness(.52) saturate(.62) contrast(1.08) sepia(.22);
}
.sm__map::after{ /* vignette */
content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
background:
radial-gradient(120% 92% at 50% 46%,transparent 42%,rgba(4,6,9,.60) 88%,rgba(4,6,9,.86) 100%),
linear-gradient(180deg,rgba(4,6,9,.34),transparent 26%,transparent 74%,rgba(4,6,9,.42));
}
.sm__svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
/* — tronçons — */
.seg-halo{fill:none;stroke:var(--halo);stroke-linecap:round;stroke-linejoin:round;stroke-width:6.4}
.seg-line{
fill:none;stroke:var(--route-rest);stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5;
transition:stroke .45s var(--ease),stroke-width .45s var(--ease),opacity .45s var(--ease),filter .45s var(--ease);
}
.seg-flow{
fill:none;stroke:#fff8dc;stroke-linecap:round;stroke-width:1.5;opacity:0;
stroke-dasharray:10 16;transition:opacity .45s var(--ease);
}
.seg-arrow{fill:var(--route-rest);transition:fill .45s var(--ease),opacity .45s var(--ease)}
.seg[data-state="done"] .seg-line{stroke:var(--route-done);stroke-width:2.2;opacity:.92}
.seg[data-state="done"] .seg-arrow{fill:var(--route-done);opacity:.85}
.seg[data-state="live"] .seg-line{stroke:var(--route-live);stroke-width:4.1;filter:drop-shadow(0 0 5px rgba(255,215,94,.65))}
.seg[data-state="live"] .seg-arrow{fill:#fff3c4}
.seg[data-state="live"] .seg-flow{opacity:.95;animation:flow 1.5s linear infinite}
@keyframes flow{to{stroke-dashoffset:-52}}
@media (prefers-reduced-motion:reduce){.seg[data-state="live"] .seg-flow{animation:none}}
/* tracé progressif du tronçon actif */
.seg.is-drawing .seg-line,.seg.is-drawing .seg-halo{animation:draw 1.15s var(--ease) forwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
/* — noms de lieux — */
.sm-label{
font-family:"Poppins",sans-serif;font-weight:500;letter-spacing:.055em;
font-size:calc(11.5px * var(--z-inv,1));
fill:#efeadd;stroke:rgba(4,6,9,.95);stroke-width:calc(3.4px * var(--z-inv,1));paint-order:stroke fill;
transition:fill .45s var(--ease),opacity .45s var(--ease),font-size .45s var(--ease);
}
.sm-label[data-type="pays"]{font-size:calc(13.5px * var(--z-inv,1));text-transform:uppercase;letter-spacing:.12em;fill:#d6d0c2;opacity:.86}
.sm-label[data-type="repere"]{font-style:italic;fill:#bcc7d6;opacity:.8}
.sm-label[data-on="1"]{fill:var(--gold-hi);opacity:1}
/* — pastilles — */
.sm__pins{position:absolute;inset:0;z-index:3}
.pin{
position:absolute;transform:translate(-50%,-50%) scale(var(--z-inv,1));
width:29px;height:29px;border-radius:50%;cursor:pointer;padding:0;
background:rgba(10,14,19,.9);border:1.5px solid rgba(217,210,194,.55);
color:#d9d2c2;font-family:"Poppins",sans-serif;font-weight:500;font-size:.72rem;
display:grid;place-items:center;line-height:1;
transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);
}
.pin:hover{border-color:var(--gold-hi);color:var(--gold-hi);transform:translate(-50%,-50%) scale(calc(var(--z-inv,1)*1.14))}
.pin[data-state="live"]{z-index:4}
.pin[data-state="done"]{z-index:2;border-color:rgba(154,139,95,.9);background:rgba(154,139,95,.28);color:#e8dfc4}
.pin[data-state="live"]{
background:var(--gold-grad);border-color:#ffe9a8;color:#15100a;font-weight:700;
transform:translate(-50%,-50%) scale(calc(var(--z-inv,1)*1.36));box-shadow:0 0 0 6px rgba(255,215,94,.16),0 6px 20px -6px rgba(255,215,94,.7);
animation:pin-pulse 2.1s var(--ease) infinite;
}
@keyframes pin-pulse{0%,100%{box-shadow:0 0 0 6px rgba(255,215,94,.16),0 6px 20px -6px rgba(255,215,94,.7)}50%{box-shadow:0 0 0 13px rgba(255,215,94,.03),0 6px 26px -6px rgba(255,215,94,.85)}}
@media (prefers-reduced-motion:reduce){.pin[data-state="live"]{animation:none}}
/* — étiquette d'étape, coin fixe — */
.sm__tag{
position:absolute;left:14px;bottom:14px;z-index:5;max-width:min(64%,420px);
display:flex;align-items:center;gap:.7rem;padding:.6rem .95rem;
background:rgba(8,11,16,.86);border:1px solid var(--line);border-radius:10px;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
font-size:.8rem;color:var(--cream);opacity:0;transform:translateY(8px);
transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none;
}
.sm__tag.is-on{opacity:1;transform:none}
.sm__tag b{color:var(--gold-hi);font-family:"Lora",serif;font-weight:600}
.sm__tag .n{
flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
background:var(--gold-grad);color:#15100a;font-size:.7rem;font-weight:700;
}
/* — médaillon d'étape — */
.sm__medal{
position:absolute;right:14px;bottom:14px;z-index:5;width:clamp(74px,13%,132px);aspect-ratio:1;
border-radius:50%;overflow:hidden;border:2px solid rgba(201,162,39,.55);
box-shadow:0 10px 30px -8px rgba(0,0,0,.9);
opacity:0;transform:scale(.82) translateY(-6px);pointer-events:none;
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.sm__medal.is-on{opacity:1;transform:none}
.sm__medal img{width:100%;height:100%;object-fit:cover}
/* — légende — */
.sm__legend{margin-top:.85rem;font-size:.96rem;color:var(--muted-2);display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;align-items:center}
.sm__legend i{display:inline-block;width:20px;height:2px;vertical-align:middle;margin-right:.45rem;border-radius:2px}
.sm__legend .l-rest{background:var(--route-rest)}
.sm__legend .l-done{background:var(--route-done)}
.sm__legend .l-live{background:var(--route-live);box-shadow:0 0 6px rgba(255,215,94,.7)}
/* — frise chronologique — */
.sm__time{position:relative;padding-left:1.9rem;list-style:none;margin:0}
.sm__time::before{content:"";position:absolute;left:8px;top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,transparent,var(--line-soft) 8%,var(--line-soft) 92%,transparent)}
li.step{list-style:none}
.step{
position:relative;padding:clamp(1.4rem,2.6vw,2rem) clamp(1rem,2vw,1.5rem);margin-bottom:clamp(1.6rem,4vw,3rem);
border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.step::before{ /* pastille de frise */
content:"";position:absolute;left:calc(-1.9rem + 3px);top:clamp(1.8rem,3vw,2.4rem);
width:11px;height:11px;border-radius:50%;background:var(--ink);border:1.5px solid rgba(217,210,194,.4);
transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.step::after{ /* filet doré à gauche */
content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;border-radius:2px;
background:var(--gold);opacity:0;transform:scaleY(.3);transform-origin:center;
transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.step.is-on{
background:linear-gradient(100deg,rgba(201,162,39,.11),rgba(201,162,39,0) 72%);
border-color:var(--line-soft);box-shadow:var(--shadow);
}
.step.is-on::before{background:var(--gold-hi);border-color:var(--gold-hi);box-shadow:0 0 0 5px rgba(255,215,94,.14)}
.step.is-on::after{opacity:1;transform:scaleY(1)}
.step__n{font-size:.7rem;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;display:block;margin-bottom:.5rem}
.step__t{font-family:"Lora",serif;font-weight:600;font-size:clamp(1.14rem,2vw,1.5rem);color:var(--cream);margin:0 0 .5rem;transition:color .45s var(--ease)}
.step.is-on .step__t{color:var(--gold-hi)}
.step__place{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.75rem}
.step__x{margin:0;color:var(--text);font-size:.96rem}
/* — mode réglage (#reglage) — */
.sm--tune .sm__img{filter:brightness(.95) saturate(.9)}
.sm--tune .sm__map::after{opacity:.25}
.sm--tune .sm__grid-overlay{display:block}
.sm__grid-overlay{
display:none;position:absolute;inset:0;z-index:6;pointer-events:none;
background:
repeating-linear-gradient(90deg,rgba(255,0,255,.55) 0 1px,transparent 1px 10%),
repeating-linear-gradient(180deg,rgba(255,0,255,.55) 0 1px,transparent 1px 10%);
}
.sm--tune .sm__pins{pointer-events:none}
.sm__tune-hit{position:absolute;inset:0;z-index:7;display:none;cursor:crosshair}
.sm--tune .sm__tune-hit{display:block}
.sm__tune-flash{
position:absolute;z-index:8;transform:translate(-50%,-140%);
background:#ff00ff;color:#fff;font-family:ui-monospace,Menlo,monospace;font-size:12px;
padding:.3rem .55rem;border-radius:6px;white-space:nowrap;pointer-events:none;
}
/* ==========================================================================
13. DÉCORATIONS & PRIX
========================================================================== */
.medals{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(1rem,2.2vw,1.6rem)}
.medal{text-align:center;padding:clamp(1.7rem,3vw,2.4rem) 1.3rem}
.medal__ico{
width:66px;height:66px;margin:0 auto 1.15rem;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle at 32% 28%,#2a2113,#0d1117 72%);border:1px solid var(--line);
color:var(--gold-hi);line-height:1;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 26px -12px rgba(201,162,39,.55);
}
.medal__ico svg{width:32px;height:32px}
.medal h3{font-size:1.12rem;margin-bottom:.35rem}
.medal p{font-size:.79rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0}
.jury{
background:linear-gradient(135deg,rgba(201,162,39,.11),rgba(201,162,39,.02));
border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,3.2rem);
}
.jury__q{font-family:"Lora",serif;font-style:italic;font-size:clamp(1.05rem,2vw,1.42rem);color:var(--cream);line-height:1.6;margin:0 0 1.2rem}
.jury__a{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
/* ==========================================================================
14. AVIS LECTEURS
========================================================================== */
.rating-live{
display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.8rem;
border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.5rem;
background:rgba(201,162,39,.055);margin-bottom:2.6rem;
}
.rating-live__score{font-family:"Lora",serif;font-size:2.1rem;font-weight:600;color:var(--gold-hi);line-height:1}
.rating-live__stars{color:var(--gold-hi);letter-spacing:.15em;font-size:1.05rem}
.rating-live__meta{font-size:.82rem;color:var(--muted)}
.rating-live__src{font-size:.72rem;color:var(--muted-2);margin-left:auto;text-align:right}
.rating-live[data-state="loading"] .rating-live__score{opacity:.4}
.reviews{columns:3;column-gap:clamp(1rem,2vw,1.5rem)}
.review{
break-inside:avoid;margin:0 0 clamp(1rem,2vw,1.5rem);
background:linear-gradient(180deg,var(--panel),rgba(10,14,19,.55));
border:1px solid var(--line-soft);border-radius:var(--radius);padding:1.5rem 1.55rem;
transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.review:hover{border-color:var(--line);transform:translateY(-3px)}
.review__q{font-family:"Lora",serif;font-style:italic;color:#ded9d0;font-size:1.01rem;line-height:1.62;margin:0 0 1.1rem}
.review__q::before{content:"\201C";color:var(--gold);font-size:2.1rem;line-height:0;vertical-align:-.35em;margin-right:.12em}
.review__who{display:flex;align-items:center;gap:.7rem;font-size:.79rem}
.review__av{
width:32px;height:32px;border-radius:50%;flex:0 0 32px;display:grid;place-items:center;
background:linear-gradient(150deg,#22190a,#0d1117);border:1px solid var(--line);
color:var(--gold-hi);font-family:"Lora",serif;font-weight:600;font-size:.86rem;
}
.review__n{color:var(--cream);font-weight:400}
.review__s{color:var(--muted-2);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.review__stars{color:var(--gold);font-size:.8rem;letter-spacing:.12em;margin-left:auto}
/* ==========================================================================
15. POINTS DE VENTE
========================================================================== */
.buy{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1rem,2.4vw,1.8rem);align-items:stretch}
.price{
position:relative;display:flex;flex-direction:column;
background:linear-gradient(180deg,var(--panel),rgba(10,14,19,.6));
border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:clamp(1.7rem,3vw,2.3rem);
}
.price--hi{border-color:var(--line);background:linear-gradient(180deg,rgba(201,162,39,.10),rgba(10,14,19,.7))}
.price__tag{
position:absolute;top:-11px;left:clamp(1.7rem,3vw,2.3rem);background:var(--gold-grad);color:#15100a;
font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:.28rem .7rem;border-radius:100px;
}
.price__k{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.price__n{font-family:"Lora",serif;font-size:2.5rem;font-weight:600;color:var(--cream);line-height:1;margin-bottom:.2rem}
.price__n small{font-size:.95rem;font-family:"Poppins",sans-serif;color:var(--muted);font-weight:300}
.price__d{font-size:.87rem;color:var(--muted);margin:.55rem 0 1.3rem}
.price ul{list-style:none;margin:0 0 1.6rem;padding:0;font-size:.88rem}
.price li{padding:.32rem 0 .32rem 1.5rem;position:relative}
.price li::before{content:"";position:absolute;left:0;top:.92em;width:8px;height:2px;background:var(--gold);border-radius:2px}
.price .btn{margin-top:auto}
.sellers{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:.75rem;margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.seller{
display:flex;flex-direction:column;gap:.28rem;padding:1.05rem 1.15rem;border-radius:11px;
border:1px solid var(--line-soft);background:rgba(255,255,255,.02);color:var(--text);
transition:border-color .3s,background .3s,transform .3s;
}
.seller:hover{border-color:var(--line);background:rgba(201,162,39,.08);transform:translateY(-2px);color:var(--cream)}
.seller b{font-family:"Lora",serif;font-size:1.02rem;color:var(--cream);font-weight:600}
.seller span{font-size:.74rem;color:var(--muted-2)}
.seller em{font-style:normal;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:.2rem}
/* ==========================================================================
16. PRODUCTEURS / PRESSE
========================================================================== */
.prod{
background:
linear-gradient(100deg,rgba(8,11,16,.97) 0%,rgba(8,11,16,.90) 46%,rgba(8,11,16,.74) 100%),
linear-gradient(0deg,rgba(8,11,16,.55),rgba(8,11,16,.55)),
url("../img/carte-fond.jpg") center/cover no-repeat;
border:1px solid var(--line-soft);border-radius:var(--radius-lg);
padding:clamp(2rem,5vw,4rem);position:relative;overflow:hidden;
}
.prod::after{content:"";position:absolute;inset:0;background:radial-gradient(700px 420px at 88% 20%,rgba(201,162,39,.16),transparent 66%);pointer-events:none}
.prod{background-blend-mode:normal,saturation,normal}
.prod>*{position:relative;z-index:1}
.logline{
font-family:"Lora",serif;font-style:italic;font-size:clamp(1.15rem,2.4vw,1.72rem);
color:var(--cream);line-height:1.5;max-width:52ch;margin:0 0 1.8rem;
}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2rem}
.tag{
font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-hi);
border:1px solid var(--line);border-radius:100px;padding:.36rem .82rem;background:rgba(201,162,39,.07);
}
.assets-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.5rem}
/* ==========================================================================
17. AUTEUR
========================================================================== */
.author{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.author__ph{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.author__ph img{width:100%;filter:grayscale(1) contrast(1.06)}
.author__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,14,19,.72))}
/* ==========================================================================
18. FAQ
========================================================================== */
.faq{border-top:1px solid var(--line-soft)}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{
list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
font-family:"Lora",serif;font-size:clamp(1rem,1.7vw,1.18rem);color:var(--cream);font-weight:500;
transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-hi)}
.faq summary::after{
content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;
border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq__a{padding:0 2.5rem 1.6rem 0;color:var(--text);font-size:.96rem}
.faq__a p:last-child{margin-bottom:0}
/* ==========================================================================
19. CONTACT & FORMULAIRE
========================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.contact-ways{display:grid;gap:.85rem}
.way{display:flex;gap:1rem;padding:1.2rem 1.35rem;border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(255,255,255,.02)}
.way__i{
flex:0 0 40px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
background:linear-gradient(150deg,#22190a,#0d1117);border:1px solid var(--line);color:var(--gold-hi);
}
.way__i svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.way b{display:block;color:var(--cream);font-family:"Lora",serif;font-weight:600;margin-bottom:.15rem}
.way p{margin:0;font-size:.87rem;color:var(--muted)}
.form{background:linear-gradient(180deg,var(--panel),rgba(10,14,19,.6));border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.3rem)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.field input,.field select,.field textarea{
width:100%;padding:.85rem 1rem;border-radius:9px;border:1px solid var(--line-soft);
background:rgba(0,0,0,.35);color:var(--cream);font:inherit;font-size:.94rem;
transition:border-color .3s,background .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(0,0,0,.55)}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__note{font-size:.76rem;color:var(--muted-2);margin-top:.9rem}
.form__msg{margin-top:1rem;padding:.9rem 1.1rem;border-radius:9px;font-size:.88rem;display:none}
.form__msg.is-ok{display:block;background:rgba(88,180,120,.12);border:1px solid rgba(88,180,120,.4);color:#a8e6bf}
.form__msg.is-err{display:block;background:rgba(220,90,90,.12);border:1px solid rgba(220,90,90,.4);color:#f0b4b4}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Variante « écrivez-moi directement » : le formulaire est remplacé par des
adresses de courriel cliquables, dans le même panneau. Elle est construite
par assets/js/options.js quand SITE_CONFIG.contact.mode vaut "courriel" —
ou quand la clé Web3Forms n'est pas renseignée. Voir config.js. */
.form--direct{display:grid;gap:.8rem;align-content:start}
.form--direct .btn{margin:0;flex-direction:column;gap:.25rem;line-height:1.35;text-align:center}
.form--direct .form__note{margin:0}
.form__note--lead{font-size:.9rem;color:var(--muted);margin-bottom:.3rem}
/* L'adresse elle-même, en dessous du libellé du bouton : plus discrète, mais
lisible et sélectionnable pour qui préfère la recopier à la main. */
.form__adr{display:block;font-size:.78rem;letter-spacing:.02em;text-transform:none;opacity:.82}
/* ==========================================================================
20. PIED DE PAGE
========================================================================== */
.ftr{border-top:1px solid var(--line-soft);background:rgba(0,0,0,.42);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.6rem,3.5vw,3rem)}
/* h2 et non h4 (B33) : le pied de page suit le dernier h2 de la page ;
un h4 sautait un niveau de titre pour les lecteurs d'écran. */
.ftr h2{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-family:"Poppins",sans-serif;font-weight:500;margin-bottom:1.1rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ftr a{color:var(--muted);font-size:.88rem}
.ftr a:hover{color:var(--gold-hi)}
.ftr__bot{margin-top:clamp(2.2rem,4vw,3.4rem);padding-top:1.6rem;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;font-size:.78rem;color:var(--muted-2)}
/* Bande d'achat mobile fixe */
.buybar{
position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
gap:.6rem;padding:.7rem clamp(.8rem,3vw,1.2rem) calc(.7rem + env(safe-area-inset-bottom));
background:rgba(8,11,16,.96);border-top:1px solid var(--line-soft);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
transform:translateY(110%);transition:transform .45s var(--ease);
}
.buybar.is-on{transform:none}
.buybar .btn{flex:1 1 0;padding:.85rem .6rem;font-size:.68rem}
/* ==========================================================================
21. RESPONSIVE
========================================================================== */
@media (max-width:1260px){
/* barre de navigation resserrée avant le passage au menu déroulant */
.nav a{padding:.5rem .52rem;font-size:.78rem}
.hdr__cta .btn{padding:.8rem 1.05rem;font-size:.72rem}
.lang a{padding:.4rem .35rem}
}
@media (max-width:1180px){
.reviews{columns:2}
/* MENU DÉROULANT (« burger ») DÈS 1180 PX — et non plus 1024 px.
Le menu complet (8 liens, « Commander », Instagram, TikTok, FR / EN)
mesure environ 1110 px en français et 1160 px en anglais. Entre 1025 et
1150 px il ne tenait donc pas : overflow-x:hidden coupait sa fin, et le
sélecteur de langue devenait invisible et impossible à cliquer (B24 :
portable 1366 px zoomé à 125 %, iPad en paysage…). Au-delà de 1180 px,
la règle 1260 px ci-dessus le resserre et il tient.
⚠ Seul l'EN-TÊTE change de seuil : la barre d'achat mobile et le pied
de page qui lui réserve sa place restent pilotés par 1024 px, plus bas.
Les deux autres blocs du menu (icônes sociales, langue active, section
26) utilisent le même seuil de 1180 px. */
/* Menu déroulant plein écran sous l'en-tête */
.nav{
position:fixed;inset:72px 0 auto;display:block;
background:#0b0f15;border-bottom:1px solid var(--line-soft);
box-shadow:0 26px 54px -22px rgba(0,0,0,.95);
padding:.5rem clamp(1.1rem,4vw,2.2rem) 1.5rem;margin:0;gap:0;
transform:translateY(-142%);
max-height:calc(100dvh - 72px);overflow-y:auto;
/* FERMÉ = INVISIBLE, et pas seulement déplacé (B25). Glissé hors de
l'écran par translateY, le menu gardait ses 13 liens dans l'ordre de
tabulation et dans ce que lit un lecteur d'écran : le visiteur au
clavier traversait des liens invisibles. visibility:hidden les retire.
Pour garder l'animation, ce changement est RETARDÉ à la fermeture
(0,4 s : le menu finit de glisser avant de disparaître) et immédiat
à l'ouverture (règle .is-open). */
visibility:hidden;
transition:transform .4s var(--ease),visibility 0s linear .4s;
}
.nav.is-open{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
.nav a{display:block;padding:.92rem .2rem;font-size:.98rem;border-bottom:1px solid rgba(255,255,255,.05)}
.hdr__cta{display:block;position:static;transform:none;background:none;padding:0;margin:1.2rem 0 .2rem;max-height:none;overflow:visible}
.hdr__cta .btn{width:100%}
.lang{display:flex;border-left:0;padding-left:0;margin:.9rem 0 0}
.lang a{padding:.5rem .8rem;border:1px solid var(--line-soft);border-radius:7px}
.burger{display:flex}
}
@media (max-width:1100px){
/* Carte narrative : une seule colonne, carte COLLÉE sous l'en-tête.
Auparavant la carte était « décollée » (position:static) : elle restait
en haut de la section pendant que les 14 étapes défilaient dessous, et
sortait de l'écran dès la première. Sur téléphone et tablette, on ne
voyait donc jamais le trajet s'allumer au fil du récit.
Elle reste désormais affichée en haut de l'écran, fond opaque, et les
étapes défilent sous elle. Sa hauteur est limitée à 42 % de l'écran ;
sa LARGEUR est réduite en conséquence (et non sa hauteur seule), pour
garder les proportions exactes de l'image : les pastilles et le tracé
sont placés en pourcentage et se décaleraient sinon.
La ligne qui déclenche les étapes suit le bas de la carte : voir
calcStep() dans assets/js/storymap.js. */
.sm__grid{grid-template-columns:1fr}
.sm__sticky{
top:var(--hdr-h);z-index:5;
background:var(--ink-2);
padding:.5rem 0 .6rem;
box-shadow:0 14px 18px -14px rgba(0,0,0,.85);
}
.sm__map{width:min(100%,calc(42svh * 1.5504));margin-inline:auto}
/* légende compacte : on garde les trois repères de couleur, la phrase
d'introduction (déjà présente au-dessus de la section) est retirée */
.sm__legend{margin-top:.45rem;font-size:.78rem;justify-content:center}
.sm__legend-txt{display:none}
.sm--tune .sm__legend-txt{display:inline} /* consigne du mode réglage */
/* Pas de marge sous la dernière étape : la carte se décolle dès la fin de
la frise, au lieu de recouvrir encore l'étape 14 sur 50 px de défilement. */
.sm__time .step:last-child{margin-bottom:0}
.sm__time{margin-top:2rem}
/* Haut de page : la vidéo (ou la couverture) ne passe plus sous le texte
ici, à 1100 px. Le seuil se règle dans config.js (layout.heroStackBelow) :
voir la section 30.2 en fin de fichier. */
.two-col,.contact,.author{grid-template-columns:1fr}
.author__ph{max-width:280px}
}
@media (max-width:1024px){
.stats__grid{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(3){border-left:0}
.stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
.ftr__grid{grid-template-columns:1fr 1fr}
.buybar{display:flex}
/* La barre d'achat est FIXE en bas de l'écran : rien ne lui réservait de
place, et en bas de l'accueil elle recouvrait la dernière ligne du pied
de page (« Mentions légales · English version · Haut de page »), qui
devenait inaccessible. On allonge donc le pied de page de la hauteur de
la barre (zone de sécurité des iPhone comprise), uniquement sur les
pages qui ont cette barre : . */
.has-buybar .ftr{padding-bottom:calc(2rem + var(--buybar-h) + env(safe-area-inset-bottom))}
/* Focus clavier jamais sous la barre d'achat : voir « FOCUS CLAVIER (B26) »
en tête de ce fichier. */
html.js-buybar{scroll-padding-bottom:calc(var(--buybar-h) + env(safe-area-inset-bottom) + .5rem)}
}
@media (max-width:700px){
/* la couverture porte déjà la médaille imprimée : on évite le doublon */
.hero__badge{display:none}
.reviews{columns:1}
.field--2{grid-template-columns:1fr}
.book-stage{min-height:66vh}
.extract-list{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
/* Carte plein écran, pastilles et étiquette réduites */
.storymap .wrap{padding-inline:0}
.storymap .section-head,.storymap .sm__time,.storymap .sm__legend,.storymap .sm__after{padding-inline:clamp(1.1rem,4vw,2.2rem)}
.sm__map{border-radius:0;border-left:0;border-right:0}
.pin{width:24px;height:24px;font-size:.66rem}
/* Pastilles des étapes proches écartées de quelques pixels (B31) :
« translate » s'AJOUTE au transform de centrage et de mise à l'échelle,
sans le remplacer. Valeurs : decalageMobile dans carte-data.js. */
.pin{translate:var(--mx,0px) var(--my,0px)}
.pin[data-state="live"]{transform:translate(-50%,-50%) scale(calc(var(--z-inv,1)*1.24))}
.sm__tag{left:8px;bottom:8px;font-size:.72rem;padding:.45rem .7rem;max-width:78%}
.sm__tag .n{flex-basis:20px;width:20px;height:20px;font-size:.64rem}
.sm__medal{width:62px;right:8px;bottom:8px}
.sm-label{font-size:calc(12px * var(--z-inv,1));opacity:0;transition:opacity .4s var(--ease)}
.sm-label[data-on="1"]{opacity:1}
.sm-label[data-type="pays"]{opacity:0}
.sm-label[data-type="pays"][data-on="1"]{opacity:.9}
/* Les repères (italique) aussi : la règle générale qui leur donne
opacity:.8 est plus spécifique que .sm-label ci-dessus, et les gardait
affichés à toutes les étapes sur téléphone (B30). */
.sm-label[data-type="repere"]{opacity:0}
.sm-label[data-type="repere"][data-on="1"]{opacity:1}
.sm__time{padding-left:1.5rem}
}
@media (max-width:520px){
.ftr__grid{grid-template-columns:1fr}
.extract-list{grid-template-columns:1fr}
.btn{padding:.95rem 1.3rem;font-size:.74rem}
}
/* Boutons placés sous la carte du parcours (B36). Ils étaient posés à nu
après un
: sous 680 px, la section carte perd sa marge latérale et
ils touchaient les deux bords de l'écran, et l'un l'autre. */
.sm__after{margin-top:clamp(1.8rem,4vw,2.6rem)}
/* Contenu de repli du livre 3D et de la carte, visible seulement sans
JavaScript : les scripts le retirent avant de construire (B38). */
.nojs-fallback{max-width:340px;margin:0 auto;text-align:center}
.nojs-fallback img{margin:0 auto 1rem;border-radius:6px;box-shadow:var(--shadow)}
.nojs-fallback figcaption{font-size:.9rem;color:var(--muted-2)}
/* ==========================================================================
IMPRESSION : version lisible du dossier (B29)
L'ancienne version se contentait d'un fond blanc. Résultat sur papier ou en
PDF : une page presque blanche. Les blocs .reveal pas encore passés à
l'écran restaient à opacity:0, et le texte gardait les couleurs CLAIRES du
thème sombre (crème, or, gris clair : contraste de 1,1 à 2,4 sur blanc).
C'est pourtant l'espace presse et le dossier série qu'un journaliste ou un
producteur imprime ou enregistre en PDF.
Principe : encre sombre sur fond blanc PARTOUT, puis on retire ce qui n'a
pas de sens sur papier (menu, livre 3D, carte interactive, boutons…).
========================================================================== */
@media print{
html,body{background:#fff!important}
body::before{display:none}
*,*::before,*::after{
color:#1a1a1a!important;background:transparent!important;
box-shadow:none!important;text-shadow:none!important;filter:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
h1,h2,h3,h4,strong,b{color:#000!important}
.kicker,.award-band__k,.step__n{color:#5c4a12!important}
a{text-decoration:underline}
/* Blocs d'apparition au défilement : tous visibles. */
.reveal{opacity:1!important;transform:none!important}
/* Ce qui ne s'imprime pas : navigation, commandes, éléments interactifs. */
.hdr,.skip-link,.buybar,.book-fs,#book3d,.extract-list,.btn,.btn-row,.form,
.intro-toggle,.reviews-more,.hero__video,.hero__play,
.sm__sticky,.sm__pins,.stats::before{display:none!important}
/* Couverture : l'image revient si la vidéo l'avait remplacée. */
.hero__cover img[hidden]{display:block!important}
.hero__cover::before,.hero__cover::after{display:none}
/* Avis supplémentaires et réponses de la FAQ : tout est imprimé. */
.reviews [data-extra][hidden]{display:block!important}
.faq details::details-content{content-visibility:visible;display:block}
/* Note des lecteurs : étoiles grises, part pleine en noir. */
.star{color:#bbb!important}
.star__on{color:#000!important}
/* Cartes, sections : filets fins, pas de coupure au milieu d'une carte. */
.card,.price,.review,.way,.faq details{border-color:#ccc!important;break-inside:avoid}
.section{padding:1.2rem 0}
img,figure,blockquote{break-inside:avoid}
}
/* ==========================================================================
11 bis. LIVRE 3D — GÉOMÉTRIE DU VOLUME
Les variables --w (largeur de page), --h (hauteur) et --t (épaisseur)
sont calculées par assets/js/book3d.js en fonction de la place disponible.
========================================================================== */
.book-rot{
position:relative;width:0;height:var(--h,480px);
transform-style:preserve-3d;transition:transform .9s var(--ease);
}
/* RENDU NET (--rs, posé par book3d.js).
Dans une perspective 3D, le navigateur dessine le livre à la résolution
d'un écran ordinaire, puis l'étire : le livre était flou, et deux fois plus
flou sur un écran haute densité (portable récent, téléphone). On le met
donc en page --rs fois plus grand (« zoom » : textes, marges et images
compris), puis on le ramène à sa taille avec scale3d — 3d, pour que la
profondeur (épaisseur, écart des pages) soit réduite elle aussi. Même
taille, même place à l'écran, mais dessiné avec --rs fois plus de détail.
Toutes les translations ci-dessous sont précédées de cette réduction
(--bk-s), avec l'origine en haut à gauche. */
.book{
--bk-s:scale3d(var(--rs-inv,1),var(--rs-inv,1),var(--rs-inv,1));
zoom:var(--rs,1);transform-origin:0 0;
position:absolute;top:0;left:0;width:var(--w,340px);height:var(--h,480px);
transform-style:preserve-3d;transform:var(--bk-s) translateX(-50%);
transition:transform .95s var(--ease);
}
.book.is-open{transform:var(--bk-s) translateX(0)}
/* Dernier cran : le livre se referme sur la quatrième de couverture,
toutes les pages passées à gauche. On le recentre. */
.book.is-closed-back{transform:var(--bk-s) translateX(50%)}
/* Une fois le livre ouvert, le dos passe derrière la reliure : on l'efface.
Il réapparaît dès que le livre est refermé, d'un côté ou de l'autre. */
.bk__spine{transition:opacity .55s var(--ease)}
.book.is-open .bk__spine{opacity:0}
/* Livre fermé sur la couverture : dos à gauche. */
.bk__spine--back{opacity:0}
/* Livre fermé sur la quatrième de couverture : dos à droite. */
.book.is-closed-back .bk__spine{opacity:0}
.book.is-closed-back .bk__spine--back{opacity:1}
/* — dos du livre — */
.bk__spine{
position:absolute;top:0;left:0;width:var(--t,58px);height:100%;
transform-origin:left center;
transform:translateZ(calc(var(--t,58px) / -2)) rotateY(-90deg);
background:url("../img/livre-dos.jpg") center/100% 100% no-repeat,#0b0f14;
border-radius:3px 0 0 3px;
box-shadow:inset -6px 0 14px rgba(0,0,0,.55);
}
/* Le même dos, mais orienté vers la droite : visible quand le livre est
refermé sur sa quatrième de couverture. Le fond est appliqué sur un
pseudo-élément retourné pour que le titre reste lisible dans le bon sens. */
.bk__spine--back{
position:absolute;top:0;left:0;width:var(--t,58px);height:100%;
transform-origin:left center;
transform:translateZ(calc(var(--t,58px) / 2)) rotateY(90deg);
border-radius:0 3px 3px 0;overflow:hidden;background:#0b0f14;
box-shadow:inset 6px 0 14px rgba(0,0,0,.55);
}
.bk__spine--back::before{
content:"";position:absolute;inset:0;
background:url("../img/livre-dos.jpg") center/100% 100% no-repeat,#0b0f14;
}
/* — tranches (chants) des deux piles de pages — */
.bk__edge{
position:absolute;top:1px;height:calc(100% - 2px);width:var(--ew,10px);
transform-origin:left center;
background:
repeating-linear-gradient(180deg,rgba(120,104,70,.16) 0 1px,transparent 1px 4px),
linear-gradient(90deg,#b9ae94,#f2ece0 26%,#e0d7c3 62%,#b7ac93);
transition:opacity .5s var(--ease);
}
.bk__edge--r{left:var(--w,340px);transform:translateZ(var(--ez,0px)) rotateY(90deg)}
.bk__edge--l{left:0;transform:translateX(calc(var(--w,340px) * -1)) translateZ(var(--ez,0px)) rotateY(-90deg)}
/* — feuillets — */
.page{
position:absolute;top:0;left:0;width:100%;height:100%;
transform-origin:left center;transform-style:preserve-3d;
transform:rotateY(0deg) translateZ(var(--z,0px));
transition:transform 1.05s var(--ease);
}
.page.is-turned{transform:rotateY(-180deg) translateZ(var(--z,0px))}
/* Le feuillet n'est qu'un conteneur 3D, sans surface : seules ses faces
reçoivent les clics. Sinon le navigateur le retenait parfois au test de
clic et volait un clic au lien « Commander » de la dernière page (B43). */
.page{pointer-events:none}
.page__side{pointer-events:auto}
@media (prefers-reduced-motion:reduce){.page,.book,.book-rot{transition-duration:.001s}}
.page__side{border-radius:2px 4px 4px 2px}
.page__side--back{border-radius:4px 2px 2px 4px}
.page__side--cover{padding:0;background:#0a0e13;box-shadow:inset 0 0 60px rgba(0,0,0,.4)}
.page__side--cover::before{display:none}
.page__img{width:100%;height:100%;object-fit:cover;display:block}
.page__side--cover::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(115deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 28%,rgba(255,255,255,0) 72%,rgba(255,255,255,.07) 100%);
}
.page__center{margin:auto;text-align:center;max-width:86%}
.page__mark{color:#b99a3a;font-size:calc(1.35rem * var(--page-k,1));margin-bottom:.9rem}
.page__big{font-family:"Lora",serif;font-weight:600;color:#1c1811;font-size:calc(clamp(1.05rem,1.9vw,1.75rem) * var(--page-k,1));line-height:1.15;margin:0 0 .5rem}
.page__sub{font-family:"Lora",serif;font-style:italic;color:#5c5340;font-size:calc(clamp(.72rem,1.1vw,1rem) * var(--page-k,1));margin:0 0 1.4rem}
.page__auth{font-size:calc(clamp(.6rem,.9vw,.8rem) * var(--page-k,1));letter-spacing:.28em;text-transform:uppercase;color:#3c3527;margin:0}
.page__meta{font-size:calc(clamp(.52rem,.78vw,.68rem) * var(--page-k,1));color:#8a7b5f;margin:1.6rem 0 0;letter-spacing:.06em}
.page__text ol{margin:.4rem 0 0;padding-left:1.1rem}
.page__text li{margin-bottom:.35em}
.page__cta{
align-self:flex-start;margin-top:auto;font-family:"Poppins",sans-serif;font-weight:500;
font-size:calc(clamp(.55rem,.82vw,.72rem) * var(--page-k,1));letter-spacing:.14em;text-transform:uppercase;
color:#6b551a;border-bottom:1px solid #b99a3a;padding-bottom:.2rem;
/* Au-dessus du numéro de page : collé en bas de la face, le lien passait
SOUS le « 17 » imprimé en pied de page, qui recouvrait son soulignement
(constaté en corrigeant B27). */
margin-bottom:1.6em;
}
.page__cta:hover{color:#1c1811}
/* ==========================================================================
21 bis. LIVRE 3D SUR PETIT ÉCRAN
Une seule page à la fois : le livre reste centré sur la page de droite,
la page de gauche déborde légèrement, comme dans un vrai livre tenu en main.
(Ce bloc doit rester en fin de fichier pour l'emporter sur la règle
« .book.is-open » de la section 11 bis.)
Le mode une page est signalé par la classe « is-solo », posée par
assets/js/book3d.js sous la largeur réglée dans config.js
(book.singlePageBelow, 780 px par défaut ; 700 px auparavant, en dur ici).
========================================================================== */
.book.is-solo.is-open{transform:var(--bk-s) translateX(-50%)}
/* Page de GAUCHE au centre : sans cette règle, elle ne passait jamais
devant le lecteur et la moitié du livre restait illisible. La classe est
posée par assets/js/book3d.js, qui feuillette ici page par page. */
.book.is-solo.is-open.show-left{transform:var(--bk-s) translateX(50%)}
@media (max-width:700px){
.book-ui{gap:.45rem}
.book-counter{min-width:78px;font-size:.7rem}
}
/* Bloc de texte centré verticalement dans la page, avec un fleuron en pied. */
.page__body{margin:auto 0;display:flex;flex-direction:column}
.page__orn{position:relative;margin-top:1.5em;height:7px;flex:0 0 7px}
.page__orn::before{content:"";position:absolute;left:0;top:3px;width:26px;height:1px;background:#c2a44f;opacity:.55}
.page__orn::after{content:"";position:absolute;left:32px;top:0;width:7px;height:7px;background:#b99a3a;transform:rotate(45deg);opacity:.8}
.page__side--quote .page__text{flex:0 0 auto}
.page__text{font-size:calc(clamp(.66rem,1.02vw,.94rem) * var(--page-k,1))}
/* ==========================================================================
22. BANDEAU « PRIX DU ROMAN HISTORIQUE »
Bande pleine largeur, fond or rayé, texte sombre : rupture volontaire
avec le reste du site pour que la distinction saute aux yeux.
========================================================================== */
.award-band{
position:relative;overflow:hidden;
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0 2px,transparent 2px 7px),
linear-gradient(180deg,#e3bc45,#d3aa33);
color:#241b05;
padding:clamp(2.4rem,5vw,3.6rem) 0;
border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18);
}
.award-band__in{
display:grid;grid-template-columns:auto minmax(0,1fr) auto;
gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
}
.award-band__medal{
width:clamp(112px,15vw,220px);aspect-ratio:1;flex:0 0 auto;
filter:drop-shadow(0 14px 28px rgba(60,40,0,.42));
}
.award-band__k{
font-family:"Poppins",sans-serif;font-weight:bold;font-size:.9rem;letter-spacing:.26em;
text-transform:uppercase;color:rgba(36,27,5,.72);margin:0 0 .7rem;
}
.award-band__t{
font-family:"Lora",serif;font-weight:600;color:#1c1503;line-height:1.02;
font-size:clamp(1.9rem,5vw,3.5rem);letter-spacing:-.015em;margin:0 0 .9rem;
}
.award-band__q{
font-family:"Lora",serif;font-style:italic;color:#31260a;line-height:1.5;
font-size:clamp(1rem,1.7vw,1.32rem);margin:0 0 .9rem;max-width:52ch;
}
.award-band__src{
font-family:"Poppins",sans-serif;font-weight:500;font-size:.68rem;letter-spacing:.17em;
text-transform:uppercase;color:rgba(36,27,5,.7);margin:0;
}
/* Médaillon « 2023 » : TOUJOURS ROND. Largeur ET hauteur sont fixées (et non
la largeur seule avec aspect-ratio) : quand son texte dépassait la place,
aspect-ratio laissait la hauteur grandir, et le rond devenait un ovale
sous 980 px. Le plancher de 116 px est la taille sous laquelle ses quatre
lignes ne tiennent plus. */
.award-band__stamp{
--stamp:clamp(116px,10vw,132px);
width:var(--stamp);height:var(--stamp);flex:0 0 auto;box-sizing:border-box;
border-radius:50%;overflow:hidden;
border:1.5px solid rgba(36,27,5,.55);display:grid;place-content:center;text-align:center;
padding:.4rem;
}
.award-band__stamp b{
display:block;font-family:"Lora",serif;font-weight:700;font-size:1.15rem;color:#1c1503;margin-bottom:.3rem;
}
.award-band__stamp span{
display:block;font-family:"Poppins",sans-serif;font-weight:500;font-size:.53rem;
letter-spacing:.15em;line-height:1.5;text-transform:uppercase;color:rgba(36,27,5,.8);
}
.award-band__stamp em{display:block;font-style:normal;color:rgba(36,27,5,.5);letter-spacing:.3em;margin-top:.25rem;white-space:nowrap}
/* Médaillon masqué par config.js (layout.showAwardStamp: false) : options.js
le retire, et la colonne qu'il occupait disparaît avec lui. */
.award-band__in--nostamp{grid-template-columns:auto minmax(0,1fr)}
/* Le médaillon RESTE À DROITE quand la fenêtre rétrécit. Il passait
auparavant sous le texte à 980 px, puis disparaissait à 620 px. */
@media (max-width:980px){
.award-band__in{column-gap:clamp(1.1rem,3vw,1.6rem)}
}
/* Téléphone : la médaille et le médaillon côte à côte en haut, le médaillon
à DROITE, puis le texte sur toute la largeur. */
@media (max-width:620px){
.award-band__in{
grid-template-columns:auto minmax(0,1fr);
grid-template-areas:"medal stamp" "text text";
row-gap:1.4rem;text-align:left;
}
.award-band__in > picture{grid-area:medal}
.award-band__in > div:not(.award-band__stamp){grid-area:text}
.award-band__stamp{grid-area:stamp;justify-self:end}
/* Médaillon masqué : la médaille, seule sur sa ligne, se centre au-dessus
du texte. */
.award-band__in--nostamp{grid-template-columns:1fr;grid-template-areas:"medal" "text"}
.award-band__in--nostamp > picture{justify-self:center}
.award-band__medal{width:120px}
}
/* ==========================================================================
23. NOTE MOYENNE DES AVIS
========================================================================== */
.rating-live__score{font-variant-numeric:tabular-nums}
.rating-live__note{
font-family:"Poppins",sans-serif;font-size:.72rem;letter-spacing:.04em;color:var(--muted-2);
flex-basis:100%;margin:0;
}
/* ==========================================================================
24. BANDEAU « DISTINCTIONS » — document d'archive + liste des décorations
Fond or, texte sombre : même famille visuelle que le bandeau du Prix.
========================================================================== */
.award-split{
display:grid;grid-template-columns:minmax(0,53fr) minmax(0,47fr);align-items:stretch;
background:
repeating-linear-gradient(90deg,rgba(0,0,0,.055) 0 2px,transparent 2px 7px),
linear-gradient(180deg,#e3bc45,#d3aa33);
color:#241b05;
border-top:1px solid rgba(0,0,0,.18);border-bottom:1px solid rgba(0,0,0,.18);
}
/* LE DIPLÔME EST TOUJOURS MONTRÉ EN ENTIER.
Il était posé en « object-fit: cover » dans une boîte aux proportions de la
colonne : selon la largeur de la fenêtre, ses bords gauche et droit (1000 à
1440 px) ou son haut et son bas (téléphone) étaient rognés, et un dégradé
doré effaçait en plus son tiers droit. Il garde maintenant ses propres
proportions, centré dans la colonne ; s'il reste de la place, c'est le fond
doré du bandeau qui l'entoure. La légende passe SOUS le document au lieu de
le recouvrir. */
.award-split__doc{
position:relative;margin:0;overflow:hidden;
display:flex;flex-direction:column;justify-content:center;
}
.award-split__doc img{width:100%;height:auto;display:block}
/* Seul le bord droit du document se fond dans l'or, sur une bande étroite,
comme un tirage collé sur la page. */
.award-split__doc::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(211,170,51,0) 95%,rgba(211,170,51,.6) 100%);
}
.award-split__doc figcaption{
position:relative;z-index:2;align-self:flex-start;
background:rgba(20,15,3,.82);color:#f0e2b4;
font-family:"Poppins",sans-serif;font-weight:500;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
padding:.5rem .95rem;
}
.award-split__txt{
display:flex;flex-direction:column;justify-content:center;
padding:clamp(2.4rem,5vw,4.6rem) clamp(1.4rem,5vw,4.6rem);
}
.award-split__txt .award-band__t{margin-bottom:1.5rem;font-size:clamp(1.7rem,3.5vw,2.95rem)}
.award-split__note{
font-family:"Lora",serif;font-style:italic;color:#3a2c07;opacity:.9;
font-size:clamp(.85rem,1.15vw,.98rem);line-height:1.6;margin:1.7rem 0 0;max-width:52ch;
}
/* Liste des décorations */
.honours{list-style:none;margin:0;padding:0}
.honours li{
display:flex;align-items:center;gap:1.15rem;
padding:clamp(.95rem,1.7vw,1.25rem) 0;
border-top:1px solid rgba(36,27,5,.22);
}
.honours li:last-child{border-bottom:1px solid rgba(36,27,5,.22)}
.honours__ico{flex:0 0 26px;width:26px;height:26px;color:#2e2205;display:grid;place-items:center}
.honours__ico svg{width:24px;height:24px}
.honours b{
display:block;font-family:"Lora",serif;font-weight:600;color:#1c1503;
font-size:clamp(1rem,1.5vw,1.22rem);line-height:1.2;
}
.honours span{
display:block;font-family:"Poppins",sans-serif;font-weight:500;font-size:.6rem;
letter-spacing:.19em;text-transform:uppercase;color:rgba(36,27,5,.66);margin-top:.22rem;
}
@media (max-width:900px){
.award-split{grid-template-columns:1fr}
.award-split__doc::after{content:none}
}
/* ==========================================================================
25. AVIS — liens vers la source et bouton « voir tous les commentaires »
========================================================================== */
.review__s a{color:var(--muted-2);border-bottom:1px solid rgba(201,162,39,.35);transition:color .25s,border-color .25s}
.review__s a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
.review[hidden]{display:none}
.reviews-more{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem;
margin-top:clamp(1.6rem,3vw,2.4rem);
}
.reviews-more__note{font-size:.8rem;color:var(--muted-2);flex-basis:100%;text-align:center;margin:0}
/* ==========================================================================
26. OPTIONS DU SITE — accueil, texte d'introduction, réseaux sociaux
Ce bloc accompagne assets/js/config.js et assets/js/options.js.
Il est placé en fin de fichier afin de l'emporter sur les règles
génériques sans avoir à les modifier.
========================================================================== */
/* --- 26.1 Accueil : vidéo à la place de l'image de couverture -------------
La vidéo occupe exactement la place de l'image (même boîte, mêmes coins
arrondis, mêmes ombres et mêmes reflets portés par .hero__cover) : basculer
SITE_CONFIG.hero.useVideo ne déplace donc rien dans la mise en page. */
.hero__video{
display:block;width:100%;height:auto;
border-radius:3px 7px 7px 3px;
box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.08);
background:#0a0e13;object-fit:cover;
}
.hero__cover img[hidden],.hero__cover video[hidden]{display:none}
/* --- 26.2 « Ce qui suit n'est pas une fiction » ---------------------------
Typographie harmonisée : le chapeau et les paragraphes suivants partagent
désormais la MÊME taille et le même interlignage. C'est la correction du
défaut d'origine (deux tailles différentes utilisées uniquement pour éviter
un débordement). Le chapeau reste distingué par sa seule couleur, ce qui
préserve la hiérarchie de lecture sans casser l'homogénéité. */
.intro-text .lead,
.intro-text p{
font-size:clamp(1rem,1.18vw,1.1rem);
line-height:1.78;
}
.intro-text .lead{color:#c3cad5}
.intro-text p{color:var(--text)}
/* La citation encadrée garde son statut de citation : elle n'est pas du
texte courant et conserve donc sa propre taille. */
.intro-text .pull{font-size:clamp(1.05rem,1.8vw,1.32rem)}
/* Bloc repliable (modes 1, 2 et 3). En mode 0, aucune de ces classes n'est
posée : le texte s'affiche normalement, sans surcharge d'aucune sorte. */
.intro-more{--intro-lines:6}
.intro--clamp .intro-more,
.intro--fold .intro-more{
position:relative;overflow:hidden;
transition:max-height .55s var(--ease);
}
/* Mode 1 : troncature après --intro-lines lignes, avec fondu en pied. */
.intro--clamp .intro-more{max-height:calc(var(--intro-lines) * 1.78em)}
/* Mode 2 : le chapeau seul reste visible, la suite est entièrement repliée. */
.intro--fold .intro-more{max-height:0}
.intro--clamp.is-open .intro-more,
.intro--fold.is-open .intro-more{max-height:none}
/* Voile de fondu : uniquement en mode tronqué et uniquement replié. */
.intro--clamp .intro-more::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:5.5em;pointer-events:none;
background:linear-gradient(180deg,rgba(10,14,19,0),var(--ink) 88%);
transition:opacity .4s var(--ease);
}
.section--alt .intro--clamp .intro-more::after{
background:linear-gradient(180deg,rgba(14,20,28,0),var(--ink-2) 88%);
}
.intro--clamp.is-open .intro-more::after{opacity:0}
@media (prefers-reduced-motion:reduce){.intro-more{transition:none}}
/* Bouton de dépliage : discret, dans le vocabulaire doré du site, jamais
l'allure d'un composant générique ajouté par-dessus la maquette. */
.intro-toggle{
display:inline-flex;align-items:center;gap:.55rem;
margin:.2rem 0 1.15rem;padding:.15rem 0;
border:0;background:none;cursor:pointer;
font-family:"Poppins",sans-serif;font-weight:500;font-size:.75rem;
letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);
border-bottom:1px solid var(--line);
transition:color .25s var(--ease),border-color .25s var(--ease);
}
.intro-toggle:hover{color:#fff;border-bottom-color:var(--gold-hi)}
.intro-toggle::after{
content:"";width:7px;height:7px;flex:0 0 7px;margin-bottom:2px;
border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
transform:rotate(45deg);transition:transform .35s var(--ease);
}
.intro-toggle[aria-expanded="true"]::after{transform:rotate(-135deg);margin-bottom:-2px}
.intro-toggle[hidden]{display:none}
/* --- 26.3 Blocs à typographie homogène ------------------------------------
Utilisé par la section « L'auteur » et par « En bref » de l'espace presse :
ces blocs mélangeaient un paragraphe .lead et des paragraphes courants, soit
deux tailles de police pour un même bloc de lecture. */
.txt-even .lead,
.txt-even p{
font-size:clamp(1rem,1.18vw,1.1rem);
line-height:1.78;
}
.txt-even .lead{color:#c3cad5}
.txt-even p{color:var(--text)}
.txt-even>p:last-of-type{margin-bottom:0}
/* Section « L'auteur » : photo recentrée verticalement sur le bloc de texte
et centrée horizontalement une fois la grille passée sur une colonne. */
.author{align-items:center}
.author__ph{align-self:center;margin-inline:auto;width:100%}
@media (max-width:1100px){
.author__ph{max-width:260px}
.author>div:last-child{text-align:left}
}
/* --- 26.4 Réseaux sociaux (en-tête et pied de page) ------------------------
Les adresses proviennent TOUTES de SITE_CONFIG.social (assets/js/config.js)
et sont injectées par assets/js/options.js : elles ne sont écrites nulle
part dans le HTML, ni ici. */
.social{display:inline-flex;align-items:center;gap:.25rem}
.social[hidden]{display:none}
.social__lnk{
display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
color:var(--text);border:1px solid transparent;
transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease);
}
.social__lnk svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social__lnk:hover{color:var(--gold-hi);background:rgba(201,162,39,.10);border-color:var(--line)}
/* En-tête : les icônes précèdent le sélecteur de langue, tout à droite. */
.hdr .social{margin-left:.35rem}
/* padding:0 et display:grid sont réaffirmés ici : les icônes vivent à
l'intérieur de .nav, dont la règle « .nav a » impose autrement un
rembourrage et un affichage en bloc pensés pour des liens de texte. */
.hdr .social__lnk{display:grid;width:34px;height:34px;padding:0;border-bottom:0}
.hdr .social__lnk svg{width:18px;height:18px}
/* Pied de page : icônes un peu plus grandes, alignées sous le logotype. */
.ftr .social{margin-top:1.1rem;gap:.35rem}
.ftr .social__lnk{width:40px;height:40px;border-color:var(--line-soft);background:rgba(255,255,255,.02)}
.ftr .social__lnk svg{width:21px;height:21px}
/* Sur petit écran, le menu déroulant empile ses éléments : les icônes
restent sur une seule ligne, alignées avec le sélecteur de langue. */
@media (max-width:1180px){
.hdr .social{display:flex;justify-content:flex-start;margin:1rem 0 0;gap:.4rem}
.hdr .social__lnk{display:grid;width:44px;height:44px;padding:0;border-color:var(--line-soft);border-bottom-width:1px}
}
/* --- 26.5 Sélecteur de langue : état actif clairement lisible -------------- */
.lang a{border-radius:7px;transition:color .25s var(--ease),background .25s var(--ease)}
.lang a:hover{color:var(--gold-hi);background:rgba(201,162,39,.08)}
.lang a.is-on{
color:#15100a;background:var(--gold-grad);font-weight:600;
}
.lang a.is-on:hover{color:#15100a}
@media (max-width:1180px){
.lang a.is-on{border-color:transparent}
}
/* ==========================================================================
27. NOTE MOYENNE — ÉTOILES FRACTIONNAIRES ET MISE EN PAGE DU CARRÉ
Le rendu des étoiles est construit par assets/js/reviews.js : cinq étoiles
superposées deux à deux, celle du dessus étant rognée à la largeur voulue.
Le procédé est exact pour N'IMPORTE QUELLE valeur décimale (4,2 · 4,5 ·
4,7 · 4,9…) puisque chaque étoile porte son propre pourcentage.
========================================================================== */
/* letter-spacing:0 est indispensable : le bloc hérite sinon de l'espacement de
.rating-live__stars, qui ajoute un blanc APRÈS le glyphe et décale l'étoile
dans sa boîte — la découpe en pourcentage ne tomberait plus au bon endroit.
L'écart entre les étoiles est repris proprement par « gap ». */
.stars{display:inline-flex;align-items:center;gap:.16em;line-height:1;font-size:1.55rem;letter-spacing:0}
.star{
position:relative;display:block;width:1em;height:1em;
/* Étoile « vide » : le gabarit du dessous. Assez présente pour que la part
manquante de la dernière étoile se lise comme une note partielle, et non
comme une étoile tronquée par erreur. */
color:rgba(255,215,94,.34);
}
.star::before,.star__on::before{
content:"★";position:absolute;left:0;top:0;
width:1em;height:1em;line-height:1;text-align:center;
}
.star__on{
position:absolute;left:0;top:0;height:1em;overflow:hidden;
color:var(--gold-hi); /* étoile pleine : le calque rogné du dessus */
text-shadow:0 0 10px rgba(255,215,94,.35);
}
/* Carré de notation : la note est le centre de gravité du bloc ; la mention
Amazon se retire en bas à droite, reliée à la note par un astérisque. */
.rating-live{
display:block;position:relative;text-align:center;
padding:clamp(1.5rem,3vw,2.1rem) clamp(1.3rem,3vw,1.9rem) clamp(2.9rem,4vw,3.2rem);
}
/* Sans note valide, reviews.js masque le bloc (attribut hidden, B39) :
display:block ci-dessus l'emporterait sinon sur l'attribut. */
.rating-live[hidden]{display:none}
.rating-live__score{
display:block;font-size:clamp(2.7rem,6.5vw,3.8rem);line-height:1;
}
/* Astérisque de renvoi vers la mention du bas. */
.rating-live__ref{
font-family:"Poppins",sans-serif;font-size:.34em;font-weight:500;
vertical-align:super;color:var(--gold);margin-left:.05em;
}
.rating-live__stars{display:flex;justify-content:center;margin:.7rem 0 0}
.rating-live__meta{display:block;margin:.75rem 0 0;font-size:.86rem}
.rating-live__src{display:block;margin:.35rem 0 0;margin-left:0;text-align:center}
.rating-live__note{
position:absolute;right:clamp(1.3rem,3vw,1.9rem);bottom:clamp(.9rem,2vw,1.2rem);
margin:0;text-align:right;max-width:min(100%,52ch);
}
/* Sous 700 px le coin inférieur droit devient trop étroit : la mention repasse
dans le flux, centrée sous la note. */
@media (max-width:700px){
.rating-live{padding-bottom:clamp(1.3rem,4vw,1.6rem)}
.rating-live__note{position:static;text-align:center;margin-top:1.1rem;max-width:none}
.stars{font-size:1.3rem}
}
/* ==========================================================================
28. CARTE — PASTILLES QUI SE RELAIENT (étape 1 ⇄ étape 14)
Les deux pastilles occupent le MÊME point (Strasbourg, départ et retour).
Le relais est piloté par SITE_CONFIG.map.pinTakeover (assets/js/config.js)
et appliqué par assets/js/storymap.js.
Cette classe ne gère que la VISIBILITÉ : l'état de progression de l'étape
(data-state) est indépendant, une pastille qui apparaît n'est pas validée.
========================================================================== */
.pin.is-hidden{
opacity:0;visibility:hidden;pointer-events:none;
transform:translate(-50%,-50%) scale(calc(var(--z-inv,1) * .55));
transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s;
}
.pin:not(.is-hidden){transition-delay:0s}
@media (prefers-reduced-motion:reduce){.pin.is-hidden{transition:none}}
/* ==========================================================================
29. LIVRE 3D — ROTATION AU-DESSUS DES IMAGES DU LIVRE
Les couvertures sont de vraies balises ![]()
. Sans ces règles, appuyer
dessus déclenche le glisser-déposer d'image natif du navigateur, qui
interrompt la rotation dès le premier pixel de déplacement.
(Le JavaScript neutralise déjà l'événement ; ces règles couvrent les
navigateurs qui déclenchent le glisser avant de nous laisser la main.)
========================================================================== */
.book-stage img,
.book-stage .page,
.book-stage .page__side{
-webkit-user-drag:none;
user-select:none;-webkit-user-select:none;
}
/* Le curseur « main » doit rester cohérent partout sur le livre, y compris
au-dessus des pages et des images : c'est ce qui indique qu'on peut le
faire tourner. Les liens internes aux pages gardent leur curseur propre. */
.book-stage .book,
.book-stage .page,
.book-stage .page__side{cursor:inherit}
.book-stage .page__cta{cursor:pointer}
/* --- 29 bis. CADRAGE DE LA VIDÉO ET DE SON AFFICHE ------------------------
« object-fit » décide de ce qui arrive quand les proportions de l'image ne
sont pas celles de la boîte qui l'accueille :
cover = on remplit toute la boîte, quitte à ROGNER les bords
contain = on montre TOUT, quitte à laisser des bandes noires
► CE QUI EST ROGNÉ, ET CE QUI NE L'EST PAS
Une fois la vidéo chargée, la boîte prend exactement ses proportions
(largeur 100 %, hauteur automatique) : la vidéo elle-même n'est donc jamais
rognée en affichage normal. Seule l'AFFICHE — l'image montrée avant la
lecture — a d'autres proportions, et c'est elle que « cover » rognait.
D'où le réglage SITE_CONFIG.hero.videoPosterFull, qui ne concerne que
l'affiche.
► PLEIN ÉCRAN
Là, en revanche, la boîte devient celle de l'écran — presque toujours en
paysage, alors que la vidéo est en portrait. Avec « cover », le navigateur
remplissait l'écran en coupant le haut et le bas : c'est le « zoom » que
l'on voyait. On force donc « contain » en plein écran, quel que soit le
réglage : on veut voir la vidéo en entier. */
/* Affiche ENTIÈRE : la boîte épouse les proportions de l'affiche, puis celles
de la vidéo au premier démarrage. « contain » garantit qu'aucune des deux
n'est rognée, même si un navigateur dimensionnait la boîte autrement. */
.hero__video--poster-full{object-fit:contain}
/* Affiche CADRÉE : les proportions de la vidéo sont imposées à la boîte par
assets/js/options.js, et l'affiche est agrandie pour la remplir. */
.hero__video--poster-fill{object-fit:cover}
/* ⚠ Une règle par préfixe, jamais une liste séparée par des virgules : si UN
seul sélecteur de la liste est inconnu du navigateur, celui-ci jette la
règle ENTIÈRE. Chromium ne connaît pas « :-moz-full-screen », Firefox ne
connaît pas « :-webkit-full-screen » : groupés, ils annulaient tout, et le
plein écran restait en « cover », donc zoomé. */
.hero__video:fullscreen{
width:100%;height:100%;object-fit:contain;
background:#000;border-radius:0;box-shadow:none;
}
.hero__video:-webkit-full-screen{
width:100%;height:100%;object-fit:contain;
background:#000;border-radius:0;box-shadow:none;
}
.hero__video:-moz-full-screen{
width:100%;height:100%;object-fit:contain;
background:#000;border-radius:0;box-shadow:none;
}
/* Le fond derrière l'élément passé en plein écran. */
.hero__video::backdrop{background:#000}
.hero__video::-webkit-backdrop{background:#000}
/* --- 30.0 La boîte d'accueil quand elle contient une vidéo ----------------
.hero__cover porte deux décors pensés pour la COUVERTURE DU LIVRE :
::before = la tranche (bande verticale sombre à gauche)
::after = le reflet du vernis (dégradé en diagonale)
Sur une vidéo, la bande verticale passe pour un défaut d'affichage et le
reflet éclaircit l'image sans raison. La classe est posée par
assets/js/options.js au moment où la vidéo remplace l'image. */
.hero__cover--video::before,
.hero__cover--video::after{content:none}
.hero__cover--video{border-radius:3px 7px 7px 3px;overflow:hidden}
/* ==========================================================================
30. ACCUEIL — BOUTON DE LECTURE DE LA VIDÉO
Affiché uniquement quand la vidéo est à l'arrêt : à l'ouverture de la page
si SITE_CONFIG.hero.videoAutoplay vaut false, et en rattrapage si le
navigateur a refusé la lecture automatique.
La barre de commandes (pause, volume, plein écran) est, elle, celle du
navigateur : elle s'active avec SITE_CONFIG.hero.videoControls.
========================================================================== */
.hero__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:4;width:76px;height:76px;border-radius:50%;padding:0;
display:grid;place-items:center;cursor:pointer;
background:var(--gold-grad);color:#15100a;border:1px solid rgba(255,255,255,.35);
box-shadow:0 14px 40px -10px rgba(0,0,0,.8),0 0 0 10px rgba(201,162,39,.14);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.hero__play svg{width:30px;height:30px;fill:currentColor;stroke:none;margin-left:4px}
.hero__play:hover{
transform:translate(-50%,-50%) scale(1.07);
box-shadow:0 18px 46px -10px rgba(0,0,0,.85),0 0 0 14px rgba(255,215,94,.16);
}
.hero__play:active{transform:translate(-50%,-50%) scale(.98)}
.hero__play[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hero__play{transition:none}}
@media (max-width:700px){
.hero__play{width:62px;height:62px}
.hero__play svg{width:25px;height:25px}
}
/* --- 30.1 Zone vidéo aux proportions de la vidéo ---------------------------
Classe posée par assets/js/options.js en cadrage « centre » ou « cadree »
(SITE_CONFIG.hero.videoPosterFit). La zone a alors les proportions de la
vidéo, verticale : à 392 px de large, elle mesurerait près de 700 px de
haut. Sa largeur est donc aussi limitée par la hauteur de l'écran (82 %),
pour que la vidéo et son affiche tiennent entières à l'écran. */
.hero__cover--ratio{
width:min(100%,392px,calc(82vh * var(--media-ratio,.5625)));
width:min(100%,392px,calc(82svh * var(--media-ratio,.5625)));
}
/* Cadrage « centre » : l'affiche, moins haute que la zone, laisse une bande
au-dessus et une au-dessous. Peintes du même noir que la page, celle du
bas disparaissait dans le fond : l'affiche semblait posée en bas de la
zone, alors qu'elle était bien centrée. Les deux bandes montrent donc la
couverture elle-même, très floutée et assombrie (--poster-bg, posé par
assets/js/options.js), derrière la vidéo rendue transparente. Pendant la
lecture, la vidéo remplit toute la zone : ce fond ne se voit plus. */
.hero__cover--bands.hero__cover--video::before{
content:"";position:absolute;inset:-30px;width:auto;z-index:0;border-radius:0;
background:var(--poster-bg) center/cover no-repeat;
filter:blur(22px) brightness(.58) saturate(1.1);
}
.hero__cover--bands .hero__video{position:relative;z-index:1;background:transparent}
/* Liseré et ombre de la couverture, portés par la boîte (ceux de la vidéo
sont coupés par overflow:hidden) : le bord du bas reste visible. */
.hero__cover--bands{box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.1)}
/* --- 30.2 Texte et vidéo côte à côte, ou l'un sous l'autre -----------------
Seuil et ordre réglés dans config.js (layout.heroStackBelow et
layout.heroMediaPosition), appliqués par assets/js/options.js qui pose les
classes ci-dessous. Auparavant, la vidéo passait AU-DESSUS du texte dès
1100 px de large. */
.hero--stacked .hero__grid{grid-template-columns:1fr;gap:2.6rem}
.hero--stacked.hero--media-above .hero__book{order:-1}
/* Sans JavaScript (ou avant qu'il ne s'exécute) : valeurs par défaut. */
@media (max-width:759.98px){
.hero:not(.hero--js) .hero__grid{grid-template-columns:1fr;gap:2.6rem}
}
/* ==========================================================================
31. QUALITÉ DES IMAGES — versions fines (assets/img/hd/)
La classe « img-hd » est posée sur par assets/js/images.js quand
SITE_CONFIG.images.quality vaut "normale". Les balises ![]()
sont
corrigées par ce script ; ici, les images de fond : le dos du livre 3D,
et le fond du bloc « Série » (section 16), qui est le même fichier que la
carte — le même, pour n'être téléchargé qu'une fois.
========================================================================== */
.img-hd .bk__spine:not(.bk__spine--back),
.img-hd .bk__spine--back::before{background-image:url("../img/hd/livre-dos.jpg")}
.img-hd .prod{
background-image:
linear-gradient(100deg,rgba(8,11,16,.97) 0%,rgba(8,11,16,.90) 46%,rgba(8,11,16,.74) 100%),
linear-gradient(0deg,rgba(8,11,16,.55),rgba(8,11,16,.55)),
url("../img/hd/carte-fond.jpg");
}
/* ==========================================================================
32. LIVRE 3D — ZOOM (SITE_CONFIG.book.zoom, assets/js/book3d.js)
Livre agrandi : la scène garde sa hauteur (fixée par le script), coupe ce
qui dépasse, et le livre s'y déplace au glisser — y compris au doigt, d'où
« touch-action:none » : le geste ne fait plus défiler la page.
========================================================================== */
.book-stage.is-zoomed{overflow:hidden;touch-action:none;cursor:move}
.book-stage.is-zoomed.is-drag{cursor:grabbing}
.book-stage.is-zoomed .book-rot{position:absolute;left:50%;top:50%;margin-top:calc(var(--h,480px) / -2)}
/* ==========================================================================
33. PAGE 404 (404.html et en/404.html)
Composition éditoriale propre à la page, avec les codes du site : nuit,
or, couverture du roman et évocation cartographique du long retour de Joe.
========================================================================== */
.p404{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.p404 main{flex:1 0 auto}
.p404 .ftr{padding-top:2rem}
.p404 .ftr__bot{margin-top:0;border-top:0;padding-top:0}
.e404__stage{
position:relative;overflow:hidden;min-height:calc(100dvh - var(--hdr-h));
border-bottom:1px solid var(--line-soft);isolation:isolate;
}
.e404__stage::before{
content:"";position:absolute;z-index:-2;inset:-30%;pointer-events:none;
background:
radial-gradient(circle at 50% 48%,rgba(201,162,39,.12),transparent 27%),
radial-gradient(circle at 58% 38%,rgba(70,91,126,.12),transparent 24%);
filter:blur(18px);
}
.e404__stage::after{
content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 32%,rgba(0,0,0,.16));
}
.e404__shell{
position:relative;min-height:calc(100dvh - var(--hdr-h));display:grid;grid-template-rows:1fr auto;
align-items:center;padding-top:clamp(4rem,8vh,7rem);padding-bottom:clamp(1.6rem,4vh,2.5rem);
}
.e404__number{
position:absolute;z-index:-1;left:50%;top:45%;transform:translate(-50%,-50%);margin:0;
pointer-events:none;user-select:none;white-space:nowrap;font-family:"Poppins",sans-serif;
font-size:clamp(13rem,36vw,34rem);font-weight:700;line-height:.72;letter-spacing:-.11em;
color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(201,162,39,.018));
-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(255,255,255,.035);
}
.e404__copy{position:relative;z-index:1;width:min(100%,900px);margin:auto;text-align:center}
.e404__eyebrow{
display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1.5rem;padding:.48rem .8rem;
border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.025);
color:var(--muted-2);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.e404__eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 14px rgba(255,215,94,.75)}
.e404__copy h1{
max-width:900px;margin:0;font-family:"Poppins",sans-serif;font-size:clamp(2.9rem,6.7vw,6.3rem);
font-weight:500;line-height:1.01;letter-spacing:-.055em;color:var(--cream);
}
.e404__copy h1 span{
display:block;margin-top:.65em;font-family:"Lora",Georgia,serif;font-size:.27em;font-style:italic;
font-weight:400;line-height:1.35;letter-spacing:0;color:var(--gold-hi);
}
.e404__lead{
max-width:610px;margin:1.65rem auto 0;color:#aeb5c0;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.75;
}
.e404__actions{justify-content:center;margin-top:1.9rem}
.e404__actions .btn--gold span{font-size:1rem;line-height:0;transition:transform .25s var(--ease)}
.e404__actions .btn--gold:hover span{transform:translateX(3px)}
.e404__shortcuts{
position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.35rem 1.7rem;
width:100%;padding-top:1.4rem;border-top:1px solid var(--line-soft);font-size:.76rem;
}
.e404__shortcuts-label{color:#68707c;font-size:.64rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.e404__shortcuts a{position:relative;padding:.25rem 0;color:var(--muted-2);transition:color .2s var(--ease)}
.e404__shortcuts a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);
transition:right .25s var(--ease);
}
.e404__shortcuts a:hover{color:var(--cream)}
.e404__shortcuts a:hover::after{right:0}
@media (max-width:700px){
.e404__shell{padding-top:clamp(3.3rem,9vh,5rem);padding-bottom:1.35rem}
.e404__number{top:35%;font-size:clamp(12rem,67vw,18rem)}
.e404__copy h1{font-size:clamp(2.55rem,12vw,4.25rem)}
.e404__copy h1 span{font-size:.34em}
.e404__lead{max-width:34ch;font-size:.95rem;line-height:1.7}
.e404__actions{display:grid;width:min(100%,330px);margin-inline:auto}
.e404__actions .btn{width:100%}
.e404__shortcuts{gap:.4rem 1.15rem;margin-top:3rem;padding-inline:.25rem}
.e404__shortcuts-label{flex-basis:100%;margin-bottom:.25rem;text-align:center}
}
@media (max-width:380px){
.e404__eyebrow{font-size:.59rem;letter-spacing:.12em}
.e404__copy h1{font-size:2.42rem}
.e404__shortcuts{gap:.35rem .9rem}
}
@media (prefers-reduced-motion:reduce){
.e404__actions .btn--gold span,.e404__shortcuts a,.e404__shortcuts a::after{transition:none}
.e404__actions .btn--gold:hover span{transform:none}
}
@media print{
.e404__number{display:none!important}
.e404__stage,.e404__shell{min-height:auto}
.e404__shell{padding-block:2rem}
.e404__shortcuts{margin-top:2rem}
}