:root{
  --bg:#faf7f4; --surf:#ffffff; --surf2:#f3eeea; --surf3:#e9e2dc;
  --ink:#1c1720; --ink2:#544c56; --ink3:#867d88;
  --line:#ded5cd; --line2:#c3b7ac;
  --plum:#6b3050; --plum-s:#f3e6ee;
  --amber:#9a6714; --amber-s:#faf0dc;
  --green:#33694a; --green-s:#e3f0e7;
  --red:#a3352f; --red-s:#f9e5e3;
  --grey:#6f6a72; --grey-s:#eceaed;
  --sh:0 1px 2px rgba(28,23,32,.06),0 6px 18px rgba(28,23,32,.06);
  --sh2:0 2px 8px rgba(28,23,32,.12),0 18px 44px rgba(28,23,32,.14);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs:16px; --fs-s:13.5px; --fs-xs:11.5px; --tap:44px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141118; --surf:#1d1922; --surf2:#252030; --surf3:#2f2839;
    --ink:#ece7ee; --ink2:#b7aebd; --ink3:#8b8291;
    --line:#332c3d; --line2:#4b4257;
    --plum:#d79cc0; --plum-s:#2e1c2a;
    --amber:#e0aa4c; --amber-s:#31260f;
    --green:#79bd93; --green-s:#16281d;
    --red:#e08b83; --red-s:#331a19;
    --grey:#9d95a3; --grey-s:#26222c;
    --sh:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
    --sh2:0 2px 8px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#141118; --surf:#1d1922; --surf2:#252030; --surf3:#2f2839;
  --ink:#ece7ee; --ink2:#b7aebd; --ink3:#8b8291;
  --line:#332c3d; --line2:#4b4257;
  --plum:#d79cc0; --plum-s:#2e1c2a;
  --amber:#e0aa4c; --amber-s:#31260f;
  --green:#79bd93; --green-s:#16281d;
  --red:#e08b83; --red-s:#331a19;
  --grey:#9d95a3; --grey-s:#26222c;
  --sh:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.3);
  --sh2:0 2px 8px rgba(0,0,0,.5),0 18px 44px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#faf7f4; --surf:#ffffff; --surf2:#f3eeea; --surf3:#e9e2dc;
  --ink:#1c1720; --ink2:#544c56; --ink3:#867d88;
  --line:#ded5cd; --line2:#c3b7ac;
  --plum:#6b3050; --plum-s:#f3e6ee;
  --amber:#9a6714; --amber-s:#faf0dc;
  --green:#33694a; --green-s:#e3f0e7;
  --red:#a3352f; --red-s:#f9e5e3;
  --grey:#6f6a72; --grey-s:#eceaed;
  --sh:0 1px 2px rgba(28,23,32,.06),0 6px 18px rgba(28,23,32,.06);
  --sh2:0 2px 8px rgba(28,23,32,.12),0 18px 44px rgba(28,23,32,.14);
}
:root[data-confort="1"]{ --fs:20px; --fs-s:16.5px; --fs-xs:13.5px; --tap:56px; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:var(--fs);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);margin:0;line-height:1.2;font-weight:600}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* 1180 px laissait 370 px vides de chaque côté sur un écran de 1920. Le
   calendrier, les tableaux et les zones de la fiche gagnent tous à respirer :
   une case de jour plus large, c'est un titre de spectacle lisible en entier
   au lieu d'être coupé. */
.app{max-width:1500px;margin:0 auto;padding:0 16px 60px}
.top{display:flex;align-items:center;gap:14px;padding:16px 0 12px;flex-wrap:wrap}
.logo{width:38px;height:38px;border-radius:7px;background:var(--plum);color:var(--bg);
  display:grid;place-items:center;font-family:var(--serif);font-size:17px;flex:none}
.top .name{font-size:var(--fs-s);font-weight:700}
.top .who{font-size:var(--fs-xs);color:var(--ink3)}
.top .sp{flex:1}
.icbtn{min-width:var(--tap);min-height:var(--tap);border-radius:8px;border:1px solid var(--line);
  background:var(--surf);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:0 12px;font-size:var(--fs-s)}
.icbtn:hover{border-color:var(--plum);color:var(--plum)}

