@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root
{
    --navy: #082e55;
    --navy2: #0b416f;
    --blue: #0876e8;
    --blue2: #eaf4ff;
    --text: #142b49;
    --muted: #657891;
    --line: #dbe5ef;
    --bg: #f3f7fb;
    --green: #16834a;
    --red: #c93636;
    --amber: #a96300;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(17,49,83,.06)
}
*
{
    box-sizing: border-box
}
body
{
    margin: 0;
    font-family: Inter,Arial,sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 14px
}
button,input,select
{
    font: inherit
}
button
{
    cursor: pointer
}

/* ==========================================
   BANDEAU INSTITUTIONNEL — ARMÉE DE L'AIR
   ========================================== */

.masthead {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 120px;
    align-items: center;
    gap: 18px;

    width: 100%;
    min-height: 190px;
    padding: 18px 24px;
    box-sizing: border-box;
    overflow: hidden;

    color: #ffffff;
    background:
        radial-gradient(
            ellipse at center,
            rgba(14, 100, 174, 0.95) 0%,
            rgba(4, 55, 105, 0.98) 58%,
            #032746 100%
        );

    border-bottom: 3px solid #36baff;
    box-shadow: 0 5px 14px rgba(0, 35, 70, 0.22);
}

/* Les éléments du bandeau restent au-dessus des filigranes */

.masthead-logo,
.masthead-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* Logos aux deux extrémités */

.masthead-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.masthead-logo img {
    display: block;
    width: 100%;
    max-width: 120px;
    max-height: 145px;
    object-fit: contain;
}

.logo-left {
    justify-self: start;
}

.logo-right {
    justify-self: end;
}

/* Texte institutionnel centré */

