/* ===== L3TEC Devis v2 — Corporate Blue/White Theme ===== */
:root {
  --blue:       #004590;
  --blue-dark:  #003070;
  --blue-light: #EEF4FC;
  --blue-mid:   #D0E2F5;
  --ink:        #1A1A2E;
  --body:       #3D3D5C;
  --muted:      #6B7280;
  --line:       #D8DEE7;
  --line-soft:  #EEF0F4;
  --surface:    #FFFFFF;
  --bg:         #F5F7FA;
  --teal:       #0E8A8C;
  --violet:     #6B4FA0;
  --red:        #D7263D;
  --green:      #1E9E66;
  --amber:      #C98A1B;
  --grey:       #6B7280;
  --status-sent:     #1E88E5;
  --status-accepted: #1E9E66;
  --status-refused:  #D7263D;
  --status-invoiced: #8C5FB5;
  --status-draft:    #6B7280;
  --radius:     8px;
  --radius-sm:  5px;
  --shadow:     0 1px 3px rgba(0,0,0,.07), 0 1px 8px rgba(0,0,0,.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,.1);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{min-height:100vh;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}

/* ── Top bar ── */
.brandbar{display:flex;align-items:center;gap:16px;padding:calc(12px + env(safe-area-inset-top)) 28px 12px;background:var(--surface);border-bottom:3px solid var(--blue);position:sticky;top:0;z-index:101;box-shadow:var(--shadow);flex-wrap:wrap;}
.brand-logo{height:32px;}
.brand-sub{font-size:12px;color:var(--muted);padding-left:12px;border-left:1px solid var(--line);}
.header-back-link{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--blue);text-decoration:none;text-transform:uppercase;letter-spacing:.4px;}
.header-back-link:hover{text-decoration:underline;}
.header-user{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;}
.header-user strong{color:var(--blue);}
.header-user a{color:var(--blue);text-decoration:none;font-weight:600;}
.header-user a:hover{text-decoration:underline;}

/* ── Tabs ── */
.tabs{display:flex;gap:2px;padding:0 28px;background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:58px;z-index:100;box-shadow:0 2px 4px rgba(0,0,0,.04);}
.tab{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:none;border:none;padding:14px 18px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s;}
a.tab{text-decoration:none;display:inline-flex;align-items:center;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--blue);border-bottom-color:var(--blue);}

/* ── Layout ── */
main{max-width:1100px;margin:0 auto;padding:24px 28px 60px;}
main.full-width{max-width:100%;padding:24px 16px 60px;}
.panel-tab{display:none;}
.panel-tab.active{display:block;}

.subtabs{padding:0 0 0 2px;margin-bottom:18px;border-bottom:1px solid var(--line);}
.subtab{font-family:var(--font-display);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);background:none;border:none;padding:14px 18px;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:color .15s;}
.subtab:hover{color:var(--ink);}
.subtab.active{color:var(--blue);border-bottom-color:var(--blue);}
.subtab-panel{display:none;}
.subtab-panel.active{display:block;}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;box-shadow:var(--shadow);}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:2px solid var(--blue);}
.card-title{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);}
.hint{font-size:12px;color:var(--muted);margin-top:-8px;margin-bottom:12px;font-style:italic;}

/* ── Grid ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:780px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

/* ── KPI cards ── */
.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;border-top:3px solid var(--blue);box-shadow:var(--shadow);}
.kpi-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.kpi-value{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--blue);}
.kpi-sub{font-size:12px;color:var(--muted);margin-top:4px;}

/* ── LCD total ── */
.lcd-card{background:var(--blue);border-radius:var(--radius);padding:18px 22px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;box-shadow:var(--shadow-md);}
.lcd-label{font-size:11px;color:rgba(255,255,255,.7);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.lcd-value{font-family:var(--font-display);font-size:32px;font-weight:700;color:#fff;letter-spacing:1px;}

/* ── Forms ── */
.field-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.field-row label{flex:1;min-width:150px;display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:500;}
input,select,textarea{background:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-sm);padding:9px 11px;font-family:var(--font-body);font-size:13.5px;width:100%;transition:border-color .15s;}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,69,144,.12);}
textarea{resize:vertical;min-height:90px;}

