/* =====================================================================
   finamux — Feuille de style
   Charte : bleu profond (#0C2A4D) + bleu vif (#2E7CD6) + blanc
   ===================================================================== */

:root {
  --bleu-profond: #0C2A4D;
  --bleu-vif:     #2E7CD6;
  --bleu-clair:   #6BA3E0;
  --bleu-pale:    #A9C5E6;
  --vert-croissance: #16C784;
  --gris-bg:      #F4F7FB;
  --gris-bord:    #E7EDF5;
  --gris-texte:   #7A8694;
  --gris-fonce:   #1F2A37;
  --blanc:        #FFFFFF;
  --radius:       12px;
  --ombre:        0 2px 14px rgba(12, 42, 77, 0.08);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--gris-fonce);
  background: var(--blanc);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu-vif); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Sélecteur de langue ---- */
.lang-switch {
  position: absolute; top: 18px; right: 22px;
  display: flex; gap: 6px; align-items: center;
  font-size: 13px; z-index: 10;
}
.lang-switch a {
  padding: 4px 9px; border-radius: 20px; color: var(--gris-texte);
}
.lang-switch a.actif { background: var(--bleu-vif); color: #fff; }

/* ============ Page « bientôt disponible » ============ */
.soon-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
@media (max-width: 820px) {
  .soon-wrap { grid-template-columns: 1fr; }
  .soon-left { min-height: 42vh; }
}

.soon-left {
  background: linear-gradient(150deg, #0C2A4D 0%, #14386A 100%);
  color: #fff;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
}
.soon-brand { display: flex; align-items: center; gap: 12px; }
.soon-logo {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--bleu-vif);
  display: flex; align-items: center; justify-content: center;
}
.soon-logo svg { width: 26px; height: 26px; }
.soon-name { font-size: 22px; font-weight: 600; letter-spacing: 0.3px; }
.soon-tagline {
  font-size: 11px; color: var(--bleu-pale); letter-spacing: 2px;
  text-transform: uppercase; margin-top: 2px;
}
.soon-hero { margin: auto 0; padding: 30px 0; }
.soon-hero h1 { font-size: 30px; font-weight: 600; line-height: 1.3; }
.soon-hero p { font-size: 15px; color: var(--bleu-pale); margin-top: 16px; max-width: 360px; }
.soon-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.soon-badge {
  font-size: 12px; background: rgba(255,255,255,0.1);
  padding: 7px 13px; border-radius: 20px;
}
.soon-foot { font-size: 12px; color: #6E8DB0; }

.soon-right {
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: center;
}
.soon-form-label { font-size: 17px; font-weight: 600; color: var(--bleu-profond); }
.soon-form { display: flex; gap: 10px; margin-top: 18px; max-width: 420px; }
@media (max-width: 460px) { .soon-form { flex-direction: column; } }

input[type="email"], input[type="password"], input[type="text"] {
  flex: 1; font-size: 15px; padding: 12px 14px;
  border: 1px solid var(--gris-bord); border-radius: 9px;
  font-family: inherit; color: var(--gris-fonce);
}
input:focus {
  outline: none; border-color: var(--bleu-vif);
  box-shadow: 0 0 0 3px rgba(46,124,214,0.14);
}

.btn {
  font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 12px 22px; border-radius: 9px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--bleu-profond); color: #fff; }
.btn-primary:hover { background: #16386a; }
.btn-block { width: 100%; }

.soon-msg { margin-top: 14px; font-size: 14px; min-height: 20px; }
.soon-msg.ok  { color: var(--vert-croissance); }
.soon-msg.err { color: #D85A30; }

/* ============ Module d'extraction (test) ============ */
.extract-page { max-width: 1040px; margin: 0 auto; padding: 30px 22px; }
.extract-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.extract-head .soon-logo { width: 38px; height: 38px; }
.extract-head h2 { font-size: 20px; color: var(--bleu-profond); }

.dropzone {
  border: 2px dashed var(--bleu-clair); border-radius: var(--radius);
  background: var(--gris-bg); padding: 40px; text-align: center;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.drag { background: #ECF3FB; border-color: var(--bleu-vif); }
.dropzone i { font-size: 38px; color: var(--bleu-vif); }
.dropzone p { color: var(--gris-texte); margin-top: 10px; font-size: 14px; }

.extract-result { display: none; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.extract-result.show { display: grid; }
@media (max-width: 760px) { .extract-result.show { grid-template-columns: 1fr; } }

.panel {
  border: 1px solid var(--gris-bord); border-radius: var(--radius);
  padding: 16px; background: #fff;
}
.panel h3 { font-size: 13px; color: var(--gris-texte); font-weight: 500; margin-bottom: 12px; }
.panel-original img, .panel-original embed { width: 100%; border-radius: 8px; border: 1px solid var(--gris-bord); }

.field { margin-bottom: 11px; }
.field label { font-size: 12px; color: var(--gris-texte); display: block; margin-bottom: 4px; }
.field .val {
  border: 1px solid var(--gris-bord); border-radius: 8px;
  padding: 9px 11px; font-size: 14px; background: #fff;
}
.field .val.ttc { background: #EAF2FB; border-color: var(--bleu-clair); color: var(--bleu-profond); font-weight: 600; }
.row2 { display: flex; gap: 10px; }
.row2 .field { flex: 1; }

.badge-conf {
  font-size: 12px; padding: 3px 10px; border-radius: 20px;
  background: #E6F7F0; color: #0B8C5E; margin-left: auto;
}
.panel-head { display: flex; align-items: center; }

.fne-ok  { display:flex; gap:8px; align-items:center; background:#E6F7F0; color:#0B8C5E; padding:8px 11px; border-radius:8px; font-size:13px; }
.fne-no  { display:flex; gap:8px; align-items:center; background:#FBEEE8; color:#B45309; padding:8px 11px; border-radius:8px; font-size:13px; }

.loader { display:none; text-align:center; padding:30px; color:var(--gris-texte); }
.loader.show { display:block; }
.spinner {
  width: 34px; height: 34px; border: 3px solid var(--gris-bord);
  border-top-color: var(--bleu-vif); border-radius: 50%;
  margin: 0 auto 12px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  * { transition: none !important; }
}

/* Champ signalé comme à vérifier (incohérence détectée) */
.val.warn, input.val.warn { border-color: #E0922F !important; background: #FDF6EC !important; box-shadow: 0 0 0 3px rgba(224,146,47,0.10); }
.warn-note { font-size: 12px; color: #B45309; margin-top: 4px; display: flex; align-items: center; gap: 5px; }

/* ============ Menu latéral ============ */
.fmx-layout { display: flex; min-height: calc(100vh - 58px); }
.fmx-sidebar {
  width: 210px; background: #fff; border-right: 1px solid var(--gris-bord);
  padding: 16px 10px; flex-shrink: 0;
}
.fmx-nav-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 9px; color: var(--gris-fonce); text-decoration: none;
  font-size: 14px; margin-bottom: 3px; position: relative;
}
.fmx-nav-item:hover { background: var(--gris-bg); text-decoration: none; }
.fmx-nav-item.actif { background: #EAF2FB; color: var(--bleu-profond); font-weight: 500; }
.fmx-nav-item.actif i { color: var(--bleu-vif); }
.fmx-nav-item i { font-size: 19px; color: var(--gris-texte); }
.fmx-nav-item.soon { color: var(--bleu-pale); cursor: default; }
.fmx-nav-item.soon i { color: var(--bleu-pale); }
.fmx-nav-item .soon-tag {
  position: absolute; right: 8px; font-size: 9px; font-style: normal;
  background: var(--gris-bg); color: var(--gris-texte);
  padding: 2px 6px; border-radius: 10px;
}
.fmx-main { flex: 1; padding: 24px 26px; min-width: 0; }
@media (max-width: 720px) {
  .fmx-layout { flex-direction: column; }
  .fmx-sidebar { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; border-right: none; border-bottom: 1px solid var(--gris-bord); }
  .fmx-nav-item { flex-direction: column; font-size: 11px; padding: 8px; gap: 4px; }
  .fmx-nav-item .soon-tag { display: none; }
}

/* =====================================================================
   APPLICATION — Refonte (sidebar verticale + en-tête unifié)
   Typo : Sora (titres) + Inter (corps). Charte bleu profond finamux.
   ===================================================================== */
.app-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #F1F5FA; color: var(--gris-fonce); margin: 0;
}
.app-shell { display: flex; min-height: 100vh; }

/* ---- Sidebar (relief moderne) ---- */
.app-sidebar {
  width: 210px;
  background: linear-gradient(160deg,#103257 0%,#0C2A4D 42%,#081C36 100%);
  color: #fff; display: flex; flex-direction: column; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
  box-shadow: 3px 0 18px rgba(6,20,40,0.28), inset -1px 0 0 rgba(255,255,255,0.04);
}
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 15px 16px 13px; text-decoration:none; }
.sb-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(145deg,#3E8BE6 0%,#2468BE 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px rgba(36,104,190,0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.sb-logo svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)); }
.sb-name { font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.3px;
  background: linear-gradient(180deg,#fff 30%,#CFE0F2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.sb-nav { flex: 1; padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.sb-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 12px;
  border-radius: 9px; color: #AFC4DD; text-decoration: none; font-size: 13.5px;
  font-weight: 500; position: relative;
  transition: background .16s, color .16s, box-shadow .16s, transform .1s;
}
.sb-item:hover {
  background: rgba(255,255,255,0.08); color: #fff; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.sb-item:active { transform: translateY(1px); }
.sb-item.actif {
  background: linear-gradient(145deg,#3E8BE6 0%,#2468BE 100%); color: #fff;
  box-shadow: 0 5px 14px rgba(36,104,190,0.42), inset 0 1px 0 rgba(255,255,255,0.28);
}
.sb-item.actif i { color: #fff; }
.sb-item i { font-size: 18px; color: #7C99BC; transition: color .16s; }
.sb-item:hover i { color: #CFE0F2; }
.sb-item.actif i { color:#fff; }
.sb-item.soon { color: #566F8E; opacity: .6; cursor: default; }
.sb-item.soon:hover { background: transparent; box-shadow: none; }
.sb-item.soon:hover i { color: #566F8E; }
.sb-soon {
  position: absolute; right: 10px; font-style: normal; font-size: 9px;
  background: rgba(255,255,255,0.12); padding: 2px 7px; border-radius: 10px; color: #9FB6D4;
}
.sb-foot { padding: 11px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.sb-tagline { font-size: 10px; color: #6E8BAE; letter-spacing: 1px; text-transform: uppercase; }

/* ---- Contenu ---- */
.app-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* En-tête unifié (relief moderne) */
.app-header {
  height: 66px;
  background: linear-gradient(180deg,#FFFFFF 0%,#FBFCFE 100%);
  border-bottom: 1px solid #E4EBF3;
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 2px 10px rgba(12,42,77,0.05);
}
.hdr-burger { display: none; background: none; border: none; font-size: 22px; color: var(--bleu-profond); cursor: pointer; }
.hdr-search {
  flex: 1; max-width: 520px; display: flex; align-items: center; gap: 9px;
  background: #F3F7FB;
  border: 1px solid #E1E9F2; border-radius: 12px; padding: 10px 14px;
  box-shadow: inset 0 1px 2px rgba(12,42,77,0.05);
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.hdr-search:focus-within {
  background: #fff; border-color: #9EC2EC;
  box-shadow: 0 0 0 3px rgba(46,124,214,0.12), inset 0 1px 2px rgba(12,42,77,0.03);
}
.hdr-search i { color: #7E97B4; font-size: 18px; }
.hdr-search input { border: none; background: none; outline: none; flex: 1; font-size: 14px; font-family: inherit; color: var(--gris-fonce); }
.hdr-search-hint {
  font-size: 11px; color: #9DB0C7; background: #E9EFF6; border: 1px solid #DCE6F1;
  border-radius: 6px; padding: 1px 6px; font-family: inherit; line-height: 1.5;
}
.hdr-search:focus-within .hdr-search-hint { color: #2E7CD6; border-color: #BAD4EF; background: #EAF2FB; }
.hdr-search-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #C9DBF0; border-top-color: #2E7CD6; animation: hdrspin .7s linear infinite;
}
@keyframes hdrspin { to { transform: rotate(360deg); } }
.hdr-search-msg {
  position: absolute; top: 62px; left: 24px; max-width: 520px;
  font-size: 12.5px; color: var(--gris-texte);
  background: #fff; border: 1px solid #E4EBF3; border-radius: 9px;
  padding: 8px 12px; box-shadow: 0 8px 22px rgba(12,42,77,0.12); z-index: 25;
}
.hdr-search-msg.err { color: #C0556F; border-color: #F0D2DB; }
.hdr-search-msg.ok { color: #16A265; border-color: #C7EAD8; }
/* Historique de recherche (dropdown) */
.hdr-search { position: relative; }
.hdr-search-hist {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid #E4EBF3; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(12,42,77,0.14); z-index: 30; padding: 6px; overflow: hidden;
}
.hdr-hist-titre { font-size: 11px; font-weight: 600; color: #9DB0C7; text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px 6px; }
.hdr-hist-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: none; padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--gris-fonce); font-family: inherit; transition: background .12s;
}
.hdr-hist-item:hover { background: #F3F7FB; }
.hdr-hist-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdr-hist-item > .ti-history { color: #9DB0C7; font-size: 16px; }
.hdr-hist-sup { color: #C3D0DF; font-size: 15px; padding: 2px; border-radius: 5px; }
.hdr-hist-sup:hover { color: #C0556F; background: #FBEEF2; }
.hdr-hist-clear {
  width: 100%; text-align: center; background: none; border: none; border-top: 1px solid #EEF2F7;
  margin-top: 4px; padding: 9px; font-size: 12.5px; color: #6B7A8D; cursor: pointer; font-family: inherit;
}
.hdr-hist-clear:hover { color: #C0556F; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hdr-lang { display: flex; gap: 3px; font-size: 13px; background: #F3F7FB; padding: 3px; border-radius: 9px; border: 1px solid #E7EEF6; }
.hdr-lang a { color: var(--gris-texte); padding: 4px 9px; border-radius: 7px; text-decoration: none; transition: background .14s, color .14s; }
.hdr-lang a.on { background: #fff; color: var(--bleu-vif); font-weight: 600; box-shadow: 0 1px 3px rgba(12,42,77,0.10); }
.hdr-profile { display: flex; align-items: center; gap: 9px; cursor: pointer; position: relative; padding: 5px 8px 5px 5px; border-radius: 11px; transition: background .14s, box-shadow .14s; }
.hdr-profile:hover { background: #F1F5FA; box-shadow: inset 0 0 0 1px #E4EBF3; }
.hdr-avatar {
  width: 37px; height: 37px; border-radius: 50%;
  background: linear-gradient(145deg,#3E8BE6 0%,#2468BE 100%); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px;
  box-shadow: 0 3px 8px rgba(36,104,190,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
}
.hdr-profile-name { font-size: 14px; font-weight: 500; }
.hdr-menu {
  position: absolute; top: 110%; right: 0; background: #fff; border: 1px solid #E4EBF3;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(12,42,77,0.12); padding: 6px;
  min-width: 170px; display: none;
}
.hdr-menu.open { display: block; }
.hdr-menu a { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; color: var(--gris-fonce); text-decoration: none; font-size: 14px; }
.hdr-menu a:hover { background: #F1F5FA; }

/* ------------------------------------------------------------------
   Bandeau identitaire de page
   Pictogramme, titre, sous-titre et teinte d'accent par module.
   La teinte arrive par la variable --accent posee sur .app-pagehead.
   ------------------------------------------------------------------ */
.app-pagehead { padding: 20px 28px 0; --accent: #2E7CD6; }
.app-pagehead .ph-inner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0C2A4D 0%, #163F72 55%, #1B5091 100%);
  box-shadow: 0 6px 20px rgba(12, 42, 77, 0.18);
}
/* Halo decoratif : rappelle la couleur du module sans surcharger */
.app-pagehead .ph-inner::before {
  content: ''; position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
  opacity: .30; pointer-events: none;
}
.app-pagehead .ph-inner::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--accent);
}
.app-pagehead .ph-ic {
  position: relative; z-index: 1; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
  color: #fff;
}
.app-pagehead .ph-ic svg { width: 24px; height: 24px; }
.app-pagehead .ph-txt { position: relative; z-index: 1; min-width: 0; flex: 1; }
.app-pagehead h1 {
  font-family: 'Sora', sans-serif; font-size: 21px; font-weight: 700;
  color: #fff; margin: 0; letter-spacing: -0.2px; line-height: 1.25;
}
.app-pagehead .ph-sst {
  margin: 3px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.74); max-width: 720px;
}
.app-pagehead-extra { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Les controles poses a droite du titre restent lisibles sur fond sombre */
.app-pagehead-extra select,
.app-pagehead-extra input[type=text],
.app-pagehead-extra input[type=search] {
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff; border-radius: 10px;
}
.app-pagehead-extra select option { color: var(--bleu-profond); background: #fff; }
.app-pagehead-extra input::placeholder { color: rgba(255, 255, 255, 0.6); }
.app-pagehead-extra label { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 760px) {
  .app-pagehead { padding: 14px 16px 0; }
  .app-pagehead .ph-inner { padding: 15px 16px; gap: 12px; }
  .app-pagehead h1 { font-size: 18px; }
  .app-pagehead .ph-sst { font-size: 11.5px; }
}
@media print { .app-pagehead { display: none; } }

.app-main { padding: 20px 28px 40px; flex: 1; }

/* Carte générique */
.card { background: #fff; border: 1px solid #E4EBF3; border-radius: 14px; box-shadow: 0 1px 3px rgba(12,42,77,0.04); }

/* Boutons (refonte) */
.app-body .btn { font-family: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.app-body .btn-primary { background: var(--bleu-vif); color: #fff; }
.app-body .btn-primary:hover { background: #2468BE; }
.app-body .btn-ghost { background: #fff; border-color: #E4EBF3; color: var(--gris-fonce); }
.app-body .btn-ghost:hover { background: #F1F5FA; }

/* Tableau (refonte) */
.fmx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fmx-table thead th { background: #F7FAFD; color: var(--gris-texte); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; text-align: left; padding: 10px 12px; border-bottom: 1px solid #E4EBF3; white-space: nowrap; }
.fmx-table tbody td { padding: 11px 12px; border-bottom: 1px solid #EFF3F8; white-space: nowrap; }
.fmx-table tbody td.wrap { white-space: normal; }
.fmx-table tbody tr:last-child td { border-bottom: none; }
.fmx-table tbody tr.clickable { cursor: pointer; transition: background .12s; }
.fmx-table tbody tr.clickable:hover { background: #F7FAFD; }
.pill { font-size: 12px; padding: 4px 11px; border-radius: 20px; font-weight: 500; }
.pill-ok { background: #E6F7F0; color: #0B8C5E; }
.pill-muted { background: #EEF1F5; color: #76828F; }

/* Responsive : sidebar repliable */
@media (max-width: 860px) {
  .app-sidebar { position: fixed; left: -240px; z-index: 50; transition: left .25s; box-shadow: 0 0 40px rgba(0,0,0,0.3); }
  .app-sidebar.open { left: 0; }
  .hdr-burger { display: block; }
  .hdr-profile-name { display: none; }
}

/* ===== Tableau des cours de change (moderne) ===== */
.cv-grid { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(12,42,77,.06); }
.cv-grid thead th { background: linear-gradient(135deg, #0C2A4D, #15406E); color: #fff; font-weight: 600; padding: 11px 12px; text-align: right; white-space: nowrap; font-size: 12.5px; }
.cv-grid thead th.cv-corner { text-align: left; position: sticky; left: 0; z-index: 2; background: #0C2A4D; }
.cv-grid tbody td { padding: 10px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid #EEF2F7; }
.cv-grid tbody tr:last-child td { border-bottom: none; }
.cv-grid tbody tr:nth-child(even) td { background: #FAFCFE; }
.cv-grid tbody tr:hover td { background: #F0F6FC; }
.cv-grid td.cv-dev { text-align: left; font-weight: 700; color: #0C2A4D; position: sticky; left: 0; background: #fff; z-index: 1; border-right: 2px solid #EEF2F7; }
.cv-grid tbody tr:nth-child(even) td.cv-dev { background: #FAFCFE; }
.cv-grid tbody tr:hover td.cv-dev { background: #F0F6FC; }
.cv-val { font-variant-numeric: tabular-nums; color: #1B2A3D; }
.cv-na { color: #C3CCD6; }
.cv-rep { color: #E0922F; font-weight: 700; margin-left: 2px; cursor: help; }
.cv-legend { font-size: 11.5px; color: var(--gris-texte); margin-top: 9px; padding-left: 2px; }

/* =====================================================================
   ADAPTATION AUX ECRANS — TABLETTE ET ORDINATEUR
   ---------------------------------------------------------------------
   Pourquoi ce bloc existe.

   Finamux s'adresse a des cooperatives : on y travaille au bureau, mais
   aussi sur une tablette, au magasin ou sur une piste. L'application
   avait un seul point de bascule, a 860 px, pense pour le telephone.
   Entre 860 et 1400 px — c'est-a-dire toutes les tablettes — les
   tableaux debordaient, les grilles se serraient et les boutons
   devenaient trop petits pour un doigt.

   Ce bloc est ADDITIF : il n'annule aucune regle existante, il en
   ajoute pour les largeurs intermediaires. Il est place en fin de
   feuille pour que sa priorite soit naturelle, sans !important.
   ===================================================================== */

/* --- Rien ne doit jamais deborder horizontalement --------------------- */
.app-main { max-width: 100%; overflow-x: hidden; }
.app-main img,
.app-main pre { max-width: 100%; }

/* Un tableau large devient defilable dans son cadre plutot que de
   pousser toute la page. Les tableaux deja places dans un conteneur a
   defilement ne sont pas affectes. */
@media (max-width: 1400px) {
  .app-main > table,
  .app-main .card > table,
  .app-main .ad-card > table,
  .app-main .en-card > table { display: block; overflow-x: auto; }
}

/* --- Tablette en paysage : la barre laterale se resserre -------------- */
@media (max-width: 1400px) and (min-width: 1181px) {
  .app-sidebar { width: 190px; }
  .sb-nav-item { padding: 9px 11px; font-size: 12.5px; }
  .app-main { padding: 18px 18px; }
}

/* --- Tablette en portrait --------------------------------------------- */
@media (max-width: 1024px) {
  /* Les grilles a colonnes multiples passent a deux colonnes, puis une.
     minmax(200px,1fr) donnait jusqu'a cinq colonnes illisibles sur une
     tablette. */
  .ct-g, .ad-ents { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .en-liste, .en-mods { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  /* L'entete garde une seule ligne : la regle detaillee est plus bas. */
  .hdr-entite button { max-width: 190px; }
}

/* --- Sous 900 px : une seule colonne partout -------------------------- */
@media (max-width: 900px) {
  .ct-g, .ad-ents, .en-liste, .en-mods { grid-template-columns: 1fr; }
  .app-main { padding: 15px 14px; }
  .app-pagehead { flex-wrap: wrap; row-gap: 10px; }
  /* Les fenetres modales occupent l'ecran plutot qu'une carte flottante
     minuscule. */
  .en-modal-box, .ad-box { max-width: 100%; max-height: 92vh; padding: 18px 16px; }
}

/* --- Confort tactile --------------------------------------------------
   Sur un ecran tactile, une cible de moins de 40 px se rate. On agrandit
   les commandes SANS toucher a leur apparence sur ordinateur : la regle
   ne s'applique qu'aux pointeurs grossiers. */
@media (pointer: coarse) {
  .app-main button,
  .app-main .btn,
  .app-main select,
  .app-main input[type="text"],
  .app-main input[type="email"],
  .app-main input[type="number"],
  .app-main input[type="password"],
  .app-main input[type="date"] { min-height: 42px; }
  .app-main input[type="checkbox"],
  .app-main input[type="radio"] { width: 20px; height: 20px; }
  .app-main a { -webkit-tap-highlight-color: rgba(36,104,190,.15); }
  /* Le zoom automatique d'iOS se declenche sous 16 px : on l'evite. */
  .app-main input, .app-main select, .app-main textarea { font-size: 16px; }
  .sb-nav-item { padding: 12px 13px; }
}

/* --- Impression -------------------------------------------------------- */
@media print {
  .app-sidebar, .app-header, .hdr-entite, .btn, button { display: none !important; }
  .app-main { padding: 0; }
}


/* =====================================================================
   MOBILE ET TABLETTE — ENTETE, MENU REPLIABLE, TABLEAUX
   ---------------------------------------------------------------------
   Trois problemes constates a l'usage :

   1. L'entete prenait trop de hauteur et, au-dessous de 1024 px, passait
      sur deux lignes : recherche, entite, langue, cloche et profil ne
      tenaient pas cote a cote. La page commencait donc tres bas.
   2. Le menu lateral ne se depliait qu'en dessous de 860 px. Sur une
      tablette en portrait, il mangeait un quart de la largeur en
      permanence.
   3. Un tableau plus large que l'ecran poussait toute la page vers la
      droite.

   Ce bloc est ADDITIF et ne s'applique qu'aux largeurs concernees :
   l'affichage sur ordinateur reste strictement identique.
   ===================================================================== */

/* --- Cadre a defilement pose autour des tableaux larges ---------------- */
.fmx-tscroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* La barre reste discrete mais visible : sans elle, on ne devine pas qu'il
   y a du contenu a droite. */
.fmx-tscroll::-webkit-scrollbar { height: 9px; }
.fmx-tscroll::-webkit-scrollbar-thumb { background: #C6D4E3; border-radius: 6px; }
.fmx-tscroll::-webkit-scrollbar-track { background: #F2F6FB; border-radius: 6px; }
/* ATTENTION : ne PAS forcer min-width: max-content ici.
   Cette valeur oblige le tableau a prendre sa largeur naturelle maximale, ce
   qui fait apparaitre une barre de defilement sur des tableaux qui tenaient
   parfaitement dans la page — c'est ce qui est arrive aux lignes des demandes
   d'achat. Le tableau doit occuper la largeur disponible et ne deborder que
   s'il ne peut vraiment pas faire autrement. */
.fmx-tscroll > table { min-width: 100%; }

/* --- Voile sous le menu deplie ---------------------------------------- */
.sb-voile {
  position: fixed; inset: 0; background: rgba(12,42,77,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 45;
}
.sb-voile.on { opacity: 1; pointer-events: auto; }

/* --- Le menu se replie des la tablette en portrait --------------------- */
@media (max-width: 1180px) {
  .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: -260px; width: 250px;
    z-index: 50; transition: left .25s; box-shadow: 0 0 40px rgba(0,0,0,.3);
    overflow-y: auto;
  }
  .app-sidebar.open { left: 0; }
  .hdr-burger { display: block; }
  .app-content { width: 100%; }
}

/* --- L'entete tient sur UNE ligne, quoi qu'il arrive ------------------- */
@media (max-width: 1180px) {
  .app-header {
    height: 58px; padding: 0 12px; gap: 9px;
    flex-wrap: nowrap;                 /* jamais deux lignes */
    position: sticky; top: 0; z-index: 40;
  }
  .hdr-burger { font-size: 24px; padding: 4px; margin-right: 2px; }
  /* Ce qui peut se retrecir, se retrecit. Ce qui n'est pas indispensable
     en petite largeur disparait. */
  .hdr-search { max-width: none; padding: 7px 11px; }
  .hdr-profile-name { display: none; }
  .hdr-entite button { max-width: 120px; padding: 6px 9px; }
}

@media (max-width: 780px) {
  /* La recherche prend toute la largeur restante : c'est elle qu'on
     utilise le plus en mobilite. Le nom de l'entite s'efface. */
  .hdr-entite button span:not([class]) { display: none; }
  .hdr-entite button { max-width: none; }
}

@media (max-width: 560px) {
  /* En dessous, la recherche passe sous l'entete plutot que de tout
     comprimer : deux lignes valent mieux que six elements illisibles. */
  .app-header { height: auto; padding: 8px 10px; flex-wrap: wrap; row-gap: 8px; }
  .hdr-search { order: 10; flex-basis: 100%; max-width: none; }
  .app-main { padding: 13px 11px; }
  .app-pagehead h1 { font-size: 18px; }
}

/* --- LE PIEGE QUE J'AVAIS POSE ICI ------------------------------------
   J'avais ecrit :

       .app-main { position: relative; z-index: 1; }

   en croyant empecher le contenu de passer sous l'entete. En realite,
   « position + z-index » cree un CONTEXTE D'EMPILEMENT : tout ce qui se
   trouve a l'interieur y est enferme, quel que soit son propre z-index.

   Une fiche declaree z-index 200 ne valait donc plus que 1 face au reste
   de la page. L'entete, a 40, passait par-dessus et coupait le haut de
   TOUTES les fiches de finamux.

   Il ne faut donc creer AUCUN contexte d'empilement sur les conteneurs de
   page. L'entete est deja collee avec son propre z-index : cela suffit. */
.app-content { position: static; }

/* Les couches de fiche passent au-dessus de tout, entete comprise. La regle
   vaut pour toutes les conventions de nommage du projet, presentes et a
   venir. */
.app-main [class*="-modal"],
.app-main [id$="Modal"] { z-index: 9000; }

/* =====================================================================
   INFOBULLES D'AIDE ET UNIFORMISATION DES CHAMPS
   ---------------------------------------------------------------------
   Les explications placees sous un champ etiraient sa case. Comme les
   cases d'une meme ligne partagent leur hauteur, elles etiraient aussi
   toutes les voisines : on se retrouvait avec une case "NCC" enorme a
   cote d'une case normale.

   L'aide passe donc par un "?" accole a l'etiquette. La bulle s'ouvre au
   survol et au clic — le survol n'existe pas sur tablette.
   ===================================================================== */

.fmx-aide-pt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 6px; flex: none;
  border-radius: 50%; background: #E2E9F1; color: #5A6B7E;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: help;
  position: relative; vertical-align: middle; user-select: none;
}
.fmx-aide-pt:hover, .fmx-aide-pt:focus, .fmx-aide-pt.on { background: #2468BE; color: #fff; outline: none; }

/* La bulle aux couleurs de finamux a ete retiree : le navigateur affiche
   deja son infobulle en fond blanc, et deux explications superposees pour
   une meme chose n'aident personne. La seconde se faisait de surcroit couper
   par le cadre de la fiche. */

/* --- Toutes les cases de saisie ont la meme hauteur -------------------- */
/* Hauteur uniforme, mais seulement pour les champs de saisie d'un formulaire
   et jamais pour une case a cocher, qui doit rester petite. */
.en-f > input:not([type="checkbox"]):not([type="radio"]), .en-f > select,
.ad-f > input:not([type="checkbox"]):not([type="radio"]), .ad-f > select,
.ct-g label > input:not([type="checkbox"]):not([type="radio"]), .ct-g label > select {
  height: 40px; box-sizing: border-box; line-height: normal;
}
.en-f textarea, .ad-f textarea, .ct-g textarea { min-height: 80px; }
/* Les etiquettes restent sur une ligne, avec leur "?" a droite du texte. */
.en-f label, .ad-f label, .ct-g label { display: flex; align-items: center; flex-wrap: wrap; }
.en-f label > input, .en-f label > select,
.ct-g label > input, .ct-g label > select { flex-basis: 100%; }

/* =====================================================================
   DEBORDEMENT : LA REGLE DE FOND
   ---------------------------------------------------------------------
   Meme raisonnement que le correctif JavaScript, cote feuille de style :
   une colonne "1fr" vaut "minmax(auto, 1fr)", donc au moins la largeur du
   contenu. Toutes les grilles declarees ici passent en minmax(0, 1fr), et
   tous les champs acceptent de se retrecir.

   Sans cela, un champ un peu long elargit sa colonne, la grille depasse
   son cadre, et la page se coupe sur le cote.
   ===================================================================== */
.ct-g     { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.en-grid > *, .ct-g > *, .ad-ents > *, .home-cards > *, .ml-grid > * { min-width: 0; }

/* Un champ ne depasse jamais son conteneur, quelle que soit sa taille
   declaree ailleurs. */
/* Un champ ne depasse jamais son cadre. Cette regle vaut PARTOUT, car un
   debordement est toujours un defaut. */
.app-main input,
.app-main select,
.app-main textarea { max-width: 100%; box-sizing: border-box; }

/* En revanche, occuper TOUTE la largeur ne vaut que dans un bloc de SAISIE.
   Une barre de filtres, une liste, un bloc de pieces jointes alignent leurs
   commandes cote a cote : les etirer sur toute la ligne disloque la page.
   La regle est donc limitee aux conteneurs de formulaire, nommement. */
.en-f > input, .en-f > select, .en-f > textarea,
.ad-f > input, .ad-f > select, .ad-f > textarea,
.ml-f > input, .ml-f > select, .ml-f > textarea,
.ct-g label > input, .ct-g label > select, .ct-g label > textarea {
  width: 100%; min-width: 0;
}

/* Une case a cocher ou un bouton radio garde sa taille propre, en toutes
   circonstances. */
.app-main input[type="checkbox"],
.app-main input[type="radio"] { width: auto; min-width: 0; max-width: none; flex: none; }

/* Une etiquette longue se coupe plutot que d'elargir sa colonne. */
.en-f label, .ad-f label, .ct-g label, .ml-f label { min-width: 0; overflow-wrap: anywhere; }

/* Filet de securite contre le defilement horizontal.
   ATTENTION : il ne doit JAMAIS etre pose sur html ou body.
   Un overflow-x:hidden sur un ancetre transforme celui-ci en conteneur de
   defilement, et un element en position:sticky cesse alors de coller — c'est
   ce qui faisait disparaitre la barre laterale des qu'on descendait dans la
   page. On le pose donc sur la zone de contenu, qui n'est l'ancetre d'aucun
   element colle. */
.app-main { overflow-x: hidden; max-width: 100%; }

/* =====================================================================
   BOUTON DU MENU LATERAL — VISIBLE, SANS DEPENDRE D'UNE POLICE D'ICONES
   ---------------------------------------------------------------------
   Le bouton existait mais son icone venait d'une police chargee depuis un
   service externe. Quand le glyphe manque ou que la police n'arrive pas,
   le bouton reste la, vide et invisible : on ne peut plus ouvrir le menu.

   Le trait est desormais dessine en CSS. Il s'affiche meme sans reseau.
   ===================================================================== */
.hdr-burger {
  position: relative;
  width: 42px; height: 42px; flex: none;
  border: 1.5px solid #E0E9F3; border-radius: 11px; background: #F2F6FB;
  cursor: pointer; padding: 0;
}
.hdr-burger i { display: none; }             /* on n'utilise plus le glyphe */
.hdr-burger::before,
.hdr-burger::after,
.hdr-burger span.fmx-barre {
  content: ''; position: absolute; left: 11px; right: 11px; height: 2px;
  background: var(--bleu-profond); border-radius: 2px; transition: transform .2s;
}
.hdr-burger::before      { top: 13px; }
.hdr-burger span.fmx-barre { top: 20px; }
.hdr-burger::after       { top: 27px; }
.hdr-burger:active { background: #E4EDF7; }

/* Le menu ouvert : le bouton devient une croix, on comprend qu'on referme. */
.app-sidebar.open ~ .app-content .hdr-burger::before { transform: translateY(7px) rotate(45deg); }
.app-sidebar.open ~ .app-content .hdr-burger::after  { transform: translateY(-7px) rotate(-45deg); }
.app-sidebar.open ~ .app-content .hdr-burger span.fmx-barre { opacity: 0; }

/* Il s'affiche des la tablette. La regle est plus specifique que la regle
   generale qui le masque, pour qu'aucune autre ne puisse la reprendre. */
@media (max-width: 1180px) {
  .app-header .hdr-burger { display: block; }
}
@media (min-width: 1181px) {
  .app-header .hdr-burger { display: none; }
}

/* =====================================================================
   SELECTEUR D'ENTITE SUR PETIT ECRAN
   ---------------------------------------------------------------------
   Le nom de l'entite etait purement masque : il ne restait qu'une pastille
   grise vide, dont personne ne pouvait deviner l'usage. Et le panneau de
   choix, positionne en absolu, sortait de l'ecran.
   ===================================================================== */
@media (max-width: 1180px) {
  .hdr-entite button {
    max-width: 150px; height: 42px; box-sizing: border-box;
    border-width: 1.5px !important;
  }
  /* Le nom reste visible, tronque : mieux vaut "Coop Cacao..." que rien. */
  .hdr-entite button span:not([class]) {
    display: inline-block !important;
    max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 12.5px;
  }
}

@media (max-width: 780px) {
  .hdr-entite button { max-width: 120px; }
  .hdr-entite button span:not([class]) { max-width: 66px; }
  /* Le panneau de choix occupe la largeur de l'ecran plutot que de sortir
     par la droite. */
  .hdr-entite [id$="Menu"], #entiteMenu {
    position: fixed !important;
    left: 10px !important; right: 10px !important; top: 64px !important;
    width: auto !important; max-width: none !important;
    max-height: 74vh; overflow-y: auto;
  }
}