:root{
  --vert:#0f6e56; --vert-clair:#e1f5ee; --vert-fonce:#04342c;
  --rouge:#a32d2d; --rouge-clair:#fcebeb;
  --orange:#854f0b; --orange-clair:#faeeda;
  --gris:#5f5e5a; --gris-clair:#f4f3ef;
  --texte:#2c2c2a; --texte-2:#6b6a66; --bord:#e3e1da;
  /* Couleurs de criticité — une seule série, partagée par la pastille et le badge. */
  --c-crit:#b62d2a; --c-imp:#9a5b08; --c-norm:#2e7d46;
}
*{box-sizing:border-box; margin:0}
[hidden]{display:none!important}
/* Libellé réservé aux lecteurs d'écran (accessibilité des champs/boutons). */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
         clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Focus clavier visible sur TOUS les écrans (mobile compris). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible{outline:3px solid #86c7b1; outline-offset:2px}
body{font-family:-apple-system,'Segoe UI',Roboto,sans-serif; background:#dedcd4; color:var(--texte)}
.app{max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; background:var(--gris-clair);
     display:flex; flex-direction:column}
header{background:var(--vert); color:#fff; padding:16px 18px 14px; padding-top:max(16px, env(safe-area-inset-top)); display:flex; align-items:center; justify-content:space-between; gap:10px}
.header-texte{min-width:0}
.btn-loupe{flex:none; width:40px; height:40px; border-radius:11px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:17px; text-decoration:none; color:#fff}
.btn-loupe:active{background:rgba(255,255,255,.32)}
header h1{font-size:17px; font-weight:600}
header .sous{font-size:13px; opacity:.85; margin-top:2px}
main{flex:1; overflow-y:auto; padding:14px; padding-bottom:24px}
nav{position:sticky; bottom:0; display:flex; background:#fff; border-top:1px solid var(--bord);
    padding-bottom:env(safe-area-inset-bottom)}
nav a{flex:1; text-align:center; text-decoration:none; padding:9px 4px 10px; font-size:10.5px; color:var(--texte-2)}
nav a .ico{display:block; font-size:21px; margin-bottom:2px}
nav a.actif{color:var(--vert); font-weight:700}

.bandeau-pilote{background:#faeeda; color:#854f0b; font-size:12.5px; text-align:center; padding:6px 10px}
.bandeau-pilote a{color:#854f0b; font-weight:700}
.flash{border-radius:11px; padding:12px 14px; font-size:14px; margin-bottom:12px}
.flash-ok{background:var(--vert-clair); color:var(--vert-fonce); border:1px solid #b8e0d0}
.flash-erreur{background:var(--rouge-clair); color:var(--rouge); border:1px solid #f0c5c5}

.carte{background:#fff; border:1px solid var(--bord); border-radius:12px; padding:13px 14px; margin-bottom:10px; display:block}
.carte.vide{text-align:center; color:var(--texte-2); font-size:14.5px; padding:24px 14px}
.carte.lien{text-decoration:none; color:var(--texte); font-size:15px; font-weight:500}
.carte.inactive{opacity:.55}
.titre-section{font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--texte-2); margin:14px 2px 8px}
.cat{font-size:12px; font-weight:700; color:var(--vert); margin:14px 2px 6px; text-transform:uppercase; letter-spacing:.5px}

.resume{display:flex; gap:10px}
.resume .bloc{flex:1; background:#fff; border:1px solid var(--bord); border-radius:12px; padding:11px; text-align:center}
.resume .chiffre{font-size:22px; font-weight:700; color:var(--vert)}
.resume .legende{font-size:11.5px; color:var(--texte-2); margin-top:2px}

.tache{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--texte)}
.pastille{width:11px; height:11px; border-radius:50%; flex-shrink:0}
.p-critique{background:var(--c-crit)} .p-importante{background:var(--c-imp)} .p-normale{background:var(--c-norm)}
.tache .infos{flex:1; min-width:0}
.tache .nom{display:block; font-size:16px; font-weight:600}
.tache .meta{display:block; font-size:12.5px; color:var(--texte-2); margin-top:2px}
/* La couleur = la priorité de la tâche (barre latérale claire, lisible d'un coup d'œil). */
.tache.crit-critique{border-left:5px solid var(--c-crit)}
.tache.crit-importante{border-left:5px solid var(--c-imp)}
.tache.crit-normale{border-left:5px solid var(--c-norm)}
.tache .points{font-size:12.5px; color:var(--vert); font-weight:600; white-space:nowrap}
.tache.faite{opacity:.55}
.tache.faite .nom{text-decoration:line-through}
.coche{color:var(--vert); font-size:18px; width:18px; text-align:center; flex-shrink:0}
/* La coche prend la couleur du statut : verte « faite », rouge « manquée », orange « problème / reportée ». */
.coche-manquee{color:var(--c-crit)} .coche-probleme{color:var(--c-imp)} .coche-reportee{color:var(--c-imp)}
.tache .actions{display:flex; gap:6px; align-items:center}
.mini-btn{background:none; border:1px solid var(--bord); border-radius:8px; padding:8px 10px; font-size:14px;
          cursor:pointer; text-decoration:none; line-height:1; min-width:38px; min-height:38px;
          display:inline-flex; align-items:center; justify-content:center}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--vert-clair); color:var(--vert-fonce);
        display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0}
.statut-badge{width:22px; text-align:center; font-size:15px; flex-shrink:0}
.s-faite{color:var(--vert)} .s-manquee{color:#e24b4a} .s-reportee{color:var(--orange)}

.tache-titre{font-size:17px; font-weight:700}
.description{font-size:14px; margin-top:8px; color:var(--texte)}
.meta{font-size:12.5px; color:var(--texte-2); margin-top:3px}
.badge-criticite{display:inline-block; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:99px; margin-top:8px}
.b-critique{background:var(--rouge-clair); color:var(--c-crit)}
.b-importante{background:var(--orange-clair); color:var(--c-imp)}
.b-normale{background:var(--vert-clair); color:var(--c-norm)}
.etat-final{font-size:15px; font-weight:600; background:var(--vert-clair); border-color:#b8e0d0}
.fermee{opacity:.7}
.fermee .case{opacity:.5; cursor:default}

.etape{display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-bottom:1px solid var(--bord)}
.etape:last-child{border-bottom:none}
.case{width:28px; height:28px; border:2px solid #b9b7af; border-radius:7px; flex-shrink:0; cursor:pointer;
      display:flex; align-items:center; justify-content:center; font-size:17px; color:#fff}
.case.ok{background:var(--vert); border-color:var(--vert)}
.etape .lib{font-size:14.5px; padding-top:2px; flex:1}
.facultatif{color:var(--texte-2); font-size:12px}
.champ-valeur{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap}
.champ-valeur input[type=number]{width:90px; font-size:17px; padding:8px 10px; border:1.5px solid var(--bord); border-radius:9px; text-align:center}
.bornes{font-size:12px; color:var(--texte-2)}
.photo-miniature{max-width:120px; border-radius:9px; border:1px solid var(--bord)}
.entree-commentaire{width:100%}

.boutons{display:flex; flex-direction:column; gap:9px; margin-top:14px}
.btn{border:none; border-radius:11px; padding:14px; font-size:15.5px; font-weight:600; cursor:pointer; width:100%;
     text-align:center; text-decoration:none; display:block}
.btn-valider{background:var(--vert); color:#fff}
.btn-valider:disabled{background:#cdd8d3; color:#55645d; cursor:not-allowed}
.btn-secondaire{background:#fff; color:var(--texte); border:1.5px solid var(--bord)}
.btn-danger{background:var(--rouge-clair); color:var(--rouge); border:1.5px solid #f0c5c5}
.btn-lien{margin-bottom:12px}
.lien-retour{font-size:13.5px; color:var(--vert); font-weight:600; text-decoration:none; display:inline-block; margin-bottom:10px}

form label{display:block; font-size:13px; color:var(--texte-2); margin-bottom:12px; font-weight:500}
form input[type=text], form input[type=email], form input[type=password], form input[type=number],
form input[type=time], form input[type=date], form select, form textarea{
  display:block; width:100%; font-size:15px; padding:10px 12px; border:1.5px solid var(--bord);
  border-radius:9px; margin-top:5px; background:#fff; font-family:inherit; color:var(--texte)}
.deux-colonnes{display:flex; gap:10px}
.deux-colonnes label{flex:1}
.ligne-case{display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--texte)}
.ligne-case input{width:auto}
.jours-semaine{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px}
.jour{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11.5px; color:var(--texte-2);
      border:1.5px solid var(--bord); border-radius:9px; padding:6px 8px; cursor:pointer; margin-bottom:0}
.jour:has(input:checked){background:var(--vert-clair); border-color:var(--vert); color:var(--vert-fonce); font-weight:600}
.aide{font-size:12.5px; color:var(--texte-2); line-height:1.5}
.aide code{font-size:11px; word-break:break-all}

.etape-ligne{border:1.5px solid var(--bord); border-radius:11px; padding:10px; margin-bottom:10px}
.etape-ligne input[type=text]{margin-top:0}
.etape-options{display:flex; gap:8px; margin-top:8px; align-items:center}
.etape-options select{margin-top:0; flex:1}
.etape-bornes{display:none; gap:8px; margin-top:8px}
.etape-bornes input{margin-top:0}
.etape-ligne.avec-bornes .etape-bornes{display:flex}
.freq-bloc{display:none}
.freq-bloc.visible{display:block}
.panneau-motif{border-color:var(--orange)}
.doc-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.doc-chip{font-size:12.5px; background:var(--vert-clair); color:var(--vert-fonce); border-radius:99px;
          padding:5px 11px; text-decoration:none; font-weight:600}
.btn-details{background:none; border:1.5px solid var(--bord); border-radius:50%; width:30px; height:30px;
             font-size:14px; color:var(--vert); cursor:pointer; vertical-align:middle; margin-left:5px; line-height:1}
.etape-details{background:var(--gris-clair); border-radius:8px; padding:8px 11px; font-size:13px;
               color:var(--texte-2); margin-top:7px}
.btn-lancer{background:var(--vert); color:#fff; border:none; border-radius:11px; padding:9px 14px;
            font-size:13.5px; font-weight:600; cursor:pointer; min-height:38px}
.decision-bloc{margin-top:9px; border-top:1px solid var(--bord); padding-top:8px}
.decision-bloc summary{font-size:12.5px; color:var(--texte-2); cursor:pointer}
.decision-bloc form{margin-top:9px}
.etape-ligne textarea{width:100%; margin-top:8px; font-size:13px}
.version{text-align:center; font-size:12px; color:var(--texte-2); margin-top:18px}
.meteo{background:#fff; border:1px solid var(--bord); border-radius:12px; padding:16px; text-align:center; margin-bottom:10px}
.meteo .icone{font-size:38px}
.meteo .etat{font-size:16px; font-weight:600; margin-top:4px}
.meteo .detail{font-size:13px; color:var(--texte-2); margin-top:2px}
.iqaf-entete{display:flex; justify-content:space-between; align-items:baseline; font-size:14.5px}
.iqaf-valeur{font-size:20px; font-weight:700}
.iqaf-vert{color:var(--vert)} .iqaf-jaune{color:var(--orange)} .iqaf-rouge{color:var(--rouge)}
.jauge{background:var(--bord); border-radius:99px; height:10px; overflow:hidden; margin-top:8px}
.jauge .rempli{height:100%; background:var(--vert)}
.jauge .rempli.iqaf-jaune{background:#ef9f27}
.jauge .rempli.iqaf-rouge{background:#e24b4a}
.badge-a-venir{opacity:.5}
.graphique{position:relative; height:260px}
.graphique-rond{height:230px}
.ligne-stat{display:flex; justify-content:space-between; font-size:14px; padding:9px 0; border-bottom:1px solid var(--bord)}
.ligne-stat:last-child{border-bottom:none}
.ligne-stat .val{font-weight:600}

/* Action corrective sur valeur hors tolérance (directive QA 05.07) */
.etape-alerte{background:#fdf3e3; border-radius:10px}
.action-corrective{margin:8px 0 4px; padding:10px 12px; border:1px solid #ef9f27; border-radius:10px; background:#fff}
.alerte-tol{font-size:13px; color:#854f0b; margin-bottom:8px}
.ac-ligne{display:flex; align-items:center; gap:8px; font-size:14px; padding:5px 0}
.ac-ligne input{width:20px; height:20px}
.ac-champ{display:block; font-size:13px; color:var(--texte-2); margin-top:6px}
.ac-champ input, .ac-champ textarea{width:100%; margin-top:3px}

/* Calendrier du cabinet (directive 00g) */
.ligne-jours{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px}
.case-jour{display:flex; align-items:center; gap:4px; border:1px solid var(--bord); border-radius:9px; padding:7px 9px; font-size:13.5px; background:#fff}

/* Barre fractionnée sur les tâches du jour (backlog n° 27) */
.tache-split{display:flex; align-items:stretch; padding:0; overflow:hidden}
.tache-split .zone-tache{flex:1; display:flex; align-items:center; gap:10px; padding:13px 14px; color:inherit; text-decoration:none; min-width:0}
.tache-split .zone-valider{display:flex; border-left:1px solid var(--bord)}
.tache-split .zone-valider button{width:62px; border:none; background:#eef5f2; color:var(--vert); font-size:22px; font-weight:700; cursor:pointer}
.tache-split .zone-valider button:active{background:var(--vert); color:#fff}

/* Consultation des procédures + recherche (backlog n° 21-22) */
.champ-filtre{width:100%; padding:11px 14px; border:1px solid var(--bord); border-radius:12px; font-size:15px; margin:0 0 12px; background:#fff; -webkit-appearance:none}
.lien-proc{color:inherit; text-decoration:none}
.lien-proc:active{opacity:.65}
.voir-meta{font-size:13.5px; color:var(--texte-2); margin:2px 0 8px; line-height:1.7}
.voir-description{font-size:14px; margin:6px 0 8px}
.voir-etapes ol{margin:4px 0; padding-left:22px}
.voir-etapes li{margin:9px 0; font-size:14.5px}
.voir-etapes .detail-etape{display:block; color:var(--texte-2); font-size:13px; margin-top:2px}
.voir-etapes .type-etape{color:var(--texte-2); font-size:12.5px; white-space:nowrap}
.voir-etapes .facultatif{color:var(--texte-2); font-size:12.5px}
.voir-actions{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.voir-actions .btn{width:100%}

/* ============================================================
   Grand écran (≥ 900 px) — Palier 1 « Confort bureau » (00h/n° 30)
   Une seule interface : la même appli exploite la place disponible.
   La barre du bas devient une rangée d'onglets sous l'en-tête.
   ============================================================ */
@media (min-width: 900px) {
  body{padding:28px 20px}
  .app{max-width:1060px; min-height:calc(100vh - 56px); border-radius:18px;
       overflow:hidden; box-shadow:0 12px 44px rgba(0,0,0,.14)}
  header{order:0; padding:20px 30px 16px}
  header h1{font-size:20px}
  header .sous{font-size:14px}
  nav{order:1; position:static; border-top:none; border-bottom:1px solid var(--bord);
      justify-content:flex-start; gap:4px; padding:0 20px}
  nav a{flex:none; display:flex; align-items:center; gap:8px; font-size:14.5px;
        padding:13px 15px; border-bottom:3px solid transparent}
  nav a .ico{display:inline; font-size:18px; margin:0}
  nav a.actif{border-bottom-color:var(--vert)}
  nav a:hover{color:var(--vert); background:var(--vert-clair); border-radius:10px 10px 0 0}
  .bandeau-pilote{order:2; font-size:13px}
  main{order:3; padding:28px 34px 44px}
  main > *{max-width:840px; margin-left:auto; margin-right:auto}

  /* Confort de lecture et de saisie */
  .carte{padding:16px 18px}
  a.carte:hover, .carte.tache:hover{box-shadow:0 3px 14px rgba(0,0,0,.09)}
  .titre-section{font-size:13.5px}
  input, select, textarea{font-size:15px}
  .deux-colonnes{gap:16px}
  .ligne-stat{padding:10px 2px}
  .ligne-stat:nth-child(even){background:#f7f6f1}
  .voir-etapes li{font-size:15px}
  .champ-filtre{font-size:15.5px}

  /* Boutons de taille raisonnable au bureau (plus de boutons pleine largeur). */
  .boutons .btn, .voir-actions .btn{width:auto; min-width:240px; max-width:420px; align-self:center}
  main > a.btn.btn-lien{width:max-content; max-width:420px}
  .login{max-width:420px}
  .login .btn{width:100%; max-width:none}
}

.app-login{justify-content:center}
.login{padding:24px; margin:auto 0}
.login-logo{font-size:52px; text-align:center}
.login h1{font-size:21px; text-align:center; margin-top:8px}
.login-sous{text-align:center; color:var(--texte-2); font-size:13.5px; margin:4px 0 20px}