/* Jetons du design system CLAIRINNOV (design-system/CLAIRINNOV-design-system.md,
   section 2) et règles du chapitre 9 « Kiosque magasin » : cibles 56 px,
   filets 2 px, corps 17-18 px, aucun état :hover — la borne est tactile,
   chaque état existe au repos et à l'appui, jamais au survol. */
:root {
  --blue: #08366B;
  --blue-deep: #062A55;
  --orange: #E16805;
  --orange-dark: #B95204;
  --cream: #F5ECD8;
  --paper: #F4F6F9;
  --line: #DDE3EB;
  --ink: #474749;
  --muted: #6E7278;
  --radius: 3px;
  --radius-carte: 8px;
  --selection-fond: #FDF3EA;
  --anneau-focus: #7FA8D9;
  /* Bandeaux et retours d'état (design system §7) : le vert et le rouge ne
     servent qu'ici, jamais ailleurs dans l'interface. */
  --succes-fond: #E8F3EC;
  --succes-texte: #1B6E3C;
  --erreur-fond: #FBEAE7;
  --erreur-bordure: #EDB5AC;
  --erreur-texte: #8E2718;
}

/* Polices auto-hébergées. Chemins RELATIFS (assets/fonts/…, pas /assets/fonts/…) :
   le design system les déclare en absolu, mais ce dépôt peut être déployé hors
   de la racine du domaine — un chemin absolu casserait tout chargement. */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("assets/fonts/roboto-300.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/roboto-condensed-500.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/roboto-condensed-700.woff2") format("woff2"); }

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
p { margin: 0 0 16px; text-wrap: pretty; }

/* Anneau de focus clavier/lecteur d'écran — jamais supprimé (règle non
   négociable du design system, section 6). */
:focus-visible {
  outline: 3px solid var(--anneau-focus);
  outline-offset: 2px;
}

/* ---------- Coquille ---------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.ecran {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.ecran--sans-defilement {
  overflow: hidden;
}

.ecran-a-venir {
  padding: 32px 34px;
  font-size: 15px;
  color: var(--muted);
}

/* Écran de repli quand un chargement de données échoue (voir donnees.js et
   demarrage.js). Pas de maquette fournie pour un état d'erreur : on réutilise
   les seuls éléments déjà spécifiés ailleurs — titre de section, corps de
   texte par défaut, bouton contour — plutôt que d'inventer un style propre. */
.ecran-erreur {
  padding: 32px 34px;
  max-width: 60ch;
}

.ecran-erreur .titre-section {
  margin-bottom: 8px;
}

/* ---------- Boutons génériques de l'en-tête et de l'accueil ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px;
  border-radius: var(--radius);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--blue);
  /* Design system §7 (.btn) : posé ici plutôt qu'oublié — aucun bouton n'était
     un <a> avant le bon de commande (ecran-bon.js, « Terminer »), donc
     l'absence ne se voyait pas encore : un <button> n'a pas de soulignement
     par défaut, un <a> si. */
  text-decoration: none;
}

/* Traitement du désactivé donné par le design system (section Boutons,
   `.btn:disabled{opacity:.42;cursor:not-allowed}`) — jamais inventé : sans
   cette règle, le pied du tiroir vide (fix round 1, tâche 12) rendait
   « Créer le bon de commande » désactivé mais visuellement identique à sa
   version active, orange plein compris. */
