/* =========================================================================
   TATACORA AFRIQUE — Feuille de style de la PWA
   =========================================================================

   CETTE FEUILLE EST LA REFERENCE (PA-183, 10/09/2026). La vue Blade de la
   PWA est le maitre de mise en page, et `prototype_v2/` une ancienne
   version : une correction se fait ICI. L'en-tete precedent ecrivait « NE PAS
   EDITER A LA MAIN. Toute correction se fait au maitre, puis se recopie » —
   c'est renverse, ne le retablissez pas.

   Historique, date :
   - avant PA-131, ce fichier etait la copie de
     `prototype_html/assets/css/app.css` — un repertoire qui N'EXISTE PLUS dans
     ce depot. Il portait 114 lignes la ou la maquette d'alors en comptait
     219 : **25 selecteurs manquaient**, dont le jeton `--gold-actif`, les
     regles de l'entree epinglee de la barre laterale, et les 18 regles de
     remise a l'echelle typographique de `main`. Ces dernieres s'appliquent a
     CHAQUE page : l'ecart ne se voyait pas tant qu'aucun ecran de donnees
     n'etait livre, et se serait vu sur tous a la fois (PA-139) ;
   - jusqu'au 10/09/2026, il etait la transcription de
     `prototype_v2/assets/css/app.css`, a un ecart pres, sans consequence de
     rendu : la chaine de version de l'import (`?v=...`), retiree parce
     qu'elle designait une revision du prototype et non le paquet servi par
     Laravel.

   Les polices restent locales — la PWA doit rester servable sans Internet, et
   un import distant ferait retomber la page sur la police systeme des que le
   reseau manque : interligne, largeur de colonne et mise en page changent
   d'un coup, sans qu'aucune erreur ne le signale.
   ========================================================================= */

/* =========================================================================
   TATACORA AFRIQUE — Feuille de style de base
   Complète Tailwind (CDN) avec : jetons de couleur, polices, animations
   de modales/toasts, et quelques classes composant non triviales en utility.
   ========================================================================= */

/* Polices embarquees — voir `vendor/fonts.css`.
   L'import distant faisait retomber toute l'application sur la police systeme
   des que le reseau manquait : interligne, largeur de colonne et mise en page
   changeaient d'un coup, sans qu'aucune erreur ne le signale. */
@import url('vendor/fonts.css');

:root {
  --navy: #14213D;
  --gold: #B8891E;
  /* Teinte de l'état actif du menu — plus lumineuse que --gold, pour que la
     page courante se distingue du fond navy sans relecture. */
  --gold-actif: #CA971E;
  --fond-clair: #F2F2F2;
  --texte: #262626;
  --succes: #2E7D32;
  --alerte: #ED6C02;
  --erreur: #C62828;
  --info: #1D4ED8;
  --gris: #6B7280;

  --neutre-0: #FFFFFF;
  --neutre-50: #F9FAFB;
  --neutre-100: #F2F2F2;
  --neutre-200: #E5E7EB;
  --neutre-400: #9CA3AF;
  --neutre-600: #6B7280;
  --neutre-900: #262626;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--texte);
  background: var(--fond-clair);
  -webkit-font-smoothing: antialiased;
}

.font-mono-tatacora { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------- Scrollbar discrète ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutre-200); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutre-400); }

/* ---------- Boutons (états non exprimables proprement en utility seule) ---------- */
.btn { transition: filter .15s ease, transform .1s ease; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn:hover { filter: brightness(0.92); }

/* ---------- Champs de formulaire ---------- */
.champ { transition: border-color .15s ease, box-shadow .15s ease; }
.champ:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20,33,61,.10); }
.champ.champ-erreur { border-color: var(--erreur) !important; }
.champ.champ-erreur:focus { box-shadow: 0 0 0 3px rgba(198,40,40,.12); }
.message-erreur { color: var(--erreur); font-size: 13px; margin-top: 4px; display: none; align-items: center; gap: 4px; }
.champ-erreur ~ .message-erreur, .message-erreur.visible { display: flex; }

/* ---------- Modales ---------- */
.overlay-modale {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  padding: 16px;
}
.overlay-modale.ouverte { opacity: 1; pointer-events: auto; }

/* Modale INJECTEE dynamiquement : le style en dur porte l'intention d'affichage.
 *
 * `.ouverte` sert la modale statique, deja dans le DOM, qu'on fait apparaitre en
 * fondu. Huit fichiers construisent au contraire leur modale au moment de
 * l'ouvrir et posent `style="display:flex"` pour la montrer — sans la classe.
 * Elles restaient donc a `opacity: 0; pointer-events: none` : presentes dans le
 * DOM, invisibles et inertes.
 *
 * Constate sur « Modifier les droits » (roles-permissions) : le clic
 * fonctionnait, la modale s'ouvrait, et personne ne pouvait la voir. Sept
 * autres ecrans portaient le meme defaut sans qu'il ait encore ete rencontre.
 */
