/* =========================================================================
   HANGAR LEDGER (proaerobusiness.com) - feuille unique
   Squelette : guide-sommaire. Sommaire ancre collant a gauche, sections
   numerotees a droite, bloc de synthese en fin de section.
   Direction : 02. Le Chalet de Refuge, posee sur le tarmac.
   Matiere : sable de rampe de Floride, graphite de hangar, cuir de sacoche.
   Piles systeme uniquement : aucune police distante, aucun import, aucun
   script, aucune requete tierce, aucun fichier de police.

   REGLE NEGATIVE (ecrite ici parce qu'elle gouverne tout le fichier) :
   --balise ne colore JAMAIS un paragraphe, un titre, ni un lien de
   navigation. Il ne sert qu'a marquer une obligation reglementaire, et il
   n'a que trois emplois dans tout le fichier : la puce du cartouche, le
   trait de l'entree active du sommaire, et l'intitule SIGNER / DOCUMENT /
   WHERE TO VERIFY de la ligne de signature. Nulle part ailleurs, jamais en
   fond, jamais sur une surface de plus de 3 px. DEUXIEME
   REGLE : aucun aplat de --cuir en fond, le cuir est une couleur de trait
   et de texte. TROISIEME REGLE : pas de mode sombre. La matiere du site est
   un sable eclaire par le soleil de Floride ; inverser detruirait la seule
   metaphore de couleur du site et rendrait le seuil de piste en craie
   illisible.

   VOCABULAIRE DE CLASSES : prefixe ch-, champ lexical du hangar et de la
   rampe. Aucun nom de classe hors de ce champ.
   ========================================================================= */

:root {
  /* ---- Jetons de matiere ------------------------------------------------
     Dix jetons, chacun nomme par la matiere qu'il represente. */
  --sable-rampe:   #DFD6C4;  /* sable de rampe delave par le soleil : fond de page, rien d'autre */
  --sable-clair:   #EFE9DD;  /* sable ratisse au vent : fond des blocs poses */
  --sable-profond: #CFC4AE;  /* sable tasse sous le train : sommaire collant et pied */
  --graphite:      #33302A;  /* graphite de hangar : texte courant et titres */
  --graphite-pale: #5E574B;  /* graphite estompe : chapeaux, legendes, mentions */
  --cuir:          #6B5D4A;  /* cuir de sacoche use : liens, numeros, filets d'appui */
  --cuir-appui:    #4C4133;  /* cuir mouille : survol et focus, toujours plus sombre */
  --toile:         #BFB298;  /* toile de bache : filets de 1 px et bordures */
  --balise:        #B5581F;  /* balise orange de bord de piste : marqueur d'obligation */
  --craie:         #F6F2E9;  /* craie du marquage au sol : seuil de piste, texte retourne */

  /* ---- Piles de polices -------------------------------------------------
     Deux piles, plus un troisieme role typographique (voir .ch-sigle). */
  --titre-police: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
  --texte-police: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* ---- Rythme et mesures ------------------------------------------------ */
  --mesure: 66ch;            /* largeur maximale d'une ligne de texte, bornee en ch */
  --marge-largeur: 17rem;    /* largeur de la colonne de sommaire */
  --gouttiere: clamp(1.5rem, 4vw, 3.5rem);
  --pas: 1.5rem;             /* unite d'espacement de base */
  --interligne: 1.66;        /* interligne du texte courant */
  --rang-taille: 1.02rem;
  --filet: 1px;
  --rayon: 2px;
  --page-max: 64rem;
  --cadre-pas: clamp(1rem, 4vw, 2.5rem);

  /* ---- Tailles de titres : fluides, jamais de debordement ---------------- */
  --t1: clamp(1.95rem, 1.32rem + 2.55vw, 3.05rem);
  --t2: clamp(1.38rem, 1.14rem + 0.98vw, 1.82rem);
  --t3: clamp(1.09rem, 1rem + 0.4vw, 1.24rem);
  --texte: clamp(1.0625rem, 0.99rem + 0.34vw, 1.1875rem);

  /* ---- Ratios d'image, nommes ------------------------------------------ */
  --ratio-rampe: 16 / 9;   /* bande de section retournee et ouverture d'accueil */
  --ratio-etabli: 4 / 3;   /* figure d'article et vignette de programme */
  --ratio-plaque: 3 / 2;   /* les deux images de la page About */

  /* ---- Debord de la section retournee ----------------------------------- */
  --bord-externe: max(var(--cadre-pas), calc(50vw - var(--page-max) / 2 + var(--cadre-pas)));
  --decalage-pupitre: calc(var(--marge-largeur) + var(--gouttiere));
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--sable-rampe);
  color: var(--graphite);
  font-family: var(--texte-police);
  font-size: var(--texte);
  line-height: var(--interligne);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--cuir); color: var(--craie); }

