/* =====================================================================
   Grisbi v4 — style « verre liquide ».
   Le décor (ciel, saisons, météo) vit derrière ; l'interface flotte dessus en panneaux de verre.
   Deux teintes de verre, choisies par le moteur d'ambiance selon le décor (jour clair / nuit, orage…) :
   data-teinte="sombre" (par défaut) et data-teinte="claire".
   ===================================================================== */

:root {
  color-scheme: dark;
  --police: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --encre: #f5f7fc;
  --encre-2: rgba(235, 241, 255, 0.74);
  --encre-3: rgba(225, 232, 250, 0.52);
  --verre: rgba(20, 30, 58, 0.38);
  --verre-fort: rgba(24, 36, 68, 0.58);
  --verre-clair: rgba(255, 255, 255, 0.08);
  --reflet: rgba(255, 255, 255, 0.22);
  --bord-verre: rgba(255, 255, 255, 0.14);
  --trait: rgba(255, 255, 255, 0.10);
  --axe: rgba(255, 255, 255, 0.22);
  --ombre: 0 18px 50px rgba(2, 8, 28, 0.35), 0 2px 8px rgba(2, 8, 28, 0.25);
  --flou: blur(26px) saturate(170%);
  --accent: #5cf0b4;                 /* lueur des yeux de Grisbi (vert menthe) ; change selon l'univers */
  --accent-2: #14a37a;
  --accent-encre: #04121f;
  --accent-doux: rgba(92, 240, 180, 0.16);
  --surface: rgba(22, 32, 60, 0.72);  /* surface des graphiques et fenêtres */
  --surface-2: rgba(255, 255, 255, 0.06);
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --bon: #34d399;
  --bon-texte: #6ee7b7;
  --attention: #fbbf24;
  --critique: #f87171;
  --rayon: 26px;
  --rayon-moyen: 18px;
  --rayon-petit: 13px;
  --ciel-haut: #0b1630;
  --ciel-bas: #1c2c4f;
}
:root[data-teinte="claire"] {
  color-scheme: light;
  --encre: #0d1726;
  --encre-2: rgba(13, 23, 38, 0.72);
  --encre-3: rgba(13, 23, 38, 0.5);
  --verre: rgba(255, 255, 255, 0.42);
  --verre-fort: rgba(255, 255, 255, 0.62);
  --verre-clair: rgba(255, 255, 255, 0.35);
  --reflet: rgba(255, 255, 255, 0.85);
  --bord-verre: rgba(255, 255, 255, 0.55);
  --trait: rgba(13, 23, 38, 0.10);
  --axe: rgba(13, 23, 38, 0.24);
  --ombre: 0 18px 50px rgba(20, 40, 80, 0.18), 0 2px 8px rgba(20, 40, 80, 0.10);
  --accent: #1468c8;
  --accent-encre: #ffffff;
  --accent-doux: rgba(20, 104, 200, 0.12);
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(13, 23, 38, 0.05);
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --bon-texte: #047857;
  --critique: #c62828;
}

/* ---------------------------------------------------------------- Base */
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
/* La page ne glisse jamais sur le côté et ne s'étire pas en haut ou en bas (rien ne dépasse de l'écran) */
html { background: var(--ciel-bas); overflow-x: hidden; overscroll-behavior: none; scrollbar-width: none; }
/* Pas de barre de défilement grise (demande de Lukas) : on défile toujours à la molette, au doigt ou au clavier */
::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
* { scrollbar-width: none; }
body {
  font-family: var(--police); font-size: 15px; line-height: 1.5; color: var(--encre); letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)) fixed;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; overflow-x: clip; overscroll-behavior: none; max-width: 100vw;
}
#scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#decor { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; contain: strict; will-change: transform; }
#vitre { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 45; contain: strict; }

/* ---------------------------------------------------------------- Fond de l'appli (Grisbi, Lukas 30/10/2026)
   Plus « premium et business » que Roger : par défaut, pas de paysage. Un fond profond aux couleurs du ciel réel
   (heure et météo, --ciel-haut / --ciel-bas calculés par ambiance.js), assombri, avec deux halos de lumière très doux
   qui dérivent lentement. « flou » : le décor animé de Roger, très flouté. « decor » : le décor net. */
html[data-fond="ambiance"] #decor, html[data-fond="ambiance"] #vitre, html[data-fond="flou"] #vitre { display: none; }
html[data-fond="flou"] #decor { filter: blur(26px) saturate(1.15) brightness(.78); transform: scale(1.08); }
html[data-fond="ambiance"] body {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ciel-haut) 55%, #050a18), color-mix(in srgb, var(--ciel-bas) 45%, #070d1f)) fixed;
}
html[data-fond="ambiance"][data-teinte="claire"] body {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ciel-haut) 70%, #eef3fb), color-mix(in srgb, var(--ciel-bas) 55%, #f6f8fc)) fixed;
}
html[data-fond="ambiance"] body::before, html[data-fond="ambiance"] body::after {
  content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px);
  will-change: transform; animation: halo-derive 38s ease-in-out infinite alternate;
}
/* Halo de l'accent (vert menthe de Grisbi), en haut à gauche */
html[data-fond="ambiance"] body::before {
  width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent), transparent 68%);
}
/* Halo du ciel (couleur de l'heure : aube rosée, jour bleu, nuit profonde), en bas à droite */
html[data-fond="ambiance"] body::after {
  width: 70vmax; height: 70vmax; right: -26vmax; bottom: -30vmax; animation-duration: 46s; animation-direction: alternate-reverse;
  background: radial-gradient(circle, color-mix(in srgb, var(--ciel-bas) 75%, #ffffff 8%), transparent 66%);
}
/* La météo teinte doucement la lumière : soleil un peu doré, pluie et orage plus froids et plus sombres, brouillard voilé */
html[data-fond="ambiance"][data-meteo="soleil"] body::after { background: radial-gradient(circle, rgba(255, 196, 120, .22), transparent 66%); }
html[data-fond="ambiance"][data-meteo="pluie"] body::after, html[data-fond="ambiance"][data-meteo="orage"] body::after { background: radial-gradient(circle, rgba(120, 140, 170, .22), transparent 66%); }
html[data-fond="ambiance"][data-meteo="brouillard"] body::after, html[data-fond="ambiance"][data-meteo="neige"] body::after { background: radial-gradient(circle, rgba(220, 230, 245, .16), transparent 66%); }
html[data-fond="ambiance"][data-moment="nuit"] body::before { opacity: .7; }
html[data-fond="ambiance"][data-animations="aucune"] body::before, html[data-fond="ambiance"][data-animations="aucune"] body::after { animation: none; }
@keyframes halo-derive { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { html[data-fond="ambiance"] body::before, html[data-fond="ambiance"] body::after { animation: none; } }
/* Téléphone : un flou un peu moins large (toujours l'effet verre), bien plus léger à calculer */
@media (pointer: coarse) { :root { --flou: blur(16px) saturate(150%); } }
/* Le vent se ressent aussi sur Grisbi */
[data-vent="fort"] .grisbi svg { animation: bourrasque 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
[data-vent="moyen"] .grisbi svg { animation: bourrasque 4s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bourrasque { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(4deg) translateX(1px); } 55% { transform: rotate(2deg); } 70% { transform: rotate(5deg) translateX(2px); } }
#app { position: relative; z-index: 2; min-height: 100vh; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1rem; }
p { margin: .3rem 0 .6rem; }
.icone { flex: none; vertical-align: -0.2em; }
.demarrage { display: grid; place-items: center; min-height: 100vh; color: var(--encre-2); }
.muet { color: var(--encre-3); } .petit { font-size: .85rem; } .gras { font-weight: 600; }
.chiffres { font-variant-numeric: tabular-nums; }
.ligne { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.espace { flex: 1; }
.pile > * + * { margin-top: 1rem; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cache { display: none !important; }
.texte-pre { white-space: pre-wrap; word-break: break-word; }
::selection { background: var(--accent-doux); }

/* ---------------------------------------------------------------- Verre (le matériau de toute l'interface) */
.carte, .verre {
  position: relative; border-radius: var(--rayon); padding: 1.15rem 1.25rem;
  background: linear-gradient(160deg, var(--verre-clair), transparent 40%), var(--verre);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
  isolation: isolate;
}
/* Reflet liquide qui glisse doucement sur le verre */
.carte::after, .verre::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 60% at 15% -10%, rgba(255, 255, 255, .16), transparent 55%);
}
.carte.cliquable { cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s; }
.carte.cliquable:hover { transform: translateY(-3px) scale(1.005); }
.carte.cliquable:active { transform: scale(.985); }
.carte h2 { display: flex; align-items: center; gap: .55rem; color: var(--encre-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: .8rem; }
.carte h2 .icone { color: var(--accent); }

/* ---------------------------------------------------------------- Mise en page */
.cadre { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.cadre > main { min-width: 0; }
.menu {
  position: sticky; top: 14px; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 1rem .7rem;
  border-radius: 30px; display: flex; flex-direction: column; gap: .15rem; overflow-y: auto;
  background: linear-gradient(170deg, var(--verre-clair), transparent 45%), var(--verre);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
}
.menu .marque { display: flex; align-items: center; gap: .7rem; padding: .3rem .5rem 1.2rem; }
.menu .marque b { font-size: 1.15rem; letter-spacing: -.02em; }
.menu a.entree {
  display: flex; align-items: center; gap: .75rem; padding: .62rem .8rem; border-radius: 16px;
  color: var(--encre-2); font-weight: 500; position: relative; transition: background .2s, color .2s;
}
.menu a.entree:hover { background: var(--surface-2); color: var(--encre); }
.menu a.entree.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.menu a.entree.actif .icone { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); }
.menu a.entree .pastille { margin-left: auto; }
.menu .separateur { height: 1px; background: var(--trait); margin: .6rem .6rem; }
.menu .pied { margin-top: auto; padding: .7rem .6rem 0; font-size: .75rem; color: var(--encre-3); }
.contenu { padding: 1.6rem clamp(1rem, 3.2vw, 2.6rem) 7rem; max-width: 1240px; width: 100%; animation: entree-page .55s cubic-bezier(.2, .8, .2, 1); }
.entete-page { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.entete-page h1 { margin: 0; }
.essai { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--attention); background: rgba(251, 191, 36, .12); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .35); }

.barre-mobile, .onglets-mobile { display: none; }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .cadre { grid-template-columns: minmax(0, 1fr); }
  .menu { display: none; }
  .barre-mobile { display: flex; align-items: center; gap: .7rem; padding: calc(.7rem + env(safe-area-inset-top)) 1.1rem .3rem; }
  .barre-mobile b { font-size: 1.05rem; }
  .onglets-mobile {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; z-index: 30;
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); padding: .45rem .3rem; border-radius: 28px;
    background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort);
    backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
    box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
  }
  .onglets-mobile a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: .3rem 0; font-size: .68rem; color: var(--encre-3); position: relative; border-radius: 20px; transition: color .2s; }
  .onglets-mobile a.actif { color: var(--encre); }
  .onglets-mobile a.actif .icone { color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); transform: translateY(-1px); }
  .onglets-mobile .pastille { position: absolute; top: 0; right: calc(50% - 20px); }
  .contenu { padding-top: .6rem; }
  h1 { font-size: 1.65rem; }
}
/* Tablette horizontale : menu fin (icônes + petits libellés) */
@media (min-width: 861px) and (max-width: 1199px) and (min-height: 501px) {
  .cadre { grid-template-columns: 100px minmax(0, 1fr); }
  .menu { padding: .9rem .4rem; }
  .menu .marque { flex-direction: column; padding: .2rem 0 .9rem; text-align: center; gap: .25rem; }
  .menu .marque > div { display: none; }
  .menu a.entree { flex-direction: column; gap: .2rem; padding: .55rem .2rem; font-size: .7rem; text-align: center; }
  .menu a.entree .pastille { position: absolute; top: 3px; right: 10px; margin: 0; }
  .menu .pied { display: none; }
}
@media (min-width: 600px) and (max-width: 860px) {
  .grille-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglets-mobile { max-width: 560px; margin: 0 auto; }
}

/* ---------------------------------------------------------------- Boutons « goutte » */
.bouton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: .55rem 1.15rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--encre); text-decoration: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre), 0 4px 14px rgba(0,0,0,.12);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .2s, box-shadow .2s;
}
.bouton:hover { filter: brightness(1.08); }
.bouton:active { transform: scale(.96); }
.bouton:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.bouton.principal {
  color: var(--accent-encre);
  background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.55), transparent 45%), linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bouton.danger { color: var(--critique); }
.bouton.danger.plein { color: #fff; background: radial-gradient(120% 90% at 30% 0%, rgba(255,255,255,.45), transparent 45%), linear-gradient(180deg, #f87171, #c62828); }
.bouton.discret { background: transparent; box-shadow: none; backdrop-filter: none; color: var(--encre-2); }
.bouton.discret:hover { background: var(--surface-2); color: var(--encre); }
.bouton.petit { min-height: 34px; padding: .3rem .85rem; font-size: .85rem; }
.bouton.rond { width: 42px; padding: 0; }
/* Petit éclat liquide au survol */
.bouton::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 120% at var(--x, 50%) -20%, rgba(255,255,255,.35), transparent 60%); opacity: 0; transition: opacity .25s; }
.bouton:hover::after { opacity: 1; }

