/* Écarts de l'appli par rapport à la maquette Codex (zoe/maquette.css reste intacte).
   Chacun répond à un balisage que la maquette n'avait pas : liens à la place de boutons,
   formulaires réels, écrans de compte et console de l'animateur. */

/* Une carte de mission est un lien (un bouton dans la maquette). */
#zoe-player a.mission{text-decoration:none}
#zoe-player a.mission:focus-visible{outline:3px solid #68b5bd;outline-offset:3px}

/* Liens qui portent l'habit d'un bouton : un <a> est en ligne, sa hauteur minimale et son
   alignement ne s'appliquent qu'en bloc. */
#zoe-player a.primary,#zoe-player a.secondary{display:inline-flex;align-items:center;text-decoration:none;min-height:44px}
#zoe-player a.hero-link{display:inline-flex;align-items:center}
#zoe-player a.text-button{display:inline-block}

/* button_to enveloppe son bouton d'un formulaire : dans la navigation et les rangées, le
   formulaire s'efface pour que le bouton reste l'enfant de la boîte flexible. */
#zoe-player nav form,#zoe-player .row form,#zoe-player .identity form{display:contents}

/* Déconnexion dans l'identité de l'en-tête. */
#zoe-player .identity .deconnexion{font-size:12px;min-height:auto}
/* La maquette masque sous 760 px les <span> de l'identité, pas ce bouton : la déconnexion reste accessible au téléphone. */

/* Écrans de compte et listes de sessions. */
#zoe-player .compte-actions{margin-top:18px}
#zoe-player .titre-section{margin-top:32px}
#zoe-player .liste-sessions{padding-left:18px}
#zoe-player .liste-sessions li{margin:6px 0}
#zoe-player .liste-sessions a{color:var(--z-ink)}

/* Console de l'animateur. */
#zoe-player .code-acces{font-size:40px;letter-spacing:6px;margin:0}
#zoe-player .console{padding:24px}
#zoe-player .console>h2{margin:0 0 8px}
#zoe-player .journal{padding-left:18px}

/* Messagerie (lot 1). */
/* La messagerie de Zoé est un <dialog> : on retire ses marges, bordure et tailles par défaut pour
   qu'il couvre l'écran comme la <section> de la maquette. */
#zoe-player dialog.zoe-messenger{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;color:inherit}
#zoe-player dialog.zoe-messenger::backdrop{background:#f2f2e9}
#zoe-player .zoe-attente{padding:48px}
#zoe-player .zoe-prompts form{display:contents}
/* Le composeur collant couvre le bas de l'écran : une bulle amenée en vue s'arrête au-dessus. */
#zoe-player .msg{scroll-margin-bottom:230px;scroll-margin-top:24px}
#zoe-player .msg-systeme{background:transparent;border-style:dashed;max-width:100%}
#zoe-player .msg-soumission{box-shadow:0 0 0 2px #b0d9c2}
#zoe-player .msg-soumission:focus-visible{outline:3px solid #68b5bd;outline-offset:3px}
#zoe-player .msg-echec{border-color:#c9a27a}
#zoe-player .pieces-jointes{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
#zoe-player .pieces-jointes img{display:block;max-width:100%;max-height:280px;border-radius:3px}
#zoe-player .pieces-jointes audio,#zoe-player .pieces-jointes video{display:block;width:100%;max-height:280px}
#zoe-player .piece-jointe{font-size:11px;color:inherit}
/* Le champ de fichiers n'est masqué que visuellement : le libellé montre son focus. */
#zoe-player .attach:focus-within{outline:3px solid #68b5bd;outline-offset:3px}
#zoe-player #zoe-attachment-name,#zoe-player #avatar-attachment-name{font-size:10px;overflow:hidden;max-width:180px;text-overflow:ellipsis}
#zoe-player .compose-erreur{margin:0 0 8px;font-size:12px;color:#7a3b1d}

