/* FICHIER : serveur/public/style.css
   ROLE    : espace client de jalon-pro (caméras, photos, prise de vue, énergie, terminal, réglages,
             compte, connexion), fond clair, charte du site : titres Inter Tight 800, texte Inter,
             repères JetBrains Mono, nuit #0A1622, marine #003566, accent #38BDF8 (bleu Chrono).
   STATUT  : 30/10/2026, vd1.3.24 : bande de pause de la page Prise de vue (.pause-cam) ;
             29/10/2026, vd1.3.21 : la photo ne part plus en glisser-déposer (-webkit-user-drag) ;
             28/10/2026, vd1.3.20 : l'image d'abord (bande unique de 56 px avec la caméra et ses onglets, photo à toute la hauteur,
             mesures en lignes à côté, Détails, blocs sous la photo, zoom) ;
             27/10/2026, vd1.3.19 : page Recaler la visée (.pv) ; vd1.3.18 : onglet Films ; vd1.3.17 : tuiles cliquables et vue agrandie ; vd1.3.15 : légendes dehors et boîtier, carte du lieu ; 25/10/2026, vd1.3.9 : accent au bleu Chrono #38BDF8 (JO), texte nuit sur le bleu, chiffres du calendrier en marine ;
             vd1.3.6 : écrans denses (tuiles, courbes, comparaison avant / après, fiche, calendrier, liste en tableau) ; en-tête d'une caméra sur une ligne ;
             vd1.3.5 : Photos : jours au-dessus de la photo ; journal regroupé ; Compte à gauche ; Sur place en écran de télécommande (image et boutons d'abord,
             état en six cases, journal court, deux colonnes au bureau) ; vd1.3.1 : revue UX : Sur place sans débordement au téléphone, Enregistrer
             sous le formulaire au téléphone, seuils sur une ligne, cibles de 44 px, liens soulignés,
             bouton désactivé, image ancienne pâlie ; vd1.3 : page Sur place, connexion d'un téléphone ;
             24/10/2026, v2.1 : passe Impeccable (focus clavier, sélection, aide avant un bouton, onglets
             qui défilent sur téléphone, plus de bordure latérale de couleur) ; v2 : maquettes validées par JO le 24/10/2026
   NE PAS TOUCHER SI : on veut passer l'espace client en sombre ; JO préfère le fond blanc. */

@font-face { font-family: "Inter Tight"; font-weight: 700 800; font-display: swap; src: url(/polices/intertight.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/polices/inter-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/polices/inter-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/polices/inter-600.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/polices/jetbrainsmono-500.woff2) format("woff2"); }

:root {
  --nuit: #0A1622; --marine: #003566; --accent: #38BDF8; --gris: #F2F5F8; --trait: #D5DEE7; --texte: #4A5663;
  --vert: #15803d; --orange: #b45309; --rouge: #b91c1c; --rouge-fond: #fee2e2;
  --titre: "Inter Tight", Inter, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #fff; color: var(--nuit); font: 400 16px/26px Inter, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(56, 189, 248, .22); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input:not([type=checkbox]):not([type=radio]):focus-visible, select:focus-visible { outline: 0; }
.int { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.mono { font: 500 13px/20px var(--mono); letter-spacing: .04em; }
.doux { color: var(--texte); }
.ok { color: var(--vert); }
.attention { color: var(--orange); }
.alerte, .rouge { color: var(--rouge); }
.point::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }

/* Bande du haut */
.bande { border-bottom: 1px solid var(--trait); background: #fff; }
.bande .int { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.signe { display: flex; align-items: center; gap: 10px; font: 700 19px var(--titre); white-space: nowrap; }
.bande nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.bande nav a { padding: 20px 0; }
.bande nav a.ici { box-shadow: inset 0 -2px 0 var(--accent); }
.bande nav .compte .court { display: none; }
.bande nav .compte { color: var(--texte); }
footer { padding: 40px 0 32px; color: var(--texte); font: 500 12px var(--mono); text-align: center; }

/* Titres et en-têtes */
h1 { margin: 0; font: 800 44px/1 var(--titre); letter-spacing: -.025em; }
h2 { margin: 0 0 6px; font: 700 22px/1.2 var(--titre); letter-spacing: -.01em; }
.surtitre { margin: 0 0 12px; font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marine); }
.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; padding: 48px 0 32px; flex-wrap: wrap; }
.tete.serre { padding: 8px 0 0; }
.fil { margin: 0; padding-top: 28px; color: var(--texte); text-transform: uppercase; }
.fil a { color: var(--marine); }
.onglets { display: flex; gap: 36px; border-bottom: 1px solid var(--trait); margin-top: 28px; font-weight: 500; overflow-x: auto; white-space: nowrap; }
.onglets a { padding: 0 0 14px; color: var(--texte); }
.onglets a.ici { color: var(--nuit); box-shadow: inset 0 -2px 0 var(--accent); }

/* Boutons */
button, .bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
                  border: 0; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--trait); color: var(--nuit);
                  font: 600 15px Inter, sans-serif; cursor: pointer; white-space: nowrap; }