.bouton:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Deux variantes génériques, introduites par le tiroir « Ma sélection » (tâche
   12) qui en a besoin à trois endroits (confirmation par article, bandeau
   d'annulation, pied) : les valeurs ne sont pas nouvelles, elles reprennent
   telles quelles .modale__bouton--orange / .barre-action__bouton--voir —
   seule la portée devient générique plutôt que dupliquée par composant. */
.bouton--orange {
  background: var(--orange);
  color: #fff;
  border: 0;
}

.bouton--contour-bleu {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

/* Croix de fermeture 56×56, contour 2 px (handoff §2 popup scan, §5 tiroir) :
   même composant dans les deux surcouches, jamais un survol (règle kiosque). */
.bouton-fermer {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  color: var(--blue);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- En-tête (handoff « En-tête (tous les écrans) ») ---------- */

.entete {
  flex: 0 0 auto;
  height: 100px;
  background: #fff;
  border-bottom: 2px solid var(--line);
}

.entete__contenu {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 34px;
}

.entete__logo-bouton {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.entete__logo {
  width: 210px;
  height: auto;
}

.entete__espaceur {
  flex: 1;
}

.bouton--retour {
  padding: 0 18px;
}

.bouton--scanner {
  padding: 0 22px;
  border: 2px solid var(--blue);
  background: transparent;
}

.entete__glyphe-scan {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid var(--blue);
  border-radius: 2px;
}

.bouton--selection {
  padding: 0 22px;
  background: var(--blue);
  color: #fff;
  border: 0;
}

.pastille {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius);
  font-size: 15px;
}

/* ---------- Accueil (handoff « 1. Accueil ») ---------- */

.accueil {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: 32px;
}

.accueil__titre {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--blue);
}

.accueil__accroche {
  margin: 0 0 20px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  max-width: 52ch;
}

.bloc-scan {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 24px;
  margin: 0 0 24px;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-carte);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.bloc-scan__texte {
  flex: 1;
}

.bloc-scan__titre {
  display: block;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 21px;
  color: var(--blue);
  margin-bottom: 5px;
}

.bloc-scan__description {
  font-size: 17px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}

.bloc-scan__chevron {
  flex: 0 0 auto;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 26px;
  color: var(--orange);
  letter-spacing: -2px;
}

.accueil__ligne-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

/* H2 section (table de typographie générale, pas propre à l'accueil) :
   réutilisé tel quel pour tout titre de second niveau, y compris l'écran
   d'erreur plus bas — pas de nouvelle taille inventée pour ce dernier. */
.titre-section {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  color: var(--blue);
}

.accueil__meta {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
}

.grille-categories {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 14px;
}

.tuile-categorie {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 0;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
}

.tuile-categorie--inactive {
  cursor: default;
}

.tuile-categorie__icone {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.tuile-categorie__libelle {
  display: block;
  padding: 13px 16px 15px;
  text-align: left;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  line-height: 1.15;
  color: var(--blue);
}

.tuile-categorie--inactive .tuile-categorie__libelle {
  color: var(--muted);
}

.accueil__ligne-vendeur {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.bouton--vendeur {
  background: transparent;
  color: var(--muted);
}

/* ---------- Catalogue (handoff « 3. Sélection / catalogue filtré ») ---------- */

.catalogue {
  padding: 32px;
}

.catalogue__titre {
  margin: 0 0 4px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 34px;
  color: var(--blue);
}

.catalogue__note {
  margin: 0 0 22px;
  font-size: 17px;
  color: var(--muted);
}

/* Niveau 1 — rail horizontal déroulant sous l'en-tête (design system §9,
   « Kiosque magasin » : « le rail de filtres devient une barre horizontale
   déroulante sous l'en-tête »). Revu après démo client sur les vraies
   données (tâche 10, fix round 1) : huit tuiles en grille remplissaient tout
   l'écran et repoussaient la grille produits sous le pli, ce qui contredit
   « trouver un type de produit en deux touches ». Une seule ligne, on garde
   toutes les tuiles (aucun modèle ne doit disparaître faute de tenir dans
   trois colonnes), on les rend accessibles au doigt par un défilement latéral
   au lieu d'un empilement vertical. */
.grille-types {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-bottom: 4px; /* dégage la place d'une éventuelle barre de défilement */
}

.tuile-type {
  display: block;
  flex: 0 0 260px;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  scroll-snap-align: start;
}

.tuile-type--active {
  border-color: var(--orange);
  background: var(--selection-fond);
}

.tuile-type__visuel {
  display: block;
  aspect-ratio: 2 / 1;
  background: var(--paper);
}

.tuile-type--active .tuile-type__visuel {
  background: #F7E7D6;
}

.tuile-type__corps {
  display: block;
  padding: 14px 16px 16px;
}

.tuile-type__nom {
  display: block;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.15;
  color: var(--blue);
}

.tuile-type__sous-titre {
  display: block;
  margin-top: 4px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.35;
  color: var(--muted);
}

/* Niveau 2 — affiché seulement si le type choisi a des précisions
   (filtres.js, precisionsDuType). */
.precisions {
  margin-top: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 2px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-carte);
}

.precisions__titre {
  margin-bottom: 14px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--blue);
}

.precisions__pilules {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pilule {
  position: relative; /* ancre la coche ::after des pilules pressées, plus bas */
  min-height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-carte);
  border: 2px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--blue);
}

/* .pilule--active : posée par le catalogue (ecran-catalogue.js), qui pilote
   son état actif par classe. .pilule[aria-pressed="true"] : posée par la
   fiche produit (ecran-produit.js) — design system §6, « État, jamais par la
   couleur seule » : l'état doit se lire sur l'attribut ARIA, pas sur une
   classe qu'un lecteur d'écran ne voit pas. Même déclaration pour les deux,
   la coche ci-dessous ne s'ajoute qu'à la seconde : le catalogue n'est pas
   dans le périmètre de ce correctif. */
.pilule--active,
.pilule[aria-pressed="true"] {
  border-color: var(--orange);
  background: var(--selection-fond);
}

/* Coche obligatoire (design system §6) : la bordure et le fond ne suffisent
   pas seuls. Reprend au pixel le mécanisme ::after donné par le design
   system pour .tile[aria-pressed="true"] — même disque 20 px, même position,
   même « ✓ » — aucune couleur ni taille n'est inventée ici. padding-right
   fait de la place pour que la coche ne chevauche pas le libellé. */
.pilule[aria-pressed="true"] {
  padding-right: 44px;
}

.pilule[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Barre de résultats */

.barre-resultats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 26px 0 20px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--line);
}

