/* =========================================================================
   archangel-system — la coque.

   Direction : pastiche Luna fidèle (2001) autour d'instruments de 2026. Le
   chrome est d'époque — biseaux, dégradés, Tahoma 11px, bouton Démarrer vert —
   et les applications qu'il encadre sont sombres et denses. C'est cette tension
   qui fait l'objet ; adoucir l'un ou l'autre la ferait disparaître.

   Aucune police distante, aucune image distante : Tahoma et Trebuchet MS sont
   sur toute machine Windows, le papier peint est un dégradé CSS. Le site
   s'affiche donc identiquement hors ligne et derrière une CSP stricte.
   ========================================================================= */

:root{
  /* --- Le thème -----------------------------------------------------------
     Ces vingt valeurs sont les seules qui changent d'une ambiance à
     l'autre. Elles sont réécrites côté serveur par As\Themes dans un <style>
     du <head> ; ce qui suit n'est que le repli Luna, pour les pages servies
     avant qu'un compte soit connu (l'écran de session) et pour que la feuille
     reste lisible seule.                                                     */
  --chrome-clair:#2a84f0;      /* haut du biseau des barres de titre      */
  --chrome:#1c6fdd;            /* corps                                   */
  --chrome-fonce:#0d55c4;      /* bas, et fond du texte de titre          */
  --chrome-nuit:#1941a5;       /* pied de la barre des tâches             */
  --chrome-bord:#0a246a;       /* contour des fenêtres et des dialogues   */
  --chrome-inactif-1:#9db6f2;
  --chrome-inactif-2:#7d9ce8;

  --demarrer-1:#5fbd5f;        /* bouton Démarrer                         */
  --demarrer-2:#3c993c;
  --demarrer-3:#276b27;

  --ciel-1:#1e4f8f;            /* papier peint : ciel haut                */
  --ciel-2:#77b3e2;            /* ciel bas                                */
  --ciel-3:#dcecf8;            /* horizon pâle (la colline reste verte)   */

  --face:#ece9d8;              /* beige des boîtes de dialogue XP         */
  --face-2:#f6f4ec;
  --face-bd:#aca899;

  --accent:#3987e5;            /* la teinte qui traverse dans les apps    */
  --accent-rgb:57,135,229;
  --accent-fond:#1c4f96;
  --accent-bord:#2a6cc4;

  /* --- Constantes, hors thème ------------------------------------------ */
  --face-bd-clair:#ffffff;
  --face-bd-sombre:#716f64;
  --champ:#ffffff;

  --encre:#1b1b17;
  --encre-2:#4a4a42;
  --lien:#0a3d91;

  --ombre-fenetre:0 3px 10px rgba(0,0,0,.36), 0 22px 60px -22px rgba(0,0,0,.62);

  --sortie:cubic-bezier(.16,1,.3,1);
  --net:cubic-bezier(.65,0,.35,1);

  --barre-h:32px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Tahoma,"DejaVu Sans",Verdana,Geneva,sans-serif;
  font-size:11px;
  color:var(--encre);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
a{color:var(--lien)}
[hidden]{display:none!important}

/* Focus clavier : jamais supprimé, dessiné à la mode XP (pointillé 1px). */
:focus-visible{outline:1px dotted #000;outline-offset:2px}
.sombre :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* =========================================================================
   1. Écran de session
   ========================================================================= */

.session{
  position:fixed; inset:0;
  display:grid; grid-template-rows:auto 1fr auto;
  background:
    linear-gradient(180deg,var(--chrome-nuit) 0%, var(--chrome-fonce) 22%, var(--chrome-clair) 50%,
                var(--chrome-fonce) 78%, var(--chrome-nuit) 100%);
  color:#fff;
  overflow:auto;
}

/* Les deux filets clairs qui bordent la bande centrale : c'est ce détail,
   plus que le dégradé, qui fait reconnaître l'écran au premier coup d'œil. */
.session::before,
.session::after{
  content:""; position:fixed; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,#f2b52c 12%,#ffd77a 50%,#f2b52c 88%,transparent);
  opacity:.9; pointer-events:none;
}
.session::before{top:18vh}
.session::after{bottom:18vh}

.session-haut{
  padding:22px 34px 0;
  display:flex; align-items:center; gap:10px;
  font-family:"Trebuchet MS",Tahoma,sans-serif;
}
.session-corps{
  display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,1.05fr);
  align-items:center; gap:0;
  padding:0 clamp(18px,6vw,90px);
  min-height:0;
}
.session-bas{
  padding:0 34px 20px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
  font-size:11px; color:#cfe3f7;
}

.session-marque{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(30px,5.2vw,54px);
  font-weight:700; line-height:.92;
  letter-spacing:-.035em;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
  margin:0;
}
.session-marque em{
  font-style:normal; font-weight:400; opacity:.72;
  display:block; font-size:.34em; letter-spacing:.34em; text-transform:uppercase;
  margin-top:.55em; text-shadow:none;
}
.session-consigne{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(15px,1.7vw,20px);
  line-height:1.45; margin:26px 0 0; max-width:26ch;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.session-sep{
  align-self:stretch; margin:8vh 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent);
}

.session-panneau{padding:0 0 0 clamp(18px,4vw,54px)}

/* --- liste de comptes --------------------------------------------------- */
.comptes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.compte{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:8px 12px; border:0; border-radius:6px;
  background:transparent; color:#fff; text-align:left; cursor:pointer;
  transition:background .16s var(--sortie), transform .16s var(--sortie);
}
.compte:hover{background:rgba(255,255,255,.13)}
.compte:active{transform:translateX(1px)}
.compte[aria-selected="true"]{background:rgba(255,255,255,.2)}
.compte-vignette{
  width:48px;height:48px;flex:none;border-radius:5px;
  border:2px solid rgba(255,255,255,.85);
  display:grid;place-items:center;
  font-family:"Trebuchet MS",Tahoma,sans-serif;font-size:21px;font-weight:700;
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.compte-nom{
  font-family:"Trebuchet MS",Tahoma,sans-serif;font-size:17px;line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.compte-role{display:block;font-size:11px;opacity:.72;font-family:Tahoma,sans-serif}

/* --- saisie du mot de passe -------------------------------------------- */
.saisie{
  margin-top:14px; padding:14px 12px 12px clamp(18px,4vw,54px);
  display:none;
}
.saisie.on{display:block; animation:glisse .28s var(--sortie) both}
@keyframes glisse{from{opacity:0;transform:translateY(-6px)}}

/* Champ court, comme à l'origine : un champ pleine largeur sur un écran 24"
   donne l'impression d'attendre une phrase, pas un mot de passe. */
.saisie-ligne{display:flex;align-items:center;gap:8px;max-width:268px}
.saisie label{display:block;font-size:11px;margin-bottom:5px;opacity:.9}
.champ-mdp{
  flex:1 1 auto; min-width:0;
  height:26px; padding:0 8px;
  border:1px solid #7f9db9; border-radius:2px;
  background:var(--champ); color:#000;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
  font-size:12px; letter-spacing:.08em;
}
.champ-mdp:focus{outline:none;border-color:var(--chrome-clair);box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),0 0 0 2px var(--chrome-clair)}

.fleche{
  flex:none; width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);
  background:radial-gradient(circle at 34% 28%,var(--demarrer-1),var(--demarrer-2) 62%,var(--demarrer-3));
  color:#fff; font-size:14px; line-height:1; cursor:pointer;
  box-shadow:0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition:filter .14s var(--sortie), transform .14s var(--sortie);
}
.fleche:hover{filter:brightness(1.12)}
.fleche:active{transform:translateY(1px)}
.fleche[disabled]{filter:grayscale(.7) brightness(.8);cursor:default}

.aide-mdp{margin:9px 0 0;font-size:11px;opacity:.78;max-width:38ch;line-height:1.5}

.alerte{
  margin-top:10px; padding:7px 10px; max-width:42ch;
  background:rgba(140,20,20,.55);
  border:1px solid rgba(255,190,190,.55); border-radius:3px;
  font-size:11px; line-height:1.5;
  animation:secousse .3s var(--net);
}
.alerte.ok{background:rgba(20,110,40,.5);border-color:rgba(180,255,190,.5)}
.alerte.info{background:rgba(10,40,110,.5);border-color:rgba(190,215,255,.5)}
@keyframes secousse{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}
  58%{transform:translateX(4px)}
  82%{transform:translateX(-2px)}
}

