/* ANAELA, l'écran large.
 *
 * Cette feuille est ENTIÈREMENT sous des media queries. Rien de ce qu'elle
 * contient n'atteint un téléphone, et c'est la seule raison pour laquelle elle
 * est un fichier à part : `style.css` reste lisible seul, comme la description
 * complète de l'application sur l'écran pour lequel elle a été dessinée. La
 * retirer de `index.html` rend le site d'avant, à l'identique.
 *
 * DEUX BASCULES, ET CE QUI LES SÉPARE
 *
 * 900 px est celle que la maquette pose elle-même, « Bascule mobile,
 * < 900 px », dans ses repères d'implémentation. En dessous, un téléphone ou
 * une tablette en portrait : la colonne de 430 px de `style.css`. Au-dessus,
 * un ordinateur : la page occupe la largeur, à la marge de 48 px de la
 * maquette, et le contenu se cale sur 1440 px de référence.
 *
 * 1180 px est la seconde, et elle n'est pas dans la maquette : elle vient de
 * ce que les rails coûtent. Un rail de 400 px sur un écran de 900 laisse
 * 350 px à ce qu'on est venu lire, soit moins que sur le téléphone. Les
 * écrans à rail attendent donc d'avoir de quoi le payer. Voir la fin du
 * fichier.
 *
 * CE QU'ELLE NE FAIT PAS
 *
 * Elle ne touche à aucune COULEUR, à aucune FONTE, à aucun libellé : la charte
 * ne change pas d'un écran à l'autre, seule la mise en page change. Toutes les
 * valeurs viennent de `/jetons.css`, comme partout ailleurs, sauf les cotes
 * de composition relevées sur la maquette bureau, qui n'ont pas de jeton, pas
 * plus que celles de la maquette mobile n'en avaient.
 *
 * Elle ne touche pas non plus au CONTENU de l'aperçu imprimé (`.page-imprimee`,
 * `.double-page`) : ces pixels-là viennent du gabarit, calculés par le serveur.
 * Les élargir mentirait sur ce qui s'imprime.
 */