/* Consignes et ressources des fiches (lot 4). */
#zoe-player .mission-consignes{border-top:1px solid #dddccf}
#zoe-player .mission-consignes ul{padding-left:20px;margin:0 0 16px}
#zoe-player .mission-consignes li{margin:4px 0}
#zoe-player .mission-consignes .ressources{list-style:none;padding:0;display:grid;gap:12px}
#zoe-player .ressource-video{aspect-ratio:16/9;background:#050505;margin-bottom:6px}
#zoe-player .ressource-video iframe{width:100%;height:100%;border:0;display:block}
#zoe-player .mission-consignes .mini a{color:var(--z-accent)}

/* Ateliers des fiches (lot 4) : même habit que l'introduction de la mission. */
#zoe-player .atelier{border:1px solid #dddccf;background:#fffdf7;border-radius:5px;padding:24px;margin-bottom:30px}
#zoe-player .atelier h2{font-size:23px}
#zoe-player .atelier ol{padding-left:20px}
#zoe-player .atelier-formulaire textarea{min-height:90px}
#zoe-player .atelier-onglets{display:flex;gap:8px;margin:12px 0}
#zoe-player .atelier-onglets button[aria-pressed=true]{background:#1b2721;color:#fffdf3;border-color:#1b2721}
#zoe-player .atelier-code{font-family:ui-monospace,Consolas,monospace;font-size:12px;min-height:340px;line-height:1.5;white-space:pre;tab-size:2}
#zoe-player .atelier-apercu{display:block;width:100%;height:520px;border:1px solid #d8d9d2;background:#fff}
#zoe-player .atelier-actions{margin-top:14px}
#zoe-player .atelier-traduction{margin-top:12px}
#zoe-player .soumettre-image{margin-top:12px}

/* Atelier « avatar » (challenge 2, lot 5) : son composeur reste dans le cadre de l'atelier. */
#zoe-player .atelier-avatar .conversation-compose{position:static;width:auto;min-height:0;padding:12px 0 0;border:0;background:transparent}
#zoe-player .atelier-avatar-fil .msg{max-width:90%}
/* Le composeur collant de la page passe par-dessus : le champ de NOVA s'arrête au-dessus de lui. */
#zoe-player .atelier-avatar textarea,#zoe-player .atelier-avatar .compose-actions{scroll-margin-bottom:240px}

/* Fin du jeu (lot 5) : studio, vote, épilogue. */
#zoe-player .bibliotheque{flex:1 1 100%}
#zoe-player .bibliotheque>summary{display:inline-flex;align-items:center;cursor:pointer;list-style:none;min-height:44px}
#zoe-player .bibliotheque>summary::-webkit-details-marker{display:none}
#zoe-player .film-screen .film-lien{border:1px solid #aecaba;background:#254d40;color:#f5f0df;border-radius:30px;padding:10px 20px;text-decoration:none}
#zoe-player a.vote-option{text-decoration:none}
#zoe-player .epilogue p{max-width:620px;text-align:left}

/* Présentation publique (portage de l'accueil du WordPress) : blocs alternés clair / sombre. */
#zoe-player .presentation-bloc{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;margin:32px 0}
#zoe-player .presentation-bloc.sans-image{grid-template-columns:1fr;max-width:760px}
#zoe-player .presentation-bloc figure{margin:0}
#zoe-player .presentation-bloc img{display:block;width:100%;border-radius:3px}
#zoe-player .presentation-bloc.sombre{background:#171b1a;color:#fbf8ef;margin-left:-30px;margin-right:-30px;padding:32px 30px}
#zoe-player .presentation-bloc.sombre figure{order:-1}
#zoe-player .presentation-texte ul{padding-left:20px}
#zoe-player .presentation-texte li{margin:6px 0}
#zoe-player .presentation-video .ressource-video{width:100%;max-width:760px;margin-top:6px}
@media(max-width:760px){
  #zoe-player .presentation-bloc{grid-template-columns:1fr;gap:18px}
  #zoe-player .presentation-bloc.sombre{margin-left:-22px;margin-right:-22px;padding:24px 22px}
}

/* Challenge 2 (7 octobre 2026) : le visage vidéo de NOVA et sa console de paramétrage. Écrans
   absents de la maquette : couleurs et rayons de l'atelier et des bulles. */