/* ── Buttons ── */
.btn{font-family:var(--font-body);font-weight:600;font-size:13px;padding:9px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn:hover{border-color:var(--blue);color:var(--blue);}
.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;}
.btn-ghost{background:transparent;}
.btn-danger{background:var(--red);border-color:var(--red);color:#fff;}
.btn-danger:hover{filter:brightness(.9);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-link{background:none;border:none;color:var(--blue);font-size:12.5px;cursor:pointer;padding:3px 6px;}
.btn-link:hover{text-decoration:underline;}
.btn-link.danger{color:var(--red);}
.btn-icon{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;}
.btn-icon:hover{color:var(--red);}
.actions-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

/* ── Tables ── */
.table-wrap{overflow-x:auto;}
.data-table{width:100%;border-collapse:collapse;min-width:520px;}
.data-table th{text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--blue);padding:10px 10px;border-bottom:2px solid var(--blue-dark);white-space:nowrap;}
.data-table th:first-child{border-radius:var(--radius-sm) 0 0 0;}
.data-table th:last-child{border-radius:0 var(--radius-sm) 0 0;}
.data-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.data-table tr:hover td{background:var(--blue-light);}
.data-table .num{text-align:right;font-family:var(--font-mono);white-space:nowrap;}
.data-table .mono{white-space:nowrap;}

/* ── Lines table (devis) ── */
.lines-table{width:100%;border-collapse:collapse;min-width:600px;}
.lines-table th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--blue);padding:9px 8px;}
.lines-table td{padding:5px 6px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.ln-input{width:100%;border:1px solid transparent;padding:6px 8px;border-radius:4px;background:transparent;font-size:13px;color:var(--ink);}
.ln-input:hover,.ln-input:focus{border-color:var(--blue);background:var(--surface);}
.ln-input.ln-qty,.ln-input.ln-price{width:82px;text-align:right;}
.ln-input.ln-unit{width:60px;}
.ln-total{font-family:var(--font-mono);text-align:right;white-space:nowrap;color:var(--ink);}

/* Section lines in the lines table */
.line-section-row td{background:var(--blue-light)!important;border-bottom:2px solid var(--blue-mid)!important;}
.line-section-input{font-weight:700;color:var(--blue);font-size:13px;}
.line-section-badge{display:inline-block;background:var(--blue);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px;margin-right:6px;}
.section-subtotal-row td{background:#F0F5FF;font-size:12px;color:var(--blue);font-weight:600;border-bottom:2px solid var(--blue-mid)!important;}
.drag-handle{cursor:grab;color:var(--muted);font-size:16px;padding:0 4px;user-select:none;}
.drag-handle:active{cursor:grabbing;}
.sortable-ghost{opacity:.4;background:var(--blue-light)!important;}

/* ── Status badges ── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.badge-draft    {background:#F0F0F0;color:var(--status-draft);}
.badge-sent     {background:#E3F1FD;color:var(--status-sent);}
.badge-accepted {background:#E6F7EF;color:var(--status-accepted);}
.badge-refused  {background:#FDECEA;color:var(--status-refused);}
.badge-invoiced {background:#F3EEF9;color:var(--status-invoiced);}

.status-select{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:999px;padding:4px 26px 4px 12px;font-size:11.5px;font-weight:600;cursor:pointer;background-repeat:no-repeat;background-position:right 8px center;background-size:10px;transition:filter .15s;min-width:104px;white-space:nowrap;}
.status-select:hover{filter:brightness(.96);border-color:rgba(0,0,0,.08);}
.status-select:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}
.status-select:disabled{opacity:.6;cursor:wait;}
.status-select-draft   {background-color:#F0F0F0;color:var(--status-draft);   background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236B7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");}
.status-select-sent    {background-color:#E3F1FD;color:var(--status-sent);    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%231E88E5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");}
.status-select-accepted{background-color:#E6F7EF;color:var(--status-accepted);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%231E9E66' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");}
.status-select-refused {background-color:#FDECEA;color:var(--status-refused); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23D7263D' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");}
.status-select-invoiced{background-color:#F3EEF9;color:var(--status-invoiced);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%238C5FB5' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");}

/* ── Client picker ── */
.client-picker{position:relative;margin-bottom:0;}
.client-picker-results{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:2px;max-height:260px;overflow-y:auto;z-index:60;box-shadow:var(--shadow-md);}
.cpick-row{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line-soft);}
.cpick-row:hover{background:var(--blue-light);}
.cpick-name{font-weight:600;color:var(--ink);}
.cpick-sub{font-size:11.5px;color:var(--muted);}
.cpick-empty{padding:12px;color:var(--muted);text-align:center;font-size:13px;}
.client-selected-chip{display:inline-flex;align-items:center;gap:8px;background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:var(--radius-sm);padding:7px 12px;font-size:13px;color:var(--blue);font-weight:600;margin-bottom:6px;}
.client-selected-chip .btn-icon{color:var(--blue);font-size:14px;}

/* ── Catalog picker ── */
.picker{position:relative;margin-bottom:14px;}
.picker-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.chip{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;}
.chip:hover{border-color:var(--blue);}
.chip.active{color:var(--blue);border-color:var(--blue);background:var(--blue-light);}
.port-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;}
.catalog-results{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);margin-top:2px;max-height:300px;overflow-y:auto;z-index:50;box-shadow:var(--shadow-md);}
.result-group-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:9px 12px 3px;display:flex;align-items:center;gap:8px;background:var(--bg);}
.result-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line-soft);}
.result-row:hover{background:var(--blue-light);}
.result-row .res-price{font-family:var(--font-mono);color:var(--muted);font-size:12px;white-space:nowrap;}
.result-empty{padding:14px 12px;color:var(--muted);font-size:13px;text-align:center;}

/* ── Totals ── */
.totals-card .totals-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line-soft);}
.totals-card .totals-row:last-child{border-bottom:none;}
.totals-card .totals-row label{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);}
.totals-card .totals-row input{width:60px;padding:4px 6px;font-size:13px;}
.totals-card .totals-row span:last-child{font-family:var(--font-mono);color:var(--ink);}
.totals-card .totals-row.total-row{border-top:2px solid var(--blue)!important;margin-top:6px;padding-top:10px;}
.totals-card .totals-row.total-row span{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--blue);}

/* ── Catalogue tab ── */
.cat-card{border-top:3px solid var(--cat-color,var(--blue));}
.cat-card-header{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.cat-name{font-family:var(--font-display);font-weight:600;font-size:14px;}
.subcat-block{padding:10px 0;border-top:1px solid var(--line-soft);}
.subcat-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.subcat-name-label{font-weight:600;font-size:13px;color:var(--ink);}
.subcat-header .btn-link{margin-left:auto;}
.cat-add-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center;}
.cat-add-row input{width:auto;}
.cat-add-row .new-desc{flex:1;min-width:160px;}
.subcat-add-row{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);}

/* ── Clients tab ── */
.client-list-item{display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line-soft);gap:12px;}
.client-list-item:hover{background:var(--blue-light);}
.client-name{font-weight:600;font-size:13.5px;color:var(--ink);}
.client-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.email-tag{display:inline-flex;align-items:center;gap:4px;background:var(--blue-light);color:var(--blue);border:1px solid var(--blue-mid);border-radius:4px;padding:2px 8px;font-size:11.5px;margin:2px 2px 0 0;}

/* ── Modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal{background:var(--surface);border-radius:var(--radius);padding:24px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--blue);margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--blue);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}

/* ── Modales défilables (correctif mobile) ─────────────────────────────────
   Problème corrigé : une modale plus haute que l'écran était coupée, sans aucun
   défilement — impossible d'atteindre les boutons Annuler / Enregistrer / Supprimer.
   - max-height en dvh = hauteur RÉELLEMENT visible : tient compte des barres du
     navigateur mobile ET du rétrécissement lors de l'ouverture du clavier virtuel.
   - overflow-y:auto sur la modale : son contenu défile.
   - overflow-y:auto sur l'overlay : filet de sécurité si la modale dépasse malgré tout.
   Sur grand écran, la contrainte ne s'applique QUE si la modale dépasse la hauteur
   disponible : l'affichage desktop habituel est donc inchangé. */