a { color: var(--cuir); text-underline-offset: 0.18em; }
a:hover { color: var(--cuir-appui); }

:focus-visible {
  outline: 3px solid var(--cuir);
  outline-offset: 2px;
  border-radius: var(--rayon);
}

/* ---- Utilitaires -------------------------------------------------------- */
.ch-saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--graphite);
  color: var(--craie);
  padding: 0.6rem 1rem;
  z-index: 20;
}
.ch-saut:focus { left: 0.5rem; top: 0.5rem; }

.ch-hors-ecran {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ch-cadre {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--cadre-pas);
}

/* =========================================================================
   1. PORCHE - marque sur deux lignes, navigation a deux etats
   ========================================================================= */
.ch-porche {
  border-bottom: var(--filet) solid var(--toile);
  background: var(--sable-rampe);
}

.ch-porche__rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem var(--pas);
  padding-block: 1.05rem;
}

.ch-marque {
  font-family: var(--titre-police);
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--graphite);
  text-decoration: none;
}
.ch-marque span {
  display: block;
  font-family: var(--texte-police);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  margin-top: 0.2rem;
}

.ch-parcours { margin-left: auto; }
.ch-parcours ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ch-parcours a {
  color: var(--graphite);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.18rem;
  border-bottom: 2px solid transparent;
}
.ch-parcours a:hover { border-bottom-color: var(--cuir); color: var(--cuir-appui); }
.ch-parcours a[aria-current="page"] { border-bottom-color: var(--cuir); color: var(--cuir); }

/* Case a cocher : masquee mais focusable au clavier. Jamais <details> :
   ferme, il ne rend pas son contenu, et le menu disparait en desktop. */
.ch-menu-case {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.ch-menu-declencheur {
  display: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite);
  border: var(--filet) solid var(--toile);
  padding: 0.42rem 0.75rem;
  cursor: pointer;
  user-select: none;
}
/* Trois traits de seuil dans le declencheur : la signature A en miniature. */
.ch-menu-declencheur::before {
  content: "";
  display: inline-block;
  width: 0.95rem;
  height: 0.6rem;
  margin-right: 0.55rem;
  vertical-align: -0.05em;
  background: repeating-linear-gradient(to bottom, var(--graphite) 0 1px, transparent 1px 4px);
}

/* =========================================================================
   2. ENTREE DE PAGE - titre, chapeau, reperes, puis le seuil
   ========================================================================= */
.ch-entree {
  padding-block: clamp(1.8rem, 5vw, 3.2rem) 0;
}

.ch-fil-ariane {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  margin: 0 0 0.75rem;
}
.ch-fil-ariane p { margin: 0; }
.ch-fil-ariane a { color: var(--graphite-pale); }
.ch-fil-ariane span[aria-current="page"] { color: var(--graphite); }
.ch-fil-ariane span { padding-inline: 0.4rem; }

.ch-titre {
  font-family: var(--titre-police);
  font-size: var(--t1);
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 0.7rem;
  max-width: 24ch;
}

.ch-chapeau {
  max-width: var(--mesure);
  font-size: 1.07rem;
  line-height: 1.6;
  color: var(--graphite-pale);
  margin: 0;
}

.ch-mention {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  list-style: none;
  margin: var(--pas) 0 0;
  padding: 0 0 clamp(1.2rem, 3vw, 1.8rem);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
}
.ch-mention li { display: flex; align-items: center; gap: 0.45rem; }
.ch-mention li::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  background: var(--cuir);
  transform: rotate(45deg);
  flex: none;
}

/* ---- SIGNATURE A : le seuil de piste (ch-seuil) -------------------------
   Trois emplois : sous l'entree de page, en tete du pied, et en separateur
   de la section retournee. Trame de barres de seuil, 8 px de haut. */
.ch-seuil {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--craie) 0 14px, transparent 14px 26px);
  border-block: var(--filet) solid var(--toile);
  opacity: .85;
}
.ch-socle > .ch-seuil { background-repeat: repeat-x; background-size: 26px 8px; }
.ch-retourne > .ch-seuil {
  background-image: repeating-linear-gradient(90deg, var(--craie) 0 14px, transparent 14px 26px);
  border-block-color: rgba(246, 242, 233, .35);
  opacity: .5;
}

/* =========================================================================
   3. PUPITRE - sommaire ancré collant a gauche, contenu a droite
   ========================================================================= */
