/* FICHIER GÉNÉRÉ par `app:assets:bundle-css` — NE PAS ÉDITER À LA MAIN.
   Source : nav.imports.css (+ ses @import). Régénérer après toute modif du CSS scindé. */
/*
nav.imports.css

QUOI : MANIFESTE d'ordre du CSS de navigation public — liste des @import des blocs scindés, dans l'ordre
       EXACT de cascade (I4). N'est PAS servi directement ; bundlé en `nav.css`.

COMMENT : `app:assets:bundle-css` inline ses @import → feuille servie `nav.css` (bundle, 1 requête).
          S'appuie sur les variables :root de styles/app.css (chargée avant). Interactions : nav.js.

OÙ : Consommé par `BundleCssCommand` ; le bundle `nav.css` est chargé par
     templates/_partials/_site_header.html.twig via asset('styles/nav.css') (toutes les pages front).

POURQUOI : Scission §4.2 (aucun fichier source > 500 lignes) + résorption de la cascade @import (P2-2).
*/

/*
nav-header.css

QUOI : Utilitaires de navigation (.nav-ico), réagencement de la barre d'en-tête et navigation principale inline avec indicateur souligné animé.

COMMENT : Copie telle quelle des lignes 15–192 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/


/* ============================ Utilitaires ============================ */
.nav-ico {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4em;
    padding: 0.1em 0.4em;
    font-family: var(--font-base);
    font-size: 0.72em;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-marine);
    background-color: var(--c-blanc);
    border: 1px solid var(--c-bordure);
    border-bottom-width: 2px;
    border-radius: 6px;
}

/* ============================ Barre d'en-tête ============================ */
/* On reprend .site-header / .logo / .tagline / .header-cta de style.css et on réagence l'intérieur. */
.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    flex-wrap: nowrap;
}

/* La marque ne rétrécit jamais : le nom complet « Opalenews » reste lisible en toutes circonstances.
   La nav allégée (2 liens + méga-menu) et le cluster d'outils condensé laissent toujours la place. */
.header-brand {
    flex: 0 0 auto;
    min-width: 0;
}

.site-header .logo {
    min-width: 0;
}

.site-header .logo-text {
    white-space: nowrap;
}

/* Tagline = desktop uniquement. En-tête épuré mobile-first : sur smartphone/tablette, la barre se
   réduit à « marque + recherche + menu ». La langue ET le thème sont déplacés dans le tiroir
   (variantes --drawer) pour désencombrer ; tous deux réapparaissent dans la barre en desktop. */
.site-header .tagline {
    display: none;
}

.site-header .lang-switch {
    display: none;
}

/* ---------- Navigation principale (inline, desktop) ----------
   Groupée à gauche, contre la marque (cluster « marque + nav » façon SaaS premium) ;
   `margin-right: auto` repousse les actions (langue / recherche / thème / CTA) à droite. */
.site-nav {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem;
    margin-right: auto;
    margin-left: clamp(0.5rem, 1.5vw, 1.5rem);
}

.site-nav__item {
    position: relative;
    display: inline-flex;
}

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.7rem;
    min-height: 38px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.10);
    outline: none;
}

.site-nav__link:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

/* Indicateur souligné animé : glisse à l'apparition au survol, plein pour la section active. */
.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-sable) 0%, var(--c-corail) 120%);
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__toggle[aria-expanded="true"]::after {
    transform: scaleX(0.82);
    opacity: 0.6;
}

.site-nav__caret {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    transition: transform var(--duration-base) var(--ease-out);
}

.site-nav__toggle[aria-expanded="true"] {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}

/* Section courante : libellé blanc + soulignement plein. */
.site-nav__link.is-current {
    color: #fff;
}

.site-nav__link.is-current::after {
    transform: scaleX(1);
    opacity: 1;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__caret {
    transform: rotate(180deg);
}


/*
nav-menus.css

QUOI : Menus déroulants de la barre (méga-menu « Explorer » catégories + villes + à propos, menu villes) : panneaux, flèche optique, grilles internes.

COMMENT : Copie telle quelle des lignes 193–439 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ---------- Menus déroulants (méga + villes) ---------- */
.nav-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: 0;
    z-index: 60;
    padding: 0.6rem;
    background-color: var(--c-blanc);
    border: 1px solid var(--c-bordure);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(10, 61, 98, 0.03);
    transform-origin: top left;
    animation: nav-menu-in 0.18s var(--ease-out);
}

.nav-menu[hidden] {
    display: none;
}

/* Petite flèche optique reliant le menu à son déclencheur (ancrée à gauche). */
.nav-menu::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 1.5rem;
    width: 10px;
    height: 10px;
    background-color: var(--c-blanc);
    border-left: 1px solid var(--c-bordure);
    border-top: 1px solid var(--c-bordure);
    transform: rotate(45deg);
}

@keyframes nav-menu-in {
    from { opacity: 0; transform: translateY(-7px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* En-tête de menu : libellé de section, pose le contexte (« Par catégorie », « Par ville »). */
.nav-menu__label {
    margin: 0.1rem 0.45rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-texte-doux);
}

.nav-menu--mega {
    width: min(580px, calc(100vw - 2rem));
}

.nav-menu__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
}

.nav-menu__cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--radius-md);
    color: var(--c-marine);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.nav-menu__cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    color: var(--c-mer);
    background: linear-gradient(135deg, rgba(74, 144, 184, 0.14) 0%, rgba(10, 61, 98, 0.08) 100%);
    border-radius: 10px;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.nav-menu__cell:hover,
.nav-menu__cell:focus-visible {
    background-color: var(--c-sable-clair);
    color: var(--c-marine);
    transform: translateY(-1px);
    outline: none;
}

.nav-menu__cell:hover .nav-menu__cell-icon,
.nav-menu__cell:focus-visible .nav-menu__cell-icon {
    background: linear-gradient(135deg, var(--c-mer) 0%, var(--c-marine) 100%);
    color: #fff;
}

