/* Typical — Journal science, lecture ludique mais dans le design magazine 5197 (papier, encre, bleu encre).
   Teintes ajoutées avec parcimonie : sable, sauge, rose poudré, un corail pour les accents. */
:root{--sable:#eadfcf;--sauge:#d8e2d2;--poudre:#efd6d0;--corail:#e8573c;--ciel:#d6e0f0}
.art-head{max-width:1100px;margin:0 auto;padding:clamp(40px,7vw,100px) var(--m) clamp(18px,3vw,34px)}
.art-head .back{display:inline-block;font-size:15px;font-weight:600;color:var(--accent);margin-bottom:30px;text-decoration:none}
.art-head .back:hover{text-decoration:underline;text-underline-offset:4px}
.art-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6.6vw,98px);line-height:.98;letter-spacing:-.03em;max-width:14ch}
.art-head h1 em{font-style:italic;color:var(--corail)}
.chapeau{margin-top:26px;font-family:var(--serif);font-size:clamp(21px,2.2vw,30px);line-height:1.3;color:var(--soft);max-width:30em}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:28px 0 0}
.chips li{font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;background:var(--sable)}
.chips li:nth-child(2){background:var(--sauge)}.chips li:nth-child(3){background:var(--ciel)}
.art-head .meta{margin-top:22px;font-size:14px;color:var(--soft)}
/* barre de lecture + sommaire */
.lecture{position:fixed;top:64px;left:0;right:0;height:4px;z-index:30;background:transparent}
.lecture i{display:block;height:100%;background:var(--corail);transform-origin:left;transform:scaleX(0)}
.toc{position:sticky;top:64px;z-index:25;display:flex;gap:8px;overflow-x:auto;padding:12px var(--m);background:rgba(245,244,241,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair);scrollbar-width:none}
.toc::-webkit-scrollbar{display:none}
.toc a{flex:none;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);padding:7px 14px;border-radius:999px;border:1px solid var(--hair);transition:background .2s,color .2s}
.toc a:hover,.toc a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* corps */
.art{max-width:1100px;margin:0 auto;padding:0 var(--m) clamp(70px,9vw,140px);font-size:19px;line-height:1.7}
.chap{padding:clamp(44px,6vw,84px) 0 0;scroll-margin-top:120px}
.sh{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2.4vw,32px);align-items:end;margin-bottom:clamp(20px,3vw,36px)}
.sh .num{font-family:var(--serif);font-size:clamp(64px,10vw,150px);line-height:.8;font-weight:500;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.sh .kick{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.sh h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.8vw,56px);line-height:1.02;letter-spacing:-.02em;max-width:18ch}
.squig{display:block;width:96px;height:12px;margin-top:12px;color:var(--corail)}
.prose{max-width:720px}.prose p{margin:1em 0}.prose a,.art a{text-underline-offset:3px}
.art strong,.art b{font-weight:600}
sup.ref{font-size:.65em;line-height:0;margin-left:1px}sup.ref a{text-decoration:none;font-weight:600;color:var(--accent);padding:0 1px}sup.ref a:hover{text-decoration:underline}
.fine{font-size:15px;color:var(--soft)}
/* 01 cartes essentielles */
.ess{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;counter-reset:x}
.ess li{grid-column:span 2;position:relative;padding:26px 24px 24px;display:grid;gap:8px;align-content:start;font-size:17px;line-height:1.5;border-radius:6px;min-height:230px;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.ess li:hover{transform:translateY(-4px) rotate(-.4deg)}
.ess li:nth-child(1){background:var(--sable)}.ess li:nth-child(2){background:var(--sauge)}.ess li:nth-child(3){background:var(--poudre)}
.ess li:nth-child(4){background:var(--ciel);grid-column:span 3}.ess li:nth-child(5){background:var(--stone);grid-column:span 3}
.ess .n{font-family:var(--serif);font-size:48px;line-height:1;color:var(--ink)}
.ess b{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.1;letter-spacing:-.01em}
.ess p{margin:0}
/* 02 vrai ou faux */
.vf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.flip{position:relative;perspective:900px;min-height:290px;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit}
.face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:22px;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1);font-size:16px;line-height:1.45}
.face small{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.face b{font:500 clamp(22px,2vw,28px)/1.1 var(--serif);letter-spacing:-.01em}
.face i{font:600 14px var(--sans);font-style:normal;color:var(--corail)}
.av{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.flip:hover .av{background:var(--stone)}
.ar{transform:rotateY(180deg);justify-content:center}
.ar.faux{background:var(--corail);color:#fff}.ar.vrai{background:var(--sauge)}.ar.nsp{background:var(--sable)}
.ar.faux sup a{color:#fff}
.flip[aria-pressed=true] .av{transform:rotateY(-180deg)}.flip[aria-pressed=true] .ar{transform:rotateY(0)}
.flip:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
/* 03 cycle + citation */
.cycle{margin:1.6em 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;max-width:720px}
.cycle div{padding:16px 14px;border-radius:6px;text-align:center;display:grid;gap:2px}
.cycle .c1{background:var(--sauge)}.cycle .c2{background:var(--sable)}.cycle .c3{background:var(--poudre)}
.cycle b{font-family:var(--serif);font-weight:500;font-size:20px}.cycle span{font-size:14px;color:var(--soft)}
.cycle i{font-style:normal;font-size:22px;color:var(--accent)}
.cycle figcaption{grid-column:1/-1;font-size:15px;color:var(--soft);margin-top:4px}
.pull{margin:2em 0 0;max-width:820px;padding:6px 0 6px 26px;border-left:4px solid var(--corail);font-family:var(--serif);font-size:clamp(24px,2.8vw,38px);line-height:1.2;letter-spacing:-.01em}
.pull sup a{font-family:var(--sans)}
/* 04 gaufre, barres, schéma */
.waffle{margin:2em 0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center;max-width:980px}
.wg{display:grid;grid-template-columns:repeat(23,1fr);gap:5px}
.wg i{aspect-ratio:1;border-radius:50%;background:var(--field-h);transition:transform .3s}
.wg i.on{background:var(--corail);transform:scale(1.35);box-shadow:0 0 0 3px rgba(232,87,60,.22)}
.waffle figcaption{font-family:var(--serif);font-size:clamp(20px,2vw,28px);line-height:1.2}.waffle figcaption b{color:var(--corail);font-size:1.5em}
.bars{margin:2.2em 0;max-width:820px;background:var(--stone);padding:clamp(20px,3vw,34px);border-radius:6px}
.bars .cap{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bars ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;font-size:16px}
.bars .tr{grid-column:1/-1;grid-row:2;height:14px;background:var(--paper);border-radius:99px;overflow:hidden}
.bars .fill{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:99px;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.bars.in .fill{transform:none}
.bars li.hl .fill{background:var(--corail);min-width:8px}.bars li.hl b{color:var(--corail)}
.brow{margin:2.2em 0 0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,3vw,44px);align-items:center;max-width:980px}
.brow svg{width:100%;background:var(--sable);border-radius:6px;padding:14px}
.brow figcaption{font-size:17px;line-height:1.5}
/* 05 causes */
.causes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:1.4em;max-width:980px}
.cause{position:relative;padding:24px;border-radius:6px;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink);display:grid;gap:6px;align-content:start;font-size:17px;line-height:1.5}
.cause:nth-child(2){background:var(--sauge)}.cause:nth-child(3){background:var(--ciel)}.cause:nth-child(4){background:var(--sable)}
.cause.warn{background:var(--poudre)}
.cause h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.1;letter-spacing:-.01em}
.cause p{margin:0}
.tag{display:inline-block;width:max-content;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:var(--ink);color:var(--paper)}
.cause .tag:empty{display:none}
/* 06 verdict */
.verdict{background:var(--ink);color:var(--paper);padding:clamp(24px,4vw,48px);border-radius:6px;max-width:880px;margin-bottom:1.4em}
.verdict .tag{background:var(--corail);color:#fff;margin-bottom:14px}
.verdict p{font-family:var(--serif);font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.01em;margin:0}
.verdict sup a{color:var(--ciel)}
/* 07 étapes */
.todo{list-style:none;padding:0;margin:1em 0 0;display:grid;gap:10px;max-width:820px}
.todo label{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;padding:18px 20px;border-radius:6px;background:var(--stone);cursor:pointer;transition:background .25s;font-size:18px;line-height:1.5}
.todo label:hover{background:var(--sable)}
.todo input{position:absolute;opacity:0}
.todo .box{width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:background .2s}
.todo .box::after{content:"";width:12px;height:7px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .25s}
.todo input:checked + .box{background:var(--corail);border-color:var(--corail)}
.todo input:checked + .box::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.todo input:checked ~ .st{color:var(--soft)}
.todo input:focus-visible + .box{outline:3px solid var(--accent);outline-offset:3px}
/* 08 mythes */
.mythes{display:grid;gap:12px;max-width:980px}
.myth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);border-radius:6px;overflow:hidden;font-size:17px;line-height:1.5}
.myth .on{background:var(--poudre);padding:20px 22px;display:grid;gap:6px;align-content:center}
.myth .on b{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.15;font-style:italic}
.myth .sc{background:var(--sauge);padding:20px 22px;display:grid;gap:6px;align-content:center}
.myth p{margin:0}
.myth small{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
/* 09 médecin */
.doc-box{max-width:820px;padding:clamp(22px,3.4vw,40px);background:var(--ciel);border-radius:6px;border-left:6px solid var(--accent)}
.doc-box p{margin:.6em 0}.doc-box ul{margin:.6em 0;padding-left:1.2em}
.limite{max-width:820px;margin-top:14px;padding:18px 22px;border:1.5px dashed var(--ink);border-radius:6px;font-size:16px;color:var(--soft)}
.limite p{margin:.3em 0}
/* preuves + sources */
.preuves{margin:clamp(40px,6vw,70px) 0 0;border:1.5px solid var(--ink);border-radius:6px;max-width:980px}
.preuves summary{cursor:pointer;padding:18px 22px;font-weight:600;font-size:17px}
.preuves .tabl-wrap{padding:0 22px;overflow-x:auto}.preuves .fine{padding:0 22px 18px}
.art .tabl{font-size:16px}
.lv{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.lv-f{background:var(--sauge)}.lv-m{background:var(--sable)}.lv-w{background:var(--poudre)}
.sources{border-top:1.5px solid var(--ink);margin-top:3em;max-width:820px}
.sources h2{font-family:var(--serif);font-weight:500;font-size:32px;margin:1em 0 .4em}
.sources ol{font-size:15px;line-height:1.55;color:var(--soft);padding-left:1.6em}
.sources li{margin:.8em 0;scroll-margin-top:130px}.sources li:target{background:var(--sable);outline:8px solid var(--sable)}
.sources a{word-break:break-all}
.avis{font-size:14px;color:var(--soft);border-top:1px solid var(--hair);padding-top:18px;margin-top:2em;max-width:820px}
/* index du journal */
.une{display:grid;gap:14px;max-width:880px;padding:clamp(26px,4vw,52px) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-decoration:none}
.une h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.8vw,66px);line-height:1;letter-spacing:-.02em;max-width:16ch}
.une p{max-width:36em;font-size:19px;color:var(--soft)}.une .plus{font-weight:600;color:var(--accent)}
.une:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.page-hero h1 em{font-style:italic;color:var(--corail)}
.bientot{margin-top:clamp(40px,6vw,80px);max-width:880px}
.bientot h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,40px);margin-bottom:12px}
.bientot ul{list-style:none;padding:0}.bientot li{padding:16px 0;border-top:1px solid var(--hair);font-size:19px}.bientot li span{display:block;font-size:15px;color:var(--soft)}
/* apparition douce */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (max-width:900px){.ess li,.ess li:nth-child(4),.ess li:nth-child(5){grid-column:span 3}.vf{grid-template-columns:1fr 1fr}.causes,.brow,.waffle{grid-template-columns:1fr}.myth{grid-template-columns:1fr}.wg{grid-template-columns:repeat(23,1fr)}}
@media (max-width:560px){.ess li,.ess li:nth-child(n){grid-column:1/-1;min-height:0}.vf{grid-template-columns:1fr}.flip{min-height:230px}.art{font-size:18px}.cycle{grid-template-columns:1fr}.cycle i{transform:rotate(90deg);justify-self:center}.sh{grid-template-columns:1fr}.sh .num{font-size:64px}.wg{gap:3px}}
@media (prefers-reduced-motion:reduce){.face,.fill{transition:none}.js .rv{opacity:1;transform:none;transition:none}.bars .fill{transform:none}}