/* Skala Eyrand — styles (extraits de la maquette) */
/* =========================================================================
     1. TOKENS — palette « velours & bougie », parti pris volontairement sombre
     ========================================================================= */
  :root{
    --bg:        #0c0910;
    --bg-2:      #100b16;
    --surface:   #171020;
    --surface-2: #1e1629;
    --border:    rgba(214,196,240,.10);
    --border-2:  rgba(214,196,240,.18);

    --ink:       #ece7f3;
    --ink-soft:  #c3b9d3;
    --muted:     #8b8299;

    --violet:      #b79be6;
    --violet-deep: #7e5fb0;
    --violet-cloth:#2a1c3d;
    --gold:        #d0a94f;
    --gold-soft:   #e8cf92;
    --gold-deep:   #6b5220;
    --bordeaux:    #a8425c;

    --font-display: "Didot","Bodoni MT","Playfair Display","Hoefler Text","Palatino Linotype",Palatino,Georgia,serif;
    --font-body:    "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
    --font-ui:      ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    --wrap: 1120px;
    --pad: clamp(20px,5vw,64px);
    --radius: 14px;

    --shadow: 0 24px 60px -24px rgba(0,0,0,.78);
    /* Bord de dorure + vraie profondeur (offset + flou), plus de halo néon */
    --halo-gold: 0 0 0 1px rgba(232,207,146,.6), 0 30px 60px -28px rgba(0,0,0,.85);
    /* Relief de feuille d'or estampée sur le texte */
    --foil-emboss: 0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,244,214,.14);

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  /* =========================================================================
     2. BASE
     ========================================================================= */
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:clamp(16px,1.05vw,18px);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  /* Fond « toile de livre teintée » : tissage fin + lavis discrets + vignette */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:-2;
    background:
      repeating-linear-gradient(90deg, rgba(233,205,139,.014) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
      radial-gradient(1400px 900px at 50% -12%, rgba(126,95,176,.20), transparent 60%),
      radial-gradient(1100px 900px at 100% 106%, rgba(168,66,92,.11), transparent 55%),
      linear-gradient(180deg,var(--bg),var(--bg-2) 62%, #0a070e);
    box-shadow: inset 0 0 260px 34px rgba(0,0,0,.6);
  }
  body::after{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ::selection{ background:rgba(208,169,79,.30); color:#fff8ea; }

  /* Surfaces navigateur habillées — le détail qui prouve qu'on a construit, pas assemblé */
  html{ scrollbar-color:#4a3a5e var(--bg-2); scrollbar-width:thin; }
  ::-webkit-scrollbar{ width:12px; height:12px; }
  ::-webkit-scrollbar-track{ background:var(--bg-2); }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--violet-deep),#33244a); border:3px solid var(--bg-2); border-radius:99px; }
  ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); }
  :focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:2px; }
  input, textarea{ caret-color:var(--gold); }
  body{ font-feature-settings:"liga" 1, "kern" 1, "onum" 1; }

  .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

  h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.08; text-wrap:balance; margin:0; }

  .eyebrow{
    font-family:var(--font-ui); font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
    color:var(--gold-soft); display:inline-flex; align-items:center; gap:.7em; font-weight:600;
  }
  .eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }

  .section{ padding-block:clamp(70px,11vw,140px); position:relative; }
  .section-head{ max-width:660px; margin-bottom:clamp(34px,5vw,60px); }
  .section-head h2{ font-size:clamp(2.2rem,5vw,3.6rem); margin:0; letter-spacing:-.015em; }
  /* Filet de dorure sous le titre — cadence de revue, pas de kicker au-dessus */
  .section-head h2::after{ content:""; display:block; width:66px; height:2px; margin-top:1.1rem; background:linear-gradient(90deg,var(--gold),transparent); }
  .section-head p{ color:var(--ink-soft); margin:1.2rem 0 0; font-size:1.05rem; }
  /* Ornement au-dessus de chaque titre de section (marque mieux les sous-titres) */
  .section-head::before{ content:"❦"; display:block; font-family:var(--font-display); color:var(--gold); font-size:1.4rem; line-height:1; margin-bottom:.7rem; text-shadow:var(--foil-emboss); }
  /* Bandeaux alternés : une section sur deux reçoit un fond teinté + filets, pour rythmer la page */
  .section--band{ background:linear-gradient(180deg, rgba(32,23,44,.6), rgba(20,14,28,.4)); border-block:1px solid var(--border); }

  /* =========================================================================
     3. NAV
     ========================================================================= */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; flex-direction:column;
    padding:0 var(--pad);
    transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
    border-bottom:1px solid transparent;
  }
  header.nav.scrolled{
    background:rgba(12,9,16,.78);
    backdrop-filter:blur(14px) saturate(1.2);
    border-bottom-color:var(--border);
  }
  /* Bandeau utilitaire tout en haut : lien newsletter (gauche) + icônes (droite) */
  .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0 7px; border-bottom:1px solid var(--border); }
  .nav-main{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; }
  .nav-newsletter{ font-family:var(--font-ui); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gold-soft); text-shadow:var(--foil-emboss); display:inline-flex; align-items:center; gap:.4em; transition:color .25s; }
  .nav-newsletter:hover{ color:#fff; }
  .brand{ display:flex; align-items:baseline; gap:.55rem; font-family:var(--font-display); font-size:1.32rem; letter-spacing:.02em; }
  .brand b{ font-weight:500; }
  .brand .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); transform:translateY(-3px); box-shadow:0 0 0 1px rgba(0,0,0,.4); }
  .brand, .foot-brand{ text-shadow:var(--foil-emboss); }
  .nav-links{ display:flex; gap:8px; align-items:center; }
  .nav-links a{
    font-family:var(--font-ui); font-size:.85rem; letter-spacing:.02em; color:var(--ink-soft);
    padding:9px 14px; border-radius:99px; transition:color .25s, background .25s;
  }
  .nav-links a:hover{ color:var(--ink); background:rgba(183,155,230,.10); }
  .nav-toggle{ display:none; }
  .nav-right{ display:flex; align-items:center; gap:10px; }
  .nav-socials{ display:flex; align-items:center; gap:5px; }
  .nav-social{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; color:var(--ink-soft); border:1px solid transparent; transition:color .25s, background .25s, border-color .25s, transform .25s; }
  .nav-social:hover{ color:var(--gold-soft); background:rgba(183,155,230,.10); border-color:var(--border-2); transform:translateY(-1px); }
  .nav-social svg{ width:17px; height:17px; }
  @media (max-width:560px){
    .nav-newsletter{ font-size:.6rem; letter-spacing:.06em; }
    .nav-social{ width:30px; height:30px; }
    .nav-social svg{ width:15px; height:15px; }
    .nav-socials{ gap:2px; }
  }

  /* =========================================================================
     4. BOUTONS
     ========================================================================= */
  .btn{
    --bpad: 14px 26px;
    font-family:var(--font-ui); font-weight:600; font-size:.9rem; letter-spacing:.02em;
    display:inline-flex; align-items:center; gap:.6em; padding:var(--bpad);
    border-radius:99px; border:1px solid transparent; cursor:pointer; position:relative;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s;
    text-align:center; justify-content:center;
  }
  .btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
  .btn-primary{
    background:linear-gradient(135deg,var(--violet),var(--violet-deep));
    color:#150f1e;
    box-shadow:0 14px 34px -14px rgba(183,155,230,.6);
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(183,155,230,.8); }
  .btn-ghost{ border-color:var(--border-2); color:var(--ink); background:rgba(255,255,255,.02); }
  .btn-ghost:hover{ border-color:var(--violet); color:#fff; transform:translateY(-2px); }

  /* Bouton Amazon : identifiable mais intégré (or) */
  .btn-amazon{
    background:linear-gradient(135deg,var(--gold-soft),var(--gold));
    color:#241a08; box-shadow:0 12px 28px -14px rgba(217,183,116,.7); width:100%;
  }
  .btn-amazon:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(217,183,116,.9); }
  .btn-amazon svg{ width:16px; height:16px; flex:none; }

  /* =========================================================================
     5. HERO
     ========================================================================= */
  .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
  /* Cadre de page-titre : double filet à la feuille d'or, inséré comme sur une jaquette */
  .hero::before{
    content:""; position:absolute; inset:clamp(16px,3.2vw,42px); z-index:1; pointer-events:none;
    border:1px solid rgba(232,207,146,.30);
  }
  .hero::after{
    content:""; position:absolute; inset:calc(clamp(16px,3.2vw,42px) + 6px); z-index:1; pointer-events:none;
    border:1px solid rgba(232,207,146,.14);
  }

  .hero-inner{ position:relative; z-index:2; padding-block:120px 80px; max-width:900px; margin-inline:auto; text-align:center; }
  .hero-title{ font-family:var(--font-display); font-size:clamp(3.6rem,13vw,9rem); letter-spacing:-.02em; line-height:.92; margin:0; }
  .hero-tagline{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.2rem,2.8vw,1.9rem); color:var(--gold-soft); text-shadow:var(--foil-emboss); margin:1.5rem 0 0; }
  .hero-verse{ font-family:var(--font-body); font-size:clamp(1.05rem,1.9vw,1.35rem); line-height:1.5; color:var(--ink-soft); max-width:42ch; margin:1.1rem auto 0; }
  .hero-verse .em{ font-style:italic; color:var(--violet); }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.4rem; justify-content:center; }
  /* Entrée échelonnée subtile des éléments du hero */
  .hero-inner > .reveal{ transition-duration:.9s; }
  .hero-inner > .reveal:nth-child(2){ transition-delay:.10s; }
  .hero-inner > .reveal:nth-child(3){ transition-delay:.20s; }
  .hero-inner > .reveal:nth-child(4){ transition-delay:.30s; }
  .hero-inner > .reveal:nth-child(5){ transition-delay:.40s; }
  .hero-scroll{
    position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; font-family:var(--font-ui);
    font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
    display:flex; flex-direction:column-reverse; align-items:center; gap:.6em;
  }
  .hero-scroll .line{ width:1px; height:34px; background:linear-gradient(var(--gold),transparent); animation:drop 2.4s var(--ease) infinite; transform-origin:top; }
  @keyframes drop{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

  /* =========================================================================
     6. À PROPOS
     ========================================================================= */
  .about{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,72px); align-items:center; }
  .about-portrait{
    position:relative; aspect-ratio:4/5; border-radius:6px; overflow:hidden;
    border:1px solid var(--border); box-shadow:var(--shadow);
    background:
      repeating-linear-gradient(90deg, rgba(233,205,139,.02) 0 1px, transparent 1px 4px),
      repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 4px),
      radial-gradient(130% 100% at 28% 0%, rgba(126,95,176,.36), transparent 58%),
      linear-gradient(200deg,#2a1c3d,#140d1e 75%);
    display:flex; align-items:flex-end; padding:26px;
  }
  /* Photo de l'autrice + voile dégradé pour la lisibilité de la signature */
  .about-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; z-index:0; }
  .about-portrait::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(10,7,14,.92), transparent 48%); pointer-events:none; }
  .about-portrait .sig{ position:relative; z-index:2; }
  /* Filet de dorure intérieur, comme un plat de reliure */
  .about-portrait::after{ content:""; position:absolute; inset:12px; border:1px solid rgba(232,207,146,.42); border-radius:3px; pointer-events:none; z-index:3; }
  .about-portrait .mono{ font-family:var(--font-display); font-size:clamp(4rem,10vw,7rem); color:rgba(236,231,243,.10); position:absolute; top:-.2em; right:.1em; line-height:1; }
  .about-portrait .sig{ font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--gold-soft); }
  .about-text p{ color:var(--ink-soft); margin:0 0 1.1rem; }
  .about-text p:first-of-type::first-letter{ font-family:var(--font-display); font-size:3.2em; float:left; line-height:.8; padding:.05em .12em 0 0; color:var(--violet); }
  /* Étiquettes masquées à l'œil mais conservées dans le code (mots-clés SEO / lecteurs d'écran) */
  .about-tags{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .tag{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft); border:1px solid var(--border-2); padding:7px 14px; border-radius:99px; background:rgba(255,255,255,.02); }

  /* =========================================================================
     7. LIVRES — galerie
     ========================================================================= */
  .books-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(24px,3vw,40px); }
  .book-card{ display:flex; flex-direction:column; gap:16px; }

  .cover-link{ display:block; position:relative; border-radius:12px; }
  .cover{
    position:relative; aspect-ratio:1/1.5; border-radius:12px; overflow:hidden; cursor:pointer;
    background:linear-gradient(160deg, hsl(var(--h,265) 42% 15%), hsl(var(--h,265) 38% 8%));
    border:1px solid var(--border);
    box-shadow:var(--shadow);
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
  }
  .cover .c-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .cover-link:hover .cover{ transform:translateY(-8px) scale(1.02); box-shadow:var(--halo-gold),var(--shadow); }
  /* Cadre or intérieur (au-dessus de l'image) */
  .cover::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(236,215,164,.28); border-radius:6px; pointer-events:none; z-index:2; }
  /* Lueur mobile au survol */
  .cover::after{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); z-index:1;
    background:radial-gradient(220px 220px at 70% 15%, rgba(236,215,164,.28), transparent 60%);
  }
  .cover-link:hover .cover::after{ opacity:1; }

  /* Badge « À paraître » */
  .c-badge{
    position:absolute; top:12px; left:12px; z-index:3; font-family:var(--font-ui); font-size:.62rem;
    letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:#241a08;
    background:linear-gradient(135deg,var(--gold-soft),var(--gold)); padding:5px 10px; border-radius:99px;
    box-shadow:0 6px 16px -6px rgba(217,183,116,.8);
  }

  /* Accroche révélée au survol */
  .cover .c-hook{
    position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center;
    padding:26px; text-align:center; font-family:var(--font-display); font-style:italic;
    font-size:1.1rem; line-height:1.5; color:#fff;
    background:linear-gradient(180deg,rgba(12,9,16,.35),rgba(12,9,16,.9));
    opacity:0; transition:opacity .45s var(--ease); backdrop-filter:blur(2px);
  }
  .cover-link:hover .c-hook{ opacity:1; }
  .cover .c-hook::before{ content:"“"; font-size:2.4rem; color:var(--gold); position:absolute; top:10px; left:16px; opacity:.7; }

  .book-meta{ display:flex; flex-direction:column; gap:4px; }
  .book-meta .bm-title{ font-family:var(--font-display); font-size:1.3rem; }
  .book-meta .bm-genre{ font-family:var(--font-ui); font-size:.76rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
  .book-meta .bm-hook{ color:var(--ink-soft); font-size:.95rem; margin-top:.3rem; }
  .book-actions{ display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:6px; }
  .btn-more{
    font-family:var(--font-ui); font-size:.85rem; font-weight:600; color:var(--violet);
    display:inline-flex; align-items:center; gap:.4em; background:none; border:none; cursor:pointer; padding:2px 0;
    align-self:flex-start; transition:gap .3s var(--ease), color .3s;
  }
  .btn-more:hover{ gap:.8em; color:var(--gold-soft); }
  .btn-more:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; border-radius:4px; }

  /* =========================================================================
     8. ACTUALITÉS — timeline
     ========================================================================= */
  .news-list{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--border); }
  .news-item{ display:grid; grid-template-columns:170px 1fr; gap:clamp(16px,3vw,40px); padding:26px 0 26px 28px; position:relative; }
  .news-item::before{ content:""; position:absolute; left:-5px; top:34px; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(217,183,116,.15); }
  .news-date{ font-family:var(--font-ui); font-size:.78rem; letter-spacing:.05em; color:var(--gold-soft); text-transform:uppercase; padding-top:2px; text-shadow:var(--foil-emboss); }
  .news-body h3{ font-size:1.35rem; margin-bottom:.35rem; }
  .news-body p{ color:var(--ink-soft); margin:0; }
  .news-body .news-cat{ font-family:var(--font-ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--violet); }

  /* =========================================================================
     9. CONTACT
     ========================================================================= */
  .contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
  .contact-aside p{ color:var(--ink-soft); }
  .socials{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem; }
  .social{
    display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-ui); font-size:.85rem;
    padding:10px 16px; border-radius:99px; border:1px solid var(--border-2); color:var(--ink-soft);
    transition:color .25s, border-color .25s, transform .25s, background .25s;
  }
  .social:hover{ color:#fff; border-color:var(--violet); transform:translateY(-2px); background:rgba(183,155,230,.08); }
  .social svg{ width:16px; height:16px; flex:none; }

  form{ display:flex; flex-direction:column; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:7px; }
  .field label{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.03em; color:var(--ink-soft); }
  .field input, .field textarea{
    font-family:var(--font-body); font-size:1rem; color:var(--ink);
    background:var(--surface); border:1px solid var(--border-2); border-radius:10px; padding:13px 15px;
    transition:border-color .25s, box-shadow .25s; resize:vertical;
  }
  .field input:focus, .field textarea:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(183,155,230,.18); }
  .field.invalid input, .field.invalid textarea{ border-color:var(--bordeaux); box-shadow:0 0 0 3px rgba(168,66,92,.18); }
  .field .err{ font-family:var(--font-ui); font-size:.76rem; color:#e79ba9; min-height:1em; opacity:0; transition:opacity .2s; }
  .field.invalid .err{ opacity:1; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .form-note{ font-family:var(--font-ui); font-size:.8rem; color:var(--muted); }
  .form-success{
    display:none; align-items:center; gap:.6em; font-family:var(--font-ui); font-size:.9rem;
    color:var(--gold-soft); background:rgba(217,183,116,.08); border:1px solid rgba(217,183,116,.3);
    padding:12px 16px; border-radius:10px;
  }
  .form-success.show{ display:flex; }

  /* =========================================================================
     10. FOOTER
     ========================================================================= */
  footer{ border-top:1px solid var(--border); padding-block:40px; margin-top:40px; }
  .foot-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
  .foot-inner p{ font-family:var(--font-ui); font-size:.8rem; color:var(--muted); margin:0; }
  .foot-brand{ font-family:var(--font-display); font-size:1.1rem; }

  /* =========================================================================
     11. MODALE LIVRE
     ========================================================================= */
  .modal{ position:fixed; inset:0; z-index:100; display:none; }
  .modal.open{ display:block; }
  .modal-backdrop{ position:absolute; inset:0; background:rgba(6,4,9,.72); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s var(--ease); }
  .modal.open .modal-backdrop{ opacity:1; }
  .modal-scroll{ position:absolute; inset:0; overflow-y:auto; display:flex; align-items:flex-start; justify-content:center; padding:clamp(16px,5vh,70px) var(--pad); }
  .modal-card{
    position:relative; width:100%; max-width:920px; background:linear-gradient(180deg,var(--surface),var(--bg-2));
    border:1px solid var(--border-2); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;
    transform:translateY(26px) scale(.98); opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease);
  }
  .modal.open .modal-card{ transform:none; opacity:1; }
  .modal-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:0; }
  .modal-cover-wrap{ padding:clamp(24px,4vw,40px); display:flex; align-items:center; background:radial-gradient(120% 80% at 40% 10%, rgba(126,95,176,.16), transparent 60%); }
  .modal-cover-wrap .cover-link{ width:100%; display:block; }
  .modal-cover-wrap .cover{ width:100%; cursor:default; }
  .modal-cover-wrap .cover-link:hover .cover{ transform:none; box-shadow:var(--shadow); }
  .modal-body{ padding:clamp(26px,4vw,46px); }
  .modal-body h2{ font-size:clamp(1.9rem,3.5vw,2.7rem); }
  /* Byline sous le titre : la mention d'édition, à la manière d'une page de garde */
  .modal-byline{ font-family:var(--font-ui); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); text-shadow:var(--foil-emboss); margin:.7rem 0 0; }
  .modal-tagline{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; line-height:1.6; color:#f3edfa; border-left:2px solid var(--gold); padding:.2rem 0 .2rem 1.1rem; margin:1.5rem 0; }
  .modal-specs{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:1.4rem 0; }
  .spec{ font-family:var(--font-ui); font-size:.76rem; color:var(--ink-soft); border:1px solid var(--border-2); border-radius:8px; padding:6px 11px; background:rgba(255,255,255,.02); }
  .spec b{ color:var(--gold-soft); font-weight:600; }
  .modal-syn{ color:var(--ink-soft); }
  .modal-buy{ display:flex; flex-direction:column; gap:10px; margin-top:1.8rem; }
  .modal-buy .buy-row{ display:flex; flex-wrap:wrap; gap:10px; }
  .btn-retailer{ flex:1; min-width:140px; border:1px solid var(--border-2); color:var(--ink); background:rgba(255,255,255,.02); }
  .btn-retailer:hover{ border-color:var(--gold); color:#fff; transform:translateY(-2px); }
  .modal-close{
    position:absolute; top:14px; right:14px; z-index:5; width:42px; height:42px; border-radius:50%;
    background:rgba(12,9,16,.6); border:1px solid var(--border-2); color:var(--ink); cursor:pointer;
    font-size:1.1rem; display:flex; align-items:center; justify-content:center; transition:transform .3s, background .3s, border-color .3s;
  }
  .modal-close:hover{ transform:rotate(90deg); border-color:var(--violet); background:rgba(183,155,230,.15); }
  .modal-close:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:2px; }

  /* =========================================================================
     11b. PREUVE SOCIALE — notes & barre de confiance
     ========================================================================= */
  .rating{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-ui); font-size:.8rem; color:var(--ink-soft); margin-top:.35rem; }
  .stars{ position:relative; display:inline-block; letter-spacing:.04em; white-space:nowrap; }
  .stars .star{ color:rgba(236,231,243,.22); }
  .stars .star.on{ color:var(--gold); }
  .stars-base{ color:rgba(236,231,243,.22); }
  .stars-fill{ position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:var(--gold); text-shadow:var(--foil-emboss); }
  .rating-num{ font-weight:600; color:var(--gold-soft); }
  .rating-count{ color:var(--muted); }

  .hero-trust{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5em 1.1em; margin-top:2rem; font-family:var(--font-ui); font-size:.85rem; color:var(--ink-soft); }
  .hero-trust b{ color:var(--gold-soft); font-weight:600; }
  .hero-trust .stars .star{ color:var(--gold); }
  .hero-trust .sep{ width:4px; height:4px; border-radius:50%; background:var(--muted); }

  /* =========================================================================
     11c. NEWSLETTER
     ========================================================================= */
  .newsletter-card{
    background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--border-2);
    border-radius:18px; padding:clamp(30px,5vw,60px); box-shadow:var(--shadow); text-align:center;
    position:relative; overflow:hidden;
  }
  .newsletter-card::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(620px 300px at 50% -25%, rgba(126,95,176,.28), transparent 60%); }
  .newsletter-card > *{ position:relative; }
  .newsletter-card h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin:.6rem 0 0; }
  .newsletter-card p{ color:var(--ink-soft); max-width:54ch; margin:1rem auto 0; }
  .newsletter-form{ display:flex; flex-direction:column; gap:14px; max-width:470px; margin:1.9rem auto 0; text-align:left; }
  .nl-row{ display:flex; gap:14px; }
  .nl-row .field{ flex:1; min-width:0; }
  .captcha-q{ color:var(--gold-soft); font-weight:600; letter-spacing:.02em; }
  .newsletter-form .btn{ align-self:center; margin-top:4px; }
  @media (max-width:460px){ .nl-row{ flex-direction:column; } }
  .newsletter-note{ font-family:var(--font-ui); font-size:.78rem; color:var(--muted); margin-top:1rem; }
  .newsletter-success{ display:none; margin-top:1rem; color:var(--gold-soft); font-family:var(--font-ui); font-size:.9rem; }
  .newsletter-success.show{ display:block; }

  /* =========================================================================
     11d. NOM D'AUTRICE (signature de page-titre, au-dessus du titre)
     ========================================================================= */
  .hero-name{
    font-family:var(--font-display); font-style:italic; font-size:clamp(1.35rem,2.6vw,2rem);
    color:var(--gold-soft); text-shadow:var(--foil-emboss); margin:0 0 1rem;
    display:flex; align-items:center; gap:.85em; letter-spacing:.01em;
  }
  .hero-name::after{ content:""; height:1px; flex:0 0 clamp(40px,8vw,90px); background:linear-gradient(90deg,var(--gold),transparent); }

  /* =========================================================================
     11e. BANDEAU COMPTE À REBOURS (sortie du prochain roman)
     ========================================================================= */
  .countdown-band{ border-block:1px solid rgba(232,207,146,.22); background:linear-gradient(180deg,#150e20,#0e0912); padding:16px 0; }
  .cd-inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 26px; text-align:center; }
  .cd-label{ font-family:var(--font-display); font-style:italic; font-size:clamp(1rem,2vw,1.25rem); color:var(--ink); }
  .cd-clock{ display:flex; gap:16px; font-variant-numeric:tabular-nums; }
  .cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:46px; }
  .cd-num{ font-family:var(--font-display); font-size:clamp(1.4rem,3vw,1.9rem); color:var(--gold-soft); text-shadow:var(--foil-emboss); line-height:1; }
  .cd-lbl{ font-family:var(--font-ui); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
  .cd-cta{ font-family:var(--font-ui); font-weight:600; font-size:.85rem; color:#241a08; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); padding:10px 18px; border-radius:99px; transition:transform .3s var(--ease); }
  .cd-cta:hover{ transform:translateY(-2px); }

  /* =========================================================================
     11f. À PARAÎTRE — mise en avant du prochain livre
     ========================================================================= */
  .featured{
    display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,64px); align-items:center;
    background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--border-2);
    border-radius:18px; padding:clamp(28px,4vw,56px); box-shadow:var(--shadow); position:relative; overflow:hidden;
  }
  .featured::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(700px 400px at 10% -12%, rgba(126,95,176,.24), transparent 60%); }
  .featured > *{ position:relative; }
  .featured-cover{ position:relative; }
  .featured-date{
    position:absolute; top:16px; left:-10px; z-index:5; font-family:var(--font-ui); font-size:.72rem;
    letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:#241a08;
    background:linear-gradient(135deg,var(--gold-soft),var(--gold)); padding:8px 14px; border-radius:4px;
    box-shadow:0 10px 22px -8px rgba(0,0,0,.8); text-shadow:0 1px 0 rgba(255,255,255,.25);
  }
  .featured-title{ font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.2rem); margin:0; letter-spacing:-.015em; }
  .featured-series{ font-family:var(--font-ui); font-size:.8rem; letter-spacing:.06em; color:var(--violet); margin:.6rem 0 0; }
  .featured-syn{ color:var(--ink-soft); margin:1.2rem 0 0; }
  .featured-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8rem; }
  @media (max-width:860px){ .featured{ grid-template-columns:1fr; } .featured-cover{ max-width:250px; margin-inline:auto; } }

  /* =========================================================================
     11g. AVIS DE LECTRICES
     ========================================================================= */
  .reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.5vw,30px); }
  .review{
    position:relative; background:linear-gradient(160deg,var(--surface),var(--bg-2)); border:1px solid var(--border);
    border-radius:14px; padding:30px 26px 26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; overflow:hidden;
  }
  .review::before{ content:"\201C"; position:absolute; top:2px; right:20px; font-family:var(--font-display); font-size:4.5rem; color:rgba(232,207,146,.15); line-height:1; }
  .review .r-stars{ color:var(--gold); font-size:.9rem; letter-spacing:.08em; }
  .review blockquote{ font-family:var(--font-body); font-style:italic; color:var(--ink); margin:0; line-height:1.65; }
  .review .r-meta{ margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:6px; border-top:1px solid var(--border); }
  .review .r-name{ font-family:var(--font-ui); font-weight:600; font-size:.9rem; color:var(--ink); }
  .review .r-book{ font-family:var(--font-ui); font-size:.78rem; color:var(--gold-soft); }
  /* =========================================================================
     11h. BIBLIOTHÈQUE — onglets animés, panneaux, regroupements
     ========================================================================= */
  .lib-tabs{ position:relative; display:inline-flex; gap:2px; padding:5px; border:1px solid var(--border-2); border-radius:99px; background:rgba(255,255,255,.02); margin-bottom:clamp(30px,4vw,48px); max-width:100%; }
  .lib-indicator{ position:absolute; top:5px; bottom:5px; left:5px; width:0; border-radius:99px; background:linear-gradient(135deg,var(--gold-soft),var(--gold)); box-shadow:0 6px 16px -8px rgba(217,183,116,.8); transition:left .42s var(--ease), width .42s var(--ease); z-index:0; }
  .lib-tab{ position:relative; z-index:1; font-family:var(--font-ui); font-size:.9rem; font-weight:600; letter-spacing:.01em; color:var(--ink-soft); padding:11px 22px; border:none; background:none; border-radius:99px; cursor:pointer; transition:color .3s var(--ease); white-space:nowrap; }
  .lib-tab:hover{ color:var(--ink); }
  .lib-tab.active{ color:#241a08; }
  .lib-tab:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
  .lib-panel{ display:none; }
  .lib-panel.active{ display:block; animation:panelIn .5s var(--ease); }
  @keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .lib-group{ margin-top:clamp(34px,5vw,58px); }
  .lib-group:first-child{ margin-top:0; }
  .lib-group-head h3{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em; }
  .lib-group-head p{ color:var(--ink-soft); margin:.6rem 0 0; max-width:62ch; }
  .lib-group .books-grid{ margin-top:26px; }
  .theme-count{ font-family:var(--font-ui); font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--gold-soft); margin-left:.5em; }
  /* Filtre par thème : liste de liens en haut, grille qui se met à jour au clic */
  .theme-filter{ display:flex; flex-wrap:wrap; gap:11px 22px; justify-content:center; margin-bottom:clamp(30px,4vw,48px); }
  .theme-link{ position:relative; font-family:var(--font-ui); font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); background:none; border:none; padding:4px 0; cursor:pointer; white-space:nowrap; transition:color .3s var(--ease); }
  .theme-link::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); transform:scaleX(0); transition:transform .3s var(--ease); }
  .theme-link:hover{ color:var(--ink); }
  .theme-link:hover::after{ transform:scaleX(.55); }
  .theme-link.active{ color:var(--gold-soft); text-shadow:var(--foil-emboss); }
  .theme-link.active::after{ transform:scaleX(1); }
  .theme-link:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:3px; }
  #themesGrid{ transition:opacity .3s var(--ease); }
  @media (max-width:560px){
    .lib-tabs{ display:flex; flex-direction:column; align-items:stretch; border-radius:14px; width:100%; }
    .lib-indicator{ display:none; }
    .lib-tab{ text-align:center; }
    .lib-tab.active{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); }
  }

  /* =========================================================================
     12. RÉVÉLATION AU DÉFILEMENT
     ========================================================================= */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.in{ opacity:1; transform:none; }

  /* =========================================================================
     13. RESPONSIVE
     ========================================================================= */
  @media (max-width:860px){
    .about, .contact{ grid-template-columns:1fr; }
    .modal-grid{ grid-template-columns:1fr; }
    .modal-cover-wrap{ max-width:260px; margin-inline:auto; padding-bottom:0; }
    .news-item{ grid-template-columns:1fr; gap:6px; }
    .news-item::before{ top:30px; }
  }
  @media (max-width:640px){
    .nav-links{
      position:fixed; inset:0 0 0 auto; width:min(78vw,320px); flex-direction:column; align-items:stretch;
      justify-content:center; gap:6px; background:rgba(16,11,22,.97); backdrop-filter:blur(16px);
      padding:80px 26px; transform:translateX(100%); transition:transform .4s var(--ease); border-left:1px solid var(--border);
    }
    .nav-links.open{ transform:none; }
    .nav-links a{ font-size:1.1rem; padding:12px 16px; }
    .nav-toggle{ display:flex; z-index:60; width:44px; height:44px; align-items:center; justify-content:center; background:none; border:1px solid var(--border-2); border-radius:10px; color:var(--ink); cursor:pointer; }
  }

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