.barre-resultats__compteur {
  margin-right: 6px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--blue);
}

.barre-resultats__espaceur {
  flex: 1;
}

/* Budget / Trier : la maquette ne donne qu'un bouton décoratif « Budget ▾ » —
   sans plage de prix ni options de tri réelles. On reprend ses jetons
   (hauteur 56 px, filet 2 px, rayon 8 px, Condensed 700 caps 15 px) sur un
   <select> natif : c'est une « sélection », le seul type de saisie autorisé
   hors clavier numérique par la règle kiosque (§9). */
.select-borne {
  position: relative;
  display: inline-flex;
}

.select-borne__champ {
  appearance: none;
  -webkit-appearance: none;
  height: 56px;
  padding: 0 36px 0 18px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 15px;
  color: var(--blue);
}

.select-borne__chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--orange);
  font-size: 13px;
  pointer-events: none;
}

/* Grille produits */

.grille-produits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.carte-produit {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.carte-produit__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte-produit__reserve-texte {
  font-size: 14px;
  color: #9AA3AE;
}

/* La vraie photo se pose au-dessus de la réserve, jamais à sa place : tant
   que photo.php (tâche 13) n'a pas résolu l'URL, `onerror` (ecran-catalogue.js)
   retire l'image et la réserve grise en dessous reste seule visible. */
.carte-produit__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-produit__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 14px;
  background: var(--blue);
  color: #fff;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.carte-produit__badge--promotion {
  background: var(--orange);
}

.carte-produit__corps {
  padding: 16px 18px 18px;
}

.carte-produit__nom {
  margin-bottom: 5px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--blue);
}

.carte-produit__descriptif {
  min-height: 45px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--muted);
  text-wrap: pretty;
}

.carte-produit__prix {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
}

.carte-produit__prix-principal {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--blue);
}

.carte-produit__prix-barre {
  font-size: 16px;
  color: var(--muted);
  text-decoration: line-through;
}

.carte-produit__coloris {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}

/* La photo de la déclinaison, en rond (fix round 1). `overflow: hidden` +
   fond `--paper` en dessous : si l'image de .pastille-coloris__photo échoue
   à charger, `onerror` (ecran-catalogue.js) la retire et le rond gris de la
   pastille reste seul visible — jamais une icône d'image cassée. Un <img>
   plutôt qu'un `background-image` : c'est ce qui permet `loading="lazy"`
   (fix round 2) — la grille tient jusqu'à 6 pastilles par carte, sur 778
   cartes, aucune raison de toutes les demander au chargement.
   Filet 2 px (fix round 3) : le 1 px disparaît à un mètre (§9). La seule
   exception à 1 px sanctionnée par le design system est le filet de la
   zone-icône de l'accueil, explicitement prévue comme telle — rien ne
   couvre celui-ci. */
