*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#1a1a1a;
  --cream:#f5f0e8;
  --cream-dark:#ede8df;
  --gold:#c9a96e;
  --gold-text:#9e7a3e; /* Darker gold for text readability */
  --gold-light:#e8d5b0;
  --gold-pale:#faf4e6;
  --ash:#555555;
  --white:#ffffff;
  --font-t:'Cormorant Garamond',Georgia,serif;
  --font-b:'Lora',Georgia,serif;
  --font-l:'Work Sans',sans-serif;
}
/* Screen-reader only utility */
.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}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
/* Compensation du nav sticky pour les ancres */
section[id]{scroll-margin-top:80px}

/* Focus Visible Global */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── NAV ── */
nav{position:sticky;top:0;z-index:200;background:rgba(245,240,232,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--gold-light);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 56px;height:64px;max-width:1600px;margin:0 auto}
.nav-brand{font-family:var(--font-t);font-size:20px;font-weight:400;letter-spacing:0.08em;text-decoration:none;color:var(--ink)}
.nav-brand span{color:var(--gold)}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-l);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ash);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-social{display:flex;gap:14px;align-items:center}
.nav-social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--gold-light);color:var(--ash);text-decoration:none;transition:all .2s;font-size:13px}
.nav-social a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav-cta{font-family:var(--font-l);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;padding:10px 22px;background:var(--ink);color:var(--cream);text-decoration:none;transition:all .2s}
.nav-cta:hover{background:var(--gold);color:var(--ink)}

/* ── HERO ── */
.hero{min-height:calc(100vh - 64px);min-height:calc(100dvh - 64px);display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:80px 56px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;top:0;right:0;width:48%;height:100%;background:var(--cream-dark);background-image:url('images/arabesque.webp');background-size:cover;background-position:top right;background-repeat:no-repeat;background-blend-mode:multiply;z-index:0}
.hero-content{position:relative;z-index:1;padding-right:72px}
.hero-eyebrow{font-family:var(--font-l);font-size:10px;letter-spacing:0.24em;color:var(--gold-text);text-transform:uppercase;margin-bottom:28px}
h1.hero-title{font-family:var(--font-t);font-size:clamp(56px,5.5vw,92px);font-weight:300;line-height:1.0;letter-spacing:0.02em;margin-bottom:18px}
.hero-sub{font-size:17px;color:var(--ash);line-height:1.75;margin-bottom:10px}
.hero-sig{font-family:var(--font-t);font-style:italic;font-size:16px;color:var(--gold-text);line-height:1.65;margin-bottom:48px;padding-left:18px;border-left:2px solid var(--gold-light)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{padding:14px 38px;background:var(--ink);color:var(--cream);text-decoration:none;font-family:var(--font-l);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;transition:all .25s;display:inline-block}
.btn-primary:hover{background:var(--gold);color:var(--ink)}
.btn-outline{padding:13px 38px;border:1px solid var(--ink);color:var(--ink);text-decoration:none;font-family:var(--font-l);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;transition:all .25s;display:inline-block}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.hero-visual{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-frame{width:280px;height:340px;border:1px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;background:var(--ink);overflow:hidden}
.hero-frame video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0.9}
.hero-frame::before{content:'✦';position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--cream-dark);padding:0 10px;color:var(--gold);font-size:12px;z-index:2}
.hero-frame::after{content:'';position:absolute;inset:8px;border:1px solid rgba(201,169,110,.4);pointer-events:none;z-index:2}

.btn-blog {
  display: inline-block;
  margin-top: 28px;
  padding: 12px 36px;
  border: 1px solid var(--gold);
  color: var(--gold-text);
  text-decoration: none;
  font-family: var(--font-l);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.25s;
  position: relative;
  z-index: 1;
}
.btn-blog:hover {
  background: var(--gold);
  color: var(--ink);
}

