/* Mérignac vent — feuille de style.
 *
 * Conçue avec :
 *  - palette aviation (bleus profonds, ocre subtil pour la sécante)
 *  - sticky header avec backdrop-filter
 *  - cartes en relief léger (box-shadow douce)
 *  - hero gradient + élément décoratif SVG (rose des vents)
 *  - boutons pill pour la navigation chrono
 *  - mobile-first, accessible (focus visibles, contraste suffisant)
 */

:root {
    /* Palette */
    --bg: #f6f4ee;
    --bg-card: #ffffff;
    --text: #1a202c;
    --text-soft: #353c4a;
    --muted: #6a6f7a;
    --border: #e7e3d8;
    --border-strong: #d6d1c2;

    /* Accent : bleu deep (aviation/sky) */
    --accent: #1e3a8a;
    --accent-hover: #15306e;
    --accent-light: #dbe4f5;
    --accent-soft: #eaf0fa;

    /* Couleurs d'état */
    --green: #15803d;
    --green-bg: #e6f4ea;
    --yellow: #a16207;
    --yellow-bg: #fdf6df;
    --red: #b91c1c;
    --red-bg: #fde8e8;
    --gray: #525864;
    --gray-bg: #ececea;

    /* Couleur ocre pour la piste sécante */
    --ocre: #b08a3e;
    --ocre-bg: #fbf3df;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 24px -8px rgba(15, 23, 42, 0.18);

    /* Radius */
    --radius-sm: 0.3rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.85rem;

    /* Transitions */
    --t-fast: 120ms ease;
    --t-med: 200ms ease;
}

* { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--text);
    font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Photo de fond fixée + voile sombre dégradé pour donner de la profondeur
     * tout en gardant la lisibilité (les cartes blanches ressortent davantage). */
    background:
        linear-gradient(rgba(15, 23, 42, 0.45), rgba(15, 23, 42, 0.65)),
        url("/assets/img/bg.jpg") center/cover no-repeat fixed,
        var(--bg);
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.container {
    max-width: 920px;
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

/* =========================================================================
 * Sticky header avec blur
 * ===================================================================== */
.page-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.page-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    line-height: 1.2;
    color: var(--text);
}

.brand:hover { text-decoration: none; }

.brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
    transition: transform var(--t-fast);
}

.brand:hover .brand-logo { transform: rotate(-15deg); }

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.brand-sub {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 0.05rem;
    letter-spacing: 0.01em;
}

.page-header nav {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.page-header nav a {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--text-soft);
    transition: background var(--t-fast), color var(--t-fast);
}

.page-header nav a:hover {
    background: var(--accent-soft);
    color: var(--accent);
    text-decoration: none;
}

/* =========================================================================
 * Hero (page d'accueil)
 * ===================================================================== */
main { min-height: calc(100vh - 14rem); padding-bottom: 3rem; }

.hero {
    position: relative;
    margin: 1.25rem 0 1.5rem;
    padding: 2.5rem 2rem 2.25rem;
    background:
        radial-gradient(ellipse at 90% 10%, rgba(255,255,255,0.18) 0%, transparent 45%),
        linear-gradient(135deg, #0c2a55 0%, #1e3a8a 55%, #2563eb 100%);
    color: #f8fafc;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.hero::before {
    /* Rose des vents décorative en arrière-plan */
    content: '';
    position: absolute;
    right: -50px;
    top: -30px;
    width: 280px;
    height: 280px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='white' stroke-opacity='0.18' stroke-width='1.2'><circle cx='100' cy='100' r='90'/><circle cx='100' cy='100' r='70'/><circle cx='100' cy='100' r='50'/><circle cx='100' cy='100' r='25'/><line x1='100' y1='5' x2='100' y2='195'/><line x1='5' y1='100' x2='195' y2='100'/><line x1='30' y1='30' x2='170' y2='170'/><line x1='170' y1='30' x2='30' y2='170'/></g><polygon points='100,15 105,95 100,100 95,95' fill='rgba(255,255,255,0.35)'/><polygon points='100,185 95,105 100,100 105,105' fill='rgba(255,255,255,0.1)'/><text x='100' y='14' text-anchor='middle' fill='rgba(255,255,255,0.45)' font-family='sans-serif' font-size='10' font-weight='700'>N</text></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.85;
}

.hero h1 {
    color: #fff;
    margin: 0 0 0.5rem;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    position: relative;
}

.hero p {
    margin: 0;
    color: rgba(248, 250, 252, 0.92);
    max-width: 36rem;
    position: relative;
}

@media (min-width: 720px) {
    .hero { padding: 3rem 2.25rem 2.5rem; }
    .hero h1 { font-size: 2.2rem; }
}

/* =========================================================================
 * Cards
 * ===================================================================== */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-med);
}

