/* The Liquid Fleet, la mise en page commune et la page /board (02/10 : retours du capitaine).

   Posée APRÈS style.css et nav.css sur l'accueil, True PnL, Weather, How it works et /board :
   style.css reste la feuille commune et n'est pas touchée ; la page Signals garde sa propre règle
   (.sg-page .wrap, style.css) et ne charge pas cette feuille. Trois blocs :
   1. toute la largeur, comme la page Signals ;
   2. l'accueil : le héros sans colonne en ch, les cartes des instruments qui disent à qui elles
      s'adressent (une ligne sous la carte, un lien vers /board pour les ponts réservés) ;
   3. la page /board (préfixe bd-) : trois marches, la fenêtre de parrainage de Meteora, ce que chaque
      rang ouvre, les questions.
   True PnL : la carte à partager et le détail côte à côte dès 1200 px (la carte fait 1200 x 675 :
   étirée sur toute la largeur, elle grossissait au-delà de sa taille et prenait l'écran entier).

   02/10 : retours du capitaine : la pleine largeur reste, mais le contenu s'équilibre : jamais une longue phrase
   d'un bord à l'autre de l'écran, des colonnes, une seule colonne sous un seuil (choisi par page, vers 1000 px).
   D'où, ici : les icônes des instruments (.ico, en masque CSS, partagées avec l'en-tête et les titres de Weather et
   Signals), le titre de page (.pg-title, sans pastille au-dessus : elles sont parties de toutes les pages sauf
   « Closed beta » sur l'accueil), le haut de l'accueil en trois colonnes, How it works en deux, True PnL en trois.
   La page Signals charge aussi cette feuille depuis le 02/10 (ses icônes, son titre) : rien ici ne vise ses
   boîtes ; seule sa marge de téléphone s'aligne sur les autres pages (section 1).

   02/10 (soir) : retours du capitaine : « homogénéité des styles, c'est important » : le système de titres (.pg-lead,
   .sec-h2, .sec-h3, juste sous .pg-title), défini ici une seule fois pour tout le site ; l'accueil en deux colonnes
   (un seul texte et deux boutons, le capitaine) ; How it works en grille de blocs tassée ; /board en marches sur deux
   colonnes, tous les rangs en colonnes du tableau.

   02/10 : retours du capitaine (le dernier passage) : How it works garde son sommaire en sous-menu sur toute la largeur,
   au-dessus de la grille ; /board lit ses trois marches de gauche à droite, à la même hauteur (une sous-grille), les
   explications longues repliées dans « More about this step », puis « What each rank opens » en point 4 sur toute la
   largeur ; chaque titre de page porte son icône (l'ancre pour /board, le compas pour How it works). */

/* ---------------------------------------------------------------- 1. toute la largeur */

/* 02/10 : retours du capitaine : le site entier sur la largeur de la fenêtre, avec les marges de la
   page Signals (la même valeur : min(1800px, 100vw - 48px), plus les 24 px de .wrap). Sous 620 px,
   les 24 px de toujours : 48 de chaque côté mangeraient un huitième d'un téléphone. */
.wrap { max-width: min(1800px, 100vw - 48px) }
/* 02/10 : la page Signals (sa propre règle, .sg-page .wrap, plus forte) gardait 48 px de chaque côté sur un
   téléphone : 294 px pour l'en-tête à 390, qui doit être le même partout. Elle prend les 24 px des autres pages. */
@media (max-width: 620px) { .wrap, .sg-page .wrap { max-width: none } }

/* Le halo de la lampe du héros (style.css, .hero-art::before) déborde de 80 % de l'image à droite : mesuré le 02/10,
   la page d'accueil défilait de côté (1813 px pour 1440 ; à 390, le téléphone dézoomait à 547), en prod aussi.
   clip, jamais hidden : pas de conteneur de défilement, la carte collante du pont de la météo (sticky) tient. Sur
   html ET body : posé sur body seul, il remonte à la fenêtre (html visible) et le téléphone dézoomait encore ; html
   en clip garde body pour lui, et body coupe le halo au bord de la fenêtre. */
html, body { overflow-x: clip }

/* ---------------------------------------------------------------- les icônes et le titre de page */

