/* AC3F — Livret de Formation PPL : design system partagé */

:root {
    --bleu-aviation: #1E3A5F;
    --bleu-aviation-fonce: #142943;
    --bleu-aviation-clair: #2E5580;
    --fond: #F5F8FA;
    --carte: #FFFFFF;
    --texte: #1A2733;
    --texte-att: #5B6B7A;
    --bordure: #E1E7ED;
    --zebra: #EFF3F7;

    --niveau-a: #B7E1CD;
    --niveau-b: #FCE8B2;
    --niveau-c: #F4C7C3;
    --niveau-d: #D9D2E9;
    --niveau-texte: #22282e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--fond);
    color: var(--texte);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--bleu-aviation); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- En-tête du site ------------------------------------------------- */

.site-header {
    background: var(--bleu-aviation);
    color: #fff;
    padding: 0.85rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: #fff;
}

.site-header .logo:hover {
    text-decoration: none;
}

.logo-image {
    height: 34px;
    width: 34px;
    display: block;
}

.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.site-header .form-deconnexion {
    margin: 0;
    display: inline-flex;
}

.site-header .deconnexion {
    background: none;
    border: none;
    padding: 0;
    color: #D6E4F0;
    font-size: 0.85rem;
    font-weight: 600;
}

.site-header .deconnexion:hover {
    background: none;
    color: #fff;
}

.fil-ariane {
    padding: 0.75rem 2rem 0;
    font-size: 0.85rem;
    color: var(--texte-att);
}

.fil-ariane a { color: var(--bleu-aviation-clair); }
.fil-ariane .separateur { margin: 0 0.4rem; color: var(--bordure); }

.page {
    padding: 1rem 2rem 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page h1 {
    font-size: 1.5rem;
    margin: 0.5rem 0 1rem;
    color: var(--bleu-aviation-fonce);
}

.page h2 {
    font-size: 1.05rem;
    margin-top: 2rem;
    color: var(--bleu-aviation-fonce);
    border-bottom: 2px solid var(--bordure);
    padding-bottom: 0.35rem;
}

.page h3 {
    font-size: 0.95rem;
    margin: 1rem 0 0.4rem;
    color: var(--texte-att);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Contenu texte des onglets Procédures normales/urgence (préparation du
   vol) : plus d'espace au-dessus de chaque titre de section que le
   défaut du site, pour aérer un contenu dense en check-listes. Scopé à ce
   conteneur (pas le .page h3 global) pour ne pas modifier les autres
   pages. Taille/couleur également reprises ici : le h3 par défaut du site
   (0.95rem, gris texte-att) se faisait éclipser visuellement par les
   sous-titres en <strong> (texte plein, gras) du contenu — le titre de
   section redevient donc le plus voyant des deux niveaux. */
.contenu-procedure h3 {
    margin-top: 2.5rem;
    font-size: 1.2rem;
    color: var(--bleu-aviation-fonce);
}

/* Sous-titres "Volets position décollage (1er cran)"/"Volets rentrés"
   (onglet Performances, F-GHSY) : un peu plus grands que le texte
   courant, et "Volets rentrés" prend plus d'espace au-dessus (il suit un
   tableau, pas un simple paragraphe) pour bien le détacher du bloc
   "volets 1er cran" qui précède. */
.contenu-procedure #perf-3-1,
.contenu-procedure #perf-3-2 {
    font-size: 1.1rem;
}

.contenu-procedure #perf-3-2 {
    margin-top: 2.5rem;
}

/* --- En-tête de section avec lien d'action (ex: Synthèse ANPI -> Formation
   Théorique) : le border-bottom passe sur le conteneur (pleine largeur) au
   lieu du h2 seul, pour que le lien reste correctement aligné sur la ligne
   du titre sans déborder sur la bordure. */
.entete-section {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--bordure);
    padding-bottom: 0.35rem;
}

/* Spécificité (.page .entete-section h2) volontairement plus élevée que
   .page h2 (border-bottom, ligne 85) pour garantir que ce override gagne,
   quel que soit l'ordre des règles dans la feuille de style. margin-bottom:0
   est le point clé : le h2 garde sinon sa marge basse par défaut du
   navigateur, ce qui pousse son texte visuellement plus haut que le lien
   voisin (sans marge, lui) une fois les deux éléments alignés dans la ligne
   flex — décalage vertical titre/lien. */