.modal-overlay{overflow-y:auto;overscroll-behavior:contain;}
.modal{max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* Pied d'action COLLANT : les boutons restent visibles et atteignables sans avoir à
   dérouler jusqu'en bas ; le contenu défile dessous (fond opaque).
   Ciblage en ENFANT DIRECT de .modal : la classe .modal-actions est aussi utilisée
   dans des listes hors modale (validation des heures, congés), à ne pas rendre collantes. */
.modal > .modal-actions{
  position:sticky;bottom:0;z-index:3;
  background:var(--surface);
  margin:18px -24px 0;padding:14px 24px 14px;
}

/* Petits écrans : on colle la modale en haut (plus confortable quand le clavier
   s'ouvre) et on resserre un peu les marges pour gagner de la hauteur utile. */
@media (max-width:600px){
  .modal-overlay{align-items:flex-start;padding:10px;}
  .modal{max-height:calc(100dvh - 20px);padding:16px;}
  .modal > .modal-actions{margin:14px -16px 0;padding:12px 16px 12px;}
}

/* Modales du module « Retour photo » : structure en styles inline (hors système
   .modal), on leur applique la même règle de défilement. !important pour passer
   devant les styles inline existants (certaines étaient limitées en vh, pas en dvh). */
#rp-newmodal,#rp-renamemodal,#rp-sendmodal,#rp-addrmodal,#rp-mapmodal{overflow-y:auto;}
#rp-newmodal>div,#rp-renamemodal>div,#rp-sendmodal>div,#rp-addrmodal>div,#rp-mapmodal>div{
  max-height:calc(100dvh - 24px)!important;overflow-y:auto!important;
}

/* ══ Suivi chantier — liste en FICHES sur mobile (desktop strictement inchangé) ══
   Le tableau à 15 colonnes imposait un défilement horizontal et coupait les noms,
   les mois et surtout les statuts. Sous 700px on le reflue en cartes : une fiche par
   chantier, nom complet en titre, puis des lignes « étiquette : valeur ».
   Choix technique : tout se fait en CSS, le HTML et les gestionnaires JS restent
   IDENTIQUES — l'édition en ligne (n° facture, n° commande, statut, mois, montant)
   continue donc de fonctionner exactement comme sur ordinateur. */
@media (max-width:700px){
  /* — Zone de filtres compacte — */
  /* 3 listes déroulantes sur UNE seule ligne, recherche pleine largeur, boutons par deux :
     la zone de filtres passe de 149px (état actuel sur mobile) à ~119px de hauteur. */
  .ch-filters{gap:8px!important;}
  .ch-filters-left{width:100%;display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px;}
  .ch-filters-left select{width:100%;min-width:0;font-size:12.5px;padding:6px 6px!important;}
  .ch-filters-left #btn-chantiers-reset-filters{grid-column:1/-1;}
  .ch-filters-right{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;}
  .ch-filters-right #chantiers-search{grid-column:1/-1;width:100%!important;box-sizing:border-box;}
  /* white-space:normal : le libellé « Masquer les facturés/archivés » n'est plus coupé */
  .ch-filters-right .btn{width:100%;white-space:normal;line-height:1.3;}

  /* — Tableau reflué en fiches — */
  #chantiers-table{
    table-layout:auto!important;border-collapse:separate;border-spacing:0;
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box;
  }
  .ch-filters select,.ch-filters input,.ch-filters .btn{box-sizing:border-box;max-width:100%;}
  #chantiers-table colgroup,#chantiers-table thead{display:none;}
  #chantiers-table,#chantiers-table tbody{display:block;width:100%;max-width:100%;}
  /* IMPORTANT : on GARDE overflow-x:auto sur le conteneur. Il joue le rôle de pare-feu :
     si un contenu dépassait malgré tout, seul ce bloc défilerait, la PAGE entière ne serait
     pas décalée (en-tête, onglets, filtres compris). Une version précédente le passait en
     "visible", ce qui laissait le débordement se propager à tout le document. */
  #chantiers-list-view{max-width:100%;}

  /* Fiche en UNE SEULE COLONNE : chaque champ est un bloc pleine largeur. C'est le choix
     le plus robuste — contrairement à une grille 2 colonnes, aucune colonne ne peut
     s'élargir au-delà de la fiche et pousser la page vers la droite. */
  #chantiers-table tr{
    display:block;
    background:var(--card,#fff);border:1px solid var(--line);border-radius:10px;
    padding:12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.06);
    width:100%;max-width:100%;box-sizing:border-box;
  }
  /* Cellule = conteneur flex : l'étiquette occupe sa propre ligne, puis le champ et son
     éventuel suffixe (« € ») restent CÔTE À CÔTE sur la ligne suivante. Le champ est
     flexible : il prend la place disponible moins celle du suffixe, donc il ne touche
     jamais le bord et la flèche des listes déroulantes reste visible. */
  #chantiers-table td{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px;
    min-width:0;width:100%!important;max-width:100%!important;box-sizing:border-box;
    text-align:left!important;border:none!important;padding:0 0 9px!important;font-size:13px;
    white-space:normal!important;overflow:visible;
  }
  /* Garde-fou général : AUCUN descendant ne peut dépasser la largeur de la fiche.
     Couvre les conteneurs internes (ex. cellule N° Facture) qui ont des largeurs fixes
     ou du white-space:nowrap hérités du tableau desktop. */
  #chantiers-table td *{max-width:100%!important;box-sizing:border-box!important;}
  #chantiers-table td span{white-space:normal!important;}

  /* Nom du chantier : titre complet, sur plusieurs lignes, jamais tronqué */
  #chantiers-table td.pl-name-cell{
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    font-size:15px!important;font-weight:700!important;color:var(--brand);line-height:1.3;
    margin:0;padding-bottom:9px!important;border-bottom:1px solid var(--line)!important;overflow-wrap:anywhere;
  }
  /* Client : plus de troncature non plus */
  #chantiers-table td.ch-client{overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;}

  /* ÉTIQUETTE AU-DESSUS de la valeur (et non à côté) : bien plus lisible sur écran étroit
     et surtout impossible à pousser hors de l'écran. */
  /* flex:0 0 100% -> l'étiquette occupe toute la ligne, le champ passe en dessous */
  #chantiers-table td[data-label]::before{
    content:attr(data-label);flex:0 0 100%;font-size:10px;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.02em;margin-bottom:1px;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* Champs éditables : toujours 100 % de leur case, jamais plus (box-sizing indispensable,
     les largeurs fixes en pixels du tableau desktop sont neutralisées ici). */
  /* Le champ prend la largeur restante (flex:1) au lieu d'un 100% rigide : le suffixe
     « € » garde ainsi sa place sur la même ligne, et le champ ne déborde jamais. */
  #chantiers-table td input,#chantiers-table td select{
    flex:1 1 auto;width:auto!important;max-width:100%!important;min-width:0!important;
    box-sizing:border-box!important;
    font-size:13px!important;padding:6px 8px!important;
    border:1px solid var(--line)!important;border-radius:6px;background:var(--surface)!important;
  }
  /* Le nom du chantier et le bouton Détail restent en bloc pleine largeur */
  #chantiers-table td.pl-name-cell{display:block;}
  #chantiers-table td.ch-detail{display:block;}
  #chantiers-table td .statut-inline-select{font-weight:700;}

  /* Bouton Détail en pied de fiche, pleine largeur */
  #chantiers-table td.ch-detail{
    margin-top:2px;padding:10px 0 0!important;border-top:1px solid var(--line)!important;
  }
  #chantiers-table td.ch-detail .btn{width:100%;}
}
.checkbox-row{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13.5px;cursor:pointer;}
.checkbox-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);}
.email-chips-input{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--line);border-radius:var(--radius-sm);min-height:42px;cursor:text;}
.email-chips-input .email-chip{display:inline-flex;align-items:center;gap:4px;background:var(--blue-light);color:var(--blue);border-radius:4px;padding:3px 8px;font-size:12px;}
.email-chips-input .email-chip .rm{cursor:pointer;color:var(--muted);font-size:14px;line-height:1;}

