/* ==========================================================================
   composition.css — la passe « objet imprimé ».

   L'interface doit ressembler à une page composée, pas à un tableau de bord.
   Le repère : si un élément existe chez un imprimeur — filet, folio, intitulé
   de section, tranche — il a sa place ; s'il n'existe que dans une
   bibliothèque d'icônes, il n'en a pas.

   RÈGLES TENUES ICI, ÉCRAN PAR ÉCRAN
     · une surface surélevée par écran au maximum, tout le reste à plat sur le
       crème, séparé par des filets --bord de 1 px ;
     · aucun centrage : un seul axe, à gauche ;
     · une seule ombre par écran, douce, sur le seul bouton d'action terre ;
       aucun dégradé, aucun flou, aucun halo ;
     · icônes monochromes --encre-douce, jamais dans une pastille ronde ;
     · titre Fraunces 600 40px une seule fois par écran, corps Inter 400 16px,
       rien entre les deux ;
     · intitulé de section en petites capitales Inter 500 12px / 0,08em,
       suivi d'un filet qui court jusqu'au bord du conteneur ;
     · rayons : 10 par défaut, 16 pour les cartes d'histoire, 24 pour le seul
       bouton d'action.

   CHARGEMENT — après minimal-ui.css, pour couvrir les feuilles historiques,
   et AVANT tranche.css et rayon.css, qui sont figés et doivent rester
   intouchables. L'écran « Mes histoires » est hors périmètre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Socle commun aux écrans traités.
   -------------------------------------------------------------------------- */

/* La colonne de contenu occupe 7 colonnes sur 12, calée à gauche. La marge
   droite reste vide : on ne remplit pas la largeur parce qu'elle existe. */
.composition-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  max-inline-size: none;
}

.composition-page > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
}

/* Espacement contrasté : serré dans un bloc, franc entre deux sections. */
.composition-page > * + * {
  margin-block-start: var(--espace-72);
}

/* Le titre de l'écran. Défini une seule fois, ici. */
.composition-titre {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

/* L'intitulé de section et son filet. Le filet appartient au conteneur, pas
   au texte : une bordure basse court jusqu'au bord, un ::after s'arrêterait
   à la fin du mot. */
.composition-intitule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding-block-end: var(--espace-12);
  border-block-end: 1px solid var(--bord);
}

.composition-intitule > :first-child,
.composition-intitule h2 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* L'action secondaire posée en regard d'un intitulé : du texte, pas un
   bouton. Aucune surface, aucun rayon. */
.composition-action-discrete {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.composition-action-discrete:hover {
  color: var(--brique-texte);
}

.composition-action-discrete:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

/* L'unique bouton d'action terre de l'écran. Seul rayon 24, seule ombre. */
.composition-action {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-12);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);              /* 4,56 sur terre */
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition);
}

.composition-action:hover {
  background: var(--brique);
}

.composition-action:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ACCUEIL — #homeScreen

   Avant : 29 blocs, 7 surfaces surélevées, 3 rayons, 9 tailles de police.
   Après : 1 surface surélevée (le bouton d'action), 1 rayon, 3 tailles.
   -------------------------------------------------------------------------- */

.home-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  gap: 0;
  max-inline-size: none;
  padding-block: var(--espace-48) var(--espace-72);
}

.home-content > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
}

/* Le profil actif est une mention, pas une pastille : il annonce pour qui la
   page est composée, comme une ligne de faux-titre. */
.home-content .active-child-card {
  display: flex;
  align-items: baseline;
  gap: var(--espace-8);
  inline-size: max-content;
  max-inline-size: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.home-content .active-child-card strong {
  font-size: inherit;
  font-weight: 500;
  color: var(--encre);
}

.home-content .active-child-card small {
  font-size: inherit;
  font-weight: inherit;
  color: var(--encre-douce);
}

.home-content .active-child-card i {
  font-style: normal;
  color: var(--encre-douce);
}

.home-content .active-child-card:hover strong {
  color: var(--brique-texte);
}

.home-content .active-child-card:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

.home-content .dashboard-intro {
  margin-block-start: var(--espace-12);
}

.home-content .dashboard-intro h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.home-content .dashboard-grid {
  display: block;
  margin-block-start: var(--espace-32);
}

/* L'unique aplat terre de l'écran, et sa seule ombre.

   Pleine largeur, et non plus à la largeur du contenu : l'accueil n'a plus de
   titre au-dessus, et cette action est désormais le premier élément de la
   page. C'est elle qui doit dominer. */
.home-content .create-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-12);
  inline-size: 100%;
  min-block-size: 0;
  padding: var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  text-align: left;
  transition: background var(--transition);
}

.home-content .create-hero:hover {
  background: var(--brique);
  transform: none;
  box-shadow: var(--ombre-douce);
}

/* Le « + » sort de sa pastille : un signe posé à côté du libellé, à sa
   taille. Ni cadre, ni fond — l'aplat terre du bouton suffit. */
.home-content .hero-icon {
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sur-accent);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

/* Le libellé seul : ni sous-titre, ni flèche. */
.home-content .create-hero strong {
  font-family: var(--police-titre);
  font-size: 24px;
  font-weight: var(--titre-graisse);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* Les deux sections de l'accueil. La marge haute plutôt que basse, comme
   .dashboard-grid : une section masquée ne laisse alors aucun blanc. */
.home-content .home-section {
  margin-block-start: var(--espace-48);
}

/* Intitulé de section : « BESOIN D'UNE IDÉE ? » et son filet. */
.home-content .section-heading.suggestions-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  margin-block-start: var(--espace-72);
  padding: 0 0 var(--espace-12);
  border: 0;
  border-block-end: 1px solid var(--bord);
  background: none;
  box-shadow: none;
}

.home-content .suggestions-heading > div {
  display: contents;
}

.home-content .suggestions-heading h2 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.home-content #refreshSuggestions {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
  cursor: pointer;
}

.home-content #refreshSuggestions:hover {
  color: var(--brique-texte);
}

/* Les idées deviennent une liste réglée : plus de cartes, des filets. */
.home-content .suggestions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: 0;
}

.home-content .suggestion-card {
  display: grid;
  justify-items: start;
  gap: var(--espace-8);
  inline-size: auto;
  min-block-size: 0;
  padding: var(--espace-16) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.home-content .suggestion-card:last-child {
  border-block-end: 0;
}

.home-content .suggestion-card:hover {
  background: none;
  transform: none;
  box-shadow: none;
}

/* La catégorie d'abord, en petit ; la question ensuite, au corps du texte. */
.home-content .suggestion-card small {
  order: -1;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre-douce);
}

.home-content .suggestion-card strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--encre);
}

.home-content .suggestion-card:hover strong {
  color: var(--brique-texte);
}

.home-content .suggestion-card:focus-visible {
  outline: 2px solid var(--terre);
  outline-offset: 2px;
}

.home-content .suggestion-loading {
  margin: var(--espace-16) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--encre-douce);
}

/* Sous 600 px, la colonne prend les douze colonnes : sept ne laisseraient
   pas la place d'une ligne de texte. */
