/* Mise en page de l'outil Relais 2×30 m — uniquement en var(--…), voir jetons.css */
*{box-sizing:border-box; border-radius:0 !important}
html,body{background:var(--papier); color:var(--encre)}
body{font-family:var(--f-lire); font-size:var(--t-lisant); line-height:1.45; margin:0}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--attention); outline-offset:2px}
.mono{font-family:var(--f-mono)}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
h1,h2,h3{text-wrap:balance; margin:0; line-height:1.15}
h2{font-size:var(--t-grand); font-weight:700}
h3{font-size:var(--t-moyen); font-weight:700}
p{margin:0}
.etiq{font-family:var(--f-mono); font-size:var(--t-mini); letter-spacing:.08em; text-transform:uppercase; color:var(--encre-douce)}
.doux{color:var(--encre-douce)} .pale{color:var(--encre-pale)}

/* ── Tiroir ── */
.flottant{position:absolute; top:calc(env(safe-area-inset-top,0px) + 8px); left:16px; right:16px; display:flex; justify-content:space-between; align-items:center; z-index:30; pointer-events:none}
.flottant > *{pointer-events:auto}
.tiroir{position:fixed; inset:0 auto 0 0; width:var(--tiroir); max-width:86vw; background:var(--papier-clair); border-right:2px solid var(--encre); z-index:50; transform:translateX(-102%); transition:transform .18s; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top,0px) + 16px) 0 calc(env(safe-area-inset-bottom,0px) + 16px); overflow-y:auto}
.tiroir.ouvert{transform:none}
.voile{position:fixed; inset:0; background:var(--voile); z-index:40}
.marque{padding:0 20px 16px; border-bottom:2px solid var(--encre); display:grid; gap:4px}
.marque b{font-size:var(--t-moyen); line-height:1.1}
.tiroir nav{display:grid; padding:8px 0}
.tiroir nav button{display:flex; gap:14px; align-items:center; min-height:52px; padding:0 20px; background:none; border:0; text-align:left; cursor:pointer; font-size:var(--t-lisant)}
.tiroir nav button .mono{font-size:var(--t-petit); color:var(--encre-pale)}
.tiroir nav button:hover{background:var(--papier-fonce)}
.tiroir nav button[aria-current="page"]{background:var(--encre); color:var(--papier-clair)}
.tiroir nav button[aria-current="page"] .mono{color:var(--papier-fonce)}
.tiroir .pied{margin-top:auto; padding:16px 20px 0; border-top:1px solid var(--trait); font-size:var(--t-petit)}
.fermer-tiroir{position:absolute; top:calc(env(safe-area-inset-top,0px) + 10px); right:10px}
main{padding:calc(env(safe-area-inset-top,0px) + 72px) 16px 64px; max-width:1180px; margin:0 auto}
@media (min-width:1100px){
  .tiroir{transform:none; transition:none}
  .voile,.fermer-tiroir,#btnMenu{display:none !important}
  main{margin-left:var(--tiroir); padding-top:32px; padding-inline:40px; max-width:calc(1180px + var(--tiroir))}
}
@media (prefers-reduced-motion:reduce){ .tiroir{transition:none} }

/* ── Contrôles ── */
.bt{min-height:var(--tap); padding:0 16px; background:var(--papier-clair); border:2px solid var(--encre); box-shadow:3px 3px 0 var(--encre); cursor:pointer; font-weight:500; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; white-space:nowrap}
.bt:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--encre)}
.bt.principal{background:var(--encre); color:var(--papier-clair)}
.bt.danger{border-color:var(--alerte); box-shadow:3px 3px 0 var(--alerte); color:var(--alerte)}
.bt.danger.arme{background:var(--alerte); color:var(--papier-clair)}
.bt.petit{min-height:40px; padding:0 12px; font-size:var(--t-base)}
.bt.carre{width:var(--tap); padding:0; font-size:22px; line-height:1}
.bt:disabled{opacity:.45; cursor:not-allowed}
.champ{min-height:var(--tap); padding:0 12px; background:var(--papier-clair); border:2px solid var(--encre); width:100%}
select.champ{appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0h12L6 8z' fill='%23221E18'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; cursor:pointer}
textarea.champ{padding:10px 12px; min-height:120px; resize:vertical; font-size:var(--t-base)}
label.bloc{display:grid; gap:6px; min-width:0}
.rangee{display:flex; flex-wrap:wrap; gap:12px; align-items:end}
.rangee > label.bloc{flex:1 1 150px}
.puces{display:flex; flex-wrap:wrap; gap:8px}
.puce{min-height:44px; padding:0 14px; border:2px solid var(--encre); background:var(--papier-clair); cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:var(--t-base)}
.puce[aria-pressed="true"]{background:var(--encre); color:var(--papier-clair)}
.puce .mono{font-size:var(--t-petit)}
.seg{display:inline-grid; grid-template-columns:repeat(4, minmax(52px,1fr)); border:2px solid var(--encre); background:var(--papier-clair)}
.seg button{min-height:44px; border:0; border-left:1px solid var(--trait); background:none; cursor:pointer; padding:2px 6px; display:grid; line-height:1.05; place-content:center; text-align:center}
.seg button:first-child{border-left:0}
.seg button b{font-family:var(--f-mono); font-size:var(--t-petit)}
.seg button span{font-family:var(--f-mono); font-size:var(--t-mini); color:var(--encre-pale)}
.seg button[aria-pressed="true"]{background:var(--encre); color:var(--papier-clair)}
.seg button[aria-pressed="true"] span{color:var(--papier-fonce)}

/* ── Surfaces ── */
.page{display:grid; gap:28px}
.entete{display:grid; gap:8px}
.entete p{max-width:68ch; color:var(--encre-douce)}
.feuille{background:var(--papier-clair); border:2px solid var(--encre); padding:20px; display:grid; gap:18px; min-width:0}
.feuille.ombre{box-shadow:5px 5px 0 var(--encre)}
.feuille > header{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline; justify-content:space-between}
.section{display:grid; gap:10px; min-width:0}
.section > h3{display:flex; gap:10px; align-items:baseline; font-size:var(--t-lisant)}
.section > h3 .mono{font-size:var(--t-petit); color:var(--encre-pale); font-weight:400}
.encadre{border-left:3px solid var(--encre-2); background:color-mix(in srgb, var(--encre-2) 8%, transparent); padding:10px 14px; font-size:var(--t-base); max-width:78ch}
.encadre.alerte{border-left-color:var(--alerte); background:color-mix(in srgb, var(--alerte) 8%, transparent)}
.vide{border:2px dashed var(--trait); padding:28px 20px; display:grid; gap:12px; justify-items:start; color:var(--encre-douce)}
.grille2{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap:24px}
.tuiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0; border:2px solid var(--encre); background:var(--papier-clair)}
.tuile{padding:12px 16px; border-right:1px solid var(--trait); border-bottom:1px solid var(--trait); display:grid; gap:2px; margin:0 -1px -1px 0}
.tuile .v{font-family:var(--f-mono); font-size:var(--t-grand); font-variant-numeric:tabular-nums; line-height:1.1}
.tuile .v small{font-size:var(--t-petit); color:var(--encre-pale)}