.card:hover { box-shadow: var(--shadow-md); }

.card h1 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1.4rem;
    letter-spacing: -0.01em;
}

/* Pas de soulignement pointillé sur les abbr dans les titres */
.card h1 abbr,
.card h2 abbr {
    text-decoration: none;
    border-bottom: none;
    cursor: help;
}

.card h2 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
    color: var(--accent);
    letter-spacing: -0.005em;
}

/* Sous-titre explicatif (parenthèse) à côté d'un h2 — taille réduite, pas de gras. */
.card h2 .h2-sub {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-left: 0.4rem;
    color: var(--muted);
}

.card h3 { font-size: 1rem; }

.muted {
    color: var(--muted);
    font-size: 0.92rem;
}

/* =========================================================================
 * Forms (homepage)
 * ===================================================================== */
.form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.form-row label {
    display: flex;
    flex-direction: column;
    font-size: 0.88rem;
    color: var(--muted);
    gap: 0.3rem;
    font-weight: 500;
}

.form-row input {
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text);
    min-width: 8.5rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-row button {
    font: inherit;
    background: var(--accent);
    color: white;
    border: 0;
    padding: 0.55rem 1.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

.form-row button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
}

/* =========================================================================
 * Time navigation toolbar (page conditions)
 * ===================================================================== */
.time-nav {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
}

.time-nav__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.time-nav__row--arrows {
    justify-content: space-between;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--border);
}

/* Bouton "dernière observation" sur la rangée haute : pousse à droite, séparé. */
.time-nav__latest { margin-left: auto; }

.time-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.85rem;
    background: var(--bg);
    color: var(--accent);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}

/* Variante "Résumé" — un peu moins prééminent que le lien Conditions */
.time-nav__btn--toggle {
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
}
.time-nav__btn--toggle[aria-expanded="true"] {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Cellule actions : 2 boutons côte à côte sur une seule ligne.
   On garde le td en display:table-cell standard (mettre flex casse le
   layout de table — décalages entre lignes). Les boutons sont des
   inline-flex compactés. */
.actions-cell {
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
.actions-cell .time-nav__btn {
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
}
.actions-cell .time-nav__btn + .time-nav__btn {
    margin-left: 0.35rem;
}

/* Lignes cliquables (toggle du résumé sur clic n'importe où sur la ligne,
   sauf sur les liens internes / boutons d'action). */
tr.clickable-row {
    cursor: pointer;
}

/* Badge militaire à côté du callsign dans le tableau Détail vol par vol. */
.military-badge {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.95rem;
    cursor: help;
}

/* Bloc explicatif méthodologique en bas de tableau (anomalies). */
.footnote-block {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
}
.footnote-block h3,
.footnote-block h4 {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.4rem;
    color: var(--text);
    font-weight: 600;
}
.footnote-block h3:first-child,
.footnote-block h4:first-child { margin-top: 0; }
.footnote-block ul { padding-left: 1.2rem; }
.footnote-block li { margin-bottom: 0.4rem; }
.footnote-block > summary {
    cursor: pointer;
    list-style: none;
    color: var(--accent);
    padding: 0.4rem 0;
}
.footnote-block > summary::-webkit-details-marker { display: none; }
.footnote-block > summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 0.3rem;
    transition: transform 0.15s ease;
}
.footnote-block[open] > summary::before {
    transform: rotate(90deg);
}
.footnote-block > summary:hover { color: var(--accent-hover); }

.time-nav__btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.18);
}

.time-nav__current {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    padding: 0.25rem 0.75rem;
    min-width: 8rem;
    cursor: help;
}

.time-nav__current small {
    display: inline;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.78rem;
    margin-left: 0.4rem;
}

.time-nav__row--form {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.time-nav__row--form label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: var(--muted);
}