.nav-menu--cities {
    width: min(330px, calc(100vw - 2rem));
}

.nav-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.nav-menu__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--c-marine);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.88rem;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-menu__row .nav-ico {
    width: 15px;
    height: 15px;
    color: var(--c-corail);
}

.nav-menu__row:hover,
.nav-menu__row:focus-visible {
    background-color: var(--c-sable-clair);
    outline: none;
}

/* ---------- Méga-menu « Explorer » : catégories + villes + à propos en un seul panneau ---------- */
/* Petite icône de tête dans le déclencheur, pour signaler un menu riche (façon SaaS 2026). */
.site-nav__lead {
    width: 15px;
    height: 15px;
    opacity: 0.75;
}

.nav-menu--explorer {
    width: min(720px, calc(100vw - 2rem));
    padding: 0.85rem;
}

.nav-explorer {
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
}

.nav-explorer__col {
    min-width: 0;
}

.nav-explorer__col--cats {
    flex: 1 1 60%;
}

/* Grille catégories DANS le méga-menu : 2 colonnes en `minmax(0, 1fr)` (et non `1fr` = `minmax(auto, 1fr)`,
   dont la piste ne peut pas rétrécir sous son contenu → débordait sur la colonne villes). Le libellé peut
   se contraindre / passer à la ligne au lieu de pousser la cellule. */
.nav-menu--explorer .nav-menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nav-menu--explorer .nav-menu__cell {
    min-width: 0;
}

.nav-menu--explorer .nav-menu__cell-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Colonne villes : filet de séparation discret + défilement si la liste est longue. */
.nav-explorer__col--cities {
    flex: 1 1 40%;
    padding-left: 0.85rem;
    border-left: 1px solid var(--c-bordure);
    max-height: 320px;
    overflow-y: auto;
}

/* Dans le méga-menu, la liste des villes s'empile en une colonne (plus lisible que la grille 2×). */
.nav-menu__list--stack {
    grid-template-columns: 1fr;
}

.nav-explorer__foot {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--c-bordure);
}

.nav-explorer__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.65rem;
    border-radius: var(--radius-md);
    color: var(--c-marine);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-explorer__link .nav-ico { width: 17px; height: 17px; color: var(--c-corail); }

.nav-explorer__arrow {
    margin-left: auto;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.nav-explorer__link:hover,
.nav-explorer__link:focus-visible {
    background-color: var(--c-sable-clair);
    outline: none;
}

.nav-explorer__link:hover .nav-explorer__arrow,
.nav-explorer__link:focus-visible .nav-explorer__arrow {
    opacity: 0.7;
    transform: translateX(0);
}

/* Sur petite hauteur/largeur d'écran tablette, les deux colonnes s'empilent. */
@media (max-width: 720px) {
    .nav-explorer { flex-direction: column; }
    .nav-explorer__col--cities {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--c-bordure);
        padding-top: 0.6rem;
        max-height: none;
    }
}


/*
nav-tools.css

QUOI : Cluster d'outils de l'en-tête (mobile-first) : bouton recherche, compte (connecté / anonyme), CTA et burger 3 traits animé en croix.

COMMENT : Copie telle quelle des lignes 440–732 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ---------- Cluster d'outils (recherche + langue + thème + burger) — mobile-first ----------
   Trois zones nettes : marque à gauche, outils au centre-droite, burger à l'extrémité droite.
   `flex:1` + `justify-content:flex-end` colle le cluster à droite sans marge auto (qui
   entrerait en conflit avec le `margin-right:auto` de la nav inline en desktop). */
.header-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

/* Recherche : bouton-icône compact sur mobile (44px, confort tactile). Le champ complet avec
   placeholder réapparaît ≥1024px. La recherche reste à un geste : tiroir (bouton dédié) + ⌘K. */
.header-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.header-search:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-search:active {
    background-color: rgba(255, 255, 255, 0.28);
}

.header-search:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

.header-search__icon {
    width: 18px;
    height: 18px;
    color: #fff;
    opacity: 0.9;
}

.header-search__text {
    display: none;                 /* mobile : bouton-icône seul (texte réaffiché ≥1024px) */
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-search__kbd {
    display: none; /* visible ≥1024px (physique clavier) */
    gap: 2px;
    flex-shrink: 0;
}

.header-search__kbd kbd {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    border-bottom-width: 1px;
}

/* ── Compte (header) : bouton-icône calqué sur .header-search.
   Mobile : icône seule (libellé révélé ≥1200px) ; la déconnexion passe par le tiroir. ── */
.header-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.header-account:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-account:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

.header-account .nav-ico {
    width: 18px;
    height: 18px;
    color: #fff;
    opacity: 0.9;
}

.header-account__text {
    display: none;
}

/* ── Case compte (connecté) : avatar + « Mon compte » | déconnexion ──
   Mobile : seul l'avatar (lien profil) est visible — la déconnexion reste dans le tiroir.
   ≥1024px : la case devient une pastille (avatar | déconnexion) ; le libellé apparaît ≥1200px. */
.header-account-group {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.4rem;
}

.header-account-group__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.header-account-group__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-mer) 0%, var(--c-marine) 100%);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.78rem;
    line-height: 1;
    user-select: none;
    transition: box-shadow var(--duration-fast) var(--ease-out);
}

.header-account-group__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.header-account-group__link:hover .header-account-group__avatar,
.header-account-group__link:focus-visible .header-account-group__avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.header-account-group__sep {
    display: none;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
}

.header-account-group__logout {
    display: none;
    margin: 0;
}

.header-account-group__logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: rgba(255, 255, 255, 0.8);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}

.header-account-group__logout-btn:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}

.header-account-group__logout-btn .nav-ico {
    width: 18px;
    height: 18px;
}

/* Le CTA réutilise .header-cta (style.css) ; on aligne juste l'icône. */
.header-cta .nav-ico {
    width: 16px;
    height: 16px;
    stroke-width: 2.4;
}

