/* ============================================================
   ASPB — Feuille de style commune
   Association pour la Sauvegarde du Patrimoine de Belœil
   Police : Newsreader (serif) + IBM Plex Mono
   Fonts (Newsreader + IBM Plex Mono) are enqueued via inc/enqueue.php,
   not @import-ed here — see Migration.md Phase 2.
   ============================================================ */

:root{
    --paper:#FFFFFF;
    --ink:#1A1A18;
    --grey:#66655E;
    --faint:#9A9A90;
    --rule:#1A1A18;
    --hair:#E2E0D8;
    --mark:#B23A1E;
    --stone:#232B33;
    --quarry:#3E6B5E;
    --ochre:#B07A2E;
    --wash:#F7F6F1;
    --wash-blue:#EEF1F1;
  }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:'Newsreader',Georgia,serif;font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,52px)}
.ref{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.ref b{color:var(--mark);font-weight:600}
/* real photo with drawn fallback */
  .ph{position:absolute;inset:0;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .draw{position:absolute;inset:0;width:100%;height:100%}
/* ---- utility strip ---- */
  .strip{background:var(--stone)}
.strip .bar{display:flex;justify-content:space-between;align-items:center;height:38px}
.strip .mono{font-size:.7rem;letter-spacing:.05em;color:#AEB6B2;text-transform:uppercase}
.strip a.mono:hover{color:#fff}
/* ---- masthead ---- */
  .mast{display:flex;justify-content:space-between;align-items:flex-end;padding:24px 0 22px;border-bottom:2px solid var(--rule)}
.brand{display:flex;align-items:flex-end;gap:16px}
.seal{width:52px;height:52px;flex:none;border-radius:50%;background:var(--stone);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Newsreader';font-weight:500;font-size:1.4rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);margin-bottom:2px}
.title-block h1{font-weight:500;font-size:clamp(1.4rem,2.7vw,2rem);line-height:1.04;letter-spacing:-.01em}
.title-block .sub{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-top:7px}
nav{display:flex;gap:24px;align-items:baseline}
nav a{font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{border-color:var(--mark);color:var(--mark)}
.burger{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer}
/* ---- HERO with image ---- */
  .hero{position:relative;border-bottom:2px solid var(--rule);background:var(--stone);overflow:hidden}
.hero .hero-media{position:absolute;inset:0}
.hero-media svg{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,28,.94) 0%,rgba(20,24,28,.8) 42%,rgba(20,24,28,.28) 70%,rgba(20,24,28,.15) 100%)}
.hero-inner{position:relative;padding:74px 0 68px;max-width:640px}
.hero .ref{color:#8FA79C;display:block;margin-bottom:20px}
.hero .ref b{color:#F0A58C}
.hero h2{color:#F3F1EA;font-weight:400;font-size:clamp(2rem,4.3vw,3.2rem);line-height:1.1;letter-spacing:-.015em}
.hero h2 em{font-style:italic;color:#E7C99A}
.hero p{color:#CDD2CD;margin-top:22px;font-size:1.14rem;max-width:50ch}
.hero p .mk{color:#F0A58C;font-style:italic}
.hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.hero-cap{position:absolute;right:clamp(20px,4vw,52px);bottom:14px;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:2}
.btn{font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;padding:12px 20px;border:1px solid var(--ink);transition:all .18s;cursor:pointer;display:inline-block}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.mk{background:var(--mark);color:#fff;border-color:var(--mark)}
.btn.mk:hover{background:#8f2c14}
.hero .btn{border-color:#F3F1EA;color:#F3F1EA}
.hero .btn:hover{background:#F3F1EA;color:var(--stone)}
.hero .btn.mk{background:var(--mark);border-color:var(--mark);color:#fff}
.hero .btn.mk:hover{background:#8f2c14}
/* ---- two museums, equal height ---- */
  .fonds{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--hair)}
.fonds .col{padding:44px 0;display:flex;flex-direction:column}
.fonds .col.left{padding-right:46px;border-right:1px solid var(--hair)}
.fonds .col.right{padding-left:46px}
.entry-ref{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:12px;margin-bottom:18px;border-bottom:2px solid var(--rule)}
.entry-ref .cote{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.06em;color:var(--mark);font-weight:600}
.entry-ref .state{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.fonds .fig{margin-bottom:18px;border:1px solid var(--hair);position:relative;aspect-ratio:16/10;overflow:hidden}
.fonds .fig svg{width:100%;height:100%}
.fonds .fig figcaption{position:absolute;left:0;bottom:0;font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(26,26,24,.82);padding:5px 9px}
.fonds h3{font-weight:500;font-size:1.5rem;line-height:1.14;margin-bottom:4px}
.fonds .loc{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.fonds p{font-size:1.02rem;margin-bottom:16px}
.meta{border-top:1px solid var(--hair);margin-bottom:18px;margin-top:auto}
.meta .m{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hair);font-size:.92rem}
.meta .m span:first-child{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.meta .m span:last-child{text-align:right}
.consult{font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
.consult:hover{color:var(--mark);border-color:var(--mark)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--quarry)}
.dot.off{background:var(--mark)}
/* ---- revue ---- */
  .revue{padding:56px 0;border-bottom:1px solid var(--hair)}
.revue .ref{display:block;margin-bottom:26px}
.revue-grid{display:grid;grid-template-columns:1fr 300px;gap:52px;align-items:start}
.revue h2{font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12;margin-bottom:18px;letter-spacing:-.01em}
.revue h2 em{font-style:italic}
.revue p{font-size:1.08rem;max-width:52ch;margin-bottom:16px}
.revue-actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
/* the last issue, shown as an actual cover */
  .issue{border:1px solid var(--hair)}
.issue .cover{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-bottom:1px solid var(--hair)}
.issue .cover .badge{position:absolute;top:12px;right:12px;font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--mark);color:#fff;padding:4px 8px}
.issue .meta-row{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--hair)}
.issue .meta-row .lab{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.issue .meta-row .val{font-weight:500}
.issue .cta-row{padding:14px 16px}
.issue .cta-row a{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px}
.issue .cta-row a:hover{color:var(--mark);border-color:var(--mark)}
/* ---- project ---- */
  .dossier{padding:56px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:320px 1fr;gap:52px;align-items:start}
.dossier .fig{border:1px solid var(--rule);position:relative;aspect-ratio:4/5;overflow:hidden}
.dossier .fig svg{width:100%;height:100%}
.dossier .fig figcaption{position:absolute;left:14px;bottom:14px;right:14px;font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(26,26,24,.8);padding:6px 10px;line-height:1.5}
.dossier .fig figcaption b{color:#F0A58C}
.dossier .ref{display:block;margin-bottom:16px}
.dossier h2{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;margin-bottom:16px}
.dossier h2 em{font-style:italic}
.dossier p{font-size:1.06rem;max-width:50ch;margin-bottom:14px}
.status-line{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:16px 0;margin:24px 0;display:flex;flex-direction:column;gap:12px;font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey)}
.status-line .lbl{display:flex;justify-content:space-between;align-items:baseline}
.status-line b{color:var(--mark);font-weight:600;font-size:.9rem}
.track{height:7px;background:var(--wash-blue);border:1px solid var(--hair)}
.track i{display:block;height:100%;width:66%;background:var(--quarry)}
/* ---- news ---- */
  .journal{padding:56px 0;border-bottom:2px solid var(--rule)}
.journal .ref{display:block;margin-bottom:22px}
.journal .je{display:grid;grid-template-columns:130px 1fr 30px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--hair);border-top:1px solid var(--hair);margin-top:-1px;transition:padding-left .15s,background .15s}
.journal .je:hover{padding-left:10px;background:var(--wash)}
.journal .je .dt{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mark)}
.journal .je .tx{font-size:1.12rem}
.journal .je .tx small{display:block;font-size:.9rem;color:var(--grey);margin-top:3px;font-style:italic}
.journal .je .ar{font-family:'IBM Plex Mono';color:var(--grey)}
/* ---- join ---- */
  .join-band{background:var(--stone);color:#EDEFEC;border-bottom:2px solid var(--rule)}
.join{padding:56px 0;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
.join .ref{display:block;margin-bottom:14px;color:#8FA79C}
.join .ref b{color:#F0A58C}
.join h2{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;max-width:22ch}
.join h2 em{font-style:italic;color:#E7C99A}
.join p{color:#B9BEB8;margin-top:12px;max-width:46ch;font-size:1.02rem}
.join-actions{display:flex;flex-direction:column;gap:11px}
.join .btn{border-color:#EDEFEC;color:#EDEFEC}
.join .btn:hover{background:#EDEFEC;color:var(--stone)}
.join .btn.mk{background:var(--mark);border-color:var(--mark);color:#fff}
.join .btn.mk:hover{background:#8f2c14}
/* ---- FOOTER ---- */
  footer{background:#171B1F;color:#B7BCB8}
.foot-head{border-bottom:1px solid rgba(255,255,255,.1)}
.foot-head .wrap{padding:32px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand .seal{margin:0;background:#EDEFEC;color:var(--stone);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.foot-brand b{color:#EDEFEC;font-weight:500;font-size:1.15rem;line-height:1.2;display:block}
.foot-brand span{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#7E847F}
.foot-hours{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:#8FA79C;text-align:right;line-height:1.7}
.foot-hours b{color:#EDEFEC}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding:44px 0}
.foot-grid h4{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#7E847F;margin-bottom:16px}
.foot-grid p{color:#9A9F9A;font-size:.95rem;max-width:34ch}
.foot-grid a{display:block;padding:5px 0;font-size:.96rem;color:#B7BCB8}
.foot-grid a:hover{color:#F0A58C}
.foot-contact a{color:#EDEFEC}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';font-size:.7rem;color:#B7BCB8;padding:0}
.foot-social a:hover{border-color:#F0A58C;color:#F0A58C}
.foot-b{border-top:1px solid rgba(255,255,255,.1)}
.foot-b .wrap{padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:#6C716D}
@media(max-width:900px){
    nav{display:none}.burger{display:block}
    .fonds,.revue-grid,.dossier,.join,.foot-grid{grid-template-columns:1fr}
    .hero-inner{max-width:none}
    .hero-scrim{background:linear-gradient(180deg,rgba(20,24,28,.82),rgba(20,24,28,.92))}
    .fonds .col.left{border-right:none;border-bottom:1px solid var(--hair);padding-right:0}
    .fonds .col.right{padding-left:0}
    .revue-grid,.dossier{gap:32px}
    .issue,.dossier .fig{max-width:340px}
    .join{gap:24px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .foot-head .wrap{flex-direction:column;align-items:flex-start}
    .foot-hours{text-align:left}
    .journal .je{grid-template-columns:110px 1fr}.journal .je .ar{display:none}
  }
@media(max-width:540px){
    .mast{flex-direction:column;align-items:flex-start;gap:14px}
    .foot-grid{grid-template-columns:1fr}
    .strip .mono:last-child{display:none}
    .journal .je{grid-template-columns:1fr}
  }
:root{
    --paper:#FFFFFF;--ink:#1A1A18;--grey:#66655E;--faint:#9A9A90;--rule:#1A1A18;
    --hair:#E2E0D8;--mark:#B23A1E;--stone:#232B33;--quarry:#3E6B5E;--ochre:#B07A2E;
    --wash:#F7F6F1;--wash-blue:#EEF1F1;
  }
.strip{background:var(--stone)}
.mast{display:flex;justify-content:space-between;align-items:flex-end;padding:24px 0 22px;border-bottom:2px solid var(--rule)}
nav a:hover,nav a.on{border-color:var(--mark);color:var(--mark)}
.crumb{padding:16px 0;border-bottom:1px solid var(--hair)}
.crumb .mono{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.crumb a:hover{color:var(--mark)}
.crumb .sep{color:var(--faint);margin:0 8px}
/* --- reservation banner --- */
  .resa{background:var(--mark);color:#fff}
.resa .wrap{display:flex;align-items:center;gap:20px;padding:14px 0;flex-wrap:wrap}
.resa .tag{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--mark);padding:5px 10px;font-weight:600;flex:none}
.resa .msg{font-size:1.02rem;flex:1;min-width:240px}
.resa .msg b{font-weight:600}
.resa .act{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid #fff;padding:9px 16px;flex:none;transition:all .18s}
.resa .act:hover{background:#fff;color:var(--mark)}
.phero{position:relative;border-bottom:2px solid var(--rule);background:var(--stone);overflow:hidden}
.phero .phero-media{position:absolute;inset:0}
.phero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-media svg{width:100%;height:100%}
.phero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,24,28,.94),rgba(20,24,28,.78) 45%,rgba(20,24,28,.25) 78%,rgba(20,24,28,.1))}
.phero-inner{position:relative;padding:60px 0 54px;max-width:620px}
.phero .cote{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:#F0A58C;display:block;margin-bottom:16px}
.phero h2{color:#F3F1EA;font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.015em}
.phero h2 em{font-style:italic;color:#E7C99A}
.phero p{color:#CDD2CD;margin-top:18px;font-size:1.12rem;max-width:48ch}
/* phero action buttons (e.g. the project hero) — light on the dark hero, like .hero .btn */
.phero .btn{border-color:#F3F1EA;color:#F3F1EA}
.phero .btn:hover{background:#F3F1EA;color:var(--stone)}
.phero .btn.mk{background:var(--mark);border-color:var(--mark);color:#fff}
.phero .btn.mk:hover{background:#8f2c14}
.phero-cap{position:absolute;right:clamp(20px,4vw,52px);bottom:14px;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:2}
.pract{background:var(--wash);border-bottom:1px solid var(--hair)}
.pract .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.pract .c{padding:22px 24px;border-right:1px solid var(--hair)}
.pract .c:last-child{border-right:none}
.pract .k{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.pract .v{font-size:1.02rem;line-height:1.35}
.pract .v b{font-weight:600}
.pract .v .mono{font-family:'IBM Plex Mono';font-size:.9rem}
.pract .v .flag{color:var(--mark);font-weight:600}
.intro{padding:60px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.25fr);gap:clamp(40px,5vw,72px);align-items:start}
.intro-head{border-top:3px solid var(--mark);padding-top:20px}
.intro .ref{display:block;margin-bottom:18px}
.intro h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.14;margin-bottom:0;letter-spacing:-.01em}
.intro h3 em{font-style:italic}
.intro-body p{font-size:1.08rem;margin-bottom:16px;max-width:60ch}
.intro-body p:first-child{font-size:1.24rem;line-height:1.5;color:var(--ink)}
.intro-body p:last-child{margin-bottom:0}
.intro p .mk{color:var(--mark);font-style:italic}
/* --- GUIDES feature (former workers) --- */
  .guides{background:var(--stone);color:#EDEFEC;border-bottom:2px solid var(--rule)}
.guides .wrap{padding:60px 0;display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:center}
.guides .portrait{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.guides .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.guides .portrait svg{width:100%;height:100%}
.guides .portrait figcaption{position:absolute;left:0;bottom:0;z-index:3;font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:5px 9px}
.guides .ref{color:#F0A58C;display:block;margin-bottom:16px}
.guides h3{font-weight:400;font-size:clamp(1.7rem,3.3vw,2.4rem);line-height:1.12;margin-bottom:18px}
.guides h3 em{font-style:italic;color:#E7C99A}
.guides p{color:#C7CCC7;font-size:1.1rem;max-width:52ch;margin-bottom:16px}
.guides p b{color:#EDEFEC;font-weight:600}
.guides .cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.guides .btn{border-color:#EDEFEC;color:#EDEFEC}
.guides .btn:hover{background:#EDEFEC;color:var(--stone)}
.guides .btn.mk{background:var(--mark);border-color:var(--mark);color:#fff}
.guides .btn.mk:hover{background:#8f2c14}
/* --- what you'll learn (parcours reframed) --- */
  .learn{padding:60px 0;border-bottom:1px solid var(--hair)}
.learn .lead{max-width:60ch;margin-bottom:40px}
.learn .ref{display:block;margin-bottom:16px}
.learn h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;margin-bottom:14px;letter-spacing:-.01em}
.learn h3 em{font-style:italic}
.learn .lead p{font-size:1.1rem;color:var(--grey)}
/* uniform grid — fixes the uneven-image problem */
  .grid-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hair);border:1px solid var(--hair)}
.card{background:var(--paper);display:flex;flex-direction:column}
.card .fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--wash)}
.card .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .4s}
.card:hover .fig img{transform:scale(1.05)}
.card .fig svg{width:100%;height:100%}
.card .fig .no{position:absolute;top:0;left:0;z-index:3;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;background:var(--stone);color:#fff;padding:5px 9px}
.card .body{padding:22px 22px 24px;flex:1;display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.card .tag{font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark);margin-bottom:9px}
.card h4{font-weight:500;font-size:1.22rem;line-height:1.2;margin-bottom:9px}
.card p{color:var(--grey);font-size:.98rem;flex:1}
.card .learn-it{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:.92rem}
.card .learn-it .l{font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:4px}
.card .learn-it .fact{font-style:italic;color:var(--ink)}
.band{background:var(--wash);border-bottom:1px solid var(--hair)}
.band .wrap{padding:52px 0;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.band blockquote{font-weight:400;font-size:clamp(1.35rem,2.6vw,1.9rem);line-height:1.32;max-width:34ch;font-style:italic;color:var(--ink)}
.band blockquote span{color:var(--mark)}
.band .stat-row{display:grid;grid-template-columns:repeat(3,auto);gap:40px}
.band .st b{font-family:'Newsreader';font-weight:500;font-size:2.3rem;display:block;line-height:1}
.band .st span{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-top:6px;display:block}
.plan{padding:60px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.plan h3{font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:16px}
.plan .ref{display:block;margin-bottom:16px}
.tariff{border-top:1px solid var(--hair)}
.tariff .t{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hair);font-size:1rem}
.tariff .t .amt{font-family:'IBM Plex Mono';font-weight:500}
.hours{border-top:1px solid var(--hair)}
.hours .r{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hair);font-size:.98rem}
.hours .r .d{font-family:'IBM Plex Mono';font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.hours .r.closed .val{color:var(--faint)}
.hours .r .val b{color:var(--quarry);font-weight:600}
.plan-note{margin-top:18px;font-size:.95rem;color:var(--grey);font-style:italic}
.plan-note.flag{color:var(--mark);font-style:normal;font-weight:500}
/* --- le saviez-vous : quiz --- */
  .quiz{border-bottom:1px solid var(--hair);background:var(--wash)}
.quiz .wrap{padding:60px 0}
.quiz .head{max-width:60ch;margin-bottom:36px}
.quiz .ref{display:block;margin-bottom:16px}
.quiz h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
.quiz h3 em{font-style:italic}
.quiz .head p{color:var(--grey);font-size:1.08rem}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.q{background:var(--paper);border:1px solid var(--hair);display:flex;flex-direction:column}
.q .qtop{padding:24px 24px 18px;border-bottom:1px solid var(--hair)}
.q .qno{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark);margin-bottom:12px}
.q .qq{font-weight:500;font-size:1.14rem;line-height:1.3}
.q .opts{display:flex;flex-direction:column}
.q .opt{text-align:left;background:none;border:none;border-bottom:1px solid var(--hair);padding:14px 24px;font-family:'Newsreader',serif;font-size:1rem;color:var(--ink);cursor:pointer;display:flex;gap:12px;align-items:baseline;transition:background .15s;width:100%}
.q .opt:last-child{border-bottom:none}
.q .opt .lt{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--faint);flex:none;width:1.1em}
.q .opt:hover:not(:disabled){background:var(--wash)}
.q .opt:disabled{cursor:default}
.q .opt.correct{background:#EAF0EC}
.q .opt.correct .lt{color:var(--quarry);font-weight:600}
.q .opt.wrong{background:#F7ECEA;color:var(--grey)}
.q .opt.wrong .lt{color:var(--mark)}
/* reveal is always in the DOM flow with reserved space, so answering doesn't jump the layout */
  .q .reveal{margin-top:auto;border-top:2px solid var(--rule);background:var(--wash);padding:0 24px;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.q.answered .reveal{max-height:340px;padding:18px 24px 22px}
.q .reveal .verdict{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;font-weight:600}
.q .reveal .verdict.ok{color:var(--quarry)}
.q .reveal .verdict.no{color:var(--mark)}
.q .reveal p{font-size:.96rem;color:var(--ink);line-height:1.5}
.quiz .closer{margin-top:34px;border-top:2px solid var(--rule);padding-top:26px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.quiz .closer p{font-style:italic;color:var(--grey);max-width:52ch;font-size:1.05rem}
.quiz .closer p b{color:var(--ink);font-style:normal;font-weight:600}
@media(max-width:900px){.qgrid{grid-template-columns:1fr}}
footer{background:#171B1F;color:#B7BCB8}
@media(max-width:900px){
    nav{display:none}.burger{display:block}
    .intro,.plan,.foot-grid{grid-template-columns:1fr}
    .guides .wrap{grid-template-columns:1fr}.guides .portrait{max-width:300px}
    .grid-rooms{grid-template-columns:1fr 1fr}
    .pract .grid{grid-template-columns:1fr 1fr}.pract .c:nth-child(2n){border-right:none}
    .phero-inner{max-width:none}.phero-scrim{background:linear-gradient(180deg,rgba(20,24,28,.8),rgba(20,24,28,.92))}
    .band .wrap{flex-direction:column;align-items:flex-start}
    .foot-grid{grid-template-columns:1fr 1fr}
    .foot-head .wrap{flex-direction:column;align-items:flex-start}.foot-hours{text-align:left}
  }
@media(max-width:560px){
    .mast{flex-direction:column;align-items:flex-start;gap:14px}
    .pract .grid{grid-template-columns:1fr}.pract .c{border-right:none;border-bottom:1px solid var(--hair)}
    .grid-rooms{grid-template-columns:1fr}
    .band .stat-row{grid-template-columns:1fr 1fr}.foot-grid{grid-template-columns:1fr}
    .strip .mono:last-child{display:none}
    .resa .act{width:100%;text-align:center}
  }
.btn.sm{font-size:.68rem;padding:9px 14px}
/* ---- masthead feature: the latest issue ---- */
  .feature{border-bottom:2px solid var(--rule);background:var(--wash)}
.feature .wrap{padding:60px 0;display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center}
.feat-cover{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--hair);box-shadow:0 30px 55px -32px rgba(23,22,26,.5)}
.feat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.feat-cover svg{width:100%;height:100%}
.feat-cover .badge{position:absolute;top:12px;right:12px;z-index:3;font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;background:var(--mark);color:#fff;padding:4px 9px}
.feature .ref{display:block;margin-bottom:16px}
.feature h2{font-weight:400;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.08;letter-spacing:-.015em;margin-bottom:8px}
.feature h2 em{font-style:italic}
.feature .issue-no{font-family:'IBM Plex Mono';font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mark);margin-bottom:20px}
.feature .toc{border-top:1px solid var(--hair);margin-bottom:22px;max-width:52ch}
.feature .toc .a{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:1rem}
.feature .toc .a .pg{font-family:'IBM Plex Mono';font-size:.72rem;color:var(--faint);flex:none;padding-top:3px;width:3.4em}
.feature .buy{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.feature .price{font-family:'Newsreader';font-size:1.5rem;font-weight:500}
/* ---- thematic index ---- */
  .themes{padding:64px 0;border-bottom:1px solid var(--hair)}
.themes .head{max-width:60ch;margin-bottom:38px}
.themes .ref{display:block;margin-bottom:16px}
.themes h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
.themes h3 em{font-style:italic}
.themes .head p{color:var(--grey);font-size:1.08rem}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);border:1px solid var(--hair)}
.theme{background:var(--paper);padding:24px 22px 26px;display:flex;flex-direction:column;gap:10px;transition:background .15s;cursor:pointer}
.theme:hover{background:var(--wash)}
.theme .tno{font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
.theme h4{font-weight:500;font-size:1.18rem;line-height:1.2}
.theme p{color:var(--grey);font-size:.94rem;flex:1}
.theme .egs{font-style:italic;color:var(--ink);font-size:.9rem;border-top:1px solid var(--hair);padding-top:10px;margin-top:2px}
.theme .cnt{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
/* ---- the run: browse all issues ---- */
  .browse{padding:64px 0;border-bottom:1px solid var(--hair)}
.browse .head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.browse .head .ref{display:block;margin-bottom:14px}
.browse .head h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.1}
/* search + filter toolbar */
  .toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.toolbar input[type=search]{font-family:'Newsreader',serif;font-size:1rem;padding:11px 16px;border:1px solid var(--hair);background:var(--paper);min-width:220px;color:var(--ink)}
.toolbar input[type=search]:focus{outline:none;border-color:var(--mark)}
.toolbar select{font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);cursor:pointer}
.toolbar .found{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-left:auto}
/* issue grid */
  .issues{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:6px}
.iss{border:1px solid var(--hair);display:flex;flex-direction:column;transition:transform .2s}
.iss:hover{transform:translateY(-3px)}
.iss .cv{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--wash);border-bottom:1px solid var(--hair)}
.iss .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.iss .cv svg{width:100%;height:100%}
.iss .cv .n{position:absolute;top:0;left:0;z-index:3;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.05em;background:var(--stone);color:#fff;padding:4px 8px}
.iss .cv .oos{position:absolute;inset:0;z-index:3;background:rgba(247,246,241,.72);display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.iss .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.iss .bd .th{font-size:.92rem;line-height:1.3;color:var(--ink);flex:1}
.iss .bd .rw{display:flex;justify-content:space-between;align-items:center}
.iss .bd .pr{font-family:'IBM Plex Mono';font-size:.82rem;font-weight:500}
.iss .bd .add{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--ink);padding:6px 10px;cursor:pointer;transition:all .15s}
.iss .bd .add:hover{background:var(--mark);color:#fff;border-color:var(--mark)}
.iss.out .add{border-color:var(--hair);color:var(--faint);pointer-events:none}
.browse .more{margin-top:34px;text-align:center}
.empty{padding:40px 0;text-align:center;color:var(--grey);font-style:italic;display:none}
/* ---- subscribe band ---- */
  .sub-band{background:var(--stone);color:#EDEFEC;border-bottom:2px solid var(--rule)}
.sub-band .wrap{padding:60px 0;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
.sub-band .ref{color:#8FA79C;display:block;margin-bottom:14px}
.sub-band .ref b{color:#F0A58C}
.sub-band h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;max-width:24ch}
.sub-band h3 em{font-style:italic;color:#E7C99A}
.sub-band p{color:#B9BEB8;margin-top:12px;max-width:48ch}
.sub-band .opts{display:flex;flex-direction:column;gap:11px}
.sub-band .btn{border-color:#EDEFEC;color:#EDEFEC}
.sub-band .btn:hover{background:#EDEFEC;color:var(--stone)}
.sub-band .btn.mk{background:var(--mark);border-color:var(--mark);color:#fff}
.sub-band .btn.mk:hover{background:#8f2c14}
@media(max-width:1000px){.issues{grid-template-columns:repeat(3,1fr)}.theme-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
    nav{display:none}.burger{display:block}
    .feature .wrap,.sub-band .wrap{grid-template-columns:1fr}
    .feat-cover{max-width:280px}
    .foot-grid{grid-template-columns:1fr 1fr}
    .foot-head .wrap{flex-direction:column;align-items:flex-start}.foot-hours{text-align:left}
  }
@media(max-width:560px){
    .mast{flex-direction:column;align-items:flex-start;gap:14px}
    .issues{grid-template-columns:1fr 1fr}.theme-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}.strip .mono:last-child{display:none}
    .toolbar .found{margin-left:0;width:100%}
  }


/* neutral image placeholder (replaces drawn SVG stand-ins) */
.img-ph{position:relative;background:var(--wash);overflow:hidden}
.img-ph::after{content:attr(data-cap);position:absolute;left:0;bottom:0;font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);padding:5px 9px;z-index:1}
.img-ph > img{z-index:2}
/* real captions/badges sit ABOVE the loaded photo (img is z-index:2) */
.img-ph figcaption,.img-ph .badge{z-index:3}
/* when a container already has its own caption element, hide the ::after */
.img-ph:has(figcaption)::after,.img-ph:has(.badge)::after,.img-ph:has(.cap)::after,.img-ph:has(.oos)::after{content:none}
/* once a real photo/logo is loaded, drop the "à insérer" placeholder text —
   for object-fit:cover the img hides it anyway, but a contain-fit logo doesn't
   fill the box, so the text would otherwise show alongside the logo */
.img-ph:has(> img)::after{content:none}
.img-ph:has(> img) .ph-label{display:none}

/* hero media placeholders keep their own caption (.hero-cap/.phero-cap); no ::after needed */
.hero-media.img-ph::after,.phero-media.img-ph::after{content:none}
/* hero/phero photo is a full-bleed background: keep it behind the scrim & text
   (overrides .img-ph > img{z-index:2}, which is meant for captioned placeholders) */
.hero .hero-media > img,.phero .phero-media > img{z-index:0}

/* ---- mobile nav toggle (added for the theme: implements the .burger) ----
   The prototype hides nav below 900px and ships a .burger with no handler.
   assets/js/nav.js toggles .is-open; this reveals the nav as a stacked panel. */
@media(max-width:900px){
  .mast{position:relative}
  nav.is-open{display:flex;flex-direction:column;gap:0;align-items:stretch;
    position:absolute;top:100%;left:0;right:0;z-index:50;background:var(--paper);
    border:1px solid var(--hair);border-top:none;
    box-shadow:0 24px 40px -28px rgba(23,22,26,.4)}
  nav.is-open a{padding:14px clamp(20px,4vw,52px);border-bottom:1px solid var(--hair)}
  nav.is-open a:last-child{border-bottom:none}
  .burger[aria-expanded="true"]{color:var(--mark)}
}

/* ---- single article (news / posts) — added for the theme ----
   Long-form typography for single.php; the prototype had no article body. */
.post{max-width:768px;margin:0 auto;padding:56px 0 72px}
/* header */
.post-head{text-align:center;padding-bottom:34px;margin-bottom:36px;border-bottom:1px solid var(--hair);position:relative}
.post-head::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);width:64px;height:3px;background:var(--mark)}
.post-head .ref{display:block;margin-bottom:18px}
.post-title{font-weight:500;font-size:clamp(2rem,4.4vw,3rem);line-height:1.08;letter-spacing:-.02em;max-width:20ch;margin:0 auto}
.post-lead{margin:20px auto 0;font-style:italic;font-size:1.3rem;line-height:1.5;color:var(--grey);max-width:52ch}
.post-byline{margin-top:22px;display:flex;justify-content:center;align-items:center;gap:12px;font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.post-byline .by{color:var(--grey)}
.post-byline .dot-sep{color:var(--hair)}
/* featured image */
.post-media{margin:0 0 40px;border:1px solid var(--hair);position:relative;overflow:hidden}
.post-media img{width:100%;height:auto;display:block}
.post-media figcaption{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:rgba(26,26,24,.82);padding:5px 9px;position:absolute;left:0;bottom:0}
/* body */
.post-body{font-size:1.14rem;line-height:1.7}
.post-body > *{margin-bottom:1.15em}
.post-body > *:last-child{margin-bottom:0}
.post-body > p:first-of-type::first-letter{float:left;font-weight:500;font-size:3.4rem;line-height:.82;padding:6px 12px 0 0;color:var(--mark)}
.post-body h2{font-weight:500;font-size:1.6rem;line-height:1.2;margin-top:1.8em;letter-spacing:-.01em}
.post-body h3{font-weight:500;font-size:1.3rem;line-height:1.25;margin-top:1.5em}
.post-body h2 + p,.post-body h3 + p{margin-top:0}
.post-body a:not(.btn){color:var(--mark);border-bottom:1px solid var(--mark)}
.post-body a:not(.btn):hover{color:#8f2c14;border-color:#8f2c14}
.post-body blockquote{border-left:3px solid var(--mark);padding:2px 0 2px 24px;margin:1.5em 0;font-style:italic;font-size:1.24rem;line-height:1.45;color:var(--ink)}
.post-body ul,.post-body ol{padding-left:1.4em}
.post-body li{margin-bottom:.45em}
.post-body img{border:1px solid var(--hair);height:auto}
.post-body figcaption{font-family:'IBM Plex Mono';font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin-top:6px}
.post-body code,.post-body kbd{font-family:'IBM Plex Mono';font-size:.9em;background:var(--wash);padding:1px 5px}
.post-body hr{border:none;border-top:1px solid var(--hair);margin:2em 0}
/* tags + signature */
.post-tags{margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.post-tags .l{color:var(--faint);margin-right:10px}
.post-tags a{color:var(--grey)}
.post-tags a:hover{color:var(--mark)}
.post-sign{margin-top:26px;text-align:center;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
/* prev / next cards */
.post-nav{margin-top:46px;padding-top:30px;border-top:2px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--hair);border:1px solid var(--hair)}
.post-nav .pn{background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:8px;transition:background .15s}
.post-nav a.pn:hover{background:var(--wash)}
.post-nav .pn.next{text-align:right;align-items:flex-end}
.post-nav .pn .lab{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
.post-nav .pn .t{font-size:1.08rem;line-height:1.25}
.post-nav a.pn:hover .t{color:var(--mark)}
.post-back{margin-top:28px;text-align:center}
@media(max-width:560px){
  .post-body > p:first-of-type::first-letter{font-size:2.8rem}
  .post-nav{grid-template-columns:1fr}
  .post-nav .pn.next{text-align:left;align-items:flex-start}
}

/* ---- static Page (page.php) — lighter, left-aligned, no drop-cap ---- */
.post.page{max-width:820px}
.page-head{border-top:3px solid var(--mark);padding-top:22px;margin-bottom:34px}
.page-head .ref{display:block;margin-bottom:14px}
.page-head .post-title{text-align:left;max-width:none;margin:0}
.page .post-lead{margin:16px 0 0;max-width:60ch;text-align:left}
.post.page .post-body > p:first-of-type::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit}
.page-children{margin-top:38px;padding-top:22px;border-top:1px solid var(--hair);display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--hair);border:1px solid var(--hair)}
.page-children a{background:var(--paper);padding:16px 18px;display:flex;gap:12px;align-items:baseline;font-size:1.05rem;transition:background .15s}
.page-children a:hover{background:var(--wash);color:var(--mark)}
.page-children .ar{font-family:'IBM Plex Mono';color:var(--mark)}
@media(max-width:560px){.page-children{grid-template-columns:1fr}}

/* ---- blog index (home.php) — Actualités listing ---- */
.jindex{padding:12px 0 72px}
.jindex-intro{max-width:62ch}
.jlist{margin-top:6px;border-top:1px solid var(--hair)}
.jentry{padding:34px 0;border-bottom:1px solid var(--hair)}
.jentry.has-media{display:grid;grid-template-columns:260px 1fr;gap:34px;align-items:start}
.jentry-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hair)}
.jentry-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.jentry.has-media:hover .jentry-media img{transform:scale(1.04)}
.jentry-body .ref{display:block;margin-bottom:11px}
.jentry-title{font-weight:500;font-size:1.5rem;line-height:1.16;margin-bottom:9px;letter-spacing:-.01em}
.jentry-title a:hover{color:var(--mark)}
.jentry-ex{color:var(--grey);font-size:1.03rem;line-height:1.55;margin-bottom:15px;max-width:62ch}
.jindex-empty{padding:40px 0;color:var(--grey);font-style:italic}
@media(max-width:640px){
  .jentry.has-media{grid-template-columns:1fr;gap:18px}
  .jentry-media{aspect-ratio:16/9}
}

/* ---- pagination (home.php, index.php) ---- */
.pagination{margin-top:44px}
.pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center}
.pagination .page-numbers{font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border:1px solid var(--hair);color:var(--ink);transition:all .15s}
.pagination a.page-numbers:hover{border-color:var(--mark);color:var(--mark)}
.pagination .page-numbers.current{background:var(--stone);color:#fff;border-color:var(--stone)}
.pagination .page-numbers.dots{border:none;padding:9px 4px;color:var(--faint)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- empty cart state (woocommerce/cart/cart-empty.php) ---- */
.cart-empty-state{padding:8px 0 24px;max-width:54ch}
.cart-empty-lead{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.14;letter-spacing:-.01em;margin-bottom:14px}
.cart-empty-text{color:var(--grey);font-size:1.08rem;line-height:1.55;margin-bottom:26px}

/* ---- cart count badge on the "Panier" menu item ---- */
.cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--mark);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:.58rem;font-weight:600;line-height:1;vertical-align:baseline;transform:translateY(-1px)}
.cart-badge[data-count="0"]{display:none}

/* ============================================================
   WooCommerce — register restyle (loaded after Woo's own CSS)
   ============================================================ */
.woo{padding:34px 0 76px}
/* contain WooCommerce's floated columns so the footer doesn't collapse up */
.woo::after,.woocommerce div.product::after,.woocommerce ul.products::after{content:"";display:block;clear:both}
.woocommerce-breadcrumb{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey)}
.woocommerce-breadcrumb a{color:var(--grey)}
.woocommerce-breadcrumb a:hover{color:var(--mark)}
.woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--grey)}

/* hide any sale flash (belt & braces) */
.woocommerce span.onsale{display:none}

/* ---- single product ---- */
.woocommerce div.product .product_title{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.015em;margin-bottom:12px}
.woocommerce div.product p.price,.woocommerce div.product span.price,.woocommerce div.product p.price ins{color:var(--ink);font-family:'Newsreader',serif;font-size:1.6rem;font-weight:500;text-decoration:none}
.woocommerce div.product p.price del{color:var(--faint);font-size:1.1rem}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--grey);font-size:1.05rem;margin:14px 0}
.woocommerce div.product .woocommerce-product-gallery img,.woocommerce ul.products li.product a img,.woocommerce div.product .images img{border:1px solid var(--hair)}
.woocommerce div.product form.cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}
.woocommerce .quantity .qty{font-family:'IBM Plex Mono';padding:11px 8px;border:1px solid var(--hair);width:66px;text-align:center;background:var(--paper);color:var(--ink)}
.woocommerce div.product .product_meta{font-family:'IBM Plex Mono';font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--grey);border-top:1px solid var(--hair);padding-top:14px;margin-top:20px}
.woocommerce div.product .product_meta a{color:var(--ink)}
.woocommerce div.product .product_meta a:hover{color:var(--mark)}
.woocommerce .stock{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--quarry)}
.woocommerce .out-of-stock{color:var(--mark)}

/* ---- buttons → register .btn / .btn.mk ---- */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce ul.products li.product .button{font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;font-weight:500;padding:12px 20px;border:1px solid var(--ink);background:none;color:var(--ink);border-radius:0;transition:all .18s}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce ul.products li.product .button:hover{background:var(--ink);color:#fff}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt,.woocommerce .single_add_to_cart_button,.woocommerce .checkout-button{background:var(--mark);border-color:var(--mark);color:#fff}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce .single_add_to_cart_button:hover,.woocommerce .checkout-button:hover{background:#8f2c14;border-color:#8f2c14;color:#fff}

/* ---- product tabs ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs{border:none;padding:0;margin:0 0 18px;display:flex;gap:22px;border-bottom:2px solid var(--rule)}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none;border:none;border-radius:0;padding:0;margin:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:'IBM Plex Mono';font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);padding:10px 0;display:inline-block}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--mark);box-shadow:inset 0 -2px 0 var(--mark)}
.woocommerce div.product .woocommerce-tabs .panel h2{font-family:'Newsreader';font-weight:500}

/* ---- product loops (category archive + related/upsells) ---- */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:26px;margin:0;padding:0}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{width:auto;float:none;margin:0;text-align:left}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:'Newsreader',serif;font-weight:500;font-size:1.08rem;line-height:1.2;color:var(--ink);padding:12px 0 4px}
.woocommerce ul.products li.product .price{color:var(--ink);font-family:'IBM Plex Mono';font-size:.86rem;font-weight:500}
.woocommerce ul.products li.product .button{margin-top:10px;display:inline-block}
.woocommerce .related > h2,.woocommerce .upsells > h2,.woocommerce-products-header__title,.woocommerce .products > h2{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:20px}
.woocommerce .related,.woocommerce .upsells{margin-top:44px;padding-top:32px;border-top:2px solid var(--rule)}

/* ---- issue Sommaire (product summary, in place of the short description) ---- */
.woocommerce div.product .summary .woo-toc{margin:20px 0;padding-top:20px;border-top:1px solid var(--hair)}
.woo-toc-title{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-bottom:14px;font-weight:600}
.woo-toc .toc{border-top:1px solid var(--hair)}
.woo-toc .toc .a{display:flex;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:.98rem;line-height:1.4}
.woo-toc .toc .a .pg{font-family:'IBM Plex Mono';font-size:.7rem;color:var(--faint);flex:none;padding-top:3px;width:3.4em}

/* ---- cart / checkout form fields & tables ---- */
.woocommerce form .form-row label,.woocommerce-billing-fields label,.woocommerce-shipping-fields label,.woocommerce-additional-fields label{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:6px;display:block}
.woocommerce .input-text,.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=tel],.woocommerce input[type=number],.woocommerce input[type=password],.woocommerce textarea,.woocommerce select{font-family:'Newsreader',serif;font-size:1rem;padding:11px 14px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);border-radius:0;line-height:1.4;box-shadow:none}
.woocommerce .input-text:focus,.woocommerce textarea:focus,.woocommerce select:focus,.woocommerce input:focus{outline:none;border-color:var(--mark)}
.woocommerce form .form-row{margin-bottom:16px}
.woocommerce .select2-container--default .select2-selection--single{height:auto;border-radius:0;border-color:var(--hair)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{padding:11px 14px;line-height:1.4;color:var(--ink)}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%}
.woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2{float:none;width:100%}
.woocommerce-checkout h3,.woocommerce #order_review_heading,.cart_totals h2,.cross-sells h2{font-family:'Newsreader',serif;font-weight:500;font-size:1.35rem;letter-spacing:-.01em;margin-bottom:16px}

/* tables (cart + order review) */
.woocommerce table.shop_table{border:1px solid var(--hair);border-radius:0;border-collapse:collapse;margin-bottom:24px}
.woocommerce table.shop_table thead th,.woocommerce table.shop_table th{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);font-weight:600}
.woocommerce table.shop_table td,.woocommerce table.shop_table th{border-top:1px solid var(--hair);padding:14px 16px}
.woocommerce-cart table.cart img{width:56px;height:auto;border:1px solid var(--hair)}
.woocommerce a.remove{color:var(--mark)!important;border:1px solid var(--hair);border-radius:50%;width:22px;height:22px;line-height:20px;font-weight:400}
.woocommerce a.remove:hover{background:var(--mark)!important;color:#fff!important;border-color:var(--mark)}
.woocommerce .cart .actions .coupon .input-text{width:180px;min-width:120px}

/* payment box */
.woocommerce #payment,.woocommerce-checkout #payment{background:var(--wash);border:1px solid var(--hair);border-radius:0}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--hair)}

/* ---- notices / messages ---- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border-top-color:var(--mark);font-size:.98rem}

@media(max-width:768px){
  .woocommerce div.product .woocommerce-product-gallery,.woocommerce div.product .summary{width:100%;float:none}
}

/* ---- revue theme archive (taxonomy-revue_theme.php) ---- */
.themes-archive{padding:12px 0 72px}
.themes-archive .issues{margin-top:8px}
.themes-archive-back{margin-top:36px}

/* ---- project archive (archive-project.php) ---- */
.projects{padding:12px 0 72px}
.project-list{margin-top:8px;border-top:1px solid var(--hair)}
.pentry{display:grid;grid-template-columns:300px 1fr;gap:44px;padding:40px 0;border-bottom:1px solid var(--hair);align-items:start}
.pentry-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule)}
.pentry-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .45s}
.pentry:hover .pentry-media img{transform:scale(1.04)}
.pentry-body .ref{display:block;margin-bottom:12px}
.pentry-title{font-weight:500;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.14;letter-spacing:-.01em;margin-bottom:10px}
.pentry-title a:hover{color:var(--mark)}
.pentry-ex{color:var(--grey);font-size:1.05rem;line-height:1.55;margin-bottom:16px;max-width:60ch}
.pentry .status-line{margin:18px 0}
.projects-empty{margin-top:24px}
@media(max-width:700px){
  .pentry{grid-template-columns:1fr;gap:20px}
  .pentry-media{aspect-ratio:16/9}
}

/* ---- reservation / booking page (page-reservation.php) ---- */
.booking{padding:12px 0 76px}
.booking-intro{max-width:60ch}
.booking-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,5vw,60px);align-items:start;margin-top:8px}
.booking-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.booking-field{margin:0 0 20px}
.booking-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.booking-field input,.booking-field select,.booking-field textarea{width:100%;font-family:'Newsreader',serif;font-size:1.02rem;padding:11px 14px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);border-radius:0;line-height:1.4}
.booking-field input:focus,.booking-field select:focus,.booking-field textarea:focus{outline:none;border-color:var(--mark)}
.booking-field textarea{resize:vertical;min-height:110px}
.booking-submit{margin:8px 0 0}
.booking-legal{margin-top:16px;font-size:.86rem;color:var(--faint);font-style:italic;max-width:56ch}
/* aside */
.booking-aside{border-top:3px solid var(--mark);padding-top:22px}
.booking-aside h3{font-weight:500;font-size:1.2rem;margin-bottom:16px}
.booking-aside-item{margin-bottom:14px;font-size:1.05rem}
.booking-aside-item .k{display:block;font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.booking-aside-item a:hover{color:var(--mark)}
.booking-aside-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair);font-size:.92rem;color:var(--grey);font-style:italic}
/* notices */
.booking-notice{margin:0 0 30px;padding:15px 18px;border:1px solid var(--hair);border-top-width:3px;font-size:1.02rem}
.booking-notice.is-success{border-top-color:var(--quarry);background:#EAF0EC}
.booking-notice.is-error{border-top-color:var(--mark);background:#F7ECEA}
@media(max-width:820px){
  .booking-cols{grid-template-columns:1fr;gap:36px}
}
@media(max-width:540px){
  .booking-grid{grid-template-columns:1fr}
}

/* ---- editor-only "à compléter" placeholder (aspb_todo) ---- */
.aspb-todo-wrap{padding-top:22px;padding-bottom:22px}
.aspb-todo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:15px 18px;border:1px dashed var(--faint);background:var(--wash);font-family:'IBM Plex Mono';font-size:.76rem;letter-spacing:.02em;color:var(--grey);line-height:1.5}
.aspb-todo-tag{flex:none;background:var(--mark);color:#fff;padding:4px 9px;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.aspb-todo-msg{flex:1;min-width:200px}
.aspb-todo a{color:var(--mark);border-bottom:1px solid var(--mark);white-space:nowrap}
.aspb-todo a:hover{color:#8f2c14;border-color:#8f2c14}

/* ---- museum archive (archive-museum.php) — the two-fonds diptych ---- */
.museums{padding:8px 0 76px}
.museums-head{text-align:center;max-width:640px;margin:0 auto 48px;padding-bottom:34px;position:relative}
.museums-head::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:3px;background:var(--mark)}
.museums-head .ref{display:block;margin-bottom:18px}
.museums-head h1{font-weight:400;font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.02em}
.museums-head h1 em{font-style:italic;color:var(--mark)}
.museums-head p{margin-top:20px;font-size:1.12rem;line-height:1.55;color:var(--grey)}

/* the facing plates */
.museums-plates{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)}
.mplate{display:flex;flex-direction:column;background:var(--paper)}
.mplate:first-child{border-right:1px solid var(--hair)}
/* logo panel: contain the mark on a white field (the images are logos, not photos) */
.mplate-media{position:relative;aspect-ratio:16/10;background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden}
.mplate-media > a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:clamp(26px,4.5vw,52px)}
.mplate-logo{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .5s ease}
.mplate:hover .mplate-logo{transform:scale(1.03)}
.mplate-ph{color:var(--faint);font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.08em;text-transform:uppercase}
/* small plate number, top-right corner (logo stays clear) */
.mplate-no{position:absolute;top:14px;right:16px;z-index:3;font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mplate-no::before{content:"N° "}
/* state pill — reads on the light panel via a hairline border */
.mplate-state{position:absolute;top:12px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:1px solid var(--hair);padding:6px 11px}
.mplate-state.is-open{color:var(--quarry)}
.mplate-state.is-closed{color:var(--mark)}
.mplate-state .dot{margin:0}
/* body */
.mplate-body{padding:30px 32px 32px;display:flex;flex-direction:column;flex:1}
.mplate-body .cote{display:block;margin-bottom:14px;color:var(--mark)}
.mplate-title{font-weight:500;font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:6px}
.mplate-title a:hover{color:var(--mark)}
.mplate-body .loc{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);margin-bottom:18px}
.mplate-lead{font-size:1.06rem;line-height:1.55;margin-bottom:20px}
.mplate-body .meta{margin-top:auto;margin-bottom:24px}
.mplate-cta{align-self:flex-start;margin-top:auto}
/* closing note */
.museums-note{margin-top:26px;text-align:center;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}

@media(max-width:760px){
  .museums-plates{grid-template-columns:1fr}
  .mplate:first-child{border-right:none;border-bottom:1px solid var(--rule)}
  .mplate-media{aspect-ratio:16/9}
  .mplate-no{font-size:4.2rem}
}

/* ---- L'association (page-association.php / aspb blocks) — ported from the prototype ---- */
.about-layout{padding:64px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,5vw,72px);align-items:start}
.about-main .ref{display:block;margin-bottom:16px}
.about-main h3{font-weight:400;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:20px}
.about-main h3 em{font-style:italic}
.about-main .lead{font-size:1.24rem;line-height:1.5;color:var(--ink);margin-bottom:18px}
.about-main p{font-size:1.06rem;margin-bottom:16px;max-width:60ch}
.about-main p .mk{color:var(--mark);font-style:italic}
.about-main .sub-h{margin-top:40px;font-weight:500;font-size:1.3rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--rule)}
/* objectives as a numbered ledger, not boxes */
.obj-list{margin-top:6px}
.obj-list .o{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--hair);align-items:baseline}
.obj-list .o .on{font-family:'Newsreader',serif;font-size:1.5rem;font-weight:500;color:var(--mark);line-height:1}
.obj-list .o h4{font-weight:600;font-size:1.12rem;margin-bottom:5px}
.obj-list .o p{color:var(--grey);font-size:1rem;margin:0;max-width:56ch}
/* sidebar */
.about-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:0;border:1px solid var(--hair)}
.about-side .card-h{background:var(--stone);color:#EDEFEC;padding:16px 20px;font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.about-side .row{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;border-bottom:1px solid var(--hair);font-size:.96rem}
.about-side .row:last-child{border-bottom:none}
.about-side .row .k{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.about-side .row .v{text-align:right;font-weight:500}
.about-side .founders{padding:18px 20px;border-bottom:1px solid var(--hair);background:var(--wash)}
.about-side .founders .k{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:8px}
.about-side .founders .f{font-family:'Newsreader',serif;font-size:1.05rem;font-style:italic;line-height:1.4}
.about-side .founders .f span{color:var(--grey);font-style:normal;font-size:.85rem}
@media(max-width:900px){
  .about-layout{grid-template-columns:1fr}
  .about-side{position:static;order:-1}
}

/* ---- "montant libre" donation field (inc/donation.php) ---- */
.aspb-don-field{margin:0 0 18px}
.aspb-don-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.aspb-don-field input{font-family:'Newsreader',Georgia,serif;font-size:1.15rem;padding:11px 14px;border:1px solid var(--hair);border-radius:0;width:170px;max-width:100%;color:var(--ink);background:var(--paper)}
.aspb-don-field input:focus{outline:none;border-color:var(--mark)}
.aspb-don-note{margin-top:9px;font-size:.9rem;color:var(--grey);font-style:italic;max-width:46ch}
.aspb-don-price{font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:.03em;text-transform:uppercase;color:var(--mark)}

/* ============================================================
   Mobile polish (added) — more edge spacing + a few arrangement
   fixes on phones. Scoped to small viewports / empty-cell cases;
   the desktop & tablet design is unchanged.
   ============================================================ */

/* A run without a page number leaves an empty .pg column that still
   forces its 3.4em width — collapse it so the title starts flush. */
.feature .toc .a .pg:empty,
.woo-toc .toc .a .pg:empty{display:none}

@media(max-width:600px){
  /* room to breathe from the screen edge (the clamp floor was ~20px) */
  .wrap{padding-left:24px;padding-right:24px}
  /* keep the full-bleed hero/phero captions on the same gutter */
  .hero-cap,.phero-cap{right:24px}
  /* the catalogue search should use the whole row, not a 220px pill */
  .toolbar input[type=search]{width:100%;min-width:0}
  .toolbar select{flex:1 1 auto}
}

@media(max-width:560px){
  /* practical-info cells: align text to the page gutter instead of
     double-indenting (wrap gutter + cell padding). */
  .pract .c{padding:16px 0}
}

@media(max-width:540px){
  /* burger to the top-right corner instead of dropping under the wordmark */
  .mast{padding-right:44px}
  .burger{position:absolute;top:24px;right:0;line-height:1}
  /* even, tighter gaps once the stat row wraps to two columns */
  .band .stat-row{gap:22px 24px}
}

/* ============================================================
   Single project (Touraille) — page-specific composition
   Ported from the prototype (projet.html / style.css). Drives
   single-project.php; content is ACF-managed.
   ============================================================ */
.proj-body{padding:64px 0;border-bottom:1px solid var(--hair);display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,5vw,72px);align-items:start}
.proj-main .ref{display:block;margin-bottom:16px}
.proj-main h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.14;margin-bottom:18px;letter-spacing:-.01em}
.proj-main h3 em{font-style:italic}
.proj-main .lead{font-size:1.24rem;line-height:1.5;color:var(--ink);margin-bottom:18px}
.proj-main p{font-size:1.06rem;margin-bottom:16px;max-width:62ch}
.proj-main p .mk{color:var(--mark);font-style:italic}
.proj-main .sub-h{margin-top:38px;font-weight:500;font-size:1.25rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--rule)}
/* sidebar: facts + partners + progress */
.proj-side{position:sticky;top:24px;display:flex;flex-direction:column;border:1px solid var(--hair)}
.proj-side .card-h{background:var(--stone);color:#EDEFEC;padding:16px 20px;font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.proj-side .row{display:flex;justify-content:space-between;gap:14px;padding:13px 20px;border-bottom:1px solid var(--hair);font-size:.96rem}
.proj-side .row .k{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.proj-side .row .v{text-align:right;font-weight:500}
.proj-side .prog-block{padding:18px 20px;border-bottom:1px solid var(--hair)}
.proj-side .prog-block .k{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:10px}
.proj-side .partners{padding:18px 20px;background:var(--wash)}
.proj-side .partners .k{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:10px}
.proj-side .partners .p{font-family:'Newsreader',serif;font-size:1.02rem;line-height:1.4;margin-bottom:8px}
.proj-side .partners .p span{color:var(--grey);font-size:.82rem;display:block}
/* horizontal timeline of steps */
.proj-steps{padding:60px 0;border-bottom:1px solid var(--hair)}
.proj-steps .lead{max-width:60ch;margin-bottom:40px}
.proj-steps .ref{display:block;margin-bottom:16px}
.proj-steps h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
.proj-steps h3 em{font-style:italic}
.proj-steps .lead p{color:var(--grey);font-size:1.08rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--hair)}
.step{padding:26px 22px 28px;border-right:1px solid var(--hair);position:relative;display:flex;flex-direction:column;gap:10px}
.step:last-child{border-right:none}
.step.done{background:var(--wash)}
.step .snum{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.step.done .snum,.step.current .snum{color:var(--mark)}
.step .stitle{font-weight:600;font-size:1.12rem;line-height:1.2}
.step p{font-size:.95rem;color:var(--grey);flex:1}
.step .stag{font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;align-self:flex-start;border:1px solid var(--hair);color:var(--grey)}
.step.done .stag{background:var(--quarry);color:#fff;border-color:var(--quarry)}
.step.current .stag{background:var(--mark);color:#fff;border-color:var(--mark)}
/* plants dried — inline tag row */
.plants{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.plants .pl{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.03em;padding:7px 12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink)}
@media(max-width:900px){
  .proj-body{grid-template-columns:1fr}
  .proj-side{position:static}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2n){border-right:none}
  .step{border-bottom:1px solid var(--hair)}
}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step{border-right:none}}
/* partnership disclosure block */
.partners-sec{padding:60px 0;border-bottom:1px solid var(--hair)}
.partners-sec .head{max-width:60ch;margin-bottom:36px}
.partners-sec .ref{display:block;margin-bottom:16px}
.partners-sec h3{font-weight:400;font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
.partners-sec h3 em{font-style:italic}
.partners-sec .head p{color:var(--grey);font-size:1.08rem}
.partner-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.partner{border:1px solid var(--hair);display:flex;flex-direction:column}
.partner .logo{aspect-ratio:16/7;position:relative;overflow:hidden;background:var(--wash);border-bottom:1px solid var(--hair);display:flex;align-items:center;justify-content:center;padding:24px}
.partner .logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.partner .logo .ph-label{font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.partner .pbody{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.partner .prole{font-family:'IBM Plex Mono';font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mark)}
.partner h4{font-weight:600;font-size:1.22rem;line-height:1.2}
.partner p{color:var(--grey);font-size:.98rem;flex:1}
.partner .plink{font-family:'IBM Plex Mono';font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:2px;align-self:flex-start}
.partner .plink:hover{color:var(--mark);border-color:var(--mark)}
.partners-note{margin-top:26px;border-top:2px solid var(--rule);padding-top:20px;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.partners-note .lbl{font-family:'IBM Plex Mono';font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);flex:none}
.partners-note p{font-size:1rem;color:var(--ink);font-style:italic;max-width:64ch;margin:0}
@media(max-width:760px){.partner-grid{grid-template-columns:1fr}}

/* ============================================================
   Full-bleed gutter restore (added)
   Sections whose inner container sets `padding:Npx 0` (bands, join,
   the project sections) zero their horizontal gutter for that vertical
   padding. Below 1120px, .wrap centering adds no side margin, so their
   content would touch the screen edge — restore a matching gutter here
   while keeping the coloured background full-bleed. Desktop (≥1120px)
   keeps the original full-width composition.
   ============================================================ */
@media(max-width:1120px){
  .resa .wrap,.guides .wrap,.band .wrap,.quiz .wrap,.feature .wrap,
  .sub-band .wrap,.foot-head .wrap,.foot-b .wrap,
  .join,.proj-body,.proj-steps,.proj-galleries,.partners-sec{
    padding-left:clamp(24px,4vw,52px);padding-right:clamp(24px,4vw,52px)}
}

/* ---- project galleries (one per phase / event) ---- */
.proj-galleries{padding:60px 0;border-bottom:1px solid var(--hair)}
.proj-galleries .gal{margin-bottom:44px}
.proj-galleries .gal:last-child{margin-bottom:0}
.gal-title{font-weight:500;font-size:1.25rem;line-height:1.15;margin-bottom:16px;padding-bottom:10px;
  border-bottom:2px solid var(--rule);display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.gal-title .gal-count{font-family:'IBM Plex Mono';font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);flex:none}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--hair);border:1px solid var(--hair)}
.gal-item{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--wash);display:block}
.gal-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .45s}
.gal-item:hover img{transform:scale(1.05)}
@media(max-width:900px){.gal-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.gal-grid{grid-template-columns:1fr 1fr}}