/* ===== Maison de St Chamas — feuille de style ===== */
:root{
  --bg:#f6f1ea; --bg2:#efe7db; --card:#fffdfa; --ink:#33302b; --ink-soft:#6b645b;
  --line:#e4daca; --line2:#d8ccb8;
  --wood:#5a4634; --wood-dark:#3f3730; --terra:#c1663f; --terra-dark:#a8552f;
  --sand:#d9c7a8; --marble:#f3efe7; --green:#5b7a52; --amber:#c98a2b; --red:#b4472f;
  --radius:14px; --radius-sm:9px; --shadow:0 6px 22px rgba(63,55,48,.10); --shadow-sm:0 2px 8px rgba(63,55,48,.08);
  --font:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* garantit que la modale/le toast restent cachés tant qu'on ne les ouvre pas */
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.45;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:700;color:var(--wood-dark);line-height:1.2}
a{color:var(--terra-dark);text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}

/* ---------- Login ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3f3730,#5a4634 55%,#7a5c3e);padding:24px}
.login-card{background:var(--card);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.35);
  width:100%;max-width:380px;padding:32px 28px}
.login-brand{text-align:center;margin-bottom:18px}
.login-logo{font-size:46px}
.login-brand h1{font-size:22px;margin:.2em 0 .1em}
.login-brand p{color:var(--ink-soft);margin:0}
.login-card form label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:14px}
.login-card input{width:100%;margin-top:5px;padding:12px 13px;border:1px solid var(--line2);border-radius:10px;font-size:16px;background:#fff}
.login-error{background:#fbe8e2;color:var(--red);border:1px solid #f0c8bd;padding:10px 12px;border-radius:9px;margin-bottom:14px;font-size:14px}
.login-hint{text-align:center;color:var(--ink-soft);font-size:12px;margin:16px 0 0}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--terra);color:#fff;border:none;padding:11px 18px;border-radius:10px;font-weight:600;font-size:15px;transition:.15s}
.btn-primary:hover{background:var(--terra-dark)}
.btn-block{width:100%;display:block;margin-top:6px;padding:13px}
.btn-ghost{background:transparent;border:1px solid var(--line2);color:var(--ink);padding:7px 12px;border-radius:9px;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{background:var(--bg2)}
.btn-sm{padding:6px 11px;font-size:13px;border-radius:8px}
.btn-danger{color:var(--red);border-color:#e6c1b7}
.btn-danger:hover{background:#fbe8e2}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;height:56px;background:var(--wood-dark);color:#f6efe6;
  display:flex;align-items:center;gap:12px;padding:0 14px;padding-top:env(safe-area-inset-top)}
.hamburger{display:none;background:transparent;border:none;color:#f6efe6;font-size:22px;line-height:1}
.topbar-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;flex:1;min-width:0}
.topbar-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-emoji{font-size:20px}
.topbar-right{display:flex;align-items:center;gap:10px}
.user-chip{background:rgba(255,255,255,.14);padding:5px 11px;border-radius:20px;font-size:13px;font-weight:600}
.topbar-right .btn-ghost{color:#f6efe6;border-color:rgba(255,255,255,.25)}
.topbar-right .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:230px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--line);
  padding:14px 10px;display:flex;flex-direction:column;gap:3px;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
.navlink{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:none;
  padding:11px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:.12s}
.navlink span{flex:1}
.navlink:hover{background:#e7dcc9;color:var(--ink)}
.navlink.active{background:var(--wood);color:#fff;box-shadow:var(--shadow-sm)}
.navlink.small{font-size:13.5px;font-weight:500}
.sidebar-foot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.sidebar-backdrop{display:none}

.content{flex:1;min-width:0;padding:22px 26px 60px;max-width:1150px;margin:0 auto;width:100%}
.loader{padding:60px;text-align:center;color:var(--ink-soft)}

/* ---------- Page headers ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page-head h2{font-size:24px;margin:0}
.page-head .sub{color:var(--ink-soft);font-size:14px;margin-top:3px}
.page-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Cards & grid ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px;margin-bottom:18px}
.card h3{font-size:17px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- Stat tiles ---------- */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .label{font-size:12.5px;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.stat .value{font-size:26px;font-weight:800;color:var(--wood-dark);margin-top:4px;line-height:1.1}
.stat .value small{font-size:14px;font-weight:600;color:var(--ink-soft)}
.stat.accent{background:linear-gradient(135deg,#fff5ef,#fbe9df);border-color:#f0d4c4}
.stat.accent .value{color:var(--terra-dark)}

/* progress bar */
.progress{height:12px;border-radius:8px;background:var(--bg2);overflow:hidden;margin-top:10px;border:1px solid var(--line)}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--terra),var(--amber));border-radius:8px;transition:width .4s}
.progress.over > span{background:linear-gradient(90deg,var(--red),#d67)}
.progress-legend{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-top:6px}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse;background:var(--card);font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--bg2);font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);white-space:nowrap;position:sticky;top:0}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#faf5ec}
tr.section-row td{background:var(--wood);color:#fff;font-weight:700;text-transform:uppercase;font-size:12.5px;letter-spacing:.04em}
tfoot td{font-weight:700;background:var(--bg2)}

/* ---------- Badges / status ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.gray{background:#eae2d4;color:#6b645b}
.badge.blue{background:#dbe6ef;color:#3a6488}
.badge.amber{background:#f6e6c8;color:#8a6314}
.badge.green{background:#d9e8d2;color:#456a3a}
.badge.red{background:#f5ddd4;color:#a8442b}
.chip{display:inline-block;padding:2px 8px;border-radius:6px;background:var(--bg2);font-size:12px;color:var(--ink-soft);border:1px solid var(--line)}
.pill-supply{background:#efe3cf;color:#7a5c2e;border:1px solid #e0cfb0}

/* status select inline */
.status-select{border:1px solid var(--line2);border-radius:20px;padding:4px 8px;font-size:12.5px;font-weight:600;background:#fff}

/* ---------- Forms ---------- */
.form-grid{display:grid;gap:13px}
.form-grid.two{grid-template-columns:1fr 1fr}
label.field{display:block;font-size:13px;font-weight:600;color:var(--ink-soft)}
label.field > span{display:block;margin-bottom:4px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],select,textarea{
  width:100%;padding:10px 11px;border:1px solid var(--line2);border-radius:9px;font-size:15px;background:#fff;color:var(--ink);font-family:inherit}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sand);border-color:var(--sand)}
.checkbox{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.checkbox input{width:18px;height:18px}
.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--ink-soft)}

/* ---------- Rich text editable ---------- */
.rich{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:6px 20px 12px}
.rich h3{margin-top:1em;color:var(--terra-dark);font-size:16px}
.rich ul{padding-left:20px}
.rich li{margin:3px 0}
[contenteditable=true]{outline:2px dashed var(--sand);border-radius:8px;padding:8px;background:#fffef9}

/* ---------- Documents & inspirations gallery ---------- */

.insp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.insp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.insp-card img{width:100%;height:200px;object-fit:cover;display:block;cursor:zoom-in}
.insp-body{padding:12px}
.insp-body .t{font-weight:700}
.insp-body .note{font-size:13px;color:var(--ink-soft);margin-top:3px}
.room-title{font-size:18px;color:var(--wood-dark);margin:22px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--line2)}

/* ---------- Comments ---------- */
.comments{margin-top:10px;border-top:1px dashed var(--line2);padding-top:10px}
.comment{background:var(--bg2);border-radius:10px;padding:8px 11px;margin-bottom:7px;font-size:13.5px}
.comment .who{font-weight:700;color:var(--wood-dark)}
.comment .when{color:var(--ink-soft);font-size:11.5px;margin-left:6px}
.comment .del{float:right;color:var(--ink-soft);background:none;border:none;font-size:12px}
.comment-form{display:flex;gap:8px;margin-top:6px}
.comment-form input{flex:1}

/* ---------- Expandable detail rows ---------- */
.toggle-cell{cursor:pointer;text-align:center;color:var(--terra);font-weight:700;user-select:none;font-size:13px}
.line-row .line-label{cursor:pointer;font-weight:600}
.line-row.open>td{background:#f6ecdd}
tr.detail-row>td{background:#fbf7f0;padding:0;border-bottom:2px solid var(--line2)}
.detail-box{padding:12px;display:grid;gap:9px}
.detail-parent{font-size:12px;font-weight:700;color:var(--terra-dark);display:flex;align-items:center;gap:5px;opacity:.85}
.detail-h{font-weight:700;color:var(--wood-dark);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.note-body{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-size:14px;margin-bottom:8px}

/* sections repliables (épuré) */
.dsec{border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
.dsec.open{box-shadow:var(--shadow-sm)}
.dsec-head{display:flex;align-items:center;gap:9px;width:100%;background:transparent;border:none;padding:10px 12px;cursor:pointer;font:inherit;text-align:left}
.dsec-head:hover{background:var(--bg2)}
.dsec-ico{font-size:15px;width:18px;text-align:center}
.dsec-title{font-weight:700;color:var(--wood-dark);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em}
.dsec-count{background:var(--sand);color:var(--wood-dark);border-radius:20px;padding:1px 9px;font-size:12px;font-weight:700}
.dsec-toggle{margin-left:auto;color:var(--terra);font-weight:700;font-size:18px;line-height:1;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--bg2)}
.dsec-head:hover .dsec-toggle{background:#e7dcc9}
.dsec-body{padding:4px 12px 12px;border-top:1px solid var(--line)}

/* sublines */
.subline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.sl-label{font-weight:600}
.sl-amount{color:var(--wood-dark);font-weight:700;background:var(--bg2);padding:2px 8px;border-radius:6px}
.sl-link{font-size:13px}
.sl-actions{margin-left:auto;display:flex;white-space:nowrap}
.subline>.hint{width:100%}

/* attachments */
.attach{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.attach-list{display:flex;flex-wrap:wrap;gap:8px}
.attach-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:4px 8px 4px 4px;max-width:240px}
.attach-chip img{width:36px;height:36px;object-fit:cover;border-radius:6px;cursor:zoom-in}
.attach-chip .ai{font-size:22px;width:32px;text-align:center}
.attach-chip .an{font-size:12.5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach-chip .an:hover{color:var(--terra-dark);text-decoration:underline}
.attach-del{background:none;border:none;color:var(--ink-soft);font-size:12px;cursor:pointer;padding:2px}
.attach-del:hover{color:var(--red)}
.mini-thumbs{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.mini-thumbs img{width:34px;height:34px;object-fit:cover;border-radius:5px;cursor:zoom-in}
.mini-file{font-size:20px;cursor:pointer}

/* payments */
.payment{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;background:#fff;border:1px solid var(--line);border-radius:9px;margin-bottom:7px}
.pay-payer{font-weight:700;color:var(--wood-dark)}
.pay-amount{color:var(--green);font-weight:700}
.pay-atts{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:2px}
.chip-file{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:12px;cursor:pointer}
.chip-file:hover{background:#e7dcc9}

/* stat clickable + recap */
.stat.clickable{cursor:pointer;transition:.12s}
.stat.clickable:hover{background:var(--bg2);border-color:var(--line2)}
.recap-card .recap-body{margin-top:12px}

/* pdf viewer */
.pdf-frame{width:100%;height:72vh;border:none;border-radius:8px;background:#fff}

/* lecture seule */
.ro-pill{background:rgba(255,255,255,.18);border-radius:12px;padding:1px 8px;font-size:11px;margin-left:6px;white-space:nowrap}

/* ===== MOBILE : les tableaux deviennent des cartes ===== */
@media(max-width:820px){
  .rtable{border:none;background:transparent}
  .rtable thead{display:none}
  .rtable, .rtable tbody{display:block;width:100%}
  .rtable tr{display:block}
  .rtable td{display:block;border:none;padding:0;white-space:normal}
  .table-wrap{overflow:visible;border:none;border-radius:0;background:transparent}

  /* titre de section (nom + sous-total) */
  .rtable tr.section-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--wood);border-radius:10px;padding:10px 14px;margin:18px 0 8px}
  .rtable tr.section-row td{display:inline;background:transparent!important;color:#fff!important;padding:0;font-weight:700;font-size:13px;letter-spacing:.03em}
  .rtable tr.section-row td:empty{display:none}

  /* chaque ligne = une carte */
  .rtable tr.line-row, .rtable tr.mrow{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:12px;padding:13px 15px}
  /* carte ouverte : se prolonge vers son détail (coins bas carrés, pas d'écart) */
  .rtable tr.line-row.open{border-color:var(--sand);box-shadow:none;margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .rtable tr.line-row.open>td{background:transparent}

  /* bouton d'ouverture en haut à droite */
  .rtable td.toggle-cell{position:absolute;top:11px;right:11px;width:32px;height:32px;background:var(--bg2);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--terra)}
  .rtable td.toggle-cell .tg{background:transparent;width:auto;height:auto}
  .rtable tr.line-row.open td.toggle-cell .tg{background:transparent;color:var(--terra)}
  .rtable tr.line-row:hover .line-label{text-decoration:none}

  /* titre de la carte */
  .rtable td.cell-main{font-size:15.5px;font-weight:700;color:var(--wood-dark);padding:0 44px 10px 0;line-height:1.3}
  .rtable tr.mrow td.cell-main{padding-right:0}
  .rtable td.cell-main .hint{font-weight:400;font-size:12.5px;margin-top:3px}

  /* lignes valeur avec libellé à gauche */
  .rtable td[data-label]{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--line);text-align:right;min-height:20px}
  .rtable td[data-label]::before{content:attr(data-label);font-weight:600;color:var(--ink-soft);font-size:12.5px;text-transform:none;letter-spacing:0;text-align:left;flex:0 0 auto}
  /* Cellule sans contenu utile : inutile d'afficher « Payeur prévu — » sur la carte.
     Doit rester APRÈS la règle td[data-label] ci-dessus (spécificité identique). */
  .rtable td.cell-empty{display:none}

  /* statut */
  .rtable td.cell-status{padding:9px 0 4px}
  .rtable td.cell-status .status-select{width:auto;min-height:38px;font-size:14px}

  /* pièces jointes (mesures) */
  .rtable td.cell-attach{padding:9px 0 4px;border-top:1px solid var(--line)}
  .rtable td.cell-attach::before{content:attr(data-label);display:block;font-weight:600;color:var(--ink-soft);font-size:12.5px;margin-bottom:7px}

  /* actions : gros boutons tactiles */
  .rtable td.cell-actions{display:flex;gap:10px;justify-content:stretch;padding-top:11px;margin-top:9px;border-top:1px solid var(--line)}
  .rtable td.cell-actions:empty{display:none}
  .rtable td.cell-actions .btn-ghost{margin:0;flex:1 1 0;min-height:44px;font-size:18px;border-radius:11px}
  /* quick actions (Travaux) : compactes et à droite, mais tactiles */
  .rtable td.cell-qa{justify-content:flex-end;gap:4px;padding-top:8px;margin-top:6px}
  .cell-qa .qa{font-size:20px;padding:8px 12px}

  /* panneau détail = prolongement direct de la carte parente */
  .rtable tr.detail-row{display:block;margin:0 0 14px}
  .rtable tr.detail-row>td{display:block;padding:0}
  .rtable tr.detail-row .detail-box{position:relative;border:1px solid var(--sand);border-top:none;border-radius:0 0 14px 14px;background:#fbf7f0;box-shadow:var(--shadow);padding:12px 12px 12px 18px}
  .rtable tr.detail-row .detail-box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--terra);border-radius:0 0 0 14px}
  .rtable .detail-parent{margin-bottom:2px;opacity:1}
  /* sous-cartes internes allégées (moins de "boîtes dans des boîtes") */
  .rtable tr.detail-row .dsec{background:rgba(255,255,255,.75);box-shadow:none}
  .rtable tr.detail-row .dsec.open{box-shadow:none}

  /* totaux en bas */
  .rtable tfoot{display:block;margin-top:2px}
  .rtable tfoot tr{display:flex;justify-content:space-between;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:10px 14px;margin-bottom:7px;font-weight:700}
  .rtable tfoot td{display:inline;border:none;padding:0}
  .rtable tfoot td:empty{display:none}
  .rtable tfoot td.num{color:var(--wood-dark)}

  /* confort tactile général */
  .page-actions{width:100%}
  .btn-ghost.btn-sm, .btn-primary.btn-sm{min-height:38px}
  .dsec-head{padding:12px}
  .dsec-toggle{width:26px;height:26px}
}

/* ---------- Modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:100;background:rgba(45,38,32,.5);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow-y:auto}
.modal{background:var(--card);border-radius:16px;width:100%;max-width:560px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:18px}
.modal-close{background:none;border:none;font-size:20px;color:var(--ink-soft)}
.modal-body{padding:20px}
.modal-body.wide{max-width:none}
.modal.lg{max-width:820px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(20,16,12,.9);display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px}

/* ---------- Toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--wood-dark);color:#fff;padding:11px 20px;border-radius:24px;font-size:14px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.err{background:var(--red)}

/* ---------- Activity feed ---------- */
.feed{list-style:none;margin:0;padding:0}
.feed li{padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px;display:flex;gap:8px}
.feed li:last-child{border-bottom:none}
/* Le journal affiche du texte saisi par l'utilisateur : un titre sans espace, un nom de
   fichier ou une URL un peu longue poussait la ligne au-delà de l'écran, et c'est la page
   entière qui se mettait à défiler horizontalement. */
.feed li > span{min-width:0;overflow-wrap:anywhere}
.feed .who{font-weight:700;color:var(--wood-dark);white-space:nowrap}
.feed .when{color:var(--ink-soft);margin-left:auto;font-size:12px;white-space:nowrap}

.empty{text-align:center;color:var(--ink-soft);padding:30px;font-size:14px}
.section-sub{font-size:13px;color:var(--ink-soft);margin:-8px 0 14px}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.filterbar .chip{cursor:pointer;padding:6px 12px;font-size:13px}
.filterbar .chip.active{background:var(--wood);color:#fff;border-color:var(--wood)}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .hamburger{display:block}
  .sidebar{position:fixed;left:0;top:56px;transform:translateX(-100%);transition:transform .22s;z-index:45;box-shadow:6px 0 24px rgba(0,0,0,.15);width:250px}
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop.show{display:block;position:fixed;inset:56px 0 0 0;background:rgba(0,0,0,.35);z-index:44}
  .content{padding:16px 14px 70px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .grid-4.keep2{grid-template-columns:1fr 1fr;gap:12px}
  .form-grid.two{grid-template-columns:1fr}
  .page-head h2{font-size:20px}
  /* Tuiles resserrées sur téléphone : quatre chiffres n'ont pas à occuper un quart
     de l'écran avant qu'on voie quoi que ce soit d'actionnable. Choix de densité. */
  .stat{padding:12px 14px}
  .stat .label{font-size:11px;letter-spacing:.02em}
  .stat .value{font-size:22px}
}
@media(min-width:560px) and (max-width:820px){
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
}

/* ---------- Print / export PDF ---------- */
@media print{
  .topbar,.sidebar,.sidebar-backdrop,.page-actions,.hamburger,.no-print,.comment-form,.btn-row,.filterbar{display:none!important}
  body{background:#fff;font-size:12px}
  .content{max-width:none;padding:0}
  .card,.stat{box-shadow:none;border:1px solid #ccc;break-inside:avoid}
  .table-wrap{overflow:visible;border:none}
  th{position:static}
  a{color:#000}
  .print-only{display:block!important}
  tr.section-row td{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .badge{border:1px solid #999}
  .recap-body[hidden]{display:block!important}   /* le récap payeurs s'imprime même s'il est replié */
  tr.detail-row>td{background:#fff!important}
  @page{margin:1.4cm}
}
.print-only{display:none}
.print-header{display:none}
@media print{.print-header{display:block;margin-bottom:14px;border-bottom:2px solid #333;padding-bottom:8px}
  .print-header h1{font-size:18px;margin:0}.print-header .meta{font-size:11px;color:#555}}

/* ---------- Bouton thème ---------- */
.theme-toggle{font-size:16px;line-height:1;padding:6px 9px}

/* ---------- Grosses cartes repliables / réordonnables (Mesures & Travaux) ---------- */
.group-card{padding:0;overflow:hidden}
.group-head{display:flex;align-items:center;gap:8px;padding:12px 14px}
.group-toggle{flex:1;display:flex;align-items:center;gap:10px;background:transparent;border:none;text-align:left;font:inherit;padding:0;min-width:0;flex-wrap:wrap}
.group-caret{color:var(--terra);font-weight:700;font-size:13px;width:14px;flex-shrink:0}
.group-title{font-weight:700;color:var(--wood-dark);font-size:16px}
.group-summary{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.group-body{padding:0 14px 14px}

/* ---------- Schéma interactif du plan (Mesures) ---------- */
:root{ --plan-fill:#f4eede; --plan-line:#8a7355; --plan-grid:rgba(138,115,85,.12); }
.plan-fig{margin:0 0 16px;background:var(--marble);
  background-image:linear-gradient(var(--plan-grid) 1px,transparent 1px),linear-gradient(90deg,var(--plan-grid) 1px,transparent 1px);
  background-size:22px 22px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px 6px}
.plan-svg{width:100%;height:auto;max-height:64vh;display:block;overflow:visible}
.plan-room{fill:var(--plan-fill);stroke:var(--plan-line);stroke-width:2;transition:fill .15s,stroke .15s}
.plan-room-g{cursor:pointer;outline:none}
.plan-room-g:hover .plan-room,.plan-room-g.plan-hot .plan-room,.plan-room-g.plan-hl .plan-room,
.plan-room-g:focus-visible .plan-room{fill:var(--terra);fill-opacity:.85;stroke:var(--terra-dark)}
.plan-room-name{font:600 12px var(--font);fill:var(--wood-dark);pointer-events:none}
.plan-room-val{font:500 10.5px var(--font);fill:var(--ink-soft);pointer-events:none}
.plan-room-g:hover .plan-room-name,.plan-room-g.plan-hot .plan-room-name,.plan-room-g.plan-hl .plan-room-name,
.plan-room-g:hover .plan-room-val,.plan-room-g.plan-hot .plan-room-val,.plan-room-g.plan-hl .plan-room-val{fill:#fff}
.plan-wall{stroke:var(--wood-dark);stroke-width:3;stroke-linecap:round;transition:stroke .12s,stroke-width .12s}
.plan-wall-hit{stroke:transparent;stroke-width:16;cursor:pointer}
.plan-wall-g{outline:none}
.plan-wall-g:hover .plan-wall,.plan-wall-g.plan-hot .plan-wall,.plan-wall-g.plan-hl .plan-wall,
.plan-wall-g:focus-visible .plan-wall{stroke:var(--terra);stroke-width:5}
.plan-dim text{font:600 11px var(--font);fill:var(--terra-dark);pointer-events:none;paint-order:stroke;stroke:var(--marble);stroke-width:3px}
.plan-wall-g:hover .plan-dim text,.plan-wall-g.plan-hot .plan-dim text,.plan-wall-g.plan-hl .plan-dim text{fill:var(--terra);font-weight:700}
.plan-mezz{stroke:var(--terra);stroke-dasharray:5 4;stroke-width:1.5}
.plan-mezz-hatch{stroke:var(--terra);stroke-width:1;opacity:.4}
.plan-mezz-label{font:600 10.5px var(--font);fill:var(--terra-dark);pointer-events:none;paint-order:stroke;stroke:var(--marble);stroke-width:3px}
.plan-cap{font-size:12.5px;color:var(--ink-soft);margin-top:8px;text-align:center}
.plan-note{font-size:13px;color:var(--ink-soft);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:14px}
.plan-overview{display:flex;gap:16px;flex-wrap:wrap}
.plan-overview .plan-fig{flex:1 1 260px;min-width:0;margin-bottom:0}
.plan-overview+.plan-note{margin-top:14px}
.rtable tr.mrow.mrow-hl>td{background:rgba(193,102,63,.13)}
.rtable tr.mrow.mrow-flash>td{animation:mrowFlash 1.4s ease-out}
@keyframes mrowFlash{0%,60%{background:rgba(193,102,63,.28)}100%{background:transparent}}

/* --- Éléments déplaçables du plan --- */
:root{ --win-fill:#cfe0ec; --win-stroke:#6f8aa0; --stone:#c3b9a8; --furn:#efe7d8; }
.plan-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.plan-add-sel{width:auto;min-width:120px;padding:6px 10px;border:1px solid var(--line2);border-radius:8px;background:var(--card);color:var(--ink)}
.plan-hint{font-size:12px;color:var(--ink-soft);margin-left:auto}
.item-g{touch-action:none}
.item-shape{pointer-events:auto}
/* portes */
.door-swing{fill:none;stroke:var(--wood);stroke-width:1.3;stroke-dasharray:3 3}
.door-leaf{stroke:var(--wood-dark);stroke-width:2.4;stroke-linecap:round}
.door-jamb{stroke:var(--wood-dark);stroke-width:1;opacity:.55}
/* fenêtres */
.win-frame{fill:var(--win-fill);stroke:var(--win-stroke);stroke-width:1.4}
.win-line{stroke:var(--win-stroke);stroke-width:1}
/* cloison */
.cloison-body{fill:var(--wood-dark);stroke:none;opacity:.85}
/* cheminée */
.chem-body{fill:var(--stone);stroke:var(--wood);stroke-width:1.4}
.chem-fire{fill:#3a2f26}
.chem-flame{fill:var(--terra);stroke:none}
/* mobilier */
.furn-body{fill:var(--furn);stroke:var(--wood);stroke-width:1.4}
.furn-line{fill:none;stroke:var(--wood);stroke-width:1.2;opacity:.7}
.furn-stroke{stroke:var(--wood);stroke-width:1.2;opacity:.6}
/* sélection */
.item-g.sel .furn-body,.item-g.sel .win-frame,.item-g.sel .chem-body,.item-g.sel .cloison-body,
.item-g.sel .furn-line{stroke:var(--terra)}
.item-g.sel .door-leaf,.item-g.sel .door-swing{stroke:var(--terra)}
/* poignées */
.plan-handles .ih{cursor:pointer}
.plan-handles .ih circle{fill:var(--card);stroke:var(--line2);stroke-width:1.2}
.plan-handles .ih text{font:700 12px var(--font);fill:var(--ink);pointer-events:none}
.plan-handles .ih-del circle{fill:#fff;stroke:var(--red)}
.plan-handles .ih-del text{fill:var(--red)}
.plan-handles .ih-rot circle{stroke:var(--terra-dark)}
.plan-handles .ih-rot text{fill:var(--terra-dark)}

/* ---------- Finitions UX / accessibilité ---------- */
.btn-ghost{transition:background .14s,border-color .14s,color .14s,transform .06s}
.btn-primary:active,.btn-ghost:active,.navlink:active{transform:translateY(1px)}
.icon-btn:active{transform:scale(.94)}
/* anneau de focus visible au clavier uniquement (pas au clic souris) */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,.plan-room-g:focus-visible,.plan-wall-g:focus-visible{
  outline:2px solid var(--terra);outline-offset:2px}
button:focus:not(:focus-visible),a:focus:not(:focus-visible){outline:none}
.card{transition:box-shadow .16s,border-color .16s}
/* zone tactile mini pour les petits boutons */
.btn-sm{min-height:32px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* barre d'outils du plan : lisible sur mobile */
@media(max-width:560px){ .plan-hint{margin-left:0;flex-basis:100%} .plan-toolbar .btn-sm{flex:1} }

/* totaux travaux */
.totals-card{padding:12px 18px}
.tot-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;font-weight:700;color:var(--ink-soft)}
.tot-row b{color:var(--wood-dark)}
.tot-row.grand{border-top:1px solid var(--line);margin-top:4px;padding-top:10px;font-size:17px}
.tot-row.grand b{font-size:19px}

/* barre de tri (Budget) */
.sortbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:0 2px}
.sortbar-label{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.sort-select{width:auto;min-width:auto;padding:6px 10px;font-size:13px}
.sortbar .btn-sm{padding:6px 10px;font-size:13px}

/* contact d'une ligne */
.contact-box{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.contact-name{font-weight:700;color:var(--wood-dark);font-size:15px}
.contact-avail{font-size:13px;color:var(--ink-soft)}
.contact-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.contact-phone{font-weight:600;font-variant-numeric:tabular-nums}
.contact-line{font-weight:600;word-break:break-word}
.contact-actions a{text-decoration:none}
.map-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--line2);border-radius:9px;background:var(--card);font-size:17px;line-height:1;text-decoration:none;transition:.14s}
.map-btn:hover{background:var(--bg2);border-color:var(--terra);transform:translateY(-1px)}
.zone-empty{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:4px 2px}

/* --- Détail d'une ligne : bulles sélectionnables (au lieu d'accordéons empilés) --- */
.pill-tabs{display:flex;flex-wrap:wrap;gap:8px}
.pill-tab{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid var(--line2);border-radius:22px;
  background:var(--card);color:var(--ink-soft);font-size:13.5px;font-weight:600;line-height:1;transition:background .14s,border-color .14s,color .14s}
.pill-tab:hover{background:var(--bg2);border-color:var(--terra);color:var(--ink)}
.pill-tab.has-data{color:var(--ink)}
.pill-tab.active{background:var(--terra);border-color:var(--terra);color:#fff}
.pill-tab .pt-ico{font-size:15px}
.pill-tab .pt-badge{background:var(--sand);color:var(--wood-dark);border-radius:20px;padding:1px 7px;font-size:11.5px;font-weight:800;min-width:18px;text-align:center}
.pill-tab.active .pt-badge{background:rgba(255,255,255,.3);color:#fff}
.pill-tab .pt-dot{color:var(--terra);font-size:8px}
.pill-tab.active .pt-dot{color:#fff}
.pill-content:not([hidden]){margin-top:6px;animation:pillIn .18s ease-out}
@keyframes pillIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Affordance "déplier" plus visible sur chaque ligne */
.rtable td.toggle-cell .tg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:8px;background:var(--bg2);color:var(--terra);font-size:13px;transition:background .14s,transform .12s}
.rtable tr.line-row:hover td.toggle-cell .tg{background:var(--sand);transform:scale(1.06)}
.rtable tr.line-row.open td.toggle-cell .tg{background:var(--terra);color:#fff}
.rtable tr.line-row:hover .line-label{color:var(--terra-dark);text-decoration:underline;text-underline-offset:2px}

/* Actions rapides discrètes (icône seule) */
.qa{background:transparent;border:none;color:var(--ink-soft);font-size:17px;line-height:1;padding:6px 8px;border-radius:8px;cursor:pointer;transition:background .12s,color .12s,transform .1s}
.qa:hover{background:var(--bg2);color:var(--terra-dark)}
.qa:active{transform:scale(.9)}
.qa.qa-danger:hover{background:rgba(180,71,47,.16);color:var(--red)}
.cell-qa{white-space:nowrap;text-align:right}

/* Pastille d'avancement cliquable (Travaux) */
.status-pill{border:none;border-radius:20px;padding:6px 14px;font-size:12.5px;font-weight:700;line-height:1;cursor:pointer;
  transition:filter .12s,transform .1s,box-shadow .12s}
.status-pill::after{content:' ⟳';opacity:.5;font-weight:400}
.status-pill:hover{filter:brightness(.97);box-shadow:var(--shadow-sm)}
.status-pill:active{transform:scale(.96)}
.status-pill.gray{background:#eae2d4;color:#6b645b}
.status-pill.amber{background:#f6e6c8;color:#8a6314}
.status-pill.green{background:#d9e8d2;color:#456a3a}

/* Icône "i" discrète + bulle d'info (Mesures) */
.plan-inforow{display:flex;justify-content:flex-end;margin-top:6px;padding:0 2px}
.info-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--card);border:1px solid var(--line2);color:var(--ink-soft);
  font:italic 700 12px Georgia,'Times New Roman',serif;cursor:help;user-select:none}
.info-ic:hover,.info-ic:focus{border-color:var(--terra);color:var(--terra-dark);outline:none}
.info-tip{position:absolute;bottom:calc(100% + 8px);right:0;width:min(280px,78vw);background:var(--card);color:var(--ink);
  border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:9px;padding:9px 11px;
  font:400 12.5px/1.45 var(--font);text-align:left;display:none;z-index:20}
.info-ic:hover .info-tip,.info-ic:focus .info-tip{display:block}

/* Photo d'en-tête de "La maison" */
.maison-hero{margin:0 0 18px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.maison-hero img{width:100%;height:auto;max-height:360px;object-fit:cover;display:block;cursor:zoom-in}

@media(max-width:820px){
  .group-title{font-size:15px}
  .contact-actions{width:100%}
  .contact-actions .btn-primary,.contact-actions .btn-ghost{flex:1;min-height:42px;justify-content:center}
  .sort-select{flex:1;min-width:0}
}
@media print{ .group-body[hidden]{display:block!important} .group-grip,.theme-toggle{display:none!important} }

/* ---------- Allègement visuel ---------- */
/* Pastille unique de synthèse d'une ligne (remplace ☰ n / 📎 n / 💰 n / 📇) */
.chip-count{background:var(--sand);color:var(--wood-dark);border-color:var(--sand);font-weight:700;cursor:default}
/* Bandeau d'alerte : n'apparaît que lorsqu'une décision est attendue */
.alert{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:#f8e3d9;border:1px solid #edc3b0;color:#8a3d23;
  border-radius:var(--radius);padding:11px 15px;margin-bottom:16px;font-size:14px;font-weight:600}
/* Champ « + Nouvelle… » sous une liste déroulante (remplace les prompt() système) */
.new-inline{margin-top:7px}
/* Entrée du journal qui mène à l'élément concerné */
.feed li.feed-link{cursor:pointer;border-radius:8px;transition:background .15s}
.feed li.feed-link:hover,.feed li.feed-link:focus-visible{background:var(--bg2)}
.feed li.feed-link .who::after{content:' ›';color:var(--terra);font-weight:700}
/* Mise en évidence de l'élément atteint depuis le journal */
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,55%{background:var(--sand)}100%{background:transparent}}
/* Rattachement d'une pièce jointe à sa ligne */
.chip-rel{display:inline-block;margin-top:5px;cursor:pointer;border-style:dashed;font-family:inherit;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.chip-rel:hover{border-style:solid;color:var(--terra-dark)}

/* Poignée de glisser-déposer des cartes (remplace les flèches ▲▼) */
.group-stack{display:block}
.group-grip{margin-left:auto;padding:6px 10px;color:var(--ink-soft);cursor:grab;
  font-size:17px;line-height:1;letter-spacing:2px;border-radius:8px;touch-action:none;user-select:none}
.group-grip:hover{background:var(--bg2);color:var(--terra)}
/* Carte attrapée : elle se replie en pastille compacte et se soulève, pour qu'on voie
   sans ambiguïté ce qu'on tient et où ça va se poser. */
.group-card{transition:transform .16s ease,box-shadow .16s ease,padding .16s ease,border-color .12s}
.group-card.dragging{
  padding:8px 14px;border-color:var(--terra);border-radius:999px;
  transform:scale(.97) rotate(-.7deg);
  box-shadow:0 14px 34px rgba(63,55,48,.32);
  background:var(--card);position:relative;z-index:5;cursor:grabbing;
  animation:pickup .18s ease-out;
}
.group-card.dragging .group-body,
.group-card.dragging .group-summary{display:none}
.group-card.dragging .group-caret{opacity:.35}
.group-card.dragging .group-title{color:var(--terra-dark)}
.group-card.dragging .group-grip{cursor:grabbing;color:var(--terra)}
@keyframes pickup{ from{transform:scale(1) rotate(0)} to{transform:scale(.97) rotate(-.7deg)} }
/* pendant le glissement : pas de sélection de texte parasite, curseur cohérent partout */
body.sorting{cursor:grabbing;user-select:none}
body.sorting .group-card:not(.dragging){transition:transform .18s ease}
@media(prefers-reduced-motion:reduce){ .group-card,.group-card.dragging{transition:none;animation:none} }

/* Commande « tout replier », au-dessus de sa pile */
.stack-tools{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.link-btn{background:none;border:none;color:var(--ink-soft);font:600 12.5px var(--font);
  padding:4px 6px;border-radius:7px;cursor:pointer}
.link-btn:hover{color:var(--terra-dark);background:var(--bg2)}
/* Fournitures sans pièce, dans la vue d'ensemble du plan */
.fournitures-globales{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.fournitures-globales h4{font-size:14px;margin:0 0 10px}
@media print{ .group-grip{display:none!important} }

/* Flèche de retour, accolée au titre de la sous-vue */
.page-head-left{display:flex;align-items:flex-start;gap:10px;min-width:0}
.back-arrow{font-size:26px;line-height:1;padding:2px 12px;border:1px solid var(--line2);border-radius:10px;
  background:var(--card);color:var(--terra);cursor:pointer;min-height:40px;font-family:inherit}
.back-arrow:hover{border-color:var(--terra);background:var(--bg2)}

/* Pastille « nouveautés » dans la barre du haut */
.whatsnew{position:relative}
.whatsnew::after{content:'';position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--terra)}
.changelog-bloc{padding:12px 0;border-bottom:1px dashed var(--line)}
.changelog-bloc:last-child{border-bottom:none}
.changelog-titre{font-weight:700;color:var(--wood-dark);margin-bottom:6px}
.changelog-bloc ul{margin:0;padding-left:20px}
.changelog-bloc li{margin:4px 0;font-size:14px}
.changelog-bloc:not(.recent){opacity:.7}

/* Équipements électriques posés sur le plan */
.elec-body{fill:var(--card);stroke:var(--terra);stroke-width:1.6}
.elec-glyph{font:600 11px var(--font);fill:var(--terra-dark);pointer-events:none}
.elec-court{font:700 8.5px var(--font);fill:var(--ink-soft);pointer-events:none;
  paint-order:stroke;stroke:var(--plan-fill);stroke-width:3px}
.item-g.item-elec.sel .elec-body{stroke-width:2.6;fill:var(--sand)}
.elec-count{margin-bottom:10px}
/* Ajouter un achat depuis la zone dépliée */
.zone-add{margin-top:10px}

/* ---------- Onglet Plan ---------- */
/* Cartes du menu d'entrée : grandes cibles tactiles, pas des liens perdus dans du texte */
.menu-card{cursor:pointer;transition:border-color .15s,transform .1s}
.menu-card:hover,.menu-card:focus-visible{border-color:var(--terra);transform:translateY(-1px)}
.menu-card h3{margin:8px 0 4px}
.menu-ico{font-size:30px;line-height:1}
.menu-resume{margin-top:10px}

/* Grille des pièces */
.piece-grid .piece-card{cursor:pointer;transition:border-color .15s}
.piece-card:hover,.piece-card:focus-visible{border-color:var(--terra)}
.piece-card.vide{opacity:.62}
.piece-card h3{margin:2px 0 8px}
.piece-card-groupe{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.piece-card-bits{display:flex;flex-wrap:wrap;gap:5px}

/* Plan recadré sur une pièce : hauteur bornée, largeur déduite du viewBox, et découpe
   obligatoire (le reste du plan est hors cadre et déborderait sinon sur la page). */
.plan-svg.focus{width:auto;height:320px;max-height:40vh;max-width:100%;margin:0 auto;overflow:hidden}
@media(max-width:820px){ .plan-svg.focus{height:230px;width:100%} }
.plan-focus .plan-room{stroke:var(--terra);stroke-width:2.5}
/* Libellé redessiné au-dessus du mobilier, cerné pour rester lisible */
.plan-focus-label text{paint-order:stroke;stroke:var(--plan-fill);stroke-width:4px;pointer-events:none}
.plan-focus-label .plan-room-name{font-weight:800}

/* Sections d'une fiche de pièce */
.fiche-sections{padding-top:6px}
/* À l'impression, une section repliée doit quand même figurer sur la fiche remise à l'artisan */
@media print{ .fiche-sections .dsec-body[hidden]{display:block!important} .dsec-head{display:none!important} }

/* Axe de classement actif (Documents : par nature / par pièce) */
.sortbar .btn-ghost.active{background:var(--sand);color:var(--wood-dark);border-color:var(--sand);font-weight:700}

/* Référentiel de pièces (Réglages) */
.piece-list{margin:10px 0 12px}
.piece-groupe{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin:14px 0 4px}
.piece-groupe:first-child{margin-top:0}
.piece-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px dashed var(--line)}
.piece-name{font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.piece-row .qa:disabled{opacity:.3;cursor:default}

/* Fenêtre de personnalisation du tableau de bord */
.dash-config{display:grid;gap:16px}
.dash-config-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:7px}
.dash-config .checkbox{padding:5px 0;font-weight:500}




/* ---------- Pastilles de rubriques (onglet Documents) ----------
   Des cercles qu'on touche, pas des lignes qu'on lit : sur téléphone la cible fait
   72 px, et l'écran d'entrée tient d'un coup d'œil au lieu d'empiler des barres. */
.pastilles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  gap:18px 10px;margin:6px 0 22px}
.pastille{display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0}
.pastille-rond{width:72px;height:72px;border-radius:50%;border:1px solid var(--line2);
  background:var(--card);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;
  position:relative;transition:transform .13s ease,border-color .13s,background .13s;padding:0}
.pastille-rond:hover,.pastille-rond:focus-visible{border-color:var(--terra);transform:translateY(-2px)}
.pastille-rond:active{transform:scale(.95)}
.pastille-ico{font-size:30px;line-height:1}
.pastille-nb{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 5px;
  border-radius:11px;background:var(--terra);color:#fff;font:700 11.5px var(--font);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.pastille-nom{font-size:12.5px;font-weight:600;color:var(--ink);text-align:center;
  line-height:1.25;word-break:break-word;max-width:104px}
.pastille.active .pastille-rond{border-color:var(--terra);background:var(--sand)}
.pastille.active .pastille-nom{color:var(--terra-dark)}
.pastille.ajout .pastille-rond{border-style:dashed;background:transparent;box-shadow:none}
.pastille.ajout .pastille-ico{font-size:26px;color:var(--ink-soft)}
.pastille.ajout .pastille-nom{color:var(--ink-soft);font-weight:500}
@media(max-width:560px){
  .pastilles{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:16px 6px}
  .pastille-rond{width:64px;height:64px}
  .pastille-ico{font-size:27px}
}

/* Puce discrète : cette rubrique en contient d'autres */
.pastille-sous{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:16px;height:3px;border-radius:2px;background:var(--line2)}
.pastille.active .pastille-sous{background:var(--terra)}

/* Banque d'icônes du formulaire de rubrique */
.icone-choix{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;
  max-height:210px;overflow-y:auto;padding:8px;border:1px solid var(--line2);border-radius:10px;
  background:var(--bg2);margin-top:4px}
.icone-case{width:100%;aspect-ratio:1;border:1px solid transparent;border-radius:9px;background:transparent;
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.icone-case:hover{background:var(--card);border-color:var(--line2)}
.icone-case.active{background:var(--sand);border-color:var(--terra);transform:scale(1.06)}


/* ---------- Coffre : vignettes d'applications ----------
   Une grille de ronds, comme sur un écran d'accueil de téléphone. La vignette touchée
   prend toute la largeur de la ligne et se déplie : rien n'est affiché tant qu'on ne
   l'a pas demandé. */
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 10px;margin:4px 0 20px}
.app{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.app-rond{width:72px;height:72px;border-radius:50%;border:1px solid var(--line2);background:var(--card);
  box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;
  transition:transform .13s ease,border-color .13s}
.app-rond:hover,.app-rond:focus-visible{border-color:var(--terra);transform:translateY(-2px)}
.app-rond:active{transform:scale(.95)}
.app-rond img{width:100%;height:100%;object-fit:cover;display:block}
.app-initiale{font:800 28px var(--font);color:var(--terra-dark)}
.app-nom{font-size:12.5px;font-weight:600;color:var(--ink);text-align:center;line-height:1.25;
  word-break:break-word;max-width:104px}

/* Vignette dépliée : elle occupe la ligne entière et affiche son détail */
.app.ouverte{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--terra);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px;margin:2px 0}
.app.ouverte .app-rond{width:52px;height:52px;flex:0 0 auto;box-shadow:none}
.app.ouverte .app-initiale{font-size:20px}
.app.ouverte .app-nom{max-width:none;text-align:left;font-size:16px;font-weight:700;color:var(--wood-dark);
  align-self:center;flex:1;min-width:0}
.app-detail{flex-basis:100%;width:100%;min-width:0;display:grid;gap:2px;margin-top:4px}
.app-ligne{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;
  border-top:1px solid var(--line)}
.app-lab{font-size:12px;font-weight:600;color:var(--ink-soft);flex:0 0 96px}
.app-val{font:600 15px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--wood-dark);
  background:var(--bg2);padding:6px 10px;border-radius:8px;word-break:break-all;flex:1 1 120px;min-width:0}
.app-pied{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
@media(max-width:560px){
  .apps{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:16px 6px}
  .app-rond{width:64px;height:64px}
  /* nowrap indispensable : en colonne, flex-wrap:wrap fait deborder le contenu dans
     une SECONDE COLONNE a droite des que la hauteur de la rangee est contrainte. */
  .app.ouverte{flex-direction:column;align-items:stretch;flex-wrap:nowrap;align-self:start}
  .app.ouverte .app-rond{align-self:center}
  .app.ouverte .app-nom{text-align:center;flex-basis:auto;width:100%}
  .app-lab{flex-basis:100%}
  .app-ligne{gap:6px}
}

/* Choix du logo dans le formulaire */
.logo-choix{display:flex;align-items:center;gap:14px}
.logo-apercu{width:64px;height:64px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line2);
  background:var(--bg2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-apercu img{width:100%;height:100%;object-fit:cover}
.logo-apercu span{font:800 24px var(--font);color:var(--ink-soft)}
.logo-btn{cursor:pointer}

/* Suppression rangée en bas d'une fenêtre d'édition, jamais sur la vignette */
.form-suppr{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);text-align:center}
.link-btn.danger{color:var(--red)}
.link-btn.danger:hover{background:#fbe8e2;color:var(--red)}

/* Barre de recherche (coffre) */
.recherche{margin:0 0 16px}
.recherche input{width:100%;padding:12px 14px;border:1px solid var(--line2);border-radius:11px;
  font-size:16px;background:var(--card);color:var(--ink);font-family:inherit}
.recherche input:focus{outline:2px solid var(--sand);border-color:var(--sand)}

/* Intertitre de sous-categorie dans une section de l onglet Documents */
.sous-cat{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-soft);margin:14px 0 8px;display:flex;align-items:center;gap:7px}
.sous-cat:first-child{margin-top:2px}



/* ---------- Barre d'onglets du bas (téléphone) ----------
   Le tiroir au hamburger demandait deux gestes visés, en haut de l'écran, pour une action
   faite vingt fois par session — alors que le pouce est en bas. Cinq cibles pleine
   hauteur, aucune visée. Au-dessus de 820 px, la barre latérale reprend son rôle. */
.tabbar{display:none}
@media(max-width:820px){
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:var(--card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:56px;padding:6px 2px;background:none;border:none;color:var(--ink-soft);
    font-size:10.5px;font-weight:600;min-width:0}
  .tab span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab-ico{font-size:19px;line-height:1}
  .tab.active{color:var(--terra-dark)}
  /* La barre du bas remplace le tiroir : le hamburger n'a plus de raison d'être visible,
     mais le tiroir reste, ouvert par « Plus », pour les écrans qu'on visite rarement. */
  .hamburger{display:none}
}
@media print{ .tabbar{display:none!important} }

/* ---------- Calendrier : une couleur par genre ----------
   Posee en --c sur chaque carte, barre, fiche et pastille du formulaire. Les teintes
   derivent de --c par color-mix : une seule valeur a changer par genre (et son pendant sombre). */
:root{
  --ev-rdv:#c1663f; --ev-sante:#2e8f84; --ev-artisan:#8b6a43; --ev-livraison:#c48524;
  --ev-sortie:#8659ad; --ev-anniv:#cc527b; --ev-echeance:#5b7a52; --ev-absence:#437db0; --ev-autre:#7d7266;
}

/* ---------- Calendrier : la liste « à venir » ---------- */
.cal-passe{text-align:center;margin:6px 0 14px}
.mois-bloc{margin-bottom:22px;min-width:0}
.mois-titre{display:flex;align-items:baseline;gap:8px;margin:2px 4px 10px;font-size:inherit}
.mois-titre b{font-size:21px;font-weight:800;color:var(--wood-dark);text-transform:capitalize;letter-spacing:-.01em}
.mois-titre span{font-size:13px;font-weight:600;color:var(--ink-soft)}
.mois-titre::after{content:'';flex:1;height:1px;background:var(--line);align-self:center}
.mois-passe{opacity:.7}
.rdv-liste{display:flex;flex-direction:column;gap:9px;min-width:0}
.rdv{--c:var(--ev-autre);display:flex;align-items:center;gap:13px;width:100%;min-width:0;text-align:left;
  padding:11px 13px 11px 11px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);
  transition:transform .12s,border-color .15s,box-shadow .15s}
.rdv:hover{border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--shadow)}
.rdv:active{transform:scale(.98)}
.avenir .rdv{animation:rdvEntree .34s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes rdvEntree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rdv-date{position:relative;flex:0 0 auto;width:54px;height:54px;border-radius:50%;line-height:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg2);background:color-mix(in srgb,var(--c) 15%,var(--card));
  color:var(--c);color:color-mix(in srgb,var(--c) 82%,var(--ink));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 40%,transparent)}
.rdv-date small{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rdv-date b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.rdv-date i{position:absolute;right:-5px;bottom:-5px;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12.5px;
  background:var(--card);box-shadow:0 1px 5px rgba(63,55,48,.2)}
.rdv-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rdv-ligne{display:flex;align-items:flex-start;gap:8px;min-width:0}
.rdv-titre{flex:1;min-width:0;font-size:15.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.rdv-meta{font-size:12.5px;color:var(--ink-soft);line-height:1.35;overflow-wrap:anywhere}
.rdv-lieu{margin-top:-2px}
.rdv-rel{flex:0 0 auto;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;
  background:var(--bg2);color:var(--ink-soft)}
.rdv-rel.maintenant{background:var(--terra);color:#fff}
.rdv-rel.bientot{background:color-mix(in srgb,var(--terra) 15%,var(--card));color:var(--terra-dark)}
.rdv.passe{box-shadow:none}
.cal-vide-etat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 16px;color:var(--ink-soft)}
.cal-vide-ico{font-size:40px;line-height:1}
.cal-vide-etat b{color:var(--wood-dark);font-size:16px}

/* Ligne compacte des widgets d'accueil */
.agenda{display:flex;flex-direction:column;gap:16px}
.agenda-jour{min-width:0}
.agenda-date{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-soft);margin-bottom:6px}
.agenda-court{gap:12px}
.evt{--c:var(--ev-autre);display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;
  padding:9px 11px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--c);
  border-radius:var(--radius-sm);margin-bottom:6px;min-width:0}
.evt-quand{font-size:12.5px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.evt-quand.toutlejour{color:var(--line2);font-size:15px;line-height:1}
.evt-titre{font-size:14.5px;overflow-wrap:anywhere;min-width:0}
.evt-sur,.evt-rep{font-size:11.5px;color:var(--ink-soft);margin-left:5px}
.evt-lieu{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.evt-clic{cursor:pointer;transition:.12s}
.evt-clic:hover{border-color:var(--line2);border-left-color:var(--c);background:var(--bg2)}

/* ---------- Calendrier : la grille du mois ----------
   Sept colonnes a parts strictement egales. minmax(0,1fr) est obligatoire : sans lui une
   cellule prend sa largeur minimale de contenu et la grille deborde l'ecran en 375 px.
   Pas d'espace entre colonnes : les bandes des evenements longs doivent se toucher. */
.cal-tete{display:flex;align-items:center;gap:6px;margin:2px 2px 12px}
.cal-titre{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;margin:0;font-size:inherit}
.cal-titre b{font-size:23px;font-weight:800;color:var(--wood-dark);text-transform:capitalize;letter-spacing:-.01em}
.cal-titre span{font-size:14px;font-weight:600;color:var(--ink-soft)}
.cal-nav{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-size:22px;line-height:1;padding:0 0 3px;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.cal-nav:active,.cal-auj:active{transform:scale(.94)}
.cal-auj{flex:0 0 auto;height:34px;padding:0 12px;border-radius:20px;border:1px solid var(--line2);
  background:var(--card);color:var(--terra-dark);font-size:12.5px;font-weight:700}
.cal-carte{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);
  padding:10px 4px 4px;overflow:hidden}
.cal-noms{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-bottom:6px}
.cal-noms span{text-align:center;font-size:11px;font-weight:700;color:var(--ink-soft)}
.cal-noms .we{color:var(--terra-dark)}
.cal-grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-grille.glisse-suiv{animation:calSuiv .28s ease-out}
.cal-grille.glisse-prec{animation:calPrec .28s ease-out}
@keyframes calSuiv{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes calPrec{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.cal-jour{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;min-height:64px;
  padding:4px 0 5px;border:none;border-top:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;transition:background .12s}
.cal-jour.we{background:color-mix(in srgb,var(--bg2) 55%,transparent)}
.cal-jour:hover{background:var(--bg2)}
.cal-jour.choisi{background:color-mix(in srgb,var(--terra) 12%,var(--card))}
.cal-num{align-self:center;width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-variant-numeric:tabular-nums;line-height:1}
.cal-jour.pris .cal-num{font-weight:800}
.cal-jour.hors .cal-num,.cal-jour.hors .cal-barres{opacity:.4}
.cal-jour.choisi .cal-num{box-shadow:inset 0 0 0 2px var(--terra)}
.cal-jour.est-aujourdhui .cal-num{background:var(--terra);color:#fff;font-weight:800;box-shadow:none}
.cal-barres{display:flex;flex-direction:column;gap:2px;min-width:0}
.cal-barre{--c:var(--ev-autre);display:block;height:16px;margin:0 2px;padding:0 3px 0 5px;border-radius:5px;
  font-style:normal;font-size:10px;font-weight:700;line-height:16px;white-space:nowrap;overflow:hidden;text-align:left;
  background:color-mix(in srgb,var(--c) 22%,var(--card));color:color-mix(in srgb,var(--c) 72%,var(--ink));
  box-shadow:inset 3px 0 0 var(--c)}
.cal-barre.suite-g{margin-left:0;border-top-left-radius:0;border-bottom-left-radius:0;box-shadow:none}
.cal-barre.suite-d{margin-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.cal-barre.vide{background:none;box-shadow:none}
.cal-plus{font-style:normal;font-size:10px;font-weight:800;color:var(--ink-soft);line-height:14px;text-align:center}
/* Sur grand ecran la grille a la place de respirer : des cases hautes ressemblent a un
   calendrier, une bande de 64 px ressemble a une barre d outils. */
@media(min-width:821px){
  .cal-jour{min-height:104px;padding:6px 0}
  .cal-num{width:30px;height:30px;font-size:14.5px}
  .cal-barre{height:20px;line-height:20px;font-size:11.5px;padding:0 5px 0 7px}
}
.cal-panneau{margin-top:18px}
.cal-panneau-tete{display:flex;align-items:center;gap:10px;margin:0 4px 10px;min-width:0}
.cal-panneau-tete h3{flex:1;min-width:0;margin:0;font-size:17px;font-weight:800;color:var(--wood-dark);text-transform:none}
.cal-panneau-tete h3:first-letter{text-transform:uppercase}
.cal-ajout{flex:0 0 auto;min-height:36px;padding:0 14px;border-radius:20px;border:none;
  background:var(--terra);color:#fff;font-size:13.5px;font-weight:700}
.cal-rien{padding:18px;text-align:center;color:var(--ink-soft);font-size:14px;
  border:1.5px dashed var(--line2);border-radius:16px}


/* ---------- Calendrier : la fiche d'un rendez-vous ----------
   Panneau qui monte du bas sur telephone, fenetre centree au-dela de 820 px. */
.fiche-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(35,28,22,0);transition:background .3s}
.fiche-wrap.ouvert{background:rgba(35,28,22,.48)}
.fiche{--c:var(--ev-autre);position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 18px calc(18px + env(safe-area-inset-bottom));color:var(--ink);outline:none;
  background:var(--card);background:linear-gradient(color-mix(in srgb,var(--c) 17%,var(--card)) 0,var(--card) 170px);
  border-radius:26px 26px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.25);
  transform:translateY(100%);transition:transform .36s cubic-bezier(.2,.85,.25,1)}
.fiche-wrap.ouvert .fiche{transform:translateY(0)}
.fiche-poignee{width:42px;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 22%,transparent);margin:2px auto 14px}
@media(min-width:821px){
  .fiche-wrap{align-items:center;padding:16px}
  .fiche{border-radius:24px;padding:22px 22px 20px;opacity:0;transform:translateY(20px) scale(.96);
    transition:transform .3s cubic-bezier(.2,.85,.25,1),opacity .22s}
  .fiche-wrap.ouvert .fiche{transform:none;opacity:1}
  .fiche-poignee{display:none}
}
.fiche-tete{display:flex;align-items:center;gap:14px;margin-bottom:16px;min-width:0}
.fiche-date{flex:0 0 auto;width:66px;height:66px;border-radius:50%;line-height:1;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--c);background:color-mix(in srgb,var(--c) 90%,#000);
  box-shadow:0 8px 18px color-mix(in srgb,var(--c) 35%,transparent)}
.fiche-date small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.9}
.fiche-date b{font-size:27px;font-weight:800;margin-top:2px}
.fiche-titres{flex:1;min-width:0}
.fiche-type{display:inline-block;margin-bottom:4px;font-size:12.5px;font-weight:700;
  color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.fiche-titres h3{margin:0;font-size:21px;line-height:1.2;overflow-wrap:anywhere}
.fiche-x{flex:0 0 auto;align-self:flex-start;width:38px;height:38px;border-radius:50%;border:none;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-soft);font-size:15px}
.fiche-infos{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:2px 14px}
.fiche-info{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px;min-width:0}
.fiche-info:first-child{border-top:none}
.fiche-info>span{flex:0 0 22px;text-align:center}
.fiche-info>div{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.4}
.fiche-info small{color:var(--ink-soft);font-size:13px}
.fiche-info a{display:inline-block;margin-top:4px;color:var(--terra-dark);font-size:13.5px;font-weight:700;text-decoration:none}
.fiche-note{white-space:pre-wrap}
.fiche-actions{display:flex;gap:10px;margin-top:16px}
.fiche-actions .btn-primary{flex:1;min-height:50px;border-radius:15px;font-size:16px}
.fiche-actions .fiche-suppr{min-height:50px;border-radius:15px;justify-content:center;color:var(--red);padding:0 16px}

/* ---------- Calendrier : le formulaire ---------- */
.evt-form input[type=text],.evt-form input[type=date],.evt-form input[type=time],
.evt-form select,.evt-form textarea{font-size:16px}   /* sous 16 px, iOS zoome sur le champ */
.evt-quand-champs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px}
.evt-heure{position:relative;display:block}
.evt-heure input{padding-right:34px}
.evt-heure-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:none;
  border-radius:50%;background:var(--bg2);color:var(--ink-soft);font-size:12px;line-height:1}
.evt-etiquette{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink-soft)}
.genres{display:flex;flex-wrap:wrap;gap:7px}
.genre{--c:var(--ev-autre);display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 12px;
  border-radius:20px;border:1.5px solid var(--line2);background:var(--card);color:var(--ink);
  font-size:13.5px;font-weight:600;transition:background .12s,border-color .12s}
.genre.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 18%,var(--card));
  color:color-mix(in srgb,var(--c) 80%,var(--ink))}
.evt-plus summary{cursor:pointer;list-style:none;padding:4px 0;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.evt-plus summary::-webkit-details-marker{display:none}
.evt-plus summary::before{content:'＋';display:inline-block;width:18px}
.evt-plus[open] summary::before{content:'－'}
.evt-plus>.form-grid{margin-top:8px}
@media print{ .cal-tete,.cal-passe{display:none!important} }
@media(prefers-reduced-motion:reduce){ .fiche,.fiche-wrap{transition:none} }

/* ---------- Widgets de l'accueil ----------
   Une carte, un titre, et le lien pour aller voir en grand. min-width:0 : sans lui, un
   libellé insécable élargit la carte au-delà de la colonne et fait déborder la page. */
.widget{min-width:0}
.widget-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.widget-head h3{margin:0;font-size:15px}
/* La date du jour, juste après le titre du panneau : on sait quel jour on regarde sans
   avoir à le déduire. Elle s'efface devant le titre plutôt que de lui disputer la place. */
.jour-date{flex:1;font-size:12.5px;color:var(--ink-soft);text-transform:capitalize;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.widget-head .link-btn{flex:0 0 auto;font-size:13px}
.widget .mur{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.widget .feed{margin-bottom:0}

/* La feuille de route. Une ligne par module : nom, et ce qu'il contiendra. Rien d'autre. */
.avenir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.avenir li{display:grid;grid-template-columns:22px auto;grid-template-areas:"i n" ". q";
  column-gap:8px;row-gap:1px;align-items:baseline;min-width:0}
.avenir-ico{grid-area:i;font-size:15px}
.avenir-nom{grid-area:n;font-weight:600;font-size:14px}
.avenir-quoi{grid-area:q;font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
/* Le réglage de l'accueil vit en bas de page : c'est un geste rare, et le bas de l'écran
   est justement là où le pouce se repose. */
.accueil-pied{margin-top:18px;text-align:center}

/* ---------- Barre de segments (les quatre vues du Chantier) ----------
   Remplace l'ancien menu de cartes : un geste au lieu de deux, et un écran de moins.
   Défilement horizontal assumé sur les très petits écrans, jamais de retour à la ligne. */
.segments{display:flex;gap:6px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;padding:6px 0 8px;position:sticky;top:56px;z-index:20;
  background:var(--bg)}
.segments::-webkit-scrollbar{display:none}
.segment{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;
  padding:8px 14px;border:1px solid var(--line2);border-radius:20px;background:var(--card);
  color:var(--ink-soft);font-size:14px;font-weight:600;transition:.15s;white-space:nowrap}
.segment:hover{background:var(--bg2)}
.segment.active{background:var(--wood);border-color:var(--wood);color:#fff}
/* Sur téléphone, les quatre vues tiennent sur une ligne : une barre qui déborde cache la
   dernière entrée, donc on ne la découvre jamais. Grille à parts égales, pas de défilement. */
@media(max-width:560px){
  .segments{gap:5px;overflow:visible}
  .segment{flex:1 1 0;justify-content:center;padding:8px 4px;font-size:12.5px;gap:4px;
    min-width:0;max-width:132px}
  .segment span{overflow:hidden;text-overflow:ellipsis}
}

/* ---------- Mur de post-it (onglet Tâches) ----------
   Grille, jamais un flex en colonne : `flex-direction:column` + `flex-wrap:wrap` sur une
   hauteur contrainte fait déborder le contenu dans une seconde colonne (cf. .app.ouverte).
   `overflow-x:clip` et non `hidden` : `hidden` créerait un conteneur de défilement. */
:root{ --pit-jaune:#fdf0a8; --pit-rose:#fbcfd8; --pit-bleu:#c9e3f5; --pit-vert:#cfe8c2; --pit-orange:#fbd9ad;
       --pit-ink:#3b3524; }
.mur{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;
  overflow-x:clip;padding:4px 2px}
.pit{position:relative;min-width:0;min-height:118px;padding:20px 12px 26px;
  background:var(--pit-jaune);color:var(--pit-ink);border-radius:3px;
  box-shadow:var(--shadow-sm);transform:rotate(var(--tilt,0deg));transition:transform .12s, box-shadow .12s}
.pit-jaune{background:var(--pit-jaune)} .pit-rose{background:var(--pit-rose)}
.pit-bleu{background:var(--pit-bleu)}   .pit-vert{background:var(--pit-vert)}
.pit-orange{background:var(--pit-orange)}
.pit-txt{font-size:14.5px;line-height:1.35;overflow-wrap:anywhere;white-space:pre-wrap}
.pit-pied{position:absolute;left:12px;bottom:8px;font-size:11px;opacity:.55}
.pit-punaise{position:absolute;top:-2px;left:50%;transform:translateX(-50%);font-size:15px;
  cursor:grab;touch-action:none;padding:4px 8px;line-height:1}
.pit-punaise:active{cursor:grabbing}
.pit-outils{position:absolute;right:4px;bottom:4px;display:flex;gap:2px;opacity:0;transition:.15s}
.pit:hover .pit-outils,.pit:focus-within .pit-outils{opacity:1}
.pit-outils .qa{font-size:16px;padding:6px 8px;min-height:32px;color:var(--pit-ink)}
.pit.attrape{transform:rotate(0deg) scale(1.05);box-shadow:0 14px 30px rgba(0,0,0,.28);z-index:5;cursor:grabbing}
.pit.faite .pit-txt{text-decoration:line-through;opacity:.5}
.faites-bloc{margin-top:18px}
.mur-faites{margin-top:10px;opacity:.75}
/* Sur téléphone les outils ne peuvent pas dépendre du survol : ils restent visibles. */
@media(hover:none){ .pit-outils{opacity:1} }
@media print{ .pit{transform:none!important;box-shadow:none;border:1px solid #ccc} }

/* Palette de couleurs du formulaire de post-it */
.palette{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.couleur-choix{width:34px;height:34px;border-radius:50%;border:2px solid var(--line2);transition:.15s}
.couleur-choix.active{border-color:var(--wood-dark);transform:scale(1.12);box-shadow:var(--shadow-sm)}

/* ---------- Documents : recherche, récents, tuiles ----------
   Même langage que le calendrier : cartes très arrondies, couleurs de la palette --ev-*,
   arrivée en cascade. La recherche passe avant tout : on cherche plus qu'on ne fouille. */
.docs-recherche{position:relative;display:flex;align-items:center;margin:0 0 20px}
.docs-loupe{position:absolute;left:15px;font-size:16px;opacity:.6;pointer-events:none}
.docs-recherche input{width:100%;min-height:50px;padding:12px 44px 12px 44px;font-size:16px;font-family:inherit;
  border:1px solid var(--line);border-radius:25px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none}
.docs-recherche input::-webkit-search-cancel-button{display:none}
.docs-recherche input:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px color-mix(in srgb,var(--terra) 20%,transparent)}
.docs-effacer{position:absolute;right:9px;width:32px;height:32px;border-radius:50%;border:none;
  background:var(--bg2);color:var(--ink-soft);font-size:13px;line-height:1}
.docs-section{display:flex;align-items:center;gap:10px;margin:4px 4px 10px}
.docs-section h3{flex:1;margin:0;font-size:17px;font-weight:800;color:var(--wood-dark)}
.docs-section-btn{flex:0 0 auto;border:none;background:none;color:var(--terra-dark);font:700 13.5px var(--font);
  padding:6px 4px;cursor:pointer}
.docs-corps>.doc-liste,.docs-corps>.tuiles{margin-bottom:24px}

.docs-recents{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 -14px 24px;padding:2px 14px 8px}
.docs-recents::-webkit-scrollbar{display:none}
.doc-vignette{flex:0 0 132px;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:0 0 10px;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);
  animation:rdvEntree .34s cubic-bezier(.2,.8,.2,1) backwards;transition:transform .12s}
.doc-vignette-img{display:flex;align-items:center;justify-content:center;height:92px;margin-bottom:6px;
  background:color-mix(in srgb,var(--c,var(--ev-autre)) 16%,var(--card))}
.doc-vignette-img.image{background:var(--bg2)}
.doc-vignette-img img{width:100%;height:100%;object-fit:cover}
.doc-vignette-titre,.doc-vignette-ou{padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-vignette-titre{font-size:13px;font-weight:700}
.doc-vignette-ou{font-size:11.5px;color:var(--ink-soft)}

.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.tuile{--c:var(--ev-autre);display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;min-height:128px;
  padding:14px;border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));border-radius:22px;
  background:var(--card);background:linear-gradient(150deg,color-mix(in srgb,var(--c) 17%,var(--card)),var(--card) 75%);
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--shadow-sm);
  animation:rdvEntree .34s cubic-bezier(.2,.8,.2,1) backwards;transition:transform .12s,box-shadow .15s}
.tuile:hover{box-shadow:var(--shadow)}
.tuile-ico{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:23px;line-height:1;margin-bottom:auto;background:var(--card);
  box-shadow:0 2px 8px color-mix(in srgb,var(--c) 30%,transparent)}
.tuile-nom{margin-top:10px;font-size:15px;font-weight:800;line-height:1.2;color:var(--wood-dark);overflow-wrap:anywhere}
.tuile-sous{width:100%;font-size:12px;color:var(--ink-soft);line-height:1.3;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tuiles.petites{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:22px}
.tuile.petite{min-height:0;flex-direction:row;align-items:center;gap:10px;padding:10px 12px;border-radius:18px}
.tuile.petite .tuile-ico{width:38px;height:38px;font-size:19px;margin:0;flex:0 0 auto}
.tuile.petite .tuile-nom{margin:0;font-size:14px;flex:1;min-width:0}
.tuile-textes{display:flex;flex-direction:column;gap:3px;width:100%;min-width:0}
.tuile.petite .tuile-textes{flex:1;gap:1px}
.tuile.petite .tuile-sous{-webkit-line-clamp:1}
.tuile.petite::after{content:"\203A";flex:0 0 auto;font-size:22px;line-height:1;color:var(--ink-soft);padding:0 2px 2px}
@media(max-width:560px){
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tuiles.petites{grid-template-columns:minmax(0,1fr)}
}
.docs-vide{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;text-align:center;color:var(--ink-soft)}
.docs-vide>span{font-size:40px;line-height:1}
.docs-vide b{font-size:16px;color:var(--wood-dark)}
.docs-vide .btn-primary{margin-top:8px}

/* ---------- Documents : dans une rubrique ---------- */
.rub-tete{display:flex;align-items:center;gap:10px;margin:0 0 18px;min-width:0}
.rond-btn{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:22px;line-height:1;padding:0 0 3px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);cursor:pointer}
.rond-btn:active{transform:scale(.94)}
.rub-ico{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;background:color-mix(in srgb,var(--c) 18%,var(--card));
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 40%,transparent)}
.rub-titres{flex:1;min-width:0}
.rub-titres h2{margin:0;font-size:22px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
.rub-fil{display:flex;flex-wrap:wrap;align-items:center;gap:2px;margin-bottom:2px}
.rub-fil button{border:none;background:none;padding:2px 3px;color:var(--ink-soft);font:600 12.5px var(--font);cursor:pointer}
.rub-fil button:hover{color:var(--terra-dark)}
.rub-sep{color:var(--line2);font-size:12px}

/* ---------- Documents : la ligne d'un fichier ---------- */
.doc-liste{display:flex;flex-direction:column;gap:8px;min-width:0}
.doc-ligne{position:relative;display:flex;align-items:center;gap:12px;min-width:0;padding:9px 12px 9px 9px;
  border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .12s,box-shadow .15s,border-color .15s}
.doc-ligne:hover{box-shadow:var(--shadow);border-color:var(--line2)}
.doc-ligne:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.rubrique .doc-ligne,.docs-corps .doc-ligne{animation:rdvEntree .32s cubic-bezier(.2,.8,.2,1) backwards}
.doc-apercu,.menu-apercu{flex:0 0 auto;width:52px;height:52px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--bg2)}
.doc-apercu img,.menu-apercu img{width:100%;height:100%;object-fit:cover}
.doc-apercu b,.menu-apercu b,.doc-vignette-img b{font-size:11px;font-weight:800;letter-spacing:.04em;
  color:color-mix(in srgb,var(--c) 85%,var(--ink))}
.doc-vignette-img b{font-size:15px}
[data-genre]{--c:var(--ev-autre);background:color-mix(in srgb,var(--c) 17%,var(--card))}
[data-genre="pdf"]{--c:#c4453a}
[data-genre="tableur"]{--c:var(--ev-echeance)}
[data-genre="texte"]{--c:var(--ev-absence)}
[data-genre="mail"]{--c:var(--ev-sortie)}
.doc-corps{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.doc-titre{font-size:15px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.doc-infos{font-size:12px;color:var(--ink-soft)}
.doc-note{font-size:12.5px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-puces{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.doc-puces span{padding:2px 8px;border-radius:20px;background:var(--bg2);color:var(--ink-soft);font-size:11.5px;font-weight:600;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⋯ : visible au survol sur ordinateur, absent au doigt (l'appui long le remplace). */
.doc-plus{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:var(--ink-soft);
  font-size:18px;line-height:1;opacity:0;transition:opacity .15s,background .15s;cursor:pointer}
.doc-ligne:hover .doc-plus,.doc-plus:focus-visible{opacity:1}
.doc-plus:hover{background:var(--bg2)}
@media(hover:none){ .doc-plus{display:none} }

/* ---------- Appui long, menu d'actions, bouton flottant ---------- */
.tuile,.doc-ligne,.doc-vignette{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tuile img,.doc-ligne img,.doc-vignette img{-webkit-user-drag:none;pointer-events:none}
.appui{transform:scale(.96);transition:transform .45s ease-out}
.secoue{animation:secoue .45s ease-in-out}
@keyframes secoue{0%{transform:scale(.96)}20%{transform:scale(1.03) rotate(-1.6deg)}40%{transform:scale(1.03) rotate(1.4deg)}
  60%{transform:scale(1.02) rotate(-.9deg)}80%{transform:scale(1.01) rotate(.5deg)}100%{transform:none}}
.fiche-menu{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.menu-tete{display:flex;align-items:center;gap:12px;margin:0 2px 12px;min-width:0}
.menu-apercu.rond{border-radius:50%;font-size:24px;background:color-mix(in srgb,var(--c,var(--ev-autre)) 18%,var(--card))}
.menu-titres{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.menu-titres b{font-size:17px;line-height:1.2;overflow-wrap:anywhere;color:var(--wood-dark)}
.menu-titres small{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere}
.menu-liste{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.menu-action{display:flex;align-items:center;gap:14px;min-height:54px;padding:0 16px;border:none;border-top:1px solid var(--line);
  background:transparent;color:var(--ink);font:600 15.5px var(--font);text-align:left;cursor:pointer}
.menu-action:first-child{border-top:none}
.menu-action:hover,.menu-action:active{background:var(--bg2)}
.menu-action>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.menu-ico{flex:0 0 26px;text-align:center;font-size:18px}
.menu-action.danger{color:var(--red)}
.menu-action small{font-size:12px;color:var(--terra-dark);font-weight:700}
.menu-liste.arbre{max-height:60vh;overflow-y:auto}
.menu-liste.arbre .menu-action{min-height:48px}
.menu-liste.arbre .menu-action.ici{background:color-mix(in srgb,var(--c) 12%,transparent)}

.fab{position:fixed;right:20px;bottom:26px;z-index:44;width:58px;height:58px;border-radius:50%;border:none;
  background:var(--terra);color:#fff;font-size:32px;font-weight:300;line-height:1;padding:0 0 3px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(193,102,63,.45);transition:transform .15s,background .15s}
.fab:hover{background:var(--terra-dark)}
.fab:active{transform:scale(.9)}
.fab-bas{height:70px}
@media(max-width:820px){ .fab{right:16px;bottom:calc(56px + 16px + env(safe-area-inset-bottom))} }

/* ---------- Formulaires « téléphone » : upload, rubrique, document ---------- */
.form-tel input[type=text],.form-tel input[type=date],.form-tel select,.form-tel textarea{font-size:16px}
.upload-ou{padding:10px 14px;border-radius:14px;background:var(--bg2);font-size:13.5px;color:var(--ink-soft)}
.upload-ou b{color:var(--ink)}
.upload-zone{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;
  border:2px dashed var(--line2);border-radius:20px;background:var(--bg);text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s}
.upload-zone:hover,.upload-zone.survol{border-color:var(--terra);background:color-mix(in srgb,var(--terra) 7%,var(--bg))}
.upload-zone.rempli{border-style:solid;border-color:var(--green)}
.upload-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.upload-ico{font-size:32px;line-height:1;margin-bottom:4px}
.upload-zone b{font-size:15.5px;color:var(--ink)}
.upload-zone small{font-size:12.5px;color:var(--ink-soft)}
.upload-choisis{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-soft)}
.upload-choisis:empty{display:none}
.upload-choisis span{overflow-wrap:anywhere}
@media print{ .docs-recherche,.fab,.rond-btn{display:none!important} }
@media(prefers-reduced-motion:reduce){ .appui,.secoue{transform:none;animation:none} }

/* ---------- iPhone : encoche, zones sûres, zoom des champs ----------
   Installée sur l'écran d'accueil (viewport-fit=cover + barre d'état translucide), l'app
   passe SOUS la barre d'état et la Dynamic Island : env(safe-area-inset-top) vaut ~59 px
   sur un iPhone 15, et le bas ~34 px. La barre du haut faisait 56 px AU TOTAL, marge
   comprise : ses boutons débordaient sur la page. Sur Android et sur ordinateur ces valeurs
   valent 0 : rien n'y change. */
.topbar{height:calc(56px + env(safe-area-inset-top));
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.sidebar{top:calc(56px + env(safe-area-inset-top));height:calc(100vh - 56px - env(safe-area-inset-top))}
.modal-wrap{padding-top:max(5vh,calc(env(safe-area-inset-top) + 12px));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.lightbox{padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}
@media(max-width:820px){
  .sidebar{top:calc(56px + env(safe-area-inset-top))}
  .sidebar-backdrop.show{top:calc(56px + env(safe-area-inset-top))}
  .content{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
/* Safari iOS zoome sur tout champ de moins de 16 px et ne dézoome pas ensuite : l'écran
   reste agrandi et tout paraît décalé. Ses champs date/heure ont aussi une largeur propre
   qui déborde des colonnes. @supports (-webkit-touch-callout:none) ne vise que iOS/iPadOS. */
@supports (-webkit-touch-callout:none){
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important}
  input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;min-width:0;min-height:44px;text-align:left}
  input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;margin:0}
}


/* ======================================================= */
/* =====================  THÈME SOMBRE  ================== */
/* ======================================================= */
:root[data-theme="dark"]{
  --bg:#1b1714; --bg2:#241f1a; --card:#26211c; --ink:#ece4d8; --ink-soft:#aca192;
  --line:#39322b; --line2:#4b4238;
  --wood:#7a5c3e;          /* fond des liens actifs / puces */
  --wood-dark:#efe7db;     /* devient une couleur de TEXTE claire (titres, valeurs) */
  --terra:#d67f52; --terra-dark:#e79d74;
  --sand:#5b4a33; --marble:#2a241d;
  --green:#84a673; --amber:#d8a24c; --red:#e07a5a;
  --shadow:0 8px 26px rgba(0,0,0,.55); --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --plan-fill:#322a21; --plan-line:#b9a17e; --plan-grid:rgba(185,161,126,.10);
  --win-fill:#33424e; --win-stroke:#7f9bad; --stone:#4a443b; --furn:#322c24;
}
:root[data-theme="dark"] .plan-wall{stroke:#cdb287}
:root[data-theme="dark"] .plan-room-g:hover .plan-room,
:root[data-theme="dark"] .plan-room-g.plan-hot .plan-room,
:root[data-theme="dark"] .plan-room-g.plan-hl .plan-room{stroke:var(--terra-dark)}
/* la barre du haut reste sombre (wood-dark est maintenant clair) */
:root[data-theme="dark"] .topbar{background:#17130f}
:root[data-theme="dark"] .toast{background:#3a322a}
:root[data-theme="dark"] .alert{background:#3a241c;border-color:#6b3f2c;color:#f0b69c}
/* champs de saisie */
:root[data-theme="dark"] input[type=text],
:root[data-theme="dark"] input[type=number],
:root[data-theme="dark"] input[type=date],
:root[data-theme="dark"] input[type=tel],
:root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] .status-select{background:#1e1a16;color:var(--ink);border-color:var(--line2)}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#7d7264}
/* surfaces claires codées en dur → sombres */
:root[data-theme="dark"] .dsec,
:root[data-theme="dark"] .subline,
:root[data-theme="dark"] .note-body,
:root[data-theme="dark"] .attach-chip,
:root[data-theme="dark"] .payment{background:#201b16;border-color:var(--line)}
:root[data-theme="dark"] [contenteditable=true]{background:#201b16}
:root[data-theme="dark"] tbody tr:hover{background:#2e2820}
:root[data-theme="dark"] .line-row.open>td{background:#2f2820}
:root[data-theme="dark"] tr.detail-row>td,
:root[data-theme="dark"] .rtable tr.detail-row .detail-box{background:#201b16}
:root[data-theme="dark"] .rtable tr.detail-row .dsec{background:rgba(255,255,255,.04)}
:root[data-theme="dark"] .stat.accent{background:linear-gradient(135deg,#2c2620,#34291f);border-color:#48392a}
:root[data-theme="dark"] .stat.accent .value{color:var(--terra-dark)}
/* survols codés en clair */
:root[data-theme="dark"] .navlink:hover{background:#302a22;color:var(--ink)}
:root[data-theme="dark"] .dsec-head:hover .dsec-toggle,
:root[data-theme="dark"] .chip-file:hover{background:#3a3128}
:root[data-theme="dark"] .pdf-frame{background:#111}
:root[data-theme="dark"] .rtable tr.line-row.open{border-color:var(--sand)}

/* Post-it et segments en sombre : les pastels du mode clair sont aveuglants sur fond
   sombre. Mêmes teintes, très désaturées, avec une encre claire. */
:root[data-theme="dark"]{
  --pit-jaune:#5c5426; --pit-rose:#5e3740; --pit-bleu:#2f4a5c; --pit-vert:#3a5432; --pit-orange:#63472a;
  --pit-ink:#f2ead9;
}
:root[data-theme="dark"] .segment.active{color:#1b1714}
:root[data-theme="dark"] .pit{box-shadow:0 4px 14px rgba(0,0,0,.5)}
:root[data-theme="dark"] .pit.attrape{box-shadow:0 16px 34px rgba(0,0,0,.7)}

/* Calendrier en sombre : couleurs de genre eclaircies, pour rester lisibles sur fond sombre. */
:root[data-theme="dark"]{
  --ev-rdv:#e0875a; --ev-sante:#4fb5a8; --ev-artisan:#bb9468; --ev-livraison:#dca955;
  --ev-sortie:#b08ad6; --ev-anniv:#e47ea0; --ev-echeance:#8db27f; --ev-absence:#76a9d8; --ev-autre:#a69b8e;
}
:root[data-theme="dark"] .rdv-date i{box-shadow:0 1px 5px rgba(0,0,0,.5)}
:root[data-theme="dark"] .fab{box-shadow:0 8px 22px rgba(0,0,0,.55)}
:root[data-theme="dark"] .fiche-wrap.ouvert{background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .cal-jour.est-aujourdhui .cal-num,
:root[data-theme="dark"] .rdv-rel.maintenant,
:root[data-theme="dark"] .cal-ajout,
:root[data-theme="dark"] .fab{color:#1b1714}
:root[data-theme="dark"] input[type=time]{background:#1e1a16;color:var(--ink);border-color:var(--line2)}
/* Documents en sombre */
:root[data-theme="dark"] [data-genre="pdf"]{--c:#e2786c}
:root[data-theme="dark"] .fiche-wrap.ouvert .fiche-menu{box-shadow:0 -12px 40px rgba(0,0,0,.6)}