/* =========================================================
   LINE ELIEL — feuille de style partagée
   Palette : nuit vert-noir · émeraude (sa signature) · or
   Typo    : League Spartan + Cabin (les polices de ses livres)
   ========================================================= */
:root{
  --nuit:#06100B;
  --ombre:#0B1A13;
  --voile:#112620;
  --ivoire:#F3F0E6;
  --ivoire-doux:rgba(243,240,230,.66);
  --ivoire-faible:rgba(243,240,230,.34);
  --trait:rgba(243,240,230,.13);

  --emeraude:#12A46A;
  --emeraude-vif:#17C480;
  --or:#D8A63C;
  --or-clair:#F2D688;
  --terre:#C4703E;
  --flamme:#E24468;

  --teinte:var(--or);          /* redéfinie par page de vente */
  --teinte-texte:#0A0A08;

  --display:'League Spartan',system-ui,sans-serif;
  --corps:'Cabin',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
section[id],div[id],footer[id]{scroll-margin-top:96px}
body{
  margin:0;background:var(--nuit);color:var(--ivoire);overflow-x:clip;
  font-family:var(--corps);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;max-width:100vw;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer}
::selection{background:var(--emeraude);color:#fff}

.wrap{width:min(1180px,calc(100% - clamp(32px,4.4vw,44px)));margin:0 auto}
.etroit{width:min(860px,calc(100% - clamp(32px,4.4vw,44px)));margin:0 auto}
section{padding:clamp(58px,8vw,100px) 0}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0}
h1{font-size:clamp(37px,5vw,68px);line-height:.92;letter-spacing:-.02em}
h2{font-size:clamp(28px,3.6vw,46px);line-height:.97;letter-spacing:-.015em}
h3{font-size:clamp(22px,2.5vw,31px);line-height:1.02;letter-spacing:-.01em}
h4{font-size:18px;line-height:1.15}
p{margin:0}
.doux{color:var(--ivoire-doux)}
.nom{color:var(--emeraude-vif);font-weight:700}
.douleur .nom,.auteure-in .nom{color:var(--teinte)}
.teinte-t{color:var(--teinte)}
.mesure{max-width:58ch}

.sur-titre{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;
  font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teinte);
}
.sur-titre::before{content:"";width:34px;height:1.5px;background:var(--teinte)}

/* ---------------- BOUTONS ---------------- */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:58px;padding:0 30px;border:0;border-radius:2px;
  font-family:var(--display);font-size:15px;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;text-align:center;
  color:var(--teinte-texte);background:var(--teinte);
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s ease,filter .25s ease;
}
.btn:hover{filter:brightness(1.12);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.44)}
.btn:active{transform:translateY(-1px) scale(.99);transition-duration:.08s}
.btn:focus-visible{outline:2px solid var(--emeraude-vif);outline-offset:4px}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;left:-130%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);animation:lueur 6.5s ease-in-out infinite;
}
@keyframes lueur{0%,70%{left:-130%}94%,100%{left:170%}}
.btn.creux{background:transparent;color:var(--ivoire);box-shadow:inset 0 0 0 1.5px var(--trait);filter:none}
.btn.creux:hover{background:rgba(243,240,230,.05);box-shadow:inset 0 0 0 1.5px var(--teinte);filter:none}
.btn.creux::after{display:none}
.btn.vert{background:var(--emeraude);color:#fff}
.btn.grand{min-height:66px;padding:0 36px;font-size:16.5px}
.btn-note{margin-top:16px;font-size:13px;letter-spacing:.03em;color:var(--ivoire-faible)}

/* ---------------- HEADER ---------------- */
header{
  position:sticky;top:0;z-index:80;padding:15px 0;
  background:rgba(6,16,11,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
header.colle{border-bottom-color:var(--trait)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:26px}
.marque{font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;letter-spacing:.04em;line-height:1}
.marque small{display:block;white-space:nowrap;margin-top:4px;font-family:var(--corps);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or)}
.liens{display:flex;gap:30px;font-size:14.5px;font-weight:600}
.liens a{position:relative;padding:4px 0;color:var(--ivoire-doux);transition:color .2s ease}
.liens a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--teinte);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.3,1)}
.liens a:hover{color:var(--ivoire)}
.liens a:hover::after{transform:scaleX(1)}
.nav .btn{min-height:46px;padding:0 20px;font-size:13px;white-space:nowrap}
@media(max-width:520px){.nav{gap:14px}.nav .btn{padding:0 14px;font-size:12px}.marque{font-size:17px}.marque small{font-size:9.5px;letter-spacing:.12em}}
@media(max-width:900px){.liens{display:none}}

