/* ==========================================================================
   ErasePen · thème « Bullet journal pastel »
   Papier ivoire pointillé, encre bleu nuit, washi tape, stickers et doodles
   ========================================================================== */
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-latin-soft-wonk-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-latin-wght-italic.woff2) format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-wght-normal.woff2) format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url(fonts/nunito-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Caveat';src:url(fonts/caveat-latin-600-normal.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --paper:#FBF7EF; --paper-2:#F5EFE3; --card:#FFFDF8; --dot:#D9D2E3;
  --ink:#2B3452; --ink-soft:#4A5272; --muted:#6E7491; --line:#E7E0D3; --line-2:#D8CFBF;
  --rose:#F6B8C8; --mint:#A8DFC9; --lavender:#CDBDF0; --peach:#FFCBA4; --butter:#FBE38E; --sky:#AED3F2; --coral:#F28B82;
  --rose-l:#FCE3EA; --mint-l:#DFF4EB; --lavender-l:#ECE5FB; --peach-l:#FFEAD9; --butter-l:#FEF5CF; --sky-l:#E1EFFB;
  --f-title:'Fraunces',Georgia,'Times New Roman',serif;
  --f-body:'Nunito','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --f-hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
  --wrap:1200px; --read:760px; --header-h:72px;
  --r:18px; --r-sm:12px;
  --shadow:0 2px 0 rgba(43,52,82,.06),0 14px 30px -18px rgba(43,52,82,.35);
  --shadow-lift:0 3px 0 rgba(43,52,82,.07),0 22px 40px -20px rgba(43,52,82,.42);
  /* alias pour les contenus existants (outils, encadrés) */
  --surface:var(--card); --surface-2:var(--lavender-l); --surface-3:var(--sky-l); --ink-deep:var(--ink); --teal:#5BBF9F; --yellow:#F2C94C; --coral-d:#D9655C; --muted-2:#8D92AA; --shadow-sm:var(--shadow);
  --font-heading:var(--f-title); --font-body:var(--f-body);
}
.c-rose{--c:var(--rose);--cl:var(--rose-l)} .c-mint{--c:var(--mint);--cl:var(--mint-l)} .c-lavender{--c:var(--lavender);--cl:var(--lavender-l)}
.c-peach{--c:var(--peach);--cl:var(--peach-l)} .c-butter{--c:var(--butter);--cl:var(--butter-l)} .c-sky{--c:var(--sky);--cl:var(--sky-l)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-color:var(--paper);background-image:radial-gradient(circle,var(--dot) 1.3px,transparent 1.6px);background-size:22px 22px;background-position:11px 11px}
body.nav-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--coral);text-underline-offset:3px}
a:hover{color:#1B2140}
:focus-visible{outline:3px dashed var(--coral);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 32px,var(--wrap));margin-inline:auto}
.hand{font-family:var(--f-hand);font-weight:600}
.skip{position:absolute;left:-999px;top:8px;z-index:3000;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:10px}
.skip:focus{left:8px}
h1,h2,h3,h4{font-family:var(--f-title);font-weight:650;line-height:1.14;color:var(--ink);letter-spacing:-.01em;font-variation-settings:'SOFT' 100,'WONK' 1}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);margin:.2em 0 .3em}
h2{font-size:clamp(1.6rem,3.3vw,2.25rem)}
h3{font-size:clamp(1.25rem,2.3vw,1.5rem)}
.bp-svg{display:block;width:100%;height:auto;overflow:visible}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--f-body);font-weight:800;font-size:1rem;line-height:1.2;color:var(--ink);text-decoration:none;
  background:var(--rose);border:2.5px solid var(--ink);border-radius:999px;padding:.8rem 1.35rem;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 6px 0 var(--ink);background:#F9C7D4;color:var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn-ghost{background:var(--card)}
.btn-ghost:hover{background:var(--butter-l)}
.btn-sm{padding:.55rem 1rem;font-size:.92rem;box-shadow:0 3px 0 var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.3rem}
.actions.center{justify-content:center}

