/* ==========================================================================
   LE STOCK REFAIT (A30, prompt de Stéphanie du 21/10/2026 ; maquette validée
   le 21/10/2026, B18_REGLES_AFFICHAGE.md §23)

   Fond blanc, listes pleine largeur séparées par un trait fin, pas de cartes
   autour des listes, lignes courtes (le nom à gauche, la quantité à droite).
   Le téléphone d'abord. Couleurs : jetons `--st-*` et `--tu-*` (jetons.css),
   aucune valeur en dur. Préfixe `sk-` : rien ne se mélange avec l'ancien
   écran, dont l'onglet Achats garde les styles (stock.css) jusqu'au lot 2.
   ========================================================================== */

.sk {
  background: var(--surface);
  color: var(--encre);
  border-radius: var(--r-m);
  padding-bottom: var(--e-4);
}

.sk-ico { width: 18px; height: 18px; flex: none; }

/* --- Les six onglets : icône au-dessus du libellé, tiennent dans 390 px.
   L'Historique s'ouvre par sa tuile : sept onglets passaient à la ligne. --- */
.sk-onglets {
  display: grid;
  /* Chaque colonne prend la largeur de son libellé. */
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  /* « Accueil » et « Inventaire » touchaient les bords de l'écran. */
  padding: 0 var(--e-2);
  border-bottom: 1px solid var(--trait);
  margin-bottom: var(--e-3);
}
.sk-onglet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: var(--cible);
  min-width: var(--cible);
  padding: var(--e-2) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--encre2);
  cursor: pointer;
}
/* Pas de gras sur l'onglet ouvert : il élargissait « Mouvements », coupé à
   390 px (vérification visuelle du 21/10). La couleur et le trait suffisent. */
.sk-onglet[aria-current="page"] {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.sk-onglet-ico { width: 20px; height: 20px; }
/* « Mouvements », le plus long, se coupait à 390 px en 11 px : un cran plus
   petit, et rien ne se coupe (capture du 21/10/2026). */
.sk-onglet-txt {
  font-size: var(--t-micro);
  line-height: 1.2;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  letter-spacing: -.01em;
}
.sk-pastille {
  position: absolute;
  top: 2px;
  right: calc(50% - 22px);
  min-width: 18px;
  height: 18px;
  padding: 0 var(--e-1);
  border-radius: var(--r-p);
  background: var(--bulle);
  color: var(--sur-bulle);
  font-size: var(--t-etiquette);
  font-weight: var(--graisse-appui);
  line-height: 18px;
  text-align: center;
}

/* --- Les pages --- */
.sk-page { padding: 0 var(--e-4); }
.sk-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin: var(--e-3) 0;
}
/* Le titre porte l'icône de son onglet, et la couleur du texte : les titres
   colorés (bleu, orange) n'apportaient rien (§23). */
.sk-titre {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: var(--e-3) 0 var(--e-2);
  font-size: var(--t-titre);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}
.sk-tete .sk-titre { margin: 0; }
.sk-titre-ico { width: 24px; height: 24px; flex: none; }
.sk-actions { display: flex; align-items: center; gap: var(--e-2); flex: none; }
/* Les boutons carrés de l'en-tête : la loupe, et sur Stock un gros + blanc sur
   fond vert à la place de « Ajouter un produit ». */
.sk-carre {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  cursor: pointer;
}
.sk-carre-ico { width: 22px; height: 22px; }
.sk-loupe[aria-expanded="true"] { border-color: var(--teal); color: var(--teal); }
.sk-ajout { border-color: var(--teal); background: var(--teal); color: var(--sur-teal); }
.sk-ajout .sk-carre-ico { width: 26px; height: 26px; stroke-width: 2.6; }
.sk-aide {
  margin: 0 0 var(--e-3);
  color: var(--encre2);
  font-size: var(--t-texte);
  line-height: 1.45;
}
/* Les catégories en gras et en brun : ni vert, ni violet, ni rouge (réservé),
   ni bleu ou orange (le sens des mouvements) — §23. */
