/* Tableau de bord de la boutique (démo) : charte « station de ski », jour de neige.
   Spec : docs/specs/2026-10-17-tableau-de-bord-demo.md, §3. Les couleurs d'état sont celles des pistes (verte, bleue,
   rouge, noire) et ne servent qu'aux états ; l'orange dameuse marque la sélection, « aujourd'hui » et le focus.
   Échelle de texte : 12 / 13 / 14 / 15 / 17 / 20 / 24 / 32 px. Espacements : pas de 4 px. Aucun style écrit dans la page
   (politique de sécurité) : les couleurs des données passent par la variable --c, les largeurs par --l. */

@font-face { font-family: Poppins; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: Poppins; font-weight: 800; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); }
@font-face { font-family: Figtree; font-weight: 300 900; font-display: swap; src: url('fonts/figtree.woff2') format('woff2'); }

:root {
  --ciel-haut: #C9D9E8; --ciel-bas: #EEF3F8;
  --mont-1: #A9BDD0; --mont-2: #8299B2; --mont-3: #5F7891;
  --neige: #F7FAFD; --neige-ombre: #D8E4EF;
  --sapin: #2C5546; --sapin-clair: #3E6E5B;
  --bois: #9A6A45; --bois-fonce: #6E4730;
  --encre: #13283F; --encre-2: #46607A; --encre-3: #5F738A;
  --panneau: rgba(255, 255, 255, .88); --panneau-plein: #FFFFFF; --bord: #D5E1EC; --trait: #E4ECF4;
  --ombre: 0 12px 32px -14px rgba(19, 40, 63, .35), 0 2px 6px rgba(19, 40, 63, .06);
  --p-verte: #1E9A57; --p-bleue: #1F63C6; --p-rouge: #D3263A; --p-noire: #16202C;
  --t-verte: #146B3D; --t-bleue: #164C99; --t-rouge: #A51C2C;
  --f-verte: #E2F3E9; --f-bleue: #E4ECFA; --f-rouge: #FBE5E8;
  --dameuse: #E8781E; --dameuse-texte: #A84F0A;
  --titre: Poppins, 'Segoe UI', system-ui, sans-serif; --corps: Figtree, 'Segoe UI', system-ui, sans-serif;
  --rayon: 16px; --rayon-s: 10px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; font: 400 15px/1.5 var(--corps); color: var(--encre);
  background: linear-gradient(180deg, var(--ciel-haut) 0%, var(--ciel-bas) 420px, #F3F7FB 100%) fixed, var(--ciel-bas);
}
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 17px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2); }
h4 { font-size: 15px; }
p { margin: 0; }
a { color: inherit; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--dameuse); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 8px 16px; background: var(--encre); color: #fff; border-radius: 8px; }
.evitement:focus { top: 12px; }
.note { font-size: 13px; color: var(--encre-3); }
.compte { display: inline-block; min-width: 26px; padding: 1px 8px; border-radius: 99px; background: var(--trait); color: var(--encre-2); font: 700 13px/1.5 var(--titre); text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Bandeau de la maquette */
.bandeau-demo {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center;
  padding: 8px 16px; font-size: 13px; color: var(--encre-2); background: rgba(255, 255, 255, .55); border-bottom: 1px solid var(--bord);
}
.bandeau-demo strong { font: 700 12px var(--titre); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--dameuse-texte); padding: 2px 8px; border-radius: 6px; }