.ch-pupitre {
  display: grid;
  grid-template-columns: var(--marge-largeur) minmax(0, 1fr);
  gap: var(--gouttiere);
  /* surtout PAS align-items: start : la colonne de gauche doit s'etirer sur
     toute la hauteur, sinon le sommaire collant n'a aucune course. */
  align-items: stretch;
  padding-block: clamp(1.8rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
}

/* La colonne de gauche porte desormais elle-meme le collant (et non plus le
   seul panneau du sommaire) : elle se mesure donc sur la hauteur de son
   contenu, pas sur la hauteur de la rangee, et ne laisse plus une boite vide
   de 10 000 px en face de l'article. La course du collant reste celle de la
   rangee entiere : la zone de grille de cet item est la rangee etiree par
   align-items: stretch, qui est conserve sur .ch-pupitre. */
.ch-marge {
  min-width: 0;
  align-self: start;
  position: sticky;
  top: var(--pas);
  /* Meme garde que le panneau du squelette, mais portee par le bloc entier :
     quand le sommaire est long, la note reste atteignable dans le rail au lieu
     de passer sous la ligne de flottaison une fois le bloc decolle. */
  max-height: calc(100vh - var(--pas) * 2);
  overflow-y: auto;
}
.ch-corps { min-width: 0; }

/* ---- Sommaire collant --------------------------------------------------- */
.ch-fil {
  position: static;
  max-height: calc(100vh - var(--pas) * 2);
  overflow-y: auto;
  background: var(--sable-profond);
  border: var(--filet) solid var(--toile);
  border-left: 3px solid var(--cuir);
  padding: 1rem 1.1rem 1.2rem;
}
.ch-fil__cle {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0;
}
.ch-fil__liste {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  counter-reset: jalon;
}
.ch-fil__jalon { border-top: var(--filet) solid var(--toile); }
.ch-fil__jalon:first-child { border-top: 0; }
.ch-fil__jalon > a {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.5rem 0.2rem 0.5rem 0.9rem;
  margin-left: -1.1rem;
  color: var(--graphite);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.34;
  border-left: 3px solid transparent;
}
.ch-fil__jalon > a::before {
  counter-increment: jalon;
  content: counter(jalon, decimal-leading-zero);
  font-family: var(--titre-police);
  font-size: 0.82rem;
  color: var(--cuir);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.ch-fil__jalon > a:hover { background: var(--sable-clair); color: var(--cuir); }
/* L'entree active est le SEUL endroit ou --balise touche le sommaire. */
.ch-fil__jalon > a[aria-current="true"] {
  background: var(--sable-clair);
  border-left-color: var(--balise);
  font-weight: 700;
}
.ch-fil__brins {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0 2.2rem;
}
.ch-fil__brins a {
  display: block;
  padding: 0.22rem 0;
  font-size: 0.84rem;
  color: var(--graphite-pale);
  text-decoration: none;
}
.ch-fil__brins a:hover { color: var(--cuir); }

.ch-marge__note {
  margin: var(--pas) 0 0;
  padding: 0.9rem 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--graphite-pale);
  background: var(--sable-clair);
  border: var(--filet) solid var(--toile);
}
.ch-marge__compte {
  margin: 0.9rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
}

/* =========================================================================
   4. SECTIONS NUMEROTEES
   ========================================================================= */
.ch-lecon {
  padding-block: 0 clamp(1.9rem, 4vw, 2.8rem);
  scroll-margin-top: var(--pas);
}
.ch-lecon + .ch-lecon {
  border-top: var(--filet) solid var(--toile);
  padding-top: clamp(1.9rem, 4vw, 2.6rem);
}

.ch-lecon__surtitre {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cuir);
  margin: 0 0 0.5rem;
}

.ch-lecon__palier {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: 0.2rem;
  font-family: var(--titre-police);
  font-size: var(--t2);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 0.75rem;
}
.ch-lecon__rang {
  font-size: var(--rang-taille);
  font-weight: 400;
  color: var(--cuir);
  letter-spacing: 0.06em;
  padding-top: 0.4em;
  font-variant-numeric: tabular-nums;
}

.ch-lecon > p,
.ch-lecon > ul,
.ch-lecon > ol,
.ch-lecon > dl,
.ch-lecon > figure,
.ch-lecon > div,
.ch-lecon > aside,
.ch-lecon > nav,
.ch-lecon > blockquote,
.ch-lecon > h3 { margin-left: 3rem; max-width: var(--mesure); }

