/* Draft Club — DA « Le brouillon ». Une colonne large ; chaque section prend l'ambiance de son projet. */
:root{
  --choco:#3D2314; --noir:#1A1208; --creme:#FDF6F0; --poudre:#F2C4CE; --terra:#E8A882; --bordeaux:#8A4A5C;
  --neon:#FF6FA8; --vif:#EE4E90; --framboise:#B01660; --prune:#5C0836;
  --f-d:'Anton',Impact,'Arial Narrow',sans-serif; --f-s:'Playfair Display',Georgia,serif;
  --f-u:'DM Sans','Helvetica Neue',Arial,sans-serif; --f-h:'Covered By Your Grace','Segoe Print',cursive;
  --ink:var(--choco); --pen:var(--framboise);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--choco);font:17px/1.6 var(--f-u);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1400px;margin:0 auto;padding-inline:clamp(20px,4.5vw,72px)}
h1,h2,h3{font-family:var(--f-d);font-weight:400;text-transform:uppercase;line-height:1.08;letter-spacing:.005em;text-wrap:balance}
h2{font-size:clamp(38px,6vw,68px)}
h3{font-size:clamp(28px,3.4vw,38px)}
.serif{font:italic 600 clamp(20px,2.4vw,26px)/1.4 var(--f-s)}
.hw{font:400 clamp(30px,4vw,44px)/1 var(--f-h);color:var(--pen);display:inline-block;transform:rotate(-3deg)}
.kick{display:inline-block;margin-bottom:10px;border-bottom:3px solid var(--pen);padding-bottom:2px}
:focus-visible{outline:3px solid var(--neon);outline-offset:3px}