/* ── En-tête ─────────────────────────────────────────────────────────────── */
/* pas de backdrop-filter : il piégerait le tiroir mobile (position:fixed) dans la hauteur de l'en-tête */
.site-header{position:sticky;top:0;z-index:1000;background:var(--paper);border-bottom:2px dashed var(--line-2)}
.header-in{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand-logo{height:54px;width:auto}
@media (max-width:640px){.brand-logo{height:44px}}
.mascot-img{height:auto;animation:wobble2 4.5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wobble2{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-3deg) translateY(-3px)}40%{transform:rotate(2deg)}60%{transform:rotate(-1deg) translateY(-2px)}}
.brand-word{display:inline-flex;align-items:center;position:relative;gap:.1rem;padding-right:2.4rem}
.brand-pen{width:46px;margin-right:.35rem;transform:translateY(2px)}
.bw-erase{font-family:var(--f-hand);font-size:2.05rem;line-height:1;color:var(--ink);transform:rotate(-3deg) translateY(2px)}
.bw-pen{font-family:var(--f-title);font-weight:700;font-size:1.75rem;line-height:1;font-variation-settings:'SOFT' 100,'WONK' 1}
.bw-trail{position:absolute;right:0;top:50%;display:flex;gap:5px;transform:translateY(-50%)}
.bw-trail i{width:6px;height:6px;border-radius:50%;background:var(--coral);opacity:.85;animation:trail 2.8s ease-in-out infinite}
.bw-trail i:nth-child(2){background:var(--lavender);animation-delay:.25s}.bw-trail i:nth-child(3){background:var(--mint);animation-delay:.5s}
@keyframes trail{0%,60%,100%{opacity:.9;transform:scale(1)}30%{opacity:.15;transform:scale(.4)}}
.nav{margin-left:auto}
.nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.2rem}
.nav a{display:block;padding:.45rem .8rem;border-radius:999px;font-weight:700;font-size:.97rem;text-decoration:none;color:var(--ink);position:relative}
.nav a:hover{background:var(--lavender-l)}
.nav li.active>a{background:var(--butter)}
.nav .nav-cta{display:none}
.header-cta{flex-shrink:0}
.burger{display:none;width:46px;height:46px;border-radius:14px;border:2.5px solid var(--ink);background:var(--card);box-shadow:0 3px 0 var(--ink);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto}
.burger span{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-scrim{display:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
@media (max-width:1020px){
  .header-cta{display:none}
  .burger{display:flex}
  .nav{position:fixed;z-index:1001;top:0;right:0;bottom:0;width:min(86vw,360px);margin:0;background:var(--paper);
    background-image:radial-gradient(circle,var(--dot) 1.3px,transparent 1.6px);background-size:22px 22px;
    border-left:2.5px solid var(--ink);padding:calc(var(--header-h) + 1rem) 1.3rem 2rem;transform:translateX(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);overflow-y:auto;visibility:hidden}
  .nav.open{transform:none;visibility:visible;box-shadow:-20px 0 50px -20px rgba(43,52,82,.4)}
  .nav ul{flex-direction:column;align-items:stretch;gap:.35rem}
  .nav a{font-size:1.12rem;padding:.75rem 1rem;border-radius:14px;background:var(--card);border:2px solid var(--line)}
  .nav .nav-cta{display:block;margin-top:.8rem}
  .nav .nav-cta .btn{width:100%}
  .nav-scrim{display:block;position:fixed;inset:0;z-index:999;background:rgba(43,52,82,.35);opacity:0;pointer-events:none;transition:opacity .3s}
  .nav-scrim.open{opacity:1;pointer-events:auto}
  .burger{position:relative;z-index:1002}
}

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.88rem;color:var(--muted);padding:.7rem 0 .2rem}
.crumbs a{color:var(--ink-soft);text-decoration:none;font-weight:700}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--coral);font-size:.7rem}
.crumbs span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(60vw,560px)}