@media (max-width: 600px) {
  .composition-page > *,
  .home-content > * {
    grid-column: 1 / -1;
  }

  .home-content {
    padding-block: var(--espace-32) var(--espace-48);
  }

  .home-content .home-section {
    margin-block-start: var(--espace-32);
  }

  .home-content .dashboard-intro h1 {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }

  .home-content .section-heading.suggestions-heading {
    margin-block-start: var(--espace-48);
  }

}

/* --------------------------------------------------------------------------
   CRÉATION — #creationScreen

   Avant : 84 blocs, 42 surfaces surélevées, 35 blocs centrés, 11 ombres,
   4 rayons, 11 tailles de police — l'écran le plus chargé de l'application.
   Après : un formulaire imprimé. Aucun aplat, aucune ombre sauf le bouton
   d'action, un seul axe à gauche.

   Un contrôle n'est pas un conteneur : les boutons de choix restent des
   contrôles, mais ils cessent d'être des pastilles pleines. Un choix retenu
   se marque au filet et à l'encre — bordure terre, texte brique — jamais par
   un aplat, qui ferait un second aplat terre sur l'écran.
   -------------------------------------------------------------------------- */

.creation-screen .flow-header {
  display: flex;
  align-items: baseline;
  gap: var(--espace-16);
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-32) var(--espace-32) 0;
}

.creation-screen .flow-header > strong {
  flex: 0 0 auto;
  padding: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--encre-douce);
  white-space: nowrap;
  overflow: visible;
}

.creation-screen .flow-header > span:last-child {
  display: none;
}

.creation-screen .back-icon {
  flex: 0 0 auto;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-size: 16px;
  line-height: 1.4;
}

.creation-screen .back-icon:hover {
  background: none;
  color: var(--brique-texte);
}

/* Les trois temps du parcours, en filets et non en barres. */
.creation-screen .step-progress {
  gap: var(--espace-4);
  max-inline-size: none;
  margin: var(--espace-16) var(--espace-32) 0;
}

.creation-screen .step-progress span {
  block-size: 2px;
  background: var(--bord);
  transition: none;
}

.creation-screen .step-progress span.active {
  background: var(--terre);
}

/* La colonne de composition : 7 sur 12, calée à gauche.
   Le sélecteur porte .active : sans lui, display:grid écrase le display:none
   des étapes inactives et les trois pages du parcours s'empilent. Constaté au
   navigateur, pas à la lecture. */
.creation-screen .flow-page.active {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-48) var(--espace-32) 128px;
  text-align: left;
}

.creation-screen .flow-page.active > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
}

.creation-screen .flow-page.active > * + * {
  margin-block-start: var(--espace-72);
}

/* Le seul titre de l'écran. */
.creation-screen .flow-page.active > h1 {
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.creation-screen .flow-page.active > .lead,
.creation-screen .flow-page.active > .lead.compact {
  margin-block-start: var(--espace-12);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --- Le champ de saisie ---------------------------------------------------
   Un formulaire sur papier : un filet, pas une surface. */

.creation-screen .idea-composer {
  margin-block-start: var(--espace-32);
}

.creation-screen textarea,
.creation-screen input,
.creation-screen select {
  padding: var(--espace-12) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre);
}

.creation-screen textarea:focus,
.creation-screen input:focus,
.creation-screen select:focus {
  border-block-end-color: var(--terre);
  box-shadow: none;
  outline: 2px solid var(--terre);
  outline-offset: 4px;
}

.creation-screen textarea::placeholder {
  color: var(--encre-legere);
}

.creation-screen .voice-input-controls {
  display: flex;
  align-items: baseline;
  gap: var(--espace-12);
  margin-block-start: var(--espace-12);
  flex-wrap: wrap;
}

/* Le micro : un signe monochrome sur la ligne de base, pas une pastille. */
.creation-screen .voice-input-button {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--brique-texte);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.creation-screen .voice-input-icon {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 12px;
}

.creation-screen .voice-input-status {
  flex: 1 1 16ch;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--encre-douce);
}

/* --- Les blocs de mention ------------------------------------------------
   Devis, double vérification, consentement : des encadrés réglés, sans fond
   et sans pastille. Le signe reste, l'aplat part. */

.creation-screen .creation-cost-estimate,
.creation-screen .info-banner,
.creation-screen .community-consent {
  display: flex;
  align-items: baseline;
  gap: var(--espace-12);
  padding: var(--espace-16) 0;
  border: 0;
  border-block: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.creation-screen .creation-cost-estimate > span,
.creation-screen .info-banner > span {
  flex: 0 0 auto;
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* La sauge ne signale que le vérifié. Elle reste ici, sur le signe et sur son
   mot : la couleur seule ne porte jamais l'information. */
.creation-screen .info-banner.mint > span,
.creation-screen .info-banner.mint strong {
  color: var(--sauge-texte);
}

.creation-screen .creation-cost-estimate strong,
.creation-screen .info-banner strong,
.creation-screen .community-consent strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.creation-screen .creation-cost-estimate p,
.creation-screen .info-banner p,
.creation-screen .community-consent small {
  display: block;
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --- Les groupes de choix ------------------------------------------------- */

.creation-screen fieldset {
  padding: 0;
  border: 0;
}

.creation-screen legend {
  display: block;
  margin: 0 0 var(--espace-12);
  padding: 0 0 var(--espace-12);
  inline-size: 100%;
  border-block-end: 1px solid var(--bord);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.creation-screen .fieldset-help {
  margin: 0 0 var(--espace-12);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.creation-screen .choice-row,
.creation-screen .slide-count-grid,
.creation-screen .question-options,
.creation-screen .creation-profile-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
}

/* Un choix se marque au filet et à l'encre, jamais par un aplat. */
.creation-screen .choice-row button,
.creation-screen .slide-count-grid button,
.creation-screen .option-button,
.creation-screen .creation-profile-choice,
.creation-screen .creation-profile-tile,
.creation-screen .sensitive-choice {
  display: inline-flex;
  align-items: baseline;
  gap: var(--espace-8);
  inline-size: auto;
  min-block-size: 0;
  padding: var(--espace-8) var(--espace-12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-10);
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  transition: border-color var(--transition), color var(--transition);
}

.creation-screen .choice-row button:hover,
.creation-screen .slide-count-grid button:hover,
.creation-screen .option-button:hover,
.creation-screen .creation-profile-choice:hover,
.creation-screen .sensitive-choice:hover {
  border-color: var(--terre-voile);
  background: none;
  color: var(--encre);
}

.creation-screen .choice-row button.selected,
.creation-screen .slide-count-grid button.selected,
.creation-screen .option-button.selected,
.creation-screen .creation-profile-choice.selected,
.creation-screen .creation-profile-tile.selected,
.creation-screen .sensitive-choice.selected {
  border-color: var(--terre);
  background: none;
  box-shadow: none;
  color: var(--brique-texte);          /* 6,64 sur crème */
  font-weight: 500;
}

.creation-screen .creation-profile-choice strong,
.creation-screen .creation-profile-choice small {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.creation-screen .creation-profile-choice small {
  color: var(--encre-douce);
}

/* Les aperçus de style gardent leurs couleurs : l'illustration est la seule
   zone où la couleur reste libre. Seul le cadre change. */
.creation-screen .image-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--espace-12);
}

/* styles.css pose trois pistes sur cette option (108px | 1fr | 24px) pour une
   rangée vignette-puis-texte. La redéfinition ci-dessous en fait une carte
   empilée mais oubliait de reprendre `grid-template-columns` : les pistes
   survivaient, la coche masquée gardait ses 24px, et il ne restait que 13px
   au texte, qui débordait sous la vignette de l'option suivante. La piste
   unique est la correction ; `align-*` neutralise le centrage vertical de
   styles.css, qui décalait les textes entre options. */
.creation-screen .image-style-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: var(--espace-8);
  min-block-size: 0;
  padding: 0 0 var(--espace-12);
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

/* Aucun libellé ne doit pouvoir ressortir de sa carte, quelle que soit sa
   longueur. */
.creation-screen .image-style-choice > span {
  min-inline-size: 0;
  overflow-wrap: break-word;
}

.creation-screen .image-style-choice.selected {
  border-block-end-color: var(--terre);
}

.creation-screen .image-style-choice .style-preview {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--rayon-10);
}

.creation-screen .image-style-choice strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--encre);
}

