/* ============================================================
   ACTION GROUPE — Base Styles
   Reset · Typographie · Composants partagés
   ============================================================ */

/* ----- RESET ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); line-height: 1.15; }

/* ----- BOUTONS ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; border-radius: var(--radius);
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  border: 1.5px solid transparent; transition: var(--transition);
  white-space: nowrap; cursor: pointer;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; }
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); }
.btn-gold:hover { background: #c48f00; }
.btn-ghost { background: transparent; color: var(--text2); border-color: var(--gray2); }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-sm { padding: 5px 12px; font-size: 11px; }
.btn-xs { padding: 3px 9px; font-size: 10px; }
.btn-lg { padding: 12px 28px; font-size: 14px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ----- BADGES ----- */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px;
  font-family: var(--font-head);
}
.badge-green  { background: var(--green-light); color: #27500a; }
.badge-red    { background: var(--red-light);   color: #791f1f; }
.badge-gold   { background: var(--gold-light);  color: #633806; }
.badge-blue   { background: #e6f1fb; color: #0c447c; }
.badge-gray   { background: #f1efe8; color: #444; }
.badge-dark   { background: rgba(0,0,0,0.7); color: #fff; }

/* ----- FORMULAIRES ----- */
/* AÉRATION DES FORMULAIRES (2026-09-19, signalé : « les champs et libellés
   sont trop serrés, on risque de confondre »). Deux champs empilés se
   touchaient (aucune marge), et 4 px seulement séparaient un libellé de son
   champ : l'œil ne savait plus quel libellé allait avec quoi. */
.field { display: flex; flex-direction: column; gap: 6px; }
/* Entre deux champs qui se suivent — c'est CE vide qui rattache un libellé
   au champ du dessous plutôt qu'à celui du dessus. */
.field + .field,
.field + .form-2, .field + .form-3, .field + .form-4,
.form-2 + .field, .form-3 + .field, .form-4 + .field,
.form-2 + .form-2, .form-2 + .form-3 { margin-top: 14px; }
/* …sauf dans une grille : là, deux champs qui se suivent sont deux COLONNES
   côte à côte, pas deux lignes. La marge du second décalerait sa case vers le
   bas et les deux libellés ne seraient plus alignés. L'écart entre lignes est
   déjà donné par le gap de la grille. */
.form-2 > .field + .field,
.form-3 > .field + .field,
.form-4 > .field + .field { margin-top: 0; }
.field label {
  font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-head);
}
.field input,
.field select,
.field textarea {
  padding: 9px 12px; border: 1.5px solid var(--gray2);
  border-radius: var(--radius); font-family: var(--font-body);
  font-size: 13px; color: var(--text); background: var(--white);
  outline: none; transition: border-color 0.2s; width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--green); }
.field textarea { resize: vertical; min-height: 70px; }
.field input[readonly] { background: var(--gray); cursor: default; }
/* Colonnes serrées mais LIGNES aérées : deux champs côte à côte se lisent
   d'un coup d'œil, deux lignes superposées ont besoin de respirer. */
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.form-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 12px; }
.form-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 12px; }

/* ----- CARTES ----- */
.card {
  background: var(--white); border: 1px solid var(--gray2);
  border-radius: var(--radius-lg); padding: 16px 18px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.card-title { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text); }
.card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ----- KPIs ----- */
.kpi {
  background: var(--white); border: 1px solid var(--gray2);
  /* 14/16 → 12/15 et interlignes resserrés (2026-09-27, « on réduit la
     hauteur ») : une bande de cinq cartes prenait 100 px de haut pour
     trois lignes de texte. */
  border-radius: var(--radius-lg); padding: 12px 15px;
}
.kpi-label {
  font-size: 10px; color: var(--text3); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 4px; font-family: var(--font-head);
}
.kpi-label i { font-size: 13px; margin-right: 3px; }
/* La taille du chiffre SUIT la largeur de la carte (2026-09-27) : à sept
   cartes de front, « 943 000 GNF » passait à la ligne alors que le reste de
   la bande était vide. `cqi` vaut 1 % de la largeur intérieure de la carte —
   utilisable ici parce que .kpi est déjà déclarée conteneur. Une taille
   écrite dans la page (style="font-size:13px") reste prioritaire. */
.kpi-value { font-size: clamp(13px, 10cqi, 19px); line-height: 1.15; font-weight: 800; color: var(--text); font-family: var(--font-head); }
.kpi-sub { font-size: 11px; line-height: 1.3; color: var(--text3); margin-top: 1px; }
.kpi.green .kpi-value { color: var(--green); }
.kpi.red   .kpi-value { color: var(--red); }
.kpi.gold  .kpi-value { color: var(--gold); }

/* ----- KPI EN COULEUR (2026-09-27) -----
   Les trois couleurs étaient déjà décidées à ~80 endroits (vert ce qui
   rentre, rouge ce qui alerte, marine le reste) mais ne teintaient que le
   chiffre : à quatre cartes de front, rien ne se distinguait avant lecture.
   Deux marques les rendent visibles — un bandeau sur le côté gauche, et
   l icône du libellé promue en pastille.

   RIEN N EST AJOUTÉ AU HTML : la pastille EST l icône du libellé, sortie du
   flux et posée à gauche. D où les deux conditions :
     · `:has()` — la place n est prise que sur les cartes QUI ONT une icône ;
     · `@container` — et seulement si la carte est assez LARGE. L ERP pose
       des bandes de six à huit cartes de 120 à 140 px (présences, notifica-
       tions, statistiques de facturation, barre du super-admin) : une
       pastille y mangerait la moitié de la carte et le chiffre passerait à
       la ligne. ATTENTION : une requête de conteneur mesure la largeur
       INTÉRIEURE (padding déduit, ici 30 px) — 110 px de seuil, c est une
       carte de 140 px. Sous ce seuil, l icône reste dans le libellé et le
       bandeau colore seul la carte.
   Un navigateur sans `:has()` ou sans requêtes de conteneur ignore ces
   blocs et retrouve exactement l ancienne présentation. */
.kpi { position: relative; overflow: hidden; container-type: inline-size; }
.kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  /* QUATRE niveaux, et pas trois : le neutre était peint du même marine que
     .gold, donc deux cartes voisines se ressemblaient alors que le jeu de
     couleurs est là pour les distinguer (2026-09-27). Neutre = marine pâle,
     .gold = marine plein, .green = orange, .red = rouge. */
  background: #C3CEE0;
}
.kpi.green::before { background: var(--green); }
.kpi.red::before   { background: var(--red); }
.kpi.gold::before  { background: var(--gold); }

@container (min-width: 110px) {
  /* Le retrait se met sur les ENFANTS et non en padding sur la carte : une
     carte ne peut pas répondre à sa propre largeur, ses enfants si. */
  .kpi:has(> .kpi-label > i) > * { margin-left: 38px; }
  .kpi:has(> .kpi-label > i) > .kpi-label > i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; margin: 0; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--gold); background: var(--gold-light);
  }
  .kpi.green:has(> .kpi-label > i) > .kpi-label > i { color: var(--green-dark); background: var(--green-light); }
  .kpi.red:has(> .kpi-label > i)   > .kpi-label > i { color: var(--red);        background: var(--red-light); }
}

