/* Charte Intersport (tokens extraits du CSS réel) + styles applicatifs Club B2B. */
:root {
  --color-primary: #111e64;
  --color-primary-hover: #1f4391;
  --color-blue-ui: #164194;
  --color-promo: #e30613;
  --color-success: #20df98;
  --color-text: #4d4d4d;
  --color-text-strong: #000;
  --color-bg: #fff;
  --color-bg-secondary: #f0f0f0;
  --color-bg-soft: #f2f2f2;
  --color-border: #ccc;
  --color-border-light: #e0e0e0;
  --font-display: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --radius: 12px;
  --radius-pill: 2.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1);
  --container: 73.125rem;
  --transition: all .25s ease;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  /* Fond « sport » discret : motif monochrome très pâle (traits ~6 % d'opacité)
     posé sur un blanc légèrement froid. Le contenu vit sur des cartes blanches,
     donc la lisibilité reste intacte ; le motif ne fait que réchauffer les vides.
     Le fichier /img/motif-sport.svg est servi tel quel (public/), hors digest
     AssetMapper : régler l'intensité = éditer stroke-opacity dans le SVG. */
  /* Fond PROPRE : blanc net sur les pages de contenu — les produits et les cartes
     sont les stars, lisibilité maximale. L'imagerie sport (photos athlètes + objets)
     est concentrée sur le login, la seule page « vide » où elle peut briller. */
  background-color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
}

/* Contour léger sur les surfaces blanches : sur fond blanc, un filet cool très
   discret (#e5e7ec, légère teinte froide « choisie ») sépare cartes / tableaux /
   panneaux du fond — plus net que l'ombre seule. Une seule règle = source unique. */