.time-nav__row--form input,
.time-nav__row--form select {
    font: inherit;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: white;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.time-nav__row--form input:focus,
.time-nav__row--form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.time-nav__row--form button {
    font: inherit;
    background: var(--accent);
    color: white;
    border: 0;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--t-fast);
}

.time-nav__row--form button:hover { background: var(--accent-hover); }

.time-nav__home {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--muted);
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
}

.time-nav__home:hover {
    background: var(--accent-soft);
    text-decoration: none;
}

@media (max-width: 640px) {
    .time-nav__row--arrows {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .time-nav__current {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 0.3rem;
    }
    .time-nav__btn { justify-content: center; }
    .time-nav__home { margin-left: 0; }
}

/* =========================================================================
 * Key/value lists
 * ===================================================================== */
.kv {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 4rem;
}

.kv li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px dashed var(--border);
    padding: 0.3rem 0;
    gap: 1rem;
}

.kv span { color: var(--muted); font-size: 0.88rem; flex-shrink: 0; }
.kv strong { font-weight: 600; text-align: right; }

/* Variante de .kv où chaque ligne est cliquable (lien plein) — utilisée
 * notamment dans la timeline pour ouvrir les conditions à l'horaire choisi. */
/* Variante cliquable utilisée par la timeline (chips QFU). On force 1
 * colonne dès qu'il y a 1+ chip parce que les chips prennent vite la
 * place de 2 colonnes côte à côte. */
.kv--clickable { grid-template-columns: 1fr; }
.kv--clickable li { padding: 0; }
.kv--clickable li > a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    margin: -0.45rem -0.5rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background var(--t-fast);
}
.direction-tag { font-size: 0.78rem; white-space: nowrap; }

.kv--clickable li > a > span { color: var(--muted); font-size: 0.88rem; flex-shrink: 0; }
.kv--clickable li > a > strong { font-weight: 600; text-align: right; }
.kv--clickable li > a:hover {
    background: var(--accent-soft);
    text-decoration: none;
}
.kv--clickable li > a:hover strong { color: var(--accent); }

/* Filtre côté timeline : afficher uniquement les créneaux où la 11/29 a
 * reçu au moins un avion. Pratique pour identifier rapidement les
 * fenêtres d'usage de la piste sécante sur une journée. */
.runway-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0.4rem 0 0.8rem;
    font-size: 0.92rem;
}
.runway-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.runway-filter__toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 1.05rem;
    height: 1.05rem;
}
.runway-filter__count { font-size: 0.85rem; }

/* Conteneur des chips QFU dans la timeline (un ou plusieurs QFU détectés
 * dans le créneau de 30 min). Chaque chip est un bloc visuel distinct
 * pour que la séparation soit lisible quand il y en a plusieurs. */
/* Sélecteur spécifique pour battre la règle parente
 * `.kv--clickable li > a > span` (qui imposait flex-shrink: 0 et un style
 * gris/petit hérité du span de gauche, l'heure). Les chips ont leurs
 * propres couleurs/tailles ET doivent pouvoir wrapper sur plusieurs
 * lignes quand l'écran est étroit. */
.kv--clickable li > a > span.runway-cell {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.4rem;
    justify-content: flex-end;
    font-weight: 400;
    color: var(--text);
    font-size: 1rem;
    flex: 1 1 0;
    min-width: 0;
}
.runway-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0.7rem;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}
.runway-chip__name { font-weight: 600; color: var(--accent); }
.runway-chip__count { font-size: 0.85rem; color: var(--muted); font-weight: 400; }

/* Pistes 11/29 — coloration nuancée selon le verdict de cohérence vent
 * calculé serveur (App\Domain\Service\CoherenceEvaluator). Palette alignée
 * sur celle des badges level-* (page Anomalies) et verdict--* (Conditions).
 *
 *  - justified              : vert  → bascule cohérente avec le vent
 *  - marginal               : orange → défendable mais à la marge
 *  - questionable-marginal  : rouge clair → proche du seuil AIP (10-15 kt)
 *  - questionable-strong    : rouge fort  → hors marge AIP (< 10 kt)
 *  - undetermined           : gris  → vent calme/variable ou pas de verdict
 */
.runway-chip--justified {
    background: var(--green-bg);
    border-color: var(--green);
}
.runway-chip--justified .runway-chip__name { color: var(--green); }