.creation-screen .image-style-choice.selected strong {
  font-weight: 500;
  color: var(--brique-texte);
}

.creation-screen .image-style-choice small {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--encre-douce);
}

.creation-screen .choice-check {
  display: none;
}

/* Mesure au navigateur : à 150px de piste minimum, un bureau de 1280px donne
   quatre colonnes trop étroites pour « Réalisme chaleureux ». À 190px il en
   donne trois, et les cinq libellés tiennent alors sur une seule ligne. */
@media (min-width: 640px) {
  .creation-screen .image-style-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }
}

/* --- Étape 2 : l'idée comprise et les questions --------------------------- */

.creation-screen .analysis-panel {
  padding: var(--espace-16) 0;
  /* identity.css pose une bordure sur les quatre côtés : border-block seul
     laissait le cadre complet visible. Constaté au navigateur. */
  border: 0;
  border-block: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.creation-screen .soft-pill {
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creation-screen .analysis-panel h2 {
  margin: var(--espace-12) 0 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.creation-screen .analysis-panel p {
  margin: var(--espace-12) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.creation-screen .question-title {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.creation-screen #dynamicQuestions {
  display: grid;
  gap: 0;
}

.creation-screen .question-card {
  display: grid;
  gap: var(--espace-12);
  margin: 0;
  padding: var(--espace-24) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.creation-screen .question-card:last-child {
  border-block-end: 0;
}

.creation-screen .question-card h3 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.creation-screen .question-card p {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* Une question obligatoire se signale par un filet en marge, jamais par la
   couleur seule : dans une palette entièrement chaude, la teinte ne suffit
   jamais à distinguer un état. */
.creation-screen .question-card.required {
  padding-inline-start: var(--espace-16);
  border-inline-start: 2px solid var(--terre);
}

.creation-screen .question-status {
  margin-inline-start: var(--espace-8);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre-legere);
}

.creation-screen .question-card.required .question-status {
  color: var(--brique-texte);
}

.creation-screen .question-recall {
  font-style: italic;
}

.creation-screen .question-card .question-impact,
.creation-screen .question-card .question-default {
  font-family: var(--police-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--encre-douce);
}

.creation-screen .question-card .question-default {
  color: var(--encre-legere);
  font-size: 13px;
}

/* --- Les réglages retenus --------------------------------------------------
   Ce que l'atelier a décidé seul. Ce n'est pas un questionnaire déguisé : la
   valeur est déjà appliquée, la justification est visible, et changer d'avis
   reste possible sans qu'aucune question n'ait été posée. */

.creation-screen .settings-panel {
  display: grid;
  gap: var(--espace-16);
  margin-block-start: var(--espace-32);
  padding-block-start: var(--espace-24);
  border-block-start: 1px solid var(--bord);
}

.creation-screen .settings-panel h3 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}

.creation-screen .settings-lead {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--encre-douce);
}

.creation-screen .setting-row {
  display: grid;
  gap: var(--espace-8);
  padding-block: var(--espace-16);
  border-block-start: 1px solid var(--bord);
}

.creation-screen .setting-heading {
  display: grid;
  gap: var(--espace-4);
}

.creation-screen .setting-heading strong {
  font-family: var(--police-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--encre);
}

.creation-screen .setting-heading small,
.creation-screen .setting-impact {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--encre-legere);
}

.creation-screen .setting-fixed {
  font-family: var(--police-ui);
  font-size: 14px;
  color: var(--encre-douce);
}

.creation-screen .setting-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
}

/* --- Étape 3 : la fabrication ---------------------------------------------
   Aucun cercle de progression : un folio, un titre, une liste réglée. */

.creation-screen .generation-page.active {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  justify-content: start;
  min-block-size: 0;
  padding: var(--espace-48) var(--espace-32) var(--espace-72);
  text-align: left;
}

.creation-screen .generation-standard {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: 0;
  text-align: left;
}

.creation-screen .generation-brand-mark {
  /* margin:auto héritée le recentrait au milieu de la colonne. Constaté au
     navigateur. */
  margin: 0;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 0;
  box-shadow: none;
}

/* Le pourcentage devient un folio : une mention, pas un cadran. */
.creation-screen .progress-circle {
  display: block;
  inline-size: auto;
  block-size: auto;
  margin: var(--espace-24) 0 0;
  border-radius: 0;
  background: none;
}

.creation-screen .progress-circle::before {
  display: none;
}

.creation-screen .progress-circle strong {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--encre-douce);
}

.creation-screen .generation-page h2 {
  margin: var(--espace-12) 0 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.creation-screen .generation-page > .generation-standard > p {
  margin: var(--espace-12) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.creation-screen .generation-budget {
  inline-size: min(100%, 560px);
  margin-block-start: var(--espace-24);
  padding: var(--espace-24);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-24);
  background: var(--creme-clair);
  box-shadow: var(--ombre-douce);
}

.creation-screen .generation-recovery {
  width: min(100%, 680px);
  margin: var(--espace-24) auto;
  padding: var(--espace-24);
  border: 1px solid var(--ambre-texte);
  border-radius: var(--rayon-24);
  background: var(--ambre-voile);
  color: var(--encre);
  text-align: left;
}

.generation-recovery-card {
  display: grid;
  gap: var(--espace-12);
  margin-top: var(--espace-16);
  padding-top: var(--espace-16);
  border-top: 1px solid color-mix(in srgb, var(--ambre-texte) 30%, transparent);
}

.generation-recovery-card textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical;
}

.generation-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-12);
}

.generation-recovery img {
  display: block;
  width: 100%;
  margin-top: var(--espace-16);
  border-radius: var(--rayon-16);
}

.creation-screen .generation-budget > strong {
  color: var(--encre);
  font-family: var(--police-titre);
  font-size: 22px;
}

