/**
 * styles.css — Langage visuel Material 3 (Google).
 *
 * Principes appliqués :
 *   surfaces teintées plutôt que bordures       — la hiérarchie vient du fond
 *   boutons en pilule, 20 px de rayon           — forme reconnaissable de M3
 *   cibles de 40 px pour les icônes             — accessibilité tactile
 *   Roboto, échelle typographique de M3         — Google Sans n'est pas public
 *   une seule couleur d'accent (bleu Google)    — le vert restait de l'atelier
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root{
  /* Material 3 — palette claire */
  --primary:#0b57d0;
  --on-primary:#fff;
  --primary-container:#d3e3fd;
  --on-primary-container:#041e49;

  --surface:#fff;
  --surface-dim:#f8fafd;
  --surface-1:#f0f4f9;          /* conteneur bas      */
  --surface-2:#e9eef6;          /* conteneur          */
  --surface-3:#dde3ea;          /* conteneur haut     */
  --on-surface:#1f1f1f;
  --on-surface-variant:#444746;
  --outline:#c4c7c5;
  --outline-variant:#e1e3e1;

  --erreur:#b3261e;
  --erreur-container:#fceeee;
  --succes:#146c2e;
  --attente:#8f6c00;

  --ombre-1:0 1px 2px rgba(0,0,0,.08), 0 1px 3px 1px rgba(0,0,0,.06);
  --ombre-2:0 1px 2px rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

/* Une classe qui pose `display` bat l'attribut `hidden` du navigateur : même
   spécificité, et la nôtre arrive après. Sans ce garde-fou, el.hidden = true
   n'a aucun effet sur .btn, .lien-btn, etc. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--surface-dim);color:var(--on-surface);
  font:400 14px/1.5 Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Barre supérieure ───────────────────────────────────────────────────── */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:64px;padding:0 24px;background:var(--surface-dim);
  position:sticky;top:0;z-index:5;
}
.bar h1{margin:0;font-size:22px;font-weight:400;letter-spacing:0;color:var(--on-surface)}
.bar-actions{display:flex;align-items:center;gap:8px}

main{max-width:1040px;margin:0 auto;padding:8px 24px 80px}

.titre-zone{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin:16px 0 20px}
.titre-zone h2{margin:0;font-size:22px;font-weight:400;letter-spacing:0}

/* ── Boutons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 24px;border:0;border-radius:20px;
  background:var(--surface-2);color:var(--on-surface);
  font:500 14px/1 Roboto,sans-serif;letter-spacing:.1px;cursor:pointer;
  transition:background .15s, box-shadow .15s;
}
.btn:hover:not(:disabled){background:var(--surface-3);box-shadow:var(--ombre-1)}
.btn:active:not(:disabled){box-shadow:none}
.btn:disabled{opacity:.38;cursor:default}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover:not(:disabled){background:#0842a0;box-shadow:var(--ombre-1)}

.lien-btn{
  display:inline-flex;align-items:center;height:32px;padding:0 12px;
  border:0;border-radius:16px;background:transparent;color:var(--primary);
  font:500 13px/1 Roboto,sans-serif;cursor:pointer;text-decoration:none;
  transition:background .15s;
}
.lien-btn:hover{background:var(--primary-container)}

.icone{
  display:inline-grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--on-surface-variant);
  font-size:15px;line-height:1;cursor:pointer;transition:background .15s;
}
.icone:hover{background:var(--surface-2);color:var(--on-surface)}

/* ── Compte ─────────────────────────────────────────────────────────────── */
.compte{display:flex;align-items:center;gap:10px}
.compte-nom{font-size:14px;color:var(--on-surface-variant)}
.avatar{width:32px;height:32px;border-radius:50%;display:block;object-fit:cover}
.avatar-vide{display:grid;place-items:center;background:var(--primary);
  color:var(--on-primary);font-size:13px;font-weight:500}

/* ── Cartes ─────────────────────────────────────────────────────────────── */
.vide{
  background:var(--surface);border-radius:16px;padding:40px 24px;text-align:center;
  box-shadow:var(--ombre-1);
}
.vide p{margin:0 0 6px}
.doux{color:var(--on-surface-variant);font-size:13px;margin:0}
code{background:var(--surface-2);padding:2px 6px;border-radius:6px;
  font:13px/1 ui-monospace,Menlo,Consolas,monospace}