.ch-lecon > h3 {
  font-family: var(--titre-police);
  font-size: var(--t3);
  line-height: 1.3;
  margin-top: calc(var(--pas) * 1.2);
  margin-bottom: 0.5rem;
  scroll-margin-top: var(--pas);
}
.ch-lecon p { margin-top: 0; margin-bottom: 1rem; }
.ch-lecon > ul, .ch-lecon > ol { margin-bottom: 1.1rem; padding-left: 1.15rem; }
.ch-lecon > ul > li, .ch-lecon > ol > li { margin-bottom: 0.4rem; }

.ch-lecon > .ch-programme,
.ch-lecon > .ch-index { padding-left: 0; max-width: none; }
.ch-lecon > .ch-programme > li,
.ch-lecon > .ch-index > li { margin-bottom: 0; }

/* ---- SECTION RETOURNEE : fond graphite plein, deborde des marges --------
   La texture est un filet de 1 px tous les 7 px : la toile du hangar. */
.ch-retourne {
  background: var(--graphite);
  color: var(--craie);
  background-image: repeating-linear-gradient(0deg, rgba(246, 242, 233, .07) 0 1px, transparent 1px 7px);
}
.ch-lecon--retourne {
  margin-inline: calc(-1 * (var(--bord-externe) + var(--decalage-pupitre))) calc(-1 * var(--bord-externe));
  padding-inline: calc(var(--bord-externe) + var(--decalage-pupitre)) var(--bord-externe);
  padding-block: clamp(2.2rem, 5vw, 3.4rem);
  border-top: 0;
  max-width: none;
}
.ch-retourne .ch-lecon__palier,
.ch-retourne .ch-lecon > p { color: var(--craie); }
.ch-retourne .ch-lecon__surtitre { color: var(--craie); opacity: .8; }
.ch-retourne .ch-lecon > p,
.ch-retourne .ch-lecon > ul,
.ch-retourne .ch-lecon > dl,
.ch-retourne .ch-lecon > figure,
.ch-retourne .ch-lecon > div { margin-left: 0; }
.ch-retourne .ch-lecon__palier { grid-template-columns: 3rem minmax(0, 1fr); }
.ch-retourne .ch-lecon__rang { color: rgba(246, 242, 233, .62); }
.ch-retourne .ch-pesee em { color: rgba(246, 242, 233, .72); }
.ch-retourne .ch-pesee { border-top-color: var(--craie); }
.ch-retourne .ch-pesee > div { border-right-color: rgba(246, 242, 233, .3); }
.ch-retourne .ch-pesee b { color: var(--craie); }
.ch-retourne .ch-pesee span { color: rgba(246, 242, 233, .78); }
.ch-retourne a { color: var(--craie); }

/* ---- Bloc de synthese de fin de section -------------------------------- */
.ch-retenir {
  background: var(--sable-clair);
  border: var(--filet) solid var(--toile);
  border-top: 3px solid var(--cuir);
  padding: 1.1rem 1.25rem 1.2rem;
  margin-top: calc(var(--pas) * 1.2);
}
.ch-retenir__cle {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cuir);
  margin: 0 0 0.6rem;
}
.ch-retenir__points { list-style: none; margin: 0; padding: 0; }
.ch-retenir__points li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.45rem;
  font-size: 0.96rem;
  line-height: 1.55;
}
.ch-retenir__points li:last-child { margin-bottom: 0; }
.ch-retenir__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.52em;
  width: 0.38rem; height: 0.38rem;
  background: var(--cuir);
}
.ch-retourne .ch-retenir {
  background: transparent;
  border-color: rgba(246, 242, 233, .35);
  border-top-color: var(--craie);
}
.ch-retourne .ch-retenir__cle { color: var(--craie); }
.ch-retourne .ch-retenir__points li::before { background: var(--craie); }

/* ---- SIGNATURE B : le cartouche d'autorisation (ch-cartouche) -----------
   Un rectangle a filet double et coin coupe, comme la case d'un formulaire
   d'inspection. Trois mentions toujours : Issued by / Applies to / Check with. */
.ch-cartouche {
  border: var(--filet) solid var(--graphite);
  box-shadow: 0 0 0 3px var(--sable-clair), 0 0 0 4px var(--toile);
  background: var(--sable-clair);
  padding: calc(var(--pas) * .75);
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  margin-block: calc(var(--pas) * 1.1);
}
.ch-cartouche__cle {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  margin: 0 0 0.7rem;
  padding-left: 1.1rem;
  position: relative;
}
/* La puce du cartouche : seul emploi decoratif de --balise. */
.ch-cartouche__cle::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 0.52rem; height: 0.52rem;
  background: var(--balise);
}
.ch-cartouche__lignes {
  margin: 0;
  display: grid;
  gap: 0.55rem;
}
.ch-cartouche__lignes dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
}
.ch-cartouche__lignes dd {
  margin: 0.1rem 0 0;
  font-family: var(--titre-police);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--graphite);
}
.ch-retourne .ch-cartouche { box-shadow: 0 0 0 3px var(--graphite), 0 0 0 4px rgba(246, 242, 233, .4); }