.creation-screen .generation-budget p,
.creation-screen .generation-budget small {
  display: block;
  margin: var(--espace-12) 0 0;
  color: var(--encre-douce);
  font-size: 13px;
  line-height: 1.5;
}

.creation-screen .generation-budget label {
  display: block;
  margin-block-start: var(--espace-16);
  color: var(--brique-texte);
  font-size: 12px;
  font-weight: 600;
}

.creation-screen .generation-budget-action {
  display: flex;
  align-items: stretch;
  gap: var(--espace-12);
  margin-block-start: var(--espace-8);
}

.creation-screen .generation-budget-action input {
  min-inline-size: 0;
  inline-size: 140px;
  border: 1px solid var(--bord);
  border-radius: var(--rayon-16);
  background: var(--creme);
  color: var(--encre);
  font: inherit;
  padding-inline: var(--espace-16);
}

.creation-screen .generation-budget-action button {
  inline-size: auto;
  min-block-size: 48px;
  padding-inline: var(--espace-24);
}

#accountScreen .account-budget-setting label {
  display: grid;
  gap: var(--espace-8);
  color: var(--encre-douce);
  font-size: 12px;
}

#accountScreen .account-budget-setting input {
  inline-size: 130px;
  padding: var(--espace-12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-16);
  background: var(--creme);
  color: var(--encre);
  font: inherit;
}

.creation-screen .generation-list {
  inline-size: 100%;
  max-inline-size: none;
  margin-block-start: var(--espace-72);
  text-align: left;
}

.creation-screen .generation-item {
  gap: var(--espace-12);
  padding: var(--espace-12) 0;
  border-block-end: 1px solid var(--bord);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--encre-douce);
}

.creation-screen .generation-item:last-child {
  border-block-end: 0;
}

/* Les jalons : un signe monochrome, jamais une gommette colorée. */
.creation-screen .generation-item::before {
  inline-size: auto;
  block-size: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-legere);
  content: '·';
  font-size: 16px;
  animation: none;
}

.creation-screen .generation-item.completed {
  color: var(--encre);
}

.creation-screen .generation-item.completed::before {
  background: none;
  border: 0;
  color: var(--sauge-texte);
  content: '✓';
}

.creation-screen .generation-item.running {
  color: var(--encre);
  font-weight: 500;
}

.creation-screen .generation-item.running::before {
  border: 0;
  color: var(--brique-texte);
  content: '→';
  animation: none;
}

.creation-screen #generationTimeHint {
  margin-block-start: var(--espace-24);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--encre-douce);
}

.creation-screen .generation-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--espace-16);
  margin-block-start: var(--espace-24);
}

/* --- Les actions ----------------------------------------------------------
   Un seul bouton terre par écran, dans la barre basse. Les autres actions
   sont du texte. */

.creation-screen .notification-generation-button,
.creation-screen .generation-controls button,
.creation-screen .debug-generation-action {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

.creation-screen .notification-generation-button {
  margin-block-start: var(--espace-24);
}

.creation-screen .notification-generation-button:hover,
.creation-screen .generation-controls button:hover {
  background: none;
  color: var(--brique-texte);
}

.creation-screen .generation-controls .danger-button {
  border: 0;
  background: none;
  color: var(--alerte-texte);
}

.creation-screen .bottom-action {
  padding: var(--espace-16) var(--espace-32);
  border-block-start: 1px solid var(--bord);
  background: var(--creme);
  backdrop-filter: none;
}

.creation-screen .bottom-action button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--espace-12);
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
}

.creation-screen .bottom-action button:hover {
  background: var(--brique);
}

@media (max-width: 600px) {
  .creation-screen .flow-header,
  .creation-screen .step-progress {
    padding-inline: var(--espace-16);
    margin-inline: var(--espace-16);
  }

  .creation-screen .flow-header {
    margin-inline: 0;
    padding-block-start: var(--espace-24);
  }

  .creation-screen .flow-page.active,
  .creation-screen .generation-page.active {
    padding-inline: var(--espace-16);
  }

  .creation-screen .flow-page.active > *,
  .creation-screen .generation-standard {
    grid-column: 1 / -1;
  }

  .creation-screen .flow-page.active > h1,
  .creation-screen .analysis-panel h2,
  .creation-screen .generation-page h2 {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }

  .creation-screen .bottom-action {
    padding-inline: var(--espace-16);
  }

  .creation-screen .bottom-action button {
    inline-size: 100%;
  }

  .creation-screen .generation-budget-action {
    align-items: stretch;
    flex-direction: column;
  }

  .creation-screen .generation-budget-action input,
  .creation-screen .generation-budget-action button {
    inline-size: 100%;
  }
}

/* --- Corrections constatées au navigateur, écran Création -----------------
   Trois défauts visibles seulement au rendu, invisibles à la lecture du CSS.
   -------------------------------------------------------------------------- */

/* 1. L'en-tête et les trois temps couraient sur toute la largeur pendant que
   le formulaire tenait sur 7 colonnes. Même laisse pour tout le monde : la
   largeur de 7 colonnes sur 12, gouttières comprises. */
.creation-screen .flow-header,
.creation-screen .step-progress {
  max-inline-size: calc(
    (100% - 2 * var(--espace-32) - 11 * var(--espace-24)) / 12 * 7
    + 6 * var(--espace-24)
  );
  margin-inline: var(--espace-32);
  padding-inline: 0;
}

/* 2. Le micro était dessiné en deux pseudo-éléments qui se superposaient au
   libellé une fois la pastille retirée. Le balisage porte déjà un ● : on le
   laisse paraître et on éteint le dessin. */
.creation-screen .voice-input-icon::before,
.creation-screen .voice-input-icon::after {
  display: none;
}

.creation-screen .voice-input-button[data-state='listening'] {
  border: 0;
  background: none;
  color: var(--alerte-texte);
}

.creation-screen .voice-input-button[data-state='listening'] .voice-input-icon {
  background: none;
  animation: none;
}

.creation-screen .voice-meter {
  flex: 0 0 80px;
  block-size: 2px;
  border-radius: 0;
  background: var(--bord);
}

.creation-screen .voice-meter span {
  border-radius: 0;
  background: var(--terre);
}

/* 3. La barre d'action fixe passait sous la barre latérale et rejouait le
   bandeau de tableau de bord. L'action revient dans le fil du document, à la
   fin du formulaire, sur le même axe que lui. */
.creation-screen .bottom-action {
  position: static;
  display: block;
  inset: auto;
  margin-block-start: var(--espace-72);
  padding: var(--espace-32) var(--espace-32) var(--espace-72);
  border-block-start: 1px solid var(--bord);
  background: none;
}

.creation-screen .flow-page.active {
  padding-block-end: 0;
}

/* --------------------------------------------------------------------------
   LECTURE — #playerScreen, #editorScreen, #quizScreen

   CE QUI N'EST PAS TOUCHÉ, ET POURQUOI. Le panneau de texte du lecteur n'est
   pas une décoration : c'est un dispositif de lisibilité exécuté par
   renderPlayer, qui pose par diapositive une disposition, un style de
   panneau, un ton clair ou sombre, et calcule --layout-rgb, --slide-accent
   et --overlay-strength à partir de l'illustration elle-même. C'est ce qui
   garantit le contraste du texte sur une image quelconque. L'aplatir au nom
   du « pas de dégradé » reviendrait à retirer la garantie sans la remplacer.
   Le panneau reste donc l'unique surface surélevée de l'écran de lecture —
   ce que la règle autorise. Seule la chrome est reprise.
   -------------------------------------------------------------------------- */

