/* ============================================================
   style.css — Feuille de style du site
   Projet  : Émile 3D — site d'impression 3D (version serveur)
   Version : 2.40.0 — 2026-11-25 — « Bobines, matières et feuille de route »
   © 2026 Émile Snyers — Tous droits réservés. Reproduction, distribution
   ou modification interdites sans autorisation écrite de l'auteur.
   ------------------------------------------------------------
   ORGANISATION
   1. Jetons (variables) et thèmes  — couleurs, typo, espacements
   2. Base                          — réinitialisation, typographie
   3. Mise en page                  — en-tête, navigation, fenêtre Paramètres, panier latéral, pied
   4. Composants                    — boutons, champs, ticket, choix rapides, tuiles de filament…
   5. Vues                          — accueil, à propos, catégories, catalogue, fiche, merci…
   5b. Espace client et commandes   — cartes de commande, frise de statuts, journal
   5c. Administration               — onglets, tableaux, éditeur de produit
   6. Adaptation mobile             — points de rupture

   PARTI PRIS VISUEL
   - Motif unique : les « strates » (lignes de couches d'impression),
     utilisées en texture discrète sur les visuels et le héros.
   - Élément fort : le « ticket » jaune filament, où chaque prix
     se décompose ligne par ligne comme un ticket de caisse.
   - Angles peu arrondis (2 px), bordures nettes, pas d'ombres floues.
   ============================================================ */

/* ============================================================
   1. JETONS ET THÈMES
   app.js pose sur <html> : data-theme (clair | sombre | papier | marine |
   contraste), data-police (plex | lisible | systeme | serif),
   data-daltonien (oui | non), data-animations, et la variable
   --taille-base (taille du texte choisie au curseur).
   ============================================================ */
:root {
  --e3d-version: "2.40.0";   /* contrôle de version (administration) */
  /* Couleurs — thème clair (par défaut) */
  --fond: #F3F4F1;
  --surface: #FFFFFF;
  --surface-2: #E9EBE6;
  --encre: #161D26;
  --encre-2: #4A5561;
  --trait: #C9CEC8;
  --trait-fort: #161D26;
  --accent: #0F7B7A;
  --accent-texte: #FFFFFF;
  --accent-sombre: #0A5958;
  --ticket: #F6B233;
  --ticket-encre: #161D26;
  --alerte: #B23A2B;
  --alerte-fond: #FBE9E5;
  --ok: #2C7A3F;
  --ok-fond: #E4F1E7;
  --info-fond: #E4F0F0;
  --strate: rgba(22, 29, 38, 0.07);

  /* Typographie */
  --police: 'IBM Plex Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --taille-base: 16px;
  --interligne: 1.55;

  /* Formes et rythme */
  --rayon: 2px;
  --largeur: 1440px;
  --panier-largeur: 17rem;
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --duree: 160ms;
}

html[data-theme="sombre"] {
  --fond: #12171E;
  --surface: #1B222B;
  --surface-2: #232C37;
  --encre: #E8EBEE;
  --encre-2: #A6AFB9;
  --trait: #38424E;
  --trait-fort: #E8EBEE;
  --accent: #3DB8B5;
  --accent-texte: #0F1519;
  --accent-sombre: #6ED2CF;
  --ticket: #E5A322;
  --ticket-encre: #12171E;
  --alerte: #F08A7B;
  --alerte-fond: #3A2420;
  --ok: #7BCB8E;
  --ok-fond: #1F3326;
  --info-fond: #1E3233;
  --strate: rgba(232, 235, 238, 0.06);
}

html[data-theme="contraste"] {
  --fond: #000000;
  --surface: #000000;
  --surface-2: #101010;
  --encre: #FFFFFF;
  --encre-2: #FFFFFF;
  --trait: #FFFFFF;
  --trait-fort: #FFFFFF;
  --accent: #FFE14D;
  --accent-texte: #000000;
  --accent-sombre: #FFFFFF;
  --ticket: #FFE14D;
  --ticket-encre: #000000;
  --alerte: #FF8080;
  --alerte-fond: #000000;
  --ok: #80FF9E;
  --ok-fond: #000000;
  --info-fond: #000000;
  --strate: rgba(255, 255, 255, 0.12);
}

/* Thème « Papier » : fond crème, encre brune, accent terre cuite */
html[data-theme="papier"] {
  --fond: #F4EEDF;
  --surface: #FBF7EC;
  --surface-2: #EBE3D0;
  --encre: #2E241B;
  --encre-2: #6B5D4C;
  --trait: #D3C7B0;
  --trait-fort: #2E241B;
  --accent: #A8472B;
  --accent-texte: #FFFFFF;
  --accent-sombre: #7E3420;
  --ticket: #E9B64B;
  --ticket-encre: #2E241B;
  --alerte: #9F2F1F;
  --alerte-fond: #F5DED6;
  --ok: #4C6B2F;
  --ok-fond: #E4EBD6;
  --info-fond: #EEE6D2;
  --strate: rgba(46, 36, 27, 0.07);
}

/* Thème « Marine » : bleu profond, accent cuivré */
html[data-theme="marine"] {
  --fond: #0E1B2B;
  --surface: #162536;
  --surface-2: #1E3044;
  --encre: #E6ECF2;
  --encre-2: #A3B2C2;
  --trait: #2F455C;
  --trait-fort: #E6ECF2;
  --accent: #E0A458;
  --accent-texte: #0E1B2B;
  --accent-sombre: #F1C27E;
  --ticket: #E0A458;
  --ticket-encre: #0E1B2B;
  --alerte: #F19A8C;
  --alerte-fond: #3B2328;
  --ok: #8CD3A5;
  --ok-fond: #1E3A2E;
  --info-fond: #1B3345;
  --strate: rgba(230, 236, 242, 0.06);
}

/* Mode daltonien : palette bleu / orange (sûre pour les daltonismes rouge-vert) à la place du vert / rouge */
html[data-daltonien="oui"] {
  --accent: #0072B2;
  --accent-sombre: #005A8C;
  --accent-texte: #FFFFFF;
  --ok: #0072B2;
  --ok-fond: #DCEBF7;
  --alerte: #D55E00;
  --alerte-fond: #FBE6D6;
}
html[data-daltonien="oui"][data-theme="sombre"], html[data-daltonien="oui"][data-theme="marine"] {
  --accent: #56B4E9; --accent-sombre: #8FD0F5; --accent-texte: #0F1519;
  --ok: #56B4E9; --ok-fond: #1B3345; --alerte: #F0A05A; --alerte-fond: #3B2A1A;
}
html[data-daltonien="oui"][data-theme="contraste"] { --accent: #FFE14D; --accent-sombre: #FFFFFF; --accent-texte: #000000; --ok: #7FD3FF; --alerte: #FFB070; }

/* Polices : la valeur par défaut est IBM Plex Sans (voir --police dans :root) */
html[data-police="lisible"] { --police: 'Atkinson Hyperlegible', 'IBM Plex Sans', Arial, sans-serif; }
html[data-police="systeme"] { --police: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
html[data-police="serif"]   { --police: Georgia, 'Times New Roman', serif; }

/* Réduction des animations : préférence système OU réglage du site */
@media (prefers-reduced-motion: reduce) { :root { --duree: 0ms; } }
html[data-animations="reduites"] { --duree: 0ms; }

/* ============================================================
   2. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--taille-base); scroll-behavior: smooth; }
html[data-animations="reduites"] { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1rem;
  line-height: var(--interligne);
  color: var(--encre);
  background: var(--fond);
  font-variant-numeric: tabular-nums; /* chiffres alignés dans les tickets */
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--esp-2); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 2rem; max-width: 26ch; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; margin-top: var(--esp-3); }
h4 { font-size: 0.95rem; margin-top: var(--esp-2); }
p, ul, ol, dl { margin: 0 0 var(--esp-2); }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: 0.25em; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-sombre); }
strong { font-weight: 600; }
small { font-size: 0.875em; }
img, svg { max-width: 100%; display: block; }
[hidden] { display: none !important; } /* l'attribut hidden gagne toujours sur les display des classes */
table { border-collapse: collapse; width: 100%; }
details summary { cursor: pointer; font-weight: 500; }

/* Focus clavier toujours visible, même en thème contraste */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.intro { font-size: 1.125rem; color: var(--encre-2); max-width: 62ch; }
.aide  { font-size: 0.875rem; color: var(--encre-2); margin: var(--esp-1) 0 0; }
.note  { font-size: 0.9rem; color: var(--encre-2); border-left: 3px solid var(--trait); padding-left: var(--esp-2); }
.obligatoire { color: var(--encre-2); font-weight: 400; font-size: 0.85em; }
.titre-section { margin-top: var(--esp-5); }

/* Lien d'évitement : invisible sauf au focus clavier */
.lien-evitement {
  position: absolute; left: var(--esp-2); top: -4rem;
  background: var(--encre); color: var(--fond); padding: var(--esp-1) var(--esp-2);
  border-radius: var(--rayon); z-index: 100;
}
.lien-evitement:focus { top: var(--esp-2); }

/* ============================================================
   3. MISE EN PAGE
   ============================================================ */

/* En-tête sur deux rangées : marque et outils en haut, navigation en dessous. */
.entete {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--esp-1) var(--esp-2);
  max-width: var(--largeur); margin: 0 auto; padding: var(--esp-2) var(--esp-3) 0;
  border-bottom: 1px solid var(--trait);
}
.marque { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; gap: var(--esp-1); color: var(--encre); text-decoration: none; font-weight: 600; font-size: 1.1rem; }
/* Le logo : un carré de strates, rappel des couches d'impression */
.marque-logo {
  width: 1.6rem; height: 1.6rem; border-radius: var(--rayon);
  background: repeating-linear-gradient(0deg, var(--encre) 0 2px, var(--ticket) 2px 5px);
  border: 1px solid var(--encre);
}
.entete-outils { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--esp-1); }
.bouton.bouton-icone { display: inline-flex; align-items: center; white-space: nowrap; gap: 0.35em; }
.bouton.bouton-icone svg { width: 1.15em; height: 1.15em; flex: none; }
.bouton.bouton-icone .compteur { margin-left: 0; }
.navigation { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--trait); padding: var(--esp-1) 0 0; }
.navigation .nav-bascule { display: none; margin-bottom: var(--esp-1); } /* bouton Menu : mobile seulement */
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--esp-3); }
.menu a { display: inline-block; color: var(--encre); text-decoration: none; padding: 0.45rem 0 0.55rem; border-bottom: 3px solid transparent; }
.menu a:hover { border-color: var(--trait); }
.menu a[aria-current="page"] { border-color: var(--accent); font-weight: 500; }

.lien-panier { text-decoration: none; }
.compteur {
  display: inline-block; min-width: 1.5em; padding: 0 0.4em; margin-left: 0.3em;
  background: var(--ticket); color: var(--ticket-encre); border-radius: var(--rayon);
  font-weight: 600; text-align: center;
}

/* Fenêtre « Paramètres » (élément <dialog>) */
.parametres {
  width: min(92vw, 40rem); max-height: 90vh; padding: 0; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: var(--surface); color: var(--encre); font: inherit;
}
.parametres::backdrop { background: rgba(10, 14, 20, 0.55); }
.parametres-entete { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--trait); }
.parametres-entete h2 { margin: 0; }
.parametres-corps { padding: var(--esp-3); overflow-y: auto; max-height: calc(90vh - 4.5rem); }
.parametres fieldset { margin-bottom: var(--esp-2); }
.themes { display: flex; flex-wrap: wrap; gap: var(--esp-1); }
.theme-choix { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35rem 0.7rem 0.35rem 0.4rem; border: 1px solid var(--trait); border-radius: var(--rayon); cursor: pointer; }
.theme-choix input { accent-color: var(--accent); }
.theme-choix:has(input:checked) { border-color: var(--accent); background: var(--info-fond); font-weight: 500; }
.theme-apercu { width: 1.6rem; height: 1.1rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); display: inline-block; }
.theme-apercu-clair     { background: linear-gradient(90deg, #F3F4F1 50%, #0F7B7A 50%); }
.theme-apercu-sombre    { background: linear-gradient(90deg, #12171E 50%, #3DB8B5 50%); }
.theme-apercu-papier    { background: linear-gradient(90deg, #F4EEDF 50%, #A8472B 50%); }
.theme-apercu-marine    { background: linear-gradient(90deg, #0E1B2B 50%, #E0A458 50%); }
.theme-apercu-contraste { background: linear-gradient(90deg, #000000 50%, #FFE14D 50%); }

main { max-width: var(--largeur); margin: 0 auto; padding: var(--esp-4) var(--esp-3) var(--esp-5); }
.vue > h1 { margin-bottom: var(--esp-2); }

/* Panier latéral : main devient une grille « contenu + panier » sur les vues concernées */
main.avec-panier { display: grid; grid-template-columns: minmax(0, 1fr) var(--panier-largeur); gap: var(--esp-4); align-items: start; }
.panier-lateral {
  position: sticky; top: var(--esp-2);
  background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: var(--esp-2) var(--esp-3);
}
.pl-entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-1); border-bottom: 1px solid var(--trait); padding-bottom: var(--esp-1); margin-bottom: var(--esp-1); }
.pl-entete h2 { margin: 0; font-size: 1.05rem; }
.pl-entete span { font-size: 0.85rem; color: var(--encre-2); }
.pl-articles { list-style: none; margin: 0 0 var(--esp-1); padding: 0; max-height: 40vh; overflow-y: auto; font-size: 0.9rem; }
.pl-articles li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.4rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px dotted var(--trait); margin: 0; }
.pl-titre { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-retirer { grid-column: 2; }
.pl-quantite { grid-column: 1; display: inline-flex; align-items: center; gap: 0.2rem; }
.pl-prix { grid-column: 2; font-weight: 500; text-align: right; }
.pl-nombre { min-width: 1.6em; text-align: center; font-weight: 600; }
.pl-bouton { width: 1.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); color: var(--encre); font: inherit; font-weight: 600; line-height: 1; cursor: pointer; }
.pl-bouton:hover { background: var(--surface-2); }
.pl-bouton[disabled] { opacity: 0.4; cursor: not-allowed; }
.pl-retirer { border-color: var(--trait); color: var(--encre-2); }
.pl-retirer:hover { color: var(--alerte); border-color: var(--alerte); }
.pl-vide { color: var(--encre-2); border: 0 !important; }
.pl-total { display: flex; justify-content: space-between; gap: var(--esp-1); font-size: 0.95rem; margin: 0 0 var(--esp-2); }
.panier-lateral .bouton { display: block; text-align: center; }

.pied { border-top: 1px solid var(--trait); background: var(--surface-2); }
.pied-colonnes {
  max-width: var(--largeur); margin: 0 auto; padding: var(--esp-4) var(--esp-3) var(--esp-2);
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--esp-3);
  font-size: 0.95rem; color: var(--encre-2);
}
.pied-marque { font-weight: 600; color: var(--encre); font-size: 1.1rem; margin-bottom: 0.25rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied-credit { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--esp-3) var(--esp-3); font-size: 0.875rem; color: var(--encre-2); }

/* ============================================================
   4. COMPOSANTS
   ============================================================ */

/* --- Boutons --- */
.bouton {
  display: inline-block; padding: 0.6rem 1.1rem; border-radius: var(--rayon);
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background var(--duree), color var(--duree);
}
.bouton:hover { background: var(--surface-2); color: var(--encre); }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.bouton-principal:hover { background: var(--accent-sombre); border-color: var(--accent-sombre); color: var(--accent-texte); }
.bouton-discret { border-color: var(--trait); background: transparent; }
.bouton-danger { color: var(--alerte); border-color: var(--alerte); background: transparent; }
.bouton-danger:hover { background: var(--alerte-fond); color: var(--alerte); }
.bouton-petit { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-3); align-items: center; }

/* --- Boutons de choix rapide (quantités ×1 ×2 ×3, échelles conseillées) --- */
.choix-groupe { display: flex; flex-wrap: wrap; gap: var(--esp-1); margin-bottom: var(--esp-2); }
.choix {
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem;
  min-width: 3.4rem; padding: 0.45rem 0.7rem; border-radius: var(--rayon);
  border: 1px solid var(--trait-fort); background: var(--surface); color: var(--encre);
  font: inherit; font-weight: 600; line-height: 1.1; cursor: pointer;
}
.choix small { font-weight: 400; color: var(--encre-2); font-size: 0.75rem; }
.choix:hover { background: var(--surface-2); }
.choix[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.choix[aria-pressed="true"] small { color: var(--fond); opacity: 0.8; }
html[data-theme="contraste"] .choix[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); }
html[data-theme="contraste"] .choix[aria-pressed="true"] small { color: var(--accent-texte); }

/* --- Champs de formulaire --- */
.champ { margin-bottom: var(--esp-2); }
.champ label { display: block; font-weight: 500; margin-bottom: 0.3rem; }
.champ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.champ select, .champ textarea {
  width: 100%; padding: 0.55rem 0.7rem; font: inherit; color: var(--encre);
  background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon);
}
.champ-court input { max-width: 8rem; }
.champ textarea { resize: vertical; }
.champ select { cursor: pointer; }
.champ-curseur input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0.3rem 0; }
.champ-curseur output { font-weight: 600; }
.champ-case label, .case { display: flex; align-items: flex-start; gap: 0.5em; font-weight: 400; margin-bottom: var(--esp-1); }
.case input, .champ-case input { margin-top: 0.3em; flex: none; accent-color: var(--accent); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); }
fieldset { border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-2) var(--esp-2) var(--esp-1); margin: 0 0 var(--esp-3); }
legend { font-weight: 600; padding: 0 0.4em; }
.formulaire { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-3); }
.erreur { color: var(--alerte); background: var(--alerte-fond); border-left: 3px solid var(--alerte); padding: var(--esp-1) var(--esp-2); font-weight: 500; }

/* --- Le ticket : décomposition d'un prix, ligne par ligne --- */
.ticket {
  background: var(--ticket); color: var(--ticket-encre);
  padding: var(--esp-2) var(--esp-3); border-radius: var(--rayon);
  border: 1px solid var(--ticket-encre);
}
html[data-theme="contraste"] .ticket { border-width: 2px; }
.ticket h3, .ticket-titre { margin: 0 0 var(--esp-1); font-size: 1rem; font-weight: 600; }
.ticket-ligne { display: flex; align-items: baseline; gap: 0.5em; padding: 0.2rem 0; font-size: 0.95rem; }
.ticket-ligne .libelle { flex: none; max-width: 70%; }
.ticket-ligne .conducteur { flex: 1; border-bottom: 1px dotted var(--ticket-encre); transform: translateY(-0.35em); min-width: 1em; }
.ticket-ligne .montant { flex: none; font-weight: 500; }
.ticket-ligne.secondaire { font-size: 0.85rem; opacity: 0.85; padding-left: var(--esp-2); }
.ticket-ligne.total { border-top: 2px solid var(--ticket-encre); margin-top: var(--esp-1); padding-top: var(--esp-1); font-size: 1.15rem; font-weight: 600; }
.ticket-ligne.total .montant { font-size: 1.35rem; }
.ticket-remarque { font-size: 0.85rem; margin: var(--esp-1) 0 0; }
.ticket .statut { margin-top: var(--esp-2); }

/* --- Statut du prix : définitif / estimation / validation --- */
.statut {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: var(--rayon);
  font-size: 0.85rem; font-weight: 600; border: 1px solid currentColor;
}
.statut-picto { display: inline-block; width: 1.2em; text-align: center; margin-right: 0.2em; }
.statut-definitif { color: var(--ok); background: var(--ok-fond); }
.statut-estimation { color: var(--encre); background: var(--surface); }
.statut-validation { color: var(--alerte); background: var(--alerte-fond); }
.ticket .statut-definitif, .ticket .statut-estimation, .ticket .statut-validation { background: rgba(255,255,255,0.5); color: var(--ticket-encre); }
html[data-theme="contraste"] .ticket .statut { background: var(--ticket-encre); color: var(--ticket); }

/* --- Étiquettes (badges) --- */
.etiquettes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: var(--esp-1); }
.etiquette { display: inline-block; font-size: 0.8rem; padding: 0.1rem 0.5rem; border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre-2); text-decoration: none; }
a.etiquette:hover { border-color: var(--accent); color: var(--accent); }

/* --- Pastilles de couleur --- */
.pastilles { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pastille { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.9rem; }
.pastille::before { content: ''; width: 1em; height: 1em; border-radius: 50%; background: var(--pastille-couleur, #999); border: 1px solid var(--trait-fort); flex: none; }
.pastille-choix { cursor: pointer; padding: 0.3rem 0.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); position: relative; }
.pastille-choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille-choix:has(input:checked) { border-color: var(--accent); background: var(--info-fond); font-weight: 500; }
.pastille-choix:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- Visuels générés (silhouettes striées) et photos --- */
.visuel { aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--trait); }
.visuel svg { width: 100%; height: 100%; }
.visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel-large { margin-bottom: var(--esp-2); }

/* --- Ticket : menu dépliant des frais d'atelier --- */
.ticket-mention { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--ticket-encre); opacity: 0.8; }
.ticket-details { margin: 0; }
.ticket-details summary { list-style: none; cursor: pointer; }
.ticket-details summary::-webkit-details-marker { display: none; }
.ticket-depliant { font-size: 0.8em; color: var(--ticket-encre); opacity: 0.75; margin-left: 0.3em; }
.ticket-details[open] .ticket-depliant { opacity: 1; }
.ticket-details-corps { padding-left: 0.9rem; border-left: 2px dotted rgba(0, 0, 0, 0.25); margin: 0.1rem 0 0.3rem; }
.ticket-details-corps .ticket-ligne { font-size: 0.88em; }

/* --- Bibliothèque des filaments : tuiles « bobine » par couleur --- */
.biblio-materiau { margin-bottom: var(--esp-3); }
.biblio-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--esp-1) var(--esp-2); margin-bottom: var(--esp-1); }
.biblio-entete h3 { margin: 0; }
.biblio-stock { font-size: 0.9rem; color: var(--encre-2); }
.biblio-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--esp-1); }
.filament-tuile { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: var(--esp-1); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); text-align: center; font-size: 0.85rem; }
.filament-tuile.epuise { opacity: 0.5; }
.filament-nom { font-weight: 500; text-transform: capitalize; }
.filament-quantite { color: var(--encre-2); font-size: 0.8rem; }
/* La bobine : un disque strié avec un trou central, en CSS pur */
.bobine-icone { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 2px solid var(--trait-fort); position: relative;
  background: repeating-radial-gradient(circle at center, var(--pastille-couleur) 0 3px, rgba(0,0,0,0.18) 3px 4px); }
.bobine-icone::after { content: ''; position: absolute; inset: 35%; border-radius: 50%; background: var(--surface); border: 2px solid var(--trait-fort); }

.rupture { color: var(--alerte); font-weight: 500; font-size: 0.9rem; }
.etiquette-rupture { color: var(--alerte); border-color: var(--alerte); background: var(--alerte-fond); }

/* --- Encadrés et tableaux --- */
.encadre { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-3); }
.avertissement { background: var(--info-fond); border-left: 3px solid var(--accent); padding: var(--esp-2) var(--esp-3); margin: var(--esp-3) 0; }
.avertissement h3 { font-size: 1.05rem; margin-top: 0; }
.tableau th, .tableau td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: top; font-size: 0.95rem; }
.tableau th { font-weight: 600; }
.colonnes { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-4); align-items: start; }
.liste-materiel { list-style: none; padding: 0; margin: 0; }
.liste-materiel li { padding: var(--esp-1) 0; border-top: 1px solid var(--trait); }
.liste-materiel span { color: var(--encre-2); font-size: 0.95rem; }

/* --- Notification --- */
.notification {
  position: fixed; left: 50%; bottom: var(--esp-3); transform: translateX(-50%);
  background: var(--encre); color: var(--fond); padding: var(--esp-2) var(--esp-3);
  border-radius: var(--rayon); max-width: min(90vw, 40rem); z-index: 200; font-weight: 500;
}
html[data-theme="contraste"] .notification { border: 2px solid var(--fond); }

/* ============================================================
   5. VUES
   ============================================================ */

/* --- Accueil --- */
.heros {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--esp-4); align-items: center;
  padding: var(--esp-4) var(--esp-3); margin: 0 calc(-1 * var(--esp-3)) var(--esp-5);
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, var(--strate) 5px 6px);
  border-bottom: 1px solid var(--trait);
}
.heros h1 { font-size: 2.4rem; max-width: 20ch; }
.heros-visuel { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); overflow: hidden; display: grid; gap: 2px; }
.heros-visuel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.heros-visuel svg { width: 100%; }

.accueil-bloc { margin-bottom: var(--esp-5); }
.essai { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--esp-4); align-items: start; }
.heros-calcul { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: var(--esp-3); }
.heros-calcul h2 { font-size: 1.1rem; }

/* Aperçu des catégories (accueil) */
.categories-apercu { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--esp-2); }
.categorie-carte {
  display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--encre);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-2);
  transition: border-color var(--duree);
}
.categorie-carte:hover { border-color: var(--accent); color: var(--encre); }
.categorie-carte .visuel { aspect-ratio: 16 / 9; margin-bottom: var(--esp-1); }
.categorie-carte strong { font-size: 1rem; }
.categorie-carte span:last-child { font-size: 0.9rem; color: var(--encre-2); }

.bloc-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); margin-bottom: var(--esp-5); }
.service { border-top: 3px solid var(--encre); padding-top: var(--esp-2); }
.service h2 { font-size: 1.15rem; }
.service p { color: var(--encre-2); }

.regles-liste { display: grid; grid-template-columns: 1fr; gap: var(--esp-2); margin: 0; }
.regles-liste dt { font-weight: 600; margin-bottom: 0.2rem; }
.regles-liste dd { margin: 0; color: var(--encre-2); }

.honnete { border: 1px dashed var(--trait-fort); padding: var(--esp-3); border-radius: var(--rayon); max-width: 70ch; }
.honnete h2 { font-size: 1.15rem; }
.honnete p { margin: 0; }

/* --- À propos : photos de l'atelier --- */
.apropos-photos { display: grid; grid-template-columns: 2fr 1fr; gap: var(--esp-2); margin-bottom: var(--esp-4); }
.apropos-photo { margin: 0; }
.apropos-photo img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--trait-fort); border-radius: var(--rayon); aspect-ratio: 16 / 10; }
.apropos-photo:not(.principale) img { aspect-ratio: 4 / 5; }
.apropos-photo figcaption { font-size: 0.85rem; color: var(--encre-2); margin-top: 0.3rem; }
/* Mosaïque à 3 photos ou plus : la première occupe deux rangées à gauche */
.apropos-photos.mosaique { grid-template-columns: 3fr 2fr; grid-auto-rows: minmax(9rem, auto); }
.apropos-photos.mosaique .principale { grid-row: span 2; }
.apropos-photos.mosaique .principale img { aspect-ratio: auto; height: 100%; }
.apropos-photos.mosaique .apropos-photo:not(.principale) img { aspect-ratio: 16 / 9; }

/* Frise « De l'idée à l'objet » */
.processus { margin-bottom: var(--esp-4); }
.processus-frise ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--esp-2); counter-reset: none; }
.processus-frise li { position: relative; display: flex; flex-direction: column; gap: 0.3rem; padding: var(--esp-2); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); font-size: 0.9rem; color: var(--encre-2); }
.processus-frise li strong { color: var(--encre); }
.processus-frise li:not(:last-child)::after { content: '→'; position: absolute; right: -1.1rem; top: 2.2rem; color: var(--encre-2); font-size: 1.2rem; }
.processus-picto { width: 3.2rem; height: 3.2rem; display: block; }
.processus-picto svg { width: 100%; height: 100%; }

/* Bandeau « prototype » (espace client, administration) */
.prototype { padding: var(--esp-1) var(--esp-2); border-left: 4px solid var(--ticket); background: var(--info-fond); font-size: 0.9rem; color: var(--encre-2); margin-bottom: var(--esp-3); }

/* --- Catégories : modes d'affichage --- */
.mode-categories { margin-bottom: var(--esp-3); }
.mode-categories .choix { flex-direction: row; min-width: 0; padding: 0.35rem 0.9rem; font-weight: 500; }
.categories-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--esp-1); }
.categories-compact .categorie-carte { padding: var(--esp-1); gap: 0.3rem; }
.categories-compact .categorie-carte .visuel { aspect-ratio: 2 / 1; }
.categories-compact .categorie-carte strong { font-size: 0.95rem; }
.categories-compact .categorie-carte span:last-child { font-size: 0.8rem; }
.categories-liste-ul { list-style: none; margin: 0; padding: 0; }
.categories-liste-ul > li { padding: var(--esp-2) 0; border-bottom: 1px solid var(--trait); }
.categories-liste-ul h2 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.categories-liste-ul h2 small { font-weight: 400; color: var(--encre-2); font-size: 0.85rem; }
.categories-liste-ul .accroche { margin: 0 0 0.4rem; color: var(--encre-2); }
.categories-liste-produits { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem var(--esp-2); }
.categories-liste-produits li { padding: 0.2rem 0.6rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.categories-liste-produits .prix { color: var(--encre-2); font-size: 0.85rem; }

/* --- Catégories --- */
.categorie {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--esp-3); align-items: start;
  padding: var(--esp-3) 0; border-top: 1px solid var(--trait);
}
.categorie:last-child { border-bottom: 1px solid var(--trait); }
.categorie .visuel { aspect-ratio: 4 / 3; }
.categorie h2 { margin-bottom: 0.25rem; }
.categorie .accroche { font-weight: 500; margin-bottom: var(--esp-1); }
.categorie .actions { margin-top: var(--esp-2); }