.runway-chip--marginal {
    background: var(--yellow-bg);
    border-color: var(--yellow);
}
.runway-chip--marginal .runway-chip__name { color: var(--yellow); }

.runway-chip--questionable-marginal {
    background: #fef3c7;
    border-color: #fcd34d;
}
.runway-chip--questionable-marginal .runway-chip__name { color: #92400e; }

.runway-chip--questionable-strong {
    background: var(--red-bg);
    border-color: var(--red);
}
.runway-chip--questionable-strong .runway-chip__name { color: var(--red); }

.runway-chip--undetermined {
    background: var(--gray-bg);
    border-color: var(--border);
}
.runway-chip--undetermined .runway-chip__name { color: var(--gray); }

/* 05/23 fermée par NOTAM : bascule 11/29 imposée → verdict vent neutralisé.
 * Gris à bordure pointillée pour se distinguer du simple "indéterminé". */
.runway-chip--imposed {
    background: var(--gray-bg);
    border-style: dashed;
    border-color: var(--gray);
    opacity: 0.9;
}
.runway-chip--imposed .runway-chip__name { color: var(--gray); }

/* Badge permanent « 05/23 fermée » sur les créneaux où la bascule 11/29 est
 * imposée par NOTAM. Pastille grise discrète, alignée avec les chips. */
.runway-notam {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gray);
    background: var(--gray-bg);
    border: 1px dashed var(--gray);
    border-radius: 999px;
    white-space: nowrap;
}

/* Compat ascendante : ancienne classe émise par les versions précédentes du
 * timeline.js. Conservée comme alias rouge fort pour ne pas casser un cache
 * navigateur agressif qui aurait gardé l'ancien JS. À retirer après stabilité. */
.runway-chip--secondary {
    background: var(--red-bg);
    border-color: var(--red);
}
.runway-chip--secondary .runway-chip__name { color: var(--red); }


/* =========================================================================
 * Tables
 * ===================================================================== */

/* Wrapper de scroll horizontal pour les tableaux denses sur mobile.
 * À appliquer en parent direct du <table> (ex: <div class="table-scroll">).
 * Sur grand écran : pas de scroll, le tableau prend la largeur du conteneur.
 * Sur petit écran (<= 720px) : règles activées plus bas dans la media query. */
.table-scroll {
    /* En desktop, ne fait rien — le tableau se comporte normalement. */
}

.rwy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.rwy-table th,
.rwy-table td {
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
}

