:root {
    --ink: #16211F;
    --travertin: #F4EFE6;
    --thermal: #1F6E6A;
    --deep-teal: #104B4D;
    --vapeur: #FBFAF6;
    --ocre: #C6862F;
    --ocre-deep: #8E642D;
    /* Variante foncée dédiée au focus : --ocre pur ne tient que 2.49:1 sur le
       fond --travertin (sous le seuil WCAG 2.2 AA de 3:1 pour un indicateur
       non-textuel comme un anneau de focus) ; --focus tient ≥4.7:1 sur tous
       les fonds de l'app (travertin/vapeur/blanc) tout en restant dans la
       même famille ocre. */
    --focus: #8A5A1F;
    --muted: #6E7D7B;

    --etat-libre-fg: #0D6B65;
    --etat-libre-bg: #E6F9F8;
    /* #A64B00 (et non #E65100) : le ton d'origine ne tenait que 3.57:1 sur
       --etat-attente-bg, sous le seuil WCAG 2.2 AA de 4.5:1 pour du texte normal. */
    --etat-attente-fg: #A64B00;
    --etat-attente-bg: #FFF8E1;
    --etat-reservee-fg: #7A2E1D;
    --etat-reservee-bg: #F7E5DF;
    /* Gris chaud neutre, distinct des 3 teintes métier (teal/ocre/brique) —
       contraste vérifié 6.5:1 sur --etat-indisponible-bg (seuil AA 4.5:1). */
    --etat-indisponible-fg: #55524B;
    --etat-indisponible-bg: #EDEAE3;

    /* Noto Sans Arabic en tête : police de référence du design (page d'accueil
       et pages connectées) ; Tajawal reste le repli le plus proche. */
    --font-display: 'Noto Sans Arabic', 'Tajawal', 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif;
    --font-body: 'Noto Sans Arabic', 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Ombres et rayons du langage visuel de l'accueil — plus généreux, plus doux. */
    --card-shadow: 0 18px 45px rgba(71, 64, 47, 0.10);
    --card-shadow-strong: 0 20px 50px rgba(0, 0, 0, 0.35);
    --radius: 14px;
    --radius-lg: 24px;
    --radius-sm: 10px;

    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 8% 2%, rgba(198, 134, 47, 0.13), transparent 25rem),
        radial-gradient(circle at 92% 14%, rgba(31, 110, 106, 0.12), transparent 25rem),
        radial-gradient(rgba(16, 75, 77, 0.05) 0.7px, transparent 0.7px) 0 0 / 8px 8px,
        linear-gradient(135deg, #F8F3E9 0%, var(--travertin) 48%, #E9E4D8 100%);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.6;
}

a {
    color: var(--thermal);
}

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

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Composants partagés — langage visuel de la page d'accueil
   (utilisés par catalogue, récap, document, reconduction, auth)
   ───────────────────────────────────────────────────────────── */

/* Barre supérieure des pages connectées (client). */
.site-topbar {
    background: var(--thermal);
    color: var(--vapeur);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1.25rem;
    box-shadow: 0 2px 12px rgba(22, 33, 31, 0.25);
}

.site-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--vapeur);
    text-decoration: none;
}

.site-topbar__brand img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
}

.site-topbar__user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 0.9rem;
}

.site-topbar__user .btn-link {
    color: var(--vapeur);
    opacity: 0.85;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    min-height: 44px;
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.site-topbar__user .btn-link:hover {
    opacity: 1;
}

/* Fil d'étapes du parcours de réservation (type sites de vols/hôtels). */
.steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 1.4rem auto 1.6rem;
    max-width: 640px;
    padding: 0 1rem;
}

.steps__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    position: relative;
    font-size: 0.78rem;
    color: #a3aca2;
    font-weight: 600;
    text-align: center;
}