.page .entete-section h2 {
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.lien-discret {
    color: var(--bleu-aviation-fonce);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.lien-discret:hover {
    color: var(--bleu-aviation-clair);
}

/* --- Indicateur de dépli +/- (ex: détails d'item, page Vols Bilans) ------ */

.toggle-detail {
    background: none;
    border: none;
    padding: 0 0.3rem;
    margin-left: 0.2rem;
    color: var(--texte-att);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.toggle-detail:hover {
    color: var(--bleu-aviation);
}

/* --- Onglets fiche élève ---------------------------------------------- */

.onglets {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--bordure);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.onglets a, .onglets .onglet-desactive {
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--texte-att);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.onglets a:hover { color: var(--bleu-aviation); text-decoration: none; }

.onglets a.actif {
    color: var(--bleu-aviation);
    border-bottom-color: var(--bleu-aviation);
}

.onglets .onglet-desactive {
    color: #B9C2CA;
    cursor: default;
}

/* --- Cartes / en-tête de fiche ----------------------------------------- */

.fiche-entete {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.fiche-entete strong { color: var(--bleu-aviation-fonce); }

/* --- Tableaux ------------------------------------------------------- */

.table-scroll {
    border: 1px solid var(--bordure);
    border-radius: 10px;
    background: var(--carte);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

/* Table "Vitesses d'utilisation normale" (Procédures normales) : km/h en
   premier, KIAS entre parenthèses ensuite — largeur fixe sur la partie
   km/h pour que les KIAS tombent tous à la même position d'une ligne à
   l'autre, quel que soit le nombre de chiffres du km/h. */
.vitesse-kmh {
    display: inline-block;
    min-width: 4.6em;
}

.vitesse-kias {
    color: var(--texte-att);
}

/* Fiche pilote : le bandeau de contrôle empile plusieurs lignes d'entête
   (une par information) mais doit rester un seul bloc bleu uni — pas des
   lignes de "tableau" séparées comme les items en dessous. */
.table-controles thead tr:not(:last-child) th {
    border-bottom: none;
    box-shadow: none;
}

/* Page Comptes (Gestion des droits) : même principe qu'au-dessus — la ligne
   d'en-tête groupée ("Profils"/"Suivi", colspan) doit rester soudée à la
   ligne de libellés de colonnes juste en dessous, un seul bloc bleu, pas
   deux en-têtes de tableau empilés. Règle scopée à cette table précise
   (nouvelle classe) plutôt que réutilisation de .table-controles, dont le
   nom porte une sémantique VEA sans rapport avec cette page. */
.table-comptes thead tr:not(:last-child) th {
    border-bottom: none;
    box-shadow: none;
}

/* Séparateurs discrets entre groupes de colonnes ("Profils"/"Suivi") — même
   traitement que .table-instructeur (Information sur les licences) : liseré
   clair sur fond bleu, posé à la main sur chaque cellule qui démarre un
   groupe, à chaque ligne où elle apparaît (Compte/Nom/Actions étant en
   rowspan="2", une seule pose suffit pour eux ; Profils/Suivi et leurs
   colonnes de détail sont sur des lignes séparées, posé sur les deux pour
   que le trait reste continu sur toute la hauteur du bandeau). Classe
   réutilisée telle quelle (même nom, même valeur) plutôt qu'une nouvelle —
   même besoin visuel, scopée séparément par table donc sans effet croisé. */
.table-comptes thead th.separation-groupe {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.88rem;
}

th, td {
    padding: 0.45rem 0.7rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--bordure);
}

/* Colonne de valeurs numériques (ex: "Bras de levier", Masse et
   centrage) : alignée à droite, plus lisible pour comparer des nombres
   d'une ligne à l'autre qu'un alignement à gauche par défaut. */
.colonne-numerique {
    text-align: right;
}

/* Tableaux "item / réponse" façon check-liste papier (ex: Procédures
   normales/urgence) : largeur de la 1ère colonne forcée en pourcentage
   (table-layout: fixed) plutôt que laissée au contenu, pour que la limite
   item/réponse tombe à la même position sur tous les tableaux de la page,
   pas seulement dans un même tableau. */
.table-checklist {
    table-layout: fixed;
}

.table-checklist td:first-child {
    width: 55%;
    font-weight: 600;
}

/* Onglet Compétences (Re-formation SEP) : 2 <table> distinctes (technique /
   non technique), chacune avec sa propre largeur de colonne "Compétence"
   calculée par table-layout: auto — celle du tableau technique s'élargit
   davantage à cause de "Mécanique/Avionique/Automatisme", décalant Acquis/
   Dernière évaluation par rapport au tableau non technique juste en
   dessous. Largeurs fixes partagées par les deux tables (même classe) pour
   garder les 2 dernières colonnes alignées ; word-wrap sur la 1ère colonne
   plutôt qu'une troncature (retour à la ligne déjà géré par les cellules,
   pas de white-space:nowrap ici). */
.table-competences {
    table-layout: fixed;
}

.table-competences th:first-child,
.table-competences td:first-child {
    width: 60%;
}

.table-competences th:nth-child(2),
.table-competences td:nth-child(2) {
    width: 15%;
}

.table-competences th:nth-child(3),
.table-competences td:nth-child(3) {
    width: 25%;
}

thead th {
    background: var(--bleu-aviation);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    box-shadow: 0 1px 0 var(--bleu-aviation-fonce);
}

tbody tr:nth-child(even) { background: var(--zebra); }
tbody tr:hover { background: #E7EEF4; }

tr.section-row td {
    background: #EAF0F6;
    color: var(--bleu-aviation-fonce);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 2px solid var(--bordure);
}

tr.section-row.sous-section td {
    background: #DCE9F5;
    color: var(--texte);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    border-bottom: 1px solid #C3D6E8;
}

/* Espace avant un titre (Phase OU Leçon) uniquement quand il suit une ligne
   de donnée (dernier item d'une leçon/phase précédente) — jamais quand il
   suit directement un autre titre (ex: PHASE 1A -> Leçon 1, B1A -> PHASE 1B,
   ou Titre ANPI -> Phase). */
tr.ligne-donnee + tr.section-row td,
tr.remarque-en-dessous + tr.section-row td {
    border-top: 10px solid var(--carte);
}

.vide { color: #AAB4BD; }

.nowrap { white-space: nowrap; }

.legende {
    font-size: 0.78rem;
    color: var(--texte-att);
    margin-top: 0.5rem;
}

/* Légende A/B/C/D de la Synthèse ENAC, sur la même ligne que le h2 (cf.
   .entete-section) — annule la marge par défaut du <p> pour rester alignée
   sur la ligne de base du titre, et reste sur une seule ligne (pas
   d'empilement des niveaux même si la fenêtre est étroite : le
   table-scroll voisin porte déjà le défilement horizontal de la page). */
.legende-niveaux {
    margin-top: 0;
    margin-bottom: 0;
    white-space: nowrap;
}

.centre { text-align: center; }

/* Annotation discrète "en filigrane" à côté d'un libellé d'en-tête de
   tableau (ex: "décollage (passage 15 m)") : même principe que .legende
   (texte atténué, plus petit) mais sur fond bleu foncé de thead th plutôt
   que sur fond clair, donc blanc semi-transparent plutôt que gris. */
thead th .filigrane {
    font-size: 0.72rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65);
}

/* Petite séparation verticale entre les 2 groupes de colonnes "Actions
   possibles" (en ATO/DTO vs FI isolé hors ATO/DTO) du tableau Instructeur
   (onglet Instructeur, Information sur les licences) : liseré sur l'en-tête
   (.separation-groupe, posé à la main sur les 2 cellules qui démarrent le
   2e groupe — spans irréguliers, pas de position nth-child fixe) et sur le
   corps du tableau (nth-child(8), colonnes régulières sur les 9 <td> de
   chaque ligne de donnée : 1 libellé + 6 colonnes du 1er groupe + 2 du 2e). */
.table-instructeur thead th.separation-groupe {
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.table-instructeur tbody tr:not(.section-row) td:nth-child(8) {
    border-left: 2px solid var(--bordure);
}

/* Espace entre le sommaire (nav.carte-contenu) et une remarque
   jaune/mégaphone qui le suit immédiatement (ex: onglet Performances) —
   ni l'un ni l'autre n'a de marge par défaut, donc rien ne les séparait. */
.carte-contenu + .remarque-en-dessous-contenu {
    margin-top: 1.5rem;
}

/* Colle une note en filigrane (.legende) contre le tableau juste
   au-dessus (ex: "réduction de 0,3 m/s par 1000 ft" sous une table de
   performances de montée) : annule la marge-basse de .table-scroll
   (1.5rem) en collapsant avec une marge-haut négative égale, plutôt que
   de toucher .table-scroll/.legende eux-mêmes (réutilisés ailleurs avec
   l'espacement normal, ex: synthese_enac.html). */
.table-scroll + .legende-collee {
    margin-top: -1.5rem;
}

/* --- Badges de niveau A/B/C/D ---------------------------------------- */

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--niveau-texte);
    white-space: nowrap;
    cursor: default;
}

/* Colonne "Items évalués" (vols.html) : 3 badges maximum par ligne, puis
   retour à la ligne, quel que soit le nombre total. Grid à 3 colonnes
   "max-content" plutôt que le pattern flex + nth-child(3n){flex-basis:100%}
   envisagé au départ : vérifié par rendu réel (capture d'écran headless) que
   ce dernier étire visuellement le 3e/6e badge sur toute la largeur de la
   ligne au lieu de se contenter de forcer le retour à la ligne (flex-basis
   100% devient la largeur réellement utilisée quand l'item est seul sur sa
   ligne) — pas le rendu voulu pour des badges de largeur variable. Le grid
   n'a pas ce défaut : chaque badge garde sa largeur naturelle. */
.conteneur-items-evalues {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 0.3rem;
}

/* Info-bulle flottante (position:fixed calculée en JS, cf. vols.html) :
   un unique élément ajouté à document.body, donc jamais rogné par le
   conteneur à défilement du tableau (.table-scroll a overflow:auto). */
.tooltip-flottante {
    display: none;
    position: fixed;
    background: var(--bleu-aviation-fonce);
    color: #fff;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.35;
    max-width: 340px;
    text-align: left;
    white-space: pre-line;
    box-shadow: 0 4px 14px rgba(20, 41, 67, 0.35);
    z-index: 1000;
    pointer-events: none;
}

.tooltip-flottante.visible { display: block; }

.tooltip-flottante::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--bleu-aviation-fonce);
}

.tooltip-flottante.flip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--bleu-aviation-fonce);
}

