/* Finitions communes à toutes les pages (2026-10-25), chargées après theme.css.
   Retirer la ligne <link … effets.css> d'une page la ramène à son apparence précédente.
   Sommaire : 1. détails · 2. champs · 3. tableaux et urgences · 4. passage entre pages · 5. chargement · 6. mouvement réduit · 7. impression */

/* ---------- 1. Détails soignés ---------- */
:root{accent-color:var(--accent);scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
html{scroll-behavior:smooth}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,legend{text-wrap:balance}
p,dd,.lead,.desc{text-wrap:pretty}
/* les champs et sections atteints par défilement ne passent pas sous l'en-tête figé */
input,select,textarea,section,fieldset{scroll-margin-top:110px}

/* ---------- 2. Champs qui valident en direct (seulement après que la personne a rempli ou quitté le champ) ---------- */
/* (cases à cocher et boutons radio exclus : leur état se voit déjà) */
input:not([type=radio],[type=checkbox]):user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--bad);background:var(--bad-bg)}
input:not([type=radio],[type=checkbox]):user-valid:required,select:user-valid:required,textarea:user-valid:required{box-shadow:inset 4px 0 0 var(--c-good)}
input,select,textarea{transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}

/* ---------- 3. Tableaux et urgences vivants ---------- */
.scroll{max-height:70vh;overflow:auto}
.scroll th{position:sticky;top:0;z-index:1;background:var(--card)}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:var(--soft)}
/* case rouge du bilan dont le nombre est supérieur à 0 (classe posée par tableau-de-bord.js) : sa pastille respire */
.alerte .pastille{animation:respire 2.2s ease-in-out infinite}
@keyframes respire{
  0%,100%{box-shadow:0 0 0 0 rgba(208,59,59,.45)}
  60%{box-shadow:0 0 0 7px rgba(208,59,59,0)}
}

/* ---------- 4. Passage fluide entre les pages du site (navigateurs récents ; les autres changent de page normalement) ---------- */
@view-transition{navigation:auto}
header.entete .logo{view-transition-name:logo-anstat}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

/* ---------- 5. Chargement élégant ---------- */
/* zones vides en attendant les données de n8n : bloc gris avec un reflet qui glisse */
.tiles[data-v]:empty,.scroll[data-v]:empty,#vue-app #contenu:empty{
  min-height:110px;border-radius:12px;
  background:linear-gradient(100deg,var(--soft) 30%,var(--card) 50%,var(--soft) 70%) 0 0/300% 100%;
  animation:reflet 1.4s ease-in-out infinite}
.scroll[data-v]:empty{min-height:160px}
#vue-app #contenu:empty{min-height:320px}
@keyframes reflet{from{background-position:100% 0}to{background-position:0 0}}
/* roue d'attente sur un bouton en cours d'envoi (aria-busy posé par les scripts des pages) */
button[aria-busy=true]{cursor:progress;opacity:.85}
button[aria-busy=true]::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.6em;vertical-align:-.15em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* ---------- 5 bis. Éléments ajoutés par les scripts (brouillon, session, recherche, envoi en attente) ---------- */
.bandeau-info{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;background:var(--soft);
  border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:.9rem}
.bandeau-info a{color:var(--accent);font-weight:600}
.bandeau-session{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;justify-content:center;width:max-content;max-width:calc(100% - 24px);background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:10px 14px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:.92rem}
.bandeau-session[hidden]{display:none}
.bandeau-session button{width:auto;margin:0;padding:8px 14px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:600 .9rem var(--font);cursor:pointer}
.lien-bilan{display:inline-block;padding:2px 10px;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.lien-bilan:hover{background:var(--soft)}
mark.trouve{background:rgba(243,147,35,.32);color:inherit;border-radius:3px;padding:0 1px}
.compte{color:var(--muted);font-size:.85rem;white-space:nowrap}
.carte.attente{border-left:4px solid var(--orange)}
.essai{display:flex;align-items:center;gap:10px;color:var(--muted)}
.essai .roue{flex:none;width:1.1em;height:1.1em;border:2px solid var(--orange);border-right-color:transparent;border-radius:50%;animation:tourne .8s linear infinite}

/* ---------- 6. Mouvement réduit demandé par l'appareil : aucune animation ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .essai .roue{animation-duration:2s}
  .alerte .pastille,.tiles[data-v]:empty,.scroll[data-v]:empty,#vue-app #contenu:empty{animation:none}
  button[aria-busy=true]::after{animation-duration:2s}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ---------- 7. Impression A4 (Ctrl+P, ou « Enregistrer en PDF ») ---------- */
@page{size:A4;margin:12mm 12mm 14mm;
  @bottom-right{content:"Page " counter(page) " / " counter(pages);font:9pt Montserrat,Arial,sans-serif;color:#555}
  @bottom-left{content:"ANStat · Direction régionale d'Abengourou";font:9pt Montserrat,Arial,sans-serif;color:#555}}
@media print{
  /* toujours la version claire, couleurs imprimées telles quelles */
  :root{--bg:#fff;--card:#fff;--ink:#1d1d1b;--muted:#555454;--line:#cfd6d3;--soft:#eef3f1;
    --accent:#49655a;--accent-ink:#fff;--bad:#d03b3b;--bad-bg:#fdecec;--warn:#8a5a00;--warn-bg:#fff4d6;--good:#0b7a0b;--good-bg:#e5f5e5;
    --s1:#49655a;--s2:#f39323}
  *{print-color-adjust:exact;-webkit-print-color-adjust:exact;animation:none!important;transition:none!important}
  body{font-size:10.5pt;background:#fff}
  .wrap{max-width:none;padding:0}
  /* en-tête : à sa place en haut de la première page, jamais figé */
  .entete-cadre{height:auto!important}
  header.entete,header.entete.reduit{position:static;box-shadow:none;padding:0 0 6px}
  header.entete .logo,header.entete.reduit .logo{width:120px}
  header.entete .sous,header.entete.reduit .sous{opacity:1;max-height:none}
  /* ce qui ne sert qu'à l'écran */
  button,.btn,.btn-actu,.btn-import,.haut-import,.profil,.onglets,#q,#vue-login,#vue-mdp,#connexion,#message,.avis,.bandeau-session,.bandeau-info,.compte{display:none!important}
  mark.trouve{background:none}
  a{color:inherit;text-decoration:none}
  /* blocs entiers, tableaux complets avec en-têtes répétés sur chaque page */
  .bilan,tr,dl,.rappel,.chartbox{break-inside:avoid}
  h2{break-after:avoid}
  .scroll{max-height:none;overflow:visible}
  .scroll th{position:static}
  thead{display:table-header-group}
  table{min-width:0!important;font-size:9pt}
  input,select,textarea{box-shadow:none!important}
}