/* Lot 4 : mesures des planches R1/R2, couleurs et typographie de l'identité. */
* { scrollbar-width: thin; scrollbar-color: var(--border-controle) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-controle); border: 2px solid transparent; background-clip: padding-box; border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); }
:is(dialog, .creation__fil, .creation__pile, .canevas, .thread, .settings, .job-toile, #job-travail, #job-detail, .job-preuves, .visionneuse-rendu, .visionneuse-plus, #guide-compagnon) { scrollbar-gutter: stable; }
.infos > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--espace-4); }
.infos dd { text-align: left; min-width: 0; }
.infos > .infos__long { grid-template-columns: minmax(0, 1fr); gap: var(--espace-1); }
:is(.fiche-corps, .tools-grille, .sm-grille, .volet--deux) { gap: var(--espace-5); }
.case { padding-inline: var(--espace-4); }
.case :is(h2,h3,h4) { text-align: left; }
#creation .frise, #creation-skill .frise { flex-wrap: wrap; }
.composer { display: flex; flex-wrap: wrap; align-items: flex-end; }
.composer textarea { flex: 1 1 calc(100% - 96px); width: 0; min-height: calc(3 * var(--i-lecture) + 2 * var(--espace-2)); max-height: calc(8 * var(--i-lecture) + 2 * var(--espace-2)); }
.composer .saisie-aide { flex: 1 0 100%; margin: 0; padding-inline: var(--espace-1); font-size: var(--t-aide); line-height: var(--i-aide); color: var(--text-secondary); }
.composer textarea::placeholder { white-space: normal; }
.composer button:disabled { background: var(--bg-hover); color: var(--text-secondary); }
.creation__entretien { overflow: hidden; }
.creation__fil { min-height: 80px; }
.creation__fil:not([data-historique="true"]) > [data-ancien="true"] { display: none; }
.creation__fil > .echange { flex: none; }
.creation__fil:not([data-historique="true"]) > [data-ancien="false"]:not([data-ancien="false"] ~ *) { margin-top: auto; }
.creation .msg--agent > div:not(.buste) { background: var(--case-reflet), var(--bg-surface); padding: var(--espace-4); border-radius: var(--rayon-case); }
.creation :is(.msg--user .case,.carte,.cas-carte,.volet__bloc,.canevas__agent) { padding: var(--espace-4); }
.creation .msg--user .case { max-width: 100%; }
.creation .envoi-etat { display: block; margin-top: var(--espace-2); text-align: right; }
.entretien-demande { flex: none; padding: var(--espace-4); }
.entretien-demande p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--t-aide); line-height: var(--i-aide); margin-block: var(--espace-1); }
.entretien-demande .lien, .entretien-suite { font-size: var(--t-aide); }
.entretien-suite { flex: none; padding: var(--espace-2); }
.creation__pile { max-height: 45%; overflow: auto; }
.creation__pile .carte { flex: none; }
.entretien-segments { display: none; }
.points-travail { display: inline-flex; gap: var(--espace-1); margin-right: var(--espace-2); }
.points-travail i { display: block; width: var(--espace-1); height: var(--espace-1); border-radius: var(--rayon-rond); background: currentColor; animation: travaille 1.2s ease-in-out infinite; }
.points-travail i:nth-child(2) { animation-delay: 160ms; }
.points-travail i:nth-child(3) { animation-delay: 320ms; }
.echange--nouveau.msg--user { animation: envoi-message 180ms ease-out; }
.echange--nouveau.msg--agent, #guide-reponse:not(:empty) { animation: arrive-reponse 220ms ease-out; }
#guide-statut[data-libelle^="✓"] { animation: arrive-recu 160ms ease-out; }
@keyframes envoi-message { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes arrive-reponse { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrive-recu { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes travaille { 0%,80%,100% { opacity: .35; } 40% { opacity: 1; } }

/* Deux colonnes dès 901 px, y compris le plateau 1100 de la série. */
@media (min-width: 901px) {
  #main[data-view="creation"] > #creation, #main[data-view="creation-skill"] > #creation-skill, #main[data-view="creation-outil"] > #creation-outil { padding: var(--espace-5); gap: var(--espace-5); flex-direction: row; overflow: hidden; }
  #main .creation--large .creation__entretien { width: 360px; flex: 0 0 360px; min-height: 0; }
  #main .creation .saisie { position: static; }
  #main .creation__fil { flex: 1; overflow-y: auto; }
  #main .creation__pile { flex: 0 1 auto; overflow-y: auto; }
  #main .creation > .canevas { flex: 1; min-width: 0; }
  #main #canevas-outil { overflow: auto; }
}
@media (max-width: 900px) {
  #main[data-view="creation"] > #creation, #main[data-view="creation-skill"] > #creation-skill, #main[data-view="creation-outil"] > #creation-outil { display: flex; flex-direction: column; gap: var(--espace-3); padding: var(--espace-3); overflow: hidden; }
  #main .creation .creation__entretien { display: flex; flex: 1; width: 100%; min-height: 0; overflow: hidden; }
  #main .creation .creation__fil { flex: 1; min-height: 60px; overflow: auto; }
  #main .creation .creation__pile { flex: 0 1 auto; max-height: 36%; overflow: auto; }
  #main .creation .saisie { position: static; }
  #main .creation .canevas { flex: 1; min-height: 0; overflow: auto; }
  .entretien-segments:not([hidden]) { display: flex; flex: none; gap: var(--espace-2); padding: var(--espace-2); }
  .entretien-segments button { flex: 1; min-width: 0; min-height: var(--controle-h); border-radius: var(--rayon-controle); font-size: var(--t-aide); }
  .entretien-segments [aria-pressed="true"] { background: var(--bg-hover); font-weight: var(--g-gras); }
  #main .creation:not([data-panneau-entretien="canevas"]) > .canevas { display: none; }
  #main .creation[data-panneau-entretien="canevas"] > .creation__entretien { display: none; }
  .entretien-demande { padding: var(--espace-3) var(--espace-4); }
}

/* La saisie du guide reste en tête ; seul le contenu en dessous défile. */
#guide-synex { height: 100%; padding: var(--espace-4); overflow: hidden; }
#guide-compagnon { display: flex; flex-direction: column; height: 100%; max-height: 100%; overflow: hidden; padding: var(--espace-4); }
.guide-tete { padding-block: var(--espace-2); background: transparent; flex: none; }
#guide-question { flex: none; background: linear-gradient(var(--bg-hover),var(--bg-hover)), var(--verre-fumee); }
#guide-question textarea { min-height: calc(2 * var(--i-texte) + 2 * var(--espace-1)); max-height: calc(8 * var(--i-texte) + 2 * var(--espace-1)); line-height: var(--i-texte); }
#guide-reponse:not(.est-depliee) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
#guide-details { align-self: flex-start; }
#guide-intentions, #guide-etape-locale { border-top: 1px solid var(--border-subtle); padding-top: var(--espace-3); }
#guide-etape-locale details { padding-block: var(--espace-2); }
#guide-etape-locale summary { cursor: pointer; min-height: var(--cible-min); }
#guide-etape-locale details[open] > :not(summary) { margin-top: var(--espace-2); }
#guide-reponse, #guide-etape-locale p { max-width: 36ch; }
#guide-question > .hint { flex-basis: 100%; }
@media (min-width: 901px) and (max-width: 1250px) {
  .guide-ouvert > #main { margin-inline: auto; }
  #app > #guide-synex { position: fixed; z-index: 35; right: var(--espace-5); top: var(--espace-5); bottom: var(--espace-5); box-shadow: var(--ombre-verre); }
}
@media (max-width: 900px) {
  #main > #guide-synex, .visionneuse > #guide-synex { max-height: none; margin: var(--espace-2); padding: 0; overflow: visible; }
  #guide-synex:has(#guide-compagnon:not([hidden])) { position: fixed; z-index: 40; inset: var(--espace-2); margin: 0; padding: var(--espace-3); width: auto; background: var(--verre-reflet), var(--glass-bg); border: 1px solid var(--glass-edge); border-radius: var(--rayon-plateau); box-shadow: var(--ombre-verre); backdrop-filter: blur(28px); }
  /* La case protège la lecture des textes de l'entretien sous le verre superposé. */
  #guide-compagnon { height: 100%; max-height: 100%; background: var(--case-reflet), var(--verre-fumee); }
}

/* Livraison : l'origine de la carte reste fixe à l'ouverture des détails. */
.job-espace:has(#job-decision-toile [data-decision="livraison"]) { display: flex; flex-direction: column; gap: var(--espace-5); overflow: auto; scrollbar-gutter: stable; }
.job-espace:has(#job-decision-toile [data-decision="livraison"]) #job-travail { flex: none; height: var(--job-graphe-hauteur); min-height: 0; }
/* En lecture du livrable (zoom d'un nœud), le livrable garde toute sa hauteur ; la décision vient après lui. */
.job-zoom .job-espace:has(#job-decision-toile [data-decision="livraison"]) #job-travail { height: auto; }
#job-decision-toile:has([data-decision="livraison"]), .job-espace:has(#job-graphe:not([hidden])) #job-decision-toile:has([data-decision="livraison"]) { position: static; max-height: none; flex: none; overflow: visible; }
.job-decision[data-decision="livraison"] { max-height: none; }
.job-decision-actions { display: flex; gap: var(--espace-2); }
.job-decision-actions > button { flex: 1; min-width: 0; white-space: normal; }
.job-verdicts { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.job-noeud:not(.job-noeud--attend) { border-color: var(--text-secondary); }
.job-livraison-details { min-height: 0; }
.job-preuves { overflow: auto; max-height: 200px; }
.job-decision > h2 { margin-bottom: var(--espace-1); }
#job-decision-form fieldset > button + button { margin-top: calc(-1 * var(--espace-1)); }

/* Lecture centrée ; le zoom élargit la page sans allonger la ligne de texte. */
.visionneuse[data-presentation="plein"] { --page-lecture: 720px; position: relative; }
.visionneuse[data-presentation="plein"] > :is(.visionneuse-barre,.visionneuse-onglets,.visionneuse-rendu,.visionneuse-decouverte,.visionneuse-aide,.visionneuse-pied,.visionneuse-annonce) { width: min(100%, var(--page-lecture)); margin-inline: auto; }
.visionneuse[data-presentation="plein"] .visionneuse-barre { flex-direction: column; align-items: stretch; }
.visionneuse[data-presentation="plein"] .visionneuse-barre-haut { flex: none; flex-wrap: wrap; }
.visionneuse[data-presentation="plein"] .visionneuse-barre-bas { width: 100%; }
.visionneuse[data-presentation="plein"] .visionneuse-barre-milieu { display: none; }
.visionneuse[data-presentation="plein"] .visionneuse-rendu { padding: var(--espace-6); }
.visionneuse-markdown { max-width: 72ch; margin-inline: auto; }
.visionneuse-sommaire-marge { position: absolute; left: var(--espace-4); width: 220px; max-height: 50%; overflow: auto; }
.visionneuse-sommaire button { text-align: left; max-width: 100%; white-space: normal; }
@media (max-width: 640px) {
  .visionneuse[data-presentation="plein"] .visionneuse-rendu { padding: var(--espace-4); }
  #main[data-view="chat"] > #decision-fil { display: flex; flex: 0 1 auto; min-height: 0; }
  #decision-fil > .activite-decision { flex: 1; min-height: 0; }
  #decision-fil > .activite-decision > * { flex: none; }
  #decision-fil > .activite-decision > .activite-valeurs { flex: 0 1 auto; min-height: var(--controle-h); overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.creation .msg--user .case > p { background: transparent; padding: 0; border: 0; box-shadow: none; }
#creation-outil .creation__entretien > * { order: 0; }
#guide-question textarea:focus-visible { outline: 0; box-shadow: none; }
#guide-question:focus-within { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.guide-corps { min-height: 0; overflow: auto; scrollbar-gutter: stable; }
.guide-corps > * + * { margin-top: var(--espace-2); }
@media (max-width: 900px) { #guide-synex:has(#guide-barre-basse:not([hidden])) { height: auto; } }

.case, .plateau, textarea { scrollbar-gutter: stable; }
#creation-outil .sm-frise :is(.frise__etape, button, .sm-etape-nom) { min-width: 0; white-space: normal; }