/* =====================================================================
   TonStock V4 — Système de design
   Toutes les couleurs viennent des variables générées par core/theme.php,
   donc un changement de thème se voit immédiatement, sans recompilation.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --c-primaire:#4f46e5; --c-primaire-rgb:79 70 229; --c-primaire-clair:#e0e7ff; --c-primaire-sombre:#3730a3;
  --c-secondaire:#0f172a; --c-accent:#f59e0b; --c-accent-rgb:245 158 11;
  --c-succes:#10b981; --c-succes-rgb:16 185 129; --c-danger:#ef4444; --c-danger-rgb:239 68 68;
  --c-fond:#f1f5f9; --c-surface:#fff; --c-surface-2:#f8fafc;
  --c-texte:#0f172a; --c-texte-doux:#64748b; --c-bordure:#e2e8f0;
  --police:"Inter",system-ui,sans-serif; --taille:15px; --rayon:14px; --rayon-sm:8px;
  --espacement:.8rem; --ombre:0 1px 2px rgb(15 23 42 / .04), 0 8px 24px rgb(15 23 42 / .06);
  --ombre-forte:0 12px 40px rgb(15 23 42 / .14);
  --largeur-menu:264px;
}

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--police); font-size:var(--taille); line-height:1.55;
  color:var(--c-texte); background:var(--c-fond);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; }
a { color:var(--c-primaire); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { margin:0 0 .5rem; line-height:1.25; font-weight:700; letter-spacing:-.015em; }
h1 { font-size:1.55rem; } h2 { font-size:1.2rem; } h3 { font-size:1.03rem; } h4 { font-size:.94rem; }
p { margin:0 0 .7rem; }
small, .petit { font-size:.82rem; }
.doux { color:var(--c-texte-doux); }
.gras { font-weight:600; }
.centre { text-align:center; } .droite { text-align:right; }
.mono { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.tronque { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rien { display:none !important; }

::selection { background:rgb(var(--c-primaire-rgb) / .18); }
:focus-visible { outline:2px solid var(--c-primaire); outline-offset:2px; border-radius:4px; }

/* ---------- Structure ------------------------------------------------ */
.appli { display:flex; min-height:100vh; }
.contenu { flex:1; min-width:0; display:flex; flex-direction:column; }
.page { padding:1.4rem clamp(1rem,3vw,2rem) 3rem; flex:1; width:100%; max-width:1500px; margin:0 auto; }
.page-tete { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; justify-content:space-between; margin-bottom:1.3rem; }
.page-tete h1 { margin:0; }
.page-tete .sous { color:var(--c-texte-doux); font-size:.9rem; margin-top:.15rem; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ---------- Menu latéral --------------------------------------------- */
.menu {
  width:var(--largeur-menu); flex-shrink:0; background:var(--c-secondaire); color:#e2e8f0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:60;
}
.menu-marque { display:flex; align-items:center; gap:.7rem; padding:1.1rem 1.1rem .9rem; }
.menu-marque img { width:38px; height:38px; border-radius:10px; object-fit:cover; background:#fff; }
.menu-marque .logo-lettre {
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--c-primaire); color:#fff; font-weight:800; font-size:1rem; flex-shrink:0;
}
.menu-marque .nom { font-weight:700; font-size:.95rem; color:#fff; line-height:1.2; }
.menu-marque .type { font-size:.72rem; color:#94a3b8; }
.menu-nav { flex:1; overflow-y:auto; padding:.4rem .6rem 1.4rem; scrollbar-width:thin; }
.menu-nav::-webkit-scrollbar { width:6px; }
.menu-nav::-webkit-scrollbar-thumb { background:rgb(255 255 255 / .14); border-radius:3px; }
.menu-groupe { margin-top:1rem; }
.menu-groupe > span {
  display:block; padding:0 .7rem .35rem; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.09em; color:#64748b; font-weight:700;
}
.menu-lien {
  display:flex; align-items:center; gap:.7rem; padding:.56rem .7rem; border-radius:10px;
  color:#cbd5e1; font-size:.885rem; font-weight:500; transition:background .15s, color .15s;
}
.menu-lien:hover { background:rgb(255 255 255 / .07); color:#fff; text-decoration:none; }
.menu-lien.actif { background:var(--c-primaire); color:#fff; box-shadow:0 4px 14px rgb(var(--c-primaire-rgb) / .35); }
.menu-lien i { width:18px; text-align:center; font-size:.9rem; opacity:.9; }
.menu-lien .pastille {
  margin-left:auto; background:var(--c-danger); color:#fff; font-size:.66rem; font-weight:700;
  padding:.1rem .38rem; border-radius:99px;
}
.menu-pied { padding:.8rem; border-top:1px solid rgb(255 255 255 / .08); }

/* ---------- Barre supérieure ----------------------------------------- */
.barre {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:.8rem;
  padding:.65rem clamp(1rem,3vw,2rem); background:rgb(from var(--c-surface) r g b / .88);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--c-bordure);
}
@supports not (background: rgb(from white r g b / .5)) { .barre { background:var(--c-surface); } }
.barre .recherche { flex:1; max-width:420px; position:relative; }
.barre .recherche i { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color:var(--c-texte-doux); font-size:.85rem; }
.barre .recherche input { padding-left:2.2rem; }
.burger { display:none; background:none; border:0; font-size:1.2rem; color:var(--c-texte); cursor:pointer; padding:.3rem; }

.avatar {
  width:36px; height:36px; border-radius:50%; background:var(--c-primaire-clair); color:var(--c-primaire-sombre);
  display:grid; place-items:center; font-weight:700; font-size:.82rem; flex-shrink:0; overflow:hidden;
}
.avatar img { width:100%; height:100%; object-fit:cover; }

/* ---------- Cartes ---------------------------------------------------- */
.carte {
  background:var(--c-surface); border:1px solid var(--c-bordure); border-radius:var(--rayon);
  box-shadow:var(--ombre); overflow:hidden;
}
.carte + .carte { margin-top:1rem; }
.carte-tete {
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--c-bordure);
}
.carte-tete h2, .carte-tete h3 { margin:0; font-size:.98rem; }
.carte-corps { padding:1.15rem; }
.carte-pied { padding:.85rem 1.15rem; border-top:1px solid var(--c-bordure); background:var(--c-surface-2); }

.grille { display:grid; gap:1rem; }
.grille.g2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grille.g3 { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grille.g4 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }

/* ---------- Statistiques --------------------------------------------- */
.stat { position:relative; padding:1.05rem 1.15rem; }
.stat .libelle { font-size:.78rem; color:var(--c-texte-doux); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat .valeur { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; margin:.3rem 0 .1rem; }
.stat .detail { font-size:.8rem; color:var(--c-texte-doux); }
.stat .icone {
  position:absolute; top:1rem; right:1rem; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:1rem;
  background:rgb(var(--c-primaire-rgb) / .1); color:var(--c-primaire);
}
.stat.succes .icone { background:rgb(var(--c-succes-rgb) / .12); color:var(--c-succes); }
.stat.danger .icone { background:rgb(var(--c-danger-rgb) / .12); color:var(--c-danger); }
.stat.accent .icone { background:rgb(var(--c-accent-rgb) / .14); color:var(--c-accent); }
.tendance { display:inline-flex; align-items:center; gap:.25rem; font-size:.78rem; font-weight:600; }
.tendance.hausse { color:var(--c-succes); } .tendance.baisse { color:var(--c-danger); }

/* ---------- Formulaires ---------------------------------------------- */
.champ { margin-bottom:.95rem; }
.champ > label, .etiquette {
  display:block; font-size:.82rem; font-weight:600; margin-bottom:.32rem; color:var(--c-texte);
}
.champ .aide { font-size:.76rem; color:var(--c-texte-doux); margin-top:.28rem; }
/* Sélection par exclusion : un <input> sans attribut « type » est un champ texte
   et doit être habillé comme tel — l'oublier laissait des champs à l'état brut. */
:where(input:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=range],[type=color],[type=image],[type=hidden]),
       select, textarea) {
  width:100%; padding:.58rem .78rem; font:inherit; font-size:.9rem; color:var(--c-texte);
  background:var(--c-surface); border:1px solid var(--c-bordure); border-radius:var(--rayon-sm);
  transition:border-color .15s, box-shadow .15s;
}
textarea { min-height:96px; resize:vertical; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M8 11 3.5 6.5 4.9 5.1 8 8.2l3.1-3.1 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:15px; padding-right:2rem; }
input:focus,select:focus,textarea:focus {
  outline:none; border-color:var(--c-primaire); box-shadow:0 0 0 3px rgb(var(--c-primaire-rgb) / .16);
}
input:disabled,select:disabled,textarea:disabled { background:var(--c-surface-2); color:var(--c-texte-doux); cursor:not-allowed; }
input::placeholder,textarea::placeholder { color:var(--c-texte-doux); opacity:.75; }
.champ.erreur input,.champ.erreur select,.champ.erreur textarea { border-color:var(--c-danger); }
.champ .message-erreur { color:var(--c-danger); font-size:.78rem; margin-top:.25rem; }

.ligne-champs { display:grid; gap:0 1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

.case { display:flex; align-items:flex-start; gap:.6rem; cursor:pointer; padding:.35rem 0; }
.case input[type=checkbox],.case input[type=radio] { width:17px; height:17px; margin-top:.15rem; accent-color:var(--c-primaire); flex-shrink:0; cursor:pointer; }
.case span { font-size:.88rem; }
.case .aide { display:block; font-size:.76rem; color:var(--c-texte-doux); }

/* Interrupteur */
.bascule { display:flex; align-items:center; gap:.7rem; cursor:pointer; padding:.4rem 0; }
.bascule input { position:absolute; opacity:0; width:0; height:0; }
.bascule .piste {
  width:42px; height:24px; border-radius:99px; background:var(--c-bordure); position:relative;
  transition:background .18s; flex-shrink:0;
}
.bascule .piste::after {
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgb(15 23 42 / .3); transition:transform .18s;
}
.bascule input:checked + .piste { background:var(--c-succes); }
.bascule input:checked + .piste::after { transform:translateX(18px); }
.bascule input:focus-visible + .piste { box-shadow:0 0 0 3px rgb(var(--c-primaire-rgb) / .25); }
.bascule .texte { font-size:.88rem; font-weight:500; }
.bascule .texte small { display:block; font-weight:400; color:var(--c-texte-doux); font-size:.76rem; }

/* ---------- Boutons --------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.55rem 1rem; font:inherit; font-size:.875rem; font-weight:600; line-height:1.2;
  border:1px solid transparent; border-radius:var(--rayon-sm); cursor:pointer;
  background:var(--c-surface-2); color:var(--c-texte); border-color:var(--c-bordure);
  transition:transform .1s, box-shadow .15s, background .15s, opacity .15s; white-space:nowrap;
  text-decoration:none;
}
.btn:hover { text-decoration:none; box-shadow:0 2px 8px rgb(15 23 42 / .09); }
.btn:active { transform:translateY(1px); }
.btn:disabled,.btn.desactive { opacity:.55; cursor:not-allowed; box-shadow:none; }
.btn-primaire { background:var(--c-primaire); color:#fff; border-color:transparent; box-shadow:0 3px 12px rgb(var(--c-primaire-rgb) / .3); }
.btn-primaire:hover { background:var(--c-primaire-sombre); }
.btn-succes { background:var(--c-succes); color:#fff; }
.btn-danger { background:var(--c-danger); color:#fff; }
.btn-fantome { background:transparent; border-color:var(--c-bordure); }
.btn-fantome:hover { background:var(--c-surface-2); }
.btn-texte { background:transparent; border-color:transparent; box-shadow:none; color:var(--c-texte-doux); }
.btn-texte:hover { background:var(--c-surface-2); color:var(--c-texte); box-shadow:none; }
.btn-sm { padding:.34rem .65rem; font-size:.8rem; }
.btn-lg { padding:.75rem 1.4rem; font-size:.98rem; }
.btn-bloc { width:100%; }
.btn-icone { padding:.42rem; width:34px; height:34px; }
.btn-groupe { display:inline-flex; }
.btn-groupe .btn { border-radius:0; margin-left:-1px; }
.btn-groupe .btn:first-child { border-radius:var(--rayon-sm) 0 0 var(--rayon-sm); margin-left:0; }
.btn-groupe .btn:last-child { border-radius:0 var(--rayon-sm) var(--rayon-sm) 0; }

/* ---------- Badges & étiquettes --------------------------------------- */
.badge {
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:99px;
  font-size:.75rem; font-weight:600; background:var(--c-surface-2); color:var(--c-texte-doux);
  border:1px solid var(--c-bordure);
}
.badge.succes { background:rgb(var(--c-succes-rgb) / .12); color:var(--c-succes); border-color:transparent; }
.badge.danger { background:rgb(var(--c-danger-rgb) / .12); color:var(--c-danger); border-color:transparent; }
.badge.attente { background:rgb(var(--c-accent-rgb) / .15); color:#b45309; border-color:transparent; }
.badge.info { background:rgb(var(--c-primaire-rgb) / .12); color:var(--c-primaire); border-color:transparent; }
.badge.neutre { background:var(--c-surface-2); }
.point { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

/* ---------- Tableaux --------------------------------------------------- */
.tableau-boite { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tableau { width:100%; border-collapse:collapse; font-size:.88rem; }
table.tableau th {
  text-align:left; padding:.66rem .85rem; font-size:.74rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--c-texte-doux); background:var(--c-surface-2);
  border-bottom:1px solid var(--c-bordure); white-space:nowrap; position:sticky; top:0; z-index:2;
}
table.tableau td { padding:.66rem .85rem; border-bottom:1px solid var(--c-bordure); vertical-align:middle; }
table.tableau tbody tr:hover td { background:var(--c-surface-2); }
table.tableau tbody tr:last-child td { border-bottom:0; }
table.tableau .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.tableau .actions-cell { white-space:nowrap; text-align:right; }
table.tableau.compacte td, table.tableau.compacte th { padding:.42rem .6rem; }

.vide { text-align:center; padding:3rem 1.5rem; color:var(--c-texte-doux); }
.vide i { font-size:2.4rem; opacity:.3; display:block; margin-bottom:.8rem; }
.vide h3 { color:var(--c-texte); font-size:1rem; }

/* ---------- Alertes & bandeaux ---------------------------------------- */
.alerte {
  display:flex; gap:.75rem; align-items:flex-start; padding:.8rem 1rem; border-radius:var(--rayon-sm);
  font-size:.88rem; margin-bottom:1rem; border:1px solid transparent;
}
.alerte i { margin-top:.15rem; }
.alerte strong { display:block; }
.alerte.info { background:rgb(var(--c-primaire-rgb) / .08); color:var(--c-primaire-sombre); border-color:rgb(var(--c-primaire-rgb) / .2); }
.alerte.succes { background:rgb(var(--c-succes-rgb) / .1); color:#065f46; border-color:rgb(var(--c-succes-rgb) / .25); }
.alerte.danger { background:rgb(var(--c-danger-rgb) / .1); color:#991b1b; border-color:rgb(var(--c-danger-rgb) / .25); }
.alerte.attention { background:rgb(var(--c-accent-rgb) / .12); color:#92400e; border-color:rgb(var(--c-accent-rgb) / .3); }
html[data-theme=sombre] .alerte.succes { color:#6ee7b7; }
html[data-theme=sombre] .alerte.danger { color:#fca5a5; }
html[data-theme=sombre] .alerte.attention { color:#fcd34d; }
html[data-theme=sombre] .alerte.info { color:#a5b4fc; }

.bandeau {
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.65rem clamp(1rem,3vw,2rem); font-size:.87rem; font-weight:500;
}
.bandeau.attention { background:var(--c-accent); color:#1c1917; }
.bandeau.danger { background:var(--c-danger); color:#fff; }
.bandeau.info { background:var(--c-secondaire); color:#fff; }
.bandeau .btn { margin-left:auto; }

/* ---------- Notifications éphémères ------------------------------------ */
.toasts { position:fixed; bottom:1.2rem; right:1.2rem; z-index:9999; display:flex; flex-direction:column; gap:.55rem; max-width:min(94vw,380px); }
.toast {
  display:flex; gap:.65rem; align-items:flex-start; padding:.75rem .9rem; border-radius:var(--rayon-sm);
  background:var(--c-surface); border:1px solid var(--c-bordure); box-shadow:var(--ombre-forte);
  font-size:.87rem; animation:toast-entre .28s cubic-bezier(.2,.9,.3,1.2);
}
.toast.succes { border-left:4px solid var(--c-succes); }
.toast.danger { border-left:4px solid var(--c-danger); }
.toast.info   { border-left:4px solid var(--c-primaire); }
.toast.attention { border-left:4px solid var(--c-accent); }
.toast button { margin-left:auto; background:none; border:0; color:var(--c-texte-doux); cursor:pointer; font-size:.9rem; }
@keyframes toast-entre { from { opacity:0; transform:translateY(14px) scale(.97); } }

/* ---------- Fenêtres modales ------------------------------------------- */
.modale {
  position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center;
  padding:1rem; background:rgb(15 23 42 / .55); backdrop-filter:blur(3px);
}
.modale.ouverte { display:flex; animation:fondu .16s ease; }
.modale-boite {
  background:var(--c-surface); border-radius:var(--rayon); box-shadow:var(--ombre-forte);
  width:100%; max-width:600px; max-height:92vh; display:flex; flex-direction:column;
  overflow:hidden;   /* les coins arrondis découpent le contenu */
  animation:modale-entre .22s cubic-bezier(.2,.9,.3,1.1);
}
.modale-boite.large { max-width:920px; }
.modale-boite.etroite { max-width:420px; }

/* La plupart des modales enveloppent leur contenu dans un <form> : c'est donc lui
   le véritable enfant flexible. Sans cette règle, le corps ne peut pas rétrécir et
   le pied — avec le bouton d'enregistrement — sort de l'écran. */
.modale-boite > form { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

.modale-tete { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem;
               border-bottom:1px solid var(--c-bordure); flex:0 0 auto; }
.modale-tete h3 { margin:0; }
/* flex:1 + min-height:0 : la combinaison indispensable pour qu'un enfant de colonne
   flex accepte de rétrécir et laisse jouer son propre défilement. */
.modale-corps { padding:1.2rem; overflow-y:auto; flex:1 1 auto; min-height:0; overscroll-behavior:contain; }
.modale-pied { padding:.9rem 1.2rem; border-top:1px solid var(--c-bordure); display:flex; gap:.5rem;
               justify-content:flex-end; background:var(--c-surface-2); flex:0 0 auto; }
.fermer { background:none; border:0; font-size:1.15rem; color:var(--c-texte-doux); cursor:pointer; padding:.25rem .4rem; border-radius:6px; }
.fermer:hover { background:var(--c-surface-2); color:var(--c-texte); }
@keyframes fondu { from { opacity:0; } }
@keyframes modale-entre { from { opacity:0; transform:translateY(18px) scale(.98); } }

/* ---------- Onglets ----------------------------------------------------- */
.onglets { display:flex; gap:.2rem; border-bottom:1px solid var(--c-bordure); margin-bottom:1.2rem; overflow-x:auto; }
.onglet {
  padding:.6rem .95rem; font-size:.88rem; font-weight:600; color:var(--c-texte-doux);
  border-bottom:2px solid transparent; cursor:pointer; background:none; border-top:0; border-left:0; border-right:0;
  white-space:nowrap; font-family:inherit;
}
.onglet:hover { color:var(--c-texte); text-decoration:none; }
.onglet.actif { color:var(--c-primaire); border-bottom-color:var(--c-primaire); }
.panneau { display:none; } .panneau.actif { display:block; animation:fondu .2s; }

/* ---------- Divers ------------------------------------------------------ */
.separateur { height:1px; background:var(--c-bordure); margin:1.2rem 0; border:0; }
.pile { display:flex; flex-direction:column; gap:.55rem; }
.rangee { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.entre { justify-content:space-between; }
.pousse { margin-left:auto; }

.progression { height:7px; border-radius:99px; background:var(--c-bordure); overflow:hidden; }
.progression > span { display:block; height:100%; background:var(--c-primaire); border-radius:99px; transition:width .4s ease; }
.progression.succes > span { background:var(--c-succes); }
.progression.danger > span { background:var(--c-danger); }
.progression.attention > span { background:var(--c-accent); }

.pagination { display:flex; gap:.3rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap; }
.pagination a, .pagination span {
  padding:.4rem .7rem; border-radius:var(--rayon-sm); font-size:.85rem; font-weight:600;
  border:1px solid var(--c-bordure); color:var(--c-texte-doux); background:var(--c-surface);
}
.pagination a:hover { background:var(--c-surface-2); text-decoration:none; color:var(--c-texte); }
.pagination .actuelle { background:var(--c-primaire); color:#fff; border-color:transparent; }

.chargement { display:inline-block; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tourne .7s linear infinite; }
@keyframes tourne { to { transform:rotate(360deg); } }

.squelette { background:linear-gradient(90deg,var(--c-surface-2) 25%,var(--c-bordure) 50%,var(--c-surface-2) 75%); background-size:200% 100%; animation:brille 1.4s infinite; border-radius:6px; }
@keyframes brille { to { background-position:-200% 0; } }

/* ---------- Responsive --------------------------------------------------- */
/* Quatre paliers seulement, choisis sur ce que l'interface fait réellement :
   1180 → le menu latéral passe en tiroir ; 900 → les grilles se resserrent ;
   720 → les tableaux deviennent des fiches ; 640 → mise en page mobile. */

/* ===== Tablette et petits portables ===================================== */
@media (max-width: 1180px) {
  .menu {
    position:fixed; left:0; top:0; z-index:70;
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
    box-shadow:var(--ombre-forte);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .menu.ouvert { transform:translateX(0); }
  .burger { display:inline-flex; }
  .voile-menu {
    position:fixed; inset:0; background:rgb(15 23 42 / .55); z-index:65;
    opacity:0; pointer-events:none; transition:opacity .22s ease;
    backdrop-filter:blur(2px);
  }
  .voile-menu.actif { opacity:1; pointer-events:auto; }
  body.menu-ouvert { overflow:hidden; }
}

@media (max-width: 900px) {
  /* Quatre indicateurs se lisent mieux en carré 2×2 qu'en 3 + 1 orphelin. */
  .grille.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grille.g2, .grille.g3 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  /* Les mises en page à deux colonnes déclarées en ligne repassent en pile. */
  .grille[style*="minmax"] { grid-template-columns:1fr !important; }
  .panier { position:static !important; max-height:none !important; }
}

/* ===== Tableaux → fiches ================================================= */
/* Le libellé de chaque cellule est injecté par app.js (data-libelle),
   ce qui évite de dupliquer les en-têtes dans chaque page. */
@media (max-width: 720px) {
  table.tableau.fiches thead { display:none; }
  table.tableau.fiches, table.tableau.fiches tbody,
  table.tableau.fiches tr, table.tableau.fiches td { display:block; width:100%; }
  table.tableau.fiches tr {
    background:var(--c-surface); border:1px solid var(--c-bordure);
    border-radius:var(--rayon-sm); margin-bottom:.6rem; padding:.2rem .1rem;
    box-shadow:0 1px 2px rgb(15 23 42 / .04);
  }
  table.tableau.fiches tbody tr:hover td { background:transparent; }
  table.tableau.fiches td {
    display:flex; align-items:center; flex-wrap:wrap; gap:.15rem .5rem;
    padding:.45rem .8rem; border-bottom:1px solid var(--c-bordure); text-align:left;
  }
  /* Le libellé reste à gauche ; tout le contenu de la cellule se groupe à droite,
     même quand elle contient plusieurs blocs (valeur, unité, précision). */
  table.tableau.fiches td::before { margin-right:auto; }
  table.tableau.fiches td > * { text-align:right; }
  table.tableau.fiches td:last-child { border-bottom:0; }
  table.tableau.fiches td::before {
    content:attr(data-libelle);
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--c-texte-doux); flex-shrink:0;
  }
  table.tableau.fiches td:not([data-libelle])::before,
  table.tableau.fiches td[data-libelle=""]::before { content:none; }
  /* La première cellule sert de titre de fiche. */
  table.tableau.fiches td.cellule-titre {
    background:var(--c-surface-2); border-radius:var(--rayon-sm) var(--rayon-sm) 0 0;
    font-weight:600; padding:.6rem .8rem;
  }
  table.tableau.fiches td.cellule-titre::before { content:none; }
  table.tableau.fiches td.num { text-align:right; }
  table.tableau.fiches td.actions-cell { justify-content:flex-end; flex-wrap:wrap; gap:.3rem; }
  table.tableau.fiches td.actions-cell::before { content:none; }
  .tableau-boite:has(table.fiches) { overflow:visible; }
}

/* Repère visuel quand un tableau déborde encore (mode scroll conservé). */
.tableau-boite { position:relative; scrollbar-width:thin; }
.tableau-boite::-webkit-scrollbar { height:7px; }
.tableau-boite::-webkit-scrollbar-thumb { background:var(--c-bordure); border-radius:99px; }
.tableau-boite.deborde::after {
  content:""; position:sticky; right:0; top:0; float:right; width:26px; height:100%;
  background:linear-gradient(90deg,transparent,rgb(from var(--c-surface) r g b / .95));
  pointer-events:none;
}

/* ===== Mobile =========================================================== */
@media (max-width: 640px) {
  .page { padding:.9rem .75rem calc(4rem + env(safe-area-inset-bottom)); }

  h1 { font-size:1.22rem; }
  h2 { font-size:1.05rem; }
  .page-tete { gap:.7rem; margin-bottom:1rem; }
  .page-tete .sous { font-size:.84rem; }
  /* Les actions d'en-tête deviennent des boutons pleine largeur, côte à côte. */
  .page-tete .actions { width:100%; }
  .page-tete .actions > .btn,
  .page-tete .actions > form > .btn { flex:1 1 44%; justify-content:center; white-space:nowrap; }

  .carte-corps { padding:.85rem; }
  .carte-tete { padding:.8rem .85rem; flex-wrap:wrap; }
  .carte-pied { padding:.75rem .85rem; }
  .carte-pied.droite, .carte-pied.rangee { flex-wrap:wrap; }
  .carte-pied .btn { flex:1 1 auto; justify-content:center; }

  /* Indicateurs : deux par ligne, compacts, plutôt qu'une longue colonne. */
  .grille.g3, .grille.g4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }
  .grille.g2 { grid-template-columns:1fr; }
  .stat { padding:.75rem .8rem; }
  /* Le libellé réserve la place de l'icône : sans cela il passe dessous. */
  .stat .libelle { font-size:.66rem; letter-spacing:.02em; padding-right:1.9rem; min-height:2.2em; }
  .stat .valeur { font-size:1.15rem; margin:.15rem 0 .05rem; }
  .stat .detail { font-size:.72rem; line-height:1.35; }
  .stat .icone { top:.6rem; right:.6rem; width:26px; height:26px; border-radius:8px; font-size:.72rem; }

  /* Bandeaux : compacts, le bouton passe dessous plutôt que d'étirer la barre. */
  .bandeau { padding:.55rem .75rem; font-size:.8rem; gap:.5rem; line-height:1.35; }
  .bandeau .btn { margin-left:0; width:100%; justify-content:center; }

  .barre { padding:.5rem .75rem; gap:.5rem; }

  /* Formulaires : 16px minimum, sinon iOS zoome à chaque focus. */
  :where(input:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=button],[type=reset],[type=range],[type=color],[type=image],[type=hidden]),
         select, textarea) { font-size:16px; padding:.6rem .75rem; }
  .champ > label, .etiquette { font-size:.84rem; }
  .ligne-champs { grid-template-columns:1fr; }

  /* Cibles tactiles confortables. */
  .btn { min-height:42px; padding:.55rem .9rem; }
  .btn-sm { min-height:36px; padding:.35rem .6rem; }
  .btn-icone { width:40px; height:40px; }

  .onglets { gap:0; margin:0 -.75rem 1rem; padding:0 .75rem; }
  .onglet { padding:.6rem .8rem; font-size:.85rem; }

  .toasts { left:.7rem; right:.7rem; bottom:calc(.7rem + env(safe-area-inset-bottom)); max-width:none; }
  table.tableau { font-size:.85rem; }
  .cacher-mobile { display:none !important; }
  .pagination a, .pagination span { min-width:40px; text-align:center; }
}

@media (max-width: 359px) {
  .grille.g3, .grille.g4 { grid-template-columns:1fr; }
}

/* ===== Modales ========================================================== */
/* Sur mobile : feuille qui monte du bas, en-tête et pied fixes, contenu défilant. */
@media (max-width: 640px) {
  .modale { padding:0; align-items:flex-end; }
  .modale-boite, .modale-boite.large, .modale-boite.etroite {
    max-width:100%; width:100%;
    border-radius:calc(var(--rayon) + 4px) calc(var(--rayon) + 4px) 0 0;
    max-height:92dvh; animation:feuille-monte .26s cubic-bezier(.32,.72,0,1);
  }
  /* Poignée de préhension, comme sur les feuilles natives. */
  .modale-boite::before {
    content:""; display:block; width:38px; height:4px; border-radius:99px;
    background:var(--c-bordure); margin:.55rem auto -.2rem;
  }
  .modale-tete { padding:.85rem 1rem; position:sticky; top:0; background:var(--c-surface); z-index:2; }
  .modale-tete h3 { font-size:1rem; }
  .modale-corps { padding:1rem; overscroll-behavior:contain; }
  .modale-pied {
    padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    position:sticky; bottom:0; flex-wrap:wrap-reverse; gap:.5rem;
  }
  .modale-pied .btn { flex:1 1 45%; justify-content:center; }
  .modale-pied .btn-primaire, .modale-pied .btn-danger, .modale-pied .btn-succes { flex:1 1 100%; }
}
@keyframes feuille-monte { from { transform:translateY(100%); } }

/* ===== Barre d'action fixe (caisse, formulaires longs) ================== */
.barre-action {
  position:sticky; bottom:0; z-index:40; display:none;
  gap:.6rem; align-items:center;
  padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgb(from var(--c-surface) r g b / .96);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--c-bordure);
  box-shadow:0 -6px 24px rgb(15 23 42 / .1);
  margin:0 -.75rem -4rem;
}
@supports not (background: rgb(from white r g b / .5)) { .barre-action { background:var(--c-surface); } }
.barre-action .total { flex:1; min-width:0; line-height:1.15; }
.barre-action .total small { display:block; font-size:.7rem; color:var(--c-texte-doux); }
.barre-action .total strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }
@media (max-width: 900px) { .barre-action.active { display:flex; } }

/* ===== Confort de lecture ================================================ */
@media (hover: none) {
  .produit:hover, .carte:hover { transform:none; }
  .btn:hover { box-shadow:none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===== Impression ======================================================== */
@media print {
  .menu, .barre, .actions, .toasts, .bandeau, .barre-action, .onglets, .no-print { display:none !important; }
  .page { padding:0; max-width:none; }
  .carte { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
  .panneau { display:block !important; }
  body { background:#fff; }
  a[href]::after { content:none; }
}

/* ===== Barres de filtres repliables ===================================== */
.bouton-filtres { display:none; }
@media (max-width: 640px) {
  .bouton-filtres { display:inline-flex; }
  [data-filtres] { display:none; }
  [data-filtres].deplie {
    display:flex; flex-direction:column; align-items:stretch; width:100%;
    gap:.5rem; padding-top:.6rem; animation:fondu .18s ease;
  }
  [data-filtres].deplie > * { width:100% !important; max-width:none !important; }
  [data-filtres].deplie .btn { justify-content:center; }
}

/* ===== Ajustements de finition ========================================== */
/* Une carte-indicateur cliquable doit se comporter comme un bouton. */
a.stat { display:block; transition:transform .12s, box-shadow .18s; }
a.stat:hover { transform:translateY(-2px); box-shadow:var(--ombre-forte); text-decoration:none; }

/* Les groupes de champs ne doivent jamais forcer un débordement horizontal. */
.ligne-champs > .champ { min-width:0; }
.rangee > * { min-width:0; }

/* Le contenu long (adresses, e-mails) se coupe proprement au lieu d'élargir la page. */
td, .carte-corps { overflow-wrap:anywhere; }
td.num, td.mono, .mono { overflow-wrap:normal; }

/* Aucun élément ne peut provoquer de défilement latéral de la page. */
html, body { max-width:100%; overflow-x:hidden; }

/* Bouton de fermeture du tiroir de menu : visible uniquement quand il est en tiroir. */
.fermer-menu { display:none; position:absolute; top:.6rem; right:.6rem; color:#94a3b8; z-index:2; }
.fermer-menu:hover { background:rgb(255 255 255 / .1); color:#fff; }
@media (max-width: 1180px) { .fermer-menu { display:inline-flex; } .menu { position:fixed; } }

/* ===== Barre de sélection (actions groupées) ============================
   Elle flotte au-dessus du contenu : on coche un produit en bas de liste et
   les actions restent sous la main, sans avoir à remonter. */
.barre-selection {
  position:fixed; z-index:60;
  left:calc(var(--largeur-menu) + 1rem); right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  background:var(--c-surface); border:1px solid var(--c-bordure);
  border-radius:var(--rayon); box-shadow:0 12px 32px rgb(15 23 42 / .18);
  padding:.7rem .9rem;
  animation:surgir-bas .18s ease-out;
}
@keyframes surgir-bas { from { opacity:0; transform:translateY(10px); } }
.barre-selection .compte { white-space:nowrap; }
.barre-selection .actions-groupe { display:flex; gap:.4rem; flex-wrap:wrap; }

@media (max-width: 1180px) { .barre-selection { left:1rem; } }
@media (max-width: 720px) {
  .barre-selection {
    left:0; right:0; bottom:0; border-radius:var(--rayon) var(--rayon) 0 0;
    border-left:0; border-right:0; border-bottom:0;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    max-height:52vh; overflow-y:auto;
  }
  /* Les actions passent sur toute la largeur, en grille lisible au pouce. */
  .barre-selection .actions-groupe { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; width:100%; }
  .barre-selection .actions-groupe .btn { justify-content:center; }
  .barre-selection .actions-groupe .btn:last-child:nth-child(odd) { grid-column:1 / -1; }
}

/* En mode fiche, la case à cocher se loge dans le coin de la carte
   au lieu d'occuper une ligne vide à elle seule. */
@media (max-width: 720px) {
  table.tableau.fiches tr { position:relative; }
  table.tableau.fiches td.cellule-choix {
    position:absolute; top:.45rem; right:.6rem; width:auto;
    padding:0; border-bottom:0; background:transparent; z-index:1;
  }
  table.tableau.fiches td.cellule-choix::before { content:none; }
  /* On dégage la place pour ne pas recouvrir le titre de la fiche. */
  table.tableau.fiches td.cellule-titre { padding-right:2.4rem; }
  /* Le titre est du texte de gauche à droite, pas une valeur alignée à droite. */
  table.tableau.fiches td.cellule-titre > * { text-align:left; }
}

/* Quand la barre de sélection est affichée, on réserve sa place pour que la
   dernière ligne du tableau reste atteignable.
   Un bloc réel, et non du padding : « .page » est un élément flexible dont le
   remplissage ne rallonge pas la zone défilable. */
body.avec-selection .page::after { content:""; display:block; height:7rem; }
@media (max-width: 720px) { body.avec-selection .page::after { height:14rem; } }
/* Les défilements automatiques (focus, ancre) ne cachent plus la ligne visée. */
body.avec-selection tbody tr { scroll-margin-bottom:15rem; }

/* ===== Signature de bas de page ========================================= */
.pied-plateforme {
  margin:2.2rem 0 0; padding:1rem 0 .2rem;
  border-top:1px solid var(--c-bordure);
  text-align:center; font-size:.8rem; color:var(--c-texte-doux);
}
.pied-plateforme a { color:inherit; text-decoration:none; font-weight:600; border-bottom:1px solid currentColor; }
.pied-plateforme a:hover { color:var(--c-primaire); }
/* Sur les écrans de connexion, le trait au-dessus ferait doublon avec la carte. */
.ecran-auth .pied-plateforme { border-top:0; margin-top:1.5rem; }
@media print { .pied-plateforme { display:none; } }

/* ===== Partage de la boutique ========================================== */
.champ-copie { display:flex; gap:.5rem; align-items:stretch; }
.champ-copie input {
  flex:1 1 auto; min-width:0; font-family:var(--police-mono,ui-monospace,monospace);
  font-size:.88rem; background:var(--c-surface-2); cursor:text;
}
.champ-copie .btn { flex:0 0 auto; }
@media (max-width: 480px) {
  .champ-copie { flex-direction:column; }
  .champ-copie .btn { justify-content:center; }
}

.grille-partage { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:.6rem; }
.tuile-partage {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  padding:.9rem .5rem; border:1px solid var(--c-bordure); border-radius:var(--rayon-sm);
  background:var(--c-surface); color:var(--c-texte); font:inherit; font-size:.83rem; font-weight:600;
  cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s;
}
.tuile-partage i { font-size:1.35rem; }
.tuile-partage:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgb(15 23 42 / .12); }
/* Chaque canal garde sa couleur : on la reconnaît avant de lire l'étiquette. */
.tuile-partage.wa:hover    { border-color:#25d366; color:#25d366; }
.tuile-partage.fb:hover    { border-color:#1877f2; color:#1877f2; }
.tuile-partage.tg:hover    { border-color:#229ed9; color:#229ed9; }
.tuile-partage.sms:hover,
.tuile-partage.mail:hover,
.tuile-partage.natif:hover { border-color:var(--c-primaire); color:var(--c-primaire); }

.grille-affiches { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:.7rem; }
.tuile-affiche {
  display:flex; align-items:center; gap:.85rem; text-decoration:none; color:inherit;
  padding:.85rem .95rem; border:1px solid var(--c-bordure); border-radius:var(--rayon-sm);
  background:var(--c-surface); transition:border-color .12s, transform .12s, box-shadow .12s;
}
.tuile-affiche:hover { border-color:var(--c-primaire); transform:translateY(-2px); box-shadow:0 6px 16px rgb(15 23 42 / .12); }
.tuile-affiche .ic {
  flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgb(var(--c-primaire-rgb)/.12); color:var(--c-primaire); font-size:1.1rem;
}
.tuile-affiche .txt { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.tuile-affiche .txt strong { font-size:.94rem; }
.tuile-affiche .fleche { margin-left:auto; color:var(--c-texte-doux); font-size:.85rem; flex:0 0 auto; }
.tuile-affiche:hover .fleche { color:var(--c-primaire); }