/*
Theme Name: alsace.ai — Cigogne
Theme URI: https://alsace.ai
Author: ALSAGO
Author URI: https://alsago.fr
Description: L'affiche comme système. Rot un Wiss — rouge, blanc, noir. Typographie géante, mur d'affiches, radar des modèles, lettre « Le Bretzel ».
Version: 1.0.0
Requires PHP: 7.4
Text Domain: alsaceai-cigogne
*/

/* =========================================================================
   Jetons
   ========================================================================= */
:root{
  --red:#D4121F; --red-deep:#A80C17; --ink:#0D0D0D; --white:#FFFFFF; --chalk:#F2EFEA; --grey:#6B6660; --rule:rgba(13,13,13,.16);
  --display:"Anton","Arial Narrow","Haettenschweiler",Impact,sans-serif;
  --body:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;

  /* compatibilité : variables de l'ancien thème, utilisées en style « inline » dans quelques articles */
  --red-hi:var(--red); --muted:var(--grey); --border:var(--rule); --text:var(--ink); --text-2:#3A3733;
  --bg:var(--chalk); --paper:var(--white); --surface:var(--white); --surface2:#E8E4DD; --primary:var(--red);
  --f-ui:var(--body); --f-editorial:var(--serif); --f-display:var(--display); --f-mono:ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible,.on-red :focus-visible,.top-bar :focus-visible,.foot :focus-visible{outline-color:var(--white)}
.wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.caps{font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.d{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em;margin:0}
.it{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.02em;font-weight:400}
.red{color:var(--red)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--white);padding:10px 14px;z-index:200}
.skip:focus{left:8px;top:8px}
.linklike{all:unset;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linklike:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* curseur inversé (souris uniquement) */
.cur{position:fixed;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--white);mix-blend-mode:difference;pointer-events:none;z-index:300;transform:translate3d(var(--x,-100px),var(--y,-100px),0) scale(var(--s,1));transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0}
.cur.on{opacity:1}
@media (pointer:coarse){.cur{display:none}}

/* =========================================================================
   Barre du haut
   ========================================================================= */
.top-bar{position:sticky;top:0;z-index:100;background:var(--red);color:var(--white);transition:box-shadow .3s}
.admin-bar .top-bar{top:32px}
@media (max-width:782px){.admin-bar .top-bar{top:46px}}
.top-bar.is-stuck{box-shadow:0 4px 0 0 var(--ink)}
.top{display:flex;align-items:center;gap:clamp(12px,3vw,36px);padding-block:14px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:48px;height:48px;mix-blend-mode:multiply;border-radius:50%}
.brand .d{font-size:1.9rem;line-height:1}
.menu{display:flex;gap:clamp(10px,2vw,26px);margin-left:auto;flex-wrap:wrap}
.menu a{position:relative;padding-block:4px}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--white);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.menu a:hover::after,.menu a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.knot{background:var(--ink);color:var(--white);padding:12px 18px;display:inline-flex;gap:10px;align-items:center;border:0;cursor:pointer;box-shadow:6px 6px 0 0 var(--white);transition:transform .2s,box-shadow .2s;flex:none}
.knot:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 0 var(--white)}
.burger{all:unset;display:none;cursor:pointer;width:44px;height:44px;flex:none;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:3px;background:var(--white);transition:transform .3s,opacity .2s,top .3s}
.burger i:nth-child(1){top:13px}.burger i:nth-child(2){top:20px}.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"] i:nth-child(1){top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:20px;transform:rotate(-45deg)}
@media (max-width:980px){
  .burger{display:block}
  .knot{margin-left:auto;padding:10px 14px;box-shadow:4px 4px 0 0 var(--white)}
  .menu{position:fixed;inset:0;z-index:-1;background:var(--red);flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:6px;padding:90px clamp(16px,6vw,48px) 40px;margin:0;transform:translateY(-102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);visibility:hidden}
  .menu.is-open{transform:none;visibility:visible}
  .menu a{font-family:var(--display);font-size:clamp(2.2rem,9vw,3.6rem);letter-spacing:.01em;line-height:1.05;font-weight:400}
  .menu a::after{display:none}
}