/* ---- HUD */
.hud {
  display: grid; grid-template-columns: auto minmax(270px, 1.35fr) minmax(270px, 1.35fr) minmax(190px, .85fr) minmax(220px, 1fr);
  gap: 10px; align-items: stretch; padding: 14px 20px 10px;
}
.hud-marque { display: flex; align-items: center; gap: 12px; padding-right: 4px; }
.marque-signe svg { width: 44px; height: 44px; display: block; }
.ms-mont { fill: var(--encre); } .ms-neige { fill: #fff; }
.hud-marque h1 { font: 800 22px/1 var(--titre); letter-spacing: .01em; white-space: nowrap; }
.hud-marque .coeur { color: var(--p-rouge); }
.hud-marque span:not(.coeur) { display: block; margin-top: 4px; font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.tuile {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; text-decoration: none;
  background: var(--panneau); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
a.tuile:hover { border-color: #B9CBDC; background: var(--panneau-plein); }
.tuile-libelle { font: 700 12px var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2); }
.tuile-valeur { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.tuile-valeur strong { font: 800 22px/1.25 var(--titre); letter-spacing: -.01em; white-space: nowrap; }
.tuile-valeur .sur { font-size: 14px; color: var(--encre-3); }
.tuile-sous { font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.tuile-sous b { color: var(--encre); white-space: nowrap; }
.valeur-ok strong { font-size: 18px; }
.valeur-ok .icone { color: var(--p-verte); }
.hausse { color: var(--t-verte) !important; } .baisse { color: var(--t-rouge) !important; }
.icone { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tuile-meteo .icone { color: var(--encre-2); }
.jauge { display: block; width: 100%; height: 10px; margin: 6px 0 4px; overflow: visible; }
.jauge-fond { fill: #E1E9F2; } .jauge-prevu { fill: rgba(70, 96, 122, .3); } .jauge-fait { fill: var(--encre-2); } .jauge-objectif { fill: var(--dameuse); }

/* ---- Onglets : des panneaux de piste */
.onglets { display: flex; gap: 8px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; }
.onglet {
  display: inline-flex; align-items: baseline; gap: 8px; flex: none; min-height: 44px; padding: 10px 16px; text-decoration: none;
  background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; box-shadow: var(--ombre);
}
.onglet-nom { font: 700 13px var(--titre); text-transform: uppercase; letter-spacing: .08em; }
.onglet-compte { font-size: 13px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.onglet:hover { background: var(--panneau-plein); }
.onglet[aria-current="page"] { background: #fff; border-color: var(--dameuse); color: var(--encre); box-shadow: inset 0 -3px 0 var(--dameuse), var(--ombre); }

/* ---- Le terrain : décor, scène, panneaux posés dessus */
main { padding: 0 20px 24px; }
.terrain { position: relative; height: clamp(600px, calc(100vh - 304px), 880px); border-radius: 24px; overflow: hidden; border: 1px solid var(--bord); box-shadow: var(--ombre); }
.vue { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)); }
.fond-arriere, .scene-3d, .fond-avant { position: absolute; inset: 0; }
.fond-arriere { z-index: 0; }
.scene-3d { z-index: 1; }
.scene-3d canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.fond-avant { z-index: 2; pointer-events: none; }
.scene-repli { display: none; position: absolute; inset: auto 0 24px; text-align: center; color: var(--encre-2); font-size: 14px; }
.scene-3d[data-etat="echec"] .scene-repli { display: block; }
.scene-etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.etiquette-salle {
  position: absolute; left: 0; top: 0; white-space: nowrap; padding: 4px 12px 6px; border-radius: 10px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--bord); border-top: 4px solid var(--encre);
  box-shadow: 0 8px 18px -10px rgba(19, 40, 63, .55); color: var(--encre);
}
.etiquette-salle .nom { display: block; font: 800 12px/1.3 var(--titre); text-transform: uppercase; letter-spacing: .1em; }
.etiquette-salle .info { display: block; font-size: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.etiquette-salle.active { border-top-color: var(--dameuse); background: #fff; }
.scene-bulle {
  position: absolute; left: 0; top: 0; z-index: 4; max-width: 290px; pointer-events: none; padding: 8px 12px; border-radius: 10px;
  background: rgba(19, 40, 63, .94); color: #fff; font-size: 13px; box-shadow: var(--ombre);
}
.scene-bulle strong { display: block; font: 700 14px var(--titre); }
.scene-bulle span { display: block; color: #D5E1EC; }
.scene-bulle .bulle-action { margin-top: 4px; color: #FFC58F; font-weight: 600; }
.scene-3d[data-etat="pret"] canvas { animation: apparition .5s ease-out both; }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

/* Panneaux posés sur la scène */
.panneau {
  background: var(--panneau); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
}
.terrain > .quetes, .terrain > .colonne { position: absolute; z-index: 3; top: 16px; max-height: calc(100% - 32px); overflow: auto; scrollbar-width: thin; scrollbar-color: #B9CBDC transparent; }
.terrain > .quetes { left: 16px; width: 380px; padding: 16px; }
.terrain > .colonne { right: 16px; width: 360px; display: flex; flex-direction: column; gap: 12px; background: none; border: 0; box-shadow: none; }
.colonne > .panneau { padding: 16px; flex: none; }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panneau-tete h2 { display: flex; align-items: center; gap: 8px; }
.panneau-tete h2::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--mont-2); flex: none; }
.panneau-intro { font-size: 13px; color: var(--encre-2); margin-bottom: 12px; }

/* Tuiles de ventes (jour, mois) : mini-barres + jauge */
.mini-barres { display: block; width: 100%; height: 26px; margin-top: 6px; }
.mb-fait { fill: var(--encre-2); } .mb-surligne { fill: var(--dameuse); }
.mb-prevu { fill: rgba(70, 96, 122, .1); stroke: var(--encre-3); stroke-width: .6; stroke-dasharray: 2 1.5; }
.tuile-ventes .jauge { margin-top: 4px; }
.ok-texte { display: inline-flex; align-items: center; gap: 3px; color: var(--t-verte); font-weight: 600; }
.ok-texte .icone { width: 14px; height: 14px; }

/* Bientôt en rupture */
.aide { margin: -2px 0 10px; font-size: 13px; color: var(--encre-2); }
.aide summary { cursor: pointer; font-weight: 600; color: var(--encre-2); width: max-content; }
.aide p { margin-top: 4px; }
.ru-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ru { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--panneau-plein); border: 1px solid var(--trait); }
.ru-noire { border-left: 4px solid var(--p-noire); } .ru-rouge { border-left: 4px solid var(--p-rouge); }
.ru-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ru-texte .pastille { margin-right: 2px; vertical-align: 1px; }
.ru-nom { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
.ru-nom:hover { text-decoration: underline; text-underline-offset: 3px; }
.ru-commander { font-size: 13px; font-weight: 700; color: var(--encre); background: #fff; border: 1.5px solid var(--encre); padding: 3px 10px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.ru-commander:hover { background: var(--neige); }
.ru-reglette { position: relative; height: 10px; border-radius: 99px; background: var(--trait); }
.ru-stock { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--l) * 100%); border-radius: 99px; background: var(--c-piste, var(--encre-2)); }
.ru-noire .ru-stock { background: var(--p-noire); } .ru-rouge .ru-stock { background: var(--p-rouge); } .ru-bleue .ru-stock { background: var(--p-bleue); }
.ru-repere { position: absolute; top: -4px; bottom: -4px; left: calc(var(--x) * 100%); width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--encre); }
.ru-route { background: var(--p-verte); width: 4px; }
.ru-texte { font-size: 13px; color: var(--encre-2); }
.ru-texte b { color: var(--encre); }
.ru-ok { display: inline-flex; align-items: center; gap: 3px; color: var(--t-verte); font-weight: 600; }
.ru-ok .icone { width: 14px; height: 14px; }
.ru-ko { color: var(--t-rouge); font-weight: 700; }
.ru-pied { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 13px; font-weight: 600; }
.ru-pied a { color: var(--encre); text-underline-offset: 3px; }

/* Quêtes */
.quetes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quete { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--panneau-plein); border: 1px solid var(--trait); }
.q-signe { width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; background: var(--c-piste); }
.p-verte { --c-piste: var(--p-verte); } .p-bleue { --c-piste: var(--p-bleue); } .p-rouge { --c-piste: var(--p-rouge); } .p-noire { --c-piste: var(--p-noire); }
.q-noire { border-left: 4px solid var(--p-noire); } .q-rouge { border-left: 4px solid var(--p-rouge); }
.q-texte .pastille { margin-bottom: 4px; }
.q-titre { display: block; font-weight: 700; font-size: 14px; line-height: 1.35; cursor: pointer; }
.q-texte p { font-size: 13px; color: var(--encre-2); margin-top: 2px; }
.q-lien { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--encre); text-underline-offset: 3px; }
.quete input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--p-verte); cursor: pointer; }
.quete.faite { opacity: .55; } .quete.faite .q-titre { text-decoration: line-through; }

/* Pastilles d'état : la couleur et le mot */
.pastille {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; white-space: nowrap;
  font: 600 12px/1.5 var(--corps); font-variant-numeric: tabular-nums;
}
.pastille::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-piste); flex: none; }
.pastille.p-bleue::before { border-radius: 1px; }
.pastille.p-rouge::before { border-radius: 0; width: 9px; height: 8px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pastille.p-noire::before { border-radius: 1px; transform: rotate(45deg) scale(.82); }
.pastille.p-verte { background: var(--f-verte); color: var(--t-verte); }
.pastille.p-bleue { background: var(--f-bleue); color: var(--t-bleue); }
.pastille.p-rouge { background: var(--f-rouge); color: var(--t-rouge); }
.pastille.p-noire { background: var(--p-noire); color: #fff; }
.pastille.p-noire::before { background: #fff; }

/* Meilleures ventes */
.bascules { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--trait); }
.bascule { min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 600; color: var(--encre-2); cursor: pointer; }
.bascule[aria-pressed="true"] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(19, 40, 63, .15); }
.top-liste { list-style: none; margin: 0; padding: 0; }
.top { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: 'rang nom courbe' 'rang chiffres pastille'; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--trait); }
.top:first-child { border-top: 0; }
.top-rang { grid-area: rang; font: 800 14px var(--titre); color: var(--encre-3); align-self: start; padding-top: 1px; }
.top-nom { grid-area: nom; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-chiffres { grid-area: chiffres; font-size: 13px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.top .courbe { grid-area: courbe; justify-self: end; }
.top .pastille { grid-area: pastille; justify-self: end; }
.puce-famille { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; display: inline-block; margin-right: 2px; }
.courbe-aire { fill: rgba(19, 40, 63, .08); } .courbe-trait { fill: none; stroke: var(--encre-2); stroke-width: 1.5; stroke-linejoin: round; } .courbe-point { fill: var(--encre); }
.top-ventes .note { margin-top: 6px; }

/* Alertes */
.alertes-groupe + .alertes-groupe { margin-top: 12px; }
.alertes-groupe h3 { font-size: 12px; margin-bottom: 4px; }
.alertes-groupe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.alerte { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 8px; border-radius: 10px; text-decoration: none; }
.alerte:hover { background: var(--panneau-plein); }
.alerte .pastille { justify-content: center; }
.alerte b { display: block; font-size: 14px; font-weight: 600; }
.alerte small { display: block; font-size: 12px; color: var(--encre-2); }

/* ---- Briques des pages */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chiffre { padding: 10px 12px; border-radius: 12px; background: var(--panneau-plein); border: 1px solid var(--trait); min-width: 0; }
.ch-libelle { display: block; font: 700 11px var(--titre); text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); }
.chiffre strong { display: block; font: 800 22px/1.3 var(--titre); font-variant-numeric: tabular-nums; }
.ch-sous { display: block; font-size: 12px; color: var(--encre-2); overflow-wrap: anywhere; }
.bloc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.bloc-titre { display: flex; align-items: center; gap: 8px; }
.bloc-titre::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--mont-2); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.defile { overflow-x: auto; }
.etiq { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--trait); color: var(--encre-2); font-size: 11px; font-weight: 600; vertical-align: 1px; }