.pastille-coloris {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line);
}

.pastille-coloris__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carte-produit__dispo {
  margin-top: 12px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--orange);
}

/* ---------- Fiche produit (handoff §4). Une colonne en portrait, deux
   colonnes égales en paysage (override plus bas) — jamais l'inverse : c'est
   la largeur disponible qui décide, pas l'appareil. ---------- */

.fiche-produit-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.fiche-produit-page__corps {
  padding: 32px;
}

.fiche-produit {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 32px;
}

/* Galerie */

.fiche-produit__photo-principale {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

.fiche-produit__reserve-texte {
  padding: 0 28px;
  text-align: center;
  font-size: 15px;
  color: #9AA3AE;
}

.fiche-produit__photo-principale__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiche-produit__vignettes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.fiche-produit__vignette {
  position: relative;
  padding: 0;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  cursor: pointer;
}

.fiche-produit__vignette--active {
  background: var(--selection-fond);
  border-color: var(--orange);
}

.fiche-produit__vignette__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiche-produit__vignette--video {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.fiche-produit__vignette-video-label {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--blue);
}

/* Contenu de décision */

.fiche-produit__surtitre {
  margin-bottom: 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.fiche-produit__titre {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 38px;
  color: var(--blue);
}

.fiche-produit__descriptif {
  margin: 0 0 20px;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
}

.fiche-produit__prix-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}

.fiche-produit__prix {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--blue);
}

.fiche-produit__prix-barre {
  font-size: 20px;
  color: var(--muted);
  text-decoration: line-through;
}

.fiche-produit__badge-remise {
  display: inline-block;
  padding: 5px 14px;
  background: var(--orange);
  color: #fff;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.fiche-produit__mention-prix {
  margin-bottom: 22px;
  font-size: 15px;
  color: var(--muted);
}

.fiche-produit__dispo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 13px 15px;
  background: var(--selection-fond);
  border-left: 3px solid var(--orange);
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}

.fiche-produit__dispo-label {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blue);
}

/* Bloc financement (Alma / Oney, décision du 19/08) : .fin-badge est donné
   tel quel par le design system (§7, « Bandeaux et retours d'état ») — pas
   un composant inventé pour ce lot. Ni la mise en page des deux logos côte à
   côte, ni leur taille ne sont données par un document de design (le
   handoff ne connaissait pas encore ce bloc) : 24 px de hauteur choisi pour
   rester lisible sans dépasser le gabarit d'un bandeau de ce type ailleurs
   dans l'écran (fiche-produit__dispo, juste au-dessus). */
.fin-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 13px 15px;
  background: var(--selection-fond);
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.fin-badge__logo {
  flex: 0 0 auto;
  height: 24px;
  width: auto;
}

.fin-badge__texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fin-badge__echeances {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  color: var(--blue);
}

.fin-badge__mention {
  font-size: 13px;
  color: var(--muted);
}

/* Parcours : un bloc par axe qui varie (parcours.js, etapesDuParcours).
   Revêtement et les axes au-delà réutilisent .pilule (déjà 56 px, déjà
   posée pour le catalogue) ; seul le coloris a son propre composant rond. */

.fiche-produit__axe {
  margin-bottom: 20px;
}

.fiche-produit__axe-titre {
  margin-bottom: 10px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--blue);
}

