/* Le livret : un guide en objet, en CSS 3D (couverture, tranche de pages, dos, ombre).
   Pourquoi un objet plutôt qu'une image : « il faudrait un visuel type guide physique pour que ça donne
   envie » (Simon, 09/10). La couverture est du HTML (titre et étiquette lisibles, traduits) ; seul le
   visuel en points est une image (images/guides/<slug>-points.<empreinte>.webp, scripts/couvertures-guides-3d.mjs
   --visuels). js/v10-livret.js l'incline vers la souris ; sans script, il reste posé de trois quarts. */
.livret{--w:clamp(220px,24vw,320px);--h:calc(var(--w)*1.4);--d:calc(var(--w)*.075);--ry:-26deg;--rx:7deg;--lx:30%;--ly:20%;
  position:relative;margin:0;width:var(--w);height:var(--h);perspective:1600px;justify-self:center;align-self:center}
.livret__obj{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s cubic-bezier(.2,.8,.2,1);
  animation:livretFlotte 7s ease-in-out infinite}
@keyframes livretFlotte{50%{translate:0 -10px}}
.livret__face{position:absolute;left:50%;top:50%;backface-visibility:hidden}
/* la couverture */
.livret__couv{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform:translateZ(calc(var(--d)/2));border-radius:3px 8px 8px 3px;overflow:hidden;
  background:linear-gradient(180deg,#0a1124 0%,#12295a 60%,#1f4a8a 100%);color:#fff;display:flex;flex-direction:column;padding:calc(var(--w)*.075);box-sizing:border-box;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.08),inset 9px 0 12px -6px rgba(0,0,0,.45)}
.livret__couv::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--cyan)}
.livret__couv::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at var(--lx) var(--ly),rgba(255,255,255,.16),transparent 55%)}
.livret__marque{position:relative;display:flex;align-items:center;gap:.5em;font-weight:600;font-size:calc(var(--w)*.04);letter-spacing:.28em}
.livret__marque b{font-size:1.9em;font-weight:800;letter-spacing:0;line-height:1}
.livret__points{position:absolute;left:-12%;top:12%;width:124%;height:auto;pointer-events:none}
.livret__bas{margin-top:auto;position:relative}
.livret__bas::before{content:"";position:absolute;inset:-40% -20% -20%;background:linear-gradient(180deg,transparent,rgba(13,20,40,.55));z-index:-1}
.livret__tag{display:inline-block;padding:.3em .9em;border:1.5px solid var(--cyan);border-radius:999px;background:rgba(90,209,230,.18);color:#bff1fa;font-size:calc(var(--w)*.036);font-weight:700;letter-spacing:.16em}
.livret__titre{margin:.45em 0 0;font-size:calc(var(--w)*.078);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.livret__url{display:block;margin-top:1em;font-size:calc(var(--w)*.034);color:rgba(255,255,255,.6)}
/* le quatrième de couverture, le dos, les tranches */
.livret__fond{width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:#0f1a36;border-radius:8px 3px 3px 8px}
.livret__dos{width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);transform:rotateY(-90deg) translateZ(calc(var(--w)/2));background:linear-gradient(90deg,#0b1430,#162a55 50%,#0b1430)}
.livret__pages{width:var(--d);height:calc(var(--h) - 6px);margin:calc(var(--h)/-2 + 3px) 0 0 calc(var(--d)/-2);transform:rotateY(90deg) translateZ(calc(var(--w)/2 - 3px));
  background:repeating-linear-gradient(90deg,#f4f0e7 0 2px,#e2ddd2 2px 3px)}
.livret__haut{width:calc(var(--w) - 6px);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);transform:rotateX(90deg) translateZ(calc(var(--h)/2 - 3px));
  background:repeating-linear-gradient(0deg,#f4f0e7 0 2px,#e2ddd2 2px 3px)}
/* l'ombre portée, au sol */
.livret__ombre{position:absolute;left:8%;right:-6%;bottom:calc(var(--h)*-.07);height:calc(var(--h)*.1);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(8px);
  animation:livretOmbre 7s ease-in-out infinite}
@keyframes livretOmbre{50%{opacity:.7;scale:.92}}
.light .livret__ombre{background:radial-gradient(closest-side,rgba(10,12,24,.35),transparent)}
@media (prefers-reduced-motion:reduce){.livret__obj,.livret__ombre{animation:none}.livret__obj{transition:none}}
/* l'en-tête des guides : le texte et le formulaire à gauche, le livret à droite */
.v-hero--guide .v-hero__grid{align-items:center}
.v-hero--guide .v-hero__row{margin-top:26px}
.v-form--ligne{margin-top:26px;padding:18px 20px}
.v-form--ligne form{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:10px}
.v-form--ligne .field{margin-bottom:0}
.v-form--ligne .btn{grid-column:auto;margin-top:0;height:42px}
.v-form--ligne .note{grid-column:1/-1}
@media (max-width:560px){.v-form--ligne form{grid-template-columns:1fr}.v-form--ligne .btn{height:46px}}
@media (max-width:900px){.v-hero--guide .livret{--w:clamp(180px,52vw,260px);margin-top:28px}}

/* ── Couverture à plat (liste des guides, feuilleter) : la même, hors du livret 3D ── */
.livret__couv--plat,.feuil__couv{position:relative;margin:0;transform:none;width:100%;height:100%;border-radius:6px}
.livret__couv--plat .livret__points,.feuil__couv .livret__points{top:10%}

/* ── Feuilleter (guides PDF) : le sommaire se lit, les chapitres montrent leur titre et un corps flouté.
   On voit qu'il y a du contenu ; on le lit dans le PDF. js/v10-livret.js tourne les pages. ── */
.feuil{--pw:clamp(140px,19vw,236px);--w:var(--pw);justify-self:center;width:calc(var(--pw)*2);max-width:100%}
.feuil__livre{position:relative;width:calc(var(--pw)*2);height:calc(var(--pw)*1.4);perspective:2400px;cursor:pointer;transition:transform .8s cubic-bezier(.3,.7,.2,1);outline:none}
.feuil__livre[data-p="0"]{transform:translateX(-25%)}
.feuil__livre.is-fin{transform:translateX(25%)}
.feuil__livre:focus-visible{box-shadow:0 0 0 3px rgba(71,154,243,.5);border-radius:8px}
.feuil__feuille{position:absolute;left:50%;top:0;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.7,.2,1);z-index:calc(100 - var(--i))}
.feuil__feuille.is-tournee{transform:rotateY(-180deg)}
.feuil__recto,.feuil__verso{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fbfaf6;
  box-shadow:0 18px 40px rgba(10,12,24,.18)}
.feuil__recto{border-radius:2px 7px 7px 2px}
.feuil__verso{transform:rotateY(180deg);border-radius:7px 2px 2px 7px}
.feuil__recto::after,.feuil__verso::after{content:"";position:absolute;inset:0;pointer-events:none}
.feuil__recto::after{background:linear-gradient(90deg,rgba(10,12,24,.14),transparent 9%)}
.feuil__verso::after{background:linear-gradient(270deg,rgba(10,12,24,.14),transparent 9%)}
.feuil__page{position:relative;height:100%;box-sizing:border-box;padding:calc(var(--pw)*.1) calc(var(--pw)*.09);color:#0a0c18;font-size:calc(var(--pw)*.048);line-height:1.4}
.feuil__k{margin:0 0 .5em;font-size:.82em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-d)}
.feuil__page h4{margin:0 0 .9em;font-size:1.45em;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.feuil__sommaire ol{margin:.6em 0 0;padding:0;list-style:none;display:grid;gap:.75em}
.feuil__sommaire li{display:grid;grid-template-columns:2em 1fr;gap:.4em;font-weight:600;line-height:1.3;padding-bottom:.65em;border-bottom:1px solid rgba(10,12,24,.08)}
.feuil__sommaire li span{color:var(--blue-d);font-weight:800}
.feuil__flou{filter:blur(2.4px);opacity:.85;display:grid;gap:1em;user-select:none}
.feuil__lignes{display:grid;gap:.5em}
.feuil__lignes i{display:block;height:.5em;border-radius:3px;background:rgba(10,12,24,.32)}
.feuil__chiffre b{display:block;font-size:2.4em;font-weight:800;color:var(--blue-d);line-height:1}
.feuil__chiffre span{display:block;height:.5em;width:70%;margin-top:.5em;border-radius:3px;background:rgba(47,127,220,.35)}
.feuil__graphe{display:flex;align-items:flex-end;gap:.5em;height:4.5em;padding:.4em;border-radius:6px;background:rgba(71,154,243,.08)}
.feuil__graphe i{flex:1;border-radius:3px 3px 0 0;background:var(--blue)}
.feuil__encadre{display:grid;gap:.5em;padding:.8em;border-left:3px solid var(--blue);background:rgba(71,154,243,.07)}
.feuil__encadre i{display:block;height:.5em;border-radius:3px;background:rgba(10,12,24,.3)}
.feuil__num{position:absolute;bottom:calc(var(--pw)*.06);right:calc(var(--pw)*.09);font-size:.8em;color:rgba(10,12,24,.4)}
.feuil__fin{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(180deg,#0a1124,#12295a 60%,#1f4a8a);color:#fff}
.feuil__fin .feuil__k{color:var(--cyan)}
.feuil__fin p{color:rgba(255,255,255,.7);margin:0 0 1.2em}
.feuil__fin .btn{align-self:flex-start;font-size:calc(var(--pw)*.052);height:auto;padding:.8em 1.1em;background:#fff;color:#0a0c18}
.feuil__dos4{display:flex;align-items:flex-end;background:#0f1a36;color:rgba(255,255,255,.7)}
.feuil__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:22px;font-size:13px;color:var(--ink-dim)}
.feuil__nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-l);background:#fff;color:#0a0c18;font-size:20px;line-height:1;cursor:pointer}
.feuil__nav button:disabled{opacity:.35;cursor:default}
.v-duo--feuil{align-items:center}
@media (prefers-reduced-motion:reduce){.feuil__livre,.feuil__feuille{transition:none}}

/* ── La liste des guides : couverture à plat, inclinée au survol ── */
.v-guides{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr))}
.v-guide-carte{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:center;padding:22px;border-radius:20px;background:#fff;border:1px solid var(--line-l);color:#0a0c18;text-decoration:none;transition:box-shadow .3s,transform .3s}
.v-guide-carte:hover{box-shadow:0 24px 60px rgba(10,12,24,.12);transform:translateY(-2px)}
.v-guide-carte__couv{--w:150px;height:210px;perspective:900px}
.v-guide-carte__couv .livret__couv{box-shadow:0 14px 30px rgba(10,12,24,.25);transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:rotateY(-12deg)}
.v-guide-carte:hover .livret__couv{transform:rotateY(0)}
.v-guide-carte h2{margin:0 0 6px;font-size:19px;line-height:1.25;letter-spacing:-.015em}
.v-guide-carte p:not(.eyebrow){margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink-dim)}
@media (max-width:560px){.v-guide-carte{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}.v-guide-carte__couv{--w:96px;height:134px}}
.livret__couv--plat .livret__titre,.livret__couv--plat .livret__url{display:none}