.sk-intertitre {
  margin: var(--e-4) 0 0;
  padding-bottom: var(--e-2);
  color: var(--tu-inv);
  font-size: var(--t-petit);
  font-weight: var(--graisse-caps);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- Les boutons : libellé explicite, 44 px --- */
.sk-btn, .sk-btn-second {
  min-height: var(--cible);
  padding: 0 var(--e-4);
  border-radius: var(--r-s);
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
  cursor: pointer;
}
.sk-btn { border: 1px solid var(--teal); background: var(--teal); color: var(--sur-teal); }
.sk-btn:disabled { background: var(--surface3); border-color: var(--surface3); color: var(--encre3); cursor: not-allowed; }
.sk-btn-second { border: 1px solid var(--teal); background: var(--surface); color: var(--teal); }
.sk-btn-large { width: 100%; margin: var(--e-3) 0; }
.sk-lien {
  min-height: var(--cible);
  padding: 0 var(--e-2);
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: var(--t-texte);
  font-weight: var(--graisse-appui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- Accueil : les alertes, puis les tuiles pastel --- */
.sk-alertes { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; }
.sk-alerte {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-4);
  border: 0;
  border-radius: var(--r-l);
  background: var(--st-epuise-f);
  color: var(--st-epuise);
  font-size: var(--t-texte);
  text-align: left;
  cursor: pointer;
}
/* Ce qui manquera aux anniversaires de la semaine : le jaune de « stock bas »,
   pas le rouge, réservé à ce qui est déjà sous le seuil. */
.sk-alerte[data-s="prevision"] { background: var(--st-bas-f); color: var(--st-bas); }
.sk-alerte-ico { width: 20px; height: 20px; flex: none; }
.sk-alerte-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sk-alerte-txt strong { font-size: var(--t-base); font-weight: var(--graisse-appui); }
.sk-alerte-suite { width: 20px; height: 20px; flex: none; }
.sk-tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
  margin-top: var(--e-3);
}
.sk-tuile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--e-1);
  min-height: 130px;
  padding: var(--e-4);
  border: 0;
  border-radius: var(--r-l);
  text-align: left;
  cursor: pointer;
}
.sk-tuile[data-t="entrees"] { background: var(--st-entree-f); color: var(--st-entree); }
.sk-tuile[data-t="sorties"] { background: var(--st-sortie-f); color: var(--st-sortie); }
.sk-tuile[data-t="stock"] { background: var(--tu-stock-f); color: var(--tu-stock); }
.sk-tuile[data-t="achats"] { background: var(--tu-achats-f); color: var(--tu-achats); }
.sk-tuile[data-t="inv"] { background: var(--tu-inv-f); color: var(--tu-inv); }
.sk-tuile[data-t="hist"] { background: var(--tu-hist-f); color: var(--tu-hist); }
.sk-tuile-ico { width: 32px; height: 32px; margin-bottom: auto; }
.sk-tuile-titre { font-size: var(--t-titre-s); font-weight: var(--graisse-appui); }
.sk-tuile-sous { font-size: var(--t-petit); opacity: .9; }

/* --- Recherche et filtres --- */
.sk-recherche {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  margin: 0 0 var(--e-3);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre3);
}
.sk-recherche-ico { width: 18px; height: 18px; flex: none; }
.sk-recherche-champ {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--encre);
  font-size: var(--t-champ);
  outline: none;
}
.sk-recherche:focus-within { border-color: var(--focus); }
/* Les filtres en onglets soulignés, plus en pilules (§23). */
.sk-filtres { display: flex; margin-bottom: var(--e-2); border-bottom: 1px solid var(--trait); }
.sk-filtre {
  flex: 1;
  min-height: var(--cible);
  padding: 0 var(--e-2);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--encre2);
  font-size: var(--t-texte);
  white-space: nowrap;
  cursor: pointer;
}
.sk-filtre[aria-pressed="true"] { border-bottom-color: var(--teal); color: var(--encre); font-weight: var(--graisse-appui); }