.nav-burger {
    /* Largeur de référence des 3 traits — consommée AUSSI par `.nav-burger__label` pour que le
       libellé fasse exactement la largeur du pictogramme. Une seule source de vérité. */
    /* Largeur des 3 traits. En disposition HORIZONTALE le libellé n'est plus contraint à cette
       largeur (il vit à côté, pas dessous) : la variable ne sert donc plus qu'au pictogramme. */
    --burger-w: 20px;
    display: inline-flex; /* mobile-first : masqué ≥1024px */
    flex-shrink: 0;
    /* Traits et libellé CÔTE À CÔTE : à l'empilement vertical, le texte devait rester minuscule
       pour tenir dans la largeur des traits. À l'horizontale il se lit sans compromis. */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /* Largeur libre (le libellé la détermine) ; hauteur calée sur `.header-search`. */
    width: auto;
    height: 44px;
    padding-inline: 0.7rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.nav-burger:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.nav-burger:active {
    transform: scale(0.94);
}

.nav-burger:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

/* Libellé « MENU » sous la pastille : ancre le sens du pictogramme pour les publics qui ne lisent
   pas l'icône 3-traits. Taille sous l'échelle Label du DS (assumé : c'est une micro-annotation de
   chrome de navigation, pas un libellé de contenu).
   Largeur alignée sur les traits du burger via `--burger-w` — la variable est partagée avec
   `.nav-burger__box` pour que les deux ne puissent pas diverger si l'un des deux est retouché.
   `font-size` calibrée pour que « MENU » remplisse cette largeur sans la dépasser. */
.nav-burger__label {
    /* Plus de contrainte de largeur : à côté des traits, le libellé prend la place qu'il lui faut
       et peut donc adopter une taille réellement lisible. */
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: currentColor;
}

/* ── Burger 2026 : 3 traits minimalistes qui se muent en croix fine (.is-active) ── */
.nav-burger__box {
    position: relative;
    display: block;
    width: var(--burger-w);
    /* 16px : taille d'icône standard. Le pictogramme est accompagné du libellé et cadré par la
       pastille — il n'a plus à porter seul le poids visuel de l'outil. */
    height: 16px;
}

.nav-burger__line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: currentColor;
    transition: transform var(--duration-base) var(--ease-out),
                opacity var(--duration-fast) var(--ease-out);
}

/* Traits répartis sur les 16px de la boîte (0 / 7 / 14, épaisseur 2px). */
.nav-burger__line:nth-child(1) { transform: translateY(0); }
.nav-burger__line:nth-child(2) { transform: translateY(7px); }
.nav-burger__line:nth-child(3) { transform: translateY(14px); }

/* État actif : les traits extrêmes pivotent vers le centre, le médian s'efface. */
/* Croix centrée sur le trait médian (7px), cohérente avec la boîte de 16px. */
.nav-burger.is-active {
    background-color: rgba(255, 255, 255, 0.22);
}
.nav-burger.is-active .nav-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-burger.is-active .nav-burger__line:nth-child(2) {
    opacity: 0;
    transform: translateY(7px) scaleX(0.3);
}
.nav-burger.is-active .nav-burger__line:nth-child(3) {
    transform: translateY(7px) rotate(-45deg);
}


/*
theme-toggle.css

QUOI : Sélecteur de thème auto / clair / sombre (icône selon data-theme-mode), variante tiroir pleine largeur et CTA « Proposer » côté tiroir.

COMMENT : Copie telle quelle des lignes 733–805 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ── Sélecteur de thème (auto / clair / sombre) ── */
.theme-toggle {
    display: none;                 /* base masquée ; en-tête → règle ci-dessous ; tiroir → variante --drawer */
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.theme-toggle:hover { background-color: rgba(255, 255, 255, 0.22); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-sable); outline-offset: 2px; }
.theme-toggle .nav-ico { width: 20px; height: 20px; }

/* Icône affichée selon le mode courant (data-theme-mode sur <html>). */
.theme-toggle__icon { display: none; }
.theme-toggle__icon--auto { display: block; }                  /* repli si JS absent */
[data-theme-mode] .theme-toggle__icon--auto { display: none; }
[data-theme-mode="auto"] .theme-toggle__icon--auto { display: block; }
[data-theme-mode="light"] .theme-toggle__icon--light { display: block; }
[data-theme-mode="dark"] .theme-toggle__icon--dark { display: block; }

/* Mobile/tablette : la bascule de thème vit dans le tiroir (variante --drawer) → en-tête épuré
   (logo + recherche + menu). Elle réintègre le cluster d'outils en desktop (bloc ≥1024px plus bas). */

/* Variante tiroir : pleine largeur, icône + libellé, toujours visible dans le voile. */
.theme-toggle--drawer {
    display: flex;
    justify-content: flex-start;
    gap: 0.65rem;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    margin-top: 0.6rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    font: inherit;
    font-weight: 600;
    font-size: 1rem;
}
.theme-toggle--drawer:hover { background-color: rgba(255, 255, 255, 0.14); }
.theme-toggle--drawer .theme-toggle__glyph { display: inline-flex; align-items: center; }
.theme-toggle--drawer .nav-ico { color: var(--c-sable); }

.theme-toggle__text [data-theme-when] { display: none; }
.theme-toggle__text [data-theme-when="auto"] { display: inline; }            /* repli si JS absent */
[data-theme-mode] .theme-toggle__text [data-theme-when="auto"] { display: none; }
[data-theme-mode="auto"] .theme-toggle__text [data-theme-when="auto"] { display: inline; }
[data-theme-mode="light"] .theme-toggle__text [data-theme-when="light"] { display: inline; }
[data-theme-mode="dark"] .theme-toggle__text [data-theme-when="dark"] { display: inline; }

/* ---------- Mobile : le CTA « Proposer » vit dans le tiroir + le footer ---------- */
/* (cible le CTA de la barre, pas celui du tiroir `.nav-drawer__cta`). */
.header-actions .header-cta {
    display: none;
}