.projet{
  background:var(--surface);border-radius:16px;margin-bottom:12px;
  box-shadow:var(--ombre-1);transition:box-shadow .15s;
}
.projet:hover{box-shadow:var(--ombre-2)}
.projet-tete{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 12px 16px 24px}
.projet-id h3{margin:0 0 4px;font-size:16px;font-weight:500}
.meta{margin:0;font-size:13px;color:var(--on-surface-variant);
  display:flex;gap:6px;flex-wrap:wrap}
.projet-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.jauge{color:var(--primary);font-weight:500}

/* ── Fiche ──────────────────────────────────────────────────────────────── */
.fil{margin:4px 0 8px}
.groupe{background:var(--surface);border-radius:16px;margin-bottom:12px;
  overflow:hidden;box-shadow:var(--ombre-1)}
.groupe summary{display:flex;justify-content:space-between;align-items:center;
  gap:12px;padding:14px 20px;cursor:pointer;font-weight:500;list-style:none;
  transition:background .15s}
.groupe summary:hover{background:var(--surface-1)}
.groupe summary::-webkit-details-marker{display:none}
.groupe summary::before{content:'▸';color:var(--on-surface-variant);
  font-weight:400;margin-right:6px;font-size:12px;transition:transform .15s}
.groupe[open] > summary::before{content:'▾'}
.cat{flex:1;font-size:15px}
.resume{color:var(--on-surface-variant);font-weight:400;font-size:13px;
  display:flex;align-items:center;gap:6px}
.niveau-1 > summary{background:var(--surface-1)}
.niveau-1 > summary:hover{background:var(--surface-2)}
.niveau-2{border-radius:0;margin:0;box-shadow:none;
  border-top:1px solid var(--outline-variant)}
.niveau-2 > summary{padding-left:36px;font-size:14px}
.niveau-2 .cat{font-size:14px}

table.taches{width:100%;border-collapse:collapse;font-size:14px}
table.taches td{padding:10px 8px;border-top:1px solid var(--outline-variant);
  vertical-align:middle}
table.taches tr:hover{background:var(--surface-1)}
table.taches tr.etat-fait .c-nom{text-decoration:line-through;
  color:var(--on-surface-variant)}
.c-etat{width:52px;padding-left:36px!important}
.c-nom{font-weight:400}
.c-heures{width:70px;text-align:right;font-variant-numeric:tabular-nums;
  color:var(--on-surface-variant)}
.c-qui,.c-echeance{white-space:nowrap;font-size:13px}
.c-actions{width:48px;text-align:right;padding-right:12px!important}
.pastille{width:18px;height:18px;border-radius:50%;border:2px solid var(--c);
  background:var(--c);padding:0;cursor:pointer;display:block;transition:transform .1s}
.pastille:hover{transform:scale(1.15)}
.etat-a_faire .pastille{background:transparent}
.puce{background:var(--surface-2);color:var(--on-surface-variant);
  padding:3px 10px;border-radius:8px;font-size:12px;white-space:nowrap}
.prec{font-size:11px;background:var(--surface-2);padding:2px 6px;border-radius:6px}

/* ── Dialogue ───────────────────────────────────────────────────────────── */
.dlg{border:0;border-radius:28px;padding:0;max-width:880px;
  width:calc(100vw - 48px);background:var(--surface);color:var(--on-surface);
  box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dlg::backdrop{background:rgba(0,0,0,.32)}
.dlg-form{padding:24px}
.dlg h3{margin:0 0 20px;font-size:22px;font-weight:400}
.champ{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.champ > span{font-size:13px;color:var(--on-surface-variant);width:40px}
.champ select{flex:1;height:44px;padding:0 12px;border:1px solid var(--outline);
  border-radius:8px;font:inherit;font-size:14px;background:var(--surface);
  color:var(--on-surface)}
.champ select:focus{outline:2px solid var(--primary);outline-offset:-2px;border-color:transparent}
.prop-tete{margin:18px 0 8px}
table.prop{width:100%;border-collapse:collapse;font-size:14px}
table.prop td{padding:5px 4px;border-top:1px solid var(--outline-variant);
  vertical-align:middle}
table.prop td:first-child{width:34px;text-align:center}
table.prop input:not([type=checkbox]){
  width:100%;height:38px;padding:0 10px;border:1px solid var(--outline);
  border-radius:8px;font:inherit;font-size:14px;background:var(--surface);
  color:var(--on-surface)}
table.prop input:focus{outline:2px solid var(--primary);outline-offset:-2px;
  border-color:transparent}
table.prop input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary);
  cursor:pointer}