nav.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;margin-bottom:18px}
nav.tabs button{background:none;border:none;border-bottom:2.5px solid transparent;cursor:pointer;
  padding:11px 14px;font-size:var(--fs-s);font-weight:600;color:var(--ink2);white-space:nowrap;
  min-height:var(--tap)}
nav.tabs button[aria-current="true"]{color:var(--plum);border-bottom-color:var(--plum)}
nav.tabs button:hover{color:var(--plum)}

.view{display:none}
.view.on{display:block}
.vhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.vhead h2{font-size:24px}
.vhead .sub{font-size:var(--fs-s);color:var(--ink3)}
.vhead .sp{flex:1}

.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:var(--fs-xs);padding:6px 11px;border-radius:20px;border:1px solid var(--line2);
  background:var(--surf);cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:34px}
.chip[aria-pressed="true"]{background:var(--plum-s);border-color:var(--plum);color:var(--plum);font-weight:600}
.search{flex:1;min-width:190px;display:flex;align-items:center;gap:8px;background:var(--surf);
  border:1px solid var(--line);border-radius:8px;padding:0 12px;min-height:var(--tap)}
.search input{flex:1;border:none;background:none;color:inherit;font:inherit;font-size:var(--fs-s);outline:none;padding:8px 0}
.mnav{display:flex;align-items:center;gap:10px}
.mnav b{font-family:var(--serif);font-size:19px;min-width:170px;text-align:center}
.mnav button{min-width:38px;min-height:38px;border-radius:7px;border:1px solid var(--line);
  background:var(--surf);cursor:pointer;font-size:17px}

.cal{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surf);box-shadow:var(--sh)}
.cal .dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surf2);border-bottom:1px solid var(--line)}
.cal .dow div{padding:8px 6px;font-size:var(--fs-xs);color:var(--ink3);text-align:center;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase}
.cal .grid{display:block}
.week{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--line)}
.week:last-child{border-bottom:none}
.cell{grid-row:2;min-height:96px;border-right:1px solid var(--line);padding:5px;position:relative}
.cell:nth-child(7n){border-right:none}
.cell.out{background:var(--surf2)}
.cell .dn{font-size:var(--fs-xs);color:var(--ink3);font-weight:700;padding:1px 4px}
.cell.today .dn{background:var(--plum);color:var(--bg);border-radius:20px;display:inline-block;min-width:22px;text-align:center}
.ev{display:block;width:100%;text-align:left;border:none;border-left:3px solid;border-radius:0 5px 5px 0;
  padding:4px 6px;margin-top:3px;font-size:var(--fs-xs);cursor:pointer;line-height:1.3}
.ev .h{font-weight:700;opacity:.85}
.ev .mine{font-weight:700}
.ev.pret{background:var(--green-s);border-color:var(--green);color:var(--green)}
.ev.prep{background:var(--amber-s);border-color:var(--amber);color:var(--amber)}
.ev.urgent{background:var(--red-s);border-color:var(--red);color:var(--red)}
.ev.complet{background:var(--grey-s);border-color:var(--green);color:var(--ink2)}
.ev.incomplet{background:var(--grey-s);border-color:var(--grey);color:var(--ink2)}
.perbar{grid-row:1;margin:5px 5px 2px;border-radius:5px;padding:5px 9px;
  font-size:var(--fs-xs);font-weight:700;cursor:pointer;border:1px solid;text-align:left;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perbar.prep{background:var(--amber-s);border-color:var(--amber);color:var(--amber)}
.perbar.pret{background:var(--green-s);border-color:var(--green);color:var(--green)}
.perbar.urgent{background:var(--red-s);border-color:var(--red);color:var(--red)}
.perbar.complet,.perbar.incomplet{background:var(--grey-s);border-color:var(--line2);color:var(--ink2)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-xs);color:var(--ink2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}

.lst{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surf);box-shadow:var(--sh)}
.lrow{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);
  cursor:pointer;width:100%;background:none;border-left:none;border-right:none;border-top:none;text-align:left;
  min-height:var(--tap)}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--surf2)}
.lrow .d{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink3);min-width:96px}
.lrow .t{flex:1;font-size:var(--fs-s);font-weight:600}
.lrow .t small{display:block;font-weight:400;color:var(--ink3);font-size:var(--fs-xs)}

