@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=JetBrains+Mono:wght@500&display=swap');
/* Page d'installation d'une tour (super utilisateurs). Reprise de la maquette validée avec Manuel.
   Mise en page : assistant en étapes, rail des étapes à gauche (en haut sur téléphone), une carte par étape. Couleurs reprises d'iRempla. */
:root{
  --fond:#f3f5fa; --carte:#fff; --texte:#141b2d; --doux:#5b6478; --trait:#dde2ee;
  --accent:#3b5bdb; --accent-fonce:#2f4ac0; --accent-doux:#eef1ff; --sur-accent:#fff;
  --ok:#2b8a3e; --ok-doux:#e6f4ea; --alerte:#b35c00; --alerte-doux:#fff4e0;
  --repos:#eef0f5; --repos-texte:#7a8399;
  --f-titre:"Lato",system-ui,sans-serif; --f-texte:"Lato",system-ui,sans-serif; --f-code:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fond:#0f1424; --carte:#171d31; --texte:#e7eaf3; --doux:#9aa3b8; --trait:#2a3250;
  --accent:#7c95ff; --accent-fonce:#9aaeff; --accent-doux:#1f2848; --sur-accent:#0f1424;
  --ok:#63c27a; --ok-doux:#163223; --alerte:#f0a64a; --alerte-doux:#3a2a12;
  --repos:#20273f; --repos-texte:#7f88a3; color-scheme:dark}}
:root[data-theme="dark"]{
  --fond:#0f1424; --carte:#171d31; --texte:#e7eaf3; --doux:#9aa3b8; --trait:#2a3250;
  --accent:#7c95ff; --accent-fonce:#9aaeff; --accent-doux:#1f2848; --sur-accent:#0f1424;
  --ok:#63c27a; --ok-doux:#163223; --alerte:#f0a64a; --alerte-doux:#3a2a12;
  --repos:#20273f; --repos-texte:#7f88a3; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--fond);color:var(--texte);font-family:var(--f-texte);font-size:15px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.page{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px}
header.tete{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.marque{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--sur-accent);display:grid;place-items:center;font-weight:900}
.marque h1{font-family:var(--f-titre);font-size:1.25rem;margin:0;text-wrap:balance}
.marque small{display:block;color:var(--doux);font-size:.8rem}
.maquette{background:var(--alerte-doux);color:var(--alerte);border-radius:999px;padding:4px 12px;font-size:.8rem;font-weight:700}
.modeles{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--doux)}
nav.etapes ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;position:sticky;top:16px}
nav.etapes button{width:100%;text-align:left;background:none;border:0;color:var(--doux);font:inherit;padding:8px 10px;border-radius:10px;display:flex;gap:10px;align-items:center;cursor:pointer}
nav.etapes button:hover{background:var(--carte)}
nav.etapes .num{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--trait);display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none}
nav.etapes li.fait .num{background:var(--ok-doux);border-color:var(--ok);color:var(--ok)}
nav.etapes li.actif button{background:var(--carte);color:var(--texte);font-weight:700;box-shadow:0 1px 3px rgba(20,27,45,.08)}
nav.etapes li.actif .num{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
main{min-width:0}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px}
.carte h2{font-family:var(--f-titre);font-size:1.35rem;margin:0}
.sous{color:var(--doux);margin:-10px 0 0;font-size:.9rem}
.questions{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
label.champ{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;min-width:0}
label.champ span.aide{font-weight:400;color:var(--doux);font-size:.8rem}
input,select,textarea{font:inherit;color:var(--texte);background:var(--fond);border:1px solid var(--trait);border-radius:8px;padding:8px 10px;min-width:0;width:100%}
input[type=checkbox],input[type=color]{width:auto}
input[type=color]{padding:2px;height:36px;width:48px}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
fieldset{border:1px solid var(--trait);border-radius:12px;padding:14px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
legend{font-weight:700;padding:0 6px}
.case{display:flex;gap:8px;align-items:center;font-size:.9rem}
.case input{flex:none;width:18px;height:18px;accent-color:var(--accent)}
.boutons{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;border-top:1px solid var(--trait);padding-top:16px}
button.b{font:inherit;font-weight:700;border-radius:10px;padding:9px 16px;border:1px solid var(--trait);background:var(--carte);color:var(--texte);cursor:pointer}
button.b.principal{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
button.b.principal:hover{background:var(--accent-fonce)}
button.b.petit{padding:5px 10px;font-size:.85rem;font-weight:700}
.tableau{overflow-x:auto;border:1px solid var(--trait);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:8px 10px;border-bottom:1px solid var(--trait);text-align:left;white-space:nowrap}
tr:last-child td{border-bottom:0}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--doux)}
.lignes{display:flex;flex-direction:column;gap:8px}
.ligne{display:grid;grid-template-columns:80px minmax(0,1fr) 110px 110px 56px 36px;gap:8px;align-items:center}
.ligne.admin{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 80px minmax(0,1.4fr) 36px}
.ligne.entete{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);font-weight:700}
.x{border:0;background:none;color:var(--doux);font-size:1.1rem;cursor:pointer;border-radius:8px;height:36px}
.x:hover{background:var(--repos)}
.motif{display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:var(--fond);border-radius:12px;min-height:56px;align-items:center}
.pastille{font-family:var(--f-code);font-size:.8rem;font-weight:500;border-radius:8px;padding:6px 9px;color:#fff;background:var(--c,var(--accent));display:inline-flex;align-items:center;gap:6px;line-height:1}
.pastille.repos{background:var(--repos);color:var(--repos-texte)}
.pastille small{opacity:.7;font-size:.7rem}
.ajouts{display:flex;flex-wrap:wrap;gap:6px}
.cal td,.cal th{padding:4px;text-align:center}
.cal td:first-child,.cal th:first-child{text-align:left;padding-left:10px;position:sticky;left:0;background:var(--carte)}
.cal .pastille{padding:4px 5px;font-size:.7rem;min-width:30px;justify-content:center}
.cal th small{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.cal tr.mois th{text-align:left;color:var(--texte);border-left:2px solid var(--accent);padding-left:8px;position:static}
.cal tr.mois th:first-child{border-left:0;position:sticky}
.cal .we{background:var(--fond)}
.grille-rempla td,.grille-rempla th{text-align:center}
.grille-rempla td:first-child,.grille-rempla th:first-child{text-align:left}
.grille-rempla input{width:20px;height:20px;accent-color:var(--accent)}
.note{background:var(--accent-doux);border-radius:12px;padding:12px 14px;font-size:.88rem}
.note.alerte{background:var(--alerte-doux);color:var(--alerte)}
.recap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.recap section{border:1px solid var(--trait);border-radius:12px;padding:12px 14px;min-width:0}
.recap h3{margin:0 0 6px;font-size:.95rem;display:flex;justify-content:space-between;gap:8px}
.recap h3 button{border:0;background:none;color:var(--accent);font:inherit;font-size:.8rem;cursor:pointer}
.recap p{margin:2px 0;font-size:.86rem;color:var(--doux);overflow-wrap:anywhere}
.succes{background:var(--ok-doux);color:var(--ok);border-radius:12px;padding:16px;font-weight:700}
.succes p{font-weight:400;color:var(--texte);margin:6px 0 0}
.mobile-etape{display:none}
@media (max-width:760px){
  .page{grid-template-columns:minmax(0,1fr)}
  nav.etapes{display:none}
  .mobile-etape{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--doux);margin-bottom:10px;gap:10px}
  .mobile-etape .barre{flex:1;height:6px;border-radius:3px;background:var(--trait);overflow:hidden}
  .mobile-etape .barre i{display:block;height:100%;background:var(--accent)}
  .carte{padding:18px}
  .ligne{grid-template-columns:70px minmax(0,1fr) 36px;}
  .ligne .h,.ligne .coul{grid-column:auto}
  .ligne.entete{display:none}
  .ligne.admin{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 36px}
}
/* Frises reprises de l'administration d'iRempla (délais des mails, limites de solde) */
:root{--g1:#2b8a3e;--g2:#1971c2;--g3:#7048e8;--g4:#868e96;--rouge:#c92a2a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--g1:#51cf66;--g2:#4dabf7;--g3:#9775fa;--g4:#adb5bd;--rouge:#ff6b6b}}
:root[data-theme="dark"]{--g1:#51cf66;--g2:#4dabf7;--g3:#9775fa;--g4:#adb5bd;--rouge:#ff6b6b}
.g1{--c:var(--g1)}.g2{--c:var(--g2)}.g3{--c:var(--g3)}.g4{--c:var(--g4)}
.dm-urgent{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:var(--alerte-doux);color:var(--texte)}
.dm-eclair{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:var(--alerte);color:var(--carte);font-weight:900}
.dm-frise{display:grid;grid-template-columns:minmax(12rem,15rem) minmax(0,1fr);gap:10px 20px;align-items:center;margin-top:18px}
.dm-groupe b{display:flex;align-items:center;gap:8px}
.dm-groupe b::before{content:"";width:11px;height:11px;border-radius:99px;background:var(--c)}
.dm-qui{display:block;font-size:.84rem;color:var(--doux);line-height:1.35;margin-top:2px}
.dm-piste{position:relative;height:3.2rem;border-radius:10px;background:var(--fond)}
.dm-zone{position:absolute;top:0;bottom:0;left:1.1rem;right:1.1rem;background:repeating-linear-gradient(90deg,transparent 0 calc(var(--pas) - 1px),var(--trait) calc(var(--pas) - 1px) var(--pas))}
.dm-barre{position:absolute;top:50%;right:-1.1rem;height:8px;margin-top:-4px;border-radius:0 99px 99px 0;background:color-mix(in srgb,var(--c) 30%,transparent)}
.dm-curseur{position:absolute;top:50%;z-index:1;width:1.5rem;height:1.5rem;margin:-.75rem 0 0 -.75rem;padding:0;border-radius:99px;background:var(--c);border:3px solid var(--carte);box-shadow:0 0 0 2px var(--c),0 2px 6px rgba(0,0,0,.2)}
button.dm-curseur{cursor:grab;touch-action:none}
button.dm-curseur:hover{transform:scale(1.12)}
.dm-heure{position:absolute;bottom:calc(100% + .25rem);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.8rem;font-weight:700;color:var(--c);background:var(--carte);padding:0 4px;border-radius:6px;pointer-events:none}
.dm-axe{position:relative;height:1.3rem;margin:0 1.1rem;font-size:.76rem;color:var(--doux)}
.dm-axe span,.ls-axe span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.dm-regle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
.dm-regle>span{padding:7px 6px;text-align:center;font-size:.85rem;font-weight:700;color:var(--carte);background:var(--c)}
.dm-regle>span:first-child{border-radius:8px 0 0 8px}.dm-regle>span:last-child{border-radius:0 8px 8px 0}
.exactes summary{cursor:pointer;font-weight:700;color:var(--accent)}
.exactes .champs{margin-top:12px}
.ls-piste{position:relative;margin:30px 14px 4px;height:3rem}
.ls-fond{position:absolute;inset:0;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--rouge) 35%,var(--carte)),color-mix(in srgb,var(--g1) 30%,var(--carte)) 50%,color-mix(in srgb,var(--g2) 35%,var(--carte)))}
.ls-hors{position:absolute;top:-4px;bottom:-4px;background:repeating-linear-gradient(135deg,rgba(20,27,45,.5) 0 4px,rgba(20,27,45,.25) 4px 8px);pointer-events:none}
.ls-hors.bas{left:-14px;border-radius:8px 0 0 8px}.ls-hors.haut{right:-14px;border-radius:0 8px 8px 0}
.ls-zero{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--texte);opacity:.55}
.ls-curseur{position:absolute;top:-8px;bottom:-8px;width:22px;margin-left:-11px;padding:0;border:0;background:none;cursor:grab;touch-action:none;z-index:1}
.ls-curseur::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;border-radius:2px;background:var(--c)}
.ls-curseur::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:99px;background:var(--c);border:3px solid var(--carte);box-shadow:0 1px 5px rgba(0,0,0,.35)}
.ls-curseur.bas{--c:var(--rouge)}.ls-curseur.haut{--c:var(--accent)}
.ls-valeur{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.82rem;font-weight:700;color:var(--carte);background:var(--c);padding:1px 8px;border-radius:99px}
.ls-axe{position:relative;height:1.3rem;margin:0 14px;font-size:.76rem;color:var(--doux);font-variant-numeric:tabular-nums}
.ls-legende{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.84rem;color:var(--doux)}
.ls-legende i{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:6px}
.ls-legende i.bas{background:var(--rouge)}.ls-legende i.haut{background:var(--accent)}
@media (max-width:760px){.dm-frise{grid-template-columns:minmax(0,1fr);gap:4px}.dm-piste{margin:22px 0 8px}.dm-vide{display:none}.dm-regle{grid-template-columns:1fr 1fr}.dm-regle>span{border-radius:8px!important}}
@media (prefers-reduced-motion:no-preference){.carte{animation:entre .18s ease-out}@keyframes entre{from{opacity:.4;transform:translateY(4px)}}}
a.b{font:inherit;font-weight:700;border-radius:10px;padding:5px 10px;font-size:.85rem;border:1px solid var(--trait);background:var(--carte);color:var(--texte);text-decoration:none}
.page>main.large{grid-column:1/-1}
.modeles-ligne{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:var(--doux)}
.erreurs{background:var(--alerte-doux);color:var(--alerte);border-radius:12px;padding:12px 14px;font-size:.88rem}
.erreurs ul{margin:6px 0 0;padding-left:20px}
/* Pages ouvertes depuis un lien reçu par mail (invitation des administrateurs) : une seule carte, étroite. */
.page.etroite{max-width:520px;display:flex;flex-direction:column;gap:24px}
.carte form{display:flex;flex-direction:column;gap:14px}
.identite{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:.9rem}
.identite dt{color:var(--doux)}
.identite dd{margin:0;font-weight:700;overflow-wrap:anywhere}
a.b.principal{background:var(--accent);border-color:var(--accent);color:var(--sur-accent);padding:9px 16px;font-size:inherit;display:inline-block}
a.b.principal:hover{background:var(--accent-fonce)}
button.b:disabled{opacity:.5;cursor:not-allowed}
/* Étape « Envoi des demandes » : bande des groupes selon le solde. */
.gp-fond{position:absolute;inset:0;border-radius:8px;overflow:hidden}
.gs{position:absolute;top:0;bottom:0;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 28%,var(--carte));border-right:2px solid var(--carte)}
.gs b{font-size:.8rem;color:var(--c);white-space:nowrap}
.gp-piste .ls-hors{opacity:.45}
.ls-curseur.neutre{--c:var(--texte)}

/* Pages des membres et inscriptions à valider */
.attente{background:var(--alerte-doux);color:var(--alerte);border-radius:12px;padding:16px}
.attente p{color:var(--texte);margin:6px 0 0}
.actions{display:flex;gap:6px;flex-wrap:wrap}
table.semaine th,table.semaine td{padding:8px 4px;text-align:center;white-space:normal}