/* =========================================================
   Planning ATIMO — socle commun (thèmes clair / sombre)
   Toutes les pages héritent de ce fichier.
   ========================================================= */

@font-face { font-family:'Plex'; src:url('../assets/fonts/plex-sans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../assets/fonts/plex-sans-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Plex'; src:url('../assets/fonts/plex-sans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'PlexMono'; src:url('../assets/fonts/plex-mono-500.woff2') format('woff2'); font-weight:500; font-display:swap; }

/* =========================================================
   NUANCES — 8 paliers réglables au curseur (data-shade)
   0 Blanc · 1 Gris clair · 2 Gris · 3 Gris moyen
   4 Gris foncé · 5 Vert foncé · 6 Bleu foncé · 7 Noir
   Chaque palier est écrit à la main pour garantir le
   contraste : aucune interpolation automatique.
   ========================================================= */

/* Palier 1 (gris clair) = valeur par défaut si rien n'est défini */
:root, :root[data-shade="1"] {
  color-scheme: light;
  --paper:#FFFFFF; --ground:#F6F6F4; --hover:#FAFAF9; --press:#F2F2F0;
  --ink:#1A1C1A; --ink2:#6E726E; --ink3:#9A9E9A;
  --rule:#E6E6E3; --rule-2:#D6D6D2;
  --go:#16694A; --go-bg:#EDF5F1; --danger:#A8362A;
  --shadow:0 12px 30px rgba(20,22,20,.14); --focus:rgba(26,28,26,.07);
}

:root[data-shade="0"] {            /* Blanc */
  color-scheme: light;
  --paper:#FFFFFF; --ground:#FFFFFF; --hover:#F7F7F6; --press:#EFEFEE;
  --ink:#161816; --ink2:#6A6E6A; --ink3:#989C98;
  --rule:#E8E8E6; --rule-2:#D8D8D5;
  --go:#16694A; --go-bg:#EEF6F2; --danger:#A8362A;
  --shadow:0 12px 30px rgba(20,22,20,.13); --focus:rgba(22,24,22,.07);
}

:root[data-shade="2"] {            /* Gris */
  color-scheme: light;
  --paper:#F7F7F5; --ground:#E9E9E5; --hover:#FBFBF9; --press:#EFEFEC;
  --ink:#1A1C19; --ink2:#63665F; --ink3:#8C8F87;
  --rule:#D9D9D3; --rule-2:#C7C7C0;
  --go:#155F44; --go-bg:#E2EFE8; --danger:#9C3226;
  --shadow:0 12px 30px rgba(20,22,20,.16); --focus:rgba(26,28,25,.08);
}

:root[data-shade="3"] {            /* Gris moyen */
  color-scheme: light;
  --paper:#E4E4DE; --ground:#D3D3CC; --hover:#EAEAE5; --press:#DCDCD6;
  --ink:#141613; --ink2:#54574F; --ink3:#7B7E75;
  --rule:#C2C2BA; --rule-2:#ADADA4;
  --go:#0F5138; --go-bg:#D0E2D7; --danger:#8C2C20;
  --shadow:0 12px 30px rgba(20,22,20,.2); --focus:rgba(20,22,19,.1);
}

:root[data-shade="4"] {            /* Gris foncé */
  color-scheme: dark;
  --paper:#54564F; --ground:#46483F; --hover:#5E605880; --press:#63655C;
  --ink:#F2F2EE; --ink2:#C2C4BB; --ink3:#9DA096;
  --rule:#616359; --rule-2:#75776C;
  --go:#8FCBA5; --go-bg:rgba(143,203,165,.18); --danger:#E6947E;
  --shadow:0 12px 30px rgba(0,0,0,.32); --focus:rgba(242,242,238,.12);
}

:root[data-shade="5"] {            /* Vert foncé */
  color-scheme: dark;
  --paper:#18211A; --ground:#101711; --hover:#1F2A21; --press:#253227;
  --ink:#E3EAE4; --ink2:#9FAEA2; --ink3:#748076;
  --rule:#25302700; --rule:#253027; --rule-2:#334036;
  --go:#6FBE8B; --go-bg:rgba(111,190,139,.15); --danger:#D9836B;
  --shadow:0 12px 30px rgba(0,0,0,.5); --focus:rgba(227,234,228,.12);
}

:root[data-shade="6"] {            /* Bleu foncé */
  color-scheme: dark;
  --paper:#141B27; --ground:#0C121C; --hover:#1A2331; --press:#20293A;
  --ink:#DFE6F0; --ink2:#9AA5B6; --ink3:#6E7889;
  --rule:#212B3A; --rule-2:#2E3A4C;
  --go:#67B9D6; --go-bg:rgba(103,185,214,.15); --danger:#DE8570;
  --shadow:0 12px 30px rgba(0,0,0,.55); --focus:rgba(223,230,240,.12);
}

:root[data-shade="7"] {            /* Noir */
  color-scheme: dark;
  --paper:#0C0C0C; --ground:#000000; --hover:#151515; --press:#1C1C1C;
  --ink:#E9E9E9; --ink2:#9A9A9A; --ink3:#6E6E6E;
  --rule:#1E1E1E; --rule-2:#2C2C2C;
  --go:#68BE8A; --go-bg:rgba(104,190,138,.14); --danger:#DA8068;
  --shadow:0 12px 30px rgba(0,0,0,.7); --focus:rgba(233,233,233,.14);
}

/* ---------- Réinitialisation ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
h1,h2,p { margin:0; }
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; text-align:left; }
input { font:inherit; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:3px; }
.mono { font-family:'PlexMono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

/* ---------- Bandeau ---------- */
.top { background:var(--paper); border-bottom:1px solid var(--rule); }
.top__in {
  max-width:760px; margin:0 auto;
  padding:12px clamp(16px,4vw,24px);
  display:flex; align-items:center; gap:9px;
}
.top__mark { width:19px; height:19px; color:var(--ink); flex:none; }
.top__name { font-size:0.95rem; font-weight:600; letter-spacing:-0.01em; }
.top__name span { color:var(--ink3); font-weight:400; }

/* ---------- Réglage de la nuance ---------- */
.shade { margin-left:auto; flex:none; position:relative; }
.shade__btn {
  width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:6px;
  color:var(--ink2);
  transition:background .13s ease, color .13s ease, border-color .13s ease;
}
.shade__btn:hover { background:var(--ground); color:var(--ink); border-color:var(--rule-2); }
.shade__btn svg { width:16px; height:16px; }

.shade__panel {
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  width:236px; padding:14px;
  background:var(--paper); border:1px solid var(--rule-2); border-radius:8px;
  box-shadow:var(--shadow);
  display:none;
}
.shade__panel[open] { display:block; }
.shade__head {
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:11px;
}
.shade__title { font-size:0.78rem; font-weight:600; color:var(--ink2); }
.shade__name { font-size:0.78rem; color:var(--ink3); }

/* Curseur */
.shade__range { width:100%; margin:0; background:transparent; -webkit-appearance:none; appearance:none; }
.shade__range:focus { outline:none; }
.shade__range::-webkit-slider-runnable-track {
  height:6px; border-radius:3px; border:1px solid var(--rule-2);
  background:linear-gradient(to right,#FFFFFF 0%,#F0F0EC 14%,#D3D3CC 28%,#8E9088 42%,#46483F 57%,#101711 71%,#0C121C 85%,#000000 100%);
}
.shade__range::-moz-range-track {
  height:6px; border-radius:3px; border:1px solid var(--rule-2);
  background:linear-gradient(to right,#FFFFFF 0%,#F0F0EC 14%,#D3D3CC 28%,#8E9088 42%,#46483F 57%,#101711 71%,#0C121C 85%,#000000 100%);
}
.shade__range::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; margin-top:-6px;
  border-radius:50%; background:var(--paper);
  border:2px solid var(--ink); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.shade__range::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:2px solid var(--ink); cursor:pointer;
}
.shade__ticks {
  display:flex; justify-content:space-between;
  margin-top:7px; font-size:0.68rem; color:var(--ink3);
}
.shade__auto {
  margin-top:12px; padding-top:11px; border-top:1px solid var(--rule);
  width:100%; font-size:0.78rem; color:var(--ink2); text-align:left;
}
.shade__auto:hover { color:var(--ink); }
.shade__auto[data-on="1"] { color:var(--go); font-weight:500; }

/* ---------- Page ---------- */
.page { max-width:760px; margin:0 auto; padding:clamp(20px,4vw,32px) clamp(16px,4vw,24px) 60px; }
.ask { font-size:1.02rem; font-weight:600; letter-spacing:-0.015em; margin-bottom:3px; }
.ask + p { color:var(--ink2); font-size:0.865rem; margin-bottom:22px; }

/* ---------- Listes ---------- */
.group { margin-top:26px; }
.group:first-child { margin-top:0; }
.group__h { font-size:0.76rem; font-weight:600; color:var(--ink3); padding:0 2px 7px; }

.list { background:var(--paper); border:1px solid var(--rule); border-radius:6px; overflow:hidden; }
.row {
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px clamp(13px,3vw,16px);
  border-bottom:1px solid var(--rule);
  transition:background .13s ease;
}
.row:last-child { border-bottom:none; }
.row:hover { background:var(--hover); }
.row:active { background:var(--press); }
.row__main { flex:1; min-width:0; }
.row__name {
  font-size:0.95rem; font-weight:500; letter-spacing:-0.008em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row__sub {
  font-size:0.8rem; color:var(--ink2); margin-top:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row__end { flex:none; display:flex; align-items:center; gap:11px; color:var(--ink3); }
.row__chev { width:15px; height:15px; }

.tag { font-size:0.77rem; font-weight:500; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.tag--go { color:var(--go); background:var(--go-bg); }
.tag--n  { color:var(--ink2); background:var(--ground); border:1px solid var(--rule); }

.note { margin-top:26px; font-size:0.8rem; color:var(--ink3); padding:0 2px; line-height:1.55; }

/* ---------- Boutons ---------- */
.btn {
  flex:1; padding:11px; border-radius:6px;
  font-size:0.9rem; font-weight:500; text-align:center;
  border:1px solid var(--rule-2); color:var(--ink);
  transition:background .13s ease;
}
.btn:hover { background:var(--ground); }
.btn--go { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--go:hover { background:var(--ink2); }

/* ---------- Boîte de dialogue ---------- */
.veil {
  position:fixed; inset:0; z-index:50;
  display:none; align-items:flex-end; justify-content:center;
  background:rgba(20,22,20,.34);
}
:root[data-theme="dark"] .veil { background:rgba(0,0,0,.58); }
.veil[open] { display:flex; }
.box {
  width:100%; max-width:430px;
  background:var(--paper);
  border-radius:12px 12px 0 0;
  padding:22px clamp(18px,4vw,24px) calc(22px + env(safe-area-inset-bottom));
  box-shadow:var(--shadow);
}
@media (min-width:520px) {
  .veil { align-items:center; }
  .box { border-radius:10px; padding-bottom:22px; border:1px solid var(--rule); }
}
.box h2 { font-size:1rem; font-weight:600; letter-spacing:-0.015em; }
.box p { margin-top:6px; color:var(--ink2); font-size:0.855rem; line-height:1.55; }

label { display:block; font-size:0.79rem; font-weight:500; color:var(--ink2); margin:20px 0 6px; }
input[type="text"], .field-input {
  width:100%; padding:11px 12px;
  border:1px solid var(--rule-2); border-radius:6px;
  background:var(--paper); color:var(--ink);
  font-size:16px; /* empêche le zoom auto iOS */
  font-family:'PlexMono',monospace; text-transform:uppercase; letter-spacing:.08em;
}
input[type="text"]:focus, .field-input:focus {
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--focus);
}
input::placeholder { font-family:'Plex',sans-serif; text-transform:none; letter-spacing:0; color:var(--ink3); }
.err { font-size:0.79rem; color:var(--danger); margin-top:6px; min-height:1.1em; }
.acts { display:flex; gap:9px; margin-top:20px; }

/* Liens secondaires sous un formulaire */
.liens {
  display:flex; justify-content:space-between; gap:12px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
}
.liens button { font-size:0.81rem; color:var(--ink2); }
.liens button:hover { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* Mots de passe : chasse normale, pas de majuscules forcées */
input[type="password"], #c-code {
  text-transform:none; letter-spacing:normal; font-family:'Plex',system-ui,sans-serif;
}

/* Adresse de confirmation devinée à partir des initiales */
.mailto-hint { font-size:0.79rem; color:var(--ink3); min-height:1.1em; margin-top:-2px; }
.mailto-hint b { color:var(--ink2); font-family:'PlexMono',monospace; font-weight:500; }

/* Texte d'accord */
.consent {
  margin-top:16px; padding:12px 13px;
  background:var(--ground); border:1px solid var(--rule); border-radius:6px;
  font-size:0.79rem; color:var(--ink2); line-height:1.55;
}
.consent b { color:var(--ink); font-weight:600; }

/* ---------- Adaptations ---------- */
@media (prefers-reduced-motion:reduce) { *{ transition:none !important; animation:none !important; } }
@media (pointer:coarse) { .row { min-height:58px; } .btn { padding-block:13px; } }
@media (max-width:360px) { .row { padding:12px 13px; gap:10px; } .row__name { font-size:0.92rem; } }