:root {
    --primaire:#2E8B1F; --primaire-fonce:#146C14; --primaire-clair:#4CAF2E;
    --fond:#f3f7f2; --carte:#ffffff; --bordure:#d8e6d4;
    --texte:#1a1f19; --texte-doux:#5d6b5a; --alerte:#b3541e;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  [hidden] { display:none !important; }
  html { font-size:17px; }
  body { font-family:-apple-system, "Segoe UI", Roboto, sans-serif; background:var(--fond);
         color:var(--texte); line-height:1.55; min-height:100vh; }
  header { background:var(--carte); border-bottom:3px solid var(--primaire);
           padding:12px 22px; display:flex; align-items:center; gap:14px;
           position:sticky; top:0; z-index:10; box-shadow:0 1px 8px rgba(0,0,0,.06); }
  header img { height:46px; width:46px; object-fit:contain; border-radius:8px; }
  .titre b { font-size:1.08rem; }
  .titre small { display:block; color:var(--texte-doux); font-size:.72rem;
                 text-transform:uppercase; letter-spacing:1px; }
  .qui { margin-left:auto; text-align:right; font-size:.8rem; color:var(--texte-doux); }
  .qui a { color:var(--primaire-fonce); cursor:pointer; text-decoration:underline; }
  nav { display:flex; gap:8px; padding:16px 22px 0; max-width:1080px; margin:0 auto; flex-wrap:wrap; }
  nav button { border:1.5px solid var(--bordure); background:var(--carte); color:var(--texte-doux);
               padding:10px 18px; border-radius:24px; font-weight:700; font-size:.92rem;
               cursor:pointer; min-height:44px; }
  nav button.actif { background:var(--primaire); border-color:var(--primaire); color:#fff; }
  nav button .badge { display:inline-block; min-width:22px; padding:0 6px; border-radius:12px;
               background:var(--alerte); color:#fff; font-size:.75rem; margin-left:7px; }
  main { max-width:1080px; margin:0 auto; padding:16px 22px 70px; }
  .carte { background:var(--carte); border:1px solid var(--bordure); border-radius:14px;
           padding:20px 22px; margin-bottom:18px; }
  .carte h3 { font-size:1.06rem; margin-bottom:10px; color:var(--primaire-fonce); }
  label { display:block; font-size:.82rem; font-weight:700; color:var(--texte-doux); margin:12px 0 4px; }
  input, select { width:100%; padding:11px 12px; border:1.5px solid var(--bordure); border-radius:9px;
          font-size:.95rem; background:#fff; color:var(--texte); min-height:44px; }
  input:focus, select:focus { outline:2px solid var(--primaire-clair); border-color:var(--primaire); }
  .btn { display:inline-block; margin-top:14px; padding:13px 26px; border:none; border-radius:10px;
         background:var(--primaire); color:#fff; font-weight:800; font-size:1rem;
         cursor:pointer; min-height:48px; }
  .btn:hover { background:var(--primaire-fonce); }
  .btn.secondaire { background:transparent; color:var(--primaire-fonce);
                    border:1.5px solid var(--primaire); }
  .btn.grand { width:100%; font-size:1.1rem; padding:15px; }
  .btn:disabled { opacity:.45; cursor:not-allowed; }
  .note { font-size:.84rem; color:var(--texte-doux); margin-top:8px; }
  .avis { background:#fdf6ec; border-left:5px solid var(--alerte); border-radius:0 10px 10px 0;
          padding:13px 15px; font-size:.9rem; margin:12px 0; }
  .avis b { color:var(--alerte); }
  .ligne-mail { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
                padding:10px 0; border-bottom:1px solid var(--bordure, #e8e4dc); }
  .ligne-mail span { flex:1; min-width:200px; font-size:.92rem; }
  .btn.discret { background:transparent; color:var(--texte-doux);
                 border:1.5px solid var(--texte-doux); }
  .toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
           background:var(--texte); color:#fff; padding:12px 22px; border-radius:10px;
           font-size:.9rem; opacity:0; transition:opacity .3s; pointer-events:none; z-index:60;
           max-width:90vw; text-align:center; }
  .toast.visible { opacity:.96; }
  table { width:100%; border-collapse:collapse; font-size:.9rem; }
  th { text-align:left; color:var(--texte-doux); font-size:.72rem; text-transform:uppercase;
       letter-spacing:.5px; padding:9px 10px; border-bottom:2px solid var(--bordure); }
  td { padding:11px 10px; border-bottom:1px solid var(--bordure); vertical-align:middle; }
  .chip { font-size:.74rem; font-weight:800; padding:4px 12px; border-radius:15px; white-space:nowrap; }
  .chip.confirme { background:var(--primaire); color:#fff; }
  .chip.avalider { background:#fdf6ec; color:var(--alerte); border:1.5px solid var(--alerte); }
  .chip.envoye { background:var(--primaire-fonce); color:#fff; }
  .chip.lecture { background:var(--bordure); color:var(--texte-doux); }
  .lien { color:var(--primaire-fonce); text-decoration:underline; cursor:pointer;
          background:none; border:none; font-size:.85rem; padding:6px; }
  .lien.danger { color:var(--alerte); }
  .depot { border:3px dashed var(--bordure); border-radius:14px; padding:44px 20px;
           text-align:center; color:var(--texte-doux); cursor:pointer; transition:all .2s;
           font-size:1.05rem; }
  .depot.survol, .depot:hover { border-color:var(--primaire); background:#fafdf9; }
  .depot b { color:var(--primaire-fonce); }
  .depot .ico { font-size:2rem; display:block; margin-bottom:8px; }
  .resultat-ok { color:var(--primaire-fonce); }
  .resultat-ko { color:var(--alerte); }
  .vide { color:var(--texte-doux); padding:18px 4px; font-size:.95rem; }
  #vueLogin { max-width:420px; margin:7vh auto; }
  #vueLogin .logo-grand { display:block; margin:0 auto 16px; height:92px; width:92px; object-fit:contain; }

  /* ── validation : photo à gauche, lecture à droite ── */
  .valid-grille { display:grid; grid-template-columns: 1fr 1fr; gap:20px; align-items:start; }
  @media (max-width: 860px) { .valid-grille { grid-template-columns: 1fr; } }
  .photo-cadre { background:#20241f; border-radius:12px; overflow:hidden; text-align:center;
                 min-height:280px; display:flex; align-items:center; justify-content:center;
                 cursor:zoom-in; }
  .photo-cadre img { max-width:100%; max-height:520px; object-fit:contain; display:block; }
  .photo-cadre .pdf { color:#fff; padding:40px 20px; font-size:1rem; }
  .lecture-champ { display:flex; justify-content:space-between; gap:10px; padding:9px 2px;
                   border-bottom:1px dashed var(--bordure); font-size:.98rem; }
  .lecture-champ span:first-child { color:var(--texte-doux); }
  .lecture-champ b.absent { color:var(--texte-doux); font-weight:600; }
  .ligne-item { display:grid; grid-template-columns: 1fr auto; gap:8px 12px; padding:10px 0;
                border-bottom:1px solid var(--bordure); align-items:center; }
  .ligne-item .desc { font-weight:700; }
  .ligne-item .prix { text-align:right; font-weight:700; white-space:nowrap; }
  .ligne-item select { grid-column: 1 / -1; font-size:.88rem; }
  .wiz-tete { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .wiz-tete h3 { margin:0; }
  .plein-ecran { position:fixed; inset:0; background:rgba(10,14,9,.93); z-index:70;
                 display:flex; align-items:center; justify-content:center; cursor:zoom-out; }
  .plein-ecran img { max-width:96vw; max-height:96vh; object-fit:contain; }
  .succes-bloc { text-align:center; padding:30px 10px; }
  .succes-bloc .gros { font-size:2.4rem; }