/* =========================================================================
   Blocs rouges + colombage
   ========================================================================= */
.on-red{background:var(--red);color:var(--white);position:relative;isolation:isolate}
.on-red::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.13;
  background:
   linear-gradient(90deg,var(--ink) 0 10px,transparent 10px) 0 0/220px 100%,
   linear-gradient(0deg,var(--ink) 0 10px,transparent 10px) 0 0/100% 260px,
   repeating-linear-gradient(55deg,transparent 0 118px,var(--ink) 118px 127px,transparent 127px 440px),
   repeating-linear-gradient(-55deg,transparent 0 118px,var(--ink) 118px 127px,transparent 127px 440px)}
.on-dark{background:var(--ink);color:var(--white)}

/* =========================================================================
   Vignettes : on ne montre que la moitié droite (la photo), pas le titre incrusté
   ========================================================================= */
.ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ink)}
.ph img{position:absolute;right:0;top:50%;height:145%;width:auto;max-width:none;transform:translateY(-46%);transform-origin:100% 50%;filter:grayscale(1) contrast(1.12);transition:filter .5s,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ph--full img{position:static;width:100%;height:100%;object-fit:cover;transform:none}
a:hover .ph img{filter:none;transform:translateY(-46%) scale(1.05)}
a:hover .ph--full img{transform:scale(1.05)}

/* =========================================================================
   Accueil — hero
   ========================================================================= */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;padding-block:clamp(28px,4vw,56px) clamp(56px,8vw,120px)}
.hero h1{font-size:clamp(3rem,7.8vw,7.2rem);margin-top:18px}
.hero h1 span{display:block;overflow:hidden;white-space:nowrap}
.hero h1 span>i{display:block;font-style:normal;animation:up .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n)*110ms)}
.hero h1 .it{font-size:.82em;line-height:1;padding-bottom:.08em;font-style:italic}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.hero p{font-size:clamp(1.05rem,1.5vw,1.3rem);max-width:40ch;margin:clamp(18px,3vw,32px) 0 0}

.poster{display:block;background:var(--white);color:var(--ink);padding:12px 12px 20px;margin:0;transform:rotate(2.2deg);box-shadow:14px 14px 0 0 var(--ink);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;position:relative}
a.poster:hover{transform:rotate(0deg) translate(-4px,-6px);box-shadow:22px 22px 0 0 var(--ink)}
.poster h2{font-size:clamp(1.5rem,2.4vw,2.2rem);margin:14px 4px 0;line-height:1.06}
.poster p{margin:12px 4px 0;color:var(--grey)}
.poster .line{display:flex;justify-content:space-between;gap:12px;margin:12px 4px 0;color:var(--grey)}
.poster--type{padding:34px 26px 24px}
.poster--type h2{font-size:clamp(2rem,3.4vw,3.2rem)}
.poster--still{padding:12px}
.stamp{position:absolute;top:-16px;left:-14px;z-index:2;background:var(--ink);color:var(--white);padding:8px 12px;transform:rotate(-6deg)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.poster{margin:26px 14px 0 6px}}

/* bande défilante */
.band{background:var(--ink);color:var(--white);overflow:hidden;border-block:4px solid var(--ink)}
.band div{display:flex;width:max-content;animation:roll 30s linear infinite}
.band:hover div{animation-play-state:paused}
.band span{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1;padding:14px 0;white-space:nowrap}
.band span::after{content:"◆";color:var(--red);margin-inline:clamp(18px,3vw,40px);font-size:.5em;vertical-align:.35em}
.band span:nth-child(even){font-family:var(--serif);font-style:italic;text-transform:none}
@keyframes roll{to{transform:translateX(-50%)}}

/* =========================================================================
   Sections + mur d'affiches
   ========================================================================= */