/* 02/10 : retours du capitaine : une icône par instrument, la même dans l'en-tête et en tête de sa page (True PnL la
   balance, Weather la houle, Signals la longue-vue ; dessins de Lucide, licence ISC citée dans chaque fichier). Un
   masque CSS : l'icône prend la couleur du texte (currentColor), l'or où on le demande. Fichiers neufs sous /img
   (Caddy les garde un jour) : un ?v= à changer si un dessin change. */
.ico{display:inline-block;width:1em;height:1em;vertical-align:-0.14em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-truepnl { --ico: url(/img/ico-truepnl.svg?v=20261002) }
.ico-weather { --ico: url(/img/ico-weather.svg?v=20261002) }
.ico-signals { --ico: url(/img/ico-signals.svg?v=20261002) }
/* 02/10 (soir) : retours du capitaine : les deux guides de l'en-tête ont aussi leur icône, de la même famille (Lucide) :
   l'ancre pour How you board, le compas pour How it works */
.ico-board { --ico: url(/img/ico-board.svg?v=20261002) }
.ico-how { --ico: url(/img/ico-how.svg?v=20261002) }

/* Le titre de page : 15 % plus grand que l'ancien .tool-h1 (style.css, clamp(25px, 4vw, 36px)), l'icône de
   l'instrument en or devant. Le titre reste un flux de texte (jamais flex : un titre à <span class="gold">
   éclaterait en colonnes sur un téléphone) ; l'espace de la balise, plus 0.1em, fait l'écart de 0.35em. */
.pg-title {
  margin: 0 0 12px; font-size: calc(clamp(25px, 4vw, 36px) * 1.15); line-height: 1.12;
  letter-spacing: -.03em; font-weight: 650;
}
.pg-title > .ico { color: var(--gold); margin-right: .1em; vertical-align: -0.12em }

/* ---------------------------------------------------------------- le système de titres */

/* 02/10 (soir) : retours du capitaine : « homogénéité des styles, c'est important ». Quatre règles définies ICI une seule
   fois, que chaque page applique telles quelles (Weather et Signals comprises, sans les redéfinir) :
     .pg-title  le titre de la page (h1, plus haut) ;
     .pg-lead   le sous-titre juste sous lui, sur une colonne : italique, un cran au-dessus du texte courant ;
     .sec-h2    le titre d'une section : nettement plus grand que le texte, nettement sous le h1 ;
     .sec-h3    le sous-titre (h3) : à la casse normale, jamais plus la petite étiquette grise en capitales.
   Jamais une largeur en ch (règle du site). « .art-content » et « .tp-more » dans les listes : les règles plus
   spécifiques d'articles.css (« .art-content h2 / h3 ») et de style.css (« .fit h2 », « .method h2 », True PnL) ne
   doivent pas reprendre la main. */
.pg-lead { margin: .4rem 0 1.4rem; font-size: 1.2rem; font-style: italic; line-height: 1.55; color: var(--ink-mute) }
@media (max-width: 620px) { .pg-lead { font-size: 1.075rem } }
.sec-h2, .art-content .sec-h2, .tp-more .sec-h2 {
  margin: 0 0 .6rem; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  color: var(--ink); text-transform: none;
}
.sec-h3, .art-content .sec-h3 {
  margin: 0 0 .5rem; font-size: clamp(19px, 1.6vw, 22px); font-weight: 650; letter-spacing: -.005em; line-height: 1.3;
  color: var(--ink); text-transform: none;
}
/* La seule exception : « Information, not advice. » garde son or en gras, partout (comme .sg-disclaimer sur Signals) */
.no-advice { color: var(--gold); font-weight: 600; font-style: normal }

/* ---------------------------------------------------------------- 2. l'accueil */

/* le texte du héros court jusqu'au capitaine : plus de colonne en ch (règle du site, f7f24fb) */
.hero-text, .hero-text p { max-width: none }

/* 02/10 (soir) : retours du capitaine : le haut en DEUX colonnes, à peu près moitié-moitié (le texte sur 51 %) : à
   gauche UN texte (le héros et « Why the Fleet exists » fondus en un, #why) et ses deux boutons ; à droite le capitaine,
   plus grand (la moitié de la largeur, 680 px au plus : le fichier en fait 1 000), centré dans sa colonne dans les deux
   sens. Le décalage et le léger agrandissement de style.css (.hero-art, translate et margin-right ; l'image, scale
   1.05) le poussaient vers le texte : retirés. Une colonne sous 1000 px, l'image en tête (plus petite sur un
   téléphone : le titre et les boutons remontent). */
.hero {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); grid-template-areas: "text art";
  align-items: center; gap: 0 clamp(32px, 4vw, 72px); padding: 34px 0 20px;
}
.hero-text { grid-area: text }
.hero-text p + p { margin-top: 14px }
.hero-art { grid-area: art; justify-self: center; align-self: center; width: min(100%, 680px); max-width: none; margin: 0; transform: none }
.hero-art img { transform: none }
.hero-text .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }
.hero-cta .btn { text-decoration: none }
.hero-cta .btn .ico { font-size: 15px }
@media (max-width: 999px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "text"; gap: 14px; padding: 22px 0 34px }
  .hero-art { width: min(100%, 360px) }
}
@media (max-width: 620px) {
  .hero-art { width: min(78%, 280px) }
  .hero-text p { font-size: 16px }
}
/* 02/10 (nuit) : retours du capitaine : « Ahoy, mateys. Come aboard. » sur UNE ligne (la taille suit la largeur de
   la colonne) ; le capitaine un peu plus à gauche dans sa colonne (son dessin penche à droite : le bureau déborde) ;
   et la page tient dans l'écran sans défilement : la taille du capitaine suit aussi la HAUTEUR de la fenêtre, les
   espacements du haut et des cartes sont resserrés. Le halo est un ::before de .hero-art : il suit le décalage. */
