/* LA PAGE UNIFIÉE — awoui.com/@ (28/09/2026). L'esp@ce et le bureau, une seule page : le
   héros de l'esp@ce tel quel (l'œil « L'esp@ce », le bonjour en grand, la date, la carte de
   l'adresse, la barre de commande — qui EST le shell), le profil à côté du bonjour, la veille
   dans la marge de droite, le rail collé au bord ; le parcours et la scène viennent en dessous.
   Le profil et la veille sont des fenêtres du bureau posées à ces places (`en-place`) : elles
   gardent exactement l'allure des cartes de l'esp@ce, et leurs outils (déplacer, ancrer, plein
   écran, fermer) n'apparaissent qu'au survol, au-dessus de la carte. Le fond vidéo, le lecteur
   d'ambiance et l'assistance viennent du pied de page ; le pied lui-même est caché sous un
   bureau ouvert. Les styles de l'esp@ce (css/espace.css) sont chargés à côté. */
html.bureau-ouvert footer{display:none}                  /* /@ et /@me : sous un bureau, pas de pied de site */
/* LES COULEURS ET LE FOND DE L'ESP@CE (29/09, Antoine) : la passerelle peignait sa feuille en opaque
   (body, atelier) et cachait la vidéo de fond ; sur /@ tout est transparent, comme sur /espace, et le
   rail prend le verre des cartes. */
html.arobase .pass-body,html.arobase .atelier,html.arobase .machine,html.arobase .scene-vide{background:transparent}
/* LES HALOS DE L'ACCUEIL (29/09, Antoine : « récupère les fonds colorés de la page d'accueil ») : les
   trois lueurs du héros de /, mêmes rayons, mêmes centres, mêmes jetons — derrière tout le reste. */
html.arobase .pass::before{content:"";position:absolute;left:0;right:0;top:-90px;height:min(980px,110vh);z-index:0;pointer-events:none;
  background:
    radial-gradient(48vw max(360px,38vh) at 18% 102px,var(--halo-hero-1),transparent 60%),
    radial-gradient(50vw max(420px,44vh) at 86% 95px,var(--halo-hero-2),transparent 62%),
    radial-gradient(55vw max(480px,52vh) at 60% 306px,var(--halo-hero-3),transparent 64%)}
html.arobase .pass>*{position:relative;z-index:1}
/* LE FOND VIDÉO MÊME EN THÈME CLAIR, ET MOINS BLANC (29/09, Antoine : « en thème blanc on ne voit plus
   le fond, et de toute façon il claque trop blanc ») — sur /@ et sur l'accueil (body.accueil) : la vidéo
   reste affichée, et le voile clair est plus léger et légèrement teinté, au lieu du blanc à 80 %. */
html.arobase .bg-video,body.accueil .bg-video{display:block}
html.arobase .bg-video::after,body.accueil .bg-video::after{background:var(--veil-page,var(--veil))}
html[data-theme="light"].arobase,html[data-theme="light"] body.accueil{--veil-page:linear-gradient(180deg,rgba(236,240,246,.42),rgba(236,240,246,.60))}
@media (prefers-color-scheme:light){
  html:not([data-theme]).arobase,html:not([data-theme]) body.accueil{--veil-page:linear-gradient(180deg,rgba(236,240,246,.42),rgba(236,240,246,.60))}
}
/* LE RAIL EN VERRE DE L'EN-TÊTE (29/09, Antoine : « la même teinte que le header, le même effet glass ») :
   les jetons du chrome, à l'identique — fond, flou, filet, ombre, et l'arête lumineuse en haut. */
/* LE RAIL EN VERRE DE L'EN-TÊTE (29/09, Antoine : « la même teinte que le header, le même effet glass ») :
   les jetons du chrome, à l'identique — fond, flou, filet, ombre, et l'arête lumineuse en haut.
   (Un verre plus dense essayé le 29/09 au matin, retiré à la demande d'Antoine : on garde le chrome tel quel.) */