.sec{padding-block:clamp(48px,7vw,110px)}
.sec-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,56px)}
.sec-h h2{font-size:clamp(2.6rem,7vw,6rem)}
.sec-h p{margin:0;max-width:38ch;color:var(--grey)}
.on-dark .sec-h p{color:#A9A39B}
.wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,52px) clamp(22px,3vw,40px)}
@media (max-width:980px){.wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.wall{grid-template-columns:1fr}}
.bill{display:flex;flex-direction:column;background:var(--white);padding:10px 10px 18px;box-shadow:8px 8px 0 0 var(--ink);transform:rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;position:relative}
.bill:hover{transform:rotate(0deg) translate(-3px,-5px);box-shadow:14px 14px 0 0 var(--red)}
.bill h3{font-size:1.55rem;line-height:1.06;margin:10px 4px 0;text-wrap:balance}
.bill p{margin:10px 4px 0;font-size:.95rem;color:var(--grey)}
.bill .k{margin:14px 4px 0;color:var(--red)}
.bill.type{background:var(--ink);color:var(--white);padding:26px 22px;justify-content:space-between;gap:18px;min-height:320px}
.bill.type h3{font-size:clamp(1.9rem,2.8vw,2.6rem);margin:0;line-height:1.02}
.bill.type p{color:#BDB8B1;margin-inline:0}
.bill.type .k{margin:0;color:var(--white)}
.bill.type.r{background:var(--red)}
.bill.type.r p{color:#FFE3E5}
.bill.type.r:hover{box-shadow:14px 14px 0 0 var(--ink)}
.more{margin:clamp(28px,4vw,48px) 0 0}
.go{display:inline-flex;gap:10px;align-items:center;border-bottom:3px solid var(--red);padding-bottom:3px;font-weight:700}
.go span{transition:transform .25s}.go:hover span{transform:translateX(8px)}
.on-red .go,.foot .go{border-color:var(--white)}

/* rubriques */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:clamp(16px,4vw,48px);padding:6px clamp(16px,4vw,48px) 26px;scrollbar-width:thin;scrollbar-color:var(--red) transparent;cursor:grab}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.tile{flex:0 0 clamp(250px,30vw,380px);scroll-snap-align:start;aspect-ratio:4/5;padding:24px;display:flex;flex-direction:column;justify-content:space-between;border:2px solid var(--white);transition:background .3s,color .3s,transform .3s;user-select:none;-webkit-user-drag:none}
.tile:hover{background:var(--white);color:var(--ink);transform:translateY(-6px)}
.tile.red{background:var(--red);border-color:var(--red);color:var(--white)}
.tile.red:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
.tile h3{font-size:clamp(2.2rem,4vw,3.4rem);margin-bottom:12px}
.tile p{margin:0;font-size:.98rem;opacity:.85}
.tile .n{font-family:var(--serif);font-style:italic;font-size:1.6rem}

/* radar */
.rows{border-top:3px solid var(--ink)}
.rowm{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) 170px;gap:16px;align-items:center;padding:16px clamp(8px,1.5vw,20px);border-bottom:3px solid var(--ink);position:relative;overflow:hidden;transition:color .35s}
.rowm::before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:0}
.rowm:hover::before{transform:scaleY(1)}
.rowm:hover{color:var(--white)}
.rowm>*{position:relative;z-index:1}
.rowm h3{font-size:clamp(1.7rem,4.2vw,3.6rem)}
.rowm small{display:block;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.65;margin-top:6px}
.rowm .v{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2.1rem);font-variant-numeric:tabular-nums;white-space:nowrap}
.rowm .v em{font-family:var(--body);font-style:normal;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;opacity:.65;display:block}
.lic{border:2px solid currentColor;padding:4px 10px;white-space:nowrap;justify-self:end}
.lic.o{background:var(--ink);color:var(--white);border-color:var(--ink)}
.rowm:hover .lic.o{background:var(--white);color:var(--ink);border-color:var(--white)}
@media (max-width:760px){.rowm{grid-template-columns:1fr 1fr}.rowm>div:first-child{grid-column:1/-1}.lic{justify-self:start;grid-column:1/-1}}

/* mot géant piloté par le défilement */
.slide{overflow:hidden;padding-block:clamp(10px,2vw,24px);border-block:3px solid var(--ink);background:var(--white)}
.slide .d{font-size:clamp(4rem,15vw,14rem);white-space:nowrap;transform:translate3d(calc(var(--sx,0)*-1px),0,0);will-change:transform}
.slide .d b{font-weight:400;color:var(--red)}
.slide .d .it{color:var(--red)}

