/* tools.deskio.io — toutes les valeurs viennent de /tokens.css (design/tokens.css). */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{margin:0;min-height:100dvh;background:var(--fond);color:var(--encre);
  font:var(--t-texte)/var(--l-texte) var(--police-texte);letter-spacing:var(--e-texte);overflow-x:hidden}
h1{margin:0;font-size:var(--t-titre);line-height:var(--l-titre);letter-spacing:var(--e-titre);font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Le geste : « Outils » posé sur le trait de l'établi, coupé par le bord ── */
.etabli{position:fixed;left:0;right:0;bottom:0;pointer-events:none;z-index:0;
  border-top:var(--trait-etabli) solid var(--trait);
  height:calc(var(--t-geste) * var(--geste-visible));overflow:hidden}
.geste{display:block;font-family:var(--police-geste);font-weight:500;font-size:var(--t-geste);
  line-height:var(--l-geste);letter-spacing:var(--e-geste);color:var(--sourd);
  margin:-.04em 0 0 -.07em;white-space:nowrap;user-select:none}
.atelier .etabli{left:var(--rail-l)}
@media (max-width:640px){.atelier .etabli{left:0}}

/* ── Connexion : formulaire en haut à droite, vide en haut à gauche ── */
.porte{position:relative;z-index:1;display:flex;justify-content:flex-end;
  padding:var(--e-5) var(--gouttiere) calc(var(--t-geste) * var(--geste-visible) + var(--e-4))}
.formulaire{width:min(100%,var(--form-l));display:flex;flex-direction:column;gap:var(--e-2)}
.formulaire h1{margin-bottom:var(--e-3)}
label{font-size:var(--t-petit);line-height:var(--l-petit);letter-spacing:var(--e-petit);color:var(--sourd);margin-top:var(--e-2)}
input{height:var(--champ-h);width:100%;padding:0 var(--e-2);border:var(--filet) solid var(--sourd);border-radius:var(--r-champ);
  background:var(--plan);color:var(--encre);font:inherit;transition:border-color var(--duree)}
input:hover{border-color:var(--encre)}
input:focus-visible,button:focus-visible{outline:var(--focus) solid var(--trait);outline-offset:var(--focus)}

.bouton{min-height:var(--champ-h);padding:var(--e-1) var(--e-4);border:0;border-radius:var(--r-bouton);display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  background:var(--trait);color:var(--sur-trait);font:700 var(--t-texte)/1 var(--police-texte);cursor:pointer;
  transition:transform var(--duree)}
.formulaire .bouton{margin-top:var(--e-3)}
.bouton:active{transform:translateY(1px)}
.lien{align-self:flex-start;padding:var(--e-1) 0;border:0;background:none;color:var(--sourd);font:inherit;font-size:var(--t-petit);
  text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.lien:hover{color:var(--encre)}
.message{margin:var(--e-2) 0 0;font-size:var(--t-petit);line-height:var(--l-petit);color:var(--encre)}
.message.erreur{color:var(--alerte)}

/* ── Atelier (connecté) : le rail à gauche, l'invitation en haut ── */
.poste{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:var(--e-3);
  padding:var(--e-5) var(--gouttiere) calc(var(--t-geste) * var(--geste-visible) + var(--e-4))}
.poste .formulaire{gap:var(--e-2)}

@media (max-width:640px){
  .porte{justify-content:stretch;padding-top:var(--e-4)}
  .formulaire{width:100%}
  .poste{padding-top:var(--e-5)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Rail : les initiales du profil passent en encre sombre sur l'accent menthe (blanc sur menthe = 1,6:1). */
.rail .r-ava.ph{color:var(--sur-trait)}
/* Fond opaque sous le contenu : la bande du rail peinte sur <body> (rail.css) trompe la mesure des contrastes. */
.atelier .wrap,.atelier .etabli{background:var(--fond)}

/* ── Adresse du calepinage (12/11/2026) : un champ, les suggestions de la Base Adresse Nationale dessous ── */
.adresse{width:min(100%,var(--adresse-l))}
.adresse .actuelle{margin:0;font-size:var(--t-petit);line-height:var(--l-petit);color:var(--sourd)}
.adresse .actuelle b{color:var(--encre);font-weight:600}
.combo{position:relative}
.combo ul{position:absolute;left:0;right:0;top:calc(100% + var(--e-1));z-index:2;margin:0;padding:var(--e-1) 0;list-style:none;
  max-height:var(--liste-h);overflow-y:auto;background:var(--plan);border:var(--filet) solid var(--sourd);border-radius:var(--r-champ)}
.combo li{padding:var(--e-1) var(--e-2);cursor:pointer;line-height:var(--l-petit)}
.combo li small{display:block;font-size:var(--t-petit);color:var(--sourd)}
.combo li:hover,.combo li[aria-selected="true"]{background:var(--fond);color:var(--trait)}

/* ── Versions des modules (12/11/2026) : un module = son nom, ses versions sur une ligne, ses gestes dessous ── */
.module{display:flex;flex-direction:column;gap:var(--e-2);padding-top:var(--e-3);border-top:var(--filet) solid var(--sourd);width:min(100%,var(--adresse-l))}
.module h2{margin:0;font-size:var(--t-texte);line-height:var(--l-texte);font-weight:700}
.etats{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-4);margin:0}
.etats div{display:flex;gap:var(--e-1);align-items:baseline}
.etats dt{font-size:var(--t-petit);line-height:var(--l-petit);color:var(--sourd)}
.etats dd{margin:0;font-weight:700}
.etats .travail dd{color:var(--trait)}
.actions,.actions form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
.actions .bouton{display:inline-flex;align-items:center;text-decoration:none}
.bouton.second{background:none;color:var(--trait);border:var(--filet) solid var(--trait)}
.lien[data-arme],.bouton[data-arme]{color:var(--alerte);border-color:var(--alerte)}
.bouton.second[data-arme]{background:none}
/* Clients d'un module : un client par ligne, sa version en place, Pousser / Revenir à droite */
.clients{list-style:none;margin:var(--e-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--e-2)}
.clients li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2);padding-top:var(--e-2);border-top:var(--filet) solid var(--plan)}
.clients p{margin:0}
.clients small{font-size:var(--t-petit);color:var(--sourd)}
.clients form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
/* Page d'un module : les deux versions l'une sous l'autre, chacune avec sa date ou son geste */
.versions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e-3)}
.versions li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.versions small{font-size:var(--t-petit);color:var(--sourd)}
.versions form{display:flex}
.module > form{margin-top:var(--e-2)}
.clients .retard{color:var(--trait)}

