/*
Theme Name: GAWDesign Atelier
Theme URI: https://gawdesign.net
Description: Thème enfant de Hello Elementor pour la page d'accueil de GAWDesign — mise en page inspirée de l'anatomie du livre. Design éditorial, couvertures, mise en page et prépresse.
Author: Melodie Joannisse / GAWDesign
Template: hello-elementor
Version: 1.0.1
Text Domain: gawdesign-atelier
*/

/* =========================================================
   NOTE — Ne modifiez ce fichier que pour ajuster le DESIGN.
   Pour changer les TEXTES, ouvrez plutot copy.php.
   ========================================================= */

:root{
  --paper:#FAF5EC;
  --paper-2:#F2E9DA;
  --paper-3:#EADFCC;
  --ink:#16283F;
  --ink-2:#3D5470;
  --navy:#17406B;
  --magenta:#D8175A;
  --magenta-soft:#F0A8C2;
  --gold:#C79A3E;
  --rule:#D9CDB6;
  --muted:#7C8598;
  --disp:'Fraunces',Georgia,serif;
  --disp-w:500;
  --disp-ls:-.018em;
  --body:'Karla',system-ui,sans-serif;
  --maxw:1180px;
  --gut:clamp(20px,5vw,60px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--paper);color:var(--ink);
  font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  position:relative;
}
/* paper grain */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}

/* washes */
.wash{position:absolute;z-index:0;pointer-events:none;filter:blur(46px);opacity:.5}
.wash.m{background:radial-gradient(circle at 40% 40%,rgba(216,23,90,.42),rgba(240,168,194,.16) 55%,transparent 72%)}
.wash.n{background:radial-gradient(circle at 55% 45%,rgba(23,64,107,.34),rgba(23,64,107,.10) 55%,transparent 72%)}
.wash.g{background:radial-gradient(circle at 50% 50%,rgba(199,154,62,.30),transparent 68%)}

h1,h2,h3,.disp{font-family:var(--disp);font-weight:var(--disp-w);color:var(--ink);
  letter-spacing:var(--disp-ls);line-height:1.08;
  font-variation-settings:'wght' var(--disp-w),'SOFT' 45,'WONK' 1}
h1{font-size:clamp(2.8rem,7.4vw,6rem);line-height:1.02}
h2{font-size:clamp(2.05rem,4.3vw,3.35rem)}
h3{font-size:1.42rem;line-height:1.24}
.it{font-style:italic}
em{font-family:var(--disp);font-style:italic;color:var(--magenta)}
p{max-width:62ch}

/* small caps folio style */
.folio{font-family:var(--body);font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);font-weight:500}
.folio.mg{color:var(--magenta)}

/* ornament */
.orn{display:flex;align-items:center;gap:1rem;color:var(--magenta);font-size:.8rem}
.orn::before,.orn::after{content:'';height:1px;background:var(--rule);flex:1}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.15rem 0;transition:.35s;
  border-bottom:1px solid transparent}
header.stuck{background:rgba(250,245,236,.93);backdrop-filter:blur(12px);
  border-bottom-color:var(--rule);padding:.7rem 0}
.hrow{display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.logo{font-family:var(--disp);font-size:1.4rem;letter-spacing:-.01em;color:var(--ink);
  display:flex;flex-direction:column;line-height:1}
.logo b{font-weight:400}
.logo b i{font-style:italic;color:var(--magenta)}
.logo small{font-family:var(--body);font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-top:.42em;font-weight:500}
nav{display:flex;align-items:center;gap:1.9rem}
nav a.nl{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  color:var(--ink-2);position:relative;transition:.22s}
nav a.nl:hover{color:var(--magenta)}
nav a.nl::after{content:'';position:absolute;left:50%;right:50%;bottom:-4px;height:1px;
  background:var(--magenta);transition:.3s}
nav a.nl:hover::after{left:0;right:0}
.lang{display:flex;align-items:center;gap:.15rem;font-size:.72rem;letter-spacing:.1em;font-weight:600}
.lang button{border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;padding:.2em .3em;transition:.2s}
.lang button.on{color:var(--magenta);text-decoration:underline;text-underline-offset:4px}
.lang i{color:var(--rule);font-style:normal}
.ink-btn{font-family:var(--body);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--paper);background:var(--ink);padding:.85em 1.5em;border-radius:100px;
  transition:.3s;display:inline-flex;align-items:center;gap:.6em;border:1px solid var(--ink);cursor:pointer}