/* vu d'Alsace */
.local{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.local__lead h3{font-size:clamp(2.6rem,6vw,5.2rem);line-height:.95;margin:14px 0 18px;text-wrap:balance}
.local__lead p{margin:0 0 22px;max-width:48ch}
.also{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.also li{border-bottom:3px solid var(--ink)}
.also a{display:grid;gap:6px;padding:16px 4px;transition:padding .3s,background .3s,color .3s}
.also a:hover{padding-left:16px;background:var(--ink);color:var(--white)}
.also .caps{color:var(--red)}
.also .d{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.06}
.figs{display:grid}
.fig{display:grid;grid-template-columns:minmax(3.4ch,auto) 1fr;gap:20px;align-items:center;padding-block:14px;border-bottom:3px solid var(--ink)}
.fig:first-child{border-top:3px solid var(--ink)}
.fig .d{font-size:clamp(3rem,7vw,5.6rem);color:var(--red);font-variant-numeric:tabular-nums}
.src{display:block;font-size:.74rem;color:var(--grey);margin-top:4px}
.src a{text-decoration:underline}
@media (max-width:860px){.local{grid-template-columns:1fr}}

/* =========================================================================
   Le Bretzel
   ========================================================================= */
.bretzel .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end;padding-block:clamp(56px,8vw,120px)}
.bretzel h2{font-size:clamp(3.6rem,12vw,11rem);margin-top:14px}
.bretzel--inline h2{font-size:clamp(3rem,8vw,7rem)}
.bretzel--inline .wrap{padding-block:clamp(44px,6vw,84px)}
.bretzel p{font-size:1.15rem;max-width:42ch;margin:20px 0 0}
.bretzel-form{display:flex;flex-direction:column;gap:12px}
.box{display:flex;background:var(--white);border:4px solid var(--ink);box-shadow:10px 10px 0 0 var(--ink);transition:box-shadow .2s,transform .2s}
.box:focus-within{transform:translate(-3px,-3px);box-shadow:16px 16px 0 0 var(--ink)}
.box input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);padding:16px;outline:none}
.box button{all:unset;cursor:pointer;background:var(--ink);color:var(--white);padding:0 22px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;white-space:nowrap}
.box button:focus-visible{outline:3px solid var(--white);outline-offset:-6px}
.box button[disabled]{opacity:.6;cursor:progress}
.trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.bretzel .fine{font-size:.85rem;margin:6px 0 0;opacity:.9;max-width:none}
.fine a{text-decoration:underline;text-underline-offset:3px}
.ok{min-height:1.5em;font-weight:700}
@media (max-width:860px){.bretzel .wrap{grid-template-columns:1fr}}

/* =========================================================================
   Article
   ========================================================================= */
.progress{position:fixed;left:0;right:0;top:0;height:5px;z-index:150;pointer-events:none}
.admin-bar .progress{top:32px}
.progress i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.art-head__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;padding-block:clamp(28px,4vw,60px) clamp(48px,6vw,90px)}
.art-head__grid.is-solo{grid-template-columns:minmax(0,1fr)}
.art-head__grid.is-solo>div{max-width:1000px}
.crumbs{margin:0 0 18px}
.crumbs a{border-bottom:2px solid var(--white)}
.art-head h1,.list-head h1{font-size:clamp(2.3rem,5.2vw,4.8rem);line-height:1;text-wrap:pretty}
.chapo{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.25;max-width:46ch;margin:clamp(16px,2.4vw,28px) 0 0}
.byline{display:flex;gap:18px;flex-wrap:wrap;margin:clamp(18px,2.4vw,28px) 0 0}
.byline span+span::before{content:"◆";margin-right:18px;font-size:.6em;vertical-align:.2em}
@media (max-width:900px){.art-head__grid{grid-template-columns:1fr}.art-head .poster{max-width:460px;margin-inline:6px 14px}}