/* ── SÉPARATEUR ── */
.sep{display:flex;align-items:center;gap:20px;padding:0 56px}
.sep-line{flex:1;height:1px;background:var(--gold-light)}
.sep-mark{color:var(--gold);font-size:11px}
.books-header{display:flex;align-items:flex-end;margin-bottom:48px;flex-wrap:wrap;gap:16px}
.books-count{font-family:var(--font-t);font-style:italic;font-size:15px;color:var(--ash)}
.books-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px;margin-top:40px}
.book-card{background:var(--cream);border:1px solid var(--gold-light);display:flex;flex-direction:column;transition:all .25s;cursor:default;perspective:1200px;text-decoration:none;color:inherit}
.book-card:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 18px 36px rgba(26,26,26,.12)}
.book-cover{width:100%;aspect-ratio:2/3;background:var(--cream-dark);position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)}
.book-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.book-card:hover .book-cover img{transform:scale(1.04)}
.book-card:hover .book-cover{transform:rotateY(-12deg) rotateX(6deg)}
.book-cover::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);z-index:1}
/* Glint Sweep Effect */
.book-cover::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);transform:skewX(-25deg);z-index:2;transition:none}
.book-card:hover .book-cover::after{animation:glintSweep 1.2s ease-in-out forwards}
@keyframes glintSweep{0%{left:-100%}100%{left:200%}}
.book-cover-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-t);font-size:48px;font-weight:300;color:var(--gold-light)}
.book-age{position:absolute;bottom:10px;left:10px;background:var(--ink);color:var(--cream);font-family:var(--font-l);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;padding:4px 10px;z-index:1}
.book-body{padding:16px 18px;flex:1;display:flex;flex-direction:column}
.book-title{font-family:var(--font-t);font-size:16px;font-weight:400;line-height:1.3;margin-bottom:8px}
.book-desc{font-size:12px;color:var(--ash);line-height:1.7;flex:1;margin-bottom:14px}
.btn-amazon{display:block;text-align:center;padding:11px 18px;background:var(--gold);color:var(--ink);font-family:var(--font-l);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;transition:all .2s;margin:0 18px 18px}
.btn-amazon:hover{background:var(--ink);color:var(--cream)}

/* ── À PROPOS ── */
#apropos{background:var(--cream)}
.apropos-grid{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:center}
.portrait{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--gold-light);position:relative;background:var(--cream-dark)}
.portrait-img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.apropos-text p{font-size:16px;line-height:1.9;margin-bottom:18px;color:var(--ink)}
.blockquote{border-left:2px solid var(--gold);padding-left:22px;font-family:var(--font-t);font-style:italic;font-size:19px;color:var(--gold-text);line-height:1.65;margin:28px 0}

/* ── UNIVERS ── */
#univers{background:var(--ink);color:var(--cream);padding:96px 56px}
#univers .s-title{color:var(--cream)}
#univers .s-intro{color:rgba(245,240,232,.6);margin-bottom:0}
.univers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,169,110,.15);margin-top:48px}
.pillar{background:var(--ink);padding:44px 36px;transition:all 0.6s ease;}
.pillar.reveal { opacity: 0; transform: translateY(20px); }
.pillar.reveal.visible { opacity: 1; transform: translateY(0); }
.pillar:nth-child(2) { transition-delay: 0.2s; }
.pillar:nth-child(3) { transition-delay: 0.4s; }
.pillar-num{font-family:var(--font-t);font-size:52px;font-weight:300;color:rgba(201,169,110,.2);line-height:1;margin-bottom:18px}
.pillar-title{font-family:var(--font-t);font-size:22px;font-weight:300;color:var(--cream);margin-bottom:12px}
.pillar-text{font-size:14px;color:rgba(245,240,232,.55);line-height:1.85}

/* ── PIUMA NERA ── */
#piuma{background:var(--cream-dark);text-align:center;padding:80px 56px}
.piuma-name{font-family:var(--font-t);font-size:clamp(30px,3.5vw,46px);font-weight:300;letter-spacing:0.18em;margin-bottom:4px}
.piuma-sub{font-family:var(--font-l);font-size:11px;letter-spacing:0.26em;color:var(--gold-text);text-transform:uppercase;margin-bottom:26px}
.piuma-text{font-size:15px;color:var(--ash);line-height:1.95;max-width:500px;margin:0 auto 26px}
.piuma-sig{font-family:var(--font-t);font-style:italic;font-size:17px;color:var(--gold-text)}

