/* ═══════════════════════════════════════════════════════════════════════════
   NOURA DIGITAL — feuille de style publique
   Identité : noir profond + or, fond beige, violet en accent.

   Contraintes (inchangées, elles dictent les choix) :
   · mobile d'abord, réseau 3G malien : aucune requête externe, budget ~22 ko ;
   · CSP `default-src 'self'` → aucune police distante. Titres en serif système
     (Georgia / Noto Serif), corps en sans système : le contraste serif/sans
     porte à lui seul le registre « premium » sans télécharger 200 ko de fontes ;
   · animations décoratives, neutralisées si l'utilisateur les refuse.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Palette de marque ─────────────────────────────────────────────── */
  --noir:      #0b0b0d;   /* #000000 de la charte, adouci pour l'écran */
  --noir-2:    #16161a;
  --or:        #d4af37;
  --or-clair:  #f0d68a;
  --or-fonce:  #a8842a;
  --beige:     #f8f1e7;
  --beige-2:   #fdf9f3;
  --gris:      #6b7280;
  --violet:    #7c3aed;

  --carte:  #ffffff;
  --texte:  #17171b;
  --ligne:  rgba(11,11,13,.10);
  --ligne-or: rgba(212,175,55,.34);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
  --e1: 0 1px 2px rgba(11,11,13,.05), 0 3px 10px rgba(11,11,13,.05);
  --e2: 0 6px 18px rgba(11,11,13,.07), 0 18px 40px rgba(11,11,13,.08);
  --e3: 0 12px 28px rgba(11,11,13,.10), 0 30px 64px rgba(11,11,13,.14);
  --e-or: 0 6px 22px rgba(212,175,55,.28);

  --serif: Georgia, "Noto Serif", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --max:1140px;
  --t:220ms cubic-bezier(.4,0,.2,1);
  --ressort:420ms cubic-bezier(.34,1.42,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  font:16px/1.68 var(--sans); color:var(--texte); background:var(--beige);
  -webkit-font-smoothing:antialiased;
}
main{flex:1}
img{max-width:100%; display:block}
a{color:var(--or-fonce); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--or); outline-offset:3px; border-radius:4px}