@media (min-width: 1000px) {
  .hero-text h1 { white-space: nowrap; font-size: clamp(30px, 3.3vw, 46px); margin-bottom: 14px }
  .hero { padding: 6px 0 0 }
  .hero-text .eyebrow { margin-bottom: 12px }
  .hero-text p { font-size: 16.5px; line-height: 1.58 }
  .hero-text p + p { margin-top: 10px }
  .hero-text .hero-cta { margin-top: 16px }
  /* 02/10 : retours du capitaine : 20 % plus grand, 15 px plus bas, 20 px plus à gauche ; agrandi par une
     transformation (depuis son haut) : la mise en page ne bouge pas, le bas du bureau passe sous les cartes */
  /* 10/11 (audit) : le pied de page garde sous lui la place de la pastille Feedback (--fb-gap + --fb-h de plus, style.css) :
     la même hauteur est retirée ici au capitaine, pour que l'accueil tienne toujours dans l'écran sans défilement */
  .hero-art { width: min(100%, 620px, calc(100vh - 385px - var(--fb-gap) - var(--fb-h))); transform-origin: 50% 0; scale: 1.2; translate: calc(-7% - 20px) 15px }
  /* le halo de la lampe (.hero-art::before, 50 % sous l'image) agrandi avec elle dépassait sous le pied de page et
     rouvrait une barre de défilement : coupé au bas de la page seulement (overflow-y: clip ; l'axe x reste libre) */
  body:has(.hero) > .wrap { overflow-y: clip }
  .home-deck-h { margin: 6px 0 10px }
  .app-card > .app { padding: 16px 20px 14px }
  .app-card > .app .head { margin-bottom: 8px }
  .app-for { padding: 9px 20px 11px }
  body:has(.hero) footer.bot { margin-top: 18px; padding: 14px 0 calc(var(--fb-gap) + var(--fb-h) + 16px) }
}
/* « Tied up at the deck » : un sous-titre du site (.sec-h3), au-dessus du halo de la lampe comme les cartes */
.home-deck-h { position: relative; z-index: 2; margin-top: 6px }

/* Une carte = l'instrument (le lien de toujours, .app) + à qui il s'adresse. Le lien vers /board ne peut
   pas vivre DANS le lien de la carte (deux a imbriqués) : la carte devient un cadre qui porte les deux,
   et .app y perd son propre cadre. */