/* ---------------- DÉCORS ---------------- */
.decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.decor::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 78% at 76% 32%,color-mix(in srgb,var(--teinte) 26%,transparent) 0%,transparent 62%),
    radial-gradient(50% 62% at 20% 10%,rgba(18,164,106,.18) 0%,transparent 66%),
    radial-gradient(90% 100% at 50% 122%,rgba(6,16,11,.9) 0%,transparent 60%);
  animation:respire 13s ease-in-out infinite;
}
@keyframes respire{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.faisceau{
  position:absolute;top:-25%;left:56%;width:34%;height:150%;
  background:linear-gradient(178deg,rgba(242,214,136,.15) 0%,rgba(242,214,136,.04) 45%,transparent 78%);
  transform:rotate(9deg);filter:blur(30px);animation:faisceau 9s ease-in-out infinite;
}
@keyframes faisceau{0%,100%{opacity:.5}50%{opacity:1}}
.grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
}

/* ---------------- LE LIVRE COMME OBJET ---------------- */
.book-mount{position:relative;perspective:1500px;max-width:330px;margin-inline:auto}
.book{
  position:relative;aspect-ratio:136/216;border-radius:2px 5px 5px 2px;overflow:hidden;
  background:var(--voile);
  box-shadow:0 34px 74px rgba(0,0,0,.62),0 6px 16px rgba(0,0,0,.4);
  transform:rotateY(-7deg) rotateX(1deg);
  transition:transform .7s cubic-bezier(.2,.85,.25,1),box-shadow .7s ease;
}
.book img{width:100%;height:100%;object-fit:cover}
/* pli du dos + tranche des pages + reflet */
.book::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.14) 1.5%,rgba(255,255,255,.13) 2.7%,rgba(255,255,255,0) 7%),
    linear-gradient(104deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,0) 36%),
    linear-gradient(to right,transparent 88%,rgba(0,0,0,.22) 100%);
}
.book-mount:hover .book{transform:rotateY(-2deg) rotateX(0) translateY(-10px);box-shadow:0 46px 96px rgba(0,0,0,.68)}
.book-halo{
  position:absolute;inset:-14% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 46% at 50% 50%,var(--teinte),transparent 70%);
  filter:blur(64px);opacity:.22;transition:opacity .7s ease;
}
.book-mount:hover .book-halo{opacity:.4}

/* placeholder photo */
.ph{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;
  font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(243,240,230,.32);
  border:1px dashed rgba(243,240,230,.16);
}

/* ---------------- RÉVÉLATIONS ---------------- */
.rev{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.2,.85,.25,1),transform .85s cubic-bezier(.2,.85,.25,1)}
.rev.vu{opacity:1;transform:none}

/* ---------------- FORMULAIRE ---------------- */
.form{padding:32px;background:rgba(6,16,11,.62);border:1px solid var(--trait);border-radius:3px;backdrop-filter:blur(8px)}
.champ{margin-bottom:18px}
.champ label{display:block;margin-bottom:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ivoire-faible)}
.champ input,.champ select,.champ textarea{
  width:100%;padding:15px 16px;font:inherit;font-size:16px;color:var(--ivoire);
  background:rgba(243,240,230,.04);border:1px solid var(--trait);border-radius:2px;
  transition:border-color .25s ease,background .25s ease;
}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(243,240,230,.28)}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:0;border-color:var(--emeraude);background:rgba(18,164,106,.07)}
.champ select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ivoire-faible) 50%),linear-gradient(135deg,var(--ivoire-faible) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.champ select option{background:var(--ombre);color:var(--ivoire)}
.form .btn{width:100%}
.form-note{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--ivoire-faible)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.duo{grid-template-columns:1fr}}

/* ---------------- FOOTER ---------------- */
footer{padding:72px 0 38px;border-top:1px solid var(--trait)}
.pied{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:50px}
.pied h4{margin-bottom:20px;font-size:13px;letter-spacing:.16em;color:var(--or)}
.pied a,.pied p{display:block;margin-bottom:11px;font-size:15px;color:var(--ivoire-doux);transition:color .2s ease}
.pied a:hover{color:var(--or)}
.pied-marque{margin-bottom:14px;font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.03em}
.bas{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:28px;border-top:1px solid var(--trait);font-size:13px;color:var(--ivoire-faible)}
@media(max-width:820px){.pied{grid-template-columns:1fr;gap:34px}}

