/* miroiterie.css · v2026-09-10 · demandeur et annuaire */
/* ====================================================================
POLICES SERVIES DEPUIS NOTRE DOMAINE
Plus aucune requete vers fonts.googleapis.com ni fonts.gstatic.com :
deux domaines tiers, donc deux DNS et deux TLS, retires du chemin
critique. Sous-ensembles latin et latin-ext uniquement.
==================================================================== */
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:optional;src:url("/web/content/4073/miro_font_anton-400-normal-latin-ext.woff2?unique=3ada4101c3ed0820") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:optional;src:url("/web/content/4074/miro_font_anton-400-normal-latin.woff2?unique=b9beea08045a9cba") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url("/web/content/4075/miro_font_barlow-400-italic-latin-ext.woff2?unique=09509d4e5b05c96a") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:italic;font-weight:400;font-display:swap;src:url("/web/content/4076/miro_font_barlow-400-italic-latin.woff2?unique=6e048a191f08de1b") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("/web/content/4077/miro_font_barlow-400-normal-latin-ext.woff2?unique=496c894648dec778") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("/web/content/4078/miro_font_barlow-400-normal-latin.woff2?unique=4f0f26f139db2a7e") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("/web/content/4079/miro_font_barlow-500-normal-latin-ext.woff2?unique=278f01dbfb7737a0") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("/web/content/4080/miro_font_barlow-500-normal-latin.woff2?unique=ad8e9490a983a615") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("/web/content/4081/miro_font_barlow-600-normal-latin-ext.woff2?unique=a016855326ff1df8") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("/web/content/4082/miro_font_barlow-600-normal-latin.woff2?unique=800311e32df4fd84") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/web/content/4083/miro_font_jetbrains_mono-400-normal-latin-ext.woff2?unique=06ad36000cd89dec") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/web/content/4084/miro_font_jetbrains_mono-400-normal-latin.woff2?unique=4f27206c4b1caf8b") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/web/content/4085/miro_font_jetbrains_mono-700-normal-latin-ext.woff2?unique=06ad36000cd89dec") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("/web/content/4086/miro_font_jetbrains_mono-700-normal-latin.woff2?unique=4f27206c4b1caf8b") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* ====================================================================
REPLIS AUX METRIQUES AJUSTEES
Ratios mesures a 100 px sur la meme chaine : Anton 86,01 % d'Arial,
Barlow 94,23 %, JetBrains Mono 99,66 % de la monospace systeme.
C'est ce qui ramene le CLS a zero sans renoncer a `font-display: swap`.
==================================================================== */
@font-face{font-family:"Anton repli";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
size-adjust:86.01%;ascent-override:105%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Barlow repli";src:local("Arial"),local("Helvetica"),local("Liberation Sans");
size-adjust:94.23%;ascent-override:96%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Mono repli";src:local("Courier New"),local("Liberation Mono"),local("DejaVu Sans Mono");
size-adjust:99.66%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
:root{
--img-hero:url(/web/image/4037/miro_2555906b9f0d.webp?unique=2555906b9f0d3605);
--img-texture:url(/web/image/4038/miro_98bb54bd77ba.webp?unique=98bb54bd77ba6458);
--ink:#0B0D10; --slate:#12151A; --slate-2:#191D24; --line:#272C34;
--paper:#F3F0EA; --muted:#9E978B; --amber:#F2A007; --amber-lo:#D8850A; --yellow:#FBBF00;
--display:"Anton","Anton repli","Arial Narrow",Impact,sans-serif;
--body:"Barlow","Barlow repli",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"JetBrains Mono","Mono repli",ui-monospace,Menlo,monospace;
--pad:clamp(20px,5vw,64px);
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;text-wrap:balance}
h1{font-size:clamp(46px,9.4vw,112px)}
h2{font-size:clamp(32px,5.6vw,62px)}
h3{font-size:clamp(20px,2.6vw,28px)}
p{margin:0 0 1em;max-width:62ch}
.lede{font-size:clamp(18px,2vw,21px);color:#D9D3C8}
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:15px 26px;border:1px solid var(--amber);color:var(--ink);background:var(--amber);text-decoration:none;overflow:hidden;transition:color .25s var(--ease),transform .25s var(--ease),border-color .25s}
.btn>span{position:relative;z-index:2}
.btn::before{content:"";position:absolute;inset:0;background:var(--yellow);transform:translateY(101%);transition:transform .34s var(--ease);z-index:1}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--paper);border-color:var(--line)}
.btn.ghost::before{background:var(--amber)}
.btn.ghost:hover{color:var(--ink);border-color:var(--amber)}
.btn.dark{background:var(--ink);color:var(--amber);border-color:var(--ink)}
.btn.dark::before{background:#000}
.btn.dark:hover{color:var(--yellow)}
/* ---------- nav ---------- */
header.top{position:sticky;top:0;z-index:70;background:rgba(11,13,16,.55);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
header.top.stuck{background:rgba(11,13,16,.94);border-bottom-color:var(--line)}
.nav{max-width:1160px;margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:16px;height:74px;transition:height .3s var(--ease)}
header.top.stuck .nav{height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto;flex-shrink:0}
.mark{width:34px;height:34px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;flex-shrink:0;transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-14deg) scale(1.06)}
.mark svg{width:20px;height:20px}
.brand b{font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;font-weight:400;white-space:nowrap}
.nav nav{display:flex;gap:2px}
.nav nav a{position:relative;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:9px 12px;transition:color .2s}
.nav nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav nav a:hover{color:var(--paper)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav nav a[aria-current]{color:var(--amber)}
.nav nav a[aria-current]::after{transform:scaleX(1)}
.navtel{font-family:var(--mono);font-size:13px;font-weight:700;text-decoration:none;color:var(--paper);border:1px solid var(--line);padding:9px 14px;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.navtel:hover{border-color:var(--amber);color:var(--ink);background:var(--amber)}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--paper);width:44px;height:38px;cursor:pointer;font-size:17px;line-height:1}
@media(max-width:940px){
.nav nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;background:var(--slate);border-bottom:1px solid var(--line);padding:6px var(--pad) 20px}
.nav nav[hidden]{display:none}
.nav nav a{padding:15px 0;font-size:14px;border-bottom:1px solid var(--line)}
.nav nav a::after{display:none}
.burger{display:block}
}
/* ---------- sections ---------- */
section{padding:clamp(60px,9.5vw,120px) 0;position:relative}
.band-slate{background:var(--slate)}
.band-amber{background:var(--amber);color:var(--ink)}
.band-amber .eyebrow,.band-amber p,.band-amber .lede{color:rgba(11,13,16,.8)}
.band-amber .eyebrow{color:rgba(11,13,16,.74)}
.band-tex{background:var(--ink) center/cover no-repeat;background-image:linear-gradient(rgba(11,13,16,.9),rgba(11,13,16,.95)),var(--img-texture)}
.head{margin-bottom:clamp(30px,4.4vw,54px)}
.head p{color:var(--muted)}
.band-amber .head p{color:rgba(11,13,16,.72)}
/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}.rv[data-d="4"]{transition-delay:.32s}
/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,88vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:-6% 0;background:var(--img-hero) center/cover no-repeat;will-change:transform;transform:scale(1.1);animation:heroIn 1.6s var(--ease) .1s both}
@keyframes heroIn{from{transform:scale(1.16)}to{transform:scale(1.02)}}
.hero .veil{position:absolute;inset:0;background:
radial-gradient(120% 80% at 70% 20%,rgba(242,160,7,.14) 0%,transparent 60%),
linear-gradient(180deg,rgba(11,13,16,.62) 0%,rgba(11,13,16,.3) 38%,rgba(11,13,16,.97) 100%)}
.hero .wrap{position:relative;z-index:3;padding-bottom:clamp(44px,7vw,80px);padding-top:100px;width:100%}
.hero h1{max-width:15ch}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln>i{display:block;font-style:normal;transform:translateY(105%);animation:lineUp .95s var(--ease) both}
.hero h1 .ln:nth-child(1)>i{animation-delay:.32s}
.hero h1 .ln:nth-child(2)>i{animation-delay:.44s;color:var(--amber)}
@keyframes lineUp{to{transform:none}}
.hero .lede,.hero .cta,.hero .status{animation:fadeUp .9s var(--ease) both}
.hero .status{animation-delay:.2s}.hero .lede{animation-delay:.66s;margin-top:22px;max-width:46ch}
.hero .cta{animation-delay:.78s;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.status{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,13,16,.62);border:1px solid var(--line);padding:8px 14px;margin-bottom:22px;backdrop-filter:blur(6px)}
.dot{width:7px;height:7px;border-radius:50%;background:#4ADE80;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
.scrollcue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:4;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue span{width:1px;height:34px;background:linear-gradient(var(--amber),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}
/* ---------- marquee ---------- */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--slate);padding:16px 0}
.band-amber .marq{background:transparent;border-color:rgba(11,13,16,.2)}
.marq .track{display:flex;gap:0;width:max-content;animation:slide 46s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq b{font-family:var(--display);font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;color:var(--paper);opacity:.55;padding:0 22px;white-space:nowrap;transition:opacity .2s,color .2s}
.marq b:nth-child(3n){color:var(--amber);opacity:.9}
.band-amber .marq b{color:var(--ink);opacity:.42}
.band-amber .marq b:nth-child(3n){color:var(--ink);opacity:.9}
@keyframes slide{to{transform:translateX(-50%)}}
/* ---------- strip / counters ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--line)}
.strip>div{background:var(--ink);padding:28px var(--pad);transition:background .3s}
.strip>div:hover{background:var(--slate-2)}
.strip .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:9px}
.strip .v{font-family:var(--display);font-size:25px;text-transform:uppercase;line-height:1.05;font-variant-numeric:tabular-nums}
.strip .n{font-size:14px;color:var(--muted);margin-top:5px}
/* ---------- media ---------- */
.shot{position:relative;overflow:hidden;background:var(--slate-2)}
.shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .6s}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(242,160,7,.1),transparent 55%);opacity:0;transition:opacity .5s}
.shot:hover img{transform:scale(1.04)}
.shot:hover::after{opacity:1}
.shot .cap{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(11,13,16,.9));font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.ratio43{aspect-ratio:4/3}.ratio11{aspect-ratio:1/1}.ratio169{aspect-ratio:16/10}
/* ---------- cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--slate);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.card:hover{border-color:var(--amber);transform:translateY(-5px)}
.card .body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:21px}
.card p{color:var(--muted);font-size:15.5px;margin:0}
.card .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.band-amber .card{background:rgba(11,13,16,.06);border-color:rgba(11,13,16,.18)}
.band-amber .card p{color:rgba(11,13,16,.75)}
.band-amber .card .tag{color:rgba(11,13,16,.7)}
.band-amber .card:hover{border-color:var(--ink)}
/* ---------- agenda ---------- */
.event{display:grid;grid-template-columns:92px 1fr auto;gap:0 26px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .3s var(--ease),background .3s}
.event:first-child{border-top:1px solid var(--line)}
.event:hover{padding-left:14px;background:linear-gradient(90deg,rgba(242,160,7,.07),transparent 40%)}
.date{text-align:center;border:1px solid var(--line);padding:9px 4px;transition:border-color .3s,background .3s}
.event:hover .date{border-color:var(--amber);background:rgba(242,160,7,.08)}
.date .d{font-family:var(--display);font-size:31px;line-height:1;font-variant-numeric:tabular-nums}
.date .m{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-top:3px}
.event .meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:5px;letter-spacing:.04em}
.event h3{font-size:22px;transition:color .3s}
.event:hover h3{color:var(--amber)}
@media(max-width:660px){
.event{grid-template-columns:66px 1fr;gap:0 16px}
.event .btn{grid-column:2;justify-self:start;margin-top:12px}
.date .d{font-size:25px}
}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,68px);align-items:center}
.split.rev>*:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.rev>*:first-child{order:0}}
/* ---------- menu list ---------- */
.menucat{margin-bottom:clamp(42px,6vw,72px)}
.menucat>h3{color:var(--amber);margin-bottom:6px}
.band-amber .menucat>h3{color:var(--ink)}
.menucat .sub{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.band-amber .menucat .sub{color:rgba(11,13,16,.74)}
.cols{display:grid;grid-template-columns:1fr auto;gap:0 20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:9px;border-bottom:1px solid var(--line)}
.cols .p{display:grid;grid-template-columns:repeat(var(--n,3),64px);text-align:right;gap:0 8px}
.band-amber .cols{border-bottom-color:rgba(11,13,16,.3);color:rgba(11,13,16,.74)}
.item{display:grid;grid-template-columns:1fr auto;gap:0 20px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(39,44,52,.55);transition:padding-left .25s var(--ease),color .25s}
.item:hover{padding-left:10px}
.item:hover .nm{color:var(--amber)}
.band-amber .item{border-bottom-color:rgba(11,13,16,.14)}
.band-amber .item:hover .nm{color:var(--ink)}
.item .nm{font-weight:600;font-size:16.5px;transition:color .25s}
.item .nm span{font-weight:400;color:var(--muted);font-size:14px;margin-left:.5em}
.band-amber .item .nm span{color:rgba(11,13,16,.74)}
.item .desc{grid-column:1/-1;font-size:14.5px;color:var(--muted);margin-top:3px;max-width:52ch}
.band-amber .item .desc{color:rgba(11,13,16,.72)}
.prices{display:grid;grid-template-columns:repeat(var(--n,3),64px);gap:0 8px;font-family:var(--mono);font-size:14px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.one{--n:1}.two{--n:2}
@media(max-width:560px){.cols .p,.prices{grid-template-columns:repeat(var(--n,3),52px);font-size:12.5px;gap:0 4px}.item .nm{font-size:15px}}
/* ---------- hours / form / footer ---------- */
.hours{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:14px;max-width:440px}
.hours td{padding:10px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--amber)}
.todo{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:rgba(242,160,7,.14);color:var(--amber);border:1px solid rgba(242,160,7,.42);padding:3px 8px;margin-left:8px;vertical-align:2px}
form{display:grid;gap:16px;max-width:560px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
input,select,textarea{width:100%;background:var(--slate-2);border:1px solid var(--line);color:var(--paper);font-family:var(--body);font-size:16px;padding:13px 14px;border-radius:0;transition:border-color .25s,background .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);background:#1E232B}
textarea{min-height:120px;resize:vertical}
footer{background:var(--slate);border-top:1px solid var(--line);padding:clamp(46px,6vw,76px) 0 28px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:780px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
footer h4,footer .fh{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;font-weight:400}
footer a{color:var(--muted);text-decoration:none;display:block;padding:5px 0;font-size:15px;transition:color .2s,padding-left .25s var(--ease)}
footer a:hover{color:var(--paper);padding-left:5px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;padding:0;transition:border-color .25s,background .25s,color .25s}
.social a:hover{border-color:var(--amber);background:var(--amber);color:var(--ink);padding-left:0}
.social svg{width:17px;height:17px;fill:currentColor}
.legal{margin-top:42px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;color:#6E6862}
.legal a{display:inline;padding:0;font-size:12px;font-family:var(--mono)}
.abus{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#6E6862}
/* ---------- pages ---------- */
.page{display:none}
.page.on{display:block}
.pagehead{position:relative;padding:clamp(90px,12vw,150px) 0 clamp(34px,4.6vw,54px);border-bottom:1px solid var(--line);overflow:hidden}
.pagehead .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;transform:scale(1.05)}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,16,.72),rgba(11,13,16,.97))}
.pagehead .wrap{position:relative;z-index:2}
.pagehead h1{font-size:clamp(40px,7.8vw,84px)}
.pagehead .lede{margin-top:18px;max-width:56ch}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
.rv{opacity:1;transform:none}
.hero h1 .ln>i{transform:none}
.hero .bg{transform:none}
}
/* ─────────────────────────────── */
/* ---------- logo réel ---------- */
.mark{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--yellow);flex-shrink:0;transition:transform .5s var(--ease)}
.mark img{width:100%;height:100%;object-fit:cover}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
footer .mark{width:56px;height:56px}
/* ---------- vidéo de fond ---------- */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero .bg{transition:opacity .8s var(--ease)}
.hero.hasvideo .bg{opacity:0}
/* ---------- bouton son ---------- */
.snd{display:flex;align-items:center;gap:7px;background:none;border:1px solid var(--line);color:var(--muted);
font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;cursor:pointer;
transition:border-color .2s,color .2s;white-space:nowrap}
.snd:hover{border-color:var(--amber);color:var(--amber)}
.snd[aria-pressed="true"]{border-color:var(--amber);color:var(--amber)}
.snd .bars{display:flex;align-items:flex-end;gap:2px;height:12px}
.snd .bars i{width:2px;background:currentColor;height:3px;display:block}
.snd[aria-pressed="true"] .bars i{animation:eq .9s ease-in-out infinite}
.snd[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.15s}
.snd[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.3s}
.snd[aria-pressed="true"] .bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
@media(max-width:1180px){.snd span.lbl{display:none}}
@media(max-width:940px){}
/* ---------- menu déroulant services ---------- */
.has-sub{position:relative}
.has-sub>button{background:none;border:0;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
text-transform:uppercase;padding:9px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.has-sub>button:hover,.has-sub.open>button{color:var(--paper)}
.has-sub>button svg{width:9px;height:9px;transition:transform .3s var(--ease)}
.has-sub.open>button svg{transform:rotate(180deg)}
.has-sub > .sub{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--slate);border:1px solid var(--line);
padding:6px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.has-sub.open > .sub{opacity:1;visibility:visible;transform:none}
.has-sub > .sub a{padding:11px 14px!important;font-size:12px!important;color:var(--muted)}
.has-sub > .sub a:hover{color:var(--ink);background:var(--amber)}
.has-sub > .sub a::after{display:none!important}
@media(max-width:940px){
.has-sub{width:100%}
.has-sub>button{width:100%;justify-content:space-between;padding:15px 0;font-size:14px;border-bottom:1px solid var(--line)}
.has-sub > .sub{position:static;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:transparent;padding:0 0 0 14px;display:none}
.has-sub.open > .sub{display:flex}
}
/* ---------- services : grille en tuiles ---------- */
.tiles6{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tile6{position:relative;background:var(--ink);min-height:250px;display:flex;flex-direction:column;justify-content:flex-end;
padding:26px;overflow:hidden;text-decoration:none;isolation:isolate}
.tile6 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.36;z-index:-2;
transform:scale(1.03);transition:transform 1s var(--ease),opacity .5s}
.tile6::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(11,13,16,.35),rgba(11,13,16,.9))}
.tile6:hover img{transform:scale(1.04);opacity:.5}
.tile6 .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--amber);margin-bottom:auto}
.tile6 h3{font-size:26px;margin-bottom:6px;transition:color .3s}
.tile6:hover h3{color:var(--amber)}
.tile6 p{font-size:14.5px;color:#BEB7AB;margin:0}
.tile6 .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
margin-top:14px;display:inline-flex;gap:8px;align-items:center}
.tile6 .go i{display:block;width:28px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tile6:hover .go i{transform:scaleX(1)}
/* ---------- sélecteur de formulaire ---------- */
.picker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.picker button{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
padding:11px 16px;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
transition:border-color .2s,color .2s,background .2s}
.picker button:hover{border-color:var(--amber);color:var(--amber)}
.picker button[aria-selected="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.fpanel{display:none}
.fpanel.on{display:block;animation:fadeUp .45s var(--ease) both}
.fmeta b{color:var(--amber);font-weight:400}
.okbox{border:1px solid #4ADE80;background:rgba(74,222,128,.07);padding:18px 20px;margin:0}
.okbox strong{color:#4ADE80;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:6px}
.okbox span{font-size:14.5px;color:#D9D3C8}
/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 0;cursor:pointer;font-family:var(--display);font-size:19px;text-transform:uppercase;
list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--amber)}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--amber);font-size:20px;flex-shrink:0;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:15.5px;padding:0 0 20px;margin:0;max-width:66ch}
/* ─────────────────────────────── */
/* ---------- pictogrammes ---------- */
.ic{width:1em;height:1em;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.14em}
.ic.lg{width:30px;height:30px;stroke-width:1.4}
.ic.xl{width:40px;height:40px;stroke-width:1.25}
/* ---------- statut ouvert/fermé calculé ---------- */
.dot.shut{background:#F0857A;animation:none;box-shadow:0 0 0 3px rgba(240,133,122,.16)}
/* ---------- bandeau horaires haut de page ---------- */
.hoursbar{background:var(--slate);border-bottom:1px solid var(--line)}
.hoursbar .in{max-width:1160px;margin:0 auto;padding:16px var(--pad);display:flex;flex-wrap:wrap;
align-items:center;gap:10px 30px;font-family:var(--mono);font-size:12.5px}
.hoursbar .day{display:flex;gap:9px;align-items:center;color:var(--muted);white-space:nowrap}
.hoursbar .day.now{color:var(--amber)}
.hoursbar .day b{color:var(--paper);font-weight:400;font-variant-numeric:tabular-nums}
.hoursbar .day.now b{color:var(--amber)}
.hoursbar .hh{margin-left:auto;color:var(--amber);display:flex;gap:8px;align-items:center;white-space:nowrap}
/* ---------- listes à pictos ---------- */
.iclist{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.iclist li{display:grid;grid-template-columns:24px 1fr;gap:0 14px;align-items:start;font-size:15.5px;color:var(--muted)}
.iclist li .ic{width:20px;height:20px;color:var(--amber);margin-top:3px}
.iclist li b{color:var(--paper);font-weight:600;display:block}
.band-amber .iclist li{color:rgba(11,13,16,.78)}
.band-amber .iclist li .ic{color:var(--ink)}
.band-amber .iclist li b{color:var(--ink)}
/* ---------- filtres carte ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px;
padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-right:6px}
.filters button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
padding:8px 13px;background:transparent;border:1px solid var(--line);color:var(--muted);cursor:pointer;
display:inline-flex;align-items:center;gap:7px;transition:border-color .2s,color .2s,background .2s}
.filters button:hover{border-color:var(--amber);color:var(--amber)}
.filters button[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.band-amber .filters{border-bottom-color:rgba(11,13,16,.28)}
.band-amber .filters .lb{color:rgba(11,13,16,.74)}
.band-amber .filters button{border-color:rgba(11,13,16,.3);color:rgba(11,13,16,.72)}
.band-amber .filters button:hover{border-color:var(--ink);color:var(--ink)}
.band-amber .filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--amber)}
.item[hidden]{display:none}
.tally{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px}
.band-amber .tally{color:rgba(11,13,16,.74)}
/* ---------- badges de la carte ---------- */
.badges{display:inline-flex;gap:6px;margin-left:8px;vertical-align:1px}
.bdg{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
border:1px solid currentColor;padding:2px 6px}
.bdg.deg{color:var(--amber)}
.bdg.na{color:#8CC183}
.band-amber .bdg.deg{color:var(--ink)}
.band-amber .bdg.na{color:#2F5C2B}
/* ---------- flux instagram ---------- */
.igrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.igrid a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--slate-2);display:block}
.igrid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .4s}
.igrid a::after{content:"";position:absolute;inset:0;background:rgba(242,160,7,.12);opacity:0;transition:opacity .35s}
.igrid a:hover img{transform:scale(1.04)}
.igrid a:hover::after{opacity:1}
.ighead{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.ighandle{font-family:var(--mono);font-size:13px;color:var(--amber);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.ighandle:hover{text-decoration:underline}
/* ---------- statuts billetterie ---------- */
.st{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;white-space:nowrap}
.st.free{color:#8CC183}.st.few{color:var(--amber)}.st.full{color:#F0857A}.st.new{color:var(--yellow)}
.event .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.gtag{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 8px}
.event .hrs{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:6px}
.event .hrs span{display:inline-flex;gap:6px;align-items:center}
.event .fans{font-size:14px;color:var(--muted);margin-top:8px;font-style:italic}
.ics{background:none;border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;cursor:pointer;display:inline-flex;gap:7px;
align-items:center;transition:border-color .2s,color .2s}
.ics:hover{border-color:var(--amber);color:var(--amber)}
.evactions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@media(max-width:660px){.evactions{align-items:flex-start;grid-column:2}}
/* ---------- tableau capacités ---------- */
.cap{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.cap th,.cap td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.cap th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:400}
.cap td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.cap tbody tr:hover{background:var(--slate-2)}
/* ─────────────────────────────── */
/* ---------- héros vidéo réelle ---------- */
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.hero .veil{background:
radial-gradient(120% 80% at 72% 18%,rgba(242,160,7,.16) 0%,transparent 58%),
linear-gradient(180deg,rgba(11,13,16,.68) 0%,rgba(11,13,16,.34) 36%,rgba(11,13,16,.97) 100%)}
.vidnote{position:absolute;right:var(--pad);bottom:20px;z-index:4;font-family:var(--mono);font-size:11px;
letter-spacing:.14em;text-transform:uppercase;color:rgba(243,240,234,.55)}
/* ---------- lecteur vidéo plein ---------- */
.player{position:relative;border:1px solid var(--line);background:#000;overflow:hidden}
.player video{width:100%;height:auto;display:block}
.player .ovl{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(11,13,16,.25),rgba(11,13,16,.6));
cursor:pointer;transition:opacity .45s var(--ease)}
.player.playing .ovl{opacity:0;pointer-events:none}
.player .play{width:82px;height:82px;border-radius:50%;background:var(--amber);display:grid;place-items:center;
transition:transform .35s var(--ease),background .3s}
.player .ovl:hover .play{transform:scale(1.09);background:var(--yellow)}
.player .play svg{width:28px;height:28px;fill:var(--ink);margin-left:4px}
.player .lb{position:absolute;bottom:22px;left:24px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--paper)}
/* ---------- mur d'affiches ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.wall figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--slate-2);
transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.wall figure:hover{transform:translateY(-6px);border-color:var(--amber);box-shadow:0 22px 44px rgba(0,0,0,.5)}
.wall img{width:100%;height:auto;display:block}
.wall figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--muted);padding:12px 14px;border-top:1px solid var(--line)}
.wall figure:hover figcaption{color:var(--amber)}
/* ---------- fiche brasserie ---------- */
.brew{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.brewc{background:var(--slate);padding:24px;display:flex;flex-direction:column;gap:8px;transition:background .3s}
.brewc:hover{background:var(--slate-2)}
.brewc .loc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);display:flex;gap:7px;align-items:center}
.brewc h3{font-size:20px}
.brewc .yr{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.brewc p{font-size:14.5px;color:var(--muted);margin:0}
.brewc .refs{font-family:var(--mono);font-size:11px;color:var(--paper);border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.flag{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;border:1px solid currentColor;padding:2px 6px;margin-left:7px}
.flag.nord{color:var(--yellow)}.flag.be{color:#8CC183}
/* ---------- glossaire ---------- */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.gterm{padding-left:0}
.gterm dt{font-family:var(--display);font-size:20px;text-transform:uppercase;margin-bottom:5px}
.gterm dd{margin:0;font-size:15px;color:var(--muted)}
.gterm dd b{color:var(--paper);font-weight:600}
/* ---------- offres entreprise ---------- */
.offer{display:grid;grid-template-columns:auto 1fr auto;gap:0 22px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.offer:first-of-type{border-top:1px solid var(--line)}
.offer .ico{width:46px;height:46px;border:1px solid var(--line);display:grid;place-items:center;color:var(--amber);transition:border-color .3s,background .3s}
.offer:hover .ico{border-color:var(--amber);background:rgba(242,160,7,.08)}
.offer h3{font-size:21px;margin-bottom:5px}
.offer p{margin:0;font-size:15px;color:var(--muted)}
.offer .price{font-family:var(--mono);font-size:12px;color:var(--amber);text-align:right;white-space:nowrap;padding-top:4px}
@media(max-width:660px){.offer{grid-template-columns:auto 1fr}.offer .price{grid-column:2;text-align:left;margin-top:8px}}
/* ---------- planches & shooters ---------- */
.snacks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.snack{border:1px solid var(--line);background:var(--slate);padding:22px;transition:border-color .3s,transform .3s}
.snack:hover{border-color:var(--amber);transform:translateY(-4px)}
.snack .pr{font-family:var(--display);font-size:27px;color:var(--amber);float:right;line-height:1;margin-left:12px}
.snack h3{font-size:19px;margin-bottom:6px}
.snack p{margin:0;font-size:14.5px;color:var(--muted)}
/* ════════════════════════════════════════════════════════════════════
CORRECTIONS issues de l'audit Chromium du 03/09/2026
Mesures faites sur les 14 pages, en 1440 et 390 de large.
════════════════════════════════════════════════════════════════════ */
/* 1 — Titres colles a l'element suivant, sur 34 emplacements.
Le prototype s'appuyait sur les marges par defaut du navigateur pour les
,
et . Le reset de Bootstrap, charge par Odoo, les met a
zero, et mes propres `h1,h2,h3{margin:0}` ne compensaient rien : le titre
touchait le paragraphe. On repose l'espacement sur l'adjacence, ce qui
n'ajoute rien quand le titre est seul dans son bloc. */
.miro-site h1 + *,
.miro-site h2 + *,
.miro-site h3 + *,
.miro-site h4 + * { margin-top: 18px; }
.miro-site footer .fh + * { margin-top: 0; }
.miro-site h3 + * { margin-top: 12px; }
.miro-site .head h2 + p,
.miro-site .head h2 + .lede { margin-top: 16px; }
.miro-site h2 + table.hours { margin-top: 22px; }
/* 2 — Bande de chiffres de l'accueil : la valeur et la legende etaient en
`inline`, donc sur la meme ligne, collees, et le `margin-top` de la
legende ne s'appliquait pas. On lisait « TOUS LES JEUDIS18h — 21h ». */
.miro-site .strip .v,
.miro-site .strip .n { display: block; }
/* 3 — Le numero de telephone sortait de la barre de navigation de 21 px, sur
les 14 pages : son texte se coupait en deux lignes des que la barre etait
serree, depassant la hauteur fixe de 74 px. On l'empeche de se couper, on
l'empeche de rétrecir, et on le retire sous 1180 px ou la place manque
vraiment — le menu burger prend le relais. */
.miro-site .navtel { white-space: nowrap; flex: 0 0 auto; }
.miro-site .nav nav { min-width: 0; }
/* Le numero reste dans l'en-tete jusqu'a 720 px : entre tablette et petit
portable il y a la place, et il n'y a aucune raison de retirer un numero de
telephone d'un site de bar. Sous 720 px, la barre d'action fixe le reprend. */
@media (max-width: 720px) { .miro-site .navtel { display: none; } }
/* 4 — Contrastes sous le seuil lisible, mesures en luminance relative.
La mention legale sur l'alcool etait a 3,33:1 : elle doit se lire. */
.miro-site footer span,
.miro-site .abus { color: #9E978B; } /* 3,33:1 -> 5,4:1 */
.miro-site .flag.nord { color: #FBBF00; } /* 1,28:1 -> 9,8:1 */
.miro-site .flag.be { color: #A8D6A0; } /* 1,03:1 -> 8,9:1 */
/* 5 — Un bloc depassait de son conteneur de 30 px sur deux pages, faute de
pouvoir se rétrecir dans sa grille. */
.miro-site .wrap > div { min-width: 0; }
/* ════════════════════════════════════════════════════════════════════
GARDE ANTI-COLLISION AVEC BOOTSTRAP
Six de mes noms de classe existent aussi dans Bootstrap, que le bundle
d'Odoo charge avant cette feuille : .nav .card .grid .mark .tag .btn.
Ma feuille passant en dernier, mes declarations gagnent — mais uniquement
celles que j'ecris. Toute propriete que Bootstrap pose et que je ne
redeclare pas reste active. D'ou ce bloc, qui neutralise explicitement les
trois fuites mesurees dans Chromium.
════════════════════════════════════════════════════════════════════ */
/* .nav — Bootstrap y met `flex-wrap: wrap`. Le numero de telephone passait a
la ligne et sortait de la barre de 21 px sur les 14 pages. */
.miro-site .nav { flex-wrap: nowrap; }
/* .grid — Bootstrap y met `grid-template-rows: repeat(var(--rows,1), 1fr)`,
ce qui force toutes mes grilles de cartes sur une seule rangee : au-dela de
trois cartes, la deuxieme rangee etait ecrasee. `grid-template-columns` est
deja repris par .g2 et .g3, mais pas les rangees. */
.miro-site .grid { grid-template-rows: auto; grid-template-columns: none; }
.miro-site .grid.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.miro-site .grid.g3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
/* .mark — Bootstrap traite `mark` comme du surlignage : padding et couleur de
fond. C'est la pastille du logo dans la barre de navigation. */
.miro-site .mark { padding: 0; color: inherit; }
/* Les pastilles de pays sur fond ambre : jaune sur ambre ne se lit pas.
Mesure : 1,28:1 et 1,30:1, seuil 4,5:1. */
.miro-site .band-amber .flag.nord,
.miro-site .band-amber .flag.be { color: rgba(11, 13, 16, .78); }
/* ── retouches issues de la relecture des captures ──────────────────── */
/* L'indice « faites défiler » est en absolu a left:195px : sur un ecran de
390 px il recouvrait le bouton « La programmation » de 25x32 px. Il est
decoratif, et sur mobile le doute sur la suite du contenu n'existe pas. */
@media (max-width: 700px) { .miro-site .scrollcue { display: none; } }
/* Les libelles du menu se coupaient en deux lignes des 1440 px (« LA / CARTE »,
« NOS / SERVICES »), ce qui desalignait la barre. */
.miro-site .nav nav a,
.miro-site .has-sub > button { white-space: nowrap; }
/* ── barre de navigation : place reelle ─────────────────────────────────
Mesures a 1280, 1440 et 1600 px : les liens reclament 619 px, la boite ne
leur en accordait que 579 (flex-shrink par defaut), et les deux derniers
liens passaient sous le bouton « Ambiance » — 24 px de chevauchement a
toutes les largeurs de bureau.
Trois reglages, additionnes pour couvrir 1180 -> 1920 :
- les liens ne rétrecissent plus sous leur contenu ;
- la barre s'autorise 1240 px au lieu de 1160 (besoin total : 1073) ;
- sous 1400 px le libelle « Ambiance » s'efface, les barres animees et
l'aria-label suffisent, ce qui libere 62 px.
──────────────────────────────────────────────────────────────────────── */
.miro-site .nav { max-width: 1240px; }
.miro-site .nav nav { flex: 0 0 auto; }
@media (max-width: 1400px) { .miro-site .snd .lbl { display: none; } }
/* ════════════════════════════════════════════════════════════════════
ECHELLE TYPOGRAPHIQUE — refonte du 03/09/2026
════════════════════════════════════════════════════════════════════ */
/* Le niveau intermediaire manquait : 112 / 62 / 21 devient 112 / 62 / 38.
Et l'interlignage d'affichage (.92) est reserve aux deux premiers niveaux :
a 21 px il tassait le texte au lieu de le tenir. */
h3 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.08; }
.miro-site .card h3,
.miro-site .event h3,
.miro-site .tile6 h3,
.miro-site .brewc h3,
.miro-site .offer h3,
.miro-site .snack h3,
.miro-site .menucat > h3 { line-height: 1.1; }
/* Un titre trop large se lit mal : on plafonne la mesure des grands niveaux,
sans toucher aux titres de composants qui vivent dans une colonne etroite. */
.miro-site .head h2,
.miro-site .pagehead h1 { max-width: 26ch; }
.miro-site .head h3 { max-width: 34ch; }
/* Chapeau et corps de texte se distinguent enfin. Le corps passe de 21 a
18,5 px : la mesure passe de 59 a 69 caracteres, dans la fourchette
confortable, et le chapeau reste au-dessus. */
p { font-size: clamp(16.5px, 1.15vw, 18.5px); line-height: 1.62; }
.miro-site .lede { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; }
/* La creme du chapeau ne vaut que sur fond sombre : sur la bande ambre elle
tombait a 1,44:1. */
.miro-site .lede { color: #D9D3C8; }
.miro-site .band-amber .lede,
.miro-site .band-amber p { color: rgba(11, 13, 16, .74); }
p { text-wrap: pretty; }
/* Les blocs de texte long ne depassent pas 70 caracteres. */
.miro-site .head p,
.miro-site .head .lede,
.miro-site .prose p { max-width: 68ch; }
/* Le sur-titre est une etiquette, pas une phrase : on l'empeche de s'etaler
sur toute la largeur, ce qui le faisait flotter loin de son titre. */
.miro-site .eyebrow { width: fit-content; margin-bottom: 14px; font-size: 11.5px; }
/* ════════════════════════════════════════════════════════════════════
FORMULAIRES — reconstruction du 03/09/2026
════════════════════════════════════════════════════════════════════ */
/* Deux etapes numerotees plutot qu'une liste plate de onze champs. Le trait
au-dessus de la legende sert de respiration entre les etapes. */
.miro-site form { display: block; max-width: 620px; }
.miro-site form fieldset { border: 0; margin: 0 0 38px; padding: 0;
display: grid; gap: 20px; }
.miro-site form legend { display: flex; align-items: center; gap: 11px;
width: 100%; padding: 0 0 16px; margin: 0 0 4px;
border-bottom: 1px solid var(--line);
font-family: var(--mono); font-size: 11.5px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--muted); }
.miro-site form legend .step {
display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 auto;
border: 1px solid var(--amber); color: var(--amber);
font-size: 11px; letter-spacing: 0; border-radius: 50%; }
/* Le libelle repasse en Barlow : a 14,5 px il se lit d'un coup d'oeil, la ou
le mono 11 px a 1,54 px d'interlettrage obligeait a dechiffrer. */
.miro-site .f { display: grid; gap: 7px; }
.miro-site .f label { display: flex; align-items: baseline; gap: 9px;
font-family: var(--body); font-size: 14.5px;
font-weight: 500; letter-spacing: 0;
text-transform: none; color: #C9C2B6; margin: 0; }
.miro-site .f label .opt { font-family: var(--mono); font-size: 11.5px;
letter-spacing: .12em; text-transform: uppercase;
color: #8E877D; } /* 3,54:1 -> 4,6:1 */
.miro-site .f .hint { font-family: var(--mono); font-size: 12px;
line-height: 1.5; color: var(--muted); margin: 0;
max-width: 52ch; }
/* Les champs gagnent en presence, et le focus devient visible au clavier :
bordure ambre plus un halo, ce que la seule bordure ne donnait pas. */
.miro-site .f input,
.miro-site .f select,
.miro-site .f textarea { padding: 14px 15px; font-size: 16px;
border-color: #2E343E; }
.miro-site .f input:hover,
.miro-site .f select:hover,
.miro-site .f textarea:hover { border-color: #3D4550; }
.miro-site .f input:focus,
.miro-site .f select:focus,
.miro-site .f textarea:focus { border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(242, 160, 7, .18); }
.miro-site .f textarea { min-height: 132px; line-height: 1.55; }
/* Le selecteur gardait la fleche native, illisible sur fond sombre. */
.miro-site .f select { appearance: none; -webkit-appearance: none;
padding-right: 42px; cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23F2A007' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px 8px; }
/* L'erreur n'apparait qu'une fois le champ quitte, jamais a la frappe. */
.miro-site .f input.faux,
.miro-site .f select.faux,
.miro-site .f textarea.faux { border-color: #E06A4E;
box-shadow: 0 0 0 3px rgba(224, 106, 78, .16); }
.miro-site .f input.touche:not(.faux):valid { border-color: #37414C; }
/* Envoi : bouton pleine largeur sur mobile, ou l'on tape au pouce. */
.miro-site .fsend { display: flex; flex-wrap: wrap; align-items: center;
gap: 18px 22px; margin-top: 4px; }
.miro-site .fsend .fnote { font-family: var(--mono); font-size: 11.5px;
line-height: 1.6; color: var(--muted); margin: 0;
max-width: 34ch; }
.miro-site .fsend .fnote b { color: var(--paper); font-weight: 400; }
.miro-site .btn.envoi { opacity: .55; cursor: progress; }
.miro-site .errbox { border: 1px solid #E06A4E;
background: rgba(224, 106, 78, .08);
padding: 18px 20px; margin: 26px 0 0; }
.miro-site .errbox strong{ display: block; margin-bottom: 6px; color: #E06A4E;
font-family: var(--mono); font-size: 12px;
letter-spacing: .1em; text-transform: uppercase; }
.miro-site .errbox span { font-size: 14.5px; color: #D9D3C8; }
.miro-site .okbox { margin: 26px 0 0; }
/* Les huit demandes rangees en trois familles : on choisit son intention
avant de choisir son formulaire. */
.miro-site .picker { display: flex; flex-wrap: wrap; gap: 12px 34px;
margin-bottom: 40px; padding-bottom: 30px;
border-bottom: 1px solid var(--line); }
.miro-site .pgroup { display: flex; flex-wrap: wrap; align-items: center;
gap: 8px; }
.miro-site .pgroup .plabel { width: 100%; font-family: var(--mono);
font-size: 11.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--amber);
margin-bottom: 3px; }
@media (max-width: 640px) {
.miro-site .fsend { flex-direction: column; align-items: stretch; }
.miro-site .fsend .btn { width: 100%; justify-content: center; }
.miro-site .fsend .fnote { max-width: none; }
.miro-site form fieldset { margin-bottom: 30px; }
}
/* ════════════════════════════════════════════════════════════════════
EVENEMENTS — cartes alimentees par event.event
════════════════════════════════════════════════════════════════════ */
.miro-site .evgrid { display: grid; gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.miro-site .event { display: flex; flex-direction: column;
background: var(--slate); border: 1px solid var(--line);
overflow: hidden;
transition: border-color .35s var(--ease),
transform .35s var(--ease); }
.miro-site .event:hover { border-color: var(--amber); transform: translateY(-5px); }
/* L'affiche est le premier argument : on lui laisse le format portrait des
affiches de soiree plutot que de la recadrer en bandeau. */
.miro-site .event .evimg { display: block; position: relative; width: 100%;
flex: 0 0 auto; aspect-ratio: 4 / 5; overflow: hidden; }
.miro-site .event .evimg .bg { position: absolute; inset: 0;
background-size: cover; background-position: center;
transition: transform .6s var(--ease); }
.miro-site .event:hover .evimg .bg { transform: scale(1.04); }
.miro-site .event .evimg .noaff { display: grid; place-items: center;
background: var(--slate-2); color: #3D4550; }
.miro-site .event .evimg::after { content: ""; position: absolute; inset: auto 0 0 0;
height: 45%; pointer-events: none;
background: linear-gradient(transparent, rgba(11,13,16,.72)); }
.miro-site .event .evbody { display: flex; flex-direction: column; gap: 9px;
padding: 20px 21px 22px; flex: 1; }
.miro-site .event .evdate,
.miro-site .event .evheure { display: flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 11.5px;
letter-spacing: .09em; text-transform: uppercase;
margin: 0; }
.miro-site .event .evdate { color: var(--amber); }
.miro-site .event .evheure { color: var(--muted); letter-spacing: .06em; }
.miro-site .event .evplaces{ color: var(--paper); }
.miro-site .event h3 { margin: 0; font-size: 20px; line-height: 1.15; }
.miro-site .event h3 a { text-decoration: none; }
.miro-site .event:hover h3 a { color: var(--amber); }
.miro-site .event .evact { display: flex; flex-wrap: wrap; align-items: center;
gap: 10px 16px; margin-top: auto; padding-top: 15px; }
.miro-site .event .evcal { display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 11.5px;
letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); text-decoration: none;
transition: color .25s; }
.miro-site .event .evcal:hover { color: var(--amber); }
.miro-site .event .evcal svg { flex: 0 0 auto; stroke: currentColor; fill: none;
stroke-width: 1.6; }
.miro-site .event .evdate svg { stroke: currentColor; fill: none; stroke-width: 1.6;
flex: 0 0 auto; }
/* Les soirees passees sont un temoignage, pas une offre : on les met en
retrait pour qu'elles ne concurrencent pas les dates a venir. */
.miro-site .evgrid.passe .event { opacity: .82; }
.miro-site .evgrid.passe .event:hover{ opacity: 1; }
.miro-site .evgrid.passe .evdate { color: var(--muted); }
/* ════════════════════════════════════════════════════════════════════
REASSURANCES — bande de l'accueil
════════════════════════════════════════════════════════════════════ */
.miro-site .reassure .rlist {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 1px; background: var(--line);
grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
border: 1px solid var(--line); }
.miro-site .reassure li {
background: var(--slate); padding: 24px 24px 22px;
display: grid; gap: 7px; align-content: start;
transition: background .3s var(--ease); }
.miro-site .reassure li:hover { background: var(--slate-2); }
.miro-site .reassure svg {
stroke: var(--amber); fill: none; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round; margin-bottom: 3px; }
.miro-site .reassure b {
font-family: var(--display); font-weight: 400; font-size: 19px;
line-height: 1.14; text-transform: uppercase; letter-spacing: .01em; }
.miro-site .reassure span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.miro-site .reassure a {
justify-self: start; margin-top: 4px;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
text-transform: uppercase; color: var(--amber); text-decoration: none;
border-bottom: 1px solid transparent; transition: border-color .25s; }
.miro-site .reassure a:hover { border-bottom-color: var(--amber); }
.miro-site .reassure .wrap { padding-top: 0; padding-bottom: 0; }
/* ════════════════════════════════════════════════════════════════════
EMPLACEMENT LOGO PAR BRASSERIE
Cinq logos sur treize brasseries : l'emplacement affiche le logo quand on
l'a, le nom en typographie d'affichage sinon. La fiche tient dans les deux
cas, et un logo obtenu plus tard se depose sans retoucher la mise en page.
════════════════════════════════════════════════════════════════════ */
.miro-site .brewc .brandslot {
display: flex; align-items: center; justify-content: flex-start;
height: 52px; margin-bottom: 15px; }
.miro-site .brewc .brandslot img {
max-height: 52px; width: auto; max-width: 172px;
opacity: .88; transition: opacity .3s var(--ease); }
.miro-site .brewc:hover .brandslot img { opacity: 1; }
/* Repli : le picto houblon en filigrane. Repeter le nom de la brasserie
ferait doublon avec le titre juste en dessous. */
.miro-site .brewc .brandslot.vide svg {
stroke: rgba(242, 160, 7, .28); fill: none; stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round; }
/* ════════════════════════════════════════════════════════════════════
PICTOGRAMMES DE FAMILLE — carte 2026
Un repere visuel par famille de la carte, dessine dans le jeu du site
(grille 24, trait 1,6) plutot qu'importe. Le picto herite de la couleur du
titre : ambre sur fond sombre, encre sur la bande ambree — donc il reste
lisible dans les deux bandes sans regle supplementaire.
════════════════════════════════════════════════════════════════════ */
.miro-site .menucat > h3 {
display: flex; align-items: center; gap: .46em; line-height: 1.1; }
.miro-site .ic.fam {
width: .86em; height: .86em; stroke-width: 1.3;
opacity: .72; flex-shrink: 0; vertical-align: baseline; }
/* Sirops et jus : deux notes de bas de famille, cote a cote au-dela de 720px,
empilees en dessous. */
.miro-site .parfums {
display: grid; grid-template-columns: 1fr; gap: 18px;
margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 720px) {
.miro-site .parfums { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.miro-site .parfums > div { display: grid; grid-template-columns: auto 1fr;
column-gap: 10px; row-gap: 2px; align-items: start; }
.miro-site .parfums .ic.fam {
width: 19px; height: 19px; opacity: 1; color: var(--amber);
grid-row: span 2; margin-top: 2px; }
.miro-site .parfums b {
font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
text-transform: uppercase; color: var(--paper); font-weight: 700; }
.miro-site .parfums span { font-size: 14px; color: var(--muted); line-height: 1.55; }
.miro-site .band-slate .parfums b { color: var(--paper); }
/* ════════════════════════════════════════════════════════════════════
COLLISION .sub — nav contre carte
`.sub` designait a la fois le menu deroulant de la nav (absolu, masque au
repos) et le sous-titre de famille de la carte. La regle nue du menu
l'emportait : les sous-titres etaient invisibles en ligne depuis le depart.
Le menu est desormais borne a `.has-sub > .sub` ; le sous-titre se reaffirme
ici, pour que la collision ne puisse pas revenir par une autre regle.
════════════════════════════════════════════════════════════════════ */
.miro-site .menucat > .sub {
position: static; display: block; opacity: 1; visibility: visible;
transform: none; min-width: 0; padding: 0; border: 0; background: none;
box-shadow: none; }
/* ════════════════════════════════════════════════════════════════════
LOGOS DE MARQUE — deux traitements
Bon Secours et Cuvee des Trolls sont des silhouettes creme : leur logo est
sombre a l'origine, le detourage donne une forme nette. Kasteel et
Desperados dessinent deja clair sur plaque sombre — la meme silhouette les
reduisait a un rectangle plein (remplissage mesure 76 % et 70 %). Ceux-la
gardent donc leurs couleurs, a pleine opacite, et un peu plus de hauteur :
ce sont des blasons, plus hauts que larges.
════════════════════════════════════════════════════════════════════ */
.miro-site .brewc .brandslot.couleur { height: 60px; }
.miro-site .brewc .brandslot.couleur img {
max-height: 60px; max-width: 168px; opacity: 1; }
/* ════════════════════════════════════════════════════════════════════
REPLI SANS LOGO, ET FICHE SEULE
Neuf fiches sur treize n'ont pas de logo : le repli n'est plus l'exception,
il porte la page. A .28 d'opacite il se lisait comme une salissure — on le
monte, sans le faire passer pour une marque.
Et `.brew` est en auto-fit : une section a une seule fiche l'etirait sur
toute la largeur, texte a 60 %. On borne la colonne dans ce cas.
════════════════════════════════════════════════════════════════════ */
.miro-site .brewc .brandslot.vide svg {
width: 34px; height: 34px;
stroke: rgba(242, 160, 7, .5); stroke-width: 1.4; }
.miro-site .brewc:hover .brandslot.vide svg { stroke: rgba(242, 160, 7, .78); }
/* Borner la colonne ne suffisait pas : `.brew` porte un fond et une bordure,
donc le conteneur restait pleine largeur et laissait un grand panneau vide a
droite. C'est le conteneur qu'il faut faire retrecir. */
.miro-site .brew.seule {
grid-template-columns: minmax(268px, 440px);
width: max-content; max-width: 100%; }
/* ════════════════════════════════════════════════════════════════════
FICHES BRASSEUR — treize pages de fond
Une page par brasserie, parce que « brasserie tandem wambrechies » et
« anosteke douai » sont deux requetes differentes et qu'une page unique ne
peut pas etre la meilleure reponse aux deux.
La colonne de texte est bornee a 68 caracteres : au-dela, l'oeil perd la
ligne suivante. C'est la seule mesure qui compte sur un texte long.
════════════════════════════════════════════════════════════════════ */
/* fil d'Ariane */
.miro-site .ariane { padding: 96px 0 0; font-family: var(--mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase; }
.miro-site .ariane .wrap { display: flex; flex-wrap: wrap; gap: 9px;
align-items: center; color: var(--muted); }
.miro-site .ariane a { color: var(--muted); text-decoration: none;
border-bottom: 1px solid transparent; transition: color .2s var(--ease); }
.miro-site .ariane a:hover { color: var(--amber); border-bottom-color: var(--amber); }
.miro-site .ariane span[aria-hidden] { opacity: .35; }
.miro-site .ariane [aria-current] { color: var(--paper); }
/* en-tete de fiche */
.miro-site .fichehead { padding: 26px 0 clamp(38px, 5vw, 62px);
border-bottom: 1px solid var(--line); }
.miro-site .fichehead h1 { margin: 10px 0 16px; }
.miro-site .fichehead .lede { max-width: 62ch; }
.miro-site .fichehead .eyebrow { display: flex; align-items: center; gap: 9px;
flex-wrap: wrap; }
.miro-site .brandslot.big { height: 76px; margin-bottom: 22px; }
.miro-site .brandslot.big img { max-height: 76px; width: auto; max-width: 240px;
height: auto; }
.miro-site .brandslot.big.couleur img { max-height: 84px; }
/* corps de texte long */
.miro-site .prose { max-width: 68ch; }
.miro-site .prose h2 { margin-bottom: 18px; }
.miro-site .prose p { font-size: 17px; line-height: 1.72; color: var(--paper-2);
margin-bottom: 17px; }
.miro-site .prose p:last-child { margin-bottom: 0; }
.miro-site .prose b, .miro-site .prose strong { color: var(--paper);
font-weight: 600; }
.miro-site .prose i, .miro-site .prose em { font-style: italic; color: var(--paper); }
.miro-site .band-slate .prose p { color: var(--paper-2); }
/* badge « pression » / « bouteille » a cote du degre */
.miro-site .bdg:not(.deg):not(.na) { border-color: rgba(243,240,234,.2);
color: var(--muted); }
.miro-site .band-amber .bdg:not(.deg):not(.na) {
border-color: rgba(11,13,16,.28); color:rgba(11,13,16,.74); }
/* precedent / suivant : le maillage interne, visible */
.miro-site .voisins { display: grid; grid-template-columns: 1fr; gap: 1px;
background: var(--line); border: 1px solid var(--line); }
@media (min-width: 720px) { .miro-site .voisins { grid-template-columns: 1fr 1fr; } }
.miro-site .voisin { display: block; padding: 26px 24px; background: var(--slate);
text-decoration: none; transition: background .25s var(--ease); }
.miro-site .voisin:hover { background: var(--slate-2); }
.miro-site .voisin .k { display: block; font-family: var(--mono); font-size: 11.5px;
letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
margin-bottom: 9px; }
.miro-site .voisin b { display: block; font-family: var(--display);
font-size: 25px; font-weight: 400; text-transform: uppercase;
letter-spacing: .005em; color: var(--paper); line-height: 1.1; }
.miro-site .voisin .n { display: block; margin-top: 6px; font-size: 14px;
color: var(--muted); }
/* lien « lire l'histoire » sur les fiches de /brasseries */
.miro-site .brewc .lire { display: inline-flex; align-items: center; gap: 7px;
margin-top: 14px; font-family: var(--mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
text-decoration: none; border-bottom: 1px solid transparent;
transition: border-color .2s var(--ease); }
.miro-site .brewc .lire:hover { border-bottom-color: var(--amber); }
.miro-site .band-amber .brewc .lire { color: var(--ink); }
/* Le titre de colonne du pied est un h2 pour la hierarchie, pas pour la taille :
l'habillage vient de .fh, et on neutralise ici tout ce que les regles h2
generiques lui appliqueraient. */
.miro-site footer h2.fh { font-family: var(--mono); font-size: 11px;
line-height: 1.4; letter-spacing: .18em; text-transform: uppercase;
color: var(--amber); font-weight: 400; margin: 0 0 14px; }
/* ════════════════════════════════════════════════════════════════════
DIMENSIONS INTRINSEQUES ET MISE EN PAGE FLUIDE
Les attributs width/height sur ![]()
servent au navigateur a reserver la
place avant le chargement — c'est ce qui ramene le CLS a zero. Mais pris
au pied de la lettre ils figeraient l'image. `height:auto` retablit la
fluidite tout en conservant le rapport deduit des attributs.
════════════════════════════════════════════════════════════════════ */
.miro-site img[width][height] { height: auto; max-width: 100%; }
.miro-site .shot img[width][height],
.miro-site .bg img[width][height] { height: 100%; width: 100%; object-fit: cover; }
.miro-site .brandslot img[width][height] { height: auto; width: auto; }
/* ════════════════════════════════════════════════════════════════════
HAUTEUR RESERVEE DU BANDEAU DEFILANT
Cause mesuree du CLS 0,112 de l'accueil : `.marq .track` est vide dans le
HTML — c'est le script qui y ecrit les noms de bieres. Le bandeau naissait
donc a 33 px de haut (ses seuls paddings) puis passait a 54 px une fois
rempli, poussant de 21 px tout ce qui suit, hero compris. Le visiteur a
deja commence a lire quand la page bouge sous ses yeux.
On reserve la hauteur de la piste : la valeur suit exactement le
clamp(20px,2.4vw,30px) de la typographie du bandeau, interligne 1,1.
════════════════════════════════════════════════════════════════════ */
.miro-site .marq .track { min-height: calc(clamp(20px, 2.4vw, 30px) * 1.1); }
.miro-site .marq b { line-height: 1.1; }
/* ════════════════════════════════════════════════════════════════════
ICONOGRAPHIE HARMONISEE
Le picto d'un `.tag` ou d'un `.eyebrow` prend la couleur de son intitule et
se cale sur la ligne de base optique du texte en petites capitales. Il n'est
la que pour aider a reperer le bloc : jamais de picto sans intitule.
════════════════════════════════════════════════════════════════════ */
.miro-site .tag { display: inline-flex; align-items: center; gap: 7px; }
.miro-site .tag .ic { width: 13px; height: 13px; opacity: .85; }
.miro-site .eyebrow { display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; }
.miro-site .eyebrow .ic { width: 14px; height: 14px; color: var(--amber);
flex-shrink: 0; }
.miro-site .band-amber .eyebrow .ic { color: var(--ink); }
.miro-site .pagehead .eyebrow .ic { color: var(--amber); }
/* ════════════════════════════════════════════════════════════════════
ETAT VIDE DE L'AGENDA
Un titre suivi de sept cents pixels de noir ne dit pas « rien de prevu »,
il dit « ce site est casse ». Quand il n'y a aucune date, on l'ecrit, et on
renvoie sur le seul rendez-vous qui ne bouge jamais.
════════════════════════════════════════════════════════════════════ */
.miro-site .vide { border: 1px solid var(--line); background: var(--slate);
padding: clamp(24px, 4vw, 40px); }
.miro-site .vide p { margin: 0 0 16px; max-width: 56ch; color: var(--paper-2); }
.miro-site .vide p:last-child { margin-bottom: 0; }
.miro-site .vide b { color: var(--paper); }
/* ════════════════════════════════════════════════════════════════════
BARRE D'ACTION MOBILE
Sous 940 px, l'en-tete n'a plus la place du numero. Plutot que de le
masquer — ce que faisait l'ancienne regle, en promouvant au passage le
bouton d'ambiance sonore — on le sort de l'en-tete et on le pose en bas de
viewport, la ou le pouce arrive. Deux actions, pas plus : appeler, et venir.
Ce sont deux des quatre objectifs mesurables du projet.
════════════════════════════════════════════════════════════════════ */
.miro-site .actionbar { display: none; }
@media (max-width: 720px) {
.miro-site .actionbar {
display: grid; grid-template-columns: 1fr 1fr;
position: fixed; z-index: 60; left: 0; right: 0; bottom: 0;
gap: 1px; background: var(--line);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom, 0); }
.miro-site .actionbar a {
display: flex; align-items: center; justify-content: center; gap: 9px;
min-height: 52px; padding: 0 14px; text-decoration: none;
font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
text-transform: uppercase; }
.miro-site .actionbar .ab-tel { background: var(--amber); color: var(--ink); }
.miro-site .actionbar .ab-map { background: var(--slate); color: var(--paper); }
.miro-site .actionbar .ic { width: 16px; height: 16px; }
/* la barre masque le bas de page : on rend sa hauteur au document */
.miro-site { padding-bottom: 53px; }
/* le gadget sonore n'a rien a faire dans un en-tete de telephone */
.miro-site .snd { display: none; }
}
/* Le numero, repris en tete du menu deroule : c'est la qu'on le cherche
quand l'en-tete ne l'affiche plus. */
.miro-site .navtel-mob { display: none; }
@media (max-width: 720px) {
.miro-site .navtel-mob {
display: flex; align-items: center; gap: 9px;
font-family: var(--mono); font-size: 15px; color: var(--amber); }
.miro-site .navtel-mob .ic { width: 16px; height: 16px; }
}
/* ════════════════════════════════════════════════════════════════════
BARRE D'HORAIRES
`renderHoursBar()` la construisait, sept regles l'habillaient, et la balise
n'etait sur aucune page. Elle repond a la deuxieme des trois questions du
visiteur de 18 h, sans defilement.
════════════════════════════════════════════════════════════════════ */
.miro-site .hoursbar { display: flex; flex-wrap: wrap; gap: 0 18px;
margin-top: 14px; font-family: var(--mono); font-size: 12px;
letter-spacing: .06em; color: var(--muted); }
.miro-site .hoursbar b { color: var(--paper); font-weight: 400; }
.miro-site .hoursbar .now { color: var(--amber); }
.miro-site .hoursbar .now b { color: var(--amber); }
/* ════════════════════════════════════════════════════════════════════
CONTRASTE : LE DEGRE, ET LES BOUTONS SUR BANDE AMBRE
Deux echecs mesures que l'audit maison avait manques, parce qu'il compare la
couleur calculee au fond sans modeliser `opacity`, qui s'applique apres.
Le degre etait a 3,91:1 sur la bande ambre : `.bdg{opacity:.75}` par-dessus
une couleur pourtant conforme. L'opacite est retiree et remplacee par une
couleur volontairement choisie — meme discretion, contraste conforme.
Les boutons : `.btn` a le meme fond ET la meme bordure que la bande ambre,
donc aucune limite visible ; `.btn.ghost` y donnait 1,88:1. La correction
porte sur le systeme et non sur les deux appels fautifs, pour que le
prochain bouton pose sur une bande ambre soit juste sans qu'on y pense.
════════════════════════════════════════════════════════════════════ */
/* le degre, discret sans etre illisible */
.miro-site .bdg { opacity: 1; }
.miro-site .bdg.deg { color: rgba(242, 160, 7, .82); }
.miro-site .band-amber .bdg.deg { color: rgba(11, 13, 16, .74); }
.miro-site .band-amber .bdg:not(.deg):not(.na) { color:rgba(11,13,16,.74); }
.miro-site .bdg:not(.deg):not(.na) { color: rgba(243, 240, 234, .62); }
/* tout bouton pose sur une bande ambre bascule en variante sombre */
.miro-site .band-amber .btn:not(.dark):not(.darkghost) {
background: var(--ink); color: var(--amber); border-color: var(--ink); }
.miro-site .band-amber .btn:not(.dark):not(.darkghost)::before { background: #000; }
.miro-site .band-amber .btn:not(.dark):not(.darkghost):hover { color: var(--yellow); }
/* la variante secondaire sur ambre : encre sur transparent, pas papier */
.miro-site .btn.darkghost,
.miro-site .band-amber .btn.ghost {
background: transparent; color: var(--ink);
border-color: rgba(11, 13, 16, .45); }
.miro-site .btn.darkghost::before,
.miro-site .band-amber .btn.ghost::before { background: var(--ink); }
.miro-site .btn.darkghost:hover,
.miro-site .band-amber .btn.ghost:hover {
color: var(--amber); border-color: var(--ink); }
/* ════════════════════════════════════════════════════════════════════
MESSAGES D'ERREUR DE FORMULAIRE
La bordure rouge etait le seul vecteur de l'information — WCAG 1.4.1 et
3.3.1, tous deux de niveau A, tous deux invisibles pour Lighthouse. Le
message est desormais du texte, relie au champ par `aria-describedby`, donc
annonce. Le rouge reste, mais il n'est plus seul a porter le sens.
Contraste mesure : #FF9B7F sur #12151A = 7,4:1.
════════════════════════════════════════════════════════════════════ */
.miro-site .ferr {
display: flex; align-items: flex-start; gap: 7px;
margin: 7px 0 0; font-family: var(--mono); font-size: 12px;
line-height: 1.45; letter-spacing: .02em; color: #FF9B7F; }
.miro-site .ferr::before {
content: "!"; flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px;
border: 1px solid currentColor; border-radius: 50%;
font-size: 10px; font-weight: 700; line-height: 13px; text-align: center; }
.miro-site .f input.faux,
.miro-site .f select.faux,
.miro-site .f textarea.faux { border-color: #FF9B7F; }
/* ════════════════════════════════════════════════════════════════════
RETRAIT DES ECHAFAUDAGES
Trois motifs qui disent « gabarit » alors que le contenu, lui, ne pouvait
pas etre genere : le filet lateral colore, le titre a 112 px, et le vide
laisse par les marqueurs numerotes.
════════════════════════════════════════════════════════════════════ */
/* Le glossaire : fond plein et terme en typo d'affichage, plutot que le
filet ambre a gauche. Meme separation visuelle, sans le tic. */
.miro-site .gterm { border-left: 0; background: var(--slate);
padding: 20px 22px; border: 1px solid var(--line); }
.miro-site .gterm dt { font-family: var(--display); font-weight: 400;
font-size: 21px; text-transform: uppercase; letter-spacing: .005em;
color: var(--amber); margin-bottom: 8px; line-height: 1.05; }
.miro-site .gterm dd { margin: 0; color: var(--paper-2); }
/* Un titre au-dela de 96 px ne compose plus, il crie. `.pagehead h1` etait
deja a 84 px : c'est la bonne valeur, on la generalise. */
.miro-site h1 { font-size: clamp(44px, 8.2vw, 84px); }
/* Les tuiles et les cartes n'ont plus de numero : on rend la place au titre */
.miro-site .tile6 h3, .miro-site .card h3 { margin-top: 0; }
/* ════════════════════════════════════════════════════════════════════
FINITIONS MESUREES
════════════════════════════════════════════════════════════════════ */
/* Cellules orphelines des grilles auto-fit.
Le motif « fond de grille sombre + gap 1px » ne tient que si la grille est
pleine : a 1440 px, `.tiles6` laissait quatre cellules grises, soit 80 %
d'une rangee. En donnant au fond de grille la couleur des cartes, la cellule
vide devient invisible et la grille cesse de dependre du nombre d'elements.
Les filets sont rendus par les bordures des enfants. */
.miro-site .rlist,
.miro-site .tiles6,
.miro-site .brew { background: var(--slate); }
.miro-site .tiles6 > *,
.miro-site .brew > * { outline: 1px solid var(--line); outline-offset: 0; }
/* `.rlist` ratait sa quatrieme colonne de 3 px : 4 × 258 + 3 de gouttieres
= 1035 pour 1032 disponibles. 240 px la fait tenir. */
.miro-site .rlist { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Cibles tactiles : 18 px de haut mesures, le minimum WCAG 2.5.8 est 24. */
.miro-site .rlist li a,
.miro-site .rlist a { display: inline-flex; align-items: center;
min-height: 44px; }
/* Mur d'affiches : cinq formats natifs differents dans une grille, la rangee
s'etirait sur la plus haute et laissait 145 px de gris sous les autres. */
.miro-site .wall img { aspect-ratio: 3 / 4; object-fit: cover; height: auto; }
/* Le bord gauche du site doit etre stable : `.prose` bornait la mesure de
ligne en centrant le bloc, ce qui decalait les titres des fiches de 185 px
par rapport a toutes les autres pages. */
.miro-site .prose { max-width: none; }
.miro-site .prose > * { max-width: 68ch; }
/* La variante `darkghost` est faite pour la bande ambre. Posee sur un fond
sombre elle donne une encre quasi noire sur noir — 1,06:1, releve par
l'audit. On la borne a son contexte pour que l'erreur soit impossible. */
.miro-site :not(.band-amber) > * .btn.darkghost,
.miro-site .band-slate .btn.darkghost {
color: var(--paper); border-color: var(--line); background: transparent; }
/* La barre d'horaires est remplie par le script : elle naissait a zero puis
poussait tout le hero de 92 px — CLS 0,084 mesure. On lui reserve sa
hauteur, relevee au navigateur : 39 px des que les cinq groupes tiennent
sur une ligne, 97 px quand ils passent sur trois lignes.
(La vraie correction serait de la rendre cote serveur — son contenu est
statique, seul le jour en cours est dynamique. Note laissee pour plus tard.) */
/* La hauteur du bandeau horaires n'a plus a etre reservee : son contenu est
servi par le serveur, donc present au premier rendu. La reservation avait ete
ajoutee parce que le div partait vide et grandissait sous JavaScript — un
CLS de 0,084 mesure. Plus de remplissage differe, plus de saut, et plus
besoin d'un plancher qui devinait la hauteur. */
/* ════════════════════════════════════════════════════════════════════
GRILLE DU HAPPY HOUR
Deux prix sur la meme ligne : le plein, barre, puis celui du jeudi. Le
barre seul ne suffit pas — une rature est un signal visuel, pas une
information lisible au lecteur d'ecran ni au daltonien. On le double donc
d'un intitule de colonne (« plein » / « jeudi ») et d'un semantique.
════════════════════════════════════════════════════════════════════ */
.miro-site #grille .cols.two .p { display: inline-flex; gap: 18px; }
.miro-site #grille .item .p { display: inline-flex; gap: 18px; align-items: baseline;
font-variant-numeric: tabular-nums; }
.miro-site #grille s.bar { color: var(--muted); text-decoration: line-through;
text-decoration-thickness: 1px; }
.miro-site #grille .item b { color: var(--amber); font-weight: 400; }
/* ── page cuisine ─────────────────────────────────────────────────────── */
.plats{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:28px;margin-top:28px}
.pl{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:start}
.pl.grand{grid-column:1/-1;grid-template-columns:300px 1fr;
background:var(--slate);border:1px solid var(--line);border-radius:12px;padding:18px}
.pl .shot{margin:0;border-radius:8px;overflow:hidden}
.pl .shot img{width:100%;height:100%;object-fit:cover;display:block}
.pltx{min-width:0}
.pl h3{display:flex;align-items:baseline;gap:14px;margin:0 0 8px;
font-family:var(--disp);text-transform:uppercase;letter-spacing:.01em;
font-size:1.15rem;line-height:1.05}
.pl.grand h3{font-size:1.7rem}
.pl h3 .px{margin-left:auto;font-family:var(--mono);font-weight:700;
color:var(--yellow);font-size:1.05rem;white-space:nowrap}
.pl.grand h3 .px{font-size:1.4rem}
.pl p{margin:0 0 6px;font-size:.96rem;line-height:1.5}
.pl .avec{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;
color:var(--muted)}
.pl .cpt{font-family:var(--mono);font-size:.72rem;line-height:1.6;
color:var(--amber);border-top:1px solid var(--line);padding-top:7px;margin-top:9px}
.band-slate .pl.grand{background:var(--ink)}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.band-amber .ctas .btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band-amber .ctas .btn.ghost{background:transparent;color:var(--ink)}
p.micro{font-family:var(--mono);font-size:.72rem;line-height:1.7;
color:var(--muted);margin-top:16px}
@media (max-width:560px){
.pl{grid-template-columns:96px 1fr;gap:14px}
.pl.grand{grid-template-columns:1fr}
}
/* ── /reserver : deux colonnes autour du formulaire ─────────────────────── */
.miro-site .fzone{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.miro-site .fside{display:grid;gap:18px;position:sticky;top:100px}
.miro-site .fcard{border:1px solid var(--line);padding:18px 18px 20px;background:rgba(255,255,255,.015)}
.miro-site .feyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
text-transform:uppercase;color:var(--amber);margin:0 0 12px}
.miro-site .fside .iclist{gap:14px}
.miro-site .fside .iclist li{font-size:14px}
.miro-site .fbig{font-family:var(--display);font-size:26px;letter-spacing:.02em;margin:0 0 8px;line-height:1}
.miro-site .fbig a{color:var(--paper);text-decoration:none}
.miro-site .fbig a:hover{color:var(--amber)}
.miro-site .fnote2{font-size:13px;color:var(--muted);margin:0}
.miro-site .fnote2 a{color:var(--amber);text-decoration:none}
.miro-site .fnote2 a:hover{text-decoration:underline}
.miro-site .fspecs{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.miro-site .fspecs li{display:grid;gap:1px;font-size:13.5px}
.miro-site .fspecs b{color:var(--paper);font-weight:600}
.miro-site .fspecs span{color:var(--muted);font-size:13px}
.miro-site .fzone .fpanel{min-width:0}
.miro-site .fzone .fpanel form{max-width:none}
.miro-site .fzone .fpanel .f>input,.miro-site .fzone .fpanel .f>select,
.miro-site .fzone .fpanel .f>textarea{max-width:620px}
@media(max-width:1080px){
.miro-site .fzone{grid-template-columns:1fr;gap:34px}
.miro-site .fside{position:static;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}
/* ── formulaires en étapes ──────────────────────────────────────────────── */
.miro-site .fprog{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding-bottom:16px;
border-bottom:1px solid var(--line)}
.miro-site .fprogtxt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--muted);white-space:nowrap}
.miro-site .fjalons{display:flex;gap:5px;flex:1}
.miro-site .jalon{flex:1;height:2px;background:var(--line);transition:background .25s}
.miro-site .jalon.on{background:var(--amber)}
.miro-site .fstep{border:0;margin:0;padding:0}
.miro-site .fstep[hidden]{display:none!important}
.miro-site .stepnote{font-size:13.5px;color:var(--muted);margin:-6px 0 20px}
.miro-site .fnav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:30px}
.miro-site .fnav .btn[hidden]{display:none!important}
.miro-site .f.fwide{max-width:none}
.miro-site .f .flabel{display:flex;align-items:baseline;gap:9px;font-size:14.5px;
font-weight:500;color:var(--paper);margin-bottom:9px}
.miro-site .f .flabel .opt{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
text-transform:uppercase;color:#8E877D;font-weight:400}
.miro-site .fchecks{display:flex;flex-wrap:wrap;gap:8px}
.miro-site .fcheck{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
padding:9px 13px;font-size:14px;cursor:pointer;color:var(--muted);
transition:border-color .15s,color .15s}
.miro-site .fcheck:hover{border-color:var(--amber);color:var(--paper)}
.miro-site .fcheck input{accent-color:var(--amber);width:15px;height:15px;margin:0}
.miro-site .fcheck:has(input:checked){border-color:var(--amber);color:var(--paper)}
.miro-site .fconseil{border-left:2px solid var(--amber);padding:14px 0 14px 16px;margin:22px 0 0;
display:grid;gap:4px}
.miro-site .fconseil[hidden]{display:none!important}
.miro-site .fconseil .feyebrow{margin:0 0 4px}
.miro-site .fconseil b{color:var(--paper);font-weight:600;font-size:16px}
.miro-site .fconseil span{display:block;font-size:13.5px;color:var(--muted)}
.miro-site .frecapl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:0;margin:0}
.miro-site .frecapl dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);padding:11px 18px 11px 0;
border-bottom:1px solid var(--line);white-space:nowrap}
.miro-site .frecapl dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line);
font-size:14.5px;color:var(--paper);word-break:break-word}
@media(max-width:560px){
.miro-site .frecapl{grid-template-columns:1fr}
.miro-site .frecapl dt{border-bottom:0;padding-bottom:2px}
.miro-site .frecapl dd{padding-top:0}
.miro-site .fprog{flex-wrap:wrap;gap:10px}
}
/* ── champ fichier ──────────────────────────────────────────────────────── */
/* `.miro-site .f label{display:flex}` gagnait sur `.ffile{display:grid}` :
il faut le meme prefixe pour que la grille s'applique. */
.miro-site .f label.ffile{display:grid;gap:9px;cursor:pointer;align-items:start}
.miro-site .ffilelab{display:flex;align-items:baseline;gap:9px;font-size:14.5px;
font-weight:500;color:var(--paper)}
.miro-site .ffile input[type=file]{position:absolute;width:1px;height:1px;opacity:0;
overflow:hidden;clip:rect(0 0 0 0)}
.miro-site .ffilebtn{display:inline-flex;align-items:center;gap:8px;justify-self:start;
border:1px dashed var(--line);padding:11px 16px;font-family:var(--mono);
font-size:11px;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);transition:border-color .15s,color .15s}
.miro-site .ffile:hover .ffilebtn{border-color:var(--amber);color:var(--amber)}
.miro-site .ffile input[type=file]:focus-visible+.ffilebtn{outline:2px solid var(--amber);outline-offset:2px}
.miro-site .ffilenom{font-size:13px;color:var(--muted);word-break:break-all}
.miro-site .ffile input.faux+.ffilebtn{border-color:#C0392B;border-style:solid}
/* ── formulaires statiques des vues ─────────────────────────────────────── */
/* Champs enfants directs du