/* Vertimat · Pièces détachées — charte du logo : noir + rouge (dégradé rouge sombre -> rouge vif) */
:root {
  --nuit:#151515; --nuit-2:#2b2b2b; --orange:#d8121b; --orange-2:#9e0b10;
  --degrade: linear-gradient(90deg, #8e0a0a 0%, #b40d0d 55%, #f01212 100%);
  --fond:#f2f4f7; --carte:#ffffff; --bord:#dfe4ea; --texte:#18222d; --gris:#667381;
  --ok:#1f8a4c; --warn:#b26a00; --ko:#c0392b; --violet:#5b2d9a; --rayon:12px;
}
* { box-sizing:border-box; }
body { margin:0; font:15px/1.5 "Segoe UI", Inter, Roboto, Arial, sans-serif; color:var(--texte); background:var(--fond); }
a { color:var(--nuit-2); }

/* ---------- en-tête ---------- */
.bandeau { background:#fff; color:var(--nuit); border-bottom:4px solid transparent; border-image:var(--degrade) 1; }
.bandeau .ligne { max-width:1320px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:28px; }
.marque { display:flex; align-items:center; gap:12px; color:var(--nuit); text-decoration:none; white-space:nowrap; }
.marque img { height:30px; display:block; }
.marque .module { font-size:12px; color:var(--gris); border-left:2px solid var(--bord); padding-left:12px; line-height:1.2; }
.marque .pastille { width:38px; height:38px; border-radius:10px; background:var(--orange); display:grid; place-items:center; font-weight:800; font-size:20px; color:var(--nuit); }
.marque b { font-size:17px; display:block; line-height:1.1; } .marque small { opacity:.75; font-size:12px; }
.recherche-globale { flex:1; display:flex; background:#f4f5f6; border:1px solid var(--bord); border-radius:999px; padding:4px 4px 4px 18px; max-width:640px; }
.recherche-globale input { flex:1; border:none; outline:none; font-size:15px; min-width:0; background:transparent; }
.recherche-globale button { border-radius:999px; background:var(--degrade); border:none; color:#fff; font-weight:700; padding:8px 18px; }
.panier { margin-left:auto; color:var(--nuit); text-decoration:none; display:flex; align-items:center; gap:8px; font-weight:600; }
.panier .compteur { background:var(--orange); color:#fff; border-radius:999px; min-width:22px; height:22px; display:grid; place-items:center; font-size:12px; font-weight:800; padding:0 6px; }
.menu { background:var(--nuit); }
.menu nav { max-width:1320px; margin:0 auto; padding:0 20px; display:flex; gap:26px; }
.menu a { display:block; padding:12px 0; color:#e9e9e9; text-decoration:none; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.4px; border-bottom:3px solid transparent; }
.menu a.actif, .menu a:hover { border-bottom-color:var(--orange); color:#fff; }

main { max-width:1320px; margin:0 auto; padding:18px 20px 40px; }
.ariane { font-size:13px; color:var(--gris); margin-bottom:10px; } .ariane a { color:var(--gris); text-decoration:none; } .ariane a:hover { color:var(--nuit); }
h1 { font-size:28px; color:var(--nuit); margin:0 0 14px; font-weight:700; }
h2 { font-size:20px; color:var(--nuit); margin:26px 0 12px; } h3 { font-size:15px; margin:0; }
.sous-titre { color:var(--gris); margin:-8px 0 16px; }

/* ---------- blocs ---------- */
.carte { background:var(--carte); border:1px solid var(--bord); border-radius:var(--rayon); padding:16px 18px; margin-bottom:16px; }
.alerte { background:#fff6ea; border:1px solid #f4d3a6; padding:10px 14px; border-radius:10px; margin:10px 0; }
.alerte.ko { background:#fdecea; border-color:#f3b8b1; color:var(--ko); }
.muted { color:var(--gris); font-size:13px; }
.ref { font-family:Consolas, "Cascadia Mono", monospace; font-weight:600; letter-spacing:.2px; }

/* ---------- formulaires ---------- */
form.filtres { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
form.filtres label { display:flex; flex-direction:column; font-size:12px; color:var(--gris); gap:4px; font-weight:600; }
input, select { font:inherit; padding:8px 10px; border:1px solid var(--bord); border-radius:8px; background:#fff; min-width:130px; }
input:focus, select:focus { outline:2px solid #f6b3b6; border-color:var(--orange); }
button, .bouton { font:inherit; font-weight:600; padding:8px 16px; border-radius:8px; border:1px solid var(--nuit); background:var(--nuit); color:#fff; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
button:hover, .bouton:hover { background:var(--nuit-2); }
button.secondaire, .bouton.secondaire { background:#fff; color:var(--nuit); }
button.orange { background:var(--degrade); border-color:var(--orange-2); color:#fff; } button.orange:hover { background:var(--orange-2); }
button:disabled { opacity:.45; cursor:not-allowed; }
.lien { background:none; border:none; color:var(--nuit-2); text-decoration:underline; padding:0; font-weight:600; cursor:pointer; }

/* ---------- étiquettes ---------- */
.badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; background:#eef1f5; color:#3b4856; }
.badge.origine { background:#efe7fb; color:var(--violet); } .badge.adaptable { background:#e6f2ff; color:#1d5fa3; }
.badge.obsolete { background:#fdecea; color:var(--ko); } .badge.sous { text-transform:none; font-weight:600; }
.dispo { font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.dispo.ok { color:var(--ok); } .dispo.warn { color:var(--warn); } .dispo.ko { color:var(--ko); }
.dispo::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }

/* ---------- carte produit (grille) ---------- */
.grille { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.produit { background:#fff; border:1px solid var(--bord); border-radius:var(--rayon); display:flex; flex-direction:column; overflow:hidden; transition:box-shadow .15s; }
.produit:hover { box-shadow:0 6px 20px rgba(15,42,68,.10); }
.produit .visuel { position:relative; height:170px; background:#fff; border-bottom:1px solid #eef1f4; display:grid; place-items:center; }
.produit .visuel img { max-width:85%; max-height:150px; object-fit:contain; }
.produit .etiquettes { position:absolute; top:10px; left:10px; display:flex; gap:4px; }
.produit .corps { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.produit .surtitre { font-size:12px; color:var(--gris); text-transform:uppercase; letter-spacing:.4px; }
.produit .titre { font-size:16px; font-weight:700; color:var(--nuit); line-height:1.25; text-decoration:none; }
.produit .titre:hover { text-decoration:underline; }
.produit .equiv { font-size:12.5px; color:var(--gris); }
.prix-bloc .prix { font-size:22px; font-weight:800; color:var(--nuit); } .prix-bloc .ht { font-size:12px; color:var(--gris); font-weight:600; }
.prix-bloc .achat { font-size:12px; color:var(--gris); font-style:italic; }
.ajout { display:flex; gap:8px; align-items:center; margin-top:auto; padding-top:8px; }
.stepper { display:flex; align-items:center; border:2px solid var(--nuit); border-radius:8px; overflow:hidden; height:38px; }
.stepper button { background:#fff; color:var(--nuit); border:none; border-radius:0; padding:0 10px; height:100%; font-size:16px; }
.stepper input { border:none; width:42px; min-width:0; text-align:center; padding:0; height:100%; font-weight:700; }
.ajout .btn-ajout { height:38px; }
.remplace { color:var(--ko); font-size:13px; font-weight:600; }

/* ---------- offre compacte (dans les nomenclatures) ---------- */
.offre { display:grid; grid-template-columns:52px minmax(200px,1fr) auto auto; gap:12px; align-items:center; padding:8px 0; border-top:1px dashed #e8ecf0; }
.offre:first-child { border-top:none; }
.offre img { width:52px; height:52px; object-fit:contain; background:#fff; border:1px solid var(--bord); border-radius:8px; }
.offre .prix-bloc { text-align:right; } .offre .prix-bloc .prix { font-size:17px; }

/* ---------- tableaux ---------- */
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--bord); vertical-align:top; }
th { font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--gris); font-weight:700; background:#f7f9fb; }
tr.hors-serie td { opacity:.4; }
.specs { border:1px solid var(--bord); border-radius:var(--rayon); overflow:hidden; } .specs th { width:40%; background:#fafbfc; text-transform:none; font-size:14px; color:var(--texte); }

/* ---------- fiche produit ---------- */
.fiche { display:grid; grid-template-columns: minmax(300px, 1fr) 1.1fr; gap:28px; }
.galerie .principale { background:#fff; border:1px solid var(--bord); border-radius:var(--rayon); height:380px; display:grid; place-items:center; position:relative; }
.galerie .principale img { max-width:90%; max-height:350px; object-fit:contain; }
.galerie .vignettes { display:flex; gap:8px; margin-top:10px; }
.galerie .vignettes img { width:72px; height:72px; object-fit:contain; background:#fff; border:2px solid var(--bord); border-radius:8px; cursor:pointer; }
.galerie .vignettes img.active { border-color:var(--orange); }
.fiche .marque-ref { color:var(--gris); font-size:14px; } .fiche h1 { font-size:32px; margin:4px 0 10px; }
.fiche .prix-bloc .prix { font-size:34px; }
.encadre { background:#fff; border:1px solid var(--bord); border-radius:10px; padding:10px 14px; text-align:center; margin:12px 0; }

/* ---------- figure ---------- */
.grille-figure { display:grid; grid-template-columns: minmax(320px, 44%) 1fr; gap:18px; align-items:start; }
.schema { position:sticky; top:12px; }
.schema img { width:100%; border:1px solid var(--bord); border-radius:var(--rayon); background:#fff; cursor:zoom-in; }
.schema img.zoom { position:fixed; inset:2%; width:96%; height:96%; object-fit:contain; z-index:10; cursor:zoom-out; box-shadow:0 0 0 100vmax rgba(0,0,0,.65); }
.liste-figures a { text-decoration:none; color:inherit; display:flex; justify-content:space-between; gap:12px; padding:7px 10px; border-radius:8px; }
.liste-figures a:hover { background:#fdeced; }
.onglets { display:flex; gap:24px; border-bottom:1px solid var(--bord); margin-bottom:16px; }
.onglets a { padding:8px 0; text-decoration:none; color:var(--gris); font-weight:600; border-bottom:3px solid transparent; }
.onglets a.actif { color:var(--nuit); border-bottom-color:var(--orange); }
.total { font-size:22px; font-weight:800; text-align:right; color:var(--nuit); }
@media (max-width: 950px) { .grille-figure, .fiche { grid-template-columns: 1fr; } .schema { position:static; } .bandeau .ligne { flex-wrap:wrap; } }

.prix-bloc .marge { font-size:12px; color:var(--ok); font-weight:600; }
.prix-bloc .marge b { font-weight:800; }
.ligne-devis { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.saisie-prix input.pu { width:120px; min-width:0; text-align:right; font-weight:700; font-size:15px; }
.saisie-prix input.pu.force { border-color:var(--orange); background:#fff1f1; }
.marge-ligne { color:var(--ok); font-weight:700; } .marge-ligne.neg { color:var(--ko); }
.marge-ligne .pct { font-weight:600; font-size:12px; }
.offre .prix-bloc { min-width:150px; } .offre .prix { cursor:help; }
.ref.vref { background:#151515; color:#fff; padding:1px 6px; border-radius:4px; font-size:12px; letter-spacing:.4px; }

/* bandeau d'actualisation des prix */
.maj-prix { position: fixed; right: 18px; bottom: 18px; z-index: 50; background: var(--nuit); color: #fff;
  padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25); font-size: 14px; max-width: 420px; }
.maj-prix button { margin-left: 8px; background: var(--degrade); color: #fff; border: 0; border-radius: 5px; padding: 5px 10px; cursor: pointer; }
.maj-prix.erreur { background: #6b0b0b; }

/* devis */
.entete-devis { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.entete-devis h1 { margin-bottom:4px; }
.entete-devis .actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.entete-devis .actions form { margin:0; }
a.bouton { display:inline-block; padding:8px 14px; border-radius:6px; text-decoration:none; font-weight:600; }
a.bouton.orange { background:var(--degrade); color:#fff; }
a.bouton.secondaire { border:1px solid var(--bord); color:inherit; background:#fff; }
.badge.statut { font-size:13px; vertical-align:middle; padding:3px 9px; border-radius:20px; font-weight:600; }
.badge.statut.brouillon { background:#eee; color:#444; }
.badge.statut.actif { background:#fde8e8; color:#b40d0d; }
.badge.statut.odoo { background:#e5f4ea; color:#1d6b38; }
.grille-devis { display:grid; grid-template-columns: 1.3fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width: 900px) { .grille-devis { grid-template-columns:1fr; } }
.client-choisi { font-size:16px; margin-bottom:8px; }
.choix-client input#recherche-client { width:100%; padding:9px 11px; border:1px solid var(--bord); border-radius:6px; font-size:14px; }
.resultats-client { display:flex; flex-direction:column; max-height:260px; overflow:auto; margin-top:6px; }
.resultats-client button { text-align:left; background:#fff; border:0; border-bottom:1px solid var(--bord); padding:8px 6px; cursor:pointer; }
.resultats-client button:hover { background:#fdf1f1; }
.nouveau-client { margin-top:12px; }
.nouveau-client summary { cursor:pointer; font-weight:600; color:var(--orange); }
.formulaire { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:8px; }
.formulaire label { display:flex; flex-direction:column; font-size:13px; color:#555; gap:3px; }
.formulaire input, .formulaire textarea { padding:7px 9px; border:1px solid var(--bord); border-radius:6px; font:inherit; }
.formulaire button, .formulaire .muted { grid-column: 1 / -1; justify-self:start; }
.carte .formulaire:has(textarea) { grid-template-columns:1fr; }
.pied-devis { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.pied-devis form { margin:0; }
.alerte { padding:10px 14px; border-radius:8px; margin-bottom:12px; font-weight:600; }
.alerte.erreur { background:#fde8e8; color:#8e0a0a; }
.alerte.ok { background:#e5f4ea; color:#1d6b38; }

.badge.local { background:#151515; color:#fff; }

/* devis actif dans l'en-tête */
.devis-entete { display:flex; align-items:center; gap:10px; margin-left:auto; }
.devis-entete form { margin:0; }
.devis-entete .panier { display:flex; align-items:center; gap:8px; margin-left:0; }
.devis-entete .dv-num { display:flex; flex-direction:column; line-height:1.15; font-size:13px; }
.devis-entete .dv-num small { font-size:11px; opacity:.75; font-weight:400; }
.devis-entete .dv-aucun { color:#bbb; font-size:13px; }
.devis-entete .dv-nouveau { background:var(--degrade); color:#fff; border:0; border-radius:6px; padding:8px 12px; font-weight:600; cursor:pointer; white-space:nowrap; }

/* vue par machine : réf. constructeur */
.onglets { display:flex; gap:4px; margin:6px 0 12px; border-bottom:2px solid var(--bord); }
.onglets a { padding:9px 16px; text-decoration:none; color:#555; font-weight:600; border-bottom:3px solid transparent; margin-bottom:-2px; }
.onglets a.actif { color:var(--orange); border-color:var(--orange); }
.puces-familles { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.puces-familles a { padding:5px 10px; border:1px solid var(--bord); border-radius:20px; text-decoration:none; color:var(--nuit); font-size:13px; background:#fff; }
.puces-familles a span { color:#888; font-size:12px; }
.puces-familles a.actif { background:var(--nuit); color:#fff; border-color:var(--nuit); }
.puces-familles a.actif span { color:#ddd; }
.refs-machine td { vertical-align:top; }
.refs-machine .offre { padding:6px 0; }
.pagination { display:flex; gap:6px; justify-content:center; margin:16px 0; flex-wrap:wrap; }
.pagination a, .pagination span { padding:6px 11px; border:1px solid var(--bord); border-radius:6px; text-decoration:none; color:var(--nuit); background:#fff; }
.pagination a.actif { background:var(--nuit); color:#fff; }

/* catalogue */
.tuiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px; margin-top:14px; }
.tuile { background:#fff; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,.08); text-decoration:none; color:var(--nuit); display:flex; flex-direction:column; overflow:hidden; transition:box-shadow .15s; }
.tuile:hover { box-shadow:0 4px 16px rgba(0,0,0,.15); }
.tuile-img { height:160px; display:grid; place-items:center; background:#fff; }
.tuile-img img { max-height:140px; max-width:85%; object-fit:contain; }
.tuile-nom { padding:12px 16px 16px; display:flex; flex-direction:column; gap:4px; font-size:17px; font-weight:600; }
.tuile-nom .muted { font-size:13px; font-weight:400; color:var(--orange); }
.catalogue { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:start; }
@media (max-width: 900px) { .catalogue { grid-template-columns:1fr; } }
.facettes { position:sticky; top:10px; max-height:calc(100vh - 20px); overflow:auto; }
.facettes h3 { font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin:16px 0 6px; color:#555; border-top:1px solid var(--bord); padding-top:12px; }
.facettes h3:first-child { border-top:0; padding-top:0; margin-top:0; }
.facettes a { display:block; padding:3px 0; color:var(--nuit); text-decoration:none; font-size:14px; }
.facettes a span { color:#999; font-size:12px; }
.facettes a.actif { color:var(--orange); font-weight:700; }
.facettes a:hover { color:var(--orange); }

.lien-fiche { font-size:12px; color:#1a5fb4; text-decoration:none; white-space:nowrap; }
.lien-fiche:hover { text-decoration:underline; }

/* liste des clients Odoo : texte lisible */
.resultats-client button { color:var(--nuit) !important; font-weight:400; display:flex; flex-direction:column; gap:2px; width:100%; }
.resultats-client button b { color:var(--nuit); font-weight:700; }
.resultats-client button .muted { color:#666 !important; font-size:12px; }
.resultats-client { border:1px solid var(--bord); border-radius:6px; background:#fff; }
.resultats-client:empty { display:none; }

/* en-tête toujours visible */
.entete-fixe { position:sticky; top:0; z-index:60; }
.schema { top:132px !important; }
.facettes { top:132px !important; max-height:calc(100vh - 145px) !important; }
/* offre compacte : le bouton Ajouter passe sous la ligne au lieu d'être coupé */
.offre { grid-template-columns:52px minmax(0,1fr) auto; }
.offre .ajout { grid-column: 2 / -1; justify-self:end; padding-top:0; margin-top:0; }

.retirer { background:#fff; color:var(--ko); border:1px solid #e3b4b4; padding:6px 10px; font-size:13px; }
.retirer:hover { background:#fde8e8; }

/* compte connecté */
.compte { display:flex; align-items:center; gap:8px; font-size:13px; }
.compte form { margin:0; }
.compte-nom { font-weight:700; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compte-admin { color:var(--orange); font-weight:600; text-decoration:none; }
.compte-sortie { padding:5px 10px !important; font-size:12px; }
/* page de connexion */
.connexion { max-width:400px; margin:70px auto; }
.connexion img { height:38px; display:block; margin:0 auto 18px; }
.connexion form { display:flex; flex-direction:column; gap:12px; }
.connexion label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:#555; }
.connexion input { padding:10px 12px; border:1px solid var(--bord); border-radius:8px; font-size:15px; }

.badge.verifier { background:#fff4d6; color:#8a5a00; border:1px solid #f0c96a; }