/* ---------------- CTA COLLANT ---------------- */
.cta-fixe{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(6,16,11,.94);backdrop-filter:blur(14px);border-top:1px solid var(--trait);
  transform:translateY(115%);transition:transform .4s cubic-bezier(.2,.85,.25,1);
}
.cta-fixe.on{transform:none}
.cta-fixe .btn{width:100%;min-height:54px}
@media(max-width:760px){.cta-fixe{display:block}footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* =========================================================
   ACCUEIL
   ========================================================= */
.hero{position:relative;overflow:hidden;padding:0}
.hero-grille{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,52px);align-items:center;min-height:0;padding:clamp(22px,3vw,38px) 0 clamp(46px,6vw,72px)}
.hero-txt>*{opacity:0;transform:translateY(26px);animation:monte .95s cubic-bezier(.2,.85,.25,1) forwards}
.rang1{animation-delay:.15s}.rang2{animation-delay:.34s}.rang3{animation-delay:.53s}.rang4{animation-delay:.72s}.rang5{animation-delay:.9s}
@keyframes monte{to{opacity:1;transform:none}}
h1 .ligne{display:block;overflow:hidden}
h1 .mot{display:block;background:linear-gradient(178deg,var(--ivoire) 30%,rgba(243,240,230,.72));-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .mot.dore{background:linear-gradient(172deg,var(--or-clair) 8%,var(--or) 52%,#9C7420 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .mot.teint{background:linear-gradient(172deg,color-mix(in srgb,var(--teinte) 62%,#fff) 6%,var(--teinte) 54%,color-mix(in srgb,var(--teinte) 62%,#000) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sous{margin:24px 0 0;max-width:44ch;font-size:18px;line-height:1.6;color:var(--ivoire-doux)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

.portrait{position:relative;max-height:min(74vh,620px);opacity:0;animation:monte 1.2s cubic-bezier(.2,.85,.25,1) .5s forwards}
.portrait-cadre{position:relative;aspect-ratio:5/6;max-height:min(74vh,620px);border-radius:3px;overflow:hidden;background:#050D09;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.portrait-cadre::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,16,11,.5) 0%,transparent 30%)}
.portrait-cadre img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.portrait-fil{position:absolute;inset:22px -18px -18px 22px;border:1px solid rgba(216,166,60,.4);border-radius:3px;z-index:-1}
.portrait::before{content:"";position:absolute;inset:-12% -16%;z-index:-2;pointer-events:none;background:radial-gradient(48% 42% at 52% 42%,rgba(18,164,106,.34),transparent 70%);filter:blur(60px)}
.badge{position:absolute;left:-22px;bottom:38px;z-index:3;padding:16px 20px;background:var(--emeraude);color:#fff;border-radius:2px;box-shadow:0 18px 40px rgba(0,0,0,.45);animation:flotte 6.5s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.badge b{display:block;font-family:var(--display);font-size:34px;line-height:.9;letter-spacing:-.02em}
.badge span{display:block;margin-top:5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
@media(max-width:960px){
  .hero-grille{grid-template-columns:1fr;gap:44px;padding:52px 0 68px;min-height:0}
  .portrait{max-width:420px;margin:0 auto;width:100%}
  .badge{left:-10px}
}

.autorite{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--ombre)}
.autorite-in{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:62px 0}
.autorite-in>p:first-child{max-width:24ch;font-family:var(--display);font-weight:700;text-transform:none;font-size:clamp(21px,2.5vw,30px);line-height:1.24;letter-spacing:-.01em}
.role{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--trait);font-size:15.5px;line-height:1.5}
.role:last-child{border-bottom:0}
.role i{flex:0 0 auto;padding-top:4px;font-style:normal;font-size:13px;color:var(--or)}
@media(max-width:860px){.autorite-in{grid-template-columns:1fr;gap:30px;padding:46px 0}}

.entete{max-width:62ch;margin-bottom:clamp(34px,4.4vw,58px)}
.entete h2{margin-bottom:18px}

.livres{padding-bottom:0}
.livre{position:relative;overflow:hidden;border-top:1px solid var(--trait)}
.livre:last-of-type{border-bottom:1px solid var(--trait)}
.livre-in{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:center;padding:74px 0}
.livre.inv .livre-in{grid-template-columns:1.28fr .72fr}
.livre.inv .livre-visuel{order:2}
.livre-visuel{position:relative}
.livre-num{display:block;margin-bottom:15px;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--teinte)}
.livre h3{margin-bottom:12px}
.livre-st{margin-bottom:20px;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--teinte)}
.livre-accroche{max-width:52ch;margin-bottom:24px;font-size:18.5px;line-height:1.62;color:var(--ivoire-doux)}
.pts{display:grid;gap:11px;max-width:52ch;margin:0 0 30px;padding:0;list-style:none}
.pts li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.5;color:var(--ivoire-doux)}
.pts li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:var(--teinte)}
.livre-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:960px){
  .livre-in,.livre.inv .livre-in{grid-template-columns:1fr;gap:40px;padding:56px 0}
  .livre.inv .livre-visuel{order:0}
  .book-mount{max-width:280px}
}