.niveau-A, td.niveau-A { background: var(--niveau-a); }
.niveau-B, td.niveau-B { background: var(--niveau-b); }
.niveau-C, td.niveau-C { background: var(--niveau-c); }
.niveau-D, td.niveau-D { background: var(--niveau-d); }

td.niveau-A, td.niveau-B, td.niveau-C, td.niveau-D {
    color: var(--niveau-texte);
    font-weight: 700;
}

/* Notes de bilan (page Vols Bilans) : S/NS réutilisent les couleurs A/C
   (9bis) ; NE n'a volontairement pas de couleur — rendu comme "non évalué"
   ailleurs sur le site (tiret sans fond, cf. .vide). */
.niveau-S, td.niveau-S { background: var(--niveau-a); }
.niveau-NS, td.niveau-NS { background: var(--niveau-c); }

td.niveau-S, td.niveau-NS {
    color: var(--niveau-texte);
    font-weight: 700;
}

.badge-acquis {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: #1a7a4a;
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.badge-oui, .badge-non {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
}

.badge-oui { background: #DCF3E3; color: #1A7A4A; }
.badge-non { background: #F4E1E1; color: #A13A3A; }

/* --- Module Site (retours instructeurs) : badges type bug/amélioration -- */
.badge-bug, .badge-amelioration {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.78rem;
}

.badge-bug { background: #F4E1E1; color: #A13A3A; }
.badge-amelioration { background: #DCE7F4; color: #1E3A5F; }

/* --- Remarques ANPI (spec ad hoc, cf. remarques_anpi) : reprend le style
   du document officiel (fond jaune, bordure arrondie, icône à gauche). ---- */

.remarque-icone {
    flex: none;
    font-size: 0.95rem;
    line-height: 1.3;
}

.remarque-a-droite {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-left: 0.6rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid #E8C989;
    border-radius: 10px;
    background: #FCE8B2;
    color: #6B5416;
    font-size: 0.78rem;
    font-style: italic;
    line-height: 1.35;
    max-width: 280px;
}

tr.remarque-en-dessous td {
    background: transparent;
    border: none;
    padding: 0.5rem 0.7rem 0.9rem;
}

.remarque-en-dessous-contenu {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #FCE8B2;
    border: 1px solid #E8C989;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: #6B5416;
    font-size: 0.85rem;
    line-height: 1.5;
}

.remarque-en-dessous-contenu p {
    margin: 0;
}

.remarque-en-dessous-contenu p + p {
    margin-top: 0.5rem;
}

.remarque-en-dessous-texte {
    flex: 1;
}

/* Plusieurs informations regroupées dans un seul encadré (un seul
   mégaphone) au lieu d'un encadré par information qui se suivait sans
   texte normal entre les deux : chaque .remarque-section garde
   l'espacement normal titre/paragraphe en son sein (.remarque-en-
   dessous-contenu p + p), mais un saut plus net entre sections
   distinctes pour montrer que c'est une autre information. */
.remarque-section + .remarque-section {
    margin-top: 1rem;
}

.remarque-puces,
.remarque-puces ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.remarque-puces li {
    margin-top: 0.2rem;
}

/* --- Synthèse ANPI : mise en page du document officiel ------------------ */

.table-anpi thead th {
    background: #D9D9D9;
    color: var(--texte);
    box-shadow: 0 1px 0 #BFBFBF;
}

.table-anpi .col-acquis,
.table-anpi .col-fia {
    text-align: center;
}

tr.barre-phase td {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.7rem;
}

tr.barre-phase.barre-phase-1 td,
tr.barre-phase.barre-phase-3 td { background: #1C4587; }
tr.barre-phase.barre-phase-2 td { background: #38761D; }

.cellule-phase {
    text-align: center;
    vertical-align: middle;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--texte);
    border-right: 1px solid var(--bordure);
}

.sous-titre-repere {
    display: block;
    font-weight: 400;
    font-size: 0.78em;
    opacity: 0.85;
}

.groupe-anpi-1a { background: #CFE2F3; }
.groupe-anpi-1b { background: #9FC5E8; }
.groupe-anpi-1c { background: #6FA8DC; }
.groupe-anpi-1d { background: #3D85C6; }
.groupe-anpi-2a { background: #D9EAD3; }
.groupe-anpi-2b { background: #B6D7A8; }
.groupe-anpi-2c { background: #93C47D; }
.groupe-anpi-2d { background: #38761D; color: #fff; }
.groupe-anpi-3a { background: #D0E0E3; }
.groupe-anpi-3b { background: #0B5394; color: #fff; }

/* Module VDN : mêmes familles de couleurs que PPL (bleu phase 1, vert
   phase 2, bleu clair -> foncé phase 3), simplement réappliquées à ses
   propres repères (VSV 1/2, VDN 1..5) plutôt que 1A..3B. */
.groupe-anpi-vsv-1 { background: #CFE2F3; }
.groupe-anpi-vsv-2 { background: #9FC5E8; }
.groupe-anpi-vdn-1 { background: #D9EAD3; }
.groupe-anpi-vdn-2 { background: #B6D7A8; }
.groupe-anpi-vdn-3 { background: #93C47D; }
.groupe-anpi-vdn-4 { background: #D0E0E3; }
.groupe-anpi-vdn-5 { background: #0B5394; color: #fff; }

/* Re-formation SEP : un seul Vol Bilan (pas de distinction de gravité entre
   phases comme PPL/VDN), donc un seul bandeau de phase uniforme sur les 5
   phases (1/2/3A/4/5 — 3A partage sa classe avec le 3A de PPL, d'où le
   scope .table-anpi-refo-sep : sans lui, cette règle s'appliquerait aussi
   au 3A de PPL). Colonne des numéros de phase en dégradé de bleu clair ->
   foncé, plus clair que le bandeau à chaque étape (hiérarchie numéro <
   titre) — 5e teinte la plus foncée de la colonne, texte blanc pour le
   contraste, comme les fins de dégradé PPL/VDN (2D/3B/vdn-5). */
.table-anpi-refo-sep tr.barre-phase td { background: var(--bleu-aviation); }

.table-anpi-refo-sep .groupe-anpi-1 { background: #D6E9F8; }
.table-anpi-refo-sep .groupe-anpi-2 { background: #AED4F0; }
.table-anpi-refo-sep .groupe-anpi-3a { background: #86BEE8; }
.table-anpi-refo-sep .groupe-anpi-4 { background: #5EA9E0; }
.table-anpi-refo-sep .groupe-anpi-5 { background: #3693D8; color: #fff; }

/* --- Formulaires ------------------------------------------------------ */

.erreurs {
    background: #FDECEA;
    border: 1px solid #E3A69C;
    color: #7A1F13;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.message-succes {
    background: #E7F5EC;
    border: 1px solid #A6D9BB;
    color: #1A7A4A;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* --- Encart délai FCL.810 (Bilan de formation VDN) --------------------- */

.fcl810-ok { color: #1A7A4A; font-weight: 600; }
.fcl810-depasse { color: #7A1F13; font-weight: 600; }

/* --- %MAC (Masse et centrage, mode "moment") --------------------------- */

.centrage-mac-ok { color: #1A7A4A; }
.centrage-mac-hors-plage { color: #7A1F13; }

/* --- Zone dangereuse (suppression définitive) -------------------------- */

.zone-dangereuse {
    border-color: #E3A69C;
}

.zone-dangereuse h3 {
    color: #7A1F13;
    margin-top: 0;
}

button.danger {
    background: #B3261E;
}

button.danger:hover {
    background: #8f1e18;
}

fieldset { border: none; padding: 0; margin: 0; }

form.carte {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
    max-width: 720px;
}

/* Formulaire "Ajouter un vol" : occupe toute la largeur disponible (comme le
   tableau des vols au-dessus), champs courts organisés en grille plutôt
   qu'empilés, pour réduire la hauteur totale. */
form.formulaire-vol,
form.formulaire-large {
    max-width: none;
}

.grille-champs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1.2rem;
    row-gap: 0.85rem;
}

.grille-champs.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grille-champs.cols-3 { grid-template-columns: repeat(3, 1fr); }

.grille-champs + .grille-champs { margin-top: 0.85rem; }

/* --- Blocs 2 colonnes côte à côte (ex: Destinations Nav) ---------------- */

.deux-colonnes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
    .deux-colonnes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .grille-champs,
    .grille-champs.cols-2,
    .grille-champs.cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .grille-champs,
    .grille-champs.cols-2,
    .grille-champs.cols-3 { grid-template-columns: 1fr; }
}

.champ {
    position: relative;
}

.champ label {
    margin-top: 0;
}

/* --- Autocomplétion aérodromes (AD DÉP / AD DEST / Étapes) -------------- */

.autocomplete-liste {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 6px;
    margin-top: 0.2rem;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(20, 41, 67, 0.15);
}

.autocomplete-liste.visible {
    display: block;
}

.autocomplete-option {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.autocomplete-option:hover {
    background: var(--zebra);
}

.autocomplete-option .code {
    font-weight: 700;
    color: var(--bleu-aviation-fonce);
}

.autocomplete-option .nom {
    color: var(--texte-att);
}

/* --- Code aérodrome avec info-bulle (page Vols) -------------------------- */

.aero-code {
    cursor: default;
    border-bottom: 1px dotted var(--texte-att);
}

.champ-pleine-largeur {
    margin-top: 1.1rem;
}

/* --- Météo (formulaire Vol, PPL pour l'instant) : section repliée par
   défaut derrière un bouton "Météo ▾", même bascule que "+ Ajouter un
   bilan" (data-toggle, cf. _script_toggle.html) --------------------------- */

.lien-discret .chevron {
    display: inline-block;
    margin-left: 0.15rem;
}

.section-meteo {
    margin-top: 0.6rem;
}

.groupe-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--texte);
    white-space: nowrap;
    cursor: pointer;
}

.radio-inline input {
    margin: 0;
}

/* --- Icône météo (tableau Vols, PPL) ------------------------------------ */

.icone-meteo {
    display: inline-flex;
    align-items: center;
    color: var(--bleu-aviation);
    cursor: pointer;
    vertical-align: middle;
}

/* CAVOK (ex-icône soleil) : seul cas textuel de la colonne, aligné sur la
   hauteur de ligne des icônes SVG voisines (20px) plutôt que la taille de
   police par défaut du tableau, pour rester visuellement de même gabarit
   que pluie/nuageux/vent sur les autres lignes. */
.icone-meteo-texte {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.02em;
}

.icone-meteo:focus-visible {
    outline: 2px solid var(--bleu-aviation);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Vent travers + rafales : cas le plus limitant (confirmé par
   l'utilisateur), couleur d'alerte pour le distinguer des 3 autres
   combinaisons de la colonne — même rouge que .erreurs/.fcl810-depasse,
   pas une nouvelle teinte. */
.icone-meteo-alerte {
    color: #7A1F13;
}

.icone-meteo-alerte:focus-visible {
    outline-color: #7A1F13;
}

/* Icône vent (barbules) uniquement, pas .icone-meteo en général : c'est la
   seule des 4 avec des détails fins (traits/demi-traits/fanion) qui
   souffrent en petit format — soleil/nuage/pluie gardent leur taille
   d'origine. La propriété CSS width/height l'emporte sur l'attribut HTML
   width/height du même nom posé sur le <svg> (même précédence que pour un
   <img>), pas besoin de !important. */
.icone-meteo-vent {
    width: 27px;
    height: 27px;
}

label {
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--texte-att);
}

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--bordure);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: inherit;
    background: #fff;
    color: var(--texte);
    font-style: normal;
}

/* Remontée chef pilote (formulaire "Saisir un vol") : sur certains PC/
navigateurs, le gris par défaut du placeholder était trop proche du texte
réellement saisi. Style explicite plutôt que de compter sur le rendu par
défaut du navigateur (non garanti identique partout) : gris clair + italique
pour le texte d'exemple, texte saisi en noir plein/droit (cf. règle
ci-dessus, qui fixe explicitement font-style: normal pour lever toute
ambiguïté). Règle générique sur ::placeholder, pas une classe par champ :
s'applique à tous les champs texte du site, formulaire de vol y compris tout
futur champ avec un exemple. */
::placeholder {
    color: #9AA5AF;
    font-style: italic;
    opacity: 1;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--bleu-aviation-clair);
    box-shadow: 0 0 0 3px rgba(46, 85, 128, 0.15);
}

.etape-row { margin-bottom: 0.4rem; position: relative; }

button, .bouton {
    background: var(--bleu-aviation);
    color: #fff;
    border: none;
    padding: 0.55rem 1.2rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

button:hover, .bouton:hover { background: var(--bleu-aviation-clair); text-decoration: none; color: #fff; }

.secondaire {
    background: transparent;
    color: var(--bleu-aviation);
    border: 1px solid var(--bleu-aviation);
}

.secondaire:hover { background: #EAF0F6; color: var(--bleu-aviation); }

/* --- Menu déroulant "Actions ▾" (page Comptes, Gestion des droits) -----
   <details>/<summary> plutôt qu'un <div> piloté en JS : accessible au
   clavier/lecteur d'écran nativement (Entrée/Espace sur le bouton, Tab
   dans le contenu), pas seulement au survol. Le contenu reste dans le
   flux normal de la cellule (pas de position:absolute/fixed) — évite
   volontairement le piège déjà rencontré sur .tooltip-flottante
   (.table-scroll force overflow-y:auto dès que overflow-x est posé, ce
   qui découpe tout élément positionné en absolu à l'intérieur). */
.menu-actions summary {
    list-style: none;
    cursor: pointer;
}
.menu-actions summary::-webkit-details-marker { display: none; }
.menu-actions summary::marker { content: ""; }

.menu-actions-contenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--fond);
    border: 1px solid var(--bordure);
    border-radius: 8px;
    min-width: 200px;
}
.menu-actions-contenu form { margin: 0; }
.menu-actions-contenu button { width: 100%; text-align: left; }

#items-search { margin-bottom: 0.6rem; }

/* --- Actions discrètes (modifier/supprimer un vol) ---------------------- */

.action-vol-form {
    display: inline;
}

/* Champ + action icône sur une seule ligne (ex: email instructeur + bouton
   "Enregistrer" en coche, page Instructeurs de Gestion des droits) — un
   .action-vol-form seul reste "display:inline", insuffisant pour aligner
   verticalement un <input> et une icône de hauteurs différentes. */
.champ-avec-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Sélecteur + bouton "Ventiler" sur une seule ligne (liste "Import depuis
   Google Drive", liste_formation.html) : select/textarea/input ont
   width:100% par défaut (règle générique plus haut dans ce fichier), qui
   ferait sinon occuper toute la largeur de la colonne au <select> et
   repousser le bouton à la ligne suivante malgré .champ-avec-action. */
.select-ventilage {
    width: auto;
    min-width: 0;
}

.action-vol {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0.15rem 0.35rem;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}

.action-vol:hover {
    background: var(--zebra);
    border-radius: 6px;
    text-decoration: none;
}

.action-vol:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.action-vol:disabled:hover {
    background: transparent;
}

/* .action-vol elle-même ne fixe pas `color` : un <button class="action-vol">
   hérite donc color:#fff de la règle de base `button, .bouton` — correct
   partout où .action-vol vit jusqu'ici (icônes ✏️/🗑️ dans des <thead th>
   à fond bleu foncé) mais invisible sur un fond blanc/carte (ex: icône
   "Enregistrer" à côté du champ email, page Instructeurs). Classe
   additionnelle plutôt qu'une modification de .action-vol elle-même, pour
   ne rien changer aux usages existants sur fond foncé. */
.action-vol-clair {
    color: var(--bleu-aviation);
}

.action-vol-clair:hover {
    color: var(--bleu-aviation-clair);
}

/* --- Page d'accueil : bandeau ------------------------------------------ */

.hero {
    background: linear-gradient(135deg, var(--bleu-aviation-fonce) 0%, var(--bleu-aviation) 55%, var(--bleu-aviation-clair) 100%);
    color: #fff;
    padding: 4.5rem 2rem 5.5rem;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero h1 {
    font-size: 2.1rem;
    margin: 0 0 0.6rem;
    color: #fff;
    font-weight: 700;
}

.hero p {
    color: #D6E4F0;
    font-size: 1.05rem;
    margin: 0;
}

.hero .avion-silhouette {
    position: absolute;
    opacity: 0.15;
    right: -40px;
    top: 20px;
    width: 260px;
    transform: rotate(8deg);
}

.hero .horizon {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40px;
    background: rgba(255,255,255,0.06);
}

/* --- Page de connexion --------------------------------------------------- */

.connexion-conteneur {
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
}

.connexion-carte {
    width: 100%;
    max-width: 360px;
}

.connexion-carte h1 {
    font-size: 1.3rem;
    color: var(--bleu-aviation-fonce);
    margin: 0 0 1.2rem;
    text-align: center;
}

/* --- Cartes de sélection (Livrets, Liste PPL) -------------------------- */

.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* "Gestion des droits"/"Site" (accueil) : un second <div class=
   "grille-cartes"> distinct plutôt qu'une seule grille avec tous les
   modules, pour que ces 2 briques restent groupées entre elles sur une
   ligne à part, toujours sous les autres — une seule grille en
   grid-template-columns: repeat(auto-fill, ...) les aurait mélangées
   avec le reste sur la même ligne dès que l'écran est assez large. Même
   classe .grille-cartes, sans variante : les deux lignes doivent
   partager exactement la même formule de colonnes pour que les cartes
   s'alignent et fassent la même taille d'une ligne à l'autre. */

.carte-module {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.2rem;
    display: block;
}

.carte-module h3 {
    margin: 0 0 0.35rem;
    color: var(--bleu-aviation-fonce);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
}

.carte-module-soustitre {
    margin: 0;
    color: var(--texte-att);
    font-size: 0.8rem;
}

.carte-module.actif:hover {
    border-color: var(--bleu-aviation-clair);
    box-shadow: 0 2px 10px rgba(30, 58, 95, 0.1);
}

.carte-module.desactive {
    opacity: 0.55;
    cursor: default;
}

.etiquette-bientot {
    display: inline-block;
    background: var(--bordure);
    color: var(--texte-att);
    font-size: 0.72rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.4rem;
}

/* --- Outils de vol : liste de documents téléchargeables ----------------
   Même habillage visuel que .carte-module (fond/bordure/rayon), mais un
   <div> et non un <a> : chaque document a 2 actions distinctes (Ouvrir/
   Télécharger), pas une seule carte entièrement cliquable. */
.liste-documents {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1rem;
}

.carte-document {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.carte-document-texte h3 {
    margin: 0 0 0.35rem;
    color: var(--bleu-aviation-fonce);
    font-size: 1rem;
}

.carte-document-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

/* --- Contenu statique (Information sur les licences et qualifications) - */

.carte-contenu {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.5rem;
}

/* Puces avec un peu d'air entre elles — sans ça, une liste à items longs
   (plusieurs lignes chacun) devient difficile à distinguer d'un bloc de
   texte continu (ex: Mode d'emploi). Classe posée explicitement sur les
   <ul> concernés, pas une règle générique sur tout <ul>/<li> du site. */
.liste-espacee li {
    margin-bottom: 0.6rem;
}
.liste-espacee li:last-child {
    margin-bottom: 0;
}

.carte-contenu h2 {
    border-bottom: none;
    padding-bottom: 0;
}

.texte-att {
    color: var(--texte-att);
}

/* --- Préparation du vol : calculateur masse et centrage ----------------- */

/* Conteneur partagé par les deux rangées (formulaire/bras de levier en
   haut, graphique/données enveloppe en bas) : mêmes colonnes des deux
   côtés, donc même largeur totale en haut et en bas de la page, sans
   recourir à des max-width en dur par bloc qui pourraient diverger.
   align-items: stretch (valeur par défaut de grille) égalise aussi la
   hauteur des deux cartes de chaque rangée. */
.centrage-2col {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 1.5rem;
    max-width: 1100px;
}

@media (max-width: 900px) {
    .centrage-2col { grid-template-columns: 1fr; }
}

.svg-centrage-conteneur {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1rem;
    /* Occupe toute la largeur de sa colonne de grille (pour matcher la
       largeur du formulaire du haut) sans agrandir le graphique lui-même :
       le graphique/la légende restent capés à leur taille validée via
       .svg-centrage-interieur ci-dessous, centrés dans l'espace blanc
       restant plutôt que de s'étirer avec la carte. */
    display: flex;
    justify-content: center;
}

.svg-centrage-interieur {
    max-width: 500px;
    width: 100%;
}

.donnees-enveloppe {
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
}

.donnees-enveloppe h3 {
    margin-top: 0;
    margin-bottom: 0;
}

.sous-titre-enveloppe {
    font-style: italic;
    font-size: 0.8em;
    margin-top: 0.15rem;
    margin-bottom: 0.85rem;
}

/* Masse à vide / Masse au décollage / Bras de levier à vide / Bras de
   levier résultant : grid (pas flex) à 2 colonnes de largeur "max-content"
   pour que la colonne "Bras de levier" reste alignée comme dans un tableau
   même quand "Masse au décollage" change de largeur une fois calculé
   (flex aurait fait dépendre la position de la 2e colonne de chaque ligne
   indépendamment). */
.masses-cote-a-cote {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 1.5rem;
    row-gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.masses-cote-a-cote strong {
    color: var(--bleu-aviation-fonce);
}

.donnees-enveloppe table td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.note-donnee-enveloppe {
    text-align: left !important;
    font-style: italic;
    font-size: 0.85em;
}

.svg-centrage {
    width: 100%;
    height: auto;
}

.svg-centrage polygon {
    fill-opacity: 0.12;
    stroke: none;
}

.svg-centrage polyline {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.svg-centrage .remplissage-cat_n { fill: var(--bleu-aviation); }
.svg-centrage .remplissage-cat_u { fill: #B5721A; }

.svg-centrage .contour-cat_n { stroke: var(--bleu-aviation); }
.svg-centrage .contour-cat_u { stroke: #B5721A; }

.svg-centrage .axe {
    stroke: var(--texte-att);
    stroke-width: 1;
}

.svg-centrage .grille-axe {
    stroke: var(--bordure);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.svg-centrage .etiquette-axe {
    fill: var(--texte-att);
    font-size: 13px;
}

.svg-centrage .titre-axe {
    font-size: 12px;
    font-weight: 600;
}

.svg-centrage #point-calcule {
    fill: #1A7A4A;
    stroke: #fff;
    stroke-width: 1.5;
}

/* --- Croquis avion (Procédures normales, inspection pré-vol) ------------
   Anciennement un SVG généré (silhouette/points/tracé de tournée) —
   abandonné après plusieurs itérations jamais satisfaisantes ; remplacé
   par l'image scannée du manuel papier (voir CLAUDE.md). Classes
   conservées pour l'habillage du conteneur/image, classes propres au SVG
   supprimées (silhouette-avion, chemin-tournee, point-tournee, etc.). ---- */

.croquis-avion-conteneur {
    max-width: 320px;
    margin: 1rem 0;
}

.croquis-avion {
    width: 100%;
    height: auto;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
}

.legende-centrage {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.legende-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legende-trait {
    display: inline-block;
    width: 1.1rem;
    border-top-width: 2px;
    border-top-style: solid;
}

.legende-trait.enveloppe-cat_n { border-color: var(--bleu-aviation); }
.legende-trait.enveloppe-cat_u { border-color: #B5721A; }

.legende-point {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #1A7A4A;
}

.resultats-masse-centrage {
    margin: 1rem 0;
    font-size: 0.95rem;
}

.resultats-masse-centrage strong {
    color: var(--bleu-aviation-fonce);
}

/* --- Check-liste (carte imprimable A4/A5) ---------------------------
   Reproduit le format ET les couleurs exactes de la carte papier d'origine
   (SY_CheckList_Normales.xlsx, lu cellule par cellule via openpyxl — voir
   la migration de seed pour le détail) : 4 colonnes, bandeaux de titre
   noir/gris/blanc(sans fond), fond jaune/gris clair repris tel quel de
   chaque cellule (l'alternance n'est pas parfaitement régulière dans le
   fichier source, ex: 2 lignes voisines gardent parfois le même fond —
   d'où un champ "fond" par item plutôt qu'un calcul d'alternance ici), et
   les quelques lignes de performances en couleur (rouge/orange/vert).
   Pensée pour être imprimée sur une page A4 paysage puis pliée en 2
   (-> A5), cf. @page plus bas. */
.carte-checkliste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 0.6rem;
    background: #fff;
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 0.72rem;
}

@media screen and (max-width: 900px) {
    .carte-checkliste { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
    .carte-checkliste { grid-template-columns: 1fr; }
}

.colonne-checkliste {
    display: flex;
    flex-direction: column;
}

.entete-checkliste {
    padding: 0.2rem 0.4rem;
    margin-top: 0.4rem;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.colonne-checkliste .entete-checkliste:first-child { margin-top: 0; }

.entete-checkliste.noir { background: #000000; color: #FFFFFF; }
.entete-checkliste.gris { background: #818181; color: #FFFFFF; }
.entete-checkliste.blanc {
    background: none;
    color: #000000;
    text-align: center;
}

.ligne-checkliste {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.1rem 0.4rem;
}

.ligne-checkliste.fond-jaune { background: #FFE699; }
.ligne-checkliste.fond-gris_clair { background: #E7E6E6; }
/* Zébrage propre à F-GLDK (palette bleue de son fichier source, différente
   du jaune/gris clair de F-GHSY — fidèle à chaque carte papier plutôt
   qu'une palette unique imposée à tous les avions). */
.ligne-checkliste.fond-bleu_clair { background: #E7F0FF; }
.ligne-checkliste.fond-bleu_gris { background: #ACB9CA; }
/* Zébrage propre à F-HATF (bleu-gris #ACB9CA repris tel quel de F-GLDK,
   mais 2e ton propre à ce fichier). */
.ligne-checkliste.fond-cyan_clair { background: #CDF9FF; }
/* Zébrage propre à F-HATP (fichier source distinct de celui de F-HATF,
   couleurs différentes malgré le même type d'avion). */
.ligne-checkliste.fond-saumon { background: #F8CBAD; }
.ligne-checkliste.fond-gris_bleu { background: #D6DCE4; }
/* Zébrage propre à F-HLKH (un seul ton + aucun fond, comme F-HATF —
   couleur exacte du fichier source, différente du cyan_clair de F-HATF). */
.ligne-checkliste.fond-cyan_pale { background: #CCFFFF; }

.intitule-checkliste, .reponse-checkliste {
    font-weight: 700;
    color: #000000;
}

.reponse-checkliste {
    text-align: right;
    white-space: nowrap;
}

.ligne-checkliste.couleur-rouge {
    background: #FF0000;
}
.ligne-checkliste.couleur-rouge .intitule-checkliste,
.ligne-checkliste.couleur-rouge .reponse-checkliste { color: #FFFFFF; }

.ligne-checkliste.couleur-orange { background: #F8CBAD; }

.ligne-checkliste.couleur-vert { background: #A9D08E; }

/* Mini-bloc "Performances" propre à F-HATF : teintes distinctes de celles
   déjà utilisées pour F-GHSY/F-GLDK, couleur exacte du fichier source
   (même règle que le zébrage) — .couleur-bleu n'avait jamais servi ici
   avant F-HATF (réservé jusque-là au check-list urgence). */
.ligne-checkliste.couleur-bleu { background: #00B0F0; }
.ligne-checkliste.couleur-orange_fonce { background: #ED7D31; }
.ligne-checkliste.couleur-orange_sature { background: #F4B084; }
.ligne-checkliste.couleur-vert_vif { background: #92D050; }

/* Mini-bloc "Performances" propre à F-HLKH : teintes distinctes de celles
   déjà utilisées ailleurs, couleur exacte du fichier source (même règle
   que le zébrage) — .couleur-rouge (déjà existante) réutilisée telle
   quelle pour "Vent de travers max." (même #FF0000 exact). */
.ligne-checkliste.couleur-orange_pale { background: #FFCC99; }
.ligne-checkliste.couleur-orange_dore { background: #FFCC00; }
.ligne-checkliste.couleur-vert_fluo { background: #00FF00; }
.ligne-checkliste.couleur-bleu_ciel { background: #00CCFF; }

/* --- Check-list urgence (2 pages A4, boîtes encadrées) --------------
   Format très différent de la check-list normale : pas de zébrage/bandeau
   plein, des boîtes encadrées (bordure noire fine + filet rouge à gauche)
   contenant plusieurs procédures titrées en rouge ou en noir selon la
   source (couleur exacte lue cellule par cellule, voir la migration de
   seed) — voir CLAUDE.md. 2 divs .carte-checkliste-urgence = 2 pages A4
   imprimées (repliées en 2 colonnes chacune), forcées par @media print
   plus bas. */
.carte-checkliste-urgence {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 4mm;
    background: #fff;
    margin-bottom: 1.5rem;
    font-size: 0.78rem;
}

@media screen and (max-width: 700px) {
    .carte-checkliste-urgence { grid-template-columns: 1fr; }
}

.colonne-urgence {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0.5rem;
}

.colonne-urgence.boite {
    border: 1px solid #000;
    border-left: 3px solid #FF0000;
    border-radius: 2px;
}

.entete-urgence {
    position: relative;
    text-align: center;
    font-weight: 700;
    margin-top: 0.6rem;
    padding: 0.15rem 0.3rem;
}

/* Immatriculation de l'avion : uniquement injectée dans le tout premier
   titre de chaque page (cf. _colonnes_urgence.html), positionnée en
   absolu à gauche de ce titre sur sa propre ligne — ne participe jamais
   au flux (aucune hauteur ajoutée), pour ne pas décaler le reste de la
   carte vers le bas ni casser le calibrage serré de l'impression
   (cf. règles @media print plus bas, pas de règle dédiée nécessaire ici
   puisque position:absolute retire l'élément du flux dans les deux cas). */
.immatriculation-urgence {
    position: absolute;
    left: 0.3rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: #000000;
}

/* Espace supplémentaire ciblé sous certains titres précis (pas un
   réglage global — cf. SectionCheckliste.espace_apres_titre) : évite de
   modifier .entete-urgence pour tout le monde, ce qui aurait aussi
   déplacé le rendu de F-GHSY (qui a, entre autres, son propre bloc
   "PRES DU SOL" sur sa propre carte). */
.entete-urgence.espace-apres-titre {
    margin-bottom: 0.5rem;
}

.colonne-urgence .entete-urgence:first-child { margin-top: 0; }

.entete-urgence.rouge { color: #FF0000; }
.entete-urgence.orange { color: #C45911; }
.entete-urgence.blanc { color: #000000; }
.entete-urgence.souligne { text-decoration: underline; }

.ligne-urgence {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.08rem 0.3rem;
    font-weight: 700;
    color: #000000;
}

.ligne-urgence.couleur-bleu .intitule-urgence,
.ligne-urgence.couleur-bleu .reponse-urgence {
    color: #0070C0;
}

.reponse-urgence {
    text-align: right;
    white-space: nowrap;
}

/* Impression : carte A4 paysage, repliable en 2 (-> A5). Les règles ne
   s'appliquent que sur la page Check-liste (marquée body.page-checkliste
   dans checkliste.html) — elles ne changent rien à l'impression du reste
   du site. Fonctionne aussi bien via le lien "Imprimer" que via un simple
   Ctrl+P, puisque rien n'est conditionné par du JS ici. */
@page {
    size: A4 landscape;
    margin: 10mm;
}

@media print {
    body.page-checkliste .site-header,
    body.page-checkliste .fil-ariane,
    body.page-checkliste .onglets,
    body.page-checkliste h1,
    body.page-checkliste .vide,
    body.page-checkliste .bouton-imprimer {
        display: none !important;
    }
    body.page-checkliste main.page { margin: 0; padding: 0; }

    /* Le padding/gap/font-size de la carte à l'écran est en rem, donc
       relatif à la racine <html> — pas à la carte elle-même — et ne
       rétrécit pas avec un simple changement de font-size ici. Toutes
       les dimensions sont donc reprises en unités absolues (mm/pt) pour
       cette carte précise à l'impression, calibrées pour que la colonne
       la plus haute (~42 lignes) tienne sur la hauteur utile d'une page
       A4 paysage (190mm avec la marge de 10mm définie dans @page),
       vérifié en générant un PDF d'impression réel (~155mm de haut
       obtenus, marge de sécurité incluse pour les imprimantes/navigateurs
       moins compacts qu'un rendu Chromium de référence). */
    body.page-checkliste .carte-checkliste {
        break-after: page;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 1.45mm;
        gap: 0 3.45mm;
        font-size: 7.9pt;
    }
    body.page-checkliste .carte-checkliste:last-of-type { break-after: auto; }

    body.page-checkliste .entete-checkliste {
        padding: 0.4mm 1.2mm;
        margin-top: 0.78mm;
        font-size: 7.9pt;
    }
    body.page-checkliste .colonne-checkliste .entete-checkliste:first-child { margin-top: 0; }

    body.page-checkliste .ligne-checkliste {
        padding: 0.2mm 1.2mm;
        gap: 1.2mm;
    }

    /* Check-list urgence : chaque .carte-checkliste-urgence = une page A4
       (2 colonnes/boîtes), forcé par break-after — dimensions en unités
       absolues pour la même raison que la check-list normale ci-dessus,
       calibrées puis vérifiées par export PDF réel (voir CLAUDE.md). */
    body.page-checkliste .carte-checkliste-urgence {
        break-after: page;
        margin: 0;
        gap: 0 3.8mm;
        font-size: 7.8pt;
    }
    body.page-checkliste .carte-checkliste-urgence:last-of-type { break-after: auto; }

    body.page-checkliste .colonne-urgence {
        padding: 0.95mm 1.9mm;
    }

    body.page-checkliste .entete-urgence {
        margin-top: 1.1mm;
        padding: 0.27mm 0.57mm;
        font-size: 7.8pt;
    }
    body.page-checkliste .entete-urgence.espace-apres-titre {
        margin-bottom: 1.2mm;
    }
    body.page-checkliste .colonne-urgence .entete-urgence:first-child { margin-top: 0; }

    body.page-checkliste .ligne-urgence {
        padding: 0.18mm 0.57mm;
        gap: 0.95mm;
    }

}