/* ===========================================================================
   Awoui — LE BUREAU. Les applications de la machine, rendues par Awoui.

   CE FICHIER A ÉTÉ DÉSHABILLÉ LE 12/09/2026, ET C'EST LA VRAIE LEÇON.
   La première version posait une CARTE : bord, coins arrondis, ombre portée,
   barre de titre, dock en bas. J'avais retiré XFCE et redessiné une fenêtre —
   la même métaphore de 1996, en plus propre. Le décor ne devient pas moderne
   parce qu'il est bien dessiné ; il devient moderne quand il n'est plus là.

   CE QUI RESTE, ET RIEN D'AUTRE :
     · une COLONNE, au centre de l'écran, sur la même feuille blanche que
       l'invite — pas un objet posé en bas de la page, mais LE centre ;
     · une ligne de mots pour dire où l'on peut aller ;
     · le fil d'Ariane pour dire où l'on est ;
     · le contenu.

   Pas de cadre, pas de fond distinct, pas d'ombre, pas de barre de titre, pas
   de triade réduire/agrandir/fermer. Ce qui reste porte de l'INFORMATION :
   l'icône qui distingue un dossier d'un fichier en est, la bordure qui entoure
   le tout n'en était pas.

   UNE SEULE VUE. Changer d'application ne change ni la page, ni la colonne, ni
   la place des yeux : seul le contenu se remplace, exactement là où il était.
   C'est ce qui fait qu'on n'a jamais « ouvert une fenêtre » — on a posé autre
   chose au centre.

   Le raisonnement, les mesures et la grammaire : deploy/essai/os-awoui.md.
   =========================================================================== */

.bureau{
  width:min(680px,94vw);
  justify-self:center;
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1fr);
  /* En large : deux colonnes, le rail (150 px) puis le corps, qui GARDE ses
     680 px — on sort de la largeur habituelle du milieu, c'est voulu. */
  /* La barre d'expérience est le premier enfant ; elle se colle un peu plus
     à la ligne des applications qu'au reste, parce que les deux disent la
     même chose — où j'en suis, et où je peux aller. */
  animation:bureau-arrive .55s cubic-bezier(.22,1,.36,1) both;
}
/* `hidden` NE SUFFIT PAS quand l'auteur pose un `display` : la règle du
   navigateur perd. Troisième occurrence dans ce projet — c'est une famille de
   bugs, pas un accident. */