@media (min-width: 900px) {

  /* ------------------------------------------------------------------------
   * LE GABARIT
   *
   * Une seule mesure gouverne toute la feuille : la marge. Elle vaut 48 px,
   * la maquette, et s'ouvre au-delà de 1440 px pour centrer le contenu sans
   * l'étirer. Écrite en `padding-inline`, elle laisse les filets et les aplats
   * traverser l'écran de bord à bord : c'est ce qui distingue une page large
   * d'une colonne posée au milieu du gris.
   * ---------------------------------------------------------------------- */
  :root {
    --marge-bureau: max(48px, (100% - 1440px) / 2);
    --rail-bureau: 470px;      /* le rail de l'aperçu, maquette « Une recette » */
    --colonne-bureau: 340px;   /* le rail du livre, maquette « Le livre » */
  }

  /* Le fond gris de l'application était la marge du téléphone : sur un écran
     large il n'y a plus de marge, la page EST la surface. */
  body { background: var(--surface-page); }

  .appli { max-width: none; }

  /* ---------- l'en-tête ---------- */

  .tete { padding: 14px var(--marge-bureau); margin-bottom: 0; }
  .tete.compacte { padding: 12px var(--marge-bureau); }
  .tete-ligne { gap: 16px; }
  .marque { font-size: 22px; }
  .tete h1 { font-size: 40px; }
  .tete h2 { font-size: 20px; }
  /* Le titre d'un livre ne prend plus toute la barre : au-delà d'une
     quarantaine de signes, une ligne cesse de se lire d'un coup d'œil. */
  .tete-titre { flex: 0 1 auto; max-width: 46em; }
  .tete-titre + .pousse { display: block; flex: 1; }
  .avatar { width: 32px; height: 32px; }

  /* ---------- le corps ---------- */

  .corps { padding: 34px var(--marge-bureau) 60px; }

  /* ---------- la barre d'action ---------- */

  /* Elle reste en bas, et reste collante : c'est l'endroit où se trouve la
     seule action de l'écran, et le déplacer d'un support à l'autre ferait
     chercher. Ce qui change, c'est qu'elle cesse d'être une colonne : la note,
     l'action et les secondaires se rangent sur UNE ligne, à gauche, et le
     bouton reprend sa largeur naturelle. Un bouton de 1400 px de large n'est
     pas une action, c'est un mur. */
  .barre-action {
    padding: 14px var(--marge-bureau) 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  }
  .barre-action .b-primaire { width: auto; padding: 16px 28px; order: 1; }
  .barre-action .secondaires { margin-top: 0; order: 2; }
  .barre-action .b-second { flex: none; padding: 14px 20px; }
  /* La note passe APRÈS les boutons : on lit l'action, puis ce qu'elle
     suppose. Sur un téléphone elle est au-dessus parce qu'elle y tient la
     largeur ; ici elle tient dans la même ligne. */
  .note-action { order: 3; margin-bottom: 0; flex: 1 1 16em; }
  .barre-action .pied-etape { order: 0; flex: 0 0 100%; margin-bottom: 0; }

  /* ---------- le pied légal ---------- */

  /* Le pied légal se centre comme le reste : à gauche, il tirait l'œil dans un
     coin d'une page dont tout le contenu est au milieu. */
  .pied-appli { padding-inline: var(--marge-bureau); justify-content: center; }

  /* ---------- l'ouverture d'un écran ---------- */

  /* Le bandeau d'accueil de « Mes livres » : le titre à gauche, la phrase
     dessous, et de l'air. Il gardait la largeur du téléphone au milieu d'un
     écran vide. */
  .ouverture { padding: 38px 0 26px; }
  .ouverture h1 { font-size: 44px; }
  .ouverture .sous { max-width: 44em; font-size: 16px; line-height: 1.65; }

  /* LE TITRE ET SON ACTION SUR LA MÊME LIGNE.
     La maquette bureau pose « Nouveau livre » au bout de la ligne du titre et
     n'a pas de barre d'action : une barre collée en bas d'un écran de 1440 px
     est une convention de téléphone. Les deux boutons portent la même action
     et ne se montrent jamais ensemble. */
  [data-vue="livres"] .ouverture {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 32px;
  }
  [data-vue="livres"] .ouverture-mots { min-width: 0; }
  [data-vue="livres"] .ouverture-action { display: block; flex: none; }
  [data-vue="livres"] .barre-action { display: none; }
  /* Le corps n'a plus de barre à éviter : sans cela il garderait la réserve
     qu'on lui laisse pour elle, et le pied légal flotterait au-dessus d'un
     vide de la hauteur d'un bouton. */
  [data-vue="livres"] .corps { padding-bottom: 0; }

  /* Le fil « Dictez → Photo → C'est prêt » est une chose de téléphone : la
     maquette bureau ne le pose pas, et sous un titre de 44 px il vient se
     coller aux jambages. */
  [data-vue="livres"] .parcours { display: none; }
  .parcours { font-size: 14px; }

  /* Le texte courant respire, sans jamais dépasser la longueur de ligne au-delà
     de laquelle on perd la ligne suivante. */
  .sous { font-size: 14px; }
  .encart-gris { padding: 26px 28px; }
  .encart-gris .sous { max-width: 52em; }

  /* ------------------------------------------------------------------------
   * 05 · MES LIVRES, la liste devient une grille
   *
   * Une rangée pleine largeur met neuf centimètres de blanc entre le titre
   * d'un livre et son état : on ne lit plus une carte, on suit une ligne du
   * regard. La maquette bureau en fait des cartes verticales, la couverture
   * en haut, ce qu'il faut savoir dessous.
   *
   * `auto-fill, minmax(280px, 1fr)` est la grille des repères de la maquette :
   * trois cartes sur un portable, quatre sur un grand écran, sans qu'aucune
   * largeur ne soit décidée ici.
   * ---------------------------------------------------------------------- */
  .grille-livres {
    display: grid; gap: 28px; margin-top: 28px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .grille-livres .carte-livre {
    position: relative; padding: 20px; border: 1px solid var(--bord);
    transition: border-color var(--transition-hover);
  }
  .grille-livres .carte-livre:hover { border-color: var(--ink); }
  /* Le bouton qui ouvre le livre occupe toute la carte, et s'empile. */
  .grille-livres .ouvrir-livre {
    flex-direction: column; align-items: stretch; gap: 18px; width: 100%;
  }
  /* La couverture posée sur son aplat, comme dans la maquette : un livre
     debout sur une tablette grise. L'aplat est dessiné par un `outline`, qui
     ne pousse rien dans la grille, une div de plus dans le HTML n'aurait servi
     qu'à ça, et sur un téléphone elle n'aurait servi à rien. */
  /* La couverture posee sur son aplat gris, comme une couverture sur une
     table. La hauteur reste celle du FORMAT, `aspect-ratio` la donne, et
     seule la largeur se decide ici. */
  .grille-livres .couverture {
    width: 132px; height: auto; padding: 0; margin: 16px auto;
    outline: 16px solid var(--grey-50);
  }
  .grille-livres .carte-livre h3 {
    font-size: 20px; line-height: 1.15; white-space: normal;
    /* Deux lignes réservées : sans cela, les métadonnées de trois cartes
       voisines ne s'alignent pas et la grille paraît bancale. */
    min-height: 2.3em;
  }
  .grille-livres .carte-livre .sous { margin-top: 8px; font-size: 14px; }
  .grille-livres .corbeille {
    position: absolute; top: 12px; right: 12px; background: #fff; z-index: 1;
  }

  /* REPRENDRE OÙ VOUS EN ÉTIEZ, sur DEUX COLONNES.
     La gouttière est horizontale seulement : deux lignes voisines doivent
     partager leur filet, sinon la liste redevient une grille de cartes. */
  .reprendre { margin-top: 40px; }
  .reprises {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
  }
  .reprise { padding: 16px 0; gap: 16px; }

  /* Le bouton pointillé prend la place d'une carte, à la suite des autres.
     Étroit comme une couverture, il empile son « + » au-dessus du mot et
     laisse tomber « nouveau », que la maquette bureau n'écrit pas. */
  .zone-pointillee {
    margin-top: 28px; padding: 30px 20px; flex-direction: column; gap: 10px;
  }
  /* La hauteur n'est imposée que DANS la grille, où la case doit faire le
     même haut qu'une carte de livre. Seule, sur l'état vide, un pavé de
     340 px n'aurait rien à égaler. */
  .grille-livres .zone-pointillee { margin-top: 0; min-height: 340px; }
  .pointillee-plus { font-size: 26px; }
  .mot-long { display: none; }

  /* ------------------------------------------------------------------------
   * 07 · LE LIVRE OUVERT
   * ---------------------------------------------------------------------- */

  .tete-livre { padding: 26px 0 0; }
  .compte-recettes { font-size: 34px; }
  .chapitre { margin-top: 34px; }

  /* Deux colonnes de recettes, du même pas que la maquette. Au-delà de trois,
     la vignette et son titre se retrouvent si loin l'un de l'autre qu'on ne
     lit plus une carte. */
  .grille-recettes {
    display: grid; column-gap: 36px;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  }
  .grille-recettes .carte-recette { padding: 16px 0; }
  .grille-recettes .titre-recette { font-size: 17px; }

  /* Le livre vide : la couverture d'un côté, ce par quoi commencer de l'autre,
     sans jamais dépasser la longueur de ligne. */
  .livre-vide { padding: 34px 0 30px; gap: 40px; align-items: center; }
  .livre-vide h1 { font-size: 30px; }
  .livre-vide .sous { max-width: 38em; }
  .couverture-grande { width: 150px; height: auto; padding: 0; }

  /* ------------------------------------------------------------------------
   * 09-10 · DICTER OU ÉCRIRE
   *
   * La transcription d'un côté, le micro de l'autre. Sur un téléphone ils
   * s'empilent parce qu'il n'y a pas le choix ; ici, mettre le bouton sous un
   * texte de quinze lignes le renverrait sous la ligne de flottaison, alors
   * que c'est lui qu'on cherche.
   * ---------------------------------------------------------------------- */
  .entrees-saisie { padding-inline: var(--marge-bureau); max-width: 640px; }

  .transcription { font-size: 16.5px; line-height: 1.8; max-width: 40em; }
  /* `.vide` est aussi le nom de l'écran vide générique, qui centre son texte
     (`style.css`, « .vide { text-align: center } »). La phrase d'attente de la
     dictée en héritait : au milieu d'une colonne large, elle se lisait comme
     un titre. On la remet dans le sens de la lecture, ici seulement, le
     mobile garde exactement ce qu'il avait. */
  .transcription.vide { font-size: 16px; text-align: left; }
  /* Le texte monte depuis le bas sur un téléphone, parce que le pouce et le
     micro sont en dessous. Sur un écran large la colonne est plus haute que ce
     qu'on dicte : ancrée en bas, la première phrase apparaissait au milieu du
     vide. Elle part donc du haut. */
  .corps-saisie .transcription-cadre { min-height: 380px; justify-content: flex-start; }
  .zone-ecriture { min-height: 340px; font-size: 16px; }

  /* ------------------------------------------------------------------------
   * 12 · LES PRÉCISIONS
   *
   * La question et sa réponse tiennent la colonne de lecture ; ce qui ne se
   * répond pas, le pourquoi de la file, la permission d'être approximatif,
   * passe dans un rail à droite. Sur un téléphone, tout cela s'empile et le
   * conseil arrive après la réponse, ce qui est le bon ordre là-bas.
   * ---------------------------------------------------------------------- */
  .file-questions { padding-inline: 0; }

  [data-vue="questions"] .question { font-size: 34px; line-height: 1.25; max-width: 18em; }
  [data-vue="questions"] .reponse-libre { max-width: 38em; }
  [data-vue="questions"] .b-ignorer { justify-self: start; }
  [data-vue="questions"] .choix-carres { max-width: 38em; }

  /* ------------------------------------------------------------------------
   * 06 · NOUVEAU LIVRE
   *
   * Un formulaire ne gagne rien à s'étaler : au-delà d'une soixantaine de
   * signes, l'œil perd le début de la ligne suivante. Il garde donc sa mesure
   * et se cale à gauche, comme le reste de la page.
   * ---------------------------------------------------------------------- */
  /* ------------------------------------------------------------------------
   * 06 · NOUVEAU LIVRE
   *
   * Cinq réglages qui tenaient une colonne de 430 px au milieu d'un écran
   * vide. Ils se rangent en deux, le titre en travers, c'est lui qu'on lit
   * en premier, et c'est le seul champ dont la longueur compte.
   * ---------------------------------------------------------------------- */
  /* ROW-GAP ZÉRO, ET L'ESPACE PORTÉ PAR LES RÉGLAGES.
   *
   * L'aperçu de couverture s'étend sur 99 rangées pour rester collant tout du
   * long, c'est le procédé des écrans « maquette » et « couverture », et tous
   * deux posent `gap: 0 …` pour cette raison. Celui-ci posait `gap: 30px 40px` :
   * les 95 rangées vides qui restaient se payaient chacune leur gouttière, et
   * la page mesurait 3 800 px pour un formulaire qui en fait 1 000. Presque
   * trois mille pixels de blanc sous le dernier champ. */
  [data-vue="nouveau"] .corps {
    display: grid; gap: 0 40px; align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }
  [data-vue="nouveau"] .corps > * { margin-bottom: 30px; }
  [data-vue="nouveau"] .corps > .apercu-livre { margin-bottom: 0; }
  .champ-livre { margin: 0; }
  .champ-livre.champ-large { grid-column: 1 / -1; max-width: 640px; }
  [data-vue="nouveau"] .corps > .encart,
  [data-vue="nouveau"] .corps > section:not(.champ-livre) { grid-column: 1 / -1; }
  .saisie-titre { font-size: 26px; }

  /* ------------------------------------------------------------------------
   * 13 · LA RECETTE
   *
   * Les quatre temps restent : ce sont eux qui disent qu'une recette se relit
   * en quatre passes, et une passe qui tient dans un écran se finit. Ce qui
   * change, c'est ce qu'un temps fait de la largeur.
   *
   * Le titre et le sous-titre vont côte à côte, comme dans la maquette :
   * l'un est le nom, l'autre la ligne qui le suit sur la page, et on les
   * relit ensemble. L'accroche, elle, tient la largeur, c'est un paragraphe.
   * ---------------------------------------------------------------------- */
  .onglets-recette {
    margin: 10px calc(-1 * var(--marge-bureau)) -12px;
    padding-inline: var(--marge-bureau);
    grid-template-columns: repeat(4, minmax(0, 200px));
    justify-content: start; column-gap: 0;
  }
  .onglets-recette button { padding: 10px 16px 10px 0; }
  .onglets-recette span { font-size: 14px; }
  /* Le mot entier ne se décide plus ici : c'est l'onglet qui mesure sa propre
     colonne, dans `style.css`. Une règle de largeur d'écran laissait l'abrégé
     sur une fenêtre de 600 px qui avait pourtant la place. */
  .onglets-recette i { margin-top: 12px; }

  .corps-recette {
    display: grid; column-gap: 40px; padding: 30px var(--marge-bureau) 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .corps-recette > * { grid-column: 1 / -1; }
  .corps-recette > [data-bloc="titre"] { grid-column: 1; }
  .corps-recette > [data-bloc="sous_titre"] { grid-column: 2; }
  .pan-recette { padding-top: 20px; }
  .saisie-nue.titre { font-size: 26px; }
  .saisie-nue { font-size: 16px; }

  /* Une liste d'ingrédients est une colonne de lignes courtes : à pleine
     largeur, « 1 citron » traîne un mètre de blanc derrière lui. Deux colonnes
     de journal, donc, la lecture descend l'une puis reprend l'autre, ce qui
     est l'ordre de la liste. Les étapes, elles, sont des phrases : elles
     gardent leur colonne et leur mesure. */
  /* `display: block` est requis : la liste est une colonne flex dans
     `style.css`, et le multi-colonnes ne s'applique pas à un conteneur flex. */
  [data-bloc="ingredients"] .liste-edit {
    display: block; columns: 2; column-gap: 44px;
  }
  [data-bloc="ingredients"] .ligne-edit { break-inside: avoid; }

  /* La mesure se pose sur le BLOC, pas sur le champ : sinon le libellé et son
     compteur restent aux deux bouts de l'écran pendant que le texte, lui, se
     range dans sa colonne, et plus rien ne dit qu'ils vont ensemble. */
  .corps-recette > [data-bloc="accroche"],
  .corps-recette > [data-bloc="etapes"],
  .corps-recette > .pan-recette:not([data-bloc]) { max-width: 62em; }
  .corps-recette > [data-bloc="ingredients"] { max-width: 76em; }
  .b-discret { max-width: 26em; }

  /* Le dernier temps : la photo au centre de la page, ses deux façons de la
     remplir dessous, à sa largeur. */
  .place-photo { height: 340px; }
  img.place-photo { width: 248px; }
  .deux-actions { max-width: 420px; margin-inline: auto; }
  [data-bloc="photo"] { justify-self: center; }

  /* Le pied de la recette rejoint la barre d'action commune : sur une ligne,
     à gauche. « Étape 2 / 4 » et ce qui reste passent avant les boutons. */
  .barre-action .pied-etape { margin-bottom: 4px; }
  .barre-action .deux-boutons { display: flex; gap: 10px; order: 1; }
  .barre-action .deux-boutons .b-primaire { width: auto; }

  /* ---------- le calque d'aperçu ---------- */

  /* Il était à la largeur de l'atelier, soit un téléphone posé au milieu de
     l'écran. La maquette pose une modale : un voile, et une carte au centre.
     Ici la carte est large, parce que ce qu'elle montre est une page A4.
     Le centrage vient de `style.css` (`left: 50%` + `translateX(-50%)`) : on
     n'y touche pas, le défaire ici décalait le calque hors de l'écran. */
  .voile-calque {
    display: block; position: fixed; inset: 0; z-index: 44;
    background: rgba(10, 10, 10, .55);
  }
  .calque { max-width: 1000px; top: 40px; bottom: 40px; }
  .calque-corps { padding: 26px 32px; }
  .calque-tete, .calque-pied { padding-inline: 32px; }
  /* Les pages d'une recette se regardent ENSEMBLE : c'est une double page
     qu'on imprime, et deux pages l'une sous l'autre demandent de faire
     défiler pour comparer ce qui se lit d'un seul coup d'œil sur le papier. */
  .calque-corps {
    display: grid; gap: 24px; align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .page-imprimee { margin-bottom: 0; }
  .page-imprimee img { border: 1px solid var(--bord); }

  /* ------------------------------------------------------------------------
   * 18 · LA MAQUETTE DU LIVRE
   *
   * L'ordre des pages d'un côté, ce qu'on peut y ajouter de l'autre. Les trois
   * portes pointillées faisaient trois bandes de 1 300 px de large : un bouton
   * aussi large qu'une page se lit comme une séparation, pas comme une action.
   * ---------------------------------------------------------------------- */
  .ligne-maquette { padding: 16px 0; }
  .corps-ligne > b { font-size: 16px; }

  /* ------------------------------------------------------------------------
   * 19 · LE FEUILLETAGE
   *
   * Deux doubles pages de front. Une seule par ligne laissait la moitié de
   * l'écran vide et obligeait à faire défiler pour comparer deux planches,
   * ce qu'on vient précisément faire ici.
   * ---------------------------------------------------------------------- */
  [data-vue="feuilletage"] .corps {
    display: grid; gap: 28px 32px; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
  [data-vue="feuilletage"] .corps > .sous,
  [data-vue="feuilletage"] .corps > .encart,
  [data-vue="feuilletage"] .corps > .bloc { grid-column: 1 / -1; }

  /* ------------------------------------------------------------------------
   * 20 · LA COUVERTURE
   *
   * La planche reste sous l'œil pendant qu'on règle : c'est le seul écran où
   * chaque geste change une image, et faire défiler pour voir l'effet d'un
   * clic revient à régler à l'aveugle. Elle est donc collée à gauche, les
   * réglages passent à droite.
   * ---------------------------------------------------------------------- */
  .planche-couverture img { width: 100%; height: auto; display: block; }

  /* ------------------------------------------------------------------------
   * LES ÉCRANS FAITS DE BLOCS
   *
   * L'assemblage, la liste des commandes, une commande : une pile de cartes
   * blanches qui, à pleine largeur, tirent chacune une ligne de texte sur un
   * mètre. Elles se rangent en colonnes, et gardent leur ordre de lecture.
   *
   * LA VENTE ET LE COMPTE N'EN SONT PLUS. Ils ont été portés de « Anaela
   * Checkout Bureau » et « Anaela Compte Bureau », qui ne composent ni l'un ni
   * l'autre en cartes : la caisse est une colonne de 760 px, le compte est un
   * rail et des sections. Les laisser dans cette grille rangeait leurs
   * sections en cases de 400 px, voir la fin du fichier, où chacun pose sa
   * mise en page.
   * ---------------------------------------------------------------------- */
  [data-vue="assemblage"] .corps,
  [data-vue="chapitres"] .corps,
  [data-vue="commandes"] .corps,
  [data-vue="suivi"] .corps {
    display: grid; gap: 20px 32px; align-items: start;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
  /* Ce qui n'est pas une carte traverse la grille : une phrase d'introduction,
     une erreur, une attente. */
  [data-vue="assemblage"] .corps > .sous,
  [data-vue="assemblage"] .corps > .encart,
  [data-vue="chapitres"] .corps > .sous,
  [data-vue="chapitres"] .corps > .b,
  [data-vue="chapitres"] .corps > .encart { grid-column: 1 / -1; }

  /* ------------------------------------------------------------------------
   * 15 · LES TROIS LANGUES
   *
   * On vient y comparer une version à une autre. Le titre et l'accroche
   * gardent la largeur, ce sont des paragraphes ; les ingrédients et les
   * étapes se mettent en regard, comme sur la page imprimée.
   * ---------------------------------------------------------------------- */
  [data-vue="langues"] .corps {
    display: grid; gap: 20px 32px; align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  [data-vue="langues"] .corps > * { grid-column: 1 / -1; }
  [data-vue="langues"] .corps > .bloc:nth-last-of-type(2),
  [data-vue="langues"] .corps > .bloc:last-of-type { grid-column: auto; }
  [data-vue="langues"] .corps > .bloc { border: 1px solid var(--bord); }
  [data-vue="langues"] .bloc:first-of-type > div { max-width: 62em; }
  .onglets { padding-inline: var(--marge-bureau); }

  /* ------------------------------------------------------------------------
   * 14 · RACCOURCIR, un avant et un après, qu'on lit ligne à ligne.
   * ---------------------------------------------------------------------- */
  [data-vue="raccourcir"] .corps { max-width: 900px; }

  .bloc { margin-bottom: 0; padding: 20px 22px; }
  /* Sur fond blanc, une carte blanche ne se voit qu'à ce qu'elle contient.
     Le filet la rend au regard, sans rien ajouter à la charte : c'est ce
     qu'elle fait partout ailleurs pour séparer. */
  [data-vue="assemblage"] .corps > .bloc,
  [data-vue="chapitres"] .corps > .bloc,
  [data-vue="commandes"] .corps > .bloc,
  [data-vue="suivi"] .corps > .bloc { border: 1px solid var(--bord); }
  [data-vue="assemblage"] .corps > .bloc.trop,
  [data-vue="chapitres"] .corps > .bloc.trop { border-color: var(--ink); }
}

/* ==========================================================================
 * LA SECONDE BASCULE, 1180 px
 *
 * Tout ce qui précède tient dès 900 px : des marges, une grille qui se
 * remplit toute seule, une barre d'action sur une ligne. Ce qui suit demande
 * plus de place, et c'est pour cela que c'est ici.
 *
 * Un rail de 400 px posé sur un écran de 900 laisse 350 px à ce qu'on est
 * venu lire : la question, la dictée, la liste des pages s'y retrouvent plus
 * à l'étroit qu'elles ne l'étaient sur le téléphone. Entre 900 et 1180, ces
 * écrans restent donc en une colonne, large, mais une seule.
 * ========================================================================== */

@media (min-width: 1180px) {
  /* 09-10 · DICTER OU ÉCRIRE.
   *
   * Une seule colonne, bornée à une largeur de lecture : le rail de droite
   * (« La page du livre ») et les quatre champs à venir sont sortis
   * (chantier 014, écarts assumés avec la maquette, chantiers/001), ils
   * promettaient un remplissage en direct que rien ne tient avant Noël. Ce
   * qui reste de la maquette bureau : le micro remonte EN HAUT de la
   * colonne, dans un cadre pointillé qui le présente, et la transcription
   * passe dessous, sous un filet.
   *
   * L'ordre du HTML reste celui du téléphone, micro APRÈS la transcription,
   * puisque là-bas le pouce est en bas. Ici c'est la grille qui les remet dans
   * l'ordre de lecture, sans qu'aucune vue ait à connaître sa mise en page. */
  .corps-saisie {
    display: grid; gap: 0; align-items: start;
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    padding-top: 34px;
  }
  .corps-saisie > * { grid-column: 1; }

  .entete-saisie { display: block; grid-row: 1; }
  .entete-saisie .surtitre { color: var(--libelle); }
  .titre-saisie {
    margin: 14px 0 0; font-family: var(--font-display); font-weight: 400;
    font-size: 30px; line-height: 1.05; text-transform: uppercase;
  }
  .titre-saisie.attente { color: var(--desactive); }

  /* Le micro d'abord, la transcription ensuite : deux rangées explicites. */
  .corps-saisie .scene-micro { grid-row: 3; }
  .corps-saisie .scene-dictee { grid-row: 4; }
  .corps-saisie .scene-ecriture { grid-row: 3 / span 2; }

  /* Le cadre du micro : le bouton à gauche, ce qu'il fait au milieu, et
     l'onde à droite pendant qu'on parle. */
  .corps-saisie .scene-micro {
    margin-top: 26px; padding: 32px; border: 1px dashed var(--desactive);
    display: grid; align-items: center; gap: 4px 32px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .corps-saisie .scene-micro.en-ecoute { border-color: var(--ink); }
  .corps-saisie .scene-micro .halo {
    grid-column: 1; grid-row: 1 / span 2; width: 80px; height: 80px;
  }
  .corps-saisie .bouton-micro { width: 80px; height: 80px; }
  .corps-saisie .mot-micro { display: block; grid-column: 2; grid-row: 1; }
  .mot-micro-titre { font-size: 19px; line-height: 1.4; }
  .mot-micro .sous { margin-top: 7px; max-width: 34em; }
  .corps-saisie .scene-micro .indice-micro {
    grid-column: 2; grid-row: 2; margin-top: 12px;
  }
  .corps-saisie .onde {
    grid-column: 3; grid-row: 1 / span 2; margin-bottom: 0;
  }

  /* La transcription sous un filet. 180 px et non 380 : la maquette bureau
     garde le bloc court pour que le bouton reste dans l'écran, un trou de
     trois cent quatre-vingts pixels le chassait. */
  .corps-saisie .scene-dictee {
    margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bord);
  }
  .corps-saisie .transcription-cadre { min-height: 180px; }

  /* L'écran porte son titre DANS la colonne, comme la maquette bureau le
     dessine. Le garder aussi dans la barre du haut le disait deux fois ; là-haut
     il ne reste que le livre où l'on écrit. */
  [data-vue="dictee"] .tete h2 { display: none; }
  [data-vue="dictee"] .tete-meta { margin-top: 0; }

  /* `dense` est indispensable : les deux blocs du rail sont les PREMIERS dans
     le HTML, et sans lui le curseur de placement laisse la première ligne de
     la colonne de gauche vide, la question descendait sous le conseil. */
  [data-vue="questions"] .corps {
    display: grid; gap: 0 48px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-auto-flow: row dense;
  }
  [data-vue="questions"] .corps > * { grid-column: 1; }
  [data-vue="questions"] .encart-primaire { grid-column: 2; grid-row: 1; margin: 0; }
  [data-vue="questions"] .astuce { grid-column: 2; grid-row: 2; margin: 24px 0 0; }

  [data-vue="maquette"] .corps {
    display: grid; gap: 0 48px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-auto-flow: row dense;
  }
  [data-vue="maquette"] .corps > * { grid-column: 1; }
  [data-vue="maquette"] .ajouter-page {
    grid-column: 2; grid-row: 1 / span 99;
    position: sticky; top: 110px;
    margin-top: 0; padding: 20px 22px; border: 1px solid var(--ink);
  }

  [data-vue="couverture"] .corps {
    display: grid; gap: 0 48px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-auto-flow: row dense;
  }
  [data-vue="couverture"] .corps > * { grid-column: 2; }
  [data-vue="couverture"] .corps > .bloc:first-of-type {
    grid-column: 1; grid-row: 1 / span 99;
    position: sticky; top: 110px;
  }

  /* 06 · NOUVEAU LIVRE, la couverture entre en scène.
   *
   * Une troisième colonne, et l'aperçu dedans : on voit le titre qu'on tape
   * prendre la forme du livre. Il attend 1180 px parce qu'à 900, la prendre
   * reviendrait à écraser les deux colonnes du formulaire pour montrer un
   * rectangle. */
  [data-vue="nouveau"] .corps {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 400px;
  }
  .champ-livre.champ-large { grid-column: 1 / 3; }
  [data-vue="nouveau"] .corps > .encart,
  [data-vue="nouveau"] .corps > section:not(.champ-livre) { grid-column: 1 / 3; }

  .apercu-livre {
    display: block; grid-column: 3; grid-row: 1 / span 99;
    position: sticky; top: 110px; margin: 0;
  }
  .apercu-livre .surtitre { color: var(--ink); }
  /* La planche est un bouton depuis qu'elle mène au moteur : sans largeur
     imposée, elle se rétracterait sur la vignette et le fond gris cesserait
     de tenir la colonne. */
  .apercu-planche {
    margin-top: 14px; padding: 34px; background: var(--grey-50);
    display: flex; justify-content: center;
    width: 100%; box-sizing: border-box; text-align: inherit;
  }
  /* La vignette du formulaire est plus grande que celle des listes : c'est
     l'objet qu'on compose, pas un repère dans une rangée. */
  .couverture-apercu {
    width: 200px; height: auto; flex: none; padding: 0;
  }
  .apercu-livre .sous { margin-top: 16px; }
}

/* ==========================================================================
 * COMMENCER SANS COMPTE, l'ecran large
 * ========================================================================== */

@media (min-width: 900px) {
  /* Le bandeau tient sur une ligne : la phrase a gauche, le geste a droite.
     Empile, il poussait la liste des livres sous la ligne de flottaison. */
  .bandeau-invite {
    display: grid; align-items: center; gap: 8px 32px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .bandeau-invite .surtitre { grid-column: 1; }
  .bandeau-invite .sous { grid-column: 1; max-width: 62em; }
  .bandeau-invite .b {
    grid-column: 2; grid-row: 1 / span 2;
    width: auto; margin-top: 0; padding: 16px 24px;
  }
  [data-vue="garder"] .corps { max-width: 560px; }
}

/* ==========================================================================
 * 18 quater · LA COUVERTURE, l'ecran large
 * Maquette « Anaela Couverture Bureau ». Le balisage est celui du telephone :
 * ce fichier ne fait que le recomposer.
 *
 * DEUX COLONNES, ET CE QUI LES SEPARE
 *
 * A gauche, l'apercu sur son aplat gris : c'est l'objet qu'on regarde, il ne
 * doit jamais quitter l'ecran, donc il reste collant. A droite, tout ce qui se
 * regle, les six propositions, les onglets, le panneau. La colonne de droite
 * fait 560 px, celle de la maquette, et le reste va a l'apercu.
 *
 * `display: contents` DEFAIT LE PAQUET COLLANT DU TELEPHONE. Sur un ecran
 * etroit, l'apercu et les onglets sont dans un meme bloc pour se coller
 * ensemble sous l'en-tete. Ici ils doivent aller dans deux colonnes
 * differentes : le conteneur s'efface, et ses deux enfants deviennent des
 * cases de la grille. Sans cela, `grid-column` sur un petit-fils ne fait rien
 *, et les onglets restaient sous l'apercu, dans la mauvaise colonne.
 * ========================================================================== */

@media (min-width: 900px) {

  [data-vue="couverture"] .corps-couverture {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 560px;
    align-items: start;
    max-width: none;
    padding: 0;
  }

  [data-vue="couverture"] .cv-collant { display: contents; }

  /* L'apercu prend la premiere colonne, et il la prend ENTIEREMENT : l'aplat
     gris va d'un bord a l'autre. Une carte posee au milieu du gris ferait un
     objet de plus a regarder a cote de la couverture. */
  [data-vue="couverture"] .cv-scene {
    grid-column: 1; grid-row: 1 / span 3;
    position: sticky; top: 0;
    background: var(--champ);
    border-right: 1px solid var(--bord);
    padding: 40px 48px 60px;
    align-self: stretch;
  }
  [data-vue="couverture"] .cv-legende-apercu { display: block; }
  [data-vue="couverture"] .cv-cadre {
    background: transparent; padding: 0; margin-top: 24px;
    height: calc(var(--cv-h) * 1px);
  }
  [data-vue="couverture"] .cv-zoom { transform: none; }

  /* Sous l'apercu : les mesures, puis les avertissements. Sur un telephone les
     mesures sont dans « Reglages », il n'y a pas la place. Ici il y a la
     place, et savoir a quel corps le titre est tombe evite d'ouvrir un
     panneau pour le lire. */
  [data-vue="couverture"] .cv-mesures-apercu {
    display: flex; justify-content: center; margin-top: 26px;
  }
  [data-vue="couverture"] .cv-mesures-reglages { display: none; }
  [data-vue="couverture"] .cv-alertes {
    max-width: 560px; margin-left: auto; margin-right: auto;
  }
  [data-vue="couverture"] .cv-alertes:not(:empty) { margin-top: 24px; }
  [data-vue="couverture"] .cv-alerte { background: var(--g0); padding: 13px 16px; }
  [data-vue="couverture"] .cv-alerte > span { font-size: 14px; line-height: 1.55; }

  /* Les six propositions ouvrent la colonne de droite, en trois par ligne.
     Le rail qui defile est une reponse a une colonne de 390 px ; sur 560, la
     grille les montre toutes les six d'un coup, et c'est tout l'interet. */
  [data-vue="couverture"] .cv-propositions {
    grid-column: 2; grid-row: 1; padding: 34px 36px 0;
  }
  [data-vue="couverture"] .cv-propositions .cv-legende-ligne { padding: 0; }
  [data-vue="couverture"] .cv-rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin-top: 14px; padding: 0; overflow: visible;
  }
  [data-vue="couverture"] .cv-vignette { border-color: transparent; }
  [data-vue="couverture"] .cv-vignette.choisie { border-color: var(--encre); }

  [data-vue="couverture"] .cv-onglets {
    grid-column: 2; grid-row: 2; margin: 26px 36px 0;
  }
  [data-vue="couverture"] .cv-onglets button {
    padding: 12px 4px; font-size: 14px; letter-spacing: .12em;
  }

  [data-vue="couverture"] .cv-panneaux { grid-column: 2; grid-row: 3; }
  [data-vue="couverture"] .cv-panneau { padding: 22px 36px 0; }
  [data-vue="couverture"] .cv-champ-titre { font-size: 22px; }

  /* Le repere de fabrication, a droite de l'en-tete. La maquette le pose la
     parce qu'on compose UNE face et qu'on en imprime trois. */
  [data-vue="couverture"] .cv-faces {
    display: inline-block; font-family: var(--font-text); font-weight: 400;
    font-size: 14px; line-height: 1.35; letter-spacing: .18em;
    text-transform: uppercase; color: var(--discret);
  }

  [data-vue="couverture"] .barre-action { max-width: 560px; margin-left: auto; }
}

/* Le rail des propositions ne passe en grille qu'a partir de 1180 px : sur
   900, trois vignettes cote a cote dans 560 px de colonne moins les marges
   font des couvertures de 90 px de large, ou l'on ne distingue plus le titre.
   En dessous, il defile, comme sur un telephone. */
@media (min-width: 900px) and (max-width: 1179px) {
  [data-vue="couverture"] .corps-couverture {
    grid-template-columns: minmax(0, 1fr) 440px;
  }
  [data-vue="couverture"] .cv-rail {
    display: flex; overflow-x: auto; padding-bottom: 4px;
  }
  [data-vue="couverture"] .cv-scene { padding: 32px 32px 48px; }
  [data-vue="couverture"] .cv-propositions { padding: 28px 24px 0; }
  [data-vue="couverture"] .cv-panneau { padding: 20px 24px 0; }
  [data-vue="couverture"] .cv-onglets { margin: 22px 24px 0; }
}

/* ==========================================================================
 * L'ÉDITEUR BUREAU N'A PAS D'ONGLETS
 * Maquette « Anaela Éditeur Bureau ».
 *
 * C'est l'écart le plus profond entre les deux maquettes, et il ne se règle
 * pas en largeur. Sur un téléphone, la recette se relit en quatre temps :
 * titre, ingrédients, étapes, photo. Sur un écran large, la maquette les pose
 * TOUS sur une page, en deux colonnes, avec la photo et l'aperçu de la page
 * imprimée dans un rail de 470 px à droite. On voit la page pendant qu'on
 * écrit dedans, c'est tout l'intérêt d'un grand écran.
 *
 * `display: contents` efface les quatre `.temps` : leurs blocs redeviennent
 * des cases de la grille, à plat. L'ordre du document reste celui du
 * téléphone, y toucher casserait le découpage en temps, et `order` le
 * rejoue ici dans celui de la maquette bureau.
 * ========================================================================== */

@media (min-width: 900px) {
  [data-vue="recette"] .corps-recette {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-recette, 470px);
    align-items: start;
    max-width: none;
    padding: 0;
    column-gap: 0;
  }

  /* Les quatre temps s'effacent : tous leurs blocs sont là, ensemble.
   *
   * Le sélecteur reprend la forme de celui du téléphone, `[data-rang]` et
   * `[data-temps]` compris, parce qu'il faut peser autant que lui. Écrit plus
   * court, il perdait sur le SEUL temps que le téléphone affiche : celui-là
   * restait un bloc, ses champs n'étaient pas des cases de la grille, et le
   * titre passait sous le sous-titre au lieu d'être à côté. */
  [data-vue="recette"] .corps-recette[data-rang] .temps[data-temps] {
    display: contents;
  }
  [data-vue="recette"] .onglets-recette { display: none; }

  /* La maquette bureau n'a pas de pied : l'action est en haut, à droite du
     titre, et « Étape 2 / 4 » n'a plus de sens sans onglets. */
  [data-vue="recette"] .pied-recette { display: none; }
  [data-vue="recette"] .recette-tete { display: flex; }

  [data-vue="recette"] .recette-gauche {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    align-items: start;
    padding: 34px 44px 60px;
  }

  /* L'ordre de la maquette : titre et sous-titre côte à côte, l'accroche en
     travers, puis portions et attribution, puis les deux listes. */
  [data-vue="recette"] [data-bloc="titre"] { order: 1; }
  [data-vue="recette"] [data-bloc="sous_titre"] { order: 2; }
  [data-vue="recette"] [data-bloc="accroche"] { order: 3; grid-column: 1 / -1; }
  [data-vue="recette"] [data-bloc="portions"] { order: 4; }
  [data-vue="recette"] [data-bloc="attribution"] { order: 5; }
  [data-vue="recette"] [data-bloc="ingredients"] { order: 6; }
  [data-vue="recette"] [data-bloc="etapes"] { order: 7; }
  /* L'action destructrice reste en dernier, sur toute la largeur : c'est là
     qu'on ne la rencontre pas par accident. */
  [data-vue="recette"] [data-bloc="supprimer"] { order: 8; grid-column: 1 / -1; }

  /* Les listes reprennent leur colonne : deux colonnes de journal dans une
     colonne de grille laisseraient des trous dès qu'une ligne porte un
     panneau de décision, mesuré, la page en gardait un de 270 px. */
  [data-vue="recette"] [data-bloc="ingredients"] .liste-edit,
  [data-vue="recette"] [data-bloc="etapes"] .liste-edit {
    display: flex; columns: auto;
  }
  [data-vue="recette"] .corps-recette > [data-bloc],
  [data-vue="recette"] .recette-gauche > * { max-width: none; }

  /* ---------- le rail : la photo, puis la page ---------- */
  [data-vue="recette"] .recette-rail {
    grid-column: 2;
    border-left: 1px solid var(--bord);
    background: var(--champ);
    padding: 34px 36px 60px;
    align-self: stretch;
    position: sticky; top: 0;
    max-height: 100vh; overflow-y: auto;
  }
  [data-vue="recette"] .corps-recette .rail-titre {
    display: block; font-family: var(--font-text); font-weight: 400;
    font-size: 14px; line-height: 1.35; letter-spacing: .16em;
    text-transform: uppercase; color: var(--encre);
  }
  [data-vue="recette"] .recette-rail .pan-recette { padding-top: 12px; }
  [data-vue="recette"] .rail-page { display: block; margin-top: 26px; }
  [data-vue="recette"] .rail-note {
    margin: 12px 0 0; font-family: var(--font-text); font-weight: 400;
    font-size: 14px; line-height: 1.35; letter-spacing: .14em;
    text-transform: uppercase; color: var(--discret);
  }

  /* L'esquisse de la page imprimée. Elle n'est PAS l'aperçu : celui-là est un
     PDF mesuré au centième, derrière « Aperçu ». Celle-ci suit la frappe. */
  .page-esquisse {
    margin-top: 14px; background: var(--g0); border: 1px solid var(--bord);
    padding: 30px 28px; min-height: 520px;
  }
  .esquisse-chapitre { font-family: var(--font-text); font-weight: 400;
    font-size: 14px; line-height: 1.35; letter-spacing: .2em;
    text-transform: uppercase; color: var(--discret); }
  .esquisse-titre { margin-top: 16px; font-family: var(--font-display);
    font-weight: 400; font-size: 30px; line-height: 1.05;
    text-transform: uppercase; color: var(--encre); }
  .esquisse-sous-titre { margin-top: 12px; font-family: var(--font-text);
    font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: .14em;
    text-transform: uppercase; color: var(--texte); }
  .esquisse-filet { margin-top: 18px; height: 1px; background: var(--bord); }
  .esquisse-accroche { margin: 18px 0 0; font-family: var(--font-text);
    font-weight: 300; font-size: 14px; line-height: 1.75; color: var(--texte); }
  .esquisse-deux { display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 22px; margin-top: 24px; }
  .esquisse-libelle { font-family: var(--font-text); font-weight: 400;
    font-size: 14px; line-height: 1.35; letter-spacing: .16em;
    text-transform: uppercase; color: var(--encre); }
  .esquisse-liste { margin-top: 10px; display: flex; flex-direction: column;
    gap: 7px; font-family: var(--font-text); font-weight: 300; font-size: 14px;
    line-height: 1.5; color: var(--encre); }
  .esquisse-etape { display: flex; gap: 8px; line-height: 1.6; }
  .esquisse-rang { flex: none; font-weight: 400; font-size: 14px;
    color: var(--discret); }
}

/* Sous 1180 px, le rail coûte plus qu'il ne rend : 470 px pris à une page de
   1000 laissent moins de place au texte que le téléphone. La page du livre
   s'efface alors, et la photo reprend sa place dans la grille, mais les
   quatre temps restent à plat, eux : c'est la composition de la maquette. */
@media (min-width: 900px) and (max-width: 1179px) {
  [data-vue="recette"] .corps-recette { grid-template-columns: minmax(0, 1fr); }
  [data-vue="recette"] .recette-rail {
    grid-column: 1; border-left: 0; background: transparent;
    position: static; max-height: none; padding: 0 32px 40px;
  }
  [data-vue="recette"] .rail-page { display: none; }
  [data-vue="recette"] .recette-gauche { padding: 30px 32px 20px; }
}

@media (min-width: 900px) {
  /* L'en-tête de la maquette bureau : ce qu'on est en train de relire à
     gauche, l'action à droite. Il occupe toute la largeur de la grille, il
     annonce la page, il n'est pas une case parmi les autres. */
  [data-vue="recette"] .recette-tete {
    order: 0; grid-column: 1 / -1;
    align-items: flex-end; justify-content: flex-end; gap: 24px;
  }
  .recette-tete-place {
    font-family: var(--font-text); font-weight: 400; font-size: 14px;
    line-height: 1.35; letter-spacing: .18em; text-transform: uppercase;
    color: var(--discret);
  }
  [data-vue="recette"] .recette-tete .b { flex: none; padding: 14px 18px; }
}

/* ==========================================================================
   19 · LA CAISSE, « Anaela Checkout Bureau »

   La maquette est à 1440 px et n'occupe pas les 1440 : elle pose une colonne
   de 760 px au milieu du blanc, et rien d'autre. C'est une caisse, on n'y
   compare pas, on n'y navigue pas, on lit une suite de sections et on paie.
   Étaler cette suite sur la largeur de l'écran, comme le font les autres vues,
   donnerait des lignes de récapitulatif d'un mètre de long avec le libellé à
   un bout et le montant à l'autre.

   Cette feuille ne fait donc que deux choses : elle POSE LA COLONNE, et elle
   rend aux corps leurs cotes de maquette, 52 px de titre, 17 px de chapô,
   18 px de nom d'article, 40 px de total. La structure, elle, est déjà celle
   du téléphone : c'est la même page, à deux largeurs.
   ========================================================================== */

@media (min-width: 900px) {

  /* ---------- l'en-tête du tunnel ---------- */
  /* 76 px de haut, la marge de la page, la marque à 21 px. La sortie garde son
     libellé complet, c'est la seule porte de l'écran. */
  .tete.tunnel, .tete.tunnel.compacte {
    padding: 0 var(--marge-bureau); min-height: 76px; display: flex;
    align-items: center;
  }
  .tete.tunnel .tete-ligne { flex: 1; flex-wrap: nowrap; gap: 26px; }
  .tete.tunnel .marque { font-size: 21px; }
  .tete.tunnel .tete-point { display: block; }
  .tete.tunnel .tete-etape { order: 0; flex: 0 1 auto; font-size: 14px; }
  .vt-sortie { font-size: 14px; }

  /* ---------- la colonne ---------- */
  .vt-corps { max-width: 760px; margin: 0 auto; padding: 0 40px 60px; }

  /* ---------- l'ouverture ---------- */
  .vt-ouverture { padding: 80px 0 48px; }
  .vt-titre { font-size: clamp(38px, 3.6vw, 52px); margin-top: 22px; }
  .vt-lead { margin-top: 22px; font-size: 17px; }

  /* ---------- ce qui empêche ---------- */
  .vt-avis { margin-top: 32px; padding: 22px 24px 24px; }
  .vt-avis-texte { font-size: 16px; }
  .vt-bloquante { gap: 16px; margin-top: 14px; padding-top: 14px; }
  .vt-bloquante-nom { font-size: 16px; }

  /* ---------- l'article ---------- */
  /* 128 px de vignette et 32 px de gouttière : les cotes de la maquette. La
     hauteur suit, la face porte sa propre proportion de livre. */
  .vt-article { gap: 32px; padding: 48px 0 0; }
  .vt-vignette { width: 128px; }
  .vt-article-nom { font-size: 18px; }
  .vt-article-texte { margin-top: 10px; font-size: 16px; line-height: 1.7; }
  .vt-prix { margin-top: 18px; gap: 12px; }
  .vt-prix-valeur { font-size: 26px; }
  .vt-lien { margin-top: 18px; }

  /* ---------- le compteur d'exemplaires ---------- */
  .vt-compteur { gap: 32px; margin-top: 32px; padding: 22px 24px; }
  .vt-remise { font-size: 16px; }
  .vt-compteur-sous { font-size: 16px; }
  .vt-pas-b { width: 46px; height: 46px; }
  .vt-pas-valeur { width: 48px; font-size: 19px; }

  /* ---------- l'adresse ---------- */
  .vt-formulaire { gap: 18px; margin-top: 20px; }
  .vt-saisie { margin-top: 9px; padding: 14px 15px; font-size: 16px; }

  /* ---------- le délai annoncé ---------- */
  .vt-delai { margin-top: 20px; }
  .vt-delai p { font-size: 16px; }

  /* ---------- les sections ---------- */
  .vt-section { margin-top: 56px; padding-top: 44px; }
  .vt-lignes { margin-top: 18px; }
  .vt-ligne { padding: 15px 0; gap: 20px; }
  .vt-ligne-nom, .vt-ligne-valeur { font-size: 16px; }
  .vt-total { padding-top: 22px; gap: 20px; }
  .vt-total-valeur { font-size: 40px; }
  .vt-note { margin-top: 16px; font-size: 14px; line-height: 1.6; }

  /* ---------- les accords ---------- */
  .vt-accords { gap: 18px; margin-top: 20px; padding: 26px 28px; }
  .vt-accord { gap: 12px; font-size: 16px; }

  /* ---------- « c'est parti » ---------- */
  .vt-fait { padding-top: 120px; }
  .vt-fait .vt-titre { margin-top: 28px; }
  .vt-recu { margin-top: 48px; }

  /* ---------- l'action ---------- */
  /* Elle reste collée en bas, c'est la loi de l'application, mais elle se
     range sur la colonne, pas sur la page : un « Payer 49 € » au bord gauche
     d'un écran de 1440 px n'est plus au bout de ce qu'on vient de lire. */
  [data-vue="vente"] .barre-action {
    padding-inline: max(40px, (100% - 760px) / 2 + 40px);
  }
}

/* ==========================================================================
   22 · MON COMPTE, « Anaela Compte Bureau »

   Ici le rail se déplie. C'est toute la différence : la maquette pose 216 px
   de sommaire collé au défilement, 64 px de gouttière, et les sections à
   droite. Le reste, les titres, les filets, les lignes, est déjà en place
   dans `style.css` ; cette feuille leur rend leurs cotes de maquette et
   remet les grilles que le téléphone avait repliées : l'identité sur deux
   colonnes, les commandes sur cinq, les fichiers sur deux cartes.
   ========================================================================== */

@media (min-width: 900px) {

  .cp-corps { padding: 38px var(--marge-bureau) 96px; }

  /* ---------- l'en-tête ---------- */
  /* De la place : le nom reprend sa ligne, à côté de la marque, aligné sur sa
     base, c'est la composition de la maquette. */
  .tete.avec-qui .tete-ligne { flex-wrap: nowrap; align-items: baseline; }
  .tete.avec-qui .marque { line-height: 1; }
  .tete.avec-qui .avatar, .tete.avec-qui .pilule { align-self: center; }
  .tete-qui { order: 0; flex: 0 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; letter-spacing: .18em; }

  /* ---------- l'ouverture ---------- */
  .cp-ouverture { padding-top: 0; }
  .cp-ouverture h1 { font-size: 40px; }
  .cp-lead { font-size: 16px; }

  .cp-grille { margin-top: 40px; }

  /* ---------- les sections ---------- */
  .cp-section { margin-top: 72px; scroll-margin-top: 120px; }
  .cp-section:first-child { margin-top: 0; }
  .cp-tete { padding-bottom: 16px; gap: 24px; }
  .cp-tete h2 { font-size: 26px; }
  .cp-note { font-size: 16px; }

  /* ---------- l'identité ---------- */
  .cp-paire { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .cp-champ { padding: 20px 0; }
  .cp-champ-valeur { margin-top: 9px; font-size: 16px; }

  .cp-ligne { padding: 18px 0; }
  .cp-ligne-nom { font-size: 16px; }
  .cp-ligne-valeur { font-size: 16px; }

  /* ---------- les commandes ---------- */
  .cp-commande { padding: 20px 0; }
  .cp-cmd-date { font-size: 14px; }
  .cp-cmd-titre { font-size: 16px; }
  .cp-cmd-detail { margin-top: 6px; font-size: 14px; }

  /* ---------- les fichiers ---------- */
  .cp-fichiers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
    margin-top: 24px; }
  .cp-fichier { gap: 20px; padding: 22px; }
  .cp-vignette { width: 60px; }
  .cp-fichier-titre { font-size: 17px; }
  .cp-fichier-meta { font-size: 14px; }
  .cp-fichier-liens { margin-top: 14px; gap: 16px; }

  /* ---------- les chiffres ---------- */
  .cp-chiffres { gap: 20px 44px; margin-top: 22px; }
  .cp-chiffres b { font-size: 26px; }

  .cp-tache { margin-top: 16px; }
  .cp-tache-ligne { font-size: 16px; }

  /* ---------- le pavé noir ---------- */
  .cp-section-donnees { margin-top: 72px; }
  .cp-pave { display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 40px; padding: 34px 36px; }
  .cp-pave-mots { min-width: 0; }
  .cp-pave h2 { font-size: 26px; }
  .cp-pave-texte { font-size: 16px; }
  .cp-pave-actions { flex: none; margin-top: 0; gap: 12px; }
  .cp-pave-b { padding: 16px 24px; }

  /* Le compte n'a pas de barre d'action : sa page est une suite de réglages,
     et aucun d'eux n'est « l'action de l'écran ». La sortie est « Mes livres »,
     dans l'en-tête, là où la maquette la met. */
  [data-vue="compte"] .corps { padding-bottom: 96px; }
}

/* ==========================================================================
   22 bis · MON COMPTE, ce qui attend 1180 px

   Le rail et la ligne de commande à cinq colonnes coûtent la même chose : de
   la largeur, et beaucoup. Le rail prend 216 px plus 64 de gouttière ; la
   ligne de commande demande 570 px rien qu'en colonnes fixes, date, état,
   montant, sortie, avant que le titre du livre en ait une seule. Sur un
   écran de 960, le titre tombait à quatorze pixels et « Tome 2 » descendait
   en colonne, une lettre par ligne.

   Ils attendent donc la seconde bascule, comme les autres rails du fichier.
   Entre 900 et 1180, le compte reste la page du téléphone à la typographie
   de la maquette : une colonne, et les commandes en trois rangs.
   ========================================================================== */

@media (min-width: 1180px) {

  /* Collé sous l'en-tête, pas en haut de l'écran : l'en-tête est collante
     elle aussi, et un rail calé à 0 passerait dessous. */
  .cp-grille { grid-template-columns: 216px minmax(0, 1fr); gap: 64px;
    margin-top: 48px; }
  .cp-rail { order: 0; position: sticky; top: 96px; align-self: start;
    margin-top: 0; border-top: 1px solid var(--encre); }
  .cp-liens { display: block; }
  .cp-liens a { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--bord);
    font-family: var(--font-text); font-weight: 400; font-size: 14px;
    line-height: 1.35; letter-spacing: var(--label-cta-track);
    text-transform: uppercase; color: var(--libelle); text-decoration: none; }
  /* Un libellé de rubrique tient sur deux lignes plutôt que de passer sous son
     compte : « Ce qui a été dépensé » en capitales espacées ne rentre pas dans
     216 px, et un compte recouvert ne se lit plus. */
  .cp-liens a > span:first-child { min-width: 0; }
  .cp-liens a:hover, .cp-liens a:focus { color: var(--ink); }
  .cp-lien-compte { flex: none; font-weight: 300; font-size: 14px;
    letter-spacing: .04em; text-transform: none; color: var(--desactive); }
  .cp-panneaux { order: 0; }
  .cp-deconnexion { margin-top: 26px; padding: 0; border: 0; text-align: left;
    color: var(--discret); }

  /* Une ligne, cinq colonnes : date, livre, état, montant, sortie. Les rangs
     du téléphone se défont, `grid-area` y posait des rangs explicites, on les
     remet tous sur le premier. */
  .cp-commande { grid-template-columns: 104px minmax(0, 1fr) 190px 92px 88px;
    align-items: center; gap: 24px; }
  .cp-cmd-date { grid-area: 1 / 1 / 2 / 2; }
  .cp-cmd-livre { grid-area: 1 / 2 / 2 / 3; }
  .cp-cmd-etat { grid-area: 1 / 3 / 2 / 4; }
  .cp-cmd-montant { grid-area: 1 / 4 / 2 / 5; font-size: 16px; }
  .cp-cmd-action { grid-area: 1 / 5 / 2 / 6; }
}