.ink-btn:hover{background:var(--magenta);border-color:var(--magenta);transform:rotate(-1.2deg)}
.gh-btn{font-family:var(--body);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--ink);border:1px solid var(--ink);background:none;padding:.85em 1.5em;
  border-radius:100px;transition:.3s;display:inline-flex;align-items:center;gap:.6em;cursor:pointer}
.gh-btn:hover{background:var(--ink);color:var(--paper);transform:rotate(1.2deg)}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:.4em}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink)}

/* ---------- COVER ---------- */
.cover{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:7.5rem 0 4rem;position:relative;overflow:hidden}
.cover .wash.m{width:46vw;height:46vw;top:-8vw;right:-10vw}
.cover .wash.n{width:34vw;height:34vw;bottom:-6vw;left:-9vw}
.cover-inner{text-align:center;position:relative;z-index:2}
.imprint{margin-bottom:clamp(1.8rem,4vh,3rem)}
.imprint .folio{display:block;margin-bottom:.7rem}
.cover h1{margin:0 auto}
.cover h1 .l1{display:block}
.cover h1 .l2{display:block;font-style:italic;color:var(--magenta);margin:.06em 0}
.cover h1 .l3{display:block;font-size:.44em;letter-spacing:.03em;color:var(--ink-2);margin-top:.5em}
.byline{margin-top:clamp(1.8rem,4vh,2.6rem);font-family:var(--disp);font-style:italic;
  font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink-2)}
.byline b{font-style:normal;font-weight:500;color:var(--ink)}
.cover-lead{max-width:52ch;margin:1.6rem auto 0;color:var(--ink-2);font-size:1.02rem}
.cover-cta{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.4rem}
.plates-peek{display:flex;justify-content:center;margin-top:clamp(2.5rem,6vh,4rem);
  position:relative;height:clamp(120px,20vw,210px)}
.plates-peek img{position:absolute;width:clamp(160px,22vw,270px);aspect-ratio:3/2;object-fit:cover;
  border:6px solid var(--paper);box-shadow:0 14px 34px -16px rgba(22,40,63,.45);transition:.5s cubic-bezier(.2,.7,.3,1)}
.plates-peek img:nth-child(1){transform:translateX(-58%) rotate(-6deg)}
.plates-peek img:nth-child(2){transform:translateX(0) rotate(1.5deg);z-index:2}
.plates-peek img:nth-child(3){transform:translateX(58%) rotate(6deg)}
.plates-peek:hover img:nth-child(1){transform:translateX(-72%) rotate(-9deg)}
.plates-peek:hover img:nth-child(3){transform:translateX(72%) rotate(9deg)}

/* ---------- TABLE DES MATIÈRES ---------- */
.toc{padding:clamp(4rem,9vh,6.5rem) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--paper-2);position:relative;overflow:hidden}
.toc .wash.g{width:30vw;height:30vw;top:-10vw;left:30%}
.toc h2{text-align:center;font-size:clamp(1.5rem,2.6vw,2.1rem);font-style:italic;margin-bottom:2.4rem}
.toc ol{list-style:none;max-width:640px;margin:0 auto;counter-reset:t}
.toc li{counter-increment:t;border-bottom:1px dotted var(--rule)}
.toc li:last-child{border-bottom:0}
.toc a{display:flex;align-items:baseline;gap:.9rem;padding:.85em 0;transition:.25s}
.toc a:hover{color:var(--magenta);padding-left:.6rem}
.toc .rn{font-family:var(--disp);font-size:.92rem;color:var(--magenta);width:2.3em;flex-shrink:0}
.toc .nm{font-family:var(--disp);font-size:1.22rem}
.toc .dots{flex:1;border-bottom:1px dotted var(--rule);transform:translateY(-.28em)}
.toc .pg{font-family:var(--disp);font-size:.95rem;color:var(--muted)}