#zoe-player .nova-video{margin:12px 0 4px}
#zoe-player .nova-video video{display:none;width:100%;max-width:640px;aspect-ratio:16/9;background:#0f1a16;border-radius:5px}
#zoe-player .nova-allumee .nova-video video{display:block}
#zoe-player .nova-video .row{align-items:center;margin-top:8px}
#zoe-player .console-nova{border:1px solid #1b2721;background:#14201b;color:#e9efe7;border-radius:5px;padding:12px 16px;margin:14px 0}
#zoe-player .console-nova>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:6px;font-family:ui-monospace,Consolas,monospace;font-size:14px}
#zoe-player .console-nova .soft{color:#a9bdb2}
#zoe-player .console-nova h3{color:#e9efe7}
#zoe-player .console-nova label{color:#e9efe7}
#zoe-player .console-regles{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.5;background:#0d1612;border:1px dashed #4b6157;border-radius:4px;padding:10px;color:#c8d6cd;margin:6px 0 12px}
#zoe-player .console-personnalite{font-family:ui-monospace,Consolas,monospace;font-size:13px;min-height:170px}
#zoe-player .console-nova .text-button{color:#e9efe7}
#zoe-player .console-origine{margin-top:10px}
#zoe-player .console-origine>summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

/* Challenge 1 (7 octobre 2026) : la jauge de certitude d'A.D.A.M. Écran absent de la maquette :
   sombre comme les cartes des challenges, les arguments masqués en pointillés. */