/* --- Catalogue --- */
.filtres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-2) var(--esp-3); align-items: end;
  background: var(--surface-2); padding: var(--esp-3); border-radius: var(--rayon); margin: var(--esp-3) 0 var(--esp-2);
}
.filtres .champ { margin: 0; }
.filtres .champ-large { grid-column: span 2; }
.filtres .champ-case label { margin: 0; align-items: center; padding-bottom: 0.5rem; }
.catalogue-barre { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-2); }
.resultat-compte { color: var(--encre-2); margin: 0; }
.mode-affichage { margin: 0; }
.mode-affichage .choix { flex-direction: row; min-width: 0; padding: 0.35rem 0.8rem; font-weight: 500; }
.grille-produits.compact { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: var(--esp-2); }
.produit-carte.compacte .produit-corps { padding: var(--esp-1) var(--esp-1) var(--esp-2); gap: 0.3rem; }
.produit-carte.compacte h2 { font-size: 0.95rem; line-height: 1.25; }
.produit-carte.compacte .produit-prix { margin-top: 0; }
.produit-carte.compacte .produit-prix .prix { font-size: 1.05rem; }
.produit-carte.compacte .produit-ajout { flex-direction: column; align-items: stretch; }
.produit-carte.compacte .produit-ajout select { width: 100%; }
.produit-carte.compacte .produit-prix { flex-direction: column; align-items: flex-start; gap: 0; }
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.grille-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--esp-3); }
.produit-carte { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.produit-carte .visuel { border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; }
.produit-corps { padding: var(--esp-2) var(--esp-2) var(--esp-3); display: flex; flex-direction: column; flex: 1; gap: 0.4rem; }
.produit-corps h2, .produit-corps h3 { font-size: 1.05rem; margin: 0; }
.produit-corps h2 a { color: var(--encre); text-decoration: none; }
.produit-corps h2 a:hover { text-decoration: underline; }
.produit-corps .resume { color: var(--encre-2); font-size: 0.95rem; margin: 0; flex: 1; }
.produit-prix { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-1); margin-top: var(--esp-1); }
.produit-prix .prix { font-weight: 600; font-size: 1.15rem; }
.produit-prix .min { font-size: 0.8rem; color: var(--encre-2); text-align: right; }
/* Ajout rapide : couleur + bouton, sur les cartes produits et bobines */
.produit-ajout { display: flex; gap: var(--esp-1); align-items: stretch; margin-top: var(--esp-1); }
.produit-ajout select, .produit-ajout input { flex: 1; min-width: 0; padding: 0.4rem 0.5rem; font: inherit; font-size: 0.9rem; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); }
.produit-ajout input { flex: 0 0 3.6rem; }
.produit-ajout .bouton { flex: none; white-space: nowrap; }
.lien-fiche { font-size: 0.9rem; }
.vide { padding: var(--esp-4); text-align: center; color: var(--encre-2); border: 1px dashed var(--trait); border-radius: var(--rayon); grid-column: 1 / -1; }

/* --- Fiche produit : présentation en haut, composition en dessous --- */
.fil { font-size: 0.9rem; color: var(--encre-2); margin-bottom: var(--esp-2); }
.fiche-haut { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.15fr); gap: var(--esp-4); align-items: start; margin-bottom: var(--esp-4); }
@media (min-width: 1400px) { .fiche-haut { grid-template-columns: minmax(380px, 1fr) 1fr; } }
.fiche-haut .visuel { aspect-ratio: 1; }
.fiche-galerie .visuel img { object-fit: cover; }
.vignettes { display: flex; gap: var(--esp-1); margin-top: var(--esp-1); }
.vignette { width: 4.5rem; height: 4.5rem; padding: 0; border: 2px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface-2); cursor: pointer; }
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette[aria-pressed="true"] { border-color: var(--accent); }
.fiche-infos h1 { font-size: 1.75rem; }
.fiche-specs { margin: var(--esp-3) 0 0; }
.fiche-specs th { font-weight: 500; color: var(--encre-2); width: 38%; }
.fiche-precautions { background: var(--alerte-fond); border-left: 3px solid var(--alerte); padding: var(--esp-2) var(--esp-3); margin: var(--esp-3) 0 0; }
.fiche-precautions h2 { font-size: 1rem; margin-bottom: 0.3rem; }
.fiche-precautions ul { margin: 0; }
.fiche-configuration { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: var(--esp-3); }
.fiche-configuration h2 { font-size: 1.2rem; }
.fiche-config-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--esp-4); align-items: start; }
.fiche-ticket-colonne { position: sticky; top: var(--esp-2); }
.fiche-taille-libre { margin: var(--esp-1) 0; padding: var(--esp-1) 0; }
.fiche-taille-libre[open] { border-top: 1px dotted var(--trait); }
.fiche-taille-libre summary { color: var(--accent); }
.echelle-info { font-size: 0.9rem; color: var(--encre-2); margin: 0; }

/* --- Services --- */
.services-apercu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-2); margin: var(--esp-3) 0 var(--esp-5); }
.services-apercu a { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--esp-2) var(--esp-3); background: var(--surface); border: 1px solid var(--trait); border-left: 3px solid var(--encre); border-radius: var(--rayon); text-decoration: none; color: var(--encre); }
.services-apercu a:hover { border-color: var(--accent); }
.services-apercu span { font-size: 0.9rem; color: var(--encre-2); }
.service-bloc { padding-top: var(--esp-4); margin-top: var(--esp-4); border-top: 1px solid var(--trait); }
.service-bloc > h2 { font-size: 1.6rem; }
.comparatif { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); margin: var(--esp-3) 0 var(--esp-4); }
.methode { background: var(--surface); border: 1px solid var(--trait); border-top: 3px solid var(--encre); border-radius: var(--rayon); padding: var(--esp-3); }
.methode h3 { font-size: 1.25rem; margin-top: 0; }
.prix-cle { font-weight: 600; font-size: 1.1rem; }
.estimateur { background: var(--surface-2); padding: var(--esp-3); border-radius: var(--rayon); }
.estimateur h3 { margin-top: 0; font-size: 1.2rem; }
.ligne-filament { display: grid; grid-template-columns: 1fr 8rem auto; gap: var(--esp-1); align-items: end; margin-bottom: var(--esp-1); }
.ligne-filament .champ { margin: 0; }
.ligne-filament .bouton { margin-bottom: 1px; }

/* --- Filaments : bobines à la vente --- */
.grille-bobines { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--esp-3); }
.bobine-carte { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.bobine-carte .visuel { border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; aspect-ratio: 16 / 10; }
.bobine-carte .produit-ajout { flex-wrap: wrap; }
.bobine-carte .produit-ajout select { flex: 1 1 100%; }
.bobine-carte .produit-ajout input { flex: 0 0 4rem; }
.bobine-carte .produit-ajout .bouton { flex: 1; }
/* --- Réalisations (À propos, bloc évolutif) --- */
.grille-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-3); }
.galerie-item figcaption { padding: var(--esp-1) 0 0; font-size: 0.95rem; }
.galerie-item figcaption strong { display: block; }
.galerie-item .meta { color: var(--encre-2); font-size: 0.85rem; }
figure { margin: 0; }

/* --- Panier (page complète) --- */
.panier { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--esp-4); align-items: start; }
.article { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--esp-2); padding: var(--esp-2) 0; border-bottom: 1px solid var(--trait); }
.article .visuel { aspect-ratio: 1; }
.article h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.article dl { margin: 0; font-size: 0.9rem; color: var(--encre-2); display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.6rem; }
.article dt::after { content: ' :'; }
.article dd { margin: 0; }
.article-prix { text-align: right; font-weight: 600; white-space: nowrap; }
.article-prix .statut { margin-top: 0.3rem; font-weight: 600; }
.article > div { min-width: 0; }
.article-controles { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); margin-top: var(--esp-1); }
.panier-actions { margin-top: var(--esp-3); display: flex; gap: var(--esp-2); flex-wrap: wrap; }

/* --- Merci --- */
.merci { max-width: 62ch; border: 1px solid var(--trait-fort); border-top: 6px solid var(--ticket); border-radius: var(--rayon); padding: var(--esp-4); background: var(--surface); animation: apparaitre 0.45s ease-out both; }
.merci h1 { font-size: 1.5rem; }
.merci-statut { display: flex; gap: var(--esp-2); align-items: flex-start; padding: var(--esp-2); border-radius: var(--rayon); margin: 0 0 var(--esp-2); }
.merci-statut-brouillon { background: var(--alerte-fond); border-left: 4px solid var(--alerte); }
.merci-statut-ok { background: var(--ok-fond); border-left: 4px solid var(--ok); }
.coche { width: 2.6rem; height: 2.6rem; flex: none; stroke: var(--ok); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.coche circle { stroke-dasharray: 160; }
.coche path { stroke-dasharray: 40; }
.coche-animee circle { stroke-dashoffset: 160; animation: tracer 0.6s ease-out forwards; }
.coche-animee path { stroke-dashoffset: 40; animation: tracer 0.4s ease-out 0.5s forwards; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }

/* --- Animations : compteur, vol vers le panier --- */
.compteur.rebond { animation: rebond 0.5s ease-out; }
@keyframes rebond { 0% { transform: scale(1); } 35% { transform: scale(1.45); background: var(--accent); color: var(--accent-texte); } 100% { transform: scale(1); } }
.vol-panier { position: fixed; z-index: 400; pointer-events: none; border-radius: var(--rayon); object-fit: cover; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); will-change: transform, opacity; }
html[data-animations="reduites"] .merci, html[data-animations="reduites"] .compteur.rebond { animation: none; }
@media (prefers-reduced-motion: reduce) { .merci, .compteur.rebond, .coche-animee circle, .coche-animee path { animation: none; stroke-dashoffset: 0; } }
.merci h2 { font-size: 1.15rem; margin-top: var(--esp-3); }
.merci-secours { margin: var(--esp-3) 0; }
.merci-secours .recap-texte { margin-bottom: var(--esp-2); }
.panier-recap .ticket { margin-bottom: var(--esp-3); }
.panier-avertissement { font-size: 0.9rem; color: var(--encre-2); }
.recap-texte { width: 100%; min-height: 12rem; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.8rem; margin-top: var(--esp-2); }

/* --- Contact, légal, versions --- */
.contact-ligne { font-size: 1.05rem; }
.etapes li { margin-bottom: var(--esp-1); }
.texte-legal { max-width: 75ch; }
.texte-legal h2 { margin-top: var(--esp-4); }
.version { border-left: 3px solid var(--ticket); padding-left: var(--esp-3); margin-bottom: var(--esp-4); }
.version h2 { font-size: 1.2rem; margin-bottom: 0.2rem; }
.version .date { color: var(--encre-2); font-size: 0.9rem; margin-bottom: var(--esp-1); }

/* ============================================================
   5a. PROMOTIONS, AVIS, MISE EN AVANT
   ============================================================ */
.produit-carte .visuel { position: relative; }
.badges { position: absolute; top: 0.5rem; left: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; }
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--rayon); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; border: 1px solid var(--encre); }
.badge-une { background: var(--encre); color: var(--fond); }
.badge-promo { background: var(--ticket); color: var(--ticket-encre); }
.badge.grand { font-size: 1.4rem; padding: 0.4rem 0.9rem; align-self: flex-start; }
.prix-avant { color: var(--encre-2); font-weight: 400; font-size: 0.85em; margin-right: 0.2em; }
.etiquette-promo { background: var(--ticket); color: var(--ticket-encre); border-color: var(--ticket-encre); }
.ticket-ligne.promotion .montant { color: var(--ok); font-weight: 600; }
.etoiles { color: var(--ticket-encre); font-size: 0.9rem; white-space: nowrap; }
.etoiles small { color: var(--encre-2); }
[data-theme="sombre"] .etoiles, [data-theme="marine"] .etoiles { color: var(--ticket); }
.fiche-note { margin: 0 0 var(--esp-1); }
.fiche-avis { margin-top: var(--esp-4); border-top: 1px solid var(--trait); padding-top: var(--esp-3); }
.avis-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.avis { border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-2); background: var(--surface); }
.avis p { margin: 0.4rem 0 0; }
.avis time { color: var(--encre-2); font-size: 0.85rem; }
.avis-verifie { font-size: 0.75rem; color: var(--ok); border: 1px solid var(--ok); border-radius: var(--rayon); padding: 0 0.4rem; }
.avis-reponse { padding-left: var(--esp-2); border-left: 3px solid var(--ticket); color: var(--encre-2); }
.promotion { border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); padding: var(--esp-3); margin-bottom: var(--esp-3); }
.promotion-entete { display: flex; gap: var(--esp-3); align-items: flex-start; margin-bottom: var(--esp-2); }
.promotion-entete h2 { margin: 0 0 0.3rem; }
.promotion-entete p { margin: 0; }
.avis-formulaire { margin-top: var(--esp-2); }
.avis-note { display: flex; gap: 0.3rem; }
.avis-note label { cursor: pointer; padding: 0.3rem 0.5rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.avis-note label:has(input:checked) { background: var(--ticket); border-color: var(--encre); }
.avis-note input { position: absolute; opacity: 0; width: 0; height: 0; }
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================
   5b. ESPACE CLIENT ET COMMANDES
   ============================================================ */
.compte-entete { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.compte-entete .intro { margin: 0; }
.compte h2 { margin-top: var(--esp-4); }
.compte-acces { max-width: 36rem; }
.compte-acces .formulaire { margin-top: var(--esp-2); }
.compte-securite { margin-top: var(--esp-2); }
.compte-securite .formulaire { margin-top: var(--esp-2); }

.commande { border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); padding: var(--esp-3); margin-bottom: var(--esp-3); }
.commande-entete { display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap; margin-bottom: var(--esp-2); }
.commande-entete h3 { margin: 0; }
.commande-date { color: var(--encre-2); font-size: 0.9rem; }
.statut-commande { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: var(--rayon); font-size: 0.85rem; font-weight: 600; }
.statut-commande-en-cours { background: var(--ticket); color: var(--ticket-encre); }
.statut-commande-termine { background: var(--surface-2); color: var(--encre-2); }
.commande-infos { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem var(--esp-2); margin: var(--esp-2) 0; font-size: 0.95rem; }
.commande-infos dt { color: var(--encre-2); }
.commande-infos dd { margin: 0; }
.commande-articles { margin: var(--esp-1) 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.commande details { margin-top: var(--esp-1); }

/* Frise horizontale des statuts : points reliés par une ligne */
.frise-statuts { list-style: none; margin: var(--esp-2) 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.2rem; position: relative; }
.frise-statuts::before { content: ''; position: absolute; left: 6%; right: 6%; top: 0.55rem; height: 2px; background: var(--trait); }
.frise-statuts::after { content: ''; position: absolute; left: 6%; top: 0.55rem; height: 2px; width: calc(var(--progression, 0%) * 0.88); background: var(--ok); animation: frise-remplir 0.9s ease-out both; }
@keyframes frise-remplir { from { width: 0; } }
.frise-statuts li.courant .frise-point::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ticket); animation: pulser 1.6s ease-out infinite; }
@keyframes pulser { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
html[data-animations="reduites"] .frise-statuts::after, html[data-animations="reduites"] .frise-statuts li.courant .frise-point::after { animation: none; }
.commande-brouillon { margin: var(--esp-2) 0; }

/* Commande refusée / annulée : frise figée en gris, bloc rouge avec motif */
.frise-statuts.frise-terminee::after { background: var(--encre-2); opacity: 0.5; }
.frise-statuts.frise-terminee li.fait .frise-point { background: var(--encre-2); border-color: var(--encre-2); }
.frise-statuts li.arret .frise-point { background: var(--alerte); border-color: var(--alerte); }
.frise-statuts li.arret .frise-nom { color: var(--alerte); font-weight: 600; }
.commande-arret { margin: var(--esp-2) 0; padding: var(--esp-2) var(--esp-3); border-radius: var(--rayon); border-left: 6px solid var(--alerte); background: var(--alerte-fond); }
.commande-arret-titre { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--alerte); text-transform: uppercase; letter-spacing: 0.03em; }
.commande-arret-date { margin: 0.1rem 0 0.5rem; color: var(--encre-2); }
.commande-arret-motif { margin: 0; font-size: 1.05rem; }
.commande-arret-annulee { border-left-color: var(--encre-2); background: var(--surface-2); }
.commande-arret-annulee .commande-arret-titre { color: var(--encre-2); }
.commande-refusee { border-left: 6px solid var(--alerte); }
.statut-commande-refus { background: var(--alerte); color: #fff; }
.statut-commande-brouillon { background: var(--alerte-fond); color: var(--alerte); border: 1px solid var(--alerte); }

/* Bandeau de notifications (haut de page, client connecté) */
.bandeau-notifications { max-width: var(--largeur); margin: var(--esp-3) auto 0; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--ok); border-left-width: 6px; border-radius: var(--rayon); background: var(--ok-fond); animation: apparaitre 0.4s ease-out both; }
.bandeau-notifications.bandeau-refus { border-color: var(--alerte); background: var(--alerte-fond); }
.bandeau-contenu { display: flex; gap: var(--esp-2); align-items: flex-start; flex-wrap: wrap; }
.bandeau-contenu ul { flex: 1; margin: 0; padding: 0; list-style: none; min-width: 16rem; }
.bandeau-contenu li { padding: 0.2rem 0; }
.bandeau-contenu li.notif-refusee strong { color: var(--alerte); font-size: 1.1rem; }
.bandeau-contenu .bouton { flex: none; }

/* Panier : articles indisponibles */
.article-indisponible { border-left: 4px solid var(--alerte); opacity: 0.85; }
.article-indisponible .visuel { filter: grayscale(1); }
.indisponible { color: var(--alerte); margin: 0.2rem 0 0.4rem; }
.pl-indisponible .pl-titre { color: var(--alerte); }
.pl-alerte { display: inline-block; width: 1.1em; text-align: center; border-radius: 50%; background: var(--alerte); color: #fff; font-weight: 700; font-size: 0.8em; line-height: 1.35; }
.pl-alerte-texte { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--alerte); }
.commande-brouillon p { margin: 0 0 var(--esp-1); }
.commande-en-brouillon { border-left: 4px solid var(--alerte); }
.frise-statuts li { position: relative; text-align: center; font-size: 0.72rem; color: var(--encre-2); line-height: 1.25; }
.frise-point { display: block; width: 1.1rem; height: 1.1rem; margin: 0 auto 0.3rem; border-radius: 50%; border: 2px solid var(--trait); background: var(--surface); position: relative; }
.frise-statuts li.fait .frise-point { background: var(--ok); border-color: var(--ok); }
.frise-statuts li.courant .frise-point { background: var(--ticket); border-color: var(--encre); box-shadow: 0 0 0 3px var(--info-fond); }
.frise-statuts li.courant .frise-nom { color: var(--encre); font-weight: 600; }
.frise-detail { margin: 0 0 var(--esp-2); color: var(--encre); font-size: 0.9rem; }
.journal { list-style: none; margin: var(--esp-1) 0 0; padding: 0; font-size: 0.9rem; }
.journal li { padding: 0.3rem 0; border-bottom: 1px dotted var(--trait); }
.journal time { color: var(--encre-2); }

/* Accueil : titre agrandi et bouton principal */
.heros-titre { font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--esp-2); }
.bouton.bouton-grand { padding: 0.9rem 1.6rem; font-size: 1.15rem; }
.heros-actions { align-items: center; }

/* Ticket : bascule simple / détaillé */
.ticket-bascule { display: block; margin: 0.5rem 0 0; padding: 0; border: 0; background: none; color: var(--ticket-encre); font: inherit; font-size: 0.8rem; text-decoration: underline; cursor: pointer; opacity: 0.85; }
.ticket-bascule:hover, .ticket-bascule:focus-visible { opacity: 1; }

/* Paiement via une annonce (Leboncoin) : lien discret sous le prix */
.plateforme { margin-top: var(--esp-1); font-size: 0.9rem; }
.plateforme summary { cursor: pointer; color: var(--encre-2); text-decoration: underline; text-underline-offset: 2px; }
.plateforme .recap-texte { min-height: 8rem; }

/* À propos : ce que je ne fabrique pas (version détaillée, sans fond rouge) */
.refus-titre { color: var(--alerte); }
.refus { padding: var(--esp-1) var(--esp-3); border-left: 6px solid var(--alerte); }
.refus ul { padding-left: 1.2rem; }
.refus li { margin: 0.5rem 0; }
.refus li strong { color: var(--alerte); }
.refus-exception { padding: var(--esp-1) var(--esp-2); background: var(--surface); border-radius: var(--rayon); border: 1px solid var(--trait-fort); }

/* À propos : bandeau, galerie, colonne d'images */
.apropos-bandeau { margin: 0 0 var(--esp-3); }
.apropos-bandeau img { display: block; width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--trait-fort); }
.apropos-bandeau figcaption { font-size: 0.85rem; color: var(--encre-2); margin-top: 0.3rem; }
.apropos-galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-2); margin: var(--esp-3) 0; }
.apropos-galerie figure { margin: 0; }
.apropos-galerie img, .apropos-galerie video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-fort); background: #000; }
.apropos-galerie figcaption { font-size: 0.8rem; color: var(--encre-2); margin-top: 0.3rem; }
.apropos-colonnes { align-items: start; }
.apropos-images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-2); align-content: start; }
.apropos-images h2, .apropos-images .video-atelier { grid-column: 1 / -1; }
.apropos-images h2 { margin: 0; }
.apropos-images figure { margin: 0; }
.apropos-images img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); border: 1px solid var(--trait-fort); }
.apropos-images video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rayon); border: 1px solid var(--trait-fort); }
.apropos-images figcaption { font-size: 0.8rem; color: var(--encre-2); margin-top: 0.3rem; }

/* À propos : vidéos, panneau des options, atouts */
.apropos-videos { margin: var(--esp-3) 0; }
.apropos-videos h2 { margin-top: 0; }
.apropos-videos-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--esp-2); }
.video-atelier { margin: 0; }
.video-atelier video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--rayon); border: 1px solid var(--trait-fort); }
.video-atelier figcaption { font-size: 0.85rem; color: var(--encre-2); margin-top: 0.3rem; }
.options-panneau { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--esp-1); padding: var(--esp-2); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.options-panneau > div { display: flex; flex-direction: column; gap: 0.2rem; padding: var(--esp-1); }
.options-panneau svg { width: 2.2rem; height: 2.2rem; color: var(--principal); }
.options-panneau strong { font-size: 0.95rem; }
.options-panneau span { font-size: 0.82rem; color: var(--encre-2); }
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--esp-2); margin-bottom: var(--esp-3); }
.atout { padding: var(--esp-2); border: 1px solid var(--trait); border-top: 4px solid var(--accent); border-radius: var(--rayon); background: var(--surface); }
.atout svg { width: 2.4rem; height: 2.4rem; color: var(--principal); }
.atout h3 { margin: 0.4rem 0 0.3rem; font-size: 1.05rem; }
.atout p { margin: 0; font-size: 0.92rem; color: var(--encre-2); }

/* Espace client : droits (annulation, rétractation), remboursements ; comptes désactivés */
.commande-droit { margin: var(--esp-1) 0; padding: 0.3rem var(--esp-2); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); }
.commande-droit summary { cursor: pointer; font-weight: 500; }
.commande-remboursements { list-style: none; margin: var(--esp-1) 0; padding: 0; }
.commande-remboursements li { padding: 0.4rem var(--esp-2); border-left: 4px solid var(--encre-2); background: var(--surface-2); margin: 0.3rem 0; }
.commande-remboursements .remb-recue { border-left-color: var(--accent); }
.commande-remboursements .remb-acceptee, .commande-remboursements .remb-remboursee { border-left-color: var(--ok); }
.commande-remboursements .remb-refusee { border-left-color: var(--alerte); }
.remb-entete { margin-bottom: 0.3rem; }
.remb-motif { white-space: pre-wrap; margin: 0.3rem 0 var(--esp-1); padding: var(--esp-1) var(--esp-2); background: var(--surface-2); border-radius: var(--rayon); }
.remb.remb-recue { border-left: 4px solid var(--accent); }
.compte-desactive th, .compte-desactive td { color: var(--encre-2); }