/* --- L'en-tête du lecteur ------------------------------------------------- */

#playerScreen .player-header {
  display: flex;
  align-items: baseline;
  gap: var(--espace-16);
  block-size: auto;
  max-inline-size: none;
  padding: var(--espace-24) var(--espace-32);
  border-block-end: 1px solid var(--bord);
  background: none;
}

#playerScreen .player-header > strong {
  flex: 1 1 auto;
  padding: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--encre-douce);
}

#playerScreen .player-header .back-icon {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-size: 16px;
}

#playerScreen .player-header-actions {
  display: flex;
  align-items: baseline;
  gap: var(--espace-16);
}

/* Le folio : un nombre posé, pas une gélule. */
#playerScreen #playerCounter,
#playerScreen #fullscreenPlayer {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* --- La scène ------------------------------------------------------------- */

#playerScreen .player-stage {
  padding: var(--espace-24) var(--espace-32);
}

/* Le numéro de page redevient un folio : plus de pastille, plus d'ombre. */
#playerScreen .slide-number {
  inline-size: auto;
  block-size: auto;
  inset: var(--espace-16) var(--espace-16) auto auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--scene-encre);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Le filet d'accent du panneau : un filet, pas une gélule. */
#playerScreen .player-text-card::before {
  inline-size: 40px;
  block-size: 2px;
  border-radius: 0;
}

/* Le titre de la page passe à la police de titre. La TAILLE reste pilotée par
   --title-size-*, que renderPlayer calcule d'après l'échelle de texte choisie
   pour l'histoire : la figer ici retirerait un réglage au parent. */
#playerScreen .player-text-card h2 {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  letter-spacing: -0.02em;
}

/* --- Les commandes -------------------------------------------------------- */

#playerScreen .player-controls {
  block-size: auto;
  gap: var(--espace-24);
  padding: var(--espace-16) var(--espace-32);
  border-block-start: 1px solid var(--bord);
  background: none;
}

#playerScreen .player-controls > button {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-size: 16px;
}

/* La seule action terre de l'écran. */
#playerScreen .player-controls > button.next {
  padding: var(--espace-12) var(--espace-24);
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
}

#playerScreen .player-controls > button.next:hover {
  background: var(--brique);
}

#playerScreen .player-controls > div {
  justify-content: flex-start;
  gap: var(--espace-4);
}

/* Les repères de page : des filets, pas des gommettes. */
#playerScreen .player-dot {
  inline-size: 16px;
  block-size: 2px;
  border-radius: 0;
  background: var(--bord);
}

#playerScreen .player-dot.active {
  inline-size: 16px;
  background: var(--terre);
}

/* --------------------------------------------------------------------------
   L'HISTOIRE — #editorScreen

   Avant : 95 blocs, 41 surfaces surélevées, sept cartes empilées sans
   hiérarchie, métadonnées à 8 px. Après : une suite de sections réglées.
   -------------------------------------------------------------------------- */

.editor-screen .flow-header {
  display: flex;
  align-items: baseline;
  gap: var(--espace-16);
  block-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-24) var(--espace-32);
}

.editor-screen .flow-header > strong {
  flex: 1 1 auto;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--encre-douce);
}

.editor-screen .back-icon {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
}

.editor-screen .text-button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor-screen .text-button:hover {
  color: var(--brique-texte);
}

.editor-screen .editor-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-32) var(--espace-32) var(--espace-72);
}

.editor-screen .editor-content > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
}

.editor-screen .editor-content > * + * {
  margin-block-start: var(--espace-72);
}

/* Le faux-titre de l'histoire : couverture à gauche, titre en regard. */
.editor-screen .story-summary-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: var(--espace-24);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.editor-screen .story-summary-card img {
  inline-size: 140px;
  block-size: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-10);
  object-fit: cover;
}

.editor-screen .story-summary-card h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.editor-screen .story-summary-card p {
  margin: var(--espace-12) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* Les métadonnées passaient à 8 px, sous le seuil de lisibilité. */
.editor-screen .metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-12);
  margin-block-start: var(--espace-12);
}