.app-card {
  position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .16s, background .16s, transform .16s;
}
.app-card > .app { flex: 1 1 auto; border: 0; background: transparent; border-radius: var(--r) var(--r) 0 0 }
.app-card > .app:not(.soon):hover { background: transparent; transform: none }
.app-card:has(> .app:hover) { border-color: rgba(217,169,76,.4); background: var(--surface-2); transform: translateY(-2px) }
.app-card > .app:focus-visible { outline: 2px solid rgba(217,169,76,.7); outline-offset: -2px }
.app-for {
  margin: 0; padding: 11px 20px 14px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--ink-mute); font-size: 13px; line-height: 1.5;
}
.app-for svg { width: 12px; height: 12px; flex: none; margin-top: 3px; fill: var(--ink-faint) }
.app-for.is-gated svg { fill: var(--gold) }
.app-for a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line) }
.app-for a:hover { color: var(--gold); border-bottom-color: rgba(217,169,76,.5) }
.app-for a:focus-visible { outline: 2px solid rgba(217,169,76,.7); outline-offset: 2px; border-radius: 2px }

@media (prefers-reduced-motion: reduce) {
  .app-card { transition: none }
  .app-card:has(> .app:hover) { transform: none }
}

/* ---------------------------------------------------------------- True PnL */

/* La carte (1200 x 675, ce qui se partage) à gauche, le détail à droite, dès 1200 px ; seulement quand
   la carte est là (pnl.js retire #card-box si le dessin échoue : le détail reprend alors toute la largeur). */
@media (min-width: 1200px) {
  #pnl-result:has(> #card-box) {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 26px;
  }
  #pnl-result:has(> #card-box) > .result { margin: 0 }
  #pnl-result:has(> #card-box) > .hint { grid-column: 1 / -1; margin-top: 0 }
}

/* 02/10 : retours du capitaine : sous l'outil, trois colonnes dès 1200 px : « Does your position qualify? » (#fit)
   sur deux (ses deux listes côte à côte, comme avant), « What goes into the number » (#method) sur la troisième, ses
   trois cartes l'une sous l'autre ; un seul filet au-dessus des deux. Le seuil de cette page est 1200, pas 1000 : vu à
   1024, les deux listes tombaient à 300 px et s'allongeaient sur 1 100 px. Plus étroit, l'ordre et les filets de
   toujours (les deux listes sur toute la largeur, les trois cartes de la méthode en rangée). */
@media (min-width: 1200px) {
  .tp-more {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 2.6vw, 44px); align-items: start;
    margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--line);
  }
  .tp-more > .fit { grid-column: span 2; margin: 0; padding: 0; border: 0 }
  .tp-more > .method { margin: 0; padding: 0 0 0 clamp(28px, 2.6vw, 44px); border: 0; border-left: 1px solid var(--line); align-self: stretch }
  .tp-more .method-grid { grid-template-columns: minmax(0, 1fr) }
  .tp-more .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* La méthode (trois cartes) est moitié moins haute que les deux listes : elle accompagne la lecture (collée en haut de
   la fenêtre) au lieu de laisser un vide sous elle. Seulement là où elle tient entière dans la fenêtre (mesuré :
   550 à 575 px de haut de 1280 à 1440 px de large). */
@media (min-width: 1200px) and (min-height: 760px) {
  .tp-more > .method { align-self: start; position: sticky; top: 24px }
}

/* ---------------------------------------------------------------- How it works */

/* 02/10 (soir) : retours du capitaine : la page se lit en BLOCS, une grille de deux colonnes dès 1000 px (plus des
   colonnes CSS dans le texte, qui coupaient une section en deux). articles.js fait de chaque h2 et de sa suite une
   section (.art-block), l'encadré « Where the ship stands today » le premier (le sommaire au-dessus, 02/10) ; dans
   l'ordre de lecture, un bloc à gauche, le suivant à droite, et ainsi de suite, jamais le texte d'un bloc sur deux
   colonnes. Les blocs n'ont pas la même hauteur : articles.js tasse la grille (.is-packed, des rangées de 4 px, chaque
   bloc couvre les siennes) et chaque bloc se pose sous le plus court des deux, sans trou. La FAQ traverse les deux
   colonnes et garde les deux siennes. Les ancres (#board, #ranks, #signals…) restent les h2 : la marge de défilement
   montre le haut du cadre. Une colonne sous 1000 px. Le chapeau : le titre, puis le sous-titre dessous (.pg-lead). */