/* Fidélité côté site : badges, points sur la fiche, rappel, invitation, accueil, page */
.badge-points { background: #6b3fa0; color: #fff; }
.picto-points { width: 1em; height: 1em; vertical-align: -0.15em; color: #b8860b; }
.fiche-points { margin: var(--esp-1) 0 0; font-size: 0.95rem; }
.fiche-points .badge { position: static; display: inline-block; padding: 0.05rem 0.4rem; font-size: 0.75rem; vertical-align: middle; }
.fidelite-rappel { display: flex; gap: var(--esp-1); align-items: flex-start; margin: var(--esp-2) 0; padding: var(--esp-1) var(--esp-2); border-radius: var(--rayon); background: var(--info-fond); border-left: 4px solid #b8860b; font-size: 0.95rem; }
.fidelite-rappel .picto-points { flex: none; width: 1.3em; height: 1.3em; margin-top: 0.15em; }
.fidelite-rappel-invite { background: #fff8e1; }
.accueil-fidelite { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--esp-4); align-items: center; padding: var(--esp-3); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.accueil-fidelite h2 { margin-top: 0; }
.accueil-fidelite-carte { perspective: 900px; }
.accueil-fidelite-carte .carte-fidelite { transform: rotateY(-14deg) rotateX(6deg); }
.carte-fidelite-mini .carte-points strong { font-size: 2rem; }
.fidelite-avantages { padding-left: 1.2rem; margin: 0 0 var(--esp-2); }
.fidelite-avantages li { margin: 0.3rem 0; }
.fidelite-avantages .badge { position: static; display: inline-block; padding: 0.05rem 0.4rem; font-size: 0.75rem; vertical-align: middle; }
.fidelite-page-haut { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--esp-4); align-items: center; margin-bottom: var(--esp-3); }
.fidelite-etapes { margin-bottom: var(--esp-3); }
.fidelite-paliers-page { justify-content: flex-start; gap: var(--esp-3); }
.invitation-fidelite { position: fixed; right: var(--esp-2); bottom: var(--esp-2); z-index: 40; width: min(22rem, calc(100vw - 2 * var(--esp-2))); padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-2); background: var(--surface); border: 1px solid var(--trait-fort); border-left: 5px solid #b8860b; border-radius: var(--rayon); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); animation: glisser-droite 0.4s ease-out both; }
@keyframes glisser-droite { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } }
.invitation-corps { display: flex; gap: var(--esp-1); align-items: flex-start; font-size: 0.9rem; }
.invitation-corps .picto-points { flex: none; width: 1.6em; height: 1.6em; }
.invitation-corps p { margin: 0.2rem 0 0.6rem; color: var(--encre-2); }
.invitation-corps .actions { margin: 0; gap: var(--esp-1); }
.invitation-fermer { position: absolute; top: 0.2rem; right: 0.3rem; border: 0; background: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--encre-2); padding: 0.2rem 0.4rem; }
.reduire-animations .invitation-fidelite { animation: none; }

/* Fiche produit : barre d'achat collante */
.fiche-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: var(--esp-2); align-items: center; justify-content: space-between; padding: var(--esp-1) max(var(--esp-2), calc((100vw - var(--largeur)) / 2)); background: var(--surface); border-top: 1px solid var(--trait-fort); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12); animation: apparaitre 0.25s ease-out both; }
.fiche-barre-infos { display: flex; gap: var(--esp-2); align-items: baseline; flex-wrap: wrap; min-width: 0; }
.fiche-barre-infos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
.fb-points { font-size: 0.85rem; color: #b8860b; font-weight: 600; }
.fiche-barre .bouton { flex: none; }

/* Support */
.support-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--esp-4); align-items: start; }
.faq { border-bottom: 1px solid var(--trait); padding: 0.4rem 0; }
.faq summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.faq p { margin: 0.2rem 0 0.6rem; color: var(--encre-2); }
.support-commandes { padding-left: 1.2rem; }
.support-contact { padding: var(--esp-3); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.support-contact h2 { margin-top: 0; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-traite { color: var(--encre-2); opacity: 0.7; }
.support-texte { max-width: 28rem; white-space: pre-wrap; font-size: 0.9rem; }
.admin-import { margin: var(--esp-2) 0; padding: var(--esp-1) var(--esp-2); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface-2); }
.admin-import summary { cursor: pointer; font-weight: 500; }
.import-erreurs { color: var(--alerte); }
.texte-alerte { color: var(--alerte); }

/* Espace client : onglets */

/* Panier : image et nom cliquables */
.article-lien { color: inherit; text-decoration: none; }
.article-lien:hover, .article-lien:focus-visible { text-decoration: underline; }
a.article-lien.visuel { display: block; }
a.article-lien.visuel:hover img, a.article-lien.visuel:hover svg { transform: scale(1.03); transition: transform 0.2s; }
.champ-bon-ligne { display: flex; gap: var(--esp-1); align-items: center; }
.champ-bon-ligne input { flex: 1; text-transform: uppercase; }

/* Carte de fidélité : relief léger, reflet, couleurs par palier */
.carte-fidelite-scene { perspective: 900px; margin: var(--esp-3) 0; max-width: 26rem; }
.carte-fidelite { position: relative; aspect-ratio: 1.586; border-radius: 14px; padding: 1.2rem 1.4rem; color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(135deg, #5b4a3a 0%, #a5714f 45%, #6f4e37 100%); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform-style: preserve-3d; transition: transform 0.25s ease, box-shadow 0.25s ease; outline: none; }
.carte-fidelite:focus-visible { box-shadow: 0 0 0 3px var(--accent), 0 18px 40px rgba(0, 0, 0, 0.28); }
.carte-fidelite.palier-argent { background: linear-gradient(135deg, #5c6470 0%, #b8c0c8 45%, #6c7480 100%); color: #12181f; }
.carte-fidelite.palier-or { background: linear-gradient(135deg, #8a6a0f 0%, #f2c94c 45%, #a07c14 100%); color: #2b2205; }
.carte-fidelite.palier-platine { background: linear-gradient(135deg, #1f2a38 0%, #6c8aa8 45%, #22303f 100%); color: #f4f7fa; }
.carte-reflet { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.28) 48%, rgba(255, 255, 255, 0) 60%); pointer-events: none; }
.carte-haut, .carte-bas { display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-2); position: relative; }
.carte-site { font-weight: 700; letter-spacing: 0.04em; }
.carte-palier { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 700; opacity: 0.9; }
.carte-points { position: relative; display: flex; align-items: baseline; gap: 0.5rem; }
.carte-points strong { font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -0.02em; }
.carte-points span { font-size: 0.9rem; opacity: 0.9; }
.carte-bas { flex-wrap: wrap; font-size: 0.85rem; }
.carte-nom { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.carte-numero { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.12em; }
.carte-depuis { width: 100%; opacity: 0.8; font-size: 0.75rem; }
.carte-motif { position: absolute; right: -0.5rem; top: 50%; width: 7rem; height: 7rem; transform: translateY(-50%); opacity: 0.18; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carte-fidelite { transition: none; transform: none !important; } }
.reduire-animations .carte-fidelite { transition: none; transform: none !important; }

.fidelite-progression { max-width: 36rem; margin: var(--esp-2) 0 var(--esp-3); }
.fidelite-barre { height: 0.7rem; background: var(--surface-2); border: 1px solid var(--trait); border-radius: 1rem; overflow: hidden; }
.fidelite-barre span { display: block; height: 100%; background: linear-gradient(90deg, var(--principal), var(--accent)); transition: width 0.6s ease; }
.fidelite-paliers { list-style: none; margin: var(--esp-1) 0 0; padding: 0; display: flex; justify-content: space-between; gap: var(--esp-1); flex-wrap: wrap; }
.fidelite-paliers li { display: flex; flex-direction: column; font-size: 0.85rem; color: var(--encre-2); }
.fidelite-paliers li.atteint { color: var(--encre); }
.fidelite-paliers li.courant strong { color: var(--principal); }
.fidelite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--esp-1); margin: var(--esp-2) 0 var(--esp-3); }
.fidelite-stats .stat { padding: var(--esp-2); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); display: flex; flex-direction: column; }
.fidelite-stats .stat strong { font-size: 1.5rem; }
.fidelite-stats .stat span { font-size: 0.85rem; color: var(--encre-2); }
.fidelite-conversion { display: flex; gap: var(--esp-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--esp-2); }
.fidelite-bons code { font-size: 1rem; letter-spacing: 0.08em; }
.fidelite-bons .bon-utilise { color: var(--encre-2); }
.fidelite-historique { list-style: none; margin: 0; padding: 0; }
.fidelite-historique li { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--esp-1); padding: 0.4rem 0; border-bottom: 1px solid var(--trait); align-items: baseline; }
.fidelite-historique .points { font-weight: 700; }
.fidelite-historique .points.plus { color: var(--ok); }
.fidelite-historique .points.moins { color: var(--alerte); }
.fidelite-historique time { font-size: 0.85rem; color: var(--encre-2); }

/* Administration : groupes d'onglets, alertes, gestion administrative */
.admin-groupes { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin: var(--esp-2) 0 var(--esp-3); }
.admin-groupe { padding: 0.4rem 0.6rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface-2); }
.admin-groupe.actif { border-color: var(--principal); background: var(--surface); }
.admin-groupe-titre { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--encre-2); margin-bottom: 0.3rem; }
.admin-groupe .admin-onglets { margin: 0; flex-wrap: wrap; }
.admin-groupe { min-width: 0; max-width: 100%; }
.admin-alertes { list-style: none; margin: 0 0 var(--esp-3); padding: 0; }
.admin-alertes li { padding: 0.5rem var(--esp-2); margin: 0.3rem 0; border-left: 4px solid var(--accent); background: #fff8e1; border-radius: var(--rayon); }
.admin-carte-argent .admin-chiffre { color: var(--ok); }
.filtres-periode { margin: var(--esp-2) 0 var(--esp-1); }
.livre th, .livre td { font-size: 0.85rem; }
.livre .ecriture-remboursement td, .livre .ecriture-correction td { color: var(--alerte); }
.livre .a-verifier td { background: #fff8e1; }
.livre .total th, .livre .total td { font-weight: 700; border-top: 2px solid var(--trait-fort); }
.encaissements-zone { margin: var(--esp-1) 0; padding: var(--esp-1) var(--esp-2); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); }
.encaissements-zone h4 { margin: var(--esp-1) 0 0.4rem; }
.ecriture-remboursement td, .ecriture-correction td { color: var(--alerte); }
.case-cgv { margin: var(--esp-1) 0; font-weight: 500; white-space: normal; align-items: flex-start; flex-wrap: wrap; line-height: 1.4; }
.bandeau-prelancement { border-color: var(--accent); background: #fff8e1; }
.commande-facture { margin: var(--esp-1) 0; }

/* Menu regroupé (sous-menus) */
.menu-groupe { position: relative; }
.menu-groupe > button { background: none; border: 0; font: inherit; color: inherit; padding: 0.55rem 0.35rem; cursor: pointer; border-bottom: 3px solid transparent; }
.menu-groupe > button::after { content: ' ▾'; font-size: 0.7em; opacity: 0.7; }
.menu-groupe > button:hover, .menu-groupe > button[aria-expanded="true"] { border-bottom-color: var(--principal); }
.sous-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 12rem; margin: 0; padding: 0.4rem 0; list-style: none; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); z-index: 60; }
.menu-groupe:hover > .sous-menu, .menu-groupe:focus-within > .sous-menu, .menu-groupe > button[aria-expanded="true"] + .sous-menu { display: block; }
.sous-menu li a { display: block; padding: 0.45rem 0.9rem; border-bottom: 0; white-space: nowrap; }
.sous-menu li a:hover { background: var(--surface-2); }

/* Packs, alertes, notifications */
.pack-contenu { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--encre-2); }
.pack-carte.indisponible { opacity: 0.7; }
.alerte-renforce { color: #8a5a00; font-weight: 600; }
.alerte-critique { color: var(--alerte); font-weight: 700; }
.plan-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--esp-3); }
.plan-grille ul { padding-left: 1.1rem; }

/* Préproduction, prix masqués */
.badge-test { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--rayon); background: #6b3fa0; color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; vertical-align: middle; }
.avertissement-test { border-left: 4px solid #6b3fa0; }
.prix-demande { font-size: 0.95rem; font-weight: 600; color: var(--principal); }

/* Tickets de support */
.ticket-support { margin: var(--esp-2) 0; padding: var(--esp-2); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.ticket-ferme, .ticket-resolu { opacity: 0.85; }
.ticket-fil { margin-top: var(--esp-1); }
.ticket-actions { margin: var(--esp-1) 0 0; }
.ticket-nouveau { margin: var(--esp-2) 0; padding: var(--esp-1) var(--esp-2); border: 1px dashed var(--trait-fort); border-radius: var(--rayon); }
.ticket-nouveau summary { cursor: pointer; font-weight: 600; }
.tickets-fermes { margin-top: var(--esp-2); }
.tickets-fermes summary { cursor: pointer; }

/* Statistiques et fiche client */
.stats-grille { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stats-grille .stat strong { font-size: 1.3rem; }
.graphique { width: 100%; height: auto; max-width: 48rem; display: block; margin: var(--esp-1) 0 var(--esp-2); }
.rentabilite { padding: var(--esp-2); border-radius: var(--rayon); border: 1px solid var(--trait); border-left: 6px solid var(--encre-2); background: var(--surface); }
.rentabilite-ok { border-left-color: var(--ok); }
.rentabilite-ko { border-left-color: var(--alerte); }
.rentabilite-verdict { margin: 0 0 var(--esp-1); font-size: 1.1rem; }
.rentabilite-table td { text-align: right; white-space: nowrap; }
.rentabilite-table .total th, .rentabilite-table .total td { font-weight: 700; border-top: 2px solid var(--trait-fort); }
.lien-fiche-client { font-weight: 600; color: var(--principal); }

/* Cartes cadeaux */
.cartes-grille { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; gap: var(--esp-4); align-items: start; }
.carte-cadeau-visuel { aspect-ratio: 1.586; border-radius: 14px; padding: 1.2rem 1.4rem; color: #fff; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg, #0F7B7A 0%, #1a9d9b 55%, #F2A900 140%); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22); }
.ccv-haut { display: flex; justify-content: space-between; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.ccv-montant { font-size: 2.4rem; font-weight: 700; }
.ccv-pour { font-size: 1rem; min-height: 1.2em; }
.ccv-message { font-style: italic; font-size: 0.85rem; opacity: 0.95; min-height: 1.2em; }
.ccv-code { padding: 0.4rem 0.6rem; background: rgba(255, 255, 255, 0.18); border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em; text-align: center; font-size: 0.9rem; }
.cartes-montants { flex-wrap: wrap; margin-bottom: 0.4rem; }
.cartes-montants .choix { flex-direction: row; min-width: 0; padding: 0.4rem 0.9rem; font-weight: 600; }
.etiquette-champ { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.cartes-solde { margin-top: var(--esp-3); }
.cartes-solde summary { cursor: pointer; }

/* Messagerie par commande */
.messagerie { margin-top: var(--esp-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-1) var(--esp-2); background: var(--surface-2); }
.messagerie summary { cursor: pointer; font-weight: 500; }
.messagerie-nouveaux { display: inline-block; padding: 0 0.5rem; border-radius: var(--rayon); background: var(--alerte); color: #fff; font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
.messagerie-fil { display: flex; flex-direction: column; gap: 0.5rem; margin: var(--esp-1) 0; max-height: 22rem; overflow-y: auto; }
.message { max-width: 85%; padding: 0.5rem 0.8rem; border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--trait); font-size: 0.95rem; }
.message-moi { align-self: flex-end; background: var(--info-fond); }
.message-auteur { font-weight: 600; font-size: 0.85rem; }
.message time { font-size: 0.75rem; color: var(--encre-2); margin-left: 0.4rem; }
.message p { margin: 0.2rem 0 0; }
.messagerie-formulaire { display: flex; gap: var(--esp-1); align-items: flex-end; }
.messagerie-formulaire textarea { flex: 1; }
/* Photos des pièces imprimées */
.commande-photos { margin: var(--esp-2) 0; }
.commande-photos h4, .admin-photos h4 { margin: 0 0 var(--esp-1); font-size: 0.95rem; }
.commande-photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--esp-1); }
.commande-photos-grille figure { margin: 0; }
.commande-photos-grille img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--trait-fort); border-radius: var(--rayon); }
.commande-photos-grille figcaption { font-size: 0.8rem; color: var(--encre-2); margin-top: 0.2rem; }
.admin-photos { margin-top: var(--esp-2); }
.admin-email-suivi { margin: var(--esp-1) 0; }
.admin-modeles { margin: var(--esp-2) 0; }
.admin-modeles fieldset { margin-top: var(--esp-1); }

/* ============================================================
   5c. ADMINISTRATION
   ============================================================ */
.admin-connexion { max-width: 26rem; }
.admin-entete, .admin-entete-onglet { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }
.admin-entete h1, .admin-entete-onglet h2 { margin: 0; }
.admin-onglets { margin: var(--esp-3) 0; flex-wrap: wrap; }
.admin-onglets .choix { flex-direction: row; min-width: 0; padding: 0.4rem 0.9rem; text-decoration: none; font-weight: 500; }
.admin-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--esp-2); }
.admin-carte { border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); padding: var(--esp-2); }
.admin-carte h2 { margin: 0 0 var(--esp-1); font-size: 1.05rem; }
.admin-carte ul { margin: 0 0 var(--esp-1); padding-left: 1.2rem; font-size: 0.9rem; }
.admin-chiffre { font-size: 2rem; font-weight: 600; margin: 0 0 var(--esp-1); font-variant-numeric: tabular-nums; }
.admin-table input:not([type="checkbox"]), .admin-table select, .admin-table textarea { width: 100%; min-width: 4.5rem; padding: 0.3rem 0.4rem; font-size: 0.9rem; }
.admin-table th[scope="row"] { font-weight: 500; }
.admin-table td, .admin-table th { vertical-align: middle; }
.admin-actions { white-space: nowrap; }
.admin-mini { display: inline-block; width: 2.6rem; height: 2rem; vertical-align: middle; margin-right: 0.5rem; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: var(--surface-2); }
.admin-mini img, .admin-mini svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-editeur { margin-top: var(--esp-3); border-top: 4px solid var(--ticket); }
.admin-editeur h3 { margin-top: 0; }
.admin-commande h4 { margin: 0 0 var(--esp-1); font-size: 0.95rem; }
.admin-commande .frise-statuts { margin-top: var(--esp-1); }
.admin-commande .grille-2 { margin-top: var(--esp-2); }
.admin-filtres { flex-wrap: wrap; margin-bottom: var(--esp-2); }
.admin-filtres .choix { flex-direction: row; min-width: 0; padding: 0.35rem 0.8rem; font-weight: 500; }
.admin-commandes .cmd-resume th, .admin-commandes .cmd-resume td { vertical-align: middle; }
.admin-commandes .cmd-refusee th { border-left: 4px solid var(--alerte); }
.admin-commandes .cmd-detail td { background: var(--surface-2); padding: var(--esp-2); }
.admin-commandes .cmd-detail .admin-commande { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-2); }
.admin .formulaire { margin-bottom: var(--esp-3); }
.admin h3 { margin-top: var(--esp-3); }
label.bouton input[type="file"] { display: none; }

/* ============================================================
   6. ADAPTATION MOBILE
   ============================================================ */
@media (max-width: 1000px) {
  /* Le panier latéral devient une barre fixe en bas de l'écran */
  main.avec-panier { display: block; padding-bottom: 6rem; }
  .panier-lateral {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 150;
    display: grid; grid-template-columns: 1fr auto; gap: var(--esp-1) var(--esp-2); align-items: center;
    border-radius: 0; border-width: 1px 0 0; padding: var(--esp-1) var(--esp-2);
  }
  .pl-articles { display: none; }
  .pl-entete { border: 0; padding: 0; margin: 0; }
  .pl-total { margin: 0; grid-column: 1; }
  .panier-lateral .bouton { grid-column: 2; grid-row: 1 / span 2; }
  .notification { bottom: 5.5rem; }
}

@media (max-width: 960px) {
  .heros, .essai, .colonnes, .fiche-haut, .fiche-config-grille, .panier, .comparatif, .categorie, .apropos-photos { grid-template-columns: 1fr; }
  .apropos-photos.mosaique .principale { grid-row: auto; }
  .apropos-photos.mosaique .principale img { aspect-ratio: 16 / 10; }
  .apropos-photo:not(.principale) img { aspect-ratio: 16 / 7; }
  .processus-frise ol { grid-template-columns: 1fr 1fr; }
  .processus-frise li:not(:last-child)::after { display: none; }
  .frise-statuts { grid-template-columns: repeat(4, 1fr); row-gap: var(--esp-1); }
  .frise-statuts::before { display: none; }
  .commande-infos { grid-template-columns: 1fr; }
  .admin-table { display: block; overflow-x: auto; }
  fieldset { min-width: 0; }   /* sinon un tableau large dans un fieldset force un défilement horizontal */
  .promotion-entete { flex-direction: column; gap: var(--esp-1); }
  .message { max-width: 100%; }
  .carte-fidelite { padding: 0.9rem 1rem; }
  .accueil-fidelite, .fidelite-page-haut, .support-grille { grid-template-columns: 1fr; }
  .apropos-galerie { grid-template-columns: repeat(2, 1fr); }
  .menu-groupe { position: static; }
  .sous-menu { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--trait); border-radius: 0; margin: 0 0 0 var(--esp-2); }
  .cartes-grille { grid-template-columns: 1fr; }
  .accueil-fidelite-carte .carte-fidelite { transform: none; max-width: 20rem; }
  .fiche-barre { padding: var(--esp-1); bottom: 4.6rem; z-index: 140; border-top: 1px solid var(--trait-fort); border-bottom: 1px solid var(--trait); }
  .fiche-barre-infos strong { font-size: 0.9rem; }
  .invitation-fidelite { bottom: 5.2rem; }
  .fiche-barre-infos strong { max-width: 100%; }
  .invitation-fidelite { right: var(--esp-1); bottom: var(--esp-1); }
  .carte-points strong { font-size: 2rem; }
  .fidelite-historique li { grid-template-columns: 3.5rem 1fr; }
  .fidelite-historique time { grid-column: 2; }
  .messagerie-formulaire { flex-direction: column; align-items: stretch; }
  .bloc-3, .grille-galerie, .categories-apercu { grid-template-columns: repeat(2, 1fr); }
  .services-apercu { grid-template-columns: 1fr; }
  .filtres { grid-template-columns: repeat(2, 1fr); }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .heros h1 { font-size: 2rem; }
  .fiche-ticket-colonne { position: static; }
}