.editor-screen .metadata span {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.editor-screen .metadata span + span::before {
  content: '· ';
  color: var(--encre-legere);
}

/* Bandeaux, panneaux et volets : des sections réglées, sans fond ni pastille. */
.editor-screen .info-banner,
.editor-screen .quality-panel,
.editor-screen .learning-plan,
.editor-screen .source-panel,
.editor-screen .community-share-status {
  padding: var(--espace-24) 0 0;
  border: 0;
  border-block-start: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.editor-screen .info-banner {
  display: flex;
  align-items: baseline;
  gap: var(--espace-12);
}

.editor-screen .info-banner > span,
.editor-screen .community-share-status > span {
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
  font-weight: 400;
}

.editor-screen .info-banner.mint > span,
.editor-screen .info-banner.mint strong {
  color: var(--sauge-texte);
}

.editor-screen .info-banner.coral > span,
.editor-screen .info-banner.coral strong {
  color: var(--alerte-texte);
}

.editor-screen .info-banner strong,
.editor-screen .community-share-status strong,
.editor-screen .quality-panel h2,
.editor-screen .source-panel h2 {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.editor-screen .info-banner p,
.editor-screen .community-share-status p,
.editor-screen .quality-panel p {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.editor-screen .quality-panel header small,
.editor-screen .source-panel header small {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.editor-screen .quality-panel #qualityOverall {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}

.editor-screen .learning-plan > summary {
  padding: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.editor-screen .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding-block-end: var(--espace-12);
  border-block-end: 1px solid var(--bord);
}

.editor-screen .section-heading h2,
.editor-screen .section-heading small {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Les pages de l'histoire : des lignes réglées, pas des cartes. */
.editor-screen .slide-editor-list {
  display: grid;
  gap: 0;
  margin-block-start: 0;
}

.editor-screen .slide-editor-card {
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: var(--espace-16);
  align-items: start;
  padding: var(--espace-16) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.editor-screen .slide-editor-card:last-child {
  border-block-end: 0;
}

.editor-screen .slide-editor-card img {
  inline-size: 120px;
  block-size: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--rayon-10);
  object-fit: cover;
}

.editor-screen .slide-editor-copy small {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.editor-screen .slide-editor-copy h3 {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.editor-screen .slide-editor-copy p {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.editor-screen .slide-card-actions {
  display: flex;
  gap: var(--espace-12);
}

.editor-screen .slide-card-actions button {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-size: 16px;
}

.editor-screen .slide-card-actions button.danger {
  color: var(--alerte-texte);
}

.editor-screen .info-banner.warning,
.editor-screen .slide-editor-card.needs-attention {
  background: var(--ambre-voile);
}

.editor-screen .info-banner.warning > span,
.editor-screen .info-banner.warning strong,
.editor-screen .slide-attention-note {
  color: var(--ambre-texte);
}

.editor-screen .slide-attention-note {
  font-weight: 700;
}

.editor-screen .slide-attention-note.resolved {
  color: var(--encre-douce);
}

.editor-screen .community-share-status .secondary-button,
.editor-screen .quality-panel .secondary-button {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* L'action de lecture revient dans le fil, sur le même axe que le texte. */
.editor-screen .editor-actions {
  position: static;
  display: block;
  inset: auto;
  padding: var(--espace-32);
  border-block-start: 1px solid var(--bord);
  background: none;
  backdrop-filter: none;
}

.editor-screen .editor-actions button {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-12);
  inline-size: max-content;
  max-inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.editor-screen .editor-actions button:hover {
  background: var(--brique);
}

/* --------------------------------------------------------------------------
   APRÈS L'HISTOIRE — #quizScreen

   Avant : une carte contenant une pastille ronde et cinq blocs centrés, puis
   des blocs alignés à gauche — l'axe changeait au milieu de la carte.
   -------------------------------------------------------------------------- */

.ending-screen .flow-header {
  display: flex;
  align-items: baseline;
  gap: var(--espace-16);
  block-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-24) var(--espace-32);
}

.ending-screen .flow-header > strong {
  flex: 1 1 auto;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--encre-douce);
}

.ending-screen .flow-header > span:last-child {
  display: none;
}

.ending-screen .back-icon {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
}

.ending-screen .ending-page {
  display: block;
  padding: 0;
}

.ending-screen .ending-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  justify-items: stretch;
  inline-size: auto;
  max-inline-size: none;
  margin: 0;
  padding: var(--espace-32) var(--espace-32) var(--espace-72);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}

.ending-screen .ending-content > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
  text-align: left;
}

.ending-screen .ending-content > * + * {
  margin-block-start: var(--espace-24);
}

/* L'Étincelle quitte sa pastille. */
.ending-screen .ending-icon {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-size: 16px;
  justify-self: start;
}

.ending-screen .ending-kicker,
.ending-screen .ending-quiz-progress {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

.ending-screen .ending-icon + .ending-kicker {
  margin-block-start: var(--espace-12);
}

.ending-screen #endingTitle {
  margin-block-start: var(--espace-12);
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.ending-screen .ending-question {
  margin-block-start: var(--espace-72);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.ending-screen .ending-instruction,
.ending-screen .ending-quiz-feedback {
  margin-block-start: var(--espace-8);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.ending-screen .ending-quiz-options {
  display: grid;
  gap: var(--espace-8);
  margin-block-start: var(--espace-24);
}

.ending-screen .ending-quiz-options button {
  inline-size: 100%;
  min-block-size: 0;
  padding: var(--espace-12);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-10);
  background: none;
  box-shadow: none;
  color: var(--encre);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.ending-screen .ending-quiz-options button:hover {
  border-color: var(--terre-voile);
}

.ending-screen .ending-answer,
.ending-screen .info-banner {
  display: flex;
  align-items: baseline;
  gap: var(--espace-12);
  padding: var(--espace-16) 0 0;
  border: 0;
  border-block-start: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.ending-screen .ending-answer > strong,
.ending-screen .info-banner strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

.ending-screen .info-banner > span {
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
}

.ending-screen .ending-answer > p,
.ending-screen .info-banner p {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.ending-screen .ending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--espace-24);
  margin-block-start: var(--espace-72);
}

.ending-screen .ending-actions .primary-button,
.ending-screen .ending-next-question {
  display: inline-flex;
  inline-size: max-content;
  min-block-size: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.ending-screen .ending-actions .secondary-button {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  #playerScreen .player-header,
  #playerScreen .player-stage,
  #playerScreen .player-controls,
  .editor-screen .flow-header,
  .editor-screen .editor-content,
  .editor-screen .editor-actions,
  .ending-screen .flow-header,
  .ending-screen .ending-content {
    padding-inline: var(--espace-16);
  }

  .editor-screen .editor-content > *,
  .ending-screen .ending-content > * {
    grid-column: 1 / -1;
  }

  .editor-screen .story-summary-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .editor-screen .story-summary-card img {
    inline-size: 96px;
  }

  .editor-screen .story-summary-card h1,
  .ending-screen #endingTitle {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }

  .editor-screen .slide-editor-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .editor-screen .slide-editor-card img {
    inline-size: 88px;
  }

  .editor-screen .slide-card-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    padding-inline-start: 104px;
  }
}

@media (max-width: 420px) {
  .editor-screen .slide-card-actions {
    padding-inline-start: 0;
  }
}

/* --- Corrections constatées au navigateur, écran Lecture ------------------ */

/* Le lecteur est une surface sombre PERMANENTE : presentation.css pose
   background: var(--scene) sur .player-screen. L'encre douce y tombait à
   1,3:1 — la chrome doit porter l'encre de scène. */
#playerScreen .player-header,
#playerScreen .player-controls {
  border-color: color-mix(in srgb, var(--scene-encre) 20%, transparent);
}

#playerScreen .player-header > strong,
#playerScreen .player-header .back-icon,
#playerScreen #playerCounter,
#playerScreen #fullscreenPlayer,
#playerScreen .player-controls > button {
  color: var(--scene-encre);           /* 15,07 sur --scene */
}

#playerScreen .player-controls > button.next {
  color: var(--sur-accent);
}

#playerScreen .player-dot {
  background: color-mix(in srgb, var(--scene-encre) 30%, transparent);
}

#playerScreen .player-dot.active {
  background: var(--terre);
}

/* Le balisage réel d'une réponse de quiz est <button><span>A</span><strong>
   libellé</strong></button> : sans règle, la lettre-repère et le libellé se
   partageaient la largeur et le texte se brisait mot à mot. */
.ending-screen .ending-quiz-options button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--espace-12);
}

.ending-screen .ending-quiz-options button > span {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.ending-screen .ending-quiz-options button > strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: inherit;
}

.ending-screen .ending-quiz-options.image-options button {
  grid-template-columns: minmax(0, 1fr);
}

.ending-screen .ending-quiz-options button img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--rayon-10);
}

/* Le repère parent s'empile : titre puis texte, pas côte à côte. */
.ending-screen .ending-answer {
  display: block;
}

/* Le contrôle qualité portait un second aplat terre — la note globale en
   pastille pleine — et quatre pastilles rose voile. Une note se lit en
   chiffres, pas en gommettes. Constaté au navigateur. */
.editor-screen .quality-panel header > strong {
  display: inline;
  min-inline-size: 0;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
}

.editor-screen .quality-dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-24);
  margin-block-start: var(--espace-16);
}

.editor-screen .quality-dimension {
  display: flex;
  align-items: baseline;
  gap: var(--espace-8);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.editor-screen .quality-dimension span {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--encre-douce);
}

.editor-screen .quality-dimension strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--encre);
}

.editor-screen .quality-dimension.needs-review {
  background: none;
}

.editor-screen .quality-dimension.needs-review strong {
  color: var(--alerte-texte);
}

