/*
 * Facturier — habillage Elle Plus.
 *
 * L'outil doit se lire comme une rallonge de elleplus.ca : mêmes couleurs,
 * mêmes polices, mêmes rayons, mêmes ombres. Les jetons portent donc les NOMS
 * du thème (`snippets/css-variables.liquid`) et non des noms inventés ici :
 * quand la boutique bouge, on sait quoi reporter.
 *
 * Rien n'est chargé depuis un CDN. La CSP du Worker (`src/index.ts`) n'admet
 * que l'origine `'self'` : un `<link>` vers Google Fonts serait bloqué sans
 * message. D'où les deux `@font-face` ci-dessous, servis depuis /fonts/.
 */

@font-face {
  font-family: "Epilogue";
  src: url("/fonts/epilogue-800-latin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Fichier variable : une seule ressource couvre 400 à 600. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-600-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Marque : repris tel quel du thème --------------------------------- */
  --color-background: #ffffff;
  --color-text: #1a1c1c;
  --color-accent: #e87a90;
  --color-brand-deep: #9c3e54;
  --color-border: #dac0c3;
  --color-surface: #f8f8f8;
  --color-secondary: #555f71;
  --color-muted: color-mix(in srgb, var(--color-text) 62%, var(--color-border));

  /*
   * États. Le rose de marque ne sert JAMAIS de couleur d'état : sur fond
   * blanc, `--color-brand-deep` et un rouge d'erreur ne se distinguent qu'à
   * ΔE 8 — trop proche. Le trio ci-dessous est mesuré à ΔE 16,6 en vision
   * normale, et chaque état porte de toute façon son libellé écrit.
   */
  --etat-ok: #0f7b52; /* 5,3:1 sur blanc — sert aussi d'encre */
  --etat-attention: #a9750d; /* 4,0:1 — signal (rails, bordures, teintes) */
  --etat-attention-encre: #7d5600; /* 6,6:1 — la même famille, lisible en texte */
  --etat-erreur: #b3261e; /* 6,5:1 — encre et signal */

  /* --- Surfaces ---------------------------------------------------------- */
  /* Voile blush très léger : le site pose ses panneaux sur du blanc, une carte
     blanche sur fond blanc n'aurait aucune séparation. */
  --fond-page: radial-gradient(
      120% 60% at 50% 0%,
      color-mix(in srgb, var(--color-accent) 6%, transparent) 0%,
      transparent 58%
    ),
    linear-gradient(180deg, #fffdfc 0%, #fbf9f8 40%, #ffffff 100%);
  --panneau-lavis: linear-gradient(
    180deg,
    rgba(255, 242, 246, 0.5) 0%,
    rgba(255, 250, 248, 0.2) 40%,
    transparent 72%
  );
  --panneau-bordure: color-mix(in srgb, var(--color-border) 82%, #ffffff);

  /* --- Rayons et ombres : jetons du thème -------------------------------- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;
  --shadow-soft: 0 10px 30px rgba(45, 55, 72, 0.08);
  --shadow-accent: 0 4px 14px rgba(232, 122, 144, 0.28);
  --shadow-carte:
    0 1px 2px rgba(45, 42, 48, 0.04), 0 8px 24px rgba(45, 42, 48, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* --- Typographie ------------------------------------------------------- */
  --font-heading: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --pas-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --pas-2xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.6rem);
  --pas-xl: 1.25rem;
  --pas-lg: 1.0625rem;
  --pas-md: 1rem;
  --pas-sm: 0.875rem;
  --pas-xs: 0.8125rem;
  --pas-2xs: 0.75rem;

  /* --- Espacement -------------------------------------------------------- */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --page-max: 76rem;
  --hauteur-barre: 4.25rem;
}

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

/*
 * `hidden` doit gagner, toujours.
 *
 * L'attribut ne vaut qu'un `display: none` posé par la feuille du navigateur :
 * la moindre déclaration `display` de notre côté le bat. `.tuiles` en `grid`,
 * le panneau d'onglet en `grid`, le bouton en `inline-flex` — tous restaient
 * affichés alors que le JavaScript les avait masqués, et la zone de dépôt
 * s'invitait dans l'onglet Historique.
 */
[hidden] {
  display: none !important;
}

/*
 * La PAGE ne défile jamais.
 *
 * L'application tient dans la fenêtre, quelle que soit sa taille : la barre de
 * marque, le titre, les tuiles et les onglets restent en place, et ce qui
 * déborde — l'historique, les lignes d'une facture — défile DANS son propre
 * cadre. Un tableau de trente factures ne doit pas pousser les chiffres clés
 * hors de l'écran.
 *
 * Tout repose sur `min-height: 0` répété à chaque niveau : par défaut un
 * élément de grille refuse de devenir plus petit que son contenu, et un seul
 * oubli dans la chaîne fait ressortir la barre de défilement de la page.
 */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background-color: var(--color-background);
  background-image: var(--fond-page);
  background-repeat: no-repeat;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--pas-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: var(--color-brand-deep);
}

/*
 * Un seul anneau de focus pour toute l'application. L'ancienne feuille posait
 * `outline: none` sur la zone de dépôt : au clavier, plus rien n'indiquait où
 * on se trouvait.
 */
:focus-visible {
  outline: 2px solid var(--color-brand-deep);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Visible seulement au lecteur d'écran. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Barre de marque ------------------------------------------------------ */

.barre-marque {
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panneau-bordure);
}

.barre-marque__interieur {
  max-width: var(--page-max);
  min-height: var(--hauteur-barre);
  margin: 0 auto;
  padding: var(--esp-2) var(--gouttiere);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  text-decoration: none;
  color: inherit;
}

/* Proches des règles de `.header__logo` du thème, mais un cran plus grand :
   l'application est un outil de travail, consulté de plus loin qu'une page de
   boutique, et le logo y sert de repère plutôt que d'enseigne.
   Anciennes règles : la marque doit avoir le même
   gabarit dans l'outil et sur la boutique. */
.marque__logo {
  max-height: 3.25rem;
  width: auto;
  object-fit: contain;
}

.marque__separateur {
  width: 1px;
  height: 1.1rem;
  background: var(--color-border);
}

.marque__outil {
  font-size: var(--pas-sm);
  font-weight: 500;
  color: var(--color-muted);
}

.connexion__carte {
  max-width: 40rem;
  margin-inline: auto;
}

#connexion-code-valeur {
  max-width: 14rem;
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  font-variant-numeric: tabular-nums;
}

.marque__nom {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* --- Premier démarrage --------------------------------------------------- */

.onboarding {
  min-height: 0;
  overflow-y: auto;
  padding: clamp(1.25rem, 5vw, 4rem) var(--gouttiere);
}

.onboarding__carte {
  width: min(100%, 58rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  gap: var(--esp-6) var(--esp-7);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--panneau-bordure);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  box-shadow: var(--shadow-soft);
}

.onboarding__intro h1 {
  max-width: 17ch;
  margin-top: var(--esp-2);
  font-size: var(--pas-3xl);
}

.onboarding__intro > p:last-child {
  max-width: 46ch;
  margin-top: var(--esp-4);
  color: var(--color-muted);
}

.onboarding__surtitre {
  color: var(--color-brand-deep);
  font-size: var(--pas-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding__etapes {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.onboarding__etapes li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 2px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--pas-sm);
  font-weight: 600;
}

.onboarding__etapes span {
  display: inline-grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--pas-2xs);
}

.onboarding__etapes li[data-etat="actif"] {
  border-top-color: var(--color-accent);
  color: var(--color-brand-deep);
}

.onboarding__etapes li[data-etat="fait"] {
  border-top-color: var(--etat-ok);
  color: var(--etat-ok);
}

.onboarding__formulaire {
  align-self: end;
  display: grid;
  gap: var(--esp-3);
}

.onboarding__formulaire label {
  display: block;
  font-weight: 600;
}

.onboarding__formulaire input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}

