/* Aurore — feuille de style du site public.
   Même parti pris que l'application : papier crème, encre chaude, une seule
   couleur d'accent, et beaucoup d'espace. */

/* Les trois couleurs de tête viennent de l'identité livrée avec le logo :
   l'encre, le papier, et le rouge du soleil levant. */
:root {
  --paper: #f3f2f2;
  --card: #ffffff;
  --ink: #201e1d;
  --ink-muted: #6b6663;
  --rule: #dcd9d7;
  --glow: #ec3013;
  --glow-soft: #fde7e2;
  /* Deux largeurs, et non une.

     `--column` est une mesure de lecture : au-delà d'une soixantaine de
     caractères par ligne, l'œil perd la ligne suivante. Elle vaut pour les
     paragraphes, et pour eux seuls.

     `--page` est la largeur de la page. Tout ce qui n'est pas un paragraphe —
     les grilles de fonctions, la démonstration — y respire au lieu d'être
     serré dans une colonne qui ne lui servait à rien. */
  --column: 46rem;
  /* Assez large pour quatre colonnes de fonctions : quatre fois dix-sept rem,
     plus trois gouttières, plus les marges. En dessous, la grille retombe
     d'elle-même à trois, puis deux, puis une. */
  --page: 80rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111011;
    --card: #1b1a1b;
    --ink: #f3f2f2;
    --ink-muted: #a09a97;
    --rule: #33302f;
    /* Le rouge est éclairci : à luminance égale il perd du contraste sur fond noir. */
    --glow: #f75437;
    --glow-soft: #2e1712;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--glow); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-style: solid; }

/* En-tête ---------------------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Le signe n'a qu'un fichier pour les deux thèmes : le A est évidé, donc le
   fond de la page le traverse, et le trait de sol suit `currentColor`. */
.wordmark .mark {
  width: 1.15em;
  height: 1.15em;
  align-self: center;
  color: var(--ink);
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.875rem;
}

.masthead nav a { color: var(--ink-muted); text-decoration: none; }
.masthead nav a:hover { color: var(--glow); }

/* Contenu ---------------------------------------------------------------- */

main { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }

/* Les paragraphes gardent leur mesure de lecture, où qu'ils soient. */
.hero .lead, .quiet p, .demo-head .lead, .demo-note { max-width: var(--column); }
.hero h1 { max-width: 20ch; }

.eyebrow {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
}

h1 {
  font-size: clamp(2.1rem, 6vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  font-weight: 600;
}

h2 {
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.lead { font-size: 1.15rem; color: var(--ink-muted); margin: 0 0 1.5rem; }

.hero { padding: 3rem 0 4rem; }

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.cta-lien {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--card);
  background: var(--glow);
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
}

.cta-lien:hover { text-decoration: none; }

.badge {
  display: inline-block;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.8125rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--glow-soft);
  color: var(--glow);
}

.features {
  display: grid;
  gap: 2.5rem;
  /* Quatre colonnes sur un grand écran, et le compte descend seul avec la
     largeur. Dix-sept rem est le plancher : en dessous, un paragraphe de
     quatre lignes en fait sept. */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem 2.25rem;
  padding: 3rem 0;
  border-top: 1px solid var(--rule);
}

.features p { margin: 0; color: var(--ink-muted); }

.quiet {
  padding: 3rem 0 5rem;
  border-top: 1px solid var(--rule);
}
.quiet p { color: var(--ink-muted); margin: 0; }

.page { padding: 2rem 0 4rem; }
.page ul { color: var(--ink-muted); padding-left: 1.2rem; }
.page li { margin-bottom: 0.4rem; }
.page h2 { margin-top: 2.25rem; }

/* Formulaire ------------------------------------------------------------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.9375rem;
  max-width: 34rem;
}

.form label { display: flex; flex-direction: column; gap: 0.4rem; color: var(--ink-muted); }
.form .row { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.form .row label { flex: 1 1 12rem; }
.form .hint { font-size: 0.8125rem; opacity: 0.75; }

.form input, .form select, .form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 1px;
}

.form button {
  align-self: flex-start;
  font: inherit;
  font-weight: 600;
  color: var(--card);
  background: var(--glow);
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
}

.notice {
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.9375rem;
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  border: 1px solid var(--rule);
  background: var(--card);
}
.notice--ok { border-color: var(--glow); color: var(--glow); }
.notice--error { border-color: #c05a4a; color: #c05a4a; }

/* Pied de page ----------------------------------------------------------- */

footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  border-top: 1px solid var(--rule);
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
footer p { margin: 0 0 0.35rem; }
footer .mark { width: 1.6rem; height: 1.6rem; color: var(--ink-muted); margin-bottom: 0.6rem; }
.muted { opacity: 0.85; }

/* Démonstration ---------------------------------------------------------- */

/* Un conteneur, pour que la feuille de style mesure la fenêtre comme le
   script : la largeur d'écran compte la barre de défilement et les marges,
   et les deux seuils ne tombaient pas au même pixel. */
.demo { padding: 0 0 4rem; container: demo / inline-size; }
.demo-head { margin-bottom: 2.25rem; }

/* La fenêtre d'Aurore sur Mac.

   Ses couleurs ne sont pas celles du site : ce sont celles de l'app, relevées
   dans `AuroreColor` et `ReadingStyle` pour le thème « Papier » et l'accent
   « Aurore », ceux qu'on trouve en ouvrant l'app pour la première fois.
   L'accent n'est donc pas le rouge du logo mais sa version assombrie, plus
   lisible en petit, et `glowSoft` est le mélange OKLab que fait SwiftUI.

   Un point Mac vaut un pixel CSS : toutes les mesures sont celles du code. */
.mac {
  --paper: #f3f2f2;
  --card: #ffffff;
  --ink: #201e1d;
  --ink-muted: #6b6663;
  --rule: #dcd9d7;
  --glow: #c42810;
  --glow-soft: #fbe3de;
  --glow-22: rgb(196 40 16 / 0.22);
  --glow-35: rgb(196 40 16 / 0.35);
  --contour: rgb(220 217 215 / 0.6);
  /* `.thinMaterial` n'a pas de valeur : un verre qui prend la teinte de ce
     qui passe dessous. Ce voile et ce flou en donnent l'effet. */
  --pill: rgb(246 245 245 / 0.72);
  --menu: rgb(246 245 245 / 0.88);
  /* Ce que dessine le système autour de l'app : la colonne sous son voile,
     la barre de titre et son filet, le bouton de repli. Mesurés au pixel. */
  --colonne: #eeedec;
  --barre-titre: #fffefd;
  --barre-titre-filet: #e1e2e3;
  --titre: #262525;
  --rond: #f7f6f5;
  --rond-encre: #5f5e5d;
  --plaque-s: 26%;
  --plaque-l1: 82%;
  --plaque-l2: 70%;
  --ombre: 0 0 0 1px rgb(0 0 0 / 0.1), 0 24px 70px rgb(0 0 0 / 0.18), 0 6px 18px rgb(0 0 0 / 0.08);

  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --colonne-largeur: 208px;

  position: relative;
  display: flex;
  height: clamp(600px, 84vh, 820px);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ombre);
  font-family: var(--sans);
  font-size: 15px;
  line-height: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  .mac {
    --paper: #111011;
    --card: #1b1a1b;
    --ink: #f3f2f2;
    --ink-muted: #a09a97;
    --rule: #33302f;
    --glow: #f37f6d;
    --glow-soft: #352726;
    --glow-22: rgb(243 127 109 / 0.22);
    --glow-35: rgb(243 127 109 / 0.35);
    --contour: rgb(51 48 47 / 0.6);
    --pill: rgb(40 39 39 / 0.72);
    --menu: rgb(40 39 39 / 0.9);
    --colonne: #191718;
    --barre-titre: #2b2a29;
    --barre-titre-filet: #222122;
    --titre: #e9e9e9;
    --rond: #393737;
    --rond-encre: #ffffff;
    --plaque-s: 18%;
    --plaque-l1: 30%;
    --plaque-l2: 21%;
    --ombre: 0 0 0 1px rgb(255 255 255 / 0.12), 0 24px 70px rgb(0 0 0 / 0.55);
  }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Les pictogrammes, au trait, teintés par le bouton qui les porte.
   `:where` garde ces règles de fond au plus bas : chaque composant les
   précise sans avoir à surenchérir. */
:where(.mac) .ic {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(.mac) button { font: inherit; color: inherit; }
.mac button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
:where(.mac) p { margin: 0; }

/* La colonne ---------------------------------------------------------------- */

.mac-colonne {
  position: relative;
  flex: 0 0 var(--colonne-largeur);
  display: flex;
  flex-direction: column;
  /* La première rangée commence sous la barre de titre, 52 + 12. */
  padding: 64px 12px 12px;
  background: var(--colonne);
  overflow: hidden;
  /* La visibilité tombe à la fin du glissement, pas au début : la colonne
     se voit partir, puis ne se laisse plus atteindre au clavier. */
  transition: margin-left 0.25s ease, visibility 0s linear 0.25s;
}

.mac[data-colonne="repliee"] .mac-colonne {
  margin-left: calc(-1 * var(--colonne-largeur));
  visibility: hidden;
}
.mac:not([data-colonne="repliee"]) .mac-colonne { transition-delay: 0s; }

/* Fenêtre étroite (le seuil du script, 760) : sans script, rien ne
   repliait la colonne, qui mangeait les deux tiers d'un téléphone. Ouverte
   au bouton rond, elle passe par-dessus le détail au lieu de le pincer à
   64 points. */
@container demo (width < 760px) {
  .mac:not([data-colonne]) .mac-colonne { margin-left: calc(-1 * var(--colonne-largeur)); visibility: hidden; }
  .mac:not([data-colonne]) .mac-titre { padding-left: 100px; }
  .mac:not([data-colonne]) .mac-feux--titre { display: flex; }
  .mac-colonne {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--colonne-largeur);
    box-shadow: 8px 0 30px rgb(0 0 0 / 0.18);
  }
  .mac[data-colonne="repliee"] .mac-colonne { box-shadow: none; }
  /* Le détail garde la disposition « colonne repliée » : la colonne passe
     par-dessus, rien ne doit bouger dessous. */
  .mac .mac-titre { padding-left: 100px; }
  .mac .mac-feux--titre { display: flex; }
  .mac .barre-bande { padding-left: 62px; }
  .mac .rond { display: grid; }
}

/* Les transitions n'attendent que le script : au chargement, la mesure des
   conteneurs de taille faisait glisser le titre et clignoter les segments
   pendant la première peinture. */
.mac:not([data-anime]),
.mac:not([data-anime]) * { transition: none !important; }

/* Sans script, les commandes ne feraient rien : on garde leur place, pas
   leur apparence. Le script pose `data-pret` en prenant la main. */
.mac:not([data-pret]) .barre-bande > *,
.mac:not([data-pret]) .mac-replier { visibility: hidden; }
.mac:not([data-pret]) .versions button { pointer-events: none; }

/* Les feux : 14 points, centrés à 26, 49 et 72. */
.mac-feux { position: absolute; top: 19px; left: 19px; display: flex; gap: 9px; }
.mac-feux span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
}
.mac-feux span:nth-child(2) { background: #febc2e; }
.mac-feux span:nth-child(3) { background: #28c840; }

/* Le bouton de repli du système : un cercle de verre de 36, à 8 du bord. */
.mac-replier {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--rond);
  color: var(--rond-encre);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.1);
  cursor: pointer;
}
.mac-replier .ic { width: 20px; height: 20px; stroke-width: 1.5; }