@media (max-width: 359px) {
    /* Très petits écrans : on ne garde que le glyphe de marque pour éviter tout débordement. */
    .site-header .header-brand .logo-text {
        display: none;
    }
}


/*
nav-desktop.css

QUOI : Adaptations desktop ≥1024px : nav inline compacte, recherche étendue, libellé du compte ≥1200px, tagline sur très grands écrans.

COMMENT : Copie telle quelle des lignes 806–928 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ---------- Desktop (≥1024px) : nav inline compacte + recherche + thème + CTA ----------
   Dimensionné pour tenir DÈS 1024px — donc aussi sur les PC en mise à l'échelle 125 %
   (p.ex. 1280/1366 px physiques → ~1024/1092 px CSS) sans jamais déborder. Les éléments
   « confort » (langue, libellé du CTA, tagline) n'apparaissent que lorsqu'il y a la place. */
@media (min-width: 1024px) {
    /* L'en-tête respire plus large que la colonne de lecture (1200px) : ses 3 zones
       (marque / nav / actions) ont besoin de plus de place que le contenu. */
    .site-header .container {
        max-width: 1640px;
    }
    .site-header__inner {
        gap: clamp(0.35rem, 0.9vw, 0.9rem);
    }
    .site-nav {
        display: flex;
        gap: 0.05rem;
    }
    .site-nav__link {
        padding: 0.4rem 0.55rem;
        font-size: 0.875rem;
    }

    /* Fenêtre desktop étroite (1024–1199px) : la nav inline occupe toute la largeur → on masque
       la langue (réaffichée ≥1200px, bloc plus bas) pour ne pas comprimer la barre. */
    .site-header .lang-switch {
        display: none;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: 0.3rem;
    }

    /* ── Cluster d'outils desktop : recherche, CTA et bascule de thème partagent la MÊME hauteur
       (40px) et le MÊME arrondi (--radius-md) → trois contrôles parfaitement alignés sur une ligne. ── */
    /* Recherche : reste un bouton-icône (loupe) de 40px — compact, cohérent avec langue / thème / CTA.
       La recherche complète reste accessible (clic → palette ⌘K). */
    .header-search {
        flex: 0 0 auto;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }
    /* CTA réduit à un « + » : carré 40px, libellé masqué (aria-label garantit l'accessibilité). */
    .header-actions .header-cta {
        display: inline-flex;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }
    /* Langue : pastille drapeau (menu déroulant) intégrée au cluster dès 1024px.
       Sélecteur `.header-actions .lang-dd` (spécificité 0,2,0) pour battre la règle de base
       `.lang-dd { display:none }` définie plus bas dans le fichier, quel que soit l'ordre source. */
    .header-actions .lang-dd {
        display: inline-flex;
    }
    /* CTA en icône seule sur desktop étroit ; le libellé réapparaît ≥1340px (aria-label assure l'a11y). */
    .site-header .header-cta__text {
        display: none;
    }
    /* Le thème réintègre le cluster d'outils en desktop (sur mobile/tablette il reste dans le tiroir).
       Carré 40×40 → squircle cohérent avec la recherche et le CTA. */
    .header-actions .theme-toggle {
        display: inline-flex;
        width: 40px;
        height: 40px;
    }
    /* Compte aligné sur le cluster d'outils (40px) ; la déconnexion réapparaît à côté. */
    .header-account {
        height: 40px;
        min-height: 40px;
    }
    /* La case compte devient une pastille : [avatar] Mon compte | [déconnexion]. */
    .header-account-group {
        height: 40px;
        padding: 0 0.4rem 0 0.5rem;
        gap: 0.35rem;
        background-color: rgba(255, 255, 255, 0.12);
        border: 1.5px solid rgba(255, 255, 255, 0.22);
        border-radius: var(--radius-md);
    }
    .header-account-group:hover {
        border-color: rgba(255, 255, 255, 0.4);
    }
    .header-account-group__link {
        min-width: 0;
        min-height: 0;
    }
    .header-account-group__sep,
    .header-account-group__logout {
        display: inline-flex;
    }
    /* Libellé « Mon compte » visible dès 1024px dans la case (la nav allégée laisse la place). */
    .header-account-group .header-account__text {
        display: block;
    }
    .nav-burger {
        display: none;
    }
}

/* Libellé du compte dès qu'il y a la place (≥1200px). */
@media (min-width: 1200px) {
    .header-account {
        width: auto;
        padding: 0 0.85rem;
    }
    .header-account__text {
        display: block;
    }
}

/* La tagline (longue) n'apparaît que sur les très grands écrans, où l'en-tête est large. */
@media (min-width: 1640px) {
    .site-header .tagline {
        display: block;
    }
}


/*
nav-drawer.css

QUOI : Tiroir mobile : voile flouté plein écran, re-thématisation interne, liens majeurs XXL, compte/déconnexion, langues et entrée échelonnée.

COMMENT : Copie telle quelle des lignes 929–1307 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ============================ Tiroir mobile ============================ */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
}

.nav-drawer[hidden] {
    display: none;
}

.nav-drawer__scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(6, 22, 36, 0.50);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.nav-drawer.is-open .nav-drawer__scrim {
    opacity: 1;
}

