:root{--fond:#FFFFFF;--fond-2:#F6F0FB;--encre:#1E0F30;--mu:#5E4B73;--violet:#7A2BC2;--violet-f:#4E1590;--vert:#76E02F;--vert-f:#2F7D0C;--jaune:#FFD84D;--ligne:#E6DAF0;--carte:#FFFFFF;
 --titre:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;--texte:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--fond:#150A22;--fond-2:#21103A;--encre:#F7F0FB;--mu:#C9B8D9;--violet:#A866EE;--violet-f:#4E1590;--vert-f:#8DEB4E;--ligne:#3B2552;--carte:#21103A;color-scheme:dark}}
:root[data-theme="dark"]{--fond:#150A22;--fond-2:#21103A;--encre:#F7F0FB;--mu:#C9B8D9;--violet:#A866EE;--violet-f:#4E1590;--vert-f:#8DEB4E;--ligne:#3B2552;--carte:#21103A;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font:400 18px/1.6 var(--texte);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--vert);outline-offset:3px;border-radius:8px}
img,svg{max-width:100%;display:block}
h1,h2,h3,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.w{max-width:1240px;margin-inline:auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.lecture{position:fixed;top:0;left:0;height:4px;width:100%;background:var(--vert);transform-origin:left;transform:scaleX(0);z-index:60}

/* barre du haut */
.barre{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--fond) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne)}
.barre .w{display:flex;align-items:center;gap:10px 22px;padding-block:10px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 25px/1 var(--titre);letter-spacing:-.02em}
.logo svg{width:40px;height:40px}
.logo small{font:600 13px/1 var(--texte);color:var(--mu);display:block;margin-top:3px;letter-spacing:0}
.barre nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.barre nav a{text-decoration:none;font-weight:600;font-size:16px;padding:8px 14px;border-radius:999px}
.barre nav a:hover,.barre nav a[aria-current]{background:var(--fond-2)}
.barre .ed{width:40px;height:40px;border-radius:50%;border:1px solid var(--ligne);display:grid;place-items:center}
.lune{width:18px;height:18px;border-radius:50%;border:2px solid var(--encre);background:linear-gradient(90deg,var(--encre) 50%,transparent 50%);display:block}
.cta{font-weight:700;font-size:16px;text-decoration:none;padding:10px 18px;border-radius:999px;background:var(--vert);color:#150A22;transition:transform .2s}
.cta:hover{transform:translateY(-2px)}

/* couverture */
.couv{position:relative;overflow:hidden;border-radius:36px;margin-top:22px;padding:clamp(26px,4.5vw,60px);color:#fff;background:linear-gradient(135deg,#3F1078 0%,#7A2BC2 55%,#A04EE6 100%);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:30px 44px;align-items:center}
.couv .bulle{position:absolute;border-radius:50%;pointer-events:none;animation:flotte 9s ease-in-out infinite}
.couv .b1{width:260px;height:260px;right:-70px;top:-90px;background:var(--vert);opacity:.9}
.couv .b2{width:150px;height:150px;left:42%;bottom:-70px;background:var(--jaune);animation-delay:-3s}
.couv .b3{width:90px;height:90px;left:-30px;top:38%;background:#fff;opacity:.16;animation-delay:-5s}
@keyframes flotte{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-22px)}}
.couv>div,.couv>figure{position:relative;z-index:1;min-width:0}
.puce{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:7px 14px;border-radius:999px;background:#fff;color:#4E1590;text-decoration:none}
.puce::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vert)}
.couv h1{font:800 clamp(36px,5vw,70px)/1.02 var(--titre);letter-spacing:-.03em;margin:18px 0 16px;text-wrap:balance}
.couv h1 a{text-decoration:none}
.couv .chapeau{font-size:clamp(18px,1.6vw,21px);line-height:1.5;opacity:.92;max-width:34em}
.couv .actions{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;margin-top:24px}
.bouton{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:17px;text-decoration:none;padding:14px 24px;border-radius:999px;background:var(--vert);color:#150A22;transition:transform .2s,box-shadow .2s}
.bouton:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,5,40,.28)}
.bouton i{width:22px;height:22px;border-radius:50%;background:#150A22;position:relative;flex:none}
.bouton i::after{content:"";position:absolute;left:8px;top:6.5px;border-left:7px solid var(--vert);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.temps{font-size:15px;opacity:.85}
.vignette{background:#fff;border-radius:28px;padding:18px;transform:rotate(3deg);box-shadow:0 26px 60px rgba(20,5,40,.35);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.couv:hover .vignette{transform:rotate(0) scale(1.02)}
.vignette svg{width:100%;height:auto}
.enc{fill:#1E0F30}.ver{fill:#7A2BC2}.boo{fill:#76E02F}.pap{fill:#fff}.tr{fill:#1E0F30}
.s-enc{stroke:#1E0F30;fill:none}.s-ver{stroke:#7A2BC2;fill:none}
.oeil{transform-box:fill-box;transform-origin:center;animation:cligne 6s infinite}
@keyframes cligne{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}

/* bandeau de conseils */
.defile{margin:26px 0 6px;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.defile .bande{display:flex;flex:none;animation:defile 55s linear infinite}
.defile:hover .bande,.defile.pause .bande{animation-play-state:paused}
.defile span{flex:none;margin-right:12px;padding:9px 18px;border-radius:999px;background:var(--fond-2);font-weight:600;font-size:15.5px;white-space:nowrap}
.defile span:nth-child(3n+1){background:var(--vert);color:#150A22}
.defile span:nth-child(3n+2){background:var(--jaune);color:#150A22}
@keyframes defile{to{transform:translateX(-50%)}}

/* cartes */
.entete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:38px 0 16px}
.entete h2{font:800 clamp(28px,3.2vw,40px)/1.05 var(--titre);letter-spacing:-.025em}
.entete a{font-weight:700;color:var(--violet)}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.carte{border-radius:28px;padding:26px;min-width:0;position:relative;overflow:hidden;border:1px solid var(--ligne);background:var(--carte);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .7s}
.carte:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(60,20,110,.16)}
.js .carte.attend{opacity:0;transform:translateY(34px)}
.carte h3{font:800 clamp(24px,2.3vw,31px)/1.08 var(--titre);letter-spacing:-.02em;text-wrap:balance}
.carte h3 a{text-decoration:none}
.carte h3 a::after{content:"";position:absolute;inset:0}
.carte p{font-size:16.5px;line-height:1.5}
.etq{font-weight:700;font-size:14px;letter-spacing:.02em;color:var(--violet);margin-bottom:10px;display:block}
.c-art{grid-column:span 4;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:22px;align-items:center;background:var(--fond-2);border-color:transparent}
.c-art .vignette{transform:rotate(-2.5deg);box-shadow:0 14px 30px rgba(60,20,110,.18);padding:12px;border-radius:22px}
.c-art:hover .vignette{transform:rotate(0)}
.c-art p{margin-top:10px;color:var(--mu)}
.c-art .lien{display:inline-block;margin-top:14px;font-weight:700;color:var(--violet)}
.c-conseil{grid-column:span 2;background:var(--jaune);color:#150A22;border-color:transparent}
.c-conseil .etq{color:#150A22}
.c-conseil ol{counter-reset:e;margin-top:12px;display:grid;gap:9px}
.c-conseil li{counter-increment:e;display:grid;grid-template-columns:28px 1fr;gap:8px;font-size:16px;line-height:1.4}
.c-conseil li::before{content:counter(e);width:26px;height:26px;border-radius:50%;background:#150A22;color:var(--jaune);font:800 14px/26px var(--titre);text-align:center}
.c-conseil button{margin-top:16px;font-weight:700;font-size:15.5px;padding:10px 16px;border-radius:999px;background:#150A22;color:#fff;position:relative;z-index:2}
.c-conseil .ok{display:block;font-size:14.5px;margin-top:8px;font-weight:600}
.c-conseil.decoupe{animation:tamponne .5s cubic-bezier(.2,.8,.2,1)}
@keyframes tamponne{40%{transform:scale(.97) rotate(-1deg)}100%{transform:none}}
.c-mot{grid-column:span 2}
.c-mot dfn{font:800 44px/1 var(--titre);font-style:normal;letter-spacing:-.03em;display:block;margin-bottom:8px;color:var(--violet)}
.c-mot p{color:var(--mu)}
.c-avis{grid-column:span 2;background:#1E0F30;color:#fff;border-color:transparent}
.c-avis .etq{color:var(--vert)}
.c-avis .gros{display:flex;align-items:flex-end;gap:10px;margin-bottom:8px}
.c-avis .gros b{font:800 76px/.85 var(--titre);letter-spacing:-.04em}
.c-avis .gros span{font-weight:600;opacity:.8;padding-bottom:4px}
.c-avis q{quotes:"«\00a0" "\00a0»";display:block;font-size:16.5px;line-height:1.5;margin-top:12px}
.c-avis cite{display:block;font-style:normal;font-weight:700;font-size:14.5px;margin-top:8px;opacity:.85}
.c-avis .lien{display:inline-block;margin-top:14px;font-weight:700;color:var(--vert);position:relative;z-index:2}
.etoiles{display:flex;gap:3px}.etoiles svg{width:22px;height:22px}
.etoiles .ver{fill:#FFD84D}.etoiles .s-enc{stroke:none}
.c-annonce{grid-column:span 2;background:linear-gradient(140deg,#7A2BC2,#4E1590);color:#fff;border-color:transparent}
.c-annonce .etq{color:var(--vert)}
.c-annonce p{margin-top:10px;opacity:.92}
.c-annonce .bouton{margin-top:18px;font-size:16px;padding:12px 20px;position:relative;z-index:2}
.c-annonce .tel{display:block;margin-top:12px;font-weight:700}

/* article */
.art-tete{max-width:900px;margin:34px auto 0;text-align:center}
.art-tete .puce{background:var(--fond-2);color:var(--violet)}
.art-tete h1{font:800 clamp(34px,5vw,64px)/1.04 var(--titre);letter-spacing:-.03em;margin:18px 0 16px;text-wrap:balance}
.art-tete .chapeau{font-size:clamp(19px,1.8vw,22px);line-height:1.5;color:var(--mu);max-width:36em;margin-inline:auto}
.art-tete .meta{margin-top:16px;font-size:15px;color:var(--mu);font-weight:600}
.art-couv{margin:30px auto 0;max-width:1000px;border-radius:36px;background:linear-gradient(135deg,#3F1078,#7A2BC2 60%,#A04EE6);padding:clamp(22px,4vw,44px);display:grid;place-items:center;position:relative;overflow:hidden}
.art-couv .vignette{max-width:460px;width:100%;transform:rotate(-2deg)}
.art-couv .bulle{position:absolute;border-radius:50%;animation:flotte 9s ease-in-out infinite}
.art-couv .b1{width:200px;height:200px;right:-60px;top:-70px;background:var(--vert)}
.art-couv .b2{width:120px;height:120px;left:-40px;bottom:-40px;background:var(--jaune);animation-delay:-4s}
.texte{max-width:700px;margin:38px auto 0;font-size:19.5px;line-height:1.7}
.texte>p{margin-top:1em}
.texte>p:first-child{font-size:1.12em;font-weight:500}
.texte h2{font:800 clamp(26px,2.8vw,34px)/1.12 var(--titre);letter-spacing:-.02em;margin-top:1.7em;text-wrap:balance}
.texte ul.pts{margin-top:1em;display:grid;gap:10px}
.texte ul.pts li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:14px 16px;border-radius:16px;background:var(--fond-2);font-size:18px;line-height:1.45}
.texte ul.pts li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--vert);margin-top:2px;box-shadow:inset 0 0 0 6px var(--fond-2),inset 0 0 0 22px #2F7D0C}
.bref{max-width:700px;margin:34px auto 0;border-radius:24px;border:2px solid var(--violet);padding:22px 24px}
.bref h3{font:800 24px/1 var(--titre);margin-bottom:10px;color:var(--violet)}
.bref li{padding:8px 0 8px 30px;position:relative;font-weight:500}
.bref li::before{content:"";position:absolute;left:0;top:.62em;width:16px;height:9px;border-left:3.5px solid var(--vert-f);border-bottom:3.5px solid var(--vert-f);transform:rotate(-45deg)}
.apres{max-width:1000px;margin:38px auto 0}
.apres .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
.apres .c-conseil,.apres .c-mot,.apres .c-annonce,.apres .c-art{grid-column:span 2}
.apres .c-art{grid-template-columns:1fr}

/* avis */
.avis-couv{border-radius:36px;margin-top:22px;padding:clamp(26px,4.5vw,56px);color:#fff;background:linear-gradient(135deg,#1E0F30,#4E1590);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 44px;align-items:center;position:relative;overflow:hidden}
.avis-couv h1{font:800 clamp(34px,4.8vw,64px)/1.04 var(--titre);letter-spacing:-.03em;margin:16px 0 14px;text-wrap:balance}
.avis-couv p{font-size:19px;line-height:1.5;opacity:.92}
.score{background:#fff;color:#1E0F30;border-radius:28px;padding:24px;text-align:center;transform:rotate(2deg)}
.score b{font:800 clamp(86px,10vw,124px)/.85 var(--titre);letter-spacing:-.05em;display:block}
.score .etoiles{justify-content:center;margin:12px 0 8px}.score .etoiles svg{width:30px;height:30px}
.score p{font-size:15.5px;color:#5E4B73;opacity:1}
.mur{columns:3 300px;column-gap:18px;margin-top:22px}
.mur .carte{break-inside:avoid;margin-bottom:18px;display:inline-block;width:100%}
.mur .carte:nth-child(3n+2){background:var(--fond-2);border-color:transparent}
.mur q{quotes:"«\00a0" "\00a0»";display:block;font-size:16.5px;line-height:1.55;margin-top:10px}
.mur cite{display:flex;align-items:center;gap:10px;font-style:normal;font-weight:700;font-size:15px;margin-top:14px}
.mur cite i{width:36px;height:36px;border-radius:50%;background:var(--violet);color:#fff;font:800 16px/36px var(--titre);text-align:center;font-style:normal;flex:none}
.prose{max-width:760px;margin:10px auto 0;font-size:19px;line-height:1.65}
.prose h2{font:800 clamp(26px,2.8vw,34px)/1.12 var(--titre);letter-spacing:-.02em;margin-top:1.6em;text-wrap:balance}
.prose p{margin-top:.8em}
.qr{border-radius:18px;background:var(--fond-2);margin-top:10px;padding:0 20px}
.qr summary{font:700 19px/1.3 var(--titre);padding:16px 34px 16px 0;cursor:pointer;list-style:none;position:relative}
.qr summary::-webkit-details-marker{display:none}
.qr summary::after{content:"+";position:absolute;right:0;top:11px;width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;font:700 22px/29px var(--texte);text-align:center;transition:transform .25s}
.qr[open] summary::after{transform:rotate(45deg)}
.qr p{margin:0;padding-bottom:18px;font-size:17.5px}

.plein{grid-column:1/-1!important;text-align:center}
.plein .bouton{margin-inline:auto}
/* pied */
.pied{margin-top:54px;background:#1E0F30;color:#F7F0FB;border-radius:36px 36px 0 0;padding-block:38px 30px}
.pied .g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:24px 40px}
.pied .logo{color:#fff}.pied .logo small{color:#CDBCDA}
.pied p,.pied li{font-size:15.5px;line-height:1.55;color:#CDBCDA}
.pied h3{font:700 16px/1 var(--texte);color:var(--vert);margin-bottom:10px}
.pied li{padding:3px 0}

@media (max-width:980px){
 .couv,.avis-couv{grid-template-columns:1fr}
 .couv .vignette{max-width:420px}
 .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
 .c-art{grid-column:1/-1}.c-conseil,.c-mot,.c-avis,.c-annonce{grid-column:span 1}
 .pied .g{grid-template-columns:1fr 1fr}.pied .g>*:first-child{grid-column:1/-1}
 .barre nav{order:3;width:100%;margin-left:0}
 .barre .ed{margin-left:auto}
}
@media (max-width:640px){
 body{font-size:17px}
 .couv,.avis-couv,.art-couv{border-radius:26px}
 .bento,.apres .bento{grid-template-columns:1fr}
 .c-art,.c-conseil,.c-mot,.c-avis,.c-annonce,.apres .c-conseil,.apres .c-mot,.apres .c-annonce,.apres .c-art{grid-column:1/-1}
 .c-art{grid-template-columns:1fr}.c-art .vignette{max-width:240px;order:-1}
 .texte{font-size:18.5px}
 .pied .g{grid-template-columns:1fr}
 .cta{display:none}
}
@media (prefers-reduced-motion:reduce){.couv .bulle,.art-couv .bulle,.defile .bande,.oeil{animation:none}.carte,.vignette,.bouton,.cta{transition:none}.js .carte.attend{opacity:1;transform:none}html{scroll-behavior:auto}}

[hidden]{display:none!important}
.evite{position:absolute;left:-999px;top:8px;background:#1E0F30;color:#fff;padding:8px 14px;z-index:99;border-radius:8px}
.evite:focus{left:8px}
.prose.legal{margin-top:34px}
.prose.legal h1{font:800 clamp(34px,4.6vw,56px)/1.05 var(--titre);letter-spacing:-.03em}
/* ---------- logo : Boo en vedette ---------- */
.logo{display:inline-flex;align-items:center;gap:.12em;white-space:nowrap;text-decoration:none;font:800 36px/1 var(--titre);letter-spacing:-.05em;color:var(--encre);padding:4px 0}
.logo svg{width:1.12em;height:1.12em;flex:none;overflow:visible;transform-origin:60% 60%;animation:penche 3.5s ease-in-out infinite alternate}
.logo .anneau{fill:#1E0F30}.logo .manche{stroke:#1E0F30}.logo .verre{fill:#fff}.logo .lentille{fill:#76E02F}
.logo u{text-decoration:none;color:#7A2BC2}
.logo mark{color:inherit;background:linear-gradient(transparent 60%,#76E02F 60% 90%,transparent 90%);padding:0 .06em}
.logo small{display:block;font:700 .3em/1 var(--texte);letter-spacing:0;color:#CDBCDA;margin-top:.5em}
.logo:hover svg{animation-duration:.6s}
:root[data-theme="dark"] .logo u{color:#C9A0F7}
:root[data-theme="dark"] .logo mark{background:linear-gradient(transparent 60%,#4E9A1C 60% 90%,transparent 90%)}
:root[data-theme="dark"] .logo .anneau{fill:#76E02F}:root[data-theme="dark"] .logo .manche{stroke:#55B81E}:root[data-theme="dark"] .logo .lentille{fill:#76E02F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo u{color:#C9A0F7}
 :root:not([data-theme="light"]) .logo mark{background:linear-gradient(transparent 60%,#4E9A1C 60% 90%,transparent 90%)}
 :root:not([data-theme="light"]) .logo .anneau{fill:#76E02F}:root:not([data-theme="light"]) .logo .manche{stroke:#55B81E}}
.logo.grand{font-size:58px;color:#fff}
.logo.grand u{color:#C9A0F7}.logo.grand mark{background:linear-gradient(transparent 60%,#4E9A1C 60% 90%,transparent 90%)}
.logo.grand .anneau{fill:#76E02F}.logo.grand .manche{stroke:#55B81E}
@keyframes penche{0%{transform:rotate(-8deg)}100%{transform:rotate(8deg)}}

/* ---------- articles : cartes et page de tous les articles ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.c-mini{display:grid;gap:10px;align-content:start;padding:18px 18px 22px}
.c-mini .vignette{transform:none;box-shadow:none;background:var(--fond-2);padding:14px 30px;border-radius:18px;margin-bottom:6px;transition:transform .35s}
.c-mini:hover .vignette{transform:scale(1.03)}
.c-mini .etq{margin:0}
.c-mini h3{font-size:clamp(21px,2vw,25px)}
.c-mini p{color:var(--mu);font-size:15.5px}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 20px}
.filtres button{font-weight:700;font-size:15.5px;padding:9px 16px;border-radius:999px;background:var(--fond-2);transition:background .2s,color .2s}
.filtres button[aria-pressed="true"]{background:var(--violet);color:#fff}
.page-tete{margin:38px 0 6px}
.accueil{margin:22px 0 0;display:flex;align-items:center;gap:22px;padding:20px clamp(18px,3vw,30px);border-radius:28px;background:var(--fond-2);border:1px solid var(--ligne)}
.accueil .pastille{flex:0 0 auto;width:68px;height:68px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 4px var(--vert)}
.accueil .pastille svg{width:46px;height:46px}
.accueil .pastille .anneau{fill:#1E0F30}.accueil .pastille .manche{stroke:#1E0F30}.accueil .pastille .verre{fill:#fff}.accueil .pastille .lentille{fill:#76E02F}
.accueil h2{margin:0 0 4px;font:800 clamp(20px,2.2vw,25px)/1.2 var(--titre);letter-spacing:-.02em;color:var(--encre);text-wrap:balance}
.accueil h2 mark{background:linear-gradient(transparent 58%,var(--vert) 58%);color:inherit;padding:0 .08em}
.accueil p{margin:0;font:400 17px/1.55 var(--texte);color:var(--mu);max-width:62em;text-wrap:pretty}
@media (max-width:600px){.accueil{align-items:flex-start;gap:14px;padding:18px}.accueil .pastille{width:50px;height:50px;box-shadow:0 0 0 3px var(--vert)}.accueil .pastille svg{width:34px;height:34px}}
.page-tete h1{font:800 clamp(36px,5vw,64px)/1.04 var(--titre);letter-spacing:-.03em}
.page-tete p{color:var(--mu);font-size:19px;margin-top:10px;max-width:38em}
.vide{color:var(--mu);padding:20px 0}

/* ---------- pied : la rédaction au travail ---------- */
.pied{padding-block:0 30px;overflow:hidden}
.redac{display:block;width:100%;height:clamp(190px,21vw,270px)}
.pied .legende{font:700 15.5px/1.4 var(--texte);color:#CDBCDA;padding:14px 0 26px;border-bottom:1px solid #3B2552;margin-bottom:30px;display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap}
.pied .legende i{width:10px;height:10px;border-radius:50%;background:#76E02F;animation:voyant 1.4s ease-in-out infinite;flex:none}
.pied .legende b{color:#fff}
@keyframes voyant{50%{opacity:.25}}
.redac .lampe{transform-box:view-box;animation:balance 5s ease-in-out infinite alternate}
.redac .l2{animation-delay:-1.6s}.redac .l3{animation-delay:-3.1s}
@keyframes balance{0%{transform:rotate(-2.2deg)}100%{transform:rotate(2.2deg)}}
.redac .lg{transform-box:fill-box;transform-origin:left center;animation:ecrit 3.6s steps(14,end) infinite}
.redac .lg2{animation-delay:.5s}.redac .lg3{animation-delay:1s}.redac .lg4{animation-delay:1.5s}
@keyframes ecrit{0%{transform:scaleX(0)}55%,100%{transform:scaleX(1)}}
.redac .curseur{animation:voyant .8s steps(1) infinite}
.redac .main{transform-box:fill-box;animation:tape .32s ease-in-out infinite alternate}
.redac .m2{animation-delay:-.16s}.redac .m3{animation-duration:.26s}.redac .m4{animation-duration:.26s;animation-delay:-.13s}.redac .m5{animation-duration:.4s}.redac .m6{animation-duration:.4s;animation-delay:-.2s}
@keyframes tape{0%{transform:translateY(0)}100%{transform:translateY(-5px)}}
.redac .tete{transform-box:fill-box;transform-origin:50% 100%;animation:hoche 3.2s ease-in-out infinite alternate}
.redac .t2{animation-delay:-1.1s}.redac .t3{animation-delay:-2.2s}
@keyframes hoche{0%{transform:rotate(-3deg)}100%{transform:rotate(3deg)}}
.redac .vap{animation:vapeur 2.6s ease-in infinite;opacity:0}
.redac .v2{animation-delay:.9s}.redac .v3{animation-delay:1.7s}
@keyframes vapeur{0%{transform:translateY(0);opacity:0}25%{opacity:.7}100%{transform:translateY(-22px);opacity:0}}
.redac .feuille{transform-box:fill-box;transform-origin:center;animation:envol 4.5s ease-out infinite;opacity:0}
.redac .f2{animation-delay:1.5s}.redac .f3{animation-delay:3s}
@keyframes envol{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:1}70%{opacity:1}100%{transform:translate(-190px,-96px) rotate(-38deg);opacity:0}}
.redac .aig{transform-box:view-box;transform-origin:1090px 62px;animation:tourne 40s linear infinite}
.redac .aig2{animation-duration:480s}
@keyframes tourne{to{transform:rotate(360deg)}}
.redac .coursier{animation:traverse 24s linear infinite}
  .redac .coursier>g{animation:saute .5s ease-in-out infinite alternate}
@keyframes traverse{0%{transform:translateX(-90px)}100%{transform:translateX(1290px)}}
@keyframes saute{0%{transform:translateY(0)}100%{transform:translateY(-7px)}}
.redac .del{animation:voyant 1s steps(1) infinite}
.redac .fil-led{animation:led 16s linear infinite}
@keyframes led{0%{transform:translateX(330px)}100%{transform:translateX(-560px)}}
.redac text{font-family:var(--titre);font-weight:800}
@media (prefers-reduced-motion:reduce){.redac *,.logo svg,.pied .legende i{animation:none!important}.redac .vap,.redac .feuille{opacity:.8}.redac .lg{transform:none}}
@media (max-width:640px){.logo{font-size:31px}.logo.grand{font-size:46px}}