.bureau[hidden]{display:none !important}
@keyframes bureau-arrive{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ── LA LIGNE DES APPLICATIONS ────────────────────────────────────────────
   Ce fut un dock à icônes encadrées, en bas d'une carte. C'est maintenant une
   ligne de mots : la même fonction, sans le meuble. Les mots sont dans la
   fonte des légendes du site — c'est le langage de la maison, pas un style de
   plus. Celui où l'on est est noir ; les autres attendent en gris. */
/* Le corps porte les rangées (niveau, adresse, mission, scène) avec le même
   espacement qu'avant. */
/* `minmax(0,1fr)` ET PAS `auto` : une piste `auto` se dimensionne sur le
   contenu le plus large (une ligne de liste non coupée), et la colonne
   débordait de son cadre sur téléphone — 398 px dans 343 (vu le 22/09). Avec
   un minimum de zéro, la colonne prend la place qu'on lui donne et le contenu
   se coupe (…) ou se plie dedans. */
.bureau-corps{display:grid;gap:20px;min-width:0;grid-template-columns:minmax(0,1fr)}
.bureau-corps>.xp+.mission,.bureau-corps>.xp+.bureau-scene{margin-top:-4px}


.dock{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;
}
.dock-app{
  border:0;background:none;cursor:pointer;
  color:var(--encre-3);
  /* 44 px de cible malgré 12 px de texte : la règle vaut pour les pouces comme
     pour les mains qui visent mal, et elle ne se voit pas. */
  min-height:44px;padding:0 13px;
  font:inherit;letter-spacing:inherit;
  text-transform:lowercase;
}
.dock-app:hover{color:var(--encre)}
/* « IA » se lit en capitales : le seul mot du rail qui échappe aux minuscules. */
.dock-app[data-app="assistant"]{text-transform:none}
.dock-app[aria-current="true"]{color:var(--encre)}
.dock-sep{color:var(--trait);font-family:var(--fm);font-size:11px;user-select:none}
.dock-app.quitter,.dock-app.tout{color:var(--encre-3)}
.dock-app.quitter:hover,.dock-app.tout:hover{color:var(--encre)}
/* L'ICÔNE DEVANT LE MOT : 14 px, alignée sur la ligne de texte, le trait fin
   des autres pictos. Le mot reste — l'icône fait reconnaître, pas deviner. */
.dock-app{display:inline-flex;align-items:center;gap:6px}
.dock-app svg{width:14px;height:14px;stroke-width:2;flex:0 0 auto;opacity:.85}
.dock-app[aria-current="true"] svg,.dock-app:hover svg{opacity:1}
/* « TOUT OUVRIR » SUR LE BORD DROIT, hors du flux des mots : il ne peut pas
   être pris pour le suivant. Plus petit, plus pâle, sans point médian. */
/* Sur SA PROPRE LIGNE, à droite : en absolu il chevauchait « fermer » dès que
   la ligne était large — pire que dans le flux. En flux, pleine largeur et
   aligné à droite, il ne peut rencontrer aucun autre mot. */
.dock-app.cote{
  width:100%;justify-content:flex-end;
  font-size:10.5px;opacity:.55;padding:0 6px;min-height:30px;
}
.dock-app.cote:hover{opacity:1}

/* LE BLOC DU RAIL (≥ 920 px) VIENT APRÈS LES RÈGLES DE BASE, ET C'EST LE
   POINT. Écrit avant elles, il perdait à poids égal : `.dock{align-items:center}`
   et `.dock-app{padding:0 13px}` battaient `align-items:stretch` et
   `padding:0 14px 0 2px`, donc chaque mot du rail était CENTRÉ sur sa propre
   largeur — bords gauches en escalier, « tout ouvrir » décalé (vu par Antoine
   le 22/09). L'ordre du fichier est la règle : le particulier après le général. */
/* LE RAIL. À partir de 920 px : le bureau s'élargit à rail + corps, le rail est
   une colonne de mots, texte sur fond de page, un filet à droite et rien
   d'autre. Collant : il suit quand on descend dans une longue page. */
@media (min-width:920px){
  .bureau{
    width:auto;
    grid-template-columns:150px min(680px,calc(94vw - 178px));
    column-gap:28px;row-gap:0;
    align-items:start;
  }
  .dock{
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    position:sticky;top:22px;
    padding:6px 0 6px 0;
    border-right:1px solid var(--trait-fin);
    font-size:12px;letter-spacing:.06em;
  }
  .dock-sep{display:none}
  .dock-app{
    justify-content:flex-start;
    min-height:40px;padding:0 14px 0 2px;
    border-radius:8px 0 0 8px;
    text-align:left;
  }
  .dock-app[aria-current="true"]{background:var(--feuille-2)}
  @supports (color:color-mix(in srgb,red,blue)){
    .dock-app[aria-current="true"]{background:color-mix(in srgb,var(--encre) 6%,var(--feuille))}
  }
  .dock-app.coin,.dock-app.quitter{margin-top:2px}
  .dock-app.quitter{margin-top:14px}
  /* « tout ouvrir » tout en bas du rail, à l'écart, discret. */
  .dock-app.cote{
    width:auto;justify-content:flex-start;
    margin-top:22px;padding:0 14px 0 2px;
    font-size:10.5px;opacity:.5;min-height:30px;
  }
}
/* LA SCÈNE PLEINE : un mot posé (missions, liaison) prend la place de la
   mission, au centre, sans pousser son contenu sous le pli. */
.bureau.scene-pleine>.bureau-corps>.mission{display:none !important}
@media (max-width:620px){
  .dock-app.cote{justify-content:center;opacity:.5}
}

/* UNE ARRIVÉE SE VOIT. Un mot qui apparaît sans rien dire, c'est une interface
   qui change dans le dos de quelqu'un ; la bulle le dit, et la ligne le
   souligne une seconde. Rien de plus : une animation qui dure est un décor. */
.dock.arrive{animation:ligne-arrive .9s ease both}
@keyframes ligne-arrive{
  0%{opacity:.35}
  40%{opacity:1}
  100%{opacity:1}
}

/* ── LA VUE ──────────────────────────────────────────────────────────────── */
.app{animation:app-arrive .3s cubic-bezier(.22,1,.36,1) both}
.app[hidden]{display:none !important}
@keyframes app-arrive{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ── FICHIERS ─────────────────────────────────────────────────────────────
   Le premier vrai concept informatique, et le bon premier : « des dossiers
   dans des dossiers » est déjà su de tout le monde — un classeur, un tiroir.
   iOS a passé quinze ans à cacher ce que nous devons, nous, montrer. */
.fil{
  display:flex;flex-wrap:wrap;align-items:center;gap:1px;
  font-family:var(--fm);font-size:12px;color:var(--encre-3);
  margin:0 0 6px;
}
.fil-pas{
  border:0;background:none;cursor:pointer;color:var(--encre-3);
  padding:6px 5px;font:inherit;
}
.fil-pas:hover{color:var(--encre)}
.fil-pas:last-child{color:var(--encre)}
.fil-sep{color:var(--trait)}

.liste{list-style:none;margin:0;padding:0}
.entree{
  display:flex;align-items:center;gap:13px;
  width:100%;min-height:50px;
  padding:6px 2px;
  border:0;border-bottom:1px solid var(--trait-fin);
  background:none;cursor:pointer;text-align:left;
  font:inherit;color:var(--encre);
}
.entree:first-child{border-top:1px solid var(--trait-fin)}
.entree:hover{color:var(--encre);background:var(--feuille-2)}   /* #000 : noir sur noir en thème sombre, vu le 15/09 */
/* L'ICÔNE RESTE : elle ne décore pas, elle dit la seule chose qu'on ne peut
   pas lire dans un nom — si ça s'ouvre ou si ça se lit. */
.entree-ico{width:20px;flex:0 0 20px;display:grid;place-items:center;color:var(--encre-3)}
.entree-ico svg{width:19px;height:19px;stroke-width:1.6}
.entree.dossier .entree-ico{color:var(--accent,var(--bien))}
.entree-nom{
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:15.5px;
}
.entree-taille{font-family:var(--fm);font-size:11px;color:var(--encre-3);flex:0 0 auto}

.vide{padding:30px 2px;color:var(--encre-3);font-size:14px}

/* Les gestes ne sont plus des boutons encadrés : des mots, sous la liste. Ce
   qu'on vient faire ici dans presque tous les cas, c'est regarder. */
.gestes{display:flex;flex-wrap:wrap;gap:0;margin:4px 0 0}
.geste{
  min-height:44px;padding:0 12px 0 0;margin-right:10px;
  border:0;background:none;cursor:pointer;
  font:13px/1 var(--fd,system-ui);color:var(--encre-2);
  display:inline-flex;align-items:center;gap:7px;
}
.geste svg{width:15px;height:15px;stroke-width:1.8}
/* Un geste caché est caché : `display:flex` ci-dessus battait l'attribut
   `hidden` du navigateur (« Relier un domaine » se montrait hors d'un site,
   « Activer HTTPS » sans domaine). Vu le 23/09 ; même parade que vpn.css. */
.geste[hidden]{display:none !important}
.geste:hover{color:var(--encre)}
/* UNE SEULE ACTION DESTRUCTRICE PAR ÉCRAN, ET JAMAIS DANS UN COIN : la
   dernière de la rangée, en rouge, et elle demande confirmation. */
.geste.danger{color:var(--mal)}
.geste.danger:hover{color:var(--mal)}

/* ── TEXTE ────────────────────────────────────────────────────────────────
   Écrire quelque chose que la machine lit : la deuxième marche, et la première
   fois qu'on FAIT au lieu de regarder. La zone n'a pas de cadre non plus — un
   filet en dessous suffit à dire « ici on écrit », comme l'invite. */
.texte-nom{
  display:block;font-family:var(--fm);font-size:12px;color:var(--encre-3);
  margin:0 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* L'ESPACE DE SAISIE A SON CADRE. Un trait sous la zone ne la distinguait
   pas du texte de la mission au-dessus : tout était de l'encre sur la
   feuille. Le cadre est léger et arrondi, teinté d'un souffle de la couleur
   de la maison, avec une ombre à peine posée — assez pour dire « ici, on
   écrit », pas assez pour faire un meuble. Au focus, le bord prend la couleur
   et un halo doux : on sait où l'on est sans que rien ne crie. */
.texte-zone{
  display:block;width:100%;box-sizing:border-box;
  min-height:min(44vh,340px);
  padding:14px 16px 18px;
  border:1px solid var(--trait);border-radius:14px;
  background:var(--feuille);color:var(--encre);
  font:13.5px/1.7 var(--fm);
  resize:vertical;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 28px -22px rgba(0,0,0,.35);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
@supports (color:color-mix(in srgb,red,blue)){
  .texte-zone{
    border-color:color-mix(in srgb,var(--bien) 26%,var(--trait));
    /* La surface part du fond de la PAGE (pas d'un jeton de carte qui ne suit
       pas le thème nuit) : un souffle d'encre pour la décoller, un souffle
       de vert pour la teinter. Clair : gris-vert pâle ; nuit : bleu relevé. */
    background:
      linear-gradient(160deg,color-mix(in srgb,var(--bien) 7%,transparent),transparent 45%),
      color-mix(in srgb,var(--encre) 5%,var(--feuille));
  }
  .texte-zone:focus{
    border-color:var(--bien);
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
               0 0 0 4px color-mix(in srgb,var(--bien) 14%,transparent),
               0 12px 30px -22px rgba(0,0,0,.4);
  }
}
.texte-zone:focus{outline:none;border-color:var(--accent,var(--bien))}

/* ── TERMINAL ─────────────────────────────────────────────────────────────
   IL N'EST PLUS NOIR, et c'est un choix. Un rectangle sombre au milieu d'une
   feuille blanche est un objet posé dessus — exactement la carte qu'on vient
   de retirer. Le terminal est du texte ; il s'écrit donc sur la même feuille
   que le reste, dans la même fonte que les légendes. Ce qui le distingue,
   c'est le chevron et l'alignement, pas une boîte.

   Et il arrive comme une APPLICATION DE PLUS dans la ligne, pas comme un mur :
   le shell cesse d'être la porte et devient une destination. */
.term{display:grid;gap:12px}
.term-flot{
  margin:0;
  max-height:min(42vh,320px);overflow:auto;
  font:12.5px/1.75 var(--fm);color:var(--encre);
  white-space:pre-wrap;word-break:break-word;
}
.term-echo{color:var(--bien)}
.term-mal{color:var(--mal)}
.term-ligne{
  display:flex;align-items:center;gap:10px;
  border-bottom:1.5px solid var(--trait);
}
.term-ligne:focus-within{border-bottom-color:var(--accent,var(--bien))}
.term-invite{font:13px/1 var(--fm);color:var(--encre-3);flex:0 0 auto}
.term-champ{
  flex:1 1 auto;min-height:46px;
  border:0;background:none;outline:none;
  font:13px/1 var(--fm);color:var(--encre);
}

/* ── ÉCRAN ────────────────────────────────────────────────────────────────
   Le seul endroit noir qui reste, et il a le droit de l'être : c'est le seul
   qui montre vraiment des pixels. On ne le supprime pas — une vraie
   application graphique en aura toujours besoin — mais il cesse d'être LE
   bureau pour devenir UNE application. */
.ecran-cadre{
  display:block;width:100%;height:min(54vh,460px);
  border:0;background:#000;
}
.ecran-note{margin:12px 0 0;font-size:12.5px;color:var(--encre-3)}

/* ── LE MOT DE LA MACHINE ─────────────────────────────────────────────────
   Une ligne, au même endroit, pour ce que le bureau a à dire. Pas une
   notification qui surgit et qu'il faut chasser. */
.mot{min-height:18px;margin:2px 0 0;font-size:13px;color:var(--encre-2)}
.mot.mal{color:var(--mal)}
.mot.bien{color:var(--bien)}

@media (max-width:560px){
  /* LE RAIL TIENT SUR UNE RANGÉE QUI DÉFILE (22/09). Huit mots à 11 px ne
     tiennent pas sur 375 px : ils se pliaient sur trois rangs, un menu. Une
     rangée qu'on fait glisser, le mot courant ramené en vue par le bureau, et
     « tout ouvrir » à la fin de la rangée, petit et pâle comme ailleurs. */
  .dock{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 2px}
  .dock::-webkit-scrollbar{display:none}
  .dock-app{flex:0 0 auto;white-space:nowrap}
  .dock-app.cote{width:auto;flex:0 0 auto;justify-content:flex-start;opacity:.5;padding:0 10px 0 6px}
  /* PAS `width:100%` ICI — voir la note de passerelle.css : `vw` compte la
     barre de défilement et `clientWidth` non, et la rangée parente mesurait
     386 px sur un écran de 375. On se borne au parent, une fois celui-ci
     corrigé à la source. */
  /* DEUX GOUTTIÈRES DE 16 px, LES MÊMES QUE CELLES DE L'INVITE EN DESSOUS.
     Sans elles, les noms de fichiers touchaient le bord de l'écran : dépouillé
     ne veut pas dire à ras bord, et surtout la colonne du bureau et celle de
     l'invite ne commençaient pas au même endroit — deux alignements sur une
     page qui n'en veut qu'un. */
  .bureau{width:calc(100% - 32px);gap:16px}
  /* La ligne des applications doit tenir sur UN rang : deux rangs de mots
     redeviennent un menu, c'est-à-dire du mobilier. */
  .dock{gap:0;font-size:11px;letter-spacing:.06em}
  .dock-app{padding:0 7px}
}

@media (prefers-reduced-motion:reduce){
  .bureau,.app{animation:none}
}

/* ── LE LANCEUR : une seule icône, au centre, et rien d'autre ──────────────
   CE QUI N'ALLAIT PAS. Le bureau s'ouvrait directement sur la liste des
   fichiers : le contenu arrivait AVANT l'outil qui le contient. On avait donc
   un dossier ouvert sans avoir jamais vu qu'il y avait une application — la
   loi de l'assemblage respectée sur les mots, trahie sur les choses.

   Le premier écran est maintenant UNE ICÔNE. On la touche, elle s'ouvre, et
   les fichiers arrivent. C'est la grammaire de l'écran d'accueil d'un
   téléphone — la seule qu'un débutant possède déjà avant d'arriver — et c'est
   littéralement « un élément au centre ».

   L'ICÔNE PORTE LE DÉGRADÉ DE LA MAISON, pas celui d'Apple. On prend la
   grammaire (une tuile, un glyphe, un nom dessous, on touche et ça s'ouvre) ;
   on ne prend pas la peau. Avec la barre d'expérience, c'est la deuxième et
   dernière chose colorée de l'interface — les deux disent « ceci est à vous et
   c'est vivant », tout le reste est noir sur blanc. */
.lanceur{
  display:grid;justify-items:center;gap:0;
  padding:clamp(18px,6vh,52px) 0;
}
.lanceur[hidden]{display:none !important}

.tuile{
  border:0;padding:0;cursor:pointer;background:none;
  display:grid;justify-items:center;gap:11px;
  /* La cible est la tuile entière, pas le glyphe : 76 px, très au-dessus des
     44 px de la règle — c'est la première chose qu'on touche, elle ne doit
     pas pouvoir être ratée. */
}
.tuile-carre{
  width:76px;height:76px;
  /* Le coin d'Apple est un « squircle » ; 30 % de rayon en donne la douceur
     sans en copier la courbe exacte. */
  border-radius:30%;
  background:var(--grad,linear-gradient(100deg,var(--bien),var(--cyan) 48%,var(--iris)));
  display:grid;place-items:center;
  color:var(--feuille);
  box-shadow:0 14px 30px -14px rgba(12,12,12,.35);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.tuile-carre svg{width:38px;height:38px}
.tuile:hover .tuile-carre{transform:translateY(-3px) scale(1.04);box-shadow:0 20px 36px -14px rgba(12,12,12,.4)}
.tuile:active .tuile-carre{transform:scale(.96)}
.tuile-nom{
  font-family:var(--fd,system-ui);font-size:13.5px;color:var(--encre);
}

/* L'ouverture : la tuile s'efface pendant que le contenu monte. Court — on
   ouvre une application, on ne lance pas une fusée. */
.lanceur.part .tuile-carre{transform:scale(.82);opacity:0;transition:all .32s ease}
.lanceur.part .tuile-nom{opacity:0;transition:opacity .2s ease}

/* ── « MA PAGE » DANS LA LISTE ────────────────────────────────────────────
   LE PREMIER FICHIER QU'ON REGARDE EST CELUI QUI EST DÉJÀ PUBLIC SOUS SON
   NOM. Il est en tête, avant les dossiers, et il porte l'adresse en clair :
   c'est le seul fichier de la machine dont le contenu est visible par
   quelqu'un d'autre, et ça se voit avant qu'on l'ouvre. */
.entree.mienne .entree-ico{color:var(--iris,var(--iris))}
.entree.mienne .entree-nom{font-weight:600}
.entree-ou{
  font-family:var(--fm);font-size:11px;color:var(--encre-3);flex:0 0 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45%;
}

/* ── TEXTE : la tête, les onglets, l'aperçu ──────────────────────────────
   Un fichier du site a deux vues, « code » et « aperçu », dans les mêmes mots
   que la ligne des applications : on n'apprend pas un deuxième vocabulaire.
   L'aperçu est un cadre blanc sans bord — c'est la page telle que le monde la
   verra, et rien autour ne doit prétendre en faire partie. */
.texte-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 8px;padding:0 4px 0 16px;   /* aligné sur l'intérieur du cadre */
}
.texte-tete .texte-nom{margin:0;flex:1 1 auto;min-width:0}
.onglets{
  display:flex;align-items:center;gap:0;flex:0 0 auto;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.1em;
}
.onglet{
  border:0;background:none;cursor:pointer;color:var(--encre-3);
  min-height:44px;padding:0 10px;font:inherit;letter-spacing:inherit;
}
.onglet:hover,.onglet[aria-selected="true"]{color:var(--encre)}
.apercu{
  display:block;width:100%;box-sizing:border-box;
  min-height:min(44vh,340px);
  border:1px solid var(--trait);border-radius:14px;
  background:#FFFFFF;   /* la page telle que le monde la verra : pas le thème du bureau */
  box-shadow:0 10px 28px -22px rgba(0,0,0,.35);
}
@supports (color:color-mix(in srgb,red,blue)){
  .apercu{border-color:color-mix(in srgb,var(--bien) 26%,var(--trait))}
}
.apercu[hidden],.texte-zone[hidden]{display:none !important}

/* ── L'ADRESSE, DANS UN COIN ──────────────────────────────────────────────
   Une fois le bureau ouvert, l'adresse n'est plus un sujet : elle a été
   donnée et lue. Elle quitte la scène, et revient par un mot de la ligne —
   une ligne, pas un cadre — quand on en a besoin. */
.bureau-adresse{
  margin:-6px 0 0;
  font-family:var(--fm);font-size:12px;color:var(--encre-3);
  display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:baseline;
}
.bureau-adresse[hidden]{display:none !important}
.bureau-adresse a{
  color:var(--encre);text-decoration:none;
  border-bottom:1.5px solid var(--bien);padding-bottom:1px;
}
.bureau-adresse a:hover{color:var(--bien)}


/* UNE IMAGE SE REGARDE dans le même cadre doux que la saisie. */
.image-cadre{border:1px solid var(--trait);border-radius:14px;padding:12px;
  background:var(--feuille);box-shadow:0 10px 28px -22px rgba(0,0,0,.35);display:grid;place-items:center}
.image-cadre img{max-width:100%;max-height:min(60vh,520px);border-radius:8px}
@supports (color:color-mix(in srgb,red,blue)){
  .image-cadre{border-color:color-mix(in srgb,var(--bien) 26%,var(--trait));background:color-mix(in srgb,var(--encre) 5%,var(--feuille))}
}

/* ── LE TABLEAU DE BORD (voie « Opérer ») ─────────────────────────────────
   L'état opéré, en cartes. Fait = accent vert ; en cours = cyan ; à faire =
   pointillé ; à venir = pâle. color-mix dégrade proprement (valeur ignorée →
   la bordure/fond neutres de .tab-carte restent). */
.tableau{padding:4px 2px}
.tableau-tete{margin:0 0 14px;font-family:var(--fm);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.tableau-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tableau-vide{color:var(--encre-3);font-size:14px}
.tab-carte{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid var(--trait);border-radius:14px;background:var(--feuille);min-height:62px}
.tab-carte svg{width:22px;height:22px;flex:none;color:var(--encre-3)}
.tab-txt{display:flex;flex-direction:column;gap:3px;line-height:1.3;min-width:0}
.tab-txt b{font-size:14.5px;font-weight:600;color:var(--encre)}
.tab-txt i{font-style:normal;font-size:12.5px;color:var(--encre-3)}
.tab-txt i b{font-weight:600;color:var(--encre-2)}
.tab-etat{margin-left:auto;font-size:16px;line-height:1;color:var(--encre-3);flex:none}
.tab-carte.fait{border-color:color-mix(in srgb,var(--bien) 42%,var(--trait));background:color-mix(in srgb,var(--bien) 6%,var(--feuille))}
.tab-carte.fait svg,.tab-carte.fait .tab-etat{color:var(--bien)}
.tab-carte.encours{border-color:color-mix(in srgb,var(--cyan) 36%,var(--trait))}
.tab-carte.encours svg,.tab-carte.encours .tab-etat{color:var(--cyan)}
.tab-carte.afaire{border-style:dashed}
.tab-carte.avenir{opacity:.55;border-style:dashed}

/* ── L'ASSISTANT (voie « Comprendre l'IA ») ───────────────────────────────
   Un fil d'échanges, une zone de saisie. Les réponses portent « copier » (ou
   « copier le code » quand un bloc ``` est là) : ce qu'un modèle écrit se
   colle dans un fichier, puis se lance — jamais l'inverse. */
/* Pas de hauteur minimale : à vide, l'invite est juste sous la note — pas au
   fond d'un cadre de 360 px. Le fil pousse l'invite vers le bas en grandissant,
   jusqu'à 52vh, puis il défile. */
.ia{display:flex;flex-direction:column;gap:12px}
.ia-flot{flex:1;display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;padding:4px 2px}
.ia-tour{max-width:min(92%,640px);padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5;color:var(--encre)}
.ia-tour.user{align-self:flex-end;background:color-mix(in srgb,var(--encre) 7%,var(--feuille));border:1px solid var(--trait)}
.ia-tour.assistant{align-self:flex-start;background:var(--feuille);border:1px solid var(--trait);position:relative;padding-bottom:30px}
.ia-tour.note,.ia-tour.attente{align-self:flex-start;color:var(--encre-3);font-size:13px;border:1px dashed var(--trait);background:none}
.ia-code{margin:8px 0 2px;padding:10px 12px;border-radius:10px;font-family:var(--fm);font-size:12.5px;line-height:1.45;white-space:pre;overflow:auto;background:color-mix(in srgb,var(--encre) 5%,var(--feuille));border:1px solid var(--trait-fin)}
.ia-modele{position:absolute;left:14px;bottom:6px;font-family:var(--fb);font-size:11.5px;
  color:var(--encre-3);letter-spacing:.01em;user-select:text}
.ia-copier{position:absolute;right:10px;bottom:6px;border:0;background:none;cursor:pointer;font-family:var(--fb);font-size:11.5px;color:var(--encre-3);padding:4px 6px;border-radius:8px}
.ia-copier:hover{color:var(--encre);background:color-mix(in srgb,var(--encre) 6%,var(--feuille))}
.ia-ligne{display:flex;gap:10px;align-items:flex-end;border:1px solid var(--trait);border-radius:14px;padding:8px 8px 8px 12px;background:var(--feuille)}
.ia-ligne:focus-within{border-color:color-mix(in srgb,var(--cyan) 45%,var(--trait));box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 14%,transparent)}
.ia-champ{flex:1;border:0;background:none;resize:vertical;min-height:40px;max-height:160px;font:inherit;font-size:14.5px;line-height:1.45;color:var(--encre);outline:none}
.ia-envoyer{flex:none}

/* ── NOMMER ─────────────────────────────────────────────────────────────
   Le nom d'un nouveau fichier se tape ICI, sous les gestes — plus dans la
   boîte grise du navigateur, qui n'a ni le thème, ni la main du parcours. */
.nommer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0}
.nommer-champ{
  flex:1 1 200px;min-height:42px;
  padding:0 13px;border:1px solid var(--trait);border-radius:11px;
  background:var(--feuille);color:var(--encre);
  font:13.5px/1 var(--fm);outline:none;
}
.nommer-champ:focus{border-color:var(--accent,var(--bien))}
.nommer .geste{margin-right:0;padding:0 8px}

/* ── HTTPS, PAR LA PERSONNE ──────────────────────────────────────────────
   Le cadenas se pose depuis le bureau, en quatre étapes réelles. Le schéma
   s'allume au fil des étapes (ses traits viennent de parcours.css), la puce
   de chaque ligne dit où on en est. Aucune couleur littérale. */
.https{margin:10px 0 0;padding:12px 14px 10px;border:1px solid var(--trait);border-radius:12px;background:var(--feuille)}
.https-titre{display:flex;align-items:center;gap:8px;margin:0;font-size:14.5px;color:var(--encre)}
.https-titre svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.https-sous{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--encre-2)}
.https-schema{margin:12px 0 0;color:var(--encre)}
.https-schema svg{display:block;width:100%;max-width:520px;height:auto;font:12px var(--fm)}
.https-schema .sch-boite{fill:var(--feuille);stroke:var(--encre-3);stroke-width:1.2}
.https-schema .sch-boite.acc{stroke:var(--cyan)}
.https-schema .sch-petit{font-size:10.5px}
.https-schema .sch-faible{opacity:.62}
.https-schema figcaption{margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--encre-2)}
.https-schema .allume .sch-boite{stroke:var(--bien);stroke-width:2}
.https-schema .allume line,.https-schema .allume path{stroke:var(--bien)}
.https-schema .allume text{fill:var(--bien)}
.https-schema .rate .sch-boite{stroke:var(--mal);stroke-width:2}
.https-schema .rate text{fill:var(--mal)}
.https-etapes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.https-etapes li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:1px 10px;align-items:center;font-size:13.5px;color:var(--encre)}
.https-puce{width:11px;height:11px;border-radius:50%;border:1.6px solid var(--trait);box-sizing:border-box;justify-self:center}
.https-etapes li[data-etat="encours"] .https-puce{border-color:var(--accent,var(--bien));animation:https-pouls 1s ease-in-out infinite}
.https-etapes li[data-etat="ok"] .https-puce{background:var(--bien);border-color:var(--bien)}
.https-etapes li[data-etat="non"] .https-puce{background:var(--mal);border-color:var(--mal)}
.https-etapes li[data-etat="attente"] .https-mot{color:var(--encre-2)}
.https-etapes li[data-etat="non"] .https-detail{color:var(--mal)}
.https-detail{grid-column:2;font-size:12.5px;line-height:1.4;color:var(--encre-2);overflow-wrap:anywhere}
.https-gestes{display:flex;flex-wrap:wrap;gap:0 4px;margin-top:10px}
@keyframes https-pouls{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
@media (prefers-reduced-motion:reduce){.https-etapes li[data-etat="encours"] .https-puce{animation:none}}

/* ── LE CARNET ────────────────────────────────────────────────────────────
   Deux colonnes : la liste à gauche, la feuille à droite. La feuille est la
   MÊME que celle de l'éditeur (.texte-zone) : on n'apprend pas deux surfaces
   d'écriture. Sous 720 px la liste passe au-dessus et se replie à deux
   lignes — sur un téléphone on écrit, on ne parcourt pas.
   Aucune couleur littérale : tout vient des jetons de la maison. */
.notes{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:18px;align-items:start}
.notes-cote{min-width:0}
.notes-haut{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.notes-cherche{
  flex:1 1 auto;min-width:0;height:34px;padding:0 12px;
  border:1px solid var(--trait);border-radius:999px;
  background:var(--feuille);color:var(--encre);
  font:12.5px/1 var(--fd,system-ui);
}
.notes-cherche:focus{outline:none;border-color:var(--bien)}
.notes-neuve{margin-right:0;padding:0;flex:0 0 auto}

.notes-liste{list-style:none;margin:0;padding:0;max-height:min(52vh,420px);overflow:auto}
.notes-liste li{margin:0}
.notes-entree{
  display:block;width:100%;text-align:left;
  padding:9px 10px;margin:0 0 2px;
  border:0;border-radius:10px;background:none;cursor:pointer;
  color:var(--encre);font:inherit;
}
.notes-entree:hover{background:color-mix(in srgb,var(--encre) 6%,transparent)}
.notes-entree[aria-current="true"]{background:color-mix(in srgb,var(--bien) 12%,transparent)}
.notes-titre{display:block;font:13px/1.35 var(--fd,system-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notes-date{display:block;margin-top:2px;font:11px/1 var(--fm);color:var(--encre-2)}
.notes-vide{padding:10px;font:12.5px/1.5 var(--fd,system-ui);color:var(--encre-2)}

.notes-feuille{min-width:0}
.notes-zone{min-height:min(48vh,380px)}

/* La réponse de l'assistant se pose SOUS la note, jamais à sa place : ce
   qu'on a écrit ne bouge pas parce qu'une machine a parlé. */
.notes-reponse{
  margin-top:14px;padding:12px 14px;
  border:1px solid var(--trait);border-radius:12px;
  background:color-mix(in srgb,var(--encre) 3%,var(--feuille));
}
.notes-reponse-texte{white-space:pre-wrap;font:13px/1.6 var(--fd,system-ui);color:var(--encre)}
.notes-reponse .ia-modele{display:inline-block;margin-top:8px}
.notes-coller{margin-top:10px;margin-right:0}
.notes-attente{margin:0;font:12.5px/1.5 var(--fd,system-ui);color:var(--encre-2)}
.notes-attente.mal{color:var(--mal,var(--encre))}

/* La porte. Un champ, une case, un bouton — et la seule phrase qui ne se
   devine pas : ce qui est perdu avec elle. */
.notes-porte{display:flex;flex-direction:column;gap:10px;max-width:34rem}
.notes-porte-mot{font:13px/1.4 var(--fd,system-ui);color:var(--encre)}
.notes-phrase{
  height:40px;padding:0 14px;
  border:1px solid var(--trait);border-radius:12px;
  background:var(--feuille);color:var(--encre);font:14px/1 var(--fm);
}
.notes-phrase:focus{outline:none;border-color:var(--bien)}
.notes-retenir{display:inline-flex;align-items:center;gap:8px;font:12.5px/1 var(--fd,system-ui);color:var(--encre-2)}
.notes-entrer{align-self:flex-start;margin-right:0}
.notes-avis{margin:0;font:12px/1.5 var(--fm);color:var(--encre-2)}

@media (max-width:720px){
  .notes{grid-template-columns:minmax(0,1fr);gap:12px}
  .notes-liste{max-height:9.5rem}
}

/* MON SERVEUR (25/09) : le champ du domaine, dans le panneau à étapes. */
.serveur-domaine { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 4px; }
.serveur-domaine label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; flex: 1 1 220px; }
.serveur-domaine input { font: inherit; padding: 8px 10px; border: 1px solid rgba(127,127,127,.45); border-radius: 8px; background: transparent; color: inherit; }
.serveur-domaine input:focus { outline: 2px solid currentColor; outline-offset: 1px; }

/* LE TERMINAL DU RAIL (25/09) : quand la personne a son serveur, « terminal » EST celui-ci.
   Onglets, ligne d'état, plein écran ; le cadre est sombre comme un bloc de code, quel que soit le thème. */
.termapp{display:grid;gap:10px}
.termapp-etat{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:12.5px/1.6 var(--fm);color:var(--encre-2)}
.termapp-etat .point{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mal);margin-right:8px;vertical-align:middle}
.termapp-etat .point.ok{background:var(--bien)}
.termapp-outils{display:flex;gap:4px;flex:none}
.termapp-onglets{display:flex;gap:4px;overflow-x:auto;min-width:0;border-bottom:1.5px solid var(--trait)}
.termapp-onglet{font:12.5px/1 var(--fm);padding:8px 12px;border:1px solid transparent;border-bottom:none;border-radius:8px 8px 0 0;background:transparent;color:var(--encre-3);cursor:pointer;display:flex;gap:10px;align-items:center;white-space:nowrap}
.termapp-onglet:hover{color:var(--encre)}
.termapp-onglet.actif{color:var(--encre);background:var(--feuille-2);border-color:var(--trait)}
.termapp-onglet.termapp-plus{padding:8px 12px;font-size:15px;line-height:1;opacity:.6}
.termapp-onglet.termapp-plus:hover{opacity:1;color:var(--encre)}
.termapp-onglet i{font-style:normal;opacity:.55}
.termapp-onglet i:hover{opacity:1;color:var(--mal)}
.termapp-vues{position:relative;height:clamp(360px,62vh,780px);background:#11151f;border-radius:10px;overflow:hidden}
.termapp-vue{position:absolute;inset:0;padding:10px}
.termapp-vue .xterm{height:100%}
/* filet de sécurité si WebGL manque : le rendu DOM, privé de sa feuille par la CSP, reste au moins en mono */
.termapp-vue .xterm .xterm-rows{font-family:var(--fm);font-size:14px;line-height:1.2;color:#e7ecef}
.termapp-vue .xterm .xterm-rows span{font-family:inherit;font-size:inherit}
.termapp.plein{position:fixed;inset:0;z-index:9999;background:var(--feuille);padding:10px 14px;margin:0}
.termapp.plein .termapp-vues{height:calc(100vh - 96px);border-radius:8px}