/* ── Bandeaux (image derrière le H1) ─────────────────────────────────────── */
.hero{position:relative;overflow:hidden;isolation:isolate;margin:.6rem 16px 0;border-radius:26px;border:2.5px solid var(--ink);background:var(--card);box-shadow:var(--shadow)}
.hero-art{position:absolute;inset:0;z-index:-2}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero.has-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(251,247,239,.97) 0%,rgba(251,247,239,.9) 38%,rgba(251,247,239,.35) 66%,rgba(251,247,239,0) 85%)}
.hero .wrap{width:min(100% - clamp(36px,6vw,96px),var(--wrap))}
.hero-in{position:relative;display:flex;align-items:center;gap:2rem;min-height:inherit;padding:clamp(1.6rem,4vw,3rem) 0}
.hero-text{max-width:640px;position:relative}
.hero-text h1{margin:.15em 0 .25em}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);margin:0;max-width:56ch}
.kicker{font-size:1.5rem;color:var(--ink-soft);margin:0;line-height:1.1;display:inline-flex;align-items:center;gap:.4rem}
.kicker-ico{display:inline-block;width:34px}
.hero-home{min-height:calc(100svh - var(--header-h) - 1.4rem);max-height:820px;display:flex}
.hero-home .hero-in{justify-content:space-between}
.hero-home h1{font-size:clamp(2.3rem,6vw,4.3rem)}
.hero-inner{min-height:clamp(300px,46vh,440px);display:flex}
.hero-inner .hero-in{width:min(100% - 32px,var(--wrap))}
.hero-post h1,.hero-cat h1{font-size:clamp(1.9rem,4.2vw,3rem)}
.hero-legal{min-height:0;background:var(--card)}
.hero-legal .hero-in{padding:1.6rem 0}
.hero-say{display:flex;flex-direction:column;align-items:center;gap:.4rem;max-width:230px;align-self:flex-end;margin-bottom:1rem}
.hero-say .mascot{width:130px}
.bubble{position:relative;background:var(--card);border:2.5px solid var(--ink);border-radius:20px;padding:.6rem .9rem;font-size:1.35rem;line-height:1.1;text-align:center;box-shadow:0 3px 0 var(--ink);transform:rotate(-2deg)}
.post-meta{display:flex;flex-wrap:wrap;gap:1.1rem;font-size:1.3rem;color:var(--ink-soft);margin:.6rem 0 0}
.tab{display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;background:var(--c,var(--butter));color:var(--ink);border:2px solid var(--ink);border-radius:8px 8px 8px 2px;padding:.22rem .6rem;text-decoration:none}
.tab-lg{font-size:.86rem;padding:.32rem .8rem;box-shadow:0 3px 0 var(--ink)}
.tab-lg:hover{transform:rotate(-2deg)}
.mascot{display:inline-block;width:110px}
.mascot .gm-body{transform-origin:60px 94px;animation:wobble 4.5s ease-in-out infinite}
.mascot .gm-eyes{transform-origin:61px 48px;animation:blink 5s infinite}
@keyframes wobble{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-4deg) translateY(-3px)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg) translateY(-2px)}}
@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@media (max-width:820px){
  .hero{margin:.5rem 10px 0;border-radius:20px}
  .hero.has-img::after{background:linear-gradient(180deg,rgba(251,247,239,.55) 0%,rgba(251,247,239,.88) 45%,rgba(251,247,239,.97) 100%)}
  .hero-img{object-position:65% 30%}
  .hero-home{min-height:calc(100svh - var(--header-h) - 1rem)}
  .hero-home .hero-in{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1rem;padding:1.4rem 0}
  .hero-say{flex-direction:row;align-self:flex-start;max-width:none;margin:0}
  .hero-say .mascot{width:76px}
  .bubble{font-size:1.12rem;text-align:left}
  .hero-inner{min-height:clamp(260px,42vh,360px)}
  .hero-inner .hero-in{align-items:flex-end}
  .actions .btn{flex:1 1 auto}
}

/* ── Stickers flottants ──────────────────────────────────────────────────── */
.fx{position:absolute;inset:0;pointer-events:none;z-index:0}
.fx-i{position:absolute;width:30px;opacity:.9;animation:float 7s ease-in-out infinite}
.fx-1{left:56%;top:12%;width:34px}.fx-2{left:88%;top:18%;animation-delay:-2s}.fx-3{left:74%;top:74%;animation-delay:-4s;width:26px}
.fx-4{left:44%;top:84%;width:24px;animation-delay:-1s}.fx-5{left:94%;top:62%;width:22px;animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(12deg)}}
@media (max-width:1000px){.fx-1,.fx-4,.fx-5{display:none}.fx-2{top:7%;left:90%}.fx-3{top:9%;left:80%}}

/* ── Illustration de secours (page de carnet animée) ─────────────────────── */
.ph{position:absolute;inset:0;background:var(--cl,var(--rose-l));overflow:hidden;
  background-image:radial-gradient(circle,rgba(43,52,82,.14) 1.3px,transparent 1.6px);background-size:22px 22px}
