/* 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;
}

/* ── « Discuter avec l'IA » ──
   La seule entrée de la barre qui n'est pas un lien de page : elle ouvre un panneau SUR la page.
   Elle se distingue donc autrement qu'en s'ajoutant à la file — contour discret au lieu du
   soulignement animé (ce soulignement code un état de section, or l'assistant n'a pas de route
   courante à signaler) et icône corail, l'accent que la charte réserve à l'action à prendre. */
.site-nav__link--ia {
    margin-left: 0.2rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
}

.site-nav__link--ia::after {
    content: none;
}

.site-nav__link--ia .site-nav__lead {
    color: var(--c-corail);
    transition: transform var(--duration-base) var(--ease-out);
}

.site-nav__link--ia:hover,
.site-nav__link--ia:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.42);
}

.site-nav__link--ia:hover .site-nav__lead {
    transform: rotate(-8deg);
}

.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);
}

/* « Discuter avec l'IA » : icône corail — c'est la seule entrée du tiroir qui déclenche une action
   au lieu de mener à une page, et le corail est l'accent que la charte réserve à l'action à prendre.
   Rien d'autre ne la distingue : dans le tiroir, une entrée encadrée casserait le rythme de la pile. */
.nav-drawer__link--ia .nav-ico {
    color: var(--c-corail);
}

.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);
}


/* EN DERNIER, volontairement : cette règle relève la taille des champs de saisie sous le
   seuil de zoom automatique d'iOS, elle doit donc passer après tous les composants qui fixent
   leur propre taille. Voir base/ios-zoom.css. */
/*
ios-zoom.css

QUOI : Garantit qu'aucun champ de saisie ne descend sous 16 px sur mobile.

COMMENT : Safari iOS zoome automatiquement sur un champ dont la taille de police est INFÉRIEURE à
          16 px au moment où il reçoit le focus — et ne dézoome jamais quand le clavier se referme.
          Le visiteur reste coincé sur une page agrandie et décalée. Ce n'est pas un réglage
          d'utilisateur ni une préférence : c'est un seuil codé en dur dans le navigateur.

          `max(16px, 1em)` et non `16px` sec — mais sans se raconter d'histoire sur ce que ça fait :
          `1em` vaut la taille HÉRITÉE du parent, pas celle du champ. Concrètement, sur mobile tous les
          champs s'alignent donc à 16 px, sauf ceux placés dans un contexte typographique délibérément
          plus grand, qui le suivent. Les écarts réellement observés sont de l'ordre du demi-pixel
          (16,32 px → 16 px sur la recherche d'accueil) : la lisibilité mobile y gagne, le dessin n'y
          perd rien.

          `!important` est ici délibéré, et n'est pas un raccourci pour éviter de comprendre la
          cascade. La règle n'exprime pas une préférence de design mais une CONTRAINTE de plateforme,
          et elle doit gagner contre des dizaines de sélecteurs de composants qui fixent chacun leur
          propre taille, avec des spécificités variées (`.discovery .search-input`,
          `.submission-form input[type="text"]`, `.poi-field input[type="email"]`…) et répartis dans
          trois bundles distincts. Un audit du 2026-09-09 en dénombrait 29 sous le seuil. Les reprendre
          un par un aurait laissé le prochain champ écrit retomber dans le même piège — c'est le genre
          de règle qui doit tenir par construction, pas par vigilance.

          Cases à cocher, boutons radio, curseurs et sélecteurs de fichier sont exclus : ils
          n'ouvrent pas de clavier, ne déclenchent donc pas le zoom, et leur taille de police pilote
          l'apparence de leur libellé.

OÙ : importé par les TROIS manifestes (`app.imports.css`, `nav.imports.css`, `admin.imports.css`) —
     on saisit du texte sur le site public, dans l'en-tête et dans le back-office.

POURQUOI : signalé en production le 2026-09-09 sur le champ de l'assistant, puis retrouvé sur 28
           autres champs. Corriger le champ signalé seul aurait déplacé le problème d'un formulaire à
           l'autre sans jamais le clore.
*/

@media (max-width: 600px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    textarea,
    select {
        font-size: max(16px, 1em) !important;
    }
}