/* ---- SIGNATURE C : la reglure de pesee (ch-pesee) ----------------------
   Quatre lignes « mot fort | explication » separees par un border-right
   interne. Fiche de masse et centrage. */
.ch-pesee {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  border-top: 2px solid var(--graphite);
  margin: 0;
  padding: 0;
}
.ch-pesee > div {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  padding: calc(var(--pas) * .8) calc(var(--pas) * .62);
  border-right: 1px solid var(--toile);
  min-width: 0;
}
.ch-pesee > div:last-child { border-right: 0; }
.ch-pesee > div:first-child { padding-left: 0; }
.ch-pesee b {
  display: block;
  font-family: var(--titre-police);
  font-size: 0.99rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
  hyphens: auto;
  color: var(--graphite);
}
.ch-pesee span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--graphite-pale);
}
/* Une adresse se coupe sur ses barres obliques, jamais dans un mot. */
.ch-pesee a { overflow-wrap: normal; word-break: normal; }
.ch-pesee em {
  display: block;
  margin-bottom: 0.3rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cuir);
}

/* ---- L'IDEE INATTENDUE : The Signature Line (ch-signature-line) --------
   Une occurrence et une seule par page, juste sous la ch-pesee. Trois cases
   separees par un filet vertical : qui signe, sur quel document, ou verifier. */
.ch-signature-line {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: var(--filet) solid var(--toile);
  border-bottom: var(--filet) solid var(--toile);
  margin-block: calc(var(--pas) * 1.1);
}
.ch-signature-line__case {
  padding: calc(var(--pas) * .8) calc(var(--pas) * .85);
  border-right: var(--filet) solid var(--toile);
}
.ch-signature-line__case:last-child { border-right: 0; }
.ch-signature-line__role {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--balise);
  margin-bottom: 0.4rem;
}
.ch-signature-line__doc {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--graphite);
  margin-bottom: 0.35rem;
}
.ch-signature-line__lien {
  display: block;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--cuir);
}
.ch-signature-line__entree {
  display: grid;
  gap: 0.9rem;
  margin-block: calc(var(--pas) * 1.1);
}
.ch-signature-line__entree .ch-signature-line { margin-block: 0; }

/* ---- Troisieme role typographique : le sigle --------------------------
   Capitales espacees en sans, reservees EXCLUSIVEMENT aux designations
   reglementaires et aux sigles d'agence : FAA, TSA, NTSB, A&P, PART 61,
   PART 141, PART 135, PART 139, PART 145, PART 147, 100LL, JET A. Nulle
   part ailleurs : jamais sur un intertitre, jamais sur un libelle de
   navigation. */
.ch-sigle {
  font-family: var(--texte-police);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cuir);
}
.ch-retourne .ch-sigle { color: var(--craie); }

/* ---- Quatrieme role mineur : l'italique Palatino ----------------------
   Reservee a la ligne « what the source page does not state », et a rien
   d'autre. Deuxieme sens porte par une italique dans tout le site. */
.ch-source-manque {
  font-family: var(--titre-police);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--graphite-pale);
  border-left: 2px solid var(--toile);
  padding-left: 1rem;
  margin-block: calc(var(--pas) * 1.1);
  max-width: var(--mesure);
}

/* ---- Lettrine Palatino 3 lignes, ouverture de chapeau ------------------ */
.ch-letrine::first-letter {
  font-family: var(--titre-police);
  color: var(--cuir);
  font-weight: 700;
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  padding-right: 0.09em;
  margin-top: 0.04em;
}
@supports (initial-letter: 3) {
  .ch-letrine::first-letter {
    float: none;
    font-size: 1em;
    padding-right: 0;
    initial-letter: 3;
    margin-right: 0.09em;
  }
}

/* =========================================================================
   5. DISPOSITIFS DE CONTENU
   ========================================================================= */

/* ---- Definitions -------------------------------------------------------- */
.ch-glose {
  margin: 0;
  border-top: var(--filet) solid var(--toile);
}
.ch-glose dt {
  font-family: var(--titre-police);
  font-weight: 700;
  font-size: 1rem;
  padding-top: 0.8rem;
  color: var(--graphite);
}
.ch-glose dd {
  margin: 0.25rem 0 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: var(--filet) solid var(--toile);
  color: var(--graphite-pale);
  line-height: 1.55;
}
.ch-retourne .ch-glose { border-top-color: rgba(246, 242, 233, .35); }
.ch-retourne .ch-glose dt { color: var(--craie); }
.ch-retourne .ch-glose dd { border-bottom-color: rgba(246, 242, 233, .25); color: rgba(246, 242, 233, .8); }