.majuscules{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; padding:4px 8px; border-radius:3px;
  background:rgba(255,214,102,.2); border:1px solid rgba(255,214,102,.5);
  font-size:11px;
}

.session-bas .btn-lien{
  background:none;border:0;color:#dbeaff;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;padding:2px
}
.session-bas .btn-lien:hover{color:#fff}

/* =========================================================================
   1 bis. L'accueil de première connexion

   Même mise en page que l'assistant de première ouverture de session de XP :
   fond dégradé plein écran, titre à gauche, contenu à droite, boutons en bas.
   Il reprend le fond et le filet doré de l'écran de session — c'est la même
   famille d'écrans, celle qu'on traverse avant d'arriver sur le bureau.
   ========================================================================= */

.assistant{
  position:fixed; inset:0;
  display:grid; grid-template-rows:1fr auto;
  background:linear-gradient(180deg,
    var(--chrome-nuit) 0%, var(--chrome-fonce) 24%, var(--chrome-clair) 52%,
    var(--chrome-fonce) 78%, var(--chrome-nuit) 100%);
  color:#fff; overflow:auto;
}
.assistant::before{
  content:""; position:fixed; left:0; right:0; top:14vh; height:2px; z-index:1;
  background:linear-gradient(90deg,transparent,#f2b52c 12%,#ffd77a 50%,#f2b52c 88%,transparent);
  opacity:.9; pointer-events:none;
}

.assistant-ecran{
  display:grid; grid-template-columns:minmax(0,.85fr) 2px minmax(0,1.25fr);
  align-items:center; gap:0;
  padding:0 clamp(18px,6vw,90px);
  min-height:0;
  animation:glisse .3s var(--sortie) both;
}
.assistant-ecran[hidden]{display:none}
.assistant-sep{
  align-self:stretch; margin:9vh 0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent);
}
.assistant-gauche{padding-right:clamp(16px,3vw,44px)}
.assistant-droite{padding-left:clamp(18px,4vw,54px); max-width:56ch}

.assistant-titre{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(28px,4.4vw,46px); font-weight:700; line-height:1;
  letter-spacing:-.03em; margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
}
.assistant-texte{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(14px,1.5vw,17px); line-height:1.5;
  margin:18px 0 0; max-width:26ch; opacity:.92;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.assistant-h2{
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:17px; font-weight:700; margin:0 0 12px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.assistant-lib{display:block;font-size:11px;margin-bottom:5px;opacity:.88}
.assistant-aide{margin:7px 0 0;font-size:11px;line-height:1.6;opacity:.78;max-width:44ch}
.assistant-aide code{background:rgba(0,0,0,.28);padding:1px 5px;border-radius:2px}

.champ-xp{
  width:100%; max-width:320px; height:27px; padding:0 9px;
  border:1px solid #7f9db9; border-radius:2px;
  background:var(--champ); color:#000; font-size:13px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.14);
}
.champ-xp:focus{outline:none;border-color:var(--chrome-clair);box-shadow:inset 1px 1px 0 rgba(0,0,0,.14),0 0 0 2px rgba(255,255,255,.5)}

/* --- vignette et symboles ---------------------------------------------- */
.assistant-vignette-ligne{display:flex;align-items:center;gap:14px;margin-top:20px}
.symboles{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;max-width:340px}
.symbole{
  width:34px;height:34px;flex:none;
  border:1px solid rgba(255,255,255,.4);border-radius:4px;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:16px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:background .14s var(--sortie),border-color .14s var(--sortie),transform .12s var(--sortie);
}
.symbole:hover{background:rgba(255,255,255,.26)}
.symbole:active{transform:scale(.94)}
.symbole.choisi{background:#fff;color:var(--chrome-fonce);border-color:#fff;font-weight:700}

/* --- ambiances ---------------------------------------------------------- */
.ambiances{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  max-height:60vh;overflow:auto;padding:2px;
}
.ambiance{
  display:block;text-align:left;padding:6px 6px 8px;
  border:1px solid rgba(255,255,255,.3);border-radius:5px;
  background:rgba(0,0,0,.2);color:#fff;cursor:pointer;
  transition:border-color .14s var(--sortie),background .14s var(--sortie),transform .12s var(--sortie);
}
.ambiance:hover{background:rgba(0,0,0,.32);border-color:rgba(255,255,255,.6)}
.ambiance:active{transform:scale(.985)}
.ambiance.choisi{
  border-color:#fff;background:rgba(255,255,255,.16);
  box-shadow:0 0 0 1px #fff, 0 4px 14px rgba(0,0,0,.35);
}
.ambiance-nom{display:block;font-size:12px;font-weight:700;margin-top:7px}
.ambiance-sous{display:block;font-size:10px;line-height:1.45;opacity:.75;margin-top:2px}

/* L'aperçu : un vrai petit bureau, pas une pastille de couleur. On y voit le
   ciel, une fenêtre avec sa barre de titre, l'intérieur sombre de l'app avec
   son accent, et la barre des tâches avec son bouton Démarrer. */
.av{
  display:block;position:relative;width:100%;aspect-ratio:16/10;
  border:1px solid rgba(0,0,0,.4);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,var(--ciel-1) 0%,var(--ciel-2) 66%,var(--ciel-3) 100%);
}
.av-fenetre{
  position:absolute;left:13%;top:15%;width:68%;height:54%;
  display:flex;flex-direction:column;
  background:var(--face);border:1px solid var(--chrome-bord);border-top:0;
  border-radius:3px 3px 0 0;box-shadow:0 2px 5px rgba(0,0,0,.32);
}
.av-titre{
  height:26%;min-height:7px;
  background:linear-gradient(180deg,var(--chrome-clair),var(--chrome) 45%,var(--chrome-fonce));
  display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 2px;
}
.av-titre i{width:4px;height:4px;background:rgba(255,255,255,.8);border-radius:1px;flex:none}
.av-corps{flex:1 1 auto;background:#0f1115;padding:4px;display:flex;flex-direction:column;gap:3px;justify-content:center}
.av-corps b{height:3px;border-radius:1px;background:var(--accent)}
.av-corps b:nth-child(2){width:68%;background:#7a8496;opacity:.6}
.av-corps b:nth-child(3){width:42%;background:#7a8496;opacity:.42}
.av-barre{
  position:absolute;left:0;right:0;bottom:0;height:14%;min-height:9px;
  background:linear-gradient(180deg,var(--chrome-clair),var(--chrome) 40%,var(--chrome-nuit));
  display:flex;align-items:center;gap:3px;padding:0 2px;
}
.av-demarrer{
  width:24%;height:74%;border-radius:0 3px 3px 0;flex:none;
  background:linear-gradient(180deg,var(--demarrer-1),var(--demarrer-2) 45%,var(--demarrer-3));
}
.av-tache{width:32%;height:66%;border-radius:1px;background:rgba(255,255,255,.24);flex:none}

/* --- récapitulatif ------------------------------------------------------ */
.recap-tete{display:flex;align-items:center;gap:14px}
.recap-nom{
  display:block;font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:19px;font-weight:700;line-height:1.2;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.recap-sous{display:block;font-size:11px;opacity:.78;margin-top:2px}

.recap-apps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;max-height:44vh;overflow:auto}
.recap-apps li{display:flex;align-items:flex-start;gap:11px;padding:7px 9px;border-radius:4px;background:rgba(0,0,0,.2)}
.recap-apps li svg{flex:none;margin-top:1px}
.recap-apps b{display:block;font-size:12px}
.recap-apps span span{display:block;font-size:11px;line-height:1.55;opacity:.78;margin-top:2px}
.recap-apps em{display:inline-block;font-style:normal;font-size:10px;margin-top:4px;padding:1px 6px;border-radius:99px;background:rgba(255,214,102,.22);border:1px solid rgba(255,214,102,.5)}

/* --- pied de l'assistant ------------------------------------------------ */
.assistant-bas{
  display:flex;align-items:center;gap:10px;
  padding:12px clamp(18px,6vw,90px);
  background:rgba(0,0,0,.26);
  border-top:1px solid rgba(255,255,255,.18);
}
.assistant-points{display:flex;gap:6px;flex:none}
.assistant-points i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);transition:background .2s var(--sortie)}
.assistant-points i.on{background:#fff}
.assistant-etat{flex:1 1 auto;font-size:11px;opacity:.85;text-align:right;min-height:1em}
.assistant-souci{color:#ffc2bb}

@media (max-width:860px){
  .assistant-ecran{grid-template-columns:1fr;gap:18px;padding:22px 20px;align-content:start}
  .assistant-sep{display:none}
  .assistant::before{display:none}
  .assistant-gauche,.assistant-droite{padding:0}
  .assistant-titre{font-size:28px}
  .ambiances{max-height:none;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .recap-apps{max-height:none}
}

/* =========================================================================
   2. Chargement — la barre à trois blocs du démarrage XP
   ========================================================================= */

.demarrage{
  position:fixed; inset:0; z-index:900;
  background:#000; color:#fff;
  display:grid; grid-template-rows:1fr auto 1fr; justify-items:center;
  gap:26px; padding:8vh 20px;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--sortie);
}
.demarrage.on{opacity:1;pointer-events:auto}
.demarrage-logo{
  align-self:end;
  font-family:"Trebuchet MS",Tahoma,sans-serif;
  font-size:clamp(26px,4.4vw,44px); font-weight:700; letter-spacing:-.03em;
  display:flex; align-items:baseline; gap:12px;
}
.demarrage-logo span{font-weight:400;font-size:.42em;opacity:.62;letter-spacing:.3em;text-transform:uppercase}

.piste{
  width:174px;height:16px;
  border:1px solid #6a6a6a;border-radius:3px;
  background:#0b0b0b; overflow:hidden; position:relative;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9);
}
.piste i{
  position:absolute; top:2px; width:12px; height:10px; border-radius:2px;
  background:linear-gradient(180deg,#7fc4ff,#1f6fd0 55%,#0b3f8f);
  box-shadow:0 0 5px rgba(80,170,255,.75);
  animation:defile 1.9s linear infinite;
}
.piste i:nth-child(2){animation-delay:.19s}
.piste i:nth-child(3){animation-delay:.38s}
@keyframes defile{
  0%{left:-14px;opacity:0}
  12%{opacity:1}
  76%{opacity:1}
  100%{left:176px;opacity:0}
}
.demarrage-etape{
  align-self:start; min-height:1.4em;
  font-size:12px; color:#b9c6d6; letter-spacing:.02em;
}
.demarrage-passer{
  position:absolute;bottom:22px;right:24px;
  background:none;border:1px solid #444;color:#8b96a4;
  padding:4px 10px;border-radius:3px;cursor:pointer;font-size:11px;
  opacity:0;transition:opacity .3s var(--sortie)
}
.demarrage-passer.on{opacity:1}
.demarrage-passer:hover{color:#dfe7f1;border-color:#6b7686}

/* =========================================================================
   3. Bureau
   ========================================================================= */

.bureau{
  position:fixed; inset:0 0 var(--barre-h) 0;
  overflow:hidden;
  /* « Bliss » sans image : colline verte, ciel dégradé, nuages diffus. */
  background:
    radial-gradient(58% 34% at 22% 74%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(40% 22% at 74% 26%, rgba(255,255,255,.24), transparent 68%),
    radial-gradient(120% 62% at 50% 128%, #6ba43a 0%, #55892e 34%, #3f6b22 62%, transparent 63%),
    linear-gradient(180deg,var(--ciel-1) 0%, var(--ciel-1) 22%, var(--ciel-2) 62%, var(--ciel-3) 88%);
}
.bureau::after{
  /* Grain très léger : retire l'aspect dégradé « à plat ». */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.icones{
  position:absolute; inset:10px auto 10px 10px;
  display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start;
  gap:2px; z-index:1;
}
.icone{
  width:86px; padding:6px 4px 7px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:none;border:0;cursor:pointer;
  color:#fff; text-align:center;
  /* Pas de déplacement : les icônes sont un menu, pas un espace de rangement. */
  user-select:none;
  border-radius:3px;
}
.icone-img{
  width:38px;height:38px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
  transition:transform .18s var(--sortie);
}
.icone-nom{
  font-size:11px; line-height:1.25; padding:1px 3px; border-radius:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.5);
  max-width:100%;
}
.icone:hover .icone-img{transform:translateY(-2px) scale(1.04)}
.icone[aria-selected="true"] .icone-img{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)) brightness(1.12) saturate(1.2);
}
.icone[aria-selected="true"] .icone-nom{
  background:var(--chrome-bord); text-shadow:none;
  outline:1px dotted rgba(255,255,255,.65); outline-offset:0;
}

/* Astuce d'usage, affichée une fois puis rangée. */
/* Au-dessus des fenêtres (qui montent en z-index au fil des clics), sous la
   barre des tâches. Une astuce à moitié cachée n'aide personne. */
.astuce{
  position:fixed; right:14px; top:14px; z-index:400;
  max-width:260px; padding:9px 11px 10px;
  background:#ffffe1; border:1px solid #b8b48c; border-radius:3px;
  color:#33321f; font-size:11px; line-height:1.55;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  animation:monte .4s var(--sortie) both .5s;
}
.astuce b{display:block;margin-bottom:3px}
.astuce button{
  margin-top:7px;background:none;border:0;padding:0;
  color:#0a3d91;text-decoration:underline;cursor:pointer;font-size:11px
}
@keyframes monte{from{opacity:0;transform:translateY(-8px)}}

/* =========================================================================
   4. Fenêtres
   ========================================================================= */

.fenetre{
  position:absolute; z-index:10;
  display:flex; flex-direction:column;
  min-width:320px; min-height:200px;
  background:var(--face);
  border:1px solid var(--chrome-bord);
  border-top:0;
  border-radius:8px 8px 0 0;
  box-shadow:var(--ombre-fenetre);
  animation:ouvre .19s var(--sortie) both;
}
@keyframes ouvre{from{opacity:0;transform:scale(.975) translateY(6px)}}
.fenetre.ferme{animation:ferme .15s var(--net) both}
@keyframes ferme{to{opacity:0;transform:scale(.98) translateY(4px)}}
.fenetre.reduite{display:none}
.fenetre.pleine{
  inset:0 0 0 0 !important; width:auto!important; height:auto!important;
  border-radius:0; border-left:0; border-right:0; border-bottom:0;
}

.titre{
  flex:none; height:29px; display:flex; align-items:center; gap:7px;
  padding:0 4px 0 6px;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,
    var(--chrome-fonce) 0%, var(--chrome) 8%, var(--chrome-clair) 18%, var(--chrome) 42%,
    var(--chrome-fonce) 52%, var(--chrome-fonce) 88%, var(--chrome) 96%, var(--chrome-clair) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.25);
  color:#fff; cursor:default; user-select:none;
}
.fenetre:not(.active) .titre{
  background:linear-gradient(180deg,var(--chrome-inactif-1) 0%,var(--chrome-inactif-2) 45%,
                             var(--chrome-inactif-2) 55%,var(--chrome-inactif-1) 100%);
  color:#e8eefc;
}
.titre-ico{width:16px;height:16px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.titre-txt{
  flex:1 1 auto; min-width:0;
  font-family:"Trebuchet MS",Tahoma,sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.005em;
  text-shadow:0 1px 1px rgba(0,0,0,.55);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.titre-actions{display:flex;gap:2px;flex:none}
.tbtn{
  width:21px;height:21px;
  border:1px solid rgba(255,255,255,.72); border-radius:3px;
  background:linear-gradient(180deg,var(--chrome-clair),var(--chrome) 48%,var(--chrome-fonce));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  color:#fff; cursor:pointer; padding:0;
  display:grid;place-items:center;
  transition:filter .12s var(--sortie);
}
.tbtn:hover{filter:brightness(1.16)}
.tbtn:active{filter:brightness(.9)}
.tbtn.fermer{background:linear-gradient(180deg,#f08b6a,#df4b2a 46%,#c22e12)}
.tbtn svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:square}

.corps{
  flex:1 1 auto; min-height:0; position:relative;
  margin:0; padding:3px;
  background:var(--face);
}
.corps iframe{
  width:100%;height:100%;border:0;display:block;
  background:#0f1115;
  border:1px solid var(--face-bd-sombre);
}

/* Voile de chargement de fenêtre : évite le clignotement blanc de l'iframe.
   Il n'apparaît qu'au-delà de 180 ms d'attente et part sur `as:pret` — voir
   bureau.js. Un voile qui naît et meurt dans le même souffle se lirait comme
   un défaut d'affichage. */
.voile{
  position:absolute; inset:3px; display:grid; place-items:center; gap:10px;
  background:#0f1115; color:#8b93a1; font-size:11px;
  transition:opacity .25s var(--sortie); z-index:2;
  cursor:progress;
}
.voile.parti{opacity:0;pointer-events:none}
.rondelle{
  width:22px;height:22px;border-radius:50%;
  border:2px solid #2a3446; border-top-color:var(--accent);
  animation:tourne .7s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}

/* La flèche au sablier, exactement là où XP la mettait : sur la fenêtre qui
   ouvre, et sur elle seule. */
.fenetre.attente,
.fenetre.attente .titre{cursor:progress}

/* Mode onglet : il n'y a pas de fenêtre à voiler, c'est l'écran qui attend.
   Léger, et au-dessus des fenêtres sans couvrir la barre des tâches — on doit
   pouvoir continuer à lire l'heure pendant qu'on attend. */
.voile-ecran{
  position:fixed; inset:0 0 var(--barre-h) 0; z-index:450;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:rgba(10,20,40,.3);
  cursor:progress;
}
.voile-ecran[hidden]{display:none}
.voile-ecran .rondelle{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.voile-ecran .voile-txt{
  font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.65);
}

.poignee{
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize; z-index:3;
  background:
    linear-gradient(135deg,transparent 46%,var(--face-bd-sombre) 46%,var(--face-bd-sombre) 54%,transparent 54%),
    linear-gradient(135deg,transparent 66%,var(--face-bd-sombre) 66%,var(--face-bd-sombre) 74%,transparent 74%);
}
.fenetre.pleine .poignee{display:none}

/* =========================================================================
   5. Barre des tâches
   ========================================================================= */

.barre{
  position:fixed; left:0; right:0; bottom:0; height:var(--barre-h); z-index:500;
  display:flex; align-items:stretch;
  background:linear-gradient(180deg,var(--chrome-clair) 0%,var(--chrome) 9%,var(--chrome-fonce) 42%,
                             var(--chrome) 88%,var(--chrome-nuit) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 -1px 4px rgba(0,0,0,.35);
  color:#fff;
}

.demarrer{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:0 22px 2px 9px; margin-right:6px;
  border:0; cursor:pointer; color:#fff;
  border-radius:0 9px 9px 0;
  background:linear-gradient(180deg,var(--demarrer-1) 0%,var(--demarrer-1) 12%,var(--demarrer-2) 40%,
                             var(--demarrer-3) 88%,var(--demarrer-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 2px 0 5px rgba(0,0,0,.28);
  font-family:"Trebuchet MS",Tahoma,sans-serif; font-size:15px; font-weight:700;
  font-style:italic; text-shadow:0 1px 2px rgba(0,0,0,.45);
  transition:filter .14s var(--sortie);
}
.demarrer:hover{filter:brightness(1.09)}
.demarrer[aria-expanded="true"]{filter:brightness(.92)}
.demarrer svg{width:19px;height:19px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}

.taches{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:3px; padding:3px 4px;
  overflow:hidden;
}
.tache{
  flex:0 1 168px; min-width:44px;
  display:flex; align-items:center; gap:6px;
  height:100%; padding:0 8px;
  border:1px solid transparent; border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 46%,rgba(0,0,0,.08));
  color:#fff; cursor:pointer; font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:background .14s var(--sortie);
}
.tache:hover{background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 46%,rgba(0,0,0,.06))}
.tache.active{
  background:linear-gradient(180deg,rgba(0,0,0,.24),rgba(0,0,0,.12));
  box-shadow:inset 1px 1px 2px rgba(0,0,0,.35);
}
.tache svg{width:15px;height:15px;flex:none}
.tache span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.plateau{
  flex:none; display:flex; align-items:center; gap:9px;
  padding:0 11px 0 12px;
  background:linear-gradient(180deg,var(--chrome-clair) 0%,var(--chrome) 12%,var(--chrome-fonce) 45%,
                             var(--chrome) 90%,var(--chrome-nuit) 100%);
  box-shadow:inset 1px 0 0 rgba(0,0,0,.18), inset 2px 0 0 rgba(255,255,255,.24);
  font-size:11px;
}
.plateau-etat{display:flex;align-items:center;gap:5px;cursor:default}
.pastille{width:7px;height:7px;border-radius:50%;background:#7bd97b;box-shadow:0 0 5px rgba(123,217,123,.9)}
.pastille.souci{background:#ffc84d;box-shadow:0 0 5px rgba(255,200,77,.9)}
.pastille.mort{background:#ff7a6b;box-shadow:0 0 5px rgba(255,122,107,.9)}
.horloge{
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  text-shadow:0 1px 1px rgba(0,0,0,.4); cursor:default;
}

/* --- zone de notification ------------------------------------------------
   Trois choses au plus, à gauche de l'horloge, comme les petites icônes de XP.

   Chacune GARDE SA PLACE même muette (visibility, pas display) : une pastille
   qui apparaît ne doit pas décaler l'horloge sous le curseur au moment où l'on
   allait cliquer dessus. Ce qui ne peut jamais apparaître — l'application n'est
   pas ouverte à ce compte — est retiré pour de bon (.absent), et ne réserve
   alors plus rien.                                                           */

.notifs{flex:none;display:flex;align-items:center;gap:6px}
.notif{
  flex:none; display:flex; align-items:center; justify-content:center; gap:4px;
  height:21px; padding:0 3px;
  border:1px solid transparent; border-radius:3px;
  background:none; color:#fff; cursor:pointer;
  font-size:11px; text-shadow:0 1px 1px rgba(0,0,0,.4);
  visibility:hidden;
  transition:background .14s var(--sortie);
}
.notif.on{visibility:visible}
.notif.absent{display:none}
.notif:hover{
  border-color:rgba(255,255,255,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1) 48%,rgba(0,0,0,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}
.notif:active{background:rgba(0,0,0,.22);box-shadow:inset 1px 1px 2px rgba(0,0,0,.35)}
.notif svg{width:14px;height:14px;flex:none;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.notif-txt{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}

/* Les largeurs réservées : le pire cas de chacune (« 9+ », « 12 h 30 »,
   « 10 / 12 »), mesuré dans la plus large des polices de la pile — DejaVu Sans
   sous Linux, Tahoma étant plus étroite. Pas un pixel de plus. */
.notif-demandes{width:48px}
.notif-session{width:64px}
.notif-jour{width:66px}

.notif-compte{
  min-width:17px; height:15px; padding:0 3px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,#f08b6a,#df4b2a 46%,#c22e12);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.3);
  font-size:9px; font-weight:700; line-height:1; color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}

.notif-point{
  width:8px;height:8px;flex:none;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#a8f0a8,#0ca30c 72%);
  box-shadow:0 0 5px rgba(12,163,12,.85), inset 0 1px 0 rgba(255,255,255,.5);
}
.notif-session.pause .notif-point{
  background:radial-gradient(circle at 34% 30%,#ffe7ab,#fab219 72%);
  box-shadow:0 0 5px rgba(250,178,25,.85), inset 0 1px 0 rgba(255,255,255,.5);
}

/* --- la bulle de la zone de notification ---------------------------------
   Celle qui annonçait les mises à jour. Elle sort du plateau, pas du milieu de
   l'écran : ce qu'elle dit mérite d'être lu, pas de bloquer le travail.      */
.ballon{
  position:fixed; right:12px; bottom:calc(var(--barre-h) + 12px); z-index:700;
  width:min(304px,calc(100vw - 24px));
  padding:10px 26px 11px 12px;
  background:#ffffe1; border:1px solid #b8b48c; border-radius:5px;
  color:#33321f; font-size:11px; line-height:1.55;
  box-shadow:0 6px 20px rgba(0,0,0,.34);
  animation:surgit .26s var(--sortie) both;
}
.ballon[hidden]{display:none}
@keyframes surgit{from{opacity:0;transform:translateY(9px)}}
/* La pointe qui désigne la zone de notification. */
.ballon::after{
  content:""; position:absolute; right:24px; bottom:-7px;
  width:12px; height:12px; background:#ffffe1;
  border-right:1px solid #b8b48c; border-bottom:1px solid #b8b48c;
  transform:rotate(45deg); border-radius:0 0 3px 0;
}
.ballon b{display:block;margin-bottom:3px}
.ballon-actions{display:flex;justify-content:flex-end;margin-top:9px}
.ballon-x{
  position:absolute; top:5px; right:6px; width:17px; height:17px; padding:0;
  border:0; border-radius:2px; background:none; color:#6d6a4e;
  font-size:14px; line-height:1; cursor:pointer;
}
.ballon-x:hover{background:rgba(0,0,0,.1);color:#33321f}

/* =========================================================================
   6. Menu Démarrer
   ========================================================================= */

.menu{
  position:fixed; left:4px; bottom:var(--barre-h); z-index:600;
  width:392px; max-width:calc(100vw - 8px);
  border-radius:8px 8px 0 0;
  background:var(--face);
  border:1px solid var(--chrome-bord);
  box-shadow:0 -2px 26px rgba(0,0,0,.45);
  overflow:hidden;
  transform-origin:0 100%;
  animation:sort .16s var(--sortie) both;
}
@keyframes sort{from{opacity:0;transform:translateY(10px) scale(.985)}}
.menu[hidden]{display:none}

.menu-tete{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  background:linear-gradient(180deg,var(--chrome-clair) 0%,var(--chrome) 42%,var(--chrome-fonce) 100%);
  border-bottom:2px solid #d8a12c;
  color:#fff;
}
.menu-vignette{
  width:42px;height:42px;border-radius:4px;flex:none;
  border:2px solid rgba(255,255,255,.85);
  display:grid;place-items:center;
  font-family:"Trebuchet MS",Tahoma,sans-serif;font-size:19px;font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.menu-qui{font-family:"Trebuchet MS",Tahoma,sans-serif;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.menu-role{font-size:11px;opacity:.8}

.menu-colonnes{display:grid;grid-template-columns:1fr 158px}
.menu-gauche{background:#fff;padding:6px;border-right:1px solid #b6b6a8}
.menu-droite{background:#d3e5fa;padding:6px}

/* Certaines entrées sont des <button> (elles agissent), d'autres des <a> (elles
   mènent à une page) : la même règle habille les deux. */
.menu-item{
  width:100%; display:flex; align-items:center; gap:9px;
  padding:6px 8px; border:0; border-radius:3px;
  background:none; cursor:pointer; text-align:left; color:var(--encre);
  text-decoration:none;
  transition:background .1s linear;
}
.menu-item:hover{text-decoration:none}
.menu-item:hover{background:var(--chrome);color:#fff}
.menu-item:hover .menu-sous{color:#dbe8ff}
.menu-droite .menu-item{font-size:11px}
.menu-item svg{width:22px;height:22px;flex:none}
.menu-droite .menu-item svg{width:16px;height:16px}
.menu-item b{display:block;font-weight:700;font-size:11px}
.menu-sous{display:block;font-size:10px;color:#5a5a50;line-height:1.35;margin-top:1px}
.menu-item[disabled]{opacity:.42;cursor:default}
.menu-item[disabled]:hover{background:none;color:var(--encre)}

.menu-sep{height:1px;margin:5px 6px;background:linear-gradient(90deg,#c8c8bb,transparent)}

.menu-pied{
  display:flex; justify-content:flex-end; gap:8px; padding:7px 11px;
  background:linear-gradient(180deg,var(--chrome),var(--chrome-fonce));
  border-top:1px solid var(--chrome-bord);
}
.menu-pied button{
  display:flex;align-items:center;gap:6px;
  background:none;border:0;color:#fff;cursor:pointer;font-size:11px;
  padding:4px 7px;border-radius:3px;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.menu-pied button:hover{background:rgba(255,255,255,.18)}
.menu-pied svg{width:17px;height:17px}

.rideau{position:fixed;inset:0;z-index:550}
.rideau[hidden]{display:none}

/* =========================================================================
   7. Boîtes de dialogue XP (confirmations)
   ========================================================================= */

.dlg-fond{
  position:fixed;inset:0;z-index:800;
  background:rgba(10,20,40,.32);
  display:grid;place-items:center;padding:20px;
  animation:fondu .14s linear both;
}
@keyframes fondu{from{opacity:0}}
.dlg-fond[hidden]{display:none}
.dlg{
  width:min(420px,100%);
  background:var(--face);
  border:1px solid var(--chrome-bord);border-top:0;border-radius:8px 8px 0 0;
  box-shadow:var(--ombre-fenetre);
  animation:ouvre .18s var(--sortie) both;
}
.dlg-corps{display:flex;gap:14px;padding:18px 18px 8px}
.dlg-corps svg{width:32px;height:32px;flex:none}
.dlg-texte{font-size:11px;line-height:1.6}
.dlg-texte b{display:block;font-size:12px;margin-bottom:4px}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px}

/* --- choix dans une boîte de dialogue ---------------------------------- */
.reglage{
  display:flex;gap:10px;align-items:flex-start;
  padding:10px 11px;margin-bottom:8px;
  border:1px solid var(--face-bd);border-radius:4px;
  background:var(--face-2);cursor:pointer;
  transition:border-color .14s var(--sortie), background .14s var(--sortie);
}
.reglage:hover{border-color:var(--chrome-clair);background:#fff}
.reglage:has(input:checked){border-color:var(--chrome);background:var(--face-2);box-shadow:inset 0 0 0 1px var(--chrome-inactif-1)}
.reglage input{margin:2px 0 0;flex:none;accent-color:var(--chrome)}
.reglage-corps{font-size:11px;line-height:1.6;color:var(--encre-2)}
.reglage-corps b{display:block;font-size:12px;color:var(--encre);margin-bottom:2px}
.reglage-corps em{display:block;margin-top:4px;font-style:normal;color:#8a6d1f}

.bouton{
  min-width:78px;height:24px;padding:0 12px;
  border:1px solid var(--face-bd);border-radius:3px;
  background:linear-gradient(180deg,#fff,var(--face-2) 46%,var(--face) 54%,var(--face-2));
  box-shadow:inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.12);
  cursor:pointer;font-size:11px;
  /* Couleur d'encre explicite : la face du bouton est claire dans les sept
     ambiances. Sans cette ligne le texte herite de son parent, et sur un fond
     clair d'assistant (ecran d'accueil) il ressortait blanc sur beige. */
  color:#1b1b1b;
  transition:filter .12s var(--sortie), border-color .12s var(--sortie);
}
.bouton:hover{border-color:var(--chrome-clair);filter:brightness(1.03)}
.bouton:active{box-shadow:inset 1px 1px 2px rgba(0,0,0,.2)}
.bouton.primaire{border-color:var(--chrome);box-shadow:inset 0 0 0 1px var(--chrome-inactif-1), inset 0 1px 0 #fff}
.bouton.danger{color:#9c1f14;border-color:#c98d86}

/* =========================================================================
   7 bis. « Exécuter » — la palette rapide (Ctrl+K)
   Reprend la boîte Exécuter de XP : chrome beige, champ, liste de résultats.
   ========================================================================= */

.executer-fond{
  position:fixed;inset:0;z-index:820;
  display:flex;justify-content:center;align-items:flex-start;
  padding:11vh 16px 16px;
  background:rgba(10,20,40,.18);
  animation:fondu .12s linear both;
}
.executer-fond[hidden]{display:none}
.executer{
  width:min(460px,100%);
  background:var(--face);
  border:1px solid var(--chrome-bord);border-top:0;border-radius:8px 8px 0 0;
  box-shadow:var(--ombre-fenetre);
  animation:ouvre .16s var(--sortie) both;
}
.executer-corps{padding:12px 12px 10px}
.executer-ligne{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.executer-ligne svg{flex:none}
.executer-champ{
  flex:1 1 auto;min-width:0;height:25px;padding:0 8px;
  border:1px solid #7f9db9;border-radius:2px;
  background:#fff;color:#000;font-size:12px;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.12);
}
.executer-champ:focus{outline:none;border-color:var(--chrome-clair);box-shadow:inset 1px 1px 0 rgba(0,0,0,.12),0 0 0 2px var(--chrome-clair)}
.executer-aide{font-size:10px;color:#6b6a58;margin:0 0 6px}
.executer-liste{
  list-style:none;margin:0;padding:2px;
  max-height:264px;overflow:auto;
  background:#fff;border:1px solid #b6b6a8;border-radius:2px;
}
.executer-liste:empty{display:none}
.executer-item{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px;border-radius:2px;cursor:pointer;
  font-size:11px;color:var(--encre);
}
.executer-item .ex-titre{font-weight:700}
.executer-item .ex-sous{color:#6b6a58;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.executer-item .ex-type{
  flex:none;font-size:10px;color:#8a8875;
  border:1px solid #d5d2c2;border-radius:2px;padding:0 5px;background:#f4f2e8;
}
.executer-item[aria-selected="true"],.executer-item:hover{background:var(--chrome);color:#fff}
.executer-item[aria-selected="true"] .ex-sous,.executer-item:hover .ex-sous{color:#d5e2f8}
.executer-item[aria-selected="true"] .ex-type,.executer-item:hover .ex-type{background:var(--chrome-fonce);border-color:var(--chrome);color:#cfdcf5}
.executer-vide{padding:9px;font-size:11px;color:#8a8875;text-align:center}

/* Intitulé de groupe : la nature des résultats se lit avant les résultats. */
.executer-groupe{
  padding:6px 8px 3px; margin-bottom:2px;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:#6b6a58; border-bottom:1px solid #e7e4d5;
  cursor:default; user-select:none;
}
.executer-groupe ~ .executer-groupe{margin-top:6px}

/* La frappe, surlignée dans le résultat : on voit POURQUOI la ligne est là. */
.executer-item mark{background:#ffe9a3;color:#1b1b17;border-radius:1px;padding:0 1px}
.executer-item[aria-selected="true"] mark,.executer-item:hover mark{background:#ffd75e}

/* =========================================================================
   8. Adaptation aux petits écrans
   Un bureau à fenêtres n'a aucun sens au doigt : sous 860px, les applications
   s'ouvrent en plein écran et la barre des tâches devient la navigation.
   ========================================================================= */

@media (max-width:860px){
  .session-corps{grid-template-columns:1fr;gap:22px;padding:26px 20px}
  .session-sep{display:none}
  .session::before,.session::after{display:none}
  .session-panneau,.saisie{padding-left:0}
  .session-marque{font-size:34px}

  .fenetre{
    inset:0 0 var(--barre-h) 0 !important;
    width:auto!important;height:auto!important;
    border-radius:0;border-left:0;border-right:0;
  }
  .fenetre .poignee{display:none}
  .tbtn.reduire,.tbtn.agrandir{display:none}

  .icones{
    inset:12px 12px auto 12px;
    flex-direction:row;flex-wrap:wrap;align-content:flex-start;
    gap:6px;
  }
  .icone{width:calc(33.333% - 4px)}
  .astuce{position:static;margin:12px;max-width:none}
  .menu{left:0;right:0;width:auto;border-radius:0}
  .menu-colonnes{grid-template-columns:1fr}
  .menu-droite{border-top:1px solid #b6b6a8}
  .tache{flex:1 1 0;min-width:0}
  .tache span{display:none}
  .demarrer{font-size:13px;padding:0 16px 2px 8px}

  /* La barre des tâches est ici la navigation : les pastilles lui rendent la
     place. Elles se réduisent à ce qui se lit d'un coup d'œil — un compte, un
     point, un rapport — et confient leurs mots à l'info-bulle et à l'aria.
     Les icônes d'application partent comme sont déjà partis les libellés des
     boutons de tâche, juste au-dessus. Total réservé : 100 px au lieu de 190. */
  .notifs{gap:4px}
  .notif svg{display:none}
  .notif-demandes{width:28px}
  .notif-session{width:16px}
  .notif-session .notif-txt{display:none}
  .notif-jour{width:48px}

  .ballon{right:8px;left:8px;width:auto}
  .ballon::after{right:20px}
}

/* Sous 560 px il ne reste de la place que pour ce qui attend une réponse et ce
   qui tourne. Le rapport du jour se retrouve d'un appui, dans le Suivi. */
@media (max-width:560px){
  .notif-jour{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .piste i{animation:none;left:auto;position:static;display:inline-block;margin:2px}
}