/* Graphiques */
.heures { width: 100%; height: auto; display: block; }
.hb-fait { fill: var(--encre-2); } .hb-avenir { fill: rgba(70, 96, 122, .08); stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.hb-heure { font: 500 12px var(--corps); fill: var(--encre-3); } .hb-sol { stroke: var(--bord); }
.chaleur { width: 100%; max-width: 560px; min-width: 420px; height: auto; display: block; }
.ch-case { fill: var(--encre-2); } .ch-heure, .ch-jour { font: 500 10px var(--corps); fill: var(--encre-3); }
.barres-h { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.barres-h li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bh-piste { height: 10px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.bh-barre { display: block; height: 100%; width: calc(var(--l) * 100%); border-radius: 99px; background: var(--encre-2); }
.bh-teinte { background: var(--c); }
.bh-texte { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 74px; text-align: right; }
.parts-barre { display: block; width: 100%; height: 12px; border-radius: 99px; overflow: hidden; }
.pt-0 { fill: var(--encre); background: var(--encre); } .pt-1 { fill: var(--encre-2); background: var(--encre-2); }
.pt-2 { fill: #8FA4B9; background: #8FA4B9; } .pt-3 { fill: #C4D2DF; background: #C4D2DF; }
.parts-legende { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.pt-puce { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau thead th { font: 700 11px var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); border-bottom-color: var(--bord); white-space: nowrap; }
.tableau tbody th { font-weight: 600; }
.tableau .num { text-align: right; white-space: nowrap; }
.tableau.compact th, .tableau.compact td { padding: 5px 6px; }
.filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; }
.filtres select { min-height: 40px; padding: 0 10px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.liste li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: start; }
.liste li .pastille { justify-content: center; }
.liste b { display: block; font-size: 14px; } .liste small { display: block; font-size: 13px; color: var(--encre-2); }
.etageres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.etageres li { padding: 8px 4px; text-align: center; border-radius: 10px; background: var(--panneau-plein); border: 1px solid var(--trait); }
.etageres b { font: 800 16px var(--titre); }
.etageres small { display: block; font-size: 11px; font-weight: 600; color: var(--dameuse-texte); }
.etageres .du-jour { border: 2px solid var(--dameuse); }

/* Quai */
.cartes-commandes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); align-items: start; }
.surligne-carte { box-shadow: 0 0 0 3px var(--dameuse); }
.carte-commande:focus { outline: none; }
.carte-commande { padding: 14px; border-radius: 14px; background: var(--panneau-plein); border: 1px solid var(--trait); display: grid; gap: 8px; min-width: 0; }
.carte-commande.urgente { border-left: 4px solid var(--p-noire); }
.carte-commande header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.meta { font-size: 13px; color: var(--encre-2); }
.franco { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.franco-barre { height: 8px; border-radius: 99px; background: var(--trait); overflow: hidden; }
.franco-barre span { display: block; height: 100%; width: calc(var(--l) * 100%); background: var(--encre-3); border-radius: 99px; }
.franco-barre span.ok { background: var(--p-verte); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bouton, .bouton-second { min-height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; }
.bouton { border: 1.5px solid var(--encre); background: #fff; color: var(--encre); }
.bouton:hover { background: var(--neige); border-color: var(--encre-2); }
.bouton-second { border: 1px solid var(--bord); background: #fff; }
.bouton-second:hover { border-color: #B9CBDC; background: var(--neige); }
.mail { margin: 0; padding: 12px; border-radius: 10px; background: #F2F6FA; border: 1px dashed var(--bord); font: 13px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.liste-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-route > li { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: var(--panneau-plein); border: 1px solid var(--trait); }
.route-tete { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; font-size: 14px; }
.liste-route small { font-size: 13px; color: var(--encre-2); }
.liste-route .avertir { color: var(--t-rouge); font-weight: 600; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.etapes li { padding-top: 8px; border-top: 4px solid var(--trait); font-size: 12px; font-weight: 600; color: var(--encre-3); }
.etapes li.franchie { border-top-color: var(--encre-2); color: var(--encre); }
.etapes li[aria-current="step"] { border-top-color: var(--dameuse); }

/* Réception des commandes et réclamation */
.cartes-reception { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); align-items: start; }
.carte-reception { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--panneau-plein); border: 1px solid var(--trait); min-width: 0; }
.reception-conforme { border-left: 4px solid var(--p-verte); }
.reception-non-conforme { border-left: 4px solid var(--p-rouge); }
.carte-reception small { font-size: 13px; color: var(--encre-2); }
.carte-reception .avertir { color: var(--t-rouge); font-weight: 600; }
.bouton-ok { color: var(--t-verte); border-color: var(--p-verte); }
.bouton-ko { color: var(--t-rouge); border-color: var(--p-rouge); }
.bouton-plein { background: var(--encre-2); border-color: var(--encre-2); color: #fff; }
.bouton-plein:hover { background: var(--encre); border-color: var(--encre); }
.statut-reception { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--encre-2); }
.defaire { border: 0; background: none; padding: 4px 2px; font: 600 13px var(--corps); color: var(--encre-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fenetre { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--bord); border-radius: 18px; background: #fff; color: var(--encre); box-shadow: 0 30px 80px -20px rgba(19, 40, 63, .55); }
.fenetre::backdrop { background: rgba(19, 40, 63, .45); }
.form-reclamation { display: grid; gap: 16px; padding: 18px 20px 20px; }
.fenetre-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fenetre-tete small { display: block; font: 600 12px var(--corps); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); }
.fenetre-tete h2 { font-size: 20px; margin-top: 2px; }
.fenetre .fermer { min-width: 44px; min-height: 44px; border: 1px solid var(--bord); border-radius: 12px; background: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.fenetre .fermer:hover { background: var(--neige); }
.form-reclamation fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.form-reclamation legend { padding: 0; margin-bottom: 6px; font: 700 13px var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; font-size: 14px; }
.cases .case input { width: 18px; height: 18px; accent-color: var(--encre-2); flex: none; }
.form-reclamation input[type="number"] { width: 84px; min-height: 40px; padding: 0 8px; border: 1px solid var(--bord); border-radius: 10px; font: inherit; text-align: right; }
.champ { display: grid; gap: 6px; }
.champ label { font: 700 13px var(--titre); text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.champ textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 12px; font: inherit; resize: vertical; }
.champ-erreur { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--f-rouge); color: var(--t-rouge); font-size: 14px; font-weight: 600; }
.fenetre-pied { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--trait); }
.fenetre-pied .note { margin-right: auto; }
.bandeau-demo-fenetre { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFF4E8; font-size: 13px; color: var(--encre-2); }
.bandeau-demo-fenetre strong { margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--dameuse-texte); color: #fff; font: 700 11px var(--titre); text-transform: uppercase; letter-spacing: .08em; }

/* Atelier à idées */
.suggestions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.suggestions li { padding: 12px 14px; border-radius: 12px; background: var(--panneau-plein); border: 1px solid var(--trait); }
.suggestions b { display: block; font-size: 14px; } .suggestions p { font-size: 13px; color: var(--encre-2); margin-top: 2px; }
.tableau-idees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.colonne-idees { padding: 10px; border-radius: 14px; background: rgba(228, 236, 244, .7); }
.colonne-idees h4 { display: flex; justify-content: space-between; align-items: center; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.colonne-idees ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.carte-idee { padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--trait); border-top: 4px solid var(--c-idee); }
.ci-creuser { --c-idee: #E9C46A; } .ci-test { --c-idee: #5E8FD0; } .ci-adopte { --c-idee: #4FAF7E; }
.carte-idee b { display: block; font-size: 14px; line-height: 1.35; }
.carte-idee p { font-size: 13px; color: var(--encre-2); margin-top: 4px; }
.carte-idee dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 8px 0 0; font-size: 12px; }
.carte-idee dt { color: var(--encre-3); font-weight: 600; } .carte-idee dd { margin: 0; }

/* ---- Frise de la saison */
.frise { margin-top: 16px; padding: 16px 20px; }
.frise-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--encre-2); }
.lg { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.lg-ca { background: var(--encre-2); } .lg-prev { background: rgba(70, 96, 122, .2); border: 1px dashed var(--encre-3); }
.lg-n1 { height: 3px; vertical-align: 2px; background: var(--bois-fonce); } .lg-vac { background: rgba(95, 120, 145, .16); }
.frise-cadre { overflow-x: auto; }
.frise-svg { display: block; max-width: none; }
.fr-grad line { stroke: var(--trait); } .fr-grad text { font: 500 12px var(--corps); fill: var(--encre-3); }
.fr-vac-bande { fill: rgba(95, 120, 145, .08); } .fr-vac-etiquette { fill: #DDE7F0; } .fr-vac-texte { font: 600 11px var(--corps); fill: var(--encre-2); }
.fr-ca { fill: var(--encre-2); } .fr-encours { fill: var(--mont-3); }
.fr-prev { fill: rgba(70, 96, 122, .16); stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.fr-n1 { fill: var(--bois-fonce); }
.fr-semaine:focus-visible { outline: none; } .fr-semaine:focus-visible rect { stroke: var(--dameuse); stroke-width: 2; }
.fr-mois { font: 600 12px var(--corps); fill: var(--encre-2); }
.fr-auj line { stroke: var(--dameuse); stroke-width: 2; } .fr-auj text { font: 700 12px var(--corps); fill: var(--dameuse-texte); }
.fr-fin line { stroke: var(--encre-3); stroke-width: 1.5; stroke-dasharray: 4 3; } .fr-fin text { font: 600 11px var(--corps); fill: var(--encre-3); }

footer { padding: 8px 20px 32px; text-align: center; font-size: 13px; color: var(--encre-3); }


/* ---- Pages classiques (Ventes, Stocks) : pleine largeur, on fait défiler */
[hidden] { display: none !important; }
.page { scroll-margin-top: 12px; }
.page-tete {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'ariane retour' 'titre retour'; gap: 4px 16px; align-items: end;
  padding: 18px 22px; margin-bottom: 14px; background: var(--panneau); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.ariane { grid-area: ariane; font-size: 13px; color: var(--encre-3); }
.ariane a { color: var(--encre-2); text-underline-offset: 3px; }
.page-titre { grid-area: titre; }
.page-titre h2 { font: 800 28px/1.15 var(--titre); letter-spacing: -.02em; }
.page-titre h2:focus { outline: none; }
.page-titre p { margin-top: 4px; font-size: 14px; color: var(--encre-2); }
.retour { grid-area: retour; display: inline-flex; align-items: center; text-decoration: none; min-height: 44px; }
.page-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 22px 24px; background: var(--panneau); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); }
.chiffres-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ton-ok strong, .ton-hausse strong { color: var(--t-verte); }
.ton-baisse strong { color: var(--t-rouge); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; align-items: start; }
.grille-large { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.vide { color: var(--encre-3); font-size: 14px; }

/* Choix du jour (page Ventes) */
.choix-jours { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.jour { flex: none; display: grid; gap: 1px; min-height: 52px; padding: 8px 14px; text-align: left; border: 1px solid var(--bord); border-radius: 12px; background: #fff; cursor: pointer; }
.jour b { font: 700 14px var(--titre); }
.jour small { font-size: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.jour:hover { border-color: #B9CBDC; }
.jour[aria-pressed="true"] { background: #fff; border-color: var(--dameuse); box-shadow: inset 0 -3px 0 var(--dameuse); }

/* Rythme heure par heure : chaque heure passée est un bouton */
.rythme { display: block; max-width: none; }
.hb-zone { fill: transparent; }
.hb[role="button"] { cursor: pointer; }
.hb[role="button"]:hover .hb-zone { fill: rgba(19, 40, 63, .05); }
.hb[role="button"]:focus-visible { outline: none; }
.hb[role="button"]:focus-visible .hb-zone { fill: rgba(232, 120, 30, .12); stroke: var(--dameuse); stroke-width: 1.5; }
.hb-choisi .hb-fait { fill: var(--dameuse); }
.hb-choisi .hb-zone { fill: rgba(232, 120, 30, .08); }
.hb-valeur { font: 600 12px var(--corps); fill: var(--encre-2); }
.hb-n1 { fill: var(--bois-fonce); }
.lg-choix { background: var(--dameuse); }
.ch-case[role="button"] { cursor: pointer; }
.ch-case:hover { stroke: var(--encre); stroke-width: 1.5; }
.ch-case:focus-visible { outline: none; stroke: var(--dameuse); stroke-width: 2.5; }
.ch-choisie { stroke: var(--dameuse); stroke-width: 2.5; }
.tableau-tickets td:nth-child(3) { min-width: 220px; }
.lien-article { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.lien-article:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Page Stocks */
.familles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.carte-famille { display: grid; gap: 4px; align-content: start; padding: 12px; text-align: left; border: 1px solid var(--trait); border-top: 5px solid var(--c); border-radius: 12px; background: #fff; cursor: pointer; min-width: 0; }
.carte-famille:hover { border-color: #B9CBDC; border-top-color: var(--c); }
.carte-famille[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--dameuse); }
.cf-nom { font: 700 13px var(--titre); text-transform: uppercase; letter-spacing: .06em; }
.cf-valeur { font: 800 20px var(--titre); font-variant-numeric: tabular-nums; }
.cf-ligne { font-size: 12px; color: var(--encre-2); }
.carte-famille .pastille { justify-self: start; margin-top: 2px; }
.filtres input[type="search"] { min-height: 40px; min-width: 220px; padding: 0 12px; border: 1px solid var(--bord); border-radius: 10px; background: #fff; font: inherit; }
.case { display: inline-flex; align-items: center; gap: 6px; }
.case input { width: 18px; height: 18px; accent-color: var(--encre); }
.tri { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.tri:focus-visible { outline: 3px solid var(--dameuse); outline-offset: 2px; border-radius: 4px; }
th[aria-sort="ascending"] .tri::after { content: '▲'; font-size: 9px; color: var(--dameuse-texte); }
th[aria-sort="descending"] .tri::after { content: '▼'; font-size: 9px; color: var(--dameuse-texte); }
.tableau-stocks tbody tr:hover { background: rgba(228, 236, 244, .45); }
.tableau-stocks tr.surligne { background: #FFF1E4; box-shadow: inset 4px 0 0 var(--dameuse); }
.lien-action { font-weight: 600; color: var(--encre); text-underline-offset: 3px; white-space: nowrap; }
a.top { text-decoration: none; color: inherit; border-radius: 10px; }
a.top:hover { background: #fff; }
.top-liste li + li { border-top: 1px solid var(--trait); }
.top-liste .top { border-top: 0; padding: 8px 4px; }

/* ---- Écrans moyens : la salle ouverte cache les quêtes */
@media (max-width: 1599px) {
  .etiquette-salle .info { display: none; }
}
@media (min-width: 1600px) {
  .terrain > .colonne { width: 400px; }
}
@media (max-width: 1279px) {
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-marque { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .terrain { height: auto; overflow: visible; border: 0; box-shadow: none; border-radius: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .vue { position: relative; grid-column: 1 / -1; height: 56vh; min-height: 420px; border-radius: 22px; overflow: hidden; border: 1px solid var(--bord); }
  .terrain > .quetes, .terrain > .colonne { position: static; width: auto; max-height: none; overflow: visible; }
}
@media (min-width: 1200px) and (max-width: 1280px) {
  .terrain > .quetes { width: 340px; }
  .terrain > .colonne { width: 320px; }
}

/* ---- Téléphone et tablette : tout s'empile */
@media (max-width: 899px) {
  .hud { grid-template-columns: 1fr 1fr; padding: 12px 16px 8px; gap: 8px; }
  .tuile { padding: 10px 12px; }
  .tuile-valeur strong { font-size: 18px; }
  .tuile-libelle { font-size: 11px; }
  .tuile-sous { font-size: 12px; }
  .valeur-ok strong { font-size: 15px; }
  .tuile .icone { width: 18px; height: 18px; }
  .tuile-ventes { grid-column: 1 / -1; }
  .onglets { padding: 0 16px 10px; }
  main { padding: 0 16px 20px; }
  .terrain { height: auto; overflow: visible; border: 0; box-shadow: none; border-radius: 0; display: grid; gap: 12px; }
  .etiquette-salle .info { display: none; }
  .vue { position: relative; height: 46vh; min-height: 300px; border-radius: 20px; overflow: hidden; border: 1px solid var(--bord); }
  .terrain > .quetes, .terrain > .colonne { position: static; width: auto; max-height: none; overflow: visible; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .deux, .tableau-idees { grid-template-columns: 1fr; }
  .etageres { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .barres-h li { grid-template-columns: minmax(80px, 120px) minmax(0, 1fr) auto; }
  .frise { padding: 14px 12px; }
}
@media (max-width: 599px) {
  .tableau-stocks :is(th, td):nth-child(2), .tableau-stocks :is(th, td):nth-child(3) { display: none; }
}
@media (max-width: 520px) {
  .bandeau-texte { display: none; }
}
.filtre { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 420px) {
  .hud-marque h1 { font-size: 20px; }
  .liste li { grid-template-columns: 56px minmax(0, 1fr); }
}

@media (max-width: 1279px) {
  .chiffres-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .familles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .page-tete { grid-template-columns: 1fr; grid-template-areas: 'ariane' 'titre' 'retour'; padding: 14px 16px; }
  .retour { justify-self: start; }
  .page-titre h2 { font-size: 24px; }
  .page-corps { padding: 14px 12px 18px; }
  .chiffres-6, .familles { grid-template-columns: 1fr 1fr; }
  .grille-2, .grille-large { grid-template-columns: minmax(0, 1fr); }
  .ru-commander, .bascule { min-height: 44px; display: inline-flex; align-items: center; }
  .filtres input[type="search"] { min-width: 0; flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}