/* Le repère parent restait à 12 px : une règle d'identifiant le tenait sous
   le corps de texte. Constaté au navigateur. */
.ending-screen #endingAnswerGuide {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

/* --------------------------------------------------------------------------
   CATALOGUE — #communityScreen

   Avant : 43 blocs, 19 surfaces surélevées, 6 ombres, une grille de cartes à
   rayon 24 avec pastilles à 10 px.
   Après : une page de catalogue. Des planches légendées, pas des boîtes.

   Le rayon 16 est réservé aux cartes d'histoire : il passe donc à la PLANCHE,
   l'illustration elle-même, et non à un conteneur. Le conteneur disparaît —
   une carte reste une exception, et cet écran n'en a pas besoin.
   -------------------------------------------------------------------------- */

#communityScreen .collection-content {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  max-inline-size: none;
  padding: var(--espace-48) var(--espace-32) var(--espace-72);
}

#communityScreen .collection-content > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
}

#communityScreen .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding-block-end: var(--espace-24);
  border-block-end: 1px solid var(--bord);
}

#communityScreen .page-heading h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

#communityScreen .page-heading > div > span {
  display: block;
  margin-block-start: var(--espace-12);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

#communityScreen #communityAccessButton {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#communityScreen #communityAccessButton:hover {
  color: var(--brique-texte);
}

/* Les planches, deux par rang, légendées dessous. *

/* La planche porte le seul rayon 16 de l'écran. *

/* Les pastilles deviennent une ligne de mentions, séparées par un point. */
#communityScreen .story-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-8);
  margin: 0;
}

#communityScreen .story-card-meta span {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

#communityScreen .story-card-meta span + span::before {
  content: '· ';
  color: var(--encre-legere);
}

/* Le catalogue verrouillé : un bloc réglé, pas une carte à pastille. */
#communityScreen .community-locked {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--espace-12);
  min-block-size: 0;
  padding: var(--espace-24) 0;
  border: 0;
  border-block: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#communityScreen .community-locked > span {
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
}

#communityScreen .community-locked strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

#communityScreen .community-locked p {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

#communityScreen .community-locked .secondary-button {
  inline-size: auto;
  min-block-size: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Le chargement et le vide, sur les écrans de collection.

   Les squelettes gris sont des indicateurs génériques : ils imitent une carte
   qu'on vient justement de retirer. Ils deviennent des lignes réglées vides,
   ce qu'un imprimeur poserait en attendant la copie.
   -------------------------------------------------------------------------- */

.collection-content .skeleton-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--espace-48);
}

.collection-content .skeleton-card {
  display: block;
  min-block-size: 0;
  block-size: var(--espace-48);
  padding: 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.collection-content .skeleton-card::before,
.collection-content .skeleton-card::after {
  display: none;
}

/* L'état vide : une phrase et une action, sans encadré tireté ni pastille. */
.collection-content .empty-state {
  display: grid;
  justify-items: start;
  gap: var(--espace-24);
  min-block-size: 0;
  margin-block-start: var(--espace-48);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}

.collection-content .empty-state-icon {
  display: inline;
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 16px;
}

.collection-content .empty-state h2 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

.collection-content .empty-state p {
  max-inline-size: 46ch;
  margin: 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--encre-douce);
}

.collection-content .empty-state button {
  inline-size: max-content;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  #communityScreen .collection-content {
    padding-inline: var(--espace-16);
  }

  #communityScreen .collection-content > * {
    grid-column: 1 / -1;
  }

  #communityScreen .page-heading h1 {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }

  .collection-content .empty-state h2 {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }
}

/* Le résumé était coupé à une ligne par minimal-ui.css, ce qui tronquait la
   plupart des titres de planche en plein mot. Deux lignes, comme la légende
   d'une planche. Constaté au navigateur. *

@media (max-width: 600px) {
  /* Sous 600 px, ux-polish.css repliait la planche en vignette de 128 px posée
     à gauche de la légende, ce qui écrasait le 16/9 et changeait la nature de
     l'objet selon la largeur. La planche reste une planche. Constaté au
     navigateur. *
}

/* --------------------------------------------------------------------------
   MA FAMILLE — #accountScreen

   Avant : 9 surfaces surélevées pour deux profils, et surtout un
   emboîtement — .account-section est une carte qui contient .child-card, une
   autre carte, qui contient des boutons à 9 px. Trois niveaux de surface pour
   une liste de deux enfants.
   Après : des sections réglées, une ligne par enfant, une par appareil.
   -------------------------------------------------------------------------- */

#accountScreen .account-page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--espace-24);
  align-content: start;
  max-inline-size: none;
  padding: var(--espace-48) var(--espace-32) var(--espace-72);
}

#accountScreen .account-page > * {
  grid-column: 1 / span 7;
  min-inline-size: 0;
  margin: 0;
}

#accountScreen .page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding-block-end: var(--espace-24);
  border-block-end: 1px solid var(--bord);
}

#accountScreen .page-heading h1 {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 40px;
  font-weight: var(--titre-graisse);
  font-variation-settings: 'opsz' 40;
  line-height: var(--titre-interligne);
  letter-spacing: -0.02em;
  color: var(--encre);
}

/* L'adresse était à 10 px, sous le seuil que la direction artistique fixe. */
#accountScreen #accountIdentity {
  display: block;
  margin-block-start: var(--espace-12);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--encre-douce);
}

#accountScreen #closeAccount {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#accountScreen .account-overview {
  display: grid;
  gap: 0;
  margin-block-start: var(--espace-48);
}

/* Une section n'est plus une carte : un intitulé, un filet, un contenu. */
#accountScreen .account-section,
#accountScreen .account-settings {
  padding: 0 0 var(--espace-48);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#accountScreen .account-section-title,
#accountScreen .data-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding-block-end: var(--espace-12);
  border-block-end: 1px solid var(--bord);
}

#accountScreen .account-section h3 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

#accountScreen .account-section p {
  margin: var(--espace-8) 0 0;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--encre-douce);
}

#accountScreen .account-section .secondary-button,
#accountScreen .account-section .icon-button {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}

#accountScreen .account-section .secondary-button:hover,
#accountScreen .account-section .icon-button:hover {
  background: none;
  color: var(--brique-texte);
}

/* Un enfant, une ligne réglée. Plus de carte dans la carte. */
#accountScreen .child-list,
#accountScreen .session-list {
  display: grid;
  gap: 0;
  margin-block-start: 0;
}

#accountScreen .child-card,
#accountScreen .session-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--espace-16);
  padding: var(--espace-16) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#accountScreen .child-card:last-child,
#accountScreen .session-list article:last-child {
  border-block-end: 0;
}

/* Le profil actif se marque à l'encre, pas à l'aplat. */
#accountScreen .child-card.active {
  background: none;
}

#accountScreen .child-card.active strong {
  color: var(--brique-texte);
}

#accountScreen .child-card > div:first-child,
#accountScreen .session-list article > div {
  display: grid;
  gap: var(--espace-8);
  min-inline-size: 0;
}

#accountScreen .child-card strong,
#accountScreen .session-list strong {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--encre);
}