.rwy-table th {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rwy-table tbody tr:hover { background: var(--bg); }

/* Lignes des avions sur la piste secante 11/29 — fond rouge clair, en
   coherence avec le verdict 'questionable' du bloc Evaluation neutre. */
.rwy-table tbody tr.rwy-table__secondary {
    background: var(--red-bg);
}
.rwy-table tbody tr.rwy-table__secondary:hover {
    background: #fbd0d0;
}

/* Usage 11/29 imposé par fermeture NOTAM de la 05/23 : ligne neutre (gris)
 * au lieu du rouge — l'usage n'est pas reprochable. */
.rwy-table tbody tr.rwy-table__imposed {
    background: var(--gray-bg);
}
.rwy-table tbody tr.rwy-table__imposed:hover {
    background: #e2e2df;
}

/* Tableau "Composantes vent par piste" en mode regroupé */
.rwy-table--grouped .rwy-type {
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    border-right: 4px solid;
    width: 7.5rem;
}

.rwy-type strong { display: block; font-size: 1rem; color: var(--text); }
.rwy-type small { display: block; color: var(--muted); font-size: 0.75rem; margin-top: 0.15rem; }

.rwy-type--main {
    background: var(--accent-soft);
    border-right-color: var(--accent);
}

.rwy-type--secondary {
    background: var(--ocre-bg);
    border-right-color: var(--ocre);
}

.rwy-cardinal {
    font-weight: normal;
    font-size: 0.85rem;
    margin-left: 0.3rem;
}

/* Cellule de cisaillement : surlignage discret quand c'est notable. */
.shear--leger { /* léger : aucun surlignage */ }
.shear--modere { background: var(--yellow-bg); }
.shear--fort   { background: var(--red-bg); }
.shear--severe { background: var(--red-bg); }

/* Vent traversier : même logique de surlignage selon le seuil. */
.cw--leger { /* sous le seuil : pas de fond */ }
.cw--modere { background: var(--yellow-bg); font-weight: 600; }
.cw--fort   { background: var(--red-bg); font-weight: 700; color: var(--red); }

/* Badge « jour de maintenance balisage AIP » : repère discret violet/cyan,
 * pas alarmiste, juste contextuel. */
.maint-tag {
    display: inline-block;
    background: #ede7f6;
    color: #5e35b1;
    border: 1px solid #d1c4e9;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Badge de niveau de questionnabilité d'une bascule (page Anomalies) :
 *  - INDÉFENDABLE (rouge) : cross-23 < 10 kt, cas en béton pour réclamer.
 *  - MARGINAL (ambre)     : cross-23 entre 10 et 15 kt, défendable côté aéroport.
 *  - VENT CALME (slate)   : vent variable / non orienté, hors logique vent.
 * Pensé pour aider le riverain à concentrer son énergie sur les cas
 * vraiment indéfendables. */
.level-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid transparent;
}
.level-badge--strong {
    background: var(--red-bg);
    color: var(--red);
    border-color: var(--red);
}
.level-badge--marginal {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.level-badge--undetermined {
    background: var(--gray-bg);
    color: var(--gray);
    border-color: var(--border);
}

/* Ligne courte « ⚙ jour de maintenance balisage » sous le titre d'une page conditions
 * (uniquement sur les mardis pertinents : semaine impaire = maintenance 05/23). */
.maint-line {
    margin: 0.55rem 0 0;
}

/* Bloc explicatif maintenance dans le bloc Évaluation neutre. */
.maint-explain {
    background: #f3eafe;
    border-left: 4px solid #5e35b1;
    padding: 0.6rem 0.85rem;
    margin: 0.65rem 0;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.55;
}
.maint-explain a { color: #5e35b1; }

/* Bandeau "piste 05/23 fermée par NOTAM" en tête du bloc Évaluation. Neutre
 * (gris) : il indique que la bascule 11/29 est imposée, pas reprochable. */
.closure-banner {
    background: var(--gray-bg);
    border-left: 4px solid var(--gray);
    padding: 0.6rem 0.85rem;
    margin: 0.65rem 0;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--text-soft);
    line-height: 1.55;
}

/* Bloc citation AIP officielle */
.aip-quote {
    margin: 0.85rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    font-style: italic;
    color: var(--text);
    line-height: 1.55;
}
.aip-quote strong { font-style: normal; }

/* Liste des NOTAM en vigueur */
.notam-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
}
.notam {
    background: var(--bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gray);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0;
}
.notam--preferred { border-left-color: var(--red); background: var(--red-bg); }
.notam--secondary { border-left-color: var(--ocre); background: var(--ocre-bg); }
.notam--all       { border-left-color: var(--red); background: var(--red-bg); }

.notam__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin-bottom: 0.35rem;
}
.notam__id {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--accent);
}
.notam__cat {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--gray-bg);
    color: var(--gray);
}
.notam__cat--runway_closure   { background: var(--red-bg); color: var(--red); }
.notam__cat--ils_unserviceable{ background: var(--yellow-bg); color: var(--yellow); }
.notam__cat--taxiway          { background: var(--accent-soft); color: var(--accent); }
.notam__cat--airspace         { background: var(--accent-soft); color: var(--accent); }

.notam__rwy {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.notam__period {
    font-size: 0.88rem;
    color: var(--text-soft);
    margin-bottom: 0.3rem;
}
.notam__text {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    background: white;
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    margin: 0.3rem 0 0;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text);
}

.shear-tag {
    font-size: 0.78rem;
    font-weight: 600;
    margin-left: 0.25rem;
    text-transform: lowercase;
    letter-spacing: 0;
}
.shear-tag--modere { color: var(--yellow); }
.shear-tag--fort   { color: var(--red); }
.shear-tag--severe { color: var(--red); text-transform: uppercase; }