.fiche-produit__axe-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Une option grisée (moins nulle part une fois les autres axes fixés) porte
   `disabled` : le navigateur ne déclenche aucun clic dessus (ecran-produit.js
   n'a donc aucune garde à coder), et l'opacité réduite suffit à la montrer
   « visiblement désactivée » sans inventer de nouvelle couleur. */
.pilule:disabled,
.pastille-coloris-fiche:disabled {
  opacity: 0.4;
  cursor: default;
}

.pastille-coloris-fiche {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  cursor: pointer;
  /* Pas d'`overflow: hidden` ici (fix round 3) : la photo se découpe elle-même
     en rond (voir __photo ci-dessous). Un overflow rond aurait rogné la coche
     ::after posée plus bas — son coin haut-droit tombe hors du disque inscrit
     dans ce carré de 56 px, exactement la zone qu'un overflow rond masque. */
}

/* .pastille-coloris-fiche[aria-pressed="true"] : même mécanisme que .pilule
   ci-dessus (design system §6) — seule la fiche produit pose cet attribut,
   c'est le seul écran qui rend ce composant. */
.pastille-coloris-fiche[aria-pressed="true"] {
  border: 3px solid var(--orange);
}

.pastille-coloris-fiche[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.pastille-coloris-fiche__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%; /* la photo se découpe elle-même, voir la note ci-dessus */
  object-fit: cover;
}

/* Caractéristiques — dépliable, repliée par défaut (handoff §4). */

.fiche-produit__caracteristiques {
  margin-bottom: 24px;
  padding-top: 8px;
  border-top: 2px solid var(--line);
}

.fiche-produit__caracteristiques-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--blue);
}

.fiche-produit__chevron {
  color: var(--orange);
  transition: transform 0.2s;
}

.fiche-produit__chevron--ouvert {
  transform: rotate(180deg);
}

.fiche-produit__caracteristiques-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 26px;
  padding-top: 10px;
}

/* `[hidden]` seul ne suffit pas : la règle de classe ci-dessus pose déjà un
   `display` explicite, qui l'emporte sur la feuille de l'agent utilisateur
   (`[hidden] { display: none }`) faute d'un sélecteur au moins aussi
   spécifique ici. Repliée par défaut (handoff §4) doit donc se lire dans
   CETTE feuille, pas seulement dans l'attribut posé par ecran-produit.js. */
.fiche-produit__caracteristiques-grille[hidden] {
  display: none;
}

.fiche-produit__caracteristique {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.4;
}

.fiche-produit__caracteristique-cle {
  color: var(--muted);
}

.fiche-produit__caracteristique-valeur {
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}

/* Complète l'ensemble */

.fiche-produit__ensemble-titre {
  margin-bottom: 12px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--blue);
}

.fiche-produit__ensemble-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.fiche-produit__carte-associee {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.fiche-produit__carte-associee-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper);
}

.fiche-produit__carte-associee-image__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fiche-produit__carte-associee-corps {
  padding: 12px 14px 14px;
}

.fiche-produit__carte-associee-nom {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--blue);
}

.fiche-produit__carte-associee-type {
  margin-top: 3px;
  font-size: 15px;
  color: var(--muted);
}

.fiche-produit__carte-associee-prix {
  margin-top: 8px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--blue);
}

/* ---------- Barre d'action collante — seulement sur la fiche produit
   (handoff §4). Jamais de second bouton « Ajouter » dans le corps. ---------- */

.barre-action {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100px;
  padding: 0 34px;
  background: #fff;
  border-top: 2px solid var(--line);
  box-shadow: 0 -6px 22px rgba(3, 16, 34, 0.16);
}

.barre-action__info {
  flex: 1;
  min-width: 0;
}

.barre-action__titre {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  color: var(--blue);
}

.barre-action__compte {
  font-size: 16px;
  color: var(--muted);
}

.barre-action__bouton {
  height: 64px;
  padding: 0 24px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.barre-action__bouton--voir {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--blue);
}

.barre-action__bouton--ajouter {
  padding: 0 30px;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-size: 17px;
}

/* ---------- Surcouches (voile + modale) : la modale de rappel de la fiche
   est la première de ce lot, mais le composant est générique — la popup
   scan et le panneau « Ma sélection » (tâches suivantes) le réutiliseront. ---------- */

.voile {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: rgba(3, 16, 34, 0.55);
}

.modale {
  width: 100%;
  max-width: 620px;
  max-height: 100%;
  overflow: auto;
  padding: 34px;
  background: #fff;
  border-radius: 14px;
  animation: apparait 0.22s ease-out;
}

.modale__titre {
  margin: 0 0 10px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 26px;
  color: var(--blue);
}