#accountScreen .child-card small,
#accountScreen .session-list small {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--encre-douce);
}

#accountScreen .child-card > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-16);
}

#accountScreen .child-card button,
#accountScreen .session-list button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#accountScreen .child-card button:hover,
#accountScreen .session-list button:hover {
  color: var(--brique-texte);
}

#accountScreen .child-card button:last-child {
  color: var(--alerte-texte);
}

/* Le volet des réglages : un intitulé qui s'ouvre, pas un panneau. */
#accountScreen .account-settings > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--espace-16);
  padding: 0 0 var(--espace-12);
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
}

#accountScreen .account-settings > summary > span {
  display: grid;
  gap: var(--espace-8);
}

#accountScreen .account-settings > summary strong {
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

#accountScreen .account-settings > summary small {
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--encre-douce);
}

#accountScreen .account-settings > summary b {
  color: var(--encre-douce);
  font-size: 16px;
  font-weight: 400;
}

#accountScreen .account-settings-content {
  display: grid;
  gap: 0;
  margin-block-start: var(--espace-48);
  padding: 0;
  border: 0;
  background: none;
}

/* Le formulaire d'ajout : le seul endroit où un aplat terre a sa place. */
#accountScreen .child-form {
  margin: 0 0 var(--espace-48);
  padding: 0 0 var(--espace-48) !important;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#accountScreen .child-form h3 {
  margin: 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

#accountScreen .child-form-grid label {
  margin: var(--espace-24) 0 0;
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}

#accountScreen .child-form-grid input,
#accountScreen .child-form-grid select,
#accountScreen .child-form-grid textarea {
  inline-size: 100%;
  margin-block-start: var(--espace-8);
  padding: var(--espace-8) 0;
  border: 0;
  border-block-end: 1px solid var(--bord);
  border-radius: 0;
  background: none;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--encre);
}

#accountScreen .child-form-grid input:focus,
#accountScreen .child-form-grid select:focus,
#accountScreen .child-form-grid textarea:focus {
  border-block-end-color: var(--terre);
  box-shadow: none;
  outline: 2px solid var(--terre);
  outline-offset: 4px;
}

#accountScreen .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--espace-24);
  margin-block-start: var(--espace-32);
}

#accountScreen .dialog-actions .primary-button {
  inline-size: max-content;
  min-block-size: 0;
  padding: var(--espace-16) var(--espace-24);
  border: 0;
  border-radius: var(--rayon-24);
  background: var(--terre);
  box-shadow: var(--ombre-douce);
  color: var(--sur-accent);
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

#accountScreen .dialog-actions .secondary-button,
#accountScreen .dialog-actions .danger-button,
#accountScreen .data-actions .secondary-button,
#accountScreen .data-actions .danger-button {
  inline-size: auto;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--encre-douce);
  font-family: var(--police-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

#accountScreen .data-actions .danger-button,
#accountScreen .dialog-actions .danger-button {
  color: var(--alerte-texte);
}

#accountScreen .data-actions > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-24);
}

#accountScreen .account-empty,
#accountScreen .form-error {
  margin: var(--espace-16) 0 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--police-ui);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: var(--encre-douce);
}

#accountScreen .form-error {
  color: var(--alerte-texte);
}

@media (max-width: 600px) {
  #accountScreen .account-page {
    padding-inline: var(--espace-16);
  }

  #accountScreen .account-page > * {
    grid-column: 1 / -1;
  }

  #accountScreen .page-heading h1 {
    font-size: 32px;
    font-variation-settings: 'opsz' 32;
  }

  #accountScreen .child-card,
  #accountScreen .session-list article {
    grid-template-columns: minmax(0, 1fr);
  }

  #accountScreen .child-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* app-shell.css met la liste des enfants et celle des appareils sur deux
   colonnes. Une fois la carte retirée, les deux colonnes se chevauchaient :
   les actions d'un enfant venaient buter contre le nom du suivant, et le
   détail se brisait mot à mot. Une ligne par enfant. Constaté au navigateur. */
#accountScreen .child-list,
#accountScreen .session-list {
  grid-template-columns: minmax(0, 1fr);
}

#accountScreen .child-card,
#accountScreen .session-list article {
  min-block-size: 0;
}

/* --------------------------------------------------------------------------
   Reliquats de l'échelle typographique, relevés à la remesure finale.

   Trois tailles intermédiaires subsistaient après la passe écran par écran.
   Elles ne se voient pas à la lecture du CSS : seule la remesure des styles
   calculés les a fait apparaître.
   -------------------------------------------------------------------------- */

/* Accueil — le bouton de suggestion portait lui-même 14 px. Ses deux enfants
   posant leur propre taille, rien ne le trahissait à l'écran, mais toute
   ligne héritée en aurait pris la valeur. */
.home-content .suggestion-card {
  font-size: 16px;
}

/* Après l'histoire — styles.css impose 20 px en !important sur la question.
   Seul un !important peut le reprendre. */
.ending-screen .ending-question {
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5 !important;
}

/* Lecture — la durée de lecture descendait à 11 px dans le panneau. Elle
   remonte au corps des intitulés, 12 px : c'est une mention, pas du texte
   courant, mais 11 px reste sous le seuil de lisibilité que la direction
   artistique fixe elle-même. */
#playerScreen .player-text-card small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Le repère parent : styles.css impose 12 px en !important sur le paragraphe.
   Le sélecteur d'identifiant ne suffisait pas. Constaté à la remesure. */
.ending-screen .ending-answer p,
.ending-screen #endingAnswerGuide {
  margin: var(--espace-8) 0 0 !important;
  color: var(--encre-douce) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   Ombres résiduelles, relevées à la remesure finale.

   Une seule ombre par écran, sur le seul bouton d'action terre. Trois
   éléments en portaient encore une, invisible à la lecture parce qu'elle
   vient d'une feuille distincte de celle qui pose le fond.
   -------------------------------------------------------------------------- */

/* ux-polish.css pose --ombre-carte sur les deux barres d'action. Le fond
   était bien retiré, l'ombre non : la barre restait détachée de la page. */
.creation-screen .bottom-action,
.editor-screen .editor-actions {
  box-shadow: none;
}

/* La lame du lecteur portait --ombre-carte. Elle n'entre pas dans le
   dispositif de lisibilité — celui-ci tient au fond du panneau et à son
   contraste calculé — c'est une ombre de carte sur une page. */
#playerScreen .player-slide {
  box-shadow: none;
}

/* Le panneau de lecture portait lui aussi --ombre-carte. Son fond et son
   contraste sont calculés par renderPlayer et restent intacts ; l'ombre, elle,
   ne participe pas à la lisibilité. L'écran retrouve une ombre unique. */
#playerScreen .player-text-card {
  box-shadow: none;
}

/* identity.css porte l'ombre sur « #playerScreen .panel-solid
   .player-text-card », plus spécifique que « #playerScreen
   .player-text-card ». Il faut la même laisse pour la reprendre. */
#playerScreen .panel-glass .player-text-card,
#playerScreen .panel-solid .player-text-card,
#playerScreen .panel-gradient .player-text-card {
  box-shadow: none;
}