/* X-TELIA — tokens (Figma Fondation) appliqués. Text-first, sans icônes ni emoji. */
:root{
  --p50:#F6FCFF; --p100:#D7E1EF; --soft:#EEF3FB;
  --p500:#4371C8; --p600:#345696; --p700:#192E50;
  --ink:#171717; --ink2:#404040; --ink3:#737373;
  --page:#FAFAFA; --card:#FFFFFF; --inset:#F5F5F5; --border:#E5E5E5; --border2:#D4D4D4;
  --green:#10B981; --green-d:#047857; --orange:#F59E0B; --orange-d:#B45309;
  --red:#EF4444; --red-d:#DC2626;
  --r-btn:6px; --r-card:10px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--page);
  font-size:16px; line-height:1.4; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.hidden{display:none !important}

/* Top bar */
.topbar{background:var(--p700); color:#fff}
.topbar-in{display:flex; align-items:center; height:56px}
.brand{display:flex; align-items:center; gap:10px}
/* logo CDEDQ officiel, version blanche transparente (LOGO_CDEDQ_white_transparent) :
   posé directement sur le bandeau bleu marine, sans pastille */
.brand-logo{display:block; height:34px}
.wordmark{font-family:Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:0.02em; font-size:18px}
.brand-sep{color:var(--p100)}
.brand-sub{color:var(--p100); font-size:14px; font-weight:500}

/* Cards */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  padding:24px; margin:24px 0; box-shadow:0 1px 2px rgba(16,26,44,.04);
}
/* Le récap porte un large tableau (12 colonnes) : on l'autorise à déborder le gabarit
   étroit (1080) jusqu'à 96 % de la fenêtre pour tout montrer sur grand écran, sans
   jamais dépasser la fenêtre (au-delà, la barre de défilement du tableau prend le relais). */
#step-recap{width:min(1480px, 96vw); margin-left:50%; transform:translateX(-50%)}
.h2{font-size:20px; font-weight:600; line-height:1.2; margin:0 0 4px; color:var(--ink)}
h1.h2{font-size:24px}
.muted{color:var(--ink3); font-size:14px; margin:0 0 16px}
.note{color:var(--ink2); font-size:13px; background:var(--soft); border:1px solid var(--p100);
  border-radius:var(--r-btn); padding:10px 12px; margin:16px 0 0}

/* Form row */
.row{display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:13px; font-weight:500; color:var(--ink2)}
select,input[type=number],input[type=text]{
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:#fff; border:1px solid var(--border2); border-radius:var(--r-btn);
  padding:9px 12px; min-width:180px; transition:border-color .12s var(--ease),box-shadow .12s var(--ease);
}
select:focus,input:focus{outline:none; border-color:var(--p500); box-shadow:0 0 0 3px rgba(67,113,200,.18)}