.art-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start }
.art-content > .art-block {
  min-width: 0; margin: 0; padding: 24px 28px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.art-content > .art-block > h2 { padding-top: 0; border-top: 0; scroll-margin-top: 46px }
.art-content .art-block h3[id] { scroll-margin-top: 24px }
.art-content .art-block > :not(:first-child).sec-h3 { margin-top: 26px }
.art-content .art-block .art-scroll { background: var(--bg-deep) }
.art-content .art-block .art-scroll th { background: var(--surface-2) }
.art-content .art-block > :last-child, .art-content .art-block > ul:last-child > li:last-child { margin-bottom: 12px }
/* l'encadré « Where the ship stands today » EST le bloc : plus de second cadre dedans */
.art-content .art-block > .art-note { margin: 0; padding: 0; background: none; border: 0; border-radius: 0 }
/* 02/10 : retours du capitaine : le sommaire (« On this page ») reste sur TOUTE la largeur, en sous-menu : sous le chapeau,
   hors de la grille des blocs (articles.js ne le déplace plus dedans), une rangée de liens qui passe à la ligne, compacte ;
   l'étiquette en tête de la rangée (.art-toc-label, articles.css). Le cadre et la marge des blocs ; sur un téléphone aussi
   une rangée qui passe à la ligne (articles.css les mettait en colonne : quinze liens, une demi-page). */
.art-toc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin: 0 0 16px; padding: 13px 22px }
.art-toc > .art-toc-label { margin: 0; flex: none }
.art-toc ul { flex: 1 1 0; min-width: min(100%, 260px); flex-direction: row; gap: 7px 16px }
.art-toc li { margin: 0 }
.art-toc a { font-size: 14px; line-height: 1.5 }
@media (min-width: 1000px) {
  .art-content { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px }
  .art-toc { margin-bottom: 20px }
  .art-content.is-packed { grid-auto-rows: 4px; row-gap: 0 }
  .art-content > .art-block-full { grid-column: 1 / -1 }
  /* la FAQ, sur toute la largeur : ses questions sur deux colonnes, une question jamais coupée de sa réponse */
  .art-content > .art-block-full { columns: 2; column-gap: clamp(44px, 4.4vw, 72px) }
  .art-content > .art-block-full > h2 { column-span: all }
  .art-content > .art-block-full > h3 { break-after: avoid }
  .art-content > .art-block-full > p { break-inside: avoid }
}
@media (max-width: 620px) {
  .art-content > .art-block { padding: 20px 18px 8px }
  .art-toc { padding: 12px 18px }
  .art-toc ul { flex-direction: row; gap: 7px 16px }
}

/* ---------------------------------------------------------------- 3. /board */

.bd { display: block }

/* 02/10 : retours du capitaine : les trois marches se lisent de gauche à droite et s'équilibrent. Une marche = un cadre,
   quatre étages : le titre (.bd-h2 : le numéro, l'icône du rang, le nom), le mode d'emploi court (.bd-do), « What it
   opens » (.bd-opens), puis « More about this step » replié (.bd-more), qui porte les explications longues : les trois
   cadres restent courts et proches en hauteur. Le numéro vit dans le titre (plus de colonne de 44 px à gauche : sur trois
   colonnes, elle mangeait un sixième de la largeur du texte). Le mode d'emploi prend la hauteur libre (1fr) : quand un
   cadre est étiré à la hauteur de son voisin, « What it opens » et « More » restent en bas. */
.bd-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.bd-step {
  display: grid; grid-template-rows: auto 1fr auto auto; min-width: 0; scroll-margin-top: 20px;
  padding: 22px 26px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.bd-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 650 16px/1 var(--sans); color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(217,169,76,.3);
}
/* 02/10 (soir) : la taille, la graisse et la couleur viennent de .sec-h3 (le système de titres) ; ici, la mise en page
   seule (le numéro, l'icône du rang devant) */
