/* Sombre, toujours (Micka, 14 octobre : « tout le temps sombre,
   magnifique »), sans suivre le réglage du téléphone. Choisi parmi trois
   maquettes dans l'esprit de Revolut (maquettes/). Toutes les couleurs
   passent par ces variables : changer l'identité ne touchera qu'ici. */
:root{
  color-scheme:dark;
  --bg:#000; --surface:#1c1c1e; --sunken:#2c2c2e;
  --fg:#f5f5f7; --muted:#98989f; --line:#2f2f33;
  --accent:#4f8bff; --accent-fg:#fff; --accent-soft:#1a2a4d;
  --ok:#5fd38d; --ok-soft:#173523; --warn:#f2c14e; --warn-soft:#3a2f12;
  --off:#98989f; --off-soft:#2c2c2e; --bad:#ff6b6b; --bad-soft:#3d1717;
  --orange:#ff9f5a; --orange-soft:#3d2614; --tw:#6cc4ff;
  /* le rose d'Instagram : un compte Instagram se distingue d'un X d'un coup d'œil (Micka, 13 oct.) */
  --insta:#ff6fae;
  --ombre:none;
}
*{box-sizing:border-box}
/* « caché » doit gagner sur tout : un champ en grille restait visible malgré
   son attribut hidden (cas réel : le choix du compte écran, le motif d'un refus) */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
/* width 100 % : centrée par des marges automatiques dans la grille du menu,
   la page se réduisait à la largeur de son contenu (cas réel : la liste des
   modèles tenait dans une colonne de 590 px sur un écran de 1 360) */
.page{max-width:560px;width:100%;margin:0 auto;padding:16px 16px 40px;min-width:0}
.page.large{max-width:1240px}
/* Le menu des écrans : en haut sur téléphone, à gauche sur PC comme dans
   l'artefact (Micka, 13 octobre). Les managers seulement. */