/* Pagination simple : prev / page courante / next */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    flex-wrap: wrap;
}
.pagination__current {
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.pagination__disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* =========================================================================
 * Badges
 * ===================================================================== */
.badge {
    display: inline-block;
    background: var(--accent);
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge--reco { background: var(--green); }

/* =========================================================================
 * METAR brut
 * ===================================================================== */
.metar {
    background: #1e293b;
    color: #e2e8f0;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    font-family: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    margin: 0;
    line-height: 1.55;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* =========================================================================
 * Verdict
 * ===================================================================== */
.verdict { border-left: 5px solid var(--gray); }
.verdict-level { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.3rem; letter-spacing: -0.005em; }

.verdict--coherent      { background: var(--green-bg); border-color: var(--green); }
.verdict--coherent .verdict-level,
.verdict--coherent h2   { color: var(--green); }

.verdict--marginal      { background: var(--yellow-bg); border-color: var(--yellow); }
.verdict--marginal .verdict-level,
.verdict--marginal h2   { color: var(--yellow); }

.verdict--questionable  { background: var(--red-bg); border-color: var(--red); }
.verdict--questionable .verdict-level,
.verdict--questionable h2 { color: var(--red); }

.verdict--unknown       { background: var(--gray-bg); border-color: var(--gray); }
.verdict--unknown .verdict-level { color: var(--gray); }

/* 05/23 fermée par NOTAM : on neutralise visuellement le verdict vent
 * (gris), il n'est pas opposable car la 11/29 est imposée. */
.verdict--closed        { background: var(--gray-bg); border-color: var(--gray); }
.verdict--closed .verdict-level,
.verdict--closed h2     { color: var(--gray); }

/* Bandeau d'information neutre (ex. fermeture de piste sur la timeline). */
.notice--closure { background: var(--gray-bg); border-left: 5px solid var(--gray); }
.notice--closure .notam__id { font-weight: 700; }
.notam-list--compact { list-style: none; padding-left: 0; margin: 0.5rem 0 0; }
.notam-list--compact li { margin: 0.2rem 0; }

.footnote { font-size: 0.85rem; margin-bottom: 0; }

.error {
    background: var(--red-bg);
    border-color: var(--red);
    color: var(--red);
}

.warn { background: var(--yellow-bg); }

.meta, .hint {
    margin: 1rem 0;
    padding: 0.85rem 1.1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.93rem;
    color: var(--text-soft);
    box-shadow: var(--shadow-sm);
}

.meta p, .hint p { margin: 0; }
.meta.warn { background: var(--yellow-bg); border-color: var(--yellow); color: var(--yellow); }
.hint { background: var(--accent-soft); border-color: var(--accent-light); color: var(--text-soft); }
.hint a { font-weight: 600; }

/* Lien d'appel à l'action (call-to-action) — proéminent, transforme légèrement au survol */
.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cta-link:hover {
    background: var(--accent-hover);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(30, 58, 138, 0.2);
}

.back {
    display: inline-block;
    padding: 0.4rem 0;
    color: var(--muted);
}

/* =========================================================================
 * Aircraft list (details)
 * ===================================================================== */
.aircraft-list {
    margin-top: 0.85rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.85rem;
}

.aircraft-list summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
    padding: 0.4rem 0;
    list-style: none;
    user-select: none;
}

.aircraft-list summary::before {
    content: "▸ ";
    transition: transform var(--t-fast);
    display: inline-block;
}

.aircraft-list[open] summary::before {
    transform: rotate(90deg);
}

.aircraft-list summary:hover { color: var(--accent-hover); }

.aircraft-list table { margin-top: 0.6rem; }

/* =========================================================================
 * Footer
 * ===================================================================== */
.page-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 1.25rem 0;
    margin-top: 3rem;
    font-size: 0.88rem;
    color: var(--text-soft);
}

.page-footer p { margin: 0.25rem 0; }
.page-footer a { color: var(--accent); }

/* =========================================================================
 * Responsive
 * ===================================================================== */
@media (max-width: 720px) {
    /* Sur mobile, le sous-titre du brand encombre — on le cache, le logo + nom suffisent. */
    .brand-sub { display: none; }
    /* Tableaux denses : police légèrement plus petite pour limiter la largeur */
    .rwy-table { font-size: 0.85rem; }
    .rwy-table th, .rwy-table td { padding: 0.4rem 0.55rem; white-space: nowrap; }
    /* Le wrapper de scroll permet le défilement horizontal des tableaux denses,
     * avec un voile dégradé sur les bords pour signaler la possibilité de scroller. */
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.25rem;
        padding: 0 0.25rem;
        background-image:
            linear-gradient(to right, white 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), white 70%) right center,
            linear-gradient(to right, rgba(15,23,42,0.08), rgba(15,23,42,0)),
            linear-gradient(to right, rgba(15,23,42,0), rgba(15,23,42,0.08)) right center;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
    .table-scroll > table {
        min-width: max-content;
    }
    /* Indicateur visuel sur mobile que la ligne est cliquable pour déplier
     * le résumé. Pivote en ⌄ quand la ligne est ouverte (aria-expanded). */
    .row-toggle-affordance {
        display: inline-block;
        margin-left: 0.4rem;
        color: var(--accent);
        font-size: 1.2rem;
        font-weight: 700;
        line-height: 1;
        vertical-align: -2px;
        transition: transform 0.15s ease;
    }
    tr.clickable-row[aria-expanded='true'] .row-toggle-affordance {
        transform: rotate(90deg);
    }
}