/* ---------- chapter opener ---------- */
section{padding:clamp(5rem,12vh,8.5rem) 0;position:relative;overflow:hidden}
.chap{margin-bottom:clamp(2.6rem,6vh,4.2rem);position:relative;z-index:2}
.chap .top{display:flex;align-items:center;gap:1.1rem;margin-bottom:1.2rem}
.chap .top .rn{font-family:var(--disp);font-style:italic;font-size:1.05rem;color:var(--magenta)}
.chap .top .ln{flex:1;height:1px;background:var(--rule)}
.chap h2 .it{color:var(--magenta)}
.chap .sub{margin-top:1rem;color:var(--ink-2);font-size:1rem;max-width:56ch}

/* ---------- PLATES (work) ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-bottom:2.6rem;align-items:center}
.filters button{font-family:var(--disp);font-size:1.02rem;background:none;border:0;cursor:pointer;
  color:var(--ink-2);padding:.2em 0;position:relative;transition:.22s}
.filters button::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--magenta-soft);opacity:0;transform:scaleX(.4);transition:.28s;z-index:-1}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--magenta);font-style:italic}
.filters button.on::after{opacity:.55;transform:none}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3.4vw,3rem) clamp(1.2rem,2.6vw,2.4rem)}
.plate{background:none;border:0;padding:0;text-align:left;font:inherit;cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.plate.hide{display:none}
.plate .frame{position:relative;background:var(--paper);padding:9px;
  box-shadow:0 12px 30px -18px rgba(22,40,63,.5);transition:.45s cubic-bezier(.2,.7,.3,1)}
.plate:nth-child(3n+1) .frame{transform:rotate(-1.4deg)}
.plate:nth-child(3n+2) .frame{transform:rotate(.9deg)}
.plate:nth-child(3n)   .frame{transform:rotate(-.6deg)}
.plate:hover .frame{transform:rotate(0) translateY(-8px);
  box-shadow:0 26px 48px -22px rgba(216,23,90,.55), 0 0 0 1px rgba(216,23,90,.22)}
.plate .frame img{aspect-ratio:3/2;object-fit:cover;width:100%}
.plate .frame .halo{display:none}
.plate .cap{margin-top:1rem;display:flex;gap:.7rem;align-items:baseline}
.plate .pl{font-family:var(--disp);font-style:italic;font-size:.85rem;color:var(--magenta);flex-shrink:0}
.plate .t{font-family:var(--disp);font-size:1.1rem;line-height:1.25}
.plate .s{display:block;font-size:.79rem;color:var(--muted);margin-top:.25rem;line-height:1.5}
@media(max-width:900px){.plates{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plates{grid-template-columns:1fr}}

/* ---------- SERVICES ---------- */
.serv{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.serv .wash.m{width:26vw;height:26vw;bottom:-8vw;right:-6vw}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
.scol .hd{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.scol .hd .rn{font-family:var(--disp);font-style:italic;color:var(--magenta);font-size:1.15rem}
.scol>p{color:var(--ink-2);font-size:.96rem;margin-bottom:1.8rem}
.scol ul{list-style:none;column-count:1}
.scol li{font-family:var(--disp);font-size:1.02rem;padding:.5em 0;border-bottom:1px dotted var(--rule);
  display:flex;align-items:baseline;gap:.7rem;transition:.22s}
.scol li:hover{color:var(--magenta);padding-left:.4rem}
.scol li::before{content:'❧';font-size:.68rem;color:var(--magenta);opacity:.65}
@media(max-width:820px){.sgrid{grid-template-columns:1fr;gap:3rem}}

/* ---------- METHOD ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.6rem)}
.step{position:relative;padding-top:2.6rem}
.step::before{content:attr(data-rn);position:absolute;top:0;left:0;font-family:var(--disp);
  font-style:italic;font-size:2.1rem;color:var(--magenta);opacity:.55;line-height:1}
.step::after{content:'';position:absolute;top:1.15rem;left:2.6rem;right:-1.3rem;height:1px;
  background:var(--rule)}
.step:last-child::after{display:none}
.step h3{font-size:1.25rem;margin-bottom:.55rem}
.step p{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .step:nth-child(2n)::after{display:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step::after{display:none}}

/* ---------- PROFIL ---------- */
.about{background:var(--ink);color:#D6DEE9;border-top:1px solid var(--rule)}
.about h2,.about h3{color:var(--paper)}
.about .chap .top .ln{background:rgba(255,255,255,.18)}
.about .folio{color:#8FA0B4}
.about .wash.m{width:34vw;height:34vw;top:-6vw;right:-8vw;opacity:.42}
.agrid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.afig{position:relative}
.afig img{border:8px solid rgba(255,255,255,.07);transform:rotate(-2deg);transition:.5s}
.afig:hover img{transform:rotate(0)}
.afig .plnum{position:absolute;bottom:-1.1rem;left:.6rem;font-family:var(--disp);font-style:italic;
  font-size:.85rem;color:var(--magenta)}
.about p{color:#B4C1D0;margin-bottom:1.15rem;font-size:1rem}
.about p.first::first-letter{font-family:var(--disp);font-size:3.4em;line-height:.78;float:left;
  padding:.06em .12em 0 0;color:var(--magenta)}
.sig{margin-top:2.2rem;font-family:var(--disp);font-style:italic;font-size:1.35rem;color:var(--paper)}
.sig span{display:block;font-family:var(--body);font-style:normal;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:#8FA0B4;margin-top:.6rem;font-weight:500}
.marks{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.4rem;padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.15)}
.mark .n{font-family:var(--disp);font-size:2.1rem;color:var(--paper);line-height:1}
.mark .n i{color:var(--magenta);font-style:italic}
.mark .l{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#8FA0B4;margin-top:.4rem;font-weight:500}
@media(max-width:900px){.agrid{grid-template-columns:1fr}.afig{max-width:300px}}

/* ---------- NOTES (testimonials) ---------- */
.notes .tg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.6rem)}
.note{position:relative;padding-top:1.4rem;border-top:1px solid var(--rule)}
.note .fn{font-family:var(--disp);font-style:italic;color:var(--magenta);font-size:.9rem;
  position:absolute;top:-.75rem;left:0;background:var(--paper);padding-right:.7rem}
.note p{font-family:var(--disp);font-size:1.02rem;line-height:1.55;color:var(--ink)}
.note .who{margin-top:1.2rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ink-2)}
.note .who span{display:block;letter-spacing:.1em;font-weight:400;color:var(--muted);
  margin-top:.25rem;text-transform:none;font-size:.8rem;font-family:var(--disp);font-style:italic}
@media(max-width:860px){.notes .tg{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- COLOPHON / contact ---------- */
.colo{background:var(--paper-2);border-top:1px solid var(--rule);position:relative;overflow:hidden}
.colo .wash.n{width:30vw;height:30vw;bottom:-10vw;left:-8vw}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.4rem,5vw,4.5rem)}
.cmail{font-family:var(--disp);font-size:clamp(1.4rem,2.7vw,2.1rem);color:var(--ink);
  display:inline-block;margin-top:1.6rem;position:relative;transition:.25s}
.cmail::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:7px;
  background:var(--magenta-soft);opacity:.5;z-index:-1;transition:.3s}
.cmail:hover{color:var(--magenta)}
.cmail:hover::after{height:100%;opacity:.16}
.socials{display:flex;gap:.7rem;margin-top:2rem}
.socials a{width:42px;height:42px;border:1px solid var(--rule);border-radius:50%;display:grid;
  place-items:center;color:var(--ink);transition:.28s;background:var(--paper)}
.socials a:hover{background:var(--magenta);color:#fff;border-color:var(--magenta);transform:rotate(-8deg)}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1.4rem}
.f-full{grid-column:1/-1}
label{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:.5rem;font-weight:600}
input,select,textarea{width:100%;font-family:var(--disp);font-size:1.02rem;color:var(--ink);
  background:none;border:0;border-bottom:1px solid var(--rule);padding:.55em 0;transition:.25s}
select option{background:var(--paper);font-family:var(--body)}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--magenta)}
textarea{resize:vertical;min-height:86px}
@media(max-width:820px){.cgrid,form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{padding:3rem 0 2rem;border-top:1px solid var(--rule);background:var(--paper)}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
.flinks{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500}
.flinks a{color:var(--ink-2);transition:.2s}
.flinks a:hover{color:var(--magenta)}
.fbot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.4rem;
  padding-top:1.3rem;border-top:1px dotted var(--rule);font-size:.74rem;color:var(--muted)}
.fbot .disp{font-style:italic}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:500;background:rgba(22,40,63,.94);display:none;place-items:center;
  padding:clamp(1rem,4vw,3.2rem);backdrop-filter:blur(3px)}