.modale__texte {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.modale__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modale__bouton {
  height: 64px;
  padding: 0 22px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.04em;
}

.modale__bouton--contour {
  background: transparent;
  color: var(--blue);
  border: 2px solid var(--line);
}

.modale__bouton--orange {
  flex: 1 1 230px;
  background: var(--orange);
  color: #fff;
  border: 0;
  font-size: 17px;
}

@keyframes apparait {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Popup scan (handoff §2) : voile + carte, comme la modale de
   rappel, mais 700 px de large et son propre en-tête (titre + croix), pas de
   gabarit .modale ici. ---------- */

.popup-scan {
  width: 100%;
  max-width: 700px;
  max-height: 100%;
  overflow: auto;
  padding: 38px;
  background: #fff;
  border-radius: 14px;
  animation: apparait 0.22s ease-out;
}

.popup-scan__entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

/* Titre centré mais décalé de 62 px à gauche pour compenser la croix (handoff
   §2, littéral) : sans ce décalage le titre paraît centré sur toute la carte,
   alors que la croix mange 56 px + l'écart à droite. */
.popup-scan__titre {
  flex: 1;
  margin: 0 0 0 -62px;
  text-align: center;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 30px;
  color: var(--blue);
}

.popup-scan__texte {
  margin: 0 0 26px;
  text-align: center;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.popup-scan__bouton {
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: var(--radius);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.04em;
}

/* ---------- Tiroir « Ma sélection » (handoff §5) : même voile que les autres
   surcouches, mais aligné à droite et pleine hauteur plutôt que centré — .voile
   fournit déjà le fond et le z-index, ce bloc ne corrige que l'alignement. ---------- */

.tiroir-selection-voile {
  padding: 0;
  align-items: stretch;
  justify-content: flex-end;
}

.tiroir-selection {
  width: 100%;
  max-width: 720px;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  animation: apparait 0.22s ease-out;
}

.tiroir-selection__entete {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  border-bottom: 2px solid var(--line);
}

.tiroir-selection__titre {
  margin: 0;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  color: var(--blue);
}

.tiroir-selection__corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px;
}

.tiroir-selection__liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tiroir-selection__vide {
  font-size: 18px;
  color: var(--muted);
}

.tiroir-selection__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

/* Double confirmation (handoff §5, le cœur de cette tâche) : ni la couleur ni
   le fond seuls ne portent l'état — le texte « Retirer cet article ? » et les
   deux actions sont la vraie preuve qu'on est en attente, la teinte n'est que
   du renfort visuel (design system §6). */
.tiroir-selection__ligne--confirmation {
  background: var(--selection-fond);
  border-color: var(--orange);
}

.tiroir-selection__photo {
  position: relative;
  flex: 0 0 auto;
  width: 92px;
  height: 72px;
  overflow: hidden;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

.tiroir-selection__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tiroir-selection__texte {
  flex: 1 1 200px;
  min-width: 0;
}

.tiroir-selection__nom {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 19px;
  color: var(--blue);
}

.tiroir-selection__descriptif {
  margin-top: 4px;
  font-size: 16px;
  color: var(--ink);
}

.tiroir-selection__prix {
  margin-top: 6px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--blue);
}

.tiroir-selection__retirer {
  flex: 0 0 auto;
}

.tiroir-selection__confirmation {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.tiroir-selection__confirmation-texte {
  margin: 0;
  flex: 1 1 200px;
  font-size: 16px;
  color: var(--ink);
}

.tiroir-selection__confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tiroir-selection__pied {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 28px;
  border-top: 2px solid var(--line);
}

.tiroir-selection__bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  background: var(--selection-fond);
  border-left: 3px solid var(--orange);
}

.tiroir-selection__bandeau-texte {
  flex: 1 1 240px;
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
}

.tiroir-selection__bandeau-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tiroir-selection__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.tiroir-selection__total-libelle {
  font-size: 16px;
  color: var(--muted);
}

.tiroir-selection__total-valeur {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--blue);
}

.tiroir-selection__pied-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* 64 px, pas les 56 px par défaut de .bouton : le handoff §5 ne donne pas de
   hauteur pour le pied, seul « flex: 1 1 240px » sur le bouton principal —
   64 px reprend la hauteur déjà établie pour toute action principale de pied
   ailleurs sur la borne (barre-action de la fiche produit, modale de rappel),
   pas une valeur inventée sans précédent. */
.tiroir-selection__pied-actions .bouton {
  height: 64px;
  font-size: 16px;
}

.tiroir-selection__bouton-principal {
  flex: 1 1 240px;
  font-size: 17px;
}

/* ---------- Écran `#/scan` (saisie du code court) : la seule saisie clavier
   du parcours client — voir ecran-scan.js sur pourquoi un pavé numérique/
   hexadécimal n'y suffit pas. Le titre et la note réutilisent .catalogue* :
   même rôle (un H1 d'écran utilitaire + une note), pas de nouvelle taille. ---------- */

.scan-code {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  max-width: 520px;
  margin-top: 24px;
}

.scan-code__label {
  flex: 1 1 100%;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--blue);
}