.overlay-modale[style*="display:flex"],
.overlay-modale[style*="display: flex"] { opacity: 1; pointer-events: auto; }
.overlay-modale[style*="display:flex"] .boite-modale,
.overlay-modale[style*="display: flex"] .boite-modale { transform: none; opacity: 1; }
.boite-modale {
  background: var(--neutre-0); border-radius: 12px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  transform: scale(.95) translateY(8px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.overlay-modale.ouverte .boite-modale { transform: scale(1) translateY(0); opacity: 1; }

/* ---------- Toasts ---------- */
#zone-toasts { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 32px); }
.toast {
  background: var(--neutre-0); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;
  border-left: 4px solid var(--navy);
  transform: translateX(20px); opacity: 0; animation: entree-toast .25s ease forwards;
  position: relative; overflow: hidden;
}
.toast.succes { border-left-color: var(--succes); }
.toast.erreur { border-left-color: var(--erreur); }
.toast.alerte { border-left-color: var(--alerte); }
.toast.info { border-left-color: var(--info); }
@keyframes entree-toast { to { transform: translateX(0); opacity: 1; } }
.toast .barre-progression { position: absolute; left: 0; bottom: 0; height: 3px; background: currentColor; opacity: .3; animation: retrecir 4s linear forwards; }
@keyframes retrecir { from { width: 100%; } to { width: 0%; } }

/* ---------- Carte d'unité (grille de type "carte") ---------- */
.carte-hover { transition: box-shadow .15s ease, transform .15s ease; }
.carte-hover:hover { box-shadow: 0 8px 24px rgba(20,33,61,.08); transform: translateY(-2px); }

/* ---------- Table : ligne sélectionnée ---------- */
tr[data-selectionnee="true"] { background: rgba(184,137,30,.08) !important; }

/* ---------- Zone de dépôt de fichier (import) ---------- */
.zone-depot { border: 2px dashed var(--neutre-200); transition: border-color .15s ease, background .15s ease; }
.zone-depot.survol { border-color: var(--navy); background: rgba(20,33,61,.03); }

/* ---------- Sidebar : lien actif ----------
   Une seule règle. Il en existait deux, la seconde (fond blanc à 14 %)
   annulant silencieusement la première : le repère visuel de la page
   courante était donc quasi invisible.
   ------------------------------------------ */
.lien-sidebar.actif,
.sidebar-nav .lien-sidebar.actif {
  background: var(--gold-actif);
  color: #FFFFFF !important;
  font-weight: 700;
}
.lien-sidebar.actif svg { color: #FFFFFF !important; }
.lien-sidebar.actif:hover { background: var(--gold-actif); filter: brightness(1.06); }


/* ============================================================
   SIDEBAR — densité
   Les deux entrées épinglées (Tableau de bord, POS) forment un
   bloc séparé du reste par une seule bordure : une bordure par
   entrée créait un empilement de traits sur un menu déjà long.
   ============================================================ */
.sidebar-nav .epingle + .epingle {
  margin-top: 0;
}
.sidebar-nav .epingle:last-of-type {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.25rem;
}

/* ============================================================
   ÉCHELLE TYPOGRAPHIQUE — corps de page et menu
   ------------------------------------------------------------
   Les pages utilisent des tailles ABSOLUES (`text-[13px]`), qui
   ne suivent pas le `font-size` d'un parent : réduire le corps
   par héritage n'aurait eu aucun effet. Chaque palier est donc
   remappé explicitement.

   Révision du 18/08/2026 : le corps remonte d'1 px par palier
   (la première passe l'avait trop resserré), et le menu revient
   à 14 px — sa taille d'origine. Un menu plus gros que le
   contenu qu'il sert inverse la hiérarchie de lecture.

   La portée reste limitée à `main` : la barre supérieure et les
   modales gardent leur lisibilité propre.
   ============================================================ */
main .text-\[8px\]     { font-size: 8px; }
main .text-\[9px\]     { font-size: 9px; }
main .text-\[10px\]    { font-size: 10px; }
main .text-\[10\.5px\] { font-size: 10.5px; }
main .text-\[11px\]    { font-size: 10.5px; }
main .text-\[11\.5px\] { font-size: 11px; }
main .text-\[12px\]    { font-size: 11.5px; }
main .text-\[12\.5px\] { font-size: 12px; }
main .text-\[13px\]    { font-size: 12.5px; }
main .text-\[14px\]    { font-size: 13.5px; }
main .text-\[15px\]    { font-size: 14px; }
main .text-\[17px\]    { font-size: 16px; }

main .text-xs   { font-size: 11.5px; line-height: 1.45; }
main .text-sm   { font-size: 13.5px; line-height: 1.5; }
main .text-base { font-size: 15px;   line-height: 1.5; }
main .text-lg   { font-size: 17px;   line-height: 1.4; }
main .text-xl   { font-size: 18.5px; line-height: 1.35; }
main .text-2xl  { font-size: 22px;   line-height: 1.3; }

/* ---------- Menu latéral : 14 px, sa taille d'origine ---------- */
#shell-sidebar .lien-sidebar { font-size: 14px; }

/* ---------- Impression d'un ticket ou d'une facture ----------
 *
 * L'element porte `id="ticket-imprimable"`. Tout le reste disparait.
 *
 * On masque par `visibility` et non par `display` : la modale du ticket est
 * imbriquee dans plusieurs conteneurs, et un `display:none` pose sur un
 * ancetre emporterait le ticket avec lui. `visibility` se re-declare sur les
 * descendants, ce que `display` ne permet pas.
 *
 * Le repositionnement en absolu est indispensable : sans lui, le ticket
 * s'imprime la ou le laissait sa modale — c'est-a-dire au milieu d'une page
 * blanche, voire hors du papier sur une imprimante thermique.
 */
@media print {
  body * { visibility: hidden; }
  #ticket-imprimable, #ticket-imprimable * { visibility: visible; }
  #ticket-imprimable {
    position: absolute; left: 0; top: 0; width: 100%;
    box-shadow: none !important; border: none !important;
  }
  [data-hors-impression] { display: none !important; }
}