/* ===========================================================================
   Awoui — LA PASSERELLE. Prototype, non publié, non lié.

   Le principe : on n'arrive pas devant un formulaire, ni devant un tableau de
   bord. On arrive devant UNE invite, sur du blanc, avec l'habillage Awoui
   autour — et quelqu'un vous parle. Tout le reste se pose quand on le demande.

   LA PAGE SUIT LE THÈME DU SITE (15/09/2026). Elle forçait le clair — « une
   feuille ne change pas de couleur selon l'heure » — et c'était une couture :
   la barre du site en sombre, la page en blanc dessous. Le choix de thème
   appartient à la personne (theme.js), pas à cette page. Toutes les couleurs
   passent donc par une seule table, ci-dessous, raccordée aux jetons des deux
   palettes du socle (assets/tokens.css). Le jour des thèmes personnalisés, il
   n'y aura que cette table à regarder.
   =========================================================================== */

@view-transition{navigation:auto}

/* ── LA TABLE DES COULEURS DE LA PASSERELLE ET DU BUREAU ──────────────────
   Six mots, et rien d'autre dans les quatre feuilles (passerelle, bureau, xp,
   parcours) : la feuille et ses deux crans, le trait et le trait fin, l'encre
   et ses deux retraits, le bien et le mal, et la bulle — qui est l'inverse de
   la feuille, parce qu'elle est quelqu'un qui parle par-dessus la page.
   Chaque mot pointe un jeton du socle, donc suit le thème sans une ligne de
   plus ici. */
.pass-body{
  --feuille:var(--bg-0);
  --feuille-2:var(--bg-1);
  --feuille-3:var(--bg-2);
  --trait:var(--line);
  --trait-fin:var(--line);
  --encre:var(--text);
  --encre-2:var(--muted);
  --encre-3:var(--faint);
  --bien:var(--emerald);
  --mal:var(--warn);
  --bulle-fond:var(--text);
  --bulle-encre:var(--bg-0);
}
/* Le trait FIN n'existe pas dans le socle : c'est le trait, adouci vers la
   feuille. Là où `color-mix` manque, le trait ordinaire fait l'affaire. */
@supports (color:color-mix(in srgb,red,blue)){
  .pass-body{--trait-fin:color-mix(in srgb,var(--line) 55%,var(--bg-0))}
}

.pass-body{
  margin:0;
  background:var(--feuille);
  min-height:100dvh;
  overflow-x:hidden;
}

.pass{position:relative}