/* Sur desktop, le bouton "Résumé" suffit, on cache l'indicateur mobile. */
@media (min-width: 721px) {
    .row-toggle-affordance { display: none; }
}

@media (max-width: 480px) {
    .container { padding: 0.85rem 1rem; }
    .kv { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; align-items: stretch; }
    .form-row label { width: 100%; }
    .card { padding: 1rem 1.1rem; }
    .hero { padding: 2rem 1.25rem; }
    .hero h1 { font-size: 1.55rem; }
    .rwy-table--grouped .rwy-type { width: auto; padding: 0.45rem 0.5rem; }
    .brand-name { font-size: 1.05rem; }
    .brand-logo { width: 32px; height: 32px; }
    .page-header nav a { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
    .time-nav { padding: 0.6rem 0.7rem; }
    .time-nav__btn { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
    .time-nav__current { font-size: 0.95rem; }
    /* Cellules d'altitude / cap font moins de retour à la ligne forcé */
    .rwy-table th, .rwy-table td { padding: 0.35rem 0.5rem; }
}

/* =========================================================================
 * Anti-FOUC pour les détails ouverts/fermés
 * ===================================================================== */
.aircraft-list summary::-webkit-details-marker { display: none; }

/* Abaque (échelle de lecture) en bloc dépliant. */
.abaque {
    margin-top: 1rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.85rem;
}
.abaque > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent);
    padding: 0.4rem 0;
    list-style: none;
    user-select: none;
}
.abaque > summary::before {
    content: "▸ ";
    transition: transform var(--t-fast);
    display: inline-block;
}
.abaque[open] > summary::before { transform: rotate(90deg); }
.abaque > summary::-webkit-details-marker { display: none; }
.abaque > summary:hover { color: var(--accent-hover); }

.abaque-table { margin-top: 0.6rem; font-size: 0.88rem; }
.abaque-table th, .abaque-table td {
    text-align: center;
    vertical-align: middle;
    padding: 0.4rem 0.5rem;
}
.abaque-table tbody th {
    text-align: left;
    background: var(--bg);
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.abaque-table thead th:first-child { background: transparent; }

/* Bloc « Résumé copiable pour ce vol » dans les listes de vols.
   Le resume reprend la couleur du vol auquel il est rattache pour
   etablir le lien visuel — sinon l'utilisateur ne sait pas a quel
   vol il appartient. */
.summary-row > td { padding: 0; background: var(--bg); }
.summary-row--secondary > td { background: var(--red-bg); }
.summary-row--imposed > td { background: var(--gray-bg); }
/* Pas de bordure entre la ligne du vol 11/29 et son resume. */
.rwy-table tbody tr.rwy-table__secondary + .summary-row--secondary > td,
.rwy-table tbody tr.rwy-table__imposed + .summary-row--imposed > td {
    border-top: none;
}
.rwy-table tbody tr.rwy-table__secondary,
.rwy-table tbody tr.rwy-table__imposed {
    border-bottom: none;
}
.summary-block {
    margin: 0;
    padding: 0.6rem 0.85rem 0.6rem 2rem;
    background: transparent;
    border-radius: 0;
    border: none;
    border-left: 3px solid #d97706;
    /* Ancré au bord gauche du conteneur scrollable (.table-scroll). Sur
     * mobile, le td colspan=6 fait toute la largeur du tableau (≫ viewport)
     * et le résumé serait poussé hors écran. Avec sticky + width = 100cqi
     * (= largeur visible de .table-scroll grâce à container-type plus bas),
     * le résumé reste cadré sur la zone visible. */
    position: sticky;
    left: 0;
    box-sizing: border-box;
    width: 100cqi;
    max-width: 100cqi;
}
.table-scroll { container-type: inline-size; }

/* Bloc dépliant pour les données techniques brutes (NOTAM / METAR / TAF) */
/* Groupes par jour sur la page anomalies — un <details> par jour. */
.day-group {
    margin: 0.6rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}
.day-group__summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    background: var(--bg);
    font-weight: 600;
    color: var(--accent);
    list-style: none;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}
