/* ============ Le Carnet — design system « L'Atelier de l'Encre » ============ */
/* Tokens repris de serany-seng-stylescape-final.html (source de vérité). */
:root{
  --paper:#F4ECE0; --paper-2:#EADFCE; --paper-3:#F8F2E8;
  --ink:#1F1A16; --ink-soft:#3A322D; --muted:#6E6253;
  --brick:#963C35; --ember:#C8553D; --amber:#D99A4E;
  --indigo:#3C4A66; --filet:#CBBCA4;
  --line:rgba(31,26,22,.13); --line-2:rgba(31,26,22,.24);
  --night:#241A15; --vellum:#ECE4D4;
  --f-display:"Cormorant Garamond",serif;
  --f-editorial:"Fraunces",serif;
  --f-body:"DM Sans",system-ui,sans-serif;
  --f-mono:"DM Mono",monospace;
  --maxw:1100px;            /* page de conversion plus étroite que le stylescape (1340) */
  --measure:62ch;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:var(--brick)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.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}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}

/* ---- Topbar : logo seul, AUCUN lien de nav (règle anti-fuite, Spec §3.3) ---- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,rgba(244,236,224,.95),rgba(244,236,224,.6));
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;min-height:62px}
.brandmark{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);
  font-weight:600;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brandmark .mark{width:28px;height:28px;flex:0 0 auto;color:var(--brick)}

/* ---- Bouton CTA ---- */
.btn{appearance:none;border:0;cursor:pointer;font-family:var(--f-body);font-weight:600;
  font-size:1rem;line-height:1;padding:.95rem 1.4rem;border-radius:4px;
  background:var(--brick);color:var(--paper);
  transition:transform .25s cubic-bezier(.16,1,.3,1),background .2s,box-shadow .25s}
.btn:hover{background:#82332d;transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(150,60,53,.65)}
.btn:active{transform:translateY(0);box-shadow:none}

/* ---- Formulaire de capture ---- */
.capture{display:flex;flex-wrap:wrap;gap:.6rem;max-width:520px}
.capture input[type=email]{flex:1 1 240px;min-width:0;padding:.95rem 1rem;
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--paper-3);
  border:1px solid var(--line-2);border-radius:4px;
  transition:border-color .2s,background .2s,box-shadow .25s}
.capture input[type=email]::placeholder{color:var(--muted)}
.capture input[type=email]:focus{border-color:var(--indigo);background:#fff;outline:none;
  box-shadow:0 0 0 3px rgba(60,74,102,.13)}
.capture .btn{flex:0 0 auto}
.form-note{margin-top:.7rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--muted)}
.form-note a{color:var(--muted);text-underline-offset:2px}
.form-error{margin-top:.5rem;color:var(--brick);font-size:.85rem;min-height:1.1em}

/* ---- Footer ---- */
.foot{border-top:1px solid var(--line);margin-top:clamp(3rem,8vh,6rem)}
.foot .wrap{padding-block:2.2rem;display:flex;flex-direction:column;gap:.6rem}
.foot .tag{font-family:var(--f-display);font-size:1.2rem;color:var(--ink);margin:0}
.foot nav{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}
.foot nav a{color:var(--muted);text-decoration:none}
.foot nav a:hover{color:var(--ink)}
/* Glyphe TikTok inline (avant le @) */
.ti{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-right:.3em}

/* ---- Hero ---- */
.hero{position:relative;padding-block:clamp(3.6rem,12vh,8rem) clamp(3.6rem,9vh,6.5rem)}
.hero h1{font-family:var(--f-display);font-weight:500;font-size:clamp(2.6rem,8vw,5.4rem);
  line-height:.92;letter-spacing:-.01em;max-width:17ch;margin:0}
.hero h1 .em{font-style:italic;color:var(--brick)}
.hero .lede{margin:2.4rem 0 3rem;max-width:var(--measure);font-family:var(--f-editorial);
  font-weight:340;font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.55;color:var(--ink-soft)}
.hero .capture{margin-bottom:.2rem}
.hero .microline{margin:2.6rem 0 0;font-family:var(--f-mono);font-size:.78rem;
  letter-spacing:.04em;color:var(--brick)}

/* ---- Sections : composition éditoriale asymétrique (ma + contraste d'échelle) ---- */
.section{padding-block:clamp(4rem,12vh,8.5rem);border-top:1px solid var(--line)}
.section .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  column-gap:clamp(2.4rem,8vw,7rem);align-items:start}
.section .s-title{font-family:var(--f-display);font-weight:500;
  font-size:clamp(2rem,4.4vw,3.5rem);line-height:1;letter-spacing:-.015em;margin:0}