@media (max-width: 640px) {
  .entete { padding: var(--esp-1) 0 0; }
  .marque { font-size: 1rem; }
  .entete-outils { gap: 0.35rem; }
  .bouton.bouton-icone { padding: 0.45rem 0.55rem; gap: 0.25em; }
  .bouton.bouton-icone .texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bouton.bouton-icone svg { width: 1.3em; height: 1.3em; }
  .navigation { padding-bottom: var(--esp-1); }
  .navigation .nav-bascule { display: inline-block; }
  .menu { display: none; flex-direction: column; gap: 0; margin-top: var(--esp-1); }
  .menu.ouvert { display: flex; }
  .menu li { border-bottom: 1px solid var(--trait); }
  .menu a { display: block; padding: 0.7rem 0; border-bottom: 0; }
  .menu a[aria-current="page"] { border-left: 3px solid var(--accent); padding-left: var(--esp-1); }
  .bloc-3, .grille-galerie, .categories-apercu, .grille-2, .pied-colonnes, .filtres { grid-template-columns: 1fr; }
  .filtres .champ-large { grid-column: span 1; }
  .panier { grid-template-columns: minmax(0, 1fr); }
  .article { grid-template-columns: 4.5rem 1fr; }
  .article-prix { grid-column: 2; text-align: left; }
  .ligne-filament { grid-template-columns: 1fr; }
  .produit-ajout { flex-wrap: wrap; }
  .produit-ajout .bouton { flex: 1; }
  h1, .heros h1 { font-size: 1.6rem; }
  main { padding-top: var(--esp-3); }
  .tableau { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bandeau-notifications { margin: 0 0 var(--esp-2); padding: var(--esp-1) var(--esp-2); }
  .commande-arret-titre { font-size: 1.3rem; }
  .admin-commandes .cmd-detail td { padding: var(--esp-1); }
  .tableau th, .tableau td { padding: 0.45rem 0.5rem; }
  .fiche-specs { display: table; }
  .fiche-specs th { width: 7.5rem; }
  .admin-onglets { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.3rem; }
  .admin-onglets .choix { flex: none; }
  .actions .bouton { flex: 1 1 auto; text-align: center; }
  .merci { padding: var(--esp-2); }
}

@media print {
  .entete, .pied, .parametres, .notification, .bouton, .filtres, .panier-lateral, .mode-affichage { display: none !important; }
  main.avec-panier { display: block; }
  .ticket { border: 1px solid #000; background: #fff; color: #000; }
}

/* ---------- 2.0.0 : Planning (module réutilisable) ---------- */
.planning { display: grid; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); overflow: hidden; min-width: 760px; }
.planning-entete { display: grid; border-bottom: 1px solid var(--trait); background: var(--surface-2); }
.planning-entete > div { padding: 6px 8px; font-size: 0.78rem; border-left: 1px solid var(--trait); min-width: 0; overflow: hidden; }
.planning-entete > div small { display: block; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planning-entete > div.planning-ferme { background: #fdecea; }
.planning-ressource { padding: 8px 10px; border-bottom: 1px solid var(--trait); border-right: 1px solid var(--trait); }
.planning-ressource strong { display: block; } .planning-ressource small { color: var(--encre-2); display: block; font-size: 0.72rem; }
.planning-coin { background: var(--surface-2); }
.planning-ligne { position: relative; border-bottom: 1px solid var(--trait); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--colonnes) - 1px), var(--trait) calc(100% / var(--colonnes) - 1px) calc(100% / var(--colonnes))); cursor: crosshair; }
.planning-maintenant { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--alerte); z-index: 2; }
.planning-bande-fermeture { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(179, 38, 30, 0.08) 0 6px, rgba(179, 38, 30, 0.16) 6px 12px); pointer-events: none; }
.planning-bloc { position: absolute; height: 34px; border-radius: 5px; padding: 4px 8px; font: inherit; font-size: 0.75rem; line-height: 1.2; color: #fff; background: var(--principal); border: 1px solid rgba(0, 0, 0, 0.15); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; cursor: pointer; z-index: 1; }
.planning-bloc.encours { background: #1d5b22; } .planning-bloc.passe { background: var(--encre-2); }
.planning-bloc.planning-maintenance { background: #6b3fa0; } .planning-bloc.planning-rendez_vous { background: var(--accent); color: var(--encre); } .planning-bloc.planning-autre { background: #5A6470; }
.planning-bloc.chevauche { background: var(--alerte) !important; outline: 2px dashed #fff; outline-offset: -3px; }
.planning-legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--encre-2); margin: 8px 0; }
.planning-legende i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* ---------- 2.0.0 : Atelier ---------- */
.atelier-bandeau { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-left: 5px solid var(--principal); background: var(--surface); border-radius: var(--rayon); margin: 0 0 14px; }
.atelier-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.atelier-kpi { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.atelier-kpi strong { display: block; font-size: 1.5rem; line-height: 1.1; } .atelier-kpi span { color: var(--encre-2); font-size: 0.82rem; }
.atelier-kpi.alerte { border-color: var(--alerte); } .atelier-kpi.alerte strong { color: var(--alerte); }
.atelier-messages { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.atelier-messages > div { padding: 9px 14px; border-radius: var(--rayon); font-size: 0.92rem; border-left: 5px solid var(--accent); background: #fff8e1; }
.atelier-messages > .rouge { border-left-color: var(--alerte); background: #fdecea; } .atelier-messages > .vert { border-left-color: var(--ok); background: #e6f4ea; }
.atelier-table td, .atelier-table th { font-size: 0.86rem; }
.atelier-piece { display: flex; align-items: center; gap: 10px; }
.atelier-vignette { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; border: 1px solid var(--trait-fort); background: var(--surface-2); flex: none; }
.atelier-vignette.grande { width: 110px; height: 110px; }
.statut-prod { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.statut-prod.s-a_planifier, .statut-prod.s-pause { background: #ececec; } .statut-prod.s-planifiee, .statut-prod.s-prete { background: #e0f0ff; color: #0b4a7a; } .statut-prod.s-impression { background: #d9f2dc; color: #1d5b22; }
.statut-prod.s-bilan { background: #fff1c2; color: #6b4b00; } .statut-prod.s-controle { background: #f2e3ff; color: #4d2a70; } .statut-prod.s-validee { background: #d9f2dc; color: #1d5b22; } .statut-prod.s-a_emballer, .statut-prod.s-emballee { background: #ffe6d1; color: #7a3d0b; }
.statut-prod.s-stock { background: #e8f4ea; color: #2e5f36; border: 1px dashed #7fb28a; } .statut-prod.s-a_refaire { background: #ffd9d6; color: #8a1e16; }
.echeance-retard { color: var(--alerte); font-weight: 700; } .echeance-proche { color: #8a5a00; font-weight: 600; }
.atelier-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.atelier-tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.atelier-tuile .entete { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.atelier-tuile .corps { display: flex; gap: 12px; align-items: flex-start; }
.atelier-tuile dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 0.85rem; } .atelier-tuile dt { color: var(--encre-2); } .atelier-tuile dd { margin: 0; }
.atelier-tuile dl.pied { border-top: 1px solid var(--trait); padding-top: 8px; }
.fab-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fab-cle { padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon); }
.fab-cle span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); }
.fab-cle strong { display: block; font-size: 1.3rem; line-height: 1.2; word-break: break-word; } .fab-cle small { color: var(--encre-2); }
.carte-fabrication { border: 2px solid var(--principal) !important; }
.fichier-prod { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); flex-wrap: wrap; }
.atelier-carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px 16px; margin-bottom: 14px; }
.atelier-carte h3 { margin-top: 0; }
.taches label { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--trait); font-size: 0.92rem; }
.bilan-zones { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; } .bilan-zones h4 { margin: 0 0 8px; font-size: 0.85rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: 0.05em; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.progression { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--trait); margin: 8px 0 4px; } .progression > span { display: block; height: 100%; background: var(--principal); }
@media (max-width: 900px) { .bilan-zones, .fab-grille, .grille-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bilan-zones, .fab-grille, .grille-3 { grid-template-columns: 1fr; } }

/* ---------- 2.1.0 : Commande rapide hors catalogue (mobile d'abord) ---------- */
.rapide { max-width: 720px; margin: 0 auto; padding-bottom: 120px; }
.rapide-entete { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.rapide-entete h2 { margin: 0; font-size: 1.3rem; }
.rapide-brouillons { margin-bottom: 10px; font-size: 0.9rem; } .rapide-brouillons ul { padding-left: 1.1rem; }
.rp-recherche { position: relative; }
.rp-recherche input { font-size: 1rem; min-height: 46px; }
.rp-suggestions { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); }
.rp-suggestions li { border-bottom: 1px solid var(--trait); } .rp-suggestions li:last-child { border-bottom: 0; }
.rp-suggestions .lien-bouton { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 0.95rem; text-decoration: none; color: var(--encre); }
.rp-suggestions small { display: block; color: var(--encre-2); } .rp-suggestions .libre .lien-bouton { color: var(--principal); font-weight: 600; }
.rp-client { font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge-a-completer { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #fff3cd; color: #6b4b00; font-size: 0.74rem; font-weight: 600; }
.rl { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.rl-tete { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface-2); cursor: pointer; min-height: 48px; }
.rl-tete strong { flex: 1; font-size: 1rem; line-height: 1.3; } .rl-tete .rl-prix { font-weight: 700; white-space: nowrap; }
.rl-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #e0f0ff; color: #0b4a7a; font-size: 0.78rem; font-weight: 700; flex: none; }
.rl-resume { font-weight: 400; font-size: 0.82rem; color: var(--encre-2); display: block; }
.rl-corps { padding: 10px 12px; display: grid; gap: 10px; border-top: 1px solid var(--trait); }
.rl-corps input, .rl-corps select { min-height: 44px; font-size: 1rem; }
.pastille-r { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.25); }
.pastille-r.petite { width: 13px; height: 13px; border-width: 1px; vertical-align: -2px; margin-right: 2px; }
.palette-r { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.palette-c { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 62px; padding: 6px 2px; border: 2px solid transparent; border-radius: 10px; background: var(--surface); color: var(--encre); font: inherit; font-size: 0.7rem; cursor: pointer; }
.palette-c.choisi { border-color: var(--principal); background: #e6f4f4; }
.tailles-r { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.taille-c { font: inherit; min-height: 44px; border: 1px solid var(--trait-fort); border-radius: 10px; background: var(--surface); color: var(--encre); cursor: pointer; }
.taille-c.choisi { background: var(--encre); color: #fff; border-color: var(--encre); }
.stepper-r { display: flex; align-items: center; border: 1px solid var(--trait-fort); border-radius: 10px; overflow: hidden; height: 44px; }
.stepper-r button { font: inherit; font-size: 1.4rem; width: 46px; height: 100%; border: 0; background: var(--surface-2); color: var(--encre); cursor: pointer; }
.stepper-r span { flex: 1; text-align: center; font-weight: 700; font-size: 1.1rem; }
.rl-pied { display: flex; justify-content: space-between; gap: 8px; }
.ajouter-r { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; font: inherit; font-size: 1.05rem; font-weight: 600; border: 2px dashed var(--principal); border-radius: 10px; background: var(--surface); color: var(--principal); cursor: pointer; margin-bottom: 6px; }
.rapide-bas { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--trait); padding: 10px 12px; box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08); margin-top: 10px; border-radius: 10px 10px 0 0; }
.rp-totaux { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .rp-totaux strong { font-size: 1.5rem; } .rp-totaux small { color: var(--encre-2); }
.rapide-bas .actions { display: flex; gap: 8px; } .rapide-bas .bouton { flex: 1; min-height: 48px; }
.bouton-ok { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; font-weight: 700; flex: 2 !important; }
@media (max-width: 480px) { .rapide .grille-2 { grid-template-columns: 1fr; } .palette-c { width: 56px; } }

/* Administration sur téléphone : rubriques repliées derrière un bouton */
.admin-rubriques-bascule { display: none; margin: var(--esp-1) 0; }
@media (max-width: 640px) {
  .admin-rubriques-bascule { display: inline-block; }
  .admin-groupes { display: none; }
  .admin-groupes.ouvert { display: flex; }
}

/* Commande rapide — mise en page bureau (grand écran) : le tableau de la première version */
.rapide.bureau { max-width: 1180px; padding-bottom: 20px; }
.rp-table { table-layout: fixed; margin-bottom: 4px; }
.rp-table th, .rp-table td { padding: 6px 6px; vertical-align: middle; }
.rp-table th.num, .rp-table td.num { text-align: right; }
.rp-table td input, .rp-table td select { width: 100%; min-height: 38px; padding: 6px 8px; font-size: 0.95rem; }
.rp-table td.num input { text-align: right; }
.rp-table .rl-prix { font-weight: 600; white-space: nowrap; }
.rp-table .actions-cellule { white-space: nowrap; text-align: center; }
.rp-table .actions-cellule .lien-bouton { font-size: 1rem; padding: 4px; }
.rp-couleurs { position: relative; }
.rp-couleurs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; min-height: 38px; padding: 5px 8px; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--surface); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-couleurs summary::-webkit-details-marker { display: none; } .rp-couleurs summary::after { content: '▾'; margin-left: auto; opacity: 0.6; }
.rp-palette-bureau { position: absolute; left: 0; top: 100%; z-index: 30; width: 260px; margin-top: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14); display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.rp-palette-bureau label { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 0.88rem; cursor: pointer; border-radius: 4px; white-space: nowrap; } .rp-palette-bureau label:hover { background: var(--surface-2); }
.rp-palette-bureau input[type="text"] { grid-column: 1 / -1; margin-top: 6px; min-height: 34px; }
.rp-pied-bureau { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; margin-top: 12px; align-items: start; }
.rp-totaux-bureau > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.95rem; }
.rp-totaux-bureau .total { font-size: 1.35rem; font-weight: 700; border-top: 2px solid var(--trait-fort); margin-top: 6px; padding-top: 8px; }
.rapide.bureau .rp-client-bloc { margin-bottom: 12px; }

.bandeau-session { border-color: var(--alerte); background: #fdecea; }
.texte-ok { color: var(--ok); font-weight: 600; }

/* ---------- 2.3.0 : éditeurs compacts (produit, catégorie) — sections en colonnes sur grand écran ---------- */
.editeur-compact { border-top: 0; }
.editeur-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 10px; } .editeur-tete h3 { margin: 0; }
.editeur-compact .sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 12px; align-items: start; }
@media (min-width: 1500px) { .editeur-compact .sections { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 2100px) { .editeur-compact .sections { grid-template-columns: repeat(4, 1fr); } }
.editeur-compact .section { background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--principal); border-radius: var(--rayon); padding: 10px 14px 12px; margin: 0; min-width: 0; }
.editeur-compact .section > summary, .editeur-compact .section > h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 8px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.editeur-compact .section > summary::-webkit-details-marker { display: none; }
.editeur-compact .section > summary::before { content: '▾'; font-size: 0.8em; color: var(--encre-2); transition: transform 0.15s; }
.editeur-compact .section:not([open]) > summary::before { transform: rotate(-90deg); }
.editeur-compact .section:not([open]) { padding-bottom: 8px; opacity: 0.85; } .editeur-compact .section:not([open]) > summary { margin-bottom: 0; }
.editeur-compact .champ { margin-bottom: 8px; } .editeur-compact .champ label, .editeur-compact .etiquette-champ { font-size: 0.8rem; }
.editeur-compact input, .editeur-compact select, .editeur-compact textarea { padding: 6px 8px; font-size: 0.93rem; }
.editeur-compact .grille-2 { gap: 6px 10px; }
.s-identite { border-left-color: var(--principal) !important; } .s-impression { border-left-color: var(--accent) !important; } .s-taille { border-left-color: #6b3fa0 !important; }
.s-options { border-left-color: #1d5b22 !important; } .s-images { border-left-color: #0b4a7a !important; } .s-classement { border-left-color: #8a5a00 !important; } .s-origine { border-left-color: #5A6470 !important; } .s-atelier { border-left-color: var(--alerte) !important; }
.s-textes { border-left-color: var(--accent) !important; } .s-visuel { border-left-color: #0b4a7a !important; }
.apercu-prix { margin: 6px 0 0; padding: 8px 10px; background: #fff8e1; border-radius: var(--rayon); font-size: 0.9rem; }
.pr-galerie { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; align-items: center; }
.pr-galerie img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait-fort); }
.cat-vignette { display: inline-block; width: 72px; height: 54px; } .cat-vignette svg { width: 100%; height: 100%; }
.cat-apercu { width: 160px; height: 120px; margin: 4px 0 10px; } .cat-apercu svg { width: 100%; height: 100%; }
.cases { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.9rem; }
.actions-collantes { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0; border-top: 1px solid var(--trait); margin-top: 12px; z-index: 3; }
.editeur-compact .tableau-defilable { overflow-x: auto; }

/* ---------- 2.4.0 : galerie de la fiche produit (native, sans bibliothèque) ---------- */
.galerie { display: flex; flex-direction: column; gap: 8px; }
.galerie-principale { position: relative; margin: 0; aspect-ratio: 4 / 3; background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; cursor: zoom-in; }
.galerie-principale:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.galerie-principale img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.galerie-fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--trait-fort); background: rgba(255, 255, 255, 0.92); color: var(--encre); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); z-index: 2; }
.galerie-fleche.gauche { left: 8px; } .galerie-fleche.droite { right: 8px; }
.galerie-fleche:hover, .galerie-fleche:focus-visible { background: var(--accent); }
.galerie-zoom { position: absolute; right: 8px; bottom: 8px; padding: 5px 10px; border: 1px solid var(--trait-fort); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--encre); font: inherit; font-size: 0.8rem; cursor: pointer; z-index: 2; }
.galerie-compteur { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(22, 29, 38, 0.78); color: #fff; font-size: 0.78rem; z-index: 2; }
.galerie-legende { position: absolute; left: 0; right: 0; top: 0; padding: 6px 12px; background: rgba(255, 255, 255, 0.85); font-size: 0.85rem; color: var(--encre); }
.galerie .vignettes { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.galerie .vignette[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.galerie .vignette:focus-visible { outline: 3px solid var(--principal); }
.galerie-vide { margin: 0; font-size: 0.82rem; }
.galerie-3d { align-self: flex-start; }
.galerie-silhouette .galerie-principale { cursor: default; }
/* Plein écran */
.galerie-plein { position: fixed; inset: 0; z-index: 200; background: rgba(12, 16, 20, 0.96); color: #fff; display: flex; flex-direction: column; }
.galerie-plein[hidden] { display: none; }
.galerie-plein-scene { flex: 1; display: grid; place-items: center; overflow: hidden; touch-action: none; }
.galerie-plein-scene img { max-width: 96vw; max-height: 84vh; object-fit: contain; transition: transform 0.08s linear; user-select: none; will-change: transform; }
.galerie-plein-fermer { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 8px 14px; border: 1px solid #fff; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font: inherit; cursor: pointer; }
.galerie-plein-fermer:hover, .galerie-plein-fermer:focus-visible { background: var(--accent); color: var(--encre); }
.galerie-plein .galerie-fleche { background: rgba(255, 255, 255, 0.92); }
.galerie-plein-barre { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); font-size: 0.9rem; background: rgba(0, 0, 0, 0.5); }
.galerie-plein-barre .aide { color: #d5dbe0; }
body.galerie-ouverte { overflow: hidden; }
/* Fiche : prix et bouton sous le résumé, caractéristiques repliables */
.fiche-prix-resume { margin: var(--esp-2) 0 var(--esp-1); } .fiche-prix-resume .prix { font-size: 1.6rem; font-weight: 700; }
.fiche-details { margin-top: var(--esp-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0 var(--esp-2); background: var(--surface); }
.fiche-details > summary { padding: 10px 0; font-weight: 600; cursor: pointer; } .fiche-details > .tableau, .fiche-details > ul { margin-bottom: var(--esp-2); }
@media (max-width: 700px) { .galerie-principale { aspect-ratio: 1 / 1; border-radius: 0; margin: 0 calc(-1 * var(--esp-2)); border-left: 0; border-right: 0; } .galerie-fleche { width: 2.2rem; height: 2.2rem; } .galerie-zoom { font-size: 0; padding: 8px; width: 2.2rem; height: 2.2rem; } .galerie-zoom::before { content: '⤢'; font-size: 1rem; } }
/* Administration : médias */
.pr-medias { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.pr-media { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; padding: 6px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface-2); }
.pr-media.principale { border-color: var(--accent); }
.pr-media img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait-fort); }
.pr-media-champs { display: grid; gap: 4px; min-width: 0; } .pr-media-champs input { min-height: 32px; font-size: 0.85rem; } .pr-media-champs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-media-actions { display: flex; flex-direction: column; gap: 2px; } .pr-media-actions .lien-bouton { padding: 2px 6px; }
.pr-medias-conseil { margin: 0 0 8px; padding: 6px 10px; background: #fff8e1; border-radius: var(--rayon); }

/* ---------- 2.5.0 : fiches clients, entreprises, activation ---------- */
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 0.9rem; object-fit: cover; flex: none; border: 1px solid rgba(0, 0, 0, 0.15); }
.avatar.grand { width: 80px; height: 80px; font-size: 1.6rem; }
img.avatar { background: var(--surface); }
.code-invitation { font-size: 1.15em; letter-spacing: 0.12em; background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--trait-fort); user-select: all; }
.encart-aide { background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--esp-2) var(--esp-3); font-size: 0.92rem; } .encart-aide h2 { font-size: 1rem; margin-top: 0; }

/* 2.6.0 : référentiel */
.rf-version { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 6px 10px; margin-bottom: 6px; background: var(--surface); } .rf-version > summary { cursor: pointer; font-weight: 600; }

/* 2.7.0 : stock unifié, projets */
.arbre-emplacements { list-style: none; padding-left: 1rem; margin: 0 0 10px; } .arbre-emplacements li { padding: 3px 0; border-left: 2px solid var(--trait); padding-left: 8px; margin: 2px 0; }
.emp-type { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); font-size: 0.72rem; text-transform: uppercase; color: var(--encre-2); }
.besoin-enfant th { font-weight: 400; }
.besoin-parent th { font-weight: 700; }

/* ============================================================
   2.7.1 — Refonte visuelle de l'administration : largeur, sections, champs, tableaux, aide
   ============================================================ */
body.mode-admin main { max-width: min(1900px, 100% - 2rem); padding-left: 1rem; padding-right: 1rem; }
body.mode-admin .admin { width: 100%; }
/* Éditeurs : colonnes larges, jamais de champ écrasé */
.editeur-compact .sections { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 16px; }
@media (min-width: 1500px) { .editeur-compact .sections { grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); } }
@media (min-width: 2100px) { .editeur-compact .sections { grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); } }
.editeur-compact .section { padding: 0 0 14px; overflow: hidden; border-left-width: 1px; border-color: var(--trait-fort); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }
.editeur-compact .section > summary, .editeur-compact .section > h4 { margin: 0 0 12px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--trait); border-left: 5px solid var(--principal); font-size: 0.95rem; }
.editeur-compact .section > *:not(summary):not(h4) { margin-left: 14px; margin-right: 14px; }
.editeur-compact .section .grille-2, .editeur-compact .section .grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; }
.editeur-compact input, .editeur-compact select, .editeur-compact textarea { min-width: 0; width: 100%; }
.editeur-compact input[type="color"] { width: 64px !important; height: 40px; padding: 2px; cursor: pointer; }
.editeur-compact input[type="checkbox"], .editeur-compact input[type="radio"] { width: auto; }
.produits-clients .prod-etat { min-width: 7.5em; }   /* « En pause » lisible dans Produits des clients */
.cat-ordre { white-space: nowrap; }   /* 2.33 : boutons radio (visibilité) */
.editeur-compact .champ label { line-height: 1.3; }
.editeur-compact .actions-collantes { margin-left: 0; margin-right: 0; }
.s-identite > summary, .s-identite > h4 { border-left-color: var(--principal) !important; } .s-impression > summary, .s-impression > h4 { border-left-color: var(--accent) !important; } .s-taille > summary, .s-taille > h4 { border-left-color: #6b3fa0 !important; }
.s-options > summary, .s-options > h4 { border-left-color: #1d5b22 !important; } .s-images > summary, .s-images > h4 { border-left-color: #0b4a7a !important; } .s-classement > summary, .s-classement > h4 { border-left-color: #8a5a00 !important; } .s-origine > summary, .s-origine > h4 { border-left-color: #5A6470 !important; } .s-atelier > summary, .s-atelier > h4 { border-left-color: var(--alerte) !important; }
.s-textes > summary, .s-textes > h4 { border-left-color: var(--accent) !important; } .s-visuel > summary, .s-visuel > h4 { border-left-color: #0b4a7a !important; }
.editeur-compact .section { border-left: 1px solid var(--trait-fort) !important; }
/* Repérage visuel : avatar à gauche, champs à droite */
.bloc-avatar { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.bloc-avatar .avatar.grand { width: 96px; height: 96px; font-size: 2rem; }
/* Tableaux d'administration : lignes séparées, alternées, survol */
.admin-table tbody tr { border-bottom: 1px solid var(--trait-fort); }
.admin-table tbody tr:nth-child(even) { background: var(--surface-2); }
.admin-table tbody tr:hover { background: #eef6f6; }
.admin-table th, .admin-table td { padding: 10px 10px; vertical-align: middle; }
.admin-table thead th { position: sticky; top: 0; background: var(--surface-2); border-bottom: 2px solid var(--trait-fort); z-index: 1; }
/* Bulle d'aide contextuelle, repliée par défaut */
.bulle-aide { margin: 0 0 12px; border: 1px solid var(--trait); border-radius: var(--rayon); background: #f4f9f9; }
.bulle-aide > summary { cursor: pointer; padding: 8px 12px; font-size: 0.88rem; color: var(--principal); font-weight: 600; list-style: none; }
.bulle-aide > summary::-webkit-details-marker { display: none; } .bulle-aide > summary::before { content: 'ℹ '; }
.bulle-aide > div { padding: 0 14px 12px; font-size: 0.9rem; color: var(--encre-2); }
.bulle-aide ul { margin: 6px 0 0 1.1rem; }
/* Cartes de contenu et en-têtes d'onglet */
.admin-entete-onglet { margin-bottom: 12px; }
.atelier-carte h3, .atelier-carte h4 { margin-bottom: 8px; }
.admin-filtres { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; margin-bottom: 12px; }
/* Sélecteur de couleur à pastilles (40 couleurs) */
.choix-couleur { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-couleur label { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 60px; padding: 4px 2px; border: 2px solid transparent; border-radius: 8px; font-size: 0.68rem; cursor: pointer; text-align: center; }
.choix-couleur label.choisi { border-color: var(--principal); background: #e6f4f4; }
.choix-couleur input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix-materiaux { display: flex; flex-wrap: wrap; gap: 4px 14px; } .choix-materiaux label { display: inline-flex; gap: 6px; align-items: center; font-size: 0.9rem; }
.dimensions-saisie { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; gap: 6px; align-items: center; } .dimensions-saisie span { color: var(--encre-2); text-align: center; }
.duree-saisie { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; } .duree-saisie span { color: var(--encre-2); }
.ref-code { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--encre-2); }

/* ---------- 2.8.1 : navigation (fil d'Ariane, cadres), boutons Ouvrir, filtres repliés, dépôt d'image, bobines ---------- */
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 14px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--trait-fort); border-left: 5px solid var(--principal); border-radius: var(--rayon); font-size: 0.92rem; }
.fil-ariane a, .fil-ariane .lien-bouton { color: var(--principal); font-weight: 600; text-decoration: none; padding: 0; } .fil-ariane a:hover, .fil-ariane .lien-bouton:hover { text-decoration: underline; }
.fil-ariane .sep { color: var(--encre-2); } .fil-ariane .courant { font-weight: 700; color: var(--encre); }
.cadre-contexte { position: relative; border: 2px solid var(--trait-fort); border-radius: var(--rayon); padding: 22px 16px 16px; margin-bottom: 16px; background: rgba(255, 255, 255, 0.5); }
.cadre-etiquette { position: absolute; top: -11px; left: 14px; padding: 2px 10px; background: var(--principal); color: #fff; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.bouton-ouvrir { white-space: nowrap; padding: 7px 14px; font-weight: 700; }
.filtres-repliables { margin-bottom: 12px; } .filtres-repliables > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.filtres-repliables > summary::-webkit-details-marker { display: none; } .bouton-grand-filtre { font-size: 1rem; padding: 10px 18px; }
.filtres-repliables[open] > summary { margin-bottom: 10px; }
.programmes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 14px; }
.programme-carte { background: var(--surface); border: 1px solid var(--trait); border-left: 6px solid var(--principal); border-radius: var(--rayon); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.participant-ligne { margin-bottom: 4px; }
.depot-image { margin-bottom: 10px; } .depot-image-corps { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: start; }
.depot-zone { border: 2px dashed var(--trait-fort); border-radius: var(--rayon); padding: 14px; text-align: center; cursor: pointer; background: var(--surface-2); font-size: 0.85rem; min-height: 72px; }
.depot-zone.survol, .depot-zone:hover, .depot-zone:focus-visible { border-color: var(--principal); background: #e6f4f4; }
.depot-options { display: grid; gap: 6px; } .depot-apercu { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait-fort); background: var(--surface-2); }
@media (max-width: 700px) { .depot-image-corps { grid-template-columns: 1fr; } }
img.atelier-vignette, .admin-mini img, img.avatar { cursor: zoom-in; }
.bobines-lignes { display: grid; gap: 10px; }
.bobine-ligne { display: grid; grid-template-columns: 220px 150px 1fr 130px; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 14px; }
.bobine-couleur { display: flex; align-items: center; gap: 10px; }
.bobine-neuves, .bobine-vides { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: var(--rayon); background: var(--surface-2); text-align: center; } .bobine-neuves strong, .bobine-vides strong { font-size: 1.6rem; } .bobine-neuves span, .bobine-vides span { font-size: 0.78rem; color: var(--encre-2); }
.bobine-entamees { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 56px; }
.bobine-bouton { background: none; border: 1px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; } .bobine-bouton:hover, .bobine-bouton:focus-visible { border-color: var(--principal); background: #e6f4f4; }
.bobine-svg { width: 52px; height: 52px; display: block; }
@media (max-width: 900px) { .bobine-ligne { grid-template-columns: 1fr 1fr; } .bobine-entamees { grid-column: 1 / -1; } }

.ref-colonnes { grid-template-columns: 1fr 1fr; align-items: start; } @media (max-width: 900px) { .ref-colonnes { grid-template-columns: 1fr; } }
#atelier-contenu { overflow-x: auto; max-width: 100%; }

.ref-colonnes > div { min-width: 0; } .tableau-defilable { overflow-x: auto; max-width: 100%; }

/* ---------- 2.9.0 : Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.kanban-colonne { background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px; min-height: 240px; }
.kanban-colonne > h4 { margin: 0 0 10px; padding: 6px 8px; background: var(--surface); border-left: 5px solid var(--principal); border-radius: 6px; }
.kanban-colonne[data-colonne="en_cours"] > h4 { border-left-color: var(--accent); } .kanban-colonne[data-colonne="termine"] > h4 { border-left-color: #1d5b22; }
.kanban-colonne.survol { outline: 3px dashed var(--principal); outline-offset: -3px; background: #e6f4f4; }
.kanban-liste { display: grid; gap: 8px; }
.kanban-carte { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: 10px; cursor: grab; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.kanban-carte.en-vol { opacity: 0.5; } .kanban-carte.alerte { border-left: 5px solid var(--alerte); }
.kanban-titre { flex: 1; min-width: 0; } .kanban-menu-bouton { font-size: 1.3rem; line-height: 1; padding: 0 6px; }
.kanban-progression { margin: 8px 0 6px; } .kanban-progression small { display: block; margin-top: 4px; color: var(--encre-2); }
.kanban-etapes { display: flex; flex-wrap: wrap; gap: 4px; } .kanban-alertes { margin-top: 6px; font-size: 0.85rem; color: var(--alerte); }
.kanban-menu { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--trait-fort); display: grid; gap: 6px; } .kanban-menu .bouton { justify-self: start; }
.kanban-controle-ligne { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; padding: 3px 0; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }

/* ---------- 2.10.0 : accessoires, dépenses ---------- */
.acc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; margin-bottom: 14px; }
.acc-carte { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .acc-carte.alerte { border-left: 5px solid var(--alerte); }
.acc-etats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .acc-etat { text-align: center; padding: 6px 2px; border-radius: 6px; background: var(--surface-2); } .acc-etat strong { display: block; font-size: 1.3rem; } .acc-etat span { font-size: 0.68rem; color: var(--encre-2); } .acc-etat.vide { opacity: 0.45; }
.acc-etat:nth-child(1) { border-top: 3px solid #0b4a7a; } .acc-etat:nth-child(2) { border-top: 3px solid #1d5b22; } .acc-etat:nth-child(3) { border-top: 3px solid var(--accent); } .acc-etat:nth-child(4) { border-top: 3px solid var(--alerte); } .acc-etat:nth-child(5) { border-top: 3px solid #5A6470; }
.admin-table tr.total th, .admin-table tr.total td { border-top: 2px solid var(--trait-fort); background: var(--surface-2); }
@media (max-width: 600px) { .acc-etats { grid-template-columns: repeat(5, 1fr); } .acc-etat strong { font-size: 1rem; } }

.acc-grille { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); } .acc-carte { min-width: 0; } .acc-etat { min-width: 0; overflow: hidden; }

/* ---------- 2.11.0 : dépenses en tête, demandes, couleurs, planning refait ---------- */
.cadre-contexte.cadre-saisie { background: #f4f9f9; border-color: var(--principal); }
.cadre-etiquette { background: #0F7B7A !important; color: #fff !important; }
.formulaire-saisie .grille-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; }
.grille-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 12px; }
.grille-5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }   /* 2.40 */
.dp-bloc { border: 1px solid var(--trait-fort); border-radius: var(--rayon); padding: 8px 14px 4px; margin: 8px 0; background: var(--surface); } .dp-bloc legend { padding: 0 6px; font-weight: 700; font-size: 0.85rem; color: var(--principal); }
.bouton-demande { background: #E8792B; color: #fff; border: 0; border-radius: 999px; font-weight: 700; box-shadow: 0 2px 6px rgba(232, 121, 43, 0.35); } .bouton-demande:hover, .bouton-demande:focus-visible { background: #c9631f; color: #fff; }
.choix-couleur-aide { width: 100%; }
.programme-deux-colonnes { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; } @media (max-width: 1000px) { .programme-deux-colonnes { grid-template-columns: 1fr; } }
.kpis-compacts { grid-template-columns: repeat(2, 1fr) !important; }
/* Planning : grille alignée sur les colonnes, lignes régulières, en-tête net */
.planning { border: 1px solid var(--trait-fort); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.planning-entete { background: #e9eef0; border-bottom: 2px solid var(--trait-fort); }
.planning-entete > div { padding: 8px 8px; font-size: 0.8rem; border-left: 1px solid rgba(0, 0, 0, 0.08); text-align: center; } .planning-entete > div strong { display: block; }
.planning-ressource { display: flex; flex-direction: column; justify-content: center; padding: 8px 12px; background: var(--surface); border-right: 2px solid var(--trait-fort); border-bottom: 1px solid var(--trait); }
.planning-coin { background: #e9eef0; }
.planning-ligne { border-bottom: 1px solid var(--trait); background-color: var(--surface); background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px); background-size: calc(100% / var(--colonnes, 4)) 100%; background-position: -1px 0; }
.planning-ligne:nth-of-type(4n + 2) { background-color: #fafaf7; }
.planning-bloc { height: 34px; border-radius: 7px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.35); font-weight: 600; letter-spacing: 0.01em; }
.planning-bloc:hover, .planning-bloc:focus-visible { filter: brightness(1.08); outline: 2px solid #fff; outline-offset: -3px; z-index: 3; }
.planning-maintenant { width: 2px; background: var(--alerte); box-shadow: 0 0 0 1px rgba(179, 38, 30, 0.25); } .planning-maintenant::after { content: 'maintenant'; position: absolute; top: 2px; left: 4px; font-size: 0.65rem; color: var(--alerte); background: #fff; padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.planning-legende { padding: 8px 12px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }

/* ---------- 2.12.0 : catalogue privé, profils, idées ---------- */
.prix-offert { color: #1d5b22; } .badge-prive { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: #1d5b22; color: #fff; font-size: 0.7rem; vertical-align: middle; letter-spacing: 0.03em; }
.catalogue-prive { margin: var(--esp-2) 0 var(--esp-4); padding: var(--esp-2) var(--esp-3); background: #f0f7f1; border: 1px solid #b9d6bf; border-radius: var(--rayon); }
.badge-prive-ligne { padding: 8px 12px; background: #f0f7f1; border-left: 4px solid #1d5b22; border-radius: 6px; }
.profil-photo { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-bottom: var(--esp-2); }
.bloc-prive { padding: 8px 10px; margin: 6px 0; background: #f0f7f1; border-radius: 6px; }
.commande-a-valider { margin: 8px 0; padding: 10px 12px; background: #fff8e1; border-left: 4px solid var(--accent); border-radius: 6px; }
.idees { list-style: none; margin: 0; padding: 0; } .idee { padding: 10px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--principal); border-radius: var(--rayon); }
.idee-retenue, .idee-realisee { border-left-color: #1d5b22; } .idee-refusee { border-left-color: var(--encre-2); }
.badge-statut { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.78rem; } .badge-retenue, .badge-realisee { background: #dcefe0; } .badge-refusee { background: #eee; }
.ligne-nouvelle th, .ligne-nouvelle td { background: #fff8e1 !important; }

/* ---------- 2.12.1 : catalogue privé intégré, suivi client illustré ---------- */
.produit-carte { position: relative; } .produit-carte.prive { outline: 2px solid #1d5b22; outline-offset: -2px; }
.ruban-prive { position: absolute; top: 12px; left: -6px; z-index: 2; padding: 4px 12px; background: #1d5b22; color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 0 999px 999px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); }
.catalogue-prive { margin: 0 0 var(--esp-3); padding: 0; background: none; border: 0; } .bandeau-prive { margin: 0; padding: 10px 14px; background: #f0f7f1; border: 1px solid #b9d6bf; border-radius: var(--rayon); }
.commande-visuels { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; } .commande-visuel { margin: 0; width: 84px; text-align: center; } .commande-visuel svg, .commande-visuel img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--trait); } .commande-visuel figcaption { font-size: 0.7rem; color: var(--encre-2); line-height: 1.2; margin-top: 2px; }

.admin-demande { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(28, 28, 28, 0.45); padding: 16px; } .admin-demande-corps { width: min(560px, 100%); margin: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }

/* ---------- 2.14.0 : suivi de commande refait (espace client), commande rapide, espace privé ---------- */
.commande-v2 { padding: 0; overflow: hidden; border-color: var(--trait); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
.cmd-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--trait); }
.cmd-tete-gauche, .cmd-tete-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cmd-ref { font-size: 1.05rem; } .cmd-ref strong { letter-spacing: 0.02em; } .cmd-date { color: var(--encre-2); font-size: 0.9rem; }
.cmd-total { font-size: 1.15rem; font-weight: 700; } .cmd-total small { font-weight: 400; color: var(--encre-2); font-size: 0.8rem; }
.cmd-suivi { padding: 18px 18px 8px; }
/* Frise : chaque étape porte sa moitié de trait à gauche et à droite ; le point est posé sur le trait, jamais dessous */
.suivi-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }   /* 2.29 : autant de colonnes que d'étapes (« En attente de détails » s'ajoute quand elle est utilisée) */
.suivi-etape { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "avant point apres" "nom nom nom" "date date date"; align-items: center; text-align: center; font-size: 0.72rem; color: var(--encre-2); line-height: 1.25; }
.suivi-trait { height: 3px; background: var(--trait); } .suivi-trait-avant { grid-area: avant; } .suivi-trait-apres { grid-area: apres; }
.suivi-etape:first-child .suivi-trait-avant, .suivi-etape:last-child .suivi-trait-apres { visibility: hidden; }
.suivi-point { grid-area: point; display: flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; margin: 0 2px; border-radius: 50%; border: 3px solid var(--trait); background: var(--surface); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; box-sizing: border-box; }
.suivi-nom { grid-area: nom; margin-top: 6px; padding: 0 2px; } .suivi-date { grid-area: date; font-size: 0.66rem; color: var(--encre-2); opacity: 0.85; }
.suivi-etape.fait .suivi-point { background: var(--ok); border-color: var(--ok); } .suivi-etape.fait .suivi-trait { background: var(--ok); } .suivi-etape.fait .suivi-nom { color: var(--encre); }
.suivi-etape.courant .suivi-trait-avant { background: var(--ok); } .suivi-etape.courant .suivi-point { background: var(--ticket); border-color: var(--ticket); animation: suivi-pulse 1.6s ease-in-out infinite; } .suivi-etape.courant .suivi-nom { color: var(--encre); font-weight: 700; }
.suivi-etape.arret .suivi-trait-avant { background: var(--encre-2); } .suivi-etape.arret .suivi-point { background: var(--alerte); border-color: var(--alerte); } .suivi-etape.arret .suivi-nom { color: var(--alerte); font-weight: 700; }
.suivi-arretee .suivi-etape.fait .suivi-point, .suivi-arretee .suivi-etape.fait .suivi-trait { background: var(--encre-2); border-color: var(--encre-2); opacity: 0.7; }
@keyframes suivi-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(212, 160, 23, 0); } }
@media (prefers-reduced-motion: reduce) { .suivi-etape.courant .suivi-point { animation: none; } }
.suivi-detail { margin: 12px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; font-size: 0.92rem; } .suivi-estimee { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #fff; border: 1px solid var(--trait); border-radius: 999px; font-size: 0.8rem; }
.cmd-corps { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 0; border-top: 1px solid var(--trait); }
.cmd-articles { padding: 14px 18px; } .cmd-articles h4, .cmd-bloc h4 { margin: 0 0 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); }
.cmd-liste-articles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cmd-article { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); }
.cmd-article-visuel { display: block; width: 84px; height: 66px; padding: 0; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface-2); overflow: hidden; cursor: zoom-in; } .cmd-article-visuel svg, .cmd-article-visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmd-article-visuel-vide { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: default; }
.cmd-article-titre { font-size: 1rem; } .cmd-article-titre a { text-decoration: none; font-weight: 700; } .cmd-article-titre a:hover { text-decoration: underline; }
.cmd-article-etiquette { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); font-size: 0.7rem; font-weight: 600; vertical-align: middle; } .cmd-article-etiquette.offert { background: #dcefe0; color: #1d5b22; }
.cmd-article-options { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 0.82rem; } .cmd-article-options div { display: flex; gap: 4px; } .cmd-article-options dt { color: var(--encre-2); } .cmd-article-options dt::after { content: ' :'; } .cmd-article-options dd { margin: 0; font-weight: 600; }
.cmd-article-statut { display: inline-block; margin-top: 6px; }
.cmd-article-prix { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .cmd-article-qte { color: var(--encre-2); font-size: 0.85rem; } .cmd-article-unitaire { color: var(--encre-2); font-size: 0.75rem; }
.cmd-lateral { border-left: 1px solid var(--trait); background: #fafaf7; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.cmd-bloc { padding-bottom: 12px; border-bottom: 1px dashed var(--trait); } .cmd-bloc:last-child { border-bottom: 0; padding-bottom: 0; }
.cmd-recap { margin: 0 0 8px; } .cmd-recap div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 0.9rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .cmd-recap dt { color: var(--encre-2); } .cmd-recap dd { margin: 0; text-align: right; }
.cmd-action { display: block; width: 100%; box-sizing: border-box; text-align: center; margin-top: 8px; }
.cmd-note-atelier { margin: 10px 0 0; padding: 8px 10px; background: #fff8e1; border-left: 4px solid var(--accent); border-radius: 6px; font-size: 0.9rem; }
.cmd-droits .commande-droit { margin-top: 6px; } .cmd-droits:empty { display: none; }
.commande-v2 .messagerie, .commande-v2 .commande-photos { margin: 0; padding: 14px 18px; border-top: 1px solid var(--trait); }
.cmd-journal { padding: 10px 18px 14px; border-top: 1px solid var(--trait); font-size: 0.9rem; } .cmd-journal summary { cursor: pointer; color: var(--encre-2); }
@media (max-width: 760px) { .cmd-corps { grid-template-columns: 1fr; } .cmd-lateral { border-left: 0; border-top: 1px solid var(--trait); } .suivi-nom { font-size: 0.62rem; } .suivi-date { display: none; } .cmd-article { grid-template-columns: 64px minmax(0, 1fr); } .cmd-article-prix { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 10px; } .cmd-article-visuel { width: 64px; height: 52px; } }
/* Commande rapide et espace privé */
.rapide-liste { list-style: none; margin: 0 0 var(--esp-3); padding: 0; display: grid; gap: 8px; }
.rapide-ligne { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); } .rapide-ligne.prive { border-color: #b9d6bf; background: #f6fbf7; }
.rapide-ligne a { text-decoration: none; } .rapide-ligne a:hover { text-decoration: underline; }
.rapide-actions { display: flex; align-items: center; gap: 6px; } .rapide-qte { width: 64px; } .rapide-couleur { max-width: 130px; }
@media (max-width: 600px) { .rapide-ligne { grid-template-columns: 64px minmax(0, 1fr); } .rapide-actions { grid-column: 1 / -1; justify-content: flex-end; } }

/* ---------- 2.15.0 : couleurs v2, fichiers 3D, ajout rapide ---------- */
.choix-couleur-v2 { display: block; } .choix-couleur-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; } .choix-couleur-recherche { max-width: 260px; }
.choix-couleur-selection { font-size: 0.85rem; font-weight: 600; color: var(--principal); }
.choix-couleur-famille { margin-bottom: 6px; } .choix-couleur-famille-titre { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); margin: 4px 0 2px; }
.choix-couleur-grille { display: flex; flex-wrap: wrap; gap: 4px; }
.choix-couleur-v2 label { padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 999px; } .choix-couleur-v2 label:hover { border-color: var(--trait-fort); }
.choix-couleur-v2 label.choisi { border-color: var(--principal); background: #e6f4f4; font-weight: 700; }
.choix-couleur-v2 label.en-stock .pastille-r, .en-stock-legende { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d5b22; } .en-stock-legende { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); vertical-align: middle; }
.f3d-zone { min-height: 90px; margin-bottom: 10px; } .f3d-progression { margin-top: 8px; }
.f3d-ext { display: inline-block; min-width: 42px; padding: 2px 6px; border-radius: 6px; background: var(--encre); color: #fff; font-size: 0.7rem; font-weight: 700; text-align: center; letter-spacing: 0.04em; }
.f3d-ext-stl { background: #0b4a7a; } .f3d-ext-3mf { background: #1d5b22; } .f3d-ext-step, .f3d-ext-stp { background: #6a3d9a; } .f3d-ext-f3d, .f3d-ext-f3z { background: #E8792B; } .f3d-ext-gcode { background: #5A6470; } .f3d-ext-zip { background: #8a6d3b; }
.bloc-fichiers3d { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-radius: var(--rayon); } .bloc-fichiers3d h4 { margin: 0 0 8px; } .bloc-fichiers3d .f3d-envoi { margin-top: 10px; padding-top: 18px; }
.licence-droits { display: inline-block; margin-left: 6px; font-size: 0.82rem; color: var(--encre-2); }

/* ---------- 2.16.0 : fiche produit réorganisée, multi-couleurs, valeurs rapides ---------- */
.fiche-haut { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--esp-4); align-items: start; }
.fiche-galerie .galerie-principale { aspect-ratio: 4 / 3; } .fiche-galerie .galerie-principale img { width: 100%; height: 100%; object-fit: cover; }
.fiche-retour { display: inline-block; margin-bottom: 4px; font-size: 0.85rem; color: var(--encre-2); text-decoration: none; } .fiche-retour::before { content: '‹ '; } .fiche-retour:hover { text-decoration: underline; }
.fiche-infos h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.15; }
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0; } .bouton-grand { padding: 12px 22px; font-size: 1.05rem; }
.fiche-mots-cles { margin: 6px 0 12px; } .etiquette-mot { background: var(--surface-2); color: var(--encre-2); }
.fiche-description { color: var(--encre); line-height: 1.55; } .fiche-description p { margin: 0 0 10px; }
.fiche-technique { margin: var(--esp-3) 0; } .fiche-technique .fiche-details { margin-bottom: 10px; }
.fiche-parties { margin-bottom: 12px; } .fiche-partie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 0; border-bottom: 1px dashed var(--trait); } .fiche-partie:last-child { border-bottom: 0; }
.fiche-partie-nom { min-width: 120px; font-weight: 700; text-transform: capitalize; }
.pastille-petite { padding: 3px 8px 3px 4px; font-size: 0.82rem; }
.fiche-option-parties { margin: 4px 0 8px 26px; padding: 6px 10px; background: var(--surface-2); border-radius: 8px; }
.valeurs-rapides { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 8px; } .valeurs-rapides small { margin-right: 4px; }
.valeur-rapide { padding: 2px 9px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); font-size: 0.78rem; cursor: pointer; } .valeur-rapide:hover, .valeur-rapide:focus-visible { border-color: var(--principal); background: #e6f4f4; }
.parties-table td { vertical-align: middle; } .parties-table input[type="text"] { min-width: 160px; }
@media (max-width: 900px) { .fiche-haut { grid-template-columns: 1fr; } }
@media (min-width: 1600px) { :root { --largeur: 1600px; } }

.ac-etat { width: 28px; font-weight: 700; text-align: center; } .ac-ok .ac-etat { color: #1d5b22; } .ac-ko .ac-etat { color: var(--alerte); } .ac-ko th { color: var(--alerte); }

.pr-depot-photos { margin: 6px 0 8px; min-height: 84px; } .champ-fichier-discret label { font-size: 0.8rem; color: var(--encre-2); }

/* ---------- 2.17.0 : espace Commande rapide (héros animé, rubriques, recommandations), Espace Professeur ---------- */
.compte-salut { font-size: 1.15rem; font-weight: 600; }
.rapide-hero { position: relative; overflow: hidden; margin: 0 0 var(--esp-3); padding: 26px 28px; border-radius: 16px; color: #fff; background: linear-gradient(120deg, #0F7B7A, #1f2a30 60%, #2c4a6b); background-size: 200% 200%; animation: hero-derive 14s ease-in-out infinite; box-shadow: 0 12px 30px rgba(15, 123, 122, 0.25); }
.rapide-hero.matin { background: linear-gradient(120deg, #f6b73c, #E8792B 55%, #0F7B7A); } .rapide-hero.apres-midi { background: linear-gradient(120deg, #0F7B7A, #3a8fd6 60%, #6a3d9a); } .rapide-hero.soir { background: linear-gradient(120deg, #6a3d9a, #2c4a6b 60%, #1f2a30); } .rapide-hero.nuit { background: linear-gradient(120deg, #1f2a30, #0b2b4a 60%, #6a3d9a); } .rapide-hero.prof { background: linear-gradient(120deg, #1d5b22, #0F7B7A 60%, #2c4a6b); }
.rapide-hero-texte { position: relative; z-index: 1; max-width: 640px; } .rapide-hero h2 { margin: 4px 0 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } .rapide-hero p { margin: 0; opacity: 0.92; }
.rapide-hero-icone { display: inline-block; font-size: 2rem; filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7)); animation: hero-flotte 4s ease-in-out infinite; }
.rapide-hero-orbes span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05) 60%, transparent 70%); filter: blur(1px); opacity: 0.55; animation: orbe 9s ease-in-out infinite; }
.rapide-hero-orbes span:nth-child(1) { width: 140px; height: 140px; right: 8%; top: -30px; } .rapide-hero-orbes span:nth-child(2) { width: 90px; height: 90px; right: 26%; bottom: -20px; animation-delay: -3s; } .rapide-hero-orbes span:nth-child(3) { width: 60px; height: 60px; right: 40%; top: 20px; animation-delay: -6s; }
@keyframes hero-derive { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes hero-flotte { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } } @keyframes orbe { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-14px, 10px) scale(1.12); } }
.rapide-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--esp-3); } .rapide-sommaire a { padding: 8px 14px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; transition: transform 0.15s, box-shadow 0.15s; } .rapide-sommaire a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); } .rapide-sommaire-prof { border-color: #1d5b22 !important; color: #1d5b22; }
.rapide-section { margin: 0 0 var(--esp-4); padding: 18px 20px; background: var(--surface); border: 1px solid var(--trait); border-radius: 14px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); }
.rapide-section h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .rapide-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--principal); color: #fff; font-size: 0.95rem; box-shadow: 0 0 0 4px rgba(15, 123, 122, 0.18); }
.rapide-table input, .rapide-table select { width: 100%; min-width: 110px; } .rapide-table .rl-qte { min-width: 60px; width: 64px; }
.rapide-commandes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.rapide-commande { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); transition: transform 0.2s, box-shadow 0.2s; transform-style: preserve-3d; } .rapide-commande:hover { transform: perspective(700px) rotateX(2deg) translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
.rapide-commande > button { grid-column: 1 / -1; justify-self: start; }
.rapide-commande-visuels { display: flex; gap: 4px; } .rapide-mini { display: block; width: 52px; height: 40px; overflow: hidden; border-radius: 6px; border: 1px solid var(--trait); background: var(--surface-2); } .rapide-mini svg, .rapide-mini img { width: 100%; height: 100%; object-fit: cover; }
.rapide-reco .produit-carte { transition: transform 0.25s, box-shadow 0.25s; } .rapide-reco .produit-carte:hover { transform: perspective(800px) rotateY(-3deg) translateY(-4px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14); }
.interets-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .interet { padding: 6px 12px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); cursor: pointer; transition: all 0.15s; } .interet input { margin-right: 4px; } .interet.choisi { background: var(--principal); color: #fff; border-color: var(--principal); box-shadow: 0 0 0 4px rgba(15, 123, 122, 0.18); }
.prof-ressources li { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .rapide-hero, .rapide-hero-icone, .rapide-hero-orbes span { animation: none; } .rapide-commande:hover, .rapide-reco .produit-carte:hover, .rapide-sommaire a:hover { transform: none; } }

/* ---------- 2.18.0 : listes d'envies, espaces thématiques, stock de pièces, recherche avancée ---------- */
.envie-bouton { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--trait-fort); background: rgba(255, 255, 255, 0.92); color: #b3261e; font-size: 1.1rem; line-height: 1; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.envie-bouton:hover, .envie-bouton:focus-visible { transform: scale(1.12); box-shadow: 0 4px 12px rgba(179, 38, 30, 0.3); } .envie-bouton.actif { background: #b3261e; color: #fff; border-color: #b3261e; }
.envie-bouton-fiche { position: static; width: auto; height: auto; border-radius: 999px; padding: 10px 16px; font-size: 1rem; background: var(--surface); }
.envie-choix { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(28, 28, 28, 0.45); }
.envie-choix-corps { width: min(520px, 100%); padding: 18px 20px; background: var(--surface); border-radius: 14px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); } .envie-choix-corps h3 { margin: 0 0 6px; }
.envie-listes { display: grid; gap: 4px; margin-bottom: 10px; } .envie-liste { display: block; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; cursor: pointer; } .envie-liste:hover { background: var(--surface-2); }
.envie-creer { margin-bottom: var(--esp-3); }
.envie-carte { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--surface); } .envie-carte-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .envie-carte-tete h4 { margin: 0; } .envie-renommer { max-width: 260px; }
.espace-sous-nav a[aria-current="page"] { background: var(--principal); color: #fff; border-color: var(--principal); }
.rapide-hero.medical { background: linear-gradient(120deg, #b3261e, #6a3d9a 55%, #1f2a30); }
.recherche-avancee { margin-bottom: 12px; } .recherche-avancee > summary { list-style: none; display: inline-flex; cursor: pointer; } .recherche-avancee > summary::-webkit-details-marker { display: none; } .recherche-avancee[open] > summary { margin-bottom: 10px; }
.stock-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stock-kpi { padding: 10px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); text-align: center; cursor: pointer; transition: transform 0.15s; } .stock-kpi:hover { transform: translateY(-2px); } .stock-kpi strong { display: block; font-size: 1.4rem; } .stock-kpi span { font-size: 0.78rem; color: var(--encre-2); } .stock-kpi.actif { outline: 2px solid var(--principal); }
.stock-kpi.statut-en_stock strong { color: #1d5b22; } .stock-kpi.statut-cassee_fragile strong { color: var(--alerte); } .stock-kpi.statut-en_impression strong { color: var(--principal); } .stock-kpi.statut-commandee strong { color: var(--accent); } .stock-kpi.statut-perdue strong { color: var(--encre-2); }
.stock-ajout { margin: 10px 0 14px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.stock-table input, .stock-table select { width: 100%; min-width: 90px; } .stock-table .st-qte { width: 64px; min-width: 64px; }
.stock-table tr.statut-cassee_fragile th { color: var(--alerte); } .stock-table tr.statut-perdue { opacity: 0.6; }

/* ---------- 2.19.0 : stock de pièces v2 (tableau de bord, Kanban, sites, échéances, fiches) ---------- */
.stock-intro { margin: 0 0 14px; padding: 12px 16px; background: #f0f7f1; border-left: 5px solid #1d5b22; border-radius: 8px; line-height: 1.5; }
.stock-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stock-kpi { padding: 10px 8px; border: 1px solid var(--trait); border-top: 4px solid var(--couleur, var(--trait-fort)); border-radius: 10px; background: var(--surface); text-align: center; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .stock-kpi:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1); } .stock-kpi strong { display: block; font-size: 1.5rem; color: var(--couleur, var(--encre)); } .stock-kpi span { font-size: 0.75rem; color: var(--encre-2); } .stock-kpi.actif { outline: 2px solid var(--principal); } .stock-kpi-total { cursor: default; border-top-color: var(--encre); }
.stock-vues a[aria-current="page"] { background: var(--principal); color: #fff; border-color: var(--principal); }
.stock-actions { margin: 6px 0 10px; } .stock-form { padding: 12px 14px; margin: 8px 0 14px; background: var(--surface-2); border-radius: 10px; }
.stock-bord-graphes { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.4fr); gap: 16px; margin-bottom: 14px; } .stock-graphe { padding: 12px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .stock-graphe h4 { width: 100%; margin: 0 0 6px; }
.stock-donut { width: 150px; height: 150px; flex: 0 0 150px; } .stock-barres { width: 100%; height: auto; }
.stock-legende { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: grid; gap: 3px; } .stock-puce { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.stock-bord-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.stock-bloc { padding: 12px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; } .stock-bloc h4 { margin: 0 0 8px; }
.stock-alertes { list-style: none; margin: 0; padding: 0; } .stock-alertes li { padding: 6px 10px; margin-bottom: 4px; border-left: 4px solid var(--accent); background: #fff8e1; border-radius: 6px; font-size: 0.9rem; } .stock-alertes li.alerte { border-left-color: var(--alerte); background: #fdecea; } .stock-alertes.petites li { font-size: 0.8rem; padding: 4px 8px; }
.stock-suggestions { margin: 0; padding-left: 18px; font-size: 0.9rem; } .stock-suggestions li { margin-bottom: 4px; } .stock-top { margin: 0; padding-left: 18px; font-size: 0.9rem; }
.stock-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: start; }
.stock-colonne { background: var(--surface-2); border: 1px solid var(--trait); border-top: 4px solid var(--couleur); border-radius: 10px; padding: 8px; min-height: 160px; } .stock-colonne > h4 { margin: 0 0 8px; font-size: 0.85rem; } .stock-colonne.survol { outline: 3px dashed var(--principal); outline-offset: -3px; background: #e6f4f4; } .stock-colonne-liste { display: grid; gap: 6px; }
.stock-carte { background: var(--surface); border: 1px solid var(--trait-fort); border-radius: 8px; padding: 8px; cursor: grab; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .stock-carte.en-vol { opacity: 0.5; } .stock-carte-tete { display: flex; justify-content: space-between; gap: 6px; } .stock-qte { color: var(--encre-2); font-size: 0.85rem; } .stock-carte-corps { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; } .stock-ouvrir { font-size: 0.8rem; }
.stock-etiquette { display: inline-block; padding: 1px 8px; border: 1px solid var(--trait-fort); border-radius: 999px; font-size: 0.75rem; background: var(--surface); } .stock-etiquette.retard { border-color: var(--alerte); color: var(--alerte); background: #fdecea; }
.stock-sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.stock-site { padding: 12px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; transition: transform 0.2s, box-shadow 0.2s; } .stock-site:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); } .stock-site.alerte { border-color: var(--alerte); } .stock-site.sans-site { border-style: dashed; } .stock-site h4 { margin: 0 0 4px; } .stock-site-total { margin: 0 0 6px; } .stock-site-repartition { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .stock-site-liste { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; }
.stock-semaine { margin-bottom: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; } .stock-semaine.passee { border-color: var(--alerte); } .stock-semaine h4 { margin: 0 0 6px; } .stock-semaine ul { margin: 0; padding-left: 18px; } .stock-semaine li.retard { color: var(--alerte); }
.stock-fiche { max-height: 90vh; overflow: auto; width: min(760px, 100%); } .stock-fiche-fond { cursor: default; } .stock-journal { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; } .stock-journal li { padding: 4px 0; border-bottom: 1px dashed var(--trait); } .stock-journal small { color: var(--encre-2); margin-right: 6px; }
@media (max-width: 760px) { .stock-bord-graphes { grid-template-columns: 1fr; } }
/* ---------- 2.20.0 / 2.21.0 : espace client en quatre groupes (charte du site : angles vifs, bleu-vert, ardoise, ambre, encre), « Commander à nouveau », Le Cercle ---------- */
:root { --principal: var(--accent); --or: var(--ticket); --or-clair: #FCE7B3; --or-sombre: #B8860B; --nuit: #161D26; --nuit-2: #0B1017; }   /* --principal était utilisé à 40 endroits sans être défini */
#vue-compte.connecte > .intro { display: none; }   /* l'invitation à créer un compte n'a plus lieu d'être une fois connecté */
/* Les sections de l'espace client reprennent la forme des cartes du catalogue : angles vifs, trait fin */
.compte .rapide-section, .compte .rapide-hero, .compte .rapide-commande, .compte .cercle-acces li, .compte .envie-carte, .compte .stock-bloc, .compte .stock-site, .compte .stock-semaine, .compte .stock-kpi, .compte .stock-colonne { border-radius: var(--rayon); }
.compte .rapide-section { box-shadow: none; }
.compte .rapide-sommaire a, .compte .interet, .compte .recherche-avancee > summary { border-radius: var(--rayon); }
.compte .rapide-sommaire a:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.compte .espace-sous-nav a[aria-current="page"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.compte .rapide-num { border-radius: var(--rayon); background: var(--encre); color: var(--fond); box-shadow: none; }
.compte-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: var(--esp-2) 0 var(--esp-3); }   /* trois ou quatre groupes selon les accès : la rangée est toujours pleine */
.compte-groupe { --g: var(--accent); --g-texte: var(--accent-texte); position: relative; padding: 12px 14px 10px; border: 1px solid var(--trait); border-top: 3px solid var(--g); border-radius: var(--rayon); background: var(--surface); transition: border-color 0.15s; }
.compte-groupe.actif { border-color: var(--trait-fort); border-top-color: var(--g); }
.compte-groupe-titre { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-2); }
.compte-groupe-icone { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--rayon); background: var(--g); color: var(--g-texte); font-size: 0.9rem; }
.compte-groupe-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.compte-lien { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 10px; border-left: 3px solid transparent; border-radius: var(--rayon); text-decoration: none; color: var(--encre); font-weight: 500; transition: background 0.15s, border-color 0.15s; }
.compte-lien:hover { background: var(--surface-2); border-left-color: var(--g); }
.compte-lien[aria-current="page"] { background: var(--encre); color: var(--fond); border-left-color: var(--g); }
.compte-lien .compteur { display: inline-block; min-width: 1.4em; padding: 0 0.35em; border-radius: var(--rayon); background: var(--ticket); color: var(--ticket-encre); font-size: 0.75rem; font-weight: 700; text-align: center; }
.compte-lien[aria-current="page"] .compteur { background: var(--fond); color: var(--encre); }
/* Chaque groupe garde une couleur de la charte : bleu-vert (commandes), ardoise (catalogue), ambre (aide), nuit et ambre (Le Cercle) */
.g-commandes { --g: var(--accent); }
.g-catalogue { --g: var(--encre-2); --g-texte: #fff; }
.g-aide { --g: var(--ticket); --g-texte: var(--ticket-encre); }
.g-privilege { --g: var(--or); --g-texte: var(--nuit); background: var(--nuit); border-color: var(--nuit); box-shadow: inset 0 0 0 1px rgba(246, 178, 51, 0.35); color: var(--or-clair); }
.g-privilege.actif { border-color: var(--or); }
.g-privilege .compte-groupe-titre { color: var(--or-clair); }
.g-privilege .compte-lien { color: #f4ecd6; } .g-privilege .compte-lien:hover { background: rgba(246, 178, 51, 0.14); }
.g-privilege .compte-lien[aria-current="page"] { background: var(--or); color: var(--nuit); border-left-color: var(--or-clair); }
.g-privilege .compte-lien[aria-current="page"] .compteur { background: var(--nuit); color: var(--or-clair); }
/* Commander à nouveau */
.relance-statut { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--rayon); background: var(--ok-fond); color: var(--ok); font-size: 0.75rem; font-weight: 600; vertical-align: middle; }
/* Mes informations : les deux questions */
.cpt-question { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: var(--rayon); }
.cpt-question legend { padding: 0 6px; font-weight: 600; }
.cpt-question .case { display: inline-flex; margin: 4px 18px 0 0; }
/* Le Cercle : nuit et ambre, sans effet d'annonce */
.rapide-hero.cercle { color: #f4ecd6; background: linear-gradient(120deg, var(--nuit-2), var(--nuit) 55%, #3a2a10); box-shadow: none; animation: none; }
.rapide-hero.cercle .rapide-hero-icone { color: var(--or); filter: drop-shadow(0 0 10px rgba(246, 178, 51, 0.6)); }
.rapide-hero.cercle .rapide-hero-orbes span { background: radial-gradient(circle at 30% 30%, rgba(252, 231, 179, 0.7), rgba(252, 231, 179, 0.05) 60%, transparent 70%); opacity: 0.4; }
.rapide-hero .cercle-mention { margin-top: 10px; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--or); }
.cercle-nav a[aria-current="page"] { background: var(--nuit); border-color: var(--or); color: var(--or-clair); }
.cercle-nav .compteur { display: inline-block; min-width: 1.4em; padding: 0 0.4em; border-radius: var(--rayon); background: var(--ticket); color: var(--ticket-encre); font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.cercle-section { border-color: var(--trait); }
.cercle-section .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }
.cercle-acces { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cercle-acces li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--trait); background: var(--surface); }
.cercle-acces li > div { min-width: 0; }
.cercle-picto { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--rayon); background: var(--nuit); color: var(--or-clair); font-size: 1.1rem; }
.cercle-echanges { list-style: none; margin: 0; padding: 0; } .cercle-echanges li { padding: 8px 0; border-bottom: 1px dashed var(--trait); }
/* Création de la carte : silhouette voilée à gauche, invitation à droite */
.cercle-creation { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.1fr); gap: 20px; align-items: center; background: linear-gradient(120deg, var(--surface), var(--surface-2)); }
.cercle-creation .carte-membre-scene { margin: 0; }
.cercle-creation-texte h3 { margin: 0 0 6px; font-size: 1.3rem; } .cercle-creation-texte p { margin: 0 0 14px; }
.carte-membre-voilee { filter: blur(2.5px) brightness(0.55) saturate(0.6); transform: rotateY(-12deg) rotateX(6deg); }
.carte-membre-voilee .carte-membre-reflet { opacity: 0.4; }
.bouton-grand { padding: 0.8rem 1.6rem; font-size: 1.05rem; }
.cercle-creation .bouton-principal { background: var(--nuit); border-color: var(--nuit); color: var(--or-clair); } .cercle-creation .bouton-principal:hover { background: var(--or); border-color: var(--or); color: var(--nuit); }
/* Carte de membre : recto */
.carte-membre-scene { perspective: 1000px; margin: var(--esp-3) auto; max-width: 28rem; }
.carte-membre { --mx: 30%; --my: 20%; position: relative; aspect-ratio: 1.586; border-radius: 12px; padding: 1.3rem 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; color: #f4ecd6; background: linear-gradient(135deg, #0b1017 0%, #161d26 45%, #2a2114 100%); border: 1px solid rgba(246, 178, 51, 0.55); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04); transform-style: preserve-3d; transition: transform 0.25s ease, box-shadow 0.25s; will-change: transform; }
.carte-membre::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(246, 178, 51, 0.22); border-radius: inherit; pointer-events: none; }   /* filet intérieur */
.carte-membre:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--or), 0 24px 50px rgba(0, 0, 0, 0.35); }
.carte-membre-guilloche { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background: repeating-radial-gradient(circle at 110% 120%, rgba(246, 178, 51, 0.16) 0 1px, transparent 1px 9px), repeating-radial-gradient(circle at -10% -20%, rgba(246, 178, 51, 0.12) 0 1px, transparent 1px 11px); }
.carte-membre-holo { position: absolute; left: 34%; right: 36%; top: 48%; height: 12%; pointer-events: none; opacity: 0.55; background: linear-gradient(100deg, transparent 0, rgba(246, 178, 51, 0.35) 20%, rgba(255, 255, 255, 0.5) 35%, rgba(61, 184, 181, 0.4) 50%, rgba(246, 178, 51, 0.35) 65%, transparent 100%); background-size: 200% 100%; background-position: calc(var(--mx, 30%) * 1) 0; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.carte-membre-reflet { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 35%, transparent 60%), linear-gradient(115deg, transparent 35%, rgba(252, 231, 179, 0.16) 48%, transparent 60%); mix-blend-mode: screen; }
.carte-membre-haut, .carte-membre-milieu, .carte-membre-bas { position: relative; z-index: 1; }
.carte-membre-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.carte-membre-marque { font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; color: var(--or-clair); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.carte-membre-titre { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(244, 236, 214, 0.75); }
.carte-membre-milieu { display: flex; align-items: center; gap: 14px; }
.carte-membre-puce { display: block; position: relative; width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #fce7b3, #c9962b 40%, #fce7b3 70%, #a8781c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 6px 0 -4px rgba(255, 255, 255, 0.4); }
.carte-membre-puce::before, .carte-membre-puce::after { content: ''; position: absolute; background: rgba(0, 0, 0, 0.28); } .carte-membre-puce::before { left: 0; right: 0; top: 50%; height: 1px; } .carte-membre-puce::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.carte-membre-initiales { font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; color: rgba(244, 236, 214, 0.35); }
.carte-membre-bas { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 0.85rem; }
.carte-membre-nom { grid-column: 1; grid-row: 1; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 12px rgba(252, 231, 179, 0.15); }
.carte-membre-profession { grid-column: 1; grid-row: 2; color: rgba(244, 236, 214, 0.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-membre-numero { grid-column: 2; grid-row: 1; align-self: end; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: var(--or-clair); }
.carte-membre-depuis { grid-column: 2; grid-row: 2; font-size: 0.78rem; text-align: right; color: rgba(244, 236, 214, 0.7); white-space: nowrap; }
.carte-membre-motif { position: absolute; right: -0.6rem; top: 50%; width: 7.5rem; height: 7.5rem; transform: translateY(-50%); color: var(--or); opacity: 0.16; pointer-events: none; }
/* Verso */
.carte-membre-verso { justify-content: flex-start; padding: 0; background: linear-gradient(135deg, #0b1017, #1a212b 55%, #221a0e); }
.carte-membre-verso .carte-membre-verso-corps { flex: 1; align-content: center; }
.carte-membre-verso-pied { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 8px; padding: 0 7% 5%; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(252, 231, 179, 0.7); }
.cercle-face .carte-membre-verso-pied { font-size: clamp(0.65rem, 1.4vw, 0.85rem); }
.carte-membre-bande { height: 17%; margin-top: 9%; background: linear-gradient(90deg, #05070a, #1c2028 40%, #05070a); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.carte-membre-verso-corps { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 6% 7%; }
.carte-membre-verso-titre { grid-column: 1 / -1; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--or-clair); }
.carte-membre-signature { grid-column: 1; display: flex; flex-direction: column; padding: 6px 10px; background: rgba(252, 231, 179, 0.92); color: #161d26; font-style: italic; font-size: 1rem; border-radius: 2px; }
.carte-membre-signature small { font-style: normal; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: #6b5a2a; }
.carte-membre-verso-numero { grid-column: 2; align-self: end; font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: 0.12em; color: var(--or-clair); }
.carte-membre-verso-mention { grid-column: 1 / -1; font-size: 0.72rem; color: rgba(244, 236, 214, 0.7); }
.carte-membre-verso-site { grid-column: 1 / -1; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--or); }
.carte-membre-motif.grand { width: 11rem; height: 11rem; right: -2rem; opacity: 0.1; }
@media (prefers-reduced-motion: reduce) { .carte-membre { transition: none; transform: none !important; } }
.reduire-animations .carte-membre { transition: none; transform: none !important; }
/* ---- Scène plein écran : la carte se révèle en trois dimensions ---- */
body.cercle-scene-ouverte { overflow: hidden; }
.cercle-scene { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 38%, #1c2634 0%, #0b1017 45%, #04060a 100%); color: #f4ecd6; opacity: 0; transition: opacity 0.5s ease; overscroll-behavior: contain; touch-action: none; }
.cercle-scene.visible { opacity: 1; }
.cercle-scene-fond { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cercle-scene-rayons { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; background: conic-gradient(from 0deg, transparent 0 8%, rgba(246, 178, 51, 0.06) 9% 10%, transparent 11% 27%, rgba(246, 178, 51, 0.05) 28% 29%, transparent 30% 52%, rgba(246, 178, 51, 0.06) 53% 54%, transparent 55% 76%, rgba(246, 178, 51, 0.05) 77% 78%, transparent 79%); animation: cercle-rayons 60s linear infinite; transition: opacity 1.5s; }
.cercle-scene.posee .cercle-scene-rayons { opacity: 1; }
.cercle-scene-halo { position: absolute; left: 50%; top: 42%; width: min(110vw, 1100px); height: min(110vw, 1100px); transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(246, 178, 51, 0.22), rgba(246, 178, 51, 0.06) 35%, transparent 62%); opacity: 0; transition: opacity 1.2s; animation: cercle-halo 6s ease-in-out infinite; }
.cercle-scene.posee .cercle-scene-halo { opacity: 1; }
.cercle-scene.eclat .cercle-scene-halo { animation: cercle-eclat 1.2s ease-out; }
.cercle-scene-corps { position: relative; z-index: 2; width: min(92vw, 760px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cercle-scene-avant { min-height: 1.4em; margin: 0; font-size: 0.85rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--or); opacity: 0.9; transition: opacity 0.6s; }
.cercle-scene.posee .cercle-scene-avant { opacity: 0; }
.cercle-scene-flotte { width: 100%; animation: cercle-flotte 7s ease-in-out infinite; }
.cercle-scene-carte { perspective: 1500px; width: 100%; cursor: grab; outline: none; }
.cercle-scene.en-main .cercle-scene-carte { cursor: grabbing; }
.cercle-scene-carte:focus-visible .cercle-scene-faces { box-shadow: 0 0 0 3px var(--or); }
.cercle-scene-faces { --angle: 0; position: relative; width: 100%; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform 0.35s ease-out; }
.cercle-scene.en-main .cercle-scene-faces { transition: none; }
.cercle-scene:not(.reduit) .cercle-scene-faces { animation: cercle-entree 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.cercle-scene.posee .cercle-scene-faces { animation: none; }
.cercle-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cercle-face.arriere { transform: rotateY(180deg); }
.cercle-face .carte-membre-scene { margin: 0; max-width: none; perspective: none; }
.cercle-face .carte-membre { height: 100%; transition: none; transform: none !important; border-radius: 18px; padding: 5% 5.5%; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(246, 178, 51, 0.5), 0 0 60px rgba(246, 178, 51, 0.12); }
.cercle-face .carte-membre-marque { font-size: clamp(0.9rem, 2.2vw, 1.3rem); } .cercle-face .carte-membre-titre { font-size: clamp(0.75rem, 1.8vw, 1.05rem); }
.cercle-face .carte-membre-puce { width: clamp(44px, 9vw, 74px); height: clamp(32px, 6.6vw, 54px); border-radius: 10px; } .cercle-face .carte-membre-initiales { font-size: clamp(1.6rem, 4.5vw, 3rem); }
.cercle-face .carte-membre-nom { font-size: clamp(1.1rem, 3vw, 1.9rem); } .cercle-face .carte-membre-profession, .cercle-face .carte-membre-depuis, .cercle-face .carte-membre-bas { font-size: clamp(0.8rem, 1.7vw, 1.05rem); }
.cercle-face .carte-membre-numero { font-size: clamp(0.9rem, 2.2vw, 1.4rem); } .cercle-face .carte-membre-motif { width: 34%; height: auto; aspect-ratio: 1; }
.cercle-face .carte-membre-holo { filter: hue-rotate(calc(var(--angle, 0) * 1deg)); }
.cercle-face .carte-membre-verso-corps { padding: 5% 7%; } .cercle-face .carte-membre-signature { font-size: clamp(1rem, 2.6vw, 1.6rem); padding: 8px 14px; } .cercle-face .carte-membre-verso-numero { font-size: clamp(0.9rem, 2.2vw, 1.4rem); } .cercle-face .carte-membre-verso-mention, .cercle-face .carte-membre-verso-site, .cercle-face .carte-membre-verso-titre { font-size: clamp(0.72rem, 1.6vw, 0.95rem); }
.cercle-scene-texte { text-align: center; opacity: 0; transform: translateY(12px); transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; }
.cercle-scene.posee .cercle-scene-texte { opacity: 1; transform: none; }
.cercle-scene-titre { margin: 0; font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 600; letter-spacing: 0.02em; color: #fff; text-shadow: 0 2px 20px rgba(246, 178, 51, 0.35); }
.cercle-scene-titre::before { content: ''; display: block; width: 64px; height: 1px; margin: 0 auto 12px; background: linear-gradient(90deg, transparent, var(--or), transparent); }
.cercle-scene-sous { margin: 6px 0 0; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or); }
.cercle-scene-aide { margin: 0; font-size: 0.8rem; color: rgba(244, 236, 214, 0.6); opacity: 0; transition: opacity 0.9s ease 0.8s; }
.cercle-scene.posee .cercle-scene-aide { opacity: 1; }
.cercle-scene-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.9s ease 0.6s; }
.cercle-scene.posee .cercle-scene-actions { opacity: 1; }
.cercle-scene-actions .bouton { border-color: rgba(252, 231, 179, 0.6); background: transparent; color: var(--or-clair); }
.cercle-scene-actions .bouton:hover { background: rgba(246, 178, 51, 0.12); }
.cercle-scene-actions .bouton-principal { background: var(--or); border-color: var(--or); color: var(--nuit); }
.cercle-scene-actions .bouton-principal:hover { background: var(--or-clair); border-color: var(--or-clair); }
.cercle-scene.reduit .cercle-scene-flotte, .cercle-scene.reduit .cercle-scene-rayons, .cercle-scene.reduit .cercle-scene-halo { animation: none; }
@keyframes cercle-entree { 0% { transform: translateZ(-1400px) translateY(90px) rotateY(-560deg) rotateX(40deg); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateZ(0) translateY(0) rotateY(0) rotateX(0); opacity: 1; } }
@keyframes cercle-flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(0.4deg); } }
@keyframes cercle-halo { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes cercle-eclat { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.9; } }
@keyframes cercle-rayons { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cercle-scene-flotte, .cercle-scene-rayons, .cercle-scene-halo { animation: none !important; } .cercle-scene-faces { animation: none !important; } }
@media (max-width: 600px) { .compte-nav { grid-template-columns: 1fr; gap: 8px; } .compte-groupe { padding: 10px 12px 8px; } .compte-groupe-liens { display: flex; flex-wrap: wrap; } .compte-lien { padding: 6px 10px; } .carte-membre { padding: 1rem 1.1rem; } .carte-membre-bas { grid-template-columns: 1fr; } .carte-membre-numero, .carte-membre-depuis { grid-column: 1; grid-row: auto; text-align: left; } .cercle-acces li { grid-template-columns: 36px minmax(0, 1fr); } .cercle-acces li > a { grid-column: 2; justify-self: start; } .cercle-creation { grid-template-columns: 1fr; } .cercle-scene-corps { gap: 12px; } .cercle-face .carte-membre { border-radius: 12px; } .cercle-face .carte-membre-bas { grid-template-columns: minmax(0, 1fr) auto; } .cercle-face .carte-membre-numero, .cercle-face .carte-membre-depuis { grid-column: 2; text-align: right; } .cercle-face .carte-membre-numero { grid-row: 1; } .cercle-face .carte-membre-depuis { grid-row: 2; white-space: normal; max-width: 9rem; } .cercle-face .carte-membre-nom { white-space: normal; line-height: 1.1; font-size: clamp(0.95rem, 4.2vw, 1.2rem); } }

/* ---------- 2.22.0 : bandeau de panne lisible, message de bienvenue, sections de formulaire ---------- */
.bandeau-panne { position: sticky; top: 0; z-index: 130; background: var(--alerte-fond); color: var(--encre); border-bottom: 4px solid var(--alerte); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.bandeau-panne-corps { max-width: var(--largeur); margin: 0 auto; padding: 14px 20px; }
.bandeau-panne-titre { margin: 0 0 4px; font-size: 1.15rem; font-weight: 700; color: var(--alerte); }
.bandeau-panne-texte { margin: 0 0 8px; font-size: 1rem; line-height: 1.5; max-width: 70ch; }
.bandeau-panne-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.bandeau-panne-actions .bouton { background: var(--surface); }
.bandeau-panne-detail { margin-top: 6px; font-size: 0.85rem; } .bandeau-panne-detail summary { cursor: pointer; color: var(--encre-2); } .bandeau-panne-detail code { display: block; margin-top: 4px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); white-space: pre-wrap; }
.compte-bienvenue { margin: 0 0 var(--esp-3); padding: 12px 16px; border: 1px solid var(--trait); border-left: 4px solid var(--accent); border-radius: var(--rayon); background: var(--info-fond); }
.compte-bienvenue-titre { margin: 0 0 6px; font-weight: 600; }
.compte-bienvenue-etapes { margin: 0 0 8px; padding-left: 22px; line-height: 1.5; } .compte-bienvenue-etapes li { margin-bottom: 2px; }
.compte-bienvenue-ia { margin: 0 0 8px; font-size: 0.85rem; } .compte-bienvenue-ia summary { cursor: pointer; color: var(--encre-2); } .compte-bienvenue-ia p { margin: 6px 0 0; line-height: 1.5; } .compte-bienvenue-ia code { font-size: 0.8rem; }
.section-formulaire { margin: 0 0 14px; padding: 10px 14px 6px; border: 1px solid var(--trait); border-radius: var(--rayon); min-width: 0; }
.section-formulaire > legend { padding: 0 6px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); }
.section-formulaire .cpt-question { margin-bottom: 8px; }
.acces-test-resultat { margin-top: 10px; } .acces-test-resultat textarea { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }

/* ---------- 2.23.0 : Membre Premium — balayage lumineux, lettres métalliques, bande irisée ---------- */
.carte-membre-balayage { position: absolute; inset: -40% -60%; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 244, 214, 0.28) 48%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 244, 214, 0.28) 52%, transparent 60%); mix-blend-mode: screen; transform: translateX(-40%); }
.cercle-face .carte-membre-balayage, .carte-membre:hover .carte-membre-balayage { animation: carte-balayage 7s ease-in-out infinite; }
@keyframes carte-balayage { 0%, 55% { opacity: 0; transform: translateX(-45%); } 62% { opacity: 1; } 78%, 100% { opacity: 0; transform: translateX(45%); } }
.cercle-face .carte-membre-nom { background: linear-gradient(180deg, #fff9e6 0%, #f6d98a 45%, #b8860b 55%, #fce7b3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)); }
.cercle-face .carte-membre-marque { background: linear-gradient(180deg, #fff9e6, #f6b233 60%, #c98f0e); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.cercle-face .carte-membre-holo { background: linear-gradient(100deg, transparent 0, rgba(246, 178, 51, 0.5) 15%, rgba(255, 120, 120, 0.45) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(61, 184, 181, 0.5) 55%, rgba(140, 120, 255, 0.45) 70%, rgba(246, 178, 51, 0.5) 85%, transparent 100%); background-size: 220% 100%; opacity: 0.7; }
.cercle-scene-titre { background: linear-gradient(180deg, #ffffff 0%, #fce7b3 55%, #f6b233 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 18px rgba(246, 178, 51, 0.35)); }
@media (prefers-reduced-motion: reduce) { .carte-membre-balayage { animation: none !important; } }
.reduire-animations .carte-membre-balayage { animation: none !important; }

/* ---------- 2.24.0 : parcours secteur → catalogue privé → carte, forge de la carte, finitions et motifs, zones de couleur personnalisées ---------- */
/* Parcours d'arrivée (en tête de l'espace tant que le secteur n'est pas renseigné) et étapes */
.compte-parcours { margin: 0 0 var(--esp-3); padding: 16px 18px 12px; border: 1px solid var(--trait); border-left: 4px solid var(--accent); border-radius: var(--rayon); background: var(--surface); }
.compte-parcours-entete h2 { margin: 0 0 4px; font-size: 1.25rem; } .compte-parcours-entete p { margin: 0 0 12px; color: var(--encre-2); }
.parcours-etapes { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; color: var(--encre-2); }
.parcours-etapes li { display: inline-flex; align-items: center; gap: 8px; }
.parcours-etapes li span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--trait-fort); font-size: 0.78rem; font-weight: 700; }
.parcours-etapes .etape-active { color: var(--encre); font-weight: 600; } .parcours-etapes .etape-active span { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.parcours-etapes .etape-faite span { background: var(--ok-fond); color: var(--ok); border-color: var(--ok); }
.parcours-etapes-compact { margin-bottom: 10px; }
.parcours-plus-tard { margin: 10px 0 0; }
/* Choix du secteur : tuiles, métiers, case du catalogue privé */
.secteur-tuiles-bloc { border: 0; margin: 0 0 10px; padding: 0; } .secteur-tuiles-bloc > legend { padding: 0; margin: 0 0 8px; font-weight: 600; }
.secteur-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; }
.secteur-tuile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 10px 42px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.secteur-tuile:hover { border-color: var(--trait-fort); background: var(--surface-2); }
.secteur-tuile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secteur-tuile:focus-within { box-shadow: 0 0 0 3px var(--accent-fond, rgba(15, 123, 122, 0.25)); }
.secteur-tuile.choisie { border-color: var(--encre); background: var(--encre); color: var(--fond); }
.secteur-tuile.choisie small { color: rgba(255, 255, 255, 0.75); }
.secteur-icone { position: absolute; left: 10px; top: 10px; font-size: 1.3rem; line-height: 1; }
.secteur-nom { font-weight: 600; line-height: 1.2; } .secteur-tuile small { font-size: 0.75rem; color: var(--encre-2); line-height: 1.25; }
.secteur-suite { padding: 12px 14px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); background: var(--surface-2); }
.secteur-metiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.secteur-metier { padding: 4px 10px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); font: inherit; font-size: 0.85rem; color: var(--encre); cursor: pointer; }
.secteur-metier:hover { border-color: var(--trait-fort); } .secteur-metier.choisi { background: var(--encre); color: var(--fond); border-color: var(--encre); }
.secteur-prive { margin-top: 12px; padding: 12px 14px; border-radius: var(--rayon); background: var(--nuit); color: #f4ecd6; box-shadow: inset 0 0 0 1px rgba(246, 178, 51, 0.4); }
.secteur-prive .case-prive { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.secteur-prive .case-prive input { margin-top: 4px; accent-color: var(--or); } .secteur-prive strong { color: var(--or-clair); } .secteur-prive small { color: rgba(244, 236, 214, 0.8); }
.secteur-suite .actions { margin: 12px 0 0; }
/* Catalogue privé : message d'ouverture (juste après la carte) */
.cercle-ouverture { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 var(--esp-2); padding: 14px 16px; border-radius: var(--rayon); background: var(--nuit); color: #f4ecd6; box-shadow: inset 0 0 0 1px rgba(246, 178, 51, 0.5); animation: cercle-ouverture-entree 0.7s ease both; }
.cercle-ouverture strong { color: var(--or-clair); } .cercle-ouverture a { color: var(--or); }
/* 2.35 : encart « Ma Petite Impression » (page à part des pièces gratuites) dans le catalogue privé, et son lien dans le menu de l'espace client */
.cercle-mpi { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0 var(--esp-2); padding: 14px 16px; border-radius: var(--rayon); background: #fbf4ea; color: #2b2118; border: 2px dashed #b5532b; }
.cercle-mpi small { color: #6f5c4b; }
.cercle-mpi .bouton-principal { background: #b5532b; border-color: #b5532b; color: #fff; white-space: nowrap; }
.compte-lien-externe { justify-content: flex-start; color: #8f3f1f; font-weight: 600; }
.compte-lien-externe .compte-lien-fleche { margin-left: auto; opacity: 0.7; }
.cercle-ouverture-picto { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--rayon); background: var(--or); color: var(--nuit); font-size: 1.2rem; }
@keyframes cercle-ouverture-entree { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Personnalisation de la carte : finitions et motifs */
.carte-finitions, .carte-choix-motifs-bloc { border: 0; margin: 0 0 12px; padding: 0; } .carte-finitions > legend, .carte-choix-motifs-bloc > legend { padding: 0; margin: 0 0 8px; font-weight: 600; }
.carte-finitions-choix, .carte-choix-motifs { display: flex; flex-wrap: wrap; gap: 8px; }
.carte-finition, .carte-choix-motif { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); cursor: pointer; font-size: 0.9rem; }
.carte-finition input, .carte-choix-motif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.carte-finition:focus-within, .carte-choix-motif:focus-within { box-shadow: 0 0 0 3px rgba(15, 123, 122, 0.25); }
.carte-finition.choisie, .carte-choix-motif.choisi { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); }
.carte-finition-pastille { display: inline-block; width: 34px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, var(--fond) 0 55%, var(--metal) 55% 62%, var(--fond) 62%); border: 1px solid var(--metal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.carte-choix-motif-apercu { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 4px; background: var(--nuit); color: var(--or); }
.carte-choix-motif-apercu .carte-membre-motif { position: static; width: 26px; height: 26px; transform: none; opacity: 0.9; }
.carte-choix-motif-vide { color: rgba(252, 231, 179, 0.5); }
/* Finitions de la carte : variables locales, la carte d'origine (nuit et or) garde ses règles */
.carte-membre[class*="finition-"]:not(.finition-nuit-or) { background: var(--cf-fond); color: var(--cf-texte); border-color: var(--cf-bord); --or: var(--cf-1); --or-clair: var(--cf-2); --or-sombre: var(--cf-3); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or)::after { border-color: var(--cf-bord-2); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-guilloche { background: repeating-radial-gradient(circle at 110% 120%, var(--cf-guill) 0 1px, transparent 1px 9px), repeating-radial-gradient(circle at -10% -20%, var(--cf-guill) 0 1px, transparent 1px 11px); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-puce { background: linear-gradient(135deg, var(--cf-2), var(--cf-1) 40%, var(--cf-2) 70%, var(--cf-3)); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-titre, .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-profession, .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-depuis, .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-verso-mention, .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-initiales { color: var(--cf-texte-2); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-nom { text-shadow: var(--cf-ombre); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-signature { background: var(--cf-2); color: var(--cf-inverse); } .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-signature small { color: var(--cf-inverse); opacity: 0.7; }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-verso-pied { color: var(--cf-texte-2); }
.carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-holo { opacity: 0.45; }
.cercle-face .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-nom, .cercle-face .carte-membre[class*="finition-"]:not(.finition-nuit-or) .carte-membre-marque { background: linear-gradient(180deg, var(--cf-brillant) 0%, var(--cf-2) 45%, var(--cf-3) 55%, var(--cf-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.carte-membre.finition-noir-argent { --cf-1: #c9ced6; --cf-2: #f0f2f5; --cf-3: #7c848f; --cf-brillant: #ffffff; --cf-fond: linear-gradient(135deg, #040507 0%, #14171c 45%, #23272e 100%); --cf-texte: #eef0f3; --cf-texte-2: rgba(238, 240, 243, 0.72); --cf-bord: rgba(201, 206, 214, 0.6); --cf-bord-2: rgba(201, 206, 214, 0.22); --cf-guill: rgba(201, 206, 214, 0.14); --cf-inverse: #14171c; --cf-ombre: 0 1px 0 rgba(0, 0, 0, 0.7); }
.carte-membre.finition-marine-cuivre { --cf-1: #d98c4a; --cf-2: #f7c9a3; --cf-3: #8a4f1f; --cf-brillant: #fff3e8; --cf-fond: linear-gradient(135deg, #061225 0%, #0d1f3f 50%, #2b1d12 100%); --cf-texte: #f4ecd6; --cf-texte-2: rgba(244, 236, 214, 0.72); --cf-bord: rgba(217, 140, 74, 0.6); --cf-bord-2: rgba(217, 140, 74, 0.22); --cf-guill: rgba(217, 140, 74, 0.14); --cf-inverse: #0d1f3f; --cf-ombre: 0 1px 0 rgba(0, 0, 0, 0.6); }
.carte-membre.finition-ivoire-or { --cf-1: #b8860b; --cf-2: #d9a323; --cf-3: #7a5a08; --cf-brillant: #fff1c4; --cf-fond: linear-gradient(135deg, #fbf6e8 0%, #f1e6cc 55%, #e6d5ad 100%); --cf-texte: #2a2314; --cf-texte-2: rgba(42, 35, 20, 0.7); --cf-bord: rgba(184, 134, 11, 0.7); --cf-bord-2: rgba(184, 134, 11, 0.3); --cf-guill: rgba(184, 134, 11, 0.16); --cf-inverse: #2a2314; --cf-ombre: 0 1px 0 rgba(255, 255, 255, 0.6); }
.carte-membre.finition-ivoire-or .carte-membre-bande { background: linear-gradient(90deg, #4a3a14, #7a5a08 40%, #4a3a14); } .carte-membre.finition-ivoire-or .carte-membre-reflet { mix-blend-mode: soft-light; }
.carte-membre.finition-emeraude-or { --cf-1: #f6b233; --cf-2: #fce7b3; --cf-3: #b8860b; --cf-brillant: #fff9e6; --cf-fond: linear-gradient(135deg, #03110d 0%, #0b2a20 50%, #23331a 100%); --cf-texte: #f4ecd6; --cf-texte-2: rgba(244, 236, 214, 0.75); --cf-bord: rgba(246, 178, 51, 0.55); --cf-bord-2: rgba(246, 178, 51, 0.22); --cf-guill: rgba(246, 178, 51, 0.14); --cf-inverse: #0b2a20; --cf-ombre: 0 1px 0 rgba(0, 0, 0, 0.6); }
.carte-membre.finition-bordeaux-or { --cf-1: #f6b233; --cf-2: #fce7b3; --cf-3: #b8860b; --cf-brillant: #fff9e6; --cf-fond: linear-gradient(135deg, #1d0608 0%, #4a1016 50%, #3a2214 100%); --cf-texte: #f4ecd6; --cf-texte-2: rgba(244, 236, 214, 0.75); --cf-bord: rgba(246, 178, 51, 0.55); --cf-bord-2: rgba(246, 178, 51, 0.22); --cf-guill: rgba(246, 178, 51, 0.14); --cf-inverse: #4a1016; --cf-ombre: 0 1px 0 rgba(0, 0, 0, 0.6); }
/* La forge : deux feuilles côte à côte, le marteau, le plaquage or, la gravure, l'assemblage */
.cercle-scene.forgee .cercle-scene-faces { animation: none; }
.cercle-scene-carte { position: relative; }
.cercle-scene.forgee .cercle-face { transition: transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.2s ease, filter 1.2s ease; }
.cercle-scene.forgee .cercle-face.avant { transform: translateX(0) scale(1) rotateY(0deg); }   /* mêmes fonctions avant / après : l'assemblage s'interpole proprement */
.cercle-scene.forgee .cercle-face.arriere { transform: translateX(0) scale(1) rotateY(180deg); }
.cercle-scene.forge .cercle-face.avant { transform: translateX(-31%) scale(0.56) rotateY(0deg); }
.cercle-scene.forge .cercle-face.arriere { transform: translateX(31%) scale(0.56) rotateY(0deg); }
.cercle-scene.forge:not(.feuilles) .cercle-face.avant { transform: translateX(-31%) scale(0.5) rotateY(0deg) translateY(60%); opacity: 0; filter: blur(8px); }
.cercle-scene.forge:not(.feuilles) .cercle-face.arriere { transform: translateX(31%) scale(0.5) rotateY(0deg) translateY(60%); opacity: 0; filter: blur(8px); transition-delay: 0.35s; }
.cercle-scene.forgee.sans-transition *, .cercle-scene.forgee.sans-transition .cercle-face { transition: none !important; animation: none !important; }
.forge-etabli { position: absolute; left: -14%; right: -14%; top: 79.5%; height: 22%; border-top: 3px solid rgba(255, 255, 255, 0.18); border-radius: 3px; background: linear-gradient(180deg, #3a414a 0%, #1a1f26 18%, #0b0e12 55%, #04060a 100%); box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.65), inset 0 6px 12px rgba(255, 255, 255, 0.05); opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.forge-etabli::after { content: ''; position: absolute; left: 6%; right: 6%; top: 100%; height: 40px; background: radial-gradient(ellipse at 50% 0, rgba(0, 0, 0, 0.7), transparent 70%); }
.cercle-scene.feuilles .forge-etabli { opacity: 1; } .cercle-scene.assemblage .forge-etabli { opacity: 0; transition-duration: 0.6s; }
.forge-metal { position: absolute; inset: 0; border-radius: 3px; background: repeating-linear-gradient(95deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px), linear-gradient(135deg, #5c6470 0%, #9aa3ad 22%, #6b737e 40%, #b9c1c9 58%, #737b86 78%, #4d545e 100%); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: border-radius 0.35s ease, filter 0.35s ease; }
.forge-metal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), rgba(255, 190, 90, 0.95), rgba(255, 120, 30, 0.5) 12%, transparent 32%); opacity: 0; mix-blend-mode: screen; }
.forge-metal::after { content: ''; position: absolute; inset: 7px; border-radius: inherit; border: 1px solid rgba(255, 255, 255, 0.35); opacity: 0; transition: opacity 0.4s; }
.cercle-face.coup-1 .forge-metal { filter: brightness(1.08); } .cercle-face.coup-2 .forge-metal { border-radius: 18px; } .cercle-face.coup-3 .forge-metal::after { opacity: 1; }
.cercle-face.choc { animation: forge-choc 0.42s ease-out; } .cercle-face.choc .forge-metal::before { animation: forge-eclair 0.55s ease-out; }
.cercle-scene.secousse .cercle-scene-corps { animation: forge-secousse 0.36s ease-out; }
.cercle-scene.forge .cercle-face .carte-membre { clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%)); }
.cercle-scene.forge .carte-membre-holo.a-graver, .cercle-scene.forge .carte-membre-reflet { opacity: 0; }   /* l'hologramme est posé en dernier, le reflet revient une fois la carte posée */
.cercle-scene.forge .carte-membre-holo.a-graver.grave { animation: forge-gravure 0.6s ease-out forwards; }
.cercle-scene.forge .cercle-face.dore .carte-membre { clip-path: circle(165% at var(--ix, 50%) var(--iy, 50%)); transition: clip-path 1.7s cubic-bezier(0.3, 0.7, 0.3, 1); }
.cercle-scene.assemblage .cercle-face .carte-membre, .cercle-scene.posee .cercle-face .carte-membre { clip-path: none; }
.cercle-scene.posee .forge-metal, .cercle-scene.assemblage .forge-metal { display: none; }
.cercle-face.dore .forge-metal::before { opacity: 0.9; background: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), rgba(255, 230, 150, 1), rgba(246, 178, 51, 0.6) 20%, transparent 45%); animation: forge-eclair 1.2s ease-out; }
.forge-marteau { position: absolute; left: var(--cible, 25%); top: var(--cible-y, 40%); width: clamp(72px, 15%, 150px); transform: translate(-50%, -100%) rotate(-75deg); transform-origin: 50% 2%; opacity: 0; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55)); transition: left 0.4s ease, top 0.4s ease, opacity 0.45s ease; pointer-events: none; z-index: 3; }   /* le bas de la tête est posé sur le point de frappe ; le manche pivote par son extrémité */
.forge-marteau svg { display: block; width: 100%; height: auto; }
.forge-marteau.visible { opacity: 1; }
.forge-marteau.coup { animation: forge-coup 0.62s cubic-bezier(0.5, 0, 0.3, 1); }
.a-graver { opacity: 0; clip-path: inset(0 100% 0 0); }
.a-graver.grave { animation: forge-gravure 0.45s ease-out forwards; }
.forge-laser { position: absolute; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px 3px #fff, 0 0 26px 8px rgba(246, 178, 51, 0.85); pointer-events: none; z-index: 4; animation: forge-laser 0.45s linear forwards; }
.forge-passer { position: absolute; right: 0; bottom: -46px; border-color: rgba(252, 231, 179, 0.4); background: transparent; color: rgba(252, 231, 179, 0.8); opacity: 0.85; }
.forge-passer:hover { background: rgba(246, 178, 51, 0.14); color: var(--or-clair); }
.cercle-scene.posee .forge-passer { display: none; }
.cercle-scene.forge .cercle-scene-carte { cursor: default; }
@keyframes forge-coup { 0% { transform: translate(-50%, -100%) rotate(-75deg); } 40% { transform: translate(-50%, -100%) rotate(-86deg); } 55% { transform: translate(-50%, -100%) rotate(3deg); } 66% { transform: translate(-50%, -100%) rotate(-9deg); } 100% { transform: translate(-50%, -100%) rotate(-75deg); } }
@keyframes forge-choc { 0% { filter: brightness(1); } 12% { filter: brightness(1.9); } 40% { filter: brightness(1.15); } 100% { filter: brightness(1); } }
@keyframes forge-eclair { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes forge-secousse { 0% { transform: translate(0, 0); } 20% { transform: translate(-5px, 4px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0, 0); } }
@keyframes forge-gravure { 0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(2.2); } 60% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1); } }
@keyframes forge-laser { 0% { transform: translateX(0); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(var(--largeur, 100px)); opacity: 0; } }
@media (max-width: 700px) { .cercle-scene.forge .cercle-face.avant { transform: translateX(-27%) scale(0.5); } .cercle-scene.forge .cercle-face.arriere { transform: translateX(27%) scale(0.5) rotateY(0); } .cercle-scene.forge:not(.feuilles) .cercle-face.avant { transform: translateX(-27%) translateY(38%) scale(0.44); } .cercle-scene.forge:not(.feuilles) .cercle-face.arriere { transform: translateX(27%) translateY(38%) scale(0.44) rotateY(0); } .forge-marteau { width: clamp(56px, 17%, 100px); } .forge-passer { position: static; margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .cercle-face.choc, .cercle-scene.secousse .cercle-scene-corps, .forge-marteau.coup, .a-graver.grave, .forge-laser { animation: none !important; } .a-graver { opacity: 1; clip-path: none; } }
/* Zones de couleur personnalisées (fiche produit, membres) : bouton « + », repères numérotés sur le visuel, liste des zones */
.zones-perso { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); background: var(--surface-2); }
.zones-perso > .aide { margin: 0 0 8px; }
.zones-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.zone-ligne { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
.zone-ligne select, .zone-ligne input { min-width: 0; }
.zone-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--encre); color: var(--fond); font-size: 0.78rem; font-weight: 700; }
.galerie-principale { position: relative; }
.galerie-principale.ciblage { cursor: crosshair; outline: 3px solid var(--accent); outline-offset: -3px; }
.galerie-principale.ciblage::after { content: 'Cliquez sur la zone à colorer'; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: var(--rayon); background: var(--encre); color: var(--fond); font-size: 0.8rem; pointer-events: none; }
.zone-pin { position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; border: 3px solid #fff; background: var(--zone-couleur, #999); color: #fff; font-size: 0.78rem; font-weight: 700; line-height: 1; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 1px 2px #000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.45); cursor: default; padding: 0; }
.zone-pin::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 8px; margin-left: -1px; background: #fff; }
@media (max-width: 600px) { .zone-ligne { grid-template-columns: 28px minmax(0, 1fr) auto; } .zone-ligne input { grid-column: 2 / -1; } }

/* ---------- 2.25.1 : adresse d'une image en ligne dans tous les champs d'image de l'administration ---------- */
.depot-url { display: flex; gap: 6px; align-items: center; } .depot-url .depot-adresse { flex: 1 1 auto; min-width: 0; } .depot-url .bouton { flex: 0 0 auto; white-space: nowrap; }

/* ---------- 2.26.0 : diagnostic — détail complet du bandeau d'incident, pastille et journal de session ---------- */
.bandeau-panne-detail code { font-size: 0.86rem; }
.panne-table { width: 100%; margin: 8px 0 4px; border-collapse: collapse; font-size: 0.84rem; } .panne-table th, .panne-table td { padding: 3px 8px 3px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); } .panne-table th { width: 7.5rem; font-weight: 600; color: var(--encre-2); white-space: nowrap; } .panne-table td { word-break: break-word; overflow-wrap: anywhere; } .panne-table pre { margin: 0; }
.panne-brut-titre { margin: 8px 0 2px; font-size: 0.82rem; color: var(--encre-2); }
.panne-brut { margin: 0; max-height: 260px; overflow: auto; padding: 8px 10px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.diagnostic-pastille { position: fixed; right: 12px; bottom: 12px; z-index: 140; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--encre); font: 600 0.8rem/1 var(--police); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer; }
.diagnostic-pastille.a-erreurs { border-color: var(--alerte); color: var(--alerte); }
.diagnostic-pastille:hover, .diagnostic-pastille:focus-visible { background: var(--surface-2); }
.diagnostic-panneau { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: min(560px, 100vw); overflow: auto; padding: 16px 18px 24px; background: var(--fond); color: var(--encre); border-left: 1px solid var(--trait); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2); }
.diagnostic-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .diagnostic-entete h2 { margin: 0; font-size: 1.1rem; }
.diagnostic-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.diagnostic-liste { list-style: none; margin: 10px 0 0; padding: 0; } .diagnostic-liste li { margin: 0 0 4px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.diagnostic-liste summary { padding: 6px 10px; cursor: pointer; font-size: 0.84rem; line-height: 1.4; word-break: break-word; } .diagnostic-liste details[open] summary { border-bottom: 1px solid var(--trait); } .diagnostic-liste details > :not(summary) { margin-left: 10px; margin-right: 10px; }
.diagnostic-liste .diag-heure { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--encre-2); } .diagnostic-liste .diag-genre { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: var(--surface-2); }
.diagnostic-liste .diag-echec .diag-genre, .diagnostic-liste .diag-panne .diag-genre, .diagnostic-liste .diag-reseau .diag-genre, .diagnostic-liste .diag-js .diag-genre { background: var(--alerte-fond); color: var(--alerte); }
.diagnostic-liste .diag-appel .diag-genre { background: var(--ok-fond); color: var(--ok); }
.diagnostic-liste .diag-refus .diag-genre { background: #fff3cd; color: #7a5600; }   /* 2.36 : refus attendu (4xx), pas un incident */
.diagnostic-liste .panne-brut { margin: 8px 0; }
@media (max-width: 600px) { .panne-table th { width: 5.5rem; } .diagnostic-pastille { right: 8px; bottom: 8px; font-size: 0.74rem; } }
@media print { .diagnostic-pastille, .diagnostic-panneau { display: none; } }

/* ---------- 2.26.0 : mention « Modèle non vérifié » (discrète : couleur secondaire, pas de fond vif) ---------- */
.etiquette-non-verifie { border-style: dashed; color: var(--encre-2); background: transparent; cursor: help; }
.non-verifie { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--trait); background: var(--surface-2); color: var(--encre-2); font-size: 0.86rem; line-height: 1.45; border-radius: 0 var(--rayon) var(--rayon) 0; }
.non-verifie strong { color: var(--encre); font-weight: 600; }
.non-verifie-compact { margin: -2px 0 4px; padding: 0; border: 0; background: transparent; font-size: 0.76rem; cursor: help; }

/* ---------- 2.26.0 : accueil animé — bandeaux de produits à défilement automatique, appel vers le catalogue ---------- */
.accueil-defile { overflow: hidden; }
.accueil-defile-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: var(--esp-2); } .accueil-defile-entete h2 { margin: 0; } .accueil-defile-entete .aide { margin: 0; }
.defile-rangee { position: relative; margin: 0 0 12px; padding: 8px 0 10px; border-top: 1px solid var(--trait); overflow: hidden; }
.defile-rangee:last-child { border-bottom: 1px solid var(--trait); }
.defile-titre { display: inline-block; margin: 0 0 6px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--encre-2); }
.defile-piste { display: flex; width: max-content; will-change: transform; animation: defile-gauche var(--defile-duree, 50s) linear infinite; }
.defile-droite .defile-piste { animation-name: defile-droite; }
.defile-serie { display: flex; gap: 14px; padding-right: 14px; flex: 0 0 auto; }
.defile-rangee:hover .defile-piste, .defile-rangee:focus-within .defile-piste, .defile-rangee.fige .defile-piste { animation-play-state: paused; }
.defile-item { display: flex; flex-direction: column; width: 168px; flex: 0 0 auto; text-decoration: none; color: var(--encre); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.defile-item:hover, .defile-item:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14); border-color: var(--accent); outline: none; }
.defile-visuel { display: block; height: 128px; background: var(--surface-2); overflow: hidden; } .defile-visuel img, .defile-visuel svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.defile-texte { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.defile-nom { font-size: 0.86rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.defile-prix { font-size: 0.82rem; color: var(--accent); font-weight: 600; }
@keyframes defile-gauche { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes defile-droite { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.accueil-appel { text-align: center; }
.accueil-appel-bouton { display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left; padding: 14px 26px 14px 24px !important; }
.accueil-appel-titre { grid-column: 1; grid-row: 1; font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.accueil-appel-sous { grid-column: 1; grid-row: 2; font-size: 0.92rem; font-weight: 400; opacity: 0.9; }
.accueil-appel-fleche { grid-column: 2; grid-row: 1 / span 2; font-size: 1.7rem; line-height: 1; transition: transform 200ms ease; }
.accueil-appel-bouton:hover .accueil-appel-fleche, .accueil-appel-bouton:focus-visible .accueil-appel-fleche { transform: translateX(5px); }
@media (max-width: 600px) { .defile-item { width: 138px; } .defile-visuel { height: 104px; } .accueil-appel-bouton { width: 100%; box-sizing: border-box; grid-template-columns: 1fr auto; } }
@media (prefers-reduced-motion: reduce) { .defile-piste { animation: none; width: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .defile-serie[aria-hidden="true"] { display: none; } .defile-item, .accueil-appel-fleche { transition: none; } }

/* ---------- 2.26.0 : tuile dorée « Compte de démonstration » (page Mon compte, visiteur) ---------- */
.demo-tuile { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin: 0 0 var(--esp-3); padding: 14px 18px; border: 1px solid #d9a63a; border-radius: var(--rayon); background: linear-gradient(120deg, #fff4d6, #fbe3a3 55%, #f6cf6e); color: #3a2a06; text-decoration: none; box-shadow: 0 6px 18px rgba(214, 150, 20, 0.22); transition: transform 180ms ease, box-shadow 180ms ease; }
.demo-tuile:hover, .demo-tuile:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(214, 150, 20, 0.32); outline: none; text-decoration: none; }
.demo-tuile-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #161d26; color: #f6b233; font-size: 1.4rem; box-shadow: 0 0 0 4px rgba(22, 29, 38, 0.08); }
.demo-tuile-texte { display: flex; flex-direction: column; gap: 3px; } .demo-tuile-texte strong { font-size: 1.05rem; } .demo-tuile-texte span { font-size: 0.86rem; line-height: 1.4; color: #5a4310; }
.demo-tuile-action { padding: 8px 14px; border-radius: 999px; background: #161d26; color: #f6b233; font-weight: 700; font-size: 0.86rem; white-space: nowrap; }
.demo-tuile.chargement .demo-tuile-action { opacity: 0.6; } .demo-tuile.chargement .demo-tuile-action::after { content: '…'; }
@media (max-width: 600px) { .demo-tuile { grid-template-columns: auto 1fr; } .demo-tuile-action { grid-column: 1 / -1; justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .demo-tuile { transition: none; } }

/* ---------- 2.27.0 : administration — catégories hiérarchiques, dépenses repliées, mise à jour manuelle, corrections, navigation croisée ---------- */
.acc-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--esp-2); padding: 8px 10px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.acc-menu .choix { padding: 4px 10px; font-size: 0.86rem; } .acc-menu .choix.acc-sous { background: var(--surface-2); } .acc-menu .choix small { color: var(--encre-2); font-weight: 400; } .acc-menu .sep { color: var(--encre-2); }
.acc-groupe { margin: var(--esp-2) 0 8px; font-size: 1rem; } .acc-groupe .lien-bouton { font: inherit; font-weight: 700; }
.cat-ligne { display: grid; grid-template-columns: auto minmax(160px, 2fr) minmax(120px, 1fr) minmax(140px, 1.4fr) auto; gap: 8px; align-items: end; padding: 6px 0; border-bottom: 1px dotted var(--trait); }
.cat-ligne .champ { margin: 0; } .cat-indent { color: var(--encre-2); align-self: center; padding-bottom: 8px; }
.cat-ligne.niveau-1 { padding-left: 22px; } .cat-ligne.niveau-2 { padding-left: 44px; } .cat-ligne.niveau-3 { padding-left: 66px; } .cat-ligne.niveau-4 { padding-left: 88px; } .cat-ligne.niveau-5 { padding-left: 110px; } .cat-ligne.niveau-6 { padding-left: 132px; }
.cat-actions { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; font-size: 0.82rem; padding-bottom: 6px; } .cat-actions .lien-bouton[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 800px) { .cat-ligne { grid-template-columns: auto 1fr 1fr; } .cat-ligne .champ:nth-of-type(3), .cat-actions { grid-column: 2 / -1; } }
.annee-nav { display: inline-flex; align-items: center; gap: 6px; } .annee-courante { min-width: 3.4em; text-align: center; font-size: 1.15rem; }
.consequences { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--accent); border-radius: 6px; background: #fff7e6; font-size: 0.88rem; }
.consequences ul { margin: 6px 0 0; padding-left: 18px; } .consequences li { margin: 3px 0; }
.maj-resultats { list-style: none; margin: 10px 0 0; padding: 0; } .maj-resultats li { border-bottom: 1px dotted var(--trait); } .maj-resultats .lien-bouton { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 7px 4px; text-align: left; text-decoration: none; } .maj-resultats .lien-bouton:hover { background: var(--surface-2); }
.maj-colonnes { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .maj-colonnes { grid-template-columns: 1fr; } }
.maj-liens { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; } .maj-liens li { padding: 6px 0; border-bottom: 1px dotted var(--trait); line-height: 1.5; }
.maj-action { border: 2px solid var(--accent); }
.correction-zone { margin-top: 10px; } .correction-table th[scope="row"] { width: 22%; } .corr-enregistre { background: var(--surface-2); color: var(--encre-2); font-size: 0.88rem; width: 34%; }
.corr-saisie input, .corr-saisie select, .corr-saisie textarea { width: 100%; box-sizing: border-box; } .corr-date-statut .corr-enregistre::after { content: ' (date du dernier changement)'; font-size: 0.78rem; }
.pastille-statut { display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 1px; border-radius: 50%; background: #c9c9c9; vertical-align: middle; }
.pastille-statut.s-planifiee, .pastille-statut.s-prete { background: #4a90d9; } .pastille-statut.s-impression { background: #1d5b22; } .pastille-statut.s-bilan { background: #d9a400; } .pastille-statut.s-controle { background: #7a4db0; }
.pastille-statut.s-validee, .pastille-statut.s-emballee, .pastille-statut.s-a_emballer, .pastille-statut.s-stock { background: #2e8b3a; } .pastille-statut.s-a_refaire { background: #c0392b; } .pastille-statut.s-archivee { background: #999; }
.statut-prod.s-archivee { background: #eee; color: #666; text-decoration: line-through; }
.journal-correction { background: #fff7e6; border-left: 3px solid var(--accent); padding-left: 8px !important; } .journal-note { white-space: pre-line; font-size: 0.86rem; }
.at-terminees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; } .at-terminees .case { display: inline-flex; margin: 0; }
.at-modif { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); background: var(--surface-2); }
.utilisations ul { margin: 4px 0 0; padding-left: 16px; } .utilisations li { margin: 2px 0; }
.utilisations { padding: 0 14px 14px; }
.admin-demande-corps:has(.grille-3), .admin-demande-corps:has(.consequences) { width: min(860px, 100%); max-height: calc(100vh - 32px); overflow: auto; }

/* ---------- 2.28.0 : tableau de bord classé (commandes / stock), composer d'e-mail, fausses demandes, demandes de service ---------- */
.tb-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; } .tb-entete h2 { margin: 0; }
.tb-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.84rem; }
.tb-pastille { display: inline-block; padding: 5px 10px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); color: var(--encre-2); }
details.tb-pastille { padding: 0; } details.tb-pastille > summary { list-style: none; cursor: pointer; padding: 5px 10px; } details.tb-pastille > summary::-webkit-details-marker { display: none; }
.tb-fichiers.ok > summary { color: #1d5b22; } .tb-fichiers.alerte { border-color: #c0392b; } .tb-fichiers.alerte > summary { color: #8a1e16; font-weight: 700; }
.tb-fichiers-detail { padding: 0 12px 10px; max-width: 640px; } .tb-fichiers-detail ul { margin: 0; padding-left: 18px; }
.tb-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; margin: 0 0 var(--esp-3); } @media (max-width: 960px) { .tb-grille { grid-template-columns: 1fr; } }
.tb-bloc { padding: 14px 16px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.tb-commandes { border-top: 4px solid var(--principal); } .tb-atelier { border-top: 4px solid #8a7a52; }
.tb-bloc-entete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .tb-bloc-entete h3 { margin: 0; font-size: 1.05rem; }
.tb-badge { font-size: 0.78rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--encre-2); } .tb-badge.actif { background: var(--principal); color: #fff; font-weight: 700; }
.tb-liste { list-style: none; margin: 0; padding: 0; } .tb-item { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 0 6px; border-radius: 8px; background: var(--surface-2); border-left: 4px solid var(--trait-fort); }
.tb-item.tb-urgent { background: #fdecea; border-left-color: #c0392b; } .tb-item.tb-important { background: #fff7e6; border-left-color: #F2A900; }
.tb-icone { font-size: 1.1rem; width: 1.6em; text-align: center; } .tb-n { font-size: 1.35rem; font-weight: 800; min-width: 1.2em; text-align: center; line-height: 1; } .tb-n:empty { display: none; } .tb-texte { font-size: 0.92rem; line-height: 1.35; }
.tb-vide { margin: 4px 0 10px; padding: 10px 12px; border-radius: 8px; background: #e8f4ea; color: #1d5b22; font-size: 0.92rem; }
.tb-sous-titre { margin: 12px 0 6px; font-size: 0.9rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
.tb-table td { padding: 6px 8px; font-size: 0.9rem; } .tb-table tr.tb-nouveau td { background: #fff7e6; } .tb-note { margin: 10px 0 0; }
.badge-fausse { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eee; color: #555; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border: 1px dashed #999; }
.badge-service { background: #e0f0ff; color: #0b4a7a; } .cmd-fausse th, .cmd-fausse td { color: var(--encre-2); } .compte-fictif th, .compte-fictif td { color: var(--encre-2); }
.bandeau-fausse { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed #999; border-radius: 6px; background: #f5f5f5; font-size: 0.9rem; }
.cadre-service { border-color: #0b4a7a; background: #f3f8fd; } .services-liste { margin: 6px 0 0; padding-left: 18px; } .services-liste li { margin: 6px 0; }
#admin-compose .compose-corps { width: min(1180px, 100%); max-height: calc(100vh - 24px); overflow: auto; margin: 0; padding: 16px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.compose-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .compose-grille { grid-template-columns: 1fr; } }
.compose-bloc { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); } .compose-bloc header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .compose-bloc header .actions { gap: 8px; margin: 0; }
.compose-bloc .champ { margin-bottom: 8px; } .compose-ajout { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.compose-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; } .compose-photo { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 96px; font-size: 0.75rem; text-align: center; cursor: pointer; } .compose-photo img { width: 88px; height: 88px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait); }
.compose-apercu { position: sticky; top: 0; } #compose-iframe { width: 100%; height: min(70vh, 720px); border: 1px solid var(--trait); border-radius: 8px; background: #fff; } .compose-apercu-sujet { margin: 0 0 6px; font-weight: 600; }
.compose-actions { margin-top: 12px; align-items: end; } .compose-actions .champ { margin: 0; min-width: 260px; }


/* ============================================================
   2.29 — Camion et imprimante du suivi, images dans les messages, visionneuse, galerie des pièces, connexion directe repensée
   ============================================================ */
/* Route au-dessus de la frise : le camion (centré sur l'étape courante) roule depuis la position vue précédemment ; la maison attend à la dernière étape */
.suivi-route { position: relative; height: 44px; margin: 0 0 2px; }
.suivi-chaussee { position: absolute; left: 4%; right: 4%; bottom: 6px; height: 3px; background: repeating-linear-gradient(90deg, var(--trait) 0 14px, transparent 14px 22px); border-radius: 2px; }
.suivi-camion { position: absolute; left: var(--pos, 0%); bottom: 4px; width: 48px; height: 32px; transform: translateX(-50%); transition: left 2.2s cubic-bezier(.45, .05, .35, 1); will-change: left; }
.suivi-camion svg { width: 100%; height: 100%; display: block; overflow: visible; }
.suivi-route.roule .roue { animation: roue-tourne 0.55s linear infinite; }
@keyframes roue-tourne { to { transform: rotate(360deg); } }
.suivi-route.roule .svg-camion { animation: camion-secoue 0.35s ease-in-out infinite alternate; }
@keyframes camion-secoue { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.suivi-maison { position: absolute; left: var(--maison, 100%); bottom: 4px; width: 34px; height: 34px; transform: translateX(calc(-50% + 30px)); }
.suivi-maison svg { width: 100%; height: 100%; display: block; }
.suivi-maison-ok { position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.suivi-route-arret .suivi-camion { filter: grayscale(1); opacity: 0.55; }
.suivi-route-arrivee .suivi-camion { animation: camion-arrive 0.8s ease-out 1; }
/* 2.39 : à pied — remise en main propre (et toujours sur « Ma Petite Impression ») : le petit personnage marche, sa pièce sous le bras */
.suivi-route.suivi-a-pied { height: 52px; }
.suivi-pieton { width: 36px; height: 46px; bottom: 5px; }
.suivi-pieton svg { overflow: visible; }
.suivi-route.roule .svg-marcheur .jambe-av { animation: marche-jambe 0.5s ease-in-out infinite alternate; }
.suivi-route.roule .svg-marcheur .jambe-ar { animation: marche-jambe 0.5s ease-in-out infinite alternate-reverse; }
.suivi-route.roule .svg-marcheur .bras-av { animation: marche-bras 0.5s ease-in-out infinite alternate-reverse; }
.suivi-route.roule .svg-marcheur .bras-ar { animation: marche-bras 0.5s ease-in-out infinite alternate; }
.suivi-route.roule .svg-marcheur .corps { animation: marche-bob 0.25s ease-in-out infinite alternate; }
@keyframes marche-jambe { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes marche-bras { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes marche-bob { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
.suivi-route-arrivee .suivi-pieton { animation: pieton-arrive 0.9s ease-out 1; }
@keyframes pieton-arrive { 0% { transform: translateX(-50%) translateY(0); } 35% { transform: translateX(-50%) translateY(-7px); } 60% { transform: translateX(-50%) translateY(0); } 80% { transform: translateX(-50%) translateY(-3px); } 100% { transform: translateX(-50%) translateY(0); } }
@keyframes camion-arrive { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.08); } 100% { transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .suivi-camion { transition: none; } .suivi-route.roule .roue, .suivi-route.roule .svg-camion, .suivi-route-arrivee .suivi-camion, .suivi-route.roule .svg-marcheur .jambe-av, .suivi-route.roule .svg-marcheur .jambe-ar, .suivi-route.roule .svg-marcheur .bras-av, .suivi-route.roule .svg-marcheur .bras-ar, .suivi-route.roule .svg-marcheur .corps, .suivi-route-arrivee .suivi-pieton { animation: none; } }
@media (max-width: 560px) { .suivi-etape .suivi-nom { display: none; } .suivi-etape.courant .suivi-nom, .suivi-etape.arret .suivi-nom { display: block; margin: 6px -18px 0; }   /* 2.39 : sur téléphone, seul le nom de l'étape en cours est écrit (les autres se chevauchaient) */
  .suivi-route { height: 36px; } .suivi-camion { width: 38px; height: 26px; } .suivi-route.suivi-a-pied { height: 40px; } .suivi-pieton { width: 26px; height: 34px; } .suivi-maison { width: 26px; height: 26px; transform: translateX(calc(-50% + 22px)); } }
/* Imprimante discrète (chariot qui va et vient, couches qui apparaissent) — seulement pendant l'impression */
.suivi-detail { display: flex; align-items: center; gap: 12px; }
.suivi-imprimante { flex: 0 0 auto; width: 56px; height: 56px; }
.svg-imprimante { width: 100%; height: 100%; display: block; }
.svg-imprimante .chariot { animation: chariot-va-vient 1.6s ease-in-out infinite alternate; }
@keyframes chariot-va-vient { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.svg-imprimante .fil { animation: fil-coule 0.8s ease-in-out infinite alternate; transform-origin: 32px 23px; }
@keyframes fil-coule { from { transform: scaleY(0.6); } to { transform: scaleY(1.3); } }
.svg-imprimante .couches rect { animation: couche-apparait 6s ease-in-out infinite; transform-origin: 32px 52px; }
.svg-imprimante .couches .c2 { animation-delay: 1.5s; } .svg-imprimante .couches .c3 { animation-delay: 3s; } .svg-imprimante .couches .c4 { animation-delay: 4.5s; }
@keyframes couche-apparait { 0%, 5% { opacity: 0; transform: scaleX(0.2); } 25%, 85% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .svg-imprimante .chariot, .svg-imprimante .fil, .svg-imprimante .couches rect { animation: none; opacity: 1; } }
.impression-en-cours { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--esp-2); padding: 10px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface-2); font-size: 0.95rem; }
.impression-en-cours .svg-imprimante { width: 52px; height: 52px; flex: 0 0 auto; }
/* Zone de saisie d'un message : barre d'outils, dépôt d'images, aperçus */
.saisie-message { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; border-radius: var(--rayon); }
.saisie-message textarea { width: 100%; box-sizing: border-box; padding: 0.5rem 0.7rem; font: inherit; color: var(--encre); background: var(--surface); border: 1px solid var(--trait-fort); border-radius: var(--rayon); resize: vertical; }
.saisie-message.survol textarea { outline: 2px dashed var(--ticket); outline-offset: 2px; background: var(--surface-2); }
.saisie-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.saisie-outil { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.7rem; padding: 0 0.5rem; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); font: inherit; font-size: 0.82rem; cursor: pointer; color: var(--encre); }
.saisie-outil:hover { background: var(--surface-2); border-color: var(--trait-fort); }
.saisie-outil-image { font-weight: 600; }
.saisie-aide { font-size: 0.75rem; margin-left: 4px; }
.saisie-apercus { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.saisie-apercu { position: relative; width: 56px; height: 56px; }
.saisie-apercu img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait-fort); }
.saisie-retirer { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0; background: var(--encre); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; padding: 0; }
.message-images { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.message-image { padding: 0; border: 1px solid var(--trait-fort); border-radius: 6px; background: none; cursor: zoom-in; width: 96px; height: 96px; overflow: hidden; }
.message-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.message-liste { margin: 0.3rem 0 0.3rem 1.2rem; padding: 0; }
.message p a { color: inherit; text-decoration: underline; }
/* Visionneuse plein écran */
.visionneuse { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; background: rgba(12, 16, 20, 0.92); padding: 16px; }
.visionneuse.ouverte { display: flex; }
body.visionneuse-active { overflow: hidden; }
.visionneuse figure { margin: 0; max-width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.visionneuse img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); background: #fff; }
.visionneuse figcaption { color: #fff; font-size: 0.9rem; text-align: center; min-height: 1.2em; }
.visionneuse-fermer, .visionneuse-nav { position: absolute; border: 0; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.visionneuse-fermer:hover, .visionneuse-nav:hover { background: rgba(255, 255, 255, 0.28); }
.visionneuse-fermer { top: 14px; right: 14px; } .visionneuse-prec { left: 14px; top: 50%; transform: translateY(-50%); } .visionneuse-suiv { right: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse-compteur { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.85rem; opacity: 0.8; }
/* Galerie des pièces (espace client) et bandeau des dernières photos */
.commande-photos-grille { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.commande-photo { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.commande-photo img { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.commande-photo:hover img, .commande-photo:focus-visible img { transform: scale(1.02); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); }
.cmd-photos-lien { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--trait); color: var(--encre); text-decoration: none; font-size: 0.85rem; font-weight: 600; margin-right: 8px; }
.photos-recentes { margin: 0 0 var(--esp-2); padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface-2); }
.photos-recentes h3 { margin: 0 0 8px; font-size: 1rem; }
.photos-recentes-bande { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.photos-recentes-bande figure { margin: 0; flex: 0 0 auto; width: 120px; scroll-snap-align: start; }
.photos-recentes-bande img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait-fort); }
.photos-recentes-bande figcaption { font-size: 0.75rem; margin-top: 2px; text-align: center; }
/* Connexion directe : composer + échanges classés */
.cd-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--esp-2); align-items: start; }
@media (max-width: 900px) { .cd-grille { grid-template-columns: 1fr; } }
.cd-categories { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0 0 12px; }
.cd-categories legend { font-size: 0.85rem; color: var(--encre-2); margin-bottom: 6px; }
.cd-categorie { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--trait); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 0.88rem; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.cd-categorie input { position: absolute; opacity: 0; pointer-events: none; }
.cd-categorie:has(input:checked) { border-color: var(--nuit, #161d26); background: var(--nuit, #161d26); color: var(--or-clair, #f6d68a); transform: translateY(-1px); }
.cd-categorie:has(input:focus-visible) { outline: 2px solid var(--ticket); outline-offset: 2px; }
.cd-echanges h3 { margin: 0 0 10px; }
.cd-section { margin: 0 0 14px; }
.cd-section h4 { margin: 0 0 6px; font-size: 0.9rem; color: var(--encre-2); text-transform: uppercase; letter-spacing: 0.04em; }
.cd-echange { margin: 0 0 8px; border: 1px solid var(--trait); border-radius: 10px; background: var(--surface); padding: 0 12px; animation: cd-apparait 0.45s ease both; }
.cd-echange:nth-child(2) { animation-delay: 0.05s; } .cd-echange:nth-child(3) { animation-delay: 0.1s; } .cd-echange:nth-child(4) { animation-delay: 0.15s; }
@keyframes cd-apparait { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cd-echange > summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; }
.cd-echange > summary::-webkit-details-marker { display: none; }
.cd-picto { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 1rem; }
.cd-titre { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-extrait { font-size: 0.85rem; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-a-lire { border-color: var(--ticket); box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.18); }
.cd-a-lire .cd-picto { background: var(--ticket); color: var(--ticket-encre); animation: cd-pulse 1.8s ease-in-out infinite; }
@keyframes cd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 169, 0, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(242, 169, 0, 0); } }
.cd-termine { opacity: 0.85; }
.cd-echange[open] { padding-bottom: 12px; }
.cd-echange .ticket-fil { max-height: 24rem; }
.cd-vide-total { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cd-echange, .cd-a-lire .cd-picto { animation: none; } }

/* --- 2.29 — Administration : boîte d'envoi, messages à l'écran, photos par lot, aperçu d'e-mail --- */
.nav-pastille { display: inline-block; min-width: 1.3em; padding: 0 0.35em; border-radius: 999px; background: var(--ticket); color: var(--ticket-encre); font-size: 0.72rem; font-weight: 700; text-align: center; vertical-align: middle; }
.toasts-courriels { position: fixed; right: 16px; bottom: 16px; z-index: 1100; display: flex; flex-direction: column; gap: 10px; max-width: min(460px, calc(100vw - 32px)); }
.toast-courriel { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: #161d26; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border-left: 5px solid var(--ticket); animation: toast-arrive 0.35s ease; transition: opacity 0.8s, transform 0.8s; }
.toast-courriel.efface { opacity: 0; transform: translateY(8px); }
.toast-courriel.annule { border-left-color: var(--alerte); }
.toast-courriel .aide { color: #c9d2d8; }
.toast-courriel-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.toast-courriel-actions .lien-bouton { color: #fff; margin-left: auto; font-size: 1.1rem; }
.toast-courriel-actions .bouton-discret { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
@keyframes toast-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.boite-table td { vertical-align: top; } .boite-actions { white-space: nowrap; }
.boite-attente { background: #fff9e8; } .boite-annule { color: var(--encre-2); } .boite-annule td:nth-child(3) { text-decoration: line-through; } .boite-erreur { background: #fdecea; }
.boite-test { opacity: 0.75; }
.tb-boite { border-top: 4px solid var(--ticket); grid-column: 2; } @media (max-width: 960px) { .tb-boite { grid-column: auto; } } .tb-commandes { grid-row: span 2; }
.tb-boite .tb-badge.actif { background: var(--ticket); color: var(--ticket-encre); }
.apercu-courriel-cadre { width: 100%; height: min(70vh, 720px); border: 1px solid var(--trait); border-radius: 8px; background: #fff; margin-top: 10px; }
.apercu-courriel-texte { white-space: pre-wrap; font-size: 0.85rem; background: var(--surface-2); padding: 10px; border-radius: 6px; max-height: 40vh; overflow: auto; }
.admin-demande-corps.apercu-courriel, #admin-courriels .admin-demande-corps { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
#admin-courriels .boite-table td:first-child { white-space: nowrap; }
.photos-depot { margin-top: 10px; padding: 12px; border: 2px dashed var(--trait-fort); border-radius: 10px; background: var(--surface-2); transition: border-color 0.2s, background 0.2s; }
.photos-depot.survol { border-color: var(--ticket); background: #fff9e8; }
.photos-depot-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.photos-depot .grille-2 { margin-top: 4px; } .photos-depot .actions { margin-top: 4px; }
.photos-choisies { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; }
.photos-notifier { align-self: end; }
.compose-animations { display: flex; flex-wrap: wrap; gap: 10px; }
.compose-animation { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--trait); border-radius: 8px; cursor: pointer; font-size: 0.78rem; text-align: center; }
.compose-animation:has(input:checked) { border-color: var(--ticket); background: #fff9e8; }
.compose-animation input { margin: 0; }
.flux-options { margin: 8px 0; }
.admin-photos .commande-photos-grille { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.admin-photos .commande-photo img { aspect-ratio: 4 / 3; }
.rl-resultats { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .rl-fiche { text-align: left; padding: 6px 10px; border: 1px solid var(--trait); border-radius: 6px; background: var(--surface); cursor: pointer; font: inherit; } .rl-fiche:hover { background: var(--surface-2); }
.livre tr.hors-declaration td { color: var(--encre-2); font-style: italic; } .livre tr.hors-declaration td:nth-child(8), .livre tr.hors-declaration td:nth-child(9), .livre tr.hors-declaration td:nth-child(10) { text-decoration: line-through dotted; }

/* 2.30 — bouton « appareil photo » : seulement sur un écran tactile (téléphone, tablette) */
.bouton-camera { display: none; }
@media (hover: none) and (pointer: coarse) { .bouton-camera { display: inline-flex; align-items: center; gap: 6px; } }

/* --- 2.30 — Encaissement express (un écran, pensé pour le téléphone) et actions rapides du tableau de bord --- */
.tb-rapides { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin: 0 0 6px; } .tb-rapides .bouton { flex: 1 1 auto; text-align: center; }
.ex-form .ex-montant { margin: 0 0 12px; } .ex-form .ex-montant label { display: block; font-weight: 600; margin-bottom: 4px; }
.ex-montant-champ { display: flex; align-items: center; gap: 8px; } .ex-montant-champ input { flex: 1; font-size: 2rem; font-weight: 700; padding: 8px 12px; border: 2px solid var(--trait-fort); border-radius: 10px; width: 100%; min-width: 0; font-family: inherit; } .ex-montant-champ span { font-size: 1.6rem; font-weight: 700; color: var(--encre-2); }
.ex-moyens { border: 0; padding: 0; margin: 0 0 12px; } .ex-moyens legend { font-weight: 600; margin-bottom: 6px; }
.ex-moyens-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-moyen { position: relative; } .ex-moyen input { position: absolute; opacity: 0; pointer-events: none; }
.ex-moyen span { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 0.92rem; min-height: 40px; }
.ex-moyen.choisi span { background: var(--principal); border-color: var(--principal); color: #fff; font-weight: 600; }
.ex-moyen input:focus-visible + span { outline: 2px solid var(--ticket); outline-offset: 2px; }
.ex-recherche { margin-top: 6px; } .ex-recherche input[type="search"] { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px dashed var(--trait-fort); border-radius: var(--rayon); font: inherit; }
.ex-plus { margin: 8px 0 12px; } .ex-plus summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
.ex-form .bouton-grand { font-size: 1.05rem; padding: 12px 20px; }
.ex-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex-ligne { padding: 10px 12px; border: 1px solid var(--trait); border-left: 5px solid var(--principal); border-radius: 10px; background: var(--surface); }
.ex-ligne.hors { border-left-color: var(--encre-2); background: var(--surface-2); } .ex-ligne.rattachee { border-left-color: #1d5b22; }
.ex-ligne-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ex-ligne-tete strong { font-size: 1.15rem; white-space: nowrap; }
.ex-ligne-corps { margin: 4px 0; } .ex-ligne-pied { font-size: 0.82rem; }

/* --- 2.30 — QR codes et scanner --- */
.qr-fenetre .qr-corps { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 600px) { .qr-fenetre .qr-corps { grid-template-columns: 1fr; justify-items: center; } }
.qr-image svg { width: 220px; height: 220px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; }
.qr-infos { font-size: 0.95rem; } .qr-infos > div { margin: 2px 0; } .qr-url code { word-break: break-all; font-size: 0.8rem; }
.scan-cadre { position: relative; width: min(100%, 480px); aspect-ratio: 4 / 3; margin: 8px 0; background: #111; border-radius: 12px; overflow: hidden; }
.scan-cadre video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-viseur { position: absolute; inset: 15%; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); pointer-events: none; }

/* ============================================================
   2.31 — Médiathèque (Site web), sélecteur d'images de l'éditeur, aperçu d'import, architecture du site
   ============================================================ */
.badge-alerte { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #fbe9e7; color: #8f2a1f; font-size: 0.78rem; font-weight: 600; margin-right: 6px; }
.cadre-alerte { border-color: #d98a7a; background: #fff6f4; }
.cadre-alerte .cadre-etiquette { background: #b3261e; color: #fff; }
.pr-media-manquante img { opacity: 0.35; outline: 2px dashed #b3261e; outline-offset: -2px; }
.import-perime td { background: #fff8e6; }
.mt-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mt-stats .badge { margin-left: 4px; }
.mt-alerte { margin: 0 0 14px; }
.mt-section { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--bordure, #d5dcda); border-radius: 10px; background: #fff; }
.mt-section > summary { cursor: pointer; font-weight: 600; }
.mt-filtres { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.mt-filtres input[type="search"] { flex: 1; min-width: 200px; max-width: 460px; }
.mt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.mt-carte { display: flex; flex-direction: column; border: 1px solid var(--bordure, #d5dcda); border-radius: 10px; background: #fff; overflow: hidden; min-width: 0; }
.mt-carte img, .mt-carte .mt-type { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eef0ee; display: flex; align-items: center; justify-content: center; color: #4f6360; font-weight: 700; }
.mt-carte.mt-orpheline { border-style: dashed; }
.mt-infos { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 4px; min-width: 0; }
.mt-infos .mt-nom { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-infos small { font-size: 0.76rem; line-height: 1.3; overflow-wrap: anywhere; }
.mt-actions { padding: 4px 10px 8px; font-size: 0.8rem; display: flex; gap: 10px; flex-wrap: wrap; }
.mt-doublon { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--bordure, #d5dcda); }
.mt-doublon-fichiers { display: flex; flex-wrap: wrap; gap: 12px; }
.mt-doublon-choix { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--bordure, #d5dcda); border-radius: 8px; cursor: pointer; max-width: 100%; }
.mt-doublon-choix img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.mt-doublon-choix code { font-size: 0.78rem; overflow-wrap: anywhere; }
.admin-demande-corps.mt-fenetre { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.mt-grille-choix { max-height: min(62vh, 640px); overflow: auto; padding: 4px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mt-vignette { display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; }
.mt-vignette img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; background: #eef0ee; }
.mt-vignette .mt-nom { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-vignette .mt-meta { font-size: 0.72rem; color: #4f6360; }
.mt-vignette:hover { border-color: #9fb8b4; }
.mt-vignette.choisie { border-color: var(--accent, #1f6f6a); background: #eef6f5; }
.mt-vignette.deja { opacity: 0.5; cursor: default; }
.arch { max-width: 1100px; }
.arch-sommaire ol { columns: 2; column-gap: 24px; margin: 0 0 16px; padding-left: 20px; font-size: 0.92rem; }
.arch-section { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--bordure, #d5dcda); border-radius: 12px; background: #fff; }
.arch-section h3 { margin: 0 0 10px; }
.arch-section h4 { margin: 14px 0 6px; }
.arch-schema { width: 100%; max-width: 760px; height: auto; display: block; margin: 6px auto 12px; }
.arch-etapes li, .arch-liste li { margin: 0 0 8px; }
.arch-table td, .arch-table th { vertical-align: top; font-size: 0.88rem; }
.arch-table code { font-size: 0.82rem; overflow-wrap: anywhere; }
@media (max-width: 760px) { .arch-sommaire ol { columns: 1; } .mt-grille { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
@media print { .arch-section { break-inside: avoid; border: 0; padding: 0; } .arch-sommaire, .admin-entete-onglet .actions, .arch .aide button { display: none; } }

/* ============================================================
   2.32 — Pages du site (une section par page), listes de photos avec aperçu, corbeille de la médiathèque, favicon,
   fiche atelier (photos, liens), nouvelle fiche atelier, file d'attente, Nouvelle commande
   ============================================================ */
.page-site-groupe { margin: 18px 0 8px; font-size: 1rem; color: #4f6360; text-transform: uppercase; letter-spacing: 0.04em; }
.page-site { margin: 0 0 10px; border: 1px solid var(--bordure, #d5dcda); border-radius: 12px; background: #fff; }
.page-site > summary { padding: 10px 14px; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.page-site > summary code { font-size: 0.8rem; color: #4f6360; }
.page-site.page-masquee { border-style: dashed; background: #fbfbfa; }
.page-site.page-masquee > summary strong { color: #7a5c00; }
.page-site-corps { padding: 4px 14px 14px; border-top: 1px solid var(--bordure, #d5dcda); }
.page-site-corps .dp-bloc { margin-top: 10px; }
.liste-photos { margin: 0 0 12px; }
.liste-photos-lignes { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 8px; }
.lp-ligne { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--bordure, #d5dcda); border-radius: 10px; background: #fff; }
.lp-ligne img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; background: #eef0ee; }
.lp-champs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lp-champs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-champs input { width: 100%; }
.lp-actions { display: flex; gap: 8px; }
.lp-actions button[disabled] { opacity: 0.35; cursor: default; }
.favicon-apercu { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--bordure, #d5dcda); background: #fff; padding: 4px; display: block; margin-top: 4px; }
.mt-corbeille-carte { border-style: dashed; }
.mt-corbeille-carte .mt-infos strong { font-size: 0.85rem; }
.mt-corbeille-carte .mt-actions { justify-content: space-between; }
.mt-filtres select { max-width: 200px; }
.mt-filtres .mt-filtres-groupe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* fiche atelier : photos des défauts, formulaire de modification enrichi */
.at-modif-liens { margin-top: 10px; align-items: start; }
.fiche-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0; }
.fiche-photo { margin: 0; border: 1px solid var(--bordure, #d5dcda); border-radius: 10px; overflow: hidden; background: #fff; }
.fiche-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: #eef0ee; }
.fiche-photo figcaption { padding: 6px 8px; font-size: 0.82rem; line-height: 1.35; }
.fiche-photo-ajout { align-items: end; margin-top: 8px; }
.fiche-photo-bouton { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
/* nouvelle fiche atelier (formulaire partagé) et file d'attente */
.at-actions { align-items: center; margin: 0 0 10px; }
.nouvelle-fiche .nf-details { align-items: start; margin: 8px 0; }
.nouvelle-fiche .dp-bloc { margin: 8px 0 10px; }
.fa-titre { margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; }
.fa-table td:first-child { width: 56px; }
/* Nouvelle commande : mode, rattachements, options, liste catalogue par ligne, autres saisies */
.rp-mode { margin: 0 0 6px; }
.rp-plus { margin: 12px 0 0; }
.rp-plus .grille-2, .rp-plus .grille-3 { margin-top: 4px; }
.rp-plus .case { margin: 6px 0; display: block; }
.rl-lien { width: 100%; margin-top: 4px; font-size: 0.85rem; }
.rp-autres { margin-top: 14px; }
.rp-autres .actions { margin: 6px 0 8px; }
@media (max-width: 760px) {
  .lp-ligne { grid-template-columns: 72px 1fr; }
  .lp-ligne img { width: 72px; height: 54px; }
  .lp-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .fiche-photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .fa-table td:first-child { width: auto; }
}
@media print { .fiche-photo-ajout, .at-actions, .rp-autres { display: none; } }
/* 2.32 : les colonnes de l'Atelier (fiche, commande) n'imposent plus leur largeur en ligne : une seule colonne sur téléphone (règle @media 960 px) */
.colonnes.colonnes-large { grid-template-columns: 2.2fr 1fr; }
@media (max-width: 960px) { .colonnes.colonnes-large { grid-template-columns: 1fr; } }
/* 2.32 : dépôt d'image dans une colonne étroite (nouvelle fiche, modification de fiche) — la zone de dépôt passe au-dessus des options */
.nouvelle-fiche .nf-details { grid-template-columns: 1.5fr 1fr; }
.nouvelle-fiche .depot-image-corps, .at-modif-liens .depot-image-corps { grid-template-columns: 1fr auto; }
.nouvelle-fiche .depot-image-corps .depot-zone, .at-modif-liens .depot-image-corps .depot-zone { grid-column: 1 / -1; }
@media (max-width: 960px) { .nouvelle-fiche .nf-details { grid-template-columns: 1fr; } }
/* 2.32 : en-tête de la fiche atelier sur téléphone — le bloc de texte peut rétrécir (la liste des statuts imposait sa largeur) et passe sous la vignette si besoin */
.atelier-piece > div { min-width: 0; }
.atelier-piece select.bouton { max-width: 100%; }
@media (max-width: 700px) { .atelier-piece { flex-wrap: wrap; } }
.atelier-piece .actions > label { min-width: 0; max-width: 100%; }

/* ============================================================
   2.33 — Produits des clients, visibilité d'un produit privé, sous-catégories, Mes modèles
   ============================================================ */
.choix-visibilite { display: grid; gap: 6px; margin: 4px 0 10px; }
.choix-visibilite .case { align-items: flex-start; }
.choix-visibilite .case small { display: block; font-weight: 400; }
#pr-metiers .cases, #pr-client { margin: 6px 0 10px; }
.sous-categorie-ligne th { padding-left: 26px; }
.sous-categorie-ligne th::before { content: '↳ '; color: #4f6360; }
.sous-categories { margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.etiquette-lien { text-decoration: none; border-color: var(--accent, #1f6f6a); color: var(--accent, #1f6f6a); font-weight: 600; }
.etiquette-lien:hover { background: var(--accent, #1f6f6a); color: #fff; }
.etiquette-lien small { opacity: 0.8; margin-left: 2px; }
.categories-liste-ul li.sous-categorie { margin-left: 22px; }
.categories-liste-ul li.sous-categorie h2 { font-size: 1.05rem; }
.modeles-liste { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.modele-carte { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--bordure, #d5dcda); border-radius: 12px; background: #fff; }
.modele-carte .rapide-mini { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.modele-corps { min-width: 0; }
.modele-indisponible { opacity: 0.85; border-style: dashed; }
@media (max-width: 700px) { .modele-carte { grid-template-columns: 56px 1fr; } .modele-carte > :last-child { grid-column: 1 / -1; } .modele-carte .rapide-mini { width: 56px; height: 56px; } }

/* ============================================================
   2.34 — Couleur hors stock, options des produits offerts, zoom des cartes, proposition de pièce
   ============================================================ */
.couleur-hors-stock { margin: 4px 0 12px; }
.couleur-hors-stock .chs-bloc { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--trait); border-radius: var(--rayon); background: var(--surface-2); display: grid; gap: 8px; max-width: 520px; }
.couleur-hors-stock .chs-bloc .champ { margin: 0; }
.couleur-hors-stock .chs-bloc .bouton { justify-self: start; }
.pastille-hors-stock { border-style: dashed; }
.pastille-hors-stock small { font-size: 0.72em; opacity: 0.8; margin-left: 2px; }
/* Cartes produits : zoom lent de la photo après un survol prolongé (retour immédiat quand le curseur part ; rien au toucher ni en mouvement réduit) */
.produit-carte .visuel { overflow: hidden; }
.produit-carte .visuel img, .produit-carte .visuel svg { display: block; transform-origin: 50% 55%; transition: transform 0.35s ease-out; }
@media (hover: hover) {
  .produit-carte:hover .visuel img, .produit-carte:hover .visuel svg, .produit-carte:focus-within .visuel img, .produit-carte:focus-within .visuel svg { transform: scale(1.14); transition: transform 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.5s; }
}
@media (prefers-reduced-motion: reduce) {
  .produit-carte .visuel img, .produit-carte .visuel svg, .produit-carte:hover .visuel img, .produit-carte:hover .visuel svg { transition: none; transform: none; }
}
/* Proposer une pièce (espace client) et Propositions des clients (administration) */
.prop-complet-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 10px; }
.prop-complet-entete .aide { flex: 1 1 260px; }
.prop-complet { margin: 0 0 12px; padding: 10px 14px 4px; border: 1px dashed var(--trait); border-radius: var(--rayon); background: var(--surface-2); }
.propositions { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.proposition { padding: 12px 14px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.proposition-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 4px; }
.proposition-photos { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.proposition-photos img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--trait); display: block; }
.proposition-reponse { padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--info-fond); border-radius: 0 var(--rayon) var(--rayon) 0; }
.proposition-bon { font-weight: 500; }
.proposition-publiee .badge-statut { background: var(--ok-fond, #e6f4ea); }
.proposition-refusee { opacity: 0.85; }
.proposition-admin { margin-bottom: 14px; }
.proposition-admin-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.proposition-admin-tete h3 { margin: 0; }
.prop-details { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 6px 0 10px; font-size: 0.92rem; }
.prop-details dt { font-weight: 600; color: var(--texte-2, #4f6360); }
.prop-details dd { margin: 0; }
@media (max-width: 700px) { .prop-details { grid-template-columns: 1fr; } .prop-details dd { margin-bottom: 4px; } }

/* ---------- 2.36 — Codes, coupons et avantages entreprise : tunnel de prix explicite, bandeau d'accueil ciblé ---------- */
.badge-entreprise { background: #0b4a7a; color: #fff; border-color: #0b4a7a; white-space: nowrap; }
.badge-code { background: var(--surface-2); color: var(--encre); border: 1px dashed var(--encre-2); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.prix-collegue { color: #0b4a7a; }
.prix-collegue .prix-avant { text-decoration: line-through; }
.votre-prix { color: #0b4a7a; font-weight: 600; }
.fiche-prix-collegue .prix { font-size: 1.5rem; }
.fiche-prix-collegue .votre-prix { display: block; font-size: 0.9rem; margin-top: 2px; }
.fiche-prix-avantage { margin: 4px 0 var(--esp-2); font-size: 0.92rem; color: #0b4a7a; }
.ticket-ligne.remise { background: #e9f2f8; border-radius: 6px; padding: 6px 8px; margin: 4px 0; }
.ticket-ligne.remise .libelle { flex: 1 1 auto; max-width: none; min-width: 0; } .ticket-ligne.remise .conducteur { flex: 0 1 2em; }   /* le libellé long cède la place au montant (téléphone) */
.ticket-ligne.remise .montant { color: #0b4a7a; font-weight: 700; font-size: 1.05rem; }
.ticket-ligne.remise .libelle { color: #0b4a7a; }
.ticket-ligne.remise .conducteur { border-bottom-color: #9cbad0; }
.ticket-ligne.economie { font-size: 0.9rem; color: var(--ok); font-weight: 600; justify-content: flex-end; }
.ticket-ligne.economie .conducteur { display: none; }
.ticket-ligne.votre-prix { color: #0b4a7a; }
.champ-codes .aide { margin-top: 6px; }
.codes-poses { list-style: none; margin: 0 0 var(--esp-1); padding: 0; display: grid; gap: 6px; }
.code-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--rayon); background: var(--surface-2); font-size: 0.9rem; }
.code-chip-entreprise { background: #e9f2f8; }
.code-chip-coupon, .code-chip-bon { background: #e3f1e6; }
.code-chip-attente { background: #fff3cd; }
.code-chip .badge { flex: none; }
.code-chip-texte { flex: 1; }
.code-chip .lien-bouton { font-size: 0.85rem; }
.avantage-rappel { margin: 0 0 var(--esp-1); font-size: 0.9rem; color: #0b4a7a; }
.accueil-avantage { margin: var(--esp-2) 0 var(--esp-4); }
.avantage-bandeau { position: relative; display: flex; gap: var(--esp-3); align-items: center; padding: var(--esp-3) var(--esp-4); border-radius: var(--rayon-grand, 14px); background: var(--entreprise-couleur, #0b4a7a); background: linear-gradient(135deg, var(--entreprise-couleur, #0b4a7a), color-mix(in srgb, var(--entreprise-couleur, #0b4a7a) 70%, #000)); color: #fff; box-shadow: 0 12px 30px rgba(11, 74, 122, 0.25); animation: avantage-entree 0.6s ease both; }
@keyframes avantage-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.avantage-bandeau-logo { flex: none; width: 72px; height: 72px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); display: grid; place-items: center; font-size: 2rem; font-weight: 700; overflow: hidden; }
.avantage-bandeau-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 6px; box-sizing: border-box; }
.avantage-bandeau-texte { flex: 1; min-width: 0; }
.avantage-bandeau-sur { margin: 0 0 2px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.avantage-bandeau h2 { margin: 0 0 6px; color: #fff; font-size: 1.5rem; line-height: 1.15; }
.avantage-bandeau p { margin: 0 0 8px; max-width: 60ch; }
.avantage-bandeau-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0 !important; }
.avantage-bandeau-actions .bouton { background: #fff; color: #0b4a7a; border-color: #fff; }
.avantage-bandeau-actions .bouton-principal { background: var(--ticket); color: var(--ticket-encre); border-color: var(--ticket); }
.avantage-bandeau-fermer { position: absolute; top: 10px; right: 12px; background: rgba(255, 255, 255, 0.15); border: 0; color: #fff; border-radius: 999px; padding: 4px 10px; cursor: pointer; font: inherit; font-size: 0.85rem; }
.avantage-bandeau-fermer:hover { background: rgba(255, 255, 255, 0.3); }
@media (max-width: 760px) { .avantage-bandeau { flex-direction: column; align-items: flex-start; padding: var(--esp-3); } .avantage-bandeau-logo { width: 56px; height: 56px; font-size: 1.5rem; } .avantage-bandeau h2 { font-size: 1.25rem; padding-right: 70px; } }
/* 2.36 — Mon compte → Codes et avantages */
.avantage-nouvelle { margin: 0 0 var(--esp-3); padding: 12px 16px; border-radius: var(--rayon); background: #fff3cd; border: 1px solid #e8c15b; }
.avantage-section h4 { margin: var(--esp-2) 0 6px; font-size: 1rem; }
.avantage-entreprise { border-left: 6px solid var(--entreprise-couleur, #0b4a7a); }
.avantage-grand { font-size: 1.1rem; margin: 0 0 8px; }
.avantage-adhesion { max-width: 460px; margin-top: 8px; }
.avantage-adhesion input { text-transform: uppercase; }
.codes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.code-carte { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); }
.code-carte-code { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; }
.code-carte-code code { font-size: 1.05rem; letter-spacing: 0.08em; padding: 4px 10px; border: 1px dashed var(--encre-2); border-radius: 6px; background: var(--surface); }
.code-carte-corps { flex: 1; min-width: 0; }
.code-remise { color: #0b4a7a; font-weight: 700; }
.code-carte-passe { opacity: 0.6; }
.code-carte-avenir { border-style: dashed; }
.missions-jauge { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 6px 0 12px; }
.missions-jauge span { display: block; height: 100%; background: var(--ok); transition: width 0.6s ease; }
.missions-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mission { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; background: var(--fond); }
.mission-faite { background: #e3f1e6; border-color: #bfe0c8; }
.mission-picto { font-size: 1.4rem; width: 36px; text-align: center; flex: none; }
.mission-corps { flex: 1; min-width: 0; }
.mission-etat { text-align: right; font-size: 0.9rem; flex: none; max-width: 40%; }
.mission-coche { color: var(--ok); font-weight: 700; }
.mission-promesse { font-weight: 600; color: #0b4a7a; }
.cmd-remises dd { line-height: 1.5; }
@media (max-width: 760px) { .code-carte, .mission { flex-wrap: wrap; } .code-carte-code { min-width: 0; flex-direction: row; } .mission-etat { text-align: left; max-width: none; width: 100%; padding-left: 48px; } }

/* ---------- 2.40 : matière au choix sur la fiche, comparatif ---------- */
.fiche-matieres .choix-groupe { gap: 8px; }
.fiche-matieres .choix[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--principal); }
.fiche-comparatif { margin-top: 10px; }
.comp-matieres { display: block; background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 10px 12px; }
.comp-matieres .comparatif-titre { margin: 0 0 8px; }
.comparatif-table { width: 100%; font-size: 0.92rem; } .comparatif-table th[scope="row"] { font-weight: 600; white-space: nowrap; width: 34%; } .comparatif-table td, .comparatif-table th { padding: 5px 8px; vertical-align: top; }
.comparatif-table .comp-choisi { background: rgba(15, 123, 122, 0.08); }
.comp-niveau { letter-spacing: 2px; color: var(--principal); } .comp-niveau-1 { color: var(--encre-2); }
.comp-matieres .comparatif-resume { margin: 8px 0 0; font-size: 0.92rem; color: var(--encre-2); }
@media (max-width: 560px) { .comparatif-table th[scope="row"] { white-space: normal; width: auto; } }