/* Allolib - Pilotage : feuille de style unique, sobre et lisible. */
:root {
  --fond: #F4F8F7;
  --carte: #ffffff;
  --bord: #E2EAE8;
  --texte: #16232E;
  --texte-doux: #5D7A76;
  --primaire: #0A6E61;
  --primaire-fonce: #07564C;
  --vert: #128a5a;
  --rouge: #c8322f;
  --orange: #b96a06;
  --ombre: 0 1px 2px rgba(16, 30, 54, .06), 0 4px 14px rgba(16, 30, 54, .05);
  --accent-vif: #12B39F;   /* turquoise du logo : aplats a texte encre */
  --encre: #0B1A2E;        /* encre du logo */
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
a { color: var(--primaire); }

/* ---------- Connexion ---------- */
.login-fond {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #0B1A2E 0%, #12283F 100%);
  padding: 1rem;
}
.login-carte {
  background: #fff; padding: 2rem; border-radius: 16px; width: 100%; max-width: 380px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
.login-logo img { height: 32px; width: auto; display: block; }
.login-sous { color: var(--texte-doux); margin: .2rem 0 1.5rem; font-size: .9rem; }
.login-carte label { display: block; margin-bottom: 1rem; font-size: .85rem; color: var(--texte-doux); }
.login-carte input { width: 100%; margin-top: .3rem; }

/* ---------- Structure ---------- */
.entete {
  background: #fff; border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem;
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.marque { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.marque img { height: 26px; width: auto; display: block; }
.marque span { color: var(--texte-doux); font-weight: 600; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; }
.nav { display: flex; gap: .2rem; flex: 1; flex-wrap: wrap; }
.onglet {
  border: 0; background: transparent; padding: .5rem .8rem; border-radius: 8px;
  cursor: pointer; font-size: .9rem; color: var(--texte-doux); font-family: inherit;
}
.onglet:hover { background: #EAF4F2; color: var(--texte); }
.onglet.actif { background: #DCF2EE; color: var(--primaire-fonce); font-weight: 600; }
.contenu { max-width: 1180px; margin: 0 auto; padding: 1.4rem 1.2rem 4rem; }
.barre-titre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sous-texte { color: var(--texte-doux); font-size: .88rem; }
.opt { color: var(--texte-doux); font-weight: 400; font-size: .8em; }

/* ---------- Cartes ---------- */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin: 1rem 0 1.4rem; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: 1rem; box-shadow: var(--ombre); }
.carte-lib { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }
.carte strong { display: block; font-size: 1.7rem; font-weight: 700; margin: .3rem 0 .1rem; letter-spacing: -1px; }
.carte-note { font-size: .78rem; color: var(--texte-doux); }
.positif { color: var(--vert); }
.negatif { color: var(--rouge); }

.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--ombre); margin-bottom: 1.2rem; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.phrase-cle { font-size: 1.15rem; font-weight: 600; margin: .2rem 0; }
.zone-graph { position: relative; height: 320px; }
.zone-graph.petite { height: 250px; }

/* ---------- Alertes ---------- */
.alerte { border-radius: 10px; padding: .65rem .9rem; margin-bottom: .5rem; font-size: .9rem; border: 1px solid; }
.alerte-danger { background: #fdecec; border-color: #f5c6c4; color: #8d201e; }
.alerte-attention { background: #fff4e2; border-color: #f4dcb4; color: #7d4a05; }
.alerte-info { background: #DCF2EE; border-color: #A9DED5; color: #07564C; }

/* ---------- Formulaires ---------- */
input, select, textarea, button { font-family: inherit; font-size: .93rem; }
input, select, textarea {
  padding: .5rem .6rem; border: 1px solid var(--bord); border-radius: 8px; background: #fff; color: var(--texte);
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #8FD6C9; border-color: var(--primaire); }
label { display: block; font-size: .85rem; color: var(--texte-doux); }
.grille-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.grille-form label { display: flex; flex-direction: column; gap: .25rem; }
.pleine-largeur { grid-column: 1 / -1; }
.ligne-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ligne-form input, .ligne-form select { width: auto; min-width: 130px; flex: 1 1 130px; }
.champ-inline { display: inline-flex; align-items: center; gap: .4rem; }
.champ-inline input, .champ-inline select { width: auto; }
.case { display: inline-flex; align-items: center; gap: .35rem; }
.case input { width: auto; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.formulaire { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--ombre); }
.filtres { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius); padding: .9rem; display: flex; gap: .7rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }

/* ---------- Boutons ---------- */
.btn {
  border: 1px solid var(--bord); background: #fff; color: var(--texte);
  padding: .55rem 1rem; border-radius: 9px; cursor: pointer; font-weight: 500;
}
.btn:hover { background: #EFF6F5; }
.btn-primaire { background: var(--accent-vif); border-color: var(--accent-vif); color: var(--encre); font-weight: 600; }
.btn-primaire:hover { background: #0FA08E; border-color: #0FA08E; }
.btn-fantome { background: transparent; }
.btn-danger { border-color: #f0bcbb; color: var(--rouge); }
.btn-danger:hover { background: #fdecec; }
.btn-petit { padding: .4rem .75rem; font-size: .87rem; }
.btn-large { width: 100%; padding: .7rem; margin-top: .4rem; }
.btn-lien { border: 0; background: none; color: var(--primaire); cursor: pointer; padding: .2rem .3rem; font-size: .85rem; }
.btn-lien.suppr { color: var(--rouge); }

/* ---------- Modes de saisie ---------- */
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.mode {
  background: var(--carte); border: 2px dashed var(--bord); border-radius: var(--radius);
  padding: 1.3rem 1rem; text-align: center; cursor: pointer; transition: .15s; display: block;
}
.mode:hover, .mode.survol { border-color: var(--primaire); background: #F1FAF8; }
.mode-icone { display: block; line-height: 0; color: var(--primaire); }
.mode-icone svg { display: block; margin: 0 auto; }
.mode-titre { display: block; font-weight: 600; color: var(--texte); margin-top: .3rem; }
.mode-sous { display: block; font-size: .8rem; color: var(--texte-doux); }
.ia-statut { background: #DCF2EE; border: 1px solid #A9DED5; color: #07564C; padding: .7rem .9rem; border-radius: 10px; margin-bottom: 1rem; font-size: .9rem; }
.ia-statut.echec { background: #fff4e2; border-color: #f4dcb4; color: #7d4a05; }
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid #8FD6C9; border-top-color: var(--primaire);
  border-radius: 50%; animation: tourne .7s linear infinite; vertical-align: -2px; margin-right: .4rem;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.piece-jointe { font-size: .85rem; color: var(--texte-doux); margin-top: .8rem; }

/* ---------- Tableaux ---------- */
.tableau-conteneur { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.tableau th, .tableau td { padding: .55rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.tableau th { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); background: #F7FBFA; }
.tableau tbody tr:hover { background: #F7FBFA; }
.droite { text-align: right; }
.resume { color: var(--texte-doux); font-size: .88rem; margin: 0 0 .6rem; }
.etiquette { display: inline-block; padding: .12rem .5rem; border-radius: 20px; font-size: .75rem; font-weight: 600; }
.et-a_valider { background: #fff4e2; color: #7d4a05; }
.et-valide { background: #e4f5ec; color: var(--vert); }
.et-exporte { background: #DCF2EE; color: #07564C; }
.vide { color: var(--texte-doux); font-style: italic; }
.apercu { margin-top: .8rem; font-size: .9rem; }
.apercu table { width: 100%; max-width: 460px; }
.apercu td { padding: .2rem .4rem; }
.apercu td:last-child { text-align: right; font-weight: 600; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  background: #16232E; color: #fff; padding: .7rem 1.2rem; border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3); z-index: 100; font-size: .9rem; max-width: 90vw;
}
.toast.erreur { background: var(--rouge); }
.toast.succes { background: var(--vert); }
.erreur { color: var(--rouge); font-size: .85rem; }

/* ---------- Boîte de réception ---------- */
.pastille {
  display: inline-block; min-width: 1.15rem; margin-left: .4rem; padding: 0 .35rem;
  background: var(--primaire); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.15rem; text-align: center;
}
.actions-titre { display: flex; gap: .5rem; flex-wrap: wrap; }
.filtres-simples { display: flex; gap: .4rem; margin: .8rem 0 1rem; flex-wrap: wrap; }
.onglet-sec {
  background: none; border: 1px solid var(--bord); border-radius: 999px;
  padding: .3rem .9rem; font-size: .85rem; color: var(--texte-doux); cursor: pointer;
}
.onglet-sec.actif { background: var(--primaire); border-color: var(--primaire); color: #fff; }

.entrante {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--radius);
  box-shadow: var(--ombre); padding: 1rem 1.1rem; margin-bottom: .9rem;
}
.entrante-entete { display: grid; gap: .15rem; margin-bottom: .8rem; }
.entrante-sujet { font-size: .92rem; }
.grille-champs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem;
}
.champ-min { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--texte-doux); }
.champ-min input, .champ-min select {
  padding: .4rem .5rem; border: 1px solid var(--bord); border-radius: 8px;
  font-size: .9rem; color: var(--texte); background: #fff;
}
.entrante-actions { display: flex; gap: .6rem; align-items: center; margin-top: .9rem; flex-wrap: wrap; }
.avis-attention {
  margin: 0 0 .8rem; padding: .5rem .7rem; border-left: 3px solid var(--orange);
  background: #fdf6ec; color: var(--orange); font-size: .84rem; border-radius: 0 8px 8px 0;
}

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .grille-2 { grid-template-columns: 1fr; }
  .entete { padding: .5rem .8rem; }
  .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .onglet { white-space: nowrap; }
  .contenu { padding: 1rem .8rem 4rem; }
  .carte strong { font-size: 1.45rem; }
}

/* Corrige l'attribut hidden : une regle d'auteur (ex. .login-fond{display:flex})
   ecrasait la regle par defaut du navigateur, laissant l'ecran de connexion
   visible par-dessus l'application apres authentification. */
[hidden] { display: none !important; }

/* ===================== SOCLE MOBILE — 2026-08-08 =====================
   Bloc ajoute en fin de feuille. Rien n'est retire : toutes les regles
   ci-dessous sont conditionnees au doigt (pointer:coarse) ou au petit
   ecran, donc un poste au clavier-souris ne bouge pas d'un pixel.
   Retrait : supprimer le bloc entre ce commentaire et FIN SOCLE MOBILE. */

/* Safari iOS regrossit le texte tout seul au passage en paysage. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (pointer: coarse) {
  /* Un champ sous 16px fait zoomer Safari iOS des qu'on le touche, et la
     page ne revient jamais a son echelle : elle reste decalee jusqu'au
     rechargement. C'est le defaut mobile le plus visible.
     !important assume : c'est un plancher, pas un style. Des dizaines de
     champs portent une taille posee en classe ou en attribut style, que
     n'importe quel selecteur simple perdrait. La regle ne s'applique
     qu'au doigt : au clavier-souris, rien ne change. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  select, textarea { font-size: 16px !important; }

  /* Cible tactile : 44px chez Apple, 48dp chez Android. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]),
  select { min-height: 44px; }
  textarea { min-height: 66px; }
  button, input[type="submit"], input[type="button"], input[type="reset"] { min-height: 44px; }
  .btn, .btn-mini, .btn-topbar, .btn-vert, [role="button"] {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  }
}

/* Une adresse, un identifiant ou un jeton sans espace pousse la page hors
   de l'ecran : la couper vaut mieux que devoir defiler lateralement. */
@media (max-width: 640px) {
  p, li, td, th, dd, dt, h1, h2, h3, h4, .mono, code { overflow-wrap: break-word; }
}
/* ===================== FIN SOCLE MOBILE ===================== */

/* ============ COMPLEMENT MOBILE PILOTAGE — 2026-08-08 ============ */

/* Les tableaux du pilotage font 640px de large au minimum : ils defilent
   dans .tableau-conteneur, encore faut-il que ca se voie. */
@media (max-width: 820px) {
  .tableau-conteneur { box-shadow: inset -10px 0 8px -8px rgba(22, 35, 46, .14); }

  /* Encoche iPhone en paysage, et barre de geste en bas. */
  .contenu {
    padding-left: max(.8rem, env(safe-area-inset-left));
    padding-right: max(.8rem, env(safe-area-inset-right));
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }
  .entete {
    padding-left: max(.8rem, env(safe-area-inset-left));
    padding-right: max(.8rem, env(safe-area-inset-right));
  }
  .toast { bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
}
/* ============ FIN COMPLEMENT MOBILE ============ */

/* ====== TABLEAUX LARGES EN FICHES — 2026-08-08 ======
   Complement de fiches-mobile.js, qui pose `data-fiches` et `data-libelle`.
   Sans le script, ce bloc ne s'applique a rien : les deux vont ensemble.
   Ne concerne que les tableaux de 6 colonnes et plus, sur ecran <= 720px. */
@media (max-width: 720px) {
  table[data-fiches="1"] {
    display: block; width: 100%; min-width: 0 !important;
    border-collapse: separate; white-space: normal !important;
    overflow-x: visible !important;
  }
  /* L'en-tete reste dans le document pour les lecteurs d'ecran, mais ne
     s'affiche plus : son texte est repris cellule par cellule. */
  table[data-fiches="1"] thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  table[data-fiches="1"] tbody,
  table[data-fiches="1"] tr,
  table[data-fiches="1"] td { display: block; width: auto; white-space: normal; }

  table[data-fiches="1"] tr {
    border: 1px solid var(--ligne, #E2E6EA); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 10px; background: var(--blanc, #fff);
  }
  table[data-fiches="1"] td {
    display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    gap: 10px; padding: 6px 0; border: 0; text-align: left;
    align-items: baseline; overflow-wrap: anywhere;
  }
  table[data-fiches="1"] td::before {
    content: attr(data-libelle);
    font-weight: 600; font-size: .8rem; color: var(--texte-doux, #6B7A86);
  }
  /* Colonne d'actions sans intitule : elle occupe toute la largeur. */
  table[data-fiches="1"] td:not([data-libelle]) { grid-template-columns: 1fr; }
  table[data-fiches="1"] td:not([data-libelle])::before { content: none; }
  /* Le conteneur a defilement n'a plus rien a faire defiler. */
  table[data-fiches="1"] ~ *, .tableau-conteneur:has(table[data-fiches="1"]) { overflow-x: visible; }
}
/* ====== FIN TABLEAUX EN FICHES ====== */