.ph-rose{--cl:var(--rose-l)}.ph-mint{--cl:var(--mint-l)}.ph-lavender{--cl:var(--lavender-l)}.ph-peach{--cl:var(--peach-l)}.ph-butter{--cl:var(--butter-l)}.ph-sky{--cl:var(--sky-l)}
.ph-tape{position:absolute;width:110px;color:var(--lavender)}
.ph-tape-a{right:8%;top:6%;transform:rotate(8deg);color:var(--butter)}
.ph-tape-b{right:30%;bottom:8%;transform:rotate(-6deg);color:var(--mint)}
.ph-lines{position:absolute;right:10%;top:30%;width:34%;display:flex;flex-direction:column;gap:18px}
.ph-lines i{display:block;height:5px;border-radius:4px;background:var(--ink);opacity:.55;transform-origin:left;animation:write 6s ease-in-out infinite}
.ph-lines i:nth-child(2){width:86%;animation-delay:.4s}.ph-lines i:nth-child(3){width:94%;animation-delay:.8s}.ph-lines i:nth-child(4){width:60%;animation-delay:1.2s}
@keyframes write{0%{transform:scaleX(0)}30%,60%{transform:scaleX(1);opacity:.55}75%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
.ph-ico{position:absolute;right:46%;top:24%;width:92px;animation:float 6s ease-in-out infinite}
.ph-pen{position:absolute;right:6%;top:58%;width:150px;animation:penmove 6s ease-in-out infinite}
@keyframes penmove{0%{transform:translateX(-120px)}30%{transform:translateX(0)}60%{transform:translateX(0) rotate(180deg)}75%{transform:translateX(-120px) rotate(180deg)}100%{transform:translateX(-120px)}}
.ph-star{position:absolute;width:28px;animation:float 5s ease-in-out infinite}
.ph-s1{right:22%;top:14%}.ph-s2{right:52%;bottom:16%;animation-delay:-2s}.ph-s3{right:4%;bottom:30%;animation-delay:-3s}
.hero .ph-lines{right:5%;width:24%}
.hero .ph-ico{right:34%}
@media (max-width:1000px){.hero .ph-lines,.hero .ph-pen{display:none}.hero .ph-ico{right:6%;top:10%;width:70px}}
.frame .ph-lines,.frame .ph-pen{right:8%}
.frame .ph-ico{right:auto;left:10%;width:60px}
.frame .ph-pen{width:96px}

/* ── Lecture ─────────────────────────────────────────────────────────────── */
.layout-read{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--read)) minmax(0,1fr);gap:0 2rem;padding:2.2rem 0 1rem}
.layout-read>.prose{grid-column:2}
.layout-read>.toc{grid-column:3;grid-row:1}
.prose{font-size:1.08rem;max-width:var(--read);margin-inline:auto}
.prose-wide,.prose-intro{max-width:var(--read);margin-inline:auto}
.prose-intro{padding-top:2rem;font-size:1.12rem}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.35rem}
.prose h2{margin:2.6rem 0 1rem;padding-bottom:.1rem;scroll-margin-top:calc(var(--header-h) + 1rem);
  background:linear-gradient(transparent 62%,var(--c,var(--butter)) 62%,var(--c,var(--butter)) 92%,transparent 92%) no-repeat 0 0/0 100%;display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1)}