.commu{position:relative;overflow:hidden;background:var(--ombre);border-top:1px solid var(--trait)}
.commu::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 68% at 82% 18%,rgba(18,164,106,.2),transparent 66%),radial-gradient(44% 56% at 12% 88%,rgba(216,166,60,.12),transparent 68%)}
.commu-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center}
.commu h2{margin-bottom:20px}
.commu>.wrap>div>p{max-width:46ch;font-size:18px;color:var(--ivoire-doux)}
@media(max-width:900px){.commu-in{grid-template-columns:1fr;gap:38px}}

/* =========================================================
   PAGE DE VENTE
   ========================================================= */
.vente-hero{position:relative;overflow:hidden;padding:0}
.vente-grille{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(34px,4.4vw,58px);align-items:center;padding:clamp(22px,3vw,38px) 0 clamp(48px,6vw,76px)}
.vente-hero h1{font-size:clamp(34px,4.4vw,58px)}
.vente-hero .accroche{margin-top:24px;max-width:46ch;font-size:19px;line-height:1.62;color:var(--ivoire-doux)}
.vente-hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
@media(max-width:960px){
  .vente-grille{grid-template-columns:1fr;gap:42px;padding:48px 0 64px}
  .vente-grille .book-mount{max-width:300px;margin:0 auto}
}

.douleur{background:var(--ombre);border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.douleur p{max-width:60ch;margin-bottom:22px;font-size:19.5px;line-height:1.68;color:var(--ivoire-doux)}
.douleur p:last-child{margin-bottom:0}
.douleur strong{color:var(--ivoire);font-weight:700}
.douleur .frappe{font-family:var(--display);font-weight:700;text-transform:none;font-size:clamp(23px,3vw,34px);line-height:1.22;letter-spacing:-.01em;color:var(--ivoire)}

.contenu-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--trait);border:1px solid var(--trait)}
.bloc{padding:34px 30px;background:var(--nuit)}
.bloc span{display:block;margin-bottom:13px;font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--teinte)}
.bloc h4{margin-bottom:9px}
.bloc p{font-size:15.5px;line-height:1.58;color:var(--ivoire-doux)}
@media(max-width:760px){.contenu-grille{grid-template-columns:1fr}}

.pour-qui{background:var(--ombre)}
.qui{display:grid;gap:0;max-width:70ch}
.qui div{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--trait);font-size:17.5px;line-height:1.55;color:var(--ivoire-doux)}
.qui div:last-child{border-bottom:0}
.qui i{flex:0 0 auto;padding-top:5px;font-style:normal;font-size:13px;color:var(--teinte)}

.auteure-in{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(34px,4.6vw,60px);align-items:center}
.auteure-in p{max-width:56ch;margin-bottom:18px;font-size:17.5px;line-height:1.68;color:var(--ivoire-doux)}
.auteure-in p:last-child{margin-bottom:0}
@media(max-width:900px){.auteure-in{grid-template-columns:1fr;gap:38px}.auteure-in .portrait{max-width:340px}}