button:hover, .bouton:hover { box-shadow: inset 0 0 0 1.5px var(--texte); }
.principal, button.principal { background: var(--accent); box-shadow: none; }
.principal:hover { filter: brightness(1.06); box-shadow: none; }
button:disabled, button:disabled:hover { opacity: .5; cursor: default; box-shadow: inset 0 0 0 1.5px var(--trait); }
button.principal:disabled { box-shadow: none; filter: none; }
button.lien { min-height: 44px; padding: 0 4px; margin-left: -4px; background: none; box-shadow: none; color: var(--marine); font-weight: 500; }
button.lien.rouge { color: var(--rouge); }
.enligne { display: inline; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.actions .ecart { margin-right: auto; }

/* Messages */
.message { margin: 24px 0 0; padding: 12px 16px; background: var(--gris); color: var(--nuit); }
.erreur { margin: 0 0 20px; padding: 12px 16px; background: var(--rouge-fond); color: var(--rouge); }
.aide { margin: 8px 0 0; font-size: 14px; line-height: 21px; color: var(--texte); }
/* Liens dans le texte : marine et soulignés, pour qu'on les voie comme des liens. */
.etroite p a, .aide a, .vide a, .etapes a { color: var(--marine); text-decoration: underline; text-underline-offset: 3px; }
.etroite p a { display: inline-block; padding: 10px 0; }
.aide + button, .aide + .bouton { margin-top: 24px; }
.vide { color: var(--texte); }
.code { margin: 12px 0; padding: 14px 16px; background: var(--gris); font: 500 20px var(--mono); letter-spacing: .06em; word-break: break-all; user-select: all; }
.code.petit { font-size: 12px; letter-spacing: 0; }

/* Formulaires */
label { display: block; margin-bottom: 18px; font-size: 14px; color: var(--texte); }
input, select { display: block; width: 100%; height: 46px; margin-top: 6px; padding: 0 14px; font: 400 16px Inter, sans-serif; color: var(--nuit);
                background: #fff; border: 1.5px solid var(--trait); border-radius: 0; }
input:not([type=checkbox]):not([type=radio]):focus, select:focus { outline: 0; border-color: var(--nuit); }
input:disabled { background: var(--gris); color: var(--texte); }
label.case { display: flex; align-items: center; gap: 12px; color: var(--nuit); font-size: 16px; }
label.case input { width: 20px; height: 20px; margin: 0; accent-color: var(--nuit); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 20px; }
.champs { display: flex; gap: 20px; flex-wrap: wrap; }
.champs label { min-width: 150px; }

/* Pages simples (connexion, compte, nouvelle caméra) */
.etroite { max-width: 520px; margin: 0 auto; padding: 56px 0 24px; }
.etroite h1 { margin-bottom: 28px; }
/* Page Compte : la colonne étroite, mais à gauche sous le titre, comme les autres pages. */
.etroite.gauche { margin: 0; padding-top: 0; }
.etroite h2 { margin-top: 28px; }

/* Écrans denses (onglet Photos, liste des caméras) : des valeurs et des petites courbes plutôt que
   des phrases ; grilles en minmax(0, 1fr) pour que rien ne déborde au téléphone. */
.int.large { max-width: 1600px; }
.entete { display: flex; align-items: center; gap: 6px 18px; padding: 22px 0 0; flex-wrap: wrap; }
.entete .fil { padding: 0; }
.entete h1 { font-size: 30px; }
.entete.liste { justify-content: space-between; padding-bottom: 4px; }
.onglets { margin-top: 14px; }
.tuiles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 16px 0; border: 1px solid var(--trait); }
.tuile { min-width: 0; padding: 10px 12px 9px; border-right: 1px solid var(--trait); }
.tuile:last-child { border-right: 0; }
.tuile.large { grid-column: span 2; }
.tuile .lib { font: 500 11px/15px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
.tuile .val { margin-top: 2px; font: 700 23px/30px var(--titre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuile .val small { font: 500 13px var(--titre); color: var(--texte); }
.tuile .sous { font: 500 11.5px/16px var(--mono); color: var(--texte); }
.tuile .sous a, .legende-c a { color: var(--marine); text-decoration: underline; text-underline-offset: 2px; }
.courbe { display: block; width: 100%; height: 30px; margin-top: 6px; }
.tuile.large .courbe { height: 64px; }
.axe { display: flex; justify-content: space-between; font: 500 10px/14px var(--mono); color: #6B7785; }
.legende-c { display: flex; flex-wrap: wrap; gap: 0 12px; margin: 2px 0 0; font: 500 10.5px/15px var(--mono); color: var(--texte); }
.lg { display: inline-block; width: 11px; height: 8px; margin-right: 5px; vertical-align: 0; }
.lg.bat { height: 0; border-top: 2px solid var(--marine); vertical-align: 3px; }
.lg.sol { background: rgba(252, 211, 77, .6); border-top: 1px solid #D97706; }
.lg.recue { background: var(--accent); }
.lg.prevue { border: 1px solid #B9C6D3; }
.lg.ext { height: 0; border-top: 2px solid var(--accent); vertical-align: 3px; }
.lg.boit { height: 0; border-top: 2px solid #D97706; vertical-align: 3px; }
.carte { position: relative; overflow: hidden; margin: 0 0 4px; background: #DCE3EA; border: 1px solid var(--trait); }
.carte-in { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.carte-in img { position: absolute; width: 256px; height: 256px; max-width: none; }
.carte-in svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.resume { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.resume .tuile .sous { overflow-wrap: anywhere; }

/* Onglet Photos : la photo et sa réglette, la colonne d'à côté */
.corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-bottom: 8px; }
.corps > * { min-width: 0; }
.scene { position: relative; overflow: hidden; width: 100%; aspect-ratio: var(--r); max-height: calc(100vh - 120px); max-height: calc(100svh - 120px); background: var(--nuit); user-select: none; touch-action: pan-y; }
.scene > img, .rideau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.scene[data-mode=photo] { cursor: zoom-in; }
.rideau { position: absolute; inset: 0; display: none; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.scene[data-mode=avant] { cursor: ew-resize; touch-action: none; }
.scene[data-mode=avant] .rideau { display: block; }
.scene[data-mode=avant] .rideau::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; }
/* Côte à côte : l'avant à gauche, l'après à droite, chacun dans sa moitié. */
.scene[data-mode=cote] { aspect-ratio: calc(var(--r) * 2); }
.scene[data-mode=cote] .rideau { display: block; clip-path: none; right: 50%; }
.scene[data-mode=cote] > img.apres { left: 50%; width: 50%; }
.scene[data-mode=cote] .rideau::after { content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px; background: var(--nuit); }
.scene .poignee { position: absolute; top: 50%; left: var(--pos); display: none; width: 40px; min-height: 40px; padding: 0; transform: translate(-50%, -50%);
                  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(10, 22, 34, .4); color: var(--nuit); cursor: ew-resize; }
.scene[data-mode=avant] .poignee { display: inline-flex; }
.etiq { position: absolute; top: 58px; display: none; padding: 3px 8px; border-radius: 4px; background: rgba(10, 22, 34, .72); color: #fff; font: 500 12px var(--mono); }
.etiq.g { left: 10px; }
.etiq.d { right: 10px; }
.scene:not([data-mode=photo]) .etiq { display: block; }
.barre-h, .barre-b { position: absolute; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.barre-h { top: 10px; }
.barre-b { bottom: 10px; flex-wrap: wrap; }
.seg, .ic, .pilule { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(10, 22, 34, .74); color: #fff; }
.scene button, .scene .ic a, .pilule a { min-height: 36px; padding: 0 12px; border-radius: 6px; background: none; box-shadow: none; color: #fff; font: 500 13.5px Inter, sans-serif; display: inline-flex; align-items: center; justify-content: center; }
.scene button:hover, .scene .ic a:hover, .pilule a:hover { box-shadow: none; background: rgba(255, 255, 255, .14); }
.seg button[aria-pressed=true] { background: #fff; color: var(--nuit); }
.ic a, .ic button, .pilule button, .pilule a { width: 36px; padding: 0; }
.scene button:disabled, .pilule a.eteinte { opacity: .3; pointer-events: none; box-shadow: none; }
.pilule b { padding: 0 8px; font: 500 13px var(--mono); white-space: nowrap; }
.barre-b { justify-content: flex-end; }
/* Réglette des photos, au pied de la photo : un trait par photo (dessiné dans la toile), un écart entre deux jours.
   Le trait choisi se lève avec ses voisins et porte la date et l'heure ; orange = photo affichée,
   blanc = photo d'avant (Avant / après, Côte à côte). */
.reglette { padding: 6px 0 2px; background: var(--nuit); }
.rg-piste { position: relative; height: 84px; cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.rg-piste canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rg-etiq, .rg-bulle { position: absolute; top: 0; padding: 1px 7px; border-radius: 4px; font: 600 11px/18px var(--mono); white-space: nowrap; }
.rg-etiq { z-index: 2; background: var(--accent); color: var(--nuit); outline: none; cursor: grab; }
.rg-etiq.av { z-index: 1; background: #fff; color: var(--nuit); }
.reglette[data-mode=photo] .rg-etiq.av { display: none; }
.rg-etiq:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rg-etiq.av:focus-visible { outline-color: var(--accent); }
.rg-bulle { z-index: 3; background: rgba(255, 255, 255, .92); color: var(--nuit); font-weight: 500; pointer-events: none; }
.lateral { display: flex; flex-direction: column; gap: 18px; }
.bloc-d h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; font: 500 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marine); }
.bloc-d h3 a, .bloc-d h3 .doux { color: var(--texte); text-transform: none; letter-spacing: 0; }
.bloc-d h3 > a { text-decoration: underline; text-underline-offset: 2px; }
.bloc-d .petit, p.petit { margin: 0; font-size: 13px; }
.mois { display: inline-flex; align-items: center; gap: 4px; }
.mois a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: var(--nuit); }
.mois a:hover { background: var(--gris); }
.mois a.eteinte { opacity: .25; pointer-events: none; }
dl.fiche { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; border-top: 1px solid var(--trait); }
dl.fiche dt, dl.fiche dd { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--gris); }
dl.fiche dt { padding-right: 14px; color: var(--texte); font-size: 13px; line-height: 20px; }
dl.fiche dd { text-align: right; font: 500 12.5px/20px var(--mono); overflow-wrap: anywhere; }
.hist { display: block; width: 100%; height: auto; }
.hist text { font: 500 9px var(--mono); text-anchor: middle; }
.hist .chiffre { fill: var(--texte); }
.hist .heure { fill: #6B7785; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font: 500 11.5px/16px var(--mono); text-align: center; }
.cal > * { padding: 4px 0; border-radius: 3px; color: #9AA4AF; }
.cal .j { color: var(--texte); font-size: 10px; }
.cal a.p { background: rgba(56, 189, 248, .13); color: var(--nuit); }
.cal a.p:hover { background: rgba(56, 189, 248, .26); }
.cal a.p small { display: block; font-size: 9.5px; line-height: 11px; color: var(--marine); }
.cal .auj { font-weight: 700; color: var(--nuit); }
.cal .ici { outline: 1.5px solid var(--accent); outline-offset: -1px; }
table.jr { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; }
table.jr td { padding: 5px 0; border-bottom: 1px solid var(--gris); vertical-align: top; }
table.jr td:first-child { width: 1%; padding-right: 12px; color: var(--texte); font: 500 11.5px/19px var(--mono); white-space: nowrap; }
table.jr a:hover b { text-decoration: underline; }

/* Liste des caméras : une ligne par caméra */
table.flotte { width: 100%; border-collapse: collapse; }
table.flotte th { padding: 0 10px 6px; border-bottom: 1px solid var(--trait); text-align: left; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
table.flotte td { padding: 12px 10px; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.flotte td.v { width: 196px; padding-left: 0; }
table.flotte td.v img, table.flotte .sans { display: block; width: 196px; aspect-ratio: 4 / 3; object-fit: cover; background: var(--gris); }
table.flotte .sans { display: grid; place-items: center; padding: 12px; border: 1.5px dashed var(--trait); background: #fff; color: var(--texte); font-size: 13px; text-align: center; }
table.flotte .gros { display: block; font: 700 19px/25px var(--titre); }
table.flotte a.gros:hover { text-decoration: underline; text-underline-offset: 3px; }
table.flotte .petit { font: 500 11.5px/16px var(--mono); color: var(--texte); }
table.flotte .courbe { width: 120px; height: 24px; }
table.flotte .courbe.energie-l { width: 160px; height: 34px; }
table.flotte td.connecter { vertical-align: middle; }
table.flotte tr.retard img { filter: grayscale(.85) brightness(.9); outline: 3px solid var(--orange); outline-offset: -3px; }
.lisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bas-liste { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; margin: 24px 0 8px; }

@media (max-width: 1200px) {
  .tuiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tuile { border-bottom: 1px solid var(--trait); }
  .resume { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.flotte td.v, table.flotte td.v img, table.flotte .sans { width: 150px; }
}
@media (max-width: 1000px) {
  .corps, .bas-liste { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .entete h1 { font-size: 26px; }
  .entete .materiel { display: none; }
  .tuiles, .resume { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuile.large { grid-column: 1 / -1; }
  .tuile:nth-child(2n+1) { border-right: 0; }
  .tuiles:not(.resume) .tuile:nth-child(2n+1) { border-right: 1px solid var(--trait); }
  .tuiles:not(.resume) .tuile:nth-child(2n) { border-right: 0; }
  .tuiles:not(.resume) .tuile.large { border-right: 0; }
  .tuile .val { font-size: 21px; }
  .scene { max-height: none; }
  .scene button, .scene .ic a, .pilule a { padding: 0 9px; font-size: 13px; }
  .ic a, .ic button, .pilule button, .pilule a { width: 36px; padding: 0; }
  .barre-h { left: 6px; right: 6px; top: 6px; }
  .barre-b { left: 6px; right: 6px; bottom: 6px; }
  .pilule b { padding: 0 2px; font-size: 12px; }
  .etiq { top: 52px; font-size: 11px; }
  /* Côte à côte au téléphone : l'avant en haut, l'après en bas, sinon chaque photo est minuscule. */
  .scene[data-mode=cote] { aspect-ratio: calc(var(--r) / 2); }
  .scene[data-mode=cote] .rideau { right: 0; bottom: 50%; }
  .scene[data-mode=cote] > img.apres { left: 0; width: 100%; top: 50%; height: 50%; }
  .scene[data-mode=cote] .rideau::after { top: auto; bottom: -1px; left: 0; right: 0; width: auto; height: 2px; }
  .scene[data-mode=cote] .etiq.d { top: calc(50% + 8px); right: auto; left: 6px; }
  table.flotte thead { display: none; }
  table.flotte tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; padding: 4px 0 12px; border-bottom: 1px solid var(--trait); }
  table.flotte td { padding: 6px 0; border: 0; min-width: 0; }
  table.flotte td.v, table.flotte td.nom, table.flotte td.connecter { grid-column: 1 / -1; }
  table.flotte td.v, table.flotte td.v img, table.flotte .sans { width: 100%; }
  table.flotte td.v img { aspect-ratio: 16 / 9; }
  table.flotte .sans { aspect-ratio: auto; padding: 14px; }
  table.flotte td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
  table.flotte .courbe, table.flotte .courbe.energie-l { width: 100%; }
}

/* Visionneuse */
.vision { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 64px minmax(0, 1fr) 72px; background: #0b0f14; color: #fff; }
.vision .haut, .vision .bas { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 12px 0 24px; }
.vision .bas { padding: 0 24px; color: rgba(255, 255, 255, .75); flex-wrap: wrap; }
.vision .centre { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; grid-template-rows: minmax(0, 1fr); align-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
/* L'image garde sa taille exacte (pas de bandes) : le zoom part de ses bords. */
.vision .centre img { width: auto; height: auto; max-width: 100%; max-height: 100%; justify-self: center; display: block; min-height: 0; user-select: none; -webkit-user-drag: none; }
.vision .centre.zoome { cursor: grab; touch-action: none; }
.vision .centre button { position: relative; z-index: 1; }
.vision button.icone { width: 44px; min-height: 44px; padding: 0; justify-self: center; background: none; box-shadow: none; color: rgba(255, 255, 255, .8); }
.vision button.icone:disabled { opacity: .25; cursor: default; }
.vision .bouton { color: var(--nuit); }

/* Réglages en deux colonnes : le formulaire, et à côté ce qu'il donne */
.reglage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; padding-top: 40px; }
.pause-cam { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding: 14px 18px; background: var(--gris); }
.pause-cam p { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.pause-cam + .reglage { padding-top: 28px; }
.bloc { padding: 28px 0; border-top: 1px solid var(--trait); }
.bloc:first-child { border-top: 0; padding-top: 0; }
.bloc > p.doux { margin: 0 0 18px; }
.phrase { margin: 0 0 22px; font: 700 26px/1.3 var(--titre); letter-spacing: -.015em; }
.phrase em { font-style: normal; color: var(--marine); box-shadow: inset 0 -2px 0 rgba(0, 53, 102, .25); }
.jours { display: flex; gap: 8px; margin-bottom: 20px; }
.jours label { margin: 0; }
.jours input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jours span { width: 48px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--trait); color: var(--nuit); font-weight: 600; cursor: pointer; }
.jours input:checked + span { background: var(--nuit); border-color: var(--nuit); color: #fff; }
.jours input:focus-visible + span { outline: 2px solid var(--accent); }
.choix { display: flex; flex-direction: column; gap: 10px; }
.choix label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; border: 1.5px solid var(--trait); color: var(--nuit); cursor: pointer; }
.choix label:has(input:checked) { border-color: var(--nuit); }
.choix input { width: 18px; height: 18px; margin: 4px 0 0; flex: 0 0 18px; accent-color: var(--nuit); }
.choix small { display: block; color: var(--texte); font-size: 14px; line-height: 21px; }
.choix .sous { display: block; margin-top: 12px; }
.choix label > span { flex: 1; min-width: 0; }
.choix .sous input { width: 100%; height: 46px; margin: 8px 0 0; flex: none; }
.choix .sous .deux { gap: 0 12px; }
.cote { position: sticky; top: 24px; align-self: start; padding: 28px; background: var(--gris); }
.cote dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; }
.cote dt { color: var(--texte); }
.cote dd { margin: 0; font: 500 16px var(--mono); text-align: right; text-wrap: balance; }
.cote hr { border: 0; border-top: 1px solid var(--trait); margin: 22px 0; }
/* Enregistrer sur toute la largeur, puis Annuler, puis Supprimer : même ordre partout. */
.cote .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cote .actions .principal { grid-column: 1 / -1; order: -1; }
.cote .actions .ecart { order: 3; margin: 0; justify-self: center; }
.autre { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--trait); }
.autre a.mono { color: var(--marine); }
.autre.ici { background: var(--gris); margin-inline: -14px; padding-inline: 14px; }

/* Sur place : l'écran de la télécommande. Au téléphone, l'image et ses boutons d'abord, puis l'état,
   la photo d'essai, le journal court, le lien de pose. Au bureau, l'image et le lien de pose à gauche,
   le suivi à droite. */
.surplace { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto 1fr;
            grid-template-areas: "direct suivi" "pose suivi"; gap: 0 48px; padding-top: 32px; }
.sp-direct { grid-area: direct; }
.sp-suivi { grid-area: suivi; }
.sp-pose { grid-area: pose; align-self: start; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--trait); }
.ecran { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--nuit); color: rgba(255, 255, 255, .75); }
.ecran img { width: 100%; height: 100%; object-fit: contain; transition: opacity .3s ease-out; }
.ecran.ancienne img { opacity: .45; }
.ecran p { margin: 0; padding: 24px; max-width: 420px; text-align: center; }
.sp-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; margin: 10px 0 0; color: var(--texte); }
.sp-ligne [data-m=reglage] { color: var(--marine); }
.surplace .actions { margin-top: 16px; }
#retour:empty { display: none; }
.sp-etat { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--trait); border: 1px solid var(--trait); }
.sp-etat div { min-width: 0; padding: 12px 14px; background: var(--gris); }
.sp-etat dt { font: 500 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte); }
.sp-etat dd { margin: 2px 0 0; font: 500 15px/22px var(--mono); overflow-wrap: anywhere; }
.sp-bloc { margin-top: 28px; }
.sp-bloc .surtitre { margin-bottom: 10px; }
#essai img { display: block; width: 100%; height: auto; }
.sp-journal { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.sp-journal td { padding: 8px 0; border-top: 1px solid var(--trait); vertical-align: top; }
.sp-journal td:first-child { width: 1%; padding-right: 14px; white-space: nowrap; color: var(--texte); }
.etapes { margin: 0; padding-left: 22px; }
@media (max-width: 1000px) {
  .surplace { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "direct" "suivi" "pose"; padding-top: 24px; }
  .sp-suivi { margin-top: 24px; }
  /* Prise de vue et Réglages : ce que donne le formulaire, et Enregistrer, juste sous le formulaire. */
  .formulaire > div { display: contents; }
  .formulaire .cote { order: 1; margin-top: 4px; }
  .formulaire .apres { order: 2; }
}
@media (max-width: 700px) {
  /* Les deux boutons de la télécommande sur toute la largeur, sous le pouce. */
  .surplace .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sp-pose .actions, .sp-pose form.actions { display: flex; }
}
.etapes li { margin: 0 0 10px; }

/* Énergie */
.barre { position: relative; height: 34px; margin: 44px 0 52px; border: 1.5px solid var(--nuit); background: #fff; }
.barre .plein { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(0, 53, 102, .16) 0 6px, rgba(0, 53, 102, .08) 6px 12px); }
.barre .seuil { position: absolute; top: -8px; bottom: -8px; border-left: 1.5px dashed var(--nuit); }
.barre .seuil span { position: absolute; top: calc(100% + 4px); left: -20px; width: 40px; text-align: center; font: 500 12px var(--mono); white-space: nowrap; }
.barre .ici { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font: 500 13px var(--mono); color: var(--marine); }
.barre .ici::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--marine); }
/* Près du bord droit, l'étiquette s'aligne sur la flèche au lieu de sortir de la barre. */
.barre .ici.droite { transform: translateX(-100%); margin-left: 6px; }
.barre .ici.droite::after { left: auto; right: 1px; margin-left: 0; }
.palier { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--trait); }
.palier:first-child { border-top: 0; padding-top: 0; }
.palier .borne { font: 500 15px var(--mono); color: var(--marine); }
.palier b { display: block; margin-bottom: 4px; font: 700 19px var(--titre); }
.palier .actuel { margin-left: 12px; padding: 2px 8px; vertical-align: 3px; background: var(--nuit); color: #fff; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.seuils { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; max-width: 480px; }
.seuils label { width: auto; }

/* Zone de suppression */
.danger { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--trait); }
.danger label { max-width: 420px; }

@media (max-width: 1000px) {
  .reglage { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cote { position: static; }
}
@media (max-width: 700px) {
  .int { padding: 0 16px; }
  .bande nav { gap: 16px; font-size: 14px; }
  .bande nav form, .bande nav .compte .long { display: none; }
  .bande nav .compte .court { display: inline; }
  h1 { font-size: 34px; }
  .tete { padding: 28px 0 20px; }
  /* Les cinq onglets ne tiennent pas sur 360 px : ils défilent, et le bord droit s'efface pour le montrer. */
  .onglets { gap: 22px; margin-right: -16px; padding-right: 40px; scrollbar-width: none;
             -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
             mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .onglets::-webkit-scrollbar { display: none; }
  .phrase { font-size: 21px; }
  .jours { gap: 5px; }
  .jours span { width: 42px; }
  .autre { flex-direction: column; align-items: flex-start; }
  .palier { grid-template-columns: 1fr; gap: 4px; }
  .deux, .trois { grid-template-columns: 1fr; }
  .vision .centre { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .vision .haut { padding-left: 16px; }
  .vision .bas { padding: 8px 16px; }
  .seuils { gap: 0 10px; }
  .cote { padding: 22px 18px; }
}

/* Journal du téléphone (onglet Terminal) */
.journal { width: 100%; border-collapse: collapse; font-size: 14px; }
.journal td { padding: 7px 10px 7px 0; border-top: 1px solid var(--trait); vertical-align: top; }
.journal td:first-child { white-space: nowrap; }
.journal td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.journal .fois { margin-left: 6px; padding: 1px 6px; background: var(--gris); color: var(--marine); font-size: 12px; white-space: nowrap; }
/* Au téléphone, chaque ligne sur deux rangs : l'heure et la batterie, puis le type et le détail. */
@media (max-width: 700px) {
  .journal tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; border-top: 1px solid var(--trait); }
  .journal td { padding: 0; border: 0; }
  .journal td:nth-child(1) { grid-column: 1 / 3; }
  .journal td:nth-child(2) { grid-row: 2; color: var(--texte); }
  .journal td:nth-child(3) { grid-row: 2; grid-column: 2 / 4; }
  .journal td:nth-child(4) { grid-row: 1; grid-column: 3; }
}

/* Vue agrandie d'une tuile (agrandi.js, vd1.3.17) */
.tuile.cliquable { cursor: pointer; position: relative; transition: background-color .12s; }
.tuile.cliquable:hover { background: var(--gris); }
.tuile.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tuile .loupe { width: 10px; height: 10px; margin-left: 6px; vertical-align: 0; color: #9AA9B8; }
.tuile.cliquable:hover .loupe { color: var(--marine); }
dialog.agrandi { width: min(1180px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--trait); background: #fff; color: var(--nuit); box-shadow: 0 18px 50px rgba(10, 22, 34, .28); }
dialog.agrandi::backdrop { background: rgba(10, 22, 34, .45); }
.ag-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--trait); }
.ag-tete h2 { margin: 0; flex: 1; font: 700 19px/26px var(--titre); }
.ag-periodes { display: flex; border: 1px solid var(--trait); }
.ag-periodes button { padding: 5px 12px; border: 0; border-right: 1px solid var(--trait); background: #fff; font: 500 12px/18px var(--mono); color: var(--texte); cursor: pointer; }
.ag-periodes button:last-child { border-right: 0; }
.ag-periodes button[aria-pressed="true"] { background: var(--accent); color: var(--nuit); }
.ag-fermer { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: none; color: var(--texte); cursor: pointer; }
.ag-fermer:hover { color: var(--nuit); background: var(--gris); }
.ag-fermer svg { width: 14px; height: 14px; }
.ag-corps { padding: 6px 16px 14px; overflow: auto; touch-action: pan-y; }
.ag-corps.charge { opacity: .45; }
.ag-panneau { padding-top: 10px; border-bottom: 1px solid var(--gris); }
.ag-panneau:last-child { border-bottom: 0; }
.ag-ptete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.ag-ptete h3 { margin: 0; font: 500 11px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marine); }
.ag-stats, .ag-lu { display: flex; flex-wrap: wrap; gap: 0 14px; font: 500 11px/16px var(--mono); color: var(--texte); }
.ag-stats { justify-content: flex-end; }
.ag-lu { grid-column: 1 / -1; min-height: 16px; color: var(--nuit); }
.ag-stats b, .ag-lu b { color: var(--nuit); font-weight: 700; }
.ag-stats i, .ag-lu i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: -1px; }
.ag-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ag-grille { stroke: #E4EAF0; stroke-width: 1; }
.ag-grille.fort { stroke: #C9D3DD; }
.ag-grille.zero { stroke: #9AA9B8; }
.ag-axe { font: 500 10.5px var(--mono); fill: var(--texte); }
.ag-vide { font: 500 12px var(--mono); fill: #9AA9B8; }
.ag-prevision { fill: var(--gris); }
.ag-curseur { stroke: var(--nuit); stroke-width: 1; stroke-dasharray: 3 3; }
@media (max-width: 720px) {
  .ag-tete { flex-wrap: wrap; }
  .ag-tete h2 { flex-basis: calc(100% - 50px); }
  .ag-ptete { grid-template-columns: 1fr; }
  .ag-stats { justify-content: flex-start; }
}

/* Films (vd1.3.18) */
.film-vu { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; padding-top: 32px; align-items: start; }
.film-vu video { display: block; width: 100%; height: auto; max-height: 72vh; background: var(--nuit); }
.film-legende h2 { margin: 0 0 8px; font: 700 22px/28px var(--titre); }
.film-legende h2 .mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.film-legende p { margin: 0 0 20px; }
.films-liste { padding-top: 40px; }
table.films td { vertical-align: middle; }
table.films tr.ici td { background: var(--gris); }
table.films td.etat { white-space: nowrap; }
table.films .rouge, td.rouge { color: var(--rouge); }
table.films tr.erreur-film td { padding-top: 0; border-top: 0; }
.actions-film { text-align: right; white-space: nowrap; }
.actions-film form { display: inline; }
.actions-film a.lien { margin-right: 16px; color: var(--marine); font-weight: 500; }
.actions-film a.lien:hover { text-decoration: underline; }
.surtitre.grand { margin-bottom: 20px; font: 700 26px/32px var(--titre); letter-spacing: 0; text-transform: none; color: var(--nuit); }
.film-nouveau { margin-top: 40px; border-top: 1px solid var(--trait); }
.film-annexes { padding-top: 0; }
.film-annexes .bloc:first-child { padding-top: 28px; border-top: 1px solid var(--trait); }
.logo-film { display: block; max-width: 220px; max-height: 90px; margin: 0 0 16px; padding: 10px; background: repeating-conic-gradient(var(--gris) 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
dialog.confirmer { width: min(440px, calc(100vw - 32px)); padding: 28px; border: 1px solid var(--trait); background: #fff; color: var(--nuit); box-shadow: 0 18px 50px rgba(10, 22, 34, .28); }
dialog.confirmer::backdrop { background: rgba(10, 22, 34, .45); }
dialog.confirmer form { position: relative; }
dialog.confirmer p { margin: 0 40px 0 0; }
dialog.confirmer .croix { position: absolute; top: -14px; right: -14px; min-height: 40px; width: 40px; padding: 0; background: none; box-shadow: none; font-size: 26px; }
dialog.confirmer .actions { justify-content: flex-end; }
button.rouge-fond { background: var(--rouge); color: #fff; }
@media (max-width: 1000px) {
  .film-vu { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
}
@media (max-width: 700px) {
  table.films thead, table.films td:nth-child(2), table.films td:nth-child(3) { display: none; }
  table.films td { padding-left: 0; padding-right: 0; }
  .actions-film { white-space: normal; }
}

/* Recaler la visée par repères pointés (vd1.3.19) */
.bloc-d h3 .liens-h3 { display: inline-flex; gap: 12px; }
.bloc-d h3 .liens-h3 a { text-decoration: underline; text-underline-offset: 2px; }
.pv-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 28px; }
.pv-tete h2 { margin: 0 0 6px; font: 700 22px/28px var(--titre); }
.pv-tete p { max-width: 72ch; margin: 0; }
.pv-tete .bouton { flex: none; }
.pv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-top: 20px; }
.pv-volet { min-width: 0; }
.pv-barre { display: flex; justify-content: space-between; align-items: center; min-height: 32px; margin-bottom: 6px; }
.pv-barre .surtitre { margin: 0; }
.pv-nav { display: inline-flex; gap: 16px; font-size: 14px; }
.pv-nav a { color: var(--marine); text-decoration: underline; text-underline-offset: 2px; }
.pv-zoom { display: inline-flex; gap: 4px; }
.pv-zoom button { width: 32px; min-height: 32px; padding: 0; font-size: 18px; }
.pv-photo, .pv-carte { position: relative; overflow: hidden; background: var(--nuit); border: 1px solid var(--trait); cursor: crosshair; user-select: none; -webkit-user-select: none; }
.pv-photo img { display: block; width: 100%; height: auto; }
.pv-carte { aspect-ratio: 4 / 3; background: #DCE3EA; touch-action: none; }
.pv-carte.glisse { cursor: grabbing; }
.pv-tuiles { position: absolute; inset: 0; }
.pv-tuiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.pv-sur { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pv-axe { stroke: rgba(255, 255, 255, .45); stroke-width: 1; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.pv-m-rond { fill: none; stroke: #fff; stroke-width: 2; }
.pv-m-trait { stroke: #fff; stroke-width: 2; }
.pv-m-num { fill: #fff; font-family: var(--mono); font-weight: 700; paint-order: stroke; stroke: var(--nuit); stroke-width: 3px; }
.pv-m.actif .pv-m-rond, .pv-m.actif .pv-m-trait { stroke: var(--accent); }
.pv-m.actif .pv-m-num { fill: var(--accent); }
.pv-cone { fill: rgba(56, 189, 248, .26); stroke: var(--accent); stroke-width: 1.5; }
.pv-cone-axe { stroke: var(--accent); stroke-width: 1.5; }
.pv-cone-boussole { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; stroke-dasharray: 5 5; }
.pv-cone-boussole-axe { stroke: rgba(255, 255, 255, .6); stroke-width: 1; stroke-dasharray: 5 5; }
.pv-visee { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 2 4; }
.pv-cam { fill: var(--nuit); stroke: #fff; stroke-width: 2; }
.pv-ech-fond { fill: rgba(255, 255, 255, .88); }
.pv-ech { stroke: var(--nuit); stroke-width: 2; }
.pv-ech-txt { font: 500 10px var(--mono); fill: var(--nuit); }
.pv-nord { font: 700 12px var(--mono); fill: #fff; paint-order: stroke; stroke: rgba(10, 22, 34, .6); stroke-width: 3px; }
.pv-bas { margin-top: 24px; }
.pv-consigne { margin: 0 0 12px; font-weight: 500; }
.pv-table tbody tr { cursor: pointer; }
.pv-table tr.ici td { background: var(--gris); }
.pv-table td.mono { white-space: nowrap; }
@media (max-width: 900px) {
  .pv { grid-template-columns: minmax(0, 1fr); }
  .pv-tete { flex-direction: column; gap: 12px; }
}
@media (max-width: 700px) {
  .pv-table thead th:nth-child(3), .pv-table td:nth-child(3), .pv-table thead th:nth-child(4), .pv-table td:nth-child(4) { display: none; }
}

/* Onglet Photos, vd1.3.20 : l'image d'abord. Une seule bande de 56 px (signe, caméra, état, onglets, compte),
   la photo et sa réglette prennent toute la hauteur qui reste, les mesures se rangent dans la largeur d'à côté,
   une par ligne ; Détails ouvre les courbes. Fiche, calendrier, journal et carte sous la photo. */
.int.plein { max-width: none; }
.bande.camera .int { height: 56px; max-width: none; justify-content: flex-start; gap: 20px; }
.bande.camera .signe img { width: 112px; height: auto; }
.bande.camera nav { margin-left: auto; flex: none; }
.bande.camera nav a { padding: 16px 0; }
.bc-cam { flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; height: 28px; padding-left: 20px; border-left: 1px solid var(--trait); white-space: nowrap; }
.bc-fil { color: var(--texte); }
.bc-fil:hover { color: var(--marine); }
.bc-nom { font: 700 18px var(--titre); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.bc-etat { font-size: 12.5px; }
.bc-onglets { flex: 0 4 auto; display: flex; gap: 22px; height: 100%; margin-left: 8px; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 14px; font-weight: 500; scrollbar-width: none; }
.bc-onglets::-webkit-scrollbar { display: none; }
.bc-onglets a { display: flex; align-items: center; color: var(--texte); }
.bc-onglets a:hover { color: var(--nuit); }
.bc-onglets a.ici { color: var(--nuit); box-shadow: inset 0 -2px 0 var(--accent); }
@media (max-width: 1500px) { .bande.camera nav form { display: none; } }
@media (max-width: 1300px) { .bc-fil { display: none; } .bc-cam { padding-left: 16px; } }
@media (max-width: 1100px) { .bc-etat span { display: none; } .bc-etat::before { margin-right: 0; } .bande.camera nav .compte .long { display: none; } .bande.camera nav .compte .court { display: inline; } }

.cadre-photo { display: flex; gap: 20px; align-items: flex-start; padding-top: 12px; --hv: calc(100vh - 56px - 12px - 92px - 12px); --hv: calc(100svh - 56px - 12px - 92px - 12px); }
.cadre-photo .vue { flex: none; min-width: 0; width: min(calc(max(var(--hv), 360px) * var(--r)), calc(100% - 320px)); }
.cadre-photo[data-mode=cote] .vue { width: min(calc(max(var(--hv), 300px) * var(--r) * 2), calc(100% - 320px)); }
.vue .scene { max-height: none; }
.scene.sans-photo { display: grid; place-items: center; padding: 24px; color: rgba(255, 255, 255, .75); text-align: center; }
/* Zoom (zoom.js) : on attrape la photo pour la déplacer ; au-delà de 2,5 pixels d'écran par pixel, des pixels nets. */
.scene.zoome { cursor: grab; touch-action: none; }
.scene.zoome:active { cursor: grabbing; }
.scene.pixels img, .vision .centre.pixels img { image-rendering: pixelated; }
.scene[data-mode=cote] .rideau { overflow: hidden; background: var(--nuit); z-index: 1; }
.scene .barre-h, .scene .barre-b, .scene .poignee, .scene .etiq { z-index: 2; }
.p-zoom .valeur { width: auto; min-width: 52px; padding: 0 6px; font: 500 12.5px var(--mono); }
.p-zoom .valeur:disabled { opacity: .55; }

.mesures { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 56px - 24px); max-height: calc(100svh - 56px - 24px); position: sticky; top: 12px; }
.ms-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; min-height: 32px; }
.ms-verdict { display: flex; align-items: center; gap: 8px; font: 700 15px var(--titre); }
.ms-verdict .ico { width: 20px; height: 20px; }
.inter { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--nuit); font: 600 13px Inter, sans-serif; cursor: pointer; }
.inter:hover { background: none; box-shadow: none; }
.inter .rail { position: relative; width: 34px; height: 20px; border-radius: 100px; background: #C5D0DB; transition: background-color .2s; flex: none; }
.inter .rail::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(10, 22, 34, .3); transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
.inter[aria-pressed=true] .rail { background: var(--accent); }
.inter[aria-pressed=true] .rail::after { transform: translateX(14px); }
.ms-liste { overflow-y: auto; border: 1px solid var(--trait); scrollbar-width: thin; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 9px 14px; }
.m + .m { border-top: 1px solid var(--gris2, #E9EEF3); }
.m > .ico { color: var(--marine); }
.m-lib { font-size: 13.5px; line-height: 20px; font-weight: 500; color: var(--texte); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-val { font: 700 17px/22px var(--titre); white-space: nowrap; text-align: right; }
.m-val small { margin-left: 2px; font: 600 12px var(--titre); color: var(--texte); }
.m-etat { grid-column: 2 / 4; font-size: 12.5px; line-height: 18px; color: var(--texte); }
.m-etat.ok { color: var(--vert); }
.m-etat.attention { color: var(--orange); }
.m-plus { grid-column: 1 / 4; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1), opacity .25s; }
.m-plus > div { overflow: hidden; min-height: 0; }
html.details .m-plus { grid-template-rows: 1fr; opacity: 1; }
.m-plus .courbe { height: 40px; margin-top: 8px; }
.m-d { margin: 4px 0 0; font: 500 11.5px/17px var(--mono); color: var(--texte); }
.m-plus .legende-c { margin-top: 2px; }
.m.cliquable { cursor: pointer; transition: background-color .12s; }
.m.cliquable:hover { background: var(--gris); }
.m.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (min-width: 1700px) {
  .ms-liste { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
  .m + .m { border-top: 0; }
  .m { border-bottom: 1px solid var(--gris2, #E9EEF3); }
  .m:nth-child(odd) { border-right: 1px solid var(--gris2, #E9EEF3); }
}

.dessous { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 28px; }
.dessous > * { min-width: 0; }

@media (max-width: 1000px) {
  .cadre-photo { display: block; }
  .cadre-photo .vue, .cadre-photo[data-mode=cote] .vue { width: 100%; }
  .mesures { position: static; max-height: none; margin-top: 16px; }
  .ms-liste { overflow: visible; }
  .dessous { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  /* Téléphone : la photo d'un bord à l'autre, les onglets sur une seconde ligne, les mesures sur deux colonnes. */
  .bande.camera .int { height: auto; flex-wrap: wrap; gap: 0 12px; padding-top: 0; }
  .bande.camera .signe { height: 52px; }
  .bande.camera .signe img { width: 96px; }
  .bc-cam { flex: 1; padding-left: 12px; }
  .bc-etat span { display: none; }
  .bande.camera nav { height: 52px; }
  .bc-onglets { order: 5; flex: none; width: calc(100% + 16px); height: 44px; margin: 0 -16px 0 0; padding-right: 40px; border-top: 1px solid var(--trait);
                -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
  .cadre-photo { padding-top: 0; }
  .p-zoom { display: none; }
  .cadre-photo .vue { margin: 0 -16px; width: calc(100% + 32px); }
  .cadre-photo[data-mode=cote] .vue { width: calc(100% + 32px); }
  .ms-liste { display: grid; grid-template-columns: 1fr 1fr; }
  .m + .m { border-top: 0; }
  .m { grid-template-columns: 18px minmax(0, 1fr); padding: 11px 12px; border-bottom: 1px solid var(--gris2, #E9EEF3); align-content: start; }
  .m:nth-child(odd) { border-right: 1px solid var(--gris2, #E9EEF3); }
  .m-val { grid-column: 1 / 3; text-align: left; font-size: 19px; line-height: 24px; margin-top: 2px; white-space: normal; }
  .m-etat, .m-plus { grid-column: 1 / 3; }
  .dessous { grid-template-columns: 1fr; gap: 24px; }
}
.dessous-pile { display: flex; flex-direction: column; gap: 22px; min-width: 0; }