.steps__dot {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #c8d1ca;
    background: var(--travertin);
    color: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

/* Trait reliant les étapes (côté "précédent" de chaque item, sauf le premier). */
.steps__item + .steps__item::before {
    content: '';
    position: absolute;
    top: 16px;
    inset-inline-start: -50%;
    width: 100%;
    height: 1px;
    background: #ccd5cd;
}

.steps__item--done .steps__dot,
.steps__item--active .steps__dot {
    color: var(--vapeur);
    border-color: var(--deep-teal, var(--thermal));
    background: var(--deep-teal, var(--thermal));
    box-shadow: 0 0 0 5px rgba(198, 134, 47, 0.12);
}

.steps__item--done + .steps__item::before,
.steps__item--active + .steps__item::before {
    background: var(--deep-teal, var(--thermal));
}

.steps__item--active {
    color: var(--deep-teal, var(--thermal));
    font-weight: 700;
}

.steps__item--done {
    color: var(--deep-teal, var(--thermal));
}

/* Carte blanche du langage de l'accueil. */
.ds-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--card-shadow);
}

/* Variante "verre" (fond translucide + flou, bordure claire, grand rayon) —
   pages CLIENT uniquement (voir garde body:not(.admin-body) : le back-office
   réutilise .ds-card pour ses propres panneaux à fond opaque, cf. admin.css
   .dash-panel, et ne doit pas hériter du flou/de la bordure translucide). */
body:not(.admin-body) .ds-card {
    position: relative;
    background: rgba(251, 250, 246, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px);
}

/* ── Menu client (topbar post-login) — nav + avatar + dropdown en CSS pur ── */
.client-topbar {
    min-height: 72px;
    padding: 0.5rem clamp(1rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    background: var(--deep-teal, var(--thermal));
    color: var(--vapeur);
    box-shadow: 0 2px 12px rgba(22, 33, 31, 0.25);
    z-index: 20;
}

.client-topbar::after {
    content: '';
    position: absolute;
    inset-inline-start: 29%;
    bottom: -1px;
    width: 120px;
    height: 2px;
    background: var(--ocre);
}

.client-topbar__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--vapeur);
    text-decoration: none;
    flex-shrink: 0;
}

.client-topbar__brand img {
    width: 42px;
    height: 42px;
    padding: 2px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(250, 243, 225, 0.55);
    background: #fff;
}

.client-topbar__nav {
    display: flex;
    align-items: stretch;
    height: 72px;
    gap: clamp(1rem, 3vw, 2.5rem);
    flex: 1;
}

.client-topbar__link {
    height: 100%;
    padding: 0 0.25rem;
    display: inline-flex;
    align-items: center;
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: color 0.15s ease;
}

.client-topbar__link:hover {
    color: var(--vapeur);
}

.client-topbar__link.is-active {
    color: #f3d18f;
    font-weight: 700;
}

.client-topbar__link.is-active::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ocre);
}

/* Menu déroulant (avatar + prénom) — <details>/<summary> natif, sans JS. */
.client-topbar__menu {
    position: relative;
    flex-shrink: 0;
}

.client-topbar__menu > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.85rem 0.35rem 0.5rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--vapeur);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    list-style: none;
    min-height: 44px;
}

.client-topbar__menu > summary::-webkit-details-marker { display: none; }

.client-topbar__menu > summary:hover {
    background: rgba(255, 255, 255, 0.14);
}

.client-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ocre);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
}

.client-topbar__prenom {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-topbar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--card-shadow-strong);
    min-width: 220px;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.client-topbar__dropdown a,
.client-topbar__dropdown button {
    background: none;
    border: none;
    text-align: inherit;
    font: inherit;
    color: var(--ink);
    text-decoration: none;
    padding: 0.7rem 0.9rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
    width: 100%;
    display: block;
}

.client-topbar__dropdown a:hover,
.client-topbar__dropdown button:hover {
    background: rgba(31, 110, 106, 0.10);
    color: var(--thermal);
    font-weight: 700;
}

.client-topbar__dropdown form { margin: 0; }

@media (max-width: 640px) {
    .client-topbar { gap: 0.75rem; padding: 0.5rem 0.75rem; }
    .client-topbar__brand span { display: none; }
    .client-topbar__prenom { display: none; }
    .client-topbar__link { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .client-topbar__link { transition: none; }
}

/* Prix mis en avant (cartes du catalogue, totaux). */
.price {
    font-weight: 800;
    color: var(--thermal);
}

.price__amount {
    font-size: 1.15rem;
}

.price__currency {
    font-size: 0.78rem;
    font-weight: 700;
}

.price__hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(22, 33, 31, 0.65);
}

/* Nombres/références/dates isolés du contexte RTL (évite l'inversion des
   séparateurs) — partagé public + back-office. */
.num-ltr {
    direction: ltr;
    unicode-bidi: isolate;
}