.prose h2.lit{background-size:100% 100%}
.prose h2::after{content:"";display:block;height:.9rem}
.prose h3{margin:1.8rem 0 .7rem;padding-left:1.7rem;position:relative}
.prose h3::before{content:"";position:absolute;left:0;top:.36em;width:1.05rem;height:1.05rem;border:2.5px solid var(--ink);border-radius:5px;background:var(--c,var(--mint))}
.prose strong{font-weight:800;background:linear-gradient(transparent 58%,rgba(246,184,200,.55) 58%,rgba(246,184,200,.55) 90%,transparent 90%)}
.prose a strong,.prose strong a{background:none}
.prose a{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--coral)}
.prose a:hover{background:var(--butter-l)}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.6rem}
.prose ul li{list-style:none;position:relative;margin:.35rem 0}
.prose ul li::before{content:"";position:absolute;left:-1.45rem;top:.5em;width:.75rem;height:.75rem;border:2px solid var(--ink);border-radius:4px;background:var(--mint)}
.prose table{width:100%;border-collapse:separate;border-spacing:0;margin:1.6rem 0 2rem;font-size:.97rem;background:var(--card);border:2.5px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 4px 0 var(--ink)}
.prose th{background:var(--lavender);text-align:left;padding:.75rem 1rem;font-family:var(--f-title);font-weight:650;font-size:1.02rem;border-bottom:2.5px solid var(--ink)}
.prose td{padding:.7rem 1rem;vertical-align:top;border-bottom:1.5px dashed var(--line-2)}
.prose tr:last-child td{border-bottom:0}
.prose tbody tr:nth-child(even) td{background:rgba(251,227,142,.16)}
.prose td:first-child{font-weight:700;width:38%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose figure{margin:2.2rem 0}
.prose figure.infographic,.prose figure.article-media{position:relative;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:12px;box-shadow:0 5px 0 var(--ink);transform:rotate(-.4deg)}
.prose figure.article-media{transform:rotate(.5deg)}
.prose figure.infographic::before,.prose figure.article-media::before,.prose figure.infographic::after,.prose figure.article-media::after{content:"";position:absolute;width:96px;height:26px;background:var(--butter);opacity:.85;
  -webkit-mask:linear-gradient(#000 0 0);clip-path:polygon(4% 0,96% 4%,100% 22%,96% 40%,100% 60%,96% 80%,98% 100%,3% 96%,0 78%,4% 58%,0 38%,4% 20%)}
.prose figure.infographic::before,.prose figure.article-media::before{left:-18px;top:-12px;transform:rotate(-14deg)}
.prose figure.infographic::after,.prose figure.article-media::after{right:-18px;bottom:-10px;transform:rotate(-12deg);background:var(--mint)}
.prose figure.article-media::before{background:var(--rose)}
.prose figure.article-media::after{background:var(--sky)}
.prose figure svg{display:block;width:100%;height:auto;border-radius:10px}
.prose figure img{border-radius:10px;width:100%}
.prose figcaption{font-family:var(--f-hand);font-size:1.3rem;line-height:1.2;color:var(--ink-soft);text-align:center;margin:.6rem .4rem .1rem}
.prose .article-media.media-missing{display:none}
.ia-pop{transform-box:fill-box;transform-origin:center}
.js figure:not(.in) .ia-pop{opacity:0}
.in .ia-pop{animation:pop .7s cubic-bezier(.3,1.6,.5,1) backwards}
.in .ia-pop:nth-of-type(2){animation-delay:.12s}.in .ia-pop:nth-of-type(3){animation-delay:.24s}.in .ia-pop:nth-of-type(4){animation-delay:.36s}.in .ia-pop:nth-of-type(5){animation-delay:.48s}.in .ia-pop:nth-of-type(6){animation-delay:.6s}
@keyframes pop{from{opacity:0;transform:scale(.6) translateY(10px)}}
.js figure .ia-draw{stroke-dasharray:var(--len,600)}
.js figure:not(.in) .ia-draw{stroke-dashoffset:var(--len,600)}
.in .ia-draw{animation:undraw 1.6s .4s ease backwards}
@keyframes undraw{from{stroke-dashoffset:var(--len,600)}}
@keyframes draw{to{stroke-dashoffset:0}}
.toc{position:relative}
.toc details{position:sticky;top:calc(var(--header-h) + 1.2rem);background:var(--butter-l);border:2.5px solid var(--ink);border-radius:6px 16px 16px 16px;padding:.9rem 1rem 1rem;box-shadow:0 4px 0 var(--ink);transform:rotate(1deg);max-width:290px}
.toc summary{font-family:var(--f-hand);font-size:1.55rem;cursor:pointer;list-style:none;line-height:1}
.toc summary::-webkit-details-marker{display:none}
.toc ol{margin:.7rem 0 0;padding-left:1.2rem;font-size:.92rem;line-height:1.4}
.toc li{margin:.45rem 0}
.toc a{text-decoration:none;font-weight:700;color:var(--ink-soft)}
.toc a:hover,.toc a.on{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral)}
@media (max-width:1200px){
  .layout-read{grid-template-columns:minmax(0,1fr);padding-top:1.6rem}
  .layout-read>.prose,.layout-read>.toc{grid-column:1;grid-row:auto}
  .toc{max-width:var(--read);margin:0 auto 1.4rem;width:100%}
  .toc details{position:static;max-width:none;transform:none}
}
.prose-post>p:first-child{font-size:1.2rem;line-height:1.65}

/* ── Sections, cartes, rubriques ─────────────────────────────────────────── */
.band{padding:3rem 0}
.section-title{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin:0 0 1.6rem;font-size:clamp(1.6rem,3vw,2.2rem)}
.section-title .bp-underline{width:min(320px,70%);height:16px;margin-top:-.2rem}
.section-more{text-align:center;margin:2rem 0 0}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;text-decoration:none;color:var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.card:nth-child(3n+1){transform:rotate(-.6deg)}.card:nth-child(3n+2){transform:rotate(.5deg)}
.card:hover{transform:translateY(-5px) rotate(0);box-shadow:0 10px 0 var(--ink);color:var(--ink)}
.card-tape{position:absolute;width:86px;left:50%;top:-14px;margin-left:-43px;z-index:2;color:var(--c,var(--butter));transform:rotate(-4deg)}
.card-img .frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:15px 15px 0 0;border-bottom:2.5px solid var(--ink)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .frame img{transform:scale(1.04)}
.card-body{display:flex;flex-direction:column;gap:.55rem;padding:1.05rem 1.15rem 1.1rem;flex:1}
.card-body .tab{align-self:flex-start}
.card-title{font-family:var(--f-title);font-weight:650;font-size:1.22rem;line-height:1.22}
.card-exc{font-size:.95rem;color:var(--ink-soft);line-height:1.5}
.card-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:.4rem;border-top:1.5px dashed var(--line-2)}
.card-foot .hand{font-size:1.2rem;color:var(--muted)}
.card-more{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;font-size:.92rem}
.bp-arrow.mini{width:30px;height:16px}
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat-tile{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:1.3rem 1.3rem 1.2rem 1.4rem;background:var(--cl,var(--card));border:2.5px solid var(--ink);border-radius:8px 20px 20px 20px;text-decoration:none;color:var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .2s,box-shadow .2s;overflow:hidden}
.cat-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--c);border-right:2.5px solid var(--ink)}
.cat-tile:hover{transform:translateY(-4px) rotate(-.8deg);box-shadow:0 9px 0 var(--ink);color:var(--ink)}
.cat-ico{width:56px;margin-bottom:.2rem;transition:transform .3s}
.cat-tile:hover .cat-ico{transform:rotate(-10deg) scale(1.08)}
.cat-verb{font-size:1.3rem;color:var(--ink-soft);line-height:1}
.cat-name{font-family:var(--f-title);font-weight:650;font-size:1.35rem;line-height:1.15}
.cat-exc{font-size:.93rem;color:var(--ink-soft);line-height:1.45}
.cat-count{margin-top:.4rem;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.postit{max-width:560px;margin:1rem auto;background:var(--butter);border:2.5px solid var(--ink);padding:1.2rem 1.4rem;transform:rotate(-1.2deg);box-shadow:0 5px 0 var(--ink);font-weight:700}
.postit p{margin:0}
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:2.4rem}
.pagination a,.pagination span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:2.5px solid var(--ink);border-radius:12px;background:var(--card);font-weight:800;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--ink)}
.pagination .current{background:var(--rose)}
.pagination .dots{border:0;box-shadow:none;background:none}