/* ---- Tableau a defilement propre --------------------------------------- */
.ch-tableau {
  overflow-x: auto;
  border: var(--filet) solid var(--toile);
  background: var(--sable-clair);
  margin: calc(var(--pas) * .9) 0;
  max-width: none;
}
.ch-tableau table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.92rem;
}
.ch-tableau caption {
  text-align: left;
  padding: 0.75rem 0.9rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  border-bottom: var(--filet) solid var(--toile);
}
.ch-tableau th, .ch-tableau td {
  text-align: left;
  padding: 0.62rem 0.9rem;
  border-bottom: var(--filet) solid var(--toile);
  vertical-align: top;
}
.ch-tableau thead th {
  background: var(--sable-profond);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.ch-tableau tbody tr:last-child td { border-bottom: 0; }
.ch-tableau td { font-variant-numeric: tabular-nums; }

/* ---- Figures, ratios et plaque de legende ------------------------------ */
.ch-figure { margin: calc(var(--pas) * 1.1) 0; }
.ch-figure__vue { position: relative; display: block; }
.ch-figure img {
  display: block;
  width: 100%;
  border: var(--filet) solid var(--toile);
  background: var(--sable-clair);
}
.ch-rampe img { aspect-ratio: var(--ratio-rampe); object-fit: cover; }
.ch-etabli img { aspect-ratio: var(--ratio-etabli); object-fit: cover; }
.ch-plaque-vue img { aspect-ratio: var(--ratio-plaque); object-fit: cover; }

/* SIGNATURE B (variante legende) : la plaque flottante posee en bas de la
   photo, deux mentions aux extremites. */
.ch-plaque {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.6rem 0.85rem;
  background: rgba(239, 233, 221, .92);
  border-top: var(--filet) solid var(--toile);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--graphite);
}
.ch-plaque__scene { font-family: var(--titre-police); font-style: italic; }
.ch-plaque__source { color: var(--graphite-pale); font-size: 0.72rem; }
.ch-figure figcaption {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--graphite-pale);
  margin-top: 0.55rem;
  max-width: var(--mesure);
}
/* Masque de lisibilite, uniquement sur la bande retournee. */
.ch-retourne .ch-figure img {
  filter: none;
  border-color: rgba(246, 242, 233, .3);
}
.ch-retourne .ch-figure__vue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(51, 48, 42, 0) 42%, rgba(51, 48, 42, .78) 100%);
  pointer-events: none;
}
.ch-retourne .ch-plaque {
  background: transparent;
  border-top: 0;
  color: var(--craie);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
}
.ch-retourne .ch-plaque__source { color: rgba(246, 242, 233, .72); }

/* Vignette de programme : ratio etabli, meme traitement de plaque. */
.ch-programme__vignette {
  display: block;
  position: relative;
  overflow: hidden;
}
.ch-programme__vignette img {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-etabli);
  object-fit: cover;
  border: var(--filet) solid var(--toile);
}

/* =========================================================================
   6. PROGRAMME DATE DE L'ACCUEIL - la section la plus dense de la page
   ========================================================================= */
.ch-programme {
  list-style: none;
  counter-reset: piece;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--graphite);
}
.ch-programme > li {
  counter-increment: piece;
  border-bottom: var(--filet) solid var(--toile);
}
.ch-programme__lien {
  display: grid;
  grid-template-columns: 2.6rem 8.5rem minmax(0, 1fr) 7rem;
  gap: 0.4rem 1.1rem;
  align-items: start;
  padding: 0.95rem 0.3rem 1rem 0;
  text-decoration: none;
  color: var(--graphite);
}
.ch-programme__lien:hover { background: var(--sable-clair); }
.ch-programme__rang {
  font-family: var(--titre-police);
  font-size: 1.05rem;
  color: var(--cuir);
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}
.ch-programme__rang::before { content: counter(piece, decimal-leading-zero); }
.ch-programme__corps { min-width: 0; }
.ch-programme__rubrique {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  margin-bottom: 0.25rem;
}
.ch-programme__titre {
  display: block;
  font-family: var(--titre-police);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}
.ch-programme__resume {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--graphite-pale);
}
.ch-programme__date {
  display: block;
  text-align: right;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--graphite-pale);
  padding-top: 0.15rem;
}
.ch-programme__lien:hover .ch-programme__titre { color: var(--cuir); }

