/* ============================================================
   Fenêtres modales
   modal.css · lignes 208-256 du fichier d'origine
   ============================================================ */
/* ============ MODAL ============ */
/* `overscroll-behavior:contain` — arrivé en bout de fenêtre, le geste ne se
   propage plus à la page derrière. Sans lui, poursuivre son glissement dans
   un formulaire déjà défilé jusqu'en bas faisait bouger la liste du fond.
   Il ne couvre pas le doigt posé À CÔTÉ de la fenêtre : c'est le rôle du
   verrou `html[data-fige]` plus bas. */
.modal-bg{position:fixed;inset:0;                                                        display:none;place-items:center;z-index:100;padding:20px;overscroll-behavior:contain}
.modal-bg.on{display:grid}
.modal{background:var(--surface);                   width:100%;                max-height:90vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;                                       border:1px solid var(--line)}

/* Page figée tant qu'une fenêtre est ouverte. `overflow:hidden` sur body est
   ignoré par Safari iOS : seule la mise en `position:fixed` l'arrête vraiment.
   La position est mémorisée en JS (`figerLeFond`) et rendue à la fermeture. */
html[data-fige]{overflow:hidden}
html[data-fige] body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.modal-head{display:flex;align-items:center;                  border-bottom:1px solid var(--line-soft)}
.modal-head .x{margin-left:auto;               color:var(--ink-faint);}
.modal-head .x:hover{background:var(--surface-2)}
.modal-foot{border-top:1px solid var(--line-soft);display:flex;         justify-content:flex-end}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- L'ADRESSE EN MORCEAUX -------------------------------------
   ⚠️ CES DEUX RANGÉES ÉTAIENT DES `style=` EN DUR SUR LE HTML, et un style
   en ligne bat TOUTE feuille, media query comprise : sur un iPhone, « Rue »
   gardait donc ses 146 px et affichait « Vieux chemi » — une rue tronquée
   dans le seul formulaire qui alimente la facture UBL. Signalé capture à
   l'appui le 21/09/2026.
   ⚠️ ET ELLES NE PORTENT PLUS `.row` : `mobile.css` y impose une colonne
   unique sous 560 px, ce qui empilerait « N° » et « Boîte » sur toute la
   largeur pour deux caractères. Une classe à elles laisse décider ici.
   ⚠️ SUR TÉLÉPHONE, LA RUE PREND LA RANGÉE, le numéro et la boîte se
   partagent la suivante : c'est le seul des trois qui a besoin de place, et
   les deux autres n'en ont jamais eu besoin. */
.field.adr1{display:grid;grid-template-columns:1fr 90px 90px;gap:14px}
.field.adr2{display:grid;grid-template-columns:110px 1fr 90px;gap:14px}
@media(max-width:560px){
  .field.adr1{grid-template-columns:1fr 1fr;gap:10px 12px}
  .field.adr1 > :first-child{grid-column:1 / -1}
  .field.adr2{grid-template-columns:92px 1fr 66px;gap:10px}
}
.field label{display:block;}
.field input,.field select,.field textarea{width:100%;}
.field textarea{resize:vertical;min-height:70px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--ink);color:var(--paper);                                                                                           opacity:0;transition:.25s;z-index:200;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* itinerary/detail lists */
.deflist{display:grid;grid-template-columns:auto 1fr;}
.timeline{list-style:none;position:relative;padding-left:20px}
.timeline::before{content:"";position:absolute;         top:4px;bottom:4px;}
.timeline li{position:relative;padding:0 0 14px 8px}
.timeline li::before{content:"";position:absolute;                                          border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.timeline .t{font-size:12px;color:var(--ink-faint)}

/* calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.cal .cell{min-width:0;overflow:hidden}
.cal .ev{min-width:0;max-width:100%}
.cal .dow{text-transform:uppercase;color:var(--ink-faint);                text-align:center;padding:4px}
.cal .cell{background:var(--surface-2);border:1px solid var(--line-soft);                   padding:6px;font-size:11px}
.cal .cell.out{opacity:.4}
.cal .cell .d{font-weight:700;color:var(--ink-soft);font-size:12px}
.cal .ev{margin-top:4px;                                                                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.chantier{background:var(--info-bg);color:var(--info)}
.cal .ev.chantier.cont{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info);font-weight:600}
.cal .cell.we{background:color-mix(in srgb,var(--ink-faint) 8%,var(--surface-2))}
.cal .ev.rdv{background:var(--info-bg);color:var(--info);cursor:pointer}
.cal .ev.conge{background:var(--warn-bg);color:var(--warn)}

canvas{max-width:100%}

/* journal des échanges (groupé par jour) */