.masthead-content {
    text-align: center;
    align-self: center;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.republic {
    font-size: clamp(10px, 2vw, 17px);
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.republic-en {
    margin-top: 3px;
    font-size: clamp(6x, 1.25vw, 10px);
    letter-spacing: 1.5px;
    color: #d8eaff;
}

.ministry {
    margin-top: 10px;
    font-size: clamp(10px, 1.65vw, 17px);
    font-weight: 700;
    text-transform: uppercase;
}

.ministry-en {
    margin-top: 2px;
    font-size: clamp(10px, 1.15vw, 15px);
    letter-spacing: 1px;
    color: #d8eaff;
}

.airforce {
    margin-top: 8px;
    color: #ffd45c;
    font-size: clamp(12px, 2.4vw, px);
    font-weight: 900;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.airforce-en {
    margin-top: 2px;
    font-size: clamp(11px, 1.35vw, 17px);
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #c6eaff;
}

/* Drapeau du Cameroun : vert, rouge, jaune */

.flag-cameroon {
    display: flex;
    width: 90px;
    height: 20px;
    margin: 10px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.flag-cameroon > span {
    flex: 1;
    position: relative;
}

.flag-green {
    background: #007a3d;
}

.flag-red {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ce1126;
}

.flag-star {
    color: #ffdf00;
    font-size: 14px;
    line-height: 1;
}

.flag-yellow {
    background: #ffdf00;
}

/* Avions en filigrane, derrière les logos et le texte */

.aircraft-watermark {
    position: absolute;
    z-index: 0;
    top: 50%;
    width: 34%;
    height: 90%;
    transform: translateY(-50%);
    pointer-events: none;
    overflow: hidden;
}

.aircraft-watermark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.17;
    filter: grayscale(1) brightness(1.7);
}

.watermark-c130 {
    left: 12%;
}

.watermark-ma60 {
    right: 12%;
}

.watermark-ma60 img {
    opacity: 0.14;
}

/* Adaptation aux écrans plus étroits */

@media screen and (max-width: 700px) {
    .masthead {
        grid-template-columns: 65px minmax(0, 1fr) 65px;
        gap: 8px;
        min-height: 150px;
        padding: 12px 10px;
    }

    .masthead-logo img {
        max-width: 65px;
        max-height: 95px;
    }

    .republic {
        letter-spacing: 0.4px;
    }

    .ministry {
        margin-top: 6px;
    }

    .airforce {
        margin-top: 5px;
        letter-spacing: 0.5px;
    }

    .flag-cameroon {
        width: 66px;
        height: 14px;
        margin-top: 6px;
    }

    .flag-star {
        font-size: 10px;
    }

    .aircraft-watermark {
        width: 42%;
    }

    .watermark-c130 {
        left: 5%;
    }

    .watermark-ma60 {
        right: 5%;
    }
}

/* Impression : conserver les couleurs et le filigrane */

@media print {
    .masthead {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        box-shadow: none;
        break-inside: avoid;
    }

    .aircraft-watermark img {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

.app-shell
{
    display: flex;
    min-height: calc(100vh - 150px)
}
.sidebar
{
    width: 228px;
    flex-shrink: 0;
    background: linear-gradient(180deg,#082f56,#061f3b);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 18px 12px;
    min-height: calc(100vh - 150px)
}
.brand
{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 24px
}
.brand-plane
{
    font-size: 35px;
    color: #8cc8ff
}
.brand strong
{
    display: block;
    font-size: 27px;
    line-height: 1
}
.brand small
{
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 4px;
    color: #d3e4f5
}
.nav-item
{
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    border: 0;
    color: #dce9f7;
    background: transparent;
    padding: 13px 12px;
    border-radius: 9px;
    text-align: left;
    margin: 3px 0;
    font-weight: 500
}
.nav-item span
{
    width: 24px;
    text-align: center;
    font-size: 21px
}
.nav-item:hover,.nav-item.active
{
    background: #0876e8;
    color: #fff
}
.sidebar-footer
{
    margin-top: auto;
    padding: 24px 14px 6px;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
    letter-spacing: .6px;
    color: #c9d9e9
}
.main
{
    flex: 1;
    min-width: 0;
    padding: 0 24px 16px
}
.topbar
{
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px
}
.user-pill
{
    background: #e8f0f8;
    border-radius: 30px;
    padding: 8px 12px;
    color: #23415f
}
.page
{
    display: none;
    animation: appear .18s ease
}
.page.active
{
    display: block
}
@keyframes appear
{
    from
    {
        opacity: .5;
        transform: translateY(3px)
    }
    to
    {
        opacity: 1;
        transform: none
    }
}
.page-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 20px
}
.page-heading h1
{
    font-size: 27px;
    margin: 0 0 6px;
    letter-spacing: -.7px
}
.eyebrow
{
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: var(--blue);
    margin: 0 0 6px
}
.muted
{
    color: var(--muted);
    margin: 0;
    line-height: 1.5
}
.tiny
{
    font-size: 11px
}
.btn
{
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 11px 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: .15s
}
.btn.primary
{
    background: var(--blue);
    color: white;
    box-shadow: 0 4px 10px #0876e822
}
.btn.primary:hover
{
    background: #0664c7;
    transform: translateY(-1px)
}
.btn.secondary
{
    background: #edf2f7;
    border-color: #dce5ef;
    color: #23415f
}
.btn.secondary:hover
{
    background: #e2ebf4
}
.stats-grid
{
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px
}
.stat-card
{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow)
}
.stat-icon
{
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--blue2);
    display: grid;
    place-items: center;
    font-size: 22px;
    color: var(--blue)
}
.stat-card p
{
    font-size: 12px;
    color: var(--muted);
    margin: 0 0 6px
}
.stat-card strong
{
    font-size: 25px
}
.panel
{
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    min-width: 0
}
.panel h2
{
    font-size: 16px;
    margin: 0 0 8px;
    letter-spacing: -.25px
}
.panel-heading
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px
}
.panel-heading h2
{
    margin-bottom: 5px
}
.table-wrap
{
    overflow: auto;
    width: 100%
}
table
{
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    white-space: nowrap
}
th
{
    text-align: left;
    color: #526780;
    background: #f5f8fb;
    font-size: 11px;
    font-weight: 700;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line)
}
td
{
    padding: 11px 10px;
    border-bottom: 1px solid #edf1f5
}
tbody tr:hover
{
    background: #f8fbff
}
.empty-state
{
    padding: 26px;
    text-align: center;
    color: var(--muted);
    font-size: 13px
}
.empty-state:empty
{
    display: none
}
.stepper
{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    margin: 18px 0 22px
}
.step
{
    display: flex;
    align-items: center;
    gap: 9px;
    color: #71839a;
    font-size: 11px;
    font-weight: 600
}
.step b
{
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dbe4ed;
    color: #526780
}
.step.current
{
    color: var(--navy)
}
.step.current b,.step.done b
{
    background: var(--blue);
    color: #fff
}
.form-layout
{
    display: grid;
    grid-template-columns: minmax(0,1.65fr) minmax(270px,.8fr);
    gap: 16px;
    align-items: start
}
.side-stack
{
    display: grid;
    gap: 14px
}
.field-grid
{
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px
}
.panel form>label,.field-grid>label
{
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 14px
}
input: not([type=radio]):not([type=checkbox]),select
{
    width: 100%;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid #d4e0ec;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    outline: none
}
input: focus,select:focus
{
    border-color: #1683f5!important;
    box-shadow: 0 0 0 3px #1683f51a
}
label small
{
    font-weight: 400;
    color: var(--muted);
    line-height: 1.4
}
fieldset
{
    border: 0;
    padding: 0;
    margin: 8px 0 18px
}
legend
{
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px
}
.airport-grid
{
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 9px
}
.choice-card
{
    position: relative;
    cursor: pointer
}
.choice-card input,.aircraft-card input
{
    position: absolute;
    opacity: 0
}
.choice-content
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    min-height: 82px
}
.choice-content strong
{
    font-size: 13px
}
.choice-content small
{
    font-size: 11px;
    color: var(--muted)
}
.choice-card:has(input:checked) .choice-content,.aircraft-card:has(input:checked)
{
    border-color: var(--blue);
    background: #f0f7ff;
    box-shadow: inset 0 0 0 1px var(--blue)
}
.aircraft-grid
{
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px
}
.aircraft-card
{
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
    min-width: 0
}
.aircraft-card img
{
    width: 42%;
    height: 88px;
    object-fit: contain;
    min-width: 70px
}
.aircraft-card span
{
    display: flex;
    flex-direction: column;
    gap: 6px
}
.aircraft-card strong
{
    font-size: 16px
}
.aircraft-card small
{
    font-size: 10px;
    color: var(--muted)
}
.notice
{
    font-size: 11px;
    line-height: 1.5;
    padding: 11px 12px;
    border-radius: 8px;
    margin: 12px 0
}
.notice.info
{
    background: #edf6ff;
    color: #1c568e;
    border: 1px solid #d5eaff
}
.notice.warning
{
    background: #fff6e7;
    color: #8a5100;
    border: 1px solid #f5dfb6
}
.form-actions
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px
}
.code-panel
{
    background: linear-gradient(135deg,#fff,#f0f7ff)
}
.flight-code
{
    background: #dceeff;
    color: #06366a;
    border-radius: 9px;
    padding: 15px 10px;
    text-align: center;
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .2px;
    margin: 14px 0;
    overflow-wrap: anywhere
}
.status-dot
{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1ca663;
    box-shadow: 0 0 0 5px #e0f7eb
}
.summary-list
{
    display: grid;
    gap: 0
}
.summary-row
{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #edf1f5;
    font-size: 12px
}
.summary-row:last-child
{
    border-bottom: 0
}
.summary-row span
{
    color: var(--muted)
}
.summary-row strong
{
    text-align: right
}
.check-list
{
    padding-left: 18px;
    line-height: 2;
    color: #426078;
    font-size: 12px
}
.check-list li::marker
{
    color: #16834a
}
.flight-select-row
{
    display: flex;
    align-items: end;
    gap: 14px;
    background: #fff;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 16px
}
.flight-select-row>label
{
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: 7px
}
.inline-stat
{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 12px;
    border-left: 1px solid var(--line);
    font-size: 11px;
    color: var(--muted)
}
.inline-stat strong
{
    font-size: 18px;
    color: var(--text)
}
.passenger-layout
{
    grid-template-columns: minmax(290px,.8fr) minmax(0,1.4fr)
}
.radio-line
{
    display: flex;
    gap: 18px
}
.radio-line label
{
    font-size: 12px;
    color: var(--text)
}
.search
{
    margin-bottom: 12px
}
.badge
{
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 6px;
    background: #e8f3ff;
    color: #145b9b;
    font-size: 10px;
    font-weight: 700
}
.badge.green
{
    background: #def7e9;
    color: #147444
}
.badge.amber
{
    background: #fff0d1;
    color: #8c5a00
}
.badge.red
{
    background: #ffe2e2;
    color: #a82222
}
.table-action
{
    border: 0;
    background: transparent;
    color: var(--blue);
    font-weight: 700;
    padding: 5px
}
.ticket-panel
{
    margin-top: 16px
}
.ticket-preview
{
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    border: 1px dashed #b6c9dd;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 14px
}
.ticket-kicker
{
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: var(--blue)
}
.ticket-preview h2
{
    font-size: 23px;
    margin: 8px 0
}
.qr-box
{
    border-left: 1px solid var(--line);
    padding-left: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    overflow: hidden
}
.qr-box small
{
    font-size: 9px;
    overflow-wrap: anywhere
}
.qr-fallback
{
    font-size: 11px;
    color: var(--muted);
    text-align: center
}
.control-layout
{
    grid-template-columns: 1fr 1fr
}
.result-box
{
    padding: 14px;
    border-radius: 10px;
    margin-top: 14px;
    background: #e8f8ef;
    border: 1px solid #c6ecd5;
    color: #17683d
}
.result-box.invalid
{
    background: #fff0f0;
    border-color: #f3caca;
    color: #a12222
}
.priority-bars
{
    display: grid;
    gap: 12px;
    margin-top: 14px
}
.priority-row
{
    display: grid;
    grid-template-columns: 48px 1fr 35px;
    align-items: center;
    gap: 12px;
    font-size: 12px
}
.bar-track
{
    height: 12px;
    background: #edf2f7;
    border-radius: 20px;
    overflow: hidden
}
.bar-fill
{
    height: 100%;
    background: linear-gradient(90deg,#0876e8,#60b2ff);
    border-radius: 20px
}
.footer
{
    text-align: center;
    font-size: 10px;
    color: #8a9aab;
    padding: 24px 0 8px
}
.toast
{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 20;
    max-width: 360px;
    background: #102f50;
    color: #fff;
    padding: 13px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 30px #001b3733;
    opacity: 0;
    transform: translateY(10px);
    transition: .2s;
    pointer-events: none
}
.toast.show
{
    opacity: 1;
    transform: none
}
[hidden]
{
    display: none!important
}
@media(max-width:1150px)
{
    .masthead
    {
        height: auto;
        min-height: 120px
    }
    .aircraft-banner
    {
        display: none
    }
    .app-shell
    {
        min-height: calc(100vh - 120px)
    }
    .form-layout,.passenger-layout
    {
        grid-template-columns: 1fr
    }
    .side-stack
    {
        grid-template-columns: repeat(2,minmax(0,1fr))
    }
    .side-stack .panel:last-child
    {
        grid-column: 1/-1
    }
    .stats-grid
    {
        grid-template-columns: repeat(2,1fr)
    }
}
@media(max-width:760px)
{
    .masthead
    {
        padding: 12px
    }
    .mindef
    {
        width: 55px;
        height: 65px
    }
    .air-crest
    {
        width: 58px;
        height: 65px
    }
    .ministry
    {
        font-size: 13px
    }
    .airforce
    {
        font-size: 15px
    }
    .republic
    {
        font-size: 9px
    }
    .motto
    {
        font-size: 8px
    }
    .sidebar
    {
        width: 60px;
        padding: 12px 6px
    }
    .brand
    {
        padding: 0 5px 18px
    }
    .brand strong
    {
        font-size: 18px
    }
    .brand small,.nav-item:not(span)
    {
        font-size: 0
    }
    .nav-item
    {
        justify-content: center;
        padding: 12px 4px
    }
    .nav-item span
    {
        font-size: 19px
    }
    .sidebar-footer
    {
        display: none
    }
    .main
    {
        padding: 0 12px
    }
    .topbar
    {
        height: 42px
    }
    .page-heading
    {
        align-items: flex-start;
        flex-direction: column
    }
    .page-heading h1
    {
        font-size: 23px
    }
    .stats-grid
    {
        gap: 8px
    }
    .stat-card
    {
        padding: 12px;
        gap: 8px
    }
    .stat-icon
    {
        width: 35px;
        height: 35px
    }
    .stat-card strong
    {
        font-size: 21px
    }
    .airport-grid
    {
        grid-template-columns: repeat(2,1fr)
    }
    .field-grid,.aircraft-grid,.side-stack,.control-layout
    {
        grid-template-columns: 1fr
    }
    .stepper
    {
        grid-template-columns: repeat(4,minmax(0,1fr));
        gap: 3px
    }
    .step
    {
        flex-direction: column;
        text-align: center;
        font-size: 9px
    }
    .step b
    {
        width: 25px;
        height: 25px
    }
    .flight-select-row
    {
        flex-wrap: wrap
    }
    .flight-select-row>label
    {
        flex-basis: 100%
    }
    .ticket-preview
    {
        grid-template-columns: 1fr
    }
    .qr-box
    {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 16px 0 0
    }
    .panel
    {
        padding: 13px
    }
    .form-actions
    {
        flex-wrap: wrap
    }
    .form-actions .btn
    {
        flex: 1
    }
    .identity
    {
        min-width: 0
    }
    .identity .motto
    {
        display: none
    }
}
@media print
{
    .masthead,.sidebar,.topbar,.page-heading,.stepper,.form-layout,.flight-select-row,.footer,.btn
    {
        display: none!important
    }
    .main
    {
        padding: 0
    }
    .page
    {
        display: none!important
    }
    #page-passengers
    {
        display: block!important
    }
    #page-passengers>*:not(#ticket-panel)
    {
        display: none!important
    }
    #ticket-panel
    {
        display: block!important;
        box-shadow: none;
        border: 0
    }
    .ticket-preview
    {
        border: 1px solid #aaa
    }
}


/* ============================================================
   Carte d'embarquement MINDEF — aperçu et impression recto-verso
   ============================================================ */
.ticket-panel { margin-top: 18px; }
.ticket-tools { align-items: center; flex-wrap: wrap; }
.ticket-actions { display:flex; gap:8px; flex-wrap:wrap; }
.boarding-document { display:grid; gap:16px; }
.boarding-side { width:100%; display:grid; grid-template-columns:minmax(0,2.12fr) minmax(210px,.78fr); border:1px solid #8196a8; background:#fff; color:#142c43; overflow:hidden; }
.boarding-main,.boarding-coupon,.back-declaration,.back-instructions { min-width:0; position:relative; }
.boarding-main { border-right:2px dotted #3f7197; background:linear-gradient(135deg,#fff 0%,#f1f8fc 100%); }
.boarding-header { display:grid; grid-template-columns:58px 1fr 58px; gap:9px; align-items:center; padding:9px 10px; color:white; background:#082e55; text-align:center; }
.boarding-logo { width:52px; height:52px; object-fit:contain; background:#fff; border-radius:5px; padding:3px; }
.boarding-country { font-size:9px; font-weight:800; letter-spacing:.3px; }
.boarding-ministry { font-size:10px; font-weight:700; margin-top:3px; }
.boarding-heading h2 { margin:5px 0 2px; font-size:14px; line-height:1.2; }
.boarding-heading p { margin:0; font-size:9px; }
.boarding-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.boarding-field { min-height:44px; padding:5px 8px; border-right:1px solid #b6d3e4; border-bottom:1px solid #b6d3e4; display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.boarding-field:nth-child(2n) { border-right:0; }
.boarding-field.wide { grid-column:1/-1; border-right:0; }
.boarding-field label,.coupon-field label { font-size:9px; line-height:1.2; color:#255a7d; font-weight:700; }
.boarding-field strong,.coupon-field strong { font-size:11px; font-weight:700; line-height:1.25; }
.boarding-field.approval { min-height:54px; }
.boarding-footer { padding:6px 8px; color:#fff; background:#082e55; font-size:8px; line-height:1.35; }
.boarding-coupon { background:linear-gradient(160deg,#f5fbff,#dcedf8); }
.coupon-heading { background:#1686b6; color:#fff; text-align:center; padding:11px 6px; font-size:11px; font-weight:800; line-height:1.5; }
.coupon-heading span { font-size:9px; }
.coupon-number,.coupon-field { padding:8px 9px; border-bottom:1px solid #a8c8dc; display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere; }
.coupon-number { font-size:9px; color:#255a7d; font-weight:700; }
.coupon-number strong { font-size:11px; color:#142c43; }
.coupon-qr { min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:6px; }
.coupon-qr canvas,.coupon-qr img { max-width:88px; max-height:88px; }
.coupon-qr small { font-size:8px; }
.coupon-stamp { margin:5px 9px 10px; border:1px dashed #6489a2; min-height:38px; display:grid; place-items:center; font-size:9px; color:#255a7d; }
.boarding-back { grid-template-columns:minmax(0,2.12fr) minmax(210px,.78fr); }
.back-declaration { padding:10px 12px; border-right:2px dotted #3f7197; background:#fff; }
.back-declaration h3,.back-instructions h3 { margin:0 0 5px; color:#fff; background:#082e55; padding:8px; font-size:11px; line-height:1.25; }
.back-declaration .mandatory { font-weight:700; color:#12648e; font-size:9px; margin:0 0 7px; }
.back-declaration p { font-size:9px; line-height:1.35; margin:5px 0; }
.back-declaration ol { padding-left:20px; margin:6px 0; }
.back-declaration li { font-size:8.5px; line-height:1.3; margin-bottom:5px; }
.back-declaration em,.back-instructions em { color:#4d6475; }
.back-contact { font-size:8.5px; margin:8px 0; }
.back-sign,.back-minor { font-size:8px; margin:7px 0; }
.back-sign span,.back-minor span { display:block; border-bottom:1px solid #7892a4; height:18px; }
.back-warning { display:block; font-size:8.5px; color:#8b1f24; margin-top:7px; }
.back-instructions { padding:10px; background:linear-gradient(150deg,#eef8fd,#d7eaf5); }
.back-instructions p { font-size:10px; line-height:1.45; margin:10px 0; }
.instruction-illustration { margin-top:12px; text-align:center; }
.instruction-illustration img { max-width:100%; max-height:115px; object-fit:contain; }
@media(max-width:850px) {
 .boarding-side { grid-template-columns:minmax(0,1.8fr) minmax(175px,.8fr); }
 .boarding-header { grid-template-columns:42px 1fr 42px; gap:5px; }
 .boarding-logo { width:38px;height:38px; }
 .boarding-heading h2 { font-size:11px; }
 .boarding-country,.boarding-ministry { font-size:8px; }
 .back-declaration { padding:7px; }
}
@media print {
 @page { size: A4 landscape; margin: 7mm; }
 body { background:#fff!important; }
 body * { visibility:hidden!important; }
 #ticket-panel, #ticket-panel * { visibility:visible!important; }
 #ticket-panel { display:block!important; position:absolute!important; left:0!important; top:0!important; width:100%!important; margin:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:white!important; }
 #ticket-panel .ticket-tools { display:none!important; }
 #boarding-card { display:block!important; }
 .boarding-side { width:100%; height:180mm; max-height:180mm; grid-template-columns:minmax(0,2.12fr) minmax(210px,.78fr); border:1px solid #6f8798; break-inside:avoid; page-break-inside:avoid; box-shadow:none!important; }
 .boarding-front { page-break-after:always; break-after:page; }
 .boarding-back { page-break-after:auto; break-after:auto; }
 .boarding-header,.boarding-footer,.coupon-heading,.back-declaration h3,.back-instructions h3 { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
 .boarding-main,.boarding-coupon,.back-declaration,.back-instructions { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
 .boarding-field { min-height:0; padding:5px 7px; }
 .boarding-field strong,.coupon-field strong { font-size:10px; }
 .back-declaration li { font-size:8px; }
 .back-instructions p { font-size:9px; }
}

/* Paramètres et gestion des profils utilisateurs */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.settings-wide{grid-column:1/-1}.settings-form{display:grid;gap:9px}.settings-form label{font-size:13px;font-weight:700;color:#183c63}.settings-form input,.settings-form select,.settings-grid select{width:100%;padding:11px 12px;border:1px solid #c8d9e8;border-radius:8px;background:#fff;color:#163653;font:inherit}.settings-options{grid-template-columns:minmax(220px,1fr) minmax(120px,1fr);align-items:center}.settings-options button{grid-column:1/-1;justify-self:start}.permission-list{padding-left:22px;line-height:1.7}.notice{padding:12px 14px;border-left:4px solid #e5a32a;background:#fff8e8;color:#725019;border-radius:6px;font-size:13px;line-height:1.6}.table-wrap{overflow-x:auto}.settings-grid table{width:100%;border-collapse:collapse}.settings-grid th,.settings-grid td{padding:10px;text-align:left;border-bottom:1px solid #e1eaf2;font-size:13px}.settings-grid th{color:#123d67;background:#edf6fc}.settings-grid .btn{padding:7px 10px;font-size:12px}@media(max-width:800px){.settings-grid{grid-template-columns:1fr}.settings-wide{grid-column:auto}.settings-options{grid-template-columns:1fr}.settings-options button{grid-column:auto}}

/* Écran de connexion DCS */
.login-screen{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(135deg,#061d43,#0755a4)}
.login-screen[hidden]{display:none!important}.login-card{width:min(100%,440px);padding:32px;border-radius:16px;background:#fff;box-shadow:0 24px 70px #00152b66;display:flex;flex-direction:column;gap:12px}.login-card h1{margin:0;color:#062b61;font-size:1.65rem}.login-logo{width:76px;height:76px;object-fit:contain;align-self:center}.login-card label{font-weight:700;color:#17365f}.login-card input{padding:12px;border:1px solid #9bb8d6;border-radius:8px;font:inherit}.login-card .btn{margin-top:8px}.login-error{color:#b42318;font-weight:700}.login-card .small{font-size:.78rem;line-height:1.4}.app-shell[hidden]{display:none!important}


/* Rapport graphique imprimable / export PDF via la boîte d'impression */
.activity-chart { display: grid; gap: 12px; margin-top: 16px; }
.activity-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 40px; align-items: center; gap: 12px; break-inside: avoid; }
.activity-row > span { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.activity-track { height: 18px; background: #e8eef5; border-radius: 5px; overflow: hidden; }
.activity-track i { display: block; height: 100%; background: #0876e8; border-radius: 5px; }
.activity-row strong { text-align: right; }
@media print {
  body.printing-report-pdf { background: white !important; }
  body.printing-report-pdf .app-shell { display: block !important; }
  body.printing-report-pdf .sidebar, body.printing-report-pdf .topbar, body.printing-report-pdf .footer, body.printing-report-pdf .toast, body.printing-report-pdf .page:not(#page-reports), body.printing-report-pdf #export-csv, body.printing-report-pdf #export-report-pdf { display: none !important; }
  body.printing-report-pdf .main { margin: 0 !important; padding: 0 !important; width: 100% !important; }
  body.printing-report-pdf #page-reports { display: block !important; position: static !important; padding: 12mm !important; background: white !important; color: #142b49 !important; }
  body.printing-report-pdf #page-reports .panel, body.printing-report-pdf #page-reports .stat-card { box-shadow: none !important; break-inside: avoid; }
  body.printing-report-pdf .activity-track, body.printing-report-pdf .bar-track { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  @page { size: A4 portrait; margin: 10mm; }
}

/* Fiche de configuration enrichie des aéronefs */
.aircraft-image-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface, #f8fbff);
}
.aircraft-image-preview[hidden] { display: none; }
.aircraft-image-preview img {
    width: 180px;
    height: 100px;
    object-fit: contain;
    border-radius: 7px;
    background: #fff;
}
.aircraft-table-name { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.aircraft-table-name img { width: 74px; height: 48px; object-fit: contain; border-radius: 6px; background: #fff; }
.aircraft-table-name span { display: flex; flex-direction: column; gap: 4px; }
.aircraft-table-name small { color: var(--muted); }
#aircraft-type-description { width: 100%; min-height: 64px; resize: vertical; }

/* Gestion des aéroports et choix du format d’impression */
.ticket-print-mode { max-width: 230px; padding: 9px 10px; border: 1px solid #c8d9e8; border-radius: 8px; color: #163653; background: #fff; font: inherit; }
.print-mode-label { font-size: 12px; font-weight: 700; color: #183c63; }
.btn.danger { background: #fff0f0; color: #a52222; border: 1px solid #e6b7b7; }
@page thermal-ticket { size: 80mm auto; margin: 3mm; }
@media print {
 body.printing-thermal { page: thermal-ticket; }
 body.printing-thermal .boarding-document { display:block!important; width:74mm!important; }
 body.printing-thermal .boarding-side { display:block!important; width:74mm!important; height:auto!important; max-height:none!important; border:0!important; overflow:visible!important; }
 body.printing-thermal .boarding-front { break-after:auto!important; page-break-after:auto!important; }
 body.printing-thermal .boarding-back { display:none!important; }
 body.printing-thermal .boarding-main { border:0!important; background:#fff!important; }
 body.printing-thermal .boarding-header { grid-template-columns:24px 1fr 24px!important; gap:3px!important; padding:4px!important; }
 body.printing-thermal .boarding-logo { width:22px!important; height:22px!important; padding:1px!important; }
 body.printing-thermal .boarding-heading h2 { font-size:8px!important; }
 body.printing-thermal .boarding-country, body.printing-thermal .boarding-ministry { font-size:6px!important; }
 body.printing-thermal .boarding-heading p { font-size:6px!important; }
 body.printing-thermal .boarding-side { grid-template-columns:1fr!important; }
 body.printing-thermal .boarding-coupon { border-top:1px dashed #333!important; border-left:0!important; }
 body.printing-thermal .boarding-field { padding:3px 4px!important; }
 body.printing-thermal .boarding-field strong, body.printing-thermal .coupon-field strong { font-size:8px!important; }
 body.printing-thermal .boarding-field span, body.printing-thermal .coupon-field span { font-size:9px!important; }
 body.printing-predefined .boarding-side { width:100%!important; }
}


/* Gestion des escales et signalement des aéronefs spéciaux */
.panel-subsection { margin: 1.25rem 0; padding: 1rem; border: 1px solid var(--border, #d8dee8); border-radius: 12px; background: var(--surface-soft, #f8fafc); }
.panel-subsection h3 { margin-top: 0; }
.stopover-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.65rem 0; border-bottom:1px solid var(--border, #d8dee8); }
.stopover-row:last-child { border-bottom:0; }
.special-mark { display:inline-block; margin-left:.3rem; padding:.1rem .35rem; border-radius:4px; color:#8a4b08; background:#fff0c2; font-size:.72rem; white-space:nowrap; }
.inline-check { display:flex; align-items:center; gap:.55rem; }
.inline-check input { width:auto; }
@media(max-width:640px){.stopover-row{align-items:flex-start; flex-direction:column}}


/* Barre de compte et bouton de déconnexion */
.topbar-account { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.logout-button { padding:8px 12px; font-size:13px; }
@media (max-width: 640px) { .topbar-account { gap:6px; } .logout-button { padding:7px 9px; } }


/* Respecter systématiquement l’attribut hidden, même si un composant définit display. */
[hidden] { display: none !important; }