/* ── Tableaux ── */
.defile{overflow-x:auto; min-width:0; border:1px solid var(--trait); background:var(--papier-clair)}
table{border-collapse:collapse; width:100%; font-size:var(--t-base)}
th,td{padding:7px 10px; text-align:left; border-bottom:1px solid var(--trait-clair); vertical-align:middle; white-space:nowrap}
thead th{background:var(--papier-fonce); font-family:var(--f-mono); font-size:var(--t-mini); letter-spacing:.06em; text-transform:uppercase; font-weight:400; color:var(--encre-douce); border-bottom:2px solid var(--encre); position:sticky; top:0}
th.n,td.n{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}
td.fort{font-weight:700}
tbody tr:hover{background:color-mix(in srgb, var(--papier-fonce) 55%, transparent)}
th button.tri{all:unset; cursor:pointer; display:inline-flex; gap:4px}
th button.tri:focus-visible{outline:3px solid var(--attention)}
tr.sep td{border-top:2px solid var(--encre)}
td input.champ{min-height:40px; width:92px; font-family:var(--f-mono); text-align:right; padding:0 8px}
td input.champ.err{border-color:var(--alerte); background:color-mix(in srgb, var(--alerte) 10%, var(--papier-clair))}
td input.champ.nom{width:220px; text-align:left; font-family:var(--f-lire)}
td select.champ{min-height:40px; width:auto; min-width:120px}
.tag{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:var(--t-petit); border:1px solid var(--trait); padding:1px 6px; white-space:nowrap}
.tag i{width:10px; height:10px; display:inline-block}
.statut-ok{color:var(--hausse)} .statut-manque{color:var(--alerte)}
.pastille{font-family:var(--f-mono); font-size:var(--t-petit); padding:2px 8px; border:1px solid var(--encre)}

/* ── Graphiques ── */
.graphe{min-width:0; position:relative}
.graphe svg{display:block; overflow:visible}
.graphe text{font-family:var(--f-mono); font-size:11px; fill:var(--encre-douce)}
.graphe text.fort{fill:var(--encre); font-weight:700}
.legende{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--t-petit); color:var(--encre-douce)}
.legende span{display:inline-flex; align-items:center; gap:6px}
.legende i{width:12px; height:12px; display:inline-block}
.bulle{position:fixed; z-index:60; pointer-events:none; background:var(--encre); color:var(--papier-clair); font-size:var(--t-petit); padding:6px 10px; max-width:260px; line-height:1.35; font-family:var(--f-lire)}
.bulle b{font-weight:700}
.constat{font-size:var(--t-base); max-width:72ch}
.constat strong{font-family:var(--f-mono); font-weight:700}
details.donnees summary{cursor:pointer; font-size:var(--t-petit); color:var(--encre-douce); min-height:32px; display:flex; align-items:center}
.carte-ana{display:grid; gap:12px; align-content:start}
.carte-ana > header{display:grid; gap:4px}
.carte-ana > header p{font-size:var(--t-base); color:var(--encre-douce)}
.bandeau{border-left:3px solid var(--alerte); background:color-mix(in srgb, var(--alerte) 8%, transparent); padding:10px 14px; font-size:var(--t-base); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between}
.grille-desc{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:0; border:1px solid var(--trait); font-size:var(--t-petit)}
.grille-desc div{padding:10px 12px; border-right:1px solid var(--trait-clair); display:grid; gap:4px; align-content:start}
.grille-desc b{font-family:var(--f-mono); font-size:var(--t-mini); letter-spacing:.06em; text-transform:uppercase}
.mini-barre{display:inline-block; height:8px; background:var(--encre-2); vertical-align:middle; margin-right:8px}
.toast{position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateX(-50%); background:var(--encre); color:var(--papier-clair); padding:12px 18px; z-index:70; font-size:var(--t-base); max-width:calc(100vw - 32px)}
@media (max-width:560px){
  .feuille{padding:14px}
  h2{font-size:var(--t-moyen)}
  .tuile .v{font-size:var(--t-moyen)}
}