/* ── CONTACT ── */
#contact{background:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:80px;align-items:start}
.contact-social{display:flex;gap:12px;margin-top:28px}
.contact-social a{display:flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--gold-light);font-family:var(--font-l);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:all .2s}
.contact-social a:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.contact-email-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--gold-light);padding-bottom:2px;transition:all .2s}
.contact-email-link:hover{color:var(--ink);border-color:var(--ink)}
form.cf{display:flex;flex-direction:column;gap:14px}
form.cf input,form.cf textarea{padding:14px 16px;background:var(--white);border:1px solid var(--gold-light);color:var(--ink);font-size:14px;font-family:var(--font-b);outline:none;transition:border-color .2s}
form.cf input:focus,form.cf textarea:focus{border-color:var(--gold)}
form.cf input::placeholder,form.cf textarea::placeholder{color:var(--ash)}
form.cf textarea{resize:vertical;min-height:128px}
form.cf button{align-self:flex-start;padding:14px 42px;background:var(--ink);color:var(--cream);border:none;font-family:var(--font-l);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;transition:all .25s}
form.cf button:hover{background:var(--gold);color:var(--ink)}

/* ── SVG ICONS ── */
.icon-instagram,.icon-facebook{width:14px;height:14px;fill:currentColor}

/* ── SECTIONS ── */
section { padding: 120px 56px; }
.s-label { 
  font-family: var(--font-l); 
  font-size: 11px; 
  letter-spacing: 0.3em; 
  color: var(--gold-text); 
  text-transform: uppercase; 
  margin-bottom: 20px; 
  display: block;
  font-weight: 500;
  opacity: 0.9;
}
.s-title { 
  font-family: var(--font-t); 
  font-size: clamp(38px, 4.5vw, 64px); 
  font-weight: 300; 
  line-height: 1.05; 
  margin-bottom: 24px; 
  color: var(--ink);
}
.s-title em { 
  font-style: italic; 
  color: var(--gold-text); 
}
.s-intro { 
  font-size: 18px; 
  color: var(--ash); 
  line-height: 1.8; 
  max-width: 600px; 
  margin-bottom: 64px; 
  font-weight: 300;
}
.plume { 
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.4em; 
  color: var(--gold-text); 
  margin-top: 15px; 
  display: block; 
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ── FOOTER ── */
footer{background:#111;color:rgba(245,240,232,.45);padding:52px 56px 32px;border-top:1px solid rgba(201,169,110,.18)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand{font-family:var(--font-t);font-size:24px;font-weight:300;color:var(--cream);letter-spacing:0.1em;margin-bottom:6px}
.footer-label{font-family:var(--font-l);font-size:10px;letter-spacing:0.22em;color:var(--gold-text);text-transform:uppercase;margin-bottom:16px}
.footer-sig{font-family:var(--font-t);font-style:italic;font-size:13px;color:rgba(201,169,110,.55);line-height:1.65}
.footer-col-title{font-family:var(--font-l);font-size:10px;letter-spacing:0.22em;color:var(--gold-text);text-transform:uppercase;margin-bottom:16px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:13px;color:rgba(245,240,232,.4);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--cream)}
.footer-social{display:flex;gap:10px;margin-top:8px}
.footer-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid rgba(201,169,110,.25);color:rgba(245,240,232,.4);text-decoration:none;transition:all .2s}
.footer-social a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:12px}
.footer-legal{display:flex;gap:22px}
.footer-legal a{font-size:12px;color:rgba(245,240,232,.3);text-decoration:none}
.footer-legal a:hover{color:rgba(245,240,232,.6)}

/* ── NEWSLETTER ── */
#newsletter{background:var(--ink);color:var(--cream);text-align:center;padding:100px 56px}
.nl-gift-badge{
  display:inline-flex;align-items:center;gap:14px;
  border:1px solid rgba(201,169,110,.35);
  padding:10px 28px;margin:0 auto 28px;
  font-family:var(--font-l);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--gold-text);
}
.nl-gift-icon{font-size:10px}
.nl-text{font-size:16px;color:rgba(245,240,232,.6);line-height:1.85;max-width:540px;margin:0 auto 44px}
.nl-wrapper{max-width:640px;margin:0 auto;text-align:left}

.nl-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.nl-field{display:flex;flex-direction:column;gap:8px}
.nl-field-solo{margin-bottom:20px}
.nl-req{color:var(--gold)}
.nl-label{
  font-family:var(--font-l);font-size:10px;letter-spacing:0.2em;
  text-transform:uppercase;color:rgba(245,240,232,.55);
}
.nl-input{
  padding:14px 18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(201,169,110,.3);
  color:var(--cream);font-size:15px;font-family:var(--font-b);
  outline:none;transition:all .25s;
  -webkit-appearance:none;appearance:none;border-radius:0;
}
.nl-input::placeholder{color:rgba(245,240,232,.2)}
.nl-input:focus{border-color:var(--gold);background:rgba(255,255,255,.11)}