/* Buttons */
.btn{
  font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer;
  border-radius:var(--r-btn); padding:10px 18px; border:1px solid transparent;
  transition:background .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease);
  text-decoration:none; display:inline-block;
}
.btn-primary{background:var(--p500); color:#fff}
.btn-primary:hover{background:var(--p600)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff; color:var(--p600); border-color:var(--border2); margin-left:10px}
.btn-ghost:hover{background:var(--inset)}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* Sites détectés (scan) */
.scan-tools{margin-left:10px; white-space:nowrap}
.scan-row{display:flex; align-items:baseline; gap:12px; padding:10px 2px;
  border-bottom:1px solid var(--border); cursor:pointer}
.scan-row:last-child{border-bottom:none}
.scan-row input[type=checkbox]{accent-color:var(--p500); width:16px; height:16px;
  flex:none; position:relative; top:2px; cursor:pointer}
.scan-name{font-weight:600; color:var(--ink); min-width:220px}
.scan-meta{color:var(--ink3); font-size:13px}
.scan-off{opacity:.55; cursor:default}
.scan-off .scan-name{font-weight:500}

/* Saisie 3 débits */
.fiche3{border:1px solid var(--border); border-radius:var(--r-card); padding:14px 16px; margin:14px 0; background:var(--card)}
.fiche3-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.fiche3-nom{font-weight:600; font-size:16px; color:var(--ink)}
.fiche3-tag{font-size:11px; font-weight:600; color:var(--p600); background:var(--soft);
  border:1px solid var(--p100); border-radius:999px; padding:2px 8px; margin-left:8px;
  text-transform:uppercase; letter-spacing:0.02em; vertical-align:middle}
.fiche3-eq{font-size:13px; color:var(--ink3); display:inline-flex; align-items:baseline; gap:8px}
.fiche3-eq b{font-family:var(--mono); font-variant-numeric:tabular-nums}
.fiche3-tbl td{padding:6px 8px}
.pal-lbl{font-weight:500; color:var(--ink2); white-space:nowrap}
/* étiquette de ligne « 3 débits » (site à triple lecture, cartons TEST) */
.row-tag{display:block; width:fit-content; margin-top:3px; font-size:10px; font-weight:600;
  color:var(--green-d); background:#E7F7F0; border:1px solid #A7E8CE; border-radius:999px;
  padding:1px 7px; text-transform:uppercase; letter-spacing:0.02em; cursor:help}

/* palier pré-rempli depuis les photos (cartons TEST n) */
.pal-src{font-size:10px; font-weight:600; color:var(--green-d); background:#E7F7F0;
  border:1px solid #A7E8CE; border-radius:999px; padding:1px 6px; margin-left:6px;
  text-transform:uppercase; letter-spacing:0.02em; vertical-align:middle; cursor:help}
.fiche3-tbl input[type=number]{width:92px; text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; padding:6px 8px}
.f-ec{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500}
.ec-green,.f-eq.ec-green{color:var(--green-d)}
.ec-orange,.f-eq.ec-orange{color:var(--orange-d)}
.ec-red,.f-eq.ec-red{color:var(--red-d)}
.ec-neutral,.f-eq.ec-neutral{color:var(--ink3)}

/* Loading */
.loading{display:flex; align-items:center; gap:14px; color:var(--ink2); font-size:15px}
.spinner{width:28px; height:28px; border:3px solid var(--p100); border-top-color:var(--p500);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block; flex:none}
/* variante compacte, en ligne dans un bouton (ex. « relire ») */
.spinner-sm{width:12px; height:12px; border-width:2px; vertical-align:-2px; margin-right:5px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Recap table */
.recap-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px}
/* Dégradé « il y a plus de colonnes à droite → défiler » : visible seulement quand le
   tableau déborde ET n'est pas défilé jusqu'au bout (barre masquée sur macOS). */
.table-frame{position:relative}
.table-frame::after{content:""; position:absolute; top:0; right:0; bottom:12px; width:44px;
  background:linear-gradient(to right, rgba(255,255,255,0), var(--card));
  pointer-events:none; opacity:0; transition:opacity .15s var(--ease)}
.table-frame.scrollable::after{opacity:1}
/* Tableau large (12 colonnes) : scroll horizontal AVEC barre toujours visible — sur
   macOS la barre est masquée par défaut, d'où l'impression de contenu « tronqué ». */
.table-scroll{overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--border2) var(--inset)}
.table-scroll::-webkit-scrollbar{height:10px}
.table-scroll::-webkit-scrollbar-thumb{background:var(--border2); border-radius:5px}
.table-scroll::-webkit-scrollbar-track{background:var(--inset); border-radius:5px}
table.recap{width:100%; border-collapse:collapse; font-size:14px}
.recap th{
  text-align:left; font-weight:600; color:var(--ink3); font-size:12px; text-transform:uppercase;
  letter-spacing:0.02em; padding:8px 10px; border-bottom:2px solid var(--border); vertical-align:bottom;
}
.recap th.num{text-align:right}
.recap th.grp{text-align:center; border-bottom:1px solid var(--border); padding-bottom:6px}
.recap th.grp-c{color:var(--p600)}
.recap th.grp-t{color:var(--ink2)}
.recap th.sub{font-size:11px; padding-top:6px; font-weight:500}
.recap td.delta{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.recap td.delta .dv{display:block}
/* unité lue sur l'afficheur (m³/litres) : visible et cliquable pour corriger */
.recap td.delta .du{display:block; background:none; border:none; padding:0; margin:1px auto 0;
  font-family:var(--sans); font-weight:500; font-size:11px; color:var(--ink3); cursor:pointer}
.recap td.delta .du:hover{color:var(--p600); text-decoration:underline dotted}
.recap td.delta .dw{display:block; font-family:var(--sans); font-weight:500; font-size:11px; margin-top:2px; cursor:help}
.recap td.delta .dw-warn{color:var(--orange-d)}
.recap td.delta .dw-ok{color:var(--green-d)}
.recap td.muted-cell{color:var(--border2); text-align:right}
.th-unit{font-family:var(--mono); font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink3)}
.recap td{padding:8px 7px; border-bottom:1px solid var(--border); vertical-align:middle}
.recap tr:last-child td{border-bottom:none}
.site-name{font-weight:600; color:var(--ink)}
/* Site à 3 débits : en-tête + 3 sous-lignes de paliers (une lecture chacune) */
.recap tr.site-3d-head>td{border-bottom:none; padding-top:12px; background:var(--p50)}
.recap tr.site-3d-head .p3-note{color:var(--ink3); font-size:12px; font-style:italic; text-align:center}
/* rappel d'unité des colonnes réutilisées par les paliers (durée / heures) */
.recap tr.site-3d-head .p3-unit{color:var(--ink3); font-size:11px; text-align:right}
/* « + 3 débits » : ouvrir la saisie manuelle des 3 paliers sur n'importe quel site */
.recap .add-pal{margin-left:6px; color:var(--ink3); font-size:12px}
.recap .add-pal:hover{color:var(--p600)}
.recap tr.palier-sub input.in-heures{width:52px}
/* champ DÉBIT (m³/d) sous le volume, dans la même cellule */
.recap tr.palier-sub td.delta input[class$="debit"]{width:78px; margin-top:3px;
  font-weight:400; color:var(--ink2)}