/* Mot-clé du titre : surlignage ambre (signature « pages annotées · surlignage ») */
.section .s-title .em{font-style:normal;color:var(--ink);
  background:linear-gradient(rgba(217,154,78,.5),rgba(217,154,78,.5)) no-repeat;
  background-size:100% .42em;background-position:0 86%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.section .s-body{max-width:48ch;padding-top:.5rem}
.section .s-body p{font-size:1.08rem;color:var(--ink-soft);margin:0 0 1.2rem}
.section .s-body p:last-child{margin-bottom:0}
.section .s-body p strong{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .section .wrap{grid-template-columns:1fr;row-gap:1.5rem}
  .section .s-body{max-width:none;padding-top:0}
}

/* Variante — composition décalée façon logo (deux demi-cercles glissés en diagonale) */
.section.stack .wrap{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  column-gap:clamp(1.4rem,3vw,2.8rem);align-items:start}
.section.stack .s-title{margin:0;max-width:none;font-size:clamp(2.1rem,4.8vw,3.7rem);
  transform:translateY(-1.8rem)}
.section.stack .s-col2{transform:translateY(2.2rem)}
.section.stack .s-col2 .s-body{max-width:48ch;padding-top:0}

/* Variante — feature centré avec étincelle (la preuve) */
.section.feature .wrap{display:block;max-width:680px;margin-inline:auto;text-align:center}
.section.feature .spark{width:34px;height:34px;color:var(--amber);margin:0 auto 1.5rem}
.section.feature .s-title{max-width:18ch;margin:0 auto 1.6rem;font-size:clamp(2.2rem,5vw,3.9rem)}
.section.feature .s-body{max-width:52ch;margin-inline:auto;text-align:left;padding-top:0}

/* Variante — trois temps à symboles (ce que tu reçois) */
.section.give .wrap{display:block}
.section.give .s-title{max-width:20ch;margin:0 0 2.8rem}
.section.give .gives{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.4vw,3rem)}
.section.give .give-item .ic{width:34px;height:34px;color:var(--indigo);margin-bottom:1rem}
.section.give .give-item p{font-size:1rem;color:var(--ink-soft);margin:0;line-height:1.55}

/* Figure illustrée (section solution) */
.s-figure{margin:0}
.s-figure .illus{display:block;width:100%;height:auto;border-radius:3px}
.section.stack .s-figure{max-width:none;margin:0 0 1.4rem}

/* ---- Apparitions au scroll (Pass B) ---- */
.js [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}
.js [data-reveal-fade]{opacity:0;transition:opacity .8s ease}
.js [data-reveal-fade].is-visible{opacity:1}
[data-reveal][data-delay="1"],[data-reveal-fade][data-delay="1"]{transition-delay:.09s}
[data-reveal][data-delay="2"],[data-reveal-fade][data-delay="2"]{transition-delay:.18s}
[data-reveal][data-delay="3"],[data-reveal-fade][data-delay="3"]{transition-delay:.27s}
.js .gives .give-item:nth-child(2){transition-delay:.1s}
.js .gives .give-item:nth-child(3){transition-delay:.2s}
.section.cta-final input[type=email]:focus{box-shadow:0 0 0 3px rgba(217,154,78,.2)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js [data-reveal-fade]{opacity:1;transition:none}
}

@media (max-width:760px){
  .section.stack .wrap{grid-template-columns:1fr;row-gap:1.4rem}
  .section.stack .s-title{transform:none}
  .section.stack .s-col2{transform:none}
  .section.give .gives{grid-template-columns:1fr;gap:1.9rem}
  .section.give .give-item{display:flex;gap:1rem;align-items:flex-start}
  .section.give .give-item .ic{flex:0 0 auto;margin-bottom:0}
}

/* CTA final : climax centré, hiérarchie entre les deux lignes */
.section.cta-final{padding-block:clamp(5rem,13vh,8.5rem);background:var(--night);border-top:0;
  position:relative;z-index:1}
.section.cta-final .wrap{display:block;max-width:660px;margin-inline:auto;text-align:center}
.section.cta-final .lead-in{font-family:var(--f-editorial);font-weight:340;
  font-size:clamp(1rem,1.6vw,1.18rem);color:rgba(236,228,212,.66);max-width:46ch;margin:0 auto 2.1rem}
.section.cta-final .closer{font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.8rem);line-height:1.05;color:var(--vellum);margin:0}
.section.cta-final .closer .em{font-style:italic;color:var(--amber)}
.section.cta-final .capture{margin:3.4rem auto 0;justify-content:center}
.section.cta-final input[type=email]{background:rgba(236,228,212,.07);
  border-color:rgba(236,228,212,.28);color:var(--vellum)}
.section.cta-final input[type=email]::placeholder{color:rgba(236,228,212,.55)}
.section.cta-final input[type=email]:focus{background:rgba(236,228,212,.12);border-color:var(--amber)}
.section.cta-final .form-error{text-align:center;color:var(--amber)}

/* ---- Pages légales ---- */
.legal h2{font-family:var(--f-display);font-weight:600;font-size:1.5rem;margin:1.8rem 0 .6rem}
.legal p{color:var(--ink-soft);margin:0 0 .9rem;line-height:1.65}
.legal p strong{color:var(--ink)}
.legal .legal-note{font-size:.9rem;color:var(--ink-soft);background:var(--paper-2);
  padding:.9rem 1.1rem;border-radius:4px;margin-top:1.6rem}

/* ---- Responsive mobile-first ---- */
@media (max-width:560px){
  .capture .btn{flex:1 1 100%}          /* bouton pleine largeur sous le champ */
  .hero h1{font-size:clamp(2.3rem,11vw,3.4rem)}
  .foot nav{flex-direction:column;align-items:flex-start;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* ============ Étape 4 — polissage « L'Atelier de l'Encre » ============ */

/* Grain papier : voile de bruit très discret, fixe, derrière le contenu */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}
.topbar,main,.foot{position:relative;z-index:1}

/* Hero : papier réglé (filets verticaux estompés) + tampon en filigrane */
.hero{overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background-image:repeating-linear-gradient(to right,transparent 0 119px,var(--line) 119px 120px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent)}
.hero .watermark{position:absolute;z-index:-1;top:50%;right:0;transform:translate(50%,-50%);
  width:280px;height:280px;color:var(--brick);opacity:.05;pointer-events:none}
@media (max-width:820px){
  /* Mobile : le tampon redevient un logo visible, en haut du titre */
  .hero .watermark{display:block;position:static;transform:none;z-index:auto;
    width:64px;height:64px;opacity:1;margin:0 0 1.4rem}
}