/* Radio cards override */
.nl-radio-group{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.nl-radio-card{cursor:pointer;display:block}
.nl-radio-card input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nl-radio-box{
  display:block;padding:14px 12px;
  border:1px solid rgba(201,169,110,.25);
  background:rgba(255,255,255,.04);
  transition:all .2s;text-align:center;
}
/* Accessibility for radio boxes */
.nl-radio-card:focus-within .nl-radio-box { border-color: var(--gold); outline: 2px solid var(--gold); }
.nl-radio-card input:checked + .nl-radio-box{
  border-color:var(--gold);background:rgba(201,169,110,.12);
}
.nl-radio-box:hover{border-color:rgba(201,169,110,.5)}
.nl-radio-title{
  display:block;font-family:var(--font-t);font-size:16px;
  font-weight:400;color:var(--cream);margin-bottom:4px;
}
.nl-radio-sub{
  display:block;font-family:var(--font-l);font-size:10px;
  color:rgba(245,240,232,.4);letter-spacing:.05em;line-height:1.4;
}
/* Checkbox RGPD */
.nl-consent-row{margin-bottom:24px}
.nl-checkbox-wrap{display:flex;align-items:flex-start;gap:12px}
.nl-checkbox-wrap input[type="checkbox"]{
  width:18px;height:18px;min-width:18px;margin-top:2px;
  border:1px solid rgba(201,169,110,.4);background:transparent;
  cursor:pointer;appearance:none;-webkit-appearance:none;
  position:relative;transition:all .2s;border-radius:0;
}
.nl-checkbox-wrap input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)}
.nl-checkbox-wrap input[type="checkbox"]:checked::after{
  content:'✓';position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:var(--ink);font-size:12px;font-weight:700;
}
.nl-check-label{font-size:13px;color:rgba(245,240,232,.5);line-height:1.6;cursor:pointer}
.nl-check-note{display:block;font-size:11px;color:rgba(245,240,232,.3);margin-top:3px;font-style:italic}
/* Submit */
.nl-submit{
  width:100%;padding:18px;
  background:var(--gold);border:none;color:var(--ink);
  font-family:var(--font-l);font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;cursor:pointer;
  transition:all .3s;display:flex;align-items:center;justify-content:center;gap:10px;
}
.nl-submit:hover{background:var(--cream)}
.nl-submit:disabled{opacity:.55;cursor:not-allowed}
.nl-btn-mark{font-size:10px}
.nl-privacy{font-size:11px;color:rgba(245,240,232,.25);margin-top:14px;text-align:center;line-height:1.6}