/* --- Les listes : pleine largeur, un trait fin entre les lignes --- */
.sk-lignes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.sk-lignes > li { border-bottom: 1px solid var(--trait); }
.sk-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: 56px;
  padding: var(--e-2) var(--e-1);
  border: 0;
  background: transparent;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}
.sk-ligne[aria-current="true"] { background: var(--lagon-f); }
.sk-ligne-g { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); min-width: 0; flex: 1; }
.sk-nom { font-size: var(--t-base); font-weight: var(--graisse-moyenne); overflow-wrap: anywhere; }
.sk-sous { font-size: var(--t-petit); color: var(--encre2); }
.sk-qte { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.sk-qte-n { font-size: var(--t-titre); font-weight: var(--graisse-appui); font-variant-numeric: tabular-nums; line-height: 1.1; }
.sk-qte-u { font-size: var(--t-petit); color: var(--encre2); }
.sk-qte-inconnue { color: var(--encre3); }

.sk-etiq {
  display: inline-block;
  padding: 1px var(--e-2);
  border-radius: var(--r-p);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
}
.sk-etiq[data-s="bas"] { background: var(--st-bas-f); color: var(--st-bas); }
.sk-etiq[data-s="epuise"] { background: var(--st-epuise-f); color: var(--st-epuise); }
.sk-etiq[data-s="compter"] { background: var(--surface2); color: var(--encre2); border: 1px dashed var(--trait-champ); }

/* --- La fiche produit --- */
.sk-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible);
  margin: var(--e-1) 0 var(--e-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  cursor: pointer;
}
.sk-retour-ico { width: 20px; height: 20px; }
.sk-fiche-cat { margin: var(--e-3) 0 0; color: var(--encre2); font-size: var(--t-petit); text-transform: uppercase; letter-spacing: .04em; }
.sk-fiche-nom { margin: var(--e-1) 0 var(--e-3); font-size: var(--t-titre-l); font-weight: var(--graisse-appui); overflow-wrap: anywhere; }
.sk-fiche-qte { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-2); }
.sk-fiche-n { font-size: var(--t-jauge); font-weight: var(--graisse-forte); font-variant-numeric: tabular-nums; line-height: 1; }
.sk-fiche-u { color: var(--encre2); font-size: var(--t-base); }
.sk-infos { margin-top: var(--e-4); }
.sk-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-2); font-size: var(--t-texte); }
.sk-dl dt { color: var(--encre2); }
.sk-dl dd { margin: 0; }

/* --- L'historique (fiche et onglet) --- */
.sk-mvts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.sk-mvt { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-1); border-bottom: 1px solid var(--trait); }
.sk-mvt-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-p);
  font-weight: var(--graisse-forte);
  background: var(--surface2);
  color: var(--encre2);
}
.sk-mvt[data-sorte="sortie"] .sk-mvt-pastille { background: var(--st-sortie-f); color: var(--st-sortie); }
.sk-mvt[data-sorte="entree"] .sk-mvt-pastille { background: var(--st-entree-f); color: var(--st-entree); }
.sk-mvt[data-sorte="sortie"] .sk-mvt-q { color: var(--st-sortie); }
.sk-mvt[data-sorte="entree"] .sk-mvt-q { color: var(--st-entree); }
.sk-mvt[data-annule="oui"] .sk-mvt-ligne { text-decoration: line-through; color: var(--encre3); }
.sk-mvt-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sk-mvt-nom { font-weight: var(--graisse-moyenne); }
.sk-mvt-ligne { font-size: var(--t-texte); color: var(--encre2); }
.sk-mvt-q { color: var(--encre); font-variant-numeric: tabular-nums; }
.sk-mvt-detail { font-size: var(--t-petit); color: var(--encre3); overflow-wrap: anywhere; }