/* ── Écran de gestion d'un module (12/11/2026, maquette validée « proche du CRM d'Earth, plus pro, plus sobre ») ──
   Titre à l'échelle de l'app, une ligne de 3 repères, des tableaux sobres avec une pastille d'état par ligne, l'historique dessous.
   Pas de geste « Outils » sur cet écran. */
.gestion .etabli{display:none}
.mp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--e-3);align-content:start;width:min(100%,var(--gestion-l));min-width:0;padding:var(--e-4) var(--gouttiere) var(--e-5)}
.mp-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e-2) var(--e-3)}
.mp-tete h1{font-size:var(--t-titre-app);line-height:var(--l-titre)}
.mp-tete p{margin:var(--e-1) 0 0;color:var(--sourd);font-size:var(--t-tableau)}
.mp-actions,.mp-actions form,.mp td form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1)}
.mp-btn{display:inline-flex;align-items:center;gap:var(--e-1);min-height:2.4rem;padding:0 var(--e-2);border-radius:var(--r-ctrl);
  border:var(--filet) solid var(--ligne);background:var(--carte);color:var(--encre);font:600 var(--t-tableau)/1 var(--police-texte);
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color var(--duree)}
.mp-btn:hover{border-color:var(--sourd)}
.mp-btn:focus-visible{outline:var(--focus) solid var(--trait);outline-offset:var(--focus)}
.mp-btn.prim{background:var(--trait);border-color:var(--trait);color:var(--sur-trait)}
.mp-btn.petit{min-height:2rem;font-size:var(--t-entete)}
.mp-btn.discret{background:none;border-color:transparent;color:var(--sourd)}
.mp-btn.discret:hover{color:var(--encre)}
.mp-btn[disabled]{opacity:.5;cursor:default}
.mp-btn svg{width:14px;height:14px;flex:none}
.mp-btn[data-arme]{color:var(--alerte);border-color:var(--alerte);background:var(--carte)}
.mp-chiffres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;background:var(--carte);border:var(--filet) solid var(--ligne);border-radius:var(--r-carte)}
.mp-chiffres div{padding:var(--e-2) var(--e-3);border-left:var(--filet) solid var(--ligne-2);min-width:0}
.mp-chiffres div:first-child{border-left:0}
.mp-chiffres dt{color:var(--sourd);font-size:var(--t-entete)}
.mp-chiffres dd{margin:2px 0 0;font-weight:700;font-variant-numeric:tabular-nums}
.mp-carte{background:var(--carte);border:var(--filet) solid var(--ligne);border-radius:var(--r-carte);min-width:0}
.mp-carte > header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-1) var(--e-3);padding:var(--e-2) var(--e-3);border-bottom:var(--filet) solid var(--ligne-2)}
.mp-carte h2{margin:0;font-size:var(--t-texte);font-weight:700}
.mp-carte h2 small{margin-left:var(--e-1);color:var(--pale);font-weight:500;font-size:var(--t-entete)}
.mp-defile{overflow-x:auto;position:relative}
.mp table{width:100%;border-collapse:collapse;font-size:var(--t-tableau)}
.mp th{text-align:left;font-weight:600;color:var(--sourd);font-size:var(--t-entete);padding:var(--e-2) var(--e-3);border-bottom:var(--filet) solid var(--ligne-2);white-space:nowrap}
.mp td{padding:var(--e-2) var(--e-3);border-bottom:var(--filet) solid var(--ligne-2);vertical-align:middle;font-variant-numeric:tabular-nums}
.mp tr:last-child td{border-bottom:0}
.mp td.nom{font-weight:700}
.mp td.date{white-space:nowrap}
.mp td.fin{text-align:right;white-space:nowrap}
.mp td.fin form{justify-content:flex-end}
.mp tr.vide td{color:var(--pale)}
.mp .mono{font-family:var(--police-mono);font-size:var(--t-mono);color:var(--sourd);white-space:nowrap}
.mp-pastille{display:inline-flex;align-items:center;gap:var(--e-1);padding:3px 9px;border-radius:var(--r-pastille);font-weight:600;font-size:var(--t-entete);white-space:nowrap}
.mp-pastille::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mp-pastille.ok{color:var(--ok);background:var(--ok-fond)}
.mp-pastille.retard{color:var(--retard);background:var(--retard-fond)}
.mp-pastille.neutre{color:var(--sourd);background:var(--neutre-fond)}
.mp-journal{list-style:none;margin:0;padding:var(--e-1) var(--e-3) var(--e-2)}
.mp-journal li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--e-2);padding:var(--e-2) 0;border-bottom:var(--filet) solid var(--ligne-2);font-size:var(--t-tableau)}
.mp-journal li:last-child{border-bottom:0}
.mp-journal time{grid-row:span 2;color:var(--pale);font-size:var(--t-entete);font-variant-numeric:tabular-nums;white-space:nowrap}
.mp-journal small{color:var(--sourd);font-size:var(--t-entete)}
.mp-journal .rien{display:block;color:var(--sourd)}
.mp .message{margin:0}
@media (max-width:640px){
  .mp-chiffres{grid-template-columns:minmax(0,1fr)}
  .mp-chiffres div{border-left:0;border-top:var(--filet) solid var(--ligne-2)}
  .mp-chiffres div:first-child{border-top:0}
}