.menu{display:flex;flex-wrap:wrap;gap:4px;padding:10px 16px 0}
.menu a{padding:8px 12px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:15px}
.menu a:hover{background:var(--sunken);color:var(--fg)}
.menu a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
/* sur PC, Micka supervise : la page s'élargit, les cartes passent sur deux colonnes */
@media (min-width:1000px){
  .coque:not(.seul){display:grid;grid-template-columns:210px minmax(0,1fr)}
  .menu{flex-direction:column;flex-wrap:nowrap;padding:22px 10px;border-right:1px solid var(--line);
    min-height:100vh;position:sticky;top:0;align-self:start;background:var(--surface)}
  .page{max-width:1080px}
  .modele .grille{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:start}
}
header.barre{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 14px}
h1{font-size:22px;margin:0}
h2{font-size:17px;margin:0}
.marque{color:var(--accent)}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
/* 16 px minimum : en dessous, l'iPhone zoome sur le champ quand on le touche */
input,select{width:100%;font:inherit;font-size:16px;padding:12px;min-height:48px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
.sub{color:var(--muted);font-size:14px}
.resume{margin:16px 0 10px}
.modele{margin-top:22px}
.modele>h2{margin-bottom:8px}
.part{background:var(--sunken);border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:14px}
.part ul{margin:4px 0 0;padding-left:18px}
.compte{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;margin-bottom:10px}
.tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pseudo{font-weight:600;font-size:17px;overflow-wrap:anywhere}
.plateforme{font-size:13px;color:var(--insta);white-space:nowrap}
.plateforme.tw{color:var(--tw)}
.sous-tete{display:flex;gap:8px;align-items:center;margin-top:4px}
/* vert ça tourne, ambre ça chauffe, orange ça coince, rouge c'est mort, gris ça dort */
.statut{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.statut.ok{background:var(--ok-soft);color:var(--ok)}
.statut.warn{background:var(--warn-soft);color:var(--warn)}
.statut.acc{background:var(--orange-soft);color:var(--orange)}
.statut.bad{background:var(--bad-soft);color:var(--bad)}
.statut.off{background:var(--off-soft);color:var(--off)}
.ligne{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:baseline;margin-top:6px}
.ligne .cle{color:var(--muted);font-size:14px}
.ligne .val{min-width:0;overflow-wrap:anywhere}
.mono{font-family:ui-monospace,Menlo,monospace}
/* Les accès prennent toute la largeur, libellé au-dessus : avec une colonne de
   libellés à gauche, sur 375 px, les boutons écrasaient les points du mot de
   passe en colonne, un par ligne, et coupaient les mails en deux. */
.acces{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.acces+.acces{border-top:0;padding-top:0;margin-top:8px}
.acces .cle{display:block;color:var(--muted);font-size:14px}
.rang{display:flex;align-items:center;gap:8px}
.rang .v{flex:1;min-width:0;overflow-wrap:anywhere}
/* 44 px : la taille qu'un pouce touche sans viser */
button{font:inherit;font-size:15px;min-height:44px;min-width:44px;padding:0 14px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
button.principal{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);width:100%;font-weight:600}
button.discret{border-color:transparent;background:transparent;color:var(--muted);padding:0 6px}
button:disabled{opacity:.55;cursor:default}
button.copier.fait{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.vide{color:var(--muted);font-style:italic}
.alerte{color:var(--bad)}
.avert{margin-top:28px;font-size:13px;color:var(--muted)}
/* l'écran de connexion */
.connexion{max-width:380px;margin:12vh auto 0;padding:0 16px}
.connexion h1{font-size:24px;margin-bottom:4px}
.connexion form{margin-top:24px;display:grid;gap:12px}
.connexion .code{letter-spacing:.4em;text-align:center;font-size:22px;font-family:ui-monospace,Menlo,monospace}
.message{min-height:20px;font-size:14px}
.message.erreur{color:var(--bad)}

/* ================= l'écran Comptes ================= */
a.lnk{color:var(--accent);text-decoration:none}
a.lnk:hover{text-decoration:underline}
a.lnk.tw{color:var(--tw)}
a.lnk.ig{color:var(--insta)}
a.chevron{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:6px;color:var(--muted);vertical-align:middle}
a.chevron:hover{background:var(--sunken);color:var(--accent)}
.etiquette{display:inline-block;padding:1px 7px;border-radius:999px;font-size:12px;
  background:var(--accent-soft);color:var(--accent)}
/* des menus déroulants classiques, sur une ou deux lignes : jamais des rangées de pastilles */
.filtres{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:4px 0 12px}
.filtres select{min-height:40px;padding:8px 10px;font-size:15px}
.champ label{font-size:13px;margin-bottom:4px}
.bt-filtres{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:0 14px;min-height:40px;border-radius:999px;background:var(--surface);color:var(--fg);font-weight:600}
.bt-filtres::before{content:'';width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4'/%3E%3C/svg%3E") center/contain no-repeat}
.filtres.plie{display:none}
.compteur{justify-content:space-between;margin:0 0 10px}
.tableau{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tableau table{width:100%;border-collapse:collapse;font-size:14px}
.tableau th{text-align:left;font-weight:600;color:var(--muted);font-size:13px;padding:10px 12px;
  border-bottom:1px solid var(--line);background:var(--sunken)}
.tableau th button{all:unset;cursor:pointer}
.tableau th button:hover{color:var(--accent)}
.tableau td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau tbody tr:hover{background:var(--sunken)}
/* sur téléphone : chaque ligne devient une carte, les filtres se replient */
@media (max-width:760px){
  .filtres{grid-template-columns:1fr 1fr}
  .tableau{background:transparent;border:0}
  .tableau thead{display:none}
  .tableau table,.tableau tbody,.tableau tr,.tableau td{display:block}
  .tableau tr{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:8px}
  .tableau td{border:0;padding:2px 0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;
    align-items:baseline;font-size:14px}
  .tableau td::before{content:attr(data-l);color:var(--muted);font-size:13px}
  .tableau td>span{min-width:0}
  .tableau td.c-nom{display:block;font-size:16px;padding-bottom:4px}
  .tableau td.c-nom::before{content:none}
}

/* ================= la fiche compte ================= */
.entete-fiche{justify-content:space-between;margin-bottom:6px}
.titre-fiche{font-size:24px;margin:6px 0 4px;overflow-wrap:anywhere}
.tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:16px 0}
.tuile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.tuile .k{font-size:13px;color:var(--muted)}
.tuile .v{font-size:18px;font-weight:600;margin:2px 0;overflow-wrap:anywhere}
.tuile .s{font-size:13px;color:var(--muted)}
.note{background:var(--sunken);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:15px}
.note.ok-fond{background:var(--ok-soft);color:var(--ok)}
.note.alerte-fond{background:var(--bad-soft);color:var(--bad)}
.carte{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
.carte h3{font-size:16px;margin:0 0 6px}
.carte .acces:first-of-type{border-top:0;padding-top:0;margin-top:4px}
.carte .ligne{grid-template-columns:minmax(150px,200px) 1fr}
.ligne-histo{padding:4px 0;font-size:15px}

/* ================= l'écran Modèles ================= */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  color:#fff;font-weight:700;font-size:17px;flex:0 0 auto}
.avatar.grand{width:56px;height:56px;font-size:24px}
.grille-modeles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.carte-modele{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.carte-modele.archive{opacity:.85}
.tete-modele{display:flex;gap:12px;align-items:center}
.tete-modele h3{font-size:18px;margin:0}
.tete-modele.grande{margin:8px 0 6px}
.tete-modele.grande .titre-fiche{margin:0}
.reperes{margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.comptes-modele{list-style:none;margin:10px 0 0;padding:0}
.comptes-modele li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:5px 0;
  border-top:1px solid var(--line);font-size:15px}
.archives{margin-top:22px}
.archives summary{cursor:pointer;padding:6px 0}
.archives .grille-modeles{margin-top:8px}
.pliable summary{cursor:pointer}
.pliable[open] summary{margin-bottom:8px}
.cherche{width:100%;margin:4px 0 8px;font-size:15px;min-height:40px;padding:8px 10px}
.desc{border-top:1px solid var(--line);padding:6px 0}
.desc summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}
.desc summary::-webkit-details-marker{display:none}
.desc summary::before{content:'›';color:var(--muted);transition:transform .15s;display:inline-block;margin-right:2px}
.desc[open] summary::before{transform:rotate(90deg)}
.pickup{flex:1;min-width:0}
.corps-desc{align-items:flex-start;margin:6px 0 2px 14px}
.texte-desc{white-space:pre-wrap;flex:1;min-width:0;font-size:15px}
button.petit{min-height:36px;font-size:14px;padding:0 10px}
.niche{line-height:1.9;margin:4px 0 10px}
.liens-modele .acces:first-of-type{border-top:0;padding-top:0;margin-top:0}
.tableau.sans-cadre{border:0;border-radius:0}

/* ================= l'écran Équipe ================= */
.avatar.emoji{background:var(--sunken);font-size:22px}
.avatar.emoji.grand{font-size:30px}
.emoji-l{font-size:17px}
.emoji-ligne{gap:8px;margin-top:6px}
.carte h4{font-size:14px;color:var(--muted);margin:12px 0 4px}
.etape{display:flex;gap:9px;align-items:baseline;padding:3px 0;font-size:15px}
.etape .coche{display:inline-block;min-width:22px;text-align:center;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--off-soft);color:var(--off);padding:1px 0}
.etape.faite .coche{background:var(--ok-soft);color:var(--ok)}
.etape:not(.faite):not(.plus-tard) .libelle{font-weight:600}
.etape.plus-tard{opacity:.65}
.etape.faite .libelle{color:var(--muted)}

/* ================= l'écran Paye ================= */
.carte>.rang{justify-content:space-between;align-items:baseline}
.ligne-paye{padding:8px 0;border-top:1px solid var(--line)}
.ligne-paye:first-of-type{border-top:0}
.ligne-paye .rang{gap:8px}
.ligne-paye .rang .mono{margin-left:auto}
.tableau td.verse{color:var(--ok)}

/* ================= l'écran Revues ================= */
.revue summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.date-revue{font-weight:600}
.revue .loom{margin-left:auto}
.groupe-revue{margin-top:8px}
.point{display:flex;gap:9px;align-items:flex-start;padding:4px 0;font-size:15px}
.point .coche{display:inline-block;min-width:22px;text-align:center;border-radius:999px;font-size:12px;font-weight:700;
  background:var(--off-soft);color:var(--off);padding:1px 0;margin-top:2px}
.point.fait .coche{background:var(--ok-soft);color:var(--ok)}
.point.fait .texte-point{color:var(--muted);text-decoration:line-through}
.texte-point{flex:1;min-width:0;overflow-wrap:anywhere}
.jeton{display:inline-block;padding:0 6px;border-radius:6px;background:var(--accent-soft);color:var(--accent);text-decoration:none}
.jeton.personne{background:var(--sunken);color:var(--fg)}
.jeton.perdu{background:var(--bad-soft);color:var(--bad)}

/* ================= l'écran La journée ================= */
.barre-jour{gap:12px;align-items:center;margin-bottom:8px}
.titre-jour{font-size:20px;margin:0}
/* une majuscule au jour seulement : « Mardi 13 octobre », pas « Mardi 13 Octobre » */
.titre-jour::first-letter{text-transform:uppercase}
.bouton-lien{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface);color:var(--fg);text-decoration:none;font-size:18px}
.groupe-routine{padding:6px 0 6px 31px;font-size:15px}
.gestes{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:3px}
.geste{font-size:13px;color:var(--fg)}
.geste.fait{color:var(--muted);text-decoration:line-through}

/* ================= le Tableau de bord ================= */
a.lien-tuile{text-decoration:none;color:inherit;display:block}
a.lien-tuile:hover{border-color:var(--accent)}
.a-traiter{padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.a-traiter:first-of-type{border-top:0}
.a-traiter .sub{margin-top:4px}

/* ================= Téléphones et Plan du parc ================= */
.carte-tel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.carte-tel h3{font-size:16px;margin:0 0 2px}
.point-couleur{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.pliable .grille-modeles{margin-top:8px}

/* ================= les gestes d'écriture ================= */
#flash{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--fg);color:var(--bg);
  padding:10px 16px;border-radius:10px;font-size:15px;max-width:calc(100% - 32px);z-index:10}
#flash.erreur{background:var(--bad);color:#fff}
.bloc-posting{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.bloc-posting button.principal{width:auto}
.a-valider{border-color:var(--warn)}
.demande{padding:8px 0;border-top:1px solid var(--line)}
.demande:first-of-type{border-top:0}
.form-posting{display:grid;gap:10px;max-width:420px}
.form-posting label{display:grid;gap:4px;color:var(--muted);font-size:14px}
.boutons-form{gap:10px}
.boutons-form button.principal{width:auto}
.refus{display:grid;gap:8px}

/* ================= les formulaires ================= */
.formulaire{display:grid;gap:12px;max-width:560px}
.champ-form{display:grid;gap:4px}
.champ-form>label{font-size:14px;color:var(--muted);margin:0}
.champ-form textarea{width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
.champ-form.case label{display:flex;gap:8px;align-items:center;color:var(--fg);font-size:15px}
.champ-form.case input{width:auto;min-height:auto}
.aide{font-size:13px}
.titre-form{margin:12px 0 0;font-size:15px}
.cases{display:grid;gap:4px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface)}
.cases label{display:flex;gap:8px;align-items:center;font-size:15px;color:var(--fg)}
.cases input{width:auto;min-height:auto}
.groupe-cases{margin-top:6px;font-weight:600}
.actions-ecran{margin:0 0 10px}
a.bouton-action{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;background:var(--accent);color:var(--accent-fg);text-decoration:none;font-weight:600;font-size:15px}

/* la ligne des notifications, discrète, en tête du tableau de bord */
.ligne-notifs{margin:0 0 10px}
button.lien-bouton{color:var(--accent);padding:0}
.petit-lien{font-size:13px;display:inline-block;margin-top:4px}
.coche-depart{width:18px;height:18px;margin:2px 8px 0 0;flex:0 0 auto}
.petit-select{max-width:170px;font-size:13px;padding:3px 6px;margin-left:auto}
.pied-fiche{margin-top:18px}
button.principal.petit{min-height:32px;padding:0 12px;font-size:14px;margin-left:6px}
/* les coches cliquables gardent la place et l'allure des coches lues */
button.coche{width:22px;height:22px;padding:0;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ok);font-weight:700;line-height:1;flex:0 0 auto;cursor:pointer}
button.geste{font:inherit;font-size:13px;cursor:pointer;background:none;border:1px solid var(--line);border-radius:8px;padding:2px 8px;color:var(--fg)}
.lnk-discret{color:inherit;text-decoration:none}
.lnk-discret:hover{text-decoration:underline}
.barre-jour .bouton-action{margin-left:auto}
/* la liste du @, sous le récap */
.sugg{border:1px solid var(--line);border-radius:9px;background:var(--surface);max-height:168px;overflow-y:auto;box-shadow:0 6px 18px rgba(0,0,0,.18);margin-top:4px}
.sugg button{display:flex;width:100%;gap:10px;align-items:center;background:none;border:0;padding:7px 12px;cursor:pointer;text-align:left;color:inherit;font:inherit}
.sugg button[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.sugg .q{color:var(--muted);font-size:12px;margin-left:auto;white-space:nowrap}
#f-brut{min-height:260px;line-height:1.55;resize:vertical}
/* les gestes du VA, repliés au bas de sa carte : rien ne bouge tant qu'il n'en a pas besoin */
.gestes-va{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.gestes-va summary{cursor:pointer;color:var(--muted);font-size:14px}
.gestes-va .rang{gap:8px;flex-wrap:wrap;margin:8px 0}
.form-acces{display:grid;gap:8px;margin-top:6px}
.form-acces label{display:grid;gap:3px;font-size:14px}
.descs-va{margin-top:12px}
.actions-va{margin:0 0 12px;font-size:15px}
/* le menu du VA : deux écrans, une ligne, en haut, même sur PC */
@media (min-width:1000px){.menu.menu-va{flex-direction:row;min-height:0;position:static;border-right:0;background:none;padding:10px 16px 0}}
.recap{font-size:15px;line-height:1.5}
.recap .vide-ligne{height:.7em}
.ligne-paye-va{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.ligne-paye-va:last-child{border-bottom:0}
.ligne-paye-va.total{font-weight:600}
.gros{font-size:24px;margin:4px 0 8px}
.case-inline{display:inline-flex;align-items:center;gap:4px;margin:0;color:var(--fg)}
.case-inline input{width:auto;min-height:0}
.outils-modele{margin:10px 0 0;display:grid;gap:6px}
/* la formation : un texte qui se lit sur téléphone, sobre comme le reste */
.chapitre{font-size:16px;line-height:1.6}
.chapitre h3{font-size:18px;margin:22px 0 8px}
.chapitre h4{font-size:16px;margin:16px 0 6px}
.chapitre ul,.chapitre ol{padding-left:22px;margin:6px 0 10px}
.chapitre li{margin:3px 0}
.chapitre hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.chapitre code{background:var(--sunken);border-radius:4px;padding:1px 5px;font-size:14px}
.encadre{background:var(--sunken);border-radius:10px;padding:10px 14px;margin:10px 0}
.encadre p{margin:4px 0}
.bouton-loom{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:10px;background:var(--accent-soft);color:var(--accent);text-decoration:none;font-weight:600}
.liste-chapitres{padding-left:24px;line-height:2}
.onglets{display:flex;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--line)}
.onglets a{padding:8px 12px;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.onglets a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.lu-compris{margin:20px 0 8px;font-size:16px}
.nav-chapitres{justify-content:space-between;gap:12px;margin:8px 0 20px}
.editeur{display:grid;gap:12px}
.editeur textarea{font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5}
.apercu{border:1px solid var(--line);border-radius:10px;padding:10px 14px;max-height:70vh;overflow:auto}
@media (min-width:1000px){.editeur{grid-template-columns:1fr 1fr}}
/* la recherche partout, en tête du menu : rien d'autre ne bouge */
.recherche-globale{flex:1 1 100%;margin:0 0 6px}
.recherche-globale input{min-height:40px;padding:8px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
img.avatar.photo{object-fit:cover;background:var(--sunken)}
.depot{gap:8px;flex-wrap:wrap;margin-top:10px}
.depot select,.depot input[type=file]{width:auto;min-height:40px;font-size:14px;padding:6px}
.emoji-va{margin:0 0 12px}
.emoji-va form{gap:8px;margin-top:6px}
.emoji-va input{width:90px;font-size:22px;text-align:center;min-height:44px;padding:4px}
.form-accepter{display:grid;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.form-accepter label{display:grid;gap:4px}
.statut-dossier{margin-top:12px}
.message-matin{white-space:pre-wrap;font:inherit;font-size:15px;background:var(--sunken);border-radius:10px;padding:10px 14px;margin:6px 0}
.form-relier{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}

/* ================= l'habillage (14 oct.) =================
   L'esprit Revolut, retenu par Micka en version sombre.
   Des cartes sans bordure aux grands arrondis, des chiffres gros et gras,
   des boutons en pilule, beaucoup d'air. La mise en page ne bouge pas. */
body{font-family:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
h1{font-size:30px;font-weight:700;letter-spacing:-.03em}
h2{font-size:19px;font-weight:700;letter-spacing:-.02em}
.carte h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
header.barre{margin:10px 0 20px;align-items:flex-end}
header.barre .sub,header.barre button.discret{font-size:13px}
/* les cartes : pas de bordure, un grand arrondi, l'ombre à peine */
.carte,.compte,.tuile,.carte-modele,.carte-tel,.tableau{border:0;border-radius:22px;box-shadow:var(--ombre)}
.carte,.compte{padding:18px 18px;margin:14px 0}
.tuiles{gap:12px}
.tuile{padding:16px 16px}
.tuile .k{font-size:13px;font-weight:500}
.tuile .v{font-size:28px;font-weight:700;letter-spacing:-.03em;margin:6px 0 2px}
a.lien-tuile:hover{border:0;transform:translateY(-1px)}
/* les plis : un chevron discret au lieu du triangle */
details.pliable>summary{list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.pliable>summary::-webkit-details-marker{display:none}
details.pliable>summary::after{content:'›';margin-left:auto;font-size:22px;line-height:1;color:var(--muted);transition:transform .15s}
details.pliable[open]>summary::after{transform:rotate(90deg)}
/* les boutons en pilule, pleins, sans contour */
button,a.bouton-action,.bouton-lien,.bouton-loom{border-radius:999px;border:0;background:var(--sunken);font-weight:600}
button.principal,a.bouton-action{background:var(--accent);color:var(--accent-fg)}
button.discret{background:transparent;font-weight:500}
button.coche{border-radius:8px;border:1.5px solid var(--line);background:var(--surface)}
input,select,.champ-form textarea{border:0;background:var(--sunken);border-radius:14px}
.statut,.etiquette{padding:3px 10px;font-weight:600}
.note,.part,.encadre,.message-matin{border-radius:16px}
.tableau th{background:transparent;border-bottom-color:var(--line)}
/* le menu sur téléphone : une seule ligne qui défile, la recherche au-dessus */
@media (max-width:999px){
  .coque{position:relative}
  .menu{flex-wrap:nowrap;overflow-x:auto;padding:68px 16px 6px;gap:6px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{white-space:nowrap;border-radius:999px;padding:8px 14px;background:var(--surface);color:var(--fg);font-weight:500;box-shadow:var(--ombre)}
  .menu .recherche-globale{position:absolute;top:12px;left:16px;right:16px;margin:0}
  .menu.menu-va{padding-top:10px}
}
.menu a[aria-current="page"]{background:var(--fg);color:var(--bg);font-weight:600}
.recherche-globale input{border-radius:999px;padding-left:40px;background:var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m16 16-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center}
/* sur PC : la barre de gauche blanche, sans trou entre la recherche et les écrans */
@media (min-width:1000px){
  .menu{background:var(--surface);border-right:0;padding:22px 14px;gap:2px;justify-content:flex-start}
  .menu .recherche-globale{flex:0 0 auto;margin-bottom:14px}
  .menu a{border-radius:12px;font-weight:500;color:var(--fg)}
  .menu a:hover{background:var(--sunken)}
}
/* le titre garde sa ligne : le nom et « Se déconnecter » passent dessous s'il le faut */
header.barre{flex-wrap:wrap-reverse;justify-content:space-between}
@media (max-width:999px){h1{font-size:27px}}

.menu a[aria-current="page"]{background:#fff;color:#000}
/* ce qui est à moi : la même pilule, le texte en bleu (Micka, 14 oct. :
   « pas 50 couleurs »). Sur PC, un petit titre le sépare du reste. */
.menu a.a-moi{color:var(--accent)}
.menu a.a-moi[aria-current="page"]{background:var(--accent);color:#fff}
.titre-menu{display:none}
@media (min-width:1000px){.titre-menu{display:block;margin:18px 12px 4px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}}
/* les coches : un petit carré ; coché, la phrase se barre (comme l'artefact) */
.point .coche{min-width:0;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--muted);background:transparent;
  color:var(--ok);font-size:13px;line-height:17px;padding:0;margin-top:2px;flex:0 0 auto}
.point.fait .coche{background:var(--ok);border-color:var(--ok);color:#000}
button.coche{border-radius:6px;border:1.5px solid var(--muted);background:transparent}
/* ================= les plis (14 oct.) ================= */
details.compte>summary,details.part>summary{list-style:none;cursor:pointer}
details.compte>summary::-webkit-details-marker,details.part>summary::-webkit-details-marker{display:none}
details.compte>summary{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
details.compte>summary .tete{display:contents}
details.compte>summary .sous-tete{grid-column:1/-1;margin-top:0}
details.compte[open]>summary{margin-bottom:6px}
details.part>summary{display:flex;align-items:center;gap:6px}
details.part>summary::after,details.compte>summary .plateforme::after{content:'›';font-size:20px;line-height:1;color:var(--muted);transition:transform .15s;display:inline-block}
details.part>summary::after{margin-left:auto}
details.compte>summary .plateforme::after{margin-left:10px;vertical-align:-2px}
details.part[open]>summary::after,details.compte[open]>summary .plateforme::after{transform:rotate(90deg)}
details.part[open]>summary{margin-bottom:4px}
/* sur téléphone, un compte replié tient en deux lignes : son nom, puis son
   rôle, qui le tient et son statut (Micka, 14 oct. : la plateforme, la
   couleur du nom la dit déjà). Un appui sur la ligne déplie le reste. */
@media (max-width:760px){
  .tableau tr[data-pli]{cursor:pointer;position:relative}
  .tableau tr[data-pli]:not(.ouvert) td:not(.c-nom):not(.essentiel){display:none}
  .tableau tr[data-pli]:not(.ouvert) td.essentiel{display:inline-block;padding:2px 12px 2px 0;font-size:14px}
  .tableau tr[data-pli]:not(.ouvert) td.essentiel::before{content:none}
}
/* les comptes d'une modèle : ouverts de base, repliables (Micka, 14 oct.) */
details.pli-comptes{margin-top:10px}
details.pli-comptes>summary{list-style:none;cursor:pointer;display:flex;align-items:center}
details.pli-comptes>summary::-webkit-details-marker{display:none}
details.pli-comptes>summary::after{content:'›';margin-left:auto;font-size:20px;line-height:1;transition:transform .15s}
details.pli-comptes[open]>summary::after{transform:rotate(90deg)}
/* une icône seule, ronde, posée au bout d'une ligne repliée */
button.icone{min-width:36px;min-height:36px;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;margin-left:auto}
button.icone.fait{background:var(--ok);color:#000}
details.pliable>summary:has(button.icone)::after{margin-left:6px}
.choix-periode{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}
.choix-periode select{width:auto}
.dates-perso{display:flex;gap:8px;flex-wrap:wrap}
.dates-perso label{display:flex;align-items:center;gap:6px;margin:0;color:var(--fg)}
.dates-perso input{width:auto;min-height:40px;padding:6px 10px}
/* le graphique des chiffres : une couleur, des seuils discrets */
svg.graphe{width:100%;height:auto;display:block;margin:6px 0}
svg.graphe .seuil{stroke:var(--line);stroke-width:1}
svg.graphe text{fill:var(--muted);font-size:11px}
svg.graphe .trace{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.graphe .aire{fill:var(--accent);opacity:.14}
svg.graphe .point-graphe rect{fill:transparent}
svg.graphe .point-graphe circle{fill:var(--accent)}
svg.graphe .point-graphe:hover circle{r:5}
svg.graphe .point-graphe:hover rect{fill:rgba(255,255,255,.04)}
.choix-periode select{min-height:40px;padding:6px 10px;font-size:15px}
/* Mes comptes : le nom de la modèle mène à sa fiche */
a.lnk-modele{color:inherit;text-decoration:none}
a.lnk-modele .chevron-titre{color:var(--muted);font-weight:400}
.fiche-modele-va .outils-modele{margin:12px 0}
/* un nom qui mène à sa fiche : discret, mais on voit qu'on peut appuyer */
a.lnk-nom{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
a.lnk-nom:hover{text-decoration-color:currentColor}
.role-ligne{font-size:13px;color:var(--muted)}
.sous-pli{border-top:1px solid var(--line);padding:8px 0 2px;margin-top:6px}
details.sous-pli>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.sous-pli>summary::-webkit-details-marker{display:none}
details.sous-pli>summary::after{content:"›";margin-left:auto;font-size:20px;line-height:1;color:var(--muted);transition:transform .15s}
details.sous-pli[open]>summary::after{transform:rotate(90deg)}
.somme-ligne{margin-left:auto;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.somme-ligne b{font-size:17px}
/* la jauge de l'objectif d'agence : une barre fine, la couleur de l'app */
.jauge{height:8px;border-radius:999px;background:var(--sunken);overflow:hidden;margin:8px 0 6px}
.jauge span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.ligne-histo .jauge{max-width:420px}
/* les carrés compacts du tableau de bord : étiquette à gauche, chiffre à droite */
.tuile.compacte{padding:14px 16px}
.tuile.compacte .haut{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tuile.compacte .v{margin:0;font-size:26px;line-height:1}
.tuile.compacte .s{margin-top:6px}

/* ================= les couleurs du tableau de bord (14 oct.) =================
   Chaque carré porte la couleur de son sujet, reprise des couleurs de l'app
   (Micka : « pas trop de couleurs »). Nulle part ailleurs : la couleur y dit
   déjà un statut (vert actif, rouge banni, jaune à traiter). */
.tuile[data-tuile]{position:relative;padding-top:52px}
.tuile[data-tuile]::before{content:'';position:absolute;top:14px;left:16px;width:30px;height:30px;border-radius:50%;background:var(--c-fond)}
.tuile[data-tuile]::after{content:'';position:absolute;top:21px;left:23px;width:16px;height:16px;background:var(--c);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.tuile[data-tuile] .v{color:var(--fg)}
[data-tuile="modeles"]{--c:var(--insta);--c-fond:#3d1a2c;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E")}
[data-tuile="comptes"]{--c:var(--ok);--c-fond:var(--ok-soft);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E")}
[data-tuile="equipe"]{--c:var(--accent);--c-fond:var(--accent-soft);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M2 20c.8-3.5 3.5-5 7-5s6.2 1.5 7 5M15 14.5c3 0 5.5 1.5 6.5 4.5'/%3E%3C/svg%3E")}
[data-tuile="tels"]{--c:var(--orange);--c-fond:var(--orange-soft);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E")}
[data-tuile="paye"]{--c:var(--warn);--c-fond:var(--warn-soft);--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='3'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
[data-tuile="objectif"]{--c:#b79cff;--c-fond:#2a2140;--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black'/%3E%3C/svg%3E")}
[data-tuile="objectif"] .jauge span{background:var(--c)}
/* les carrés compacts : un simple point de couleur devant l'étiquette ;
   une pastille à icône y écrasait le chiffre sur téléphone */
.tuile.compacte[data-tuile]{padding:14px 16px}
.tuile.compacte[data-tuile]::before{content:none}
.tuile.compacte[data-tuile]::after{content:none}
.tuile.compacte[data-tuile] .k::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:7px;vertical-align:1px}
.tuile.compacte .v{white-space:nowrap}
/* le bac à sable se reconnaît d'un coup d'œil */
html.essai body::before{content:'ESSAI · bac à sable : rien ici ne touche la vraie app';display:block;position:sticky;top:0;z-index:20;
  background:#f2c14e;color:#000;font-size:13px;font-weight:700;text-align:center;padding:6px 12px}