/* =============================================================================
   Plateforme de commande Snow Group - styles de base
   Theme repris du CRM : fond sage #E4E8E2, rendu professionnel et epure.
   Responsive : utilisable sur telephone et tablette (section 18 du brief).
   ============================================================================= */

/* Police officielle Cinq Mondes (Mr Eaves XL Modern), servie par le site en
   webfont : le navigateur du client la telecharge automatiquement, aucune
   installation n'est necessaire de son cote. woff2 d'abord (leger), ttf en
   secours. font-display swap : le texte s'affiche sans attendre la police. */
@font-face {
  font-family: 'Mr Eaves XL';
  src: url('../assets/fonts/MrEavesXLModOT-Reg.woff2') format('woff2'),
       url('../assets/fonts/MrEavesXLModOT-Reg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sage: #E4E8E2;
  --sage-fonce: #d5dbd2;
  --vert: #2f3a2f;
  --vert-clair: #46543f;
  --texte: #2b2b2b;
  --texte-doux: #6d746d;
  --blanc: #ffffff;
  --erreur: #a33a2e;
  --erreur-fond: #f8e9e6;
  --ok: #2e6b3a;
  --ok-fond: #e8f2ea;
  --info-fond: #fff8e3;
  --info-bord: #d4c37a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  background: var(--sage);
  color: var(--texte);
  font-size: 16px;
}

/* --- Page de connexion / activation ------------------------------------------ */

.page-auth {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.carte-auth {
  background: var(--blanc);
  border: 1px solid var(--sage-fonce);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(47, 58, 47, 0.10);
  width: 100%;
  max-width: 420px;
  padding: 40px 36px 32px;
}

.carte-auth .logo {
  display: block;
  margin: 0 auto 8px;
  max-width: 190px;
  height: auto;
}

.carte-auth h1 {
  font-size: 17px;
  font-weight: 600;
  color: var(--vert);
  text-align: center;
  margin: 18px 0 26px;
}

.champ { margin-bottom: 18px; }
.aide-champ { font-size: 13.5px; color: var(--texte-doux); margin-top: 6px; }
.connexion-video .aide-champ, .carte-verre .aide-champ { color: rgba(255, 255, 255, 0.88); }

.champ label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--vert);
  margin-bottom: 6px;
}

.champ input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--sage-fonce);
  border-radius: 6px;
  font-size: 15px;
  background: #fbfcfa;
  color: var(--texte);
}

.champ input:focus {
  outline: none;
  border-color: var(--vert-clair);
  background: var(--blanc);
}

.champ .aide {
  font-size: 12px;
  color: var(--texte-doux);
  margin-top: 5px;
}

