/* ============================================================
   CARNET D'INTERVENTIONS — charte graphique
   Reprise fidèle de la maquette validée par Anton (08/09/2026)
   ============================================================ */
:root{
  --bg:#E9ECF1;            /* fond gris-lavande de la page */
  --card:#FFFFFF;
  --ink:#0F1115;           /* texte principal quasi noir */
  --ink-2:#5B6472;         /* texte secondaire */
  --ink-3:#98A0AC;         /* texte tertiaire / jours hors mois */
  --line:#E4E7EC;
  --line-strong:#D2D7DF;
  --chip:#F4F5F7;
  --r-card:22px;
  --r-inner:16px;
  --r-chip:999px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --shadow-fab:0 6px 20px rgba(0,0,0,.28);
  /* couleurs de services */
  --s-peinture:#3B82F6;      --s-peinture-bg:#E4EDFF;   --s-peinture-br:#BFD6FF;
  --s-verts:#1FA85C;         --s-verts-bg:#DCF3E6;      --s-verts-br:#B4E3C8;
  --s-plomberie:#0EA5A5;     --s-plomberie-bg:#D8F2F2;  --s-plomberie-br:#A9E2E2;
  --s-electricite:#E08127;   --s-electricite-bg:#FCEBD8;--s-electricite-br:#F6D2AC;
  --s-nettoyage:#8B5CF6;     --s-nettoyage-bg:#EDE6FE;  --s-nettoyage-br:#D6C6FC;
  --danger:#DC2626;          --danger-bg:#FDE8E8;
  --ok:#1FA85C;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{margin:0;background:#DDE1E8;font-family:-apple-system,"SF Pro Text","Segoe UI",Inter,system-ui,sans-serif;color:var(--ink)}

/* ---------- planche de présentation ---------- */
.board{display:flex;flex-wrap:wrap;gap:56px 40px;padding:56px 48px 72px;justify-content:flex-start}
.board-title{width:100%;margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:-.6px}
.board-sub{width:100%;margin:0 0 24px;font-size:16px;color:#5B6472;font-weight:500}
.frame{width:390px}
.frame-label{font-size:15px;font-weight:700;color:#2A3140;margin:0 0 4px}
.frame-note{font-size:13px;color:#6B7482;margin:0 0 14px;line-height:1.45;min-height:36px}

/* ---------- téléphone ---------- */
.phone{box-sizing:content-box;width:390px;height:844px;background:var(--bg);border:11px solid #0B0D10;border-radius:52px;
  overflow:hidden;position:relative;box-shadow:0 24px 60px rgba(10,15,25,.22)}
.status{height:46px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 26px 6px;
  font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.2px}
.status .dots{display:flex;gap:5px;align-items:center;opacity:.85}
.screen{height:798px;overflow:hidden;display:flex;flex-direction:column}
.scroll{flex:1;overflow:hidden;padding:0 16px 16px}

/* ---------- en-tête ---------- */
.head{padding:6px 20px 14px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.head h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.7px;line-height:1.18}
.head .sub{margin:3px 0 0;font-size:14px;color:var(--ink-2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.head-actions{display:flex;align-items:center;gap:6px;padding-top:6px;flex:0 0 auto}
.head h1.mois{white-space:nowrap}
.icon-btn{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;color:var(--ink);
  background:transparent;border:0;cursor:pointer}
.icon-btn svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ---------- filtres services ---------- */
.chips{display:flex;gap:9px;padding:2px 20px 16px;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:8px;padding:11px 17px;border-radius:var(--r-chip);
  background:var(--card);border:1px solid var(--line);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip.is-on{border-width:1.5px}
.chip.s-peinture.is-on{background:var(--s-peinture-bg);border-color:var(--s-peinture-br)}
.chip.s-verts.is-on{background:var(--s-verts-bg);border-color:var(--s-verts-br)}
.chip.s-plomberie.is-on{background:var(--s-plomberie-bg);border-color:var(--s-plomberie-br)}
.chip.s-electricite.is-on{background:var(--s-electricite-bg);border-color:var(--s-electricite-br)}

/* ---------- carte calendrier ---------- */
.cal{background:var(--card);border-radius:var(--r-card);padding:16px 12px 10px;box-shadow:var(--shadow)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.cal-week span{text-align:center;font-size:13px;font-weight:600;color:var(--ink-3)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.day{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:7px;border-radius:14px;position:relative}
.day .n{font-size:17px;font-weight:600;line-height:1}
.day.out .n{color:var(--ink-3);font-weight:500}
.day.today .n{color:var(--s-peinture);font-weight:800}
.day.sel{border:2px solid var(--ink);padding-top:5px}
.day .pips{display:flex;gap:3px;margin-top:7px;height:7px;align-items:center}
.pip{width:7px;height:7px;border-radius:50%}
.pip.s-peinture{background:var(--s-peinture)} .pip.s-verts{background:var(--s-verts)}
.pip.s-plomberie{background:var(--s-plomberie)} .pip.s-electricite{background:var(--s-electricite)}
.pip.s-nettoyage{background:var(--s-nettoyage)}

/* ---------- titre de section / jour ---------- */
.day-head{display:flex;align-items:center;justify-content:space-between;padding:22px 6px 12px}
.day-head h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.3px;white-space:nowrap}
.day-head .cnt{white-space:nowrap}
.day-head .cnt{font-size:14px;color:var(--ink-2);font-weight:600}
.sect{margin:16px 6px 8px;font-size:13px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.7px}

/* ---------- état vide ---------- */
.empty{border:2px dashed var(--line-strong);border-radius:var(--r-card);padding:34px 20px;text-align:center;background:rgba(255,255,255,.5)}
.empty svg{width:30px;height:30px;stroke:var(--ink-3);stroke-width:1.8;fill:none;margin-bottom:12px}
.empty p{margin:0 0 16px;color:var(--ink-2);font-size:16px;font-weight:500}

/* ---------- carte intervention ---------- */
.item{background:var(--card);border-radius:var(--r-inner);padding:14px;display:flex;gap:12px;
  box-shadow:var(--shadow);margin-bottom:10px;position:relative;overflow:hidden}
.item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.item.s-peinture::before{background:var(--s-peinture)} .item.s-verts::before{background:var(--s-verts)}
.item.s-plomberie::before{background:var(--s-plomberie)} .item.s-electricite::before{background:var(--s-electricite)}
.item .thumbs{display:flex;gap:4px;flex:0 0 auto}
.thumb{width:52px;height:60px;border-radius:10px;background:#DFE3EA;position:relative;overflow:hidden;flex:0 0 auto}
.thumb span{position:absolute;left:0;right:0;bottom:0;font-size:8px;font-weight:800;text-align:center;
  padding:2px 0;background:rgba(10,13,16,.62);color:#fff;letter-spacing:.4px}
.thumb.vid::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;
  border-left:11px solid rgba(255,255,255,.95);border-top:7px solid transparent;border-bottom:7px solid transparent}
.item .body{flex:1;min-width:0}
.item h3{margin:0 0 3px;font-size:16px;font-weight:700;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .meta{margin:0;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .note{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 9px;border-radius:999px}
.tag.s-peinture{background:var(--s-peinture-bg);color:#1D4FBF} .tag.s-verts{background:var(--s-verts-bg);color:#127543}
.tag.s-plomberie{background:var(--s-plomberie-bg);color:#0A7676} .tag.s-electricite{background:var(--s-electricite-bg);color:#A75A11}
.tag.grey{background:var(--chip);color:var(--ink-2)}

/* ---------- boutons ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:16px;border-radius:16px;
  font-size:16px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.btn-dark{background:var(--ink);color:#fff}
.btn-light{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn-danger{background:var(--danger-bg);color:var(--danger)}
.btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn-sm{padding:11px 15px;font-size:14px;width:auto;border-radius:12px}
.fab{position:absolute;right:20px;bottom:26px;width:60px;height:60px;border-radius:50%;background:var(--ink);
  display:grid;place-items:center;box-shadow:var(--shadow-fab)}
.fab svg{width:27px;height:27px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round}

/* ---------- formulaires ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 7px;letter-spacing:.1px}
.input{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px;font-size:16px;
  color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:500}
.input.ph{color:var(--ink-3);font-weight:400}
.input svg{width:18px;height:18px;stroke:var(--ink-3);stroke-width:2;fill:none;flex:0 0 auto}
.textarea{min-height:104px;align-items:flex-start;line-height:1.5}
.req{color:var(--danger);font-weight:800}

/* ---------- zone photo avant/après ---------- */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.shot{background:var(--card);border:2px dashed var(--line-strong);border-radius:var(--r-inner);
  height:132px;display:grid;place-items:center;text-align:center;padding:10px}
.shot.filled{border-style:solid;border-color:var(--line);padding:0;overflow:hidden;position:relative;background:#D9DEE6}
.shot .cap{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.6px;
  background:rgba(10,13,16,.68);color:#fff;padding:4px 8px;border-radius:8px}
.shot .plus{width:34px;height:34px;border-radius:50%;background:var(--chip);display:grid;place-items:center;margin:0 auto 8px}
.shot .plus svg{width:17px;height:17px;stroke:var(--ink-2);stroke-width:2.4;fill:none;stroke-linecap:round}
.shot small{display:block;font-size:12px;color:var(--ink-2);font-weight:600}
.shot em{display:block;font-size:11px;color:var(--ink-3);font-style:normal;margin-top:2px}

/* ---------- listes réglages / admin ---------- */
.list{background:var(--card);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.1px}
.row .t small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.row .chev{color:var(--ink-3)}
.row .chev svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:800;flex:0 0 auto}
.avatar.s-peinture{background:var(--s-peinture-bg);color:#1D4FBF} .avatar.s-verts{background:var(--s-verts-bg);color:#127543}
.avatar.s-plomberie{background:var(--s-plomberie-bg);color:#0A7676} .avatar.s-electricite{background:var(--s-electricite-bg);color:#A75A11}
.sw{width:47px;height:29px;border-radius:999px;background:var(--line-strong);position:relative;flex:0 0 auto}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on{background:var(--ok)} .sw.on::after{left:21px}
.check{width:24px;height:24px;border-radius:8px;border:2px solid var(--line-strong);flex:0 0 auto;display:grid;place-items:center}
.check.on{background:var(--ink);border-color:var(--ink)}
.check.on::after{content:"";width:10px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg);margin-top:-3px}

/* ---------- barre d'onglets ---------- */
.tabs{display:flex;background:var(--card);border-top:1px solid var(--line);padding:9px 6px 22px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-3)}
.tab svg{width:23px;height:23px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tab.on{color:var(--ink);font-weight:700}

/* ---------- divers ---------- */
.banner{display:flex;gap:11px;align-items:flex-start;background:#FFF7E6;border:1px solid #F5E0AE;
  border-radius:14px;padding:13px 14px;font-size:13px;color:#8A6316;line-height:1.45;font-weight:500}
.banner svg{width:18px;height:18px;stroke:#C8912A;stroke-width:2.2;fill:none;flex:0 0 auto;margin-top:1px}
.pill-count{background:var(--ink);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px}

/* ---------- compléments ---------- */
.scroll .chips{padding-left:0;padding-right:0}
.bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink)}
.stepper{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.stepper b{font-size:15px;font-weight:800;min-width:42px;text-align:center;letter-spacing:-.2px}
.stepper .btn-sm{padding:7px 12px;font-size:16px;line-height:1}
.stat{background:var(--card);border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--shadow);margin-top:4px}
.stat b{display:block;font-size:24px;font-weight:800;letter-spacing:-.6px}
.stat small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:3px;font-weight:500}
.metarow{display:flex;flex-wrap:wrap;gap:7px;align-items:center;padding:14px 6px 2px}
.metarow .cnt{font-size:13px;color:var(--ink-2);font-weight:600}

/* ============================================================
   Application — écrans réels
   ============================================================ */
html,body{height:100%}
body{background:var(--bg);overscroll-behavior-y:none}
.vue{display:none;flex-direction:column;height:100dvh;background:var(--bg);position:relative}
.vue.active{display:flex}
.vue > .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:120px}

/* connexion */
.connexion{display:flex;flex-direction:column;justify-content:center;height:100dvh;padding:0 24px}
.marque{width:64px;height:64px;border-radius:20px;background:var(--ink);display:grid;place-items:center;margin-bottom:22px}
.marque svg{width:31px;height:31px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.connexion h1{font-size:28px;font-weight:800;letter-spacing:-.7px;margin:0}
.connexion .sous{margin:4px 0 30px;color:var(--ink-2);font-size:15px}
input.input,textarea.input{width:100%;font-family:inherit;outline:none;-webkit-appearance:none}
input.input:focus,textarea.input:focus{border-color:var(--ink)}
textarea.input{resize:none;min-height:104px;display:block}
.aide{font-size:13px;color:var(--ink-3);line-height:1.5;margin-top:26px}
.erreur{background:var(--danger-bg);color:var(--danger);border-radius:12px;padding:12px 14px;
  font-size:14px;font-weight:600;margin-bottom:14px}

/* barre du haut avec retour */
.barre{display:flex;align-items:center;gap:6px;padding:8px 12px 10px}
.barre h1{flex:1;font-size:19px;font-weight:700;letter-spacing:-.3px;margin:0;text-align:center}
.barre .icon-btn{flex:0 0 34px}

/* tiroir de navigation */
.voile{position:fixed;inset:0;background:rgba(10,13,16,.42);opacity:0;pointer-events:none;
  transition:opacity .2s;z-index:40}
.voile.on{opacity:1;pointer-events:auto}
.tiroir{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-radius:26px 26px 0 0;
  padding:10px 10px 30px;transform:translateY(100%);transition:transform .24s cubic-bezier(.32,.72,0,1);z-index:41}
.tiroir.on{transform:none}
.tiroir .poignee{width:38px;height:4px;border-radius:99px;background:var(--line-strong);margin:6px auto 12px}
.tiroir button{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;
  padding:15px 16px;font:inherit;font-size:16px;font-weight:600;color:var(--ink);text-align:left;border-radius:14px}
.tiroir button:active{background:var(--chip)}
.tiroir button svg{width:21px;height:21px;stroke:var(--ink-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tiroir button.rouge{color:var(--danger)} .tiroir button.rouge svg{stroke:var(--danger)}

/* messages */
.toast{position:fixed;left:16px;right:16px;bottom:26px;background:var(--ink);color:#fff;
  padding:14px 16px;border-radius:14px;font-size:14.5px;font-weight:600;z-index:60;
  transform:translateY(160%);opacity:0;visibility:hidden;transition:transform .26s cubic-bezier(.32,.72,0,1),opacity .2s,visibility .26s;box-shadow:var(--shadow-fab)}
.toast.on{transform:none;opacity:1;visibility:visible}
.toast.rouge{background:var(--danger)}

/* sélecteur d'établissement */
.recherche{position:sticky;top:0;background:var(--bg);padding:0 0 10px;z-index:2}
.choix{max-height:none}
.choix .row{cursor:pointer}
.choix .row.sel{background:var(--accent-doux,#F4F5F7)}

/* médias */
.media-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.media{position:relative;border-radius:14px;overflow:hidden;background:#D9DEE6;aspect-ratio:3/4}
.media img,.media video{width:100%;height:100%;object-fit:cover;display:block}
.media .cap{position:absolute;top:8px;left:8px;font-size:10px;font-weight:800;letter-spacing:.6px;
  background:rgba(10,13,16,.68);color:#fff;padding:4px 8px;border-radius:8px}
.media .sup{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;
  background:rgba(10,13,16,.68);border:0;display:grid;place-items:center}
.media .sup svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;fill:none}
.vide-media{grid-column:1/-1;text-align:center;color:var(--ink-3);font-size:14px;padding:22px 0}

/* file d'attente hors-ligne */
.attente{display:flex;align-items:center;gap:10px;background:#FFF7E6;border:1px solid #F5E0AE;
  border-radius:12px;padding:11px 13px;font-size:13px;color:#8A6316;font-weight:600;margin-bottom:12px}
.attente svg{width:17px;height:17px;stroke:#C8912A;stroke-width:2.2;fill:none;flex:0 0 auto}

.chips{overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{cursor:pointer;user-select:none}
.day{cursor:pointer}
.charge{text-align:center;padding:40px 0;color:var(--ink-3);font-size:14px}
@media print{.barre,.fab,.tiroir,.voile,.btn{display:none!important}}