/* ── Appels à l'action, contact ──────────────────────────────────────────── */
.cta-band{padding:2rem 0}
.cta-in{display:flex;align-items:center;gap:1.6rem;background:var(--mint-l);border:2.5px solid var(--ink);border-radius:22px;padding:1.4rem 1.8rem;box-shadow:0 5px 0 var(--ink)}
.cta-in>div{flex:1}
.cta-in p{margin:.2rem 0}
.cta-title{font-family:var(--f-title);font-weight:650;font-size:1.45rem}
.cta-mascot{width:96px;flex-shrink:0}
@media (max-width:720px){.cta-in{flex-direction:column;text-align:center}.cta-in .btn{width:100%}}
.band-contact{scroll-margin-top:var(--header-h)}
.contact-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.4rem;align-items:start}
.contact-text h2{margin:.1rem 0 .8rem}
.contact-text p{color:var(--ink-soft)}
.contact-mascot{width:120px;margin-top:.6rem}
.contact-card{position:relative;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:1.6rem;box-shadow:0 6px 0 var(--ink);
  background-image:repeating-linear-gradient(transparent 0 33px,rgba(174,211,242,.55) 33px 34px)}
.contact-card .card-tape{color:var(--rose)}
@media (max-width:860px){.contact-in{grid-template-columns:1fr}.contact-mascot{display:none}}
.qcms-form-wrap{margin:0}
.qcms-row{display:flex;flex-wrap:wrap;gap:0 1rem}
.qcms-field-group{margin-bottom:1rem;flex:1 1 100%}
.qcms-col-half{flex:1 1 calc(50% - .5rem);min-width:220px}
.qcms-col-third{flex:1 1 calc(33% - .7rem);min-width:160px}
.qcms-label{display:block;font-weight:800;font-size:.95rem;margin-bottom:.3rem}
.qcms-req{color:var(--coral)}
.qcms-input,.qcms-form select,.qcms-form textarea,.qcms-form input[type=text],.qcms-form input[type=email],.qcms-form input[type=tel]{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:12px;padding:.7rem .85rem}
.qcms-form textarea{min-height:140px;resize:vertical}
.qcms-input:focus,.qcms-form select:focus,.qcms-form textarea:focus{outline:none;box-shadow:0 0 0 4px var(--lavender)}
.qcms-checkbox-label,.qcms-radio-label{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;line-height:1.45}
.qcms-checkbox-label input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--ink);flex-shrink:0}
.qcms-field-help{font-size:.82rem;color:var(--muted)}
.qcms-submit{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-weight:800;font-size:1.02rem;color:var(--ink);background:var(--rose);border:2.5px solid var(--ink);border-radius:999px;padding:.8rem 1.5rem;box-shadow:0 4px 0 var(--ink);cursor:pointer;transition:transform .15s,box-shadow .15s}
.qcms-submit:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.qcms-alert{padding:.85rem 1rem;border-radius:12px;border:2px solid var(--ink);margin-bottom:1rem;font-weight:700}
.qcms-alert-success{background:var(--mint-l)}.qcms-alert-error{background:var(--rose-l)}
.qcms-hp{position:absolute!important;left:-9999px!important}