/* ============================================================================
   PAGE LIVRE (roman.php)
   ============================================================================ */
.book-page{ padding-top:clamp(100px,13vh,140px); }
.crumbs{ font-family:var(--font-ui); font-size:.8rem; color:var(--muted); margin-bottom:clamp(24px,4vw,40px); display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
.crumbs a{ color:var(--ink-soft); transition:color .25s; }
.crumbs a:hover{ color:var(--gold-soft); }
.book-hero{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.book-hero-cover .cover{ width:100%; cursor:default; }
.book-hero-body h1{ font-family:var(--font-display); font-size:clamp(2rem,5vw,3.4rem); letter-spacing:-.015em; margin:0; }
.book-buy{ margin-top:1.8rem; }
.book-synopsis, .book-reviews, .book-more{ margin-top:clamp(46px,7vw,80px); }
.book-synopsis{ max-width:72ch; }
.book-synopsis h2, .book-reviews h2, .book-more h2{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2rem); margin:0 0 1.1rem; }
.book-synopsis h2::after, .book-reviews h2::after, .book-more h2::after{ content:""; display:block; width:56px; height:2px; margin-top:.9rem; background:linear-gradient(90deg,var(--gold),transparent); }
.book-synopsis p{ color:var(--ink-soft); }
.book-more .books-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:clamp(22px,3vw,36px); }
@media (max-width:720px){ .book-hero{ grid-template-columns:1fr; } .book-hero-cover{ max-width:260px; } }