/* Page GRADeS : le fonds documentaire remplit le tirage, le texte tient la colonne gauche, puis récit et schémas au trait. */
[hidden] { display: none !important; }

.fonds { min-height: clamp(720px, 92vh, 940px); }
.fonds .scene__fond picture { display: contents; }
.fonds .scene__texte { width: min(100% - 2 * var(--gouttiere), 1200px); }
.pile { width: min(34rem, 44vw); display: flex; flex-direction: column; }
.pile > * { display: flex; flex-direction: column; gap: 24px; }
.pile:focus, .essai:focus { outline: none; }
.domaines span {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; white-space: nowrap; will-change: transform;
  font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sur-plan);
  padding-left: 10px;
}

/* Le choix du cours */
.choix { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.choix ul { display: flex; flex-wrap: wrap; gap: 8px; }
.choix button {
  font: 500 var(--t-petit)/1.2 var(--f-texte); color: var(--sur-plan); background: rgba(12, 47, 115, 0.55);
  border: 1px solid var(--sur-plan); padding: 12px 16px; min-height: 44px; cursor: pointer;
}
@media (hover: hover) { .choix button:hover { background: var(--sur-plan); color: var(--cyano); } }
.choix__note { font-size: var(--t-mono); color: var(--sur-plan-doux); }

/* L'essai */
.essai { gap: 14px !important; }
.essai__fil { display: flex; flex-direction: column; gap: 8px; }
.dit { font-size: var(--t-petit); line-height: 1.4; }
.dit--formateur { font-family: var(--f-titre); font-weight: 600; font-size: 1.0625rem; }
.dit--assistant { color: var(--sur-plan-doux); }
.plan { display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid rgba(201, 218, 245, 0.35); }
.ligne {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 10px; text-align: left;
  color: var(--sur-plan); background: none; border: 0; border-bottom: 1px solid rgba(201, 218, 245, 0.2); cursor: pointer; font: inherit;
}
.ligne__titre { font-weight: 500; font-size: var(--t-petit); line-height: 1.3; }
.ligne__source { font-size: var(--t-mono); color: var(--sur-plan-doux); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.ligne.active { background: rgba(201, 218, 245, 0.14); }
.ligne.active .ligne__source { color: var(--sur-plan); }
.essai__retour {
  align-self: flex-start; min-height: 44px; padding: 0 16px; cursor: pointer; font: 500 var(--t-petit) var(--f-texte);
  background: var(--sur-plan); color: var(--cyano); border: 1px solid var(--sur-plan);
}
@media (hover: hover) { .essai__retour:hover { background: transparent; color: var(--sur-plan); } }
@media (prefers-reduced-motion: no-preference) {
  .dit, .plan li { animation: entree 0.35s ease-out both; }
  @keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* En colonne : le fonds occupe une bande sous l'en-tête, le texte passe dessous. */
@media (max-width: 899px) {
  .fonds { min-height: 0; display: block; }
  .fonds .scene__texte { padding-top: clamp(218px, 62vw, 360px); padding-bottom: 48px; }
  .pile { width: 100%; }
  .repli { object-position: center top; }
  .domaines { display: none; }
  .ligne { padding-left: 14px; }
}

/* Récit */
.recit--grand { padding-block: 0 var(--section); }
.recit--organisme { padding-bottom: 0; }
.recit .planche { min-width: 0; }
.recit--plan h2 + p { margin-top: 0; }
.duo > div { gap: 20px; }

/* L'essai se lit depuis le haut : le texte ne bouge pas quand des lignes s'ajoutent. */
@media (min-width: 900px) { .fonds.en-essai { align-items: flex-start; } }
.domaines span { text-shadow: 0 0 8px var(--cyano), 0 0 2px var(--cyano); }
.domaines span { background: var(--cyano); padding: 1px 6px; text-shadow: none; }
@media (max-width: 899px) {
  .fonds .repli { bottom: auto; height: calc(var(--entete-h) + clamp(218px, 62vw, 360px)); object-fit: contain; object-position: center top; }
}

/* En colonne, pendant la simulation : la bande s'ouvre pour montrer une page lisible. */
@media (max-width: 899px) {
  .fonds.a-pages .scene__texte { padding-top: clamp(330px, 92vw, 460px); }
}

/* Une seule voix en capitales : les étiquettes de projet. */
.choix__titre { font-weight: 500; font-size: var(--t-petit); }
.planche figcaption { font-family: var(--f-texte); letter-spacing: 0; }

/* La trace des recherches : le texte en deux temps, les fils sur toute la largeur. */
.trace { display: grid; gap: 32px var(--colonne); }
.trace__texte { display: flex; flex-direction: column; gap: 20px; }
.trace__texte p { max-width: 65ch; }
.trace__figure { padding: 0; min-width: 0; }
.fils--large { display: none; }
@media (min-width: 900px) {
  .trace { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px var(--colonne); }
  .trace h2 { grid-column: 1 / span 4; }
  .trace__texte { grid-column: 6 / -1; }
  .trace__figure { grid-column: 1 / -1; }
  .fils--large { display: block; }
  .fils--etroit { display: none; }
}