/* ── BLOG HOME PREVIEW ── */
.blog-section-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 20px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.blog-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; border-bottom: none; transition: transform .3s ease; }
.blog-card:hover { transform: translateY(-8px); }
.blog-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--ink); border: 1px solid var(--gold-light); margin-bottom: 20px; width: 100%; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.05); }
.blog-body { padding: 0; }
.blog-cat { font-family: var(--font-l); font-size: 10px; color: var(--gold-text); text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 12px; display: block; }
.blog-title { font-family: var(--font-t); font-size: 22px; font-weight: 300; margin-bottom: 12px; line-height: 1.2; color: var(--ink); }
.blog-excerpt { font-size: 14px; color: var(--ash); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── SCROLL ANIM ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay for cards - extended to 12 */
.books-grid .book-card:nth-child(1) { transition-delay: 0.05s; }
.books-grid .book-card:nth-child(2) { transition-delay: 0.1s; }
.books-grid .book-card:nth-child(3) { transition-delay: 0.15s; }
.books-grid .book-card:nth-child(4) { transition-delay: 0.2s; }
.books-grid .book-card:nth-child(5) { transition-delay: 0.25s; }
.books-grid .book-card:nth-child(6) { transition-delay: 0.3s; }
.books-grid .book-card:nth-child(7) { transition-delay: 0.35s; }
.books-grid .book-card:nth-child(8) { transition-delay: 0.4s; }
.books-grid .book-card:nth-child(9) { transition-delay: 0.45s; }
.books-grid .book-card:nth-child(10) { transition-delay: 0.5s; }
.books-grid .book-card:nth-child(11) { transition-delay: 0.55s; }
.books-grid .book-card:nth-child(12) { transition-delay: 0.6s; }

/* ═══════════════════════════════════════════════
   RESPONSIVE — Optimisation mobile/tablette
   Breakpoints :
   • ≥1100px : Desktop complet (défaut)
   • 1024px  : Grand tablette / petit desktop
   • 900px   : Tablette portrait
   • 640px   : Téléphone large
   • 400px   : Petit téléphone (iPhone SE/mini)
   ═══════════════════════════════════════════════ */

/* ── FIX ZOOM iOS : inputs en 16px minimum ── */
.nl-input,
form.cf input,
form.cf textarea { font-size: 16px; }

/* ── BURGER (base) — doit être défini avant les media queries ── */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  position: relative;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
/* Couleur du burger quand le menu est ouvert (fond sombre) */
.nav-burger[aria-expanded="true"] span {
  background: var(--cream) !important;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── ≤1100px : GRAND TABLETTE / PETIT DESKTOP ── */
@media(max-width:1100px){
  .nav-inner,.hero,section,.sep,.footer-grid{padding-left:32px;padding-right:32px}
  section { padding-top: 96px; padding-bottom: 96px; }
  #univers, #piuma, #newsletter { padding-left: 32px; padding-right: 32px; }
  #univers { padding-top: 80px; padding-bottom: 80px; }
  #piuma { padding-top: 72px; padding-bottom: 72px; }
  #newsletter { padding-top: 88px; padding-bottom: 88px; }
  footer { padding-left: 32px; padding-right: 32px; }
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
  .apropos-grid{gap:48px}
  .contact-grid{gap:56px}
}

/* ── ≤1024px : TABLETTE PORTRAIT & PAYSAGE ── */
@media(max-width:1024px){
  /* Navigation : bascule en burger dès cette taille pour tous les iPads */
  .nav-links{display:none !important}
  .nav-burger { display: flex !important; }
  .nav-social { display: none !important; }
  .nav-cta { display: none !important; }

  .nav-inner,.hero,section,.sep,.footer-grid{padding-left:24px;padding-right:24px}
  .apropos-grid{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .portrait{max-width:320px;margin:0 auto}
  .books-grid{gap:20px}
  h1.hero-title{font-size:clamp(48px,7vw,76px)}
  
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:60px;padding-bottom:60px}
  .hero::after{display:none}
  .hero-content{padding-right:0;text-align:center}
  .hero-sig{display:inline-block;text-align:left}
  .hero-actions{justify-content:center}
  .hero-visual{margin-top:48px}
  
  .univers-grid{grid-template-columns:1fr;gap:1px}
  .pillar{padding:36px 28px}
  #univers{padding-top:64px;padding-bottom:64px}
  #piuma{padding-top:60px;padding-bottom:60px}
  #newsletter{padding-top:72px;padding-bottom:72px}
  .blog-grid { grid-template-columns: 1fr; gap: 40px; }
  .books-header{flex-direction:column;align-items:flex-start}
  .apropos-text p{font-size:15px;line-height:1.85}
  .blockquote{font-size:17px}
}

/* ── ≤900px : TABLETTE / MOBILE LARGE ── */
@media(max-width:900px){
  section { padding-top: 72px; padding-bottom: 72px; }
}

/* ── ≤768px : PETIT TABLETTE ── */
@media(max-width:768px){
  .legal-modal-content { padding: 32px 24px; }
  .legal-modal-close { top: 12px; right: 16px; }
  .nl-row-2col{grid-template-columns:1fr;gap:14px}
  footer{padding:44px 24px 28px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px}
  .footer-bottom{flex-direction:column;text-align:center;gap:16px}
  .footer-legal{justify-content:center}
}

/* ── ≤640px : TÉLÉPHONE LARGE ── */
@media(max-width:640px){
  section { padding: 56px 20px; }
  .sep{padding:0 20px}
  .nav-inner{padding:0 20px;height:60px}
  .nav-brand{font-size:17px;letter-spacing:0.06em}
  .nav-links{display:none}
  .nav-burger{display:flex}
  .nav-cta{display:none}
  .nav-social a{width:44px;height:44px}

  .hero{padding:40px 20px 56px;min-height:auto}
  h1.hero-title{font-size:clamp(44px,11vw,68px);line-height:1.05}
  .hero-sub{font-size:16px;line-height:1.7}
  .hero-sig{font-size:15px}
  .hero-actions{flex-direction:column;gap:12px;align-items:stretch}
  .btn-primary,.btn-outline{text-align:center;padding:15px 28px}
  .hero-frame{width:100%;max-width:260px;height:auto;aspect-ratio:280/340}
  .btn-blog{font-size:11px;padding:12px 22px}

  .s-title{font-size:clamp(32px,8vw,44px)}
  .books-count{font-size:14px}
  .books-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
  .book-title{font-size:14px;line-height:1.25}
  .book-desc{font-size:11px;line-height:1.6;margin-bottom:12px}
  .book-body{padding:12px 14px}
  .btn-amazon{margin:0 14px 14px;padding:10px 14px;font-size:9px}
  .book-age{font-size:8px;padding:3px 8px;bottom:8px;left:8px}

  #apropos{padding:56px 20px}
  .portrait{max-width:260px}
  .apropos-text p{font-size:15px}

  #univers{padding:56px 20px}
  .pillar{padding:32px 24px}
  .pillar-num{font-size:44px;margin-bottom:12px}
  .pillar-title{font-size:20px}
  .pillar-text{font-size:14px}

  #piuma{padding:52px 20px}
  .piuma-text{font-size:14px}
  .piuma-sig{font-size:15px}

  #newsletter{padding:56px 20px}
  .nl-gift-badge{font-size:10px;padding:8px 20px;gap:10px;margin-bottom:22px}
  .nl-gift-text{font-size:10px}
  .nl-wrapper{max-width:100%}
  .nl-radio-group{grid-template-columns:1fr;gap:10px}
  .nl-radio-box{padding:12px 16px;text-align:left}
  .nl-submit{padding:16px;font-size:11px}

  #contact{padding:56px 20px}
  .contact-social{flex-wrap:wrap}

  .blog-grid{gap:32px}
  .blog-title{font-size:20px}
  .blog-section-header{flex-direction:column;align-items:flex-start;gap:16px}

  footer{padding:40px 20px 24px}
  .footer-grid{grid-template-columns:1fr;gap:32px;margin-bottom:32px}
  .footer-brand{font-size:21px}

  /* Toast cadeau : s'assurer qu'il reste au-dessus du bandeau cookies */
  #cookie-banner{padding:16px 20px;flex-direction:column;gap:12px;text-align:center}
  #cookie-banner p{font-size:12px}
  .cookie-buttons{display:flex;gap:10px}
}

/* ── ≤400px : PETIT TÉLÉPHONE (iPhone SE/mini, Galaxy S) ── */
@media(max-width:400px){
  section { padding: 48px 16px; }
  .nav-inner{padding:0 16px}
  .nav-brand{font-size:15px}
  .nav-brand span{display:none}

  .hero{padding:32px 16px 48px}
  h1.hero-title{font-size:44px}
  .hero-sub{font-size:15px}
  .hero-sig{font-size:14px;padding-left:14px}

  .s-title{font-size:32px}
  .books-grid{grid-template-columns:1fr;gap:20px}
  .book-title{font-size:17px}
  .book-desc{font-size:13px}
  .btn-amazon{font-size:10px;padding:12px 16px}

  #apropos,#univers,#piuma,#newsletter,#contact{padding:48px 16px}
  .pillar{padding:28px 20px}
  .piuma-name{font-size:26px;letter-spacing:0.12em}

  .nl-input{padding:13px 14px}
  form.cf input,form.cf textarea{padding:13px 14px}

  footer{padding:32px 16px 20px}
  .footer-brand{font-size:19px}
  .footer-sig{font-size:12px}
}

/* ── BURGER MENU MOBILE ── */

/* Mobile overlay menu */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom:0;
  background: rgba(26,26,26,0.98);
  backdrop-filter: blur(20px);
  border-bottom: 2px solid var(--gold);
  z-index: 1000;
  padding: 40px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
@media(max-width:1024px){
  .nav-mobile-overlay.open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
@media(max-width:640px){
  .nav-mobile-overlay{top:60px}
}
.nav-mobile-overlay ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile-overlay a {
  display: block;
  padding: 20px 0;
  font-family: var(--font-t);
  font-size: 26px;
  font-weight: 300;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,169,110,.15);
  transition: all 0.3s;
}
.nav-mobile-overlay a:hover { color: var(--gold); padding-left: 10px; }
.nav-mobile-cta {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 32px;
  background: var(--gold);
  color: var(--ink) !important;
  font-family: var(--font-l);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: none !important;
}

/* ── COOKIES BANNER ── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(26,26,26,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(201,169,110,.25);
  z-index: 9000;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transform: translateY(0);
  transition: transform 0.4s ease;
}
#cookie-banner.hidden { transform: translateY(110%); }
#cookie-banner p {
  font-size: 13px;
  color: rgba(245,240,232,.7);
  line-height: 1.6;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
#cookie-banner a { color: var(--gold); text-decoration: none; }
#cookie-banner a:hover { text-decoration: underline; }

/* ── LEGAL MODALS ── */
.legal-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.legal-modal.visible {
  display: flex;
  opacity: 1;
}
.legal-modal-content {
  background: var(--ink);
  border: 1px solid rgba(201,169,110,0.5);
  color: var(--cream);
  padding: 56px;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  border-radius: 4px;
}
.legal-modal-close {
  position: absolute;
  top: 24px; right: 32px;
  background: none; border: none;
  color: var(--gold);
  font-size: 32px;
  font-family: var(--font-l);
  cursor: pointer;
  transition: transform 0.2s;
}
.legal-modal-close:hover {
  transform: scale(1.1);
  color: var(--white);
}
.legal-modal-content h2 {
  font-family: var(--font-t);
  font-size: 32px;
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 24px;
}
.legal-modal-content h3 {
  font-family: var(--font-l);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.8);
  margin-bottom: 16px;
  margin-top: 32px;
}
.legal-modal-content p {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(245,240,232,0.7);
  margin-bottom: 16px;
}
.legal-modal-content ul {
  padding-left: 24px;
  margin-bottom: 16px;
}

/* ── GIFT TOAST CENTRÉ (ÉTIQUETTE) ── */
.gift-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 1500; transition: opacity 0.5s;
}
.gift-overlay.hidden { display: none; }