.day-group__summary::before {
    content: "▸";
    transition: transform var(--t-fast);
    color: var(--accent);
}
.day-group[open] > .day-group__summary::before { transform: rotate(90deg); }
.day-group > .day-group__summary::-webkit-details-marker { display: none; }
.day-group__date { font-size: 1.05rem; }
.day-group__count { font-size: 0.9rem; }
.day-group .table-scroll { border-top: 1px solid var(--border); }

.raw-data > details > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.2rem 0;
    color: var(--accent);
}
.raw-data > details > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform var(--t-fast);
    color: var(--accent);
    font-weight: 700;
}
.raw-data > details[open] > summary::before { transform: rotate(90deg); }
.raw-data > details > summary::-webkit-details-marker { display: none; }
.raw-data > details > summary:hover { color: var(--accent-hover); }
.raw-data__title {
    font-weight: 700;
    font-size: 1.1rem;
}
.raw-data__hint { font-size: 0.85rem; }
.raw-data__body { margin-top: 0.85rem; }
.raw-data__body h3 {
    margin-top: 1.4rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    color: var(--accent);
}
.raw-data__body h3:first-child { margin-top: 0; }

/* Liste des tendances METAR (TEMPO/BECMG/PROBxx) */
.trend-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}
.trend {
    background: var(--bg);
    border-left: 3px solid var(--border);
    padding: 0.5rem 0.85rem;
    margin: 0.4rem 0;
    border-radius: 0 4px 4px 0;
}
.trend--tempo, .trend--prob30-tempo, .trend--prob40-tempo {
    border-left-color: #d97706; /* orange : prévision intermittente */
    background: #fffbeb;
}
.trend--becmg { border-left-color: #2563eb; background: #eff6ff; }
.trend--nosig { border-left-color: #16a34a; background: #f0fdf4; }
.trend--prob30, .trend--prob40 {
    border-left-color: #d97706;
    background: #fffbeb;
}
.trend__type {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
}
.trend__summary {
    margin-top: 0.3rem;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.trend__note {
    margin-top: 0.4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 3px;
    font-size: 0.88rem;
}
.trend__note--alert {
    background: #fef3c7;
    color: #78350f;
    border-left: 3px solid #d97706;
}
.trend__note--info {
    background: #f1f5f9;
    color: var(--muted);
    border-left: 3px solid var(--border);
}

/* Encadré tendance dans le bloc verdict.
   --alert (orange) : tendance susceptible de motiver une bascule.
   --info  (gris)   : tendance presente mais en deca des seuils. */
.trend-callout {
    margin: 1rem 0 0.5rem;
    padding: 0.85rem 1rem;
    border-radius: 0 6px 6px 0;
}
.trend-callout--alert {
    background: #fffbeb;
    border-left: 4px solid #d97706;
}
.trend-callout--info {
    background: #f1f5f9;
    border-left: 4px solid var(--border);
}
.trend-callout__lead {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    color: var(--muted);
}
.trend-callout__list {
    margin: 0.4rem 0 0.6rem 1.2rem;
    padding: 0;
    font-size: 0.92rem;
    color: var(--muted);
}
.trend-callout__list li {
    margin-bottom: 0.2rem;
}
.trend-callout__warning {
    margin: 0.6rem 0 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.summary-actions {
    margin: 0.6rem 0 0.4rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
}
.copy-btn {
    font: inherit;
    background: var(--accent);
    color: white;
    border: 0;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
}
.copy-btn:hover { background: var(--accent-hover); }
.copy-feedback {
    font-size: 0.85rem;
    color: var(--green);
    font-weight: 600;
}

.summary-text {
    background: white;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 24rem;
    overflow-y: auto;
}