/* ── Pied de page ────────────────────────────────────────────────────────── */
.site-footer{margin-top:3rem;border-top:2.5px solid var(--ink);background:var(--paper-2);position:relative;padding-top:2.4rem}
.footer-tapes{position:absolute;top:-16px;left:0;right:0;display:flex;justify-content:space-around;pointer-events:none}
.footer-tapes span{width:110px}
.footer-tapes span:nth-child(odd){transform:rotate(-5deg)}.footer-tapes span:nth-child(even){transform:rotate(4deg)}
.footer-tapes .bp-svg{color:var(--c)}
.footer-in{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.footer-about{max-width:620px}
.footer-about p{color:var(--ink-soft);font-size:.98rem}
.footer-mascot{width:120px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;border-top:2px dashed var(--line-2);margin-top:1.8rem;padding:1rem 0 1.6rem;font-size:.92rem}
.footer-bottom .hand{font-size:1.3rem}
.footer-legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer-legal a{font-weight:700;text-decoration:none}
.footer-legal a:hover{text-decoration:underline}
@media (max-width:640px){.footer-mascot{display:none}.footer-tapes span:nth-child(n+3){display:none}}

/* ── Barre de lecture, haut de page ──────────────────────────────────────── */
.readbar{position:fixed;left:0;right:0;top:0;height:6px;z-index:1100;pointer-events:none}
.readbar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:repeating-linear-gradient(45deg,var(--rose) 0 10px,var(--lavender) 10px 20px);border-right:2px solid var(--ink)}
.readbar-rider{position:absolute;top:0;left:0;width:30px;transform:translateX(-50%)}
.to-top{position:fixed;right:18px;bottom:18px;z-index:900;width:68px;height:68px;border:0;background:none;padding:0;cursor:pointer;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s,transform .3s}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top .bp-gommette{width:68px}
.to-top-bubble{position:absolute;right:62px;top:-6px;white-space:nowrap;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:.1rem .6rem;font-size:1.15rem;opacity:0;transform:scale(.6);transition:.2s}
.to-top:hover .to-top-bubble,.to-top:focus-visible .to-top-bubble{opacity:1;transform:none}
.to-top:hover .bp-gommette{animation:hop .5s ease}
@keyframes hop{50%{transform:translateY(-10px) rotate(-8deg)}}
.sparkle-burst{position:fixed;width:22px;height:22px;pointer-events:none;z-index:4000;animation:burst .8s ease-out forwards}
@keyframes burst{from{opacity:1;transform:translate(0,0) scale(.6) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(120deg)}}

