/*
 * Styles de base et composants de la plateforme CSE.
 * Les couleurs viennent de js/tailwind.config.js (variables CSS --brun-900, --orange-600, …).
 * Mobile d'abord : les règles par défaut visent le téléphone, les @media élargissent.
 */

/* ---------- Police Inter (hébergée localement, licence OFL : assets/fonts/OFL-Inter.txt) ---------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../assets/fonts/inter-latin-wght.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../assets/fonts/inter-latin-ext-wght.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--creme-50);
  color: var(--brun-900);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Focus visible au clavier : orange-600 (≥ 3:1 sur crème et sur brun-800). */
:focus-visible {
  outline: 3px solid var(--orange-600);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Montants : chiffres tabulaires alignés, pas de retour à la ligne avant « FCFA ». */
.montant { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Lien d'évitement (accessibilité clavier) */
.lien-evitement {
  position: absolute; left: -999px; top: 0.5rem; z-index: 100;
  background: var(--brun-900); color: #fff; padding: 0.5rem 1rem; border-radius: 0.5rem;
}
.lien-evitement:focus { left: 0.5rem; }

.lien { color: var(--brun-800); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; }
.lien:hover { color: var(--brun-900); text-decoration-thickness: 2px; }

/* Lien d'action isolé (« Tout voir », « Détails ») : souligné au survol et au focus seulement.
   Ne pas utiliser au milieu d'un texte (WCAG 1.4.1) : employer .lien. */
.lien-action {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--orange-700); font-weight: 600; font-size: 0.875rem;
  text-decoration: none; text-underline-offset: 3px;
}
.lien-action svg { width: 1rem; height: 1rem; flex: none; }
.lien-action:hover, .lien-action:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; /* cible tactile ≥ 44 px */
  padding: 0.5rem 1.125rem;
  border-radius: 0.625rem;
  border: 1px solid transparent;
  font-weight: 600; font-size: 0.9375rem; line-height: 1.25;
  cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn-primaire { background: var(--orange-600); color: var(--brun-900); }
.btn-primaire:hover:not(:disabled) { background: var(--orange-500); }

.btn-secondaire { background: #fff; color: var(--brun-900); border-color: var(--brun-400); }
.btn-secondaire:hover:not(:disabled) { background: var(--sable-100); }

.btn-danger { background: var(--erreur); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--erreur-texte); }

.btn-discret { background: transparent; color: var(--brun-800); }
.btn-discret:hover:not(:disabled) { background: var(--sable-100); }

.btn-petit { min-height: 2.25rem; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.btn-bloc { width: 100%; }

/* Bouton en cours d'action */
.btn[aria-busy="true"]::before {
  content: ''; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Cartes ---------- */
.carte {
  background: #fff;
  border: 1px solid var(--sable-100);
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(43, 26, 17, .06), 0 1px 3px rgba(43, 26, 17, .08);
  padding: 1rem;
}
@media (min-width: 640px) { .carte { padding: 1.25rem; } }
.carte-douce { background: var(--sable-100); border-color: var(--sable-200); box-shadow: none; }

.carte-stat { display: flex; flex-direction: column; gap: 0.25rem; position: relative; overflow: hidden; }
.carte-stat::before { /* liseré d'accent */
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--orange-500);
}
.carte-stat .stat-libelle { font-size: 0.8125rem; font-weight: 500; color: var(--brun-600); }
.carte-stat .stat-valeur { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.carte-stat .stat-detail { font-size: 0.8125rem; color: var(--brun-600); }

/* ---------- Badges d'état ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.125rem 0.625rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; line-height: 1.25rem; white-space: nowrap;
  border: 1px solid transparent;
}
.badge::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.badge-succes  { background: var(--succes-fond); color: var(--succes-texte); }
.badge-alerte  { background: var(--alerte-fond); color: var(--alerte-texte); }
.badge-erreur  { background: var(--erreur-fond); color: var(--erreur-texte); }
.badge-neutre  { background: var(--sable-100); color: var(--brun-800); }
.badge-info    { background: var(--brun-800); color: var(--creme-50); }
.badge-succes::before { background: var(--succes); }
.badge-alerte::before { background: var(--alerte); }
.badge-erreur::before { background: var(--erreur); }
.badge-info::before   { background: var(--orange-500); }

/* ---------- Alertes (messages) ---------- */
.alerte {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.875rem 1rem; border-radius: 0.625rem;
  border: 1px solid; border-left-width: 4px; font-size: 0.9375rem;
}
.alerte svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.0625rem; }
.alerte-titre { font-weight: 600; }
.alerte-succes { background: var(--succes-fond); color: var(--succes-texte); border-color: var(--succes); }
.alerte-alerte { background: var(--alerte-fond); color: var(--alerte-texte); border-color: var(--alerte); }
.alerte-erreur { background: var(--erreur-fond); color: var(--erreur-texte); border-color: var(--erreur); }
.alerte-info   { background: var(--sable-100); color: var(--brun-900); border-color: var(--brun-600); }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 0.375rem; }
.libelle { font-size: 0.875rem; font-weight: 600; color: var(--brun-900); }
.libelle .requis { color: var(--erreur-texte); margin-left: 0.125rem; }
.aide { font-size: 0.8125rem; color: var(--brun-600); }
.message-erreur { font-size: 0.8125rem; color: var(--erreur-texte); font-weight: 500; }

.saisie {
  width: 100%; min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: #fff; color: var(--brun-900);
  border: 1px solid var(--brun-400); border-radius: 0.625rem;
  font-size: 1rem; /* 16 px : évite le zoom automatique sur iPhone */
}
.saisie::placeholder { color: var(--brun-600); opacity: .75; }
.saisie:focus-visible { outline: 3px solid var(--orange-600); outline-offset: 0; border-color: var(--brun-800); }
.saisie[aria-invalid="true"] { border-color: var(--erreur); background: #fffafa; }
.saisie:disabled { background: var(--sable-100); cursor: not-allowed; }
select.saisie {
  appearance: none; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237A4A2F'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem;
}
textarea.saisie { min-height: 6rem; resize: vertical; }

.case { display: flex; gap: 0.625rem; align-items: flex-start; font-size: 0.9375rem; cursor: pointer; }
.case input { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; accent-color: var(--orange-600); flex: none; }

/* ---------- Tableaux ---------- */
.tableau-conteneur { overflow-x: auto; border: 1px solid var(--sable-100); border-radius: 0.875rem; background: #fff; }
.tableau { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tableau caption { text-align: left; padding: 0.75rem 1rem; font-weight: 600; }
.tableau th {
  text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brun-600); background: var(--creme-50);
  padding: 0.625rem 1rem; border-bottom: 1px solid var(--sable-200); white-space: nowrap;
}
.tableau td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--sable-100); vertical-align: middle; }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--creme-50); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Sur téléphone (< 640 px) : cartes empilées ; le tableau classique prend le relais à partir de 640 px. */
.liste-cartes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.ligne-carte {
  background: #fff; border: 1px solid var(--sable-100); border-radius: 0.75rem;
  padding: 0.75rem 0.875rem;
  box-shadow: 0 1px 2px rgba(43, 26, 17, .05);
}
.ligne-carte-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.ligne-carte-titre { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ligne-carte-montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ligne-carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.375rem; }
.ligne-carte-details { font-size: 0.8125rem; color: var(--brun-600); min-width: 0; }
.ligne-carte-details > span + span::before { content: ' · '; }
.ligne-carte-bas .badge { flex: none; }
@media (min-width: 640px) { .liste-cartes { display: none; } }
@media (max-width: 639px) { .tableau-conteneur.avec-cartes { display: none; } }