/* ── Empty / misc ── */
.empty-state{color:var(--muted);font-size:13px;padding:18px 0;text-align:center;}
.hidden{display:none!important;}
.mono{font-family:var(--font-mono);}
.num{text-align:right;}
.row-actions{display:flex;gap:4px;white-space:nowrap;}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--blue);border:1px solid var(--blue-dark);color:#fff;padding:11px 20px;border-radius:var(--radius-sm);font-size:13px;opacity:0;transition:opacity .25s,transform .25s;z-index:1000;max-width:90vw;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{background:var(--red);}
.toast.success{background:var(--green);}

/* ── Auth pages ── */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--bg);padding:20px;}
.auth-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow-md);text-align:center;}
.auth-logo{height:36px;margin-bottom:20px;}
.auth-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 22px;}
.auth-form{display:flex;flex-direction:column;gap:14px;text-align:left;}
.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);font-weight:500;}
.auth-form .btn{margin-top:6px;}
.auth-error{background:#FDECEA;border:1px solid var(--red);color:var(--red);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-bottom:14px;text-align:left;}
.auth-switch{font-size:13px;color:var(--muted);margin-top:18px;}
.auth-pass-wrap{position:relative;display:flex;align-items:center;}
.auth-pass-wrap input{flex:1;padding-right:40px;}
.auth-eye{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;display:flex;align-items:center;line-height:1;}
.auth-eye:hover{color:var(--blue);}
.auth-success{background:#E8F5E9;border:1px solid #A5D6A7;color:#1B5E20;border-radius:var(--radius);padding:12px 16px;font-size:14px;margin-bottom:16px;text-align:center;}
.auth-switch a{color:var(--blue);text-decoration:none;font-weight:600;}

/* ── Print area (hidden offscreen, used for PDF) ── */
#print-area{position:absolute;left:-99999px;top:0;width:210mm;background:#fff;}

/* ── PDF / Print Document styles ── */
.doc{width:210mm;min-height:297mm;background:#fff;color:#1a1a1a;font-family:'Inter',sans-serif;font-size:10pt;padding:12mm 14mm;box-sizing:border-box;}
.doc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8mm;}
.doc-logo-img{height:32px;display:block;}
.doc-sender{font-size:8.5pt;color:#444;margin-top:3mm;line-height:1.6;}
.doc-meta{text-align:right;}
.doc-meta-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22pt;color:#004590;letter-spacing:1px;}
.doc-meta-details{font-size:8.5pt;color:#444;margin-top:2mm;line-height:1.7;}
.doc-hr{border:none;border-top:3px solid #004590;margin:0 0 6mm;}
.doc-parties{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-bottom:8mm;}
.doc-party-label{font-size:8pt;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:2mm;font-weight:600;}
.doc-party-body{font-size:9.5pt;line-height:1.7;}
.doc-party-body strong{font-size:10.5pt;}
.doc-table{width:100%;border-collapse:collapse;margin-bottom:6mm;font-size:9pt;}
.doc-table thead th{background:#004590;color:#fff;padding:2.5mm 2mm;text-align:left;font-size:8.5pt;font-weight:700;letter-spacing:.3px;}
.doc-table thead th.num{text-align:right;}
.doc-table tbody td{padding:2mm 2mm;border-bottom:1px solid #E8ECF0;vertical-align:top;}
.doc-table tbody tr:nth-child(even) td{background:#F8FAFD;}
.doc-table tbody td.num{text-align:right;font-family:'IBM Plex Mono',monospace;}
.doc-section-row td{background:#EEF4FC!important;font-weight:700;color:#004590;font-size:9pt;padding:1.5mm 2mm;border-bottom:1px solid #C8D8EC!important;}
.doc-subtotal-row td{background:#F0F5FF!important;font-size:8.5pt;color:#004590;font-style:italic;border-bottom:1px solid #C8D8EC!important;}
.doc-bottom{display:grid;grid-template-columns:1fr 1fr;gap:8mm;margin-bottom:6mm;}
.doc-tva-table{font-size:8.5pt;width:100%;}
.doc-tva-table th{background:#004590;color:#fff;padding:1.5mm 2mm;font-size:8pt;}
.doc-tva-table td{padding:1.5mm 2mm;border-bottom:1px solid #E8ECF0;}
.doc-bank{margin-top:4mm;}
.doc-bank-title{font-weight:700;font-size:8.5pt;background:#004590;color:#fff;padding:1.5mm 2mm;}
.doc-bank table{width:100%;font-size:8.5pt;}
.doc-bank td{padding:1.5mm 2mm;border-bottom:1px solid #E8ECF0;}
.doc-totals{font-size:9pt;}
.doc-totals-row{display:flex;justify-content:space-between;padding:1.5mm 0;border-bottom:1px solid #E8ECF0;}
.doc-totals-row.doc-total{border-top:2px solid #004590;border-bottom:none;padding-top:2mm;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14pt;color:#004590;}
.doc-accord{background:#004590;color:#fff;text-align:center;padding:2mm;font-weight:700;font-size:9pt;margin-bottom:2mm;}
.doc-signature{font-size:8.5pt;color:#666;margin-bottom:4mm;}
.doc-amount-words{font-size:8.5pt;color:#444;font-style:italic;margin-bottom:4mm;}
.doc-comment{font-size:8.5pt;color:#444;margin-bottom:4mm;padding:2mm;border:1px solid #E8ECF0;border-radius:3px;}
.doc-footer{margin-top:auto;padding-top:4mm;border-top:1px solid #E8ECF0;font-size:7.5pt;color:#888;text-align:center;line-height:1.6;}

@media print{
  body *{visibility:hidden;}
  #print-area, #print-area *{visibility:visible;}
  #print-area{position:absolute;left:0;top:0;}
  @page{size:A4;margin:0;}
}
/* ===== Badgeuse — styles spécifiques ===== */
.week-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.week-nav-title{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--blue);text-align:center;}
.week-nav-sub{font-size:12px;color:var(--muted);text-align:center;margin-top:2px;}
.week-nav .btn{min-width:120px;}
/* Sur téléphone, « ← Semaine précédente » dépassait à gauche : le min-width de
   120 px s'ajoutait au libellé long et empêchait le bouton de rétrécir. On lève
   le plancher et on laisse les deux boutons se partager la ligne, le titre de
   semaine passant au-dessus. */
@media(max-width:700px){
  .week-nav{gap:8px;}
  .week-nav .btn{min-width:0;flex:1 1 auto;font-size:12.5px;padding:8px 10px;}
  .week-nav-title{order:-1;flex:1 1 100%;}   /* titre sur sa propre ligne, au-dessus */
  .week-nav > div{flex:1 1 100%;}
}

.day-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);}
.day-card.is-future{opacity:.5;background:var(--bg);}
.day-card.is-today{border-left:4px solid var(--blue);}
.day-card.is-admin-locked{border-left:4px solid var(--status-accepted);}
.day-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.day-card-title{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink);}
.day-card-date{font-size:12px;color:var(--muted);margin-left:8px;}
.day-card-tags{display:flex;gap:6px;}
.day-tag{font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px;}
.day-tag-panier{background:#F3EEF9;color:var(--violet);}
.day-tag-trajet{background:#FDECEA;color:var(--red);}
.day-tag-validated{background:#E6F7EF;color:var(--status-accepted);}
.day-tag-locked{background:#E3F1FD;color:var(--status-sent);}
.day-future-note{font-size:12.5px;color:var(--muted);font-style:italic;}
.day-inputs{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;}
.day-input-group{display:flex;flex-direction:column;gap:4px;}
.day-input-group label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;}
.day-input-group input{width:90px;text-align:center;font-family:var(--font-mono);font-size:15px;}
.day-validate-btn{margin-left:auto;}

/* ── Bandeau de synthèse de la semaine (4 cartes KPI) ────────────────────────
   CAUSE DU DÉBORDEMENT CORRIGÉ LE 19/07/2026 : la grille était en
   « repeat(4,1fr) ». Or « 1fr » signifie « minmax(auto,1fr) », et ce minimum
   « auto » vaut la largeur MIN-CONTENT de la carte : les colonnes refusaient
   donc de rétrécir en dessous de leur contenu (« 35,00 h », le libellé en
   majuscules…). Sur un téléphone, les 4 colonnes additionnées dépassaient le
   viewport et poussaient TOUTE la page vers la gauche — d'où le logo amputé et
   le « oucou, RUIZ ». C'est bien la cause, pas le symptôme : masquer avec
   overflow-x aurait laissé la grille trop large.
   Correction : minmax(0,1fr) autorise la colonne à descendre sous son
   min-content, et le nombre de colonnes se replie selon la largeur d'écran. */
.week-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;}
.week-summary > *{min-width:0;}          /* un enfant de grille ne rétrécit pas sans ceci */
.week-summary .kpi-card{padding:14px 16px;}
.week-summary .kpi-value{font-size:22px;white-space:nowrap;}  /* « 35,00 h » reste sur une ligne */

/* Repli progressif : 2 colonnes sur téléphone, 1 seule sur les petits écrans. */
@media(max-width:700px){
  .week-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .week-summary .kpi-card{padding:12px 12px;}
  .week-summary .kpi-value{font-size:19px;}
  .week-summary .kpi-label{font-size:10.5px;letter-spacing:.3px;}
}
@media(max-width:380px){
  .week-summary{grid-template-columns:minmax(0,1fr);}
}

.week-status-banner{padding:14px 18px;border-radius:var(--radius);margin-bottom:18px;font-size:13.5px;display:flex;align-items:center;gap:10px;}
.week-status-banner.pending{background:#FFF8E8;border:1px solid #F0D58C;color:#8A6D1A;}
.week-status-banner.employee-done{background:#E3F1FD;border:1px solid #A8D2F5;color:#0E5A99;}
.week-status-banner.admin-done{background:#E6F7EF;border:1px solid #A8E0C2;color:#146641;}

.signature-pad-wrap{border:2px dashed var(--line);border-radius:var(--radius-sm);background:#fff;touch-action:none;}
.signature-pad-wrap canvas{display:block;width:100%;height:180px;cursor:crosshair;}
.signature-actions{display:flex;gap:10px;margin-top:10px;justify-content:space-between;align-items:center;}

.admin-week-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);}
.admin-week-row-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;}
.admin-week-user{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue);}
.admin-week-dates{font-size:12px;color:var(--muted);}
.admin-week-stats{display:flex;gap:18px;font-size:12.5px;color:var(--muted);margin-top:8px;}
.admin-week-stats strong{color:var(--ink);}
.signature-preview{max-width:220px;max-height:70px;border:1px solid var(--line);border-radius:4px;background:#fff;margin-top:8px;}
.admin-week-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);display:none;}
.admin-week-detail.open{display:block;}
.admin-week-detail table{width:100%;font-size:12.5px;border-collapse:collapse;}
.admin-week-detail td,.admin-week-detail th{padding:5px 8px;border-bottom:1px solid var(--line-soft);text-align:left;}

/* PDF print layout for the full-company weekly sheet */
.bg-doc{width:297mm;min-height:210mm;background:#fff;color:#1a1a1a;font-family:'Inter',sans-serif;font-size:8pt;padding:10mm;box-sizing:border-box;}
.bg-doc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6mm;}
.bg-doc-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16pt;color:#004590;}
.bg-doc-meta{font-size:9pt;color:#444;text-align:right;}
table.bg-table{width:100%;border-collapse:collapse;font-size:7.5pt;}
table.bg-table th,table.bg-table td{border:1px solid #ccc;padding:1.5mm;text-align:center;}
table.bg-table th{background:#004590;color:#fff;font-weight:600;}
table.bg-table td.bg-name{text-align:left;font-weight:600;background:#F8FAFD;}
td.bg-worked{background:#D7EFD9;}
td.bg-total{background:#FCE98C;font-weight:700;}
td.bg-trajet{background:#F5C8BE;}
td.bg-panier{background:#DCDCDC;}
td.bg-sig img{max-height:10mm;max-width:24mm;}

/* ===== Planning mensuel (admin) ===== */
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;}
.month-nav-title{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--blue);text-transform:capitalize;}

/* Vue synthèse : un salarié par ligne, tient sur une page sans défilement */
.planning-summary-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.planning-summary-table th, .planning-summary-table td{border:1px solid var(--line);padding:8px 10px;text-align:center;}
.planning-summary-table thead th{background:var(--blue);color:#fff;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;}
.planning-summary-table tbody tr:nth-child(even){background:var(--bg);}
.planning-summary-table tbody tr:hover{background:var(--blue-light);}
.pl-name-cell{font-weight:700;color:var(--blue);text-align:left;cursor:pointer;}
.pl-editable{background:transparent;border:1px solid transparent;border-radius:3px;width:70px;font-size:12.5px;padding:3px 5px;text-align:center;}
.pl-editable:hover, .pl-editable:focus{border-color:var(--blue);background:#fff;}

/* Vue détail : calendrier d'un seul salarié, 7 colonnes, tient toujours sur une page */
.cal-weekday-header{display:grid;grid-template-columns:56px repeat(7,1fr);gap:6px;margin-bottom:6px;}
.cal-weeknum-header{text-align:center;font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.cal-weekday{text-align:center;font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.cal-days{display:grid;grid-template-columns:56px repeat(7,1fr);gap:6px;}
.cal-weeknum{display:flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:13px;}
.cal-day{aspect-ratio:1.15;border-radius:8px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:filter .1s, outline .1s;border:1px solid var(--line);}
.cal-day:hover{filter:brightness(.96);outline:2px solid var(--blue);outline-offset:-2px;}
.cal-day-blank{border:none;cursor:default;}
.cal-day-blank:hover{filter:none;outline:none;}
.cal-day-num{font-size:12px;font-weight:600;color:var(--muted);}
.cal-day-content{font-size:13px;font-weight:700;}
.cal-day.weekend-empty{background:repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 4px,#e8e8e8 4px,#e8e8e8 8px);}
.cal-day.weekend-empty .cal-day-num{color:#bbb;}
.cal-day.day-empty{background:#fff;}
.cal-day.day-travail{background:#D7EFD9;}
.cal-day.day-travail .cal-day-content{color:#146641;}
.cal-day.day-cet{background:#E6F7EF;}
.cal-day.day-cet .cal-day-content{color:#1E9E66;font-size:11px;}
.cal-day.day-sans_solde{background:#FDECEA;}
.cal-day.day-sans_solde .cal-day-content{color:#D7263D;font-size:11px;}
.cal-day.day-conge{background:#E3F1FD;}
.cal-day.day-conge .cal-day-content{color:#1E88E5;font-size:11px;}
.cal-day.day-maladie{background:#FFF3E0;}
.cal-day.day-maladie .cal-day-content{color:#E65100;font-size:11px;}
/* Jour férié (français, détecté automatiquement) non travaillé : repère visuel ambré. */
.cal-day.day-ferie{background:#FEF3C7;}
.cal-day.day-ferie .cal-day-content{color:#B45309;font-size:11px;font-weight:700;}
/* Jour férié TRAVAILLÉ : on affiche les heures, sur fond férié (majoration 100 %). */
.cal-day.day-ferie-worked{background:#FDE68A;}
.cal-day.day-ferie-worked .cal-day-content{color:#92400E;font-weight:700;}
/* Journée de solidarité : travaillée mais non rémunérée. */
.cal-day.day-solidarite{background:#EDE9FE;}
.cal-day.day-solidarite .cal-day-content{color:#6D28D9;font-size:11px;}

.planning-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:12px;color:var(--muted);}
.legend-item{display:flex;align-items:center;gap:6px;}
.legend-swatch{width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid var(--line);}
.swatch-travail{background:#D7EFD9;}
.swatch-cet{background:#E6F7EF;}
.swatch-sans_solde{background:#FDECEA;}
.swatch-conge{background:#E3F1FD;}
.swatch-maladie{background:#FFF3E0;}
.swatch-weekend{background:repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 4px,#e8e8e8 4px,#e8e8e8 8px);}

/* Trajet désactivé pour un salarié ETAM */
.disabled-label{opacity:.45;}

/* Badge rouge de compteur en attente (à côté de "Validation" / "Congés") */
.pending-badge{color:#D7263D;font-weight:700;}

/* ===== Page d'accueil (sélecteur d'application) ===== */
.app-launcher{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 70px);padding:40px 20px;}
.launcher-inner{text-align:center;width:100%;max-width:760px;}
.launcher-title{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);margin-bottom:8px;}
.launcher-sub{font-size:14px;color:var(--muted);margin-bottom:40px;}
/* Blague du jour (lundi-vendredi) : encart discret sous le « Coucou ». */
.launcher-joke{display:inline-block;max-width:560px;margin:0 auto 14px;padding:9px 14px;
  background:var(--card,#fff);border:1px solid var(--line);border-left:3px solid var(--brand,#004590);
  border-radius:8px;font-size:13.5px;line-height:1.55;color:var(--ink);text-align:left;}
.launcher-joke-label{font-weight:700;color:var(--brand,#004590);}

/* ── Planning hebdo : optimisation MOBILE uniquement (desktop inchangé) ──
   Le conteneur impose min-width:900px en style inline, ce qui obligeait à faire
   défiler une grille de 900px sur un écran de 390px (une seule journée visible).
   On lève cette contrainte sous 700px : les largeurs sont alors calculées en JS
   pour afficher 3 à 4 jours d'un coup, colonne salarié figée à gauche. */
@media (max-width:700px){
  #planning-grid{min-width:0 !important;}
  #planning-grid-wrap{max-height:calc(100vh - 96px);-webkit-overflow-scrolling:touch;}
}
@media (max-width:600px){
  .launcher-joke{display:block;max-width:100%;margin-left:12px;margin-right:12px;font-size:13px;padding:8px 12px;}
}
.launcher-grid{display:grid;grid-template-columns:repeat(4,190px);gap:22px;justify-content:center;}

/* ── En-tête d'un chantier : groupe de boutons d'action ──────────────────────
   Ils sont TROIS depuis l'ajout de « Visibilité client » (visibilité, envoi,
   ajout de photos), plus le sélecteur d'état. Sur téléphone, quatre éléments
   côte à côte déborderaient : ils passent donc en pleine largeur, empilés,
   plutôt que de pousser la page horizontalement. */
@media(max-width:700px){
  #rp-header > div:first-child > div:last-child{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px !important;
  }
  #rp-header > div:first-child > div:last-child > *{
    width:100%;
    min-width:0;
    font-size:12.5px;
    padding:9px 8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  /* Le sélecteur d'état occupe la ligne entière, au-dessus des trois boutons. */
  #rp-statut{grid-column:1/-1;}
}
@media(max-width:400px){
  #rp-header > div:first-child > div:last-child{grid-template-columns:minmax(0,1fr);}
}

/* ── Calendrier de demande de congés : 3 mois côte à côte ────────────────────
   minmax(0,1fr) et non 1fr : sans ce minimum à zéro, les colonnes refuseraient
   de descendre sous la largeur de leur contenu et déborderaient sur téléphone
   (même cause que le débordement corrigé sur le bandeau de semaine). */
.conges-mois-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.conges-mois{min-width:0;}
.conge-cal-day{transition:background .12s;}
.conge-cal-day:hover{background:#EEF3FA!important;}
@media(max-width:820px){
  .conges-mois-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
}
@media(max-width:560px){
  /* Sur téléphone : les 3 mois s'empilent, chacun en pleine largeur, avec des
     cases plus hautes pour rester tapables au doigt. */
  .conges-mois-grid{grid-template-columns:minmax(0,1fr);gap:18px;}
  .conge-cal-day{padding:9px 1px!important;font-size:14px!important;}
}

/* ── Regroupement des applications par domaine ───────────────────────────────
   Titre de section discret, aligné à gauche au-dessus de sa grille. */
.launcher-section{margin-bottom:34px;}
.launcher-section-title{
  font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:1px;text-align:left;
  margin:0 auto 14px;max-width:844px;padding:0 4px;
  display:flex;align-items:center;gap:12px;
}
.launcher-section-title::after{content:"";flex:1;height:1px;background:var(--line);}
@media(max-width:860px){
  .launcher-section-title{max-width:100%;padding:0 16px;}
  .launcher-section{margin-bottom:26px;}
}
.launcher-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:170px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;transition:transform .15s, box-shadow .15s, border-color .15s;position:relative;}
.launcher-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue);}
@media(max-width:860px){
.launcher-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:0 16px;}
.launcher-inner{max-width:100%;}
.launcher-tile{height:150px;}
/* Centrer la derniere tuile si nombre impair */
.launcher-tile:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 7px);margin:0 auto;}
main{padding:16px 12px 60px!important;max-width:100%!important;}
.card{border-radius:8px;}
}
@media(max-width:400px){.launcher-grid{gap:10px;padding:0 12px;}.launcher-tile{height:130px;gap:10px;}}

/* ── Corrections mobile globales ── */
@media(max-width:640px){
  /* Eviter tout debordement */
  *{max-width:100%;box-sizing:border-box;}
  img,svg{max-width:100%;}

  /* Cards utilisateurs : empiler les elements */
  .card{padding:12px!important;overflow:hidden;}
  .card select,.card input[type=text],.card input[type=email]{max-width:100%;width:100%!important;}

  /* Pointage : stats en grille 2x2 */
  .week-stats-grid{grid-template-columns:repeat(2,1fr)!important;}

  /* Conteneur de tableau : défilement horizontal conservé (pare-feu anti-décalage de page) */
  .table-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  /* RETIRÉ le 19/07/2026 : #chantiers-table{min-width:500px!important} — vestige de
     l'affichage en tableau sur mobile. Déclaré APRÈS le bloc « fiches » et avec
     !important, il forçait la table à 500px de large sur un écran de 390px, ce qui
     débordait la fiche (champs coupés à droite, suffixe « € » rejeté à la ligne).
     Le rendu mobile est géré par le bloc « liste en FICHES » (max-width:700px). */
  #chantiers-table colgroup{display:none;}

  /* Header : eviter le wrap du logo */
  .brand-logo{height:26px!important;}
  .brandbar{gap:6px!important;}
}
/* Masquer brand-sub sur mobile */
@media(max-width:600px){
.brandbar{padding:calc(10px + env(safe-area-inset-top)) 16px 10px;gap:8px;}
.header-user{font-size:11px;gap:6px;}
.brand-sub{font-size:11px;padding-left:8px;}
/* Conteneur de tableau : garde le défilement horizontal, qui sert de pare-feu
   (un contenu trop large fait défiler CE bloc, jamais la page entière). */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Utilisateurs : eviter le debordement */
.user-card,.card{max-width:100%;overflow:hidden;}
/* NOTE : les anciennes règles « Suivi chantier » de ce bloc ont été RETIRÉES (19/07/2026).
   Elles dataient de l'affichage en tableau sur mobile et cassaient le nouvel affichage
   en fiches :
     - #chantiers-table{min-width:600px} forçait une largeur mini de 600px ;
     - #chantiers-table td:nth-child(n+10){display:none} masquait toutes les cellules à
       partir de la 10e, c'est-à-dire N° Facture, N° Commande, Date fact., Échéance,
       Cédée et le bouton Détail — d'où leur absence dans les fiches.
   Le rendu mobile est désormais géré par le bloc « liste en FICHES » (max-width:700px). */
}
.launcher-icon{width:64px;height:64px;color:var(--blue);border:2.5px solid var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:15px;box-sizing:border-box;background:var(--blue-light);}
.launcher-icon svg{width:100%;height:100%;}
.launcher-label{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink);text-transform:uppercase;letter-spacing:.4px;}
.launcher-tile-badge{position:absolute;top:12px;right:14px;}
.btn-back-apps{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--blue);background:var(--blue-light);border:none;border-radius:8px;padding:9px 16px;cursor:pointer;text-decoration:none;margin:14px 0 0 28px;}
.btn-back-apps:hover{background:#c5dcf3;}

/* ===== Fiche RH / Formations ===== */
.trainings-table{width:100%;border-collapse:collapse;font-size:13px;}
.trainings-table th, .trainings-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;}
.trainings-table thead th{background:var(--bg);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted);}
.training-completed-input, .training-expiry-input{border:1px solid var(--line);border-radius:5px;padding:4px 6px;font-size:12.5px;width:100%;}
.training-expiry-input.training-soon{border-color:#E8A33D;background:#FFF8EC;}
.training-expiry-input.training-expired{border-color:#D7263D;background:#FDECEA;color:#D7263D;font-weight:600;}
td.training-soon{background:#FFF8EC;color:#E8A33D;font-weight:600;}
td.training-expired{background:#FDECEA;color:#D7263D;font-weight:600;}

.modal-close-btn{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;font-weight:400;}
.modal-close-btn:hover{color:var(--ink);}

/* ─────────────────────────────────────────────────────────────────────────
   Retour photo chantier — déblocage du défilement (surtout sur mobile)

   CAUSE : la fiche est une pile d'éléments flex en colonne
     section > #rp-content > #rp-tab-* > (#rp-messages | #rp-doclist)
   dont chaque niveau porte flex:1 et overflow:hidden/auto.
   Or un élément flex vaut min-height:auto par défaut : il REFUSE de
   descendre sous la hauteur de son contenu. Dès qu'un chantier a beaucoup
   de photos ou de documents, le panneau d'onglet grandit jusqu'à la taille
   de son contenu, dépasse la hauteur fixe de .rp-wrap, et se fait couper par
   overflow:hidden. Le overflow-y:auto ne s'active jamais puisque l'élément
   fait exactement la taille de son contenu : d'où le bas inatteignable, le
   bouton coupé et la zone grise morte.

   CORRECTIF : min-height:0 à chaque maillon, pour que la contrainte de
   hauteur redescende jusqu'au conteneur défilant, qui reprend son rôle.
   ───────────────────────────────────────────────────────────────────────── */
.rp-wrap > section,
.rp-wrap #rp-content,
.rp-wrap #rp-tab-discussion,
.rp-wrap #rp-tab-documents,
.rp-wrap #rp-tab-photos,
.rp-wrap #rp-tab-docadmin,
.rp-wrap #rp-messages,
.rp-wrap #rp-doclist,
.rp-wrap #rp-chantier-list{min-height:0;}

/* Le panneau Photos défile lui-même : il lui faut aussi de quoi respirer
   sous le dernier rang de la galerie (barre de navigation du téléphone). */
.rp-wrap #rp-tab-photos,
.rp-wrap #rp-tab-docadmin{-webkit-overflow-scrolling:touch;}
@media (max-width:760px){
  .rp-wrap #rp-tab-photos,
  .rp-wrap #rp-doclist{padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;}
}

/* Garde-fou : la hauteur plancher de 520px ne doit jamais dépasser le
   viewport réellement visible, sinon la fiche redevient plus haute que
   l'écran (cas du téléphone en paysage). */
@supports (height:100dvh){
  .rp-wrap{min-height:min(520px, calc(100dvh - 60px));}
}


/* ══════════════════════════════════════════════════════════════════════════
   ▼▼▼ EN-TÊTE COMPACT — FICHE CHANTIER MOBILE (piste 1) ▼▼▼
   RETOUR ARRIÈRE : supprimer tout ce qui se trouve entre ce repère et le
   repère ▲▲▲ plus bas, et remettre RP_HIST_REPLI_TOTAL à false dans index.php.
   Rien d'autre n'est à défaire : les libellés courts des boutons sont masqués
   par un style en ligne, et les règles d'origine (2 colonnes à 700px, 1 colonne
   à 400px) sont intactes plus haut dans ce fichier — elles reprennent la main
   d'elles-mêmes.

   ÉTAT D'AVANT, pour mémoire :
     - groupe d'actions en grille 2 colonnes sous 700px, 1 colonne sous 400px ;
     - sélecteur d'état sur toute la largeur (grid-column:1/-1) ;
     - boutons à padding 9px/8px, sans hauteur minimale ;
     - libellés longs partout ;
     - historique d'envoi déplié sur ses 3 dernières lignes.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* Les trois actions tiennent sur UNE ligne, le sélecteur d'état garde la sienne. */
  #rp-header > div:first-child > div:last-child{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #rp-statut{grid-column:1/-1 !important;}

  /* Hauteur tactile confortable : 44px, seuil recommandé pour le doigt.
     Les couleurs des boutons ne sont pas touchées ici. */
  #rp-header > div:first-child > div:last-child > .btn{
    min-height:44px;
    padding:8px 6px !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    line-height:1.15;
  }
  #rp-statut{min-height:44px;}

  /* Libellés courts, sinon trois boutons côte à côte seraient tronqués. */
  #rp-header .rp-btn-long{display:none !important;}
  #rp-header .rp-btn-court{display:inline !important;}
}
/* Sous 400px on RESTE à trois colonnes : c'est tout l'intérêt de la piste 1.
   Cette règle neutralise le passage à une colonne défini plus haut. */
@media(max-width:400px){
  #rp-header > div:first-child > div:last-child{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  #rp-header > div:first-child > div:last-child > .btn{font-size:12px !important;}
}
/* ▲▲▲ FIN EN-TÊTE COMPACT — FICHE CHANTIER MOBILE ▲▲▲ */


/* ── Énigme du jour : réponse masquée derrière un élément à toucher ──────────
   <details>/<summary> natif : aucun JavaScript, et l'état repart fermé à chaque
   chargement de page. La zone tactile fait 44px de haut, seuil confortable au
   doigt, puisque l'accueil est surtout consulté sur téléphone. */
.launcher-enigme{margin-top:6px;}
.launcher-enigme > summary{
  display:flex;align-items:center;gap:6px;
  min-height:44px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:700;color:var(--brand,#004590);
  user-select:none;
}
.launcher-enigme > summary::-webkit-details-marker{display:none;}
.launcher-enigme > summary::before{content:'▸';font-weight:400;}
.launcher-enigme[open] > summary::before{content:'▾';}
.launcher-enigme > summary:hover{text-decoration:underline;}
.launcher-enigme-rep{
  padding:8px 10px;margin-bottom:2px;
  background:var(--bg,#f6f7f9);border-radius:6px;
  font-size:13.5px;font-weight:600;color:var(--ink);
}

/* ── Planning : libellé de semaine à largeur FIXE ────────────────────────────
   Sans largeur fixe, la largeur du texte (« S30 — 20 juillet 2026 → 25 juillet »)
   change d'une semaine à l'autre selon la longueur du mois, ce qui déplace les
   flèches ‹ › de navigation. Largeur figée + texte centré = flèches immobiles.
   L'ellipse n'est qu'un garde-fou pour un libellé exceptionnellement long. */
.plan-week-label{
  display:inline-block;
  width:300px;
  text-align:center;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}
@media(max-width:700px){
  .plan-week-label{ width:190px; font-size:12.5px; }
}