h1,h2,h3{font-family:var(--serif); font-weight:700; line-height:1.18; letter-spacing:-.01em; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,5vw,3.15rem)}
h2{font-size:clamp(1.4rem,3vw,2.1rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
         clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Filet doré : motif récurrent de la charte, réutilisé comme séparateur */
.filet{height:2px; background:linear-gradient(90deg,transparent,var(--or),transparent); border:0; margin:0}

/* ── En-tête ────────────────────────────────────────────────────────────── */
.topbar{position:sticky; top:0; z-index:60; background:rgba(11,11,13,.94);
        backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid rgba(212,175,55,.22);
        transition:background 240ms ease, border-color 240ms ease}
/* En haut de page, le header n'a aucun fond : la photo du héros monte derrière
   lui et le visage apparaît « devant » la barre, comme sur la référence.
   Dès que la page défile (classe posée par app.js), le fond opaque revient —
   sans quoi le menu deviendrait illisible sur le contenu clair.
   Un léger dégradé sombre est conservé côté gauche pour garantir le contraste
   du logo et du menu, qui se trouvent devant la partie sombre du cliché. */
html:not(.defile) .hero-en-tete .topbar,
html:not(.defile) .topbar.transparente{
  background:linear-gradient(180deg,rgba(11,11,13,.72),rgba(11,11,13,.28) 60%,transparent);
  backdrop-filter:none;
  border-bottom-color:transparent;
}
.topbar-in{max-width:var(--max); margin:0 auto; padding:11px 20px;
           display:flex; align-items:center; justify-content:space-between; gap:14px}
.brand{display:inline-flex; align-items:center; gap:11px; color:#fff}
.brand:hover{text-decoration:none}
.brand img{height:40px; width:auto}
/* Le logo fourni est un médaillon circulaire au liseré doré : aucun cadre,
   aucune ombre portée ajoutée — ils entreraient en conflit avec son propre
   bord. Seule une lueur discrète le décolle du fond noir. */
/* Pas de border-radius : le badge est déjà détouré à sa silhouette exacte
   (légèrement ovale). Un arrondi forcé rognerait son liseré doré. */
.brand-logo{height:44px; width:auto; flex:none; object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(212,175,55,.34))}
@media(max-width:860px){.brand-logo{height:40px;width:40px}}
.brand-mark{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,#2a2a2f,#0b0b0d 70%);
  border:1.5px solid var(--or); box-shadow:inset 0 0 12px rgba(212,175,55,.28)}
.brand-mark span{font-family:var(--serif); font-size:1.3rem; font-weight:700;
  background:linear-gradient(140deg,var(--or-clair),var(--or) 55%,var(--or-fonce));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-txt b{display:block; font-family:var(--serif); font-size:1.12rem; letter-spacing:.02em;
  background:linear-gradient(120deg,var(--or-clair),var(--or) 60%,var(--or-fonce));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-txt small{display:block; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
                 color:rgba(255,255,255,.56); margin-top:1px}

.nav{display:flex; align-items:center; gap:2px}
.nav a{color:rgba(255,255,255,.8); font-size:.9rem; font-weight:600; padding:9px 13px;
       border-radius:var(--r-pill); transition:var(--t)}
.nav a:hover,.nav a.actif{color:var(--noir); background:var(--or); text-decoration:none}
.nav .nav-cta{border:1px solid var(--ligne-or)}
@media(max-width:860px){
  .topbar-in{flex-wrap:wrap; justify-content:center}
  .nav{width:100%; justify-content:center; flex-wrap:wrap; gap:4px;
       border-top:1px solid rgba(255,255,255,.08); padding-top:9px}
  .nav a{padding:7px 11px; font-size:.85rem}
  .brand-txt small{display:none}
}

/* ── Héros ──────────────────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; isolation:isolate;
      background:var(--noir); color:#fff;
      padding:clamp(50px,8vw,92px) 0 clamp(58px,9vw,100px)}
/* Empilement interne du héros, en valeurs POSITIVES uniquement :
     1 halos · 2 photo · 3 contenu
   Un z-index négatif ferait passer le calque sous le fond noir du héros dès
   que celui-ci ne crée pas de contexte d'empilement. */
.hero > .wrap{position:relative; z-index:3}
/* Pas d'isolation ni de rognage quand une figure doit sortir du cadre.
   `isolation:isolate` créerait un contexte d'empilement qui enfermerait la
   figure sous le header au lieu de la laisser glisser derrière lui. */
.hero.avec-figure{overflow:visible; isolation:auto}
/* Calque des halos : seul élément qui rogne, ce qui libère le héros pour
   laisser la figure déborder vers le header. */
.hero-lueur{position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none}
/* Sous la photo : quand celle-ci est présente, les halos ne servent plus. */
.hero.avec-photo .hero-lueur{display:none}
.hero-lueur::before,.hero-lueur::after{content:""; position:absolute; border-radius:50%;
  filter:blur(80px); will-change:transform}
.hero-lueur::before{width:58vw;height:58vw;max-width:620px;max-height:620px;top:-26%;right:-12%;
  background:radial-gradient(circle,rgba(212,175,55,.55),transparent 68%);
  animation:derive 24s ease-in-out infinite alternate}
.hero-lueur::after{width:44vw;height:44vw;max-width:460px;max-height:460px;bottom:-28%;left:-14%;
  background:radial-gradient(circle,rgba(124,58,237,.38),transparent 68%);
  animation:derive 29s ease-in-out infinite alternate-reverse}
@keyframes derive{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-6%,7%,0) scale(1.15)}}
.hero-grille{display:grid; gap:34px; align-items:center; grid-template-columns:1fr}
@media(min-width:940px){.hero-grille{grid-template-columns:1.15fr .85fr; gap:46px}}
.hero h1{color:#fff; margin-bottom:.32em}
.hero h1 em{font-style:normal;
  background:linear-gradient(105deg,var(--or-clair),#fff3d4 45%,var(--or) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sous{font-size:clamp(1rem,2vw,1.2rem); color:rgba(255,255,255,.78); max-width:54ch; margin-bottom:26px}
.eyebrow{display:inline-flex; align-items:center; gap:9px; padding:6px 15px 6px 11px; margin-bottom:18px;
  border:1px solid var(--ligne-or); border-radius:var(--r-pill); background:rgba(212,175,55,.1);
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--or-clair)}
.pastille{width:7px;height:7px;border-radius:50%;background:#3ddc84;
  box-shadow:0 0 0 0 rgba(61,220,132,.7); animation:battement 2.4s infinite}
@keyframes battement{0%{box-shadow:0 0 0 0 rgba(61,220,132,.65)}70%{box-shadow:0 0 0 11px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.hero-actions{display:flex; flex-wrap:wrap; gap:11px}

/* Visuel du héros : image de marque, ou composition dorée si absente */
.hero-visuel{position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--ligne-or); box-shadow:var(--e3); aspect-ratio:4/3}
.hero-visuel img{width:100%;height:100%;object-fit:cover}
.hero-visuel .deco{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background:
    radial-gradient(circle at 70% 20%,rgba(212,175,55,.28),transparent 60%),
    linear-gradient(150deg,#1b1b20,#0b0b0d)}
.hero-visuel .deco span{font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,1.6rem);
  color:var(--or-clair); padding:0 24px; line-height:1.5}

/* ── Médaillon du héros ─────────────────────────────────────────────────
   Le logo circulaire n'est pas encadré : il flotte, entouré d'un halo doré
   qui pulse lentement. Deux anneaux concentriques en pointillé tournent en
   sens inverse pour donner de la vie sans distraire de la lecture. */
.hero-visuel.est-medaillon{border:0; box-shadow:none; background:none; overflow:visible;
  aspect-ratio:1/1; display:grid; place-items:center; max-width:420px; margin:0 auto}
.hero-visuel.est-medaillon::before{
  content:""; position:absolute; width:96%; height:96%; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.42),transparent 66%);
  filter:blur(34px); animation:respire 6.5s ease-in-out infinite}
.hero-visuel.est-medaillon::after{
  content:""; position:absolute; inset:-3%; border-radius:50%;
  border:1px dashed rgba(212,175,55,.34); animation:tourne 44s linear infinite}
.medaillon{position:relative; z-index:1; width:100%; height:auto; max-width:390px;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.55))}
@keyframes respire{0%,100%{opacity:.55;transform:scale(.97)} 50%{opacity:1;transform:scale(1.04)}}
@keyframes tourne{to{transform:rotate(360deg)}}
@media(max-width:939px){
  .hero-visuel.est-medaillon{max-width:300px}
  .medaillon{max-width:280px}
}

/* Réassurance : les 5 promesses de la charte */
.reassure{display:grid; gap:12px; margin-top:36px;
          grid-template-columns:repeat(auto-fit,minmax(184px,1fr))}
.ras{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--r);
     background:rgba(255,255,255,.055); border:1px solid rgba(212,175,55,.2); transition:var(--t)}
.ras:hover{background:rgba(212,175,55,.1); transform:translateY(-3px)}
.ras-ico{flex:none; width:20px; height:20px; stroke:var(--or); margin-top:3px}
/* min-width:0 indispensable : sans lui un enfant flex refuse de se compresser
   et le texte s'écrase en colonne. */
.ras-txt{flex:1 1 auto; min-width:0}
.ras-txt strong{display:block; color:#fff; font-size:.92rem; margin-bottom:1px}
.ras-txt span{display:block; font-size:.81rem; color:rgba(255,255,255,.66); line-height:1.45}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{--fond:var(--carte); --bord:var(--ligne); --couleur:var(--noir);
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:1px solid var(--bord); border-radius:var(--r-pill);
  background:var(--fond); color:var(--couleur);
  font:inherit; font-weight:700; font-size:.95rem; cursor:pointer; text-align:center;
  transition:transform var(--t), box-shadow var(--t), background var(--t), border-color var(--t)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--e2); text-decoration:none}
.btn:active{transform:translateY(0) scale(.985)}
.btn::after{content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-102%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transition:transform 620ms cubic-bezier(.4,0,.2,1)}
.btn:hover::after{transform:translateX(102%)}
.btn-primaire{--fond:linear-gradient(135deg,var(--or-clair),var(--or) 45%,var(--or-fonce));
  --bord:transparent; --couleur:#1a1405; box-shadow:var(--e-or)}
.btn-primaire:hover{box-shadow:0 10px 30px rgba(212,175,55,.42)}
.btn-fantome{--fond:rgba(255,255,255,.07); --bord:var(--ligne-or); --couleur:#fff}
.btn-fantome:hover{--fond:rgba(212,175,55,.16)}
.btn-violet{--fond:var(--violet); --bord:transparent; --couleur:#fff}
.btn-bloc{width:100%; padding:16px 24px; font-size:1.02rem}
.btn svg{width:18px;height:18px;flex:none}

/* ── Sections ───────────────────────────────────────────────────────────── */
.section{padding:clamp(46px,7vw,78px) 0}
.section.claire{background:var(--beige-2); border-block:1px solid var(--ligne)}
.section.noire{background:var(--noir); color:#fff}
.section.noire h2{color:#fff}
.section-tete{max-width:62ch; margin-bottom:32px}
.section-tete.centre{margin-inline:auto; text-align:center}
.section-tete p{color:var(--gris); font-size:1.02rem; margin:0}
.section.noire .section-tete p{color:rgba(255,255,255,.7)}
.etiquette{display:block; margin-bottom:9px; font-size:.72rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; color:var(--or-fonce)}
.section.noire .etiquette{color:var(--or)}

/* ── Catégories ─────────────────────────────────────────────────────────── */
.cats{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(216px,1fr))}
.cat{display:flex; gap:13px; align-items:flex-start; padding:17px 18px; background:var(--carte);
  border:1px solid var(--ligne); border-left:3px solid var(--or); border-radius:var(--r);
  box-shadow:var(--e1); transition:transform var(--ressort), box-shadow var(--t)}
.cat:hover{transform:translateY(-4px); box-shadow:var(--e2); text-decoration:none}
.cat-ico{flex:none; width:38px;height:38px;border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(140deg,rgba(212,175,55,.18),rgba(124,58,237,.13))}
.cat-ico svg{width:19px;height:19px;stroke:var(--or-fonce)}
.cat-txt{min-width:0}
.cat-txt strong{display:block; font-family:var(--serif); font-size:.99rem; color:var(--texte)}
.cat-txt span{display:block; font-size:.82rem; color:var(--gris); line-height:1.45; margin-top:2px}
.cat-txt em{display:block; font-style:normal; font-size:.75rem; color:var(--or-fonce);
            font-weight:700; margin-top:5px}

/* ── Grille produits ────────────────────────────────────────────────────── */
.grille{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}
.fiche{position:relative; display:flex; flex-direction:column; overflow:hidden; background:var(--carte);
  border:1px solid var(--ligne); border-radius:var(--r-lg); box-shadow:var(--e1);
  transition:transform var(--ressort), box-shadow var(--t), border-color var(--t)}
.fiche:hover{transform:translateY(-7px); box-shadow:var(--e3); border-color:var(--ligne-or)}
.fiche:hover .fiche-cta{background:var(--noir); color:var(--or)}

/* ── Couverture façon livre 3D ───────────────────────────────────────────
   La couverture plate est plaquée sur un volume : légère rotation en
   perspective, tranche claire sur la gauche, ombre portée au sol. Tout est
   en CSS : l'image stockée reste une simple couverture 3:4, et l'effet se
   règle ici sans retoucher les fichiers. */
.couv{position:relative; overflow:hidden; aspect-ratio:1/1; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 38%, #ffffff 0%, #f5f2ec 58%, #ece7dd 100%)}
.livre{position:relative; display:block; width:62%; aspect-ratio:3/4;
  transform:perspective(900px) rotateY(-14deg) translateX(3%);
  transform-origin:left center; transform-style:preserve-3d;
  transition:transform 620ms cubic-bezier(.4,0,.2,1), filter 620ms;
  filter:drop-shadow(14px 18px 22px rgba(30,24,12,.28)) drop-shadow(0 2px 4px rgba(0,0,0,.12));
  border-radius:2px 8px 8px 2px; overflow:hidden}
/* tranche : bande claire sur le bord gauche, légèrement en retrait */
.livre::before{content:""; position:absolute; top:1.5%; bottom:1.5%; left:0; width:5%;
  background:linear-gradient(90deg, #d9d4c8 0%, #f4f1ea 45%, #c9c3b5 100%);
  transform:translateX(-100%) rotateY(90deg); transform-origin:right center; z-index:1}
/* reflet : bandeau lumineux qui suit la courbure du dos */
.livre::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(255,255,255,.18) 4%,
    rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, rgba(255,255,255,.14) 100%)}
.fiche:hover .livre{transform:perspective(900px) rotateY(-7deg) translateX(1%) translateY(-6px)}
/* Visuel complet : l'image est déjà une scène, on l'affiche bord à bord
   sans perspective, sans tranche, sans ombre — juste un léger zoom au survol. */
.couv-visuel{background:#f5f2ec}
.couv-visuel .livre, .fiche:hover .couv-visuel .livre{width:100%; aspect-ratio:auto; height:100%;
  transform:none; filter:none; border-radius:0}
.couv-visuel .livre::before, .couv-visuel .livre::after{display:none}
.couv-visuel .couv-img{transition:transform 620ms cubic-bezier(.4,0,.2,1)}
.fiche:hover .couv-visuel .couv-img{transform:scale(1.04)}
/* Page produit : le visuel complet garde ses proportions, rien n'est rogné */
.produit-visuel .couv.couv-visuel{aspect-ratio:auto; display:block; height:auto}
.produit-visuel .couv-visuel .livre{width:100%; height:auto; aspect-ratio:auto}
.produit-visuel .couv-visuel .couv-img{height:auto}
.produit-visuel .couv-visuel .livre{position:relative; overflow:hidden; border-radius:12px;
  filter:drop-shadow(0 14px 28px rgba(30,24,12,.22))}
.couv-img{width:100%; height:100%; object-fit:cover; display:block}
.couv-repli{position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(145deg,hsl(var(--teinte,45) 26% 14%),hsl(var(--teinte,45) 38% 26%))}
.couv-repli span{font-family:var(--serif); font-size:2.2rem; letter-spacing:.16em;
  background:linear-gradient(120deg,var(--or-clair),var(--or));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.badge-format{position:absolute; top:11px; left:11px; padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(11,11,13,.78); backdrop-filter:blur(6px); color:var(--or-clair);
  font-size:.72rem; font-weight:700; letter-spacing:.04em}
.badge-cat{position:absolute; top:11px; right:11px; padding:5px 11px; border-radius:var(--r-pill);
  background:rgba(124,58,237,.9); color:#fff; font-size:.7rem; font-weight:700}
.fiche-corps{padding:18px 19px 19px; display:flex; flex-direction:column; flex:1}
.fiche-corps h3{margin-bottom:5px}
.fiche-corps h3 a{color:inherit}
.sous{color:var(--gris); font-size:.89rem; line-height:1.5; margin:0 0 15px}
.prix{display:flex; flex-wrap:wrap; gap:8px; margin:auto 0 15px}
.prix b{padding:6px 13px; border-radius:var(--r-pill); font-size:.95rem; font-weight:800;
  color:#1a1405; background:linear-gradient(135deg,var(--or-clair),var(--or));
  box-shadow:0 2px 8px rgba(212,175,55,.3)}
.fiche-cta{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 18px; border-radius:var(--r-pill); background:var(--beige);
  color:var(--noir); font-weight:700; font-size:.93rem; transition:var(--t)}
.fiche-cta:hover{text-decoration:none}
.fiche-cta svg{width:17px;height:17px; transition:transform var(--t)}
.fiche:hover .fiche-cta svg{transform:translateX(4px)}

/* ── Étapes ─────────────────────────────────────────────────────────────── */
.etapes{counter-reset:e; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.etape{position:relative; padding:26px 20px 20px; background:var(--carte);
  border:1px solid var(--ligne); border-radius:var(--r); transition:var(--t)}
.etape:hover{transform:translateY(-4px); box-shadow:var(--e2)}
.etape::before{counter-increment:e; content:counter(e); position:absolute; top:-17px; left:20px;
  width:36px;height:36px;border-radius:11px; display:grid; place-items:center;
  font-family:var(--serif); font-weight:700; font-size:1.05rem; color:#1a1405;
  background:linear-gradient(135deg,var(--or-clair),var(--or)); box-shadow:var(--e-or)}
.etape h3{margin:6px 0 5px}
.etape p{color:var(--gris); font-size:.9rem; margin:0}

/* ── Citation de marque ─────────────────────────────────────────────────── */
.citation{text-align:center; max-width:44ch; margin:0 auto}
.citation blockquote{margin:0; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.15rem,2.6vw,1.65rem); line-height:1.5; color:var(--or-clair)}
.citation cite{display:block; margin-top:14px; font-style:normal; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55)}

/* ── Fiche produit ──────────────────────────────────────────────────────── */
.produit{display:grid; gap:34px; grid-template-columns:1fr; align-items:start}
@media(min-width:920px){.produit{grid-template-columns:1.05fr .95fr; gap:48px}}
.produit-visuel{position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--ligne-or); box-shadow:var(--e2); margin-bottom:26px}
.produit-visuel .couv{aspect-ratio:1/1}
.produit-visuel .livre{width:56%}
.desc{white-space:pre-line; color:#2c2c33; line-height:1.75}
.meta-liste{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0; padding:0; list-style:none}
.meta-liste li{padding:6px 13px; border-radius:var(--r-pill); background:#efe9de;
  color:#4a4436; font-size:.83rem; font-weight:600}
.achat{position:relative; padding:25px 23px 23px; background:var(--carte);
  border:1px solid var(--ligne-or); border-radius:var(--r-lg); box-shadow:var(--e2)}
.achat::before{content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--or-clair),var(--or),var(--or-fonce))}
@media(min-width:920px){.achat{position:sticky; top:92px}}
.achat h2{font-size:1.2rem; margin-bottom:3px}
.achat .aide{color:var(--gris); font-size:.87rem; margin-bottom:17px}
form label{display:block; margin-bottom:14px; font-weight:700; font-size:.87rem; color:#3a3a42}
input,select,textarea{width:100%; margin-top:6px; padding:12px 13px; border:1.5px solid var(--ligne);
  border-radius:var(--r-sm); background:#fdfcfa; font:inherit; color:var(--texte); transition:var(--t)}
input:focus,select:focus,textarea:focus{outline:none; background:#fff; border-color:var(--or);
  box-shadow:0 0 0 4px rgba(212,175,55,.16)}
input::placeholder{color:#a8a49c}
textarea{min-height:120px; resize:vertical; line-height:1.6}
select{appearance:none; padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:17px}
.moyens{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin:16px 0 0;
        padding:15px 0 0; border-top:1px solid var(--ligne)}
.moyen{padding:5px 11px; border:1px solid var(--ligne); border-radius:7px; background:var(--beige);
  color:#4a4436; font-size:.75rem; font-weight:700}
.garanties{list-style:none; padding:0; margin:16px 0 0}
.garanties li{display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--gris);
  line-height:1.5; margin-bottom:9px}
.garanties svg{flex:none; width:16px;height:16px; stroke:var(--or-fonce); margin-top:3px}

/* ── FAQ (sans JavaScript) ──────────────────────────────────────────────── */
.faq{max-width:780px}
.faq details{background:var(--carte); border:1px solid var(--ligne); border-radius:var(--r);
  margin-bottom:10px; overflow:hidden; transition:var(--t)}
.faq details[open]{box-shadow:var(--e1); border-color:var(--ligne-or)}
.faq summary{padding:16px 20px; cursor:pointer; font-weight:700; font-size:.97rem; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:14px; transition:var(--t)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--beige-2)}
.faq summary::after{content:"+"; flex:none; font-size:1.4rem; font-weight:400; color:var(--or-fonce);
  line-height:1; transition:transform var(--ressort)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .reponse{padding:0 20px 18px; color:var(--gris); font-size:.92rem; animation:ouvre 280ms ease}
@keyframes ouvre{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}

/* ── Panneaux / suivi ───────────────────────────────────────────────────── */
.panneau{max-width:630px; margin:clamp(26px,5vw,54px) auto; padding:clamp(24px,4vw,38px);
  background:var(--carte); border:1px solid var(--ligne); border-radius:var(--r-lg); box-shadow:var(--e2)}
.panneau.centre{text-align:center}
.statut{display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border-radius:var(--r-pill);
  font-size:.85rem; font-weight:800}
.statut.ok{background:#e4f7ec; color:#0d6b34}
.statut.attente{background:#fdf1dc; color:#8a5900}
.statut.ko{background:#fdeaeb; color:#96151d}
.coche{width:74px;height:74px;margin:0 auto 18px;display:block}
.coche circle{fill:none; stroke:var(--or); stroke-width:2.4; opacity:.32;
  stroke-dasharray:151; stroke-dashoffset:151; animation:trace 640ms cubic-bezier(.65,0,.45,1) forwards}
.coche path{fill:none; stroke:var(--or-fonce); stroke-width:3.4; stroke-linecap:round;
  stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:36;
  animation:trace 420ms cubic-bezier(.65,0,.45,1) 420ms forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.liens{list-style:none; padding:0; margin:22px 0 0}
.liens li{margin-bottom:11px}
.attente-anim{display:inline-flex; gap:5px; margin:14px 0; justify-content:center; width:100%}
.attente-anim i{width:9px;height:9px;border-radius:50%;background:var(--or);
  animation:rebond 1.25s ease-in-out infinite}
.attente-anim i:nth-child(2){animation-delay:.16s}
.attente-anim i:nth-child(3){animation-delay:.32s}
@keyframes rebond{0%,80%,100%{transform:translateY(0);opacity:.42}40%{transform:translateY(-9px);opacity:1}}
.note{margin-top:20px; padding:13px 16px; border-radius:var(--r-sm); background:var(--beige);
  border-left:3px solid var(--or); color:#514a3c; font-size:.87rem}
.alerte{padding:13px 17px; border-radius:var(--r-sm); background:#fdf1dc;
  border-left:4px solid var(--or-fonce); color:#7a4f00; font-weight:600}
.vide{padding:50px 24px; text-align:center; color:var(--gris); background:var(--carte);
  border:1px dashed var(--ligne-or); border-radius:var(--r-lg)}

/* ── Contact ────────────────────────────────────────────────────────────── */
.contact-grille{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(226px,1fr))}
.contact-carte{padding:22px 20px; background:var(--carte); border:1px solid var(--ligne);
  border-radius:var(--r); text-align:center; transition:var(--t)}
.contact-carte:hover{transform:translateY(-4px); box-shadow:var(--e2); border-color:var(--ligne-or)}
.contact-carte .rond{width:46px;height:46px;margin:0 auto 12px;border-radius:50%;display:grid;
  place-items:center; background:linear-gradient(140deg,rgba(212,175,55,.2),rgba(124,58,237,.14))}
.contact-carte .rond svg{width:22px;height:22px;stroke:var(--or-fonce)}
.contact-carte strong{display:block; font-family:var(--serif); font-size:1.02rem; margin-bottom:3px}
.contact-carte span{display:block; font-size:.85rem; color:var(--gris)}

/* ── Réseaux ────────────────────────────────────────────────────────────── */
.reseaux{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.reseaux a{width:42px;height:42px;border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--ligne-or); transition:var(--t)}
.reseaux a:hover{background:var(--or); transform:translateY(-3px)}
.reseaux svg{width:19px;height:19px;stroke:var(--or-clair); fill:none}
.reseaux a:hover svg{stroke:var(--noir)}

/* ── Pied ───────────────────────────────────────────────────────────────── */
.pied{background:var(--noir); color:rgba(255,255,255,.62); padding:44px 0 26px;
      border-top:1px solid var(--ligne-or)}
.pied-grille{display:grid; gap:28px; grid-template-columns:1fr; margin-bottom:28px}
@media(min-width:760px){.pied-grille{grid-template-columns:1.3fr 1fr 1fr}}
.pied h4{font-family:var(--serif); color:var(--or-clair); font-size:.98rem; margin:0 0 12px}
.pied ul{list-style:none; padding:0; margin:0}
.pied li{margin-bottom:7px; font-size:.88rem}
.pied a{color:rgba(255,255,255,.74)}
.pied a:hover{color:var(--or-clair)}
.pied-bas{padding-top:20px; border-top:1px solid rgba(255,255,255,.09); text-align:center;
  font-size:.82rem; color:rgba(255,255,255,.5)}
.pied-slogan{font-family:var(--serif); font-style:italic; color:var(--or); font-size:1.02rem;
             margin-bottom:14px; text-align:center}

/* ── Apparition au défilement ───────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(22px)}
.js .reveal{transition:opacity 620ms cubic-bezier(.4,0,.2,1), transform 620ms cubic-bezier(.4,0,.2,1)}
.js .reveal.vu{opacity:1; transform:none}
html:not(.js) .reveal{opacity:1; transform:none}
.monte{animation:monte 760ms cubic-bezier(.22,1,.36,1) both}
.monte:nth-child(2){animation-delay:80ms}
.monte:nth-child(3){animation-delay:160ms}
.monte:nth-child(4){animation-delay:240ms}
.monte:nth-child(5){animation-delay:320ms}
@keyframes monte{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   MAQUETTE VITRINE — barre utilitaire, en-tête étendu, héros photo,
   bandeau de catégories, meilleures ventes, encart pack, bandeau de confiance.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── En-tête : logo horizontal, menus déroulants, actions ───────────────── */
/* Le logo horizontal est le seul élément de marque de l'en-tête : il doit
   respirer. 62 px de haut le rend lisible sans dominer la navigation. */
.brand-wide{height:62px; width:auto; flex:none}
@media(max-width:860px){.brand-wide{height:46px}}
@media(max-width:420px){.brand-wide{height:40px}}

.nav-item{position:relative}
/* Menu déroulant sans JavaScript : ouverture au survol sur pointeur fin,
   et au focus clavier — donc utilisable au clavier comme au lecteur d'écran. */
.nav-menu{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:250px; padding:10px; border-radius:var(--r); background:#111116;
  border:1px solid var(--ligne-or); box-shadow:var(--e3);
  opacity:0; visibility:hidden; transition:var(--t); z-index:70}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-menu a{display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--r-sm);
  color:rgba(255,255,255,.8); font-size:.86rem; font-weight:600; white-space:nowrap}
.nav-menu a:hover{background:rgba(212,175,55,.14); color:var(--or-clair)}
.nav-menu svg{width:16px;height:16px;flex:none;stroke:var(--or)}
.nav-fleche{width:13px;height:13px;margin-left:3px;opacity:.7}
@media(max-width:860px){ .nav-menu{display:none} }

.header-actions{display:flex; align-items:center; gap:9px; flex:none}
.icone-btn{width:40px;height:40px;border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); transition:var(--t)}
.icone-btn svg{width:18px;height:18px;stroke:rgba(255,255,255,.82)}
.icone-btn:hover{background:var(--or); border-color:transparent}
.icone-btn:hover svg{stroke:var(--noir)}
.btn-compte{display:inline-flex; align-items:center; gap:8px; padding:11px 19px;
  border-radius:var(--r-pill); color:#1a1405; font-weight:700; font-size:.88rem;
  background:linear-gradient(135deg,var(--or-clair),var(--or) 50%,var(--or-fonce));
  box-shadow:var(--e-or); transition:var(--t)}
.btn-compte:hover{text-decoration:none; transform:translateY(-2px)}
.btn-compte svg{width:16px;height:16px;stroke:#1a1405}
@media(max-width:860px){ .btn-compte span{display:none} .btn-compte{padding:11px 13px} }

/* Recherche dépliable, sans JavaScript : la case à cocher masquée porte l'état */
.rech-toggle{position:absolute; opacity:0; pointer-events:none}
.rech-panneau{max-height:0; overflow:hidden; transition:max-height 320ms cubic-bezier(.4,0,.2,1);
  background:#0e0e13; border-bottom:1px solid transparent}
.rech-toggle:checked ~ .rech-panneau{max-height:96px; border-bottom-color:var(--ligne-or)}
.rech-form{max-width:var(--max); margin:0 auto; padding:16px 20px; display:flex; gap:9px}
.rech-form input{margin:0; background:#16161c; border-color:rgba(255,255,255,.14); color:#fff}
.rech-form input::placeholder{color:rgba(255,255,255,.4)}

/* ── Héros avec photo de scène ──────────────────────────────────────────────
   Géométrie relevée sur la maquette de référence :

     panneau photo    65 % de la largeur, collé à droite
     hauteur du héros 28,8 % de la largeur du site  → ratio du panneau 2,27
     sommet du voile  3 % sous le haut du héros — la tête effleure le header
                      sans le chevaucher

   La source fait un ratio de 1,50 pour un panneau de 2,27 : 34 % de la hauteur
   du cliché est donc rognée. `object-position: center 18%` place ce cadrage
   sur le haut de l'image, là où se trouvent le visage et l'étagère, et laisse
   tomber le premier plan du bureau — exactement le cadrage de la maquette.

   Les quatre valeurs sont des variables : ajuster le cadrage ne demande qu'une
   ligne, sans toucher au reste de la règle.
   ───────────────────────────────────────────────────────────────────────── */
/* Le héros remonte de la hauteur exacte du header (mesurée par app.js et
   exposée dans --h-header) : sa photo occupe alors toute la hauteur visible,
   header inclus. Le rembourrage haut compense pour que le texte reste sous la
   barre de navigation. */
.hero.avec-photo{
  /* Géométrie relevée sur la maquette de référence */
  --photo-largeur: 75%;
  --photo-cadrage: center 16%;
  --hero-hauteur: 34vw;

  /* Le héros remonte de la hauteur exacte du header (mesurée par app.js et
     exposée dans --h-header) : la photo occupe alors toute la hauteur visible,
     barre de navigation incluse. Le rembourrage haut compense pour que le
     titre reste sous la barre. Repli 112 px = hauteur réelle du header. */
  margin-top:calc(-1 * var(--h-header, 112px));
  padding-top:calc(var(--h-header, 112px) + clamp(26px, 3vw, 46px));
  padding-bottom:clamp(52px, 7vw, 92px);

  min-height:clamp(400px, var(--hero-hauteur), 620px);
  display:flex; align-items:center;
}
/* En contexte flex, un enfant sans flex-grow se réduit à la largeur de son
   contenu, et `margin:0 auto` le recentre au milieu de l'écran — d'où un texte
   indenté et une colonne étroite. */
.hero.avec-photo > .wrap{flex:1 1 auto; width:100%; min-width:0}

.hero-photo{position:absolute; inset:0; z-index:2; overflow:hidden}
.hero-photo img{
  position:absolute; right:0; top:0; height:100%; width:var(--photo-largeur);
  object-fit:cover; object-position:var(--photo-cadrage);
}
/* Dégradé calibré sur ce cadrage : opaque jusqu'à 30 % pour porter le texte,
   fondu progressif sur l'ordinateur (30-46 %), transparent sur le sujet
   (52-78 %), léger retour d'ombre à droite pour équilibrer la tasse.
   Aucun voile global : il écraserait la lumière de la lampe, qui fait tout le
   cachet du cliché. */
.hero-photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(96deg,
    var(--noir) 26%,
    rgba(11,11,13,.90) 38%,
    rgba(11,11,13,.42) 50%,
    rgba(11,11,13,.06) 70%,
    rgba(11,11,13,.30))}

/* Le texte occupe la moitié gauche, là où le dégradé est le plus dense */
.hero.avec-photo .hero-grille{grid-template-columns:minmax(0,1fr); width:100%}
.hero.avec-photo .hero-grille > div{position:relative; z-index:2; max-width:46%}

@media(max-width:1180px){
  .hero.avec-photo{--photo-largeur:72%; --hero-hauteur:40vw}
  .hero.avec-photo .hero-grille > div{max-width:52%}
}
/* Sous 940 px, un panneau latéral ne laisse plus assez de place au texte :
   la photo passe en fond plein, atténuée, et le texte se lit par-dessus. */
@media(max-width:939px){
  .hero.avec-photo{--photo-largeur:100%; --photo-cadrage:center 12%;
                   margin-top:0; padding-top:clamp(30px,5vw,44px);
                   min-height:0; display:block}
  .hero.avec-photo .hero-grille > div{max-width:none}
  .hero-photo img{opacity:.5}
  .hero-photo::after{background:linear-gradient(180deg,
    rgba(11,11,13,.74) 0%, rgba(11,11,13,.86) 55%, rgba(11,11,13,.96))}
}

.hero-titre-xl{font-size:clamp(2.3rem,7vw,4.3rem); line-height:1.04; margin-bottom:.3em}
.hero-titre-xl span{display:block}
.hero-titre-xl .or{
  background:linear-gradient(100deg,var(--or-clair),#fff3d4 42%,var(--or));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── Bandeau de catégories chevauchant le héros ─────────────────────────── */
.bandeau-cats{position:relative; z-index:5; margin-top:clamp(-74px,-7vw,-52px); margin-bottom:14px}
.bandeau-in{display:flex; align-items:stretch; overflow-x:auto; scrollbar-width:thin;
  background:var(--beige-2); border:1px solid var(--ligne); border-radius:var(--r-lg);
  box-shadow:var(--e3); scroll-snap-type:x proximity}
.bcat{flex:1 0 auto; min-width:112px; padding:16px 12px; text-align:center;
  border-right:1px solid var(--ligne); transition:var(--t); scroll-snap-align:start}
.bcat:last-of-type{border-right:0}
.bcat:hover{background:#fff; text-decoration:none}
.bcat svg{width:22px;height:22px;stroke:var(--noir); margin:0 auto 7px; display:block}
.bcat:hover svg{stroke:var(--or-fonce)}
.bcat span{display:block; font-size:.79rem; font-weight:700; color:var(--texte); line-height:1.3}
.bcat-toutes{flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:16px 20px;
  background:var(--noir); color:#fff; border-radius:0 var(--r-lg) var(--r-lg) 0}
.bcat-toutes:hover{text-decoration:none; background:#17171e}
.bcat-toutes svg{width:20px;height:20px;stroke:var(--or); margin:0}
.bcat-toutes span{font-size:.82rem; font-weight:700; line-height:1.25; text-align:left; color:#fff}

/* ── Meilleures ventes + encart pack ───────────────────────────────────── */
.ventes-grille{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:1000px){ .ventes-grille.avec-pack{grid-template-columns:1fr 286px} }
.grille-compacte{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}

/* Carte compacte : couverture verticale mise en valeur, comme une couverture
   de livre. C'est le format qui convertit le mieux pour un produit lisible. */
.mini{display:flex; flex-direction:column; background:var(--carte); border:1px solid var(--ligne);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--e1); transition:var(--t)}
.mini:hover{transform:translateY(-5px); box-shadow:var(--e2); border-color:var(--ligne-or)}
.mini-couv{position:relative; aspect-ratio:3/4; overflow:hidden; background:#efe9de; display:block}
.mini-couv img{width:100%;height:100%;object-fit:cover; transition:transform 520ms ease}
.mini:hover .mini-couv img{transform:scale(1.05)}
.mini-repli{position:absolute; inset:0; display:grid; place-items:center; padding:14px; text-align:center;
  background:linear-gradient(150deg,hsl(var(--teinte,45) 30% 13%),hsl(var(--teinte,45) 40% 27%))}
.mini-repli span{font-family:var(--serif); font-size:.86rem; line-height:1.35; color:var(--or-clair)}
.mini-tag{position:absolute; top:9px; left:9px; padding:4px 9px; border-radius:6px;
  background:linear-gradient(135deg,var(--or-clair),var(--or)); color:#1a1405;
  font-size:.63rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.mini-corps{padding:12px 13px 14px; display:flex; flex-direction:column; flex:1}
.mini-corps h3{font-size:.88rem; line-height:1.35; margin:0 0 8px}
.mini-corps h3 a{color:inherit}
.mini-prix{margin:auto 0 0; font-family:var(--serif); font-size:1.06rem; font-weight:700;
  color:var(--or-fonce)}
.mini-prix small{display:block; font-family:var(--sans); font-size:.74rem; font-weight:600;
  color:var(--gris)}

/* Encart pack : la seule surface noire de la section, donc l'œil y va */
.pack-carte{position:relative; overflow:hidden; padding:24px 22px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,#16161c,var(--noir)); border:1px solid var(--ligne-or);
  box-shadow:var(--e3); color:#fff; align-self:start}
.pack-carte::before{content:""; position:absolute; width:200px;height:200px; top:-70px; right:-60px;
  border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.3),transparent 68%)}
.pack-carte h3{font-family:var(--serif); color:var(--or); font-size:1.24rem; margin:0 0 6px;
  letter-spacing:.01em; position:relative}
.pack-carte p{font-size:.86rem; color:rgba(255,255,255,.72); position:relative}
.pack-ico{width:42px;height:42px;border-radius:12px; display:grid; place-items:center; margin-bottom:12px;
  background:rgba(212,175,55,.16); border:1px solid rgba(212,175,55,.3); position:relative}
.pack-ico svg{width:21px;height:21px;stroke:var(--or)}
.pack-prix{font-family:var(--serif); font-size:2rem; font-weight:700; margin:14px 0 4px;
  position:relative;
  background:linear-gradient(100deg,var(--or-clair),#fff3d4 45%,var(--or));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.pack-detail{display:inline-block; padding:5px 12px; border-radius:var(--r-pill); font-size:.78rem;
  font-weight:700; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.86); position:relative}

/* ── Bandeau de confiance (bas de page) ────────────────────────────────── */
.confiance{background:var(--noir); border-top:1px solid rgba(212,175,55,.2);
  border-bottom:1px solid rgba(212,175,55,.2)}
.confiance-in{max-width:var(--max); margin:0 auto; padding:22px 20px; display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(214px,1fr))}
.conf{display:flex; align-items:flex-start; gap:12px}
.conf svg{width:24px;height:24px;stroke:var(--or); flex:none; margin-top:2px}
.conf b{display:block; color:#fff; font-size:.9rem; font-weight:700}
.conf small{display:block; color:rgba(255,255,255,.58); font-size:.79rem; line-height:1.4}

/* ── Recherche : résultats ─────────────────────────────────────────────── */
.rech-resume{color:var(--gris); font-size:.94rem; margin-bottom:22px}
.rech-resume b{color:var(--texte)}


/* ── Portrait détouré (page À propos) ───────────────────────────────────── */
/* Le sujet est découpé sur fond transparent : pas de cadre, pas d'ombre de
   boîte. Un halo doré derrière lui suffit à l'ancrer, et le rend cohérent
   avec le médaillon du logo. */
.portrait-bloc{position:relative; display:grid; place-items:center; padding:14px 0}
.portrait-bloc::before{content:""; position:absolute; width:78%; aspect-ratio:1/1;
  border-radius:50%; background:radial-gradient(circle,rgba(212,175,55,.28),transparent 68%);
  filter:blur(38px)}
.portrait-bloc img{position:relative; z-index:1; width:100%; max-width:420px; height:auto;
  filter:drop-shadow(0 18px 34px rgba(11,11,13,.28))}


/* ── Portrait détouré dans le héros ─────────────────────────────────────── */
/* Le sujet est découpé : aucun cadre, aucune ombre de boîte — elles
   trahiraient le découpage. Un halo doré derrière lui l'ancre sur le noir et
   rappelle le médaillon du logo. Une ombre portée douce le décolle du fond. */
.hero-portrait{position:relative; display:grid; place-items:end center; isolation:isolate}
.hero-portrait::before{content:""; position:absolute; z-index:-1;
  width:86%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.34),transparent 66%);
  filter:blur(46px); animation:respire 7s ease-in-out infinite}
.hero-portrait img{width:100%; max-width:480px; height:auto;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.55))}
@media(max-width:939px){
  .hero-portrait{margin-top:26px}
  .hero-portrait img{max-width:330px; margin:0 auto}
}

/* Sans promesses ni compteurs, le héros peut respirer davantage */
.hero-grille{align-items:end}
@media(min-width:940px){ .hero-grille{grid-template-columns:1.1fr .9fr} }


/* ══ FIGURE DU HÉROS ════════════════════════════════════════════════════════
   Portrait détouré en position absolue, reproduisant la maquette :
   assise à droite, le haut du voile remontant dans la zone du header, le corps
   restant dans le héros.

   Empilement — la tête passe DEVANT le header :
       .hero-figure z-index 70   ← au-dessus du header
       .topbar      z-index 60
       texte        z-index  6

   Deux garde-fous indispensables à ce choix :

   1. `pointer-events: none` sur la figure. Sans lui, sa zone rectangulaire
      invisible recouvrirait une partie du header et volerait les clics
      destinés au menu et à la recherche.

   2. Bascule au défilement. Le header est collant : en défilant, la tête
      traverserait la barre par-dessus, ce qui est disgracieux. Dès que la page
      quitte le haut (classe `defile` posée par static/app.js), la figure
      repasse sous le header. En haut de page — le seul moment où le
      chevauchement est voulu — elle est devant.

   Les quatre valeurs de placement sont des variables : ajuster le cadrage ne
   demande qu'une ligne, sans toucher au reste de la règle.
   ════════════════════════════════════════════════════════════════════════ */
.hero-figure{
  --fig-top: -11.5%;
  --fig-right: 16.5%;
  --fig-width: 31.5%;
  position:absolute;
  top:var(--fig-top);
  right:var(--fig-right);
  width:var(--fig-width);
  z-index:70;                   /* au-dessus du header (60) */
  pointer-events:none;          /* ne vole jamais un clic au header ni au texte */
  transition:z-index 0s;
}
/* Page défilée : la tête repasse sous le header pour ne pas le traverser. */
html.defile .hero-figure{z-index:4}
.hero-figure img{
  width:100%; height:auto; display:block;
  /* Ombre portée douce : la décolle du fond noir sans révéler le découpage */
  filter:drop-shadow(0 24px 46px rgba(0,0,0,.6));
}

/* Le héros doit être assez haut pour contenir le corps, et le texte assez
   étroit pour ne jamais passer sous la figure. */
.hero.avec-figure{min-height:clamp(430px, 40vw, 620px)}
.hero.avec-figure .hero-grille{grid-template-columns:minmax(0,1fr)}
.hero.avec-figure .hero-grille > div{position:relative; z-index:6; max-width:52%}

/* ── Tablette : la figure se rapproche du bord et grandit un peu, le texte
      reprend de la largeur puisque la colonne se resserre. ─────────────── */
@media(max-width:1180px){
  .hero-figure{--fig-top:-8.5%; --fig-right:6%; --fig-width:36%}
  .hero.avec-figure .hero-grille > div{max-width:58%}
}
@media(max-width:1024px){
  .hero-figure{--fig-top:-6%; --fig-right:2%; --fig-width:38%}
  .hero.avec-figure .hero-grille > div{max-width:60%}
}

/* ── Mobile : superposer texte et figure rendrait les deux illisibles.
      La figure repasse dans le flux, centrée sous les boutons, et ne déborde
      plus sur le header — un débordement de 40 px sur un écran de 360 px
      mangerait la navigation. ────────────────────────────────────────────── */
@media(max-width:939px){
  .hero.avec-figure{min-height:0; overflow:hidden; padding-bottom:0}
  .hero.avec-figure .hero-grille > div{max-width:none; z-index:auto}
  .hero-figure{position:static; width:100%; max-width:330px;
               margin:22px auto -6px; z-index:auto}
  .hero-figure img{filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
}
@media(max-width:480px){
  .hero-figure{max-width:270px; margin-top:16px}
}


/* ── Page produit : loupe, survol, agrandissement ─────────────────────────── */
.produit-visuel{position:relative}
.produit-visuel .couv{cursor:zoom-in; transition:transform 520ms cubic-bezier(.4,0,.2,1), box-shadow 520ms}
.produit-visuel .couv:hover{transform:translateY(-4px) scale(1.012); box-shadow:0 18px 40px rgba(30,24,12,.18)}
.produit-visuel .couv-img{transition:transform 900ms cubic-bezier(.4,0,.2,1)}
.produit-visuel .couv:hover .couv-img{transform:scale(1.045)}
/* Pendant le suivi du curseur, le JS pilote la transformation : transition
   courte pour rester collé au mouvement. Au départ du curseur, retour lent. */
.produit-visuel .livre{transition:transform 560ms cubic-bezier(.2,.8,.2,1); will-change:transform;
  transform-style:preserve-3d}
.produit-visuel .couv.suit .livre{transition:transform 90ms linear}
/* Reflet mobile, positionné par --reflet-x/--reflet-y depuis le JS */
.produit-visuel .livre::after{background:radial-gradient(circle at var(--reflet-x,50%) var(--reflet-y,50%),
  rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 28%, rgba(0,0,0,0) 60%)}
.produit-visuel .couv-visuel .livre::after{display:block}
.loupe{position:absolute; top:12px; right:-18px; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ligne-or); background:var(--carte); color:var(--noir); cursor:zoom-in;
  display:grid; place-items:center; box-shadow:var(--e2); transition:transform 260ms, background 260ms, color 260ms}
.loupe:hover{transform:scale(1.12) rotate(-8deg); background:var(--noir); color:var(--or)}
.loupe:focus-visible{outline:2px solid var(--or); outline-offset:3px}
@media (max-width:900px){.loupe{right:10px}}
.agrandissement{border:0; padding:0; background:transparent; max-width:min(92vw,900px); max-height:92vh;
  overflow:visible}
.agrandissement::backdrop{background:rgba(11,11,13,.86); backdrop-filter:blur(6px)}
.agrandissement img{display:block; max-width:min(92vw,900px); max-height:88vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:agrandir 320ms cubic-bezier(.2,.9,.3,1.2)}
.agrandissement-fermer{position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:50%;
  border:0; background:var(--or); color:var(--noir); font-size:1.5rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--e2)}
@keyframes agrandir{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .produit-visuel .couv, .produit-visuel .couv-img, .produit-visuel .livre, .loupe{transition:none}
  .agrandissement img{animation:none}
}

.btn.danger{border-color:#b3261e; color:#b3261e; background:transparent}
.btn.danger:hover{background:#b3261e; color:#fff}