.commande{position:relative;overflow:hidden;background:var(--ombre);border-top:1px solid var(--trait)}
.commande-in{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:62px;align-items:start}
.commande h2{margin-bottom:18px}
.commande .intro{max-width:44ch;margin-bottom:28px;font-size:18px;color:var(--ivoire-doux)}
.rassure{display:grid;gap:14px;max-width:44ch}
.rassure div{display:flex;gap:14px;font-size:15.5px;line-height:1.5;color:var(--ivoire-doux)}
.rassure i{flex:0 0 auto;padding-top:4px;font-style:normal;font-size:12px;color:var(--teinte)}
@media(max-width:900px){.commande-in{grid-template-columns:1fr;gap:40px}}

.faq{max-width:76ch}
.q{border-bottom:1px solid var(--trait)}
.q:first-child{border-top:1px solid var(--trait)}
.q button{
  display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;
  padding:24px 0;border:0;background:none;color:var(--ivoire);text-align:left;
  font-family:var(--display);font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.2;
}
.q button:focus-visible{outline:2px solid var(--teinte);outline-offset:3px}
.q .signe{flex:0 0 auto;position:relative;width:16px;height:16px}
.q .signe::before,.q .signe::after{content:"";position:absolute;inset:50% 0 auto;height:2px;background:var(--teinte);transition:transform .35s cubic-bezier(.2,.85,.25,1)}
.q .signe::after{transform:rotate(90deg)}
.q.ouvert .signe::after{transform:rotate(0)}
.q .rep{overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.2,.85,.25,1)}
.q .rep p{padding:0 0 26px;max-width:62ch;font-size:16.5px;line-height:1.68;color:var(--ivoire-doux)}

.final{position:relative;overflow:hidden;text-align:center}
.final-in{position:relative;z-index:2}
.final h2{max-width:22ch;margin:0 auto 22px}
.final p{max-width:50ch;margin:0 auto 34px;font-size:19px;color:var(--ivoire-doux)}



/* ---------------- FORMULAIRE : messages & divers ---------------- */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.facultatif{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ivoire-faible)}
.msg{
  margin:0 0 16px;padding:13px 15px;border-radius:3px;font-size:14.5px;line-height:1.5;
  background:rgba(243,240,230,.05);border:1px solid var(--trait);color:var(--ivoire-doux);
}
.msg.erreur{background:rgba(226,68,104,.1);border-color:rgba(226,68,104,.45);color:#F7B9C7}
.msg.ok{background:rgba(18,164,106,.1);border-color:rgba(18,164,106,.45);color:#8FE3BF}
.btn[disabled]{opacity:.6;cursor:wait;transform:none!important;filter:none!important}

/* ---------------- PRIX ---------------- */
.prix-inline{color:var(--teinte);font-weight:700}

.livre-prix{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin:0 0 22px;
  font-family:var(--display);font-size:27px;font-weight:800;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--teinte);
}
.livre-prix span{
  font-family:var(--corps);font-size:14px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--ivoire-faible);
}

.prix-bloc{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-bottom:26px;padding:22px 24px;border-radius:3px;
  background:rgba(243,240,230,.045);border:1px solid var(--trait);
  border-left:3px solid var(--teinte);
}
.prix-montant{
  font-family:var(--display);font-size:42px;font-weight:900;line-height:.9;
  letter-spacing:-.025em;color:var(--ivoire);
}
.prix-montant span{font-size:19px;color:var(--teinte);margin-left:4px}
.prix-detail{display:grid;gap:5px;font-size:14.5px;line-height:1.4;color:var(--ivoire-doux)}
.prix-livraison{color:var(--emeraude-vif);font-weight:700}

.recap{
  margin:4px 0 20px;padding-top:18px;border-top:1px solid var(--trait);
  display:grid;gap:10px;
}
.recap div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:14.5px}
.recap span{color:var(--ivoire-faible)}
.recap b{color:var(--ivoire);font-weight:700;text-align:right}
.recap .gratuit{color:var(--emeraude-vif)}

@media(max-width:720px){
  .livre-prix{font-size:24px;margin-bottom:18px}
  .prix-bloc{gap:16px;padding:18px 18px}
  .prix-montant{font-size:36px}
  .prix-detail{font-size:13.5px}
  .recap div{font-size:13.5px;gap:12px}
}