.bd-h2 { margin: 0 0 14px; display: flex; align-items: center; gap: 11px }
/* un titre sur deux ou trois lignes dans une colonne étroite : des lignes égales, jamais un mot seul sur la dernière */
.bd-h2 > span:last-child { text-wrap: balance }
.bd-ic { width: 30px; height: 30px; flex: none }
.bd-rank { color: var(--gold) }
.bd-step p, .bd-how { margin: 0 0 12px; color: var(--ink-mute); font-size: 15px; line-height: 1.7 }
.bd-do > :last-child { margin-bottom: 0 }
.bd-step strong, .bd-q strong { color: var(--ink); font-weight: 600 }
.bd a:not(.btn) { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line) }
.bd a:not(.btn):hover { color: var(--gold); border-bottom-color: rgba(217,169,76,.5) }
.bd-how { padding-left: 22px }
.bd-how li { margin: 0 0 6px; padding-left: 2px }
.bd-how li:last-child { margin-bottom: 0 }
.bd-how li::marker { color: var(--gold); font-weight: 600 }
.bd-step .bd-opens {
  margin: 16px 0 0; padding: 11px 14px; border-radius: var(--r-sm); background: var(--bg-deep); border: 1px solid var(--line-soft);
  font-size: 14px; line-height: 1.65;
}
.bd-code {
  display: inline-block; padding: 3px 8px; border-radius: 6px; letter-spacing: .08em;
  font: 650 14px/1.2 var(--mono); color: var(--gold); background: var(--gold-dim); border: 1px solid rgba(217,169,76,.3);
}

/* « More about this step » : le repli des explications longues, au style des « How it works » des boîtes des Signals
   (.sg-how, style.css : une ligne discrète et son chevron qui se retourne à l'ouverture), un cran plus grand pour le
   texte de 15 px de cette page. Toujours le dernier étage du cadre. */
.bd-more { margin: 12px 0 0; align-self: start }
.bd-more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0;
  color: var(--ink-mute); font-size: 13.5px; font-weight: 500;
}
.bd-more > summary::-webkit-details-marker { display: none }
.bd-more > summary:hover { color: var(--ink) }
.bd-more > summary:focus-visible { outline: 2px solid rgba(217,169,76,.7); outline-offset: 2px; border-radius: 3px }
.bd-chev { width: 12px; height: 12px; flex: none; fill: currentColor; transition: transform .18s }
.bd-more[open] > summary { color: var(--ink) }
.bd-more[open] > summary .bd-chev { transform: rotate(180deg) }
.bd-more-body { padding: 10px 0 0 }
.bd-step .bd-more-body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.7 }

/* la fenêtre de Meteora : seule sur sa ligne (un téléphone), 340 px au plus */
.bd-shot { margin: 16px 0 0; width: min(340px, 100%) }
.bd-shot img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--line); box-shadow: 0 16px 44px rgba(0,0,0,.5);
}
.bd-shot figcaption { margin: 10px 2px 0; color: var(--ink-faint); font-size: 13px; line-height: 1.55 }

/* La marche 2 sur une colonne (de 700 à 999 px) et sur trois (dès 1360) : le mode d'emploi et « What it opens » à
   gauche, la fenêtre de Meteora à droite sur ces deux étages (sa colonne : 34 % de la marche, 180 à 270 px), le titre et
   « More » sur toute la largeur. La fenêtre est un enfant de la marche (pas du mode d'emploi) pour pouvoir couvrir les
   deux étages : sa hauteur ne s'ajoute plus à celle du mode d'emploi, et la marche 2 reste près des deux autres. Des
   numéros de lignes, jamais des zones nommées : sur trois colonnes, la marche est une sous-grille, ses lignes viennent
   de la grille des marches. Sur deux colonnes (1000 à 1359), la fenêtre passe SOUS les gestes : la marche 2 a alors en
   face d'elle la 1 et la 3 l'une sous l'autre, et c'est ainsi qu'elle finit à leur hauteur (mesuré le 02/10 de 1000 à
   1359 : à côté des gestes, elle laissait 240 px de vide au-dessus de « What it opens »). */