/* ── Voile flouté plein écran (full-screen blur overlay) ── */
.nav-drawer__panel {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: var(--space-md);
    padding-top: max(var(--space-md), env(safe-area-inset-top));
    padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    color: #fff;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(224, 120, 86, 0.22) 0%, transparent 55%),
        radial-gradient(130% 90% at 0% 100%, rgba(30, 96, 145, 0.42) 0%, transparent 60%),
        linear-gradient(160deg, rgba(8, 28, 44, 0.88) 0%, rgba(6, 18, 30, 0.93) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.nav-drawer.is-open .nav-drawer__panel {
    opacity: 1;
    transform: scale(1);
}

/* Repli sans flou (rare) : voile marine opaque pour rester lisible. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nav-drawer__panel { background: linear-gradient(160deg, #081c2c 0%, #06121e 100%); }
}

/* ── Re-thématisation des éléments internes pour le voile sombre plein écran ──
   On surcharge les couleurs marine-sur-clair en clair-sur-sombre (specificité accrue). */
.nav-drawer__panel .nav-drawer__head {
    border-bottom-color: rgba(255, 255, 255, 0.14);
    padding-bottom: 0.75rem;
}

.nav-drawer__panel .logo--drawer { color: #fff; }
.nav-drawer__panel .logo--drawer .logo-mark { color: var(--c-sable); }

.nav-drawer__panel .nav-drawer__close {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
}
.nav-drawer__panel .nav-drawer__close:hover {
    background-color: rgba(255, 255, 255, 0.22);
}

.nav-drawer__panel .nav-drawer__search {
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}
.nav-drawer__panel .nav-drawer__search .nav-ico { color: #fff; }
.nav-drawer__panel .nav-drawer__search:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Navigation : liens majeurs XXL, faciles à cibler au pouce. */
.nav-drawer__panel .nav-drawer__nav {
    gap: 0.2rem;
    margin-top: 0.35rem;
    justify-content: center;
}

.nav-drawer__panel .nav-drawer__link,
.nav-drawer__panel .nav-drawer__summary {
    min-height: 60px;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 6.5vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    border-radius: var(--radius-md);
}
.nav-drawer__panel .nav-drawer__link:hover,
.nav-drawer__panel .nav-drawer__summary:hover {
    background-color: rgba(255, 255, 255, 0.09);
}
.nav-drawer__panel .nav-drawer__link.is-current,
.nav-drawer__panel .nav-drawer__summary.is-current {
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: inset 4px 0 0 var(--c-corail);
}
.nav-drawer__panel .nav-drawer__link .nav-ico,
.nav-drawer__panel .nav-drawer__summary .nav-ico {
    width: 22px;
    height: 22px;
    color: var(--c-sable);
}

/* Compte (tiroir) : bouton de déconnexion dans un <form> rendu comme un lien plein largeur. */
.nav-drawer__logout-form {
    margin: 0;
}
.nav-drawer__panel .nav-drawer__link--logout {
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
}
.nav-drawer__panel .nav-drawer__summary-caret { color: rgba(255, 255, 255, 0.7); }

.nav-drawer__panel .nav-drawer__sublist {
    border-left-color: rgba(255, 255, 255, 0.18);
}
.nav-drawer__panel .nav-drawer__sublink {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.05rem;
}
.nav-drawer__panel .nav-drawer__sublink .nav-ico { color: var(--c-sable); }
.nav-drawer__panel .nav-drawer__sublink:hover {
    background-color: rgba(255, 255, 255, 0.09);
    color: #fff;
}

/* Sélecteur de langue dans le voile : filets clairs, langue active en pastille sable. */
.nav-drawer__panel .lang-switch--drawer {
    border-top-color: rgba(255, 255, 255, 0.14);
}
.nav-drawer__panel .lang-switch__link {
    color: rgba(255, 255, 255, 0.7);
}
.nav-drawer__panel .lang-switch__link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}
.nav-drawer__panel .lang-switch__link.is-active {
    color: #0a3d62;
    background-color: var(--c-sable);
}

/* Entrée échelonnée des liens majeurs (staggered) — désactivée si mouvement réduit. */
@media (prefers-reduced-motion: no-preference) {
    .nav-drawer.is-open .nav-drawer__nav > * {
        animation: nav-drawer-stagger 0.5s var(--ease-out) both;
    }
    .nav-drawer.is-open .nav-drawer__nav > *:nth-child(1) { animation-delay: 0.08s; }
    .nav-drawer.is-open .nav-drawer__nav > *:nth-child(2) { animation-delay: 0.14s; }
    .nav-drawer.is-open .nav-drawer__nav > *:nth-child(3) { animation-delay: 0.20s; }
    .nav-drawer.is-open .nav-drawer__nav > *:nth-child(4) { animation-delay: 0.26s; }
    .nav-drawer.is-open .nav-drawer__nav > *:nth-child(n+5) { animation-delay: 0.32s; }
}

@keyframes nav-drawer-stagger {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--c-bordure);
}

.logo--drawer {
    color: var(--c-marine);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.logo--drawer .logo-mark {
    color: var(--c-corail);
    font-size: 1.4rem;
}

.nav-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--c-marine);
    background-color: var(--c-blanc);
    border: 1px solid var(--c-bordure);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-drawer__close:hover {
    background-color: var(--c-sable);
}

.nav-drawer__search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--c-texte-doux);
    background-color: var(--c-blanc);
    border: 1.5px solid var(--c-bordure);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-xs);
}

.nav-drawer__search .nav-ico {
    color: var(--c-mer);
}

.nav-drawer__search:hover {
    border-color: var(--c-mer-clair);
}

.nav-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    color: var(--c-marine);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-drawer__link:hover {
    background-color: var(--c-blanc);
}

.nav-drawer__link.is-current,
.nav-drawer__summary.is-current {
    background-color: var(--c-blanc);
    box-shadow: inset 3px 0 0 var(--c-corail);
}

.nav-drawer__link .nav-ico {
    color: var(--c-mer);
}

.nav-drawer__group {
    border-radius: var(--radius-sm);
}

.nav-drawer__summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.6rem 0.75rem;
    color: var(--c-marine);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    list-style: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-drawer__summary::-webkit-details-marker {
    display: none;
}

.nav-drawer__summary:hover {
    background-color: var(--c-blanc);
}

.nav-drawer__summary .nav-ico {
    color: var(--c-mer);
}

.nav-drawer__summary-caret {
    margin-left: auto;
    width: 16px;
    height: 16px;
    opacity: 0.6;
    transition: transform var(--duration-base) var(--ease-out);
}

/* Combinateur ENFANT obligatoire : en descendant (`[open] .caret`), un groupe parent ouvert
   (« Où ? », déplié d'office par `_where_active`) faisait pivoter AUSSI les carets des dépliants
   imbriqués encore fermés — les chevrons d'arrondissement restaient donc pointés vers le haut en
   permanence. Chaque caret ne doit refléter que l'état de SON propre <details>. */