.pill{font-size:var(--fs-xs);font-weight:700;padding:3px 9px;border-radius:20px;border:1px solid;white-space:nowrap}
.p-pret{color:var(--green);background:var(--green-s);border-color:var(--green)}
.p-prep{color:var(--amber);background:var(--amber-s);border-color:var(--amber)}
.p-urgent{color:var(--red);background:var(--red-s);border-color:var(--red)}
.p-complet{color:var(--ink2);background:var(--grey-s);border-color:var(--line2)}
.p-incomplet{color:var(--ink2);background:var(--grey-s);border-color:var(--line2)}
.mark{color:var(--plum);font-weight:700;font-size:var(--fs-xs);white-space:nowrap}

.card{background:var(--surf);border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);margin-bottom:14px}
.card>h3{font-size:17px;padding:14px 18px 0}
.card .body{padding:14px 18px 18px}
.fhead{padding:18px}
.fhead .row{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:flex-start}
.fhead h2{font-size:26px}
.fhead .cie{font-size:var(--fs-s);color:var(--ink3);margin-top:3px}
.facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:var(--fs-s);color:var(--ink2)}
.facts b{color:var(--ink)}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.zones .card.wide{grid-column:1 / -1}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s)}
.kv:last-child{border-bottom:none}
.kv span:first-child{color:var(--ink3)}
.saved{color:var(--green);font-size:var(--fs-xs);font-weight:700;margin-left:8px;opacity:0;transition:opacity .2s}
.saved.on{opacity:1}

.doc,.att,.aff{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-s)}
.doc:last-child,.att:last-child,.aff:last-child{border-bottom:none}
button.doc{width:100%;background:none;border-top:none;border-left:none;border-right:none;
  text-align:left;cursor:pointer;min-height:var(--tap);border-radius:6px}
button.doc:hover{background:var(--surf2)}
.doc .nm,.att .nm,.aff .nm{flex:1}
.doc .nm small,.att .nm small,.aff .nm small{display:block;color:var(--ink3);font-size:var(--fs-xs)}
.ic{width:22px;text-align:center;flex:none;font-size:15px}
.ok{color:var(--green)} .wait{color:var(--amber)} .late{color:var(--red)} .mut{color:var(--ink3)}
.conf{font-size:var(--fs-xs);color:var(--red);border:1px solid var(--red);border-radius:4px;padding:1px 6px;font-weight:700}
.aff .hr{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink2)}
.hint{font-size:var(--fs-xs);color:var(--ink3);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2)}
.dz{border:1.5px dashed var(--line2);border-radius:8px;padding:14px;text-align:center;font-size:var(--fs-s);
  color:var(--ink3);margin-top:10px;cursor:pointer}
.dz:hover,.dz.over{border-color:var(--plum);color:var(--plum);background:var(--plum-s)}

.chead{display:flex;align-items:center;gap:10px;padding:14px 18px 0}
.chead h3{flex:1;font-size:17px}
.zbtn[data-on="1"]{background:var(--plum-s);border-color:var(--plum);color:var(--plum);font-weight:700}
.inp{font:inherit;font-size:var(--fs-s);border:1px solid var(--line2);border-radius:6px;
  background:var(--surf);color:var(--ink);padding:5px 8px;min-height:34px;max-width:100%}
select.inp{cursor:pointer}
input.inp[type=time]{width:124px}
input.inp[type=date]{width:165px}
.edrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--line)}
.edrow .gr{flex:1;min-width:150px}
.rowact{border:1px solid transparent;background:none;cursor:pointer;color:var(--ink3);
  font-size:15px;padding:5px 9px;border-radius:6px;min-height:34px}
.rowact:hover{color:var(--red);background:var(--red-s);border-color:var(--red)}
.addrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:11px 0 2px;
  border-top:1px dashed var(--line2);margin-top:8px}
.addrow .lb{font-size:var(--fs-xs);color:var(--ink3);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;width:100%}
.chk{border:none;background:none;cursor:pointer;font-size:15px;padding:3px 7px;border-radius:6px;
  min-width:30px;min-height:30px;color:var(--ink3)}