table.prop input.num{width:72px;text-align:right}
table.prop td:nth-child(4){white-space:nowrap}
.prop-ajout{background:var(--surface-1)}
.dlg-pied{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}

/* ── États ──────────────────────────────────────────────────────────────── */
.chargement{color:var(--on-surface-variant);padding:24px;text-align:center}
.erreur-inline{color:var(--erreur);padding:24px}
.log{margin:24px 0 0;padding:14px 18px;background:var(--surface-2);border-radius:12px;
  font:12px/1.6 ui-monospace,Menlo,Consolas,monospace;color:var(--on-surface-variant);
  white-space:pre-wrap;word-break:break-word}
.log.erreur{background:var(--erreur-container);color:var(--erreur)}

/* ── Téléphone ──────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .bar{padding:0 16px}
  main{padding:8px 16px 64px}
  .compte-nom{display:none}
  .projet-tete{flex-direction:column;align-items:stretch;padding:16px}
  .projet-actions{justify-content:flex-end}
  .c-qui,.c-machine{display:none}
}
.alerte{background:#fff4e5;color:#8f6c00;padding:10px 14px;border-radius:8px;margin-bottom:14px}
.champ input{flex:1;height:44px;padding:0 12px;border:1px solid var(--outline);
  border-radius:8px;font:inherit;font-size:14px;background:var(--surface);
  color:var(--on-surface)}
.champ input:focus{outline:2px solid var(--primary);outline-offset:-2px;
  border-color:transparent}

.titre-lien{color:var(--primary);text-decoration:none;display:inline-flex;
  align-items:center;gap:5px}
.titre-lien:hover{text-decoration:underline}
.ext{font-size:12px;opacity:.6}

.niveau-2 .cat a.titre-lien{font-size:14px;font-weight:500}
.orphelin{margin-left:8px;background:#fff4e5;color:#8f6c00;padding:2px 8px;
  border-radius:8px;font-size:11px;font-weight:400;white-space:nowrap;cursor:help}

.indice{margin:4px 0 0;font-size:12px}
.derive{margin-left:8px;color:var(--on-surface-variant);font-size:11px;
  font-weight:400;white-space:nowrap}
.libre{margin-left:8px;background:var(--surface-2);color:var(--on-surface-variant);
  padding:2px 8px;border-radius:8px;font-size:11px;font-weight:400;cursor:help}

.actions-fiche{display:flex;gap:8px;flex-shrink:0}
.rappel{margin:-8px 0 20px}

.champ-ouvert{display:block;position:relative}
.avis{display:block;margin-top:3px;font-size:11px;line-height:1.3;
  color:var(--attente)}
.avis.identique{color:var(--erreur)}
.corriger{border:0;background:transparent;padding:0 0 0 2px;font:inherit;
  font-size:11px;font-weight:600;color:inherit;text-decoration:underline;
  cursor:pointer}
.corriger::before{content:'↳ ';text-decoration:none;opacity:.7}

.corps-reglage{padding:4px 20px 18px}
.corps-reglage textarea{width:100%;margin-top:8px;padding:10px 12px;
  border:1px solid var(--outline);border-radius:8px;background:var(--surface);
  color:var(--on-surface);font:13px/1.6 ui-monospace,Menlo,Consolas,monospace;
  resize:vertical}
.corps-reglage textarea:focus{outline:2px solid var(--primary);outline-offset:-2px;
  border-color:transparent}
.bloc-famille{display:block;margin-top:14px}
.nom-famille{font-size:13px;font-weight:500;color:var(--on-surface-variant)}
.pied-reglages{display:flex;justify-content:flex-end;margin-top:20px}
.empty-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}