.onboarding__formulaire .bouton {
  justify-self: start;
}

.champ-aide,
.onboarding__message {
  margin-top: var(--esp-1);
  color: var(--color-muted);
  font-size: var(--pas-sm);
}

.onboarding__message {
  min-height: 1.5em;
  align-self: end;
}

.onboarding__message[data-etat="erreur"] {
  color: var(--etat-erreur);
}

.equipe__entete,
.equipe__ligne,
.equipe__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.equipe__entete p,
.equipe__ligne small {
  display: block;
  color: var(--color-muted);
  font-size: var(--pas-sm);
}

.equipe__invitation {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.55fr) auto;
  align-items: end;
  gap: var(--esp-3);
  margin: var(--esp-5) 0;
}

.equipe__invitation label {
  font-size: var(--pas-sm);
  font-weight: 600;
}

.equipe__invitation input,
.equipe__invitation select,
.equipe__lien input {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin-top: var(--esp-1);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text);
  font: inherit;
}

.equipe__invitation .bouton {
  margin: 0;
}

.equipe__lien {
  padding: var(--esp-3);
  margin-bottom: var(--esp-5);
  border-left: 3px solid var(--etat-ok);
  background: color-mix(in srgb, var(--etat-ok) 7%, #fff);
}

.equipe__lien input {
  flex: 1;
  margin: 0;
}

.equipe__liste {
  padding: 0;
  margin: var(--esp-3) 0 var(--esp-5);
  list-style: none;
  border-top: 1px solid var(--panneau-bordure);
}

.equipe__ligne {
  min-height: 3.5rem;
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--panneau-bordure);
}

/* Côté droit de la barre : l'état, puis le bouton d'installation. Les deux
   sont regroupés pour que `justify-content: space-between` n'écarte pas le
   bouton du reste, à l'autre bout de la barre. */
.barre-actions {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

/* Bloc d'état à droite : qui est connectée, et Shopify répond-il. */
.barre-etat {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  font-size: var(--pas-xs);
}

.barre-etat__utilisatrice {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--color-muted);
}

.jeton-initiales {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-accent) 18%, #ffffff);
  color: var(--color-brand-deep);
  font-size: var(--pas-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
}

/* --- Coquille de page ----------------------------------------------------- */

/* Titre, tuiles et onglets gardent leur hauteur ; les panneaux prennent ce qui
   reste et défilent chez eux. */
.coquille {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--esp-5) var(--gouttiere);
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: var(--esp-4);
  min-height: 0;
  overflow: hidden;
}

.entete-page h1 {
  font-size: var(--pas-3xl);
  color: color-mix(in srgb, var(--color-text) 94%, var(--color-brand-deep));
}

/* --- Tuiles chiffrées ----------------------------------------------------- */
/*
 * Quatre repères, pas un graphique : ces nombres se lisent d'un coup d'œil et
 * n'ont pas de série à comparer. Chiffres proportionnels ici — `tabular-nums`
 * élargit chaque chiffre à la largeur d'un « 0 » et fait bâiller un nombre
 * court en grande taille. Le tabulaire est réservé aux colonnes du tableau.
 */

.tuiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-3);
}

.tuile {
  padding: var(--esp-4);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  border: 1px solid var(--panneau-bordure);
  box-shadow: var(--shadow-carte);
  border-top: 3px solid var(--color-accent);
}

.tuile--attention {
  border-top-color: var(--etat-attention);
}

.tuile__libelle {
  font-size: var(--pas-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.tuile__valeur {
  margin-top: var(--esp-1);
  font-family: var(--font-body);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.tuile--attention .tuile__valeur {
  color: var(--etat-attention-encre);
}

.tuile__note {
  margin-top: var(--esp-1);
  font-size: var(--pas-xs);
  color: var(--color-muted);
}

/* --- Onglets en pastilles ------------------------------------------------- */
/*
 * Horizontal, et non plus une colonne de 13 rem : le tableau d'historique a
 * neuf colonnes, il lui faut toute la largeur.
 */

.nav-pastilles {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

.pastille-onglet {
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--esp-2) var(--esp-4);
  background: none;
  color: var(--color-muted);
  font: inherit;
  font-size: var(--pas-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pastille-onglet:hover {
  color: var(--color-brand-deep);
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
}

.pastille-onglet--actif,
.pastille-onglet--actif:hover {
  background: color-mix(in srgb, var(--color-accent) 12%, #ffffff);
  color: var(--color-brand-deep);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
  box-shadow: 0 1px 5px color-mix(in srgb, var(--color-accent) 11%, transparent);
}

/* --- Panneaux et cartes --------------------------------------------------- */

.panneaux {
  display: grid;
  /* Sans ça, le tableau large élargit la grille au lieu de défiler chez lui. */
  min-width: 0;
  min-height: 0;
}

/*
 * Le panneau actif est LE cadre qui défile. Tout au-dessus — titre, tuiles,
 * onglets — reste visible en permanence.
 */
.panneaux > [role="tabpanel"] {
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* La marge de droite évite que la barre de défilement colle aux cartes. */
  padding-right: var(--esp-1);
}

/* L'en-tête du tableau reste lisible pendant qu'on parcourt l'historique. */
.tableau-lignes thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-background);
}

.carte {
  min-width: 0;
  padding: var(--esp-5);
  border-radius: var(--radius-lg);
  background: var(--color-background);
  border: 1px solid var(--panneau-bordure);
  box-shadow: var(--shadow-carte);
  animation: apparaitre 0.28s ease both;
}

.carte h2 {
  font-size: var(--pas-xl);
  margin-bottom: var(--esp-3);
  color: color-mix(in srgb, var(--color-text) 94%, var(--color-brand-deep));
}

.carte-succes {
  border-left: 3px solid var(--etat-ok);
}
.carte-attention {
  border-left: 3px solid var(--etat-attention);
}
.carte-erreur {
  border-left: 3px solid var(--etat-erreur);
}

.etat-chargement {
  color: var(--color-muted);
}

.etat-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  align-items: baseline;
  margin-bottom: var(--esp-2);
}

.etat-ligne:last-child {
  margin-bottom: 0;
}

.etiquette {
  min-width: 10rem;
  font-size: var(--pas-sm);
  color: var(--color-muted);
}

.valeur {
  font-weight: 600;
}

/* --- Zone de dépôt -------------------------------------------------------- */

.depot {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: clamp(2rem, 7vw, 3.25rem) var(--esp-5);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--panneau-lavis), var(--color-background);
  box-shadow: var(--shadow-carte);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.depot:hover {
  border-color: var(--color-accent);
}

.depot-actif {
  border-color: var(--color-brand-deep);
  background-color: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
}

.depot__icone {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.depot__titre {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--pas-2xl);
  letter-spacing: -0.02em;
}

.depot__aide {
  font-size: var(--pas-sm);
  color: var(--color-muted);
  max-width: 42ch;
}

/* --- Boutons -------------------------------------------------------------- */
/*
 * Même géométrie que `.button` du thème (rayon, ombre, majuscules espacées),
 * mais encre foncée au lieu du blanc : blanc sur `--color-accent` ne donne que
 * 2,8:1, sous le seuil AA de 4,5:1. Le noir sur le même rose monte à 6,2:1 —
 * on garde donc le rose exact de la boutique, en le rendant lisible.
 */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
  padding: 0.75rem 1.35rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-text);
  box-shadow: var(--shadow-accent);
  font: inherit;
  font-size: var(--pas-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bouton:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 122, 144, 0.36);
}

.bouton-discret {
  margin-top: 0;
  padding: 0.3rem 0.7rem;
  background: none;
  border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-text));
  color: var(--color-brand-deep);
  box-shadow: none;
  letter-spacing: 0.03em;
}