.recap tr.palier-sub .pal-heures{white-space:nowrap}
.recap tr.palier-sub .pal-unit{margin-left:4px; color:var(--ink3); font-size:11px}
.recap tr.palier-sub>td{background:var(--p50); border-bottom-color:var(--p100)}
.recap tr.palier-sub .pal-name{font-weight:500; color:var(--p600); padding-left:22px; white-space:nowrap}
.recap tr.palier-sub.palier-vide .pal-name{color:var(--ink3)}
/* dernier palier d'un site : referme le bloc visuellement */
.recap tr.palier-sub:has(+ tr.site-3d-head)>td,
.recap tr.palier-sub:last-child>td{border-bottom:2px solid var(--p100)}
.recap td.num{text-align:right}
.recap input[type=number]{min-width:0; width:78px; text-align:right; font-family:var(--mono);
  font-variant-numeric:tabular-nums; padding:6px 6px}
/* lectures brutes (totalisateurs) : jusqu'à 11-12 chiffres → plus larges */
.recap input.in-cd,.recap input.in-cf,.recap input.in-td,.recap input.in-tf{width:118px}
.recap input[type=text]{min-width:0; width:104px; padding:6px 7px}
.ecart{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap}
.recap td.num.ecart{padding-left:16px}
/* écart de l'an dernier : repère de contexte, plus discret que l'écart courant */
.recap td.ecart-n1{font-family:var(--mono); font-variant-numeric:tabular-nums;
  color:var(--ink3); white-space:nowrap; cursor:help}