/* bouton vers la bibliothèque, sous les livres de l'accueil */
.vers-biblio{display:flex;justify-content:center;padding:clamp(46px,6vw,74px) 0;--teinte:var(--or);--teinte-texte:#0A0A08}
.vers-biblio .btn{min-width:min(420px,100%)}

/* =========================================================
   BIBLIOTHÈQUE
   ========================================================= */
.biblio-hero{position:relative;overflow:hidden;padding:0}
.biblio-hero-in{position:relative;z-index:2;max-width:60ch;padding:clamp(46px,6vw,86px) 0 clamp(40px,5vw,64px)}
.biblio-hero h1{margin-bottom:22px;font-size:clamp(34px,4.4vw,62px)}
.biblio-hero h1 .mot{display:inline}
.biblio-hero p{max-width:52ch;font-size:18.5px;line-height:1.62;color:var(--ivoire-doux)}
.biblio-hero .btn-note{margin-top:18px}

.rayons{padding-top:clamp(26px,3vw,40px)}

.rayon{position:relative;margin-bottom:clamp(52px,6vw,84px)}
.rayon-lueur{
  position:absolute;left:50%;top:-14%;width:86%;height:70%;transform:translateX(-50%);
  pointer-events:none;z-index:0;
  background:radial-gradient(52% 60% at 50% 0%,rgba(242,214,136,.20),transparent 72%);
  filter:blur(46px);
}
.rayon-livres{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,38px);
  align-items:end;
  padding:0 clamp(10px,2.6vw,44px);
}

/* la planche de l'étagère */
.planche{
  position:relative;z-index:3;margin-top:-6px;height:26px;border-radius:1px;
  background:
    linear-gradient(180deg,
      rgba(242,214,136,.30) 0px, rgba(242,214,136,.10) 2px,
      #1B2E25 3px, #142219 46%,
      #0B140F 47%, #060C09 100%);
  box-shadow:0 20px 40px rgba(0,0,0,.65);
}
/* chant avant, pour l'épaisseur */
.planche::before{
  content:"";position:absolute;left:0;right:0;top:46%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(242,214,136,.22) 22%,rgba(242,214,136,.22) 78%,transparent);
}
/* ombre qui tombe sous l'étagère */
.planche::after{
  content:"";position:absolute;left:3%;right:3%;top:100%;height:46px;
  background:linear-gradient(180deg,rgba(0,0,0,.62),transparent 78%);
  filter:blur(9px);
}

/* un livre posé */
.tome{
  position:relative;display:block;width:100%;max-width:250px;margin-inline:auto;padding:0;border:0;background:none;
  color:inherit;text-align:left;cursor:pointer;
  transform:rotate(var(--inclin,0deg));
  transition:transform .5s cubic-bezier(.2,.85,.25,1);
}
.tome:hover,.tome:focus-visible,.tome.survol{transform:rotate(0deg) translateY(-11px)}
.tome:focus-visible{outline:2px solid var(--teinte);outline-offset:10px;border-radius:3px}

.tome-objet{
  position:relative;display:block;aspect-ratio:136/216;border-radius:2px 4px 4px 2px;overflow:hidden;
  background:var(--voile);
  box-shadow:0 26px 46px rgba(0,0,0,.62),0 4px 10px rgba(0,0,0,.5);
  transition:box-shadow .5s ease;
}
.tome-objet img{width:100%;height:100%;object-fit:cover;display:block}
/* pli du dos + tranche + reflet, comme sur le reste du site */
.tome-objet::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.14) 1.6%,rgba(255,255,255,.13) 2.8%,rgba(255,255,255,0) 7%),
    linear-gradient(104deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 36%),
    linear-gradient(to top,rgba(6,16,11,.34) 0%,transparent 12%);
}
.tome:hover .tome-objet,.tome.survol .tome-objet{box-shadow:0 40px 74px rgba(0,0,0,.7),0 6px 14px rgba(0,0,0,.55)}

/* ombre de contact sur la planche */
.tome::after{
  content:"";position:absolute;left:5%;right:5%;bottom:-9px;height:18px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.8),transparent 72%);
  filter:blur(5px);opacity:.9;transition:opacity .5s ease,transform .5s ease;
}
.tome:hover::after,.tome.survol::after{opacity:.45;transform:translateY(8px) scaleX(1.06)}

.tome-halo{
  position:absolute;inset:auto -18% -12% -18%;height:52%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%,var(--teinte),transparent 72%);
  filter:blur(44px);opacity:0;transition:opacity .5s ease;
}
.tome:hover .tome-halo,.tome.survol /* ombre de contact sur la planche */
.tome::after{
  content:"";position:absolute;left:5%;right:5%;bottom:-9px;height:18px;pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%,rgba(0,0,0,.8),transparent 72%);
  filter:blur(5px);opacity:.9;transition:opacity .5s ease,transform .5s ease;
}
.tome:hover::after,.tome.survol::after{opacity:.45;transform:translateY(8px) scaleX(1.06)}