.mac-liste { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2px; }

/* `SidebarRow` : 14 points, 6 × 12 de marge, rayon 8. */
.rangee {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 17px;
  color: var(--ink);
  white-space: nowrap;
}
.rangee .ic { width: 17px; height: 17px; }
.rangee--active { background: var(--glow-soft); color: var(--glow); font-weight: 600; }
.rangee--active .ic { stroke-width: 1.9; }
.rangee-espace { flex: none; height: 12px; }
.rangee--reglages { margin-top: auto; }
.rangee span, .sous-rangee span { overflow: hidden; text-overflow: ellipsis; }

/* `SidebarSubRow` : 13 points, retrait de 20, 3 × 12 de marge, rayon 7. */
.sous-liste { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 2px 20px; }
.sous-rangee {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 3px 12px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 16.5px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.sous-rangee .ic { width: 15px; height: 15px; }
.sous-rangee--active { background: var(--glow-soft); color: var(--glow); font-weight: 600; }

/* Le détail ----------------------------------------------------------------- */

.mac-detail {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  container: detail / inline-size;
}

/* La barre de titre unifiée du système : 52 points, un filet d'un demi. */
.mac-titre {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  height: 52px;
  padding-left: 20px;
  background: var(--barre-titre);
  border-bottom: 0.5px solid var(--barre-titre-filet);
  font-size: 15px;
  font-weight: 700;
  color: var(--titre);
  white-space: nowrap;
  transition: padding-left 0.25s ease;
}
.mac-feux--titre { display: none; }
.mac[data-colonne="repliee"] .mac-titre { padding-left: 100px; }
.mac[data-colonne="repliee"] .mac-feux--titre { display: flex; }

/* La barre d'Aurore -------------------------------------------------------- */

/* Au-dessus du journal comme du magazine, centrée : 12 au-dessus, 6 dessous,
   12 de chaque côté. Colonne repliée, elle laisse 50 au bouton rond. */
.barre-bande {
  position: relative;
  z-index: 5;
  flex: none;
  display: flex;
  justify-content: center;
  padding: 12px 12px 6px;
}
.mac[data-colonne="repliee"] .barre-bande { padding-left: 62px; }

.rond {
  position: absolute;
  top: 12px;
  left: 12px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--contour);
  border-radius: 50%;
  background: var(--pill);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
  color: var(--glow);
  cursor: pointer;
}
.rond .ic { width: 19px; height: 19px; stroke-width: 1.7; }
.mac[data-colonne="repliee"] .rond { display: grid; }