.gift-toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -45%) scale(0.95);
  z-index: 1600; background: #1a1a1a;
  border: 1px solid var(--gold);
  padding: 48px 40px; color: var(--cream);
  width: 90%; max-width: 480px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.9);
  text-align: center; visibility: hidden; opacity: 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gift-toast.hidden { display: none; }
.gift-toast.visible { visibility: visible; opacity: 1; transform: translate(-50%, -50%) scale(1); }

.gift-toast-header { margin-bottom: 24px; position: relative; }
.gift-toast-marker { font-family: var(--font-l); font-size: 10px; letter-spacing: 0.3em; color: var(--gold-text); }
.gift-toast-close {
  position: absolute; top: -24px; right: -24px;
  background: none; border: none; font-size: 28px;
  color: var(--gold); cursor: pointer; opacity: 0.6;
  transition: 0.2s;
}
.gift-toast-close:hover { opacity: 1; transform: rotate(90deg); }

.gift-toast-main { margin-bottom: 32px; }
.gift-toast-icon { font-size: 56px; margin-bottom: 20px; display: block; filter: drop-shadow(0 0 15px rgba(201,169,110,0.3)); }
.gift-toast-text strong { display: block; font-family: var(--font-t); font-size: 32px; font-weight: 300; color: var(--gold-light); margin-bottom: 14px; line-height: 1.1; }
.gift-toast-text span { font-family: var(--font-b); font-size: 16px; opacity: 0.85; line-height: 1.7; display: block; }

.gift-toast-btn {
  width: 100%; background: var(--gold); color: var(--ink);
  border: none; font-family: var(--font-l); font-size: 11px;
  font-weight: 600; padding: 18px; letter-spacing: 0.2em;
  text-transform: uppercase; cursor: pointer; transition: 0.3s;
}
.gift-toast-btn:hover { background: var(--cream); }

@media (max-width: 600px) {
  .gift-toast { padding: 32px 24px; width: 85%; }
  .gift-toast-text strong { font-size: 24px; }
  .gift-toast-text span { font-size: 14px; }
}

/* ── BLOG PREVIEW responsive ── */
@media (max-width: 900px) {
  .blog-section-header { flex-direction: column; align-items: flex-start; }
}