/* =========================================================================
   7. INDEX DE RUBRIQUE - liste dense, jamais une grille de cartes
   ========================================================================= */
.ch-index { list-style: none; margin: 0; padding: 0; }
.ch-index > li {
  padding: 0.95rem 0;
  border-bottom: var(--filet) solid var(--toile);
}
.ch-index__titre {
  font-family: var(--titre-police);
  font-size: var(--t3);
  line-height: 1.3;
  margin: 0 0 0.25rem;
}
.ch-index__titre a { text-decoration: none; color: var(--graphite); }
.ch-index__titre a:hover { color: var(--cuir); text-decoration: underline; }
.ch-index__resume { margin: 0; color: var(--graphite-pale); font-size: 0.94rem; line-height: 1.55; }
.ch-index__reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-pale);
}
.ch-index__reperes b { font-weight: 600; color: var(--cuir); }
.ch-index__reperes time { font-variant-numeric: tabular-nums; }

/* =========================================================================
   8. PASSERELLE de fin de page
   ========================================================================= */
.ch-passerelle {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  /* les trois cartes de suite prennent la hauteur de leur texte : jamais une
     rangee de cartes egales (brief, point 11). */
  align-items: start;
  margin-top: calc(var(--pas) * 1.4);
  border-top: var(--filet) solid var(--toile);
  padding-top: var(--pas);
}
.ch-passerelle a {
  display: block;
  /* plaque serree sur son texte : la carte ne garde pas de bas de boite vide
     quand son titre est plus court que celui de sa voisine. */
  padding: 0.6rem 1rem;
  border: var(--filet) solid var(--toile);
  border-left: 3px solid var(--cuir);
  background: var(--sable-clair);
  text-decoration: none;
  color: var(--graphite);
}
.ch-passerelle a:hover { border-left-color: var(--graphite); }
.ch-passerelle small {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--graphite-pale);
  margin-bottom: 0.2rem;
}
.ch-passerelle b { font-family: var(--titre-police); font-weight: 700; line-height: 1.3; }

/* =========================================================================
   9. OUVERTURE DE L'ACCUEIL - split texte / photo, jamais centre plein ecran
   ========================================================================= */
.ch-ouverture {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--gouttiere);
  align-items: start;
  padding-block: clamp(1.6rem, 4vw, 2.6rem) 0;
}
.ch-ouverture__texte { min-width: 0; }
.ch-ouverture__mot {
  font-family: var(--titre-police);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--graphite-pale);
  margin: 1.1rem 0 0;
  max-width: 46ch;
}
.ch-ouverture__vues { min-width: 0; }

/* Les deux voies d'entree : pilote, mecanicien. Liste, pas de cartes. */
.ch-voie { list-style: none; margin: 0; padding: 0; }
.ch-voie > li {
  padding: 1rem 0;
  border-top: var(--filet) solid var(--toile);
}
.ch-voie > li:last-child { border-bottom: var(--filet) solid var(--toile); }
.ch-voie__nom {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--graphite);
}
.ch-voie__role { display: block; color: var(--graphite-pale); font-size: 0.94rem; line-height: 1.55; margin-top: 0.2rem; }

/* =========================================================================
   10. SOCLE - le pied qui prouve
   ========================================================================= */
.ch-socle {
  background: var(--sable-profond);
  font-size: 0.9rem;
  line-height: 1.6;
}
.ch-socle__rangee {
  display: grid;
  gap: var(--pas) var(--gouttiere);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  /* chaque colonne du pied se mesure sur son propre texte : la rangee
     n'etire plus la plus courte, qui laissait 166 px de vide sous ses liens. */
  align-items: start;
  padding-block: clamp(1.8rem, 4vw, 2.6rem);
}
.ch-socle h2 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.7rem;
  color: var(--graphite-pale);
}
.ch-socle p { margin: 0 0 0.7rem; max-width: 46ch; }
.ch-socle p:last-child { margin-bottom: 0; }
.ch-socle ul { list-style: none; margin: 0; padding: 0; }
.ch-socle li { margin-bottom: 0.35rem; }
.ch-socle a { color: var(--graphite); }
.ch-socle a:hover { color: var(--cuir-appui); }
.ch-socle__note {
  font-family: var(--titre-police);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--graphite);
}
.ch-socle__bas {
  padding-block: 1rem 1.6rem;
  border-top: var(--filet) solid var(--toile);
  color: var(--graphite-pale);
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  justify-content: space-between;
}
.ch-socle__bas time { font-variant-numeric: tabular-nums; }

/* =========================================================================
   11. OU L'ON CONTINUE (passerelle d'article) et bloc de rubriques
   ========================================================================= */