/* `AuroreBar` : contenu de 30, 7 × 20 de marge, soit une capsule de 44. */
.barre {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  padding: 6px 20px;
  border: 1px solid var(--contour);
  border-radius: 999px;
  background: var(--pill);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
  color: var(--glow);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.barre button {
  flex: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.barre .ic { width: 18px; height: 18px; }

.barre-icone { display: grid; place-items: center; height: 30px; padding: 0 2px !important; }
.barre-icone.tourne .ic { animation: tourne 0.7s ease-in-out; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* `BarSeparator` : 1 × 15, l'accent à 35 %, 6 de chaque côté. */
.filet {
  flex: none;
  width: 1px;
  height: 15px;
  margin: 0 6px;
  border-radius: 1px;
  background: var(--glow-35);
}

.presentations { flex: none; display: flex; align-items: center; }

/* Les quatre présentations écrites, la choisie sur l'accent. */
.segments { display: flex; gap: 2px; }
.segments button {
  padding: 5px 12px;
  line-height: 18px;
  transition: background-color 0.18s, color 0.18s;
}
.segments button:hover { background: var(--glow-22); }
.segments button[aria-pressed="true"] { background: var(--glow); color: #fff; font-weight: 600; }

/* Faute de place, la présentation se replie en menu : son nom et un chevron,
   puis le pictogramme seul. */
.presentation-menu { display: none; align-items: center; gap: 2px; height: 30px; padding: 0 4px !important; }
.presentation-choisie { display: none; align-items: center; gap: 8px; }
.presentation-nom { display: none; }
.presentation-menu .chevron { width: 12px; height: 12px; stroke-width: 2.8; opacity: 0.8; margin-left: 3px; }
.mac[data-presentation="journal"] [data-pour="journal"],
.mac[data-presentation="magazine"] [data-pour="magazine"],
.mac[data-presentation="grid"] [data-pour="grid"],
.mac[data-presentation="compact"] [data-pour="compact"] { display: inline-flex; }

.barre:not([data-forme="1"]) .segments { display: none; }
.barre:not([data-forme="1"]) .presentation-menu { display: inline-flex; }
.barre[data-forme="2"] .presentation-nom { display: inline; }

/* Les vues : pictogramme et mot, la choisie sur l'accent, sans survol. */
.vues { flex: none; display: flex; gap: 10px; }
.vues button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px;
  line-height: 18px;
}
.vues .ic { width: 17px; height: 17px; }
.vues button[aria-pressed="true"] { background: var(--glow); color: #fff; font-weight: 600; }
.barre[data-forme="4"] .vues button:not([aria-pressed="true"]) .vue-nom,
.barre[data-forme="5"] .vue-nom { display: none; }

/* Dernier recours : tout en pictogrammes, et la rangée défile sans
   ascenseur plutôt que de passer sur deux lignes. */
.barre[data-forme="5"] { overflow-x: auto; scrollbar-width: none; }
.barre[data-forme="5"]::-webkit-scrollbar { display: none; }

/* Le menu des présentations, à la façon d'un menu du Mac. */
.menu {
  position: absolute;
  top: 60px;
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 5px;
  border-radius: 10px;
  background: var(--menu);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 10px 30px rgb(0 0 0 / 0.2);
}
.menu[hidden] { display: none; }
.menu button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--glow); color: #fff; outline: none; }
.menu .ic { width: 16px; height: 16px; }
.menu .coche { width: 13px; height: 13px; stroke-width: 2.4; visibility: hidden; }
.menu [aria-checked="true"] .coche { visibility: visible; }

/* Le contenu ---------------------------------------------------------------- */

.mac-contenu { position: relative; flex: 1; min-height: 0; }

/* Magazine : une page par sujet, qu'on tourne. Chaque page est un lecteur
   entier, en retrait de 12 : sa carte est repeinte du papier, on ne voit que
   le retrait. */
.magazine { position: absolute; inset: 0; }
.magazine[hidden] { display: none; }

.pages {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pages::-webkit-scrollbar { display: none; }

/* `.feuillet`, et non `.page` : les pages secondaires du site portent déjà
   cette classe, et la règle du magazine leur ôtait leurs marges. */
.feuillet {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  padding: 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.feuillet[hidden] { display: none; }

/* Le lecteur ---------------------------------------------------------------- */

.lecteur {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  container: lecteur / inline-size;
}

/* La rangée fixe du haut : le résumé du journal à gauche, les commandes de
   lecture à droite, en trois familles séparées d'un filet. */
.lecteur-haut {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 32px 6px;
  min-height: 50px;
}

.lecteur-compte {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--glow);
  font-variant-numeric: tabular-nums;
}

.outils { flex: none; display: flex; align-items: center; gap: 16px; margin-left: auto; color: var(--glow); }
.outils .ic { width: 18px; height: 18px; }
.outils .filet { margin: 0 6px; }
.lettre { font-size: 17px; font-weight: 500; line-height: 18px; }
.lettre--petite { font-size: 11px; }
.o-plus { display: none !important; }

/* Le repli de l'app : les deux commandes de tous les jours et un « … »,
   puis le « … » seul. */
@container lecteur (max-width: 899px) {
  .avec-compte .o-plein { display: none; }
  .avec-compte .o-plus { display: block !important; }
}
@container lecteur (max-width: 679px) {
  .o-plein { display: none; }
  .o-plus { display: block !important; }
}
@container lecteur (max-width: 380px) {
  .o-moyen { display: none; }
}

.fermer {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--glow);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* Pas de `overscroll-behavior: contain` ici : il coupait aussi l'axe
   horizontal, et un geste parti du texte ne tournait plus la page ; en bout
   d'article, il retenait aussi le défilement du site. Seule la carte
   par-dessus, qui est modale, garde le geste pour elle. */
.lecteur-texte { flex: 1; min-height: 0; overflow-y: auto; outline: none; border-radius: 8px; }
.lecteur-texte:focus-visible { outline: 2px solid var(--glow-35); outline-offset: -2px; }
.superposition-carte .lecteur-texte { overscroll-behavior-y: contain; }

/* La colonne de lecture : 1080 au plus, marges comprises. Sous le lecteur,
   tout passe en New York, même ce qui est codé en SF : `readingStyle` impose
   le dessin serif à la zone qui défile. */
.lecteur-colonne {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 32px 116px;
  font-family: var(--serif);
}

.lecteur-tete { display: flex; flex-direction: column; gap: 6px; }
.lecteur-date { font-size: 12px; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ink-muted); }
.lecteur-rubrique { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--glow); }
.lecteur-titre { margin: 0; font-size: 30px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--ink); text-wrap: pretty; }
.lecteur-auteur { font-size: 13px; color: var(--ink-muted); }

/* `VersionPicker` : les rédactions qui ont traité le sujet. */
.versions { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 18px; background: var(--card); }
.versions p { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.versions-rangee { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.versions-rangee::-webkit-scrollbar { display: none; }
.versions button {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--glow-soft);
  color: var(--glow);
  font: 500 12px/1.2 var(--serif);
  white-space: nowrap;
  cursor: pointer;
}
.versions button[aria-pressed="true"] { background: var(--glow); color: var(--card); }

.lecteur-paragraphe { font-size: 17px; line-height: 27px; color: var(--ink); }

/* La plaque tient la place de l'image sans en être une. */
.plaque {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 300px;
  border-radius: 8px;
  background: linear-gradient(150deg,
    hsl(var(--teinte) var(--plaque-s) var(--plaque-l1)),
    hsl(calc(var(--teinte) + 40) var(--plaque-s) var(--plaque-l2)));
}

/* `PageBadge` : au milieu, à 20 du bas, des flèches de 38. */
.pastille-page {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px;
  border: 1px solid var(--contour);
  border-radius: 999px;
  background: var(--pill);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.1);
  transform: translateX(-50%);
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pastille-page[hidden] { display: none; }
.pastille-page button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--glow);
  cursor: pointer;
}
.pastille-page .ic { width: 20px; height: 20px; stroke-width: 2.3; }