.sr-seul{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── ÉTAT 0 : l'arrivée ──────────────────────────────────────────────────── */

.arrivee{
  position:relative;
  min-height:calc(100dvh - 72px);
  display:grid;place-items:center;
  background:var(--feuille-2);                       /* un blanc chaud, pas un blanc d'écran */
  transition:background .9s cubic-bezier(.22,1,.36,1);
}
.arrivee.part{background:var(--feuille)}
/* `hidden` NE SUFFIT PAS : la règle du navigateur vient de sa feuille par
   défaut, et le moindre `display` d'auteur la bat. Sans cette ligne, l'arrivée
   restait dans la mise en page une fois « cachée » — invisible mais haute de
   deux écrans, et le démarrage s'écrivait sous la ligne de flottaison. Même
   défaut que celui trouvé le même jour sur les icônes de la barre de session :
   c'est une famille de bugs, pas un accident. */
.arrivee[hidden]{display:none}

/* LE GALET. Une seule forme, sombre, qui respire. Elle ne porte aucune
   information — c'est le poids visuel de l'arrivée, et c'est tout. Elle se
   retire ensuite en se repliant vers l'endroit où l'invite va naître. */
.galet{
  position:absolute;
  width:min(46vw,430px);aspect-ratio:1;
  background:var(--encre);
  border-radius:42% 58% 46% 54% / 52% 44% 56% 48%;
  animation:respire 14s ease-in-out infinite;
  transition:transform 1s cubic-bezier(.65,0,.35,1), opacity .7s ease, border-radius 1s ease;
  will-change:transform;
}
@keyframes respire{
  0%,100%{border-radius:42% 58% 46% 54% / 52% 44% 56% 48%;transform:rotate(0deg) scale(1)}
  33%    {border-radius:56% 44% 60% 40% / 44% 58% 42% 56%;transform:rotate(4deg) scale(1.02)}
  66%    {border-radius:38% 62% 42% 58% / 60% 40% 60% 40%;transform:rotate(-3deg) scale(.99)}
}
.arrivee.part .galet{
  animation:none;
  transform:scale(.06) translateY(-2vh);
  border-radius:50%;
  opacity:0;
}

.arrivee-mot{
  position:relative;z-index:2;text-align:center;display:grid;gap:18px;justify-items:center;
  padding:0 24px;
  transition:opacity .45s ease, transform .6s cubic-bezier(.65,0,.35,1);
}
.arrivee.part .arrivee-mot{opacity:0;transform:translateY(-10px)}

.arrivee-nom{
  margin:0;color:var(--feuille);
  font-family:var(--fd);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(3rem,11vw,7rem);line-height:.95;
}
.arrivee-sous{
  margin:0;color:rgba(255,255,255,.78);
  font-family:var(--fb);font-size:clamp(.95rem,1.7vw,1.08rem);max-width:26ch;
}
.arrivee-go{
  margin-top:10px;border:0;cursor:pointer;
  background:var(--feuille-2);color:var(--encre);
  font-family:var(--fd);font-weight:600;font-size:1.02rem;
  padding:14px 38px;border-radius:999px;
  transition:transform .2s ease, background .2s ease;
}
.arrivee-go:hover{transform:translateY(-1px);background:var(--feuille)}

/* ── ÉTAT 1 : la passerelle ──────────────────────────────────────────────── */

.atelier{
  min-height:calc(100dvh - 72px);
  display:grid;grid-template-rows:1fr auto;
  background:var(--feuille);
}
.atelier[hidden]{display:none}

.scene-vide{
  display:grid;place-content:center;justify-items:center;gap:22px;
  padding:8vh 24px 4vh;
  min-height:46vh;
}

/* L'INVITE. Un chevron, une ligne, rien autour. Pas de cadre, pas de bouton :
   un cadre dit « formulaire », et un formulaire se remplit ; une ligne dit
   « écrivez », et on écrit. */
.invite{
  display:flex;align-items:center;gap:14px;
  width:min(620px,90vw);
  border-bottom:1.5px solid var(--trait);
  padding:6px 2px 12px;
  transition:border-color .3s ease;
}
.invite:focus-within{border-color:var(--encre)}
.invite-ico{
  flex:0 0 auto;width:22px;height:22px;color:var(--encre);opacity:.55;
  transition:opacity .3s ease;
}
.invite:focus-within .invite-ico{opacity:1}
.invite-champ{
  flex:1 1 auto;min-width:0;
  border:0;outline:none;background:transparent;
  font-family:var(--fm);font-size:clamp(1.05rem,2.4vw,1.5rem);
  color:var(--encre);caret-color:var(--encre);
  padding:0;
}
.invite-champ::placeholder{color:var(--encre-3)}

/* LA BULLE. Un point qui vit, une phrase qui s'écrit. Elle se pose SOUS
   l'invite, décalée : elle accompagne, elle ne surveille pas. */
.bulle{
  position:relative;
  max-width:min(540px,88vw);
  align-self:start;justify-self:start;
  margin-left:clamp(0px,4vw,40px);
  background:var(--bulle-fond);color:var(--bulle-encre);
  border-radius:16px 16px 16px 4px;
  padding:13px 17px;
  display:flex;align-items:flex-start;gap:11px;
  animation:bulle-arrive .45s cubic-bezier(.22,1.4,.4,1) both;
  box-shadow:0 12px 30px -18px rgba(12,12,12,.6);
}
.bulle[hidden]{display:none}
.bulle::after{
  content:"";position:absolute;left:14px;top:-7px;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:8px solid var(--bulle-fond);
}
@keyframes bulle-arrive{
  from{opacity:0;transform:translateY(-6px) scale(.96)}
  to{opacity:1;transform:none}
}
.bulle-point{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;margin-top:7px;
  background:var(--brand-emerald,var(--bien));
  animation:pouls 2.4s ease-in-out infinite;
}
@keyframes pouls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.bulle-mot{
  margin:0;font-family:var(--fb);font-size:.98rem;line-height:1.55;
}
.bulle-mot b{font-weight:600}
.bulle-mot code{
  font-family:var(--fm);font-size:.9em;
  background:rgba(255,255,255,.14);border-radius:5px;padding:.12em .4em;
}

/* L'écho : ce que la personne vient d'écrire, posé comme une trace. */
.echo{
  margin:0;min-height:1.4em;
  font-family:var(--fm);font-size:.92rem;color:var(--encre-3);
  width:min(620px,90vw);
}

/* ── L'ADRESSE ───────────────────────────────────────────────────────────────
   Le premier objet que la personne possède. Elle arrive quand le nom est
   choisi, et elle ne repart plus. Grande, parce que c'est le moment — mais
   sobre, parce qu'une adresse n'est pas une récompense : c'est un fait. */
.adresse{
  width:min(620px,90vw);
  display:grid;gap:4px;
  padding:16px 18px;
  border:1px solid var(--trait);border-radius:14px;background:var(--feuille-2);
  animation:adresse-arrive .6s cubic-bezier(.22,1.3,.4,1) both;
}
.adresse[hidden]{display:none}
@keyframes adresse-arrive{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
.adresse-etiquette{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-3);
}
.adresse-lien{
  font-family:var(--fm);font-size:clamp(1.1rem,2.8vw,1.6rem);
  color:var(--encre);text-decoration:none;word-break:break-all;
  border-bottom:1.5px solid var(--bien);padding-bottom:2px;justify-self:start;
}
.adresse-lien:hover{color:var(--bien)}
.adresse-note{font-family:var(--fb);font-size:12.5px;color:var(--encre-3)}

/* L'ÉTAT DE LA SERRURE. Deux états, deux couleurs : fermée par un code, ou
   ouverte à qui connaît le nom. Ce n'est pas une alerte — c'est un fait, et il
   doit rester lisible tout le temps, pas seulement à l'instant où on le dit. */
.adresse-code{
  display:flex;align-items:center;gap:12px;margin-top:10px;
  padding:10px 12px;border:1px dashed var(--trait);border-radius:10px;background:var(--feuille);
}
.adresse-code[hidden]{display:none}
.adresse-code-mot{font-family:var(--fb);font-size:12.5px;color:var(--encre-2)}
.adresse-code.ferme{border-style:solid;border-color:var(--bien);background:var(--feuille-2)}
.adresse-code.ferme .adresse-code-mot{color:var(--bien)}
/* DÉMARRER. Un bouton plein, à contraste franc, qui suit le thème (encre sur
   feuille). Une seule action possible à cet écran : elle a le droit d'être
   grosse. Triangle « lecture » : le geste que tout le monde connaît. */
.adresse-demarrer{
  justify-self:start;margin-top:8px;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 20px 0 16px;
  border:0;border-radius:999px;cursor:pointer;
  background:var(--encre);color:var(--feuille);
  font-family:var(--fb);font-size:15px;font-weight:600;letter-spacing:.01em;
  transition:transform .15s ease,opacity .2s ease;
}
.adresse-demarrer svg{width:18px;height:18px}
.adresse-demarrer:hover{transform:translateY(-1px)}
.adresse-demarrer:active{transform:none}
.adresse-demarrer[hidden]{display:none}

/* LE CHOIX D'ORIENTATION : deux portes, léger, sur blanc. Même famille que le
   bouton Démarrer, mais côte à côte et étiquetées. */
.adresse-voie{margin-top:10px}
.adresse-voie[hidden]{display:none}
.adresse-voie-mot{font-family:var(--fb);font-size:12.5px;color:var(--encre-3)}
.adresse-voie-portes{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.voie-porte{
  display:inline-flex;align-items:center;gap:11px;
  min-height:52px;padding:8px 18px 8px 14px;
  border:1px solid var(--trait);border-radius:14px;cursor:pointer;
  background:var(--feuille);color:var(--encre);
  transition:transform .15s ease,border-color .2s ease,box-shadow .2s ease;
}
.voie-porte svg{width:22px;height:22px;color:var(--encre-2);flex:none}
.voie-porte .voie-t{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.voie-porte b{font-family:var(--fb);font-size:15px;font-weight:600}
.voie-porte i{font-family:var(--fb);font-size:12px;font-style:normal;color:var(--encre-3)}
.voie-porte:hover{transform:translateY(-1px);border-color:var(--encre-3);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.voie-porte:active{transform:none}
.atelier.a-bureau .adresse-voie{display:none}


/* ── LE DÉMARRAGE ────────────────────────────────────────────────────────────
   Trois lignes, en machine à écrire, à l'endroit exact où l'invite va naître.
   Elles s'effacent ensuite : le démarrage est un moment, pas un journal. Ce
   qu'il laisse derrière lui, c'est une machine déjà réservée — donc plus
   aucune attente quand la personne la demandera. */
.demarrage{
  width:min(620px,90vw);
  font-family:var(--fm);
  animation:demarrage-arrive .4s ease-out both;
}
.demarrage[hidden]{display:none}
.demarrage.part{animation:demarrage-part .5s ease-in both}
@keyframes demarrage-arrive{from{opacity:0}to{opacity:1}}
@keyframes demarrage-part{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}

.demarrage-tete{
  margin:0 0 14px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--encre-3);
}
.demarrage-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.demarrage-liste li{
  display:flex;align-items:baseline;gap:10px;
  font-size:clamp(.9rem,1.9vw,1.02rem);color:var(--encre);
  animation:ligne-arrive .28s ease-out both;
}
@keyframes ligne-arrive{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.demarrage-mot{flex:0 0 auto}
.demarrage-fil{
  flex:1 1 auto;min-width:18px;
  border-bottom:1px dotted var(--trait);transform:translateY(-4px);
}
.demarrage-etat{flex:0 0 auto;color:var(--encre-3)}
.demarrage-etat.ok{color:var(--bien)}
.demarrage-etat.rate{color:var(--mal)}

/* L'attente qui tourne : trois points qui respirent, et rien d'autre. Une
   barre de progression mentirait — on ne sait pas combien de temps ça prend. */
.demarrage-etat.attend::after{
  content:"";animation:points 1.2s steps(4,end) infinite;
}
@keyframes points{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (prefers-reduced-motion:reduce){
  .demarrage,.demarrage.part,.demarrage-liste li{animation:none}
  .demarrage-etat.attend::after{content:"…";animation:none}
}

/* ── LA MACHINE, quand on la demande ─────────────────────────────────────── */

.machine{
  width:min(1080px,94vw);justify-self:center;
  margin:0 auto 5vh;
  border:1px solid var(--trait);border-radius:18px;overflow:hidden;
  background:var(--encre);
  box-shadow:0 40px 80px -50px rgba(12,12,12,.7);
  animation:machine-arrive .7s cubic-bezier(.22,1,.36,1) both;
}
.machine[hidden]{display:none}
@keyframes machine-arrive{
  from{opacity:0;transform:translateY(26px) scale(.985)}
  to{opacity:1;transform:none}
}
.machine-tete{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;background:var(--feuille-2);border-bottom:1px solid var(--trait);
}
.machine-nom{
  font-family:var(--fm);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--encre-2);margin-right:auto;
}
.machine-fermer{
  border:0;background:none;color:var(--encre-2);font-size:20px;line-height:1;cursor:pointer;
  padding:0 4px;
}
.machine-fermer:hover{color:var(--feuille)}
.machine-cadre{
  display:block;width:100%;height:min(58vh,520px);border:0;background:#000;
}

@media (prefers-reduced-motion:reduce){
  .galet,.bulle,.machine{animation:none}
  .arrivee,.galet,.arrivee-mot{transition:none}
}

/* ── LE TÉLÉPHONE ─────────────────────────────────────────────────────────
   `vw` NE MESURE PAS CE QU'ON CROIT : il compte la barre de défilement, alors
   que `clientWidth` ne la compte pas. Sur un écran de 375 px, `90vw` valait ici
   363 px — et, ajouté aux 24 px de marge de chaque côté du conteneur, la rangée
   faisait 386 px. Rien ne se voyait tant que la rangée ne portait que des
   éléments étroits ; le jour où le bureau est arrivé, il a hérité de cette
   largeur-là et onze pixels de son bord droit sont passés sous le
   `overflow-x:hidden` du corps.

   La page ne défilait PAS de côté pour autant — vérifié plutôt que supposé,
   parce que `scrollWidth` affirme un débordement que le rognage rend
   invisible. Le défaut n'était donc pas un défilement parasite : c'était un
   bord coupé, ce qui est plus discret et plus laid.

   On borne au PARENT et non à la fenêtre : `100%` ne connaît pas la barre de
   défilement, donc il ne peut pas se tromper de onze pixels. */
@media (max-width:560px){
  .scene-vide{padding-left:16px;padding-right:16px}
  .scene-vide>.invite,
  .scene-vide>.adresse,
  .scene-vide>.bulle,
  .scene-vide>.echo,
  .scene-vide>.demarrage{width:100%;max-width:620px}
}

/* ── QUAND LA MACHINE EST LÀ ──────────────────────────────────────────────
   LE BUREAU N'EST PAS POSÉ EN BAS DE LA PAGE : IL DEVIENT LE CENTRE.

   Avant, `.atelier` valait `1fr auto` — la scène prenait la hauteur, le bureau
   se rangeait dessous, et il fallait faire défiler pour atteindre sa propre
   machine. C'est le réflexe des pages, pas celui des interfaces : on ajoute
   sous ce qui existe. Or ici la machine EST ce qu'on est venu chercher ; elle
   prend donc la place que l'invite occupait, au milieu de la feuille.

   L'invite ne disparaît pas pour autant — c'est encore par elle qu'on parle au
   guide. Elle passe dessous, resserrée : de sujet, elle devient voix. */
.atelier.a-bureau{
  grid-template-rows:auto auto;
  align-content:center;
  gap:30px;
  padding:4vh 0;
}
.atelier.a-bureau>.bureau{order:-1}

/* LE SHELL EN TÊTE. Déplacé hors de la scène pour monter au-dessus du niveau :
   la ligne où l'on parle ne descend jamais sous ce qu'on est en train de faire.
   (Demande du 16/09/2026.) */
.atelier.a-bureau>.invite{
  order:-2;
  width:min(700px,92vw);
  margin:0 auto;
  align-self:center;
}

/* LA BULLE QUI VISE. Sortie du bas de la scène, elle est réinsérée dans le
   bureau juste après ce dont elle parle (la tuile, puis la scène quand la
   tuile a disparu). En flux normal : elle se pose SOUS sa cible, décalée à
   gauche, la flèche vers le haut — elle désigne. */
.bulle.vise{
  margin:10px auto 4px clamp(8px,6vw,90px);
  align-self:start;
}
.atelier.a-bureau>.scene-vide{
  padding:0 24px;
  min-height:auto;
  gap:14px;
}
/* L'ADRESSE PERD SON CADRE, ELLE AUSSI. Encadrée, elle était le premier objet
   qu'on possédait et elle méritait sa place ; une fois la machine ouverte, ce
   même cadre devenait l'objet le plus lourd de l'écran — plus lourd que ce
   qu'on est en train de faire. On ne la fait pas disparaître (c'est toujours
   la sienne) et on ne la grise pas non plus : une opacité, c'est du décor qui
   s'excuse. On lui retire le meuble et on garde le trait vert sous le nom, qui
   est la seule chose qui disait quelque chose. */
.atelier.a-bureau .adresse{
  border:0;background:none;padding:0;gap:2px;
}
.atelier.a-bureau .adresse-lien{font-size:clamp(.95rem,2vw,1.15rem)}
.atelier.a-bureau .adresse-code{
  border:0;background:none;padding:0;margin-top:2px;
}

/* LA SCÈNE SE NETTOIE EN AVANÇANT. L'adresse et l'écho de la dernière commande
   sont des informations d'AVANT ; une fois le bureau ouvert, ce sont des
   restes. L'adresse revient par le mot « adresse » de la ligne du bureau. */
.atelier.a-bureau .adresse,
.atelier.a-bureau .echo{display:none}

@media (max-width:560px){
  .atelier.a-bureau{gap:22px;padding:2vh 0}
  .atelier.a-bureau>.scene-vide{padding:0 16px}
}

/* LE COMPTE : une ligne de texte, des liens qui sont des boutons. */
.compte-ligne,.compte-sites{margin:0;width:min(620px,90vw);font-family:var(--fb);font-size:13px;color:var(--encre-3)}
.compte-ligne b{color:var(--encre-2);font-weight:600}
.compte-ligne[hidden],.compte-sites[hidden]{display:none}
.compte-ligne .lien,.compte-sites .lien{border:0;background:none;padding:0;font:inherit;color:var(--encre);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.atelier.a-bureau .compte-ligne,.atelier.a-bureau .compte-sites{display:none}