/* BANDE COMPACTE — le dossier client/fournisseur pose six cartes dans un
   panneau de 744 px : à 117 px la carte, le libellé et le chiffre normaux
   font une carte de 85 px de haut pour trois lignes. Ici tout descend d un
   cran. Le chiffre reste élastique (cqi), il ne coupe jamais un montant.
   Ne rien écrire en `style=` dans ces cartes : un style en ligne gagnerait
   sur cette variante. */
.kpi-compact .kpi { padding: 8px 10px; }
.kpi-compact .kpi-label { font-size: 9px; margin-bottom: 2px; letter-spacing: 0.04em; }
.kpi-compact .kpi-value { font-size: clamp(11px, 11cqi, 14px); }
.kpi-compact .kpi-sub { font-size: 9.5px; line-height: 1.25; }

/* Deuxième palier : au-delà de 170 px intérieurs (~200 px de carte), elle respire, la pastille grandit.
   En dessous de 150 px (bandes de six à huit cases), il n y en a pas. */
@container (min-width: 170px) {
  .kpi:has(> .kpi-label > i) > * { margin-left: 46px; }
  .kpi:has(> .kpi-label > i) > .kpi-label > i {
    left: 16px; width: 34px; height: 34px; border-radius: 10px; font-size: 17px;
  }
}

/* ----- TABLEAUX ----- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%; border-collapse: collapse;
  font-size: 12px; table-layout: auto;
}
.table th {
  text-align: left; padding: 8px 10px;
  color: var(--text3); font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1.5px solid var(--gray2);
  background: var(--gray); font-family: var(--font-head);
  white-space: nowrap;
}
.table td {
  padding: 8px 10px; color: var(--text2);
  border-bottom: 1px solid var(--gray);
  vertical-align: middle;
}
.table tbody tr:hover td { background: #f7fbf4; }
.table tfoot td {
  background: var(--green-light); font-weight: 700;
  color: var(--green-dark); padding: 8px 10px;
  font-family: var(--font-head);
}
.table .row-alert td { border-left: 3px solid var(--red); background: #fff8f8; }
.table-actions { display: flex; gap: 4px; align-items: center; }
.table-actions button {
  border: none; background: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px;
  color: var(--text3); font-size: 14px; transition: var(--transition);
}
.table-actions button:hover { background: var(--gray2); color: var(--text); }
.table-actions button.delete:hover { background: var(--red-light); color: var(--red); }

/* ----- BARRE DE RECHERCHE ----- */
.search-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.search-bar input {
  flex: 1; min-width: 160px; padding: 7px 11px;
  border: 1.5px solid var(--gray2); border-radius: var(--radius);
  font-size: 12px; color: var(--text); background: var(--white); outline: none;
}
.search-bar input:focus { border-color: var(--green); }
.search-bar select {
  padding: 7px 9px; border: 1.5px solid var(--gray2);
  border-radius: var(--radius); font-size: 11px;
  color: var(--text2); background: var(--white); outline: none;
}