html.arobase{--rail-fond:rgba(255,255,255,.035)}
html[data-theme="light"].arobase{--rail-fond:rgba(248,249,252,.42)}
@media (prefers-color-scheme:light){ html:not([data-theme]).arobase{--rail-fond:rgba(248,249,252,.42)} }
/* (29/09, Antoine : « fond transparent pour s'adapter à l'arrière ») : presque rien, le flou fait le verre. */
html.arobase .dock{background:var(--rail-fond);border:1px solid var(--chrome-line);box-shadow:var(--chrome-edge);
  backdrop-filter:var(--chrome-blur);-webkit-backdrop-filter:var(--chrome-blur);overflow:visible}
html.arobase .dock::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,transparent,var(--chrome-spec) 20%,var(--chrome-spec) 80%,transparent)}
/* L'EN-TÊTE PORTE LA MÊME ARÊTE (29/09, Antoine : « la très fine barre blanche au-dessus du menu, la même
   sur le header plutôt qu'une ligne noire ») : plus de filet sombre en bas, une arête lumineuse à la place. */
html.arobase header.nav,html.arobase header.nav.scrolled{border-bottom-color:transparent}
html.arobase header.nav::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--chrome-spec) 12%,var(--chrome-spec) 88%,transparent)}
html.arobase .bureau .xp{display:none}                    /* la carte de profil porte niveau, points et mission */
html.arobase .bureau-adresse{display:none}

/* ── LE HÉROS ────────────────────────────────────────────────────────────────── */
html.arobase .accueil-tete{position:relative;z-index:30;margin:6px 0 22px}
/* EN GRAND (29/09, Antoine) : dès qu'on entre dans une formation (Reprendre, Cours, une autre formation…),
   le bonjour et ses cartes s'effacent ; « Accueil » dans le rail les ramène. */