.card, .filters, .club-card,
.devis, .liste-table, .remises,
.totaux, .empty, .confirmation {
  border: 1px solid #e5e7ec;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--color-text-strong); margin: 0; }
a { color: var(--color-blue-ui); }

/* ---------- En-tête appli (refonte design handoff) ----------
   Fond #141c48 + deux décors sous le contenu : diagonales « vitesse » et barre
   oblique rouge derrière le logo. Onglets soulignés rouge. Police Archivo. */
.app-header {
  position: relative; overflow: hidden;
  background-color: #141c48;
  color: #fff;
  font-family: 'Archivo', var(--font-body);
  padding: 18px 40px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 28px;
  box-shadow: var(--shadow-md);
}
.app-header::before {              /* diagonales vitesse */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 90px, rgba(255,255,255,.045) 90px 94px);
}
.app-header::after {               /* barre oblique rouge derrière le logo */
  content: ""; position: absolute; top: 0; bottom: 0; left: -40px; width: 340px; pointer-events: none;
  background: linear-gradient(115deg, #ec3013 75%, transparent 75%); opacity: .14;
}
.app-header > * { position: relative; z-index: 1; }   /* contenu au-dessus des décors */
.hd-ico { flex: none; }
.app-header .brand {
  font: 800 26px 'Archivo', var(--font-display);
  letter-spacing: .5px; color: #fff; flex: none; white-space: nowrap; line-height: 1;
  text-transform: uppercase; text-decoration: none;
}
.app-header .brand .accent { color: #ec3013; }
.app-header .spacer { flex: 1; }
.app-header .who {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font: 500 13px 'Archivo', var(--font-body); color: #fff; text-align: right; line-height: 1.3; white-space: nowrap;
}
.app-header .who .role {
  display: inline-block; margin: 0;
  background: #fff; color: #141c48; padding: 2px 8px; border-radius: 0;
  font: 700 10px 'Archivo', var(--font-body); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.app-header .logout { font: 500 14px 'Archivo', var(--font-body); color: rgba(255,255,255,.75); text-decoration: none; white-space: nowrap; }
.app-header .logout:hover { color: #fff; opacity: 1; }
/* Focus clavier rouge (jamais l'outline par défaut) */
.app-header a:focus-visible, .app-header button:focus-visible,
.app-header select:focus-visible, .app-nav a:focus-visible {
  outline: 2px solid #ec3013; outline-offset: 2px;
}

/* ---------- Conteneur ---------- */
.container { max-width: var(--container); margin: 0 auto; padding: 1.5rem; }
.page-title { font-size: 2rem; margin-bottom: .7rem; }
/* Fil rouge marque sous le titre de page : accent cohérent avec le rouge du header. */
.page-title::after {
  content: ""; display: block; width: 52px; height: 3px; border-radius: 2px;
  background: #ec3013; margin-top: .5rem;
}
.page-sub { color: var(--color-text); margin: 0 0 1.5rem; }

/* ---------- Barre de filtres ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
  background: #fff; padding: 1rem; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin-bottom: 1.5rem;
}
.filters input[type="search"], .filters select {
  padding: .6rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font: inherit; color: var(--color-text-strong); background: #fff;
}
.filters input[type="search"] { flex: 1; min-width: 220px; }
/* Bouton porteur du filtre multi-marques (panneau = public/js/MultiSelectPanel.js,
   le même que les filtres de colonne des listes). Forme pilule de l'ancien <select>,
   couleurs d'état actif reprises des filtres DataTable (#1A237E / #eef2ff). */
.marque-filter-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-width: 200px; max-width: 320px;
  padding: .6rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  font: inherit; color: var(--color-text-strong); background: #fff;
  cursor: pointer; text-align: left;
}
.marque-filter-btn.is-actif { border-color: #1A237E; background: #eef2ff; color: #1A237E; font-weight: 600; }
.btn {
  border: 0; border-radius: var(--radius-pill); padding: .6rem 1.4rem;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; color: var(--color-blue-ui); border: 1px solid var(--color-border); }
.count { color: var(--color-text); font-size: .9rem; margin-left: auto; }

/* ---------- Grille catalogue ---------- */
.grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.card {
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--transition); display: flex; flex-direction: column;
}
/* Survol nettement marqué : contour bleu marque + anneau + soulèvement, pour voir
   sans ambiguïté sur quelle carte on est (la .card transitionne déjà via --transition). */
.card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 16px 34px -14px rgba(17,30,100,.32), 0 0 0 1px var(--color-primary);
  transform: translateY(-4px);
}
.card .thumb {
  aspect-ratio: 4 / 3; display: grid; place-items: center; position: relative;
  overflow: hidden; /* verrou : l'image ne peut jamais déborder sur le texte (bug WebKit/iOS) */
  background: linear-gradient(135deg, #1a2a7a, var(--color-primary));
  color: #fff;
}
.card .thumb.has-photo { background: #fff; }
/* Image en absolu = elle ne peut plus forcer la hauteur de la vignette : toutes les
   vignettes gardent le même ratio 4/3 (fin de l'effet « escalier » + du chevauchement).
   Fonctionne à l'identique sur Blink (PC/Android) et WebKit (iPhone/iPad). */
.card .thumb .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.card .thumb .marque-watermark {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.4rem; letter-spacing: 1px; opacity: .9; text-align: center; padding: 0 .5rem;
}
.card .thumb .ref-badge {
  position: absolute; top: .6rem; left: .6rem; z-index: 2; background: rgba(255,255,255,.16);
  padding: .15rem .55rem; border-radius: var(--radius-pill); font-size: .68rem; letter-spacing: .3px;
}
.card .body { padding: .85rem 1rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card .marque { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-blue-ui); font-weight: 600; }
.card .desig { font-weight: 600; color: var(--color-text-strong); line-height: 1.3; }
.card .card-ref { font-size: .74rem; color: var(--color-text-muted, #6b7280); font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2px; }
.card .spacer { flex: 1; }
.card .cta { margin-top: .5rem; text-align: center; }

/* ---------- Pagination ---------- */
.pager { display: flex; gap: .75rem; justify-content: center; align-items: center; margin: 2rem 0 1rem; }
.pager .page-info { color: var(--color-text); font-size: .9rem; }

.empty { background: #fff; padding: 3rem; text-align: center; border-radius: var(--radius); color: var(--color-text); }

/* ---------- Header : panier ---------- */
.app-header .cart-link {
  color: #fff; text-decoration: none; font: 700 15px 'Archivo', var(--font-body);
  display: inline-flex; align-items: center; gap: 9px; position: relative; padding: 0; white-space: nowrap;
}
.app-header .cart-link:hover { color: #ec3013; }
.app-header .cart-badge {
  background: #ec3013; color: #fff; border-radius: 999px; font: 700 12px 'Archivo', var(--font-body);
  padding: 2px 8px; margin-left: 4px;
}

/* ---------- Flash ---------- */
.flash { padding: .8rem 1.5rem; font-weight: 600; }
.flash-success { background: #e8f9f2; color: #0a7a52; }
.flash-error { background: #fde8ea; color: #b00410; }

/* ---------- Fiche produit ---------- */
.breadcrumb { margin: 0 0 1rem; }
.breadcrumb a { text-decoration: none; }
.produit { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.produit-mediacol { display: flex; flex-direction: column; gap: .7rem; }
.produit-mediacol .ov-thumbs { justify-content: flex-start; }
.produit-media { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); background: var(--color-bg-soft); }
.produit-media.has-photo { background: #fff; border: 1px solid var(--color-border-light); }
.produit-media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 1rem; }
.produit-media .marque-watermark {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 2rem;
  letter-spacing: 1px; color: var(--color-primary);
}
.produit-info .marque { color: var(--color-blue-ui); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .5px; }
.produit-info .ref { color: var(--color-text); font-size: .85rem; margin: .2rem 0 1rem; }
.note-prix { background: var(--color-bg-soft); padding: .6rem .9rem; border-radius: 8px; font-size: .85rem; }
.achat { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; max-width: 420px; }
.champ { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; color: var(--color-text-strong); font-size: .9rem; }
.champ[hidden] { display: none; } /* l'attribut hidden doit l'emporter sur display:flex */
.champ select, .champ input { padding: .6rem .9rem; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; }
.champ-qte input { width: 120px; }
.hint { font-size: .8rem; color: var(--color-text); margin: -.4rem 0 0; font-weight: 400; }
/* La marge négative ci-dessus sert à coller le hint sous un CHAMP. Quand il suit un
   formulaire, son dernier élément est un bouton : la marge le fait alors chevaucher.
   Cas rencontré sur Facturation, sur la validation du bon de commande et sur Stock. */
form + .hint { margin-top: .7rem; }
.prix-ligne { font-size: 1.1rem; }
.prix-ligne strong { color: var(--color-primary); }
.champ-label { font-weight: 600; color: var(--color-text-strong); font-size: .9rem; }

/* ---------- Cartes catalogue : prix + pastilles ---------- */
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.card-prix { font-weight: 800; color: var(--color-primary); }
.card-sw { display: flex; gap: 3px; align-items: center; }
.card-sw i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--color-border); display: inline-block; background-size: cover; background-position: center; }
.sw-count { font-size: .7rem; color: var(--color-text); background: var(--color-bg-soft); border-radius: 999px; padding: .05rem .5rem; }

/* ---------- Modale fiche (overlay) ---------- */
.ov { position: fixed; inset: 0; background: rgba(10,15,40,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1.2rem; }
.ov[hidden] { display: none; }
.ov-modal { position: relative; background: #fff; border-radius: 16px; max-width: min(1160px, 95vw); width: fit-content; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); }
.ov-media { background: var(--color-bg-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.2rem; border-right: 1px solid var(--color-border-light); }
.ov-media .ov-main { max-width: 100%; max-height: 360px; object-fit: contain; }
.ov-thumbs { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.ov-thumb { width: 52px; height: 52px; flex: 0 0 auto; padding: 2px; background: #fff; border: 1px solid var(--color-border-light); border-radius: 8px; cursor: pointer; }
.ov-thumb.active { border-color: var(--color-blue-ui); box-shadow: 0 0 0 1px var(--color-blue-ui); }
.ov-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ov-info { min-width: 0; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .2rem; }
.ov-info .marque { color: var(--color-blue-ui); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .5px; }
.ov-title { font-family: var(--font-display); font-size: 1.5rem; margin: .2rem 0; }
.ov-info .ref { color: var(--color-text); font-size: .85rem; margin: 0 0 .4rem; }
.ov-info .prix-ligne { margin: .3rem 0 .2rem; }
.ov-info .prix-ligne small { color: #888; font-size: .8rem; }
.ov-info form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.ov-close { position: absolute; top: .6rem; right: .6rem; z-index: 3; background: rgba(255,255,255,.9); border: 1px solid var(--color-border-light); font-size: 1.5rem; line-height: 1; cursor: pointer; color: #777; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }
.ov-close:hover { color: var(--color-promo); }
@media (max-width: 640px) { .ov-modal { grid-template-columns: 1fr; } .ov-media { border-right: none; border-bottom: 1px solid var(--color-border-light); } }

/* ---------- Fiche : pastilles couleur ---------- */
.couleurs { display: flex; flex-wrap: wrap; gap: .5rem; }
.couleurs .c {
  width: 40px; height: 40px; border-radius: 9px; border: 2px solid var(--color-border);
  cursor: pointer; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: var(--color-text-strong); overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.couleurs .c.img { color: transparent; }
.couleurs .c.swatch { color: transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.couleurs .c.txt { width: auto; min-width: 40px; max-width: 130px; padding: 0 .5rem; overflow: visible; white-space: nowrap; text-overflow: ellipsis; }
.couleurs .c:hover { transform: translateY(-1px); }
.couleurs .c.sel { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(17,30,100,.18); }
.couleurs .c.swatch.sel { box-shadow: 0 0 0 2px rgba(17,30,100,.18), inset 0 0 0 1px rgba(0,0,0,.12); }
.coul-label { font-weight: 600; color: var(--color-primary); font-size: .8rem; }

/* ---------- Fiche : tableau horizontal quantité × taille ---------- */
.sz-wrap { max-width: 100%; overflow-x: auto; }
table.sz { border-collapse: collapse; min-width: 100%; }
table.sz th, table.sz td { border: 1px solid var(--color-border-light); padding: .4rem .35rem; text-align: center; font-size: .85rem; }
table.sz th { background: var(--color-bg-soft); font-weight: 700; white-space: nowrap; }
table.sz td.lbl-row { background: #fbfcff; font-weight: 600; color: var(--color-text); font-size: .72rem; text-transform: uppercase; white-space: nowrap; text-align: right; }
table.sz input { width: 56px; padding: .4rem .25rem; text-align: center; border: 1px solid var(--color-border); border-radius: 7px; font: inherit; }
table.sz input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.achat-actions { display: flex; align-items: center; gap: 1rem; }
.achat-actions .btn { flex: 1; }
.tot-articles { font-weight: 700; color: var(--color-primary); white-space: nowrap; }

/* ---------- Panier / devis ---------- */
.devis { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.devis th, .devis td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.devis thead th { background: var(--color-primary); color: #fff; font-family: var(--font-display); font-weight: 600; }
/* Filet vertical entre colonnes, comme sur les PDF : avec 9 colonnes de chiffres, l'œil
   décroche sans repère. `+` cible chaque cellule SAUF la première, sans classe dédiée.
   Neutralisé en mode carte mobile, plus bas. */
.devis th + th, .devis td + td { border-left: 1px solid var(--color-border-light); }
.devis thead th + th { border-left-color: rgba(255, 255, 255, .22); }
.devis .num { text-align: right; }
.devis .marque { font-size: .72rem; color: var(--color-blue-ui); text-transform: uppercase; font-weight: 600; }
.tag-plage { display: inline-block; background: #fff3cd; color: #8a6d00; font-size: .68rem; padding: .05rem .4rem; border-radius: 999px; margin-left: .3rem; }
/* miniature produit dans les lignes de devis */
.devis .col-thumb { width: 56px; padding-right: 0; }
.ligne-thumb { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; background: var(--color-bg-soft); border: 1px solid var(--color-border-light); overflow: hidden; }
.ligne-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.btn-link { background: none; border: 0; color: var(--color-promo); cursor: pointer; font-size: 1rem; }
.devis-bas { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 1.5rem; gap: 2rem; flex-wrap: wrap; }
.totaux { background: #fff; border-radius: var(--radius); padding: 1.2rem 1.5rem; box-shadow: var(--shadow-sm); min-width: 280px; }
.totaux > div { display: flex; justify-content: space-between; padding: .35rem 0; }
.totaux > div:not(.ttc) { color: var(--color-text); font-size: .92rem; }
.totaux > div:not(.ttc) strong { font-weight: 600; }
.totaux .ttc { border-top: 2px solid var(--color-border); margin-top: .4rem; padding-top: .6rem; font-size: 1.15rem; color: var(--color-primary); }
.totaux .btn { width: 100%; margin-top: 1rem; }

/* ---------- Prix net club ---------- */
.app-header .club-courant {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff;
  padding: 8px 16px; border-radius: 0;
  font: 600 14px 'Archivo', var(--font-body); max-width: 320px; white-space: nowrap;
}
.app-header .club-switch {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  padding: 8px 16px; border-radius: 0; max-width: 320px; white-space: nowrap;
}
.app-header .club-switch:hover { background: rgba(255,255,255,.18); }
.app-header .club-switch select {
  background: transparent; color: #fff; border: 0; font: 600 14px 'Archivo', var(--font-body); cursor: pointer;
  max-width: 15rem; text-overflow: ellipsis;
}
.app-header .club-switch select option { color: #111; }
/* Sélecteur de club « recherchable » : le <select> est masqué par le contrôleur
   Stimulus club-switch, ce bouton prend sa place et ouvre le panneau de recherche.
   Il doit être visuellement indiscernable du <select> qu'il remplace. */
.app-header .club-switch__btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 0; max-width: 15rem;
  background: transparent; border: 0; padding: 0; color: #fff; cursor: pointer;
  font: 600 14px 'Archivo', var(--font-body); text-align: left;
}
.app-header .club-switch__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-header .club-switch__btn i { flex: none; font-size: 10px; opacity: .75; }
.prix-base { text-decoration: line-through; color: #999; font-size: .85em; margin-right: .35rem; }
.badge-remise {
  display: inline-block; background: var(--color-promo); color: #fff; font-weight: 700;
  font-size: .72rem; padding: .05rem .45rem; border-radius: 999px; margin-left: .35rem;
}
.pour-club { font-size: .85rem; color: var(--color-text); margin: .6rem 0 0; }

/* ---------- Panneau d'action (transformer / modifier devis) ---------- */
.action-panel {
  background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem 1.4rem; max-width: 460px;
}
.action-panel__buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
.action-panel__buttons .btn { white-space: nowrap; }
.action-help {
  list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--color-border-light);
  display: flex; flex-direction: column; gap: .55rem;
}
.action-help li {
  position: relative; padding-left: 1.1rem; font-size: .85rem; line-height: 1.45; color: var(--color-text);
}
.action-help li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .42rem; height: .42rem;
  border-radius: 50%; background: var(--color-primary);
}
.action-help strong { color: var(--color-text-strong); font-weight: 700; }

/* ---------- Confirmation devis ---------- */
.confirmation { background: #fff; border-radius: var(--radius); padding: 2.5rem; text-align: center; box-shadow: var(--shadow-sm); max-width: 560px; margin: 2rem auto; }
.confirmation .check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-success); color: #fff;
  font-size: 2rem; display: grid; place-items: center; margin: 0 auto 1rem;
}
.recap { text-align: left; margin: 1.5rem 0; }
.recap > div { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--color-border-light); }
.recap dt { color: var(--color-text); margin: 0; }
.recap dd { margin: 0; font-weight: 600; color: var(--color-text-strong); }

/* ---------- Nav ----------
   Header sur deux bandeaux : ligne 1 = logo + compte/club/panier (ordre DOM),
   ligne 2 = navigation pleine largeur (order élevé + flex-basis:100% → passe seule
   sur sa ligne, alignée à gauche, quel que soit le nombre d'onglets). */
.app-nav {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px;
  order: 10; flex-basis: 100%;
  margin: 14px -40px 0;      /* -40px : la règle inter-rangées court pleine largeur */
  padding: 0 32px;           /* onglets rentrés de 32px */
  border-top: 1px solid rgba(255,255,255,.12);
}
.app-nav a {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.8); text-decoration: none; font: 500 15px 'Archivo', var(--font-body); white-space: nowrap;
  padding: 16px 16px 13px; border-bottom: 3px solid transparent; border-radius: 0; background: transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.app-nav a:hover { color: #fff; background: transparent; border-bottom-color: rgba(236,48,19,.55); }
/* Onglet de la page courante : souligné rouge + léger dégradé */
.app-nav a[aria-current="page"] {
  color: #fff; font-weight: 700; border-bottom: 3px solid #ec3013;
  background: linear-gradient(180deg, transparent, rgba(236,48,19,.12));
}
.app-nav a[aria-current="page"]:hover { border-bottom-color: #ec3013; background: linear-gradient(180deg, transparent, rgba(236,48,19,.12)); }

/* ---------- Espace commercial : portefeuille ---------- */
.club-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.club-card { background: #fff; border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .6rem; transition: var(--transition); }
.club-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 16px 34px -14px rgba(17,30,100,.32), 0 0 0 1px var(--color-primary);
  transform: translateY(-4px);
}
.club-card-head h3 { font-size: 1.3rem; margin: 0; }
.club-structure { color: var(--color-blue-ui); font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.club-remises { color: var(--color-text); font-size: .9rem; margin: 0; flex: 1; }

/* ---------- Espace commercial : remises ---------- */
.remises { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.remises th, .remises td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.remises thead th { background: var(--color-primary); color: #fff; font-family: var(--font-display); font-weight: 600; }
.remises .num { text-align: right; }
.remises .aucune { color: #999; font-style: italic; }
.remises .depuis { color: var(--color-text); font-size: .78rem; margin-left: .5rem; }
.remise-form { display: inline-flex; gap: .5rem; align-items: center; justify-content: flex-end; }
.remise-form input[type="number"] { width: 90px; padding: .45rem .6rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; text-align: right; }
/* Retour d'enregistrement affiché DANS la ligne (le formulaire ne recharge plus la
   page) : posé dans le flux du formulaire pour ne décaler aucune ligne en dessous. */
.remise-statut { font-size: .78rem; padding: .2rem .5rem; border-radius: 6px; }
.remise-statut-ok { background: #e8f9f2; color: #0a7a52; }
.remise-statut-ko { background: #fde8ea; color: #b00410; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }

/* ---------- Listes (devis/commandes) ---------- */
.liste-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.liste-table th, .liste-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--color-border-light); vertical-align: middle; }
.liste-table thead th { background: var(--color-primary); color: #fff; font-family: var(--font-display); font-weight: 600; }
.liste-table .num { text-align: right; }

.statut { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.statut-soumis { background: #e7effb; color: #164194; }
.statut-brouillon { background: #f0f0f0; color: #666; }
.statut-transforme { background: #e8f9f2; color: #0a7a52; }
.statut-a_valider { background: #fff3cd; color: #8a6d00; }
.statut-validee { background: #e8f9f2; color: #0a7a52; }
.statut-en_preparation { background: #e7effb; color: #164194; }
.statut-partiellement_expediee { background: #fde9d6; color: #9a5a12; }
/* Parcours livraison : la couleur suit l'avancement — parti (orange), reçu (bleu),
   facturé (vert). « soldée » n'est plus un statut de commande, la règle reste pour
   relire l'historique d'avant la mig 171. */
.statut-expediee { background: #fde9d6; color: #9a5a12; }
.statut-livree { background: #e7effb; color: #164194; }
.statut-facturee { background: #e8f9f2; color: #0a7a52; }
/* Suivi des factures. « échue » est rouge parce qu'il appelle une action ; le règlement
   reste GRIS tant qu'il est « non renseigné » — on ne colore pas une information qu'on
   n'a pas, ce serait donner du crédit à une affirmation absente. */
.statut-echue { background: #fde8ea; color: #b00410; }
.statut-reglement-regle { background: #e8f9f2; color: #0a7a52; }
.statut-reglement-partiel { background: #fde9d6; color: #9a5a12; }
.statut-reglement-non_regle { background: #fde8ea; color: #b00410; }
.statut-reglement-inconnu { background: #f0f0f0; color: #666; }
.statut-soldee { background: #e8f9f2; color: #0a7a52; }
.statut-annulee { background: #fde8ea; color: #b00410; }
.devis-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.ref-mini { color: var(--color-text); font-size: .78rem; }

@media (max-width: 720px) { .produit { grid-template-columns: 1fr; } }

/* ============================================================
   Responsive mobile / PWA — filet de sécurité + header burger
   ============================================================ */

/* Filet anti-débordement horizontal. NB : on NE met PAS overflow-x:hidden sur
   html/body car cela casserait position:sticky (barre de recherche mobile). Les
   vraies causes de débordement sont traitées à la source (header, images, tableaux). */
img, svg, video { max-width: 100%; height: auto; }

/* Le burger n'existe que sur mobile ; sur desktop le header reste identique. */
.burger { display: none; }

@media (max-width: 768px) {
  .app-header {
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .75rem 1rem;
  }
  .app-header .brand { order: 1; font-size: 1.25rem; }
  /* Panier + burger regroupés à droite sur la première ligne */
  .app-header .cart-link { order: 2; margin-left: auto; }
  .burger {
    order: 3; display: block; cursor: pointer;
    font-size: 1.6rem; line-height: 1; color: #fff; padding: .1rem .35rem;
    user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .app-header .spacer { display: none; }

  /* Les éléments « collapsible » forment le menu déroulant, masqué par défaut */
  .app-header .collapsible { order: 4; flex-basis: 100%; display: none; }
  .nav-toggle:checked ~ .collapsible { display: block; }
  /* La nav s'affiche en colonne (flex) plutôt qu'en bloc quand le menu est ouvert */
  .nav-toggle:checked ~ .app-nav.collapsible { display: flex; }
  /* margin/padding réinitialisés (annule le -40px/32px du desktop) */
  .app-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; margin: .4rem 0 0; padding: .4rem 0 0; }
  .app-nav a { justify-content: flex-start; padding: .7rem .25rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .app-nav a:hover { background: rgba(255,255,255,.1); border-bottom-color: rgba(255,255,255,.12); }
  /* pas de soulignement rouge 3px dans le menu vertical : simple surlignage */
  .app-nav a[aria-current="page"] { background: rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.12); }

  .app-header .who { align-items: flex-start; text-align: left; }
  .app-header .club-switch,
  .app-header .club-switch select { width: 100%; }
  .app-header .club-switch__btn { width: 100%; max-width: none; }
  .app-header .logout { padding: .4rem 0; }

  /* iOS Safari zoome automatiquement sur un champ dont la police fait < 16px,
     ce qui débloque le défilement horizontal. On force 16px sur mobile. */
  input, select, textarea { font-size: 16px; }

  /* Un peu plus de largeur utile pour le contenu sur petit écran */
  .container { padding: 1rem; }
  .page-title { font-size: 1.5rem; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
  .filters { flex-wrap: wrap; }
}

/* ============================================================
   Tableaux → cartes empilées sur mobile
   Chaque <td> porte un data-label (nom de colonne) : en dessous de
   768px, la ligne devient une carte « libellé : valeur », plus de
   scroll latéral. Couvre les listes (.dt-table) ET les tableaux de
   détail (.devis / .liste-table / .remises). Desktop inchangé.
   ============================================================ */
@media (max-width: 768px) {
  /* Conteneur DataTable : on retire le cadre/scroll horizontal */
  .dt-table-wrap { overflow: visible; border: none; box-shadow: none; background: transparent; }

  /* Champ de recherche à 16px = pas de zoom auto iOS au focus (règle plus spécifique
     que le `input{16px}` global, car datatable.css impose 0.9rem). */
  .dt-search input { font-size: 16px; }

  /* Barre de recherche collée en haut : quand on remonte le champ au focus, elle se
     cale pile à 0 (pas de liseré résiduel) et le contenu au-dessus (titre, bouton
     « Créer ») passe dessous proprement. Bonus : la recherche reste accessible quand
     on fait défiler la liste. */
  .dt-toolbar { position: sticky; top: 0; z-index: 20; background: var(--color-bg-soft); padding: .5rem 0; }

  table.dt-table, table.devis, table.liste-table, table.remises { border: 0; width: 100%; }

  /* En-tête masqué : les libellés passent par data-label. display:none (et pas un
     clip) car les <th> d'un thead ne se laissent pas rogner par overflow sur WebKit
     et débordaient horizontalement. Sur les listes DataTable, le filtrage par colonne
     + tri restent sur desktop ; sur mobile on filtre via la recherche globale. */
  table.dt-table thead, table.devis thead, table.liste-table thead, table.remises thead {
    display: none;
  }

  table.dt-table tbody, table.devis tbody, table.liste-table tbody, table.remises tbody,
  table.dt-table tr, table.devis tr, table.liste-table tr, table.remises tr,
  table.dt-table td, table.devis td, table.liste-table td, table.remises td {
    display: block; width: auto;
  }

  /* Une ligne = une carte */
  table.dt-table tbody tr, table.devis tbody tr, table.liste-table tbody tr, table.remises tbody tr {
    background: #fff; border: 1px solid var(--color-border-light, #e5e7eb);
    border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm);
    padding: .35rem .9rem; margin-bottom: .75rem;
  }

  /* Une cellule = libellé (gauche) : valeur (droite) */
  table.dt-table td, table.devis td, table.liste-table td, table.remises td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .5rem 0; border-bottom: 1px solid var(--color-border-light, #f0f0f0);
    text-align: right; min-height: 0;
  }
  table.dt-table td:last-child, table.devis td:last-child,
  table.liste-table td:last-child, table.remises td:last-child { border-bottom: 0; }

  /* En carte, chaque cellule est un bloc : le filet de colonne n'a plus de sens. */
  table.devis th + th, table.devis td + td { border-left: 0; }

  table.dt-table td[data-label]::before, table.devis td[data-label]::before,
  table.liste-table td[data-label]::before, table.remises td[data-label]::before {
    content: attr(data-label); font-weight: 600; color: var(--color-text-muted, #6b7280);
    font-size: .78rem; text-align: left; margin-right: auto; text-transform: none; letter-spacing: 0;
  }

  /* Cellules sans libellé (miniature, boutons d'action) : pas de préfixe, centrées et pleine largeur */
  table.dt-table td:not([data-label]), table.devis td:not([data-label]),
  table.liste-table td:not([data-label]), table.remises td:not([data-label]) {
    justify-content: center; text-align: center;
  }
  table.devis td.col-thumb { padding-bottom: .25rem; }
  table.devis td.col-thumb .ligne-thumb { width: 64px; height: 64px; }
  /* Un bouton d'action (Détail, Préparer, PDF) occupe toute la largeur = plus grande cible tactile */
  table.dt-table td .btn, table.devis td .btn, table.liste-table td .btn, table.remises td .btn { width: 100%; }
  table.dt-table td .btn-sm, table.liste-table td .btn-sm { padding: .55rem 1rem; }

  /* Message « aucun résultat » : reste lisible en pleine largeur */
  table.dt-table td.dt-no-results { justify-content: center; text-align: center; color: var(--color-text-muted, #6b7280); }

  /* Pagination : les boutons passent à la ligne au lieu de déborder (longues listes) */
  .dt-pagination { justify-content: center; }
  .dt-page-btns { flex-wrap: wrap; justify-content: center; }
}

/* ───────── Circuit de validation du devis (moteur validation) ───────── */
.statut-en_validation { background: #fff3cd; color: #8a6d00; }
.statut-valide        { background: #e8f9f2; color: #0a7a52; }
.statut-accepte       { background: #e8f9f2; color: #0a7a52; }
.statut-refuse        { background: #fde8ea; color: #b00410; }
.statut-expire        { background: #f0f0f0; color: #666; }

.nav-badge {
  display: inline-block; padding: 2px 8px; margin-left: 0;
  background: #ec3013; color: #fff; border-radius: 99px;
  font: 700 12px 'Archivo', var(--font-body); text-align: center; line-height: 1.2;
}

.circuit { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #f7f9fc; border: 1px solid #e6ebf3; border-radius: 12px; }
.circuit__titre { margin: 0 0 .75rem; font-size: 1rem; color: var(--color-text-strong, #111e64); }
.circuit__etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.circuit__etape { display: flex; gap: .7rem; align-items: flex-start; }
.circuit__puce { flex: 0 0 1.6rem; height: 1.6rem; width: 1.6rem; display: grid; place-items: center; border-radius: 999px; font-weight: 700; background: #e6ebf3; color: #7a8699; }
.circuit__etape--ok  .circuit__puce { background: #d6f2e6; color: #0a7a52; }
.circuit__etape--ko  .circuit__puce { background: #fbdbe0; color: #b00410; }
.circuit__etape--now .circuit__puce { background: #ffe9a8; color: #8a6d00; }
.circuit__seuil { margin-left: .5rem; font-size: .78rem; color: #7a8699; }
.circuit__meta { font-size: .82rem; color: #667; margin-top: .1rem; }

.valider-form, .refuser-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.valider-form input[type=text], .refuser-form input[type=text] { flex: 1 1 14rem; padding: .5rem .7rem; border: 1px solid #cdd6e4; border-radius: 8px; font-size: 16px; }
.cgv-check { flex: 1 1 100%; display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; }
.signature-note { font-size: .78rem; color: #7a8699; margin: .3rem 0 0; }
.action-info { padding: .7rem .9rem; border-radius: 8px; background: #fff3cd; color: #8a6d00; font-weight: 600; }
.action-info--ko { background: #fde8ea; color: #b00410; }

/* ============================================================
   Connexion — écran « split » : bandeau sport à gauche (motif sur
   fond bleu de marque), formulaire posé sur blanc à droite. La touche
   « B » (photo/hero) est concentrée ici, la seule vraie surface vide
   de l'appli. Sur mobile, le hero passe en fin bandeau au-dessus du form.
   ============================================================ */
.login-page {
  min-height: 100vh; min-height: 100dvh;
  /* minmax(0,…) : sans lui, le minimum « auto » d'une piste grid peut être poussé
     par le contenu et faire déborder la colonne horizontalement (surtout mobile). */
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.login-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  /* Photo multisport N&B (login-hero.webp) + dégradé marine posé par-dessus, plus
     dense à gauche : le texte blanc garde son contraste côté texte, la photo reste
     dramatique côté droit. Ordre des couches : le dégradé (1re) est AU-DESSUS de la
     photo (2e). #0b1030 = repli solide si la photo ne charge pas. */
  /* Teinte marine de marque en DUOTONE : `lighten` remonte les noirs de la photo
     vers #0c1447 (marine sombre) — exactement la couleur du fond ET de la marge.
     Résultat : photo teintée bleu marque, teinte uniforme, AUCUNE bande de jointure
     (le noir de la photo, la marge et le fond partagent la même couleur). */
  background-color: #0c1447;
  background-image:
    linear-gradient(90deg,
      rgba(12,20,71,1) 0%,
      rgba(12,20,71,.88) 20%,
      rgba(12,20,71,.38) 46%,
      rgba(12,20,71,0) 66%),
    url('/img/login-hero.webp');
  background-repeat: no-repeat, no-repeat;
  /* Photo collée à DROITE (contre le cadre blanc). Hauteur 90 % (et non contain=100 %)
     => marge en haut : le panier de basket n'est plus coupé, quelle que soit la résolution. */
  background-position: center, right center;
  background-size: cover, auto 90%;
  /* La photo (2e couche) se fond en `lighten` sur le marine du background-color. */
  background-blend-mode: normal, lighten;
}
.login-hero__brand {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: .5px; line-height: 1;
}
.login-hero__brand .accent { color: var(--color-promo); }
.login-hero__pitch { max-width: 26rem; }
.login-hero__pitch h2 {
  font-family: var(--font-display); color: #fff; font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.12; margin: 0 0 .8rem;
}
.login-hero__pitch p { color: rgba(255,255,255,.82); font-size: 1.02rem; margin: 0; }
.login-hero__foot { font-size: .82rem; color: rgba(255,255,255,.6); }
.login-hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.login-hero__chips span {
  font-size: .74rem; font-weight: 600; letter-spacing: .3px;
  padding: .28rem .7rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
}

/* Côté droit = photo d'objets sport N&B (side-objets.webp) : objets groupés en haut
   et en bas, grand centre vide pour le formulaire. En CONTAIN pour tout montrer ;
   #f6f6f6 (fond réel de la photo) comble les bords → jointure invisible. Remplace le
   motif SVG uniquement sur le login ; le motif reste sur le reste de l'appli. */
.login-form-col {
  display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem;
  /* Objets en DEUX bandes pleine largeur (haut + bas), centre blanc propre pour le
     formulaire. Robuste sur tout format : les objets restent visibles en haut ET en
     bas quelle que soit la hauteur du cadran (fini le rognage du cover qui les sortait
     du champ sur écran large/court). #f6f6f6 = fond réel des bandes → raccord invisible. */
  background-color: #f6f6f6;
  /* Voile blanc (1re couche, cover) par-dessus les 2 bandes d'objets : ils passent en
     filigrane pâle, le formulaire ressort. Le centre (déjà #f6f6f6) est inchangé. */
  background-image:
    linear-gradient(rgba(246,246,246,.8), rgba(246,246,246,.8)),
    url('/img/objets-haut.webp'),
    url('/img/objets-bas.webp');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, top center, bottom center;
  background-size: cover, 100% auto, 100% auto;
}
/* Carte « frosted » : le formulaire reste parfaitement lisible même là où il
   recouvre les objets (léger flou + fond blanc translucide + ombre portée douce). */
.login-card {
  width: min(400px, 100%);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 2rem 2.1rem 2.2rem; border-radius: 18px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.05);
}
.login-card h1 { font-size: 1.8rem; margin-bottom: .3rem; }
.login-card .login-sub { color: var(--color-text); margin: 0 0 1.6rem; }
.login-field { display: block; margin-bottom: 1.1rem; }
.login-field span { display: block; font-weight: 600; color: var(--color-text-strong); font-size: .9rem; margin-bottom: .35rem; }
.login-field input {
  display: block; width: 100%; padding: .7rem .9rem; font: inherit; font-size: 16px;
  border: 1px solid var(--color-border); border-radius: 10px; background: #fff; color: var(--color-text-strong);
}
.login-field input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.login-remember {
  display: flex; align-items: center; gap: .55rem;
  margin: -.35rem 0 1.1rem; font-size: .9rem; cursor: pointer;
}
.login-remember input { flex: none; width: 16px; height: 16px; accent-color: var(--color-primary); }
.login-remember span { font-weight: 500; }
.login-card .btn-primary { width: 100%; padding: .8rem 1.4rem; margin-top: .3rem; }
.login-error {
  background: #fde8ea; color: #b00410; font-weight: 600; font-size: .9rem;
  padding: .7rem .9rem; border-radius: 10px; margin: 0 0 1.2rem;
}

@media (max-width: 860px) {
  .login-page { grid-template-columns: 1fr; }
  /* Sur mobile le hero est un bandeau court et large : la photo repasse en COVER
     (plein cadre) — le contain de desktop y laisserait des bandes latérales. */
  .login-hero {
    padding: 1.5rem 1.5rem 1.8rem;
    background-size: cover, cover;
    background-position: center, center 28%;
  }
  .login-hero__pitch { display: none; }          /* on garde le hero compact sur mobile */
  .login-hero__foot { display: none; }
  .login-hero__chips { margin-top: 1rem; }
}

/* ───────── Signature tactile (pad canvas) ───────── */
.signature-pad { flex: 1 1 100%; display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.signature-pad__label { font-size: .82rem; color: #7a8699; }
.signature-pad__canvas { width: 100%; max-width: 380px; height: 150px; background: #fff; border: 1px dashed #cdd6e4; border-radius: 8px; touch-action: none; cursor: crosshair; }
.circuit__signature { margin-top: .4rem; height: 60px; background: #fff; border: 1px solid #e6ebf3; border-radius: 6px; padding: 2px 6px; }

/* ---------- Hors catalogue (produits ponctuels récupérés des portails B2B) ---------- */
.hc-hero { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem 1.6rem; margin-bottom: 2rem; border-top: 3px solid var(--color-primary); }
.hc-hero .hc-titre { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-text-strong); margin-bottom: .7rem; }
.hc-form { display: flex; gap: .6rem; flex-wrap: wrap; }
.hc-form input { flex: 1; min-width: 240px; padding: .7rem 1rem; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; font-size: 1rem; }
.hc-form input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: transparent; }
.hc-portails { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .8rem; align-items: center; }
.hc-portails .lbl { font-size: .78rem; color: var(--color-text); margin-right: .2rem; }
.hc-pill { font-size: .72rem; font-weight: 600; color: var(--color-blue-ui); background: #eef2ff; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.hc-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition); }
.hc-card:hover { box-shadow: var(--shadow-md); }
.hc-card .hc-haut { display: flex; gap: 1rem; padding: 1rem 1rem .6rem; }
.hc-card .hc-thumb { flex: none; width: 84px; height: 84px; border-radius: 10px; background: var(--color-bg-soft); border: 1px solid var(--color-border-light); display: grid; place-items: center; overflow: hidden; }
.hc-card .hc-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .3rem; }
.hc-card .marque { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--color-blue-ui); font-weight: 600; }
.hc-card .desig { font-weight: 600; color: var(--color-text-strong); line-height: 1.3; }
.hc-card .hc-src { font-size: .74rem; }
.hc-decs { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; margin-top: auto; }
.hc-dec { display: flex; align-items: center; gap: .6rem; background: var(--color-bg-soft); border-radius: 10px; padding: .45rem .7rem; }
.hc-dec .dec-lbl { font-weight: 600; color: var(--color-text-strong); font-size: .88rem; min-width: 3.2rem; }
.hc-dec .dec-ref { font-size: .72rem; color: #6b7280; font-family: ui-monospace, "SF Mono", Menlo, monospace; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-dec .dec-prix { font-weight: 800; color: var(--color-primary); white-space: nowrap; }
.hc-dec input[type="number"] { width: 4.2rem; padding: .35rem .5rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; text-align: center; }
.hc-dec .btn-link { border: none; background: none; color: #999; cursor: pointer; font-size: .95rem; padding: .2rem; }
.hc-dec .btn-link:hover { color: var(--color-promo); }
.hc-actionbar { display: flex; justify-content: flex-end; margin: .4rem 0 1.5rem; }
.hc-res { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .9rem 1.1rem; margin-bottom: .8rem; transition: var(--transition); }
.hc-res:hover { box-shadow: var(--shadow-md); }
.hc-res .hc-thumb { flex: none; width: 64px; height: 64px; border-radius: 10px; background: var(--color-bg-soft); border: 1px solid var(--color-border-light); display: grid; place-items: center; overflow: hidden; }
.hc-res .hc-thumb img { width: 100%; height: 100%; object-fit: contain; padding: .2rem; }
.hc-res .hc-corps { flex: 1; min-width: 0; }
.hc-apercu { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 1.6rem; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; margin-bottom: 1.5rem; }
.hc-apercu .hc-media { aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius); background: var(--color-bg-soft); border: 1px solid var(--color-border-light); overflow: hidden; align-self: start; }
.hc-apercu .hc-media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .8rem; }
.hc-champs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; align-content: start; }
.hc-champs .field.wide { grid-column: 1 / -1; }
.hc-champs label { font-weight: 600; color: var(--color-text-strong); font-size: .88rem; display: block; margin-bottom: .25rem; }
.hc-champs input, .hc-champs textarea { width: 100%; padding: .55rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.hc-decl-table input { width: 100%; padding: .45rem .6rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.hc-decl-table .num input { text-align: right; }
@media (max-width: 640px) {
  .hc-apercu { grid-template-columns: 1fr; }
  .hc-champs { grid-template-columns: 1fr; }
  .hc-grid { grid-template-columns: 1fr; }
}
/* Aperçu hors catalogue : lignes de déclinaisons alignées (badge/remarque sous les champs) */
.hc-decl-table td { vertical-align: top; }
.hc-decl-table td:first-child { padding-top: 1.05rem; }   /* case « Garder » alignée sur les champs */
.hc-decl-table .rmq { font-size: .72rem; line-height: 1.35; color: #8a6d00; background: #fff8e6; border-radius: 8px; padding: .35rem .55rem; margin-top: .4rem; text-align: left; }

/* ═══ Module Stock & Livraison — écran mobile « Trouver un carton » ═══
   Pensé pour un usage à une main dans l'entrepôt : cibles tactiles larges,
   emplacement lisible à bout de bras. */
.carton-recherche { display: flex; gap: .6rem; margin: 1.2rem 0 1.6rem; }
.carton-recherche input { flex: 1; min-width: 0; font-size: 1.15rem; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-family: inherit; }
.carton-recherche .btn { padding-inline: 1.4rem; }
.carton-vide { background: #fff8e6; border: 1px solid #f0d78a; border-radius: var(--radius); padding: 1.2rem; }
.carton-entete { border-bottom: 3px solid var(--color-primary); padding-bottom: .8rem; margin-bottom: 1.2rem; }
.carton-club { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; color: var(--color-text-strong); line-height: 1.1; }
.carton-com { font-size: .95rem; margin-top: .3rem; }
.carton-num { font-size: .95rem; margin-top: .2rem; }
.carton-fiche { background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.2rem; margin-bottom: 1rem; }
.carton-empl { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.carton-empl-l { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.carton-empl-n { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: 1px; color: #fff; background: var(--color-primary); border-radius: 10px; padding: .35rem .9rem; }
.carton-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .88rem; color: var(--color-text); margin-top: .8rem; }
.carton-detail { margin-top: .8rem; font-size: .9rem; }
.carton-detail summary { cursor: pointer; font-weight: 600; padding: .4rem 0; }
.carton-detail ul { margin: .4rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.carton-detail code { font-family: "Courier New", monospace; font-weight: 700; }
.carton-fiche form { margin-top: .9rem; }
@media (max-width: 640px) {
  .carton-recherche { flex-direction: column; }
  .carton-empl-n { font-size: 1.8rem; }
}

/* Sortie de carton : marquage réversible, jamais de suppression. */
.carton-bandeau { margin: -.3rem 0 .9rem; padding: .5rem .8rem; border-radius: 8px; font-size: .88rem; font-weight: 600;
                  background: #e4f4ec; color: #14603f; }
.carton-bandeau.carton-doute { background: #fff8e6; color: #8a6d00; }
.carton-fiche.carton-sorti { opacity: .72; }
.carton-fiche.carton-sorti .carton-empl-n { background: #6b7684; }
.carton-btn-sortir { width: 100%; padding: .85rem 1rem; font-size: 1.02rem; }
.liste-table tr.ligne-sortie, .dt-table tr.ligne-sortie { color: #6b7684; }
.etat-doute { color: #8a6d00; font-weight: 700; }

/* Inventaire réserve : totaux en bandeau. */
.inv-totaux { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0; }
.inv-kpi { flex: 1 1 130px; background: #fff; border: 1px solid var(--color-border-light); border-radius: var(--radius);
           padding: .9rem 1rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .15rem; }
.inv-kpi .inv-n { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--color-primary); }
.inv-kpi .inv-l { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); }

/* Inventaire au scan */
.masque { display: none !important; }
.inv-etat { padding: .7rem 1rem; border-radius: 8px; background: var(--color-bg-soft); font-weight: 600; margin: 1rem 0 .6rem; }
.inv-etat.ok { background: #e4f4ec; color: #14603f; }
.inv-etat.ko { background: #ffe0dc; color: #8c1d10; }
.inv-compteur { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: 1rem; }
.inv-barre { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.inv-empl-champ { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.inv-empl-champ input { padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.inv-video { width: 100%; max-width: 460px; border-radius: var(--radius); background: #000; display: block; }
.inv-dernier { margin: 1rem 0; }
.inv-dernier:empty { display: none; }
.inv-dernier { border-radius: var(--radius); padding: 1rem; border: 2px solid transparent; }
.inv-dernier.inv-ok { background: #e4f4ec; border-color: #1f7a4d; }
.inv-dernier.inv-deplace { background: #fff8e6; border-color: #d8a300; }
.inv-dernier.inv-inconnu { background: #ffe0dc; border-color: #c0392b; }
.inv-d-tete { display: flex; gap: 1rem; flex-wrap: wrap; font-weight: 700; }
.inv-d-cmd { font-size: 1.15rem; }
.inv-d-club { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; }
.inv-d-empl { font-size: 1.3rem; font-weight: 800; margin: .3rem 0; }
.inv-d-msg { font-weight: 700; margin: .3rem 0; }
.inv-d-refs { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.6; }
.inv-d-refs code { font-family: "Courier New", monospace; font-weight: 700; }
.inv-d-total { margin-top: .4rem; font-size: .9rem; font-weight: 600; }
.inv-liste { list-style: none; padding: 0; margin: 0; }
.inv-liste li { padding: .5rem .8rem; border-bottom: 1px solid var(--color-border-light); font-size: .92rem; }
.inv-liste li.inv-deplace { background: #fff8e6; }
.inv-liste li.inv-inconnu { background: #ffe0dc; }
.inv-alerte { color: #c0392b; font-weight: 700; }
.inv-manquants { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.7; }
.inv-complet { background: #e4f4ec; color: #14603f; padding: .8rem 1rem; border-radius: 8px; font-weight: 700; }

/* ---------- Autocomplétion d'adresse (assets/controllers/adresse_ban_controller.js) ----------
   Le conteneur .ban-champ est créé par le contrôleur AUTOUR du champ « rue » : il porte
   le positionnement du panneau. Il redonne aussi sa pleine largeur à l'input, qui la
   tenait jusque-là de son parent flex (.field) ou grille (.cr-grid). */
.ban-champ { position: relative; display: block; width: 100%; }
.ban-champ > input { width: 100%; }
.ban-suggestions {
  position: absolute; z-index: 40; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: .25rem; list-style: none;
  background: #fff; border: 1px solid var(--color-border-light);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(17, 30, 100, .18);
  max-height: 21rem; overflow-y: auto;
}
.ban-suggestions[hidden] { display: none; }
/* Une ligne par proposition : la 6e adresse doit rester visible sans avoir à faire
   défiler la liste — c'est souvent celle que l'on cherchait. */
.ban-suggestions li {
  padding: .38rem .55rem; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ban-suggestions li[data-i]:hover,
.ban-suggestions li[aria-selected="true"] { background: #eef1f8; }
.ban-label { font-size: .9rem; color: var(--color-text-strong, #1c2340); }
.ban-contexte { font-size: .75rem; color: #6b7280; margin-left: .4rem; }
.ban-plus { font-size: .76rem; color: #6b7280; cursor: default; border-top: 1px solid var(--color-border-light); margin-top: .2rem; padding-top: .4rem; }
/* Zone d'annonce pour lecteurs d'écran : lue, jamais vue. */
.ban-statut {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ban-aide { font-size: .78rem; color: #6b7280; margin: .3rem 0 0; }