.nav-drawer__group[open] > .nav-drawer__summary .nav-drawer__summary-caret {
    transform: rotate(180deg);
}

.nav-drawer__sublist {
    display: flex;
    flex-direction: column;
    padding: 0.15rem 0 0.4rem 0.6rem;
    margin-left: 0.65rem;
    border-left: 2px solid var(--c-bordure);
}

.nav-drawer__sublink {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.4rem 0.6rem;
    color: var(--c-texte);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.nav-drawer__sublink .nav-ico {
    width: 16px;
    height: 16px;
    color: var(--c-mer);
}

.nav-drawer__sublink:hover {
    background-color: var(--c-blanc);
    color: var(--c-marine);
}

/* Tête de liste « Voir tout l'arrondissement » : distinguée des villes qui la suivent (poids +
   couleur marine) sans devenir un second niveau de titre. */
.nav-drawer__sublink--all {
    font-weight: 600;
    color: var(--c-marine);
}

/* Dépliant imbriqué (arrondissement → villes) dans le menu « Où ? » du tiroir mobile : même
   composant que .nav-drawer__group, en plus compact pour marquer le second niveau. */
.nav-drawer__group--nested {
    margin: 0.1rem 0;
}

.nav-drawer__summary--nested {
    min-height: 40px;
    padding: 0.45rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--c-texte);
}

.nav-drawer__summary--nested .nav-drawer__summary-caret {
    width: 14px;
    height: 14px;
}

.nav-drawer__cta {
    margin-top: auto;
    justify-content: center;
    width: 100%;
    min-height: 50px;
}

@media (min-width: 1024px) {
    /* Le tiroir n'existe qu'en mobile/tablette (cohérent avec le seuil de la nav inline). */
    .nav-drawer {
        display: none !important;
    }
}


/*
command-palette.css

QUOI : Palette de commande ⌘K : feuille plein écran mobile puis fenêtre flottante ≥640px, résultats live, état « parcourir » et pied de palette.

COMMENT : Copie telle quelle des lignes 1308–1769 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ============================ Palette de commande (⌘K) ============================ */
/* Mobile-first : la palette est une feuille plein écran (l'input reste visible au-dessus du clavier). */
.cmdk {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
}

.cmdk[hidden] {
    display: none;
}

.cmdk__scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(10, 61, 98, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.cmdk.is-open .cmdk__scrim {
    opacity: 1;
}

.cmdk__dialog {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--c-blanc);
    border: none;
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    padding-top: env(safe-area-inset-top);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.cmdk.is-open .cmdk__dialog {
    opacity: 1;
    transform: translateY(0);
}

/* ≥640px : la palette redevient une fenêtre flottante centrée façon « command palette ». */
@media (min-width: 640px) {
    .cmdk {
        align-items: flex-start;
        padding: clamp(1rem, 8vh, 6rem) 1rem 1rem;
    }
    .cmdk__dialog {
        width: min(640px, 100%);
        height: auto;
        max-height: min(70vh, 640px);
        border: 1px solid var(--c-bordure);
        border-radius: var(--radius-lg);
        padding-top: 0;
        transform: translateY(-12px) scale(0.98);
    }
    .cmdk.is-open .cmdk__dialog {
        transform: translateY(0) scale(1);
    }
}

.cmdk__search {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--c-bordure);
    background: linear-gradient(180deg, var(--c-sable-clair) 0%, var(--c-blanc) 100%);
}

.cmdk__search-icon {
    width: 22px;
    height: 22px;
    color: var(--c-mer);
    flex-shrink: 0;
}

.cmdk__input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 1.05rem;
    color: var(--c-texte);
    padding: 0.35rem 0;
}

.cmdk__input::placeholder {
    color: var(--c-texte-doux);
    opacity: 0.7;
}

.cmdk__spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--c-bordure);
    border-top-color: var(--c-mer);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.cmdk__spinner[hidden] {
    display: none;
}

/* Mobile-first : bouton de fermeture tactile (icône X de 40px). */
.cmdk__esc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--c-texte-doux);
    background-color: var(--c-blanc);
    border: 1px solid var(--c-bordure);
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.cmdk__esc-icon {
    width: 20px;
    height: 20px;
}

.cmdk__esc-text {
    display: none;
}

.cmdk__esc:hover {
    color: var(--c-marine);
    background-color: var(--c-sable-clair);
}

/* ≥640px : redevient une touche « Échap » discrète. */
@media (min-width: 640px) {
    .cmdk__esc {
        width: auto;
        height: auto;
        padding: 0.3rem 0.6rem;
        border-radius: 6px;
        border-bottom-width: 2px;
    }
    .cmdk__esc-icon {
        display: none;
    }
    .cmdk__esc-text {
        display: inline;
    }
}

.cmdk__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.6rem;
}

/* ---------- Résultats live ---------- */
.cmdk__results[hidden],
.cmdk__empty[hidden],
.cmdk__browse[hidden] {
    display: none;
}

.cmdk__result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--c-marine);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.cmdk__result + .cmdk__result {
    margin-top: 2px;
}

.cmdk__result:hover,
.cmdk__result.is-active {
    background-color: var(--c-sable-clair);
    border-color: var(--c-bordure);
}

.cmdk__result.is-active {
    box-shadow: inset 3px 0 0 var(--c-corail);
}

.cmdk__result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--c-mer);
    background: linear-gradient(135deg, rgba(74, 144, 184, 0.14) 0%, rgba(10, 61, 98, 0.08) 100%);
    border-radius: 10px;
}

.cmdk__result-icon .nav-ico {
    width: 18px;
    height: 18px;
}

.cmdk__result-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cmdk__result-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-marine);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk__result-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.1rem 0 0;
    font-size: 0.8rem;
    color: var(--c-texte-doux);
}

.cmdk__result-cat {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background-color: var(--c-corail);
    border-radius: 999px;
}

