* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    background: #f4f6f8;
    color: #1a1a1a;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: #0b2545;
    color: #fff;
    padding: 0.75rem 1.5rem;
    gap: 0.5rem;
}

.navbar-brand a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.brand-logo { width: 32px; height: 32px; display: block; }

/* ====================== Animation de chargement ====================== */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.loading-overlay[hidden] { display: none; }
.loader { text-align: center; color: #fff; }
.loader-ring {
    width: 76px;
    height: 76px;
    margin: 0 auto 0.8rem;
    border: 5px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loader-spin 0.9s linear infinite;
}
.loader-logo {
    width: 42px;
    height: 42px;
    /* Contre-rotation pour garder le logo droit pendant que l'anneau tourne. */
    animation: loader-spin-rev 0.9s linear infinite;
}
.loader-gif { max-width: 140px; max-height: 140px; display: block; margin: 0 auto 0.6rem; }
.loader-text { font-size: 0.95rem; letter-spacing: 0.03em; }

.appearance-current { margin: 0.5rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.appearance-current small { color: #777; }
@keyframes loader-spin { to { transform: rotate(360deg); } }
@keyframes loader-spin-rev { to { transform: rotate(-360deg); } }

/* Petit spinner en ligne (ex. liste des compagnies) */
.inline-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid #c8d2e0;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
    vertical-align: middle;
}

.navbar-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.navbar-links a {
    color: #cfe0ff;
    text-decoration: none;
}

.navbar-links a:hover { color: #fff; }

.navbar-user {
    color: #9fb8e0;
    font-size: 0.9rem;
}

/* Menus déroulants de la barre de navigation (Admin, Mon compte) */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-toggle {
    background: none;
    border: 1px solid transparent;
    color: #cfe0ff;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}

.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.nav-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 190px;
    background: #12233f;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 0.35rem 0;
    z-index: 50;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.5rem 0.9rem;
    color: #dfe9fb;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

.nav-dropdown-menu .nav-dropdown-label {
    display: block;
    padding: 0.35rem 0.9rem 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #8aa4cc;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Sous-titres de section dans le menu Admin (regroupement des entrées). */
.nav-dropdown-menu .nav-dropdown-section {
    padding: 0.5rem 0.9rem 0.2rem;
    color: #7f9bc4;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Filet fin au-dessus des sections (sauf la première) pour séparer les blocs. */
.nav-dropdown-menu .nav-dropdown-section ~ .nav-dropdown-section,
.nav-dropdown-menu a + .nav-dropdown-section {
    margin-top: 0.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* ===== Sous-menus du menu Admin (survol souris / toucher doigt) ===== */
.nav-subgroup { position: relative; }
.nav-subtoggle {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
    width: 100%; padding: 0.5rem 0.9rem;
    background: none; border: none; cursor: pointer;
    color: #dfe9fb; font: inherit; font-size: 0.9rem; text-align: left;
    white-space: nowrap;
}
.nav-subgroup:hover > .nav-subtoggle,
.nav-subgroup.open > .nav-subtoggle { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-sub-arrow { color: #7f9bc4; font-size: 0.72rem; transition: transform 0.12s; }

.nav-submenu { display: none; }
.nav-submenu a {
    display: block; padding: 0.5rem 0.9rem;
    color: #dfe9fb; text-decoration: none; font-size: 0.9rem; white-space: nowrap;
}
.nav-submenu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Ordinateur : le sous-menu s'ouvre EN VOLET, à gauche de la section (le menu
   étant collé au bord droit). Ouverture au survol ou après un clic. */
@media (min-width: 641px) {
    .nav-subgroup:hover > .nav-submenu,
    .nav-subgroup.open > .nav-submenu {
        display: block;
        position: absolute; top: -0.35rem; right: 100%;
        min-width: 210px;
        background: #12233f;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        padding: 0.35rem 0;
    }
    .nav-subgroup:hover > .nav-subtoggle .nav-sub-arrow,
    .nav-subgroup.open > .nav-subtoggle .nav-sub-arrow { transform: rotate(180deg); }
}

/* Mobile / tactile : le sous-menu se déplie EN ACCORDÉON sous la section, au
   toucher (classe .open posée par le JS). */
@media (max-width: 640px) {
    .nav-subgroup.open > .nav-submenu { display: block; background: rgba(0, 0, 0, 0.18); }
    .nav-subgroup.open > .nav-submenu a { padding-left: 1.6rem; }
    .nav-subgroup.open > .nav-subtoggle .nav-sub-arrow { transform: rotate(90deg); }
    /* Sur mobile l'accordéon est en ligne : le menu peut défiler s'il est grand
       (pas de volet latéral à couper, donc l'overflow est sans risque ici). */
    .nav-dropdown-menu { max-height: 82vh; overflow-y: auto; }
}

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

.card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.card-narrow { max-width: 420px; margin: 3rem auto; }

.home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.home-header h1 { margin: 0.5rem 0; }

/* Le bouton "Filtres" n'est visible que sur mobile.
   Sélecteur volontairement plus spécifique que `.btn` pour ne pas être écrasé. */
.home-header .btn-filters-toggle { display: none; }

/* Boutons d'en-tête : présélections « Filtres rapides » + rafraîchir + Filtres,
   tous sur la même ligne, à droite du titre. */
.home-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.btn-preset { padding: 0.4rem 0.85rem; }
.btn-refresh { padding: 0.35rem 0.65rem; font-size: 1.15rem; line-height: 1; }
.btn-refresh.spinning { animation: btn-spin 0.8s linear; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

.filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-group { display: flex; flex-direction: column; min-width: 150px; }
.form-group label { font-size: 0.8rem; color: #555; margin-bottom: 0.25rem; }
.form-control { padding: 0.4rem 0.5rem; border: 1px solid #ccc; border-radius: 4px; }

.flights-count { color: #555; font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }

.form-hint { color: #555; font-size: 0.85rem; background: #f0f4fa; border-left: 3px solid #2563eb; padding: 0.5rem 0.7rem; border-radius: 4px; margin: 0.5rem 0 1rem; }
.field-error { color: #c0392b; font-size: 0.8rem; display: block; margin-top: 0.2rem; }

/* Filtre compagnies aériennes : liste de cases à cocher défilante. */
.airline-filter { min-width: 220px; }
.airline-box {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.35rem 0.5rem;
    background: #fff;
}
.airline-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.15rem 0;
    cursor: pointer;
}
.airline-option input { width: auto; }
.airline-empty { color: #888; font-size: 0.82rem; }

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
}
.btn-primary { background: #0b2545; color: #fff; }
.btn-primary:hover { background: #133a6b; }
.btn-danger { background: #c0392b; color: #fff; }
.btn-secondary { background: #e0e0e0; color: #333; }

.flights-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.flights-table th, .flights-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 0.9rem;
}

.flights-table thead th {
    background: #0b2545;
    color: #fff;
}

/* Porte accolée au n° de vol : réservée à l'affichage MOBILE (en cartes).
   Masquée sur ordinateur, où le tableau n'a pas de colonne Porte. */
.gate-inline { display: none; }

/* Fond des fiches selon le statut */
.flight-ontime { background: #e8f6ea; }    /* à temps : vert pâle */
.flight-delayed { background: #fff6da; }    /* en retard : jaune pâle */
/* Annulé (manuellement ou par la compagnie) : rouge pâle ET estompé comme un
   vol « fait » — plus besoin d'y toucher. La case Traité reste VIDE (aucune
   coche : personne ne l'a réellement traité, il est simplement annulé). */
.flight-cancelled { background: #fdecea; opacity: 0.5; }
.flight-departed { background: #eceef1; color: #8a8f98; }  /* parti : gris terni */
.flight-departed td { color: #8a8f98; }
/* Vol traité : grisé/atténué (la coche reste l'indicateur principal) */
.flight-checked { opacity: 0.5; }

.dest-name { color: #555; }

.fuel-input {
    width: 90px;
    padding: 0.25rem 0.4rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.85rem;
}
.fuel-input.fuel-saved { border-color: #2e8b57; background: #eaf7ea; }

/* Source cliquable + fenêtre d'explication des sources */
.source-link {
    color: #1d4ed8;
    text-decoration: underline dotted;
    cursor: pointer;
}
.source-link:hover { text-decoration: underline; }

/* Type d'avion cliquable -> popup capacités de réservoirs */
.aircraft-link {
    color: #1d4ed8;
    text-decoration: underline dotted;
    cursor: pointer;
}
.aircraft-link:hover { text-decoration: underline; }

/* Immatriculation avec une particularité : clignote pour inciter à cliquer */
.reg-note {
    cursor: pointer;
    font-weight: 700;
    color: #b45309;
    padding: 0 4px;
    border-radius: 4px;
    animation: reg-blink 1.1s ease-in-out infinite;
}
.reg-note:hover { text-decoration: underline; }
@keyframes reg-blink {
    0%, 100% { background: transparent; }
    50% { background: #ffd7a1; }
}
@media (prefers-reduced-motion: reduce) { .reg-note { animation: none; background: #ffd7a1; } }
.ac-table { width: 100%; border-collapse: collapse; margin: 0.4rem 0 0.2rem; }
.ac-table th, .ac-table td { padding: 0.3rem 0.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.ac-table thead th { color: #64748b; font-weight: 600; font-size: 0.8rem; border-bottom: 1px solid #e2e8f0; }
.ac-table tbody th { text-align: left; font-weight: 500; color: #0b2545; }
.ac-table tbody tr { border-bottom: 1px solid #f1f5f9; }

/* Lien « Météo » (centre de la ligne du bas) + popup METAR */
.weather-link {
    color: #1d4ed8;
    text-decoration: underline dotted;
    cursor: pointer;
    font-size: 0.8rem;
}
.weather-link:hover { text-decoration: underline; }
/* Risque météo élevé (≥ seuil) au départ ou à l'arrivée : « Météo » clignote
   pour attirer l'œil, comme l'immatriculation avec une particularité. */
.weather-link.wx-alert {
    color: #b91c1c;
    font-weight: 700;
    text-decoration: underline;
    padding: 0 4px;
    border-radius: 4px;
    animation: wx-blink 1.1s ease-in-out infinite;
}
@keyframes wx-blink {
    0%, 100% { background: transparent; }
    50% { background: #fecaca; }
}
@media (prefers-reduced-motion: reduce) { .weather-link.wx-alert { animation: none; background: #fecaca; } }

/* Heure prévue barrée + nouvelle heure (vol retardé) */
.old-time {
    color: #94a3b8;
    text-decoration: line-through;
}
.new-time {
    color: #b45309;
    font-weight: 700;
}
.delay-min {
    color: #b45309;
    font-weight: 600;
    font-size: 0.82em;
    white-space: nowrap;
}

/* Indicateur « avion entrant dans X min » à côté de l'ETA */
.eta-rel {
    color: #1d6f42;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.weather-block { margin-bottom: 0.8rem; }
.weather-block strong { display: block; color: #0b2545; }
.weather-forecast { font-size: 0.92rem; margin: 0.25rem 0 0.1rem; }
.wx-tag {
    display: inline-block;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 6px;
    margin-right: 0.25rem;
}
.wx-tag-orig { background: #7c3aed; }  /* provenance de l'avion : violet distinct du départ (bleu) */
.weather-obs { font-size: 0.82rem; color: #666; }
.weather-risk { font-size: 0.86rem; margin: 0.15rem 0 0.1rem; }

.info-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 37, 69, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.info-overlay[hidden] { display: none; }
.info-box {
    background: #fff;
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
.info-box h3 { margin-top: 0; }
.info-box ul { padding-left: 1.1rem; margin: 0.5rem 0; }
.info-box li { margin-bottom: 0.35rem; font-size: 0.9rem; }
.info-box .info-note { font-size: 0.85rem; color: #555; }
.info-box .btn { margin-top: 0.6rem; }

.checked-by {
    display: block;
    font-size: 0.72rem;
    color: #2e8b57;
    font-weight: 600;
    margin-top: 0.15rem;
    white-space: nowrap;
}

.eta-arrival {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: #1d4ed8;
    font-weight: 600;
}

.btn-cancel-toggle {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.72rem;
    border: 1px solid #c0392b;
    background: #fff;
    color: #c0392b;
    border-radius: 4px;
    cursor: pointer;
}
.btn-cancel-toggle:hover { background: #c0392b; color: #fff; }
.btn-cancel-toggle:disabled { opacity: 0.5; cursor: default; }

.status-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    color: #fff;
    white-space: nowrap;
}
.status-green { background: #2e8b57; }
.status-blue { background: #2563eb; }
.status-orange { background: #d97706; }
.status-red { background: #c0392b; }
.status-gray { background: #6b7280; }

.flash-messages { margin-bottom: 1rem; }
.flash {
    padding: 0.6rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}
.flash-success { background: #d4edda; color: #155724; }
.flash-danger { background: #f8d7da; color: #721c24; }
.flash-info { background: #d1ecf1; color: #0c5460; }
.flash-warning { background: #fff3cd; color: #856404; }

.footer {
    text-align: center;
    color: #888;
    font-size: 0.8rem;
    padding: 1rem 0 2rem;
}

table.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table.admin-table th, table.admin-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #eee;
    text-align: left;
}
table.admin-table thead th { background: #0b2545; color: #fff; }

.actions-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.admin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

/* ======================================================================
   AFFICHAGE COMPACT MOBILE
   En dessous de 768px le tableau des vols se transforme en cartes
   empilées, pensées pour une consultation rapide depuis un téléphone.
   ====================================================================== */
@media (max-width: 768px) {
    .container { margin: 1rem auto; padding: 0 0.6rem; }

    .home-header h1 { font-size: 1.3rem; }
    .home-header .btn-filters-toggle { display: inline-block; }

    /* Barre de filtres repliée par défaut, dépliée via le bouton "Filtres". */
    .filters-bar {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .filters-bar.filters-open { display: flex; }
    .filters-bar .form-group { min-width: 0; width: 100%; }
    .filters-bar .btn-primary { width: 100%; }

    /* Le tableau devient une liste de cartes. */
    .flights-table { background: transparent; box-shadow: none; }
    .flights-table thead { display: none; }

    .flights-table tbody { display: block; }

    .flights-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.6rem;
        row-gap: 0.2rem;
        background: #fff;
        border: 1px solid #e3e6ea;
        border-left: 4px solid #2563eb;
        border-radius: 8px;
        padding: 0.6rem 0.7rem;
        margin-bottom: 0.6rem;
        box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    }
    /* Bordure gauche + fond de carte selon le statut (mobile). */
    .flights-table tr.flight-ontime { border-left-color: #2e8b57; background: #e8f6ea; }
    .flights-table tr.flight-delayed { border-left-color: #d97706; background: #fff6da; }
    .flights-table tr.flight-cancelled { border-left-color: #c0392b; background: #fdecea; }
    .flights-table tr.flight-departed { border-left-color: #9aa0a8; background: #eceef1; }

    .flights-table td {
        border: none;
        padding: 0;
        font-size: 0.9rem;
    }

    /* Libellés gris injectés devant chaque champ du corps de la fiche. */
    .flights-table td.cell-secondary::before,
    .flights-table td.cell-dest::before {
        content: attr(data-label) " : ";
        color: #8a8f98;
        font-size: 0.68rem;
        text-transform: uppercase;
    }

    /* === Ligne 1 : #séq, coche, heure, n° vol, fuel (à droite) === */
    .cell-seq {
        order: 1;
        align-self: center;
        font-weight: 700;
        font-size: 0.8rem;
        color: #0b2545;
        background: #eef2f7;
        border-radius: 10px;
        padding: 0.05rem 0.45rem;
    }
    .cell-seq::before { content: "#"; }
    .cell-check { order: 2; align-self: center; }
    .cell-check input { width: 22px; height: 22px; }
    .cell-time {
        order: 3;
        font-size: 1.05rem;
        font-weight: 700;
        color: #0b2545;
    }
    .cell-flight {
        order: 4;
        font-weight: 600;
        font-size: 1rem;
    }
    /* Numéro de PORTE accolé au n° de vol, ex. « AC1143 (#24) ». Mobile
       seulement (le tableau d'ordinateur n'a pas de colonne Porte), et
       uniquement quand la porte est connue. */
    .gate-inline { display: inline; margin-left: 0.25rem; font-weight: 700; color: #92600a; }
    .cell-fuel {
        order: 5;
        margin-left: auto;       /* case fuel poussée tout à droite (coin haut-droit) */
        align-self: center;
        display: flex;
        align-items: center;
        gap: 0.2rem;
    }
    .cell-fuel::before { content: "⛽"; font-size: 0.95rem; }
    .cell-fuel .fuel-input { width: 74px; }

    /* Statut : seul sur sa propre ligne, sous la ligne 1 et au-dessus de l'ETA.
       Info "coché par…" à gauche, badge de statut à droite (row-reverse : le
       badge reste à droite même quand le vol n'est pas coché). */
    .cell-status {
        order: 6;
        flex: 1 1 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        align-self: flex-start;
        margin-top: 0.3rem;
    }
    .cell-status .checked-by { margin-top: 0; text-align: left; }

    /* === Corps : champs étiquetés sur 2 colonnes (Dest|ETA, CIE|Compagnie, Type|IMMAT) === */
    .cell-dest { order: 7; }
    .flights-table td[data-label="ETA"] { order: 8; }
    .flights-table td[data-label="Cie"] { order: 9; }
    .flights-table td[data-label="Compagnie"] { order: 10; }
    .flights-table td[data-label="Type"] { order: 11; }
    .flights-table td[data-label="Immat."] { order: 12; }
    .cell-source { order: 13; }
    .cell-weather { order: 14; }
    .cell-action { order: 15; }

    .cell-dest,
    .flights-table td[data-label="ETA"],
    .flights-table td[data-label="Cie"],
    .flights-table td[data-label="Compagnie"],
    .flights-table td[data-label="Type"],
    .flights-table td[data-label="Immat."] {
        flex: 0 0 46%;
        font-size: 0.85rem;
        color: #333;
    }
    .cell-dest { font-weight: 600; }

    /* Dernière ligne : Source (gauche) · Météo (centre) · Annuler (droite).
       Les deux côtés en flex:1 équilibrent l'espace -> Météo bien centré. */
    .cell-source {
        flex: 1 1 0;
        font-size: 0.8rem;
        color: #444;
        align-self: center;
        margin-top: 0.2rem;
    }
    .cell-weather {
        flex: 0 0 auto;
        text-align: center;
        align-self: center;
        margin-top: 0.2rem;
    }
    .cell-action {
        flex: 1 1 0;
        display: flex;
        justify-content: flex-end;   /* bouton Annuler poussé à l'extrême droite */
        align-self: center;
        margin-top: 0.2rem;
    }

    .admin-grid { grid-template-columns: 1fr; }

    /* Les tableaux admin défilent horizontalement plutôt que de déborder. */
    table.admin-table { display: block; overflow-x: auto; white-space: nowrap; }

    /* === Module « Au sol » en cartes (mobile) === */
    /* Chaque case de tâche : étiquette de la tâche + case à cocher côte à côte,
       en grille de 2 colonnes sous les infos du vol. */
    .sol-table .cell-ground {
        flex: 0 0 46%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
        background: #f6f8fa;
        border-radius: 6px;
        padding: 0.3rem 0.5rem;
        margin-top: 0.2rem;
    }
    .sol-table td.cell-ground::before {
        content: attr(data-label);
        color: #55606c;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .sol-table .ground-cell { flex-direction: row; gap: 0.4rem; }
    .sol-table .ground-toggle { width: 24px; height: 24px; }
    .sol-table .cell-progress {
        flex: 1 1 100%;
        margin-top: 0.4rem;
    }
    .sol-table td.cell-progress::before {
        content: "Progression : ";
        color: #8a8f98;
        font-size: 0.68rem;
        text-transform: uppercase;
    }
    .sol-table .cell-status { flex: 1 1 100%; }
}

/* ===================== Messagerie interne (chat) ===================== */
.chat-card { max-width: 760px; }
.chat-head { margin-bottom: 0.6rem; }
.chat-head h1 { display: inline-block; margin: 0.3rem 0 0; }
.chat-head-sub { display: block; color: #777; font-size: 0.82rem; }
.btn-sm { padding: 0.2rem 0.5rem; font-size: 0.8rem; }

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 56vh;
    overflow-y: auto;
    padding: 0.8rem;
    background: #f4f6f8;
    border: 1px solid #dbe2ea;
    border-radius: 8px;
    margin: 0.5rem 0;
}
.chat-msg { display: flex; }
.chat-msg.me { justify-content: flex-end; }
.chat-msg.them { justify-content: flex-start; }
.chat-bubble {
    max-width: 76%;
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
}
.chat-msg.me .chat-bubble { background: #0b2545; color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.them .chat-bubble { background: #fff; color: #1a1a1a; border: 1px solid #d7dee7; border-bottom-left-radius: 3px; }
.chat-who { font-size: 0.72rem; font-weight: 700; opacity: 0.75; margin-bottom: 0.1rem; }
.chat-body { white-space: pre-wrap; word-break: break-word; }
.chat-time { font-size: 0.68rem; opacity: 0.6; margin-top: 0.2rem; align-self: flex-end; }
.chat-empty { color: #888; text-align: center; padding: 1.2rem 0; }

.chat-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.chat-form textarea { flex: 1; resize: vertical; min-height: 2.4rem; }

/* Boîte de réception (super_admin) */
.chat-inbox { border: 1px solid #dbe2ea; border-radius: 8px; overflow: hidden; background: #fff; }
.inbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #eef1f5;
    text-decoration: none;
    color: #1a1a1a;
}
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: #f4f6f8; }
.inbox-row.unread { background: #f0f6ff; }
.inbox-row.unread .inbox-preview { color: #1a1a1a; font-weight: 600; }
.inbox-main { min-width: 0; }
.inbox-name { display: block; font-weight: 600; }
.inbox-role { font-weight: 400; color: #888; font-size: 0.78rem; margin-left: 0.4rem; }
.inbox-preview { display: block; color: #777; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.inbox-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; white-space: nowrap; }
.inbox-time { color: #999; font-size: 0.74rem; }

/* Badge rouge (compteur de non-lus) */
.badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.35rem;
    background: #d93025;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 999px;
}

/* Bouton « Messages » de la barre */
.nav-msg { position: relative; display: inline-flex; align-items: center; gap: 0.3rem; color: #cfe0ff; text-decoration: none; }
.nav-msg:hover { color: #fff; }
.nav-badge { position: absolute; top: -0.5rem; right: -0.6rem; }
@media (max-width: 640px) { .nav-msg-label { display: none; } }

/* ===================== Sélecteur de langue (globe) ===================== */
.lang-dropdown { margin-left: 0.5rem; }
.lang-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.globe-icon { display: block; flex: 0 0 auto; }
.lang-current { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; }
/* Ligne « Langue / Language » en tête du menu (séparateur) + choix cochés. */
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lang-menu a.on { color: #fff; font-weight: 600; }
.lang-menu a.on span { color: #7ec4ff; }

/* ===================== Nouvelle page d'accueil (landing) ===================== */
.landing-hero {
    background: linear-gradient(135deg, #0b2545 0%, #133a6b 100%);
    color: #fff;
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.landing-hero h1 { margin: 0 0 0.6rem; font-size: 1.9rem; }
.landing-lead { font-size: 1.15rem; color: #dbe7fb; margin: 0 auto 0.6rem; max-width: 620px; }
.landing-sub { color: #b9cbe8; margin: 0 auto 1.5rem; max-width: 640px; line-height: 1.5; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.landing-actions .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; }
.landing-actions .btn-secondary:hover { background: rgba(255,255,255,0.24); }

.landing-section-title { text-align: center; font-size: 1.3rem; color: #0b2545; margin: 0.5rem 0 1.25rem; }
.landing-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.feature-card {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.feature-icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    background: #eaf1fb; color: #2563eb;
    border-radius: 10px; margin-bottom: 0.9rem;
}
.feature-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: #0b2545; }
.feature-card p { margin: 0; color: #555; font-size: 0.92rem; line-height: 1.5; }
.landing-note { text-align: center; color: #777; font-size: 0.9rem; margin-bottom: 2rem; }

/* ===================== Module « Suivi au sol » (/sol) ===================== */
/* Le tableau /sol a une colonne par tâche (souvent nombreuses) : on le rend
   défilable horizontalement DANS sa boîte au lieu de laisser déborder la page,
   ce qui le garde bien centré dans le conteneur. */
.sol-scroll { overflow-x: auto; }
/* Badge « département » (fuel / sol / les deux) dans la liste des utilisateurs
   — pour voir d'un coup d'œil qui fait quoi. */
.sol-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px;
           font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.sol-tag-fuel { background: #fff3d6; color: #92600a; }
.sol-tag-sol  { background: #e0edff; color: #1e40af; }
.sol-tag-both { background: #e7ebf0; color: #334155; }
/* Cases de tâches au sol : case à cocher centrée + petit « par qui · heure »
   sous la case (comme la coche « Traité » du tableau des départs). */
.cell-ground { text-align: center; }
.sol-table .ground-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    cursor: pointer;
}
.sol-table .ground-toggle { width: 20px; height: 20px; cursor: pointer; }
.sol-table .ground-by {
    font-size: 0.68rem;
    color: #2e8b57;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.1;
}
/* Colonne d'une tâche accomplie : léger fond vert pour la lire d'un coup d'œil. */
.sol-table td.cell-ground.ground-done { background: #eaf7ee; }

/* Toggle « À faire seulement » de la page au sol. */
.sol-todo { display: inline-flex; align-items: center; margin: 0; }
.sol-todo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0b2545;
    cursor: pointer;
    white-space: nowrap;
}
.sol-todo-label input { width: 18px; height: 18px; cursor: pointer; }

/* Pastille de progression X/Y (verte quand tout est fait). */
.progress-badge {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #334;
    background: #e7ebf0;
    white-space: nowrap;
}
.progress-badge.progress-complete { background: #2e8b57; color: #fff; }
/* Ligne d'un vol entièrement prêt : léger liseré vert. */
.sol-table tr.ground-complete { box-shadow: inset 3px 0 0 #2e8b57; }

/* Tâche NON REQUISE pour ce vol : « — » discret au lieu d'une case. */
.sol-table td.cell-ground-na { background: repeating-linear-gradient(45deg, #f7f8fa, #f7f8fa 6px, #f1f3f6 6px, #f1f3f6 12px); }
.ground-na { color: #b3b9c2; font-weight: 700; }

/* Bouton ⚙ « tâches requises pour ce vol » (admins). */
.btn-flight-tasks {
    margin-left: 0.25rem; padding: 0.25rem 0.45rem;
    border: 1px solid #cbd3dd; background: #fff; color: #55606c;
    border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
.btn-flight-tasks:hover { background: #eef2f7; color: #0b2545; }

/* Fenêtre de choix des tâches d'un vol. */
.ftasks-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 0.8rem; text-align: left; }
.ftask-row { display: flex; align-items: center; gap: 0.45rem; }
.ftask-row input { width: 18px; height: 18px; }
.ftask-tag {
    margin-left: auto; font-size: 0.7rem; font-weight: 700;
    padding: 0.05rem 0.4rem; border-radius: 999px;
    background: #e7ebf0; color: #55606c; white-space: nowrap;
}
.ftask-tag.ftask-no { background: #f1f0ea; color: #8a8175; }
.ftask-tag.ftask-exc { background: #fff3d6; color: #92600a; }

/* Bouton « Demande » (par vol) + boîte de réception des demandes. */
.btn-request {
    padding: 0.25rem 0.55rem;
    border: 1px solid #2563eb;
    background: #fff;
    color: #2563eb;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-request:hover { background: #2563eb; color: #fff; }

.req-section { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; }
.req-section-done { color: #6b7280; }
.req-count {
    display: inline-block; min-width: 1.3rem; padding: 0 0.4rem;
    background: #2563eb; color: #fff; border-radius: 999px;
    font-size: 0.8rem; text-align: center;
}
.req-empty { color: #8a8f98; }
.req-list { display: flex; flex-direction: column; gap: 0.5rem; }
.req-card {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    background: #fff; border: 1px solid #e3e6ea; border-left: 4px solid #2563eb;
    border-radius: 8px; padding: 0.6rem 0.8rem;
}
.req-card.req-done { border-left-color: #9aa0a8; background: #f7f8fa; opacity: 0.85; }
.req-main { min-width: 0; }
.req-flight { font-size: 1rem; }
.req-flight .req-time { color: #55606c; font-size: 0.85rem; margin-left: 0.4rem; }
.req-service {
    display: inline-block; margin: 0.25rem 0; padding: 0.1rem 0.5rem;
    background: #eef2ff; color: #1e40af; border-radius: 10px;
    font-size: 0.8rem; font-weight: 600;
}
.req-service-note { background: #f1f0ea; color: #6b6b57; }
.req-note { white-space: pre-wrap; word-break: break-word; margin: 0.2rem 0; }
.req-meta { color: #8a8f98; font-size: 0.78rem; }
/* Demandeur : ressort dans la ligne grise, pour savoir QUI rappeler. */
.req-asker { color: #55606c; font-weight: 700; }
/* Immatriculation d'une demande (vol privé sans vol au tableau). */
.req-reg {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem;
    background: #eef2f7; color: #334155; border-radius: 6px;
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
}
.req-action { flex: 0 0 auto; margin: 0; }

/* ===== Nouvelle demande depuis une immatriculation (côté avitaillement) ===== */
.req-new {
    background: #fff; border: 1px solid #e3e6ea; border-radius: 8px;
    padding: 0.6rem 0.8rem; margin: 0.8rem 0;
}
.req-new-toggle {
    cursor: pointer; font-weight: 600; color: #0b2545; list-style: none;
}
.req-new-toggle::-webkit-details-marker { display: none; }
.req-new-toggle small { font-weight: 400; color: #8a8f98; margin-left: 0.3rem; }
.req-new[open] .req-new-toggle { margin-bottom: 0.7rem; }
.req-new-form .form-group { margin-bottom: 0.7rem; }
.req-new-fields { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.req-new-fields .form-group { flex: 1 1 200px; margin-bottom: 0.7rem; }

/* Menu déroulant à CHOIX MULTIPLE (cases à cocher) : plusieurs tâches pour un
   même avion en une seule demande. Cases à cocher plutôt qu'un <select multiple>
   (inutilisable au doigt sur un téléphone). */
.ms-drop { position: relative; }
.ms-summary {
    display: block; cursor: pointer; list-style: none;
    padding: 0.5rem 1.8rem 0.5rem 0.6rem;
    border: 1px solid #cbd3dd; border-radius: 4px; background: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ms-summary::-webkit-details-marker { display: none; }
.ms-summary::after {
    content: "▾"; position: absolute; right: 0.6rem; top: 0.5rem; color: #55606c;
}
.ms-drop[open] .ms-summary { border-color: #2563eb; }
.ms-panel {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
    background: #fff; border: 1px solid #cbd3dd; border-radius: 6px;
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.16);
    padding: 0.3rem; max-height: 240px; overflow-y: auto;
}
.ms-option {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.5rem; border-radius: 4px; cursor: pointer;
}
.ms-option:hover { background: #eef2f7; }
.ms-option input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* ===== Suppression d'un client : montrer ce qui va disparaître ===== */
.danger-box {
    background: #fdecea; border: 1px solid #f2b8b2; border-left: 5px solid #c0392b;
    border-radius: 8px; padding: 0.9rem 1rem; margin: 1rem 0;
}
.danger-title { margin: 0 0 0.5rem; font-weight: 800; color: #a5281b; }
.danger-list { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.danger-list li { margin-bottom: 0.2rem; }
.danger-list strong { font-variant-numeric: tabular-nums; }

/* ===== Services souscrits (offre à la carte) ===== */
.mod-set {
    border: 1px solid var(--line, #e3e6ea); border-radius: 8px;
    padding: 0.6rem 0.9rem 0.9rem; margin: 1rem 0;
}
.mod-set legend { font-weight: 700; color: #0b2545; padding: 0 0.35rem; font-size: 0.95rem; }
.mod-free { color: #1f7a44; font-weight: 600; margin-top: 0.5rem; }
.note-free {
    background: #e7f6ec; border: 1px solid #bfe3cc; border-radius: 8px;
    padding: 0.7rem 0.9rem; color: #1f7a44; font-size: 0.88rem;
    line-height: 1.5; margin: 1rem 0;
}

/* ===== Module « escales » : Réception (FBO) et côté équipage ===== */
/* Paires date + heure côte à côte. */
.dt-pair { display: flex; gap: 0.4rem; }
.dt-pair .form-control { flex: 1 1 auto; min-width: 0; }
/* Carburant : quantité + unité + type sur une ligne. */
.fuel-row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fuel-row .form-control { flex: 1 1 110px; min-width: 0; }
/* Bloc « Services au sol » : encadré et titré, pour qu'on ne puisse pas le
   manquer dans un formulaire long — et jamais masqué en silence. */
.svc-set {
    border: 1px solid #cbd3dd; border-radius: 8px;
    padding: 0.5rem 0.9rem 0.9rem; margin: 1.1rem 0;
}
.svc-set legend {
    font-weight: 700; color: #0b2545; padding: 0 0.35rem; font-size: 0.95rem;
}
.svc-set legend small { font-weight: 400; color: #8a8f98; }
.svc-set .ms-grid { border: 0; padding: 0; }

/* Grille de cases à cocher (services), lisible au doigt. */
.ms-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.2rem; border: 1px solid #e3e6ea; border-radius: 6px; padding: 0.4rem;
}

/* Carte d'escale (avion attendu). */
.visit-card {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    background: #fff; border: 1px solid #e3e6ea; border-left: 4px solid #2563eb;
    border-radius: 8px; padding: 0.7rem 0.9rem; text-decoration: none; color: #1a1a1a;
}
.visit-card:hover { background: #f7f9fc; }
.visit-card.visit-done { border-left-color: #2e8b57; background: #f4faf6; }
.visit-main { min-width: 0; }
.visit-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.visit-reg { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; color: #0b2545; }
.visit-type {
    background: #eef2f7; color: #334155; border-radius: 6px;
    padding: 0.05rem 0.4rem; font-size: 0.78rem; font-weight: 700;
}
/* Compagnie de l'appareil : « qui est-ce que je reçois ? ». Bleu, comme les
   services, pour ressortir sans voler la vedette à l'immatriculation. */
.visit-airline {
    background: #eef2ff; color: #1e40af; border-radius: 10px;
    padding: 0.05rem 0.5rem; font-size: 0.82rem; font-weight: 700;
}
.fiche-airline { font-size: 1.05rem; font-weight: 700; color: #1e40af; margin-top: 0.1rem; }
.visit-times {
    display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.25rem;
    font-size: 0.9rem; font-variant-numeric: tabular-nums;
}
.visit-arr { color: #1e40af; font-weight: 600; }
.visit-dep { color: #92600a; font-weight: 600; }
/* Pax + carburant : la ligne de préparation de l'escale. */
.visit-extras { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.2rem; }
.visit-fuel { font-size: 0.88rem; color: #92600a; font-weight: 600; }
.visit-pax { font-size: 0.88rem; color: #334155; font-weight: 600; font-variant-numeric: tabular-nums; }
.visit-progress { flex: 0 0 auto; }

/* Fiche d'escale (détail). */
.fiche-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.fiche-reg { font-size: 1.5rem; font-weight: 800; color: #0b2545; }
.fiche-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.8rem; margin-top: 1rem;
}
.fiche-lbl {
    display: block; font-size: 0.7rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: #8a8f98; font-weight: 700;
}
.etat-attente { color: #92600a; font-weight: 700; }

/* ===== Particularité d'un avion : l'information à voir d'un coup d'œil ===== */
.regnote-alert {
    background: #fff8e6; border: 1px solid #f5d78e; border-left: 5px solid #f5b301;
    border-radius: 8px; padding: 0.8rem 1rem; margin: 0.6rem 0 0.2rem;
}
.regnote-alert-head {
    font-size: 0.78rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.06em; color: #92600a; margin-bottom: 0.4rem;
}
.regnote-alert-text {
    margin: 0; white-space: pre-wrap; word-break: break-word;
    font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: #1a1a1a;
}
.regnote-alert-date { margin: 0.5rem 0 0; font-size: 0.78rem; color: #92600a; }
.regnote-none { color: #8a8f98; margin: 0.6rem 0; }
/* Le formulaire de signalement passe au second plan, séparé par un filet. */
.regnote-form { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid #e3e6ea; }

/* Résumé statistique de l'historique des demandes. */
.hist-summary { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.8rem 0; }
.hist-stat {
    flex: 1 1 120px; display: flex; flex-direction: column; align-items: center;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 0.7rem;
}
.hist-num { font-size: 1.7rem; font-weight: 800; color: #0b2545; line-height: 1.1; }
.hist-lbl { color: #8a8f98; font-size: 0.82rem; text-transform: uppercase; }

@media (max-width: 768px) {
    .sol-table .cell-request { flex: 1 1 100%; margin-top: 0.4rem; }
    .sol-table .cell-request .btn-request { width: 100%; padding: 0.5rem; }
    .req-card { flex-direction: column; align-items: stretch; }
    .req-action .btn { width: 100%; }
}