/* --- Entrées, Sorties, Inventaire : une ligne, une case et ses boutons --- */
.sk-saisie {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 64px;
  padding: var(--e-2) var(--e-1);
}
.sk-saisie[data-sorte="sortie"] { background: var(--st-sortie-f); }
.sk-saisie[data-sorte="entree"] { background: var(--st-entree-f); }
.sk-saisie[data-depasse="oui"] { background: var(--st-epuise-f); }
.sk-aide-ligne { font-size: var(--t-petit); font-weight: var(--graisse-appui); color: var(--encre2); }
.sk-saisie[data-sorte="sortie"] .sk-aide-ligne { color: var(--st-sortie); }
.sk-saisie[data-sorte="entree"] .sk-aide-ligne { color: var(--st-entree); }
.sk-saisie[data-depasse="oui"] .sk-aide-ligne { color: var(--st-epuise); }
.sk-aide-ligne[data-s="ecart"] { color: var(--st-bas); }

/* Les boutons sont À CÔTÉ de la case, 44 px chacun, jamais empilés : deux
   demi-boutons de 22 px collés faisaient une entrée au lieu d'une sortie
   (relecture du lot 1, 21/10/2026). */
.sk-qcase { display: flex; align-items: center; gap: var(--e-2); flex: none; }
.sk-qcase-champ {
  width: 64px;
  height: var(--cible);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-champ);
  font-weight: var(--graisse-appui);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sk-pas {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface2);
  color: var(--encre);
  cursor: pointer;
}
.sk-pas-ico { width: 22px; height: 22px; stroke-width: 2.4; }

/* La fiche produit : deux portes, Entrée et Sortie, côte à côte. */
.sk-portes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: var(--e-3) 0; }
.sk-portes .sk-btn-large { display: flex; align-items: center; justify-content: center; gap: var(--e-2); margin: 0; }
.sk-btn-ico { width: 20px; height: 20px; stroke-width: 2.4; }

/* Les incidents n'ont rien à faire dans le Stock (Stéphanie, 21/10/2026) :
   la bande d'A24 s'efface sur cet écran, elle reste sur les autres. */
[data-ecran-courant="stock"] #bande-incidents { display: none; }

.sk-evenement { display: flex; flex-direction: column; gap: var(--e-1); margin: var(--e-4) 0 0; }
.sk-evenement-lbl { font-size: var(--t-texte); font-weight: var(--graisse-appui); }
.sk-select {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-champ);
}

/* La barre du bas : le résumé, « Tout remettre à zéro », le bouton. Elle se
   tient au-dessus de la barre d'onglets du téléphone. */
.sk-barre {
  position: sticky;
  bottom: var(--barre-basse, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-4) calc(var(--e-4) * -1) 0;
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--trait);
  background: var(--surface);
}
.sk-barre-resume { flex: 1 1 100%; font-size: var(--t-texte); font-weight: var(--graisse-appui); color: var(--encre2); }
.sk-barre-resume[data-s="erreur"] { color: var(--st-epuise); }
.sk-barre .sk-btn { margin-left: auto; }

/* --- Inventaire : la progression --- */
.sk-progression { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-3); font-size: var(--t-texte); color: var(--encre2); }
.sk-jauge { height: 4px; border-radius: var(--r-p); background: var(--trait); overflow: hidden; }
.sk-jauge-rempli { height: 100%; background: var(--teal); width: 0; }
.sk-jauge-rempli[data-part="10"] { width: 10%; }
.sk-jauge-rempli[data-part="20"] { width: 20%; }
.sk-jauge-rempli[data-part="30"] { width: 30%; }
.sk-jauge-rempli[data-part="40"] { width: 40%; }
.sk-jauge-rempli[data-part="50"] { width: 50%; }
.sk-jauge-rempli[data-part="60"] { width: 60%; }
.sk-jauge-rempli[data-part="70"] { width: 70%; }
.sk-jauge-rempli[data-part="80"] { width: 80%; }
.sk-jauge-rempli[data-part="90"] { width: 90%; }
.sk-jauge-rempli[data-part="100"] { width: 100%; }