/* ----- ONGLETS ----- */
.tab-bar {
  display: flex; border-bottom: 2px solid var(--gray2);
  margin-bottom: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 16px; font-size: 12px; font-weight: 700;
  font-family: var(--font-head); cursor: pointer;
  color: var(--text3); border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color 0.2s; white-space: nowrap;
}
.tab:hover { color: var(--green); }
.tab.active { color: var(--green); border-bottom-color: var(--green); }

/* ----- DIVBAR TRICOLORE ----- */
.divbar {
  height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold) 33%, var(--red) 33%, var(--red) 66%, var(--gold) 66%);
}

/* ----- PROGRESSION ----- */
.progress { height: 6px; background: var(--gray2); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 3px; background: var(--green); transition: width 0.4s; }

/* ----- MODALES ----- */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 2000;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 22px; width: 100%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  animation: modalIn 0.2s ease;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-family: var(--font-head); font-size: 15px; font-weight: 800; }
.modal-close { border: none; background: none; font-size: 20px; color: var(--text3); padding: 2px; }
.modal-close:hover { color: var(--text); }
.modal-footer {
  display: flex; gap: 9px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray2);
}
@keyframes modalIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ----- DRAWER (dossier latéral) ----- */
#ag-drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.45); z-index: 1500;
  backdrop-filter: blur(2px);
}
#ag-drawer-overlay.open { display: block; }
#ag-drawer {
  position: fixed; top: 0; right: -820px; bottom: 0;
  width: min(780px, 96vw);
  background: var(--white); z-index: 1501;
  box-shadow: -6px 0 40px rgba(0,0,0,0.18);
  transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
#ag-drawer.open { right: 0; }
#ag-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1.5px solid var(--gray2);
  background: var(--gray); flex-shrink: 0;
}
#ag-drawer-title {
  font-family: var(--font-head); font-size: 14px; font-weight: 800; color: var(--text);
}
#ag-drawer-body {
  flex: 1; overflow-y: auto; padding: 18px;
}
@keyframes drawerIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } }
@keyframes ag-spin { to { transform: rotate(360deg); } }
/* `spin` — le nom qu'emploient une douzaine de boutons « Veuillez patienter… »
   (js/utils.js, js/app.js, js/mobile_*.js) et le voile de chargement des
   sections. Il n'était défini QUE dans css/portail.css et en ligne dans
   mobile.html / mon_espace.html : app.html, qui ne charge ni l'un ni les
   autres, avait donc des icônes de chargement parfaitement immobiles.
   Personne ne voyait d'erreur — juste des boutons qui semblaient ne rien
   faire (signalé le 2026-09-15 à propos du bouton « actualiser »).
   Défini ici, à côté de son jumeau, pour les trois pages qui chargent
   base.css ; ne PAS le renommer sans changer les douze appels. */
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- TOAST ----- */
#toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  padding: 11px 18px; border-radius: var(--radius);
  font-size: 12px; font-weight: 700; font-family: var(--font-head);
  max-width: 320px; opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ----- UTILITAIRES ----- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
/* Trois par ligne plutôt que quatre, pour les bandes de six cartes (tableau
   de bord) ou de trois. À écrire en CLASSE et jamais en style dans la page :
   un style en ligne gagne sur les media queries ci-dessous, et la bande
   restait à trois colonnes sur un téléphone, illisible. */
.kpi-grid.trois { grid-template-columns: repeat(3, 1fr); }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-gold  { color: var(--gold); }
.text-muted { color: var(--text3); }
.font-bold  { font-weight: 700; }
.font-head  { font-family: var(--font-head); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.w-full { width: 100%; }

/* ----- ANIMATIONS ----- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.anim-in { animation: fadeInUp 0.5s ease forwards; }
.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ----- RESPONSIVE BASE ----- */
@media (max-width: 768px) {
  .grid-4, .kpi-grid, .kpi-grid.trois { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .form-3, .form-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .grid-2, .grid-3, .grid-4, .kpi-grid, .kpi-grid.trois { grid-template-columns: 1fr; }
  .form-2, .form-3, .form-4 { grid-template-columns: 1fr; }
  .modal { padding: 16px; }
}