.chk:hover{background:var(--surf2);color:var(--plum)}
.chk.done{color:var(--green)}
.chk.late{color:var(--red)}
.toast .un{margin-left:16px;text-decoration:underline;cursor:pointer;font-weight:700}

.tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surf);box-shadow:var(--sh)}
table{border-collapse:collapse;width:100%;font-size:var(--fs-s)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:var(--surf2);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;color:var(--ink3)}
tbody tr:last-child td{border-bottom:none}
tr.off td{opacity:.5}
.mini{font-size:var(--fs-xs);padding:5px 10px;border-radius:6px;border:1px solid var(--line2);
  background:var(--surf);cursor:pointer;min-height:32px}
.mini:hover{border-color:var(--plum);color:var(--plum)}
.mini.danger:hover{border-color:var(--red);color:var(--red)}
.note{background:var(--amber-s);border-left:3px solid var(--amber);border-radius:0 7px 7px 0;
  padding:11px 14px;font-size:var(--fs-s);margin-bottom:14px}
.note.red{background:var(--red-s);border-left-color:var(--red)}
.note.green{background:var(--green-s);border-left-color:var(--green)}
.quota{height:9px;border-radius:5px;background:var(--surf3);overflow:hidden;margin:8px 0 5px}
.quota i{display:block;height:100%;background:var(--amber);transition:width .3s}
.quota.hi i{background:var(--red)}

.fmt{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;padding:4px 6px;
  border-radius:4px;background:var(--surf3);color:var(--ink2);flex:none;min-width:52px;text-align:center}
mark{background:var(--amber-s);color:var(--ink);border-radius:3px;padding:0 2px}
.snip{display:block;font-size:var(--fs-xs);color:var(--ink2);margin-top:4px;font-style:italic}
.cnt{font-size:var(--fs-xs);color:var(--ink3);margin:2px 0 12px}

.lbl{font-size:var(--fs-xs);color:var(--ink3);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px}
/* Le texte suivi ne suit pas la même règle que le reste : au-delà d'environ
   quatre-vingts caractères, l'œil perd la ligne en revenant à la ligne
   suivante. La borne est en « ch » — la largeur d'un caractère — pour qu'elle
   suive la taille de police choisie dans le confort de lecture. */
.para{border:1px solid var(--line);border-radius:8px;background:var(--surf2);padding:11px 13px;
  font-size:var(--fs-s);line-height:1.6;min-height:124px;white-space:pre-wrap;max-width:82ch}
.para[contenteditable="true"]:focus{outline:none;border-color:var(--plum);background:var(--surf)}
.para.vide{color:var(--ink3)}

.ovl{position:fixed;inset:0;background:rgba(28,23,32,.55);display:none;place-items:center;
  z-index:90;padding:16px}
.ovl.on{display:grid}
.modal{background:var(--surf);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);
  width:100%;max-width:620px;max-height:88vh;overflow:auto}
.modal h3{padding:18px 20px 2px;font-size:19px}
.modal .mb{padding:12px 20px 4px}
.modal .mf{display:flex;gap:8px;justify-content:flex-end;padding:14px 20px 20px;flex-wrap:wrap}
.frow{margin-bottom:12px}
.frow>label{display:block;font-size:var(--fs-xs);color:var(--ink3);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
.frow .inp{width:100%}
.frow.duo{display:flex;gap:10px}
.frow.duo>span{flex:1}
.btnp{background:var(--plum);color:var(--bg);border:1px solid var(--plum);border-radius:8px;
  padding:0 16px;min-height:var(--tap);cursor:pointer;font-size:var(--fs-s);font-weight:600}
.auto{font-size:var(--fs-xs);color:var(--amber);font-weight:700;margin-top:6px;display:block}
.auto.sure{color:var(--green)}

.segm{display:flex;gap:4px;background:var(--surf2);border-radius:9px;padding:4px;margin-bottom:14px}
.seg{flex:1;border:none;background:none;border-radius:6px;cursor:pointer;padding:9px 8px;
  font-size:var(--fs-s);font-weight:600;color:var(--ink2);min-height:38px}
.seg.on{background:var(--surf);color:var(--plum);box-shadow:var(--sh)}
.pick{border:1px solid var(--line);border-radius:8px;max-height:260px;overflow:auto;margin-bottom:6px}
.pickrow{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:none;
  border:none;border-bottom:1px solid var(--line);padding:10px 12px;cursor:pointer;min-height:var(--tap)}
.pickrow:last-child{border-bottom:none}
.pickrow:hover{background:var(--surf2)}
.pickrow.on{background:var(--plum-s)}
.pickrow .t{flex:1;font-size:var(--fs-s);font-weight:600}
.pickrow .t small{display:block;font-weight:400;color:var(--ink3);font-size:var(--fs-xs)}
.pickrow .tick{color:var(--plum);font-weight:700;min-width:16px}

.vfond{position:fixed;inset:0;background:rgba(28,23,32,.35);z-index:85;display:none}
.vfond.on{display:block}
.volet{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surf);
  border-left:1px solid var(--line);box-shadow:var(--sh2);z-index:86;display:flex;
  flex-direction:column;transform:translateX(101%);transition:transform .18s ease}