/* fonds : dégradé + lumière + grain */
.amb{position:relative;isolation:isolate;color:var(--ink)}
.amb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.a-club{--ink:var(--creme);--pen:var(--neon);background:radial-gradient(ellipse 60% 55% at 92% 6%,rgba(255,111,168,.24),transparent 60%),radial-gradient(ellipse 50% 50% at 0% 100%,rgba(232,168,130,.14),transparent 60%),linear-gradient(150deg,#3A2419,#0F0A06)}
.a-page{background:radial-gradient(ellipse 50% 50% at 0% 100%,rgba(242,196,206,.4),transparent 60%),linear-gradient(150deg,#FEFAF6,#F8ECE4)}
.a-carnets{background:repeating-linear-gradient(to bottom,transparent 0 45px,rgba(138,74,92,.13) 45px 47px),radial-gradient(ellipse 50% 50% at 90% 8%,rgba(255,240,244,.6),transparent 60%),linear-gradient(150deg,#F7D2DB,#ECA2BE)}
.a-book{--ink:var(--creme);--pen:var(--poudre);background:radial-gradient(ellipse 60% 55% at 82% 16%,rgba(242,196,206,.28),transparent 60%),linear-gradient(150deg,#AA546C,#563234)}
.a-events{--ink:var(--noir);background:radial-gradient(ellipse 55% 50% at 14% 8%,rgba(250,214,196,.6),transparent 60%),linear-gradient(150deg,#E8A882,#EE96A6)}
.a-punch{--ink:var(--noir);--pen:var(--prune);background:radial-gradient(ellipse 55% 50% at 12% 8%,rgba(255,190,214,.6),transparent 60%),linear-gradient(150deg,#FF84B4,#EE4E90)}
.a-write{--ink:var(--noir);background:linear-gradient(150deg,#FEFAF6,#F6E6E0);border-block:clamp(34px,6vw,64px) solid #14100A}

/* gestes du stylo */
.mk{position:relative;display:inline-block;white-space:nowrap}
.mk svg{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--pen);stroke-linecap:round;stroke-linejoin:round}
.mk path{vector-effect:non-scaling-stroke;stroke-width:.075em}
.mk.ul svg{left:-2%;width:104%;bottom:-.2em;height:.3em}
.mk.ci svg{left:-9%;width:118%;top:-8%;height:122%}
.mk.st svg{left:-4%;width:108%;top:36%;height:.3em}
.mk.st path{stroke-width:.1em}
@media (prefers-reduced-motion:no-preference){
  .draw .mk svg{clip-path:inset(-60% 100% -60% -10%);animation:draw .9s .45s cubic-bezier(.6,.1,.3,1) forwards}
  .draw .mk.ul svg{animation-delay:1.1s}
  @keyframes draw{to{clip-path:inset(-60% -10% -60% -10%)}}
}

/* pastille + boutons */
.pill{display:inline-block;background:var(--ink);color:var(--bgk,var(--creme));font:700 17px/1 var(--f-u);padding:11px 20px;border-radius:99px}
.a-club .pill,.a-book .pill{--bgk:var(--choco)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 16px/1 var(--f-u);padding:17px 28px;border-radius:99px;background:var(--ink);color:var(--creme);border:2px solid var(--ink);transition:transform .15s ease}
.a-club .btn,.a-book .btn{color:var(--choco)}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn svg{width:20px;height:20px;flex:none}

/* nav */
nav{position:sticky;top:0;z-index:50;background:rgba(253,246,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(61,35,20,.16)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
nav .pill{font-size:16px}
.nav-links{display:flex;gap:26px;font:700 12.5px var(--f-u);letter-spacing:.14em;text-transform:uppercase}
.nav-links a{padding-block:6px;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--framboise)}
.nav-cta{font:700 14px/1 var(--f-u);padding:12px 18px;border-radius:99px;border:2px solid var(--choco);white-space:nowrap}
.nav-cta:hover{background:var(--choco);color:var(--creme)}
@media (max-width:860px){.nav-links{display:none}}

/* hero */
.hero{min-height:calc(100vh - 71px);min-height:calc(100svh - 71px);display:flex;align-items:center;padding-block:clamp(28px,5vh,72px)}
.hero>.wrap{width:100%}
.hero h1{font-size:clamp(52px,min(9vw,14vh),150px);margin-block:clamp(8px,1.4vh,14px) clamp(18px,3vh,30px)}
.hero .sub{font-size:clamp(17px,min(2vw,2.6vh),21px);max-width:58ch;margin-bottom:clamp(20px,3.4vh,34px);opacity:.92}
.ctas{display:flex;gap:14px;flex-wrap:wrap}

section{padding-block:clamp(60px,9vw,104px)}
#rendez-vous{margin-top:clamp(60px,9vw,104px);scroll-margin-top:90px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(28px,6vw,110px);align-items:center}
.cols p{margin-block:18px 26px;max-width:52ch}
.events{display:grid;gap:22px}
.events div strong{display:block;font:400 clamp(24px,3vw,30px)/1.1 var(--f-d);text-transform:uppercase}
.events div span{opacity:.82}
.events div{padding-left:22px;border-left:3px solid var(--pen)}

/* rendez-vous */
.rdv{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:clamp(18px,2vw,28px);margin-top:40px}
.card{border-radius:21px;padding:28px 26px 30px;min-height:clamp(330px,26vw,400px);display:flex;flex-direction:column;gap:14px;overflow:hidden;box-shadow:0 0 0 1px rgba(61,35,20,.07),0 2px 6px rgba(61,35,20,.10),0 20px 38px -14px rgba(61,35,20,.34)}
.card.a-write{border:0}
.card .lab{font:700 11.5px var(--f-u);letter-spacing:.2em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}

.card .lab .pill{font-size:13px;padding:8px 13px;letter-spacing:0;text-transform:none}
.card.a-write .lab .pill{background:var(--choco);color:var(--creme)}
.card h3{margin-top:auto}
.card p{font-size:16px}
.card .hw{font-size:30px;align-self:flex-start}

/* piliers */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,4vw,56px);margin-top:36px}
.duo p{margin-top:12px;max-width:44ch}

/* carnet */
.book{justify-self:center;width:min(100%,300px);transform:rotate(3deg);border-radius:6px;box-shadow:0 26px 50px rgba(92,8,54,.32),0 4px 10px rgba(0,0,0,.12)}
form.inline{display:flex;gap:10px;flex-wrap:wrap}
form.inline input{flex:1 1 220px;min-width:0;padding:16px 20px;border-radius:99px;border:2px solid var(--ink);background:var(--creme);color:var(--choco);font:16px var(--f-u)}
form.inline button{cursor:pointer}
.fb{font-size:14px;margin-top:12px;min-height:22px;font-weight:600}

/* philo */
.philo{text-align:left}
.philo blockquote{font:italic 700 clamp(30px,5.4vw,62px)/1.22 var(--f-s);max-width:17em}
.philo cite{display:block;margin-top:22px;font-style:normal}

/* footer */
footer{padding-block:clamp(60px,9vw,100px) 28px}
footer h2{margin-bottom:12px}
footer .lead{margin-bottom:26px;max-width:46ch}
.foot{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;margin-top:64px;padding-top:22px;border-top:1px solid rgba(253,246,240,.2);font-size:14px}
.foot nav,.foot .links{display:flex;gap:22px;flex-wrap:wrap;position:static;background:none;border:0}
.foot a:hover{color:var(--neon)}

/* fenêtre de consentement */
#consentModal{display:none;position:fixed;inset:0;background:rgba(26,18,8,.6);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--creme);color:var(--choco);border-radius:21px;max-width:440px;width:100%;padding:28px}
.modal h3{font-size:28px;margin-bottom:14px}
.modal label{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.5;margin-bottom:22px;cursor:pointer}
.modal input{margin-top:4px;width:18px;height:18px;flex:none;accent-color:var(--framboise)}
.modal a{color:var(--framboise);text-decoration:underline}
.modal .row{display:flex;gap:10px;justify-content:flex-end}
.modal button{font:700 15px var(--f-u);padding:12px 20px;border-radius:99px;border:2px solid var(--choco);background:transparent;color:var(--choco);cursor:pointer}
.modal button.ok{background:var(--choco);color:var(--creme)}

/* pages simples */
.simple{min-height:calc(100vh - 71px);display:flex;align-items:center}
.simple h1{font-size:clamp(46px,9vw,104px);margin-block:10px 20px}
.amounts{display:flex;gap:14px;flex-wrap:wrap;margin-block:30px 22px}
.amounts a{font:400 clamp(38px,6vw,56px)/1 var(--f-d);padding:18px 34px;border-radius:21px;background:var(--creme);color:var(--choco);transition:transform .15s ease}
.amounts a:hover{transform:translateY(-3px) rotate(-2deg)}
.legal{padding-block:56px 100px}
.legal .wrap{max-width:860px}
.legal h1{font-size:clamp(40px,7vw,72px);margin-block:22px 8px}
.legal h2{font-size:28px;margin:44px 0 12px}
.legal p,.legal ul{margin-bottom:14px;font-size:16px}
.legal ul{margin-left:22px}
.legal a{color:var(--framboise);text-decoration:underline}
.legal .updated{opacity:.65;font-size:14px}

/* page Book Club */
.bc{min-height:calc(100vh - 71px);display:flex;align-items:center;padding-block:clamp(40px,7vw,80px)}
.bc .cols{align-items:start}
.bc h1{font-size:clamp(60px,11vw,132px);margin-block:10px 26px}
.bc .serif{max-width:22em}
.infos{margin-top:34px;display:grid;gap:16px}
.infos div{padding-left:20px;border-left:3px solid var(--pen)}
.infos dt{font:700 11.5px var(--f-u);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.infos dd{font:400 clamp(22px,2.6vw,28px)/1.18 var(--f-d);text-transform:uppercase;max-width:20em}
.ticket{--ink:var(--choco);--pen:var(--framboise);background:var(--creme);color:var(--choco);border-radius:21px;padding:clamp(22px,4vw,34px);display:grid;gap:10px;box-shadow:0 24px 50px rgba(40,10,20,.35);transform:rotate(1deg)}
.ticket .hw{justify-self:start;margin-bottom:6px}
.ticket label{font:700 13px var(--f-u)}
.ticket input[type=text],.ticket input[type=email],.ticket input[type=tel]{width:100%;padding:15px 18px;border-radius:14px;border:2px solid var(--choco);background:#fff;color:var(--choco);font:17px var(--f-u);margin-bottom:8px}
.ticket .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14.5px;line-height:1.45;cursor:pointer}
.ticket .check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--framboise)}
.ticket .check a{color:var(--framboise);text-decoration:underline}
.ticket .btn{justify-content:center;margin-top:10px;cursor:pointer;color:var(--creme)}
.ticket .btn:disabled{opacity:.55;cursor:default;transform:none}
.ticket .fb{margin-top:4px;min-height:0}
.ticket .fb.bad{color:var(--framboise)}
.ticket.done>:not(.fb):not(.hw){display:none}
.ticket.done .fb{font:400 clamp(26px,3.4vw,34px)/1.15 var(--f-d);text-transform:uppercase}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.card .btn{align-self:flex-start;margin-top:4px;padding:13px 22px;font-size:15px}
.bc{overflow:hidden}
.bc .cols>*{min-width:0}
@media (max-width:760px){.ticket{transform:none}}

/* hero : variantes */
.hero.v-center{text-align:center}
.hero.v-center .sub{margin-inline:auto}
.hero.v-center .ctas{justify-content:center}
.hero.v-center h1{font-size:clamp(52px,min(8.4vw,15vh),150px)}
.hero.v-duo>.wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:center}
.hero.v-duo h1{font-size:clamp(48px,min(5.2vw,13vh),118px)}
.hero.a-page{--ink:var(--choco);--pen:var(--framboise);background:repeating-linear-gradient(to bottom,transparent 0 45px,rgba(138,74,92,.10) 45px 47px),radial-gradient(ellipse 50% 50% at 0% 100%,rgba(242,196,206,.5),transparent 60%),linear-gradient(150deg,#FEFAF6,#F8ECE4)}
.pile{position:relative;height:min(52vh,360px)}
.pile a{position:absolute;width:41%;aspect-ratio:4/5;max-height:100%;border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 22px 44px rgba(20,8,4,.38);transition:transform .2s ease;overflow:hidden}
.pile a:nth-child(1){left:0;top:12%;transform:rotate(-6deg)}
.pile a:nth-child(2){left:29.500%;top:0;transform:rotate(2deg);z-index:2}
.pile a:nth-child(3){left:59%;top:10%;transform:rotate(7deg);z-index:3}
.pile a:hover{transform:rotate(0) translateY(-6px);z-index:5}
.pile .lab{font:700 9px var(--f-u);letter-spacing:.14em;gap:6px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
.pile .lab .pill{font-size:10.5px;padding:5px 9px;letter-spacing:0;text-transform:none}
.pile h3{font-size:clamp(24px,2.3vw,34px);margin-top:auto;line-height:1}
.pile .pill{background:var(--creme);color:var(--choco)}
.pile .a-carnets .pill{background:var(--choco);color:var(--creme)}
.pile .a-carnets{--ink:var(--choco);--pen:var(--framboise)}
.pile .a-write{--ink:var(--noir);--pen:var(--framboise)}
.pile .a-book{--ink:var(--creme);--pen:var(--poudre)}
.pile a{color:var(--ink)}
.pile .hw{font-size:clamp(16px,1.4vw,20px);align-self:flex-start}
.pile .a-write{border:0}

.pile .a-write .lab .pill{background:var(--choco);color:var(--creme)}
@media (max-width:900px){.hero.v-duo>.wrap{grid-template-columns:minmax(0,1fr)}.pile{display:none}.hero.v-duo h1{font-size:clamp(52px,min(11vw,13vh),118px)}}

/* Write Club : page de cahier (lignes + marge) entre les deux bandes noires */
.a-write{background:repeating-linear-gradient(to bottom,transparent 0 37px,rgba(138,74,92,.16) 37px 39px),radial-gradient(ellipse 70% 50% at 90% 12%,rgba(255,255,255,.9),transparent 60%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(242,196,206,.6),transparent 62%),linear-gradient(150deg,#FDF8F3,#F1DDD4)}
.card.a-write,.pile .a-write{background:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(138,74,92,.17) 27px 29px),radial-gradient(ellipse 70% 50% at 90% 12%,rgba(255,255,255,.9),transparent 60%),radial-gradient(ellipse 60% 50% at 0% 100%,rgba(242,196,206,.6),transparent 62%),linear-gradient(150deg,#FDF8F3,#F1DDD4)}



/* lignes de brouillon, dont une raturée */





/* Rencontres : mur de brique + étiquettes */
.card.a-events{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='72'><path d='M0 1H132M0 37H132M1 0V36M67 0V36M34 36V72M100 36V72' fill='none' stroke='rgba(255,246,240,.30)' stroke-width='3'/></svg>"),radial-gradient(ellipse 60% 50% at 14% 8%,rgba(250,214,196,.7),transparent 60%),linear-gradient(150deg,#E8A882,#EE96A6)}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:9px 8px;margin:16px 0 18px}
.tags li{font:400 clamp(15px,1.25vw,19px)/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;padding:9px 14px;border-radius:99px;background:var(--noir);color:var(--creme);box-shadow:0 0 0 3px rgba(253,246,240,.9),0 6px 14px rgba(60,20,20,.22)}
.tags li:nth-child(1){transform:rotate(-3deg)}
.tags li:nth-child(2){transform:rotate(2deg);background:var(--creme);color:var(--choco)}
.tags li:nth-child(3){transform:rotate(-1.500deg);background:var(--framboise)}
.tags li:nth-child(4){transform:rotate(3deg);background:var(--bordeaux)}
.card.a-events p,.card.a-events h3{text-shadow:0 0 14px rgba(240,170,150,.9)}

/* Book Club : cadrage resserré, tout tient dans l'écran à l'arrivée */
.bc{min-height:calc(100svh - 71px);padding-block:clamp(22px,4.5vh,60px)}
.bc .cols{align-items:center}
.bc h1{font-size:clamp(54px,min(7vw,15vh),132px);margin-block:4px clamp(10px,2vh,20px)}
.bc .serif{font-size:clamp(19px,min(1.9vw,3.6vh),28px)}
.infos{margin-top:clamp(16px,3.2vh,32px);gap:clamp(10px,1.8vh,16px)}
.infos dd{font-size:clamp(18px,min(1.75vw,3.5vh),27px)}
.ticket{padding:clamp(18px,3.2vh,32px) clamp(20px,2.4vw,32px);gap:clamp(6px,1.2vh,10px)}
.ticket .hw{margin-bottom:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(6px,1.2vh,12px) 14px}
.fields .f{display:grid;gap:6px;min-width:0}
.ticket .fields input{margin-bottom:0;padding:clamp(10px,1.7vh,14px) 16px}
.ticket .check{font-size:14px;line-height:1.4}
.ticket .btn{margin-top:clamp(4px,1vh,10px)}
@media (max-width:560px){.fields{grid-template-columns:1fr}}
.ticket .fb:empty{display:none}