html.arobase .bureau:not(.accueil-vue) .accueil-tete{display:none}
html.arobase .esp-place .esp-pliens{display:flex;gap:10px;align-items:center;margin-top:6px}
html.arobase .esp-place .esp-pliens a{font-size:12px;color:var(--encre-3);text-decoration:none;border-bottom:1px solid var(--trait-fin)}
html.arobase .esp-place .esp-pliens a:hover{color:var(--cyan)}
html.arobase .accueil-tete .esp-eyebrow{margin-bottom:12px}
html.arobase .accueil-tete .esp-place{margin-top:22px}
html.arobase .accueil-tete .esp-cmd{position:relative;margin:16px 0 0;max-width:620px}
html.arobase .esp-cmd-pop .esp-opt{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
/* jamais `display:none` quand elle est vide : le moteur des fenêtres lit son `display` (même piège que la marge) */
html.arobase .accueil-profil{grid-column:2;grid-row:1;min-width:0}
@media (max-width:900px){ html.arobase .accueil-profil{grid-column:1;grid-row:auto;margin-top:18px} }

/* LE SHELL EST LA BARRE : l'invite (#invite) habillée en pilule de commande, le chevron pour
   icône — c'est le même objet que l'invite de toujours, il a juste changé de place. */
html.arobase .invite.invite-unifiee{width:100%;max-width:620px;gap:12px;padding:13px 16px 13px 18px;margin:0;
  border:1px solid var(--glass-border,var(--trait));border-radius:999px;
  background:var(--glass-solid,var(--feuille-2));box-shadow:var(--glass-shadow,none);
  backdrop-filter:var(--glass-blur,none);-webkit-backdrop-filter:var(--glass-blur,none);transition:border-color .2s,box-shadow .2s}
html.arobase .invite.invite-unifiee:focus-within{border-color:var(--cyan);box-shadow:var(--sh-ac,0 0 0 3px color-mix(in srgb,var(--cyan) 22%,transparent))}
html.arobase .invite.invite-unifiee .invite-ico{width:18px;height:18px;opacity:.7;color:var(--cyan)}
html.arobase .invite.invite-unifiee .invite-champ{font-family:var(--fb,system-ui);font-size:15px}
html.arobase .invite.invite-unifiee .invite-champ::placeholder{color:var(--encre-3)}

/* ── LES PLACES : à côté du bonjour, dans la marge ───────────────────────────── */
.bureau-marge{display:none}
/* toujours affichée sur /@, même vide : le moteur des fenêtres lit son `display` pour savoir si la
   place existe (vide, `:empty` la cachait et les fenêtres partaient en libre — vu au banc). */
html.arobase .bureau-marge{display:flex;flex-direction:column;gap:18px;min-width:0}
.app.en-place{position:relative;margin:0;padding:0;background:none;border:0;box-shadow:none;animation:none;overflow:visible}
.app.en-place .fenetre-poignee,.app.en-place .fenetre-titre{display:none}
/* les outils, au-dessus de la carte, au survol seulement */
.app.en-place .fenetre-barre{position:absolute;top:-14px;right:10px;z-index:3;min-height:0;padding:2px 4px;border:1px solid var(--glass-border,var(--trait-fin));border-radius:999px;
  background:var(--glass-solid,var(--feuille));box-shadow:var(--glass-shadow,none);opacity:0;transition:opacity .15s}
.app.en-place:hover .fenetre-barre,.app.en-place:focus-within .fenetre-barre{opacity:1}
.app.en-place .fenetre-outils{padding:0;gap:0}
.app.en-place .fenetre-outils .geste{min-height:26px;padding:3px 5px;margin:0}
.app.en-place .fenetre-outils .geste span{display:none}
.app.en-place .fenetre-outils .fenetre-fermer{margin-left:0}
.app.en-place .fenetre-ancres{right:10px;left:auto}
.natif-vue{min-width:0}
.natif-vide{margin:10px 2px;font:13px/1.5 var(--fm);color:var(--encre-3)}
.app.en-tete .esp-profil{grid-column:auto;grid-row:auto;margin-top:8px}
.app.en-marge .esp-profil{grid-column:auto;grid-row:auto;max-width:none;margin:0}

/* ── L'ACCUEIL : les tuiles de l'écosystème, comme sur l'esp@ce ─────────────── */
.accueilapp .esp-sect{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 12px}
.accueilapp .esp-sect h2{margin:0;font-family:var(--fd);font-size:15px;font-weight:600;color:var(--encre)}
.accueilapp .esp-glyph{cursor:pointer;font:inherit}
.accueilapp .esp-status{margin:14px 0 0;font:12.5px/1.4 var(--fm);color:var(--encre-3);display:flex;align-items:center;gap:8px}

/* ── LA GRILLE : rail · corps (960, comme l'esp@ce) · marge ─────────────────── */
html.arobase .mission{max-width:720px}
@media (min-width:1280px){
  html.arobase .bureau{width:auto;grid-template-columns:var(--rail-l,216px) minmax(0,960px) 300px;column-gap:clamp(24px,3vw,48px);justify-content:center}
  html.arobase.rail-compact .bureau{grid-template-columns:80px minmax(0,960px) 300px}
  html.arobase.rail-droite .bureau{grid-template-columns:minmax(0,960px) 300px var(--rail-l,216px)}
  html.arobase.rail-droite.rail-compact .bureau{grid-template-columns:minmax(0,960px) 300px 80px}
  html.arobase.rail-bord .bureau,html.arobase.rail-bas .bureau{grid-template-columns:minmax(0,960px) 300px}
  html.arobase .bureau-marge{position:sticky;top:calc(var(--barre,60px) + 26px);align-self:start;padding-top:52px}
  /* UNE BANDE ANCRÉE (le terminal à droite, le cours à gauche) PREND LA PLACE DE LA MARGE (28/09,
     Antoine : « l'espace de marge entre le cours et le terminal mange tout ») : la marge passe sous
     le corps, le corps garde toute la largeur qui reste. */
  html.arobase.ancre-gauche .bureau,html.arobase.ancre-droite .bureau{grid-template-columns:var(--rail-l,216px) minmax(0,960px)}
  html.arobase.ancre-gauche.rail-compact .bureau,html.arobase.ancre-droite.rail-compact .bureau{grid-template-columns:80px minmax(0,960px)}
  html.arobase.ancre-gauche.rail-droite .bureau,html.arobase.ancre-droite.rail-droite .bureau{grid-template-columns:minmax(0,960px) var(--rail-l,216px)}
  html.arobase.ancre-gauche.rail-droite.rail-compact .bureau,html.arobase.ancre-droite.rail-droite.rail-compact .bureau{grid-template-columns:minmax(0,960px) 80px}
  html.arobase.ancre-gauche.rail-bord .bureau,html.arobase.ancre-droite.rail-bord .bureau,
  html.arobase.ancre-gauche.rail-bas .bureau,html.arobase.ancre-droite.rail-bas .bureau{grid-template-columns:minmax(0,960px)}
  html.arobase.ancre-gauche .bureau-marge,html.arobase.ancre-droite .bureau-marge{grid-column:1 / -1;position:static;padding-top:0;flex-direction:row;flex-wrap:wrap}
  html.arobase.ancre-gauche .bureau-marge>*,html.arobase.ancre-droite .bureau-marge>*{flex:1 1 300px}
  /* LA MARGE VIDE NE PREND PAS DE COLONNE : rien ne creuse un trou à droite du cours. Elle reste
     affichée (display:flex, largeur nulle) pour que le moteur des fenêtres puisse toujours y poser. */
  html.arobase .bureau:has(.bureau-marge:empty){grid-template-columns:var(--rail-l,216px) minmax(0,960px)}
  html.arobase.rail-compact .bureau:has(.bureau-marge:empty){grid-template-columns:80px minmax(0,960px)}
  html.arobase.rail-droite .bureau:has(.bureau-marge:empty){grid-template-columns:minmax(0,960px) var(--rail-l,216px)}
  html.arobase.rail-droite.rail-compact .bureau:has(.bureau-marge:empty){grid-template-columns:minmax(0,960px) 80px}
  html.arobase.rail-bord .bureau:has(.bureau-marge:empty),html.arobase.rail-bas .bureau:has(.bureau-marge:empty),
  html.arobase.ancre-gauche.rail-bord .bureau:has(.bureau-marge:empty),html.arobase.ancre-droite.rail-bord .bureau:has(.bureau-marge:empty){grid-template-columns:minmax(0,960px)}
  html.arobase .bureau-marge:empty{grid-column:1 / -1;padding:0;height:0}
}
@media (max-width:1279px){
  html.arobase .bureau-marge{grid-column:1 / -1}
}

/* L'AMBIANCE PASSE PAR-DESSUS (29/09, Antoine) : le lecteur et son panneau (z 70/71 sur le site) vivent
   au-dessus du rail (8900) et des fenêtres (9000) quand le bureau est ouvert — on vient de les ouvrir. */
html.bureau-ouvert .amb-dock{z-index:9300}
html.bureau-ouvert .amb-panel{z-index:9301}

/* LE VERRE PARTOUT (29/09, Antoine : « le même effet blur glass transparent du menu et du header
   partout, en respectant le dégradé, plus gris à gauche et plus blanc à droite ») : le fond du rail
   (presque transparent + le flou du chrome) sur toutes les cartes et fenêtres de /@, avec un léger
   dégradé de gauche à droite par-dessus — le fond vidéo et les halos passent au travers. */
html.arobase{--verre-degrade:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.06))}
html[data-theme="light"].arobase{--verre-degrade:linear-gradient(90deg,rgba(214,220,230,.28),rgba(255,255,255,.52))}
@media (prefers-color-scheme:light){ html:not([data-theme]).arobase{--verre-degrade:linear-gradient(90deg,rgba(214,220,230,.28),rgba(255,255,255,.52))} }
html.arobase .esp-place,html.arobase .invite.invite-unifiee,html.arobase .esp-glyph,html.arobase .esp-cmd-pop,
html.arobase .app.en-place .esp-profil,html.arobase .app.en-place .esp-rsec,html.arobase .app.en-place .fenetre-barre,
html.arobase .app.fenetre{background-color:var(--rail-fond);background-image:var(--verre-degrade);
  border:1px solid var(--chrome-line);box-shadow:var(--chrome-edge);           /* exactement le bord et l'ombre du rail (29/09, surtout en sombre) */
  backdrop-filter:var(--chrome-blur);-webkit-backdrop-filter:var(--chrome-blur)}
html.arobase{--verre-degrade:linear-gradient(90deg,rgba(255,255,255,.015),rgba(255,255,255,.045))}   /* sombre : à peine, comme le rail */
html.arobase .esp-glyph .esp-g{background:var(--rail-fond)}

/* UNE FENÊTRE SORTIE (libre ou ancrée) : le bureau se range contre le rail et laisse la place (29/09,
   Antoine : « le cours collé au menu quand le terminal est affiché »). */
html.arobase.avec-fenetre .bureau{justify-content:start}