.volet.on{transform:none}
.volet .vh{display:flex;gap:10px;align-items:flex-start;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.volet .vh h3{flex:1;font-size:18px}
.volet .vb{flex:1;overflow:auto;padding:16px 18px}
.volet .vf{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.page{background:var(--surf2);border:1px solid var(--line);border-radius:6px;padding:20px 22px;
  font-size:var(--fs-s);line-height:1.7;min-height:180px;box-shadow:var(--sh)}
.page.txt{font-family:var(--mono);font-size:var(--fs-xs);white-space:pre-wrap;line-height:1.6}
.apc{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--surf2)}
.apc img{display:block;max-width:100%;margin:0 auto;border-radius:6px}
.apc iframe{display:block;width:100%;height:56vh;border:none;border-radius:6px}
.nope{background:var(--amber-s);border-left:3px solid var(--amber);border-radius:0 7px 7px 0;
  padding:14px 16px;font-size:var(--fs-s)}

/* La liste ne s'affiche qu'en vue liste, ou sur petit écran (voir plus bas) :
   le calendrier y devient illisible. Sur grand écran les deux ne coexistent
   jamais — le bouton « Vue liste » bascule de l'une à l'autre. */
.callist{display:none}
@media (max-width:760px){
  .cal{display:none}
  .callist{display:block}
  .lrow{flex-wrap:wrap}
  .lrow .d{flex-basis:100%;min-width:0;margin-bottom:2px}
  .lrow .t{flex-basis:100%}
  .zones{grid-template-columns:1fr}
  .app{padding:0 12px 40px}

  /* Au doigt, tout ce qui se touche fait au moins --tap (44 points, 56 en
     confort de lecture). Un bouton de 32 points se rate une fois sur trois,
     et l'usage du jour J se fait debout, en coulisses, souvent d'une main.
     La variable existait déjà, elle n'était appliquée qu'à quelques classes. */
  .mini, .chip, .inp, .chk, .rowact, .zbtn, .icbtn, .mnav button,
  .bar button, .bar select, .bar input,
  .modal button, .modal select, .modal input,
  .porte button, .porte input, .menu .liste button{ min-height:var(--tap) }
  .mnav button{ min-width:var(--tap) }

  .chk{ min-width:var(--tap) }
  .mini, .chip{ padding-left:14px; padding-right:14px }

  /* Les champs de saisie serrés côte à côte tiennent mal sur une largeur de
     téléphone : on les laisse occuper la ligne entière. */
  .bar{ flex-wrap:wrap }
  .bar .inp, .bar select{ flex:1 1 100%; min-width:0 }

  /* Un tableau à sept colonnes ne rentre pas dans 390 points. Plutôt que de
     forcer un défilement latéral qu'il faut deviner — cinq colonnes sur sept
     restaient hors de vue, dont les boutons d'action — chaque ligne devient
     une carte, et l'en-tête de colonne se lit devant sa valeur. */
  table.cartes, table.cartes tbody, table.cartes tr, table.cartes td{ display:block; width:100% }
  table.cartes thead{ display:none }
  table.cartes tr{ border:1px solid var(--line); border-radius:10px;
                   margin:0 0 10px; padding:10px 12px; background:var(--surf) }
  table.cartes tr.off{ opacity:.6 }
  table.cartes td{ border:none; padding:5px 0; display:flex; gap:10px;
                   align-items:center; flex-wrap:wrap }
  table.cartes td::before{ content:attr(data-libelle); flex:none; min-width:92px;
                           color:var(--ink3); font-size:var(--fs-xs);
                           text-transform:uppercase; letter-spacing:.03em }
  table.cartes td:empty{ display:none }
  table.cartes td.actions{ padding-top:9px; margin-top:4px;
                           border-top:1px dashed var(--line2) }
  table.cartes td.actions::before{ display:none }
  table.cartes td.actions button{ flex:1 1 auto }
  .tw:has(table.cartes){ border:none; background:none; box-shadow:none; overflow:visible }
}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;background:var(--ink);color:var(--bg);
  padding:11px 18px;border-radius:8px;font-size:var(--fs-s);box-shadow:var(--sh2);opacity:0;
  pointer-events:none;transition:opacity .2s;z-index:95;max-width:90vw}