.art{display:grid;grid-template-columns:160px minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:clamp(40px,6vw,88px)}
.art--page{grid-template-columns:minmax(0,1fr)}
.art__side{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:12px;border-top:3px solid var(--ink);padding-top:14px}
.art__side>span{color:var(--grey)}
.art__side a,.art__side button{text-decoration:none;width:max-content;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.art__side a:hover,.art__side button:hover{border-color:var(--red);color:var(--red)}
@media (max-width:900px){.art{grid-template-columns:1fr}.art__side{position:static;flex-direction:row;flex-wrap:wrap;gap:18px;order:2}}

.entry{max-width:68ch;font-size:1.16rem;line-height:1.72;min-width:0}
.art--page .entry{margin-inline:auto}
.entry>*{margin-block:0 1.25em}
.entry>p:first-of-type{font-size:1.28rem;line-height:1.6}
.entry h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.04;margin-block:1.7em .6em;text-wrap:balance}
.entry h3{font-family:var(--body);font-weight:700;font-size:1.35rem;line-height:1.25;margin-block:1.6em .5em}
.entry h4{font-weight:700;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;margin-block:1.5em .4em}
.entry a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px;transition:background .2s,color .2s}
.entry a:hover{background:var(--red);color:var(--white)}
.entry strong,.entry b{color:var(--red);font-weight:700}
.entry em{font-family:var(--serif);font-size:1.08em}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-bottom:.5em}
.entry li::marker{color:var(--red);font-weight:700}
.entry blockquote{margin-inline:0;padding:6px 0 6px 28px;border-left:6px solid var(--red);font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.3}
.entry blockquote p{margin:0 0 .5em}
.entry blockquote cite{font-family:var(--body);font-style:normal;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--grey)}
.entry hr{border:0;border-top:3px solid var(--ink);margin-block:2.4em}
.entry figure{margin-inline:0}
.entry img,.entry video{max-width:100%;height:auto;box-shadow:8px 8px 0 0 var(--ink);background:var(--white)}
.entry figcaption{font-size:.85rem;color:var(--grey);margin-top:14px}
.entry iframe{max-width:100%;border:3px solid var(--ink);background:var(--white)}
.entry pre,.entry code{font-family:var(--f-mono);font-size:.9em}
.entry code{background:#E8E4DD;padding:.1em .35em}
.entry pre{background:var(--ink);color:var(--chalk);padding:18px;overflow-x:auto}
.entry pre code{background:none;padding:0}
.entry .wp-block-table,.entry .table-scroll{overflow-x:auto}
.entry table{border-collapse:collapse;width:100%;font-size:1rem;font-variant-numeric:tabular-nums}
.entry th{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;text-align:left;border-bottom:3px solid var(--ink);padding:10px 12px}
.entry td{border-bottom:1px solid var(--rule);padding:10px 12px;vertical-align:top}
.entry .alignwide,.entry .alignfull{max-width:none}
.entry--nuit{background:var(--ink);color:#EDE8DF;padding:clamp(20px,4vw,52px);box-shadow:12px 12px 0 0 var(--red);max-width:76ch;--text:#EDE8DF;--text-2:#C9C4BB;--muted:#9A948B;--border:rgba(255,255,255,.16);--surface:#17171B;--surface2:#1F1F25;--red-hi:#FF4D5A}
.entry--nuit h2,.entry--nuit h3,.entry--nuit h4{color:var(--white)}
.entry--nuit strong,.entry--nuit b{color:#FF4D5A}
.entry--nuit a{text-decoration-color:#FF4D5A}
.entry--nuit hr{border-color:rgba(255,255,255,.25)}
.entry--nuit th{border-color:rgba(255,255,255,.5)}.entry--nuit td{border-color:rgba(255,255,255,.14)}
.entry--nuit code{background:#1F1F25}
.entry--nuit img,.entry--nuit video{box-shadow:none}
.entry--nuit .tags a{border-color:#EDE8DF}.entry--nuit .tags a:hover{background:#EDE8DF;color:var(--ink)}
.box-local,.box-src{border:3px solid var(--ink);padding:22px 24px;background:var(--white);box-shadow:8px 8px 0 0 var(--ink)}
.box-local{background:var(--ink);color:var(--white);box-shadow:8px 8px 0 0 var(--red)}
.box-local .caps,.box-src .caps{display:block;color:var(--red);margin-bottom:10px}
.box-local p:last-child,.box-src p:last-child{margin-bottom:0}
.box-src{font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:2.4em!important}
.tags a{text-decoration:none;border:2px solid var(--ink);padding:6px 10px;transition:background .2s,color .2s}
.tags a:hover{background:var(--ink);color:var(--white)}
.alsago{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:2px dashed var(--ink);padding:22px 26px;margin-bottom:clamp(48px,7vw,110px)}
.alsago .caps{color:var(--grey)}
.alsago p{margin:8px 0 0;max-width:70ch}

/* =========================================================================
   Listes, pagination, 404
   ========================================================================= */
.list-head .wrap{padding-block:clamp(28px,4vw,60px) clamp(44px,6vw,84px)}
.list-head .chapo{max-width:60ch}
.lost .knot{margin-top:28px}
.empty{font-size:1.2rem}
.pager{margin-top:clamp(36px,5vw,72px)}
.pager ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.pager a,.pager span{display:grid;place-items:center;min-width:48px;height:48px;padding-inline:12px;border:3px solid var(--ink);font-size:.9rem;transition:background .2s,color .2s,transform .2s}
.pager a:hover{background:var(--ink);color:var(--white);transform:translate(-2px,-2px)}
.pager .current{background:var(--red);border-color:var(--red);color:var(--white)}
.pager .dots{border-color:transparent}
.alsai-search{display:flex;flex-direction:column;gap:10px;max-width:520px}

/* =========================================================================
   Pied de page
   ========================================================================= */
.foot{background:var(--ink);color:#BDB8B1;padding-block:clamp(44px,6vw,80px) 28px;font-size:.95rem}
.foot__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.6fr;gap:clamp(24px,4vw,56px)}
.foot .brand{color:var(--white)}
.foot .brand img{mix-blend-mode:normal;background:var(--white)}
.foot__brand p{margin:16px 0 0}
.foot nav{display:flex;flex-direction:column;gap:9px}
.foot nav .caps,.foot__pub .caps{color:var(--white);margin-bottom:6px;display:block}
.foot nav a{width:max-content;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot nav a:hover{color:var(--white);border-color:var(--red)}
.foot__pub{border:1px dashed #4A4640;padding:18px 20px}
.foot__pub p{margin:0 0 14px}
.foot__pub .go{color:var(--white);border-color:var(--red)}
.foot__legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);padding-top:20px;border-top:1px solid #2A2724;font-size:.82rem}
.foot__legal a:hover{color:var(--white)}
@media (max-width:980px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr}}

/* =========================================================================
   Cookies
   ========================================================================= */
.cookie{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:250;max-width:560px;margin-inline:auto;background:var(--white);color:var(--ink);border:4px solid var(--ink);box-shadow:10px 10px 0 0 var(--ink);padding:18px 20px;display:flex;flex-direction:column;gap:14px;font-size:.95rem}
.cookie[hidden]{display:none}
.cookie p{margin:0}
.cookie p a{text-decoration:underline}
.cookie__a{display:flex;gap:10px;justify-content:flex-end}
.cookie button{all:unset;cursor:pointer;padding:10px 16px;border:3px solid var(--ink);transition:background .2s,color .2s}
.cookie button:hover{background:var(--ink);color:var(--white)}
.cookie button.is-yes{background:var(--red);border-color:var(--red);color:var(--white)}
.cookie button.is-yes:hover{background:var(--ink);border-color:var(--ink)}
.cookie button:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* =========================================================================
   Apparitions (armées par le JS, seulement sous la ligne de flottaison)
   ========================================================================= */
.armed.rv{opacity:0;transform:translateY(40px) rotate(var(--r,0deg))}
.armed.rv.in{opacity:1;transform:rotate(var(--r,0deg));transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*80ms)}
.armed.rv.in:hover{transition-delay:0s;transform:rotate(0deg) translate(-3px,-5px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .cur{display:none}
}
@media print{
  .top-bar,.cur,.cookie,.bretzel,.foot,.art__side,.progress,.alsago,.band,.slide{display:none!important}
  body{background:#fff}.on-red{background:#fff;color:#000}.on-red::before{display:none}
}