/* Journal, grille, liste ------------------------------------------------------ */

.journal { position: absolute; inset: 0; display: flex; }
.journal[hidden] { display: none; }

.journal-liste {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0 32px 84px;
}

/* Une colonne de 680 au plus, marges comprises ; 1100 pour la grille. */
.journal-liste > * { max-width: 616px; margin-inline: auto; }
.mac[data-presentation="grid"] .journal-liste > * { max-width: 1036px; }

/* En deux colonnes : la liste à 270, un filet, l'article à droite. */
.mac[data-partage] .journal-liste { flex: 0 0 270px; border-right: 1px solid var(--rule); }
.journal-lecteur { position: relative; flex: 1; min-width: 0; }
.journal-lecteur[hidden] { display: none; }

/* `JournalMasthead` : la date, le signe et le nom, le compte du jour. */
.manchette { display: flex; flex-direction: column; gap: 6px; padding-top: 52px; margin-bottom: 52px; }
.manchette-date { font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-muted); }
.manchette-nom { display: flex; align-items: baseline; gap: 12px; font: 600 40px/1.15 var(--serif); color: var(--ink); }
/* La ligne de base de la marque passe à 92 % de sa hauteur. */
.manchette-marque { flex: none; width: 28px; height: 28px; color: var(--glow); transform: translateY(2.2px); }
.manchette-compte { font-size: 14px; color: var(--glow); font-variant-numeric: tabular-nums; }