.lb.open{display:grid}
.lb .sheet{background:var(--paper);padding:clamp(10px,1.4vw,18px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.lb img{max-width:min(1120px,88vw);max-height:70vh;object-fit:contain}
.lb-cap{text-align:center;margin-top:1.2rem;color:var(--paper)}
.lb-cap .t{font-family:var(--disp);font-size:1.4rem}
.lb-cap .s{font-family:var(--disp);font-style:italic;font-size:.9rem;color:var(--magenta-soft);margin-top:.3rem}
.lb-x,.lb-p,.lb-n{position:absolute;background:none;border:1px solid rgba(255,255,255,.28);
  color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  transition:.24s;font-size:1.05rem}
.lb-x:hover,.lb-p:hover,.lb-n:hover{background:var(--magenta);border-color:var(--magenta)}
.lb-x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-p{left:clamp(.5rem,2vw,1.8rem);top:50%;transform:translateY(-50%)}
.lb-n{right:clamp(.5rem,2vw,1.8rem);top:50%;transform:translateY(-50%)}

/* reveal */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}
  .plate .frame,.plate:nth-child(3n+1) .frame,.plate:nth-child(3n+2) .frame,.plate:nth-child(3n) .frame{transform:none}}

@media(max-width:820px){
  nav .nl,nav .ink-btn{display:none}
  .burger{display:flex}
  nav.open{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;
    align-items:flex-start;gap:1.2rem;padding:1.6rem var(--gut);border-bottom:1px solid var(--rule);
    box-shadow:0 20px 40px -26px rgba(22,40,63,.4)}
  nav.open .nl,nav.open .ink-btn{display:inline-flex}
}

/* =========================================================
   Ajouts WordPress (messages du formulaire intégré,
   compatibilité barre d'admin, réglages Hello Elementor)
   ========================================================= */
.gaw-msg{padding:.9rem 1.1rem;margin-bottom:1.6rem;border-left:2px solid var(--magenta);
  background:rgba(216,23,90,.06);font-size:.95rem;max-width:none}
.gaw-msg.err{border-left-color:#B4322B;background:rgba(180,50,43,.07)}
body.admin-bar header{top:32px}
@media screen and (max-width:782px){body.admin-bar header{top:46px}}
body.gaw-atelier .site-header,
body.gaw-atelier .site-footer{display:none}
body.gaw-atelier main{max-width:none;padding:0}
.agrid.no-fig{grid-template-columns:1fr}