/* ═══════════════════════════════════════════════════════════════════════
   C10 (observation Maxime 2026-07-07) — modale « Nouveau consommable »
   remise à la charte : logo + eyebrow + titre Lato 900 + croix losange
   (grammaire canonique des modales SOMA — pattern .bib-modal cloné, car
   cette modale est injectée dans BODY depuis 2 modules : Devis + Biblio).
   Fichier GLOBAL (index.html) : couvre les 2 contextes sans toucher au
   sanctuaire devis-editor-consommables.css.
   ═══════════════════════════════════════════════════════════════════════ */
.conso-popover-head--charte {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border, rgba(200, 220, 200, .6));
}
.conso-popover-head--charte .brand-mark { flex-shrink: 0; }
.conso-popover-head-info { flex: 1; min-width: 0; }
.conso-popover-head--charte .conso-popover-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #7A9480);
}
/* écrase le vieux titre Lora serif italique (daté — constat Maxime).
   Double classe = spécificité supérieure à .conso-popover-head h2 du module
   (devis-editor-consommables.css, chargé APRÈS cette feuille globale). */
.conso-popover-head.conso-popover-head--charte h2 {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--text, #0D1B0F);
  line-height: 1.2;
  margin: 0;
}
.conso-popover-sub {
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  color: var(--muted, #7A9480);
  line-height: 1.4;
  margin: 0;
  padding: 10px 22px 0;
}

/* croix losange verte — pattern canonique SOMA (4 spans, conteneur 45°) */
.conso-popover-close-x {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 1.5px solid var(--green-border, rgba(47, 191, 122, .30));
  background: rgba(47, 191, 122, .08);
  border-radius: 6px;
  cursor: pointer;
  transform: rotate(45deg);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.conso-popover-close-x:hover {
  background: var(--green, #2FBF7A);
  border-color: var(--green, #2FBF7A);
  transform: rotate(45deg) scale(1.08);
  box-shadow: 0 2px 8px rgba(47, 191, 122, .28);
}
.conso-popover-close-x span {
  position: absolute;
  background: var(--green-dark, #0D6B35);
  border-radius: 1px;
  transition: background .18s ease;
}
.conso-popover-close-x:hover span { background: var(--white, #fff); }
.conso-popover-close-x span:nth-child(1) { top: 8px; left: 50%; width: 2px; height: 7px; transform: translateX(-50%); }
.conso-popover-close-x span:nth-child(2) { bottom: 8px; left: 50%; width: 2px; height: 7px; transform: translateX(-50%); }
.conso-popover-close-x span:nth-child(3) { left: 8px; top: 50%; height: 2px; width: 7px; transform: translateY(-50%); }
.conso-popover-close-x span:nth-child(4) { right: 8px; top: 50%; height: 2px; width: 7px; transform: translateY(-50%); }

/* ── Corps de la modale : champs à la charte (suite C10, retour Maxime
   2026-07-07 soir) — avant : inputs BRUTS du navigateur (bordure grise UA,
   focus bleu système, textarea en police machine). Alignés sur le canonique
   .form-input / .form-select / .form-textarea de global.css (radius 12px,
   halo focus vert). Les champs vivent dans un wrapper flex (le « € » du prix
   est à côté de l'input) → flex:1 + min-width:0 pour qu'il reste visible. */
.conso-popover-body input[type="text"],
.conso-popover-body input[type="number"],
.conso-popover-body select,
.conso-popover-body textarea {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(200, 220, 200, .6));
  border-radius: 12px;
  font-family: 'Lato', sans-serif;
  font-size: 13px;
  color: var(--text, #0D1B0F);
  background: var(--white, #fff);
  outline: none;
  transition: box-shadow .2s, border-color .2s;
  box-sizing: border-box;
}
.conso-popover-body input[type="text"]:focus,
.conso-popover-body input[type="number"]:focus,
.conso-popover-body select:focus,
.conso-popover-body textarea:focus {
  border-color: var(--green, #2FBF7A);
  box-shadow: 0 0 0 3px rgba(26, 110, 60, .15); /* même halo que .form-input:focus */
}
.conso-popover-body textarea { resize: vertical; min-height: 64px; }
.conso-popover-body select { cursor: pointer; }
.conso-popover-body input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  cursor: pointer;
}