/* 16 px minimum (design system §6, « sinon iOS zoome tout seul ») ; rayon repris
   du composant « Champs » général, mais filet 2 px (pas le 1 px de ce
   composant) : la règle kiosque du chapitre 9 — « le filet de 1 px disparaît à
   un mètre » — l'emporte ici, sans exception documentée pour un champ de
   saisie. Sans le `outline:none` du composant général non plus, qui
   casserait l'anneau de focus (voir ecran-scan.js). */
.scan-code__champ {
  flex: 1 1 220px;
  height: 56px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.scan-code__message {
  margin-top: 16px;
  font-size: 16px;
  color: var(--muted);
}

.scan-code__message a {
  color: var(--blue);
}

/* ---------- Bandeaux de retour d'état (design system §7), partagés par
   l'espace vendeur et le bon de commande. Toujours un fond teinté plein OU un
   filet coloré à gauche, jamais les deux — règle du design system reprise
   telle quelle. ---------- */

.bandeau-succes {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: var(--succes-fond);
  color: var(--succes-texte);
  font-size: 16px;
}

/* Pas de rouge ici : une file d'attente hors ligne ou un e-mail non parti ne
   sont pas des ERREURS du vendeur (rien qu'il ait mal fait), juste un état à
   connaître — même traitement visuel que .fiche-produit__dispo (filet gauche
   orange, fond de sélection), pas .bandeau-erreur plus bas. */
.bandeau-info {
  margin-bottom: 18px;
  padding: 13px 15px;
  background: var(--selection-fond);
  border-left: 3px solid var(--orange);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

/* Un code vendeur qui ne correspond à personne, en revanche, EST une erreur
   de saisie — seul emploi du rouge du design system dans ce lot. */
.bandeau-erreur {
  margin-bottom: 18px;
  padding: 11px 14px;
  background: var(--erreur-fond);
  border: 1px solid var(--erreur-bordure);
  color: var(--erreur-texte);
  font-size: 15px;
}

/* ---------- Pavé numérique du code vendeur (pave-code.js), partagé par
   l'espace vendeur et le bon de commande — handoff §7, étape 1 : carte
   centrée, touches 64 px sur 3 colonnes, OK en orange. ---------- */

.pave-vendeur {
  max-width: 460px;
  margin: 40px auto 0;
  padding: 30px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

.pave-vendeur__titre {
  margin: 0 0 6px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 28px;
  color: var(--blue);
}

.pave-vendeur__note {
  margin: 0 0 22px;
  font-size: 17px;
  color: var(--muted);
}

.pave-vendeur__afficheur {
  padding: 14px 0 22px;
  text-align: center;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.3em;
  color: var(--blue);
}

.pave-vendeur__grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pave-vendeur__touche {
  height: 64px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
}

.pave-vendeur__touche--ok {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* ---------- Bon de commande (#/bon) — aucune capture ne montre cet écran
   une fois le bon composé (voir ecran-bon.js) : mise en page minimale à
   partir de composants déjà posés ailleurs (tiroir-selection__total, bouton),
   pas un nouveau gabarit inventé. ---------- */

.bon-page {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px;
}

.bon-entete {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--line);
}

.bon-entete__champ {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--muted);
}

.bon-entete__champ strong {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--blue);
}

.bon-lignes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.bon-ligne {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

.bon-ligne__nom {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--blue);
}

.bon-ligne__choix,
.bon-ligne__delai {
  margin-top: 3px;
  font-size: 15px;
  color: var(--muted);
}

.bon-ligne__prix {
  flex: 0 0 auto;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--blue);
}

.bon-page__actions {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

/* ---------- Espace vendeur, journal du mois (handoff §7, étape 2). ---------- */

.vendeur-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px;
}

.vendeur-page__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 22px;
}