.toast.on{opacity:1;pointer-events:auto}

/* ---------------- Écrans d'entrée ---------------- */
.porte{min-height:100vh;display:grid;place-items:center;padding:24px}
.porte .boite{width:100%;max-width:460px;background:var(--surf);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh2);padding:28px}
.porte h1{font-size:26px;margin-bottom:6px}
.porte .sous{font-size:var(--fs-s);color:var(--ink3);margin-bottom:20px}
.porte .frow{margin-bottom:14px}
.porte .btnp{width:100%;justify-content:center}
.porte .msg{font-size:var(--fs-s);margin-top:14px;padding:11px 14px;border-radius:8px;
  background:var(--red-s);color:var(--red);border-left:3px solid var(--red)}
.marque{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.marque .logo{width:44px;height:44px;font-size:20px}
.marque b{font-family:var(--serif);font-size:20px;font-weight:600}

/* ---------------- En-tête ---------------- */
.menu{position:relative}
.menu .liste{position:absolute;right:0;top:calc(100% + 6px);background:var(--surf);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh2);min-width:230px;padding:6px;display:none;z-index:70}
.menu .liste.on{display:block}
.menu .liste button{display:flex;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 12px;border-radius:7px;font-size:var(--fs-s);min-height:var(--tap);align-items:center;gap:8px}
.menu .liste button:hover{background:var(--surf2)}
.menu .liste hr{border:none;border-top:1px solid var(--line);margin:5px 0}
.menu .liste .tete{padding:8px 12px 4px;font-size:var(--fs-xs);color:var(--ink3);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}

.chargement{padding:40px;text-align:center;color:var(--ink3);font-size:var(--fs-s)}
.lien{color:var(--plum);font-weight:600;word-break:break-all;font-family:var(--mono);
  font-size:var(--fs-xs);background:var(--surf2);border:1px solid var(--line);border-radius:8px;
  padding:11px 13px;display:block;margin:8px 0}
.vide{text-align:center;padding:44px 20px;color:var(--ink3)}
.vide h3{font-size:19px;color:var(--ink2);margin-bottom:8px}
.vide p{font-size:var(--fs-s);max-width:460px;margin:0 auto 16px}

/* ---------------- Les prochaines heures ---------------- */
.jourj{border:1px solid var(--plum);border-radius:12px;background:var(--plum-s);
  padding:14px 16px;margin-bottom:18px}
.jourj h3{font-size:17px;color:var(--plum);margin-bottom:4px}
.jourj .sub{font-size:var(--fs-xs);color:var(--ink2);margin-bottom:10px}
.jourj .bloc{background:var(--surf);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;margin-top:8px}
.jourj .titre{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.jourj .titre b{font-family:var(--serif);font-size:17px}
.jourj .quand{font-family:var(--mono);font-size:var(--fs-xs);color:var(--ink2)}
.jourj .eq{font-size:var(--fs-s);color:var(--ink2);margin-top:6px}
.jourj .eq span{display:inline-block;margin-right:14px;white-space:nowrap}
.jourj .manque{font-size:var(--fs-xs);color:var(--red);font-weight:700;margin-top:6px}
.jourj .actions{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.trace{color:var(--ink3);font-size:var(--fs-xs)}

/* ---------------- Feuille de route ---------------- */
.fr{position:fixed;inset:0;background:var(--bg);z-index:100;overflow:auto;display:none}
.fr.on{display:block}
.fr .page{max-width:760px;margin:0 auto;padding:32px 28px 60px;background:var(--surf);
  min-height:100%;border:none;border-radius:0;box-shadow:none}
.fr .barre{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--surf2);position:sticky;top:0;z-index:2}
.fr h1{font-size:28px;margin-bottom:4px}
.fr .cie{font-size:var(--fs-s);color:var(--ink3);margin-bottom:18px}
.fr h2{font-size:16px;margin:24px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line2);
  letter-spacing:.04em;text-transform:uppercase;font-family:var(--sans);font-weight:700;color:var(--ink2)}