/* ---------------------------------------------------------------- Champs */
input, textarea, select {
  font: inherit; color: var(--encre); width: 100%; min-height: 44px; padding: .6rem .9rem; border: 0; border-radius: var(--rayon-petit);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre), inset 0 2px 6px rgba(0,0,0,.08);
  transition: box-shadow .2s, background .2s;
}
select option { background: #16213d; color: #fff; }
:root[data-teinte="claire"] select option { background: #fff; color: #0d1726; }
textarea { min-height: 90px; resize: vertical; }
/* Les cases à cocher natives ne prennent jamais le style des champs (plus de « case grise » au milieu d'une fenêtre) */
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; flex: none; box-shadow: none; background: none; accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--encre-3); }
input:focus, textarea:focus, select:focus { outline: none; background: var(--verre-clair); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-doux); }
.bouton:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
label.champ { display: block; }
label.champ > span { display: block; font-size: .8rem; color: var(--encre-2); margin-bottom: .35rem; font-weight: 500; }
.interrupteur { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; user-select: none; }
.interrupteur input { width: 48px; height: 28px; min-height: 0; appearance: none; border-radius: 14px; position: relative; padding: 0; cursor: pointer; flex: none; background: rgba(120, 130, 160, .35); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.interrupteur input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.interrupteur input:checked { background: var(--accent); }
.interrupteur input:checked::after { left: 23px; }

/* Segments (filtres) façon Apple */
.onglets { display: inline-flex; gap: .2rem; flex-wrap: wrap; padding: .25rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); margin-bottom: 1rem; max-width: 100%; }
.onglets button { border: 0; background: transparent; color: var(--encre-2); border-radius: 999px; padding: .42rem .95rem; font: inherit; font-size: .88rem; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; }
.onglets button.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 8px rgba(0,0,0,.12); font-weight: 600; }
@media (max-width: 600px) { .onglets { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

.tourne { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: inline-block; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
.chargement { display: flex; align-items: center; gap: .7rem; padding: 2rem 0; color: var(--encre-3); justify-content: center; }
.vide { display: grid; justify-items: center; gap: .8rem; padding: 2.5rem 1rem; text-align: center; color: var(--encre-2); }
.rond-vide { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--bord-verre), 0 0 30px var(--accent-doux); }
.critique { color: var(--critique); } .bon { color: var(--bon-texte); }

/* ---------------------------------------------------------------- Pastilles de statut (point + texte) */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .18rem .65rem .18rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--bord-verre); white-space: nowrap; }
.badge .point { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.statut-attente { color: #a7b0c4; }
.statut-file { color: #a78bfa; }
.statut-cours { color: #fbbf24; }
.statut-valider { color: #60a5fa; }
.statut-publication { color: #2dd4bf; }
.statut-publiee { color: #34d399; }
.statut-erreur { color: #f87171; }
.statut-vendue { color: #facc15; }
.statut-abandonnee { color: #8a93a8; }
.badge[class*="statut-"] { color: var(--encre); }
.badge[class*="statut-"] .point { color: inherit; }
.badge.statut-attente .point { background: #a7b0c4; } .badge.statut-file .point { background: #a78bfa; } .badge.statut-cours .point { background: #fbbf24; animation: pouls 1.4s ease-in-out infinite; }
.badge.statut-valider .point { background: #60a5fa; } .badge.statut-publication .point { background: #2dd4bf; animation: pouls 1.4s ease-in-out infinite; } .badge.statut-publiee .point { background: #34d399; }
.badge.statut-erreur .point { background: #f87171; } .badge.statut-vendue .point { background: #facc15; } .badge.statut-abandonnee .point { background: #8a93a8; }
@keyframes pouls { 50% { opacity: .35; } }
.pastille { min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: linear-gradient(180deg, #ff7b7b, #e23c3c); color: #fff; font-size: .7rem; font-weight: 700; display: inline-grid; place-items: center; box-shadow: 0 2px 8px rgba(226, 60, 60, .45); }
.bandeau { border-radius: var(--rayon-moyen); padding: .75rem 1rem; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; font-weight: 500; background: var(--verre); backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.bandeau .icone { flex: none; }
.bandeau.rouge { box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); background: rgba(127, 29, 29, .35); }
.bandeau.rouge .icone { color: var(--critique); }
.bandeau.info .icone { color: var(--accent); }
.bandeau.dev .icone { color: var(--attention); }

/* ---------------------------------------------------------------- Chiffres et instruments */
.tuile .etiquette { font-size: .8rem; color: var(--encre-2); letter-spacing: .02em; }
.tuile .valeur { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; margin: .15rem 0; }
.tuile .delta { font-size: .82rem; font-weight: 600; }
.delta.monte { color: var(--bon-texte); } .delta.baisse { color: var(--critique); }
.heros { font-size: clamp(2.8rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.lueur { text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.jauge { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.jauge > div { height: 100%; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); box-shadow: 0 0 12px var(--accent); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.graphique { position: relative; }
.graphique svg { display: block; width: 100%; height: auto; overflow: visible; }
.graphique .grille-axe { stroke: var(--trait); stroke-width: 1; }
.graphique .ligne-base { stroke: var(--axe); stroke-width: 1; }
.graphique text { fill: var(--encre-3); font-size: 11px; font-family: var(--police); font-variant-numeric: tabular-nums; }
.infobulle { position: absolute; pointer-events: none; z-index: 5; background: var(--verre-fort); backdrop-filter: var(--flou); color: var(--encre); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); border-radius: 12px; padding: .45rem .7rem; font-size: .82rem; white-space: nowrap; transform: translate(-50%, -112%); }
.legende { display: flex; gap: 1rem; font-size: .82rem; color: var(--encre-2); margin-bottom: .5rem; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; }

/* ---------------------------------------------------------------- Accueil */
.heros-accueil { display: flex; align-items: center; gap: 1.2rem; padding: .4rem 0 .6rem; }
.heros-accueil h1 { margin-bottom: .15rem; }
.tableau-bord { display: flex; align-items: center; gap: 1.5rem; justify-content: space-between; padding: 1.6rem 1.8rem; }
.bloc-mois { display: grid; gap: .55rem; justify-items: start; }
.bloc-mois .etiquette { font-size: .85rem; }
.bouton.grand { min-height: 52px; padding: .7rem 1.6rem; font-size: 1.02rem; margin-top: .6rem; }
.cadran { width: 170px; height: 170px; flex: none; }
.cadran .graduations line { stroke: var(--axe); stroke-width: 1.5; stroke-linecap: round; }
.cadran .piste { fill: none; stroke: var(--surface-2); stroke-width: 9; stroke-linecap: round; }
.cadran .aiguille { fill: none; stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--accent)); transition: stroke-dasharray 1.4s cubic-bezier(.2, .8, .2, 1); }
.cadran .valeur-cadran { fill: var(--encre); font-size: 24px; font-weight: 700; text-anchor: middle; font-family: var(--police); letter-spacing: -.02em; }
.cadran .legende-cadran { fill: var(--encre-3); font-size: 9.5px; text-anchor: middle; font-family: var(--police); text-transform: uppercase; letter-spacing: .08em; }
.instruments .tuile { display: block; color: inherit; }
.instruments .tuile svg { margin-top: .5rem; }
.liste > a .icone-ligne, .liste > li .icone-ligne { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.icone-ligne.critique { color: var(--critique); background: rgba(248, 113, 113, .12); }
.liste > a { transition: background .2s; border-radius: 12px; }
.liste > a:hover { background: var(--surface-2); }
@media (max-width: 600px) {
  .heros-accueil { flex-direction: column; text-align: center; gap: .6rem; }
  .tableau-bord { flex-direction: column-reverse; padding: 1.3rem; text-align: center; }
  .bloc-mois { justify-items: center; }
  .bloc-mois .bouton.grand { width: 100%; }
  .cadran { width: 150px; height: 150px; }
  .instruments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  .instruments .tuile { padding: .8rem .75rem; }
  .instruments .tuile .valeur { font-size: 1.3rem; }
  .instruments .tuile .petit { display: none; }
  .instruments .tuile svg { display: none; }
}

/* ---------------------------------------------------------------- Listes (lignes propres) */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li, .liste > a { display: flex; align-items: center; gap: .9rem; padding: .8rem .2rem; border-bottom: 1px solid var(--trait); color: inherit; }
.liste > :last-child { border-bottom: 0; }
.liste .titre-ligne { font-weight: 550; }
.fil { list-style: none; margin: 0; padding: 0; }
.fil li { display: grid; grid-template-columns: 30px 1fr; gap: .7rem; padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.fil li:last-child { border-bottom: 0; }
.fil .icone-ligne { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.fil .quand { font-size: .74rem; color: var(--encre-3); }
.fil img.mini { max-width: 120px; border-radius: 12px; margin-top: .4rem; display: block; }

/* ---------------------------------------------------------------- Atelier */
.article-carte { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: center; }
.article-carte .vignette { width: 72px; height: 90px; border-radius: 16px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--encre-3); }
.article-carte .vignette img { width: 100%; height: 100%; object-fit: cover; }
.article-carte .nom { font-weight: 600; line-height: 1.25; margin-bottom: .35rem; word-break: break-word; }
.galerie { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.galerie figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: var(--surface-2); aspect-ratio: 2 / 3; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.galerie figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.galerie figure:hover img { transform: scale(1.04); }
.galerie figure.capture { aspect-ratio: 1; }
.galerie figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .4rem .55rem; font-size: .74rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.galerie .retirer { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #fff; cursor: pointer; display: grid; place-items: center; }
.depot { display: block; border-radius: var(--rayon-moyen); padding: 1.6rem 1.3rem; text-align: center; color: var(--encre-2); cursor: pointer; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--bord-verre); border: 1.5px dashed var(--axe); transition: background .2s; }
.depot.survol { background: var(--accent-doux); border-color: var(--accent); }
.actions-article { position: sticky; top: .7rem; z-index: 6; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .55rem; border-radius: 999px; background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
@media (max-width: 860px) { .actions-article { top: calc(8px + env(safe-area-inset-top)); border-radius: 24px; } }
.recap dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.1rem; margin: 0; }
.recap dt { color: var(--encre-3); font-size: .88rem; } .recap dd { margin: 0; font-weight: 500; }
.description-annonce { background: var(--surface-2); border-radius: var(--rayon-moyen); padding: .9rem 1rem; white-space: pre-wrap; font-size: .92rem; box-shadow: inset 0 0 0 1px var(--bord-verre); }

/* ---------------------------------------------------------------- Tableaux */
.tableau { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tableau th { text-align: left; font-weight: 600; color: var(--encre-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; padding: .5rem .55rem; border-bottom: 1px solid var(--axe); }
.tableau td { padding: .6rem .55rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau td.nombre, .tableau th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; }
.vente { display: grid; grid-template-columns: 52px 1fr auto; gap: .9rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--trait); }
.vente:last-child { border-bottom: 0; }
.vente img, .vente .vignette { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); }
.journal-ligne { display: grid; grid-template-columns: 118px 80px 1fr; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--trait); font-size: .86rem; }
.journal-ligne.erreur { color: var(--critique); }
@media (max-width: 600px) { .journal-ligne { grid-template-columns: 1fr; gap: 0; } }

/* ---------------------------------------------------------------- Notifications et fenêtres */
.toasts { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 14px; z-index: 50; display: flex; flex-direction: column; gap: .6rem; width: min(380px, calc(100vw - 28px)); }
.toast { border-radius: 22px; padding: .8rem .9rem; display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .6s cubic-bezier(.2, 1.2, .3, 1); }
.toast .titre { font-weight: 650; }
.toast img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.toast .rond-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); }
@keyframes goutte-arrivee { 0% { transform: translateY(-14px) scale(.92); opacity: 0; } 60% { transform: translateY(2px) scale(1.01); opacity: 1; } 100% { transform: none; } }
.fond-modal { position: fixed; inset: 0; background: rgba(4, 10, 25, .45); backdrop-filter: blur(6px); z-index: 60; display: grid; place-items: center; padding: 1rem; animation: fondu .25s ease; }
.modal { border-radius: 28px; padding: 1.4rem; width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .5s cubic-bezier(.2, 1.2, .3, 1); }
@keyframes fondu { from { opacity: 0; } }

/* ---------------------------------------------------------------- Grisbi */
.grisbi { display: inline-block; touch-action: manipulation; cursor: pointer; user-select: none; }
.grisbi svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35)) drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 30%, transparent)); }
.grisbi .tete { transform-origin: 60px 80px; transition: transform .3s ease; }
.grisbi .flotte-doux { animation: flotter 5s ease-in-out infinite; }
.grisbi.saute .tete { animation: saut .6s ease; }
.grisbi.fete .tete { animation: fete 1s ease-in-out infinite; }
.grisbi.tape .tete { animation: tape 1.2s ease-in-out infinite; }
.grisbi.dort .tete, .grisbi.somnole .tete { animation: respire 4s ease-in-out infinite; }
.grisbi.inquiet .tete { animation: tremble 2.4s ease-in-out infinite; }
@keyframes flotter { 50% { transform: translateY(-6px); } }
@keyframes saut { 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes fete { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-8px) rotate(-6deg); } 75% { transform: translateY(-8px) rotate(6deg); } }
@keyframes tape { 50% { transform: rotate(2deg) translateY(1px); } }
@keyframes respire { 50% { transform: scale(1.02) translateY(1px); } }
@keyframes tremble { 0%, 90%, 100% { transform: translateX(0); } 93% { transform: translateX(-2px); } 96% { transform: translateX(2px); } }
.bulle { position: relative; border-radius: 20px; padding: .75rem 1rem; max-width: 560px;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: goutte-arrivee .7s cubic-bezier(.2, 1.2, .3, 1); }

/* ---------------------------------------------------------------- Animations d'entrée */
/* Pas de fondu sur la page entière : un parent en fondu empêche le verre de flouter le décor (il « apparaît d'un coup »).
   La page glisse seulement ; chaque carte fait elle-même son fondu, verre compris. */
@keyframes entree-page { from { transform: translateY(8px); } }
@keyframes monte { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.contenu .carte, .contenu .tuile, .contenu .bulle, .contenu .entete-page, .contenu .onglets, .contenu .sous-onglets, .contenu .titre-groupe, .contenu .recherche { animation: monte .5s cubic-bezier(.2, .8, .2, 1) backwards; }
.contenu .grille > :nth-child(2), .contenu .grille-2 > :nth-child(2) { animation-delay: .06s; }
.contenu .grille > :nth-child(3), .contenu .grille-2 > :nth-child(3) { animation-delay: .12s; }
.contenu .grille > :nth-child(4) { animation-delay: .18s; }
.contenu .grille > :nth-child(n+5) { animation-delay: .22s; }

/* Ouverture (Grisbi 1.0.4) : horizon de lumière, éclats qui convergent, anneau qui tourne, Grisbi du flou au net,
   nom lettre par lettre avec un reflet, puis l'anneau s'élargit et tout s'efface vers l'appli. */
.lancement { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  animation: lancement-sortie .6s cubic-bezier(.4, 0, .2, 1) 2.05s forwards; }
.ciel-lancement { position: absolute; inset: 0; background:
  radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent), radial-gradient(1px 1px at 78% 18%, #fff8 50%, transparent),
  radial-gradient(1.5px 1.5px at 64% 72%, #fff7 50%, transparent), radial-gradient(1px 1px at 30% 80%, #fff6 50%, transparent),
  radial-gradient(1px 1px at 88% 58%, #fff7 50%, transparent), radial-gradient(1px 1px at 45% 12%, #fff8 50%, transparent),
  radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--accent) 22%, #0b1a3a) 0%, #071026 55%, #030812 100%); }
.horizon { position: absolute; left: 50%; top: 45%; width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, #fff), #fff, color-mix(in srgb, var(--accent) 90%, #fff), transparent);
  box-shadow: 0 0 24px 4px color-mix(in srgb, var(--accent) 60%, transparent); animation: horizon 1.1s cubic-bezier(.2, .8, .2, 1) .05s forwards; }
.eclats { position: absolute; left: 50%; top: 45%; }
.eclats i { position: absolute; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px var(--accent);
  opacity: 0; transform: rotate(var(--a)) translateY(-46vmin); animation: eclat .8s cubic-bezier(.5, 0, .2, 1) var(--d) forwards; }
.lancement .centre { position: relative; display: grid; place-items: center; gap: .35rem; margin-top: -4vh; }
.anneau-lancement { position: absolute; top: 56px; left: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%, color-mix(in srgb, var(--accent) 85%, #fff) 80%, #fff 88%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 98%, transparent 100%); mask: radial-gradient(closest-side, transparent 84%, #000 86%, #000 98%, transparent 100%);
  filter: drop-shadow(0 0 12px var(--accent)); opacity: 0; transform: scale(.3);
  animation: anneau-entree .7s cubic-bezier(.2, .9, .3, 1.2) .55s forwards, anneau-tourne 1.6s linear .55s infinite, anneau-sortie .6s ease-in 2.05s forwards; }
.grisbi-lancement { opacity: 0; filter: blur(10px); transform: scale(.7); animation: grisbi-entree .7s cubic-bezier(.2, .9, .3, 1) .85s forwards; }
.grisbi-lancement .grisbi svg { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 70%, transparent)); }
.lancement .nom { display: flex; font-size: 2.4rem; font-weight: 750; letter-spacing: .02em; margin-top: .9rem; color: #fff; }
/* chaque lettre arrive du flou, puis un reflet lumineux les traverse l'une après l'autre */
.lancement .nom span { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px);
  animation: lettre .5s cubic-bezier(.2, .9, .3, 1) calc(1.15s + var(--i) * .07s) forwards, brille .6s ease calc(1.7s + var(--i) * .06s); }
.lancement .sous { font-size: 1rem; color: #cfe0ffcc; opacity: 0; animation: fondu-monte .5s ease 1.6s forwards; }
@keyframes horizon { 0% { width: 0; opacity: 1; } 60% { width: 100vw; opacity: 1; } 100% { width: 100vw; opacity: 0; } }
@keyframes eclat { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-85px) scale(.4); } }
@keyframes anneau-entree { to { opacity: 1; transform: scale(1); } }
@keyframes anneau-tourne { to { rotate: 360deg; } }
@keyframes anneau-sortie { to { transform: scale(7); opacity: 0; } }
@keyframes grisbi-entree { to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes lettre { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brille { 50% { text-shadow: 0 0 14px #fff, 0 0 26px var(--accent); color: color-mix(in srgb, var(--accent) 35%, #fff); } }
@keyframes lancement-sortie { to { opacity: 0; transform: scale(1.06); filter: blur(6px); visibility: hidden; } }
@keyframes halo { to { opacity: 1; transform: none; } }
@keyframes reveil { to { opacity: 1; transform: none; } }
@keyframes pose { to { opacity: 1; transform: none; } }
@keyframes fondu { to { opacity: 1; } }
@keyframes fondu-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes anneau { 0% { transform: scale(.25); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes lancement-fin { to { opacity: 0; visibility: hidden; } }
/* Pendant l'ouverture, l'appli attend derrière puis se pose */
html.ouverture .cadre { animation: appli-pose .6s cubic-bezier(.2, .8, .2, 1) 1.6s backwards; }
@keyframes appli-pose { from { transform: translateY(14px) scale(.98); } } /* sans fondu : l'écran d'ouverture qui s'efface fait le fondu */
[data-animations="aucune"] .lancement, [data-animations="aucune"] .au-revoir { display: none; }

/* ---------------------------------------------------------------- Neige posée (Noël, neige réelle) — Grisbi 1.0
   Une vraie couche : elle recouvre le bord du haut (on ne voit plus la ligne du bouton), retombe sur les coins arrondis,
   a un relief bleuté dessous et quelques coulures. Appuyer sur un élément enneigé fait tomber un peu de neige. */
[data-neige-posee="1"] .carte, [data-neige-posee="1"] .onglets-mobile, [data-neige-posee="1"] .bouton.principal, [data-neige-posee="1"] .barre-haut, [data-neige-posee="1"] .tuile-etape, [data-neige-posee="1"] .commande { position: relative; }
[data-neige-posee="1"] .carte::before, [data-neige-posee="1"] .onglets-mobile::before, [data-neige-posee="1"] .bouton.principal::before, [data-neige-posee="1"] .barre-haut::before, [data-neige-posee="1"] .tuile-etape::before, [data-neige-posee="1"] .commande::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -12px; height: 24px; pointer-events: none; z-index: 3; /* les bouts descendent le long des coins arrondis */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.6' stop-color='%23f4f8fc'/%3E%3Cstop offset='1' stop-color='%23d5e2ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23n)' d='M30 6 C20 5 11 6 6.5 10 C3 13 2 18 3 24 L30 24 Z'/%3E%3Cpath fill='%23d0deec' d='M3 22.5 C3.6 21 6 20 10 20 L30 20 L30 24 L3 24 Z'/%3E%3C/svg%3E") left top / 30px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.6' stop-color='%23f4f8fc'/%3E%3Cstop offset='1' stop-color='%23d5e2ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23n)' d='M0 6 C10 5 19 6 23.5 10 C27 13 28 18 27 24 L0 24 Z'/%3E%3Cpath fill='%23d0deec' d='M27 22.5 C26.4 21 24 20 20 20 L0 20 L0 24 L27 24 Z'/%3E%3C/svg%3E") right top / 30px 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='n' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.6' stop-color='%23f4f8fc'/%3E%3Cstop offset='1' stop-color='%23d5e2ef'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23n)' d='M0 6 C20 4 38 8 58 6 C78 3 92 8 112 5 C134 2 150 8 170 5 C192 2 210 8 232 6 C252 3 268 8 290 5 C312 2 330 8 350 6 C370 4 388 7 400 6 L400 24 L0 24 Z'/%3E%3Cpath fill='%23d0deec' d='M0 20 L400 20 L400 24 L0 24 Z'/%3E%3Cpath fill='%23ffffff' d='M64 20 q3 4 6 0 Z M152 20 q2 3 4 0 Z M247 20 q3 5 6 0 Z M331 20 q2 3 4 0 Z'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='.9' stroke-width='1.2' d='M14 6 C30 4 44 7 60 6'/%3E%3C/svg%3E") center top / calc(100% - 58px) 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(90, 120, 165, .35));
}
[data-neige-posee="1"] .bouton.principal::before { top: -8px; height: 16px; left: -1px; right: -1px; }
/* Barres fines et très arrondies : couche plus mince, posée sur le dessus, qui s arrête avant les arrondis */
[data-neige-posee="1"] .barre-haut::before, [data-neige-posee="1"] .onglets-mobile::before { top: -11px; height: 19px; left: -1px; right: -1px; }
[data-neige-posee="1"] .tuile-etape::before, [data-neige-posee="1"] .commande::before { top: -10px; height: 20px; left: -1px; right: -1px; }
/* Un appui secoue la neige */
[data-neige-posee="1"] .secoue-neige::before { animation: secoue-neige .45s ease; }
@keyframes secoue-neige { 25% { transform: translateY(-2px) rotate(-.4deg); } 60% { transform: translateY(1px) rotate(.3deg); } }
.flocon-tombe { position: fixed; z-index: 90; width: 5px; height: 5px; border-radius: 50%; background: #fff; pointer-events: none; box-shadow: 0 0 3px rgba(255, 255, 255, .8); animation: flocon-tombe .9s ease-in forwards; }
@keyframes flocon-tombe { to { transform: translate(var(--dx), 70px); opacity: 0; } }

/* ---------------------------------------------------------------- Connexion */
.ecran-connexion { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.ecran-connexion .carte { width: min(440px, 100%); padding: 1.8rem; }
.choix-utilisateur { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.choix-utilisateur button { padding: 1.1rem; border-radius: 22px; border: 0; font: inherit; font-weight: 600; font-size: 1.05rem; cursor: pointer; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); transition: transform .2s, box-shadow .2s; }
.choix-utilisateur button:hover { transform: translateY(-2px); }
.choix-utilisateur button.actif { box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px var(--accent-doux); }
.choix-utilisateur .sous { display: block; font-size: .78rem; font-weight: 500; color: var(--encre-3); margin-top: .2rem; }

[data-animations="aucune"] *, [data-animations="aucune"] *::before, [data-animations="aucune"] *::after { animation: none !important; transition: none !important; }
@media print { #decor, #scene, .menu, .onglets-mobile, .barre-mobile, .toasts { display: none !important; } body { background: #fff; color: #000; } }@media (min-width: 601px) { .instruments { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- Parcours guidé (une question par écran) */
.parcours { max-width: 620px; margin: 0 auto; min-height: calc(100vh - 8rem); display: flex; flex-direction: column; gap: 1.2rem; }
.parcours-haut { display: flex; align-items: center; gap: .8rem; }
.progression { flex: 1; display: flex; gap: 6px; }
.progression span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); overflow: hidden; position: relative; }
.progression span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 8px var(--accent); }
.progression span.faite::after, .progression span.active::after { transform: scaleX(1); }
.progression span.active::after { opacity: .65; }
.etape { flex: 1; display: flex; flex-direction: column; gap: .9rem; padding-top: 1.2rem; }
.etape h1 { font-size: clamp(1.7rem, 4.5vw, 2.3rem); margin: 0; }
.etape > .muet { margin: 0; font-size: 1.02rem; }
.etape .numero { margin: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.etape-avant { animation: etape-avant .55s cubic-bezier(.2, .8, .2, 1) backwards; }
.etape-arriere { animation: etape-arriere .55s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes etape-avant { from { opacity: 0; transform: translateX(46px); } }
@keyframes etape-arriere { from { opacity: 0; transform: translateX(-46px); } }
.etape > * { animation: fondu-monte .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.etape > :nth-child(2) { animation-delay: .05s; } .etape > :nth-child(3) { animation-delay: .1s; } .etape > :nth-child(4) { animation-delay: .16s; } .etape > :nth-child(5) { animation-delay: .22s; }
.apparait { animation: fondu-monte .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.champ-lien { position: relative; display: flex; gap: .5rem; align-items: center; padding: .35rem .35rem .35rem .4rem; border-radius: 22px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.champ-lien input { background: transparent; box-shadow: none; font-size: 1.05rem; min-height: 50px; }
.champ-lien input:focus { box-shadow: none; background: transparent; }
.etape textarea { min-height: 130px; font-size: 1.02rem; border-radius: 20px; background: var(--verre); backdrop-filter: var(--flou); }
.grand-depot { width: 100%; display: grid; justify-items: center; gap: .55rem; padding: 2rem 1rem; border-radius: 26px; font: inherit; color: var(--encre); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
.grand-depot:hover { background: var(--accent-doux); }
.puces { display: flex; flex-wrap: wrap; gap: .45rem; }
.puce { padding: .3rem .8rem; border-radius: 999px; font-size: .84rem; color: var(--encre-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.recap-parcours { border-radius: 24px; overflow: hidden; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.ligne-recap { width: 100%; display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem; border: 0; border-bottom: 1px solid var(--trait); background: transparent; font: inherit; color: var(--encre); text-align: left; cursor: pointer; }
.ligne-recap:last-child { border-bottom: 0; }
.ligne-recap:hover { background: var(--surface-2); }
.ligne-recap .icone { color: var(--accent); }
.parcours-bas { position: sticky; bottom: calc(14px + env(safe-area-inset-bottom)); padding-top: .6rem; z-index: 5; }
.bouton.large { width: 100%; }
.envoi { display: grid; gap: .5rem; justify-items: center; padding: .8rem 1rem; border-radius: 22px; background: var(--verre-fort); backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); }
.envoi .jauge { width: 100%; }
.fin-parcours { align-items: center; text-align: center; justify-content: center; gap: 1rem; }
.ligne.centre { justify-content: center; }
.cadre.en-parcours .onglets-mobile { display: none; }
@media (max-width: 860px) { .cadre.en-parcours .contenu { padding-bottom: 1.5rem; } }
.recherche { display: flex; align-items: center; gap: .45rem; padding: 0 .3rem 0 .85rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); color: var(--encre-3); min-width: 200px; }
.recherche input { background: transparent; box-shadow: none; min-height: 40px; padding-left: 0; }
.recherche input:focus { box-shadow: none; background: transparent; }
@media (max-width: 600px) { .recherche { width: 100%; } }
.tronque { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vente .detail-vente { grid-column: 1 / -1; display: grid; gap: .8rem; padding: .3rem 0 .4rem; }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .9rem; }
.infos dt { color: var(--encre-3); } .infos dd { margin: 0; }
.indice { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; color: var(--encre-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.indice.ok { color: var(--bon-texte); }
.autres-filtres { width: auto; min-height: 0; padding: .42rem .9rem; border-radius: 999px; background: transparent; box-shadow: none; color: var(--encre-2); font-size: .88rem; cursor: pointer; }
.autres-filtres.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); font-weight: 600; }
.accent { color: var(--accent); }
.alerte h3 { font-size: 1.05rem; }
.galons { flex: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.insigne { display: inline-flex; gap: 2px; color: #f6c453; filter: drop-shadow(0 0 6px rgba(246,196,83,.5)); }
.badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.badge-gagne { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 550; color: var(--encre-3); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); opacity: .55; }
.badge-gagne.ok { opacity: 1; color: var(--encre); }
.badge-gagne.ok .icone { color: #f6c453; filter: drop-shadow(0 0 5px rgba(246,196,83,.6)); }
.classement { list-style: none; margin: 0; padding: 0; }
.classement li { display: flex; align-items: center; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--trait); }
.classement li:last-child { border-bottom: 0; }
.rang { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); flex: none; }
.rang-1 { background: linear-gradient(180deg, #ffe7a3, #c9952f); color: #3a2a05; } .rang-2 { background: linear-gradient(180deg, #f1f4f8, #a7b0bd); color: #2a2f38; } .rang-3 { background: linear-gradient(180deg, #f3c39a, #b06a35); color: #3a1f0a; }
.choix-mois { width: auto; min-height: 40px; border-radius: 999px; }
details summary { cursor: pointer; }
.titre-groupe { margin: .4rem 0 .5rem .9rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); font-weight: 600; }
.groupe-reglages { padding: .2rem 1.1rem; }
.reglage { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--trait); }
.reglage:last-child { border-bottom: 0; }
.texte-reglage { flex: 1; min-width: 0; }
.choix-reglage { width: auto; max-width: 52%; min-height: 38px; border-radius: 12px; }
.saisie-reglage { display: inline-flex; align-items: center; gap: .4rem; }
.saisie-reglage input { width: 110px; min-height: 38px; text-align: right; border-radius: 12px; }
.lien-defaut { border: 0; background: transparent; padding: 0; margin-top: .25rem; font: inherit; font-size: .78rem; color: var(--accent); cursor: pointer; }
@media (max-width: 600px) { .choix-reglage { max-width: 46%; } .saisie-reglage input { width: 84px; } }
.voyant { display: flex; align-items: center; gap: .6rem; }
.voyant .lampe { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #7a8396; box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.voyant.vert .lampe { background: radial-gradient(circle at 35% 35%, #b6ffd9, #22c55e 60%); box-shadow: 0 0 10px #22c55e; }
.voyant.orange .lampe { background: radial-gradient(circle at 35% 35%, #ffe8a8, #f59e0b 60%); box-shadow: 0 0 10px #f59e0b; animation: pouls 1.6s ease-in-out infinite; }
.voyant.rouge .lampe { background: radial-gradient(circle at 35% 35%, #ffc4c4, #ef4444 60%); box-shadow: 0 0 10px #ef4444; }
.nouvelle-version { display: grid; gap: .8rem; padding: 1rem; border-radius: 20px; background: var(--accent-doux); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.rond-icone { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); flex: none; }
.connexion { width: min(420px, 100%); }
.centre-colonne { display: grid; place-items: center; }
.choix-utilisateur button { display: grid; justify-items: center; gap: .55rem; padding: 1.4rem 1rem; }
.choix-utilisateur button .icone { color: var(--accent); }
/* Fermeture : l'interface se dissout doucement (déconnexion, rechargement) */
html.sortie #app > :not(.au-revoir) { animation: sortie .35s ease forwards; }
@keyframes sortie { to { opacity: 0; transform: scale(.97); filter: blur(8px); } }
/* Fermeture de l'appli (4.4) : le ciel recouvre l'écran, Grisbi fait un petit bond puis s'envole au loin */
.au-revoir { display: none; position: fixed; inset: 0; z-index: 101; place-items: center; pointer-events: none; background: linear-gradient(180deg, var(--ciel-haut), var(--ciel-bas)); }
html.sortie .au-revoir { display: grid; animation: au-revoir-ciel .25s ease both; }
html.sortie .au-revoir .grisbi-envol { animation: au-revoir-grisbi .62s cubic-bezier(.5, 0, .7, .2) .08s both; }
html.sortie .au-revoir .anneau { position: absolute; width: 150px; height: 150px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); animation: anneau-retour .55s ease-in both; }
@keyframes au-revoir-ciel { from { opacity: 0; } }
@keyframes au-revoir-grisbi { 0% { transform: scale(.85); opacity: 0; } 25% { transform: scale(1.04); opacity: 1; } 100% { transform: translateY(-120px) scale(.25); opacity: 0; } }
@keyframes anneau-retour { from { transform: scale(2); opacity: 0; } 50% { opacity: 1; } to { transform: scale(.3); opacity: 0; } }
html.retour #app > :not(.au-revoir) { animation: retour .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes retour { from { transform: scale(.985); } } /* sans fondu ni flou (le verre resterait vide) */
.jeton { display: block; padding: .7rem .9rem; border-radius: 14px; background: rgba(0,0,0,.25); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; word-break: break-all; user-select: all; }
.versions-maj { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.nouveautes { display: grid; gap: .7rem; }
.nouveaute { padding: .9rem 1.1rem; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.version-nouveaute { font-weight: 650; font-size: .95rem; margin-bottom: .45rem; color: var(--accent); }
.nouveaute ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .35rem; }
.nouveaute li { line-height: 1.45; }
.nouveaute li::marker { color: var(--accent); }
/* Petit encart météo (PC) : discret, en bas à droite */
.encart-meteo { position: fixed; right: 18px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: .55rem; padding: .45rem .85rem .45rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--encre); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); opacity: .85; transition: opacity .2s; pointer-events: auto; }
.encart-meteo:hover { opacity: 1; }
.encart-meteo .icone { color: var(--accent); }
@media (max-width: 860px), (pointer: coarse) and (max-width: 1100px) { .encart-meteo { display: none; } }

/* ---------------------------------------------------------------- Cockpit (4.4) */
.grille-cockpit { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.colonne-cockpit { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.colonne-cockpit > :last-child { flex: 1 1 auto; }
/* La carte du trafic et « Demander à Grisbi » prennent la hauteur qui reste : les deux colonnes finissent ensemble */
.colonne-cockpit .apercu-trafic { display: flex; flex-direction: column; }
.colonne-cockpit .apercu-trafic .corps-apercu { flex: 1 1 auto; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.colonne-cockpit .apercu-trafic .image-apercu { height: auto; min-height: 250px; }
.colonne-cockpit .apercu-trafic .chiffres-apercu { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; }
.colonne-cockpit .apercu-trafic .chiffres-apercu li { grid-template-columns: auto 1fr; grid-template-areas: "pastille nombre" "texte texte"; row-gap: .1rem; align-content: start; }
.colonne-cockpit .apercu-trafic .chiffres-apercu i { grid-area: pastille; }
.colonne-cockpit .apercu-trafic .chiffres-apercu b { grid-area: nombre; }
.colonne-cockpit .apercu-trafic .chiffres-apercu span { grid-area: texte; }
.colonne-cockpit .assistant { display: flex; flex-direction: column; }
.colonne-cockpit .assistant .saisie-assistant { margin-top: auto; }
@media (max-width: 1000px) {
  .grille-cockpit { grid-template-columns: minmax(0, 1fr); }
  .colonne-cockpit { display: contents; }
  .grille-cockpit .boutique { order: 1; } .grille-cockpit .a-faire { order: 2; } .grille-cockpit .apercu-trafic { order: 3; }
  .grille-cockpit .briefing { order: 4; } .grille-cockpit .assistant { order: 5; }
  .colonne-cockpit .apercu-trafic .image-apercu { min-height: 0; aspect-ratio: 16 / 10; }
  .colonne-cockpit .apercu-trafic .chiffres-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonne-cockpit .apercu-trafic .chiffres-apercu li { grid-template-columns: auto auto 1fr; grid-template-areas: "pastille nombre texte"; }
}
.entete-carte h2 { color: var(--encre-2); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.boutique { display: grid; gap: .55rem; padding: 1.3rem 1.4rem 1.4rem; }
.periodes { margin: .4rem 0 .5rem; }
.boutique .heros { font-size: clamp(2.8rem, 9vw, 3.6rem); animation: fondu-monte .35s cubic-bezier(.2, .8, .2, 1); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .3rem; }
.valeur-duo { font-size: clamp(1.7rem, 6vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; }
.valeur-duo.or { color: #f6c453; }
.valeur-duo.vert { color: #4ade80; }
:root[data-teinte="claire"] .valeur-duo.or { color: #b7791f; }
:root[data-teinte="claire"] .valeur-duo.vert { color: #15803d; }
.puces-colis { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.puce-colis { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--encre); box-shadow: inset 0 0 0 1px var(--bord-verre); transition: transform .15s; }
.puce-colis:active { transform: scale(.97); }
.puce-colis.a-envoyer { background: rgba(124, 92, 240, .22); }
.puce-colis.en-route { background: rgba(45, 212, 191, .16); }
.puce-colis .icone { color: var(--accent); }
.lignes-briefing p { margin: .25rem 0; line-height: 1.5; }
.briefing .bouton { margin-top: .8rem; }
.cockpit .heros-accueil h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.sous-onglets a { border-radius: 999px; padding: .42rem 1.1rem; font-size: .9rem; color: var(--encre-2); }
.sous-onglets a.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 8px rgba(0,0,0,.12); font-weight: 600; }
.onglets.periodes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; overflow: visible; }
.onglets.periodes button { padding: .45rem .2rem; text-align: center; }

/* ---------------------------------------------------------------- Mise en page 4.4 : barre fine en haut (PC, tablette en largeur) */
.cadre { display: flow-root; min-height: 100vh; } /* flow-root : la marge de la barre du haut reste dedans (sinon la page dépasse de 12 px et défile) */
.menu { display: none !important; }
.barre-haut {
  position: sticky; top: 12px; z-index: 30; margin: 12px auto 0; width: min(1180px, calc(100% - 32px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .4rem .5rem .4rem .8rem; border-radius: 24px;
  background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre);
}
.barre-haut .marque { display: flex; align-items: center; gap: .6rem; color: var(--encre); font-size: 1.05rem; justify-self: start; }
.barre-haut nav { display: flex; gap: .2rem; padding: .25rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.barre-haut nav a { position: relative; display: flex; align-items: center; gap: .5rem; padding: .5rem 1.05rem; border-radius: 999px; color: var(--encre-2); font-weight: 550; font-size: .93rem; transition: background .2s, color .2s; white-space: nowrap; }
.barre-haut nav a:hover { color: var(--encre); }
.barre-haut nav a.actif { color: var(--encre); background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); box-shadow: inset 0 1px 0 var(--reflet), 0 2px 10px rgba(0,0,0,.15); }
.barre-haut nav a.actif .icone { color: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.barre-haut nav .pastille { position: absolute; top: -4px; right: -2px; }
.barre-haut .droite { display: flex; align-items: center; gap: .4rem; justify-self: end; }
.barre-haut .encart-meteo { position: static; display: flex; opacity: 1; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; padding: .3rem .5rem; }
.contenu { margin: 0 auto; max-width: 1180px; padding: 1.6rem 16px 3rem; }
@media (min-width: 861px) and (max-width: 1100px) { .barre-haut nav a { padding: .5rem .75rem; } .barre-haut .encart-meteo .muet { display: none; } }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .barre-haut { display: none; }
  .contenu { padding: .6rem 16px 7rem; }
}
/* « À traiter » : ce qui demande ton attention, en premier */
.titre-groupe .pastille { margin-left: .35rem; vertical-align: 1px; }
.a-traiter { padding: .35rem .5rem; display: grid; }
.ligne-traiter { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .7rem .6rem; border: 0; border-radius: 14px; background: transparent; font: inherit; color: var(--encre); text-align: left; cursor: pointer; border-left: 3px solid var(--accent); margin: .15rem 0; transition: background .2s; }
.ligne-traiter:hover { background: var(--surface-2); }
.ligne-traiter.urgent { border-left-color: var(--critique); background: rgba(248, 113, 113, .07); }
.ligne-traiter img, .ligne-traiter .vignette { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--surface-2); color: var(--encre-3); }
.raisons { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.raison { font-size: .76rem; padding: .15rem .55rem; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.raison.urgent { color: #fff; background: rgba(239, 68, 68, .75); box-shadow: none; font-weight: 600; }
.vide-traiter { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; }

/* ---------------------------------------------------------------- Lisibilité (4.4) : verre plus dense, titres détachés du ciel */
:root { --verre: rgba(18, 28, 56, 0.52); --verre-fort: rgba(20, 30, 60, 0.7); }
:root[data-teinte="claire"] { --verre: rgba(255, 255, 255, 0.58); --verre-fort: rgba(255, 255, 255, 0.74); }
:root:not([data-teinte="claire"]) .entete-page h1, :root:not([data-teinte="claire"]) .titre-groupe, :root:not([data-teinte="claire"]) .heros-accueil h1, :root:not([data-teinte="claire"]) .heros-accueil p { text-shadow: 0 1px 14px rgba(2, 8, 28, .55); }
:root[data-teinte="claire"] .entete-page h1, :root[data-teinte="claire"] .titre-groupe, :root[data-teinte="claire"] .heros-accueil h1 { text-shadow: 0 1px 14px rgba(255, 255, 255, .6); }
.entete-page .bouton.discret, .heros-accueil + .bouton.discret { background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); }
/* Téléphone : barre du haut en verre (le soleil ou la lune passent derrière, sans jamais cacher un bouton) */
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .barre-mobile { position: sticky; top: 0; z-index: 25; margin: 0 0 .3rem; padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem;
    background: linear-gradient(180deg, var(--verre-fort), var(--verre)); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
    box-shadow: 0 1px 0 var(--bord-verre), 0 8px 24px rgba(2, 8, 28, .18); }
}
/* Les lignes « À traiter » ne débordent jamais de la carte */
.a-traiter { overflow: hidden; }
.ligne-traiter { min-width: 0; overflow: hidden; }
.raison { white-space: normal; }

/* Point rouge discret : cette vente ou cette annonce demande ton attention (4.4) */
.photo-vente { position: relative; display: block; cursor: pointer; }
.point-attention { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 0 2px var(--fond-carte, rgba(20, 30, 60, .9)), 0 0 10px rgba(255, 69, 58, .55); }
.vente .detail-vente .raisons { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Mise à jour obligatoire du téléphone : écran bloquant, impossible à fermer (4.4) */
.maj-obligatoire { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--ciel-haut) 55%, rgba(4, 10, 28, .55)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); animation: au-revoir-ciel .3s ease both; }
.maj-obligatoire .carte { width: min(400px, 100%); display: grid; justify-items: center; gap: .8rem; text-align: center; padding: 1.8rem 1.4rem; background: var(--verre-fort); }
.maj-obligatoire h2 { margin: .2rem 0 0; font-size: 1.35rem; }
.maj-obligatoire p { margin: 0; line-height: 1.45; }
.maj-obligatoire .bouton.grand { width: 100%; justify-content: center; padding: .95rem 1rem; font-size: 1.05rem; margin-top: .4rem; }
/* Détail du coût réel, ligne par ligne (fiche d'une annonce) */
.detail-cout { display: grid; gap: .15rem; margin-top: .35rem; font-size: .86rem; color: var(--encre-2); }
.detail-cout span { display: flex; justify-content: space-between; gap: 1rem; }
.detail-cout b { color: var(--encre); font-weight: 600; }

/* ---------------------------------------------------------------- Onglet Commandes (Grisbi 1.0) */
.tuiles-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.tuile-etape { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .65rem; align-items: center; text-align: left; padding: .9rem 1rem; border: 0; border-radius: 20px; cursor: pointer; color: var(--encre); font: inherit;
  background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); transition: transform .18s, box-shadow .2s; }
.tuile-etape .icone { grid-row: 1 / 3; color: var(--encre-3); }
.tuile-etape b { font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tuile-etape span { font-size: .84rem; font-weight: 600; line-height: 1.2; }
.tuile-etape small { display: block; font-weight: 400; color: var(--encre-3); }
.tuile-etape.a-faire .icone, .tuile-etape.a-faire b { color: #ffb347; }
.tuile-etape.actif { box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 2px var(--accent); }
.tuile-etape:active { transform: scale(.97); }
.barre-vues { align-items: center; }
.liste-commandes { display: grid; gap: .7rem; }
.commande { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: .9rem; align-items: start; padding: .9rem; border-radius: 22px; cursor: pointer;
  background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); border-left: 4px solid transparent; transition: transform .15s; }
.commande:active { transform: scale(.99); }
.commande.bientot { border-left-color: #ffb347; }
.commande.urgente { border-left-color: #ff5a4f; }
.commande > img, .commande > .vignette { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); }
.commande .titre { font-weight: 650; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.commande .meta { font-size: .85rem; color: var(--encre-2); margin-top: .25rem; }
.commande .actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.commande .montant { display: grid; justify-items: end; gap: .15rem; font-size: .92rem; font-variant-numeric: tabular-nums; }
.commande .montant span { font-size: .82rem; }
.etat-warehouse { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--encre-2); padding: .3rem .65rem; border-radius: 999px; background: var(--surface-2); }
@media (max-width: 600px) {
  .tuiles-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .tuile-etape { padding: .75rem .8rem; }
  .commande { grid-template-columns: 64px minmax(0, 1fr); }
  .commande > img, .commande > .vignette { width: 64px; height: 64px; }
  .commande .montant { grid-column: 2; grid-row: 2; justify-items: start; display: flex; gap: .6rem; margin-top: -.2rem; }
  .commande .actions { grid-column: 1 / -1; }
  .barre-vues .recherche { width: 100%; }
}
/* Fiche d'une commande : panneau par-dessus (plein écran sur téléphone) */
.fiche-fond { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(4, 10, 28, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fiche { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 1rem; background: var(--verre-fort); }
.fiche-tete { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; align-items: center; }
.fiche-tete img { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; }
.fiche-tete h2 { margin: 0 0 .25rem; font-size: 1.12rem; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--encre); }
.fenetre-tete { display: flex; align-items: center; gap: .6rem; }
.fenetre-tete h2 { flex: 1; margin: 0; }
.fenetre-pied { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.fiche .interrupteur span { font-size: .9rem; color: var(--encre-2); }
.fiche h3 { text-transform: none; letter-spacing: 0; color: var(--encre); }
.fiche h3 { margin: 0; font-size: 1rem; }
.etapes-commande { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.etapes-commande li { position: relative; display: grid; justify-items: center; gap: .35rem; text-align: center; font-size: .72rem; color: var(--encre-3); line-height: 1.2; }
.etapes-commande li span { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--bord-verre); z-index: 1; }
.etapes-commande li:not(:first-child)::before { content: ""; position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--bord-verre); }
.etapes-commande li.fait { color: var(--encre-2); }
.etapes-commande li.fait span { background: #34d399; box-shadow: none; }
.etapes-commande li.fait::before { background: #34d399; }
.etapes-commande li.actuelle { color: var(--encre); font-weight: 650; }
.etapes-commande li.actuelle span { background: #ffb347; box-shadow: 0 0 0 4px rgba(255, 179, 71, .25); }
.champ { display: grid; gap: .35rem; font-size: .88rem; font-weight: 600; }
.champ input { font: inherit; font-weight: 400; padding: .7rem .85rem; border-radius: 14px; border: 0; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.infos-warehouse { display: grid; gap: .4rem; padding: .7rem .85rem; border-radius: 16px; background: var(--surface-2); font-size: .88rem; }
.infos-warehouse div { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.infos-warehouse span { color: var(--encre-3); }
.infos-warehouse b { font-weight: 600; overflow-wrap: anywhere; }
.bouton.grand { justify-content: center; padding: .9rem 1rem; font-size: 1rem; width: 100%; }
.plus-infos summary { cursor: pointer; color: var(--encre-2); font-size: .9rem; }
@media (max-width: 600px) { .fiche-fond { padding: 0; place-items: end stretch; } .fiche { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; } }
/* Captures Temu : rapprochements à valider */
.liste-rapprochement { display: grid; gap: 0; padding: .3rem .9rem; }
.rapprochement { display: grid; grid-template-columns: auto 52px minmax(0, 1fr); gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--trait); cursor: pointer; }
.rapprochement:last-child { border-bottom: 0; }
.rapprochement img, .rapprochement .vignette { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.rapprochement input { width: 20px; height: 20px; accent-color: var(--accent); }
/* Commandes : sélection de plusieurs articles à ajouter à la warehouse */
.commande.selectionnable { grid-template-columns: auto 76px minmax(0, 1fr) auto; }
.commande.cochee { box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 2px var(--accent); }
.case { display: grid; place-items: center; align-self: center; cursor: pointer; padding: .3rem; margin: -.3rem; }
.case input { position: absolute; opacity: 0; pointer-events: none; }
.case span { width: 26px; height: 26px; border-radius: 9px; box-shadow: inset 0 0 0 2px var(--bord-verre); background: var(--surface-2); display: grid; place-items: center; transition: background .15s; }
.case input:checked + span { background: var(--accent); box-shadow: none; }
.case input:checked + span::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid var(--accent-encre); border-bottom: 2.5px solid var(--accent-encre); transform: translateY(-2px) rotate(-45deg); }
.case input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.titre-section { align-items: center; }
.barre-selection { position: fixed; left: 50%; transform: translateX(-50%); bottom: 24px; z-index: 40; width: min(620px, calc(100% - 32px)); display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem .7rem 1.1rem; border-radius: 22px;
  background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: 0 12px 40px rgba(2, 8, 28, .35), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); animation: monte .3s ease; }
.barre-selection > span { flex: 1; font-size: .92rem; }
.avec-barre-selection { padding-bottom: 5.5rem; }
.consignes { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .92rem; color: var(--encre-2); }
.liste-ajout { display: grid; gap: .5rem; }
.ligne-ajout { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; gap: .6rem; align-items: center; }
.ligne-ajout img, .ligne-ajout .vignette { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.etat-warehouse.critique { color: #ff8a80; }
@media (max-width: 600px) {
  .commande.selectionnable { grid-template-columns: auto 64px minmax(0, 1fr); }
  .commande.selectionnable .montant { grid-column: 3; }
  .barre-selection { bottom: calc(96px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .barre-selection .principal { flex: 1 1 100%; justify-content: center; }
  .avec-barre-selection { padding-bottom: 9rem; }
}
.fiche h2 { text-transform: none; letter-spacing: 0; color: var(--encre); font-size: 1.15rem; }
.champ textarea { font: inherit; font-weight: 400; padding: .7rem .85rem; border-radius: 14px; border: 0; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); resize: vertical; }
/* Voyage du colis : frise verticale datée, de l'annonce à la livraison */
.voyage-boite summary { cursor: pointer; font-weight: 650; margin-bottom: .6rem; }
.voyage { list-style: none; margin: 0; padding: 0; display: grid; }
.voyage li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .7rem; padding-bottom: .9rem; color: var(--encre-3); }
.voyage li:last-child { padding-bottom: 0; }
.voyage li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--bord-verre); }
.voyage li.fait::after { background: #34d399; }
.voyage .pastille-voyage { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--bord-verre); }
.voyage li b { font-weight: 600; }
.voyage li.fait { color: var(--encre); }
.voyage li.fait .pastille-voyage { background: #34d399; color: #04261a; box-shadow: none; }
.voyage li.actuelle { color: var(--encre); }
.voyage li.actuelle .pastille-voyage { background: #ffb347; color: #3a2400; box-shadow: 0 0 0 4px rgba(255, 179, 71, .25); }
.voyage li.prevu .pastille-voyage { box-shadow: inset 0 0 0 1.5px var(--encre-3); background: transparent; }
.voyage li.prevu { color: var(--encre-2); }
.voyage li.alerte .pastille-voyage { background: #ff5a4f; color: #fff; box-shadow: none; }
.ligne-bouton { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .85rem 1rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
/* Assistant « Demander à Grisbi » */
.assistant { display: grid; gap: .8rem; }
.fil-assistant { display: grid; gap: .9rem; max-height: 560px; overflow-y: auto; padding-right: .2rem; }
.bulle-assistant { max-width: 92%; padding: .9rem 1.1rem; border-radius: 18px; line-height: 1.45; font-size: .95rem; }
.bulle-assistant p { margin: 0 0 .5rem; } .bulle-assistant p:last-child { margin-bottom: 0; }
.bulle-assistant ul { margin: .2rem 0 .5rem; padding-left: 1.1rem; } .bulle-assistant ul:last-child { margin-bottom: 0; }
.bulle-assistant.moi { justify-self: end; background: var(--accent); color: var(--accent-encre); border-bottom-right-radius: 6px; }
.bulle-assistant.de-grisbi { justify-self: start; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); border-bottom-left-radius: 6px; }
.bulle-assistant.erreur { color: #ffb4b4; }
.bulle-assistant.attente { display: flex; gap: .3rem; padding: .9rem 1rem; }
.bulle-assistant.attente span { width: 7px; height: 7px; border-radius: 50%; background: var(--encre-2); animation: pointille 1.2s infinite ease-in-out; }
.bulle-assistant.attente span:nth-child(2) { animation-delay: .15s; } .bulle-assistant.attente span:nth-child(3) { animation-delay: .3s; }
@keyframes pointille { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.suggestions { display: flex; flex-wrap: wrap; gap: .45rem; }
.puce-suggestion { border: 0; font: inherit; font-size: .86rem; color: var(--encre); cursor: pointer; padding: .5rem .8rem; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.saisie-assistant { display: flex; gap: .5rem; }
.saisie-assistant input { flex: 1; min-width: 0; font: inherit; padding: .75rem 1rem; border-radius: 999px; border: 0; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.bulle-grisbi { position: absolute; top: calc(100% + 8px); left: 50%; z-index: 30; width: max-content; max-width: min(260px, calc(100vw - 24px)); white-space: normal; text-align: center; line-height: 1.35; animation: monte .25s ease; }
/* Briefing en couleurs (Grisbi 1.0) */
.briefing { display: grid; gap: .75rem; }
.briefing.matin { background: linear-gradient(160deg, rgba(255, 196, 110, .14), transparent 55%), var(--verre); }
.briefing.soir { background: linear-gradient(160deg, rgba(140, 150, 255, .16), transparent 55%), var(--verre); }
.icone-briefing { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; margin-right: .55rem; background: rgba(255, 196, 110, .2); color: #ffc46e; }
.briefing.soir .icone-briefing { background: rgba(140, 150, 255, .2); color: #a9b0ff; }
.salut-briefing { margin: 0; font-size: 1.08rem; font-weight: 650; }
.lignes-briefing { display: grid; gap: .5rem; }
.ligne-briefing { display: grid; grid-template-columns: 30px 1fr; gap: .65rem; align-items: center; line-height: 1.4; }
.ligne-briefing b { font-weight: 700; }
.pastille-sujet { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); }
.ligne-briefing.vert .pastille-sujet { background: rgba(52, 211, 153, .18); color: #34d399; } .ligne-briefing.vert b { color: #4ade80; }
.ligne-briefing.orange .pastille-sujet { background: rgba(255, 159, 67, .18); color: #ff9f43; } .ligne-briefing.orange b { color: #ffb347; }
.ligne-briefing.bleu .pastille-sujet { background: rgba(96, 165, 250, .18); color: #60a5fa; } .ligne-briefing.bleu b { color: #93c5fd; }
.ligne-briefing.or .pastille-sujet { background: rgba(250, 204, 21, .18); color: #facc15; } .ligne-briefing.or b { color: #fde047; }
.ligne-briefing.violet .pastille-sujet { background: rgba(167, 139, 250, .18); color: #a78bfa; } .ligne-briefing.violet b { color: #c4b5fd; }
.ligne-briefing.calme .pastille-sujet { color: var(--encre-2); }
.signature-briefing { margin: 0; font-style: italic; color: var(--encre-2); }
.signature-briefing span { font-style: normal; color: var(--encre-3); font-size: .9em; }
:root[data-teinte="claire"] .ligne-briefing.vert b { color: #15803d; } :root[data-teinte="claire"] .ligne-briefing.orange b { color: #c2410c; }
:root[data-teinte="claire"] .ligne-briefing.bleu b { color: #1d4ed8; } :root[data-teinte="claire"] .ligne-briefing.or b { color: #a16207; } :root[data-teinte="claire"] .ligne-briefing.violet b { color: #6d28d9; }
/* Réglages > Sons */
.grille-sons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.puce-son { display: flex; align-items: center; gap: .5rem; padding: .7rem .85rem; border: 0; border-radius: 14px; font: inherit; font-size: .92rem; color: var(--encre); cursor: pointer; text-align: left;
  background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.puce-son .icone { color: var(--encre-3); }
.puce-son.choisi { box-shadow: inset 0 0 0 2px var(--accent); }
.puce-son.choisi .icone { color: var(--accent); }
.titre-groupe .icone { vertical-align: -2px; }
/* Appli PC sans barre de titre : boutons de fenêtre discrets, en verre */
.boutons-fenetre { display: flex; gap: .25rem; margin-left: .3rem; }
.boutons-fenetre button { width: 30px; height: 30px; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: var(--encre-2); background: transparent; transition: background .15s, color .15s; }
.boutons-fenetre button:hover { background: var(--surface-2); color: var(--encre); }
.boutons-fenetre button.fermer:hover { background: #e5484d; color: #fff; }
/* Statuts en couleur (Grisbi 1.0.2) : on voit tout de suite où l'attention est requise */
.pastille-statut { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pastille-statut.orange { background: rgba(255, 159, 67, .18); color: #ffb35c; }
.pastille-statut.ambre { background: rgba(250, 204, 21, .15); color: #fcd34d; }
.pastille-statut.rouge { background: rgba(255, 90, 79, .18); color: #ff8a80; }
.pastille-statut.bleu { background: rgba(96, 165, 250, .16); color: #93c5fd; }
.pastille-statut.violet { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
.pastille-statut.vert { background: rgba(52, 211, 153, .18); color: #4ade80; }
.pastille-statut.gris { background: var(--surface-2); color: var(--encre-3); }
:root[data-teinte="claire"] .pastille-statut.orange { color: #c2410c; } :root[data-teinte="claire"] .pastille-statut.ambre { color: #a16207; }
:root[data-teinte="claire"] .pastille-statut.rouge { color: #b91c1c; } :root[data-teinte="claire"] .pastille-statut.bleu { color: #1d4ed8; }
:root[data-teinte="claire"] .pastille-statut.violet { color: #6d28d9; } :root[data-teinte="claire"] .pastille-statut.vert { color: #15803d; }
/* Boîtes de la warehouse */
.grille-boites { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; } /* une boîte par ligne, la plus récente en haut */
.boite-warehouse { display: grid; gap: .6rem; padding: .9rem; border-radius: 22px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.boite-tete { display: flex; align-items: center; gap: .7rem; }
.boite-articles { display: grid; gap: .35rem; padding: .4rem; border-radius: 16px; background: var(--surface-2); }
.boite-article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: .65rem; align-items: center; padding: .4rem; border-radius: 12px; }
.boite-article.cliquable { cursor: pointer; } .boite-article.cliquable:hover { background: var(--verre); }
.boite-article.celui-ci { box-shadow: inset 0 0 0 2px #ffb347; background: rgba(255, 179, 71, .08); }
.boite-article img, .boite-article .vignette { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--verre); }
/* Article en stock à la warehouse : à toi d'agir (Grisbi 1.0.2) */
.a-faire-stock { padding: .9rem; border-radius: 18px; background: rgba(255, 90, 79, .08); box-shadow: inset 0 0 0 1px rgba(255, 90, 79, .35); }
.a-faire-stock h3 { display: flex; align-items: center; gap: .45rem; margin: 0; color: #ff8a80; }
:root[data-teinte="claire"] .a-faire-stock h3 { color: #b91c1c; }
.titre-groupe.critique { color: #ff8a80; }
.lien-carte { gap: .8rem; text-decoration: none; color: inherit; align-items: center; }
.lien-carte:hover { background: var(--verre); }
.voyage li.actuelle.alerte .pastille-voyage { background: #ff5a4f; color: #fff; }
.a-faire-bonne-nouvelle { padding: .9rem; border-radius: 18px; background: rgba(52, 211, 153, .08); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .35); }
.a-faire-bonne-nouvelle h3 { display: flex; align-items: center; gap: .45rem; margin: 0; color: #4ade80; }
:root[data-teinte="claire"] .a-faire-bonne-nouvelle h3 { color: #15803d; }
fieldset.sans-cadre { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.sans-cadre:disabled { opacity: .75; }
.taille-envoyee { display: grid; gap: .1rem; font-size: .72rem; color: var(--encre-3); text-align: center; }
.taille-envoyee input { width: 3.2rem; text-align: center; padding: .3rem; border-radius: 10px; }
/* Carrière (Grisbi 1.0.2) */
.carriere-hero { display: flex; gap: 1.1rem; align-items: center; padding: 1.2rem; }
.insigne-carriere { width: 96px; height: 96px; flex: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.carriere-hero .grade { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin: .1rem 0 .5rem; }
.message-carriere { margin: 0; font-style: italic; color: var(--encre-2); text-align: center; }
.tuile-carriere { display: grid; gap: .25rem; }
.tuile-carriere b { font-size: 1.5rem; }
.jauge.fine { height: 5px; margin-top: .35rem; }
.routes { display: grid; gap: .45rem; }
.route { padding: .55rem .7rem; border-radius: 12px; background: var(--surface-2); color: var(--encre-3); }
.route.faite { color: var(--encre); }
.route.faite .espace::before { content: "✓ "; color: #4ade80; }
.route.en-cours { box-shadow: inset 0 0 0 1px var(--accent); color: var(--encre); }
.mission { display: flex; gap: .7rem; align-items: center; }
.mission.faite .rond-icone { background: rgba(52, 211, 153, .2); color: #4ade80; }
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .6rem; }
.piece-collection { display: flex; gap: .7rem; align-items: center; padding: .7rem; border-radius: 14px; background: var(--surface-2); }
.piece-collection.ok { background: var(--verre); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.badges-carriere { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: .55rem; }
.badge-carriere { display: grid; justify-items: center; text-align: center; gap: .2rem; padding: .7rem .5rem; border-radius: 14px; background: var(--surface-2); opacity: .45; }
.badge-carriere.ok { opacity: 1; background: var(--verre); box-shadow: inset 0 0 0 1px rgba(255, 199, 90, .45); }
.badge-carriere.ok .rond-icone { color: #ffc75a; }
.carriere .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .carriere .grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bandeau.bloc { display: block; line-height: 1.5; padding: 1rem 1.1rem; }
.bandeau.bloc b { display: block; margin-bottom: .35rem; font-size: 1.02rem; }
.podium { display: grid; gap: .45rem; }
.article-star { display: grid; grid-template-columns: 28px 44px minmax(0, 1fr); gap: .65rem; align-items: center; padding: .45rem; border-radius: 14px; background: var(--surface-2); }
.article-star img, .article-star .vignette { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--verre); }
.article-star .rang { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--verre); color: var(--encre-2); }
.article-star .rang-1 { background: linear-gradient(#ffe7a3, #c9952f); color: #3a2400; }
.article-star .rang-2 { background: linear-gradient(#f1f5f9, #94a3b8); color: #1e293b; }
.article-star .rang-3 { background: linear-gradient(#f5c9a0, #a5683a); color: #2b1606; }
.route .espace b { color: var(--encre); }
/* Article dans une boîte : le titre en entier, le statut en dessous (même pastille que l onglet Commandes) */
.boite-article { grid-template-columns: 44px minmax(0, 1fr); }
.boite-article > :last-child { grid-column: 2; justify-self: start; margin-top: -.15rem; }
.boite-article .tronque { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#givre { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 44; contain: strict; }
.code-grand { font-size: 1.8rem; letter-spacing: .18em; font-family: ui-monospace, monospace; padding: .4rem .9rem; border-radius: 12px; background: var(--surface-2); }
@media (min-width: 900px) { .boite-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* Filtres de « Toutes les ventes » et case « Depuis le début » (Grisbi 1.0.4) */
.tuiles-etapes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 600px) { .tuiles-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile-etape.total { grid-column: 1 / -1; } }
.tuile-etape.total b { color: #ffc75a; }
.filtres-ventes { display: grid; gap: .7rem; padding: .9rem; }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce { border: 0; cursor: pointer; padding: .4rem .75rem; border-radius: 999px; font: inherit; font-size: .85rem; color: var(--encre-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.puce.active { color: var(--accent-encre); background: var(--accent); box-shadow: none; }
.filtres-ventes select { margin-left: .3rem; padding: .3rem .5rem; border-radius: 10px; font: inherit; }
.demarrage { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 45%, #10224a 0%, #071026 55%, #030812 100%); color: transparent; }
/* Carrière 1.0.4 : paliers en cartes d'embarquement (pilote) ou carnets de plongée (biologiste marine) */
.billets { display: grid; gap: .55rem; }
.billet { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 14px; overflow: hidden; background: var(--surface-2); color: var(--encre-3); }
.billet .talon { display: grid; align-content: center; gap: .05rem; padding: .6rem .7rem; border-right: 2px dashed var(--bord-verre); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.billet .talon b { font-size: 1.05rem; color: var(--encre-2); }
.billet .corps-billet { display: grid; gap: .15rem; padding: .6rem .8rem; align-content: center; }
.billet.fait { color: var(--encre); background: var(--verre); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.billet.fait .talon b { color: var(--encre); }
.billet.en-cours { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--encre); }
.billet .tampon { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%) rotate(-12deg); font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: #4ade80; border: 2px solid #4ade8088; border-radius: 6px; padding: .1rem .35rem; }
.billet .tampon:empty { display: none; }
.univers-marine .billet .talon { background: linear-gradient(180deg, rgba(95, 211, 230, .14), rgba(13, 51, 70, .35)); }
.billet.fait .corps-billet { padding-right: 6rem; }
.billet .tampon { top: auto; bottom: .55rem; transform: rotate(-10deg); }

/* Appli PC 1.0.7 : bords invisibles pour redimensionner la fenêtre (plus de marge grise autour de la page) */
.bords-fenetre > div { position: fixed; z-index: 200; }
.bord-h { top: 0; left: 8px; right: 8px; height: 5px; cursor: ns-resize; }
.bord-b { bottom: 0; left: 8px; right: 8px; height: 5px; cursor: ns-resize; }
.bord-g { left: 0; top: 8px; bottom: 8px; width: 5px; cursor: ew-resize; }
.bord-d { right: 0; top: 8px; bottom: 8px; width: 5px; cursor: ew-resize; }
.bord-hg { top: 0; left: 0; width: 8px; height: 8px; cursor: nwse-resize; }
.bord-bd { bottom: 0; right: 0; width: 8px; height: 8px; cursor: nwse-resize; }
.bord-hd { top: 0; right: 0; width: 8px; height: 8px; cursor: nesw-resize; }
.bord-bg { bottom: 0; left: 0; width: 8px; height: 8px; cursor: nesw-resize; }
/* 1.0.7 : à qui, où, quel transporteur ; case « Finalisées » ; vérification avant d'importer un bordereau */
.commande .qui { font-size: .84rem; color: var(--encre-2); margin-top: .2rem; overflow-wrap: anywhere; }
.tuile-etape.finalisees .icone, .tuile-etape.finalisees b { color: var(--bon-texte); }
.transporteur-bordereau { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.transporteur-bordereau b { font-size: 1.15rem; }
.transporteur-bordereau .rond-icone { color: var(--accent); }
.transporteur-bordereau.bloque { background: rgba(127, 29, 29, .35); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }
.transporteur-bordereau.bloque .rond-icone { color: var(--critique); }
.bandeau.critique-doux { margin: 0; background: rgba(127, 29, 29, .3); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .45); }
/* 1.0.7 : réponses de Grisbi aérées, avec de vraies cartes */
.bulle-assistant.de-grisbi { line-height: 1.6; }
.bulle-assistant.de-grisbi > * + * { margin-top: .75rem; }
.bulle-assistant.de-grisbi p { margin: 0; }
.bulle-assistant.de-grisbi h3 { margin: 1rem 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.bulle-assistant.de-grisbi h3:first-child { margin-top: 0; }
.bulle-assistant.de-grisbi ul, .bulle-assistant.de-grisbi ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.bulle-assistant.de-grisbi li::marker { color: var(--accent); }
.montant-cle { font-weight: 650; color: var(--bon-texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.montant-cle.negatif { color: var(--critique); }
.pile-cartes { display: grid; gap: .5rem; }
.carte-reponse { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: .75rem; align-items: center; width: 100%; padding: .6rem .7rem; border: 0; border-radius: 16px; text-align: left; font: inherit; color: var(--encre); cursor: pointer;
  background: var(--verre-clair); box-shadow: inset 0 0 0 1px var(--bord-verre); transition: transform .15s, background .2s; }
.carte-reponse:hover { background: rgba(255, 255, 255, .12); }
.carte-reponse:active { transform: scale(.99); }
.carte-reponse.temu { cursor: default; grid-template-columns: 54px minmax(0, 1fr); }
.carte-reponse > img, .carte-reponse > .vignette { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); color: var(--encre-3); }
.carte-reponse .corps { display: grid; gap: .2rem; min-width: 0; line-height: 1.3; }
.carte-reponse .tronque-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; }
.carte-reponse .ligne-pastilles { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.carte-reponse .montant { display: grid; justify-items: end; gap: .1rem; font-variant-numeric: tabular-nums; font-size: .9rem; }
.carte-reponse .montant span { font-size: .8rem; }
.mini-ventes { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.mini-ventes button { border: 0; padding: 0; background: var(--surface-2); border-radius: 9px; cursor: pointer; color: var(--encre-2); font: inherit; font-size: .75rem; overflow: hidden; }
.mini-ventes img { width: 34px; height: 34px; object-fit: cover; display: block; }
.carte-reponse-boite .boite-warehouse { margin: 0; }
.encadre-reponse { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .85rem; border-radius: 14px; }
.encadre-reponse .icone { margin-top: .2rem; }
.encadre-reponse.attention { background: rgba(251, 191, 36, .1); box-shadow: inset 3px 0 0 var(--attention); }
.encadre-reponse.attention .icone { color: var(--attention); }
.encadre-reponse.bon { background: rgba(52, 211, 153, .1); box-shadow: inset 3px 0 0 var(--bon); }
.encadre-reponse.bon .icone { color: var(--bon); }
.tableau-reponse { overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.tableau-reponse table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tableau-reponse th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-3); font-weight: 600; padding: .55rem .8rem; background: var(--surface-2); }
.tableau-reponse td { padding: .5rem .8rem; border-top: 1px solid var(--trait); }
@media (max-width: 600px) { .carte-reponse { grid-template-columns: 46px minmax(0, 1fr) auto; } .carte-reponse > img, .carte-reponse > .vignette { width: 46px; height: 46px; } .bulle-assistant { max-width: 100%; } }
.bulle-assistant.de-grisbi { width: min(720px, 100%); }
@media (min-width: 601px) { .tuiles-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tuiles-etapes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; } .tuile-etape { padding: .8rem .75rem; column-gap: .5rem; } }

/* 1.0.7 : « Le trafic », le globe du voyage de chaque article */
.chiffres-trafic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.chiffres-trafic > div { display: grid; padding: .8rem 1rem; border-radius: 20px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.chiffres-trafic b { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.chiffres-trafic span { font-size: .82rem; color: var(--encre-3); }
.filtres-trafic { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; padding: .7rem .9rem; }
.filtres-trafic select { width: auto; min-height: 34px; padding: .3rem .7rem; }
.cadre-globe { position: relative; padding: 0; overflow: hidden; }
.toile-globe { display: block; width: 100%; height: min(72vh, 680px); min-height: 380px; cursor: grab; touch-action: none; }
.toile-globe:active { cursor: grabbing; }
.bulle-globe { position: absolute; z-index: 5; width: min(340px, calc(100% - 24px)); transform: translate(-50%, calc(-100% - 16px)); display: grid; gap: .5rem; padding: .8rem; border-radius: 18px;
  background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); pointer-events: auto; }
.bulle-globe .fermer-bulle { position: absolute; top: .3rem; right: .3rem; width: 30px; min-height: 30px; }
.legende-globe { position: absolute; left: .9rem; bottom: .8rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; max-width: calc(100% - 1.8rem); font-size: .76rem; color: var(--encre-2); pointer-events: none; }
.legende-globe span { display: inline-flex; align-items: center; gap: .35rem; }
.legende-globe i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
@media (max-width: 600px) { .chiffres-trafic { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toile-globe { height: 62vh; min-height: 320px; } .legende-globe { position: static; padding: .3rem .9rem .8rem; } .bulle-globe { left: 50% !important; top: auto !important; bottom: .6rem; transform: translateX(-50%); } }
.bulle-globe.dessous { transform: translate(-50%, 18px); }
.bulle-globe { max-height: min(400px, calc(100% - 40px)); overflow-y: auto; overscroll-behavior: contain; }
.carte-monde { cursor: grab; background: #0b1630; }
.carte-monde .maplibregl-ctrl-attrib { background: rgba(8,14,30,.6); color: rgba(220,230,255,.6); font-size: 10px; }
.carte-monde .maplibregl-ctrl-attrib a { color: rgba(220,230,255,.75); }
/* Le trafic : véhicules et entrepôts sur la carte (de vrais petits dessins, pas des pions) */
.vehicule-carte { border: 0; padding: 0; background: none; cursor: pointer; transition: opacity .35s; --echelle: 1; }
.vehicule-carte .corps-vehicule { display: block; transform: scale(var(--echelle)); transition: transform .2s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.vehicule-carte:hover .corps-vehicule { transform: scale(calc(var(--echelle) * 1.25)); }
.vehicule-carte.cache { opacity: 0; pointer-events: none; }
.vehicule-carte.camion.vers-gauche .camion-svg { transform: scaleX(-1); }
.vehicule-carte.avion .avion-svg { transform: rotate(var(--cap, 0rad)); }
.camion-svg .caisse-camion { animation: roulis-camion 0.9s ease-in-out infinite; }
.camion-svg .roue { animation: roue-camion 0.7s linear infinite; }
@keyframes roulis-camion { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6px); } }
@keyframes roue-camion { to { transform: rotate(360deg); } }
.avion-svg { animation: flotte-avion 3s ease-in-out infinite; }
@keyframes flotte-avion { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.5px; } }
.entrepot-carte { border: 0; padding: 0; background: none; cursor: pointer; display: grid; justify-items: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.entrepot-carte svg { transition: transform .2s; }
.entrepot-carte:hover svg { transform: translateY(-2px) scale(1.06); }
.nom-entrepot { margin-top: -4px; font: 600 11px var(--police); color: #f0f6ff; text-shadow: 0 1px 3px rgba(4,10,24,.95); white-space: nowrap; }
[data-animations="aucune"] .camion-svg *, [data-animations="aucune"] .avion-svg { animation: none !important; }
.case-parfum { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--encre-2); cursor: pointer; white-space: nowrap; }
.options-article { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; font-size: .8rem; }
/* Commandes Temu regroupées (même numéro de commande ou même suivi) */
.groupe-temu { display: grid; gap: .6rem; padding: .8rem; border-radius: 24px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.tete-groupe-temu { padding: 0 .3rem; flex-wrap: wrap; row-gap: .5rem; }
/* Le titre garde toujours une vraie largeur (sinon le numéro Temu s'écrit lettre par lettre, à la verticale) */
.titre-groupe-temu { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.actions-groupe-temu { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.tete-groupe-temu .rond-icone { color: var(--accent); }
/* Commandes sur téléphone (demande de Lukas, 26/10/2026) : un en-tête qui tient sur une ligne et 6 compteurs compacts */
.tuile-etape .mot-court, .tuile-etape i { font-style: normal; }
.tuile-etape .mot-court { display: none; }
@media (max-width: 600px) {
  .entete-commandes { margin-bottom: .2rem; gap: .4rem; flex-wrap: nowrap; }
  .entete-commandes h1 { display: none; }                         /* le titre est déjà dans la barre du haut */
  .entete-commandes .bouton { font-size: 0; width: 44px; min-height: 44px; padding: 0; gap: 0; }
  .entete-commandes .espace { flex: 1; }
  .tuiles-etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
  .tuile-etape { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: start; row-gap: .1rem; padding: .65rem .7rem .7rem; border-radius: 18px; }
  .tuile-etape .icone { grid-row: auto; width: 16px; height: 16px; }
  .tuile-etape b { font-size: 1.45rem; }
  .tuile-etape span { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tuile-etape small { display: none; }
  .tuile-etape .mot-long { display: none; }
  .tuile-etape .mot-court { display: inline; }
}
@media (max-width: 600px) { .tuile-etape.total { grid-column: auto; } }
/* Téléphone : la case à cocher se pose sur le coin de la photo (elle flottait au milieu à gauche de la carte) */
@media (max-width: 600px) {
  .commande { position: relative; }
  .commande.selectionnable { grid-template-columns: 64px minmax(0, 1fr); }
  .commande.selectionnable .montant { grid-column: 2; }
  .commande .case { position: absolute; top: .45rem; left: .45rem; z-index: 2; margin: 0; padding: .15rem; }
  .commande .case span { width: 24px; height: 24px; border-radius: 8px; background: rgba(8, 14, 30, .75); }
  .commande .actions .bouton.petit { min-height: 32px; padding: .25rem .7rem; }
}
.fond-modal { z-index: 80; } /* les questions passent toujours au-dessus des fenêtres (ex. confirmation de regroupement) */
/* ---------------------------------------------------------------- Le trafic 1.0.10 : panneau, commandes, film, ciel étoilé */
.carte-monde {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 72%, rgba(220,230,255,.8), transparent 60%), radial-gradient(1px 1px at 88% 64%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 52% 38%, rgba(255,240,220,.6), transparent 60%), radial-gradient(1.5px 1.5px at 8% 88%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 63% 90%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 92% 30%, rgba(200,215,255,.8), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, #0b1838 0%, #050a1a 70%, #02040c 100%);
}
.cadre-globe { isolation: isolate; }
.commandes-carte { position: absolute; z-index: 4; top: .8rem; left: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; max-width: calc(100% - 1.6rem); }
.commandes-carte .bouton { background: rgba(10, 18, 40, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.commandes-carte .bouton.principal { background: var(--accent); }
.panneau-trafic { position: absolute; z-index: 6; top: .8rem; right: .8rem; bottom: .8rem; width: min(360px, calc(100% - 1.6rem)); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: rgba(12, 20, 44, .82); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); }
.tete-panneau { display: flex; align-items: flex-start; gap: .6rem; padding: .9rem .9rem .6rem 1rem; border-bottom: 1px solid var(--trait); }
.tete-panneau b { display: block; font-size: 1.02rem; line-height: 1.3; }
.corps-panneau { overflow-y: auto; overscroll-behavior: contain; padding: .8rem; display: grid; gap: .6rem; align-content: start; }
.progression-colis { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.progression-colis span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5ccbff, #a78bfa); box-shadow: 0 0 10px rgba(92,203,255,.6); transition: width .3s; }
.film-trafic { position: absolute; z-index: 4; left: 50%; bottom: 3.2rem; transform: translateX(-50%); display: grid; gap: .3rem; justify-items: center; min-width: 240px; padding: .7rem 1.1rem; border-radius: 18px;
  background: rgba(10, 18, 40, .78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--ombre), inset 0 0 0 1px var(--bord-verre); }
.film-trafic b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.film-trafic span { font-size: .85rem; color: var(--encre-2); }
.film-trafic .progression-colis { width: 100%; }
.vehicule-carte { position: relative; }
.vehicule-carte .halo-vehicule { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: radial-gradient(circle, rgba(92,203,255,.45), rgba(92,203,255,0) 70%); transform: scale(var(--echelle)); animation: halo-vehicule 2.4s ease-in-out infinite; pointer-events: none; }
.vehicule-carte.avion .halo-vehicule { background: radial-gradient(circle, rgba(251,191,36,.45), rgba(251,191,36,0) 70%); }
@keyframes halo-vehicule { 0%, 100% { opacity: .5; transform: scale(calc(var(--echelle) * .9)); } 50% { opacity: 1; transform: scale(calc(var(--echelle) * 1.25)); } }
.vehicule-carte.choisi .corps-vehicule { transform: scale(calc(var(--echelle) * 1.45)); filter: drop-shadow(0 0 8px rgba(92,203,255,.9)); }
.entrepot-carte.cache { opacity: 0; pointer-events: none; }
.entrepot-carte { transition: opacity .4s; }
@media (max-width: 760px) {
  .panneau-trafic { top: auto; left: .5rem; right: .5rem; bottom: .5rem; width: auto; max-height: 52%; border-radius: 22px 22px 18px 18px; }
  .film-trafic { bottom: auto; top: 3.6rem; }
  .commandes-carte .bouton { min-height: 34px; padding: .25rem .65rem; font-size: .8rem; }
}
.encadre-probleme { padding: .9rem 1rem; border-radius: 18px; background: rgba(127, 29, 29, .32); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }
.encadre-probleme h3 { color: #fecaca; display: flex; gap: .5rem; align-items: center; }
.encadre-probleme h3 .icone { color: var(--critique); }
/* 1.0.10 : camions vus du dessus qui tournent avec la route ; entrepôts petits de loin */
.vehicule-carte.camion .camion-svg { transform: rotate(var(--cap, 0rad)); }
.camion-svg .phares { animation: phares 1.8s ease-in-out infinite; }
@keyframes phares { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.entrepot-carte svg { transform: scale(var(--echelle, 1)); transform-origin: 50% 100%; }
.entrepot-carte .nom-entrepot { transform: scale(clamp(.75, calc(var(--echelle, 1) * 1.2), 1)); }
/* Camions : de près, le volume 3D dans la carte remplace l'icône (il s'incline avec la carte) */
.vehicule-carte.camion.en-3d .corps-vehicule { opacity: 0; }
.vehicule-carte.camion.en-3d .halo-vehicule { opacity: .55; }
/* Cockpit : aperçu de la carte du trafic (un appui ouvre « Le trafic ») */
.apercu-trafic { display: grid; gap: .7rem; width: 100%; text-align: left; font: inherit; color: var(--encre); border: 0; cursor: pointer; }
/* La carte prend toute la place ; sur PC les chiffres sont à côté, sur téléphone en dessous (jamais de bandes vides) */
.apercu-trafic .corps-apercu { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; gap: .8rem; align-items: stretch; }
.apercu-trafic .image-apercu { position: relative; height: 290px; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--bord-verre); background: #050a1a; line-height: 0; }
.apercu-trafic .dessin-apercu, .apercu-trafic .dessin-apercu svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.apercu-trafic .trajet-vif { animation: trajet-vif 1.6s linear infinite; }
@keyframes trajet-vif { to { stroke-dashoffset: -12; } } /* les pointillés des colis en route avancent */
.apercu-trafic .vide-apercu { display: grid; place-items: center; height: 100%; line-height: 1.4; color: var(--encre-3); }
.apercu-trafic:hover .image-apercu { box-shadow: inset 0 0 0 1px var(--accent); }
.apercu-trafic .chiffres-apercu { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: .5rem; }
.apercu-trafic .chiffres-apercu li { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.apercu-trafic .chiffres-apercu i { width: .55rem; height: .55rem; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.apercu-trafic .chiffres-apercu b { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.apercu-trafic .chiffres-apercu span { font-size: .82rem; color: var(--encre-2); line-height: 1.2; }
@media (max-width: 760px) {
  .apercu-trafic .corps-apercu { grid-template-columns: 1fr; }
  .apercu-trafic .image-apercu { height: auto; aspect-ratio: 16 / 10; }
  .apercu-trafic .chiffres-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .apercu-trafic .chiffres-apercu li { padding: .45rem .65rem; }
  .apercu-trafic .chiffres-apercu b { font-size: 1.1rem; }
}
/* Cockpit sur PC (demande de Lukas, 26/10/2026) : toute la largeur de l'écran, trois colonnes, et tout tient dans la
   fenêtre (pas de défilement) : boutique et « À faire » à gauche, la carte du trafic en grand au milieu, le briefing et
   « Demander à Grisbi » à droite. Les cartes qui ont trop de contenu défilent à l'intérieur, sans barre visible. */
@media (min-width: 1280px) and (min-height: 640px) {
  .contenu:has(> .cockpit) { max-width: none; padding: .7rem 22px .9rem; }
  .cockpit { height: calc(100vh - 6.6rem); display: flex; flex-direction: column; gap: .7rem; }
  .cockpit .heros-accueil { padding: 0; gap: .9rem; flex: none; }
  .cockpit .heros-accueil .grisbi { width: 58px; height: 58px; }
  .cockpit .heros-accueil h1 { font-size: 1.5rem; margin: 0; }
  .cockpit > .bandeau { flex: none; }
  .grille-cockpit { flex: 1 1 auto; min-height: 0; gap: 1rem;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.45fr) minmax(320px, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "briefing boutique trafic" "briefing afaire assistant"; }
  .colonne-cockpit { display: contents; }
  .grille-cockpit > .colonne-cockpit > * { min-height: 0; }
  .grille-cockpit .boutique { grid-area: boutique; }
  .grille-cockpit .a-faire { grid-area: afaire; overflow-y: auto; }
  .grille-cockpit .apercu-trafic { grid-area: trafic; }
  .grille-cockpit .briefing { grid-area: briefing; overflow-y: auto; }
  .grille-cockpit .assistant { grid-area: assistant; overflow: hidden; }
  .grille-cockpit .assistant .fil-assistant { max-height: none; flex: 1 1 auto; min-height: 0; }
  /* La carte, en aperçu (ce n'est pas l'essentiel) : petite, en haut à droite */
  .grille-cockpit .apercu-trafic .corps-apercu { flex: none; grid-template-rows: auto auto; }
  .grille-cockpit .apercu-trafic .image-apercu { min-height: 0; height: clamp(150px, 22vh, 230px); flex: none; }
  .grille-cockpit .apercu-trafic .chiffres-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-cockpit .apercu-trafic .chiffres-apercu li { grid-template-columns: auto auto 1fr; grid-template-areas: "pastille nombre texte"; padding: .4rem .6rem; }
  .grille-cockpit .apercu-trafic .chiffres-apercu b { font-size: 1.05rem; }
  .grille-cockpit .apercu-trafic .chiffres-apercu span { font-size: .76rem; }
  .grille-cockpit .boutique .heros { font-size: clamp(3rem, 4.4vw, 4.4rem); }
}
@media (min-width: 1280px) and (min-height: 640px) {
  .cadre:has(.cockpit) .barre-haut { width: calc(100% - 44px); }
  .cockpit .heros-accueil .grisbi { width: 58px !important; height: 58px !important; }
  html:has(.cockpit), body:has(.cockpit) { overflow: hidden; }
}
/* « Dernières ventes » sous « À faire » : seulement sur le Cockpit PC, pour remplir la colonne avec du concret */
.dernieres-cockpit { display: none; }
@media (min-width: 1280px) and (min-height: 640px) {
  .grille-cockpit .a-faire { display: flex; flex-direction: column; }
  .dernieres-cockpit { display: grid; gap: .1rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--trait); min-height: 0; overflow: hidden; align-content: start; }
  .dernieres-cockpit h3 { margin: 0 0 .3rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
  .dernieres-cockpit a { display: grid; grid-template-columns: minmax(0, 1fr) auto 4.2rem; gap: .7rem; align-items: center; padding: .42rem .3rem; border-radius: 10px; color: var(--encre); font-size: .9rem; }
  .dernieres-cockpit a:hover { background: var(--surface-2); }
  .dernieres-cockpit b { text-align: right; color: #f6c453; }
  .cockpit { height: calc(100vh - 7rem); }
  .grille-cockpit .assistant .suggestions { margin-top: auto; overflow: hidden; min-height: 0; }
  .grille-cockpit .assistant .fil-assistant + .saisie-assistant, .grille-cockpit .assistant .suggestions + .saisie-assistant { margin-top: 0; flex: none; }
}
@media (min-width: 1280px) and (min-height: 640px) {
  .grille-cockpit .briefing { display: flex; flex-direction: column; gap: .8rem; }
  .grille-cockpit .briefing > .bouton { margin-top: auto; flex: none; }
  .grille-cockpit .briefing .lignes-briefing { display: grid; gap: .7rem; }
}
/* Le trafic, version plein écran (1.0.10) : la carte prend toute la place ; tout le reste est posé dessus, en verre */
.contenu:has(> .page-trafic) { max-width: none; padding: .7rem 22px .9rem; }
.cadre:has(.page-trafic) .barre-haut { width: calc(100% - 44px); }
.page-trafic .cadre-globe { height: calc(100vh - 6.6rem); min-height: 420px; border-radius: 26px; }
.page-trafic .toile-globe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.haut-trafic { position: absolute; z-index: 4; top: .8rem; left: .8rem; right: .8rem; display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.haut-trafic > * { pointer-events: auto; }
.verre-carte, .titre-trafic, .filtres-trafic, .legende-globe .corps-legende, .commandes-carte .bouton { background: rgba(10, 18, 40, .74); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 8px 26px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--bord-verre); }
.titre-trafic { display: flex; align-items: center; gap: .9rem 1.2rem; flex-wrap: wrap; padding: .55rem 1rem; border-radius: 18px; min-width: 0; max-width: 60%; }
.titre-trafic h1 { margin: 0; font-size: 1.25rem; }
.page-trafic .chiffres-trafic { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .82rem; color: var(--encre-2); }
.page-trafic .chiffres-trafic span { display: inline; }
.page-trafic .chiffres-trafic b { font-size: 1rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.page-trafic .commandes-carte { position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; max-width: none; }
.page-trafic .commandes-carte .bouton { position: relative; }
.page-trafic .commandes-carte .bouton.actif { box-shadow: inset 0 0 0 1px var(--accent), 0 8px 26px rgba(0, 0, 0, .3); }
.page-trafic .commandes-carte .pastille { position: absolute; top: -5px; right: -5px; font-style: normal; }
.page-trafic .filtres-trafic { position: absolute; z-index: 5; top: 4.2rem; right: .8rem; width: min(440px, calc(100% - 1.6rem)); flex-direction: column; align-items: stretch; gap: .7rem; padding: .9rem; border-radius: 18px; }
.page-trafic .legende-globe { position: absolute; z-index: 4; left: .8rem; bottom: .8rem; right: auto; display: grid; gap: .5rem; justify-items: start; max-width: min(380px, calc(100% - 1.6rem)); pointer-events: auto; }
.page-trafic .legende-globe .corps-legende { display: grid; gap: .35rem; padding: .8rem .9rem; border-radius: 16px; font-size: .8rem; color: var(--encre-2); }
.page-trafic .legende-globe .corps-legende p { margin: .3rem 0 0; line-height: 1.4; }
.page-trafic .legende-globe .bouton { order: 2; }
.page-trafic .maplibregl-ctrl-bottom-right { bottom: .2rem; right: .2rem; }
.page-trafic .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(8, 14, 30, .6) !important; color: rgba(220, 230, 255, .6); }
.page-trafic .maplibregl-ctrl-attrib.maplibregl-compact-show { background: rgba(8, 14, 30, .85) !important; }
.page-trafic .maplibregl-ctrl-attrib-button { filter: invert(1) opacity(.6); }
@media (max-width: 860px), (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .contenu:has(> .page-trafic) { padding: .2rem 10px 0; }
  .page-trafic .cadre-globe { height: calc(100dvh - 9.4rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 360px; border-radius: 22px; }
  .haut-trafic { flex-direction: column; align-items: stretch; top: .6rem; left: .6rem; right: .6rem; }
  .titre-trafic { max-width: none; padding: .5rem .8rem; gap: .2rem .9rem; }
  .titre-trafic h1 { font-size: 1.05rem; }
  .page-trafic .chiffres-trafic { font-size: .75rem; gap: .1rem .7rem; }
  .page-trafic .chiffres-trafic b { font-size: .88rem; }
  .page-trafic .commandes-carte { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-top: 4px; }
  .page-trafic .commandes-carte .bouton { flex: none; min-height: 34px; padding: .25rem .7rem; font-size: .8rem; }
  .page-trafic .filtres-trafic { top: 7.6rem; left: .6rem; right: .6rem; width: auto; }
  .page-trafic .legende-globe { left: .6rem; bottom: .6rem; }
  .page-trafic .film-trafic { top: auto; bottom: 3.4rem; }
}
@media (max-width: 860px) {
  .page-trafic .commandes-carte .bouton:nth-child(-n+3) span { display: none; }
  .page-trafic .commandes-carte .bouton:nth-child(-n+3) { width: 38px; padding: 0; justify-content: center; }
}
/* Soldes Claude et ChatGPT (Lukas, sur PC seulement) */
.duo-soldes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.solde-ia { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; color: var(--encre); }
.solde-ia:hover { box-shadow: var(--ombre), inset 0 0 0 1px var(--accent); }
@media (max-width: 860px), (pointer: coarse) { .soldes-ia { display: none; } }
/* « Plus » sur PC : deux colonnes équilibrées (pas une longue liste au milieu de l'écran) */
@media (min-width: 1100px) and (pointer: fine) {
  .reglages { display: block; columns: 2; column-gap: 1.2rem; }
  .reglages > .entete-page, .reglages > p { column-span: all; }
  .reglages > section { break-inside: avoid; margin-bottom: 1rem; display: grid; gap: .4rem; }
  .reglages .duo-soldes { grid-template-columns: 1fr; }
}
/* Cockpit PC, version 3 (Lukas, 26/10/2026) : le briefing (court) et « À faire » à gauche, la boutique et Grisbi au
   centre, la carte sur toute la hauteur à droite. Chaque bloc a la place qu'il mérite. */
@media (min-width: 1280px) and (min-height: 640px) {
  .grille-cockpit { grid-template-columns: minmax(330px, 1fr) minmax(0, 1.2fr) minmax(0, 1.25fr);
    grid-template-areas: "briefing boutique trafic" "afaire assistant trafic"; }
  .grille-cockpit .briefing { overflow: hidden; }
  .grille-cockpit .briefing .lignes-briefing { gap: .45rem; }
  .grille-cockpit .briefing > .bouton { margin-top: .2rem; }
  .grille-cockpit .apercu-trafic .corps-apercu { flex: 1 1 auto; grid-template-rows: minmax(0, 1fr) auto; }
  .grille-cockpit .apercu-trafic .image-apercu { height: auto; min-height: 0; flex: 1 1 auto; }
  .grille-cockpit .a-faire { min-height: 0; }
}
.page-trafic .legende-globe .bouton { background: rgba(10, 18, 40, .78); color: #eef3ff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 26px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--bord-verre); }
.page-trafic .titre-trafic, .page-trafic .commandes-carte .bouton:not(.principal) { color: #eef3ff; }
/* ---------------------------------------------------------------- Cockpit 1.0.10 (version finale de Lukas, 26/10/2026)
   La boutique en grand (avec ses chiffres), « À faire » et le briefing, la carte ; et tout en bas la barre
   « Demander à Grisbi », fine comme une IA : la conversation s'ouvre au-dessus seulement quand on pose une question. */
.comparaison { font-size: .85rem; font-weight: 600; }
.comparaison.hausse { color: #4ade80; } .comparaison.baisse { color: #fb923c; }
.stats-boutique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-top: .3rem; }
.stats-boutique > div { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.stats-boutique span { font-size: .74rem; color: var(--encre-3); }
.stats-boutique b { font-size: 1.05rem; }
.trente-jours { display: grid; gap: .4rem; margin-top: .3rem; }
.barres30 { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.barres30 span { flex: 1; min-height: 3px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, rgba(92, 203, 255, .85), rgba(92, 203, 255, .35)); transition: filter .15s; }
.barres30 span:hover { filter: brightness(1.4); }
.barres30 span.aujourdhui { background: linear-gradient(180deg, #f6c453, rgba(246, 196, 83, .45)); }
.boutique .dernieres-cockpit { display: grid; gap: .05rem; margin-top: .4rem; padding-top: .7rem; border-top: 1px solid var(--trait); }
.boutique .dernieres-cockpit > .petit { margin-bottom: .2rem; }
.boutique .dernieres-cockpit a { display: grid; grid-template-columns: minmax(0, 1fr) auto 4rem; gap: .7rem; align-items: center; padding: .36rem .3rem; border-radius: 10px; color: var(--encre); font-size: .9rem; }
.boutique .dernieres-cockpit a:hover { background: var(--surface-2); }
.boutique .dernieres-cockpit b { text-align: right; color: #f6c453; }
.assistant-barre { position: relative; z-index: 20; }
.assistant-barre .saisie-assistant { align-items: center; padding: .4rem .45rem .4rem .6rem; border-radius: 999px; background: linear-gradient(170deg, var(--verre-clair), transparent 50%), var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1px var(--bord-verre); }
.assistant-barre .saisie-assistant input { background: transparent; box-shadow: none; padding: .55rem .6rem; font-size: 1rem; }
.assistant-barre .saisie-assistant input:focus { outline: none; }
.assistant-barre:focus-within .saisie-assistant { box-shadow: var(--ombre), inset 0 1px 0 var(--reflet), inset 0 0 0 1.5px var(--accent); }
.conversation-flottante, .suggestions-flottantes { position: absolute; left: 0; right: 0; bottom: calc(100% + .6rem); }
.conversation-flottante { display: flex; flex-direction: column; gap: .6rem; max-height: min(62vh, 640px); padding: 1rem 1.1rem; border-radius: 24px; background: linear-gradient(170deg, var(--verre-clair), transparent 40%), var(--verre-fort); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--bord-verre); }
.conversation-flottante .fil-assistant { max-height: none; min-height: 0; flex: 1 1 auto; overflow-y: auto; }
.suggestions-flottantes { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.suggestions-flottantes .puce-suggestion { background: var(--verre-fort); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); }
@media (min-width: 1280px) and (min-height: 640px) {
  .cockpit { height: calc(100vh - 6.6rem); }
  .grille-cockpit { grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr) minmax(0, 1.05fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "boutique afaire trafic" "boutique briefing trafic"; }
  .grille-cockpit .boutique { overflow-y: auto; align-content: start; gap: .65rem; }
  .grille-cockpit .a-faire { overflow-y: auto; }
  .grille-cockpit .briefing { overflow-y: auto; }
  .assistant-barre { flex: none; width: min(860px, 100%); margin: 0 auto; }
  .dernieres-cockpit { margin-top: .4rem; }
}
@media (max-width: 1279px), (max-height: 639px) {
  .grille-cockpit .boutique { order: 1; } .grille-cockpit .a-faire { order: 2; } .grille-cockpit .apercu-trafic { order: 3; } .grille-cockpit .briefing { order: 4; }
}
@media (max-width: 1000px) {
  .assistant-barre { margin-top: .2rem; }
  .conversation-flottante { position: static; max-height: 70vh; margin-bottom: .6rem; }
  .suggestions-flottantes { position: static; margin-bottom: .5rem; justify-content: flex-start; }
  .stats-boutique { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Chiffre d'affaires et bénéfice côte à côte, en grand ; le bénéfice après URSSAF juste dessous */
.heros-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.heros-duo .heros { font-size: clamp(2.3rem, 3.6vw, 3.5rem); }
.heros-duo .heros.vert { color: #4ade80; text-shadow: 0 0 28px rgba(74, 222, 128, .35); }
:root[data-teinte="claire"] .heros-duo .heros.vert { color: #15803d; text-shadow: none; }
.apres-urssaf { font-size: .86rem; color: var(--encre-2); margin-top: .1rem; }
.apres-urssaf b { color: #86efac; font-size: 1rem; }
.stats-boutique { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stats-boutique b.or { color: #f6c453; }
@media (max-width: 1000px) { .stats-boutique { grid-template-columns: repeat(3, minmax(0, 1fr)); } .heros-duo .heros { font-size: clamp(1.9rem, 8.5vw, 2.6rem); } }
/* ---------------------------------------------------------------- Cockpit 1.0.10, version « appli » (Lukas, 26/10/2026)
   Centré et symétrique : au centre, sans cadre, Grisbi, le bonjour et les chiffres ; « Aujourd'hui » à gauche ;
   le trafic à droite ; la barre « Demander à Grisbi » en bas. */
.centre-cockpit { display: grid; gap: .9rem; align-content: start; text-align: center; min-width: 0; }
.accueil-centre { display: grid; justify-items: center; gap: .25rem; }
.accueil-centre h1 { margin: .2rem 0 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); letter-spacing: -.02em; }
.accueil-centre p { margin: 0; }
.centre-cockpit .boutique { display: grid; gap: .75rem; padding: 0; justify-items: stretch; }
.centre-cockpit .periodes { justify-self: center; width: min(460px, 100%); margin: .2rem 0; }
.centre-cockpit .heros-duo { text-align: center; }
.centre-cockpit .heros-duo .heros { font-size: clamp(2.6rem, 4.2vw, 4.2rem); }
.centre-cockpit .comparaison { text-align: center; }
.centre-cockpit .stats-boutique > div { background: rgba(8, 14, 32, .28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: center; }
.centre-cockpit .trente-jours { text-align: left; padding: .7rem .9rem .8rem; border-radius: 18px; background: rgba(8, 14, 32, .26); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.centre-cockpit .puces-colis { justify-content: center; }
.centre-cockpit .maj-boutique { text-align: center; }
:root:not([data-teinte="claire"]) .centre-cockpit h1, :root:not([data-teinte="claire"]) .centre-cockpit .heros, :root:not([data-teinte="claire"]) .centre-cockpit .muet, :root:not([data-teinte="claire"]) .centre-cockpit .apres-urssaf { text-shadow: 0 1px 16px rgba(2, 8, 28, .7); }
.aujourdhui { display: flex; flex-direction: column; gap: .3rem; }
.aujourdhui .briefing.integre { display: grid; gap: .6rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--trait); }
.aujourdhui .briefing.integre .entete-carte h2 { font-size: .78rem; }
@media (min-width: 1280px) and (min-height: 640px) {
  .cockpit { height: calc(100vh - 6.6rem); gap: .8rem; }
  .grille-cockpit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "aujourdhui centre trafic"; align-items: stretch; }
  /* Le centre tient toujours dans l'écran (Lukas, 27/10/2026 : jamais de défilement, quelle que soit la fête) : le graphique
     des 30 jours prend la place qui reste. Pas de « overflow » ici : il coupait l'ombre de la carte en un carré gris. */
  .grille-cockpit > .centre-cockpit { grid-area: centre; display: flex; flex-direction: column; min-height: 0; padding: 0 .4rem; }
  .grille-cockpit > .centre-cockpit > * { flex: none; }
  .grille-cockpit > .centre-cockpit > .boutique { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .centre-cockpit .boutique > * { flex: none; }
  .centre-cockpit .boutique > .periodes { align-self: center; }
  .centre-cockpit .boutique > .trente-jours { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .centre-cockpit .trente-jours .barres30 { flex: 1 1 auto; height: auto; min-height: 0; max-height: 110px; }
  .grille-cockpit > .aujourdhui { grid-area: aujourdhui; overflow-y: auto; }
  .grille-cockpit > .trafic-aile { grid-area: trafic; display: flex; min-height: 0; }
  .grille-cockpit > .trafic-aile .apercu-trafic { flex: 1 1 auto; display: flex; flex-direction: column; }
  .grille-cockpit > .trafic-aile .corps-apercu { flex: 1 1 auto; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .grille-cockpit > .trafic-aile .image-apercu { height: auto; min-height: 0; }
  .grille-cockpit > .trafic-aile .chiffres-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aujourdhui .briefing.integre > .bouton { margin-top: auto; }
}
/* Écran de PC peu haut : les détails secondaires se rangent pour que le centre tienne toujours (pas de défilement) */
@media (min-width: 1280px) and (min-height: 640px) and (max-height: 860px) {
  .centre-cockpit .boutique > .exploits, .centre-cockpit .boutique > .maj-boutique, .centre-cockpit .boutique > .comparaison { display: none; }
  .centre-cockpit .heros-duo .heros { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  .centre-cockpit .boutique.carte { padding: .9rem 1.2rem 1rem; gap: .6rem; }
  .centre-cockpit { gap: .6rem; }
}
@media (min-width: 1280px) and (min-height: 640px) and (max-height: 740px) {
  .centre-cockpit .boutique > .trente-jours { display: none; }
  .accueil-centre > p.muet { display: none; }
}
@media (max-width: 1279px), (max-height: 639px) {
  .grille-cockpit { grid-template-columns: minmax(0, 1fr); }
  .grille-cockpit > .centre-cockpit { order: 1; } .grille-cockpit > .aujourdhui { order: 2; } .grille-cockpit > .trafic-aile { order: 3; }
}
@media (min-width: 861px) and (max-width: 1279px) {
  .grille-cockpit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grille-cockpit > .centre-cockpit { grid-column: 1 / -1; }
}
.grille-cockpit .centre-cockpit .boutique { grid-area: auto; overflow: visible; }
.grille-cockpit .aujourdhui .briefing.integre { grid-area: auto; overflow: visible; background: none; box-shadow: none; padding-left: 0; padding-right: 0; padding-bottom: 0; border-radius: 0; }
/* Aperçu du trafic : les pastilles sont des liens vers Commandes (avec le bon filtre) */
.apercu-trafic a.entete-carte { color: inherit; }
.apercu-trafic .image-apercu { cursor: pointer; }
.apercu-trafic .chiffres-apercu li { display: block; padding: 0; }
.apercu-trafic .chiffres-apercu li a { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .5rem; padding: .45rem .7rem; color: inherit; border-radius: 14px; }
.apercu-trafic .chiffres-apercu li a:hover { background: rgba(255, 255, 255, .07); }
/* La boutique au centre : une seule bulle de verre, claire dedans (des traits fins, pas de petites cases) */
.centre-cockpit .boutique.carte { padding: 1.2rem 1.4rem 1.3rem; gap: .8rem; }
.centre-cockpit .stats-boutique { gap: 0; margin-top: .2rem; padding: .7rem 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.centre-cockpit .stats-boutique > div { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: .1rem .4rem; }
.centre-cockpit .stats-boutique > div + div { border-left: 1px solid var(--trait); }
.centre-cockpit .stats-boutique b { font-size: 1.15rem; }
.centre-cockpit .trente-jours { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
.centre-cockpit .accueil-centre { margin-bottom: .2rem; }
@media (max-width: 1000px) {
  .centre-cockpit .stats-boutique { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .6rem; }
  .centre-cockpit .stats-boutique > div:nth-child(3n + 1) { border-left: 0; }
}
/* PC (Lukas, 26/10/2026) : toutes les pages utilisent la largeur de l'écran (plus de grandes bandes vides à gauche et à droite) */
@media (min-width: 1280px) {
  .contenu { max-width: 1680px; padding-left: 28px; padding-right: 28px; }
  .barre-haut { width: min(1680px, calc(100% - 44px)); }
}
/* PC large : chaque page remplit la largeur avec une disposition adaptée */
.grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
@media (min-width: 1280px) {
  /* Les ventes restent sur une seule colonne, dans l'ordre chronologique (Lukas, 26/10/2026) */
  .pile:has(> section > .groupe-reglages), fieldset.sans-cadre { display: block; columns: 2; column-gap: 1.4rem; }
  .pile:has(> section > .groupe-reglages) > *, fieldset.sans-cadre > section { break-inside: avoid; margin-bottom: 1.1rem; }
  .pile:has(> section > .groupe-reglages) > p { column-span: all; }
}

/* Ajouter à la warehouse (refait le 26/10/2026 : textes qui sortaient des boutons, lignes mal agencées) */
.etapes-ajout { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.etapes-ajout li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9rem; color: var(--encre-2); line-height: 1.4; }
.etapes-ajout .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--encre); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.bloc-numero { display: grid; gap: .4rem; padding: .9rem; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.titre-numero { font-size: .9rem; font-weight: 600; color: var(--encre); }
.bloc-numero input { width: 100%; min-width: 0; box-sizing: border-box; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.aide-numero { margin: 0; }
.recues-mail { display: grid; gap: .35rem; margin-top: .2rem; }
.puces-mail { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce-mail { display: inline-grid; justify-items: start; gap: 0; padding: .35rem .75rem; border-radius: 12px; border: 0; cursor: pointer; font: inherit; color: var(--encre-2); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bord-verre); line-height: 1.25; }
.puce-mail b { font-size: .85rem; color: var(--encre); font-variant-numeric: tabular-nums; }
.puce-mail span { font-size: .72rem; color: var(--encre-3); }
.puce-mail.active { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255, 159, 67, .1); }
.liste-ajout { display: grid; gap: .6rem; }
.article-ajout { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "photo texte taille" "bas bas bas"; gap: .55rem .75rem; align-items: center; padding: .75rem; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.article-ajout > img, .article-ajout > .vignette { grid-area: photo; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; background: var(--surface-2); }
.texte-ajout { grid-area: texte; display: grid; gap: .1rem; min-width: 0; }
.texte-ajout b { font-size: .92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.taille-ajout { grid-area: taille; display: grid; justify-items: center; gap: .15rem; font-size: .7rem; color: var(--encre-3); }
.taille-ajout input { width: 3.4rem; text-align: center; padding: .35rem .2rem; border-radius: 10px; font-weight: 600; }
.bas-ajout { grid-area: bas; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .55rem; border-top: 1px solid var(--bord-verre); }
.options-ajout { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.option-ajout { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem .25rem .45rem; border-radius: 999px; font-size: .82rem; color: var(--encre-2); background: var(--surface-2); cursor: pointer; }
.option-ajout input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.option-ajout em { font-style: normal; color: var(--encre-3); font-size: .75rem; }
.boutons-ajout { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }
.actions-ajout { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.actions-ajout .bouton.grand { margin-top: 0; min-width: 0; padding-left: .8rem; padding-right: .8rem; }
@media (max-width: 560px) { .actions-ajout { grid-template-columns: 1fr; } .actions-ajout .principal { order: -1; } }

/* Téléphones (Lukas, 26/10/2026 : trop zoomé sur le téléphone de Teresa, textes qui sortent des cartes).
   Un peu plus petit partout sur téléphone, encore un peu plus sur les petits écrans ; rien ne doit dépasser. */
@media (max-width: 480px) {
  html { font-size: 15px; }
  body { font-size: 14px; }
  .contenu { padding-left: 12px; padding-right: 12px; }
  .heros { white-space: nowrap; }
  .heros-duo { gap: .6rem; }
  .heros-duo .heros { font-size: clamp(1.6rem, 9vw, 2.4rem); }
  .apres-urssaf { font-size: .8rem; }
  .commande { gap: .7rem; padding: .75rem; }
  .commande .actions > * { max-width: 100%; }
  .commande .actions .bouton.petit, .pastille-statut { white-space: normal; text-align: left; line-height: 1.25; }
  .groupe-temu { padding: .55rem; }
  .tete-groupe-temu { flex-wrap: wrap; }
  .tete-groupe-temu b { overflow-wrap: anywhere; }
  .onglets button { padding: .4rem .7rem; font-size: .84rem; }
  .boutique .onglets { display: flex; width: 100%; }
  .boutique .onglets button { flex: 1 1 0; min-width: 0; padding-left: .3rem; padding-right: .3rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 370px) {
  html { font-size: 14px; }
  body { font-size: 13.5px; }
  .commande { grid-template-columns: 52px minmax(0, 1fr); }
  .commande > img, .commande > .vignette { width: 52px; height: 52px; }
}

/* Un colis = un numéro de suivi : le champ du suivi en bas, pour tous ses articles d'un coup */
.suivi-colis { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.suivi-colis input { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.numero-article { margin: 0 0 .25rem .4rem; }
.grille-boites { grid-template-columns: minmax(0, 1fr) !important; }

/* Univers biologiste marine (Lukas, 26/10/2026 : « une vraie ambiance à 100 % marine » pour Teresa) : de petites touches
   marines dans les titres, en plus des décors de l'océan et de Grisbi plongeur */
:root[data-univers="ocean"] .contenu > .pile > h1:first-child::after, :root[data-univers="ocean"] .entete-page h1::after { content: " 🐠"; }
:root[data-univers="ocean"] .accueil-centre h1::after { content: " 🐬"; }
:root[data-univers="ocean"] h2.titre-groupe::before { content: "🐚 "; }
:root[data-univers="ocean"] .carte > h2:first-child::before { content: "🌊 "; }

/* Carte « La boutique » 1.0.13 (Lukas, 26/10/2026) : trois chiffres alignés et centrés, la série et le record en petites
   pastilles centrées dessous, le bénéfice après URSSAF en une seule ligne */
.stats-boutique, .centre-cockpit .stats-boutique { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; }
.centre-cockpit .stats-boutique > div, .stats-boutique > div { text-align: center; justify-items: center; }
.centre-cockpit .stats-boutique > div + div { border-left: 1px solid var(--trait); }
.centre-cockpit .stats-boutique b { font-size: 1.3rem; }
.exploits { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.exploits > span { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: 999px; font-size: .82rem; color: var(--encre-2); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.exploits b { color: var(--encre); }
.exploits svg { color: #f6c453; flex: none; }
.apres-urssaf { display: inline-block; margin-top: .3rem; padding: .18rem .6rem; border-radius: 999px; background: rgba(74, 222, 128, .1); white-space: nowrap; }
:root[data-teinte="claire"] .apres-urssaf b { color: #15803d; }
@media (max-width: 480px) {
  .centre-cockpit .stats-boutique b { font-size: 1.15rem; }
  .exploits > span { font-size: .76rem; padding: .28rem .6rem; }
}

/* Carte d'une commande 1.0.13 (Lukas, 26/10/2026 : « pensée pour le téléphone ») : le prix et le bénéfice en haut à
   droite à côté du nom, la date sur sa ligne, les statuts ensemble, les boutons en grille régulière et centrés */
.commande, .commande.selectionnable { position: relative; grid-template-columns: 76px minmax(0, 1fr) auto; column-gap: .9rem; row-gap: .45rem;
  grid-template-areas: "photo texte montant" "photo meta meta" "photo statuts statuts" "photo actions actions"; }
.commande > img, .commande > .vignette { grid-area: photo; }
.commande > .texte { grid-area: texte; min-width: 0; }
.commande > .montant, .commande.selectionnable > .montant { grid-area: montant; grid-column: montant; grid-row: montant; display: grid; justify-items: end; gap: .1rem; margin: 0; text-align: right; white-space: nowrap; }
.commande > .montant b { font-size: 1.05rem; }
.commande > .meta { grid-area: meta; margin: 0; min-width: 0; }
.commande > .statuts { grid-area: statuts; display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.commande > .statuts:empty, .commande > .actions:empty { display: none; }
.commande > .actions { grid-area: actions; grid-column: actions; grid-row: actions; margin: 0; min-width: 0; } /* zone nommée (pas « auto » : il les rangeait sous la photo, 52 px de large sur téléphone) */
.commande .case { position: absolute; top: .5rem; left: .5rem; z-index: 2; margin: 0; padding: .15rem; }
.commande .case span { width: 24px; height: 24px; border-radius: 8px; background: rgba(8, 14, 30, .75); }
.commande .pastille-statut { max-width: 100%; white-space: normal; line-height: 1.25; }
@media (max-width: 640px) {
  .commande, .commande.selectionnable { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: .75rem; padding: .8rem;
    grid-template-areas: "photo texte montant" "meta meta meta" "statuts statuts statuts" "actions actions actions"; }
  .commande > img, .commande > .vignette { width: 60px; height: 60px; border-radius: 14px; }
  .commande > .meta { padding-top: .1rem; border-top: 1px solid var(--trait); padding-top: .5rem; }
  /* Les boutons : une grille régulière, chacun centré, jamais plus large que la carte */
  .commande > .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .45rem; }
  .commande > .actions > .bouton, .commande > .actions > button { width: 100%; justify-content: center; text-align: center; min-height: 38px; white-space: normal; }
}
@media (max-width: 360px) {
  .commande, .commande.selectionnable { grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas: "photo texte" "photo montant" "meta meta" "statuts statuts" "actions actions"; }
  .commande > img, .commande > .vignette { width: 52px; height: 52px; }
  .commande > .montant, .commande.selectionnable > .montant { display: flex; gap: .6rem; justify-content: flex-start; align-items: baseline; text-align: left; }
  .commande > .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .commande > .actions > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
}

/* Onglet Warehouse : rien ne dépasse de l'écran (la boîte prenait la largeur de son plus long texte) */
.boite-warehouse, .boite-articles { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.boite-tete { flex-wrap: wrap; min-width: 0; }
.boite-tete > .espace { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.boite-tete > .pastille-statut { margin-left: auto; }
.boite-article > div { min-width: 0; }
.boite-article .tronque { overflow-wrap: anywhere; }
.boite-article .raison-seul { color: var(--encre-3); font-size: .8rem; line-height: 1.3; }
@media (min-width: 900px) { .boite-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Téléphone : les onglets passent à la ligne au lieu de défiler en cachette (on ne voyait pas « Erreurs » ni « Historique ») */
@media (max-width: 600px) {
  .onglets:not(.periodes) { display: flex; flex-wrap: wrap; overflow: visible; border-radius: 20px; width: 100%; }
  .onglets:not(.periodes) button { flex: 1 1 auto; text-align: center; padding: .42rem .7rem; }
}
@media (max-width: 600px) { .ligne > .bouton, .ligne > button.bouton { max-width: 100%; white-space: normal; text-align: center; } }

/* ---------------------------------------------------------------- Onglet Warehouse 1.0.13 : des cartons (Lukas, 26/10/2026)
   Chaque commande est un carton : deux rabats ouverts au-dessus (fermés quand il est parti), une bande de scotch, une
   étiquette d'expédition (état, suivi, commande Temu) et les articles posés à l'intérieur. Centré, symétrique. */
.vue-warehouse { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr); }
.vue-warehouse > section { display: grid; gap: .9rem; }
.filtres-warehouse { justify-items: center; text-align: center; }
.filtres-warehouse .puces { justify-content: center; }
.filtres-warehouse .puce[disabled] { opacity: .4; cursor: default; }
.reglages-warehouse { gap: .7rem; flex-wrap: wrap; justify-content: center; }
.bascule-mode { margin: 0; }
.maj-warehouse { margin: 0; text-align: center; }
.titre-centre { display: flex; align-items: center; gap: .8rem; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-2); }
.titre-centre::before, .titre-centre::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--trait)); }
.titre-centre::after { background: linear-gradient(90deg, var(--trait), transparent); }
.grille-cartons { display: grid; gap: 2.2rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); align-items: start; padding-top: 1.2rem; }

.carton { --kraft: 196, 154, 104; position: relative; display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); padding: 1rem 1rem 1.05rem; border-radius: 10px 10px 22px 22px; min-width: 0;
  background: linear-gradient(180deg, rgba(var(--kraft), .16), rgba(var(--kraft), .07) 40%, rgba(var(--kraft), .05)), var(--verre);
  backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(var(--kraft), .32), 0 18px 40px -22px rgba(0, 0, 0, .55); }
/* Le scotch : une bande au milieu, du haut jusqu'à l'étiquette */
.carton::before { content: ""; position: absolute; left: 50%; top: 0; width: 46px; height: 2.6rem; transform: translateX(-50%); border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(var(--kraft), .38), rgba(255, 255, 255, .05)); opacity: .8; pointer-events: none; }
/* Les deux rabats : ouverts (penchés vers l'extérieur) tant que le colis n'est pas parti, refermés ensuite */
.carton-rabats { position: absolute; left: 0; right: 0; top: -1.15rem; height: 1.2rem; display: flex; gap: 4px; padding: 0 6px; pointer-events: none; perspective: 400px; }
.carton-rabats span { flex: 1; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, rgba(var(--kraft), .32), rgba(var(--kraft), .16)); box-shadow: inset 0 0 0 1px rgba(var(--kraft), .35); transform-origin: bottom center; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.carton.ouvert .carton-rabats span:first-child { transform: rotateX(38deg) skewX(-14deg); }
.carton.ouvert .carton-rabats span:last-child { transform: rotateX(38deg) skewX(14deg); }
.carton.ferme .carton-rabats { top: -.35rem; height: .4rem; }
.carton.ferme .carton-rabats span { border-radius: 4px 4px 0 0; }
.carton-tete { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: flex-start; justify-content: space-between; min-width: 0; position: relative; z-index: 1; }
.carton-titre { display: grid; gap: .15rem; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.carton-titre b { font-size: 1.05rem; }
/* L'étiquette d'expédition : un papier clair, légèrement penché */
.carton-etiquette { flex: 0 1 15rem; min-width: 0; display: grid; gap: .45rem; padding: .55rem .7rem .6rem; border-radius: 8px; transform: rotate(-1.2deg);
  background: rgba(250, 247, 240, .93); color: #26201a; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .45); }
.carton-etiquette dl { margin: 0; display: grid; gap: .2rem; font-size: .76rem; }
.carton-etiquette dl > div { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .4rem; }
.carton-etiquette dt { color: #7a6c5c; text-transform: uppercase; letter-spacing: .06em; font-size: .66rem; padding-top: .1rem; }
.carton-etiquette dd { margin: 0; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 600; overflow-wrap: anywhere; }
.carton-etiquette em { font-style: normal; color: #b4532a; font-family: inherit; }
.carton-etiquette .pastille-statut { justify-self: start; }
/* L'intérieur : un fond plus sombre, les articles posés en vignettes, centrés */
.carton-interieur { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); padding: .7rem; border-radius: 14px;
  background: rgba(6, 10, 24, .32); box-shadow: inset 0 6px 18px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(var(--kraft, 196, 154, 104), .18); min-width: 0; }
:root[data-teinte="claire"] .carton-interieur { background: rgba(120, 90, 50, .08); box-shadow: inset 0 4px 12px rgba(80, 50, 20, .12), inset 0 0 0 1px rgba(196, 154, 104, .3); }
.article-carton { display: grid; gap: .45rem; align-content: start; padding: .5rem; border-radius: 12px; background: var(--verre); box-shadow: inset 0 0 0 1px var(--bord-verre), 0 4px 10px -6px rgba(0, 0, 0, .4); min-width: 0; text-align: center; transition: transform .2s, opacity .2s; }
.article-carton.cliquable { cursor: pointer; }
.article-carton.cliquable:hover { transform: translateY(-2px); }
.article-carton.celui-ci { box-shadow: inset 0 0 0 2px #ffb347; }
.article-carton.hors-filtre { opacity: .32; }
.article-carton > img, .article-carton > .vignette { width: 100%; aspect-ratio: 1; height: auto; border-radius: 9px; object-fit: cover; background: var(--surface-2); display: grid; place-items: center; color: var(--encre-3); }
.texte-carton { display: grid; gap: .15rem; min-width: 0; }
.nom-carton { font-weight: 650; font-size: .86rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.numero-carton { overflow-wrap: anywhere; }
.pied-article-carton { display: grid; gap: .35rem; justify-items: center; }
.pied-article-carton .pastille-statut { font-size: .74rem; white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; }
.pied-article-carton .bouton { width: 100%; justify-content: center; white-space: normal; }
.carton-pied { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; }
.carton-pied .suivi-colis { flex: 1 1 18rem; }
.carton.carton-vert { --kraft: 140, 170, 120; }
.liste-articles-wh { background: none; box-shadow: none; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.article-avec-colis { display: grid; gap: .25rem; min-width: 0; text-align: center; }
.article-avec-colis > .petit { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .grille-cartons { gap: 2rem; }
  .carton { padding: .85rem .75rem .9rem; }
  .carton-etiquette { flex: 1 1 100%; transform: rotate(-.6deg); }
  .carton-interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .5rem; gap: .5rem; }
  .liste-articles-wh { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) { .carton-interieur, .liste-articles-wh { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .carton-rabats span, .article-carton { transition: none; } }
/* Le scotch seulement sur un carton refermé (parti) ; une étiquette claire avec des pastilles lisibles */
.carton.ouvert::before { display: none; }
.carton.ferme::before { top: -.35rem; height: 1.6rem; }
.carton-etiquette .pastille-statut { background: rgba(38, 32, 26, .08); color: #3b3127; box-shadow: none; font-weight: 700; }
.carton-etiquette .pastille-statut.ambre { background: #fde9b8; color: #7a4a00; }
.carton-etiquette .pastille-statut.rouge { background: #fdd5cf; color: #8f1d12; }
.carton-etiquette .pastille-statut.vert { background: #d5f2dc; color: #17602c; }
.carton-etiquette .pastille-statut.bleu { background: #d6e6fb; color: #16457e; }
.carton-etiquette .pastille-statut.violet { background: #e7dcfb; color: #4d2a8c; }
.reglages-warehouse label { display: inline-flex; align-items: center; gap: .4rem; }
.reglages-warehouse select { margin: 0; }
/* « Ajouter à la warehouse » en 3 étapes guidées */
.progres-ajout { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin: .2rem 0 .4rem; }
.progres-ajout span { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--encre-3); background: var(--surface-2); }
.progres-ajout span b { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--verre); font-size: .72rem; }
.progres-ajout span.actif { color: var(--encre); box-shadow: inset 0 0 0 1px var(--accent); }
.progres-ajout span.actif b { background: var(--accent); color: var(--accent-encre); }
.progres-ajout span.fait { color: var(--encre-2); }
.etape-ajout { display: grid; gap: .9rem; }
.consigne-ajout { margin: 0; text-align: center; color: var(--encre-2); }
.resume-envoi { margin: 0; text-align: center; overflow-wrap: anywhere; }
.alerte-ajout { display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; color: #fca5a5; }
.lien-discret { justify-self: center; background: none; border: 0; color: var(--encre-3); font: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: .3rem; }
.lien-discret:hover { color: var(--encre); }
@media (max-width: 600px) { .progres-ajout span { font-size: .72rem; padding: .25rem .55rem; } }
/* Très petit téléphone : la carte boutique ne dépasse plus (3 px de trop à 300 px de large) */
.accueil-centre, .centre-cockpit, .boutique { min-width: 0; }
.boutique { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 340px) {
  .heros-duo .heros, .centre-cockpit .heros-duo .heros { font-size: 1.7rem; }
  .boutique .onglets.periodes button { font-size: .78rem; }
  .apres-urssaf { white-space: normal; }
}
/* Fiche d'une vente : la carte d'identité Vinted / Temu / Warehouse */
.identite { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bloc-identite { display: grid; gap: .4rem; align-content: start; padding: .7rem .8rem; border-radius: 16px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); min-width: 0; }
.bloc-identite h3 { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.bloc-identite dl { margin: 0; display: grid; gap: .3rem; }
.ligne-identite { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; font-size: .84rem; }
.ligne-identite dt { color: var(--encre-3); }
.ligne-identite dd { margin: 0; overflow-wrap: anywhere; }
.ligne-identite em { font-style: normal; color: var(--encre-3); }
.ligne-identite code { font-size: .8rem; }
@media (max-width: 360px) { .ligne-identite { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------------------------------------------------------------- 1.0.14 : plus de trous, des lignes, une fiche qui seule défile */
html.fenetre-ouverte, html.fenetre-ouverte body { overflow: hidden !important; }
.fiche-fond, .fiche { overscroll-behavior: contain; }
/* Carte d'identité : les blocs remplissent la ligne (jamais un carré vide à côté du dernier) */
.identite { display: flex; flex-wrap: wrap; gap: .6rem; }
.bloc-identite { flex: 1 1 15rem; }
.ligne-identite dd .pastille-statut { max-width: 100%; white-space: normal; line-height: 1.25; }
/* Cartons rangés en colonnes « maçonnerie » : chaque carton prend sa hauteur, sans trou sous les petits */
.grille-cartons { display: block; columns: 2 34rem; column-gap: 1.4rem; padding-top: 1.2rem; }
.grille-cartons > .carton { break-inside: avoid; margin: 0 0 2.4rem; width: 100%; }
/* Les articles du carton en lignes : photo, nom et acheteur, statut et boutons */
.carton-interieur { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45rem; }
.article-carton { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: .7rem; text-align: left; padding: .5rem .6rem; }
.article-carton > img, .article-carton > .vignette { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 10px; }
.article-carton.cliquable:hover { transform: none; background: rgba(255, 255, 255, .07); }
.nom-carton { -webkit-line-clamp: 2; }
.pied-article-carton { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center; max-width: 20rem; }
.pied-article-carton .pastille-statut { text-align: left; }
.pied-article-carton .bouton { width: auto; }
.carton-etiquette { flex: 0 1 19rem; }
.carton-etiquette dl > div { grid-template-columns: 4.6rem minmax(0, 1fr); }
.carton-etiquette dd { font-family: inherit; font-weight: 600; }
.carton-etiquette dd.code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.liste-articles-wh { grid-template-columns: minmax(0, 1fr); }
.article-avec-colis { text-align: left; }
@media (max-width: 760px) {
  .article-carton { grid-template-columns: 48px minmax(0, 1fr); }
  .article-carton > img, .article-carton > .vignette { width: 48px; height: 48px; }
  .pied-article-carton { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}
@media (max-width: 600px) { .carton-interieur, .liste-articles-wh { grid-template-columns: minmax(0, 1fr); } }
/* Cartons : deux colonnes équilibrées par Grisbi (plus de colonnes automatiques : elles cassaient l'effet verre) */
.grille-cartons, .grille-cartons.une, .grille-cartons.deux { columns: auto; display: grid; gap: 2.4rem 1.4rem; padding-top: 1.2rem; align-items: start; }
.grille-cartons.une { grid-template-columns: minmax(0, 1fr); }
.grille-cartons.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colonne-cartons { display: grid; gap: 2.4rem; align-content: start; min-width: 0; }
.grille-cartons > .carton, .colonne-cartons > .carton { margin: 0; }
/* Ce dont Grisbi a besoin : une question à la fois, centrée */
.page-besoins { display: grid; gap: 1rem; max-width: 40rem; margin: 0 auto; width: 100%; }
.question-besoin { display: grid; gap: .8rem; justify-items: center; text-align: center; padding: 1.4rem 1.2rem; }
.question-besoin h2 { margin: 0; }
.progres-besoin { font-size: .78rem; color: var(--encre-3); letter-spacing: .06em; text-transform: uppercase; }
.icone-besoin { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.sujet-besoin { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .7rem; align-items: center; text-align: left; width: 100%; padding: .6rem; border-radius: 14px; background: var(--surface-2); }
.sujet-besoin img, .sujet-besoin .vignette { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; display: grid; place-items: center; }
.sujet-besoin b { overflow-wrap: anywhere; }
.texte-besoin { margin: 0; color: var(--encre-2); line-height: 1.45; }
.champ-besoin { width: 100%; font-size: 1rem; text-align: center; }
.actions-besoin { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
/* Carte d'identité : la pastille de statut prend toute la largeur du bloc (une ligne, jamais trois) */
.ligne-identite { grid-template-columns: 5.8rem minmax(0, 1fr); }
.ligne-identite.large { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
.ligne-identite.large dd .pastille-statut { white-space: normal; max-width: 100%; }
.bloc-identite { flex: 1 1 17rem; }
/* Le statut à côté de son nom, sur une ligne (comme le prix) : pas de saut de ligne pour rien */
.ligne-identite { align-items: center; }
.ligne-identite dd .pastille-statut { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .ligne-identite dd .pastille-statut { white-space: normal; } }
/* Anniversaire : la petite phrase sous le bonjour du Cockpit */
.anniv-cockpit { justify-self: center; margin: .2rem auto 0; padding: .3rem .9rem; border-radius: 999px; font-weight: 650; color: var(--accent); background: rgba(8, 14, 32, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: fit-content; max-width: 100%; }
.lien-temu { gap: .5rem; flex-wrap: wrap; }
.lien-temu input { flex: 1 1 16rem; min-width: 0; }
/* 1.0.18 : Nouvelle annonce automatique de A à Z (taille voulue, case, annonces envoyées) */
.progression.cachee { visibility: hidden; }
.taille-voulue { display: grid; gap: .45rem; margin-top: 1rem; text-align: left; }
.taille-voulue p { margin: 0; }
.ligne-tailles { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.puce-taille { min-width: 3rem; min-height: 42px; padding: 0 .8rem; border: 0; border-radius: 14px; font: inherit; font-weight: 650; color: var(--encre); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); cursor: pointer; transition: background .15s, box-shadow .15s; }
.puce-taille.choisie { background: var(--accent); color: var(--accent-encre); box-shadow: none; }
.autre-taille { flex: 1 1 7rem; max-width: 10rem; min-height: 42px; min-width: 0; }
.option-auto { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem; padding: .8rem .9rem; border-radius: 18px; background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre); cursor: pointer; text-align: left; }
.option-auto input { width: 20px; height: 20px; margin: .1rem 0 0; flex: none; accent-color: var(--accent); }
.option-auto span { display: grid; gap: .15rem; min-width: 0; }
.option-auto em { font-style: normal; font-size: .82rem; color: var(--encre-3); }
.envoyes-auto { display: grid; gap: .2rem; margin-top: 1rem; text-align: left; }
.envoyes-auto a { display: flex; gap: .55rem; align-items: center; padding: .45rem .6rem; border-radius: 12px; color: var(--encre); background: var(--surface-2); min-width: 0; }
.envoyes-auto a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoyes-auto a svg { color: var(--ok, #3ecf8e); flex: none; }
.envoyes-auto em { font-style: normal; font-size: .78rem; color: var(--encre-3); }
.puce-taille:not(.choisie):focus, .puce-taille:not(.choisie):hover { background: var(--surface-2); color: var(--encre); }
/* Date limite d'expédition de chaque article d'un carton, en couleur selon l'urgence */
.pastille-statut.limite-article { display: inline-flex; align-items: center; gap: .35rem; width: fit-content; max-width: 100%; margin-top: .35rem; font-size: .8rem; white-space: normal; }
.limite-article svg { flex: none; }

/* Ajouter à la warehouse par achat Temu (1.0.19) : une carte par commande Temu (PO-…), chaque article rangé dans la sienne */
.commande-temu-ajout { display: grid; gap: .6rem; padding: .8rem; border-radius: 20px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.tete-commande-ajout { gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.tete-commande-ajout b { font-size: .98rem; }
.tete-commande-ajout .bouton { margin-left: auto; }
.ranger-ajout { grid-area: taille; display: grid; justify-items: end; gap: .15rem; font-size: .7rem; color: var(--encre-3); min-width: 0; }
.ranger-ajout select { max-width: 11rem; padding: .35rem .5rem; border-radius: 10px; font-size: .82rem; }
@media (max-width: 600px) { .ranger-ajout select { max-width: 8.5rem; } }


/* Guidage warehouse (1.0.20) : ce qui change dans Grisbi, et ce qui change (ou pas) vraiment à la warehouse */
.blocs-geste { display: grid; gap: .5rem; }
.bloc-geste { display: grid; gap: .2rem; padding: .7rem .9rem; border-radius: 14px; background: var(--surface-2); box-shadow: inset 3px 0 0 var(--encre-3), inset 0 0 0 1px var(--bord-verre); font-size: .92rem; }
.bloc-geste b { font-size: .86rem; }
.bloc-geste.vert { box-shadow: inset 3px 0 0 #4ade80, inset 0 0 0 1px var(--bord-verre); }
.bloc-geste.vert b { color: #4ade80; }
.bloc-geste.orange { box-shadow: inset 3px 0 0 #f5b544, inset 0 0 0 1px var(--bord-verre); }
.bloc-geste.orange b { color: #f5b544; }
.separees-carton { margin: 0 1rem .6rem; }
.separees-carton .bouton { justify-self: start; margin-top: .3rem; }

/* Le calcul du prix d'une vente (1.0.22) */
.calcul-prix .bloc-calcul { display: grid; gap: .25rem; padding: .7rem .9rem; margin-top: .55rem; border-radius: 14px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.calcul-prix h4 { margin: 0 0 .2rem; font-size: .88rem; }
.ligne-calcul { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; color: var(--encre-2); }
.ligne-calcul b { font-variant-numeric: tabular-nums; color: var(--encre); white-space: nowrap; }
.ligne-calcul.total { padding-top: .3rem; margin-top: .15rem; border-top: 1px solid var(--bord-verre); color: var(--encre); font-weight: 600; }
/* Commandes en espaces (Lukas, 27/10/2026) : À acheter · Achetées · À la warehouse · En route · À vérifier */
.tuile-etape.a-verifier .icone, .tuile-etape.a-verifier b { color: #ff7a7a; }
.tuile-etape.a-verifier { box-shadow: inset 0 0 0 1px rgba(255, 122, 122, .45); }
.explication-espace { margin: 0; flex: 1 1 22rem; min-width: 0; }
/* Les 3 étapes d'un article : Temu · Warehouse · Bordereau */
.etapes3 { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .35rem; font-size: .8rem; color: var(--encre-3); }
.etape3 { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.etape3 i { width: .62rem; height: .62rem; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .7; }
.etape3.fait { color: #4ade80; }
.etape3.neutre { color: #93c5fd; }
.etape3.neutre i { background: currentColor; opacity: .5; }
/* À vérifier */
.verifier .point-verifier { display: grid; gap: .5rem; border-left: 3px solid rgba(255, 122, 122, .7); }
.verifier .point-verifier p { margin: 0; }
.sujet-verifier { gap: .6rem; cursor: pointer; }
.sujet-verifier img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.articles-verifier { margin: 0; padding-left: 1.2rem; }
.actions-verifier { flex-wrap: wrap; gap: .5rem; }
.centre-texte { text-align: center; }
/* Sous-pages (À faire : pas commandées / commandées ; Warehouse : bordereau, attendus, arrivés, partis, livrés) */
.sous-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .2rem 0 .1rem; }
.sous-onglets button { font: inherit; font-size: .9rem; font-weight: 600; color: var(--encre-2); background: rgba(255, 255, 255, .05); border: 0; border-radius: 999px; padding: .45rem .95rem; cursor: pointer; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.sous-onglets button:hover { color: var(--encre); }
.sous-onglets button.actif { color: var(--encre); background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px var(--accent); }
.sous-onglets button.critique { color: #ff8a8a; }
.consigne-page { margin: 0; text-align: center; }
/* Fluidité (Lukas, 27/10/2026 : « ça rame, ça freeze ») : le flou « verre » se recalcule à CHAQUE image sur un fond qui
   ne s'arrête jamais. Il reste sur les grands blocs (barre du haut, tuiles, cadres de page) ; les dizaines de cartes et de
   boutons des listes ont un fond teinté, sans flou. */
.commande, .groupe-temu, .dans-colis, .carton, .article-carton, .point-verifier,
.liste-commandes .bouton, .commande .bouton, .groupe-temu .bouton, .carton .bouton, .point-verifier .bouton, .vue-warehouse .bouton,
.liste-commandes .pastille-statut, .carton .pastille-statut { backdrop-filter: none; -webkit-backdrop-filter: none; }
.commande { background: var(--surface); }
.carton { background: linear-gradient(180deg, rgba(var(--kraft), .16), rgba(var(--kraft), .07) 40%, rgba(var(--kraft), .05)), var(--surface); }

/* Téléphone (Lukas, 27/10/2026 : « tout est serré à gauche ») : dans un carton, chaque article prend toute la largeur ;
   son statut centré, puis ses boutons deux par deux, centrés */
@media (max-width: 640px) {
  .article-carton { grid-template-columns: 56px minmax(0, 1fr); }
  .article-carton .limite-article { justify-self: start; }
  .pied-article-carton { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; justify-items: stretch; }
  .pied-article-carton > .pastille-statut { grid-column: 1 / -1; justify-self: center; text-align: center; }
  .pied-article-carton .bouton { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .pied-article-carton > :last-child:nth-child(even) { grid-column: 1 / -1; }
  .carton-etiquette { flex: 1 1 100%; }
}

/* Barre de sélection : assez large pour ses deux boutons, qui passent à la ligne au besoin (Lukas, 28/10/2026 : le bouton dépassait) */
.barre-selection { width: min(980px, calc(100% - 32px)); flex-wrap: wrap; row-gap: .5rem; }
.barre-selection > span { flex: 1 1 8rem; min-width: 0; }
.barre-selection .bouton { white-space: normal; text-align: center; }
/* Parcours : les commandes regroupées, et l'état des captures */
.regroupement-ajout { margin: .3rem 0 .6rem; }
.regroupement-ajout .liste-ajout { margin-top: .4rem; }
.liste-captures-ajout { display: grid; gap: .4rem; margin-bottom: .7rem; }
.capture-ajout { gap: .7rem; padding: .55rem .8rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--bord-verre); }
.capture-ajout.faite { color: #4ade80; }
.capture-ajout.faite b { color: var(--encre); }
/* Centrée sans « transform » (son animation d'entrée l'écrasait : la barre partait à droite et sortait de l'écran) */
.barre-selection { left: 0; right: 0; margin-left: auto; margin-right: auto; transform: none; }

/* Cartons étroits sur grand écran (Lukas, 28/10/2026 : dans la fiche d'une vente, texte écrasé à gauche, bulle verte compressée) :
   la mise en page suit la largeur du CARTON, pas celle de l'écran */
.carton { container-type: inline-size; container-name: carton; }
@container carton (max-width: 680px) {
  .article-carton { grid-template-columns: 56px minmax(0, 1fr); }
  .article-carton .limite-article { justify-self: start; }
  .pied-article-carton { grid-column: 1 / -1; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; justify-items: stretch; }
  .pied-article-carton > .pastille-statut { grid-column: 1 / -1; justify-self: center; text-align: center; }
  .pied-article-carton .bouton { width: 100%; justify-content: center; text-align: center; white-space: normal; }
  .pied-article-carton > :last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* « Explique-moi » : texte de Claude, aéré */
.explication { display: grid; gap: .55rem; line-height: 1.5; }
.explication h3 { margin: .6rem 0 0; font-size: 1rem; }
.explication h3:first-child { margin-top: 0; }
.explication p { margin: 0; }
.explication .etape-explication { padding-left: .4rem; }

/* Fond d'écran du PC : aperçu de la carte et moments de la journée */
.apercu-fond { position: relative; padding: 0; overflow: hidden; aspect-ratio: 16 / 10; }
.apercu-fond iframe { width: 100%; height: 100%; border: 0; display: block; background: #05070d; }
.etiquette-moment { position: absolute; left: .7rem; top: .7rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .8rem; }
.moments-fond { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.moments-fond .bouton { width: auto; }
.curseur-heure input { width: 100%; }

/* Cartes du trafic : le texte ne déborde jamais (Lukas, 29/10/2026 : la pastille « en cours de préparation » sortait de la bulle) */
.carte-reponse { min-width: 0; max-width: 100%; }
.carte-reponse .corps .petit { overflow-wrap: anywhere; }
.carte-reponse .ligne-pastilles { min-width: 0; }
.carte-reponse .ligne-pastilles .pastille-statut { white-space: normal; max-width: 100%; text-align: left; line-height: 1.25; }
/* Une commande Temu en vol : UNE bulle, ses articles dedans, en retrait sous l'en-tête */
.groupe-temu-trafic { display: grid; gap: .35rem; padding: .35rem; border-radius: 18px; background: rgba(255, 184, 120, .07); box-shadow: inset 0 0 0 1px rgba(255, 184, 120, .28); }
.groupe-temu-trafic > .carte-reponse.temu { background: transparent; box-shadow: none; }
.articles-groupe-temu { display: grid; gap: .4rem; margin-left: 1.5rem; padding-left: .7rem; border-left: 2px solid rgba(255, 184, 120, .35); }
.articles-groupe-temu .carte-reponse { background: var(--surface); }

/* Le panneau d'un avion ou d'un camion commence SOUS les boutons France · Monde · Rejouer · Filtres (Lukas, 29/10/2026 : il les cachait) */
@media (min-width: 761px) { .panneau-trafic { top: 4.4rem; } }

/* ================================================================= Grisbi : budgets, comptes, opérations (01/11/2026)
   Même verre que Roger ; vert menthe pour ce qui va bien, ambre quand un budget est presque vide, rouge s'il est dépassé. */
.g-page { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.g-page > * { min-width: 0; }
.g-12 { grid-column: span 12; } .g-7 { grid-column: span 7; } .g-6 { grid-column: span 6; } .g-5 { grid-column: span 5; } .g-4 { grid-column: span 4; } .g-3 { grid-column: span 3; }
@media (max-width: 1100px) { .g-7, .g-5 { grid-column: span 12; } .g-4, .g-3 { grid-column: span 6; } }
@media (max-width: 760px) { .g-7, .g-6, .g-5, .g-4, .g-3 { grid-column: span 12; } }

.g-heros { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: .6rem .4rem; }
.g-heros .ligne-heros { display: flex; align-items: center; gap: 1rem; }
.g-heros h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.1rem); letter-spacing: -.01em; }
.g-heros .date { color: var(--encre-3); font-size: .9rem; margin: 0 0 .1rem; }
.g-heros .phrase { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--encre-2); }
.g-heros .phrase b { color: var(--accent); }
.g-puces { display: flex; flex-wrap: wrap; gap: .45rem; }
.g-puce { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .75rem; border-radius: 999px; font-size: .84rem; font-weight: 550; background: rgba(52, 211, 153, .14); color: var(--bon-texte); border: 0; font-family: inherit; }
.g-puce.ambre { background: rgba(251, 191, 36, .14); color: #fcd34d; }
.g-puce.gris { background: var(--surface-2); color: var(--encre-2); }
button.g-puce, a.g-puce { cursor: pointer; text-decoration: none; }
:root[data-teinte="claire"] .g-puce.ambre { color: #a16207; }

.g-carte-titre { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .7rem; }
.g-carte-titre h2 { margin: 0; font-size: 1.02rem; font-weight: 650; flex: 1; }
.g-carte-titre a, .g-carte-titre .muet { font-size: .86rem; }

.g-budgets { display: grid; gap: .85rem 1.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.g-budget { display: grid; gap: .35rem; color: inherit; text-decoration: none; }
.g-budget .haut { display: flex; align-items: baseline; gap: .5rem; font-size: .93rem; }
.g-budget .haut .nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-budget .haut .montants { color: var(--encre-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-budget .haut .montants b { color: var(--encre); }
.g-budget .sous { font-size: .8rem; color: var(--encre-3); }
.g-barre { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.g-barre > div { height: 100%; border-radius: 999px; background: var(--accent); transition: width .9s cubic-bezier(.2, .8, .2, 1); }
.g-barre.ambre > div { background: var(--attention); }
.g-barre.rouge > div { background: var(--critique); }
.g-barre.douce > div { background: color-mix(in srgb, var(--accent) 55%, transparent); }

.g-comptes { display: grid; gap: 0; }
.g-compte { display: flex; align-items: center; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid var(--trait); }
.g-compte:last-child { border-bottom: 0; }
.g-compte .nom { flex: 1; min-width: 0; }
.g-compte .nom b { display: block; font-size: .95rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-compte .nom span { font-size: .78rem; color: var(--encre-3); }
.g-compte .solde { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-total { display: flex; align-items: baseline; padding-top: .7rem; gap: .5rem; }
.g-total span { flex: 1; color: var(--encre-2); font-size: .92rem; }
.g-total b { font-size: 1.45rem; color: var(--accent); font-variant-numeric: tabular-nums; }

.g-ops { display: grid; }
.g-op { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--trait); }
.g-op:last-child { border-bottom: 0; }
.g-op .rond { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.g-op .texte { flex: 1; min-width: 0; }
.g-op .texte b { display: block; font-size: .93rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-op .texte span { font-size: .78rem; color: var(--encre-3); }
.g-op .montant { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-op .montant.plus { color: var(--bon-texte); }
.g-op .montant.interne { color: var(--encre-3); font-weight: 500; }
.g-cat { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: var(--accent-doux); color: var(--accent); border: 0; font-family: inherit; cursor: pointer; white-space: nowrap; }
.g-cat.a-classer { background: rgba(251, 191, 36, .16); color: #fcd34d; }
.g-cat.neutre { background: var(--surface-2); color: var(--encre-3); }
.g-jour { font-size: .78rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3); padding: .9rem 0 .2rem; }

.g-tuiles { display: grid; gap: .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .g-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-tuile { padding: 1rem 1.1rem; border-radius: var(--rayon-moyen); background: var(--verre); backdrop-filter: var(--flou); -webkit-backdrop-filter: var(--flou); box-shadow: inset 0 0 0 1px var(--bord-verre), var(--ombre); }
.g-tuile span { display: block; font-size: .8rem; color: var(--encre-2); }
.g-tuile b { display: block; font-size: clamp(1.15rem, 2.4vw, 1.55rem); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.g-tuile small { display: block; margin-top: .15rem; font-size: .76rem; color: var(--encre-3); }
.g-tuile.accent { background: var(--accent-doux); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.g-tuile.accent b { color: var(--accent); }

.g-fixe { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-size: .93rem; }
.g-fixe .point { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-2); flex: none; box-shadow: inset 0 0 0 1px var(--bord-verre); }
.g-fixe .point.paye { background: var(--bon); box-shadow: none; }
.g-fixe .nom { flex: 1; } .g-fixe .m { font-variant-numeric: tabular-nums; color: var(--encre-2); }

.g-mois { display: flex; align-items: center; gap: .4rem; }
.g-mois b { min-width: 9.5rem; text-align: center; text-transform: capitalize; }
.g-filtres { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; align-items: center; }
.g-choix-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: .45rem; }
.g-choix-cat button { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 13px; border: 0; background: var(--surface-2); color: var(--encre); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.g-choix-cat button.choisi { background: var(--accent-doux); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.g-choix-cat h3 { grid-column: 1 / -1; margin: .5rem 0 0; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.g-abo { display: flex; align-items: center; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.g-abo:last-child { border-bottom: 0; }
.g-abo .texte { flex: 1; min-width: 0; } .g-abo .texte b { display: block; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-abo .texte span { font-size: .78rem; color: var(--encre-3); }
.g-vide-banques { text-align: center; display: grid; gap: .8rem; justify-items: center; padding: 1.4rem 1rem; }
.g-op .sous-op { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .2rem; overflow: hidden; }
.g-op .sous-op .g-cat { flex: none; }
.g-ligne-bouton { display: block; width: 100%; padding: .35rem .45rem; margin: -.35rem -.45rem; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.g-ligne-bouton:hover { background: var(--surface-2); }
.grand-champ { font-size: 1.6rem; font-weight: 650; padding: .7rem .9rem; font-variant-numeric: tabular-nums; }
.g-pile-couleurs { display: flex; gap: 3px; height: 12px; margin-top: 1rem; border-radius: 999px; overflow: hidden; }
.g-pile-couleurs span { min-width: 3px; }
.g-categories { display: grid; gap: .2rem; }
.g-categorie { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .55rem .3rem; border-radius: 12px; color: inherit; text-decoration: none; }
.g-categorie:hover { background: var(--surface-2); }
.g-categorie .nom { display: flex; align-items: center; gap: .55rem; font-size: .93rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-couleur { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.g-categorie .barre { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.g-categorie .barre span { display: block; height: 100%; border-radius: 999px; }
.g-categorie .montant { text-align: right; font-variant-numeric: tabular-nums; }
.g-categorie .montant small { display: block; font-size: .74rem; color: var(--encre-3); }
@media (max-width: 600px) { .g-categorie { grid-template-columns: minmax(0, 1fr) auto; } .g-categorie .barre { grid-column: 1 / -1; grid-row: 2; } }
/* Accueil : l'essentiel (le reste à dépenser en grand, un seul conseil, les budgets du quotidien) */
.g-accueil { max-width: 980px; margin: 0 auto; width: 100%; }
.g-essentiel { display: grid; justify-items: center; text-align: center; gap: .35rem; padding: 1.2rem .5rem .6rem; }
.g-essentiel .ligne-heros { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.g-essentiel h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.etiquette-reste { margin: 0; color: var(--encre-2); font-size: 1rem; }
.grand-reste { margin: 0; font-size: clamp(2.6rem, 8vw, 4.2rem); font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05;
  background: linear-gradient(120deg, #5cf0b4, #60a5fa 60%, #a78bfa); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grand-reste.depasse { background: linear-gradient(120deg, #fb923c, #f87171); -webkit-background-clip: text; background-clip: text; }
.sous-reste { margin: 0; color: var(--encre-3); font-size: .9rem; }
.g-conseil { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; padding: .55rem 1rem; border-radius: 999px; background: var(--verre); box-shadow: inset 0 0 0 1px var(--bord-verre); color: var(--encre); text-decoration: none; font-size: .92rem; }
.g-conseil:hover { background: var(--verre-fort); }
.g-quotidien .g-budgets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.g-accueil .assistant-barre { margin-top: .4rem; }
.g-quotidien .g-budgets { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.g-budget .haut { flex-wrap: wrap; row-gap: .1rem; }
.g-budget .haut .nom { flex: 1 1 8rem; }