@media (min-width: 700px) and (max-width: 999px), (min-width: 1360px) {
  #crew { grid-template-columns: minmax(0, 1fr) clamp(180px, 34%, 270px); column-gap: 26px }
  #crew > .bd-h2, #crew > .bd-more { grid-column: 1 / -1 }
  #crew > .bd-h2 { grid-row: 1 }
  #crew > .bd-do { grid-row: 2; grid-column: 1 }
  #crew > .bd-opens { grid-row: 3; grid-column: 1 }
  #crew > .bd-more { grid-row: 4 }
  #crew > .bd-shot { grid-row: 2 / 4; grid-column: 2; align-self: start; width: 100%; margin: 4px 0 0 }
}

/* Trois colonnes dès 1360 px, la 1, la 2, la 3 ; la 2 (le mode d'emploi à côté de la fenêtre de Meteora) 1,8 fois plus
   large : mesuré le 02/10 de 1280 à 1903, c'est là que les trois cadres finissent le plus près l'un de l'autre, sans
   titre sur trois lignes dans la 1 et la 3. Les quatre étages des trois cadres sont alignés d'un cadre à l'autre (une
   sous-grille) : les titres, les modes d'emploi, les « What it opens » à la même hauteur et de la même taille, les
   « More » sur une ligne ; un « More » ouvert allonge sa rangée, les deux autres cadres gardent leurs étages en place.
   Sous 1360 px, les titres de la 1 et de la 3 passaient sur trois lignes et la 2 n'avait plus la place pour sa fenêtre :
   de 1000 à 1359, deux colonnes, la 1 et la 3 l'une sous l'autre à gauche, la 2 à droite, de la même hauteur. Une
   colonne en dessous. */
@media (min-width: 1000px) and (max-width: 1359px) {
  .bd-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto auto; gap: 16px 20px }
  #deckhand { grid-column: 1; grid-row: 1 }
  #crew { grid-column: 2; grid-row: 1 / span 2; grid-template-rows: auto auto 1fr auto auto }
  #able-seaman { grid-column: 1; grid-row: 2 }
  /* la fenêtre sous les gestes, à 280 px ; la hauteur libre passe sous elle, « What it opens » reste en bas */
  #crew > .bd-shot { width: min(280px, 100%); align-self: start }
}
@media (min-width: 1360px) {
  .bd-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: 0 20px }
  .bd-step { grid-row: span 4; grid-template-rows: subgrid; padding: 22px 24px 16px }
  .bd-step > .bd-h2 { align-self: start; gap: 10px }
  .bd-step .bd-num { width: 34px; height: 34px }
  .bd-step .bd-h2 .bd-ic { width: 28px; height: 28px }
}
@media (min-width: 1600px) {
  .bd-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) }
}

/* les sections sous les marches */
.bd-section { margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 20px }
/* (le titre d'une section : .sec-h3, le système de titres ; 02/10 au soir, plus la petite règle de 18 px d'ici) */
.bd-lead { margin: 0 0 18px; color: var(--ink-mute); font-size: 14px; line-height: 1.7 }

/* ce que chaque rang ouvre : le tableau défile dans son cadre, jamais la page */
.bd-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.bd-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5 }
.bd-table th {
  text-align: left; padding: 11px 16px; background: var(--bg-deep); color: var(--ink-mute);
  font: 500 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.bd-table th .bd-ic { width: 20px; height: 20px; vertical-align: middle; margin: -3px 7px 0 0 }
/* 02/10 (soir) : retours du capitaine : tous les rangs en colonnes (site/board.js pose ceux au-dessus d'Able Seaman,
   depuis le catalogue) ; sous chaque nom, ce qu'il faut pour le tenir, en casse normale, aligné sur le nom. La première
   colonne reste à sa place quand le tableau défile de côté (un téléphone : neuf colonnes ne tiennent pas). */
.bd-table td:first-child { min-width: 13em }
.bd-table thead th:not(:first-child) { vertical-align: bottom; padding-left: 12px; padding-right: 12px }
.bd-table thead th:not(:first-child) .bd-ic { display: block; margin: 0 0 6px }
.bd-th-sub { display: block; margin-top: 3px; white-space: nowrap; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint) }
.bd-table td:not(:first-child) { padding-left: 12px; padding-right: 12px }
.bd-table th:first-child, .bd-table td:first-child { position: sticky; left: 0; z-index: 1 }
.bd-table th:first-child { background: var(--bg-deep) }
.bd-table td:first-child { background: var(--surface) }
.bd-table td { padding: 11px 16px; border-top: 1px solid var(--line-soft); color: var(--ink-mute); vertical-align: top }
.bd-table td:first-child { color: var(--ink); font-weight: 500 }
.bd-table td span { display: block; color: var(--ink-faint); font-size: 12.5px; font-weight: 400 }
.bd-table td.bd-yes { color: var(--up); font-weight: 600 }
.bd-table td.bd-no { color: var(--ink-faint) }
.bd-cap { margin: 12px 2px 0; color: var(--ink-faint); font-size: 13px; line-height: 1.6 }