/* --- Le bandeau « 3 mouvements enregistrés · Annuler » --- */
.sk-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barre-basse, 0px) + var(--e-7) + var(--e-6));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: calc(100% - 2 * var(--e-4));
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  transform: translateX(-50%);
  border-radius: var(--r-s);
  background: var(--encre);
  color: var(--surface);
  box-shadow: var(--ombre);
  font-size: var(--t-texte);
}
.sk-toast-annuler {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 0;
  background: transparent;
  color: var(--lagon);
  font-weight: var(--graisse-forte);
  cursor: pointer;
}

/* --- Le panneau : monte du bas au téléphone, centré au bureau --- */
.sk-voile { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: var(--voile); }
.sk-panneau {
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: var(--e-4) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom, 0px));
  border-radius: var(--r-l) var(--r-l) 0 0;
  background: var(--surface);
  color: var(--encre);
}
.sk-panneau-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.sk-panneau-titre { margin: 0; font-size: var(--t-titre-s); }
.sk-champ { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); }
.sk-champ-lbl { font-size: var(--t-texte); font-weight: var(--graisse-appui); }
.sk-entree {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-champ);
}
.sk-panneau-msg { min-height: 1em; margin: 0; color: var(--st-epuise); font-size: var(--t-texte); }

/* --- Téléphone : les listes vont d'un bord à l'autre --- */
@media (max-width: 820px) {
  .sk { border-radius: 0; margin-inline: calc(var(--e-4) * -1); }
  .sk-lignes, .sk-mvts { margin-inline: calc(var(--e-4) * -1); }
  .sk-lignes > li > .sk-ligne, .sk-saisie, .sk-mvt { padding-inline: var(--e-4); }
}

/* --- La barre d'onglets en ligne, icône et libellé côte à côte, seulement
   quand elle tient : entre 821 et ~960 px, la barre latérale posée, les
   libellés se coupaient en plein mot (« Accı », « Sto » — vérification
   visuelle du 21/10/2026). En dessous, la barre du téléphone, qui tient. --- */
@media (min-width: 1100px) {
  .sk-onglets { display: flex; justify-content: flex-start; gap: var(--e-2); padding: 0 var(--e-4); }
  .sk-onglet { flex-direction: row; gap: var(--e-2); padding: var(--e-3) var(--e-4); }
  .sk-onglet-txt { font-size: var(--t-texte); }
  .sk-pastille { top: 4px; right: 2px; }
}

/* --- Ordinateur : toute la largeur (METHODE-ECRAN : le contenu prend la
   largeur disponible ; le plafond à 760 px laissait des marges vides). --- */
@media (min-width: 821px) {
  .sk-filtre { flex: 0 0 auto; padding: 0 var(--e-5); }
  /* Les catégories en cartes, sur des colonnes qui se remplissent sans trou
     (une grille laissait des blancs sous les catégories courtes). */
  .sk-grille { columns: 3 340px; column-gap: var(--e-4); margin-top: var(--e-3); }
  .sk-groupe {
    break-inside: avoid;
    margin-bottom: var(--e-4);
    padding: var(--e-2) var(--e-4) var(--e-3);
    border: 1px solid var(--trait);
    border-radius: var(--r-l);
    background: var(--surface);
  }
  .sk-groupe .sk-intertitre { margin-top: var(--e-2); }
  .sk-groupe .sk-lignes > li:last-child { border-bottom: 0; }
  .sk-alertes { grid-template-columns: 1fr 1fr; }
  /* Un champ prend la largeur de ce qu'on y écrit (METHODE-ECRAN) : un nom
     d'anniversaire, pas 1 400 px. */
  .sk-evenement { max-width: 520px; }
  .sk-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-avec-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--e-5);
    padding-inline: var(--e-4);
  }
  .sk-avec-fiche .sk-page { max-width: none; margin: 0; padding: 0; }
  .sk-avec-fiche .sk-fiche { border-left: 1px solid var(--trait); padding-left: var(--e-5); }
  .sk-voile { align-items: center; }
  .sk-panneau { width: 480px; border-radius: var(--r-l); }
  .sk-toast { bottom: var(--e-5); }
}