/* ── Apparitions ─────────────────────────────────────────────────────────── */
.reveal{transition:opacity .6s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.js .reveal:not(.in){opacity:0;translate:0 18px}
/* Titre : le texte reste toujours visible, seul le surligneur se trace dessous */
.ink-in{position:relative;z-index:0}
.ink-in::after{content:"";position:absolute;z-index:-1;left:-.15em;right:-.1em;bottom:.08em;height:.32em;border-radius:.2em;background:var(--c,var(--rose));opacity:.75;transform-origin:left;transform:rotate(-1deg) scaleX(1);animation:marker 1.1s .25s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes marker{from{transform:rotate(-1deg) scaleX(0)}}
.hero-home .ink-in::after{background:var(--butter)}
.js .bp-svg .draw{stroke-dasharray:420;animation:draw420 1.8s .3s ease backwards}
@keyframes draw420{from{stroke-dashoffset:420}to{stroke-dashoffset:0}}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.e404{text-align:center;padding:4rem 0 2rem;max-width:720px}
.e404-art{display:flex;justify-content:center;align-items:center;gap:.6rem}
.e404-num{font-family:var(--f-title);font-weight:800;font-size:clamp(5rem,16vw,9rem);line-height:1;color:var(--lavender);-webkit-text-stroke:3px var(--ink)}
.e404-mascot{width:clamp(110px,20vw,170px)}

/* ── Contenus existants : encadrés, graphiques, FAQ, outils ──────────────── */
.ep-key{margin:2rem 0;padding:1.3rem 1.5rem;background:var(--sky-l);border:2.5px solid var(--ink);border-radius:6px 18px 18px 18px;position:relative;box-shadow:0 4px 0 var(--ink)}
.ep-key::before{content:"✦";position:absolute;top:.8rem;right:1rem;color:var(--coral);font-size:1.3rem}
.ep-key h4{margin:0 0 .6rem;font-family:var(--f-hand);font-size:1.6rem;font-weight:600}
.ep-key ul{margin:0}
.ep-warn{margin:2rem 0;padding:1.2rem 1.4rem 1.2rem 3.4rem;background:var(--peach-l);border:2.5px solid var(--ink);border-radius:18px;position:relative;box-shadow:0 4px 0 var(--ink)}
.ep-warn::before{content:"!";position:absolute;left:1rem;top:1.1rem;width:30px;height:30px;border-radius:50%;background:var(--coral);border:2px solid var(--ink);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center}
.ep-warn h4{margin:0 0 .35rem;font-size:1.1rem}
.ep-warn p:last-child{margin-bottom:0}
.ep-chart,.ep-illus{margin:2.2rem 0;background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:1.2rem;box-shadow:0 5px 0 var(--ink)}
.ep-chart svg{width:100%;height:auto;display:block}
.ep-chart figcaption,.ep-illus figcaption{font-family:var(--f-hand);font-size:1.25rem;color:var(--ink-soft);margin-top:.6rem;text-align:center}
.ep-illus img{border-radius:10px}
.ep-faq{margin:1.4rem 0}
.ep-faq details{background:var(--card);border:2.5px solid var(--ink);border-radius:14px;margin-bottom:.8rem;box-shadow:0 3px 0 var(--ink)}
.ep-faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--f-title);font-weight:650;font-size:1.08rem;display:flex;justify-content:space-between;gap:1rem}
.ep-faq summary::-webkit-details-marker{display:none}
.ep-faq summary::after{content:"+";font-size:1.5rem;line-height:1;transition:transform .2s}
.ep-faq details[open] summary::after{transform:rotate(45deg);color:var(--coral)}
.ep-faq .ans{padding:0 1.2rem 1rem}
.ep-tool{margin:.5rem 0 2.6rem;padding:clamp(1.1rem,3vw,1.8rem);border-radius:22px;background:var(--card);border:2.5px solid var(--ink);box-shadow:0 6px 0 var(--ink);position:relative}
.ep-tool-head{margin-bottom:1.3rem}
.ep-tool-tag{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:var(--butter);border:2px solid var(--ink);padding:.3rem .75rem;border-radius:8px}
.prose .ep-tool-title{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.7rem 0 .4rem;display:block;background:none}
.prose .ep-tool-title::after{display:none}
.ep-tool-sub{color:var(--ink-soft);margin:0}
.ep-tool-note{font-size:.86rem;color:var(--muted);font-style:italic;margin:1.2rem 0 0}
.ep-sim-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:1.4rem}
.ep-sim-paper,.ep-sim-controls,.ep-calc-inputs,.ep-calc-bars,.ep-calc-card{background:var(--paper);border:2px solid var(--ink);border-radius:16px}
.ep-sim-paper{padding:1rem;display:flex;flex-direction:column;gap:.8rem}
.ep-sim-svg{width:100%;height:auto}
.ep-sim-state{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:.9rem;align-self:flex-start;background:var(--lavender-l);border:2px solid var(--ink);padding:.35rem .85rem;border-radius:999px}
.ep-sim-state .dot{width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
.ep-sim-state[data-state='fade'] .dot{background:var(--butter)}.ep-sim-state[data-state='off'] .dot{background:var(--coral)}.ep-sim-state[data-state='cold'] .dot{background:var(--sky)}
.ep-sim-controls{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.ep-sim-thermo{width:70px}
.ep-sim-readout{text-align:center}
.ep-sim-temp{display:block;font-family:var(--f-title);font-size:2rem;font-weight:700;line-height:1}
.ep-sim-hint{font-size:.8rem;color:var(--muted)}
.ep-sim-slider{width:100%}
.ep-sim-ticks{width:100%;display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted)}
.ep-sim-btns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;width:100%}
.ep-btn{font:inherit;font-weight:800;font-size:.9rem;padding:.6rem 1rem;border-radius:999px;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink)}
.ep-btn:hover{transform:translateY(-2px)}
.ep-btn-warm{background:var(--peach)}.ep-btn-cold{background:var(--sky)}
.ep-sim-slider input[type=range],input[type=range].ep-range{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;border:2px solid var(--ink);background:linear-gradient(90deg,var(--sky),var(--mint) 55%,var(--butter) 74%,var(--coral));margin:.4rem 0}
.ep-sim-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--rose);border:2.5px solid var(--ink);cursor:pointer}
.ep-sim-slider input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--rose);border:2.5px solid var(--ink);cursor:pointer}
.ep-calc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:1.4rem;align-items:start}
.ep-calc-inputs{display:flex;flex-direction:column;gap:.9rem;padding:1.1rem}
.ep-field{display:flex;flex-direction:column;gap:.3rem;font-size:.88rem;font-weight:800}
.ep-field input{font:inherit;font-size:1rem;padding:.6rem .8rem;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);width:100%}
.ep-field input:focus{outline:none;box-shadow:0 0 0 4px var(--lavender)}
.ep-calc-out{display:flex;flex-direction:column;gap:1rem}
.ep-calc-bars{padding:1rem;display:flex;justify-content:center}
.ep-calc-bars svg{width:100%;max-width:340px;height:auto}
.ep-calc-cards{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ep-calc-card{padding:.8rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.ep-calc-card.ep-calc-hi{background:var(--mint-l)}
.ep-calc-k{font-size:.78rem;color:var(--ink-soft);font-weight:700}
.ep-calc-v{font-family:var(--f-title);font-size:1.55rem;font-weight:700;line-height:1.1}
.vis-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.ep-sim-grid,.ep-calc-grid{grid-template-columns:1fr}}

/* ── Plan du site (extension) ────────────────────────────────────────────── */
.qpds{--qpds-accent:var(--ink)}

/* ── Accessibilité : réduire les animations ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;translate:none}
  .ia-pop{opacity:1;transform:none}
  .ia-draw,.bp-svg .draw{stroke-dashoffset:0}
  .prose h2{background-size:100% 100%}
}
@media print{
  .site-header,.crumbs,.site-footer,.to-top,.readbar,.nav-scrim,.cta-band,.fx{display:none!important}
  body{background:#fff}
  .hero{border:0;box-shadow:none}
}