/* 02/10 : retours du capitaine : « What each rank opens » est le point 4, sur toute la largeur : le cadre et le numéro des
   marches, juste sous elles (le même écart qu'entre deux marches) ; le tableau sur le fond profond, comme ceux des blocs
   de How it works (.art-block .art-scroll). */
.bd-section.bd-four {
  margin: 16px 0 0; padding: 22px 26px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.bd-four > .bd-h2 { margin-bottom: 8px }
.bd-four .bd-scroll { background: var(--bg-deep) }
.bd-four .bd-table th, .bd-four .bd-table th:first-child { background: var(--surface-2) }
.bd-four .bd-table td:first-child { background: var(--bg-deep) }

/* les questions : deux colonnes dès qu'il y a la place */
.bd-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 13px }
.bd-q { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px }
/* une question : le style des questions de la FAQ de How it works (articles.css, .art-content h3 : or, 15.5 px) */
.bd-q h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 600; color: var(--gold) }
.bd-q p { margin: 0; color: var(--ink-mute); font-size: 14px; line-height: 1.65 }

.bd-close { margin: 34px 0 0; color: var(--ink-mute); font-size: 14px; line-height: 1.7 }

/* Sur un téléphone (vu à 390 le 02/10) : le numéro et l'icône un cran plus petits devant le titre, et le tableau garde
   une première colonne lisible (elle s'écrasait en un mot par ligne). Les cadres prennent la marge des blocs de How it
   works (02/10 : retours du capitaine : plus de numéro flottant, il vit dans le titre). */
@media (max-width: 620px) {
  .bd-step, .bd-section.bd-four { padding: 20px 18px 14px }
  .bd-num { width: 32px; height: 32px; font-size: 15px }
  .bd-h2 { gap: 9px }
  .bd-ic { width: 26px; height: 26px }
  .bd-step p, .bd-how { font-size: 14.5px }
  .bd-table { font-size: 13px }
  .bd-table th, .bd-table td { padding: 10px 8px }
  .bd-table td:first-child { min-width: 8.5em }
}

@media (prefers-reduced-motion: reduce) {
  .bd-chev { transition: none }
}

/* ---------------------------------------------------------------- 10/11 (audit) : How it works qui charge, les tableaux qui défilent */

/* Le texte de How it works n'arrive que par /api/articles (articles.js) : pendant la lecture, le squelette tient au moins la
   hauteur de l'écran ; le pied de page attend donc sous la ligne de flottaison et ne saute plus quand le texte arrive (CLS
   0,98 mesuré en bureau, 0,11 en mobile). Le texte, plus long, le repousse plus bas, hors de vue. */
#art-body > [data-state="loading"] { min-height: 100vh }

/* Sur un téléphone, les tableaux larges (How it works, « What each rank opens » de /board) défilaient de côté dans leur cadre
   sans rien qui le dise : leur bord droit s'efface en fondu tant qu'il reste de quoi défiler, et le fondu part une fois au
   bout. Une animation liée au défilement du cadre lui-même (scroll-timeline) : un cadre qui ne déborde pas n'a pas de frise
   active, donc pas de fondu ; un navigateur qui ne connaît pas les frises garde le cadre d'avant, sans fondu. */
@property --lf-fade { syntax: '<length>'; inherits: false; initial-value: 0px }
@supports (animation-timeline: scroll()) {
  .art-scroll, .bd-scroll {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--lf-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--lf-fade)), transparent);
    animation: lf-scroll-hint linear both;
    animation-timeline: scroll(self inline);
  }
}
@keyframes lf-scroll-hint {
  0%, 92% { --lf-fade: 44px }
  100% { --lf-fade: 0px }
}