.bouton-discret:hover {
  transform: none;
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
  box-shadow: none;
}

/* --- Bande défilante des fournisseurs -------------------------------------- */
/*
 * Même mécanique que `sections/marquee-strip.liquid` du thème : une piste
 * dupliquée, translatée de -50 %. La seconde copie prend la place de la
 * première à la fin du cycle, donc la boucle ne saute pas.
 *
 * Aucun écouteur de défilement ici : c'est une animation CSS, pas un conteneur
 * qui défile. Le geste vertical continue de faire défiler la page — règle
 * apprise n°2 du projet.
 */

.bandeau-defilant {
  overflow: hidden;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  border: 1px solid var(--panneau-bordure);
  background: color-mix(in srgb, var(--color-accent) 7%, #ffffff);
  padding-block: clamp(0.45rem, 1.2vw, 0.65rem);
  /* Le masque évite que les noms n'apparaissent et ne disparaissent net sur
     les bords : ils se fondent au lieu d'être coupés. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bandeau-defilant__piste {
  display: inline-flex;
  animation: defilement-fournisseurs 40s linear infinite;
  will-change: transform;
}

.bandeau-defilant:hover .bandeau-defilant__piste {
  animation-play-state: paused;
}

.bandeau-defilant__liste {
  display: inline-flex;
  align-items: center;
}

.bandeau-defilant__item {
  font-size: var(--pas-xs);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--color-brand-deep);
  padding-inline: 0.35rem;
}

.bandeau-defilant__sep {
  font-size: 0.5rem;
  color: var(--color-accent);
  padding-inline: 0.6rem;
  vertical-align: middle;
}

@keyframes defilement-fournisseurs {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --- Progression ---------------------------------------------------------- */
/*
 * Vraies puces reliées par un rail, au lieu des glyphes texte « ○ ● ◐ » qui
 * changeaient de dessin selon la police installée.
 */

.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-3);
}

.etape {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  color: var(--color-muted);
  font-size: var(--pas-sm);
}

.etape__puce {
  position: relative;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-background);
}

/* Rail qui relie une puce à la suivante. */
.etape:not(:last-child) .etape__puce::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  translate: -50% 0;
  width: 2px;
  height: calc(var(--esp-3) + 0.2rem);
  background: var(--color-border);
}

.etape--fait {
  color: var(--color-text);
}

.etape--fait .etape__puce {
  border-color: var(--etat-ok);
  background: var(--etat-ok);
}

.etape--fait .etape__puce::after {
  background: var(--etat-ok);
}

.etape--encours {
  color: var(--color-text);
  font-weight: 600;
}

.etape--encours .etape__puce {
  border-color: var(--color-brand-deep);
  animation: pulsation 1.4s ease-in-out infinite;
}

@keyframes pulsation {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  60% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
}

@keyframes apparaitre {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* --- Pastilles d'état ----------------------------------------------------- */
/*
 * La couleur ne porte jamais seule : chaque pastille garde son libellé écrit.
 * Le vert et l'ambre ne se séparent qu'à ΔE 7,2 en vision protanope — le mot
 * est ce qui tranche.
 */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--pas-2xs);
  font-weight: 600;
  white-space: nowrap;
}

.pastille::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