.tome-halo{opacity:.42}


/* la rangée de légendes, sous la planche */
.rayon-legendes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,38px);
  padding:26px clamp(10px,2.6vw,44px) 0;
}
.legende{
  display:block;width:100%;max-width:250px;margin-inline:auto;padding:0;
  border:0;background:none;text-align:center;color:inherit;cursor:pointer;
}
.legende:focus-visible{outline:2px solid var(--or);outline-offset:6px;border-radius:3px}
.legende-titre{
  display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(13.5px,1.25vw,16px);line-height:1.12;color:var(--ivoire);
  transition:color .25s ease;
}
.legende-prix{
  display:block;margin-top:8px;font-family:var(--display);font-weight:800;
  font-size:clamp(12.5px,1.1vw,14.5px);letter-spacing:.04em;color:var(--teinte);
}
.legende:hover .legende-titre{color:var(--or-clair)}

.rayon-note{
  margin-top:26px;text-align:center;font-size:13.5px;letter-spacing:.04em;color:var(--ivoire-faible);
}

/* --------- aperçu de la couverture complète --------- */
.apercu{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px}
.apercu[hidden]{display:none}
.apercu-fond{position:absolute;inset:0;background:rgba(3,8,6,.86);backdrop-filter:blur(7px);animation:apparait .3s ease}
@keyframes apparait{from{opacity:0}to{opacity:1}}
.apercu-boite{
  position:relative;z-index:2;width:min(1080px,100%);max-height:92svh;overflow:auto;
  display:grid;grid-template-columns:1.25fr .95fr;gap:0;
  background:var(--ombre);border:1px solid var(--trait);border-radius:4px;
  box-shadow:0 50px 110px rgba(0,0,0,.7);
  animation:monteBoite .42s cubic-bezier(.2,.85,.25,1);
}
@keyframes monteBoite{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

.apercu-image{position:relative;padding:clamp(20px,2.6vw,34px);display:grid;align-content:center;gap:14px;background:#050D09}
.apercu-image img{width:100%;border-radius:2px;box-shadow:0 24px 54px rgba(0,0,0,.6)}
.apercu-legende{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ivoire-faible);text-align:center}

.apercu-texte{padding:clamp(24px,3vw,40px);display:grid;align-content:center}
.apercu-texte h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.apercu-st{font-size:14.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--teinte);margin-bottom:20px}
.apercu-desc{font-size:16.5px;line-height:1.66;color:var(--ivoire-doux);margin-bottom:26px}
.apercu-prix{margin-bottom:26px;padding:16px 18px;border-radius:3px;border:1px solid var(--trait);border-left:3px solid var(--teinte);background:rgba(243,240,230,.04)}
.apercu-prix b{display:block;font-family:var(--display);font-size:30px;font-weight:900;letter-spacing:-.02em;color:var(--ivoire)}
.apercu-prix span{display:block;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--ivoire-doux)}
.apercu-actions .btn{width:100%}

.apercu-fermer{
  position:absolute;top:12px;right:12px;z-index:5;width:42px;height:42px;padding:0;
  display:grid;place-items:center;border:1px solid var(--trait);border-radius:50%;
  background:rgba(6,16,11,.8);color:var(--ivoire);transition:background .25s ease,border-color .25s ease;
}
.apercu-fermer svg{width:17px;height:17px}
.apercu-fermer:hover{background:rgba(6,16,11,.95);border-color:var(--teinte)}
body.fige{overflow:hidden}

@media(max-width:900px){
  .apercu-boite{grid-template-columns:1fr;max-height:90svh}
  .apercu-texte{padding:24px 22px 28px}
}
@media(max-width:720px){
  .rayon-livres{grid-template-columns:repeat(2,1fr);gap:20px;padding:0 4px}
  .rayon{margin-bottom:46px}
    .apercu{padding:12px}
  .apercu-image{padding:16px}
  .apercu-prix b{font-size:26px}
}
@media(max-width:430px){
  .rayon-livres{grid-template-columns:1fr;gap:34px;padding:0 22px}
  .tome{max-width:230px;margin:0 auto}
}