.sujets { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.sujets > li[hidden] { display: none; }

.sujet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.22s;
}
/* `CardPress` : 0,98 et 0,92 sous le doigt. */
.sujet:active { transform: scale(0.98); opacity: 0.92; }
.sujet[aria-current="true"] { background: var(--glow-soft); }
/* Dans l'app, la teinte de la sélection passe derrière une carte opaque et
   ne se voit pas ; ici, un liseré dit quel sujet est ouvert à droite, sans se
   confondre avec la une. */
.sujet[aria-current="true"] .carte { box-shadow: inset 0 0 0 2px var(--glow-35); }

/* La une : une pastille au-dessus de la carte, décalée de 12. */
.une {
  display: none;
  align-self: flex-start;
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--glow);
  color: var(--card);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.mac[data-presentation="journal"] li[data-une] .une { display: inline-block; }

/* `ClusterCard`, en densité serrée : la colonne de 270 s'arrondit à 280. */
.carte {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 18px;
  background: var(--card);
}
.mac[data-presentation="journal"] li[data-une] .carte { background: var(--glow-soft); }

.carte-plaque { display: none; }
.carte-rubrique { font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--glow); }
.carte-titre { font: 600 17px/1.2 var(--serif); color: var(--ink); }
.carte-extrait {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: 15px/1.3 var(--serif);
  color: var(--ink-muted);
}
.carte-pied { display: flex; align-items: center; gap: 12px; }
.couverture { display: none; }
.minutes { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--glow); font-variant-numeric: tabular-nums; }
.heure { font-size: 12px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* `SourcePastilles` : une rédaction, un cercle ; ils se chevauchent d'un
   tiers, le premier par-dessus. */
.pastilles { --d: 22px; display: flex; }
.pastilles span {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: var(--glow-soft);
  box-shadow: inset 0 0 0 2px var(--card);
  color: var(--glow);
  font-size: calc(var(--d) * 0.455);
  font-weight: 600;
  line-height: 1;
}
.pastilles span + span { margin-left: calc(var(--d) / -3); }

/* Journal sur une seule colonne : la densité généreuse, avec l'image. */
.mac[data-presentation="journal"]:not([data-partage]) .carte-plaque { display: block; height: 168px; aspect-ratio: auto; max-height: none; }
.mac[data-presentation="journal"]:not([data-partage]) .carte-titre { font-size: 22px; }
.mac[data-presentation="journal"]:not([data-partage]) .carte-extrait { -webkit-line-clamp: 6; }

/* `GridClusterCard` : trois colonnes au plus, de 300 au moins. */
.mac[data-presentation="grid"] .sujets {
  display: grid;
  /* 300 au moins, trois au plus, et jamais plus large que la liste : sur
     un petit téléphone, une colonne de 300 débordait de 48 points. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - 40px) / 3))), 1fr));
  gap: 20px;
}
.mac[data-presentation="grid"] .sujet { height: 100%; }
.mac[data-presentation="grid"] .carte { flex: 1; gap: 6px; min-height: 170px; }
.mac[data-presentation="grid"] .carte-rubrique,
.mac[data-presentation="grid"] .heure { display: none; }
.mac[data-presentation="grid"] .carte-titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.mac[data-presentation="grid"] .carte-extrait { -webkit-line-clamp: 3; }
.mac[data-presentation="grid"] .carte-pied { gap: 6px; margin-top: auto; padding-top: 6px; }
.mac[data-presentation="grid"] .pastilles { --d: 18px; }
.mac[data-presentation="grid"] .couverture { display: inline; font-size: 11px; font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mac[data-presentation="grid"] .minutes { font-size: 11px; }

/* `CompactClusterRow` : une ligne par sujet, pour balayer vite. */
.mac[data-presentation="compact"] .sujets { gap: 6px; }
.mac[data-presentation="compact"] .carte { flex-direction: row; align-items: flex-start; gap: 12px; padding: 12px; background: none; }
.mac[data-presentation="compact"] .carte-pied { display: contents; }
.mac[data-presentation="compact"] .carte-rubrique,
.mac[data-presentation="compact"] .carte-extrait,
.mac[data-presentation="compact"] .couverture { display: none; }
.mac[data-presentation="compact"] .pastilles { --d: 16px; order: -1; margin-top: 2px; }
.mac[data-presentation="compact"] .carte-titre {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
}
.mac[data-presentation="compact"] .minutes,
.mac[data-presentation="compact"] .heure { font-size: 11px; line-height: 19px; }

/* L'article par-dessus ------------------------------------------------------ */

/* `MacReaderOverlay` : le journal flouté derrière, une carte de papier au
   rayon 28, et la lisière qui referme d'un clic. */
.superposition { position: absolute; inset: 52px 0 0; z-index: 10; display: grid; place-items: center; }
.superposition[hidden] { display: none; }
.superposition-voile {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.12);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  cursor: pointer;
}
.superposition-carte {
  position: relative;
  width: min(1240px, calc(100% - 96px));
  height: max(360px, calc(100% - 72px));
  overflow: hidden;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.16), 0 16px 80px rgb(0 0 0 / 0.35);
  outline: none;
}