#zoe-player .jauge-adam{border:1px solid #1b2721;background:#14201b;color:#e9efe7;border-radius:5px;padding:14px 18px;margin:0 0 22px}
#zoe-player .jauge-adam h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:19px;color:#e9efe7;margin:0 0 10px}
#zoe-player .jauge-adam h2 span{font-family:ui-monospace,Consolas,monospace;font-size:17px}
#zoe-player .jauge-barre{height:10px;border-radius:5px;background:#2b3a33;overflow:hidden}
#zoe-player .jauge-barre span{display:block;height:100%;background:#d9654b;transition:width .8s ease}
#zoe-player .jauge-arguments{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0 8px}
#zoe-player .jauge-arguments li{border-radius:30px;padding:5px 12px;font-size:13px}
#zoe-player .jauge-arguments li.acquis{background:#254d40;border:1px solid #aecaba}
#zoe-player .jauge-arguments li.masque{border:1px dashed #4b6157;color:#a9bdb2}
#zoe-player .jauge-adam .soft{color:#a9bdb2}
@media (prefers-reduced-motion:reduce){#zoe-player .jauge-barre span{transition:none}}

/* Console de l'animateur (7 octobre 2026) : le budget IA de la session, avec la barre de la jauge. */
#zoe-player .budget-ia .budget-barre{background:#e3e2d6;margin:8px 0 10px}
#zoe-player .budget-ia .budget-barre span{background:#254d40}

/* Challenge 7 (7 octobre 2026) : le studio voix, sur le modèle de l'atelier d'image. */
#zoe-player .atelier-voix-reglages{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:12px;margin:8px 0}
#zoe-player .atelier-voix-reglages select,#zoe-player .atelier-voix-reglages input{width:100%}
@media (max-width:640px){#zoe-player .atelier-voix-reglages{grid-template-columns:1fr}}

/* Challenge 11 (7 octobre 2026) : le studio radio, sur le modèle du studio voix. */
#zoe-player .atelier-script{font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.5;min-height:300px}
#zoe-player .atelier-radio-reglages{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;margin:8px 0}
#zoe-player .atelier-radio-reglages select,#zoe-player .atelier-radio-reglages input{width:100%}
@media (max-width:640px){#zoe-player .atelier-radio-reglages{grid-template-columns:1fr 1fr}#zoe-player .atelier-radio-reglages>div:last-child{grid-column:1/-1}}

/* Avatars de Zoé et d'A.D.A.M. (10 octobre 2026, fournis par Boris ; écart à la maquette, qui
   n'avait qu'une orbe et une lettre). Zoé garde le dégradé de l'orbe en fond ; A.D.A.M., un bleu
   nuit froid au halo cyan, comme ses yeux. Images détourées, recadrées sur le visage, 160 px. */
#zoe-player .zoe-mini-orb{overflow:hidden;width:48px;height:48px;box-shadow:0 0 18px #8fd2b655,inset 0 0 0 2px #cfe9d988}
#zoe-player .zoe-mini-orb img{display:block;width:100%;height:100%;object-fit:cover}
#zoe-player .zoe-fab{padding:6px 18px 6px 6px}
#zoe-player .assistant-avatar-adam,#zoe-player .jauge-portrait{background:radial-gradient(circle at 50% 30%,#2b6fa8,#0e2540 55%,#060d18);box-shadow:0 0 16px #2fa8ff55,inset 0 0 0 2px #5fb8ff66;border-radius:50%}
#zoe-player .assistant-avatar-adam{width:56px;height:56px;overflow:hidden;padding:0}
#zoe-player .assistant-avatar-adam img{display:block;width:100%;height:100%;object-fit:cover}
#zoe-player .jauge-adam{position:relative;padding-left:108px;min-height:100px}
#zoe-player .jauge-portrait{position:absolute;left:18px;top:14px;width:72px;height:72px;object-fit:cover}
@media(max-width:700px){#zoe-player .jauge-adam{padding-left:18px;padding-top:76px}#zoe-player .jauge-portrait{width:52px;height:52px;top:14px}}

/* Zoé aussi dans l'orbe du panneau latéral et devant son nom dans les bulles (sa messagerie, ses
   évaluations, les ateliers qu'elle anime) ; l'anneau décoratif de l'orbe s'efface derrière elle. */
#zoe-player .orb:has(img){overflow:hidden}
#zoe-player .orb:has(img):after{display:none}
#zoe-player .orb img{display:block;width:100%;height:100%;object-fit:cover}
#zoe-player .msg small .msg-avatar{display:inline-block;width:24px;height:24px;border-radius:50%;object-fit:cover;vertical-align:middle;margin:-3px 8px 0 0;background:radial-gradient(circle at 30% 25%,#e0f5d4,#81bb9e 38%,#235a49 70%,#0c2927)}

/* Sans le panneau « Parler à Zoé » dans les fiches (10 octobre 2026), le composeur reprend toute
   la largeur : la maquette lui laissait 75 % à côté du panneau. */
#zoe-player.in-challenge .conversation-compose{width:auto;min-height:0;border-right:0;padding-right:48px}
@media(max-width:700px){#zoe-player.in-challenge .conversation-compose{min-height:0;padding-right:16px}}

/* Les visages des assistants (10 octobre 2026) : androïdes détourés sur un fond sombre commun ;
   Zoé garde son vert, A.D.A.M. son bleu nuit, l'évaluation son emblème. */
#zoe-player .assistant-avatar:has(img){width:56px;height:56px;padding:0;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 30%,#4a5c54,#1d2925 60%,#0d1512);box-shadow:inset 0 0 0 2px #9fb8aa55}
#zoe-player .assistant-avatar img{display:block;width:100%;height:100%;object-fit:cover}
#zoe-player .msg small .msg-avatar{background:radial-gradient(circle at 50% 30%,#4a5c54,#1d2925 60%,#0d1512)}
#zoe-player .msg small .msg-avatar-zoe{background:radial-gradient(circle at 30% 25%,#e0f5d4,#81bb9e 38%,#235a49 70%,#0c2927)}
#zoe-player .msg small .msg-avatar-evaluation{background:none}

/* Mission accomplie (10 octobre 2026) : la pastille sur l'illustration de la fiche, et la popup. */
#zoe-player .challenge-visual .image-status{font-size:12px;bottom:14px;right:16px;padding:6px 10px;box-shadow:0 2px 10px #0004}
#zoe-player dialog.celebration{border:0;border-radius:5px;padding:32px 30px;max-width:440px;width:calc(100% - 32px);background:#14201b;color:#e9efe7;text-align:center;box-shadow:0 20px 60px #0007}
#zoe-player dialog.celebration::backdrop{background:#0d1612bf}
#zoe-player .celebration h2{color:#f5f0df;margin:6px 0 10px}
#zoe-player .celebration .eyebrow{color:#a9bdb2}
#zoe-player .celebration-signe{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:#bdddca;color:#15271c;font-size:34px;line-height:64px;font-weight:600;animation:celebration-apparition .5s ease-out}
#zoe-player .celebration strong{color:#f5f0df;font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
#zoe-player .celebration .row{justify-content:center;margin-top:18px}
#zoe-player .celebration .primary{background:#bdddca;color:#15271c;border-color:#bdddca}
#zoe-player .celebration .secondary{color:#e9efe7;border-color:#7b8d7d;background:transparent}
@keyframes celebration-apparition{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){#zoe-player .celebration-signe{animation:none}}

/* En-têtes fixes de la fiche et de la messagerie de Zoé (10 octobre 2026, demande de Boris) :
   collés en haut pendant le défilement, pour revenir aux challenges sans remonter, et ramenés à
   deux lignes — « ← Challenges · surtitre », puis le titre. Écart à la maquette (trois lignes,
   22 px de marge). Le texte trop long s'arrête sur une ellipse, jamais sur une troisième ligne. */
#zoe-player .conversation-heading{position:sticky;top:0;z-index:30;padding:10px 32px;gap:16px}
#zoe-player .conversation-heading>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:baseline;min-width:0}
#zoe-player .conversation-heading>div>.text-button{grid-row:1;grid-column:1;white-space:nowrap}
#zoe-player .conversation-heading .eyebrow{grid-row:1;grid-column:2;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#zoe-player .conversation-heading h1{grid-row:2;grid-column:1/-1;font-size:22px;line-height:1.25;margin:4px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#zoe-player .conversation-heading .assistant-avatar,#zoe-player .conversation-heading .zoe-mini-orb{width:40px;height:40px}
#zoe-player .conversation-heading .assistant-identity{flex:none}
html:has(#zoe-player .conversation-page){scroll-padding-top:84px}
@media(max-width:700px){
  #zoe-player .conversation-heading{flex-direction:row;align-items:center;padding:8px 16px;gap:12px}
  #zoe-player .conversation-heading h1{font-size:19px}
  #zoe-player .conversation-heading .assistant-identity>span:last-child{display:none}
  #zoe-player .conversation-heading .assistant-avatar,#zoe-player .conversation-heading .zoe-mini-orb{width:36px;height:36px}
}
/* Surtitre de la fiche : la version courte sur téléphone (« 04 · 10 pts · Accompli »), la longue
   restant lue par les lecteurs d'écran. */
#zoe-player .statut-court{display:none}
@media(max-width:700px){
  #zoe-player .statut-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  #zoe-player .statut-court{display:inline}
}

/* Liens lisibles dans les bulles du joueur (fond sombre) : le bleu du navigateur y disparaissait. */
#zoe-player .msg-user a,#zoe-player .msg-user a:visited{color:#c6e7d1;text-decoration-color:#c6e7d199}
#zoe-player .msg-user a:hover{color:#fff}

/* Le mini-studio du super challenge (10 octobre 2026) : les outils par rôle, puis le déroulé. */
#zoe-player .mini-studio{margin:22px 0;padding:18px 20px;border:1px solid var(--z-line);border-radius:3px;background:var(--z-panel)}
#zoe-player .mini-studio h3{margin:0 0 4px}
#zoe-player .mini-studio h4{font-size:14px;margin:0 0 8px}
#zoe-player .mini-studio-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 18px}
#zoe-player .mini-studio-role{border-top:2px solid #81bb9e;padding-top:10px}
#zoe-player .mini-studio ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
#zoe-player .mini-studio li{display:grid;gap:2px;font-size:13px;line-height:1.5}
#zoe-player .mini-studio-outil{font-weight:600;color:#235a49;justify-self:start;padding:0;text-align:left}
#zoe-player .mini-studio-conseil{font-size:12px;color:#52765f;font-style:italic}
#zoe-player .mini-studio-deroule{margin:0;padding-left:20px;font-size:13px;line-height:1.7}
@media(max-width:700px){#zoe-player .mini-studio-grille{grid-template-columns:1fr}}
#zoe-player .mini-studio button.mini-studio-outil{margin:0;min-height:0;border:0;background:none;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
#zoe-player .mini-studio .mini-studio-deroule li{display:list-item}
#zoe-player .msg small .msg-avatar-adam{background:radial-gradient(circle at 50% 30%,#2b6fa8,#0e2540 55%,#060d18)}