/* Badges (pill, texte) */
.badge{display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  white-space:nowrap; letter-spacing:0}
.badge-green{background:#E7F7F0; color:var(--green-d); border:1px solid #A7E8CE}
.badge-orange{background:#FEF3E2; color:var(--orange-d); border:1px solid #F7D9A8}
.badge-red{background:#FDECEC; color:var(--red-d); border:1px solid #F6C6C6}
.badge-neutral{background:var(--inset); color:var(--ink2); border:1px solid var(--border)}
/* « à vérifier » : lecture douteuse (≠ verdict de conformité). Bordure tiretée pour se
   distinguer nettement du « à surveiller » orange plein. */
.badge-warn{background:#FFF7ED; color:#9A3412; border:1px dashed #FB923C}
.ec-warn,.f-eq.ec-warn{color:#9A3412}
.src-vision{color:var(--p600); font-weight:500; font-size:13px}
.src-terrain{color:var(--orange-d); font-weight:500; font-size:13px}

/* Détails lectures */
.link-btn{background:none; border:none; color:var(--p600); font-size:13px; font-weight:500;
  cursor:pointer; padding:2px 4px; font-family:var(--sans)}
.link-btn:hover{text-decoration:underline}
.readings-row td{background:var(--inset); padding:0}
.readings{padding:12px 14px; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px}
/* colonnes du tiroir alignées sur le tableau : compteur à gauche, témoin à droite */
.rcol{display:flex; flex-direction:column; gap:8px; min-width:0}
.rcol-c{grid-column:1}
.rcol-t{grid-column:2}
.rcol-head{font-size:11px; font-weight:600; letter-spacing:.4px; text-transform:uppercase}
.rcol-head-c{color:var(--p600)}
.rcol-head-t{color:var(--ink2)}
.reading{font-size:13px; color:var(--ink2); display:flex; justify-content:space-between; gap:12px;
  border-bottom:1px dotted var(--border2); padding-bottom:4px}
.reading .r-tot{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink)}
.reading .r-meta{color:var(--ink3); font-size:12px}
.conf-basse{color:var(--red-d)}
/* comparaison au rapport existant (xlsm de la même année) */
.rapport-line{border-left:3px solid var(--p500); padding-left:8px;
  border-bottom:1px solid var(--p100); grid-column:1 / -1}
.rapport-line .r-tot{color:var(--p600)}
/* paliers 3 débits appariés par les cartons TEST n */
.palier-line{border-left:3px solid var(--green); padding-left:8px; grid-column:1 / -1}
.palier-line .r-tot{color:var(--green-d)}

/* Visionneuse de photo (par-dessus la page ; clic ou Échap pour fermer) */
.photo-overlay{position:fixed; inset:0; z-index:60; background:rgba(23,23,23,.85);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:28px; cursor:zoom-out}
.photo-overlay img{max-width:94vw; max-height:84vh; border-radius:8px; background:#fff;
  box-shadow:0 8px 40px rgba(0,0,0,.5)}
.photo-caption{color:#F5F5F5; font-size:13px; text-align:center; max-width:90vw}

.actions{display:flex; align-items:center; gap:14px; margin-top:20px}

/* Choix du rapport (clients multi-rapports : eaux usées / usine / eau potable) */
.sys-row{display:flex; align-items:center; gap:10px; margin:0 0 4px}
.sys-row .sys-lbl{font-size:14px; font-weight:500; color:var(--ink2); white-space:nowrap}
.sys-row select{min-width:150px; padding:8px 10px}
.actions .sys-row{margin:0}
#gen-hint{font-size:13px}
.err{color:var(--red-d); background:#FDECEC; border:1px solid #F6C6C6; border-radius:var(--r-btn);
  padding:12px 14px; font-size:14px}

/* --- Téléversement d'un dossier client (app hébergée, sans accès au drive) --- */
.upload{margin-top:18px; border-top:1px solid var(--border); padding-top:14px}
.upload>summary{
  cursor:pointer; font-size:13px; font-weight:500; color:var(--ink3);
  list-style:none; width:fit-content; transition:color .15s var(--ease);
}
.upload>summary::-webkit-details-marker{display:none}
.upload>summary::before{content:"⌄ "; display:inline-block; transition:transform .15s var(--ease)}
.upload[open]>summary::before{transform:rotate(180deg) translateY(2px)}
.upload>summary:hover{color:var(--p600)}
.upload-in{padding-top:12px}
.upload-in .muted{max-width:74ch}
.upload-in code{font-family:var(--mono); font-size:12px; background:var(--inset);
  padding:1px 5px; border-radius:4px}
.up-t{margin:14px 0 6px; font-size:13px; font-weight:600; color:var(--ink2)}
.up-row{display:flex; gap:9px; align-items:baseline; font-size:13px; padding:3px 0}
.up-row input{margin:0; flex:none; position:relative; top:2px}
.up-gab{margin:10px 0 0; font-size:12.5px}
.up-tot{margin:8px 0 0; font-size:13px; font-weight:600; color:var(--p700)}
.up-bar{height:4px; border-radius:2px; background:var(--soft); overflow:hidden; margin-top:12px}
.up-bar>span{display:block; height:100%; width:0; background:var(--p500);
  transition:width .2s var(--ease)}

/* --- Connexion --- */
.deco{margin-left:auto; color:var(--p100); font-size:13px; font-weight:500;
  text-decoration:none; transition:color .15s var(--ease)}
.deco:hover{color:#fff}
.login-card{max-width:420px; margin-top:64px}
.login-form{display:flex; gap:12px; align-items:flex-end; margin-top:18px}
.login-form .field{flex:1}
.login-form input{width:100%}
.login-err{margin-top:14px}

/* Mini-roulette en ligne — feedback pendant le chargement des données d'un client */
.mini-spin{display:inline-block; width:13px; height:13px; vertical-align:-2px;
  margin-right:6px; border:2px solid var(--border2); border-top-color:var(--p500);
  border-radius:50%; animation:spin .7s linear infinite}

/* second sélecteur — gabarit de l'année précédente (quand on choisit l'année seule) */
.up-n1{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
  padding:12px 14px; background:var(--soft); border:1px solid var(--p100); border-radius:var(--r-btn)}
.up-n1 .muted{margin:0}