/* ---------- Squelettes de chargement ---------- */
.squelette {
  display: block; border-radius: 0.375rem;
  background: linear-gradient(90deg, var(--sable-100) 25%, #fbf1e6 50%, var(--sable-100) 75%);
  background-size: 200% 100%;
  animation: chatoie 1.4s ease-in-out infinite;
}
@keyframes chatoie { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- État vide ---------- */
.etat-vide { text-align: center; padding: 2.5rem 1rem; color: var(--brun-600); }
.etat-vide > svg { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; color: var(--orange-500); }
.etat-vide .titre { color: var(--brun-900); font-weight: 600; font-size: 1.0625rem; margin-bottom: 0.25rem; }

/* ---------- Fil d'étapes (circuits de prêt, de signature) ---------- */
.etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.etape { display: grid; grid-template-columns: 2rem 1fr; column-gap: 0.75rem; position: relative; padding-bottom: 1.25rem; }
.etape:last-child { padding-bottom: 0; }
.etape::after { /* trait vertical entre étapes */
  content: ''; position: absolute; left: calc(1rem - 1px); top: 2rem; bottom: 0; width: 2px; background: var(--sable-200);
}
.etape:last-child::after { display: none; }
.etape-pastille {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
  background: #fff; border: 2px solid var(--brun-400); color: var(--brun-600);
}
.etape-pastille svg { width: 1rem; height: 1rem; }
.etape-titre { font-weight: 600; padding-top: 0.25rem; }
.etape-detail { font-size: 0.8125rem; color: var(--brun-600); }
.etape-faite .etape-pastille { background: var(--succes); border-color: var(--succes); color: #fff; }
.etape-faite::after { background: var(--succes); }
.etape-encours .etape-pastille { background: var(--orange-600); border-color: var(--orange-600); color: var(--brun-900); box-shadow: 0 0 0 4px var(--alerte-fond); }
.etape-refusee .etape-pastille { background: var(--erreur); border-color: var(--erreur); color: #fff; }

@media (min-width: 768px) {
  .etapes-horizontales { flex-direction: row; }
  .etapes-horizontales .etape { flex: 1; grid-template-columns: 1fr; justify-items: center; text-align: center; padding-bottom: 0; }
  .etapes-horizontales .etape::after { left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); top: calc(1rem - 1px); bottom: auto; width: auto; height: 2px; }
  .etapes-horizontales .etape-titre { padding-top: 0.5rem; }
}

/* ---------- Coquille de l'application (gabarit) ---------- */
.barre-laterale { background: var(--brun-800); color: var(--creme-50); }
.nav-lien {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: 0.625rem;
  color: var(--creme-50); font-weight: 500; font-size: 0.9375rem;
  border-left: 3px solid transparent;
}
.nav-lien svg { width: 1.25rem; height: 1.25rem; flex: none; opacity: .9; }
.nav-lien:hover { background: rgba(255, 248, 241, .08); }
.nav-lien[aria-current="page"] { background: var(--brun-600); border-left-color: var(--orange-500); font-weight: 600; }
.nav-section { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sable-200); padding: 1rem 0.75rem 0.375rem; }

/* Navigation basse (mobile) */
.nav-basse {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border-top: 1px solid var(--sable-200);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-basse a, .nav-basse button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  min-height: 3.5rem; font-size: 0.6875rem; font-weight: 500; color: var(--brun-600);
}
.nav-basse svg { width: 1.375rem; height: 1.375rem; }
.nav-basse [aria-current="page"] { color: var(--brun-900); font-weight: 700; }
.nav-basse [aria-current="page"] svg { color: var(--orange-600); }
@media (min-width: 1024px) { .nav-basse { display: none; } }

/* Tiroir (mobile) */
.tiroir-fond { position: fixed; inset: 0; z-index: 50; background: rgba(43, 26, 17, .5); }
.tiroir {
  position: fixed; inset: 0 auto 0 0; z-index: 51; width: min(85vw, 20rem);
  overflow-y: auto; transform: translateX(-100%); transition: transform .2s ease-out;
}
.tiroir[data-ouvert="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}