.pastille-ok {
  background: color-mix(in srgb, var(--etat-ok) 12%, #ffffff);
  color: var(--etat-ok);
}

.pastille-attention {
  background: color-mix(in srgb, var(--etat-attention) 14%, #ffffff);
  color: var(--etat-attention-encre);
}

.pastille-verif {
  background: color-mix(in srgb, var(--color-accent) 16%, #ffffff);
  color: var(--color-brand-deep);
}

.pastille-erreur {
  background: color-mix(in srgb, var(--etat-erreur) 10%, #ffffff);
  color: var(--etat-erreur);
}

.pastille-attente {
  background: var(--color-surface);
  color: var(--color-secondary);
}

.avertissement {
  margin: var(--esp-3) 0;
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--etat-attention);
  background: color-mix(in srgb, var(--etat-attention) 8%, #ffffff);
  color: var(--etat-attention-encre);
  font-size: var(--pas-sm);
}

/* --- Filtres de l'historique ---------------------------------------------- */
/* Une seule rangée au-dessus du tableau : les filtres se lisent d'un coup, et
   ce qu'ils cachent se dit dans le compte du titre (« 3 sur 12 »). */

.filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--panneau-bordure);
}

.filtre {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.filtre--large {
  flex: 1;
  min-width: 12rem;
}

.filtre__etiquette {
  font-size: var(--pas-2xs);
  font-weight: 600;
  color: var(--color-muted);
}

.filtres .bouton-discret {
  margin-bottom: 0.1rem;
}

/* --- En-têtes triables ----------------------------------------------------- */

.tri {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tri:hover {
  color: var(--color-brand-deep);
}

.tri--actif {
  color: var(--color-brand-deep);
}

/* Réservée en permanence : sans largeur fixe, la colonne sautait d'un cran au
   moment où la flèche apparaît. */
.tri__fleche {
  width: 0.7rem;
  font-size: 0.55rem;
}

.nombre .tri {
  /* Le libellé reste collé à droite, au-dessus de ses chiffres. */
  flex-direction: row-reverse;
}

/* --- Tableaux ------------------------------------------------------------- */

.table-defilante {
  overflow-x: auto;
  margin-top: var(--esp-3);
}

.tableau-lignes {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--pas-sm);
}

.tableau-lignes th {
  text-align: left;
  padding: var(--esp-2) var(--esp-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--pas-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.tableau-lignes td {
  padding: var(--esp-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, #ffffff);
  vertical-align: middle;
}

.tableau-lignes tbody tr {
  transition: background 0.12s ease;
}

.tableau-lignes tbody tr:hover {
  background: color-mix(in srgb, var(--color-accent) 5%, #ffffff);
}

.tableau-lignes tbody tr:last-child td {
  border-bottom: none;
}

/* Colonnes de chiffres : là, l'alignement vertical prime sur la largeur. */
.tableau-lignes .nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cellule-tailles {
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  font-size: var(--pas-xs);
}

.cellule-actions {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  white-space: nowrap;
}

/*
 * L'historique porte neuf colonnes, et sa cellule d'actions en compte trois.
 * Mesuré : le tableau réclamait 1111 px pour un cadre de 1082 — vingt-neuf de
 * trop, et la poubelle sortait par la droite. On resserre les gouttières
 * plutôt que d'imposer un défilement horizontal sur une action fréquente.
 *
 * Le plancher, lui, ne sert que sous 58 rem : là, le tableau défile pour de
 * bon au lieu de s'écraser.
 */
#historique-corps .tableau-lignes {
  min-width: 58rem;
}

#historique-corps .tableau-lignes th,
#historique-corps .tableau-lignes td {
  padding-inline: 0.55rem;
}

#historique-corps .cellule-actions {
  gap: 0.35rem;
}

/* Une date ne se coupe pas en deux : le troisième bouton d'action a serré le
   tableau, et « 2026-08-07 » passait sur deux lignes. */
.tableau-lignes td[data-libelle="Déposée"],
.tableau-lignes td[data-libelle="Date"] {
  white-space: nowrap;
}

.sans-pdf {
  color: var(--color-muted);
  padding: 0 var(--esp-2);
}

/* --- État vide ------------------------------------------------------------ */

.vide {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-4);
  text-align: center;
}

.vide__icone {
  width: 3rem;
  height: 3rem;
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vide__titre {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--pas-lg);
}

.vide__aide {
  font-size: var(--pas-sm);
  color: var(--color-muted);
  max-width: 38ch;
}

/* --- Fenêtre de la facture ------------------------------------------------ */
/* `<dialog>` natif : fond assombri, piège de focus et fermeture par Échap
   viennent du navigateur, sans une ligne de script. */

.fenetre {
  /* Presque plein écran : on compare un PDF à sa lecture, la place est le
     premier confort. Hauteur figée, jamais dépassée — ce sont les volets qui
     défilent. */
  width: min(100rem, calc(100vw - 2rem));
  height: min(58rem, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: none;
  border-radius: var(--radius-xl);
  background: var(--color-background);
  color: var(--color-text);
  box-shadow: 0 1.5rem 3.5rem rgba(45, 42, 48, 0.28);
  overflow: hidden;
}

/*
 * La mise en page ne s'applique QU'À L'ÉTAT OUVERT. Un `display: flex` sur
 * `.fenetre` tout court écrase le `display: none` que le navigateur pose sur
 * un `<dialog>` fermé : la fenêtre restait alors étalée sur la page, invisible
 * mais interceptant tous les clics.
 */
.fenetre[open] {
  display: flex;
  flex-direction: column;
  animation: apparaitre 0.2s ease both;
}

.fenetre::backdrop {
  background: rgba(26, 28, 28, 0.5);
  backdrop-filter: blur(2px);
}

.fenetre-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--panneau-bordure);
  background: var(--panneau-lavis), var(--color-background);
  /* L'en-tête reste visible quand la liste des lignes défile. */
  position: sticky;
  top: 0;
}

.fenetre-entete h2 {
  font-size: var(--pas-xl);
  color: color-mix(in srgb, var(--color-text) 94%, var(--color-brand-deep));
}

.fenetre-fermer {
  border: none;
  background: none;
  color: var(--color-muted);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 var(--esp-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.fenetre-fermer:hover {
  color: var(--color-brand-deep);
}

.fenetre-actions {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.fenetre-actions .bouton {
  margin-top: 0;
}

.bouton:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/*
 * Fenêtre d'avertissement : étroite, et haute seulement de son contenu.
 *
 * Le sélecteur double n'est pas un tic : `.fenetre` fixe une hauteur pleine
 * pour la comparaison PDF, et à spécificité égale c'est l'ordre du fichier qui
 * tranche. Sans ce renfort, l'avertissement s'étirait sur tout l'écran avec un
 * grand vide sous ses deux boutons.
 */
.fenetre.fenetre--etroite {
  width: min(30rem, calc(100vw - 2rem));
  /*
   * `fit-content`, surtout pas `auto`. Un `<dialog>` modal est en
   * `position: fixed` avec `inset: 0` ; en positionnement absolu, une hauteur
   * `auto` bornée en haut ET en bas remplit tout l'espace disponible. C'est
   * pour ça que la feuille du navigateur lui donne `fit-content` — l'écraser
   * avec `auto` rallume l'étirement, et l'avertissement occupait tout l'écran
   * avec un grand vide sous ses boutons.
   */
  height: fit-content;
  max-height: calc(100dvh - 4rem);
}

.fenetre--etroite .fenetre-corps {
  overflow-y: auto;
}

.fenetre-pied {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

/* Précision utile, ni alerte ni danger : la teinte de la marque, comme le
   récapitulatif d'envoi, sans sa marge. */
.bandeau--note {
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
  border-left: 3px solid var(--color-accent);
}

.bandeau--danger {
  background: color-mix(in srgb, var(--etat-erreur) 8%, #ffffff);
  border-left: 3px solid var(--etat-erreur);
  color: var(--color-text);
}

/*
 * Le geste destructeur porte la couleur de l'erreur, pas le rose de la marque :
 * il ne doit jamais se confondre avec l'action ordinaire.
 */
.bouton-danger {
  margin-top: 0;
  background: var(--etat-erreur);
  border-color: var(--etat-erreur);
  color: #ffffff;
  box-shadow: none;
}

.bouton-danger:hover {
  background: color-mix(in srgb, var(--etat-erreur) 85%, #000000);
  border-color: color-mix(in srgb, var(--etat-erreur) 85%, #000000);
  box-shadow: none;
}

/*
 * Bouton réduit à son icône. Carré et non pastille : à côté de « DÉTAIL » et
 * « PDF » qui sont du texte, une forme différente se repère plus vite qu'une
 * couleur — et la cible reste à 2 rem, doigt compris.
 */
.bouton-icone {
  padding: 0;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-sm);
}

.bouton-icone svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Discret dans le tableau — c'est la fenêtre qui porte l'avertissement. */
.bouton-supprimer {
  color: var(--etat-erreur);
}

.bouton-supprimer:hover {
  border-color: var(--etat-erreur);
  background: color-mix(in srgb, var(--etat-erreur) 7%, #ffffff);
}

/* --- Comparaison : le document à gauche, sa lecture à droite -------------- */

/*
 * Le document prend tout ce que l'analyse ne réclame pas.
 *
 * Un partage en pourcentages fixes servait mal les deux : l'analyse a un
 * besoin PRÉCIS — la largeur de son tableau de six colonnes, ni plus ni moins
 * — tandis que le PDF profite de chaque pixel supplémentaire. D'où une colonne
 * de droite bornée, et une colonne de gauche qui absorbe le reste : sur un
 * écran large, c'est le document qui s'agrandit.
 */
.comparaison {
  flex: 1;
  min-height: 0;
  display: grid;
  /*
   * Moitié-moitié dès qu'il y a la place, et jamais moins que ce que le
   * tableau exige : son plancher de 41 rem plus les gouttières font 46 rem.
   * Sans ce minimum, à 1440 il manquait 32 px et le tableau se mettait à
   * défiler horizontalement — donc tout n'était plus visible d'un coup.
   */
  grid-template-columns: minmax(0, 1fr) minmax(47rem, 1fr);
}

.volet {
  min-width: 0;
  min-height: 0;
}

.volet--document {
  border-right: 1px solid var(--panneau-bordure);
  background: var(--color-surface);
  display: grid;
  place-items: stretch;
}

.apercu-pdf {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.volet__vide {
  place-self: center;
  padding: var(--esp-5);
  max-width: 30ch;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--pas-sm);
}

.volet--analyse {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fenetre-corps {
  padding: var(--esp-5);
  display: grid;
  gap: var(--esp-4);
}

/* --- Formulaire de correction --------------------------------------------- */

.bloc {
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--panneau-bordure);
  border-radius: var(--radius-md);
  min-width: 0;
}

.bloc__titre {
  padding: 0 var(--esp-2);
  font-size: var(--pas-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Quatre colonnes : empilés, l'en-tête et les totaux faisaient huit rangées et
   repoussaient les lignes de la facture hors de l'écran. */
/*
 * Trois bandes partagees : etiquette, saisie, aide.
 *
 * Chaque `.champ` etait une grille isolee, et rien n'alignait ses lignes sur
 * celles de son voisin : un champ dont l'aide tient sur deux lignes etirait le
 * champ d'a cote, dont la saisie devenait plus haute que les autres. `subgrid`
 * fait porter les trois lignes par la grille PARENTE — les etiquettes se
 * suivent, les saisies aussi, et une aide longue ne pousse plus que la bande
 * d'aide.
 */
.grille-champs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--esp-3) var(--esp-3);
  align-items: start;
}

.champ {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.grille-champs > .champ {
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0.2rem;
}

/* Une saisie et une liste deroulante n'ont pas la meme hauteur naturelle. Sans
   plancher commun, deux champs cote a cote ne se repondent pas. */
.champ__saisie {
  min-height: 2.15rem;
}

.champ--large {
  grid-column: span 2;
}

.champ__etiquette {
  font-size: var(--pas-2xs);
  font-weight: 600;
  color: var(--color-muted);
}

.champ__aide {
  font-size: var(--pas-2xs);
  color: var(--color-muted);
}

.champ__saisie {
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: inherit;
  font: inherit;
  font-size: var(--pas-sm);
}

.champ__saisie:hover {
  border-color: var(--color-accent);
}

/*
 * Saisie en cellule : le cadre n'apparaît qu'au survol ou au focus, sinon un
 * tableau de dix lignes ressemblerait à un formulaire administratif.
 *
 * C'est un `<textarea>` qui s'ajuste à son texte, pas un champ d'une ligne :
 * « XS:1 S:1 M:1 L:1 XL:1 XXL:1 » ne tient pas sur une ligne dans un demi-
 * écran, et une valeur coupée est exactement ce qu'on vient vérifier.
 * `field-sizing` fait le travail sur Chrome ; ailleurs, app.js règle la
 * hauteur.
 */
.cellule__saisie {
  width: 100%;
  min-width: 4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--pas-sm);
  line-height: 1.35;
  field-sizing: content;
  overflow-wrap: normal;
  word-break: normal;
  resize: none;
  overflow: hidden;
  display: block;
}

.cellule__saisie:hover {
  border-color: var(--color-border);
}

/*
 * Le code article, lui, a le droit de se couper.
 *
 * `word-break: normal` protège « KAbabena » d'une coupure en plein mot, mais
 * une référence n'est pas un mot : elle se lit par morceaux, et mieux vaut
 * « C2689RD/ » puis « 736A » qu'un code tronqué. Ce qu'on vient vérifier ne
 * doit jamais sortir du cadre.
 */
.cellule__saisie[data-chemin$=".code_style"] {
  overflow-wrap: break-word;
  word-break: break-all;
}

.cellule__saisie:focus {
  border-color: var(--color-accent);
  background: var(--color-background);
}

.tableau-lignes--saisie td {
  padding: 0.15rem 0.25rem;
}

/*
 * Largeurs réelles plutôt qu'un partage à parts égales. Serrées dans un demi-
 * écran, les colonnes rognaient ce qu'on vient précisément vérifier :
 * « C3260/811C » devenait « C3260/8 ». En dessous de cette largeur le tableau
 * défile horizontalement dans son cadre — la fenêtre, elle, ne bouge pas.
 */
/*
 * Six colonnes : Code, Couleur, Libellé, Tailles, Qté, Prix.
 * En `table-layout: fixed`, SEULE la première rangée fixe les largeurs — une
 * règle posée sur une cellule du corps n'a aucun effet. Le libellé prend ce
 * qui reste.
 */
.tableau-lignes--saisie {
  /*
   * Plancher mesuré : sous 41 rem, le libellé tombe à 80 px et « KAbabena
   * Denim Shorts » se rogne — un nom d'article ne se coupe pas en plein mot,
   * il ne peut donc que déborder. En dessous, le tableau défile dans son cadre
   * plutôt que d'écraser ses colonnes.
   */
  min-width: 41rem;
  table-layout: fixed;
}

/* Mesuré sur une facture Charlie B : « C2689RD/736A » réclame 111 px, quand
   les codes DK à huit chiffres se contentaient de 82. */
.tableau-lignes--saisie th:nth-child(1) {
  width: 7.25rem;
}
.tableau-lignes--saisie th:nth-child(2) {
  width: 7rem;
}
/* Le libellé et les tailles sont les deux colonnes qui débordent : elles se
   partagent tout ce que les quatre autres ne prennent pas, et leur contenu
   passe sur deux lignes plutôt que d'être coupé. */
.tableau-lignes--saisie th:nth-child(4) {
  width: 9.25rem;
}

/* --- Pastilles de tailles ------------------------------------------------- */
/*
 * Une pastille par taille RÉELLEMENT lue : nom fixe, quantité modifiable, et
 * une croix pour la retirer. Le « + » en ajoute une que le parseur aurait
 * manquée.
 *
 * Tout est calibré pour tenir en DEUX rangées : au-delà, la ligne du produit
 * devient plus haute que ce qu'elle décrit. La croix ne prend aucune place —
 * elle se superpose au coin de la pastille et n'apparaît qu'au survol.
 */

.tailles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  align-items: start;
  /*
   * DEUX RANGÉES, jamais plus : au-delà, la ligne du produit devient plus
   * haute que ce qu'elle décrit. Une facture qui porterait plus de sept
   * tailles défile dans cette case plutôt que d'étirer toute la rangée.
   */
  /* Mesuré, pas estimé : une pastille fait 38,1 px, donc deux rangées plus leur
     gouttière demandent 79 px. */
  max-height: 5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.taille {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding-top: 0.15rem;
  /* Figée : sans ça « XL/XXL » élargit sa pastille et fait déborder la rangée.
     Assez étroite pour que QUATRE tiennent par rangée — à cinq de large, la
     barre de défilement du plafond volait la place de la quatrième, ce qui
     ramenait à trois rangées, ce qui rappelait la barre. */
  width: 1.8rem;
}

.taille__nom {
  width: 100%;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.taille__qte {
  width: 100%;
  padding: 0.1rem 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--pas-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.taille__qte:hover {
  border-color: var(--color-border);
}

.taille__qte:focus {
  border-color: var(--color-accent);
  background: var(--color-background);
}

/* Superposée au coin : elle ne consomme pas de largeur dans la rangée. */
.taille__retirer {
  position: absolute;
  top: -0.25rem;
  right: -0.2rem;
  width: 0.85rem;
  height: 0.85rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--etat-erreur);
  color: #ffffff;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.taille:hover .taille__retirer,
.taille:focus-within .taille__retirer,
.taille__retirer:focus-visible {
  opacity: 1;
}

/*
 * La liste d'ajout garde la taille et l'allure d'un bouton « + ».
 * `appearance: none` retire la flèche native, qui l'aurait élargie de moitié
 * et fait déborder la rangée ; la liste s'ouvre quand même au clic.
 */
.taille-ajouter {
  align-self: end;
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-brand-deep);
  font: inherit;
  font-size: var(--pas-sm);
  line-height: 1;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
  appearance: none;
}

/* Les tailles de la liste, elles, se lisent normalement. */
.taille-ajouter option {
  font-size: var(--pas-sm);
  text-align: left;
}

.taille-ajouter:hover {
  border-color: var(--color-accent);
  border-style: solid;
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
}

.tableau-lignes--saisie th:nth-child(5) {
  width: 3.25rem;
}
.tableau-lignes--saisie th:nth-child(6) {
  width: 4.25rem;
}

/* Sur deux lignes, une cellule doit s'aligner par le haut avec ses voisines. */
.tableau-lignes--saisie td {
  vertical-align: top;
}

.tableau-lignes--saisie .nombre .cellule__saisie {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/*
 * La quantité se centre dans sa colonne. Alignée à droite, elle venait toucher
 * le prix de la colonne suivante : « 6 » et « 49.50 » se lisaient comme un seul
 * nombre. Le prix, lui, reste à droite — c'est un montant, et les montants
 * s'alignent sur leur virgule.
 */
.tableau-lignes--saisie td:nth-child(5) .cellule__saisie {
  text-align: center;
}


/* La ligne que les contrôles arithmétiques désignent. */
.rangee--fautive {
  background: color-mix(in srgb, var(--etat-attention) 9%, #ffffff);
}


/* --- Bandeau des contrôles ------------------------------------------------ */

.bandeau {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radius-md);
  font-size: var(--pas-sm);
}

.bandeau--alerte {
  background: color-mix(in srgb, var(--etat-attention) 10%, #ffffff);
  border-left: 3px solid var(--etat-attention);
  color: var(--etat-attention-encre);
}

/*
 * Le récapitulatif d'envoi. Bleu et non ambre : ce n'est pas une alerte, c'est
 * un constat qu'on demande de valider. L'ambre est réservé à ce qui cloche.
 */
.bandeau--envoi {
  margin: 0 var(--esp-5) var(--esp-3);
  background: color-mix(in srgb, var(--color-accent) 8%, #ffffff);
  border-left: 3px solid var(--color-accent);
}

/*
 * « Annuler » dans le tableau : il change l'inventaire de la boutique, là où
 * « Détail » et « PDF » ne font que montrer. L'encre ambre le distingue sans
 * en faire une alerte — ce n'est pas une erreur, c'est un geste qui compte.
 */
.bouton-annuler {
  color: var(--etat-attention-encre);
  border-color: color-mix(in srgb, var(--etat-attention) 45%, transparent);
}

/* Dans la carte de l'historique, la marge latérale de la fenêtre n'a pas lieu
   d'être : la carte porte déjà son propre rembourrage. */
.bandeau--historique {
  margin: 0 0 var(--esp-4);
}

.bandeau--envoi.bandeau--alerte {
  background: color-mix(in srgb, var(--etat-attention) 10%, #ffffff);
  border-left-color: var(--etat-attention);
}

.bandeau__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-4);
  margin: var(--esp-2) 0 0;
  padding: 0;
  list-style: none;
}

.bandeau__chiffre strong {
  font-variant-numeric: tabular-nums;
}

.bandeau__titre {
  font-weight: 600;
}

.bandeau__liste {
  margin: var(--esp-2) 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: var(--esp-2);
}

.note-correction {
  font-size: var(--pas-xs);
  color: var(--color-muted);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 64rem) {
  .onboarding__carte {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipe__invitation {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.6fr);
  }

  .equipe__invitation .bouton {
    justify-self: start;
  }

  .tuiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grille-champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * Deux volets côte à côte sous 1024 px donneraient deux colonnes trop
   * étroites pour l'un comme pour l'autre. Empilés, le document garde une
   * hauteur fixe et l'analyse prend le reste — chacun défilant chez lui, la
   * fenêtre elle-même ne défile toujours pas.
   */
  .comparaison {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
  }

  .volet--document {
    border-right: none;
    border-bottom: 1px solid var(--panneau-bordure);
  }
}

@media (max-width: 40rem) {
  :root {
    --hauteur-barre: 3.5rem;
  }

  .onboarding {
    padding: var(--esp-4);
  }

  .onboarding__carte {
    gap: var(--esp-5);
    padding: var(--esp-5);
  }

  .onboarding__etapes {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipe__invitation {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipe__lien {
    align-items: stretch;
    flex-direction: column;
  }

  /*
   * Les tuiles restent sur deux colonnes jusqu'en bas. Empilées, elles
   * repoussaient la zone de dépôt — l'action principale — sous la ligne de
   * flottaison d'un téléphone.
   */
  .tuiles {
    gap: var(--esp-2);
  }

  .tuile {
    padding: var(--esp-3);
  }

  /* Le cumul « depuis le début » saute ; l'écart à trancher, lui, reste. */
  .tuile:not(.tuile--attention) .tuile__note {
    display: none;
  }

  .carte {
    padding: var(--esp-4);
  }

  .etiquette {
    min-width: 100%;
  }

  .barre-etat__utilisatrice span:not(.jeton-initiales) {
    display: none;
  }

  .marque__logo {
    /* Sur mobile la barre doit rester basse : le logo grandit, mais moins. */
    max-height: 2.5rem;
  }

  .grille-champs {
    grid-template-columns: minmax(0, 1fr);
  }

  .fenetre {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .fenetre-corps {
    padding: var(--esp-4);
  }

  /* Les inputs en cellule reprennent leur cadre : dans la liste de cartes du
     mode téléphone, un champ sans bordure ne se voit plus comme modifiable. */
  .cellule__saisie {
    border-color: var(--color-border);
    background: var(--color-background);
  }

  /* En cartes empilées, la largeur minimale du tableau n'a plus de sens. */
  .tableau-lignes--saisie {
    min-width: 0;
    table-layout: auto;
  }


  /*
   * Neuf colonnes ne tiennent pas sur un téléphone. Le tableau devient une
   * liste de cartes empilées — en CSS seul : un unique balisage, aucun DOM
   * dupliqué, aucune media query en JavaScript. Le nom de colonne est repris
   * de l'attribut `data-libelle` posé sur chaque cellule.
   */
  .table-defilante {
    overflow-x: visible;
  }

  .tableau-lignes,
  .tableau-lignes tbody,
  .tableau-lignes tr,
  .tableau-lignes td {
    display: block;
    width: 100%;
  }

  .tableau-lignes thead {
    /* `display: none` sortirait l'en-tête de l'arbre d'accessibilité. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tableau-lignes tr {
    margin-bottom: var(--esp-3);
    padding: var(--esp-3);
    border: 1px solid var(--panneau-bordure);
    border-radius: var(--radius-md);
    background: var(--color-background);
  }

  .tableau-lignes tbody tr:last-child {
    margin-bottom: 0;
  }

  .tableau-lignes td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--esp-3);
    align-items: baseline;
    padding: var(--esp-1) 0;
    border-bottom: none;
    text-align: left;
  }

  .tableau-lignes td[data-libelle]::before {
    content: attr(data-libelle);
    font-size: var(--pas-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
  }

  .tableau-lignes .nombre {
    text-align: left;
  }

  .cellule-actions {
    padding-top: var(--esp-2);
  }
}

/* --- Navigation entre les factures d'un même PDF --------------------------- */

/*
 * Cette barre doit se voir. Un PDF Tribal porte plusieurs factures, et rien à
 * l'écran ne le laisse deviner : sans repère visible, la seconde reste
 * ignorée. D'où le cadre plein, à côté du titre et non perdu dans les actions.
 */
.fenetre-fratrie {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-right: auto;
  margin-left: var(--esp-4);
  padding: var(--esp-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--pas-sm);
  font-weight: 600;
  white-space: nowrap;
}

.fenetre-fratrie__rang {
  padding: 0 var(--esp-2);
}

.fenetre-fratrie button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: var(--radius-pill);
  font-size: var(--pas-xl);
  line-height: 1;
}

.fenetre-fratrie button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/*
 * Une facture n'a pas encore été ouverte : la barre passe en signal, et la
 * flèche qui y mène bat doucement. L'envoi est bloqué tant que c'est le cas —
 * le mouvement dit où cliquer pour le débloquer.
 */
.fenetre-fratrie--attente {
  border-color: var(--etat-attention);
  background: color-mix(in srgb, var(--etat-attention) 12%, #ffffff);
  color: var(--etat-attention-encre);
}

.fenetre-fratrie--attente #facture-suivante:not(:disabled) {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #ffffff;
  animation: fratrie-appel 1.6s ease-in-out infinite;
}

@keyframes fratrie-appel {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 0%, transparent);
  }
}

/* --- Dépôt à plusieurs factures ------------------------------------------- */

.depot-multiple {
  list-style: none;
  margin: var(--esp-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

.depot-multiple__ligne {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.depot-multiple__numero {
  font-weight: 600;
}

/* Pousse le bouton à droite sans marge négative ni valeur en dur. */
.depot-multiple__total {
  color: var(--color-muted);
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

/* --- Produits ------------------------------------------------------------- */

.tableau-produits td {
  vertical-align: middle;
}

.produit__visuel {
  width: 3.5rem;
}

.produit__vignette {
  width: 3rem;
  height: 3.75rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  display: block;
  background: var(--color-surface);
}

.produit__vignette--vide {
  display: grid;
  place-items: center;
  color: var(--color-muted);
}

.produit__titre {
  display: block;
  font-weight: 600;
}

.produit__handle {
  display: block;
  color: var(--color-muted);
  font-size: var(--pas-xs);
}

/* Une liste de coloris peut être longue ; le titre complet reste en infobulle. */
.produit__couleurs {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.produit__nombre {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.produit__note {
  display: block;
  color: var(--etat-attention-encre);
  font-size: var(--pas-xs);
}

/* --- Fiches incomplètes --------------------------------------------------- */

.visuel-aide {
  color: var(--color-muted);
  margin: 0 0 var(--esp-3);
}

.visuel-liste {
  display: grid;
  gap: var(--esp-4);
  margin-top: var(--esp-5);
}

.fiche {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--esp-4);
}

.fiche__tete h3 {
  margin: 0;
  font-size: 1rem;
}

.fiche__meta {
  margin: var(--esp-1) 0 var(--esp-3);
  color: var(--color-muted);
  font-size: 0.875rem;
}

.manques {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
}

.manque {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  flex-wrap: wrap;
  padding: var(--esp-2) var(--esp-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  /* Le rail de gauche porte la gravité ; le libellé la porte aussi en toutes
     lettres, la couleur seule ne disant rien à qui ne la distingue pas. */
  border-left: 3px solid var(--etat-attention);
}

.manque--bloquant {
  border-left-color: var(--etat-erreur);
}

.manque__type {
  font-weight: 600;
  min-width: 7rem;
}

.manque__detail {
  color: var(--color-muted);
  font-size: 0.875rem;
  margin-right: auto;
}

/*
 * Un `<label>` qui contient l'`<input type="file">` : c'est le label qui ouvre
 * le sélecteur, sans une ligne de JavaScript. Le champ reste dans le DOM —
 * `display: none` le retirerait de la navigation au clavier.
 */
.manque__action {
  cursor: pointer;
}

.manque__action:has(input:disabled) {
  opacity: 0.6;
  cursor: progress;
}

/* --- Réglage de la pastille ------------------------------------------------ */

.pastille-validation {
  flex-basis: 100%;
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--color-border);
}

.pastille-reglage {
  display: flex;
  gap: var(--esp-4);
  flex-wrap: wrap;
  align-items: flex-start;
}

/*
 * La scène porte la photo et le rond. `position: relative` sur elle, `absolute`
 * sur le rond, et tout se place en POURCENTAGES : l'image est fluide, un
 * positionnement en pixels dériverait au moindre changement de largeur.
 */
.pastille-scene {
  position: relative;
  flex: 0 0 auto;
  width: min(260px, 100%);
  line-height: 0;
  touch-action: none; /* sans quoi le doigt fait défiler la page au lieu de glisser */
  cursor: crosshair;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.pastille-scene__photo {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/*
 * Le rond d'échantillonnage. `aspect-ratio: 1` plutôt qu'une hauteur : le carré
 * mesuré est carré en PIXELS de la photo, et la largeur est déjà exprimée en
 * fraction de celle-ci.
 *
 * Double anneau — un trait sombre bordé de blanc — pour rester visible aussi
 * bien sur un tissu noir que sur du blanc cassé.
 */
.pastille-cible {
  position: absolute;
  aspect-ratio: 1;
  border-radius: var(--radius-pill);
  border: 2px solid #ffffff;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  cursor: grab;
}

.pastille-cible:active {
  cursor: grabbing;
}

.pastille-lecture {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  flex: 1 1 16rem;
}

/*
 * Le prélèvement retenu, à une taille où l'œil juge vraiment la couleur.
 *
 * **Rond, comme le rond qu'on déplace, et comme Shopify l'affichera.**
 *
 * Il était carré. Trois formes cohabitaient donc pour une même chose : un rond
 * sur la photo, un carré en aperçu, un rond en boutique — et ce qui logeait
 * dans les coins du carré n'avait jamais été visé. « La pastille devrait être
 * pareille à ce qu'il y a dans le rond », et c'était exact.
 *
 * La forme suit maintenant la mesure : `mesurerCarre` ne lit que le disque, et
 * `decouperPastille` ne découpe que le disque.
 */
.pastille-lecture__image,
.pastille-lecture__aplat {
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  object-fit: cover;
  flex: none;
}

.pastille-lecture__aplat {
  display: block;
}

.pastille-lecture__texte p {
  margin: 0;
}

.pastille-lecture__note,
.pastille-lecture__aide {
  color: var(--color-muted);
  font-size: 0.875rem;
}

.pastille-lecture__aide {
  margin-top: var(--esp-2) !important;
}

.pastille-validation__actions {
  display: flex;
  gap: var(--esp-2);
  flex-wrap: wrap;
  margin-top: var(--esp-3);
}

/*
 * La glissière de taille du prélèvement.
 *
 * Elle porte un réglage que la molette fait aussi — mais la molette ne se
 * découvre pas. La barre est donc l'interface, les raccourcis en sont
 * l'accélérateur.
 */
.pastille-taille {
  display: grid;
  gap: var(--esp-1);
  margin-top: var(--esp-3);
  max-width: 22rem;
}

.pastille-taille__nom {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.pastille-taille__barre {
  width: 100%;
  /* La piste native suit la couleur d'accent du système ; on la force sur la
     palette de l'application, sinon elle jure sur un poste au thème coloré. */
  accent-color: var(--color-accent, #1a56db);
  cursor: pointer;
}

.pastille-taille__barre:focus-visible {
  outline: 2px solid var(--color-accent, #1a56db);
  outline-offset: 3px;
}

/* --- Mouvement réduit ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .bouton:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   Confirmation
   --------------------------------------------------------------------------- */

/*
 * Remplace `confirm()`. Le dialogue natif annonce le nom de l'hébergeur avant
 * la question et garde ses boutons dans la langue du navigateur : pour un geste
 * qui touche un inventaire, il ressemble à une alerte technique alors que c'est
 * une décision de gestion.
 *
 * La question NOMME ce qu'elle vise — fournisseur et numéro de facture dans un
 * bandeau. Une question générique se répond machinalement.
 */
#fenetre-confirmation .fenetre-corps {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

#fenetre-confirmation #confirmation-detail {
  margin: 0;
  font-weight: 600;
}

#fenetre-confirmation #confirmation-corps {
  margin: 0;
  color: var(--color-text-doux, inherit);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Le bouton sûr passe en premier : la lecture s'arrête sur « Annuler » avant
   d'atteindre le geste irréversible. */
#fenetre-confirmation .fenetre-pied {
  margin-top: var(--esp-1);
}


/* --- Fenêtre de création de produit ---------------------------------------- */

/*
 * Même disposition que la fenêtre de vérification : la pièce à regarder à
 * gauche, la fiche à remplir à droite. Réutiliser `.comparaison` et `.volet`
 * évite d'avoir deux grilles qui se ressemblent sans se ressembler tout à fait.
 */
/*
 * Le volet ne defile pas : tout ce qu'il porte doit tenir dans sa hauteur.
 * Un panneau de reglage qu'on doit faire defiler cache la moitie de ce qu'on
 * regle — la photo en haut, l'echantillon en bas — et on ne compare plus rien.
 * C'est donc la PHOTO qui se plie a la hauteur disponible (voir plus bas), pas
 * le volet qui s'allonge.
 */
.volet--visuels {
  overflow: hidden;
  border-right: 1px solid var(--panneau-bordure);
  background: var(--color-surface);
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-height: 0;
}

.creation-vide {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  flex: 1;
  min-height: 0;
}

/* L'en-tete garde sa mesure de lecture ; le reste prend toute la largeur. */
.creation-vide > p {
  max-width: 34ch;
}

.creation-vide__titre {
  font-weight: 600;
  color: var(--color-muted);
}

.creation-photo {
  display: grid;
  gap: var(--esp-3);
}

.creation-photo__actions {
  display: flex;
  gap: var(--esp-2);
}

.creation-coloris {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.2rem;
  font-size: var(--pas-sm);
}

/* Le code d'imprimé du fournisseur : présent pour être recoupé avec la
   facture, discret pour ne pas concurrencer le nom du coloris. */
.creation-code {
  font-family: var(--police-mono, ui-monospace, monospace);
  font-size: var(--pas-2xs);
  color: var(--color-muted);
}

/*
 * Les candidats trouves chez le fournisseur.
 *
 * La preuve sous la vignette n'est pas une legende decorative : c'est elle qui
 * permet de verifier au lieu de croire. Elle reste donc lisible, jamais
 * reduite a une infobulle.
 */
.creation-candidats {
  display: grid;
  gap: var(--esp-3);
  width: 100%;
}

.creation-candidat {
  margin: 0;
  display: grid;
  gap: var(--esp-2);
}

.creation-candidat__choix {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.creation-candidat__choix:hover,
.creation-candidat__choix:focus-visible {
  border-color: var(--color-accent);
}

.creation-candidat__choix img {
  width: 100%;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.creation-candidat__preuve {
  font-size: var(--pas-2xs);
  color: var(--color-muted);
  max-width: 34ch;
  line-height: 1.5;
}

.creation-candidat__preuve code {
  font-family: var(--police-mono, ui-monospace, monospace);
  color: var(--color-text);
}

/* ------------------------------------------------------------------ *
 * Une pastille par coloris
 *
 * Shopify ne lie l'option Couleur que lorsque TOUTES ses valeurs portent une
 * pastille. Les coloris se montrent donc tous, y compris ceux sans photo —
 * en cacher un le ferait oublier, et il suffit d'un seul manquant pour
 * qu'aucune pastille ne s'affiche en boutique.
 * ------------------------------------------------------------------ */

.creation-pastilles {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1rem;
  /* Partage la hauteur restante entre les coloris au lieu de defiler. */
  flex: 1;
  min-height: 0;
}

.creation-coloris-bloc {
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--gris-bordure, #e6e6e6);
  display: flex;
  flex-direction: column;
  /* `1 1 0` : deux coloris se partagent la hauteur a parts egales, trois aussi.
     `min-height: 0` sans quoi la photo imposerait sa taille naturelle et
     ferait deborder le volet. */
  flex: 1 1 0;
  min-height: 0;
}

.creation-coloris-bloc:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.creation-coloris-bloc__nom {
  margin: 0 0 0.5rem;
  font-weight: 600;
  flex: none;
}

/*
 * Photo a gauche, echantillon et description a droite — cote a cote, jamais
 * l'un sous l'autre : c'est la comparaison des deux qui dit si le rond est
 * bien pose, et elle demande de les voir ensemble.
 *
 * La photo se dimensionne par sa HAUTEUR (`height: 100%`, largeur libre) :
 * c'est la hauteur qui manque dans un volet qui ne defile pas. Le rond reste
 * pose en pourcentages de la scene, et la scene epouse l'image — la geometrie
 * ne bouge pas.
 */
.creation-coloris-bloc .pastille-reglage {
  flex: 1;
  min-height: 0;
  flex-wrap: nowrap;
  align-items: stretch;
}

.creation-coloris-bloc .pastille-scene {
  width: auto;
  height: 100%;
  max-width: 60%;
}

.creation-coloris-bloc .pastille-scene__photo {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.creation-coloris-bloc .pastille-lecture {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--esp-3);
  overflow: hidden;
}

/* Un champ rempli par la facture, que personne ne modifie. Le fond gris le
   distingue d'un champ saisissable AVANT qu'on essaie d'y écrire. */
.champ__saisie--lecture {
  background: var(--gris-fond, #f4f4f5);
  color: var(--gris-texte, #4a4a4a);
  cursor: default;
}

/*
 * Ce qui bloque encore l'enregistrement des fiches.
 *
 * C'est un BOUTON, pas un paragraphe : il mène à la première fiche qui manque
 * quelque chose. Il en garde donc les affordances — curseur, survol, focus
 * visible — tout en gardant l'apparence d'un bandeau, pour ne pas ressembler
 * à une seconde action à côté d'« Enregistrer ».
 */
.creation-blocage {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 0;
  border-left: 3px solid var(--color-accent);
}

.creation-blocage:hover {
  background: color-mix(in srgb, var(--color-accent) 14%, #ffffff);
}

/* --- Les collections de la fiche produit ---------------------------------
   Des cases a cocher plutot qu'une liste deroulante multiple : la seconde
   demande un Ctrl-clic, et un Ctrl-clic maladroit efface le premier choix sans
   rien dire. La grille se remplit en colonnes de largeur minimale plutot qu'en
   nombre fixe : la liste vient de Shopify, personne ne sait combien
   d'entrees elle portera. */
.champ.champ--large > .collections {
  grid-column: 1 / -1;
}

fieldset.champ {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* Un fieldset refuse de retrecir sans cela. */
}

.collections {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.35rem var(--esp-3);
  margin-top: 0.35rem;
}

.collection {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--pas-sm);
  cursor: pointer;
}

.collection:hover {
  background: var(--color-surface);
}

/* La cible du focus est la case, mais c'est l'etiquette entiere qui doit se
   voir : au clavier, un anneau de 13 pixels ne se repere pas. */
.collection:has(input:focus-visible) {
  border-color: var(--color-secondary);
  background: var(--color-surface);
}

.collection input {
  accent-color: var(--color-secondary);
  margin: 0;
  flex: none;
}

.collection:has(input:checked) {
  border-color: var(--color-border);
  background: var(--color-surface);
  font-weight: 600;
}
.selecteur-organisation select {
  max-width: 16rem;
  min-height: 2.5rem;
  border: 1px solid var(--bordure, #d7dbe0);
  border-radius: 0.5rem;
  background: #fff;
  padding: 0.45rem 2rem 0.45rem 0.7rem;
  color: inherit;
  font: inherit;
}