/* ==========================================================================
   Thème des espaces CLIENT et FOURNISSEUR — « atelier bois »
   Couleurs : encre (structure), kraft (fond), planche (bois), jaune chantier
   (une seule action principale), vert (validé). Titres en caractères étroits
   façon marquage de palette. Le bandeau du haut porte le seul motif :
   des planches, comme un plateau de palette vu de dessus.
   Chargé APRÈS les styles de la page : il ne change que la présentation.
   ========================================================================== */
:root{
  --encre:#12263a; --encre2:#1d3a55; --kraft:#f6efe2; --kraft2:#efe4d0;
  --planche:#c99a5b; --planche2:#a8773d; --jaune:#f2b705; --vert:#2e7d4f;
  --texte:#1c2430; --gris:#6b6357; --trait:#e4d8c3;
  --titre:'Bahnschrift','DIN Alternate','Roboto Condensed','sans-serif-condensed','Arial Narrow',Inter,sans-serif;
}
body.esp{background:var(--kraft)!important;color:var(--texte)}
body.esp ::selection{background:var(--jaune);color:var(--encre)}

/* ---------- Bandeau du haut : plateau de planches ---------- */
body.esp .cxTop, body.esp .fxTop{
  background:
    repeating-linear-gradient(180deg,transparent 0 21px,rgba(0,0,0,.22) 21px 22px,rgba(255,255,255,.05) 22px 23px),
    linear-gradient(90deg,var(--encre),var(--encre2))!important;
  box-shadow:none!important;border-bottom:5px solid var(--planche);
}
body.esp .cxTop img, body.esp .fxTop img{border-radius:8px}
body.esp .cxBrand b, body.esp .fxBrand b{font-family:var(--titre);font-weight:700;letter-spacing:.03em;font-size:17px}
body.esp .cxBrand span, body.esp .fxBrand span{color:#d9cdb8}
.espMono{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:8px;background:var(--planche);color:var(--encre);font:700 18px/1 var(--titre);flex-shrink:0;letter-spacing:.02em}

/* ---------- Titres ---------- */
body.esp h1, body.esp h2, body.esp h3, body.esp .cxSecHead h2{font-family:var(--titre);font-weight:700;letter-spacing:.01em;color:inherit}
body.esp .cxSecHead h2{color:var(--encre);font-size:21px}
body.esp .cxSecHead h2::after{content:'';display:block;width:42px;height:4px;margin-top:6px;background:var(--planche);border-radius:2px}

/* ---------- Grands bandeaux (accueil) : sobres, sans halo ---------- */
body.esp .cxHero, body.esp .cxPublicHero, body.esp .fxHero, body.esp .cxContact{
  background:var(--encre)!important;box-shadow:none!important;border-radius:12px;
  border-left:8px solid var(--planche);
}
body.esp .cxHero:after, body.esp .cxPublicHero:after{display:none}
body.esp .cxPublicHero{padding:38px 34px}
body.esp .cxPublicHero h1{font-family:var(--titre);font-weight:700;font-size:clamp(28px,4.6vw,46px);line-height:1.04;letter-spacing:.005em;max-width:820px}
body.esp .cxPublicHero .kick{text-transform:none;letter-spacing:.02em;font-size:13px;color:var(--planche);font-weight:700}
body.esp .cxHero p, body.esp .cxPublicHero p, body.esp .fxHero p{color:#d9e2ec}
body.esp .cxHero .cxPill{background:transparent;border-color:rgba(255,255,255,.35)}

/* ---------- Cartes : bord fin, pas d'ombre, coin réduit ---------- */
body.esp .cxCard, body.esp .fxCard, body.esp .cxItem, body.esp .fxItem, body.esp .prodCard,
body.esp .cxEng, body.esp .cxReview, body.esp .cxStat, body.esp .cxPartners{
  border:1px solid var(--trait)!important;box-shadow:none!important;border-radius:10px;
}
body.esp .prodCard:hover{transform:none;border-color:var(--planche)!important}
body.esp .prodImg{background:repeating-linear-gradient(180deg,var(--kraft2) 0 26px,#e8dcc6 26px 28px)}
body.esp .prodBody .pr{color:var(--encre);font-family:var(--titre);font-size:19px}
body.esp .cxStat{border-left:6px solid var(--planche)!important}
body.esp .cxStat b{font-family:var(--titre);color:var(--encre);font-size:26px}
body.esp .cxStat span{text-transform:none;letter-spacing:0;font-size:12px;color:var(--gris);font-weight:600}
body.esp .cxEng .ic{background:var(--kraft2);color:var(--vert)}

/* ---------- Onglets : barre soulignée, défilante sur téléphone ---------- */
body.esp .cxTabs, body.esp .fxTabs{
  background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;
  border-bottom:2px solid var(--trait)!important;border-radius:0;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none
}
body.esp .cxTabs::-webkit-scrollbar, body.esp .fxTabs::-webkit-scrollbar{display:none}
body.esp .cxTab, body.esp .fxTab{border-radius:0!important;padding:12px 14px!important;color:var(--gris);font-weight:700;white-space:nowrap;
  border-bottom:4px solid transparent!important;margin-bottom:-2px;background:transparent!important;box-shadow:none!important}
body.esp .cxTab:hover, body.esp .fxTab:hover{color:var(--encre)}
body.esp .cxTab.on, body.esp .fxTab.on{color:var(--encre)!important;border-bottom-color:var(--jaune)!important}

/* ---------- Boutons : une couleur par rôle ---------- */
body.esp .cxBtn, body.esp .fxBtn{border-radius:8px;box-shadow:none!important;font-weight:800}
body.esp .cxBtn.primary, body.esp .fxBtn.dark{background:var(--encre)!important;color:#fff!important}
body.esp .cxBtn.gold, body.esp .fxBtn.gold, body.esp .fxBtn.primary, body.esp .cxContact .cxBtn{background:var(--jaune)!important;color:var(--encre)!important}
body.esp .cxBtn.ghost, body.esp .fxBtn.ghost{background:#fff!important;border:1px solid var(--trait)!important;color:var(--texte)!important}
body.esp .cxBtn:focus-visible, body.esp .fxBtn:focus-visible, body.esp .cxTab:focus-visible, body.esp .fxTab:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}

/* ---------- Formulaires : libellés en minuscules, champs nets ---------- */
body.esp .cxField label, body.esp .fxField label, body.esp #cxContactOv .cxField label{text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:700!important;color:var(--texte)!important}
body.esp .cxField input, body.esp .cxField select, body.esp .cxField textarea,
body.esp .fxField input, body.esp .fxField select, body.esp .fxField textarea{border-color:#d6c9b2;border-radius:8px}
body.esp .cxField input:focus, body.esp .cxField select:focus, body.esp .cxField textarea:focus,
body.esp .fxField input:focus, body.esp .fxField textarea:focus{border-color:var(--encre)!important;box-shadow:0 0 0 3px rgba(242,183,5,.35)!important}
body.esp .cxAuthTabs, body.esp .fxAuthTabs{background:var(--kraft2)}
body.esp .cxAuthTabs button.on, body.esp .fxAuthTabs button.on{color:var(--encre);box-shadow:none;border:1px solid var(--trait)}

/* ---------- Messages ---------- */
body.esp .cxThread, body.esp .fxThread{background:var(--kraft);border-color:var(--trait)}
body.esp .cxMsg.client, body.esp .fxMsg.mine{background:var(--encre)!important}
body.esp .cxMsg .who, body.esp .fxMsg .who{text-transform:none;letter-spacing:0;font-size:11px}

/* ---------- Tableaux ---------- */
body.esp .fxTable th{background:var(--kraft2);text-transform:none;letter-spacing:0;font-size:12px;color:var(--texte)}

/* ---------- Résumé fournisseur ---------- */
.fxResume{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.fxResume div{background:#fff;border:1px solid var(--trait);border-left:6px solid var(--planche);border-radius:10px;padding:10px 12px}
.fxResume b{display:block;font:700 24px/1.1 var(--titre);color:var(--encre)}
.fxResume span{font-size:12.5px;color:var(--gris)}
.fxResume .alerte{border-left-color:var(--jaune)}

body.esp .cxFoot{color:var(--gris)}
@media (prefers-reduced-motion:reduce){body.esp *{animation:none!important;transition:none!important}}
@media(max-width:640px){
  body.esp .cxPublicHero{padding:26px 20px}
  body.esp .cxTab, body.esp .fxTab{padding:11px 12px!important}
}
/* Bandeaux dessinés directement dans le code de la page (dégradés bleus d'origine). */
body.esp [style*="linear-gradient(135deg,#0b3a6f,#0e7490)"],
body.esp [style*="linear-gradient(135deg,#0b3a6f,#1b5fa8"]{background:var(--encre)!important;box-shadow:none!important}