.cmdk__result-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--c-mer-clair);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.cmdk__result:hover .cmdk__result-arrow,
.cmdk__result.is-active .cmdk__result-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Ligne « Voir tous les résultats » : accent corail. */
.cmdk__result--all {
    color: var(--c-corail-fonce);
    font-weight: 700;
}

.cmdk__result--all .cmdk__result-icon {
    color: #fff;
    background: linear-gradient(135deg, var(--c-corail) 0%, var(--c-corail-fonce) 100%);
}

.cmdk__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    color: var(--c-texte-doux);
    font-size: 0.92rem;
}

.cmdk__empty .nav-ico {
    width: 26px;
    height: 26px;
    color: var(--c-mer-clair);
    opacity: 0.7;
}

/* ---------- État « parcourir » ---------- */
.cmdk__group + .cmdk__group {
    margin-top: 0.85rem;
}

.cmdk__group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--c-texte-doux);
}

.cmdk__group-title .nav-ico {
    width: 15px;
    height: 15px;
    color: var(--c-corail);
}

.cmdk__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 0.2rem;
}

.cmdk__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-marine);
    background-color: var(--c-sable-clair);
    border: 1.5px solid var(--c-bordure);
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.cmdk__chip:hover,
.cmdk__chip:focus-visible {
    background-color: var(--c-blanc);
    border-color: var(--c-mer-clair);
    color: var(--c-marine);
    outline: none;
}

.cmdk__chip .nav-ico {
    width: 14px;
    height: 14px;
    color: var(--c-corail);
}

.cmdk__cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem;
    padding: 0 0.2rem;
}

@media (min-width: 520px) {
    .cmdk__cat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cmdk__cat {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--c-marine);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.cmdk__cat .nav-ico {
    width: 18px;
    height: 18px;
    color: var(--c-mer);
    flex-shrink: 0;
}

.cmdk__cat:hover,
.cmdk__cat:focus-visible {
    background-color: var(--c-sable-clair);
    outline: none;
}

/* ---------- Pied de palette ---------- */
.cmdk__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--c-bordure);
    background-color: var(--c-sable-clair);
    font-size: 0.75rem;
    color: var(--c-texte-doux);
}

.cmdk__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.cmdk__hint kbd {
    padding: 0.05em 0.35em;
}

.cmdk__hint kbd .nav-ico {
    width: 12px;
    height: 12px;
}

.cmdk__hint--ai {
    margin-left: auto;
    font-weight: 600;
    color: var(--c-mer);
}

.cmdk__hint--ai::before {
    content: "✦";
    margin-right: 0.3rem;
    color: var(--c-corail);
}

@media (max-width: 540px) {
    .cmdk__footer .cmdk__hint:not(.cmdk__hint--ai) {
        display: none;
    }
    .cmdk__hint--ai {
        margin-left: 0;
    }
}


/*
nav-footer-search.css

QUOI : Bouton « recherche » du pied de page (aligné sur les liens légaux), confort tactile (:active sans flash natif) et préférences de mouvement.

COMMENT : Copie telle quelle des lignes 1770–1850 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ============================ Lien recherche du pied de page ============================ */
/* Aligné sur `.site-footer__legal a` (style.css) mais c'est un <button> (ouvre la palette ⌘K).
   Mobile : cible tactile ≥ 48px ; desktop : compacté (pointeur fin) — cf. media plus bas. */
.site-footer__search-link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0.15rem 0.1rem;
    font: inherit;
    font-size: 0.82rem;
    color: var(--c-sable);
    background: transparent;
    border: none;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.site-footer__search-link:hover,
.site-footer__search-link:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .site-footer__search-link {
        min-height: 36px;
    }
}

.site-footer__search-link:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

/* ============================ Confort tactile ============================ */
/* Pas de flash bleu natif au tap ; retour visuel `:active` cohérent sur mobile. */
.site-nav__link,
.nav-menu__cell,
.nav-menu__row,
.nav-drawer__link,
.nav-drawer__summary,
.nav-drawer__sublink,
.nav-drawer__search,
.nav-drawer__close,
.cmdk__chip,
.cmdk__cat,
.cmdk__result,
.cmdk__esc,
.site-footer__search-link {
    -webkit-tap-highlight-color: transparent;
}

.cmdk__chip:active,
.cmdk__cat:active,
.cmdk__result:active,
.nav-menu__cell:active,
.nav-drawer__sublink:active {
    transform: scale(0.985);
}

.nav-drawer__search:active {
    transform: scale(0.99);
}

/* ============================ Préférences de mouvement ============================ */
@media (prefers-reduced-motion: reduce) {
    .nav-menu,
    .cmdk__dialog,
    .cmdk__scrim,
    .nav-drawer__panel,
    .nav-drawer__scrim,
    .site-nav__caret,
    .nav-drawer__summary-caret,
    .cmdk__result-arrow {
        animation: none !important;
        transition: none !important;
    }
}


/*
lang-switcher.css

QUOI : Sélecteur de langue : drapeaux (variante drawer centrée), liseré clair sur en-tête sombre, pastille + menu déroulant desktop.

COMMENT : Copie telle quelle des lignes 1851–2042 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ──────────────────────────────────────────────────────────────────────────
   Sélecteur de langue (FR | EN | NL) — header desktop + drawer mobile.
   QUOI : petit groupe de liens discrets, langue active mise en valeur.
   POURQUOI : laisser les touristes basculer vers /en, /nl tout en gardant fr canonique.
   ────────────────────────────────────────────────────────────────────────── */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline: 4px;
}

.lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 2.1rem;
    padding: 4px 6px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #5b6470);
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
    color: var(--color-text, #1f2733);
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-switch__link.is-active {
    color: #fff;
    background-color: var(--color-accent, #1f6feb);
    cursor: default;
}

/* Variante drawer mobile : centrée, séparée du reste par un filet. */
.lang-switch--drawer {
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.lang-switch--drawer .lang-switch__link {
    min-width: 2.6rem;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* ---------- Drapeaux du sélecteur de langue ----------
   Petite vignette arrondie devant le code FR/EN/NL, pour un repère visuel immédiat. */
.lang-switch__flag {
    width: 1.15rem;
    height: 0.8rem;
    flex: 0 0 auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.lang-switch--drawer .lang-switch__flag {
    width: 1.3rem;
    height: 0.9rem;
}
/* En-tête sombre + tiroir : liseré clair pour détacher les bandes blanches (FR/NL) du fond. */
.site-header .lang-switch__flag,
.nav-drawer__panel .lang-switch__flag {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

/* En-tête (toujours sombre dans les deux thèmes) : le sélecteur de langue passe en clair
   pour un contraste net sur le voile marine (corrige un gris codé en dur peu lisible). */
.site-header .lang-switch__link {
    color: rgba(255, 255, 255, 0.72);
}
.site-header .lang-switch__link:hover,
.site-header .lang-switch__link:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.14);
}
.site-header .lang-switch__link.is-active {
    color: #0a3d62;
    background-color: var(--c-sable);
}

/* ---------- Sélecteur de langue desktop : pastille drapeau + menu déroulant ----------
   Masqué sur mobile/tablette (la langue vit dans le tiroir) ; affiché ≥1024px (bloc desktop). */
.lang-dd {
    position: relative;
    display: none;
    flex: 0 0 auto;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    height: 40px;
    padding: 0 0.5rem;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-md);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.lang-trigger:hover {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

.lang-trigger:focus-visible {
    outline: 2px solid var(--c-sable);
    outline-offset: 2px;
}

.lang-trigger__flag {
    display: block;
    width: 1.5rem;
    height: 1.05rem;
    flex: 0 0 auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.lang-trigger__code {
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.lang-trigger__caret {
    width: 13px;
    height: 13px;
    color: #fff;
    opacity: 0.8;
}

/* Menu langues : popover compact aligné à droite (proche du bord de l'en-tête). */
.nav-menu--lang {
    left: auto;
    right: 0;
    min-width: 158px;
    width: max-content;
    padding: 0.4rem;
}
.nav-menu--lang::before {
    left: auto;
    right: 1.25rem;
}

.lang-menu__link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--c-marine);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.lang-menu__link:hover,
.lang-menu__link:focus-visible {
    background-color: var(--c-sable-clair);
    outline: none;
}

.lang-menu__link.is-active {
    background-color: rgba(30, 96, 145, 0.10);
}

.lang-menu__flag {
    display: block;
    width: 1.5rem;
    height: 1.05rem;
    flex: 0 0 auto;
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--c-bordure);
}


/*
nav-theme-dark.css

QUOI : Mode sombre des surfaces blanches de la nav : popovers, textes de menus et pastilles « recherches populaires » au survol.

COMMENT : Copie telle quelle des lignes 2043–2111 de public/css/nav.css
          (scission jalon 5 — blocs contigus, zéro réécriture de règle).

OÙ : Importé par nav.css, dans l'ordre de cascade du fichier d'origine.

POURQUOI : specs/projet.md §4.2 — aucun fichier CSS > 500 lignes, rendu identique
           au pixel (invariant I4).
*/

/* ============================ Mode sombre (surfaces blanches de la nav) ============================
   Piloté par [data-theme="dark"] sur <html> (cf. style.css). --c-blanc reste blanc
   (texte sur pastilles) ; on redéfinit les rares surfaces blanches (menus desktop, palette ⌘K, kbd). */
[data-theme="dark"] kbd {
    color: var(--c-marine);
    background-color: #1d2e3b;
    border-color: rgba(160, 196, 224, 0.20);
}

[data-theme="dark"] .nav-menu {
    background-color: #16242f;
}
[data-theme="dark"] .nav-menu::before {
    background-color: #16242f;
}
/* Texte des menus (catégories, villes, à propos, langues) lisible sur le popover sombre. */
[data-theme="dark"] .nav-menu__cell,
[data-theme="dark"] .nav-menu__row,
[data-theme="dark"] .nav-explorer__link,
[data-theme="dark"] .lang-menu__link {
    color: #eaf2f8;
}
[data-theme="dark"] .nav-menu__cell:hover,
[data-theme="dark"] .nav-menu__cell:focus-visible,
[data-theme="dark"] .nav-menu__row:hover,
[data-theme="dark"] .nav-menu__row:focus-visible,
[data-theme="dark"] .nav-explorer__link:hover,
[data-theme="dark"] .nav-explorer__link:focus-visible,
[data-theme="dark"] .lang-menu__link:hover,
[data-theme="dark"] .lang-menu__link:focus-visible {
    background-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .lang-menu__link.is-active {
    background-color: rgba(74, 144, 184, 0.20);
}
[data-theme="dark"] .nav-explorer__col--cities,
[data-theme="dark"] .nav-explorer__foot {
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .cmdk__dialog {
    background-color: #111e29;
}

[data-theme="dark"] .cmdk__search {
    background: linear-gradient(180deg, #16242f 0%, #111e29 100%);
}

[data-theme="dark"] .cmdk__esc {
    background-color: #1d2e3b;
    border-color: rgba(160, 196, 224, 0.20);
}

/* Pastilles « recherches populaires » / « explorer une ville » : le survol clair
   (--c-blanc = blanc pur, --c-marine = encre CLAIRE en sombre) donnait du texte
   blanc sur fond blanc → illisible. On rétablit des surfaces sombres surélevées. */
[data-theme="dark"] .cmdk__chip {
    background-color: #1d2e3b;
}
[data-theme="dark"] .cmdk__chip:hover,
[data-theme="dark"] .cmdk__chip:focus-visible {
    background-color: #284459;
    border-color: var(--c-mer);
    color: var(--c-marine);
}
[data-theme="dark"] .cmdk__cat:hover,
[data-theme="dark"] .cmdk__cat:focus-visible {
    background-color: rgba(255, 255, 255, 0.07);
}