/* ROSA — styles des DÉMONSTRATIONS (sites de démo et lab d'outils).
   Extraits de base.css : seule realisations.html les utilise, il est
   inutile de les charger sur les autres pages. */
/* ═══ GALERIE DE DÉMOS PREMIUM ═════════════════════════════════════════
   Cartes = vraies captures d'écran (mini-site rendu puis mis à l'échelle).
   Clic → modale plein écran avec le site complet et défilable. */
.demo-galerie{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:8px 0 34px}
.dcard{background:var(--carte,#fff);border:1px solid var(--trait,#E1DED7);border-radius:18px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(17,17,20,.04);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.dcard:hover,.dcard:focus-visible,.dcard:focus-within{transform:translateY(-5px);border-color:var(--rouge,#CE1B2C);
  box-shadow:0 26px 50px -24px rgba(17,17,20,.4);outline:none}
.dcard-frame{position:relative;aspect-ratio:16/10;overflow:hidden}
.dsite-mini{position:absolute;top:0;left:0;width:1280px;transform-origin:top left;pointer-events:none}
.dcard-badge{position:absolute;top:12px;right:12px;z-index:3;background:rgba(11,11,12,.82);color:#fff;
  font-family:var(--sans);font-size:.66rem;font-weight:800;letter-spacing:.14em;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.dcard-hover{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:22px;opacity:0;transition:opacity .22s;
  background:linear-gradient(to top,rgba(11,11,12,.5),transparent 46%)}
.dcard:hover .dcard-hover,.dcard:focus-visible .dcard-hover,.dcard:focus-within .dcard-hover{opacity:1}
.dcard-see{background:#fff;color:var(--encre,#111114);font-family:var(--sans);font-weight:700;font-size:.92rem;
  padding:11px 20px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.dcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.dcard-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dcard-name{font-family:var(--serif);font-size:1.28rem;font-weight:700;margin:0;color:var(--encre,#111114)}
.dcard-sector{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rouge,#CE1B2C)}
.dcard-desc{font-family:var(--sans);font-size:.92rem;color:var(--texte-doux,#54524D);line-height:1.5;margin:0;flex:1}
.dcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.dcard-tags{display:flex;gap:7px;flex-wrap:wrap}
.dtag{font-family:var(--sans);font-size:.72rem;font-weight:600;color:var(--texte-doux,#54524D);
  background:rgba(17,17,20,.05);border:1px solid var(--trait,#E1DED7);padding:4px 10px;border-radius:999px}
.dcard-btn{font-family:var(--sans);font-weight:700;font-size:.9rem;color:#fff;background:var(--rouge,#CE1B2C);
  border:none;padding:10px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .18s,transform .18s}
.dcard-btn:hover{background:var(--rouge-fort,#B0121F);transform:translateY(-1px)}

/* ── Mini-site interne (partagé vignette + modale) ── */
.dsite{container-type:inline-size;font-family:var(--bf);color:var(--ink);background:var(--bg);line-height:1.55;width:100%;text-align:left}
.dsite *{box-sizing:border-box}
.dsite .ds-wrap{max-width:1080px;margin:0 auto;padding:0 40px}
.dsite button{font-family:var(--bf)}
.ds-head{position:relative;z-index:4;background:var(--bg);border-bottom:1px solid var(--line)}
.ds-head .ds-wrap{display:flex;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px}
.ds-logo{font-family:var(--hf);font-weight:700;font-size:1.5rem;letter-spacing:.01em;color:var(--ink);display:flex;align-items:center;gap:11px}
.ds-mark{width:34px;height:34px;border-radius:9px;background:var(--p);display:inline-grid;place-items:center;color:#fff;font-family:var(--bf);font-weight:800;font-size:1rem}
.ds-nav{display:flex;gap:28px;font-size:.95rem}
/* Contre-audit du 13/10/2026 (m2) : la règle du site « .contenu a:not(.btn):not(.xlink) » repeignait ces liens en
   corail foncé sur le fond du thème (4,0 à 4,37:1) ; on reprend l'encre du thème, toujours lisible sur son fond. */
.ds-nav a,.contenu .dsite .ds-nav a:not(.btn):not(.xlink){color:var(--ink);text-decoration:none;cursor:pointer;transition:color .16s}
.ds-nav a:hover{color:var(--p)}
.ds-cta{background:var(--p);color:var(--pt,#fff);border:none;padding:12px 22px;border-radius:var(--rad);font-weight:600;font-size:.92rem;cursor:pointer}
.ds-hero{padding:78px 0 70px;position:relative}
.ds-hero .ds-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.ds-eyebrow{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--p);margin-bottom:18px}
.ds-h1{font-family:var(--hf);font-weight:700;font-size:3.2rem;line-height:1.05;margin:0 0 20px}
.ds-sub{font-size:1.1rem;color:var(--soft);margin:0 0 28px;max-width:36ch}
.ds-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.ds-btn1{background:var(--p);color:var(--pt,#fff);border:none;padding:15px 28px;border-radius:var(--rad);font-weight:600;font-size:1rem;cursor:pointer;transition:transform .18s,filter .18s}
.ds-btn1:hover{transform:translateY(-2px);filter:brightness(1.06)}
.ds-btn2{background:transparent;color:var(--ink);border:1.5px solid var(--line);padding:15px 26px;border-radius:var(--rad);font-weight:600;font-size:1rem;cursor:pointer}
.ds-btn2:hover{border-color:var(--p);color:var(--p)}
.ds-trust{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--soft)}
.ds-stars{color:var(--p2);letter-spacing:2px}
.ds-hero-art{aspect-ratio:4/3.3;border-radius:calc(var(--rad) + 8px);overflow:hidden;position:relative;box-shadow:0 34px 66px -30px rgba(0,0,0,.55)}
.ds-hero-art svg{width:100%;height:100%;display:block}
.ds-sec{padding:70px 0}
.ds-sec-alt{background:var(--card)}
.ds-sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.ds-kicker{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--p)}
.ds-h2{font-family:var(--hf);font-weight:700;font-size:2.35rem;margin:10px 0 0;line-height:1.12}
.ds-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ds-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:26px;transition:transform .2s,box-shadow .2s}
.ds-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(0,0,0,.55)}
.ds-ic{width:48px;height:48px;border-radius:12px;background:var(--p);display:grid;place-items:center;color:#fff;margin-bottom:16px}
.ds-ic svg{width:25px;height:25px}
.ds-card h3{font-family:var(--hf);font-weight:700;font-size:1.2rem;margin:0 0 8px;color:var(--ink)}
.ds-card p{margin:0;color:var(--soft);font-size:.92rem;line-height:1.5}
.ds-stats .ds-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:50px;padding-bottom:50px}
.ds-stats{background:var(--p);color:#fff;text-align:center}
.ds-stat .n{font-family:var(--hf);font-weight:700;font-size:2.4rem;line-height:1}
.ds-stat .l{opacity:.86;font-size:.9rem;margin-top:6px}
.ds-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ds-tile{aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;position:relative}
.ds-tile svg{width:100%;height:100%;display:block}
.ds-tile span{position:absolute;left:16px;bottom:13px;color:#fff;font-weight:600;font-size:.92rem;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.ds-tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ds-quote{background:var(--bg);border:1px solid var(--line);border-radius:var(--rad);padding:28px}
.ds-quote>p{font-family:var(--hf);font-size:1.16rem;line-height:1.45;margin:14px 0 18px;color:var(--ink)}
.ds-who{display:flex;align-items:center;gap:12px}
.ds-av{width:42px;height:42px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-weight:700;flex:0 0 auto}
.ds-who-t b{display:block;font-size:.94rem;color:var(--ink)}.ds-who-t span{font-size:.82rem;color:var(--soft)}
.ds-ctaband{background:var(--p)}
.ds-ctaband .ds-wrap{text-align:center;padding:64px 40px}
.ds-ctaband h2{font-family:var(--hf);color:#fff;font-size:2.3rem;margin:0 0 14px}
.ds-ctaband p{color:rgba(255,255,255,.86);margin:0 0 26px}
.ds-ctaband .ds-btn1{background:#fff;color:var(--pd,var(--p))}
.ds-cta-sub{margin-top:18px;color:#fff;font-weight:700;font-size:1.15rem;letter-spacing:.02em}
.ds-foot{background:var(--bg);border-top:1px solid var(--line);font-size:.9rem;color:var(--soft)}
.ds-foot .ds-wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;padding-top:46px;padding-bottom:26px}
.ds-foot b{color:var(--ink);display:block;margin-bottom:8px}
.ds-foot-p{margin:0;line-height:1.7}
.ds-foot-bot{border-top:1px solid var(--line);padding:18px 40px;max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem}



/* ═══ SHOWROOM DE MINI-PRODUITS ═══════════════════════════════════════ */
.labx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.labx-card{background:var(--carte,#fff);border:1px solid var(--trait,#E1DED7);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;box-shadow:0 1px 2px rgba(17,17,20,.04);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}
.labx-card:hover,.labx-card:focus-visible,.labx-card:focus-within{transform:translateY(-5px);border-color:var(--rouge,#CE1B2C);
  box-shadow:0 26px 50px -24px rgba(17,17,20,.4);outline:none}
.labx-frame{position:relative;aspect-ratio:16/10.5;overflow:hidden;background:#0B0C0F;border-bottom:1px solid var(--trait,#E1DED7)}
.labx-mini{position:absolute;top:0;left:0;width:1220px;transform-origin:top left;pointer-events:none}
.labx-badge{position:absolute;top:12px;right:12px;z-index:4;background:rgba(11,11,12,.78);color:#fff;font-family:var(--sans);
  font-size:.64rem;font-weight:800;letter-spacing:.14em;padding:5px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.labx-hover{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;
  opacity:0;transition:opacity .22s;background:linear-gradient(to top,rgba(11,11,12,.55),transparent 44%)}
.labx-card:hover .labx-hover,.labx-card:focus-visible .labx-hover,.labx-card:focus-within .labx-hover{opacity:1}
.labx-see{background:#fff;color:var(--encre,#111114);font-family:var(--sans);font-weight:700;font-size:.9rem;padding:10px 18px;border-radius:999px;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.labx-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.labx-cat{font-family:var(--sans);font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
/* Couleur d'accent de la démo, assombrie pour rester lisible sur fond blanc (contraste AA ≥ 4,5:1). */
.labx-cat{color:var(--cat)}
@supports (color:color-mix(in srgb,red 50%,blue)){.labx-cat{color:color-mix(in srgb,var(--cat) 72%,#000)}}
.labx-name{font-family:var(--serif);font-size:1.26rem;font-weight:700;margin:0;color:var(--encre,#111114)}
.labx-benefit{font-family:var(--sans);font-size:.92rem;color:var(--texte-doux,#54524D);line-height:1.5;margin:0}
.labx-bul{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.labx-bul li{font-family:var(--sans);font-size:.82rem;color:var(--texte,#111114);position:relative;padding-left:16px}
.labx-bul li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--rouge,#CE1B2C)}
.labx-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.labx-btn{font-family:var(--sans);font-weight:700;font-size:.9rem;color:#fff;background:var(--rouge,#CE1B2C);border:none;padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .18s,transform .18s}
.labx-btn:hover{background:var(--rouge-fort,#B0121F);transform:translateY(-1px)}
.labx-custom{font-family:var(--sans);font-size:.72rem;color:var(--texte-doux,#54524D)}

/* ── Modale ── */
.labx-modal[hidden]{display:none}
.labx-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:2.2vh 2vw}
.labx-backdrop{position:absolute;inset:0;background:rgba(8,8,10,.62);backdrop-filter:blur(4px)}
.labx-dialog{position:relative;width:min(1180px,96vw);height:94vh;background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.6);animation:labxIn .26s cubic-bezier(.2,.7,.2,1)}
.labx-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#F7F8FA;border-bottom:1px solid #E7E9EE}
.labx-bar-t{font-family:var(--sans);font-size:.86rem;font-weight:600;color:#4A5060}
.labx-x{width:34px;height:34px;border:1px solid #E7E9EE;background:#fff;border-radius:9px;color:#54524D;font-size:1rem;cursor:pointer;transition:background .16s,color .16s}
.labx-x:hover{background:var(--rouge,#CE1B2C);color:#fff;border-color:var(--rouge,#CE1B2C)}
.labx-stage{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#EEF0F4;padding:22px}
.labx-full{width:100%!important;transform:none!important;position:static!important;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.4)}
body.labx-open{overflow:hidden}
.la-tag2{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,#fff);padding:4px 10px;border-radius:999px}
.la-cta{background:var(--acc);color:#fff;border:none;padding:11px 18px;border-radius:10px;font-weight:700;font-size:.92rem;cursor:pointer;font-family:var(--sans);transition:filter .16s,transform .16s}
.la-cta:hover{filter:brightness(1.06);transform:translateY(-1px)}
.la-mini{background:#fff;border:1px solid var(--line);color:#2B303B;padding:8px 13px;border-radius:9px;font-weight:600;font-size:.84rem;cursor:pointer;font-family:var(--sans);transition:background .14s,border-color .14s}
.la-mini:hover{background:#F2F4F8;border-color:#D3D7E0}
.la-mini.pub{background:var(--acc);color:#fff;border-color:var(--acc)}
.la-chips{display:flex;gap:8px;flex-wrap:wrap}
.la-chip{background:#fff;border:1px solid var(--line);color:#3A4050;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--sans);transition:.14s}
.la-chip.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.la-badge{font-size:.74rem;font-weight:700;padding:3px 9px;border-radius:999px}
.la-badge.ok{background:#E6F6EC;color:#1B7A43}.la-badge.wait{background:#FFF3E0;color:#9A6412}.la-badge.bad{background:#FCE8E8;color:#B0121F}
.la-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.la-panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.la-panel-h b{font-size:.98rem}
.la-link,.contenu .labx-mini .la-link:not(.btn):not(.xlink){color:#E6E9F0;font-weight:600;font-size:.84rem;cursor:pointer}
.la-table{width:100%;border-collapse:collapse;font-size:.9rem}
.la-table th{text-align:left;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);font-weight:700;padding:0 10px 10px}
.la-table td{padding:11px 10px;border-top:1px solid var(--line)}
.la-table td.mut{color:var(--mut)}
.la-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem}
.la-logo{width:30px;height:30px;border-radius:8px;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800}
.la-av{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem}
.la-toast{position:absolute;left:50%;bottom:18px;transform:translate(-50%,10px);background:#14161B;color:#fff;padding:10px 18px;border-radius:999px;font-size:.85rem;font-weight:600;opacity:0;transition:.25s;z-index:20;pointer-events:none}
.la-toast.on{opacity:1;transform:translate(-50%,0)}

/* ── Dashboard (sombre) ── */
.la-dash{display:grid;grid-template-columns:210px 1fr;min-height:560px;background:#0B0C10;color:#E8EAF0;--line:#20242E;--mut:#8B92A3;--card:#14171E}
.la-side{padding:20px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.la-side .la-brand{color:#fff;margin-bottom:16px}
.la-side nav{display:flex;flex-direction:column;gap:2px;flex:1}
.la-side nav a,.contenu .labx-mini .la-side nav a:not(.btn):not(.xlink){padding:9px 12px;border-radius:9px;color:#9AA1B2;font-weight:600;font-size:.9rem;cursor:pointer}
.la-side nav a.on,.contenu .labx-mini .la-side nav a.on:not(.btn):not(.xlink){background:color-mix(in srgb,var(--acc) 20%,#14171E);color:#fff}
.la-side-foot{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.la-side-foot b{display:block;font-size:.86rem;color:#fff}.la-side-foot span{font-size:.76rem;color:var(--mut)}
.la-main{padding:22px 24px;display:flex;flex-direction:column;gap:18px}
.la-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.la-hello{font-size:.82rem;color:var(--mut)}
.la-top h4{color:#fff}
.la-period{display:flex;background:#14171E;border:1px solid var(--line);border-radius:10px;padding:3px}
.la-period button{background:none;border:none;color:#9AA1B2;padding:7px 13px;border-radius:8px;font-weight:600;font-size:.84rem;cursor:pointer}
.la-period button.on{background:var(--acc);color:#fff}
.la-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.la-kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.la-kpi-l{font-size:.8rem;color:var(--mut)}
.la-kpi-n{display:block;font-family:var(--serif);font-size:1.7rem;font-weight:700;color:#fff;margin:6px 0 4px}
.la-kpi-d{font-size:.8rem;font-weight:700}.la-kpi-d.up{color:#4ADE80}.la-kpi-d.down{color:#FB7185}
.la-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.la-chart-area{position:relative;height:150px}
.la-chart-area svg{position:absolute;inset:0;width:100%;height:100%}
.la-bars{position:absolute;inset:auto 0 0;display:flex;gap:8px;align-items:flex-end;height:70%;padding:0 4px}
.la-bars span{flex:1;background:color-mix(in srgb,var(--acc) 45%,#14171E);border-radius:4px 4px 0 0;transition:height .5s cubic-bezier(.2,.7,.2,1)}
.la-legend{font-size:.76rem;color:var(--mut);display:flex;align-items:center;gap:8px}
.la-legend i{width:9px;height:9px;border-radius:2px;background:var(--acc);display:inline-block;margin-right:3px}
.la-legend i.g{background:#C9CDD6}
.la-prow{display:grid;grid-template-columns:1fr 90px auto;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:.86rem}
.la-prow:first-of-type{border-top:none}
.la-pbar{height:7px;background:#20242E;border-radius:999px;overflow:hidden}.la-pbar i{display:block;height:100%;background:var(--acc);border-radius:999px}
.la-pval{font-weight:700;color:#fff;font-size:.84rem}
.la-dash .la-panel{background:var(--card)}
.la-dash .la-table td{border-color:var(--line)}
.la-dash .la-table td b{color:#fff}

/* ── Assistant de rédaction ── */
.la-writer{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;padding:22px;min-height:520px}
.la-writer .la-w-left,.la-writer .la-w-right{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:16px}
.la-w-head h4{margin-top:8px}
.la-field{display:flex;flex-direction:column;gap:8px}
.la-field>span{font-size:.8rem;font-weight:700;color:#3A4050}
.la-input{background:#F7F8FA;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.9rem;color:#2B303B}
.la-w-left .la-cta{margin-top:auto}
.la-w-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:2px}
.la-w-tabs button{background:none;border:none;padding:8px 12px;font-weight:600;color:var(--mut);cursor:pointer;border-bottom:2px solid transparent;font-size:.88rem}
.la-w-tabs button.on{color:var(--acc);border-color:var(--acc)}
.la-gen{background:#F7F8FA;border:1px solid var(--line);border-radius:12px;padding:18px;flex:1}
.la-gen-t{margin:0;font-size:1rem;line-height:1.6;color:#20242E}
.la-gen-meta{margin-top:12px;display:flex;gap:8px;font-size:.78rem;color:var(--mut)}
.la-w-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Orchestrateur / workflow ── */
.la-flow{padding:24px;min-height:520px}
.la-flow-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:22px}
.la-steps{list-style:none;margin:0;padding:0;max-width:640px}
.la-step{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;position:relative;opacity:.55;transition:opacity .3s}
.la-step::before{content:"";position:absolute;left:34px;top:-12px;height:12px;width:2px;background:var(--line)}
.la-step:first-child::before{display:none}
.la-step.done,.la-step.run{opacity:1}
.la-step.run{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,#fff)}
.la-dot{width:32px;height:32px;border-radius:50%;background:#EEF0F4;color:#8A90A0;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.la-step.done .la-dot{background:var(--acc);color:#fff}
.la-step-b b{display:block;font-size:.95rem}.la-step-b span{font-size:.82rem}
.la-step-t{font-size:.8rem;color:var(--mut);font-weight:600}
.la-flow-f{margin-top:8px;background:color-mix(in srgb,var(--acc) 10%,#fff);border:1px solid color-mix(in srgb,var(--acc) 30%,#fff);color:#155e57;border-radius:12px;padding:14px 18px;font-weight:600;max-width:640px}

/* ── Boutique ── */
.la-shop{padding:20px;min-height:540px}
.la-shop-h{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.la-search{flex:1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--mut);font-size:.9rem}
.la-cart{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .2s}
.la-cart.pulse{transform:scale(1.08)}
.la-cart-n{background:var(--acc);color:#fff;border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.76rem;padding:0 5px}
.la-shop-cats{margin-bottom:16px}
.la-prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.la-prod{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.la-prod:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(0,0,0,.4)}
.la-prod-img{aspect-ratio:4/3;position:relative}
.la-prod-img.p1{background:linear-gradient(135deg,#F6D9C4,#E8A87C)}.la-prod-img.p2{background:linear-gradient(135deg,#D7E3D0,#9CBE97)}.la-prod-img.p3{background:linear-gradient(135deg,#DCD6EF,#A99BD6)}.la-prod-img.p4{background:linear-gradient(135deg,#CFE6EC,#8FC0CC)}.la-prod-img.p5{background:linear-gradient(135deg,#EFE6D2,#CBB88C)}.la-prod-img.p6{background:linear-gradient(135deg,#F3D3DD,#D98FA6)}
.la-promo{position:absolute;top:10px;left:10px;background:var(--acc);color:#fff;font-size:.72rem;font-weight:800;padding:4px 9px;border-radius:999px}
.la-prod-b{padding:14px}
.la-prod-cat{font-size:.72rem;color:var(--mut);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.la-prod-b h5{margin:4px 0 10px}
.la-prod-f{display:flex;align-items:center;justify-content:space-between}
.la-prod-f b{font-size:1.05rem}
.la-add{background:var(--acc);color:#fff;border:none;padding:8px 14px;border-radius:9px;font-weight:700;font-size:.84rem;cursor:pointer;transition:filter .15s}
.la-add:hover{filter:brightness(1.08)}

/* ── CRM kanban ── */
.la-crm{padding:22px;min-height:520px}
.la-crm-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.la-crm-sum{display:flex;gap:18px;font-size:.86rem;color:var(--mut)}.la-crm-sum b{color:#14161B}
.la-kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.la-kcol{background:#EEF0F4;border-radius:12px;padding:12px;min-height:200px}
.la-kcol-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:#4A5060;margin-bottom:10px}
.la-kcol-h span{background:#fff;border-radius:999px;padding:1px 8px;font-size:.76rem;color:var(--mut)}
.la-kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;cursor:pointer;transition:.16s}
.la-kcard:hover{border-color:var(--acc)}
.la-kcard.sel{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 16%,#fff)}
.la-kcard b{display:block;font-size:.9rem}.la-kcard>span{font-size:.8rem}
.la-kcard-f{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.la-kval{font-weight:800;font-size:.88rem;color:var(--acc)}
.la-kav{width:24px;height:24px;border-radius:50%;background:#EEF0F4;display:grid;place-items:center;font-weight:700;font-size:.76rem;color:#4A5060}

/* ── Rendez-vous ── */
.la-book{padding:22px;min-height:520px}
.la-book-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px}
.la-book-nav{font-weight:700;color:#4A5060}
.la-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.la-day-h{text-align:center;font-weight:700;font-size:.85rem;color:#4A5060;margin-bottom:10px}
.la-slot{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 0;margin-bottom:8px;font-weight:600;font-size:.86rem;color:#2B303B;cursor:pointer;transition:.14s}
.la-slot:hover{border-color:var(--acc);color:var(--acc)}
.la-slot.taken{background:#EEF0F4;color:#5B6170;cursor:not-allowed;text-decoration:line-through}
.la-slot.sel{background:var(--acc);color:#fff;border-color:var(--acc)}
.la-book-confirm{margin-top:18px;display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--acc) 9%,#fff);border:1px solid color-mix(in srgb,var(--acc) 26%,#fff);border-radius:12px;padding:16px 18px}
.la-check{width:36px;height:36px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:800;flex:0 0 auto}
.la-book-confirm b{display:block}

/* ── Stock ── */
.la-stock{padding:22px;min-height:500px}
.la-stock-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.la-stock-sum{display:flex;gap:10px}.la-stock-sum span{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px}
.la-stock-sum .s-ok{background:#E6F6EC;color:#1B7A43}.la-stock-sum .s-low{background:#FFF3E0;color:#9A6412}
.la-stock-t{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px 4px}
.la-stock-t tr.warn td{background:#FFFaf3}
.la-stock-t tbody tr:hover td{background:#F7F8FA}

/* ── Application mobile ── */
.la-mob{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;padding:30px;min-height:520px;background:#EEF0F4}
.la-phone{width:290px;height:590px;background:#0B0C10;border-radius:42px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);margin:0 auto}
.la-phone-scr{background:#F7F8FA;border-radius:32px;height:100%;overflow:hidden;display:flex;flex-direction:column;position:relative}
.la-mob-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 8px;font-size:.78rem;font-weight:700;color:#4A5060}
.la-mob-body{flex:1;padding:8px 18px;overflow:hidden}
.la-mob-card{background:var(--acc);color:#fff;border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.la-mob-card .mut{color:rgba(255,255,255,.85)}
.la-mob-pts{font-family:var(--serif);font-size:1.9rem;font-weight:700}
.la-mob-hint{font-size:.82rem;color:rgba(255,255,255,.9)}
.la-mob-prog{height:8px;background:rgba(255,255,255,.3);border-radius:999px;margin-top:8px;overflow:hidden}.la-mob-prog i{display:block;height:100%;background:#fff;border-radius:999px}
.la-mob-list{display:flex;flex-direction:column;gap:10px}
.la-mob-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:.9rem}
.la-mob-qr{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:40px;text-align:center;color:var(--mut);font-size:.85rem}
.la-qrbox{width:150px;height:150px;border-radius:14px;background:
  repeating-linear-gradient(90deg,#14161B 0 10px,#fff 10px 20px),
  repeating-linear-gradient(0deg,#14161B 0 10px,transparent 10px 20px);
  background-blend-mode:multiply;border:8px solid #fff;box-shadow:0 0 0 1px var(--line)}
.la-mob-tabs{display:flex;border-top:1px solid var(--line);background:#fff}
.la-mob-tabs button{flex:1;background:none;border:none;padding:14px 0;font-weight:600;font-size:.82rem;color:var(--mut);cursor:pointer}
.la-mob-tabs button.on{color:var(--acc)}
.la-mob-side h4{font-size:1.5rem}
.la-mob-side p{max-width:34ch;margin-top:8px}
/* Sites de démonstration sur petit écran : la mise en page suit la largeur
   du site affiché (requête de conteneur), pas celle de la fenêtre. */
.dsite{container-type:inline-size}
@container (max-width:720px){
  .dsite .ds-wrap{padding:0 20px}
  .ds-head .ds-wrap{padding-top:14px;padding-bottom:14px}
  .ds-nav{display:none}
  .ds-hero{padding:40px 0 44px}
  .ds-hero .ds-wrap{grid-template-columns:1fr;gap:28px}
  .ds-h1{font-size:2.1rem}
  .ds-grid4{grid-template-columns:1fr 1fr;gap:12px}
  .ds-stats .ds-wrap{grid-template-columns:1fr 1fr;gap:18px;padding-top:34px;padding-bottom:34px}
  .ds-stat .n{font-size:1.9rem}
  .ds-gal{grid-template-columns:1fr 1fr;gap:10px}
  .ds-tgrid{grid-template-columns:1fr;gap:14px}
  .ds-ctaband .ds-wrap{padding:44px 20px}
  .ds-foot .ds-wrap{grid-template-columns:1fr 1fr;gap:20px}
  .ds-foot .ds-wrap>div:first-child{grid-column:1/-1}
}
@container (max-width:420px){
  .ds-grid4{grid-template-columns:1fr}
  .ds-h1{font-size:1.9rem}
}
/* Les titres du site de démonstration gardent la couleur de SON thème,
   jamais celle de la page qui l'accueille (thèmes sombres lisibles). */
.dsite h1,.dsite h2,.dsite h3{color:var(--ink)}
.dsite .ds-kicker{color:var(--kick,var(--p))}

/* Photos réelles dans les sites de démonstration */
.ds-photo{width:100%;height:100%;object-fit:cover;display:block}
.ds-hero-art{overflow:hidden}
.ds-tile{position:relative;overflow:hidden;border-radius:var(--rad)}
.ds-tile .ds-photo{aspect-ratio:4/3;transition:transform .5s ease}
.ds-tile:hover .ds-photo{transform:scale(1.04)}

/* <picture> AVIF/WebP autour des photos : transparent pour la mise en page (les règles .ds-photo restent valables). */
.ds-picture{display:contents}

/* ── Identités des démonstrations (17/10/2026) ── */
.dsite .dl-logo{display:flex;align-items:center;gap:.55em;font-family:var(--hf);font-weight:700;letter-spacing:.01em}
.dsite .dl-logo svg{width:2.1em;height:2.1em;flex:0 0 auto}
.dsite .dl-deux{display:grid;grid-template-columns:1.3fr 1fr;gap:2.2em;align-items:center}
/* Atelier (menuiserie) : éditorial, photo à gauche, étapes numérotées */
.dl-atelier .dl-split{display:grid;grid-template-columns:1.1fr 1fr;min-height:28em}
.dl-atelier .dl-split-art .ds-photo{width:100%;height:100%;object-fit:cover}
.dl-atelier .dl-split-txt{padding:3em 2.5em;display:flex;flex-direction:column;justify-content:center}
.dl-atelier .dl-etapes ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em;counter-reset:none}
.dl-atelier .dl-etapes li{border-top:3px solid var(--p);padding-top:1em}
.dl-atelier .dl-etapes b{font-family:var(--hf);font-size:2.4em;color:var(--p);line-height:1}
/* Fournil (boulangerie) : photo pleine largeur, ardoise et horaires */
.dl-fournil .dl-plein{position:relative;min-height:30em;overflow:hidden}
.dl-fournil .dl-plein .ds-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dl-fournil .dl-plein-voile{position:relative;max-width:34em;margin:0 0 0 6%;padding:6em 0 4em;color:#FFF7EC;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.dl-fournil .dl-plein::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,18,8,.72),rgba(30,18,8,.15));z-index:0}
.dl-fournil .dl-plein-voile{z-index:1}
.dl-fournil .dl-ardoise ul{list-style:none;padding:0;margin:0}
.dl-fournil .dl-ardoise li{display:flex;flex-direction:column;padding:.8em 0;border-bottom:1px dashed var(--line)}
.dl-fournil .dl-horaires{background:var(--card);border-radius:var(--rad);padding:1.6em;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.dl-fournil .dl-horaires p{display:flex;justify-content:space-between;margin:.4em 0}
/* Table (restaurant) : sombre, centré, module de réservation */
.dl-table .dl-centre{position:relative;min-height:30em;display:grid;place-items:center;text-align:center;overflow:hidden}
.dl-table .dl-centre .ds-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.42)}
.dl-table .dl-centre-txt{position:relative;max-width:36em;padding:4em 1.5em}
.dl-table .dl-resa-form{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:.8em;align-items:end}
.dl-table .dl-resa-form label{display:flex;flex-direction:column;gap:.35em;font-size:.85em;color:var(--soft)}
.dl-table .dl-resa-form span{border:1px solid var(--line);border-radius:var(--rad);padding:.8em 1em;color:var(--ink)}
.dl-table .dl-menus{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em;text-align:center}
.dl-table .dl-menus article{border:1px solid var(--line);padding:2em 1.2em;border-radius:var(--rad)}
/* Cabinet (avocats) : institutionnel, bandeau, domaines */
.dl-cabinet .dl-bandeau{background:var(--p);color:#fff;padding:4em 0}
.dl-cabinet .dl-bandeau .ds-eyebrow,.dl-cabinet .dl-bandeau .ds-sub{color:rgba(255,255,255,.85)}
.dl-cabinet .dl-bandeau-art .ds-photo{width:100%;border-radius:var(--rad);aspect-ratio:4/3;object-fit:cover}
.dl-cabinet .dl-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2em}
.dl-cabinet .dl-grille article{border-left:4px solid var(--p2);padding:.4em 0 .4em 1.2em}
.dl-cabinet .dl-rdv{text-align:center}
/* Galerie (art) : typographie géante, mur d'œuvres */
.dl-galerie .dl-typo{padding:6em 0 3em}
.dl-galerie .dl-geant{font-size:clamp(2.6em,6vw,5.2em);line-height:1.02;max-width:12em}
.dl-galerie .dl-mur{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1em}
.dl-galerie .dl-mur .ds-tile:first-child{grid-row:span 2}
.dl-galerie .dl-expos ul{list-style:none;padding:0}
.dl-galerie .dl-expos li{display:flex;justify-content:space-between;gap:1em;padding:1.1em 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){
  .dsite .dl-deux,.dl-atelier .dl-split,.dl-atelier .dl-etapes ol,.dl-table .dl-menus,.dl-table .dl-resa-form,.dl-cabinet .dl-grille,.dl-galerie .dl-mur{grid-template-columns:1fr}
  .dl-galerie .dl-mur .ds-tile:first-child{grid-row:auto}
}
.dl-cabinet .dl-bandeau .ds-btn1{background:var(--p2);color:#14110F;border-color:var(--p2)}

/* ═══ RÉALISATIONS — refonte « identité de marque » (proposition 17/10/2026) ═══
   À ajouter en fin de assets/demos.css (fichier chargé par realisations.html seulement).
   Quatre langages visuels : #preuves = bento sombre, #realisations = vitrine d'agence
   (chaque démo dans sa propre peau), #lab = mur d'écrans, #scenarios = récit en zigzag.
   Contrastes calculés (WCAG 2.x) : voir commentaires « n:1 ». Texte jamais < 13 px. */

/* ─────────────── 1. #preuves : BENTO (7 tuiles, zéro case vide) ─────────────── */
#preuves .preuves{grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-areas:"site site client client" "site site docs audit" "trois trois interfaces contenus";
  gap:12px;background:none;border:0;border-radius:0;overflow:visible}
#preuves .preuve{position:relative;isolation:isolate;overflow:hidden;min-width:0;display:flex;flex-direction:column;
  border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:24px 22px}
#preuves .preuve>*{position:relative;z-index:1}
#preuves .preuve-type{font-size:.8125rem;letter-spacing:.12em}
#preuves .preuve h3{font-size:1.125rem}
#preuves .preuve p{font-size:.9375rem;line-height:1.55}
/* Ce site : fenêtre de navigateur + maquette filaire */
#preuves .preuve--site{grid-area:site;justify-content:flex-end;min-height:380px;padding-top:200px;background:linear-gradient(#2A2E35,#2A2E35) 22px 70px/44% 16px no-repeat,linear-gradient(#2A2E35,#2A2E35) 22px 94px/30% 16px no-repeat,linear-gradient(#1F2228,#1F2228) 22px 122px/38% 10px no-repeat,linear-gradient(#E11D3C,#E11D3C) 22px 146px/96px 26px no-repeat,linear-gradient(#1F2228,#1F2228) right 22px top 70px/38% 102px no-repeat,#141619}
#preuves .preuve--site::before{content:"";position:absolute;inset:0 0 auto 0;height:38px;z-index:0;border-bottom:1px solid rgba(255,255,255,.08);
  background:radial-gradient(circle at 20px 19px,#FF3B5C 5px,transparent 5.5px),radial-gradient(circle at 38px 19px,#4A4F58 5px,transparent 5.5px),
             radial-gradient(circle at 56px 19px,#4A4F58 5px,transparent 5.5px),#1F2228}
#preuves .preuve--site::after{content:"";position:absolute;top:10px;left:76px;width:min(46%,260px);height:18px;border-radius:9px;background:#2A2E35;z-index:0}
#preuves .preuve--site h3{font-family:var(--display);font-weight:800;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.02em}
#preuves .preuve--site .preuve-type,#preuves .preuve--client .preuve-type{color:#FF6B84!important}          /* 6,6:1 */
/* Espace client : piste de statuts */
#preuves .preuve--client{grid-area:client;background:#1B1E23;padding-bottom:38px}
#preuves .preuve--client::after{content:"";position:absolute;left:22px;right:22px;bottom:18px;height:6px;border-radius:3px;z-index:0;
  background:linear-gradient(90deg,#FF3B5C 0 24%,transparent 24% 25.5%,#FF3B5C 25.5% 49%,transparent 49% 50.5%,#4A4F58 50.5% 74%,transparent 74% 75.5%,#4A4F58 75.5%)}
/* Chaîne de documents : feuille de papier, coin plié */
#preuves .preuve--docs{grid-area:docs;background:#F4F1EA;border-color:#F4F1EA;border-radius:4px}
#preuves .preuve--docs::before{content:"";position:absolute;top:0;right:0;width:34px;height:34px;z-index:0;background:linear-gradient(225deg,#0B0C0E 50%,#D9D2C3 50%)}
#preuves .preuve--docs h3{color:#0B0C0E!important}                                  /* 17,4:1 */
#preuves .preuve--docs p{color:#33363C!important}                                   /* 10,7:1 */
#preuves .preuve--docs .preuve-type{color:#C0102E!important}                        /* 5,6:1 */
/* Audit : écran de mesure, police à chasse fixe, graduations */
#preuves .preuve--audit{grid-area:audit;background:#0D1512;padding-bottom:40px}
#preuves .preuve--audit .preuve-type{color:#5EE6A0!important;font-family:ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,Menlo,monospace;letter-spacing:.06em} /* 11,7:1 */
#preuves .preuve--audit::after{content:"";position:absolute;left:22px;right:22px;bottom:16px;height:12px;z-index:0;opacity:.55;
  background:repeating-linear-gradient(90deg,#5EE6A0 0 1px,transparent 1px 10px) left bottom/100% 6px no-repeat,
             repeating-linear-gradient(90deg,#5EE6A0 0 1px,transparent 1px 50px) left bottom/100% 12px no-repeat}
/* Site 3D : sol en perspective */
#preuves .preuve--3d{grid-area:trois;background:#15122A;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:22px;align-content:start}
#preuves .preuve--3d>:not(.preuve-media){grid-column:1}
#preuves .preuve--3d>.preuve-media{grid-column:2;grid-row:1 / 4;align-self:center}
#preuves .preuve-media{margin:0;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid rgba(196,181,253,.35);background:#0B0C0E}
#preuves .preuve-media img{display:block;width:100%;height:100%;object-fit:cover}
#preuves .preuve--3d .preuve-type{color:#C4B5FD!important}                          /* 9,9:1 */
#preuves .preuve--3d a{color:#FF93A5}                                               /* 8,7:1 */
/* Interfaces : trame de points */
#preuves .preuve--interfaces{grid-area:interfaces;background:radial-gradient(rgba(147,197,253,.22) 1.2px,transparent 1.7px) 0 0/16px 16px,#0F1B2E}
#preuves .preuve--interfaces .preuve-type{color:#93C5FD!important}
#preuves .preuve--interfaces a{color:#93C5FD}  /* 9,6:1 */                  /* 9,6:1 */
/* Contenus : formats carré et story */
#preuves .preuve--contenus{grid-area:contenus;background:#A3122A;border-color:#A3122A;padding-bottom:84px}
#preuves .preuve--contenus::before,#preuves .preuve--contenus::after{content:"";position:absolute;bottom:18px;z-index:0;border:2px solid rgba(255,255,255,.55);border-radius:6px}
#preuves .preuve--contenus::before{right:62px;width:50px;height:50px}
#preuves .preuve--contenus::after{right:22px;width:30px;height:54px}
#preuves .preuve--contenus .preuve-type{color:#FFC7D0!important}                    /* 5,4:1 */
#preuves .preuve--contenus p{color:#FFE3E7!important}                               /* 6,5:1 */
@media (max-width:999px){
  #preuves .preuves{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"site site" "client client" "docs audit" "trois trois" "interfaces contenus"}
  #preuves .preuve--site{min-height:320px;padding-top:200px}
}
@media (max-width:560px){
  #preuves .preuves{grid-template-columns:minmax(0,1fr);grid-template-areas:none}
  #preuves .preuve{grid-area:auto}
  #preuves .preuve--site{min-height:0;padding-top:64px;background:#141619}
  #preuves .preuve--3d{display:flex}
  #preuves .preuve--3d>.preuve-media{margin-top:16px}
}


/* ─────────────── 3. #lab : MUR D'ÉCRANS (régie sombre, 8 matières) ─────────────── */
#lab.section-grise{background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.5px) 0 0/6px 6px,#101216!important}
#lab .tete h2{color:#FFFFFF}
#lab .tete p{color:#C3C7CE}                                                          /* 11,1:1 */
#lab .rosa-badge-clair{color:#D4D7DC!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important}
#lab .demo-lien{border:1px solid rgba(255,255,255,.14)}
#lab-showroom{grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
#lab-showroom .labx-card{grid-column:span 6;border:0;min-width:0}
#lab-showroom .labx-card[data-id="dashboard"]{grid-column:span 8}
#lab-showroom .labx-card[data-id="mobile"]{grid-column:span 4}
#lab-showroom .labx-card[data-id="crm"]{grid-column:span 7}
#lab-showroom .labx-card[data-id="booking"]{grid-column:span 5}
#lab-showroom .labx-card[data-id="writer"]{grid-column:span 5}
#lab-showroom .labx-card[data-id="workflow"]{grid-column:span 7}
#lab-showroom .labx-body{flex:0 0 auto}
#lab-showroom .labx-frame{aspect-ratio:auto;flex:1 1 auto;min-height:230px;border-bottom:0;background:#F7F8FA}
#lab-showroom .labx-card[data-id="dashboard"] .labx-frame{min-height:380px}
#lab-showroom .labx-badge{top:auto;bottom:10px;left:10px;right:auto;font-size:.8125rem;backdrop-filter:none}
#lab-showroom .labx-cat{font-size:.8125rem}
#lab-showroom .labx-bul li{font-size:.875rem}
#lab-showroom .labx-benefit{font-size:.9375rem}
#lab-showroom .labx-custom{font-size:.8125rem}
/* Cockpit — moniteur noir mat, cadre d'écran, voyants verts */
#lab-showroom [data-id="dashboard"]{background:#16181D;border:1px solid #2A2E36!important;border-radius:18px}
#lab-showroom [data-id="dashboard"] .labx-frame{background:#0B0C10;margin:12px 12px 0;border-radius:10px;box-shadow:0 0 0 6px #0B0C10,0 0 0 7px #2A2E36}
#lab-showroom [data-id="dashboard"] .labx-name{color:#F3F4F6}                       /* 16,1:1 */
#lab-showroom [data-id="dashboard"] .labx-cat{color:#FF6B84!important;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace}  /* 6,5:1 */
#lab-showroom [data-id="dashboard"] .labx-benefit,#lab-showroom [data-id="dashboard"] .labx-custom{color:#A9AFBC} /* 8,1:1 */
#lab-showroom [data-id="dashboard"] .labx-bul li{color:#E5E7EB}
#lab-showroom [data-id="dashboard"] .labx-bul li::before{background:#34D399}
#lab-showroom [data-id="dashboard"] .labx-btn{background:#C0102E;color:#FFFFFF}      /* 6,3:1 */
#lab-showroom [data-id="dashboard"] .labx-badge{background:#0B0C10;color:#FFFFFF;border:1px solid #2A2E36}
/* Fidélité — coque violette arrondie */
#lab-showroom [data-id="mobile"]{background:#5B21B6;border-radius:32px}
#lab-showroom [data-id="mobile"] .labx-frame{margin:12px 12px 0;border-radius:22px;background:#F7F8FA}
#lab-showroom [data-id="mobile"] .labx-name{color:#FFFFFF}                           /* 8,98:1 */
#lab-showroom [data-id="mobile"] .labx-cat,#lab-showroom [data-id="mobile"] .labx-benefit{color:#EDE9FE!important} /* 7,57:1 */
#lab-showroom [data-id="mobile"] .labx-bul li{color:#FFFFFF}
#lab-showroom [data-id="mobile"] .labx-bul li::before{background:#FFFFFF}
#lab-showroom [data-id="mobile"] .labx-btn{background:#FFFFFF;color:#5B21B6}
#lab-showroom [data-id="mobile"] .labx-btn:hover{background:#EDE9FE}
#lab-showroom [data-id="mobile"] .labx-badge{background:#FFFFFF;color:#5B21B6}
/* Pipeline — colonnes de kanban sur bleu */
#lab-showroom [data-id="crm"]{background:#1E3A8A;border-radius:14px}
#lab-showroom [data-id="crm"] .labx-body{background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.12) calc(25% - 1px) 25%)}
#lab-showroom [data-id="crm"] .labx-frame{margin:12px 12px 0;border-radius:10px}
#lab-showroom [data-id="crm"] .labx-name{color:#FFFFFF;font-family:var(--sans);font-weight:700;letter-spacing:-.01em}  /* 10,4:1 */
#lab-showroom [data-id="crm"] .labx-cat,#lab-showroom [data-id="crm"] .labx-benefit,#lab-showroom [data-id="crm"] .labx-custom{color:#C7D7FE!important} /* 7,2:1 */
#lab-showroom [data-id="crm"] .labx-bul li{color:#FFFFFF}
#lab-showroom [data-id="crm"] .labx-bul li::before{background:#93C5FD;border-radius:2px}
#lab-showroom [data-id="crm"] .labx-btn{background:#FFFFFF;color:#1E3A8A;border-radius:8px}  /* 10,4:1 */
#lab-showroom [data-id="crm"] .labx-btn:hover{background:#E0E9FF}
#lab-showroom [data-id="crm"] .labx-badge{background:#1E3A8A;color:#FFFFFF}
/* Réservation — agenda à spirale, papier ambré */
#lab-showroom [data-id="booking"]{background:#FFF7ED;border:1px solid #FED7AA!important;border-radius:12px;padding-top:20px;position:relative}
#lab-showroom [data-id="booking"]::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;z-index:5;
  background:radial-gradient(circle,#9A3412 0 4px,transparent 4.5px) 14px 50%/32px 20px repeat-x}
#lab-showroom [data-id="booking"] .labx-frame{margin:0 12px;border-radius:8px;border:1px solid #FED7AA}
#lab-showroom [data-id="booking"] .labx-name{color:#1C1917}
#lab-showroom [data-id="booking"] .labx-cat{color:#9A3412!important}                 /* 6,9:1 */
#lab-showroom [data-id="booking"] .labx-benefit,#lab-showroom [data-id="booking"] .labx-custom{color:#57534E}  /* 7,2:1 */
#lab-showroom [data-id="booking"] .labx-bul li{color:#1C1917}
#lab-showroom [data-id="booking"] .labx-bul li::before{background:#B45309}
#lab-showroom [data-id="booking"] .labx-btn{background:#9A3412;color:#FFFFFF;border-radius:6px}  /* 7,3:1 */
#lab-showroom [data-id="booking"] .labx-btn:hover{background:#7C2D12}
#lab-showroom [data-id="booking"] .labx-badge{background:#9A3412;color:#FFFFFF}
/* Rédaction — papier ligné, marge rouge, italique d'écriture */
#lab-showroom [data-id="writer"]{background:#FBFAF7;border:1px solid #E7E5E0!important;border-radius:3px}
#lab-showroom [data-id="writer"] .labx-body{border-top:1px dashed #DDD9D0;background:linear-gradient(90deg,transparent 10px,#F3B7B7 10px 11px,transparent 11px)}
#lab-showroom [data-id="writer"] .labx-frame{margin:14px 14px 0;border:1px solid #E7E5E0}
#lab-showroom [data-id="writer"] .labx-name{font-family:Georgia,"Palatino Linotype",serif;font-style:italic;font-weight:700;color:#1F2937}
#lab-showroom [data-id="writer"] .labx-cat{color:#334155!important}                  /* 9,9:1 */
#lab-showroom [data-id="writer"] .labx-benefit,#lab-showroom [data-id="writer"] .labx-custom{color:#475569}  /* 7,3:1 */
#lab-showroom [data-id="writer"] .labx-bul li::before{background:#475569;border-radius:0;width:8px;height:2px;top:.62em}
#lab-showroom [data-id="writer"] .labx-btn{background:#334155;color:#FFFFFF;border-radius:4px}  /* 10,4:1 */
#lab-showroom [data-id="writer"] .labx-btn:hover{background:#1E293B}
#lab-showroom [data-id="writer"] .labx-badge{background:#334155;color:#FFFFFF}
/* Stock — carton d'entrepôt, étiquette, code-barres, chasse fixe */
#lab-showroom [data-id="stock"]{background:#EFE4D2;border:2px dashed #BFA67C!important;border-radius:6px}
#lab-showroom [data-id="stock"] .labx-body{position:relative;padding-right:110px}
#lab-showroom [data-id="stock"] .labx-body::after{content:"";position:absolute;top:22px;right:22px;width:72px;height:34px;opacity:.85;
  background:repeating-linear-gradient(90deg,#2B2418 0 2px,transparent 2px 4px,#2B2418 4px 5px,transparent 5px 8px,#2B2418 8px 11px,transparent 11px 13px)}
#lab-showroom [data-id="stock"] .labx-frame{margin:12px 12px 0;border:1px solid #CDB894}
#lab-showroom [data-id="stock"] .labx-name{font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;color:#2B2418}
#lab-showroom [data-id="stock"] .labx-cat{color:#0F5F58!important;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace}  /* 6,0:1 */
#lab-showroom [data-id="stock"] .labx-benefit,#lab-showroom [data-id="stock"] .labx-custom{color:#4A3F30}  /* 8,2:1 */
#lab-showroom [data-id="stock"] .labx-bul li{color:#2B2418}
#lab-showroom [data-id="stock"] .labx-bul li::before{background:#0F5F58;border-radius:0}
#lab-showroom [data-id="stock"] .labx-btn{background:#115E59;color:#FFFFFF;border-radius:3px}  /* 7,6:1 */
#lab-showroom [data-id="stock"] .labx-btn:hover{background:#0B4A46}
#lab-showroom [data-id="stock"] .labx-badge{background:#2B2418;color:#EFE4D2}
/* Orchestrateur — plan technique sur fond canard, nœuds reliés */
#lab-showroom [data-id="workflow"]{background:#0A2E2C;border:1px solid #134E4A!important;border-radius:14px}
#lab-showroom [data-id="workflow"] .labx-body{background:linear-gradient(rgba(94,234,212,.08) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(94,234,212,.08) 1px,transparent 1px) 0 0/20px 20px}
#lab-showroom [data-id="workflow"] .labx-frame{margin:12px 12px 0;border-radius:8px}
#lab-showroom [data-id="workflow"] .labx-name{color:#FFFFFF}
#lab-showroom [data-id="workflow"] .labx-cat{color:#5EEAD4!important;font-family:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace}  /* 9,9:1 */
#lab-showroom [data-id="workflow"] .labx-benefit,#lab-showroom [data-id="workflow"] .labx-custom{color:#CDEAE7}  /* 11,5:1 */
#lab-showroom [data-id="workflow"] .labx-bul li{color:#FFFFFF}
#lab-showroom [data-id="workflow"] .labx-bul li::before{background:transparent;border:2px solid #5EEAD4;width:8px;height:8px;top:.4em}
#lab-showroom [data-id="workflow"] .labx-btn{background:#5EEAD4;color:#0A2E2C;border-radius:8px}  /* 9,9:1 */
#lab-showroom [data-id="workflow"] .labx-btn:hover{background:#99F6E4}
#lab-showroom [data-id="workflow"] .labx-badge{background:#0A2E2C;color:#5EEAD4;border:1px solid #134E4A}
/* Boutique — vitrine pastel, très arrondie, étiquette de prix (forme seule) */
#lab-showroom [data-id="shop"]{background:#FCE7F0;border-radius:28px}
#lab-showroom [data-id="shop"] .labx-frame{margin:14px 14px 0;border-radius:18px}
#lab-showroom [data-id="shop"] .labx-name{color:#3B0A22}
#lab-showroom [data-id="shop"] .labx-cat{color:#A0144C!important}                    /* 6,6:1 */
#lab-showroom [data-id="shop"] .labx-benefit,#lab-showroom [data-id="shop"] .labx-custom{color:#6B2142}  /* 9,3:1 */
#lab-showroom [data-id="shop"] .labx-bul li{color:#3B0A22}
#lab-showroom [data-id="shop"] .labx-bul li::before{background:#C2185B}
#lab-showroom [data-id="shop"] .labx-btn{background:#A0144C;color:#FFFFFF}           /* 7,8:1 */
#lab-showroom [data-id="shop"] .labx-btn:hover{background:#7F0F3C}
#lab-showroom [data-id="shop"] .labx-badge{background:#A0144C;color:#FFFFFF}
#lab-showroom .labx-card:hover,#lab-showroom .labx-card:focus-within{box-shadow:0 26px 50px -24px rgba(0,0,0,.7)}
@media (max-width:960px){
  #lab-showroom{grid-template-columns:repeat(6,minmax(0,1fr))}
  #lab-showroom .labx-card,#lab-showroom .labx-card[data-id]{grid-column:span 3}
  #lab-showroom .labx-card[data-id="dashboard"],#lab-showroom .labx-card[data-id="shop"]{grid-column:span 6}
  #lab-showroom .labx-card[data-id="dashboard"] .labx-frame{min-height:300px}
}
@media (max-width:620px){
  #lab-showroom .labx-card,#lab-showroom .labx-card[data-id]{grid-column:1 / -1}
  #lab-showroom [data-id="stock"] .labx-body{padding-right:22px}
  #lab-showroom [data-id="stock"] .labx-body::after{display:none}
}

/* ─────────────── 4. #scenarios : RÉCIT EN ZIGZAG (chapitres numérotés) ─────────────── */
#scenarios .etudes-cas{grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,56px);counter-reset:scen}
#scenarios .etude{counter-increment:scen;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto auto 1fr auto;
  grid-template-areas:"fig ." "fig tete" "fig resume" "fig lien" "fig toggle" "fig ." "panneau panneau";
  column-gap:clamp(24px,4vw,56px);padding:clamp(18px,3vw,32px);border:0!important;border-radius:22px;box-shadow:none!important;transform:none!important}
#scenarios .etude:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:". fig" "tete fig" "resume fig" "lien fig" "toggle fig" ". fig" "panneau panneau"}
#scenarios .etude::before{content:none}
#scenarios .etude-couverture{grid-area:fig;margin:0;border-radius:14px;align-self:center}
#scenarios .etude-tete{grid-area:tete;flex-direction:column;align-items:flex-start;gap:4px}
#scenarios .etude-resume{grid-area:resume;font-size:1rem;max-width:52ch}
#scenarios .etude-lien{grid-area:lien}
#scenarios .etude-toggle{grid-area:toggle;justify-self:start}
#scenarios .etude-panneau{grid-area:panneau}
#scenarios .etude h3{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.15}
#scenarios .etude-secteur{font-size:.8125rem}
#scenarios .etude-bloc h4{font-size:.8125rem}
#scenarios .etude-tech .puce{font-size:.8125rem}
/* « Scénario type » devient un en-tête de chapitre numéroté (lu « Scénario type 01 ») */
#scenarios .etude-tete .badge-demo{order:-1;background:none!important;border:0!important;padding:0;font-size:.8125rem;letter-spacing:.14em;color:inherit!important}
#scenarios .etude-tete .badge-demo::after{content:" " counter(scen,decimal-leading-zero);display:block;font-family:var(--display);font-weight:800;font-size:3.25rem;line-height:1;letter-spacing:-.02em;margin-top:4px;color:var(--sc-num)}
/* Chapitre 1 — Atelier Nova : kraft */
#scenarios .etude--nova{background:#F7F1E8;--sc-num:#B87333;color:#5C4B3A}            /* chiffre 3,8:1 (grand texte) */
#scenarios .etude--nova .etude-couverture{aspect-ratio:3/2}
#scenarios .etude--nova .etude-couverture img{object-position:50% 55%}
#scenarios .etude--nova h3{color:#2A2018}
#scenarios .etude--nova .etude-secteur,#scenarios .etude--nova .badge-demo{color:#8A4F1E!important}   /* 5,8:1 */
#scenarios .etude--nova .etude-resume{color:#5C4B3A}                                 /* 7,4:1 */
/* Chapitre 2 — Maison Bertin : farine, photo verticale */
#scenarios .etude--bertin{background:#FCEFD9;--sc-num:#B4542A}                    /* chiffre 4,4:1 (grand texte) */
#scenarios .etude--bertin .etude-couverture{aspect-ratio:4/5;max-height:560px;justify-self:center}
#scenarios .etude--bertin .etude-couverture img{object-position:50% 14%}
#scenarios .etude--bertin h3{color:#2A1A10}
#scenarios .etude--bertin .etude-secteur,#scenarios .etude--bertin .badge-demo{color:#9A3F1C!important}  /* 6,2:1 */
#scenarios .etude--bertin .etude-resume{color:#5C4A3A}                               /* 7,7:1 */
/* Chapitre 3 — CRM 3D : nuit ROSA, vue 3D carrée */
#scenarios .etude--crm{background:#0B0C0E;--sc-num:#FF3B5C}
#scenarios .etude--crm .etude-couverture{border-radius:16px}
#scenarios .etude--crm .etude-couverture img{object-position:50% 0}
#scenarios .etude--crm h3{color:#FFFFFF}
#scenarios .etude--crm .etude-secteur,#scenarios .etude--crm .badge-demo{color:#FF6B84!important}     /* 7,2:1 */
#scenarios .etude--crm .etude-resume{color:#D4D7DC}                                  /* 13,6:1 */
#scenarios .etude--crm .etude-lien .btn{color:#FFFFFF!important;border-color:rgba(255,255,255,.55)!important;background:transparent!important}
#scenarios .etude--crm .etude-toggle{color:#FFB3C0!important;background:rgba(255,107,132,.12)!important;border-color:rgba(255,107,132,.45)!important}
#scenarios .etude--crm .etude-panneau{border-top-color:rgba(255,255,255,.14)}
#scenarios .etude--crm .etude-tech .puce{color:#FFB3C0!important;background:rgba(255,107,132,.12)!important;border-color:rgba(255,107,132,.4)!important}
/* Chapitre 4 — Cabinet Ferrand : gris bleuté, filet or */
#scenarios .etude--cabinet{background:#F3F5F9;--sc-num:#1B3A6B}
#scenarios .etude--cabinet .etude-couverture{aspect-ratio:4/3;box-shadow:0 0 0 1px #E2E6EC}
#scenarios .etude--cabinet h3{color:#141B29}
#scenarios .etude--cabinet h3::after{content:"";display:block;width:44px;height:2px;margin-top:10px;background:#8A6A25}
#scenarios .etude--cabinet .etude-secteur,#scenarios .etude--cabinet .badge-demo{color:#1B3A6B!important}  /* 10,3:1 */
#scenarios .etude--cabinet .etude-resume{color:#4B5563}                              /* 6,9:1 */
/* Bouton et dépliant teintés par chapitre */
#scenarios .etude--nova .etude-lien .btn{border-color:#8A4F1E!important;color:#2A2018!important}
#scenarios .etude--nova .etude-toggle{color:#6E3D14!important;background:rgba(138,79,30,.10)!important;border-color:rgba(138,79,30,.45)!important}
#scenarios .etude--bertin .etude-lien .btn{border-color:#9A3F1C!important;color:#2A1A10!important}
#scenarios .etude--bertin .etude-toggle{color:#7C2D12!important;background:rgba(154,63,28,.10)!important;border-color:rgba(154,63,28,.45)!important}
#scenarios .etude--cabinet .etude-lien .btn{border-color:#1B3A6B!important;color:#141B29!important;border-radius:3px!important}
#scenarios .etude--cabinet .etude-toggle{color:#1B3A6B!important;background:rgba(27,58,107,.08)!important;border-color:rgba(27,58,107,.35)!important;border-radius:3px}
@media (max-width:860px){
  #scenarios .etude,#scenarios .etude:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"fig" "tete" "resume" "lien" "toggle" "panneau"}
  #scenarios .etude-couverture{margin-bottom:18px}
  #scenarios .etude--bertin .etude-couverture{aspect-ratio:4/3;max-height:none}
  #scenarios .etude--bertin .etude-couverture img{object-position:50% 22%}
  #scenarios .etude--crm .etude-couverture{aspect-ratio:16/10}
  #scenarios .etude-tete .badge-demo::after{font-size:2.5rem}
}
@media (min-width:861px){#scenarios .etude--crm{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto auto auto;grid-template-areas:'fig fig' 'tete lien' 'resume toggle' 'panneau panneau';row-gap:10px}#scenarios .etude--crm .etude-couverture{aspect-ratio:2/1;margin-bottom:18px}#scenarios .etude--crm .etude-lien{justify-self:end;align-self:end;margin:0}#scenarios .etude--crm .etude-toggle{justify-self:end;align-self:start}}
@media (prefers-reduced-motion:reduce){
  #demo-galerie .dcard,#lab-showroom .labx-card,#scenarios .etude{transition:none!important;transform:none!important}
  #scenarios .etude:hover .etude-couverture img{transform:none}
}
@media (max-width:374px){.cta-sticky .txt{min-width:0;flex:1 1 auto}.cta-sticky .btn{flex:0 0 auto;padding:10px 12px!important;font-size:.8125rem!important}}

/* ─────────────── 5. Anneaux de focus visibles sur chaque matière (≥ 3:1 contre le fond) ─────────────── */
#lab-showroom [data-id="mobile"] .labx-btn:focus-visible,#lab-showroom [data-id="crm"] .labx-btn:focus-visible{outline-color:#FFFFFF}  /* 6,9 et 10,4:1 */
#lab-showroom [data-id="stock"] .labx-btn:focus-visible,#lab-showroom [data-id="shop"] .labx-btn:focus-visible{outline-color:#0B0C0E}  /* 15,6 et 16,6:1 */
#lab-showroom [data-id="workflow"] .labx-btn:focus-visible{outline-color:#5EEAD4}     /* 9,9:1 */

#lab-showroom [data-id="booking"] .labx-btn:focus-visible{outline-color:#9A3412}
#lab-showroom [data-id="writer"] .labx-btn:focus-visible{outline-color:#334155}
#scenarios .etude--nova :is(.etude-lien .btn,.etude-toggle):focus-visible{outline-color:#2A2018}
#scenarios .etude--bertin :is(.etude-lien .btn,.etude-toggle):focus-visible{outline-color:#2A1A10}
#scenarios .etude--cabinet :is(.etude-lien .btn,.etude-toggle):focus-visible{outline-color:#1B3A6B}

/* ═══ Vitrine des 8 sites de démonstration autonomes (17/10/2026) ═══
   Chaque carte porte la peau de SON site : couleurs, typographie, forme. Contrastes calculés (WCAG 2.x). */
.vitrine-sites{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.vitrine{min-width:0;grid-column:span 6}
.vitrine-l5{grid-column:span 5}.vitrine-l6{grid-column:span 6}.vitrine-l7{grid-column:span 7}.vitrine-l12{grid-column:1 / -1}
.vitrine-lien{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--v-ink);background:var(--v-bg);
  border-radius:var(--v-rad,18px);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 40px -24px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.vitrine-lien:hover{transform:translateY(-4px);box-shadow:0 26px 60px -26px rgba(0,0,0,.45)}
.vitrine-lien:focus-visible{outline:3px solid var(--v-focus,#C2163A);outline-offset:4px}
.vitrine-capture{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--v-bg2,#ddd)}
.vitrine-capture img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vitrine-lien:hover .vitrine-capture img{transform:scale(1.03)}
.vitrine-capture figcaption{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(11,12,14,.82);color:#FFFFFF;font:500 .8125rem/1.3 Inter,system-ui,sans-serif}
.vitrine-corps{display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px;flex:1 1 auto}
.vitrine-type{margin:0;font:600 .8125rem/1.3 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--v-acc)}
.vitrine-nom{margin:0;font-family:var(--v-font);font-weight:var(--v-wt,700);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.08;letter-spacing:var(--v-ls,-.01em);
  font-style:var(--v-style,normal);text-transform:var(--v-tt,none);color:var(--v-ink)}
.vitrine-lieu{margin:0;font-size:.9375rem;color:var(--v-soft)}
.vitrine-essai{margin:8px 0 0;font-size:.9375rem;line-height:1.55;color:var(--v-ink)}
.vitrine-essai span{display:inline-block;margin-right:6px;font-weight:700;color:var(--v-acc)}
.vitrine-bouton{align-self:flex-start;margin-top:auto;padding:11px 20px;border-radius:var(--v-btn-rad,999px);background:var(--v-btn);color:var(--v-btn-ink);
  font:700 .9375rem/1 Inter,system-ui,sans-serif;transition:filter .2s}
.vitrine-corps .vitrine-essai{margin-bottom:14px}
.vitrine-lien:hover .vitrine-bouton{filter:brightness(1.08)}
/* Larges : capture et texte côte à côte */
@media (min-width:900px){
  .vitrine-l12 .vitrine-lien{flex-direction:row}
  .vitrine-l12 .vitrine-capture{flex:0 0 62%;aspect-ratio:16/10}
  .vitrine-l12 .vitrine-corps{justify-content:center;padding:36px}
  .vitrine-l12 .vitrine-nom{font-size:clamp(2rem,3.4vw,3rem)}
  .vitrine--kairn .vitrine-lien{flex-direction:row-reverse}
}
/* Peaux, une par site (ink/bg, acc/bg, soft/bg, bouton : ratios ≥ 4,5:1) */
.vitrine--nova{--v-bg:#F4EDE3;--v-bg2:#E4D5C0;--v-ink:#3B2A1E;--v-acc:#8A4A1C;--v-soft:#5E4A3A;--v-btn:#8A4A1C;--v-btn-ink:#FFFFFF;--v-font:Georgia,'Palatino Linotype',serif;--v-style:italic;--v-wt:400;--v-rad:4px;--v-btn-rad:2px;--v-focus:#3B2A1E}
.vitrine--bertin{--v-bg:#9E2B1F;--v-bg2:#7E2218;--v-ink:#FFF6E5;--v-acc:#FFD27A;--v-soft:#F6DCC4;--v-btn:#FFF6E5;--v-btn-ink:#9E2B1F;--v-font:Poppins,Inter,sans-serif;--v-wt:800;--v-tt:uppercase;--v-ls:-.02em;--v-rad:22px;--v-focus:#2B1A12}
.vitrine--laurent{--v-bg:#0E0D0B;--v-bg2:#1A1814;--v-ink:#F3EDE2;--v-acc:#C9A86A;--v-soft:#BDB3A2;--v-btn:#C9A86A;--v-btn-ink:#0E0D0B;--v-font:Didot,'Bodoni MT','Bodoni 72','Times New Roman',serif;--v-wt:400;--v-ls:.01em;--v-rad:0;--v-btn-rad:0;--v-focus:#0E0D0B}
.vitrine--ferrand{--v-bg:#14264A;--v-bg2:#0F1D39;--v-ink:#FFFFFF;--v-acc:#D9B77E;--v-soft:#C9D3E6;--v-btn:#FFFFFF;--v-btn-ink:#14264A;--v-font:'Book Antiqua','Palatino Linotype',Georgia,serif;--v-wt:700;--v-rad:3px;--v-btn-rad:3px;--v-focus:#14264A}
.vitrine--vera{--v-bg:#FAFAF7;--v-bg2:#EDEDE8;--v-ink:#111111;--v-acc:#B4301A;--v-soft:#5E5E5E;--v-btn:#111111;--v-btn-ink:#FAFAF7;--v-font:Inter,system-ui,sans-serif;--v-wt:200;--v-ls:-.03em;--v-rad:0;--v-btn-rad:0;--v-focus:#B4301A}
.vitrine--vera .vitrine-lien{box-shadow:inset 0 0 0 1px #E2E2DC}
.vitrine--kairn{--v-bg:#0B1020;--v-bg2:#11183A;--v-ink:#E6E9F2;--v-acc:#22D3EE;--v-soft:#AAB2C5;--v-btn:#22D3EE;--v-btn-ink:#0B1020;--v-font:Poppins,Inter,sans-serif;--v-wt:800;--v-ls:-.03em;--v-rad:24px;--v-btn-rad:12px;--v-focus:#0B1020}
.vitrine--kairn .vitrine-lien{background:radial-gradient(60% 80% at 100% 0,rgba(124,92,255,.35),transparent 60%),radial-gradient(50% 70% at 0 100%,rgba(34,211,238,.18),transparent 60%),#0B1020}
.vitrine--tilleuls{--v-bg:#DDE5D6;--v-bg2:#C9D4C0;--v-ink:#23412F;--v-acc:#8E3B22;--v-soft:#3E5A47;--v-btn:#23412F;--v-btn-ink:#FBF8F1;--v-font:'Palatino Linotype','Book Antiqua',Georgia,serif;--v-wt:700;--v-rad:34px 34px 34px 6px;--v-focus:#23412F}
.vitrine--duval{--v-bg:#FFC400;--v-bg2:#E9E7E2;--v-ink:#111111;--v-acc:#111111;--v-soft:#3A3000;--v-btn:#111111;--v-btn-ink:#FFC400;--v-font:'Arial Black',Impact,Poppins,sans-serif;--v-wt:900;--v-tt:uppercase;--v-ls:-.01em;--v-rad:0;--v-btn-rad:0;--v-focus:#111111}
.vitrine--duval .vitrine-lien{box-shadow:8px 8px 0 #111111}
.vitrine--duval .vitrine-lien:hover{box-shadow:12px 12px 0 #111111}
.vitrine--duval .vitrine-type{font-family:Consolas,'Courier New',monospace}
@media (max-width:899px){
  .vitrine-l5,.vitrine-l6,.vitrine-l7{grid-column:span 6}
  .vitrine-l12{grid-column:1 / -1}
}
@media (max-width:640px){
  .vitrine-sites{grid-template-columns:minmax(0,1fr);gap:18px}
  .vitrine,.vitrine-l5,.vitrine-l6,.vitrine-l7,.vitrine-l12{grid-column:auto}
  .vitrine-corps{padding:18px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  .vitrine-lien,.vitrine-capture img{transition:none}
  .vitrine-lien:hover,.vitrine-lien:hover .vitrine-capture img{transform:none}
}

/* Couleur de texte des cartes : prioritaire sur la couleur générale des liens de la page */
#vitrine-sites .vitrine-lien,#vitrine-sites .vitrine-lien:visited{color:var(--v-ink)}

/* 29/10/2026 : « Créer un projet similaire » sous chaque démonstration */
.vitrine-similaire{margin:.6rem 1rem 1rem}