.bouton {
  display: block;
  width: 100%;
  padding: 13px;
  background: var(--vert);
  color: var(--blanc);
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

.bouton:hover { background: var(--vert-clair); }
.bouton:disabled { opacity: 0.6; cursor: wait; }

.message {
  display: none;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 13.5px;
  margin-bottom: 16px;
  line-height: 1.45;
}
.message.visible { display: block; }
.message.erreur { background: var(--erreur-fond); color: var(--erreur); border: 1px solid #e3c4be; }
.message.ok { background: var(--ok-fond); color: var(--ok); border: 1px solid #bdd8c3; }
.message.info { background: var(--info-fond); color: #6b5d20; border: 1px solid var(--info-bord); }

.case-memoriser {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  font-size: 13px;
  color: var(--texte-doux);
}
.case-memoriser input { margin-top: 2px; }

/* Selecteur de langue */
.langues {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.langues button {
  border: 1px solid var(--sage-fonce);
  background: var(--blanc);
  color: var(--texte-doux);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.langues button.actif {
  background: var(--vert);
  border-color: var(--vert);
  color: var(--blanc);
}

/* Pied de page */
.pied-auth {
  margin-top: 26px;
  text-align: center;
  font-size: 12.5px;
  color: var(--texte-doux);
  line-height: 1.8;
}
.pied-auth a { color: var(--vert-clair); }

.etape { display: none; }
.etape.active { display: block; }

@media (max-width: 480px) {
  .carte-auth { padding: 30px 22px 26px; }
}

/* =============================================================================
   Pages connectees : en-tete, accueil, bon de commande, encart de suivi
   ============================================================================= */

.entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--sage-fonce);
  position: sticky;
  top: 0;
  z-index: 40;
}
.entete-int {
  max-width: 1280px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 18px;
}
.entete-logo img { height: 40px; width: auto; display: block; }
.entete-titre { font-size: 15px; font-weight: 600; color: var(--vert); flex: 1; }
.entete-droite { display: flex; align-items: center; gap: 14px; }
.langues-entete { margin: 0; }
.entete-compte { text-align: right; line-height: 1.25; }
.entete-nom { display: block; font-size: 13px; font-weight: 600; color: var(--vert); }
.entete-numero { display: block; font-size: 11.5px; color: var(--texte-doux); }
.entete-logout {
  border: 1px solid var(--sage-fonce); background: var(--blanc); color: var(--texte-doux);
  border-radius: 6px; padding: 7px 12px; font-size: 12.5px; cursor: pointer;
}
.entete-logout:hover { color: var(--erreur); border-color: var(--erreur); }

.contenu { max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px; }

.pied { border-top: 1px solid var(--sage-fonce); background: var(--blanc); margin-top: 40px; }
.pied-int {
  max-width: 1280px; margin: 0 auto; padding: 16px 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12.5px; color: var(--texte-doux);
}
.pied-int a { color: var(--vert-clair); }

/* --- Accueil ------------------------------------------------------------------ */
.bandeau-bienvenue { margin-bottom: 20px; }
.bandeau-bienvenue h1 { font-size: 21px; color: var(--vert); font-weight: 600; }
.bandeau-bienvenue p { font-size: 13px; color: var(--texte-doux); margin-top: 4px; }

.bandeau-brouillon {
  background: var(--vert); color: var(--blanc); border-radius: 10px;
  padding: 18px 22px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.bandeau-brouillon .infos { font-size: 14px; line-height: 1.5; }
.bandeau-brouillon .infos strong { font-size: 15px; }
.bandeau-brouillon .bouton { width: auto; margin: 0; background: var(--blanc); color: var(--vert); padding: 11px 26px; }

.section-titre { font-size: 15px; font-weight: 600; color: var(--vert); margin: 26px 0 12px; }

.cartes-marques { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.carte-marque {
  position: relative; border-radius: 12px; overflow: hidden; cursor: pointer;
  height: 170px; border: none; padding: 0; display: block; width: 100%;
  background-size: cover; background-position: center;
}
.carte-marque::after {
  content: ""; position: absolute; inset: 0; background: rgba(20, 26, 20, 0.38);
}
.carte-marque img.logotype {
  position: absolute; inset: 0; margin: auto; max-width: 62%; max-height: 42%;
  z-index: 2; object-fit: contain;
}
.carte-marque .badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; flex-wrap: wrap; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tuile {
  background: var(--blanc); border: 1px solid var(--sage-fonce); border-radius: 10px;
  padding: 18px 20px; text-decoration: none; color: var(--texte); display: block;
}
.tuile:hover { border-color: var(--vert-clair); }
.tuile .tuile-titre { font-size: 14px; font-weight: 600; color: var(--vert); margin-bottom: 6px; }
.tuile .tuile-info { font-size: 12.5px; color: var(--texte-doux); }

/* --- Badges produits ------------------------------------------------------------ */
.badge {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  padding: 3px 8px; border-radius: 20px; text-transform: uppercase;
}
.badge-nouveau { background: #2f5d3a; color: #fff; }
.badge-retour { background: #7a6c2f; color: #fff; }
/* "Jusqu'a epuisement des stocks" (26/08/2026) : visuellement distinct des
   autres badges, fond sombre lisere ambre, comprehension immediate */
.badge-stock-bas { background: #2b2b2b; color: #f2c14e; border: 1px solid #f2c14e; }
.badge-indispo { background: #8c8c8c; color: #fff; }
.badge-clair { background: rgba(255,255,255,0.92); color: var(--vert); }

/* --- Bon de commande -------------------------------------------------------------- */
.page-bdc { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }

.nav-rubriques { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.nav-rubriques button {
  border: 1px solid var(--sage-fonce); background: var(--blanc); color: var(--texte);
  border-radius: 20px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.nav-rubriques button.actif { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.nav-rubriques button .nb { color: inherit; opacity: 0.65; font-size: 11px; }

.barre-filtres {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center;
}
.barre-filtres input[type="search"] {
  flex: 1; min-width: 220px; padding: 10px 14px; border: 1px solid var(--sage-fonce);
  border-radius: 6px; font-size: 14px; background: var(--blanc);
}
.barre-filtres select {
  padding: 10px 12px; border: 1px solid var(--sage-fonce); border-radius: 6px;
  font-size: 13px; background: var(--blanc); color: var(--texte);
}
.barre-filtres .filtre-btn {
  border: 1px solid var(--sage-fonce); background: var(--blanc); color: var(--texte-doux);
  border-radius: 6px; padding: 9px 13px; font-size: 12.5px; cursor: pointer;
}
.barre-filtres .filtre-btn.actif { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--blanc); }
.compteur-resultats { font-size: 12.5px; color: var(--texte-doux); margin-bottom: 10px; }

.liste-produits { background: var(--blanc); border: 1px solid var(--sage-fonce); border-radius: 10px; overflow: hidden; }
.groupe-titre {
  background: #f0f3ee; padding: 8px 16px; font-size: 12px; font-weight: 700;
  color: var(--vert-clair); letter-spacing: 0.5px; text-transform: uppercase;
}
/* Lot 6, section 6 - duo B valide par Karim (05/08/2026) : les bandeaux
   Visage et Corps portent chacun leur couleur, le fond des produits ne
   change pas. Bleu ardoise doux / terracotta rose (couleur peau). */
.groupe-titre.groupe-visage { background: #5F84A2; color: #fff; letter-spacing: 0.8px; }
.groupe-titre.groupe-corps { background: #CE8F6C; color: #fff; letter-spacing: 0.8px; }
.ligne-produit {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 76px 90px 92px;
  gap: 10px; align-items: center; padding: 9px 16px;
  border-top: 1px solid #eef1ec; font-size: 13.5px;
}
.ligne-produit:hover { background: #fafbf9; }
.ligne-produit .nom { cursor: pointer; color: var(--texte); }
.ligne-produit .nom:hover { color: var(--vert-clair); text-decoration: underline; }
.ligne-produit .nom .badges-inline { margin-left: 6px; }
.ligne-produit .refco { color: var(--texte-doux); font-size: 12px; }
.ligne-produit .taille { color: var(--texte-doux); font-size: 12px; }
.ligne-produit .prix { text-align: right; font-weight: 600; }
/* Lot 6, section 4 : Prix de Vente Conseille affiche sous le prix d'achat,
   partie Retail uniquement */
.ligne-produit .prix .pvc { font-size: 11px; color: var(--texte-doux); font-weight: 400; white-space: nowrap; }
.ligne-produit input.qte {
  width: 100%; padding: 8px 6px; text-align: center; border: 1px solid var(--sage-fonce);
  border-radius: 6px; font-size: 14px;
}
.ligne-produit input.qte:focus { border-color: var(--vert-clair); outline: none; }
.ligne-produit.indispo { opacity: 0.75; }
.ligne-produit.indispo .nom { color: var(--texte-doux); }

/* --- Encart de suivi ------------------------------------------------------------------ */
/* Lot 6, section 5 : le bloc suit le defilement ou que soit le client. Le
   collant est porte par l'aside (le poser sur .encart ne fonctionnait pas :
   son parent avait exactement sa hauteur, aucun espace pour coulisser). Sur
   les ecrans peu hauts, le bloc est plafonne a la hauteur de la fenetre et
   defile en interne, sans jamais recouvrir la commande (colonne dediee). */
.page-bdc aside {
  position: sticky; top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.encart {
  background: var(--blanc); border: 1px solid var(--sage-fonce); border-radius: 10px;
  padding: 18px; font-size: 13px;
}
.encart h2 { font-size: 14px; color: var(--vert); margin-bottom: 12px; }
.encart .ligne-total { display: flex; justify-content: space-between; padding: 3px 0; }
.encart .ligne-total.total { font-weight: 700; border-top: 1px solid var(--sage-fonce); margin-top: 6px; padding-top: 8px; }
.encart .bloc { border-top: 1px solid #eef1ec; margin-top: 12px; padding-top: 12px; }
.encart .neutre { color: var(--texte-doux); }
.encart .msg { border-radius: 6px; padding: 8px 10px; font-size: 12.5px; margin-top: 8px; line-height: 1.45; }
.encart .msg-incitation { background: var(--ok-fond); color: var(--ok); }
.encart .msg-avert { background: var(--info-fond); color: #6b5d20; }
.encart textarea {
  width: 100%; min-height: 70px; border: 1px solid var(--sage-fonce); border-radius: 6px;
  padding: 9px 11px; font-size: 13px; font-family: inherit; margin-top: 6px; resize: vertical;
}
.encart .actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bouton-secondaire {
  display: block; width: 100%; padding: 11px; background: var(--blanc); color: var(--vert);
  border: 1px solid var(--vert); border-radius: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.bouton-secondaire:hover { background: #f2f5f0; }
.etat-brouillon { font-size: 11.5px; color: var(--texte-doux); text-align: center; }

.barre-offres { margin-top: 10px; }
.barre-offre { margin-bottom: 10px; }
.barre-offre .titre { font-size: 12px; font-weight: 600; color: var(--vert); }
.barre-offre .piste { height: 8px; border-radius: 6px; background: #edf0ea; margin: 5px 0 3px; position: relative; overflow: hidden; }
.barre-offre .rempli { position: absolute; left: 0; top: 0; bottom: 0; background: var(--vert-clair); border-radius: 6px; }
.barre-offre .detail { font-size: 11.5px; color: var(--texte-doux); }

/* --- Fenetres modales ------------------------------------------------------------------- */
.voile {
  display: none; position: fixed; inset: 0; background: rgba(30, 36, 30, 0.45);
  z-index: 60; align-items: center; justify-content: center; padding: 18px;
}
.voile.ouvert { display: flex; }
.modale {
  background: var(--blanc); border-radius: 12px; max-width: 560px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 26px 28px; position: relative;
}
.modale .fermer {
  position: absolute; top: 12px; right: 14px; border: none; background: none;
  font-size: 22px; color: var(--texte-doux); cursor: pointer; line-height: 1;
}
.modale h3 { font-size: 17px; color: var(--vert); margin-bottom: 4px; padding-right: 26px; }
.modale .sous-titre { font-size: 13px; color: var(--texte-doux); margin-bottom: 14px; }
.modale img.visuel { max-width: 200px; max-height: 200px; display: block; margin: 10px auto 14px; }
.modale .section { margin-top: 12px; font-size: 13.5px; line-height: 1.55; }
.modale .section .etiquette { font-size: 11.5px; font-weight: 700; color: var(--vert-clair); text-transform: uppercase; letter-spacing: 0.4px; }
.modale .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.modale .tags span { background: #eef2ec; color: var(--vert-clair); font-size: 12px; padding: 4px 10px; border-radius: 16px; }

.recap-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 12px 0; }
.recap-table th, .recap-table td { padding: 6px 8px; border-bottom: 1px solid #eef1ec; text-align: left; }
.recap-table td.num, .recap-table th.num { text-align: right; }
.recap-table .offert { color: var(--ok); }

/* --- Responsive (Spa Managers sur tablette / telephone, section 18) --------------------- */
@media (max-width: 960px) {
  .page-bdc { grid-template-columns: 1fr; }
  .page-bdc aside { position: static; max-height: none; overflow: visible; }
  .encart { position: static; }
  .encart-mobile-barre {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--vert); color: var(--blanc); padding: 12px 18px;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-size: 14px; font-weight: 600;
  }
  .contenu { padding-bottom: 90px; }
}
@media (min-width: 961px) { .encart-mobile-barre { display: none; } }
@media (max-width: 640px) {
  .ligne-produit { grid-template-columns: minmax(0, 1fr) 70px 80px; }
  .ligne-produit .refco, .ligne-produit .taille { display: none; }
  .entete-titre { display: none; }
}

/* =============================================================================
   Espace d'administration
   ============================================================================= */

.admin-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: calc(100vh - 61px); }
.admin-menu { background: var(--blanc); border-right: 1px solid var(--sage-fonce); padding: 16px 10px; }
.admin-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 10px 14px; border-radius: 8px; font-size: 13.5px; color: var(--texte);
  cursor: pointer; margin-bottom: 2px;
}
.admin-menu button:hover { background: #f2f5f0; }
.admin-menu button.actif { background: var(--vert); color: var(--blanc); font-weight: 600; }
/* Bandeau en petits blocs colores (proposition C, puis demande Karim du
   07/10/2026) : meme esprit que les encadres du bon de commande. Fond tres
   legerement teinte, contour et titre de la meme famille. */
.admin-menu-groupe { border: 1px solid; border-radius: 10px; padding: 8px 6px 6px; margin-bottom: 12px; }
.admin-menu-groupe.sable   { background: #faf7ee; border-color: #dccf9f; }
.admin-menu-groupe.sauge   { background: var(--ok-fond); border-color: #9cc3a6; }
.admin-menu-groupe.ardoise { background: #f4f7fa; border-color: #b9c9d8; }
.admin-menu-groupe.prune   { background: #f7f3f8; border-color: #cdbcd3; }
.admin-menu-groupe.terre   { background: #fbf3ee; border-color: #dfb9a3; }
.admin-menu-titre {
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  margin: 2px 8px 7px; padding-bottom: 5px; border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.admin-menu-groupe.sable .admin-menu-titre   { color: #8a7430; }
.admin-menu-groupe.sauge .admin-menu-titre   { color: var(--ok); }
.admin-menu-groupe.ardoise .admin-menu-titre { color: #4a6a86; }
.admin-menu-groupe.prune .admin-menu-titre   { color: #6a4a7a; }
.admin-menu-groupe.terre .admin-menu-titre   { color: #9a5a3a; }
.admin-menu-groupe button { padding: 8px 10px; }
.admin-menu-groupe button:hover { background: rgba(255, 255, 255, .75); }
.admin-menu-groupe button.actif { background: var(--vert); color: var(--blanc); }
.admin-contenu { padding: 22px 26px 60px; max-width: 1100px; }

.admin-barre { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
.admin-barre input[type="search"], .admin-barre input[type="text"] {
  flex: 1; min-width: 200px; padding: 9px 13px; border: 1px solid var(--sage-fonce);
  border-radius: 6px; font-size: 13.5px; background: var(--blanc);
}
.admin-barre select {
  padding: 9px 11px; border: 1px solid var(--sage-fonce); border-radius: 6px;
  font-size: 13px; background: var(--blanc);
}
.admin-barre .bouton, .admin-barre .bouton-secondaire { width: auto; padding: 9px 16px; font-size: 13px; margin: 0; }

.table-admin { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--blanc); border: 1px solid var(--sage-fonce); border-radius: 10px; overflow: hidden; }
.table-admin th { background: #f0f3ee; text-align: left; padding: 9px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--vert-clair); }
.table-admin td { padding: 8px 12px; border-top: 1px solid #eef1ec; vertical-align: middle; }
.table-admin tr:hover td { background: #fafbf9; }
.table-admin td.num { text-align: right; }
.table-admin .lien { color: var(--vert-clair); cursor: pointer; text-decoration: underline; }
.table-admin input { padding: 6px 8px; border: 1px solid var(--sage-fonce); border-radius: 5px; font-size: 13px; width: 100%; }

.menu-contextuel {
  display: none; position: fixed; z-index: 80; background: var(--blanc);
  border: 1px solid var(--sage-fonce); border-radius: 8px; box-shadow: 0 8px 24px rgba(30,36,30,0.18);
  min-width: 230px; padding: 6px; font-size: 13px;
}
.menu-contextuel button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 8px 12px; border-radius: 6px; cursor: pointer; color: var(--texte);
}
.menu-contextuel button:hover { background: #f2f5f0; }

.form-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 12px; }
.form-grille .pleine { grid-column: 1 / -1; }
.form-grille label { display: block; font-size: 12px; font-weight: 600; color: var(--vert); margin-bottom: 4px; }
.form-grille input, .form-grille select, .form-grille textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--sage-fonce); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: #fbfcfa;
}
.form-grille textarea { min-height: 60px; resize: vertical; }
.form-grille .aide { font-size: 11px; color: var(--texte-doux); margin-top: 3px; }
.modale .actions-modale { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.modale .actions-modale .bouton, .modale .actions-modale .bouton-secondaire { width: auto; padding: 10px 20px; font-size: 13.5px; margin: 0; }

.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.pastille-verte { background: #2e6b3a; }
.pastille-orange { background: #a3702e; }
.pastille-grise { background: #8c8c8c; }
.pastille-bleue { background: #3a5a7a; }
.pastille-noire { background: #2b2b2b; }
.etat-discontinue { font-weight: 600; color: #5f5e5a; }

@media (max-width: 860px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-menu { display: flex; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--sage-fonce); }
  .admin-menu button { width: auto; }
  .admin-menu-groupe { display: flex; flex-wrap: wrap; gap: 2px; margin: 6px; flex: 1 1 260px; }
  .admin-menu-titre { width: 100%; margin: 0 4px 4px; }
}

/* =============================================================================
   Chantier moisson du site (CORRECTIONS 5, 7-10) : couleurs de rubriques,
   vignettes produits avec effet de survol, badge Best-Seller, fiche enrichie
   ============================================================================= */

/* Palette des rubriques (point 5).
   Retail et Cabine : codes RVB officiels Snow fournis par Karim (08/07/2026).
   Linge et Outils marketing volontairement les plus discrets (gris / taupe). */
:root {
  --rub-retail: #802145;
  --rub-cabine: #b96b6c;
  --rub-coffret: #6a4a7a;
  --rub-format_voyage: #a3702e;
  --rub-linge: #838b94;
  --rub-testeurs: #4a7a72;
  --rub-echantillons: #5d7a4a;
  --rub-outils_marketing: #857e70;
  --rub-gwp: #8a6d3b;
}
.nav-rubriques button { border-left: 4px solid transparent; }
.nav-rubriques button[data-rubrique] { border-left-color: var(--rub-couleur, transparent); }
.nav-rubriques button.actif[data-rubrique] { background: var(--rub-couleur); border-color: var(--rub-couleur); }
.rub-texte { color: var(--rub-couleur); font-weight: 600; }
.pastille-rubrique {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rub-couleur); margin-right: 7px; vertical-align: baseline;
}

/* Vignettes produits : packshot avec fondu vers le visuel univers au survol */
.vignette {
  position: relative; width: 46px; height: 46px; border-radius: 8px;
  overflow: hidden; background: #f4f6f3; flex: none; display: block;
}
.vignette img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 0.35s ease;
}
.vignette img.survol { opacity: 0; }
.ligne-produit:hover .vignette img.survol, .vignette:hover img.survol { opacity: 1; }
/* Lot 3, section 7 : colonne Code EAN avant la reference ; colonne SPCB
   visible uniquement pour les Franchises et Club Med (liste .avec-spcb). */
.ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 112px 82px 70px 90px 92px; }
.avec-spcb .ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 112px 82px 64px 52px 90px 92px; }
.ligne-produit .ean { color: var(--texte-doux); font-size: 11.5px; letter-spacing: 0.2px; text-align: center; }
.ligne-produit .spcb { color: var(--texte-doux); font-size: 12px; text-align: center; }
/* Alignement parfait donnees / titres (ajustement lot 3) : donnees et titres
   partagent les memes classes, et chaque colonne est centree (PU a droite,
   designation a gauche, comme ses donnees). */
.ligne-produit .refco, .ligne-produit .taille { text-align: center; }
.ligne-entete-colonnes {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--texte-doux); background: #f7f8f5; padding-top: 6px; padding-bottom: 6px;
}
.ligne-entete-colonnes:hover { background: #f7f8f5; }
.ligne-entete-colonnes .ean, .ligne-entete-colonnes .refco, .ligne-entete-colonnes .taille,
.ligne-entete-colonnes .spcb { color: var(--texte-doux); font-size: 10.5px; letter-spacing: 0.5px; }
.ligne-entete-colonnes .prix { font-weight: 700; }
.ligne-entete-colonnes .qte-titre { text-align: center; }
input.qte.qte-invalide { border-color: #c0392b; background: #fdf0ee; }
@media (max-width: 640px) {
  .ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 70px 80px; }
  .avec-spcb .ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 70px 80px; }
  .ligne-produit .ean, .ligne-produit .spcb { display: none; }
  .ligne-entete-colonnes { display: none; }
}

/* Visuel de la fiche produit avec le meme effet */
.fiche-visuel {
  position: relative; width: 220px; height: 220px; margin: 10px auto 14px;
  border-radius: 10px; overflow: hidden; background: #f4f6f3;
}
.fiche-visuel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity 0.4s ease;
}
.fiche-visuel img.survol { opacity: 0; object-fit: cover; }
.fiche-visuel:hover img.survol { opacity: 1; }
/* Photos cabine detourees (lot 3) : le produit detoure reste AU-DESSUS, le
   fond univers du site apparait au survol EN DESSOUS (image transparente). */
.fiche-visuel img.dessus { z-index: 2; object-fit: contain; padding: 8px; }
.fiche-visuel img.fond-dessous { z-index: 1; }
.vignette img.dessus { z-index: 2; object-fit: contain; padding: 2px; }
.vignette img.fond-dessous { z-index: 1; }

.badge-best { background: #1f2d3d; color: #f5d78e; }

.modale details { margin-top: 10px; border: 1px solid var(--sage-fonce); border-radius: 8px; }
.modale details summary {
  cursor: pointer; padding: 9px 12px; font-size: 12px; font-weight: 700;
  color: var(--vert-clair); text-transform: uppercase; letter-spacing: 0.4px;
}
.modale details .contenu-details { padding: 0 12px 12px; font-size: 12.5px; line-height: 1.55; color: var(--texte); }

/* Badge de bonification en temps reel (a cote de la case quantite) */
.cellule-qte { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bonif-badge { display: none; }
.bonif-badge.visible {
  display: inline-block; background: #e7f2e3; color: #2f5d1f;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}

/* =============================================================================
   Rubrique "Affiches a telecharger" (lot 2)
   GABARIT REGLABLE ICI ET NULLE PART AILLEURS :
     --affiche-min = largeur minimale d une affiche dans la grille.
     300px donne environ 3 affiches par rangee sur un grand ecran,
     420px environ 2 par rangee, 560px une tres grande par rangee.
   Sur mobile (moins de 700px), toujours 1 affiche par rangee.
   ============================================================================= */
:root {
  --affiche-min: 380px;
  --rub-affiches: #5d5a72;
}
.grille-affiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--affiche-min), 1fr));
  gap: 18px;
  margin-top: 6px;
}
.carte-affiche {
  background: var(--blanc); border: 1px solid var(--sage-fonce);
  border-radius: 10px; overflow: hidden;
}
.carte-affiche img { width: 100%; height: auto; display: block; }
.carte-affiche .titre-affiche {
  display: block; padding: 12px 16px; font-size: 14px; font-weight: 600;
  color: var(--vert); text-decoration: none;
}
.carte-affiche .titre-affiche:hover { text-decoration: underline; color: var(--vert-clair); }
@media (max-width: 700px) {
  .grille-affiches { grid-template-columns: 1fr; }
}

/* Empilement des fenetres : la fiche produit s ouvre PAR-DESSUS la fenetre
   des offres du cycle ; sa fermeture ramene aux offres (L2-16) */
#voile-offres { z-index: 55; }
#voile-fiche { z-index: 70; }

/* Bandeau "produits offerts au choix" dans l encart de suivi (L2-19) */
.bloc-choix {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  border-radius: 10px; padding: 10px 14px; margin: 10px 0; flex-wrap: wrap;
}
.bloc-choix.a-faire { background: #fff5e6; border: 1px solid #e6b877; }
.bloc-choix.complet { background: var(--ok-fond); border: 1px solid #bdd8c3; }
.bloc-choix-txt { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.35; }
.bloc-choix-txt strong { font-size: 13px; }
.bloc-choix.a-faire .bloc-choix-txt strong { color: #8a5a12; }
.bloc-choix.complet .bloc-choix-txt strong { color: var(--ok); }
.bouton-choix {
  border: none; border-radius: 6px; padding: 8px 16px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.bloc-choix.a-faire .bouton-choix { background: #a3702e; color: #fff; }
.bloc-choix.complet .bouton-choix { background: #fff; color: var(--vert-clair); border: 1px solid var(--sage-fonce); }

/* Carte "Cadeau debloque" (proposition A, L2-19) : le client choisit ses
   produits offerts au clic sur les vignettes, directement dans l'encart. */
.carte-cadeau {
  border: 2px solid var(--ok); background: var(--ok-fond);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0;
}
.carte-cadeau-tete { display: flex; align-items: center; gap: 10px; }
.carte-cadeau-pastille {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.carte-cadeau-titres strong { display: block; font-size: 14px; color: var(--ok); }
.carte-cadeau-instruction { font-size: 12.5px; color: var(--ok); line-height: 1.35; }
.carte-cadeau-note { font-size: 11.5px; color: var(--texte-doux); margin: 6px 0 10px; }
.carte-cadeau-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px;
}
.cadeau-vignette {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 5px; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid var(--sage-fonce); border-radius: 10px;
  padding: 10px 8px 8px; font-family: inherit; color: var(--texte);
  transition: border-color .12s, box-shadow .12s;
}
.cadeau-vignette:hover:not(.desactivee):not(.choisie) { border-color: var(--ok); }
.cadeau-vignette.choisie { border: 2px solid var(--ok); box-shadow: 0 0 0 3px var(--ok-fond); }
.cadeau-vignette.desactivee { opacity: .5; cursor: default; }
.cadeau-vignette img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #fff; }
.cadeau-img-vide { width: 42px; height: 42px; border-radius: 8px; background: #f4f6f3; }
.cadeau-nom { font-size: 12px; line-height: 1.3; color: var(--texte); }
.cadeau-action { font-size: 11px; color: var(--texte-doux); }
.cadeau-vignette.choisie .cadeau-action { color: var(--ok); font-weight: 600; }
.cadeau-badge {
  position: absolute; top: 6px; left: 6px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--ok); color: #fff; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.cadeau-badge .cadeau-check { font-style: normal; }
.cadeau-retirer {
  position: absolute; top: 4px; right: 5px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; border: 1px solid var(--sage-fonce);
  color: var(--texte-doux); font-size: 15px; line-height: 18px; cursor: pointer;
}
.cadeau-retirer:hover { border-color: var(--ok); color: var(--ok); }
.carte-cadeau-compteur { font-size: 12px; font-weight: 600; color: var(--texte-doux); text-align: right; margin-top: 10px; }
.carte-cadeau-compteur.ok { color: var(--ok); }

/* --- Lot 3 ------------------------------------------------------------------ */
/* Retour a l'accueil depuis le BDC (section 7) */
.lien-retour-accueil {
  display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 600;
  color: var(--vert-clair); text-decoration: none;
}
.lien-retour-accueil:hover { text-decoration: underline; }

/* Badges substitution et bientot de retour (sections 5 et 6) */
.badge-substitution { background: #fdf6ec; color: #8a5a12; border: 1px solid #e6c988; }
.badge-bientot-retour { background: #eef4fb; color: #2c5d8f; border: 1px solid #b9d2ea; }

/* Petite fenetre d'indication de substitution sous la ligne produit (s.5) */
.info-substitution {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fdf6ec; border-top: 1px solid #e6c988; border-bottom: 1px solid #e6c988;
  padding: 9px 16px; font-size: 12.5px; color: #6d4a10; line-height: 1.4;
}
.info-substitution-ok {
  border: 1px solid #e6c988; background: #fff; color: #8a5a12; border-radius: 6px;
  padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0;
}

/* Bandeau de rappel des bonifications du contrat (section 10) : titre puis
   une regle par ligne, en liste a puces (lisibilite immediate). */
.bandeau-bonifs {
  background: #f2f7f3; border: 1px solid #bdd8c3; border-radius: 8px;
  padding: 9px 12px; font-size: 12.5px; color: var(--ok); margin: 8px 0 10px; line-height: 1.5;
}
.bandeau-bonifs strong { display: block; margin-bottom: 3px; }
.bandeau-bonifs ul { margin: 0 0 0 18px; padding: 0; }
.bandeau-bonifs li { margin: 2px 0; }

/* Message de proximite de bonification (section 10). Le message est plus
   long que la cellule quantite : il s'affiche en dessous de la ligne, en
   pleine largeur, TOUJOURS entierement lisible (ajustement lot 3). La ligne
   s'agrandit pour lui laisser la place. */
.ligne-produit { position: relative; }
.bonif-badge.proximite { background: #fdf6ec; color: #8a5a12; border: 1px solid #e6c988; }
.bonif-badge.proximite.visible {
  position: absolute; right: 16px; bottom: 5px;
  white-space: nowrap; max-width: calc(100% - 32px);
  overflow: visible; z-index: 4;
}
.ligne-produit:has(.bonif-badge.proximite.visible) { padding-bottom: 32px; }

/* Gratuite liee visible sur le bon de commande (section 12) */
.gratuite-liee {
  background: var(--ok-fond); border: 1px solid #bdd8c3; border-radius: 8px;
  padding: 8px 12px; font-size: 12.5px; color: var(--ok); margin: 8px 0; line-height: 1.4;
}

/* Barre de progression des paliers, version epaisse (section 11) */
.piste-lot3 { height: 16px !important; border-radius: 999px !important; background: #e8ebe6 !important; overflow: hidden; }
.piste-lot3 .rempli { height: 100%; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.felicitations {
  margin: 6px 0 2px; font-size: 12.5px; font-weight: 700; color: var(--ok);
  background: var(--ok-fond); border: 1px solid #bdd8c3; border-radius: 8px; padding: 6px 10px;
}

/* Affichage pedagogique des offres (section 9) */
.offre-pedagogie {
  background: #f7f8f5; border: 1px solid var(--sage-fonce); border-radius: 10px;
  padding: 12px 16px; font-size: 13px; line-height: 1.6; margin: 0 0 12px;
}
.offre-pedagogie ul { margin: 4px 0 10px 18px; }
.offre-pedagogie li { margin: 2px 0; }

/* Bouton d'alerte de retour en stock (section 6) */
.alerte-posee { color: var(--ok) !important; border-color: #bdd8c3 !important; background: var(--ok-fond) !important; }

/* Bandeau Besoin d'aide du pied de page (section 13) */
.btn-aide {
  border: 1px solid var(--sage-fonce); background: var(--blanc); color: var(--vert-clair);
  border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-aide:hover { border-color: var(--vert-clair); }
/* Bulle d'aide flottante (retour de Karim du 18/08/2026 : le texte deplie
   sous le pied de page etait illisible sur la video et peu evident partout) */
.pied { position: relative; }
.panneau-aide {
  position: absolute; bottom: calc(100% + 12px); left: 18px;
  width: min(400px, calc(100vw - 36px));
  background: var(--blanc); border: 1px solid var(--sage-fonce);
  border-radius: 10px; box-shadow: 0 10px 32px rgba(0,0,0,.18);
  padding: 14px 18px; font-size: 13.5px; line-height: 1.6; color: var(--texte);
  text-align: left; z-index: 30;
}
.panneau-aide::after {
  content: ''; position: absolute; top: 100%; left: 34px;
  border: 9px solid transparent; border-top-color: var(--blanc);
}
.panneau-aide p { margin: 8px 0; }
/* version verre depoli sur les pages video */
body.accueil-video .panneau-aide,
body.connexion-video .panneau-aide {
  background: rgba(20,20,20,.78);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
}
body.accueil-video .panneau-aide a,
body.connexion-video .panneau-aide a { color: #fff; }
body.accueil-video .panneau-aide::after,
body.connexion-video .panneau-aide::after { border-top-color: rgba(20,20,20,.78); }
body.accueil-video .btn-aide {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
}
body.accueil-video .btn-aide:hover { background: rgba(255,255,255,.9); color: #1a1a1a; }

/* --- Connexion sur video (variante A validee le 18/08/2026) -------------------
   La carte de connexion EST le panneau en verre depoli du site officiel :
   flou 42 px, voile noir 15 %, textes blancs, champs translucides, bouton
   contour blanc. Mr Eaves reste cantonnee a CETTE page (decision de Karim :
   le reste de la plateforme garde sa police d'origine). ------------------------ */
body.connexion-video {
  font-family: 'Mr Eaves XL', 'Segoe UI', Arial, Helvetica, sans-serif;
  background: #1a1a1a;
}
body.connexion-video .fond-video {
  position: fixed; inset: 0; z-index: 0;
}
body.connexion-video .fond-video video {
  width: 100%; height: 100%; object-fit: cover;
}
/* leger degrade sombre derriere la carte : garantit la lecture sur les
   passages clairs de la video, sans changer le style */
body.connexion-video .fond-video::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 62%);
}
body.connexion-video .page-auth { position: relative; z-index: 1; background: transparent; }
body.connexion-video .carte-auth {
  background: rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px);
  border: none; border-radius: 0; box-shadow: none;
  color: #ffffff;
}
body.connexion-video .carte-auth .logo { width: 200px; }
body.connexion-video .carte-auth h1 {
  color: #ffffff; font-weight: 400; letter-spacing: .6px;
}
body.connexion-video .carte-auth label { color: rgba(255,255,255,.92); font-weight: 400; letter-spacing: .4px; }
body.connexion-video .carte-auth input[type="text"],
body.connexion-video .carte-auth input[type="password"] {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 0; color: #ffffff;
}
body.connexion-video .carte-auth input:focus {
  border-color: #ffffff; background: rgba(255,255,255,.14); outline: none;
}
/* pre-remplissage navigateur : pas de fond jaune sur le verre depoli */
body.connexion-video .carte-auth input:-webkit-autofill,
body.connexion-video .carte-auth input:-webkit-autofill:hover,
body.connexion-video .carte-auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: #ffffff;
  -webkit-box-shadow: 0 0 0 1000px rgba(60,60,60,.85) inset;
  transition: background-color 9999s ease-in-out 0s;
}
body.connexion-video .carte-auth .bouton {
  background: transparent; border: 1px solid #ffffff; color: #ffffff;
  border-radius: 0; letter-spacing: 1.2px; text-transform: uppercase; font-size: 13px;
}
body.connexion-video .carte-auth .bouton:hover:not(:disabled) {
  background: rgba(255,255,255,.92); color: #1a1a1a;
}
body.connexion-video .carte-auth a { color: rgba(255,255,255,.88) !important; }
body.connexion-video .langues button {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color: #ffffff;
}
body.connexion-video .langues button.actif {
  background: rgba(255,255,255,.9); color: #1a1a1a; border-color: transparent;
}
/* messages redessines pour le verre depoli : lisibles, sans aplats clairs */
body.connexion-video .message.info.visible {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); color: #fff;
}
body.connexion-video .message.erreur.visible {
  background: rgba(122, 28, 18, .55); border: 1px solid rgba(255,160,140,.6); color: #ffe3dc;
}
body.connexion-video .message.succes.visible {
  background: rgba(28, 84, 40, .55); border: 1px solid rgba(150,220,165,.6); color: #e2f5e7;
}
body.connexion-video .case-memoriser, body.connexion-video .pied-auth { color: rgba(255,255,255,.75); }

/* --- Accueil client sur video (maquette validee le 18/08/2026) ---------------- */
body.accueil-video {
  background: #1a1a1a;
}
body.accueil-video .fond-video { position: fixed; inset: 0; z-index: 0; }
body.accueil-video .fond-video video { width: 100%; height: 100%; object-fit: cover; }
body.accueil-video .fond-video::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 65%);
}
@media (prefers-reduced-motion: reduce) {
  body.accueil-video .fond-video video { display: none; }
}
/* fond en image fixe : voile un peu plus soutenu pour la lisibilite des blocs */
body.accueil-video .fond-image img,
body.connexion-video .fond-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.accueil-video .fond-image::after,
body.connexion-video .fond-image::after { background: rgba(0,0,0,.22); }

body.accueil-video .entete {
  position: relative; z-index: 2;
  background: rgba(0,0,0,.15);
  -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px);
  border: none; box-shadow: none; color: #fff;
}
body.accueil-video .entete-titre, body.accueil-video .entete-nom,
body.accueil-video .entete-numero { color: #fff; }
body.accueil-video .entete-logo img { height: 30px; width: auto; }
body.accueil-video .langues-entete button {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
}
body.accueil-video .langues-entete button.actif {
  background: rgba(255,255,255,.9); color: #1a1a1a;
}
body.accueil-video .entete-logout {
  background: transparent; border: 1px solid rgba(255,255,255,.55); color: #fff;
}
body.accueil-video .entete-logout:hover { background: rgba(255,255,255,.9); color: #1a1a1a; }
body.accueil-video .contenu { position: relative; z-index: 1; }
body.accueil-video .bandeau-bienvenue {
  background: transparent; border: none; box-shadow: none;
  text-align: center; color: #fff; margin-top: 3vh;
}
body.accueil-video .bandeau-bienvenue h1 {
  font-family: 'Mr Eaves XL', 'Segoe UI', sans-serif; font-weight: 400;
  color: #fff; letter-spacing: .6px;
}
body.accueil-video .bandeau-bienvenue p { color: rgba(255,255,255,.75); }
body.accueil-video .bandeau-brouillon {
  background: rgba(0,0,0,.15);
  -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px);
  border: 1px solid rgba(232,201,160,.55); color: #fff; box-shadow: none;
}
body.accueil-video .bandeau-brouillon .infos { color: #fff; }
/* les blocs descendent volontairement dans la page (retour de Karim) */
body.accueil-video .blocs-accueil {
  max-width: 1120px; margin: 10vh auto 0; padding-bottom: 70px;
  display: flex; flex-direction: column; gap: 26px;
}
body.accueil-video .rangee-blocs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
/* rangee des marques : autant de colonnes que de marques travaillees (3 au plus) */
body.accueil-video .rangee-marques { grid-template-columns: repeat(var(--nb-marques, 3), 1fr); }
/* carte de marque habillee de la video officielle de la marque */
body.accueil-video .carte-marque.avec-video { overflow: hidden; }
body.accueil-video .carte-marque.avec-video video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
body.accueil-video .carte-marque.avec-video::after { background: rgba(10, 30, 45, .28); z-index: 1; }
body.accueil-video .carte-marque.avec-video > *:not(video) { position: relative; z-index: 2; }
body.accueil-video .carte-marque.avec-video .badges { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  body.accueil-video .carte-marque.avec-video video { display: none; }
}
body.accueil-video .bloc-verre,
body.accueil-video .carte-marque {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; color: #fff;
  min-height: 185px; padding: 34px 26px; position: relative;
  background: rgba(0,0,0,.15) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(42px); backdrop-filter: blur(42px);
  border: none; border-radius: 0; box-shadow: none;
  transition: background .25s ease, transform .25s ease;
}
body.accueil-video .bloc-verre:hover,
body.accueil-video .carte-marque:hover {
  background: rgba(255,255,255,.12) !important; transform: translateY(-4px);
}
body.accueil-video .titre-bloc {
  font-family: 'Mr Eaves XL', 'Segoe UI', sans-serif;
  font-size: 25px; font-weight: 400; letter-spacing: .8px; color: #fff;
}
body.accueil-video .sous-bloc {
  margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.78); letter-spacing: .3px;
}
/* Tous les logotypes occupent la MEME boite (hauteur fixe) : le mot
   "Commander" tombe ainsi a la meme hauteur dans les trois cases. */
body.accueil-video .carte-marque .logotype {
  position: static; width: 168px; height: 62px; max-width: 90%; max-height: none;
  object-fit: contain; margin: 0 0 10px; filter: none;
}
/* le logotype Deep Nature est plus compact que les autres : on le grossit */
body.accueil-video .carte-marque[data-marque="deep_nature"] .logotype {
  width: 185px; object-fit: cover;   /* rogne la marge transparente du fichier */
}
body.accueil-video .carte-marque .badges { position: absolute; top: 12px; right: 12px; left: auto; }
body.accueil-video .carte-marque .badge,
body.accueil-video .badge-bloc {
  background: rgba(255,255,255,.9); color: #1a1a1a;
  font-size: 11px; font-weight: 600; letter-spacing: .4px;
  padding: 3px 9px; border-radius: 999px;
}
body.accueil-video .badge-bloc { position: absolute; top: 14px; right: 14px; }
body.accueil-video .pied {
  position: relative; z-index: 1; background: transparent; border: none;
  color: rgba(255,255,255,.65);
}
body.accueil-video .pied a { color: rgba(255,255,255,.65); }
@media (max-width: 640px) {
  body.accueil-video .rangee-blocs,
  body.accueil-video .rangee-marques { grid-template-columns: 1fr; }
  body.accueil-video .blocs-accueil { margin-top: 5vh; }
}

/* --- Accueil : bandeau unique en bas (essai C retenu par Karim le 05/10/2026) --
   Le logo Snow Group remplace la salutation en haut de page. Le bandeau du
   compte (nom du spa, langues, deconnexion) est centre et ancre en bas ; le
   pied de page se superpose a la meme barre : aide a gauche, mentions a droite. */
.hors-ecran {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
body.accueil-video .logo-accueil { display: block; width: 250px; max-width: 60%; height: auto; margin: 0 auto 6px; }
body.accueil-video .bandeau-bienvenue { margin-top: 5vh; }
body.accueil-video .entete {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 40;
}
body.accueil-video .entete-int { justify-content: center; min-height: 60px; }
body.accueil-video .entete-logo, body.accueil-video .entete-titre { display: none; }
body.accueil-video .entete-droite { gap: 22px; }
body.accueil-video .entete-compte { text-align: center; order: -1; }
body.accueil-video .pied {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 41; margin: 0;
  pointer-events: none;
}
body.accueil-video .pied-int {
  max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
body.accueil-video .pied-int > *, body.accueil-video .panneau-aide { pointer-events: auto; }
body.accueil-video .blocs-accueil { margin-top: 6vh; padding-bottom: 100px; }
@media (max-width: 980px) {
  /* ecran etroit : l'aide et les mentions repassent au-dessus du bandeau */
  body.accueil-video .pied { bottom: 60px; }
  body.accueil-video .pied-int { height: 44px; }
  body.accueil-video .blocs-accueil { padding-bottom: 140px; }
}

/* =============================================================================
   Lot 7 - Vue "Produits non disponibles" (points 4-5-6, valides le 19/08/2026)
   Presentation P1 : cartes produit avec pastilles de format, trois rubriques
   alimentees par les badges, frise interactive des retours en escalier.
   ============================================================================= */
.pm-rubrique {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #d5dbd2;
}
.pm-rubrique h3 { margin: 0; font-size: 17px; color: #2f3a2f; }
.pm-rubrique span { font-size: 13px; color: #6d746d; }
.pm-rub-av { border-color: #802145; }
.pm-rub-pn { border-color: #5F84A2; }
.pm-rub-pr { border-color: #4a7a56; }
.pm-rub-ar { border-color: #857E70; }
.pm-texte-arretes { font-size: 13px; color: #6d746d; margin: 0 0 12px; max-width: 72ch; }
.pm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pm-carte {
  background: #fff; border: 1px solid #d5dbd2; border-radius: 10px;
  padding: 14px 16px; box-shadow: 0 1px 3px rgba(38, 48, 42, 0.07);
  display: flex; flex-direction: column; gap: 8px;
}
.pm-nom { font-weight: 600; line-height: 1.3; cursor: pointer; }
.pm-nom:hover { text-decoration: underline; }
.pm-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 9px; margin: 1px 2px 1px 0;
}
.pm-badge-av { background: #f5e6ec; color: #802145; }
.pm-badge-pn { background: #eaf1f6; color: #4a6d88; }
.pm-badge-pr { background: #e9f2ea; color: #3d6647; }
.pm-badge-ar { background: #f0ece6; color: #746a5b; }
.pm-pastilles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pm-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 4px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #eef1ec; color: #6d746d; border: 1px solid #d5dbd2;
}
.pm-pastille.touche { background: #2f3a2f; color: #fff; border-color: #2f3a2f; cursor: pointer; }
.pm-chip {
  font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: #eef1ec; color: #6d746d; border: 1px solid #d5dbd2;
}
.pm-retour { font-size: 13px; color: #6d746d; }
.pm-retour strong { color: #2b2b2b; }
.pm-sub {
  font-size: 12.5px; color: #7a5c2e; background: #fdf6ec;
  border: 1px solid #e6c988; border-radius: 8px; padding: 6px 10px;
}
.pm-sugg {
  font-size: 12.5px; background: #eef3f6; border: 1px solid #b9cdd9;
  border-radius: 8px; padding: 8px 10px;
}
.pm-sugg-liste { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.pm-sugg-liste a { color: #2b2b2b; }
.pm-sugg-note { display: block; font-size: 11px; color: #5c6a74; margin-top: 6px; }
/* Frise des retours */
.pm-frise-bloc {
  background: #fff; border: 1px solid #d5dbd2; border-radius: 10px;
  padding: 16px 18px 12px; margin-bottom: 8px;
}
.pm-frise-titre { font-weight: 600; color: #2f3a2f; }
.pm-frise-titre span { font-weight: 400; font-size: 12px; color: #6d746d; margin-left: 10px; }
.pm-frise-axe { position: relative; height: 2px; background: #d5dbd2; margin: 190px 26px 40px; }
.pm-frise-tick { position: absolute; top: -4px; width: 1px; height: 10px; background: #d5dbd2; }
.pm-frise-mois {
  position: absolute; top: 10px; transform: translateX(-50%);
  font-size: 10.5px; color: #6d746d; white-space: nowrap;
}
/* Bulles en escalier : trois hauteurs pour que les periodes proches ne se
   chevauchent jamais (retour de Karim du 19/08/2026). Le groupe est ANCRE
   sur l'axe (bottom 2px = epaisseur du trait) et c'est la hauteur de la tige
   qui monte la bulle : la tige rejoint donc toujours la frise. */
.pm-frise-groupe { position: absolute; bottom: 2px; transform: translateX(-50%); text-align: center; }
.pm-frise-groupe .pm-frise-tige { height: 12px; }
.pm-frise-groupe.pm-niveau-1 .pm-frise-tige { height: 68px; }
.pm-frise-groupe.pm-niveau-2 .pm-frise-tige { height: 124px; }
.pm-frise-lib { font-size: 11px; color: #6d746d; max-width: 96px; margin: 0 auto 3px; line-height: 1.25; }
.pm-frise-bulle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
  background: #2f3a2f; color: #fff; font-weight: 700; font-size: 13px;
  border: none; cursor: pointer;
}
.pm-frise-bulle.actif, .pm-frise-bulle:hover { background: #5F84A2; }
.pm-frise-tige { width: 1px; height: 14px; background: #9aa39a; margin: 2px auto 0; }
.pm-frise-detail {
  border: 1px dashed #d5dbd2; border-radius: 8px; padding: 10px 14px;
  font-size: 13px; color: #4b524b; min-height: 40px;
}
.pm-frise-detail ul { margin: 6px 0 0; padding-left: 18px; }
.pm-frise-inconnus {
  margin-top: 10px; border: 1px dashed #d5dbd2; border-radius: 8px;
  padding: 10px 14px; font-size: 12.5px; color: #6d746d; background: #fbfcfa;
}
@media (max-width: 640px) { .pm-frise-axe { margin-left: 8px; margin-right: 8px; } }

/* Marge interieure de la vue Produits non disponibles : les cartes et les
   titres ne touchent jamais la bordure du panneau (retour Karim 19/08/2026) */
.pm-page { padding: 10px 16px 24px; }
.pm-page > .pm-rubrique:first-child { margin-top: 12px; }
/* Bouton d'alerte de retour sur la carte */
.pm-alerte { width: 100%; font-size: 12.5px; padding: 7px 10px; }
.pm-alerte.alerte-posee { color: #2e6b3a; border-color: #bdd8c3; background: #e8f2ea; }

/* =============================================================================
   Espace d'analyse : habillage cale sur la maquette validee (Partie B)
   Bandeau bordeaux, onglets soulignes, pastilles blanches, tableaux beiges.
   Tout est scope sous .analyse-espace : le reste de l'admin garde ses styles.
   ============================================================================= */
.analyse-espace { --an-bordeaux: #802145; background: #f6f4f2; border: 1px solid #e5e0db; border-radius: 10px; padding: 0 18px 22px; }
.analyse-espace .an-entete {
  background: var(--an-bordeaux); color: #fff; margin: 0 -18px; padding: 13px 20px;
  border-radius: 9px 9px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.analyse-espace .an-titre { font-weight: 600; font-size: 16px; }
.analyse-espace .an-badge {
  background: #fff; color: var(--an-bordeaux); border: none; border-radius: 12px;
  padding: 3px 12px; font-weight: 700; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.analyse-espace .an-note { font-size: 12px; opacity: .85; font-style: italic; margin-left: auto; }
.analyse-espace .an-onglets {
  display: flex; flex-wrap: wrap; background: #fff; margin: 0 -18px 16px;
  padding: 0 10px; border-bottom: 1px solid #ddd;
}
.analyse-espace .an-onglets button {
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 12px 14px; font-size: 13.5px; color: #555; cursor: pointer; font-family: inherit;
}
.analyse-espace .an-onglets button.actif { color: var(--an-bordeaux); border-bottom-color: var(--an-bordeaux); font-weight: 600; }
.analyse-espace .an-onglets button:disabled { opacity: .45; cursor: not-allowed; }
.analyse-espace .section-titre { color: var(--an-bordeaux); font-size: 15px; }
.analyse-espace .admin-barre {
  background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px;
}
.analyse-espace .filtre-btn {
  border: 1px solid #ccc; background: #fff; color: #555; border-radius: 999px;
  padding: 6px 14px; font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.analyse-espace .filtre-btn:hover:not(:disabled):not(.actif) { background: #f1ece9; }
.analyse-espace .filtre-btn.actif { background: var(--an-bordeaux); border-color: var(--an-bordeaux); color: #fff; }
.analyse-espace [id$="-export"] {
  background: var(--an-bordeaux); border-color: var(--an-bordeaux); color: #fff;
  border-radius: 6px; font-weight: 600;
}
.analyse-espace [id$="-export"]:hover { background: #6a1b39 !important; }
.analyse-espace .table-admin { border: 1px solid #e2ddd8; border-radius: 8px; }
.analyse-espace .table-admin th {
  background: #f3efec; color: #555; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; font-weight: 600; border: 1px solid #e2ddd8;
}
.analyse-espace .table-admin td { border: 1px solid #e2ddd8; }
.analyse-espace .table-admin tr:hover td { background: #faf8f6; }
.analyse-espace select, .analyse-espace input[type="text"], .analyse-espace input[type="search"], .analyse-espace input[list] {
  border: 1px solid #ccc; border-radius: 6px; padding: 5px 8px; font-size: 13px; background: #fff; font-family: inherit;
}
#an-infobulle {
  position: fixed; display: none; pointer-events: none; z-index: 300;
  background: #1c1c1c; color: #fff; border-radius: 6px; padding: 8px 10px;
  font-size: 12.5px; line-height: 1.5; max-width: 300px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* =============================================================================
   Lot du 26/08/2026 : categorie "A venir", frise simplifiee, galerie de fiche
   ============================================================================= */
.av-carte .av-vignette { text-align: center; cursor: pointer; margin-bottom: 8px; }
.av-carte .av-vignette img { max-width: 100%; max-height: 140px; object-fit: contain; }
.av-carte .av-taille { font-size: 12px; color: #8a8a8a; font-weight: 400; }
.av-carte .av-prix { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.av-carte .av-prix .pvc { font-size: 11.5px; color: #8a8a8a; font-weight: 400; }
.av-carte .av-note { font-size: 11.5px; color: #8a8a8a; font-style: italic; margin-top: 6px; }
.pm-frise-compte {
  position: absolute; top: -6px; right: -8px; background: #802145; color: #fff;
  font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 1px 5px; line-height: 1.3;
}
.pm-frise-bulle { position: relative; }
.pm-frise-legende { margin: 10px 0 0 22px; font-size: 12.5px; color: #4d4d4d; }
.pm-frise-legende li { margin-bottom: 3px; }
.pm-frise-alt { font-size: 12px; color: #5c6a74; }
.fiche-galerie { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.fiche-galerie img { max-width: 110px; max-height: 110px; object-fit: contain; border: 1px solid #e4e4e0; border-radius: 8px; padding: 4px; background: #fff; }

/* Connexion de l'administration : meme fond fixe que l'espace client
   (demande Karim du 05/10/2026). La carte blanche reste inchangee. */
#page-connexion.page-auth {
  background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)),
    url('../assets/fond_accueil_snow.jpg') center / cover no-repeat;
}

/* =============================================================================
   Lisibilite de l'espace client (demande Karim du 05/10/2026) : nos clients
   ont souvent une vue fatiguee, tout est grossi. Les filtres du bon de
   commande (recherche, besoins, disponibles, nouveautes...) restent tels quels.
   ============================================================================= */
/* Mes commandes, Mes factures, Offres du cycle : agrandissement d'ensemble */
body.lisible:not(.lisible-bdc) .contenu { zoom: 1.12; }

/* Bon de commande : onglets de rubriques */
body.lisible-bdc .nav-rubriques { gap: 10px; margin-bottom: 16px; }
body.lisible-bdc .nav-rubriques button { font-size: 16.5px; padding: 11px 22px; border-radius: 26px; }
body.lisible-bdc .nav-rubriques button .nb { font-size: 13.5px; }

/* Bon de commande : liste des produits */
body.lisible-bdc .page-bdc { grid-template-columns: minmax(0, 1fr) 370px; }
body.lisible-bdc .groupe-titre { font-size: 14px; padding: 10px 16px; }
body.lisible-bdc .ligne-produit {
  font-size: 15.5px; padding: 11px 16px;
  grid-template-columns: 54px minmax(0, 1fr) 124px 92px 78px 100px 96px;
}
body.lisible-bdc .avec-spcb .ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 124px 92px 72px 56px 100px 96px; }
body.lisible-bdc .ligne-produit .ean { font-size: 13px; }
body.lisible-bdc .ligne-produit .refco,
body.lisible-bdc .ligne-produit .taille,
body.lisible-bdc .ligne-produit .spcb { font-size: 13.5px; }
body.lisible-bdc .ligne-produit .prix .pvc { font-size: 12.5px; }
body.lisible-bdc .ligne-produit input.qte { font-size: 16px; padding: 9px 6px; }
@media (max-width: 960px) {
  body.lisible-bdc .page-bdc { grid-template-columns: 1fr; }
  body.lisible-bdc .ligne-produit,
  body.lisible-bdc .avec-spcb .ligne-produit { grid-template-columns: 54px minmax(0, 1fr) 78px 84px; }
}

/* Bon de commande : suivi de la commande */
body.lisible-bdc .encart { font-size: 15.5px; padding: 20px; }
body.lisible-bdc .encart h2 { font-size: 18px; margin-bottom: 14px; }
body.lisible-bdc .encart .ligne-total { padding: 5px 0; gap: 12px; }
body.lisible-bdc .encart .ligne-total span:last-child { white-space: nowrap; }
body.lisible-bdc .encart .ligne-total.total { font-size: 17.5px; padding-top: 10px; margin-top: 8px; }
body.lisible-bdc .encart .msg { font-size: 14px; }
body.lisible-bdc .encart textarea { font-size: 15px; }
body.lisible-bdc .encart .bouton, body.lisible-bdc .encart .bouton-secondaire { font-size: 15.5px; padding: 13px; }
body.lisible-bdc .etat-brouillon { font-size: 13px; }

/* Recapitulatif en deux blocs : "Produits factures" / "Offert avec votre commande" */
.encart .titre-recap {
  font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--texte-doux); margin: 4px 0 4px;
}
.encart .titre-recap.offert { color: var(--ok); margin-top: 20px; }
.encart .montant-offert { color: var(--ok); }
.encart .total-offert {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 10px;
  background: var(--ok-fond); color: var(--ok); border-radius: 8px;
  padding: 11px 13px; font-weight: 700; font-size: 17px;
}

/* Barre de progression des offres du cycle : bien visible */
body.lisible-bdc .barre-offre { margin-bottom: 16px; }
body.lisible-bdc .barre-offre .titre { font-size: 15.5px; }
body.lisible-bdc .piste-lot3 { height: 28px !important; margin: 8px 0 6px !important; }
body.lisible-bdc .barre-offre .detail { font-size: 14px; }
body.lisible-bdc .barre-offre .felicitations { font-size: 14.5px; }
body.lisible-bdc #lien-offres { font-size: 14.5px !important; }
body.lisible-bdc .bandeau-bonifs { font-size: 14.5px; }

body.lisible-bdc .contenu { max-width: 1440px; }

.encart .hors-enveloppe { color: var(--texte-doux); font-size: .88em; }

/* Recapitulatif en encadres (proposition B retenue le 05/10/2026) : une boite
   a contour par partie, messages en petites notes encadrees sur fond blanc,
   le vert reserve aux montants offerts. */
.encart .carte-recap { border: 1px solid #cfd6cc; border-radius: 9px; padding: 12px 14px; margin-top: 12px; }
.encart .carte-recap.offerte { border-color: #9cc3a6; }
.encart .carte-recap .titre-recap { margin: 0 0 6px; }
.encart .carte-recap .titre-recap.offert { margin-top: 0; }
.encart .carte-recap .total-offert {
  background: none; border-top: 1px solid #cfe0d3; border-radius: 0;
  padding: 9px 0 0; margin-top: 6px;
}
.encart .carte-recap .msg { background: #fff; border: 1px solid #e0cf8d; color: #4a4f4a; margin-top: 10px; }
.encart .carte-recap .msg.msg-incitation { border-color: #b4d3bb; }
.encart .carte-recap .gratuite-liee { margin: 6px 0; }

/* Couleurs des trois encadres (proposition 1 retenue par Karim le 05/10/2026) :
   fond tres legerement teinte, contour et titre de la meme famille. Bleu
   ardoise = facture, vert sauge = offert, sable = enveloppe de gratuites. Les
   notes de message ont un contour neutre : la couleur ne sert qu'aux blocs. */
.encart .carte-recap.facture { background: #f4f7fa; border-color: #b9c9d8; }
.encart .carte-recap.facture .titre-recap { color: #4a6a86; }
.encart .carte-recap.offerte { background: #f2f7f3; border-color: #a9cbb2; }
.encart .carte-recap.offerte .titre-recap { color: #2e6b3a; }
.encart .carte-recap.offerte .total-offert { border-top-color: #c5dccb; }
.encart .carte-recap.enveloppe { background: #faf7ee; border-color: #dccf9f; }
.encart .carte-recap.enveloppe .titre-recap { color: #8a7430; }
.encart .carte-recap .msg, .encart .carte-recap .msg.msg-incitation { border-color: #d9ddd6; }

/* Detail de l'enveloppe par rubrique, puis sous-total "Total utilise" */
.encart .detail-enveloppe { padding-left: 12px; }
.encart .ligne-total.sous-total { border-top: 1px solid #e6dcb8; margin-top: 4px; padding-top: 7px; font-weight: 600; }

/* =============================================================================
   Acces multi-spas et espace directrice (058) : ecrans en gros caracteres
   (utilisatrices a la vue fatiguee), memes couleurs que le reste du site.
   ============================================================================= */
a.entete-spa { text-decoration: none; border: 1px solid var(--sage-fonce); border-radius: 8px; padding: 5px 10px; }
a.entete-spa:hover { border-color: var(--vert); }
.page-grand { font-size: 18px; line-height: 1.45; max-width: 1100px; }
.page-grand h1 { font-size: 28px; color: var(--vert); margin: 6px 0 6px; }
.page-grand h2 { font-size: 23px; color: var(--vert); margin: 30px 0 6px; }
.page-grand section { margin-bottom: 18px; }
.sous-grand { color: var(--texte-doux); margin-bottom: 18px; font-size: 17px; }
.bouton-grand {
  display: inline-block; border: 2px solid var(--vert); background: var(--vert); color: #fff;
  border-radius: 8px; padding: 12px 20px; font-size: 18px; font-weight: 600; cursor: pointer;
  text-decoration: none; font-family: inherit; line-height: 1.2;
}
.bouton-grand.secondaire { background: #fff; color: var(--vert); }
.bouton-grand.refus { background: #fff; color: var(--erreur); border-color: var(--erreur); }
.bouton-grand:disabled { opacity: .5; cursor: not-allowed; }
.actions-grand { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.alerte-grand { border: 2px solid; border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; font-size: 18px; }
.alerte-grand strong { display: block; font-size: 20px; margin-bottom: 4px; }
.alerte-grand .bouton-grand { margin-top: 12px; }
.alerte-grand.attente { background: #fff1d6; border-color: #e3b65c; color: #5c3d00; }
.alerte-grand.refus { background: var(--erreur-fond); border-color: #dfa69d; color: var(--erreur); }
.alerte-grand.ok { background: var(--ok-fond); border-color: #9cc5a5; color: var(--ok); }
.alerte-grand.info { background: var(--info-fond); border-color: var(--info-bord); color: #5a4c12; }
.pastille-grand { display: inline-block; border-radius: 999px; padding: 4px 12px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.pastille-grand.attente { background: #fff1d6; color: #8a5a00; }
.pastille-grand.neutre { background: #eef0ed; color: var(--texte-doux); }
.pastille-grand.ok { background: var(--ok-fond); color: var(--ok); }
.pastille-grand.refus { background: var(--erreur-fond); color: var(--erreur); }
.tuiles-spas { display: grid; gap: 14px; max-width: 760px; }
.tuile-spa {
  display: flex; align-items: center; gap: 18px; width: 100%; text-align: left; cursor: pointer;
  background: #fff; border: 2px solid var(--sage-fonce); border-radius: 10px; padding: 18px 22px; font-family: inherit; color: var(--texte);
}
.tuile-spa:hover, .tuile-spa.courante { border-color: var(--vert); }
.tuile-spa .info { flex: 1; }
.tuile-spa .nom { font-size: 21px; font-weight: 600; color: var(--vert); }
.tuile-spa .num { color: var(--texte-doux); font-size: 16px; }
.tuile-spa .pastilles { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.bloc-spa { background: #fff; border: 1px solid var(--sage-fonce); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.bloc-spa-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 22px; background: #f4f6f3; border-bottom: 1px solid var(--sage-fonce); }
.bloc-spa-tete .nom { font-size: 21px; font-weight: 600; color: var(--vert); }
.bloc-spa-tete .regle { font-size: 16px; color: var(--texte-doux); }
.bloc-spa-corps { padding: 4px 22px 12px; }
.ligne-dossier { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--sage-fonce); }
.ligne-dossier:last-child { border-bottom: none; }
.ligne-dossier .quoi { flex: 1; min-width: 240px; }
.ligne-dossier .quoi small { display: block; color: var(--texte-doux); font-size: 16px; }
.ligne-dossier .quoi.vide { color: var(--texte-doux); }
.ligne-dossier .montant { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 120px; text-align: right; }
.regle-spa { background: #fff; border: 1px solid var(--sage-fonce); border-radius: 10px; padding: 18px 22px; margin-bottom: 16px; }
.regle-spa .nom { font-size: 21px; font-weight: 600; color: var(--vert); margin-bottom: 8px; }
.option-grand { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; font-size: 19px; flex-wrap: wrap; }
.option-grand input[type=radio] { width: 24px; height: 24px; accent-color: var(--vert); }
.option-grand input[type=number] { width: 130px; padding: 8px 10px; border: 1px solid var(--sage-fonce); border-radius: 8px; font-size: 19px; text-align: right; }
.option-grand .aide { color: var(--texte-doux); font-size: 16px; }
.etat-regle { font-size: 16px; }
.etat-regle.ok { color: var(--ok); }
.etat-regle.erreur { color: var(--erreur); }
.tableau-grand { width: 100%; border-collapse: collapse; font-size: 17px; background: #fff; }
.tableau-grand th { text-align: left; font-size: 15px; color: var(--texte-doux); font-weight: 600; border-bottom: 2px solid var(--sage-fonce); padding: 10px; }
.tableau-grand td { padding: 11px 10px; border-bottom: 1px solid var(--sage-fonce); vertical-align: top; }
.tableau-grand .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau-grand tr.total td { font-weight: 700; }
.carte-grand { background: #fff; border: 1px solid var(--sage-fonce); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; overflow-x: auto; }
.filtres-grand { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.filtres-grand label { display: block; font-size: 15px; color: var(--texte-doux); margin-bottom: 4px; }
.filtres-grand select { padding: 10px 12px; border: 1px solid var(--sage-fonce); border-radius: 8px; background: #fff; font-size: 17px; min-width: 220px; font-family: inherit; }
.txt-ok { color: var(--ok); font-weight: 600; }
.txt-depasse { color: var(--erreur); font-weight: 600; }
.bandeau-validation { background: #fff1d6; border-bottom: 2px solid #e3b65c; color: #5c3d00; padding: 14px 20px; font-size: 18px; }
.bandeau-validation .int { max-width: 1280px; margin: 0 auto; }
.bandeau-validation strong { font-size: 20px; }
.decisions-validation { border-top: 2px solid #e3b65c; margin-top: 14px; padding-top: 12px; }
.decisions-validation textarea { width: 100%; min-height: 80px; font-size: 16px; padding: 10px; border: 1px solid var(--sage-fonce); border-radius: 8px; font-family: inherit; }
.decisions-validation .bouton-grand { width: 100%; margin-top: 8px; font-size: 17px; }
.zone-validation-cmd { margin-bottom: 18px; font-size: 17px; }
@media (max-width: 640px) {
  .page-grand { font-size: 17px; }
  .tuile-spa { flex-direction: column; align-items: flex-start; }
  .tuile-spa .pastilles { align-items: flex-start; }
  .bloc-spa-corps, .bloc-spa-tete, .regle-spa { padding-left: 16px; padding-right: 16px; }
  .entete-int:has(.entete-spa) { flex-wrap: wrap; }
  .entete-droite:has(.entete-spa) { flex-wrap: wrap; justify-content: flex-end; width: 100%; }
  a.entete-spa .entete-nom { white-space: normal; }
}
a.entete-accueil { text-decoration: none; display: inline-block; color: var(--vert); border-color: var(--vert); font-weight: 600; }
a.entete-accueil:hover { color: #fff; background: var(--vert); border-color: var(--vert); }
.formulaire-grand { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; }
.formulaire-grand label { display: flex; flex-direction: column; gap: 6px; font-size: 17px; color: var(--vert); font-weight: 600; }
.formulaire-grand input { font-size: 18px; padding: 10px 12px; border: 1px solid var(--sage-fonce); border-radius: 8px; font-family: inherit; font-weight: 400; color: var(--texte); }
.lien-pied { background: none; border: none; color: var(--vert-clair); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; padding: 0; }
body.accueil-video .lien-pied { color: #fff; }
.cycle-pdf { margin: 6px 0 16px; }
.cycle-pdf-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cycle-pdf-actions a { text-decoration: none; width: auto; display: inline-block; padding: 11px 18px; }
.cycle-pdf iframe { width: 100%; height: 78vh; border: 1px solid var(--sage-fonce); border-radius: 10px; background: #fff; }
@media (max-width: 640px) { .cycle-pdf iframe { height: 60vh; } }

/* --- Stock (065, 14/10/2026) : code couleur sur le nombre seul ---------------- */
.table-admin th .stock-date { font-weight: normal; font-size: 11px; color: var(--texte-doux); white-space: nowrap; }
.stock-q { font-variant-numeric: tabular-nums; font-weight: 600; }
.stock-texte.stock-rouge { color: #c0271b; }
.stock-texte.stock-orange { color: #d9730d; }
.stock-texte.stock-ok { color: #2e7d3a; }
.stock-texte.stock-neutre { color: var(--texte); font-weight: normal; }
.stock-surligne { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 6px; text-align: center; }
.table-admin th.stock-col, .table-admin td.stock-col { text-align: center; }
.stock-surligne.stock-rouge { background: #f6d2cd; color: #9e1f14; }
.stock-surligne.stock-orange { background: #fbe0c2; color: #8a4600; }
.stock-surligne.stock-ok { background: #d6ecd9; color: #1f5c2a; }
.stock-surligne.stock-neutre { color: var(--texte); font-weight: normal; }
.stock-absent { color: #9a9a96; }
.stock-depot {
  border: 2px dashed var(--vert-clair); border-radius: 12px; background: var(--blanc);
  padding: 28px 16px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; color: var(--vert); margin-bottom: 12px;
}
.stock-depot span { font-size: 12.5px; color: var(--texte-doux); }
.stock-depot.survol, .stock-depot:hover, .stock-depot:focus { background: var(--ok-fond); outline: none; }
.stock-resume { background: var(--blanc); border: 1px solid var(--sage-fonce); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px; }
.stock-reglages { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 13px; margin: 6px 0 4px; }
/* Rubrique Stock : tableaux cales sur leur contenu, colonnes serrees (demande du 14/10/2026) */
.table-admin.table-stock { width: auto; max-width: 100%; }
.table-admin.table-stock th, .table-admin.table-stock td { padding-left: 10px; padding-right: 18px; }
/* Fiche client : coordonnees en tete (15/10/2026) */
.fiche-coordonnees { background: #f6f8f5; border: 1px solid var(--sage-fonce); border-radius: 10px; padding: 12px 14px; margin: 12px 0 6px; }
.fiche-adresse { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; }
.fiche-adresse a { text-decoration: none; white-space: nowrap; }
.fiche-infos { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; margin-top: 8px; }
.fiche-infos em { font-style: normal; color: var(--texte-doux); margin-right: 4px; }
.fiche-coordonnees .form-grille { margin-top: 10px; }

/* Offres du cycle (23/10/2026) : chaque offre dans un bloc pastel different,
   pour les distinguer d'un coup d'oeil ; texte explicatif en gras. */
.tuile.offre-pastel-0 { background: #eef4fb; border-color: #c9d9ec; }
.tuile.offre-pastel-1 { background: #fbf1ea; border-color: #ecd3c1; }
.tuile.offre-pastel-2 { background: #f3effa; border-color: #d8cdec; }
.tuile.offre-pastel-3 { background: #fbf7e6; border-color: #eadfae; }
.tuile.offre-pastel-4 { background: #faeef1; border-color: #ebc9d1; }
.tuile.offre-pastel-5 { background: #eaf6f7; border-color: #c2e0e3; }
.offre-validite { font-size: 12.5px; font-weight: 700; font-style: italic; color: var(--texte); margin: 6px 0 8px; }
.offre-explication { font-size: 14px; font-weight: 700; color: var(--texte); line-height: 1.5; margin: 8px 0 10px; white-space: pre-line; }
.offre-b2c { font-size: 12.5px; color: var(--texte-doux); margin-top: 10px; }
.offre-b2c strong { color: var(--texte); }
/* Pastille "Offre du cycle" a cote du nom d'un produit concerne (meme gabarit
   que les autres badges, couleur chaude qui attire l'oeil) */
.badge-offre-cycle { background: #c4572c; color: #fff; border: 0; font-family: inherit; cursor: pointer; line-height: normal; }
.badge-offre-cycle:hover { background: #a8461f; }