/* =========================================================
   RÉGLAGES TABLETTE & TÉLÉPHONE
   ========================================================= */

/* --- tablette paysage / petit portable (1180 → 961) --- */
@media(max-width:1180px){
  .hero-grille{gap:38px}
  .vente-grille{gap:40px}
  .livre-in,.livre.inv .livre-in{gap:46px;padding:60px 0}
  .commu-in{gap:44px}
  .commande-in{gap:44px}
  .autorite-in{gap:40px;padding:52px 0}
  .liens{gap:22px;font-size:14px}
}

/* --- tablette portrait (960 → 721) --- */
@media(max-width:960px){
  .hero-grille{padding:20px 0 50px}
  .hero-txt{text-align:left}
  .hero-sous{max-width:60ch}
  .portrait{max-width:400px}
  .vente-grille .book-mount,.livre .book-mount{max-width:270px}
  .form{padding:28px}
  .douleur .frappe{font-size:clamp(22px,3.4vw,29px)}
  .douleur p{font-size:18px}
  .contenu-grille{grid-template-columns:1fr 1fr}
  .bloc{padding:28px 24px}
  .auteure-in .portrait{max-width:320px}
}

/* --- grand téléphone / petite tablette (720 → 561) --- */
@media(max-width:720px){
  h1{font-size:clamp(33px,8.4vw,46px);line-height:.96}
  h2{font-size:clamp(25px,6.4vw,36px);line-height:1}
  h3{font-size:clamp(21px,5.4vw,27px)}
  body{font-size:16px}
  .hero-grille{gap:28px;padding:14px 0 42px}
  .vente-grille{gap:28px;padding:14px 0 44px}
  .hero-sous,.vente-hero .accroche{font-size:16.5px;line-height:1.6}
  .portrait{max-width:330px}
  .vente-grille .book-mount,.livre .book-mount{max-width:220px}
  .livre-in,.livre.inv .livre-in{gap:32px;padding:48px 0}
  .livre-accroche{font-size:16.5px}
  .pts li,.qui div,.role{font-size:15px}
  .qui div{padding:17px 0;gap:14px}
  .contenu-grille{grid-template-columns:1fr}
  .bloc{padding:24px 22px}
  .douleur p{font-size:17px;margin-bottom:18px}
  .douleur .frappe{font-size:22px;line-height:1.28}
  .commande .intro,.commu p{font-size:16.5px}
  .q button{font-size:16.5px;padding:20px 0;gap:16px}
  .q .rep p{font-size:15.5px;padding-bottom:22px}
  .final p{font-size:17px}
  .form{padding:24px 20px}
  .champ input,.champ select{padding:14px 14px;font-size:16px}
  footer{padding:54px 0 32px}
  .pied{padding-bottom:38px}
}

/* --- téléphone (560 et moins) --- */
@media(max-width:560px){
  .hero-actions,.vente-hero .actions,.livre-actions{gap:10px}
  .hero-actions .btn,.vente-hero .actions .btn,.livre-actions .btn,.final .btn{width:100%}
  .btn.grand{min-height:58px;padding:0 22px;font-size:15px}
  .btn{padding:0 22px;font-size:14px}
  .portrait{max-width:100%}
  .portrait-fil{inset:16px -10px -10px 16px}
  .vente-grille .book-mount,.livre .book-mount{max-width:190px}
  .sur-titre{font-size:10.5px;letter-spacing:.16em;margin-bottom:18px}
  .sur-titre::before{width:24px}
  .btn-note{font-size:12px}
  .pied-marque{font-size:23px}
  .bas{flex-direction:column;gap:8px;font-size:12px}
  .cta-fixe{padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
}

/* --- très petits écrans (380 et moins) --- */
@media(max-width:380px){
  h1{font-size:31px}
  .nav .btn{padding:0 12px;font-size:11.5px;min-height:42px}
  .marque{font-size:16px}
  .form{padding:20px 16px}
  .vente-grille .book-mount,.livre .book-mount{max-width:170px}
}

/* --- tablette paysage basse : évite un hero qui étouffe --- */
@media(min-width:961px) and (max-height:820px){
  .hero-grille{padding:18px 0 44px}
  .vente-grille{padding:18px 0 46px}
  .portrait,.portrait-cadre{max-height:66vh}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .rev,.hero-txt>*,.portrait{opacity:1;transform:none}
  .book{transform:none}
}