/* Sur un téléphone ------------------------------------------------------------ */

/* Une fenêtre de Mac ne se réduit pas sous 560 points ; le site, lui, doit
   tenir dans un téléphone. On garde la fenêtre, et on desserre ce que l'app
   n'aurait jamais eu à desserrer. */
@container detail (max-width: 560px) {
  .lecteur-haut { padding-inline: 20px; }
  .lecteur-colonne { padding-inline: 20px; }
  .lecteur-titre { font-size: 25px; }
  .journal-liste { padding-inline: 20px; }
  .superposition-carte { width: calc(100% - 24px); height: calc(100% - 24px); }
}

@media (max-width: 40rem) {
  .mac { height: min(88vh, 720px); min-height: 560px; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .mac *, .mac *::before, .mac *::after { transition: none !important; animation: none !important; }
  .pages, .ecrans .pellicule { scroll-behavior: auto; }
}

/* Réservé aux lecteurs d'écran. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Captures d'écran --------------------------------------------------------- */

.ecrans {
  padding: 3rem 0;
  border-top: 1px solid var(--rule);
}

.ecrans h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 0.75rem; }

.ecrans figcaption {
  margin-top: 0.75rem;
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* La pellicule des captures d'iPhone.

   Huit écrans empilés auraient fait huit écrans de page. Ils défilent donc
   côte à côte, du doigt ou du trackpad, et la pastille dit où l'on en est —
   la même que le feuilletage du magazine. */
.galerie { position: relative; margin-top: 2.5rem; }
.galerie--mac { margin-top: 2rem; }

/* Un intertitre entre les deux pellicules. */
.eyebrow--section { margin: 3rem 0 0; }

.pellicule {
  list-style: none;
  margin: 0;
  padding: 0 0 3.5rem;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.pellicule li {
  flex: 0 0 clamp(11rem, 24vw, 15rem);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* Les écrans de Mac tiennent la largeur : une capture de fenêtre réduite au
   tiers ne montrerait plus rien de ce qu'elle est censée montrer. */
.pellicule--mac li { flex: 0 0 100%; }
.pellicule--mac img { border-radius: 12px; }
.pellicule.pellicule--mac figcaption { text-align: left; min-height: 0; }

.pellicule figure { margin: 0; }

.pellicule img {
  display: block;
  width: 100%;
  height: auto;
  /* Le rayon du téléphone, pas celui d'une carte : la capture porte déjà ses
     coins arrondis, on ne fait que les suivre. */
  border-radius: 22px;
  border: 1px solid var(--rule);
}

.pellicule figcaption {
  text-align: center;
  min-height: 3em;
}

/* La pastille de la pellicule : celle du feuilletage de l'app, au milieu en
   bas, portant le rang de la capture. */
.pagination {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
  font-family: ui-sans-serif, -apple-system, system-ui, sans-serif;
  font-size: 0.875rem;
  /* Posée à 50 % puis recentrée, elle ne prend que la moitié de la largeur :
     à 320, « 1 sur 4 » passait sur deux lignes et touchait la légende. */
  white-space: nowrap;
}
.pagination[hidden] { display: none; }

.pagination button {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--glow);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.pagination button:hover:not(:disabled) { background: var(--glow-soft); }
.pagination button:disabled { color: var(--ink-muted); cursor: default; opacity: 0.5; }
.pagination button:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

.pagination .rang { color: var(--ink-muted); font-variant-numeric: tabular-nums; padding: 0 0.15rem; }

/* Le choix de la langue --------------------------------------------------- */

.langues {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.25rem;
}

.langues a { color: var(--ink-muted); text-decoration: none; }
.langues a:hover { color: var(--glow); }
.langues [aria-current] { color: var(--ink); }