/* Socle commun des écrans de réglage. Une seule définition des jetons : six
   pages qui redéclarent chacune sa palette dérivent en trois semaines. */
:root{
  --paper:#FFFFFF;--surface:#F5F5F7;--sunk:#ECECF1;--raised:#FFF;
  --ink:#0B0B10;--ink-soft:#40404C;--ink-faint:#767684;
  --rule:#D5D5DD;--rule-soft:#E6E6EC;
  --dial:#0040FF;--dial-soft:#E3E9FF;--good-ink:#008A3E;--warn:#E58A00;--low:#E3001B;
  --display:"Playfair Display",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E0F14;--surface:#16171E;--sunk:#0A0B0F;--raised:#1B1C24;
  --ink:#F4F4F7;--ink-soft:#B0B0BC;--ink-faint:#7C7C8A;
  --rule:#2A2B36;--rule-soft:#20212B;
  --dial:#4F7DFF;--dial-soft:#1A2544;--good-ink:#35C46A;--warn:#FFAE1F;--low:#FF4A5B;
}}
:root[data-theme="dark"]{
  --paper:#0E0F14;--surface:#16171E;--sunk:#0A0B0F;--raised:#1B1C24;
  --ink:#F4F4F7;--ink-soft:#B0B0BC;--ink-faint:#7C7C8A;
  --rule:#2A2B36;--rule-soft:#20212B;
  --dial:#4F7DFF;--dial-soft:#1A2544;--good-ink:#35C46A;--warn:#FFAE1F;--low:#FF4A5B;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--dial);text-decoration:none}
select,input[type=text],input[type=password],input[type=number],textarea{font:inherit;font-size:13px;color:var(--ink);
  background-color:var(--raised);border:1px solid var(--rule);border-radius:3px;padding:4px 7px}
/* Le chevron des listes : dessiné, dans la couleur du texte, à distance du bord —
   celui du navigateur collait au cadre. Une page qui pose le sien (Son) le
   remplace par sa propre image de fond. */
select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent calc(50% - .8px),currentColor calc(50% - .8px),currentColor calc(50% + .8px),transparent calc(50% + .8px)),
    linear-gradient(135deg,transparent calc(50% - .8px),currentColor calc(50% - .8px),currentColor calc(50% + .8px),transparent calc(50% + .8px));
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
textarea{font-family:var(--mono);font-size:12px;line-height:1.55;resize:vertical}
:focus-visible{outline:2px solid var(--dial);outline-offset:1px}

/* ── En-tête et navigation de premier niveau ── */
header{border-bottom:1px solid var(--rule);padding:28px 24px 0}
.entete{max-width:1180px;margin:0 auto}
h1{font-family:var(--display);font-weight:400;font-size:38px;margin:0 0 8px}
.chapeau{color:var(--ink-soft);margin:0 0 18px;max-width:70ch;font-size:14px}
nav[role=tablist]{display:flex;gap:2px;flex-wrap:wrap}
/* Des onglets dans un onglet : un cran plus petits, sur leur propre filet. */
nav.sous-onglets{border-bottom:1px solid var(--rule);margin:0 0 22px}
nav.sous-onglets .onglet{font-size:10.5px;padding:8px 14px}
.onglet{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 18px;border-bottom:2px solid transparent;color:var(--ink-faint);
  /* Un onglet ne se coupe jamais : « Clefs API » sur deux lignes, dans un habit
     aux lettres larges. Faute de place, c'est l'onglet entier qui passe à la ligne. */
  white-space:nowrap;flex:none}
.onglet[aria-selected="true"]{color:var(--dial);border-bottom-color:var(--dial)}

/* 1180 de contenu plus les deux marges : le contenu part au même bord que le titre. */
main{max-width:1228px;margin:0 auto;padding:24px 24px 160px}
.volet{display:none}.volet.actif{display:block}
h2{font-family:var(--display);font-weight:400;font-size:24px;margin:28px 0 4px}
h2:first-child{margin-top:0}
.intro{color:var(--ink-soft);font-size:13.5px;margin:0 0 18px;max-width:72ch}

/* ── Disposition maître-détail ── */
.plan{display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:880px){.plan{grid-template-columns:1fr}}
.liste{border:1px solid var(--rule-soft);background:var(--surface)}
.liste-titre{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding:11px 14px 9px;border-bottom:1px solid var(--rule-soft)}
.item{display:block;width:100%;text-align:left;padding:9px 14px;border-bottom:1px solid var(--rule-soft);
  font-size:14px;border-left:2px solid transparent}
.item:last-of-type{border-bottom:0}
.item[aria-current="true"]{border-left-color:var(--dial);background:var(--sunk);font-weight:600}
.item small{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);
  letter-spacing:.04em;font-weight:400}
.ajout{width:100%;text-align:left;padding:10px 14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--dial);border-top:1px solid var(--rule-soft)}