.ch-route { list-style: none; margin: 0; padding: 0; }
.ch-route > li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: var(--filet) solid var(--toile);
}
.ch-route > li:last-child { border-bottom: var(--filet) solid var(--toile); }
.ch-route__rang {
  font-family: var(--titre-police);
  color: var(--cuir);
  font-variant-numeric: tabular-nums;
}
.ch-route__titre { font-family: var(--titre-police); font-size: 1.02rem; font-weight: 700; }
.ch-route__lien { font-size: 0.8rem; letter-spacing: 0.06em; }

/* =========================================================================
   12. ADAPTATIONS PETITES LARGEURS
   Le sommaire passe au-dessus du contenu et cesse d'etre collant.
   ========================================================================= */
@media (max-width: 60rem) {
  .ch-pupitre { grid-template-columns: minmax(0, 1fr); }
  /* sous 60rem le sommaire remonte au-dessus du contenu : plus de collant,
     donc plus de garde de hauteur, comme le panneau du squelette. */
  .ch-marge { position: static; max-height: none; overflow: visible; }
  .ch-fil { position: static; max-height: none; overflow: visible; }
  .ch-marge__note { margin-top: 1rem; }
  .ch-ouverture { grid-template-columns: minmax(0, 1fr); }
  .ch-lecon--retourne {
    margin-inline: calc(-1 * var(--bord-externe));
    padding-inline: var(--pas);
  }
  .ch-parcours { margin-left: 0; width: 100%; }
}

@media (max-width: 52rem) {
  .ch-menu-declencheur { display: inline-block; }
  .ch-parcours { position: relative; }
  .ch-parcours ul {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    position: absolute;
    left: 0; right: 0; top: calc(100% + 0.5rem);
    background: var(--sable-clair);
    border: var(--filet) solid var(--toile);
    padding: 0.3rem 1rem 0.6rem;
    z-index: 10;
  }
  .ch-parcours li { border-top: var(--filet) solid var(--toile); }
  .ch-parcours li:first-child { border-top: 0; }
  .ch-parcours a { display: block; padding: 0.7rem 0 0.6rem; }
  .ch-menu-case:checked ~ ul { display: flex; }
  .ch-menu-case:checked + .ch-menu-declencheur { border-color: var(--cuir); color: var(--cuir); }
  .ch-programme__lien { grid-template-columns: 2.2rem minmax(0, 1fr) 6.5rem; }
  .ch-programme__vignette { display: none; }
}

@media (max-width: 48rem) {
  .ch-pesee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-pesee > div { border-right: 1px solid var(--toile); border-bottom: 1px solid var(--toile); }
  .ch-pesee > div:nth-child(2n) { border-right: 0; }
  .ch-pesee > div:nth-last-child(-n+2) { border-bottom: 0; }
  .ch-pesee > div:first-child { padding-left: calc(var(--pas) * .8); }
  .ch-signature-line { grid-template-columns: minmax(0, 1fr); }
  .ch-signature-line__case {
    border-right: 0;
    border-bottom: var(--filet) solid var(--toile);
  }
  .ch-signature-line__case:last-child { border-bottom: 0; }
}

@media (max-width: 34rem) {
  :root { --pas: 1.15rem; }
  .ch-lecon__palier { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ch-lecon > p,
  .ch-lecon > ul,
  .ch-lecon > ol,
  .ch-lecon > dl,
  .ch-lecon > figure,
  .ch-lecon > div,
  .ch-lecon > aside,
  .ch-lecon > nav,
  .ch-lecon > blockquote,
  .ch-lecon > h3 { margin-left: 0; }
  .ch-programme__lien { grid-template-columns: 2rem minmax(0, 1fr); }
  .ch-programme__date { grid-column: 2; text-align: left; padding-top: 0; }
  .ch-route > li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  /* La plaque de legende se pose sous l'image au lieu d'etre posee dessus. */
  .ch-plaque {
    position: static;
    background: transparent;
    border-top: 0;
    padding: 0.5rem 0 0;
  }
  .ch-retourne .ch-plaque { padding: 0.5rem 0 0; }
  .ch-figure__vue::after { display: none; }
  .ch-retourne .ch-figure__vue::after { display: none; }
}

/* ---- Impression --------------------------------------------------------- */
@media print {
  .ch-marge,
  .ch-parcours,
  .ch-saut,
  .ch-menu-declencheur { display: none; }
  .ch-pupitre { display: block; }
  .ch-lecon--retourne {
    margin-inline: 0;
    padding-inline: 0;
    background: #fff;
    color: #000;
  }
  body { background: #fff; color: #000; }
  .ch-seuil { opacity: .35; }
}