.vendeur-page__titre-bloc {
  flex: 1 1 260px;
}

.vendeur-page__titre {
  margin: 0 0 4px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 32px;
  color: var(--blue);
}

.vendeur-page__note {
  margin: 0;
  font-size: 17px;
  color: var(--muted);
}

.vendeur-page__periode {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vendeur-page__periode-bouton {
  width: 56px;
  height: 56px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--blue);
  cursor: pointer;
}

.vendeur-page__periode-valeur {
  min-width: 200px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  color: var(--blue);
}

/* « Éditer mon showroom » et « Réglages financement » (décision du 19/08) :
   ni capture ni maquette ne montrent cette rangée — le handoff ne connaissait
   pas encore ces deux réglages. Boutons génériques déjà posés (bouton,
   bouton--contour-bleu), pas un nouveau composant. */
.vendeur-page__reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}

.vendeur-page__indicateurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 26px;
}

.indicateur-vendeur {
  background: #fff;
  border-left: 3px solid var(--orange);
  padding: 18px 18px 16px;
}

.indicateur-vendeur__valeur {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: var(--blue);
  line-height: 1;
}

.indicateur-vendeur__libelle {
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}

.journal-vendeur {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.journal-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
  padding: 16px 18px;
}

.journal-ligne__date {
  flex: 0 0 auto;
  min-width: 96px;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--blue);
}

.journal-ligne__corps {
  flex: 1 1 200px;
  min-width: 0;
}

.journal-ligne__client {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17px;
  color: var(--blue);
}

.journal-ligne__detail {
  font-size: 15px;
  color: var(--muted);
}

.journal-ligne__total {
  flex: 0 0 auto;
  min-width: 110px;
  text-align: right;
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--blue);
}

.journal-vendeur__vide {
  color: var(--muted);
}

.vendeur-page__pied {
  display: flex;
  padding-top: 20px;
  border-top: 2px solid var(--line);
}

/* ---------- Modales « Éditer mon showroom » et « Réglages financement »
   (décision du 19/08, aucune capture) : le voile + la carte du tiroir
   « Ma sélection » (tiroir-selection-voile, aligné à droite) ne conviennent
   pas ici — pas de liste longue à faire défiler plein écran — on reprend
   donc .voile + .modale (centré, 620 px), déjà posés pour le rappel
   « Vous quittez X ». Seul l'en-tête (titre + croix) est propre à ce
   fichier, repris de .tiroir-selection__entete plutôt qu'inventé. ---------- */

.vendeur-modale__champ {
  margin-bottom: 16px;
}

.vendeur-modale__resultats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.vendeur-modale__resultat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-carte);
}

.vendeur-modale__resultat-nom {
  font-size: 16px;
  color: var(--ink);
}

.vendeur-modale__message {
  color: var(--muted);
}

.vendeur-modale__echeances {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

/* ---------- Paysage : la mise en page suit la largeur disponible, pas
   l'appareil (handoff « Dimensions et orientation »). ---------- */
@media (orientation: landscape) {
  .accueil {
    padding: 28px 44px;
  }

  .grille-categories {
    grid-template-columns: repeat(4, 1fr);
  }

  .catalogue {
    padding: 28px 44px;
  }

  .grille-produits {
    grid-template-columns: repeat(4, 1fr);
  }

  .fiche-produit-page__corps {
    padding: 28px 44px;
  }

  .fiche-produit {
    grid-template-columns: 1fr 1fr;
    gap: 42px;
  }

  .fiche-produit__ensemble-grille {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mouvement réduit : pas d'animation posée par ce lot, mais la règle reste
   valable pour les surcouches des tâches suivantes (popup, tiroir). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}