.fr table{width:100%;font-size:var(--fs-s);border-collapse:collapse}
.fr td{padding:7px 0;border-bottom:1px solid var(--line);white-space:normal;vertical-align:top}
.fr td:first-child{width:34%;color:var(--ink3)}
.fr .heure{font-family:var(--mono);white-space:nowrap;width:120px}
.fr .notes{white-space:pre-wrap;font-size:var(--fs-s);line-height:1.6}
.fr .reste li{font-size:var(--fs-s);margin-bottom:4px}
.fr .pied{margin-top:32px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink3)}

@media print {
  body > *:not(.fr){display:none!important}
  .fr{position:static;display:block!important;background:#fff;color:#000}
  .fr .barre{display:none}
  .fr .page{max-width:none;padding:0;background:#fff}
  .fr h1{font-size:22pt} .fr h2{font-size:11pt;margin:16pt 0 6pt}
  .fr table,.fr .notes,.fr .reste li{font-size:10pt}
  .fr td{border-bottom:1px solid #ccc}
  @page{margin:16mm}
}

/* Barre de développement local — jamais rendue en ligne (voir barreDev). */
.devbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  padding:10px 14px; font-size:var(--fs-xs);
  background:var(--amber-s); color:var(--amber);
  border-top:2px dashed var(--amber);
}
.devbar button{
  padding:5px 11px; border-radius:7px; cursor:pointer;
  background:var(--amber); color:var(--amber-s);
  border:1px solid var(--amber); font-size:var(--fs-xs); font-weight:600;
}
.devbar button:hover{ filter:brightness(1.12) }
/* La barre est fixée en bas : sans cette réserve, elle recouvre le dernier
   bouton de l'écran d'entrée sur un petit écran. */
.porte:has(.devbar){ padding-bottom:110px }

/* ---------- Code de transfert d'appareil ---------- */

/* Un code se recopie caractère par caractère, souvent d'un écran à l'autre :
   chasse fixe pour que rien ne se confonde, et espacement large pour que l'œil
   ne perde pas sa place. */
.codebig{
  font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:.14em;
  text-align:center; padding:16px 10px; margin:6px 0 4px;
  background:var(--surf2); border:1px solid var(--line); border-radius:10px;
  user-select:all;                       /* un clic sélectionne tout le code */
}
input.inp.code{
  font-family:var(--mono); font-size:19px; letter-spacing:.12em; text-align:center;
}
/* Séparateur « ou » entre les deux façons d'entrer. */
.sep{ display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--ink3);
      font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em }
.sep::before, .sep::after{ content:""; flex:1; height:1px; background:var(--line) }

@media (max-width:760px){
  .codebig{ font-size:26px; letter-spacing:.10em }
}

/* ---------- Informations légales ---------- */

/* Un texte juridique se lit mal en pleine largeur : on le borne comme le reste
   du texte suivi, et on aère les paragraphes. */
.legal{ font-size:var(--fs-s); line-height:1.65; max-width:72ch; max-height:56vh; overflow-y:auto }
.legal p{ margin:0 0 13px }
.legal b{ color:var(--ink) }

/* Le lien discret des écrans d'entrée : présent, jamais encombrant. */
.pieds{ margin-top:18px; text-align:center }
.pieds button{
  background:none; border:none; cursor:pointer; padding:8px 12px;
  font-size:var(--fs-xs); color:var(--ink3); text-decoration:underline;
  text-underline-offset:3px; min-height:var(--tap);
}
.pieds button:hover{ color:var(--plum) }