/* ── Fiches et tableaux ── */
.bloc{border:1px solid var(--rule-soft);background:var(--surface);padding:16px 18px;margin-bottom:14px}
.bloc h3{margin:0 0 3px;font-size:15px;font-weight:600}
.bloc p{margin:0 0 14px;font-size:13px;color:var(--ink-soft);max-width:70ch}
.grille-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px}
.champ{display:flex;flex-direction:column;gap:3px}
.champ label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint)}
.champ select,.champ input,.champ textarea{width:100%}
.champ .note{font-size:11.5px;color:var(--ink-faint);line-height:1.4}
.cases{display:flex;gap:14px;align-items:center;font-size:13px;flex-wrap:wrap}
.cases label{display:flex;gap:5px;align-items:center;cursor:pointer;white-space:nowrap}

.rangs{border:1px solid var(--rule-soft);background:var(--surface)}
.rang-row{display:grid;align-items:center;gap:0 12px;padding:8px 12px;
  border-bottom:1px solid var(--rule-soft)}
.rang-row:last-child{border-bottom:0}
.rang-row.ouverte{background:var(--sunk)}
.rang-row.survol{box-shadow:inset 0 2px 0 var(--dial)}
.rang-row.prise{opacity:.35}
.num{font-family:var(--mono);font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.etiq{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px 3px;border-radius:2px;background:var(--dial-soft);color:var(--dial);
  justify-self:start;line-height:1.3;white-space:nowrap}
.etiq.dur{background:color-mix(in srgb,var(--low) 16%,transparent);color:var(--low)}
.etiq.mou{background:var(--sunk);color:var(--ink-faint)}
.chiffre{font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);text-align:right;
  font-variant-numeric:tabular-nums}
.sup{color:var(--ink-faint);font-size:15px;line-height:1;justify-self:center}
.sup:hover{color:var(--low)}
.detail{padding:2px 12px 16px;background:var(--sunk);border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 16px}
.aide{grid-column:1/-1;font-size:12.5px;color:var(--ink-soft);margin:0;max-width:76ch}

/* ── Barre d'action ── */
.barre{display:flex;gap:10px;align-items:center;margin-top:16px;flex-wrap:wrap}
/* Le volet d'enregistrement reste collé au bas de l'écran tant que ce qu'il
   enregistre est à l'écran : plus besoin de redescendre pour enregistrer. */
.barre-bas{position:sticky;bottom:0;z-index:5;background:var(--paper);
  border-top:1px solid var(--rule);margin-top:16px;padding:12px 0}
.bouton{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:3px;padding:7px 14px}
/* Un lien habillé en bouton garde l'encre d'un bouton, pas le bleu d'un lien. */
a.bouton{color:var(--ink);display:inline-block}
.bouton.primaire{background:var(--dial);border-color:var(--dial);color:var(--on-dial,#FFF8EE)}
.bouton.danger{color:var(--low)}
.bouton:disabled{opacity:.4;cursor:default}
.etat{font-size:12.5px;color:var(--ink-soft)}
.etat.erreur{color:var(--low)}
.etat.bien{color:var(--good-ink)}
.fautes{margin:10px 0 0;padding:10px 14px;border-left:2px solid var(--low);background:var(--sunk);
  font-size:12.5px;color:var(--ink-soft);list-style:none}
.fautes li{margin:2px 0}
.vide{padding:18px;font-size:13px;color:var(--ink-faint)}

/* ── Le damier de la semaine et son pinceau ─────────────────────────────────
   Commun aux tranches horaires et aux heures autorisées d'une valeur
   d'attribut : 7 jours × 24 heures, un pinceau, des cases à peindre. */
.pinceau{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px}
.pot{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;border:1px solid var(--rule);
  border-radius:3px;padding:5px 10px;display:flex;gap:6px;align-items:center}
.pot[aria-pressed="true"]{border-color:var(--dial);box-shadow:inset 0 0 0 1px var(--dial)}
.puce{width:9px;height:9px;border-radius:2px;background:var(--c)}
.tableau{overflow-x:auto;border:1px solid var(--rule-soft);background:var(--surface)}
table.semaine{border-collapse:collapse;font-family:var(--mono);font-size:10.5px;min-width:760px;width:100%}
table.semaine th{font-weight:500;color:var(--ink-faint);letter-spacing:.06em;padding:5px 4px;
  border-bottom:1px solid var(--rule-soft);white-space:nowrap}
table.semaine th.jour{text-align:right;padding-right:10px;border-right:1px solid var(--rule-soft);
  border-bottom:0;cursor:pointer;font-size:11px}
table.semaine th.heure{cursor:pointer}
table.semaine th.jour:hover,table.semaine th.heure:hover{color:var(--dial)}
table.semaine td{padding:0;border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
.case{display:block;width:100%;height:26px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--c-txt);background:var(--c-bg);cursor:pointer;line-height:26px;text-align:center}
.case.vide{color:var(--ink-faint);background:transparent}
.case:hover{box-shadow:inset 0 0 0 2px var(--dial)}