:root{
  --noir:#0A0A0A; --accent:#fe1f58; --vert:#1c7c3f; --vert-clair:#e6f4ea;
  --gris:#f4f4f5; --bord:#d6d6da; --texte:#111; --doux:#6b6b72;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#fff; color:var(--texte); font-size:18px; line-height:1.4; padding-bottom:120px;
}
header{
  background:var(--noir); color:#fff; padding:14px 18px; display:flex;
  align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
header .t{font-size:15px; letter-spacing:.14em; font-weight:700}
header .s{font-size:15px; font-weight:700}
header .s b{color:#7ee2a8}
header .s b.rouge{color:#ff8080}
main{padding:18px; max-width:680px; margin:0 auto}

.carte{border:2px solid var(--bord); border-radius:16px; padding:16px; margin-bottom:16px}
.carte.consigne{border-color:var(--accent); background:#fff5f8}
ul.objectifs{list-style:none; margin:0 0 10px; padding:0}
ul.objectifs li{padding:9px 0; border-bottom:1px solid #f3c9d6; font-size:18px}
ul.objectifs li:last-child{border-bottom:0}
ul.objectifs b{font-size:21px}
.carte h2{margin:0 0 10px; font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.carte p{margin:0 0 8px; font-size:18px}
.carte code{background:var(--gris); padding:2px 6px; border-radius:6px; font-size:16px}

.solde{text-align:center; padding:22px 16px; border-radius:16px; background:var(--gris); margin-bottom:18px}
.solde .lab{font-size:15px; color:var(--doux); text-transform:uppercase; letter-spacing:.1em}
.solde .val{font-size:46px; font-weight:800; line-height:1.1; margin-top:4px}
.solde .val.neg{color:#c0182f}

.gros{
  display:block; width:100%; border:0; border-radius:16px; padding:24px 18px;
  font-size:22px; font-weight:800; color:#fff; margin-bottom:14px; text-align:left;
  line-height:1.2; text-decoration:none; font-family:inherit;
}
.gros small{display:block; font-size:15px; font-weight:600; opacity:.85; margin-top:5px}
.gros.a{background:var(--noir)}
.gros.b{background:var(--accent)}
.gros.v{background:var(--vert)}

label{display:block; font-size:15px; font-weight:700; text-transform:uppercase;
      letter-spacing:.08em; color:var(--doux); margin:22px 0 10px}
label .norm{text-transform:none; letter-spacing:0; font-weight:600; color:var(--doux)}

.choix{display:flex; flex-wrap:wrap; gap:10px}
.choix button{
  flex:1 1 46%; min-height:60px; border:2px solid var(--bord); background:#fff;
  border-radius:14px; font-size:17px; font-weight:600; color:var(--texte); padding:10px;
  font-family:inherit;
}
.choix button.on{background:var(--noir); color:#fff; border-color:var(--noir)}
.choix.mini button{flex:1 1 30%; min-height:48px; font-size:15px; border-radius:11px}
.choix.mini button.on{background:var(--accent); border-color:var(--accent)}

/* Cinq natures de dépense au lieu des trois de Jossour : sans retour à la ligne
   la barre déborde de l'écran du téléphone et la page défile latéralement. */
.segments{display:flex; gap:10px; flex-wrap:wrap}
.segments button{flex:1 1 30%; min-width:0; min-height:64px; border:2px solid var(--bord);
                 background:#fff; border-radius:14px; font-size:17px; font-weight:700;
                 color:var(--texte); font-family:inherit; padding:8px}
.segments button.on{background:var(--accent); border-color:var(--accent); color:#fff}

input[type=text].obligatoire{border-color:var(--accent); background:#fff5f8}

select.deroulante{
  width:100%; min-height:68px; padding:16px 52px 16px 18px; font-size:20px; font-weight:700;
  font-family:inherit; color:var(--texte); background-color:#fff; border:2px solid var(--noir);
  border-radius:14px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:24px;
}
select.deroulante:focus{outline:3px solid var(--accent); outline-offset:2px}

button.photo{display:block; width:100%; border:2px dashed var(--noir); background:#fff;
             border-radius:16px; padding:18px; font-size:19px; font-weight:800;
             color:var(--texte); text-align:left; margin-bottom:10px; font-family:inherit}
button.photo small{display:block; font-size:14px; font-weight:600; color:var(--doux); margin-top:4px}
/* Repli discret sous le bouton principal : la photo existe déjà dans le téléphone.
   Collé à son bouton et détaché du suivant, sinon on ne sait plus auquel il se rattache. */
button.galerie{display:block; width:100%; border:0; background:none; color:var(--doux);
               font-size:16px; font-weight:700; text-decoration:underline; font-family:inherit;
               padding:2px 0 4px; margin:-6px 0 20px; text-align:center}

.vignettes{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.vignette{position:relative; width:88px; height:88px; border-radius:12px; background:var(--gris);
          background-size:cover; background-position:center; border:2px solid var(--bord);
          display:block; flex:0 0 auto}
.vignette.attente{display:flex; align-items:center; justify-content:center;
                  font-size:13px; font-weight:700; color:var(--doux); text-align:center}
.vignette .sup{position:absolute; top:-8px; right:-8px; width:30px; height:30px; border-radius:50%;
               border:0; background:var(--noir); color:#fff; font-size:19px; font-weight:800;
               line-height:1; font-family:inherit; padding:0}

.tache{border:2px solid var(--accent); border-radius:16px; padding:14px; margin-bottom:12px; background:#fff5f8}
.tache h3{margin:0 0 10px; font-size:19px}
.tache .lig{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
            color:var(--doux); margin:12px 0 8px}

.step{display:flex; align-items:center; gap:14px}
.step button{width:74px; height:74px; border-radius:18px; border:2px solid var(--bord);
             background:#fff; font-size:34px; font-weight:700; line-height:1; font-family:inherit}
.step .n{flex:1; text-align:center; font-size:44px; font-weight:800}

input[type=number], input[type=text], input[type=password], input[type=date], textarea{
  width:100%; padding:16px; font-size:21px; border:2px solid var(--bord);
  border-radius:14px; font-family:inherit; background:#fff; color:var(--texte);
}
textarea{font-size:18px; min-height:84px}

.astuce{margin-top:10px; width:100%; padding:14px; border:2px dashed var(--vert);
        background:var(--vert-clair); color:var(--vert); border-radius:14px;
        font-size:17px; font-weight:700; font-family:inherit}

.barre{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:2px solid var(--bord);
       padding:12px 18px calc(12px + env(safe-area-inset-bottom)); display:flex; gap:12px; z-index:30}
.barre button{flex:1; border:0; border-radius:14px; padding:20px; font-size:20px;
              font-weight:800; font-family:inherit}
.barre .ok{background:var(--vert); color:#fff}
.barre .no{flex:0 0 34%; background:var(--gris); color:var(--texte)}
.barre button[disabled]{opacity:.45}

.liste{border-top:1px solid var(--bord); padding:14px 0; font-size:16px}
.liste:first-child{border-top:0}
.liste .jour{font-size:13px; font-weight:800; text-transform:uppercase;
             letter-spacing:.11em; color:var(--accent); margin-bottom:5px}
.liste b{display:block; font-size:18px}
.liste span{color:var(--doux); font-size:15px; display:block; margin-top:2px}

.mini-lien{background:none; border:0; color:var(--doux); font-size:15px; text-decoration:underline;
           padding:14px 0; width:100%; font-family:inherit; display:block; text-align:center}

.jauge{margin-bottom:14px}
.jauge .h{display:flex; justify-content:space-between; font-size:16px; margin-bottom:6px; gap:10px}
.jauge .h b{font-weight:700}
.jauge .p{height:14px; background:var(--gris); border-radius:8px; overflow:hidden}
.jauge .p i{display:block; height:100%; background:var(--accent)}
.jauge .p i.fini{background:var(--vert)}

.kpi{display:flex; gap:10px; margin-bottom:16px}
.kpi div{flex:1; background:var(--gris); border-radius:14px; padding:12px; text-align:center}
.kpi .l{font-size:13px; color:var(--doux); text-transform:uppercase; letter-spacing:.06em}
.kpi .v{font-size:21px; font-weight:800; margin-top:2px}

.flash{position:fixed; inset:0; background:var(--vert); color:#fff; z-index:60; display:flex;
       flex-direction:column; align-items:center; justify-content:center; font-size:32px;
       font-weight:800; text-align:center; padding:30px}
.flash small{font-size:19px; font-weight:600; margin-top:12px; opacity:.9}
.err{background:#fdecee; border:2px solid #c0182f; color:#c0182f; padding:14px;
     border-radius:14px; margin-bottom:14px; font-weight:700}
.cache{display:none !important}

/* Signature, pas un bouton : le pavé noir arrondi ressemblait trop aux boutons .gros.
   Le logo est blanc sur transparent, on l'inverse pour le poser sur le fond clair. */
.pied{background:none; border-radius:0; padding:16px 0 0; text-align:center;
      margin:34px 0 4px; border-top:1px solid var(--bord)}
.pied img{height:12px; width:auto; opacity:.3; filter:invert(1);
          display:inline-block; vertical-align:middle}
.pied span{display:block; margin-top:6px; font-size:10px; letter-spacing:.14em;
           text-transform:uppercase; color:#b0b0b8}

table.donnees{width:100%; border-collapse:collapse; font-size:15px}
table.donnees th,table.donnees td{padding:8px 6px; border-bottom:1px solid var(--bord); text-align:left}
table.donnees th{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--doux)}
a.corriger{display:inline-block; padding:6px 12px; border-radius:9px; background:var(--noir);
           color:#fff; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap}

input.cellule{width:96px; padding:9px; font-size:16px; border-radius:9px; text-align:right}

tr.derivee{background:var(--gris)}
.calculee{width:96px; padding:9px; font-size:16px; font-weight:700; text-align:right;
          border:2px dashed var(--bord); border-radius:9px; color:var(--doux); background:#fff}
.ecart{font-size:12px; font-weight:700; color:#c0182f; margin-top:3px}

.defile{overflow-x:auto}
.page-admin{padding-bottom:40px}

/* ------------------------------------------------------------------ ajouts
   Bandeaux d'état réseau et de file d'attente, propres au fonctionnement
   hors ligne. Collés sous l'en-tête, ils doivent se voir sans être anxiogènes. */

.bandeau{padding:12px 18px; font-size:16px; font-weight:700; text-align:center}
#bandeauReseau{background:#fff4d6; color:#7a5200; border-bottom:2px solid #e8c76a}
.bandeau.attente{background:#fff5f8; color:var(--accent); border-bottom:2px solid #f3c9d6}

.aide{color:var(--doux); font-size:16px; margin:0 0 12px}

.carte.installer{border-color:var(--accent); background:#fff5f8}
.carte.installer h2{color:var(--accent)}

/* Ligne de file d'attente : même gabarit que .liste, avec l'état à droite. */
.enattente{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.enattente em{font-style:normal; font-size:14px; font-weight:700; color:var(--accent);
              text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}

/* Puces de navigation de l'écran patron : des liens, pas des boutons, mais
   exactement le même gabarit que les puces de l'écran terrain. */
.choix a.puce{flex:1 1 46%; min-height:60px; border:2px solid var(--bord); background:#fff;
              border-radius:14px; font-size:17px; font-weight:600; color:var(--texte);
              padding:10px; display:flex; align-items:center; justify-content:center;
              text-align:center; text-decoration:none}
.choix a.puce.on{background:var(--noir); color:#fff; border-color:var(--noir)}

/* Navigation de l'espace patron : collée sous l'en-tête, elle défile
   horizontalement sur téléphone plutôt que de comprimer les libellés. */
.onglets{display:flex; gap:0; background:var(--noir); overflow-x:auto;
         position:sticky; top:52px; z-index:19; -webkit-overflow-scrolling:touch}
.onglets a{flex:0 0 auto; padding:12px 18px; color:#9a9aa2; text-decoration:none;
           font-size:15px; font-weight:700; white-space:nowrap; border-bottom:3px solid transparent}
.onglets a.on{color:#fff; border-bottom-color:var(--accent)}

details.carte > summary{cursor:pointer; list-style:revert}
details.carte > summary::marker{color:var(--accent)}
details[open].carte{border-color:var(--accent)}

.kpi .v{white-space:nowrap}