/* =============================================
   WELCOME NANTES - STYLE V2 (commun à tout le site)
   Toutes les classes commencent par "wn-" pour ne pas
   entrer en conflit avec les anciens styles des pages.
   ============================================= */

/* =============================================
   COULEURS ET RÉGLAGES (1 couleur = 1 rôle)
   ============================================= */
:root {
    --wn-bleu: #1e9bbb;          /* identité : en-tête, liens, titres */
    --wn-bleu-fonce: #157a94;
    --wn-bleu-clair: #e6f5f9;
    --wn-or: #FAB700;            /* action principale : boutons */
    --wn-or-fonce: #d99e00;
    --wn-vert: #2e9e6e;          /* facile, succès */
    --wn-orange: #f28c28;        /* moyen */
    --wn-rouge: #C2201B;         /* difficile, favoris */
    --wn-texte: #1F2A30;
    --wn-texte-doux: #5b6b74;
    --wn-fond: #F7FAFB;
    --wn-carte: #ffffff;
    --wn-bord: #e3eaee;
    --wn-rayon: 16px;
    --wn-ombre: 0 4px 14px rgba(20, 60, 80, 0.08);
    --wn-ombre-forte: 0 10px 28px rgba(20, 60, 80, 0.16);
    --wn-hauteur-entete: 60px;
}

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Un élément masqué (attribut hidden) reste masqué, même si sa classe définit un affichage */
[hidden] { display: none !important; }

/* Les marges intérieures sont comprises dans la largeur (évite les débordements sur mobile) */
[class^="wn-"], [class*=" wn-"],
[class^="wn-"] *, [class*=" wn-"] * {
    box-sizing: border-box;
}

.wn-conteneur {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Bouton principal (or) et secondaire */
.wn-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--wn-or);
    color: var(--wn-texte);
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 999px;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.wn-bouton:hover { background: var(--wn-or-fonce); transform: translateY(-1px); }
.wn-bouton.wn-sombre { background: var(--wn-texte); color: #fff; }
.wn-bouton.wn-sombre:hover { background: #000; }

/* =============================================
   EN-TÊTE COMMUN
   ============================================= */
/* Les anciens styles (css/style.css) appliquent des règles à toutes les balises
   header / nav / footer : on les annule pour les éléments V2. */
header.wn-entete { padding: 0; min-height: 0; margin: 0; color: #fff; }
nav.wn-nav-ordi, .wn-menu-plus nav, nav.wn-nav-mobile { margin: 0; }
nav.wn-nav-ordi { background: none; padding: 0; }
footer.wn-pied { text-align: left; }

.wn-entete {
    background: var(--wn-bleu);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    font-family: 'Inter', system-ui, sans-serif;
}
.wn-entete .wn-conteneur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--wn-hauteur-entete);
}
.wn-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-decoration: none;
}
.wn-logo img { height: 38px; width: auto; display: block; }
.wn-logo span { white-space: nowrap; font-size: 0.95rem; }
/* Petits téléphones : logo et boutons plus serrés pour laisser la place au sélecteur de langue */
@media (max-width: 400px) {
    .wn-entete .wn-conteneur { gap: 6px; }
    .wn-logo { gap: 6px; min-width: 0; }
    .wn-logo img { height: 32px; }
    .wn-logo span { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; }
}

.wn-nav-ordi { display: none; gap: 4px; }
.wn-nav-ordi a {
    color: #fff;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s;
}
.wn-nav-ordi a:hover,
.wn-nav-ordi a.wn-actif { background: rgba(255, 255, 255, 0.18); }

.wn-entete-droite { display: flex; align-items: center; gap: 8px; }

/* Sélecteur de langue en drapeaux : sur téléphone, seulement l'autre langue (drapeau anglais sur une page en français) */
.wn-langues { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wn-langues a { display: flex; padding: 4px; border-radius: 6px; line-height: 0; }
.wn-langues a:hover { background: rgba(255, 255, 255, 0.18); }
.wn-langues a.wn-actif { display: none; }
.wn-drapeau { width: 26px; height: 17px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); display: block; overflow: hidden; }

.wn-bouton-compte {
    background: #fff;
    color: var(--wn-bleu-fonce);
    font-weight: 700;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}
.wn-bouton-compte.wn-sans-avatar { padding: 8px 14px; }
.wn-bouton-compte img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--wn-bleu-clair);
    border: 2px solid var(--wn-or);
}
/* Petits écrans : le bouton Connexion n'affiche que son icône (la barre du bas l'affiche en entier) */
@media (max-width: 420px) {
    .wn-bouton-compte.wn-sans-avatar { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .wn-bouton-compte .wn-texte-connexion { display: none; }
}
.wn-bouton-compte .wn-pseudo {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

/* Menu "plus" (Actualités, Aide, Contact, Déconnexion...) */
.wn-menu-plus { position: relative; }
.wn-menu-plus summary {
    list-style: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.15rem;
    background: rgba(255, 255, 255, 0.15);
}
.wn-menu-plus summary::-webkit-details-marker { display: none; }
.wn-menu-plus[open] summary { background: rgba(255, 255, 255, 0.3); }
.wn-menu-plus nav {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    background: #fff;
    border-radius: var(--wn-rayon);
    box-shadow: var(--wn-ombre-forte);
    min-width: 230px;
    padding: 8px;
    display: grid;
}
.wn-menu-plus nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--wn-texte);
    font-weight: 500;
    text-decoration: none;
}
.wn-menu-plus nav a i { width: 18px; text-align: center; color: var(--wn-bleu); }
.wn-menu-plus nav a:hover { background: var(--wn-bleu-clair); }
.wn-menu-plus nav hr { border: 0; border-top: 1px solid var(--wn-bord); margin: 6px 4px; }

/* =============================================
   BARRE DE NAVIGATION EN BAS (mobile)
   ============================================= */
.wn-nav-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 950;
    background: #fff;
    border-top: 1px solid var(--wn-bord);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    font-family: 'Inter', system-ui, sans-serif;
}
.wn-nav-mobile a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--wn-texte-doux);
    padding: 4px 0;
    text-decoration: none;
}
.wn-nav-mobile a i { font-size: 1.2rem; }
.wn-nav-mobile a.wn-actif { color: var(--wn-bleu); }
.wn-nav-mobile a.wn-creer i {
    background: var(--wn-or);
    color: var(--wn-texte);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-top: -24px;
    box-shadow: 0 6px 16px rgba(250, 183, 0, 0.5);
    font-size: 1.3rem;
}

/* Laisse la place à la barre du bas pour ne rien masquer */
body:has(.wn-nav-mobile) { padding-bottom: 84px; }

/* =============================================
   PIED DE PAGE COMMUN
   ============================================= */
.wn-pied {
    background: var(--wn-texte);
    color: #cfd8dd;
    margin-top: 40px;
    padding: 32px 0 20px;
    font-size: 0.9rem;
    font-family: 'Inter', system-ui, sans-serif;
}
.wn-pied a { color: #cfd8dd; text-decoration: none; }
.wn-pied a:hover { color: var(--wn-or); }
.wn-pied-grille { display: grid; gap: 24px; }
.wn-pied-marque { display: flex; align-items: center; gap: 12px; justify-self: start; } /* lien vers l'accueil */
.wn-pied-marque img { height: 44px; width: auto; }
.wn-pied-marque strong { color: #fff; display: block; font-size: 1.05rem; }
.wn-pied h4 { color: #fff; font-size: 0.95rem; margin: 0 0 10px; }
.wn-pied-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wn-pied-colonnes a { display: block; padding: 4px 0; }
.wn-pied-reseaux { display: flex; gap: 10px; }
.wn-pied-reseaux a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}
.wn-pied-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 24px;
    padding-top: 16px;
    font-size: 0.8rem;
    color: #8fa0a8;
}

/* =============================================
   PAGE D'ACCUEIL
   ============================================= */
.wn-accueil { background: var(--wn-fond); color: var(--wn-texte); line-height: 1.55; }
/* :where() = règle "faible", que les styles des boutons et puces peuvent remplacer */
:where(.wn-accueil) a { text-decoration: none; color: inherit; }
:where(.wn-accueil) img { display: block; max-width: 100%; }

/* Héro */
.wn-hero {
    position: relative;
    color: #fff;
    overflow: hidden;
    background: url('../images/nantes-background.webp') center / cover no-repeat;
}
.wn-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(21, 122, 148, 0.92) 0%, rgba(30, 155, 187, 0.75) 55%, rgba(250, 183, 0, 0.55) 100%);
}
.wn-hero .wn-conteneur { position: relative; padding-top: 36px; padding-bottom: 44px; }
.wn-hero-pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}
.wn-hero h1 { font-size: 2rem; line-height: 1.15; font-weight: 800; margin: 14px 0 10px; color: #fff; }
.wn-hero h1 span { color: var(--wn-or); }
.wn-hero p { font-size: 1.05rem; opacity: 0.95; max-width: 560px; margin: 0; }

.wn-recherche {
    margin-top: 22px;
    background: #fff;
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 18px;
    box-shadow: var(--wn-ombre-forte);
    max-width: 620px;
}
.wn-recherche i { color: var(--wn-texte-doux); }
.wn-recherche input {
    flex: 1;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 1rem;
    padding: 10px 12px;
    min-width: 0;
    color: var(--wn-texte);
    background: transparent;
}
.wn-recherche button {
    background: var(--wn-or);
    color: var(--wn-texte);
    border: 0;
    font: inherit;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 999px;
    cursor: pointer;
}

.wn-puces {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.wn-puce {
    flex: none;
    background: rgba(255, 255, 255, 0.95);
    color: var(--wn-texte);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--wn-ombre);
}
.wn-puce:hover { background: #fff; }

/* Raccourcis de la page d'accueil : sur plusieurs lignes, icônes dans une pastille de couleur */
.wn-puces-accueil { flex-wrap: wrap; overflow: visible; }
/* Puces et cases de filtre : icône et libellé alignés */
.wn-puce, .wn-case > span { display: inline-flex; align-items: center; gap: 7px; }
.wn-puce-duree { font-weight: 800; padding-left: 16px; padding-right: 16px; }
.wn-puce-icone {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border-radius: 50%;
    background: var(--couleur);
    color: #fff;
    font-size: 0.75rem;
}
.wn-puce.wn-puce-plus { background: var(--wn-or); }
.wn-puce.wn-puce-plus:hover { background: #fff; }

/* Chiffres clés */
.wn-chiffres {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: -22px;
    position: relative;
    z-index: 2;
}
.wn-chiffre {
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    padding: 14px 10px;
    text-align: center;
    box-shadow: var(--wn-ombre);
}
.wn-chiffre strong { display: block; font-size: 1.4rem; font-weight: 800; color: var(--wn-bleu); }
.wn-chiffre span { font-size: 0.8rem; color: var(--wn-texte-doux); }

/* Sections */
.wn-section { padding: 34px 0 6px; }
.wn-titre-section {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.wn-titre-section h2 { font-size: 1.4rem; font-weight: 800; margin: 0; color: var(--wn-texte); }
.wn-titre-section h2 i { color: var(--wn-or); margin-right: 6px; }
.wn-titre-section a { color: var(--wn-bleu); font-weight: 600; font-size: 0.9rem; white-space: nowrap; }

/* Cartes itinéraires : défilement horizontal sur mobile */
.wn-cartes {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 16px 14px;
    margin: 0 -16px;
    scrollbar-width: none;
}
.wn-carte {
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    overflow: hidden;
    box-shadow: var(--wn-ombre);
    scroll-snap-align: start;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.wn-carte:hover { transform: translateY(-4px); box-shadow: var(--wn-ombre-forte); }
.wn-carte-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; background: var(--wn-bleu-clair); }
/* Photo posée par-dessus le cadre : une photo en hauteur ne peut plus agrandir la carte */
.wn-carte-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wn-badge-top {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--wn-or);
    color: var(--wn-texte);
    font-weight: 800;
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: var(--wn-ombre);
}
.wn-carte-corps { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.wn-carte-corps h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--wn-texte); }
.wn-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.wn-badge {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.wn-badge.wn-facile { background: #e3f5ec; color: var(--wn-vert); }
.wn-badge.wn-moyen { background: #fdeedd; color: #c76a12; }
.wn-badge.wn-difficile { background: #f9e1e0; color: var(--wn-rouge); }
/* Jauge de difficulté : 3 barres de hauteur croissante, colorées selon le niveau (voir badge_difficulte()) */
.wn-jauge { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wn-jauge i { display: block; width: 4px; border-radius: 2px; background: currentColor; opacity: 0.25; }
.wn-jauge i:nth-child(1) { height: 5px; }
.wn-jauge i:nth-child(2) { height: 8px; }
.wn-jauge i:nth-child(3) { height: 12px; }
.wn-jauge i.wn-plein { opacity: 1; }
.wn-badge.wn-info { background: var(--wn-bleu-clair); color: var(--wn-bleu-fonce); }
.wn-carte-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--wn-bord);
    padding-top: 12px;
    margin-top: auto;
    font-size: 0.85rem;
    gap: 8px;
}
.wn-auteur { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.wn-auteur span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-auteur img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--wn-bleu-clair);
    border: 2px solid var(--wn-or);
    flex: none;
}
.wn-compteurs { display: flex; gap: 12px; color: var(--wn-texte-doux); flex: none; }

/* Message quand il n'y a encore rien à afficher */
.wn-vide {
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    box-shadow: var(--wn-ombre);
    padding: 28px 20px;
    text-align: center;
    color: var(--wn-texte-doux);
}
.wn-vide img { width: 90px; margin: 0 auto 10px; }
.wn-vide strong { display: block; color: var(--wn-texte); font-size: 1.1rem; margin-bottom: 4px; }
.wn-vide .wn-bouton { margin-top: 14px; }

/* Comment ça marche */
.wn-etapes { display: grid; gap: 12px; }
.wn-etape {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    padding: 16px;
    box-shadow: var(--wn-ombre);
}
.wn-etape-numero {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: #fff;
}
.wn-etape:nth-child(1) .wn-etape-numero { background: var(--wn-bleu); }
.wn-etape:nth-child(2) .wn-etape-numero { background: var(--wn-vert); }
.wn-etape:nth-child(3) .wn-etape-numero { background: var(--wn-or); color: var(--wn-texte); }
.wn-etape h3 { font-size: 1rem; margin: 0 0 2px; color: var(--wn-texte); }
.wn-etape p { font-size: 0.92rem; color: var(--wn-texte-doux); margin: 0; }

/* Classement des Nantais */
.wn-classement { background: var(--wn-carte); border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre); overflow: hidden; }
.wn-ligne-classement {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--wn-bord);
}
.wn-ligne-classement:last-child { border-bottom: 0; }
.wn-rang { width: 30px; font-weight: 800; font-size: 1.1rem; text-align: center; }
.wn-ligne-classement img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--wn-bleu-clair); }
.wn-ligne-classement .wn-nom { flex: 1; min-width: 0; }
.wn-ligne-classement .wn-nom strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wn-niveau { font-size: 0.75rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; }
.wn-niveau-1 { background: #8fa0a8; }
.wn-niveau-2 { background: var(--wn-bleu); }
.wn-niveau-3 { background: var(--wn-vert); }
.wn-niveau-4 { background: var(--wn-orange); }
.wn-niveau-5 { background: var(--wn-rouge); }
.wn-ligne-classement .wn-score { text-align: right; font-size: 0.82rem; color: var(--wn-texte-doux); }
.wn-ligne-classement .wn-score strong { display: block; color: var(--wn-bleu); font-size: 1rem; }

/* Appel à l'action */
.wn-appel {
    margin: 34px 0 10px;
    border-radius: 22px;
    padding: 26px 22px;
    background: linear-gradient(135deg, var(--wn-or) 0%, #ffd34d 100%);
    display: grid;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
.wn-appel h2 { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin: 0 0 6px; color: var(--wn-texte); }
.wn-appel h2, .wn-appel p { padding-right: 80px; }
.wn-appel p { color: #4a3b00; margin: 0; }
.wn-appel .wn-bouton { justify-self: start; position: relative; z-index: 1; }
.wn-appel img {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: var(--wn-ombre);
}
/* Grenouille d'or (Aide, À propos) : entière dans son rond, tournée vers le texte
   (sur téléphone le rond est à droite du texte : on la retourne en miroir) */
.wn-appel img.wn-mascotte-or { object-fit: contain; padding: 4.5px; box-sizing: border-box; transform: scaleX(-1); }

/* =============================================
   LISTE DES ITINÉRAIRES (itineraire.php)
   ============================================= */
.wn-liste { background: var(--wn-fond); color: var(--wn-texte); line-height: 1.55; margin: 0; }
:where(.wn-liste) a { color: inherit; text-decoration: none; }
:where(.wn-liste) img { display: block; max-width: 100%; }
body.wn-sans-defilement { overflow: hidden; }

.wn-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wn-liste-tete {
    background: linear-gradient(160deg, var(--wn-bleu-fonce) 0%, var(--wn-bleu) 70%, #39b3cf 100%);
    color: #fff;
    padding: 26px 0 22px;
}
.wn-liste-tete h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 4px; color: #fff; }
.wn-liste-tete p { margin: 0; opacity: 0.92; }
.wn-liste-tete .wn-recherche { margin-top: 16px; }
.wn-puce.wn-choisie { background: var(--wn-or); box-shadow: none; }

/* Barre filtres / tri / carte */
.wn-liste-barre { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.wn-liste-barre .wn-tri { flex: 1; min-width: 150px; display: flex; gap: 6px; }
.wn-liste-barre select {
    width: 100%;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--wn-bord);
    background: var(--wn-carte);
    color: var(--wn-texte);
}
.wn-pastille {
    background: var(--wn-or);
    color: var(--wn-texte);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 800;
    display: inline-grid;
    place-items: center;
}
.wn-cache-mobile { display: none; }

/* Panneau des filtres : monte du bas sur mobile */
.wn-filtres {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 30, 38, 0.5);
    display: flex;
    align-items: flex-end;
}
.wn-filtres[hidden] { display: none; }
.wn-filtres-contenu {
    background: var(--wn-carte);
    width: 100%;
    max-height: 88vh;
    border-radius: 22px 22px 0 0;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', system-ui, sans-serif;
    margin: 0;
}
.wn-filtres-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--wn-bord);
    font-size: 1.1rem;
}
.wn-fermer {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: var(--wn-fond);
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--wn-texte);
}
.wn-filtres-groupes { overflow-y: auto; padding: 6px 18px 12px; }
.wn-groupe-filtre { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wn-groupe-filtre legend { font-weight: 800; margin-bottom: 8px; padding: 0; color: var(--wn-texte); }
.wn-case { cursor: pointer; }
.wn-case input { position: absolute; opacity: 0; pointer-events: none; }
.wn-case > span {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1.5px solid var(--wn-bord);
    font-size: 0.9rem;
    font-weight: 600;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
}
.wn-case input:checked + span { background: var(--wn-bleu-clair); border-color: var(--wn-bleu); color: var(--wn-bleu-fonce); }
.wn-case input:focus-visible + span { outline: 3px solid var(--wn-or); outline-offset: 2px; }
.wn-filtres-pied {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--wn-bord);
}

/* Résumé des résultats et filtres actifs */
.wn-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 14px; }
.wn-resume strong { font-size: 1.05rem; margin-right: 4px; }
.wn-filtre-actif {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wn-bleu-clair);
    color: var(--wn-bleu-fonce);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
}
.wn-effacer { color: var(--wn-rouge); font-size: 0.85rem; font-weight: 700; }

/* Grille des cartes */
.wn-grille-cartes { display: grid; gap: 16px; }
.wn-grille-cartes .wn-carte { position: relative; }
.wn-carte-image { display: block; }
.wn-carte-corps h3 a:hover { color: var(--wn-bleu); }
.wn-carte-resume { color: var(--wn-texte-doux); font-size: 0.9rem; margin: 0 0 12px; }
.wn-badge-top.wn-prive { background: var(--wn-texte); color: #fff; }
.wn-coeur {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: var(--wn-rouge);
    box-shadow: var(--wn-ombre);
    font-size: 1.05rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.15s;
}
.wn-coeur:active { transform: scale(0.9); }
.wn-coeur.wn-actif { background: var(--wn-rouge); color: #fff; }
.wn-vote-mini {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--wn-bord);
    background: #fff;
    color: var(--wn-texte);
    border-radius: 999px;
    padding: 6px 12px;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.wn-vote-mini i { color: var(--wn-bleu); }
.wn-vote-mini.wn-actif { background: var(--wn-bleu); border-color: var(--wn-bleu); color: #fff; }
.wn-vote-mini.wn-actif i { color: #fff; }

.wn-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 8px; font-weight: 600; }

/* =============================================
   FORMULAIRES (créer / modifier un itinéraire ou une étape)
   ============================================= */
.wn-page-formulaire { background: var(--wn-fond); color: var(--wn-texte); line-height: 1.5; margin: 0; }
:where(.wn-page-formulaire) a { color: inherit; text-decoration: none; }
.wn-form-page { padding-top: 16px; padding-bottom: 24px; max-width: 760px; }
.wn-lien-retour { display: inline-flex; align-items: center; gap: 6px; color: var(--wn-bleu); font-weight: 600; font-size: 0.9rem; }
.wn-form-page h1 { font-size: 1.6rem; font-weight: 800; margin: 10px 0 2px; }
.wn-sous-titre { color: var(--wn-texte-doux); margin: 0 0 6px; }

/* Étapes de la création : 1. Itinéraire 2. Étapes 3. Publication */
.wn-etapes-creation { list-style: none; display: flex; gap: 6px; padding: 0; margin: 12px 0 4px; font-size: 0.8rem; font-weight: 700; }
.wn-etapes-creation li { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; background: var(--wn-bord); color: var(--wn-texte-doux); }
.wn-etapes-creation li.wn-en-cours { background: var(--wn-or); color: var(--wn-texte); }
.wn-etapes-creation li.wn-fait { background: #e3f5ec; color: var(--wn-vert); }

.wn-form { margin: 0; }
.wn-form .wn-bloc h2 { margin-bottom: 14px; }
.wn-champ { margin: 0 0 16px; border: 0; padding: 0; min-width: 0; }
.wn-champ:last-child { margin-bottom: 0; }
.wn-champ > label, .wn-champ > legend, .wn-libelle { display: block; font-weight: 700; margin-bottom: 6px; padding: 0; }
.wn-aide { font-size: 0.85rem; color: var(--wn-texte-doux); margin: -2px 0 8px; }
.wn-form input[type="text"], .wn-form input[type="search"], .wn-form input[type="number"],
.wn-form input[type="time"], .wn-form input[type="email"], .wn-form input[type="password"],
.wn-form input[type="tel"], .wn-form input[type="url"], .wn-form input[type="date"], .wn-form input[type="datetime-local"],
.wn-form select, .wn-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem; /* 16 px : évite le zoom automatique sur iPhone */
    padding: 12px 14px;
    border: 1.5px solid var(--wn-bord);
    border-radius: 12px;
    background: #fff;
    color: var(--wn-texte);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wn-form textarea { resize: vertical; min-height: 110px; }
.wn-form input:focus, .wn-form select:focus, .wn-form textarea:focus {
    outline: none;
    border-color: var(--wn-bleu);
    box-shadow: 0 0 0 3px rgba(30, 155, 187, 0.18);
}
.wn-form input.wn-invalide, .wn-form select.wn-invalide, .wn-form textarea.wn-invalide { border-color: var(--wn-rouge); background: #fff8f8; }
.wn-erreur-champ { color: var(--wn-rouge); font-size: 0.85rem; font-weight: 600; margin: 6px 0 0; }
.wn-compteur { font-size: 0.78rem; color: var(--wn-texte-doux); text-align: right; margin: 4px 0 0; }
.wn-compteur.wn-alerte { color: #c76a12; font-weight: 700; }
.wn-champs-ligne { display: grid; gap: 0 14px; }
.wn-puces-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.wn-avec-unite { display: flex; align-items: center; gap: 8px; }
.wn-avec-unite span { color: var(--wn-texte-doux); font-weight: 600; }

/* Mots-clés */
.wn-mots-cles-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wn-mots-cles-liste:empty { display: none; }
.wn-mot-cle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--wn-bleu-clair);
    color: var(--wn-bleu-fonce);
    font-weight: 700;
    font-size: 0.88rem;
    padding: 6px 6px 6px 12px;
    border-radius: 999px;
}
.wn-mot-cle button {
    border: 0;
    background: rgba(255, 255, 255, 0.7);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--wn-bleu-fonce);
}
.wn-mots-cles-saisie { display: flex; gap: 8px; }
.wn-mots-cles-saisie .wn-bouton { flex: none; padding: 10px 16px; }

/* Photo */
.wn-choix-fichier { display: block; cursor: pointer; }
.wn-choix-fichier input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wn-choix-fichier span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border: 2px dashed var(--wn-bord);
    border-radius: 14px;
    font-weight: 700;
    color: var(--wn-bleu-fonce);
    background: #fbfdfe;
}
.wn-choix-fichier input:focus-visible + span { outline: 3px solid var(--wn-or); }
.wn-apercu, .wn-image-actuelle img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; margin-top: 10px; display: block; }
.wn-image-actuelle { margin-bottom: 10px; }
.wn-image-actuelle .wn-case { display: inline-block; margin-top: 8px; }

/* Choix du lieu d'une étape */
.wn-segment { display: grid; grid-template-columns: 1fr 1fr; background: var(--wn-fond); border-radius: 14px; padding: 4px; margin-bottom: 16px; }
.wn-segment input { position: absolute; opacity: 0; pointer-events: none; }
.wn-segment span { display: block; text-align: center; padding: 10px 6px; border-radius: 11px; font-weight: 700; font-size: 0.9rem; cursor: pointer; color: var(--wn-texte-doux); }
.wn-segment input:checked + span { background: #fff; color: var(--wn-texte); box-shadow: var(--wn-ombre); }
.wn-segment input:focus-visible + span { outline: 3px solid var(--wn-or); }
.wn-lieu-choisi {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #e3f5ec;
    border-radius: 14px;
    padding: 12px 14px;
}
.wn-lieu-choisi > i { color: var(--wn-vert); font-size: 1.3rem; }
.wn-lieu-choisi div { flex: 1; min-width: 0; }
.wn-lieu-choisi strong, .wn-lieu-choisi span { display: block; }
.wn-lieu-choisi span { font-size: 0.85rem; color: var(--wn-texte-doux); }
.wn-recherche-lieu { position: relative; }
.wn-suggestions {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--wn-bord);
    border-radius: 14px;
    box-shadow: var(--wn-ombre-forte);
    max-height: 300px;
    overflow-y: auto;
}
.wn-suggestions button {
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    padding: 10px 12px;
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
    color: var(--wn-texte);
}
.wn-suggestions button:hover, .wn-suggestions button:focus { background: var(--wn-bleu-clair); }
.wn-suggestions strong, .wn-suggestions span { display: block; }
.wn-suggestions span { font-size: 0.82rem; color: var(--wn-texte-doux); }
.wn-suggestions .wn-aucun { padding: 8px 12px; color: var(--wn-texte-doux); font-size: 0.9rem; }
.wn-suggestions .wn-aucun button { color: var(--wn-bleu); font-weight: 700; padding: 6px 0; }
.wn-adresse { display: grid; gap: 8px; }
.wn-carte-choix { margin: 0 0 16px; }
.wn-carte-choix #carteLieu { height: 260px; border-radius: 14px; border: 1.5px solid var(--wn-bord); z-index: 1; }
.wn-carte-choix .wn-aide { margin: 8px 0 0; }
.wn-carte-choix .wn-aide.wn-ok { color: var(--wn-vert); font-weight: 600; }
.wn-deja summary { cursor: pointer; font-weight: 700; }
.wn-deja ol { margin: 10px 0 0; padding-left: 20px; color: var(--wn-texte-doux); font-size: 0.9rem; }

/* Barre d'envoi toujours visible (au-dessus de la barre de navigation sur mobile) */
.wn-barre-envoi {
    position: sticky;
    bottom: 84px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 16px;
    box-shadow: var(--wn-ombre-forte);
}
.wn-barre-envoi .wn-bouton { flex: 1 1 0; min-width: 0; padding: 12px 10px; gap: 6px; font-size: 0.92rem; white-space: nowrap; }
.wn-barre-envoi a.wn-bouton.wn-clair { flex: 0 0 auto; }

/* =============================================
   COMPTE : connexion, inscription, mot de passe
   ============================================= */
.wn-compte { padding-top: 20px; padding-bottom: 30px; }
.wn-compte-carte {
    max-width: 460px;
    margin: 0 auto;
    background: var(--wn-carte);
    border-radius: 22px;
    box-shadow: var(--wn-ombre);
    padding: 22px 20px 20px;
    text-align: left;
}
.wn-compte-carte h1 { font-size: 1.35rem; font-weight: 800; line-height: 1.25; margin: 6px 0 14px; }
.wn-compte { padding-top: 54px; }
.wn-onglets-compte a {
    display: block;
    text-align: center;
    padding: 10px 6px;
    border-radius: 11px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--wn-texte-doux);
    text-decoration: none;
}
.wn-onglets-compte a.wn-actif { background: #fff; color: var(--wn-texte); box-shadow: var(--wn-ombre); }
.wn-aide-inline { font-weight: 500; color: var(--wn-texte-doux); font-size: 0.85rem; }
.wn-mdp { position: relative; }
.wn-mdp input { padding-right: 50px !important; }
.wn-voir-mdp {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 0;
    background: none;
    color: var(--wn-texte-doux);
    cursor: pointer;
    font-size: 1rem;
}
/* Critères du mot de passe : une ligne de petit texte gris, chaque critère passe en vert une fois respecté */
.wn-regles-mdp { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 0; margin: 6px 0 0; }
.wn-regles-mdp li {
    font-size: 0.75rem;
    color: var(--wn-texte-doux);
    opacity: 0.85;
}
.wn-regles-mdp li::before { content: "· "; }
.wn-regles-mdp li.wn-ok { color: var(--wn-vert); opacity: 1; }
.wn-regles-mdp li.wn-ok::before { content: "✓ "; }
.wn-accepte { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; margin: 4px 0 12px; cursor: pointer; }
.wn-accepte input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--wn-bleu); }
.wn-accepte a, .wn-compte-bas a, .wn-oubli a { color: var(--wn-bleu); font-weight: 700; }
.wn-bouton.wn-large { width: 100%; padding: 14px 18px; font-size: 1rem; }
.wn-oubli { text-align: right; margin: -6px 0 14px; font-size: 0.9rem; }
.wn-compte-bas { text-align: center; margin: 16px 0 0; font-size: 0.92rem; color: var(--wn-texte-doux); }
.wn-compte-carte .wn-form { margin-top: 6px; }
.wn-compte-carte .wn-message { margin: 0 0 14px; }
.wn-message.wn-local {
    background: #fff8e1;
    color: #5a4600;
    border: 2px dashed var(--wn-or);
    display: grid;
    gap: 6px;
}
.wn-message.wn-local span { font-weight: 500; font-size: 0.85rem; }
.wn-message.wn-local .wn-bouton { justify-self: start; }

/* =============================================
   PROFIL
   ============================================= */
.wn-profil { padding-top: 18px; padding-bottom: 30px; }
.wn-profil-tete {
    background: linear-gradient(160deg, var(--wn-bleu-fonce), var(--wn-bleu));
    color: #fff;
    border-radius: 22px;
    padding: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    box-shadow: var(--wn-ombre-forte);
}
.wn-profil-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid var(--wn-or); }
.wn-profil-infos { min-width: 0; }
.wn-profil-infos h1 { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; color: #fff; overflow-wrap: anywhere; }
.wn-profil-infos .wn-aide { color: rgba(255, 255, 255, 0.85); margin: 6px 0 0; }
.wn-profil-bio, .wn-profil-niveau, .wn-profil-actions { grid-column: 1 / -1; margin: 0; }
.wn-profil-bio { background: rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 10px 12px; font-size: 0.92rem; }
.wn-profil-niveau p { margin: 8px 0 0; font-size: 0.9rem; }
.wn-profil-niveau .wn-progression-barre { background: rgba(255, 255, 255, 0.25); }
.wn-profil-niveau .wn-progression-barre span { background: var(--wn-or); }
.wn-profil-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wn-profil-actions .wn-outil { background: rgba(255, 255, 255, 0.95); border: 0; }
.wn-profil-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0 18px; }
.wn-onglets-profil { margin-bottom: 14px; }
.wn-profil-creer { margin-bottom: 16px; }
.wn-carte-outils { display: flex; gap: 6px; margin-top: 12px; }
.wn-carte-outils .wn-outil { flex: 1; justify-content: center; padding: 8px 6px; font-size: 0.82rem; }
.wn-carte-outils .wn-danger { flex: 0 0 42px; color: var(--wn-rouge); }
.wn-carte-outils .wn-danger i { color: var(--wn-rouge); }
.wn-badge-top.wn-publie { background: var(--wn-vert); color: #fff; }
.wn-badge-top.wn-a-completer { background: var(--wn-orange); color: #fff; }
.wn-zone-danger summary { cursor: pointer; font-weight: 800; color: var(--wn-rouge); }
.wn-zone-danger p { color: var(--wn-texte-doux); }
.wn-bouton.wn-rouge { background: var(--wn-rouge); color: #fff; }
.wn-bouton.wn-rouge:hover { background: #a01a16; }
.wn-form-page > .wn-form + .wn-form { margin-top: 0; }

/* =============================================
   PAGE D'UN ITINÉRAIRE (etape.php)
   ============================================= */
.wn-itineraire { background: var(--wn-fond); color: var(--wn-texte); line-height: 1.55; margin: 0; }
:where(.wn-itineraire) a { color: inherit; text-decoration: none; }

.wn-message {
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
}
.wn-message.wn-succes { background: #e3f5ec; color: #1f7a52; }
.wn-message.wn-erreur { background: #f9e1e0; color: var(--wn-rouge); }

/* Bandeau du haut avec la photo */
.wn-it-hero {
    position: relative;
    color: #fff;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    background: var(--wn-bleu-fonce) center / cover no-repeat;
}
.wn-it-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(21, 122, 148, 0.15) 0%, rgba(21, 50, 60, 0.85) 100%);
}
.wn-it-hero .wn-conteneur { position: relative; padding-top: 70px; padding-bottom: 22px; }
.wn-it-retour {
    position: absolute;
    top: 14px;
    left: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--wn-texte);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 7px 12px;
    border-radius: 999px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.wn-it-hero .wn-badge-top { position: static; display: inline-block; margin-bottom: 10px; }
.wn-it-hero h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 800; margin: 0 0 12px; color: #fff; }
.wn-it-auteur { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; }
.wn-it-auteur img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    border: 2px solid var(--wn-or);
}
.wn-it-auteur strong { display: block; }
.wn-it-hero .wn-badges { margin: 0 0 14px; } /* sous le titre, au-dessus de l'auteur */
.wn-it-hero .wn-it-auteur { margin-bottom: 16px; } /* de l'air avant les boutons d'action */
.wn-it-hero .wn-badge.wn-info { background: rgba(255, 255, 255, 0.92); }

/* Barre d'actions : voter, favori, commentaires, partager */
.wn-it-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: -18px;
    position: relative;
    z-index: 2;
}
.wn-action {
    background: var(--wn-carte);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--wn-ombre);
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap; /* « 0 Voter » sur une seule ligne */
    color: var(--wn-texte);
    cursor: pointer;
    transition: transform 0.15s, background 0.2s;
}
.wn-action i { font-size: 1rem; color: var(--wn-bleu); }
.wn-action .wn-libelle { display: inline; margin: 0; } /* pas le style des libellés de formulaire */
.wn-action:active { transform: scale(0.95); }
.wn-action.wn-vote.wn-actif { background: var(--wn-bleu); color: #fff; }
.wn-action.wn-vote.wn-actif i { color: #fff; }
.wn-action.wn-favori i { color: var(--wn-rouge); }
.wn-action.wn-favori.wn-actif { background: var(--wn-rouge); color: #fff; }
.wn-action.wn-favori.wn-actif i { color: #fff; }

/* Outils du propriétaire et liens discrets */
.wn-it-outils { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wn-outil {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--wn-carte);
    border: 1px solid var(--wn-bord);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wn-texte);
    cursor: pointer;
}
.wn-outil i { color: var(--wn-bleu); }
.wn-outil.wn-principal { background: var(--wn-or); border-color: var(--wn-or); }
.wn-outil.wn-principal i { color: var(--wn-texte); }

/* Blocs blancs */
.wn-bloc {
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    box-shadow: var(--wn-ombre);
    padding: 18px;
    margin-top: 16px;
}
.wn-bloc h2 { font-size: 1.1rem; font-weight: 800; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: var(--wn-texte); }
.wn-bloc h2 i { color: var(--wn-or); }

.wn-description { color: #3b4a52; max-height: 7.8em; overflow: hidden; position: relative; margin: 0; }
.wn-description::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5em;
    background: linear-gradient(transparent, #fff);
}
.wn-description.expanded { max-height: none; }
.wn-description.expanded::after { display: none; }
.wn-lire-suite {
    background: none;
    border: 0;
    color: var(--wn-bleu);
    font: inherit;
    font-weight: 700;
    padding: 6px 0 0;
    cursor: pointer;
}

/* Progression */
.wn-progression { display: flex; align-items: center; gap: 12px; }
.wn-progression-barre { flex: 1; height: 10px; background: var(--wn-bleu-clair); border-radius: 999px; overflow: hidden; }
.wn-progression-barre span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--wn-vert), #4cc38a);
    border-radius: 999px;
    transition: width 0.4s;
}
.wn-progression strong { font-size: 0.9rem; white-space: nowrap; }
.wn-progression-aide { font-size: 0.82rem; color: var(--wn-texte-doux); margin: 8px 0 0; }

/* Carte */
.wn-it-carte { margin-top: 16px; border-radius: var(--wn-rayon); overflow: hidden; box-shadow: var(--wn-ombre); }
.wn-it-carte #map { height: 300px; width: 100%; z-index: 1; }

/* Étapes */
.wn-jour {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 12px;
    font-size: 1.2rem;
    font-weight: 800;
}
.wn-jour span {
    background: var(--wn-bleu);
    color: #fff;
    border-radius: 10px;
    padding: 4px 12px;
    font-size: 0.95rem;
}
.wn-etape-it {
    background: var(--wn-carte);
    border-radius: var(--wn-rayon);
    box-shadow: var(--wn-ombre);
    overflow: hidden;
    position: relative;
    transition: opacity 0.3s;
}
.wn-etape-it { scroll-margin-top: calc(var(--wn-hauteur-entete) + 16px); }
.wn-etape-it.wn-faite { opacity: 0.6; }
.wn-etape-it-image { aspect-ratio: 16 / 9; background: var(--wn-bleu-clair); }
.wn-etape-it-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wn-etape-it-corps { padding: 16px; }
.wn-etape-it-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wn-numero {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--wn-or);
    color: var(--wn-texte);
    font-weight: 800;
    display: grid;
    place-items: center;
}
.wn-faite .wn-numero { background: var(--wn-vert); color: #fff; }
.wn-etape-it-infos { font-size: 0.85rem; color: var(--wn-texte-doux); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wn-etape-it-infos i { color: var(--wn-bleu); margin-right: 3px; }
.wn-etape-it h3 { font-size: 1.15rem; font-weight: 800; margin: 6px 0 6px; color: var(--wn-texte); }
.wn-etape-it-texte { color: #3b4a52; font-size: 0.95rem; }
.wn-etape-it-adresse { display: flex; gap: 8px; align-items: flex-start; font-size: 0.88rem; color: var(--wn-texte-doux); margin-top: 10px; }
.wn-etape-it-adresse i { color: var(--wn-rouge); margin-top: 3px; }
.wn-etape-it-boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.wn-etape-it-boutons .wn-bouton { padding: 11px 12px; font-size: 0.92rem; }
.wn-bouton.wn-clair { background: var(--wn-bleu-clair); color: var(--wn-bleu-fonce); }
.wn-bouton.wn-clair:hover { background: #d3edf4; }
.wn-faite .wn-fait { background: var(--wn-vert); color: #fff; }

/* Étoiles (classes utilisées par js/etape.js) */
.wn-etape-it .step-rating { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.85rem; color: var(--wn-texte-doux); }
.wn-etape-it .star-rating { display: flex; gap: 2px; }
.wn-etape-it .star { cursor: pointer; color: var(--wn-or); font-size: 1.15rem; padding: 2px; }

/* Actions du propriétaire sur une étape */
.wn-etape-it .step-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.wn-etape-it .step-actions a,
.wn-etape-it .step-actions button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    box-shadow: var(--wn-ombre);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--wn-bleu);
    font-size: 0.95rem;
}
.wn-etape-it .step-actions button { color: var(--wn-rouge); }
/* Sans photo, on laisse la place aux boutons du créateur en haut à droite */
.wn-etape-it:not(:has(.wn-etape-it-image)) .step-actions ~ .wn-etape-it-corps .wn-etape-it-tete { padding-right: 84px; }
.wn-etape-it .step-actions form { margin: 0; }

/* Trajet entre deux étapes */
.wn-trajet { display: flex; gap: 12px; padding: 4px 0 4px 16px; }
.wn-trajet-ligne { flex: none; width: 3px; margin: 0 0 0 0; background: repeating-linear-gradient(var(--wn-bleu) 0 6px, transparent 6px 12px); border-radius: 2px; }
.wn-trajet-contenu { flex: 1; padding: 12px 0; min-height: 26px; }
.wn-conseil {
    background: #fff8e1;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.92rem;
    color: #5a4600;
}
.wn-conseil-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; margin-bottom: 4px; color: var(--wn-texte); }
.wn-conseil-tete i { color: var(--wn-or-fonce); }
.wn-conseil-actions { display: flex; gap: 6px; }
.wn-conseil-actions button {
    border: 0;
    background: #fff;
    border-radius: 8px;
    padding: 5px 8px;
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--wn-texte);
}
.wn-ajout-conseil {
    border: 2px dashed var(--wn-bord);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--wn-texte-doux);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.wn-ajout-conseil i { color: var(--wn-bleu); margin-right: 6px; }

/* Bloc commentaires et fin d'itinéraire */
.wn-it-fin { text-align: center; }
.wn-it-fin p { color: var(--wn-texte-doux); margin: 4px 0 14px; }
.wn-it-fin .wn-bouton { margin: 4px; }

/* =============================================
   PAGES D'INFORMATION (à propos, actualités, aide, contact)
   ============================================= */
.wn-info-hero {
    background: linear-gradient(160deg, var(--wn-bleu-fonce) 0%, var(--wn-bleu) 65%, #39b3cf 100%);
    color: #fff;
    padding: 28px 0 26px;
}
.wn-info-hero h1 { font-size: 1.8rem; line-height: 1.15; font-weight: 800; margin: 12px 0 8px; color: #fff; }
.wn-info-hero h1 span { color: var(--wn-or); display: block; }
.wn-info-hero p { margin: 0; opacity: 0.95; max-width: 620px; }
/* .wn-conteneur.wn-info : conteneur des pages d'information (à ne pas confondre avec le badge .wn-badge.wn-info) */
.wn-conteneur.wn-info { padding-top: 18px; padding-bottom: 28px; max-width: 860px; }
.wn-info .wn-bloc p { margin: 0 0 10px; }
.wn-info .wn-bloc p:last-child { margin-bottom: 0; }
:where(.wn-info, .wn-page-formulaire .wn-bloc) p a { color: var(--wn-bleu); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wn-info-titre { font-size: 1.25rem; font-weight: 800; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.wn-info-titre i { color: var(--wn-or); }
.wn-centre { text-align: center; }

/* Tuiles (nos valeurs) */
.wn-tuiles { display: grid; gap: 12px; }
.wn-tuile { background: var(--wn-carte); border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre); padding: 16px 18px; }
.wn-tuile > i {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-grid; place-items: center;
    background: var(--wn-bleu-clair); color: var(--wn-bleu); font-size: 1.1rem;
}
.wn-tuile h3 { font-size: 1.05rem; font-weight: 800; margin: 10px 0 4px; }
.wn-tuile p { margin: 0; color: var(--wn-texte-doux); font-size: 0.93rem; }

/* Actualités */
.wn-actus { display: grid; gap: 14px; }
.wn-actu { background: var(--wn-carte); border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre); overflow: hidden; display: flex; flex-direction: column; }
.wn-actu-image { position: relative; aspect-ratio: 16 / 9; background: var(--wn-bleu-clair); }
.wn-actu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wn-actu-date {
    position: absolute; top: 10px; left: 10px;
    background: var(--wn-or); color: var(--wn-texte);
    border-radius: 12px; padding: 4px 10px; text-align: center;
    font-size: 0.75rem; font-weight: 700; line-height: 1.1; text-transform: uppercase;
}
.wn-actu-date strong { display: block; font-size: 1.35rem; }
.wn-actu-corps { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.wn-actu-corps h3 { font-size: 1.08rem; font-weight: 800; margin: 0; line-height: 1.25; }
.wn-actu-corps .wn-aide { margin: 0; }
.wn-actu-corps p { margin: 0; font-size: 0.93rem; }
.wn-actu-corps .wn-outil { align-self: flex-start; margin-top: auto; }
.wn-actu-texte summary { cursor: pointer; list-style: none; font-size: 0.93rem; }
.wn-actu-texte summary::-webkit-details-marker { display: none; }
.wn-actu-texte summary span { color: var(--wn-bleu); font-weight: 700; white-space: nowrap; }
.wn-actu-texte[open] summary { display: none; }
.wn-actu.wn-passee { opacity: 0.75; }
.wn-actu.wn-passee .wn-actu-image img { filter: grayscale(0.7); }
.wn-actu.wn-passee .wn-actu-date { background: var(--wn-bord); color: var(--wn-texte-doux); }
.wn-infos-evenement { margin-top: 14px; }
.wn-infos-evenement summary { cursor: pointer; font-weight: 700; }

/* Aide : sommaire et questions fréquentes */
.wn-sommaire { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wn-sommaire .wn-puce { background: var(--wn-carte); box-shadow: var(--wn-ombre); color: var(--wn-texte); }
.wn-sommaire .wn-puce i { color: var(--wn-bleu); }
.wn-faq { scroll-margin-top: calc(var(--wn-hauteur-entete) + 12px); }
.wn-faq details { border-top: 1px solid var(--wn-bord); }
.wn-faq summary {
    cursor: pointer; list-style: none;
    padding: 12px 28px 12px 0; position: relative;
    font-weight: 700;
}
.wn-faq summary::-webkit-details-marker { display: none; }
.wn-faq summary::after {
    content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 1.3rem; font-weight: 600; color: var(--wn-bleu);
}
.wn-faq details[open] summary::after { content: "−"; }
.wn-faq details p { margin: 0 0 14px; color: var(--wn-texte-doux); }
.wn-contact-autres { margin-top: 16px; }

/* Textes légaux (CGU, charte, mentions légales, confidentialité, cookies) */
.wn-legal { line-height: 1.65; overflow-wrap: anywhere; }
.wn-legal > :first-child { margin-top: 0; }
.wn-legal h2 {
    font-size: 1.15rem; font-weight: 800; margin: 26px 0 10px; padding-top: 18px;
    border-top: 1px solid var(--wn-bord); display: block; color: var(--wn-bleu-fonce);
    scroll-margin-top: calc(var(--wn-hauteur-entete) + 12px);
}
.wn-legal section:first-child h2, .wn-legal > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.wn-legal h3 { font-size: 1rem; font-weight: 700; margin: 18px 0 6px; }
.wn-legal p { margin: 0 0 10px; }
.wn-legal ul { margin: 0 0 12px; padding-left: 1.3rem; }
.wn-legal li { margin-bottom: 4px; }
.wn-legal li p { margin: 2px 0 6px; }
.wn-legal a { color: var(--wn-bleu); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wn-legal mark { background: #fff3c4; color: inherit; padding: 0 3px; border-radius: 4px; }
.wn-legal section { scroll-margin-top: calc(var(--wn-hauteur-entete) + 12px); }
.wn-encadre { background: var(--wn-fond); border-left: 4px solid var(--wn-bleu); border-radius: 10px; padding: 12px 14px; margin: 0 0 14px; }
.wn-encadre p:last-child, .wn-encadre ul:last-child { margin-bottom: 0; }
.wn-encadre.wn-bien { background: #eaf7f0; border-left-color: var(--wn-vert); }
.wn-encadre.wn-mal { background: #fdecec; border-left-color: var(--wn-rouge); }
.wn-tableau { overflow-x: auto; margin: 0 0 14px; border: 1px solid var(--wn-bord); border-radius: 12px; }
.wn-tableau table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
.wn-tableau th, .wn-tableau td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--wn-bord); }
.wn-tableau th { background: var(--wn-bleu-clair); color: var(--wn-bleu-fonce); font-weight: 700; }
.wn-tableau tr:last-child td { border-bottom: 0; }

/* Bandeau cookies (includes/cookie-banner.php) : au-dessus de la barre du bas sur mobile */
.cookie-banner {
    position: fixed; left: 10px; right: 10px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1100;
    display: none; background: #fff; color: var(--wn-texte);
    border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre-forte); padding: 14px 16px;
    font-family: 'Inter', system-ui, sans-serif; font-size: 0.88rem; line-height: 1.45;
}
.cookie-banner.active { display: block; }
.cookie-banner h3 { font-size: 1rem; font-weight: 800; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.cookie-banner h3 i { color: var(--wn-or); }
.cookie-banner p { margin: 0; color: var(--wn-texte-doux); }
.cookie-banner .cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.cookie-banner .cookie-actions .wn-bouton { padding: 9px 16px; font-size: 0.9rem; }
.cookie-banner .cookie-link { color: var(--wn-bleu); font-weight: 600; margin-left: auto; text-decoration: underline; }

/* =============================================
   CARTE DES ITINÉRAIRES (carte.php)
   ============================================= */
.wn-bascule-vue { display: inline-flex; background: var(--wn-carte); border: 1.5px solid var(--wn-bord); border-radius: 999px; padding: 3px; margin-left: auto; }
.wn-bascule-vue a { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 0.88rem; color: var(--wn-texte-doux); display: inline-flex; align-items: center; gap: 6px; }
.wn-bascule-vue a.wn-actif { background: var(--wn-bleu); color: #fff; }
.wn-carte-itineraires { position: relative; margin: 4px 0 16px; }
#carteItineraires { height: 62vh; min-height: 360px; border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre); z-index: 1; }
.wn-bouton-carte {
    position: absolute; bottom: 12px; left: 12px; z-index: 5; /* en bas : le haut est pour la légende */
    width: 44px; height: 44px; border-radius: 12px; border: 0;
    background: #fff; color: var(--wn-bleu); font-size: 1.1rem;
    box-shadow: var(--wn-ombre-forte); cursor: pointer;
}
.wn-legende {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 5; white-space: nowrap;
    background: rgba(255, 255, 255, 0.94); border-radius: 12px; padding: 6px 10px;
    display: flex; gap: 10px; font-size: 0.78rem; font-weight: 600; box-shadow: var(--wn-ombre);
}
.wn-legende span { display: inline-flex; align-items: center; gap: 5px; }
.wn-legende i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Repères en forme de goutte (cartes des itinéraires et carte pratique) */
.wn-repere { background: none; border: 0; }
.wn-repere span {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.wn-repere span i { transform: rotate(45deg); color: #fff; font-size: 0.9rem; }

/* Bulles (popups) */
.wn-bulle { display: grid; gap: 4px; color: var(--wn-texte) !important; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; }
.wn-bulle img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; margin-bottom: 4px; }
.wn-bulle strong { font-size: 0.98rem; line-height: 1.25; }
.wn-bulle-infos { font-size: 0.8rem; color: var(--wn-texte-doux); }
.wn-bulle-lien { color: var(--wn-bleu); font-weight: 700; font-size: 0.85rem; margin-top: 2px; }
.leaflet-popup-content { margin: 12px 14px; }

/* =============================================
   CARTE PRATIQUE (carte-interactive.php) : plein écran
   ============================================= */
.wn-page-carte { overflow: hidden; }
.wn-carte-pratique { position: relative; height: calc(100vh - var(--wn-hauteur-entete) - 84px); height: calc(100dvh - var(--wn-hauteur-entete) - 84px); }
#cartePratique { position: absolute; inset: 0; z-index: 1; }
.wn-carte-puces {
    position: absolute; top: 10px; left: 0; right: 0; z-index: 5;
    display: flex; gap: 8px; overflow-x: auto; padding: 0 10px 6px;
    scrollbar-width: none;
}
.wn-carte-puces::-webkit-scrollbar { display: none; }
.wn-puce-carte {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px; padding: 8px 12px;
    background: #fff; color: var(--wn-texte-doux);
    font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.wn-puce-carte i { color: var(--couleur); }
.wn-puce-carte .wn-compte { font-size: 0.75rem; background: var(--wn-fond); border-radius: 999px; padding: 1px 7px; }
.wn-puce-carte.wn-actif { background: var(--couleur); color: #fff; }
.wn-puce-carte.wn-actif i { color: #fff; }
.wn-puce-carte.wn-actif .wn-compte { background: rgba(255, 255, 255, 0.25); }
.wn-carte-boutons { position: absolute; left: 10px; bottom: 16px; z-index: 5; }
.wn-carte-boutons .wn-bouton { box-shadow: var(--wn-ombre-forte); }
.wn-chargement {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6;
    background: #fff; border-radius: 12px; padding: 10px 16px; font-weight: 600; box-shadow: var(--wn-ombre-forte);
}
.wn-proches {
    position: absolute; left: 10px; right: 10px; bottom: 74px; z-index: 6;
    background: #fff; border-radius: var(--wn-rayon); box-shadow: var(--wn-ombre-forte);
    padding: 10px 12px; max-height: 45%; overflow-y: auto;
}
.wn-proches-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.wn-proches ul { list-style: none; margin: 0; padding: 0; }
.wn-proches li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--wn-bord); }
.wn-proches li:first-child { border-top: 0; }
.wn-proches li button {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--wn-texte); cursor: pointer;
}
.wn-proches li button > span:last-child { min-width: 0; display: grid; }
.wn-proches li strong { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wn-proches li small { color: var(--wn-texte-doux); font-size: 0.78rem; }
.wn-proches .wn-outil { flex: none; padding: 6px 10px; font-size: 0.82rem; }
.wn-proche-icone { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.85rem; }
.wn-bulle-pratique { display: grid; gap: 3px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; color: var(--wn-texte-doux); }
.wn-bulle-pratique strong { color: var(--wn-texte); font-size: 0.98rem; line-height: 1.25; }
.wn-bulle-categorie { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.wn-bulle-pratique .wn-bouton { justify-self: start; margin-top: 6px; padding: 7px 12px; font-size: 0.85rem; color: var(--wn-texte) !important; }
.wn-bulle-pratique a:not(.wn-bouton) { color: var(--wn-bleu); }

/* Impression : uniquement le contenu utile */
@media print {
    .wn-entete, .wn-nav-mobile, .wn-pied, .wn-it-actions, .wn-it-outils, .wn-it-retour,
    .wn-etape-it-boutons, .wn-ajout-conseil, .wn-it-fin, .wn-bloc-progression, .wn-it-carte,
    .step-actions, .step-rating, .wn-conseil-actions, .cookie-banner { display: none !important; }
    .wn-it-hero { min-height: 0; color: var(--wn-texte); background: none !important; }
    .wn-it-hero::before { display: none; }
    .wn-it-hero h1 { color: var(--wn-texte); }
    .wn-etape-it { box-shadow: none; border: 1px solid var(--wn-bord); break-inside: avoid; }
    .wn-etape-it-image { display: none; }
    .wn-description { max-height: none; }
    .wn-description::after { display: none; }
}

/* =============================================
   ÉCRANS PLUS LARGES (tablette / ordinateur)
   ============================================= */
@media (min-width: 768px) {
    .wn-nav-mobile { display: none; }
    /* Sur ordinateur : les deux drapeaux, celui de la langue en cours en surbrillance, l'autre atténué */
    .wn-langues a { opacity: 0.6; }
    .wn-langues a:hover { opacity: 1; }
    .wn-langues a.wn-actif { display: flex; opacity: 1; background: rgba(255, 255, 255, 0.25); }
    body:has(.wn-nav-mobile) { padding-bottom: 0; }
    .wn-nav-ordi { display: flex; }
    .wn-bouton-compte .wn-pseudo { display: inline; }

    .wn-hero .wn-conteneur { padding-top: 70px; padding-bottom: 80px; }
    .wn-hero h1 { font-size: 3rem; max-width: 700px; }
    .wn-chiffres { grid-template-columns: repeat(3, 220px); justify-content: center; gap: 18px; margin-top: -34px; }
    .wn-chiffre { padding: 18px; }
    .wn-chiffre strong { font-size: 1.8rem; }
    .wn-cartes {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        margin: 0;
        padding: 4px 0 14px;
    }
    .wn-deux-colonnes { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
    .wn-appel { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 30px 40px; }
    .wn-appel img { position: static; order: -1; width: 90px; height: 90px; }
    .wn-appel img.wn-mascotte-or { transform: none; } /* rond à gauche du texte : sens d'origine */
    .wn-appel h2, .wn-appel p { padding-right: 0; }
    .wn-pied-grille { grid-template-columns: 1.2fr 2fr auto; align-items: start; }

    /* Compte et profil */
    .wn-compte-carte { padding: 30px 32px 26px; }
    .wn-profil-tete { grid-template-columns: auto 1fr auto; padding: 26px 30px; }
    .wn-profil-avatar { width: 96px; height: 96px; }
    .wn-profil-actions { grid-column: 3; grid-row: 1; flex-direction: column; }
    .wn-profil-stats { grid-template-columns: repeat(4, 1fr); }
    .wn-onglets-profil { max-width: 520px; }
    .wn-profil-creer { width: auto; display: inline-flex; }

    /* Formulaires */
    .wn-form-page { padding-top: 24px; }
    .wn-form-page h1 { font-size: 2rem; }
    .wn-champs-ligne { grid-template-columns: 1fr 1fr; }
    .wn-champs-ligne.wn-trois { grid-template-columns: repeat(3, 1fr); }
    .wn-adresse { grid-template-columns: 1fr auto; }
    .wn-carte-choix #carteLieu { height: 340px; }
    .wn-barre-envoi { bottom: 16px; }

    /* Liste des itinéraires */
    .wn-liste-tete { padding: 40px 0 32px; }
    .wn-liste-tete h1 { font-size: 2.3rem; }
    .wn-liste-barre .wn-tri { flex: 0 1 260px; margin-left: auto; }
    .wn-cache-mobile { display: inline; }
    .wn-grille-cartes { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .wn-filtres { align-items: center; justify-content: center; }
    .wn-filtres-contenu { max-width: 640px; border-radius: 22px; max-height: 85vh; }

    /* Page d'un itinéraire : étapes à gauche, carte fixe à droite */
    .wn-it-hero { min-height: 380px; }
    .wn-it-hero h1 { font-size: 2.6rem; max-width: 820px; }
    .wn-it-actions { max-width: 560px; }
    .wn-it-grille { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 28px; align-items: start; }
    .wn-it-intro, .wn-it-etapes { grid-column: 1; }
    .wn-it-cote { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--wn-hauteur-entete) + 16px); }
    .wn-it-carte #map { height: calc(100vh - var(--wn-hauteur-entete) - 60px); min-height: 420px; }
    .wn-etape-it:has(.wn-etape-it-image) { display: grid; grid-template-columns: 220px 1fr; }
    .wn-etape-it-image { aspect-ratio: auto; height: 100%; min-height: 200px; }

    /* Pages d'information et cartes */
    .wn-info-hero { padding: 44px 0 40px; }
    .wn-info-hero h1 { font-size: 2.5rem; }
    .wn-tuiles { grid-template-columns: repeat(2, 1fr); }
    .wn-actus { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    #carteItineraires { height: 70vh; }
    .wn-legal { padding: 28px 32px; }
    .cookie-banner { left: auto; right: 20px; bottom: 20px; max-width: 420px; }
    .wn-carte-pratique { height: calc(100vh - var(--wn-hauteur-entete)); }
    .wn-carte-puces { justify-content: center; top: 14px; }
    .wn-proches { left: auto; right: 14px; top: 64px; bottom: auto; width: 340px; max-height: calc(100% - 90px); }
    .wn-carte-boutons { left: 14px; bottom: 20px; }
}

@media (min-width: 1100px) {
    .wn-nav-ordi a { padding: 8px 16px; }
    .wn-grille-cartes { grid-template-columns: repeat(3, 1fr); }
    .wn-tuiles { grid-template-columns: repeat(3, 1fr); }
}

/* Mention « Traduit automatiquement · Voir l'original » (textes des membres traduits par DeepL) */
.wn-traduction-auto { font-size: 0.8rem; color: var(--wn-texte-doux); margin: 10px 0 0; }
.wn-traduction-auto a { color: inherit; font-weight: 600; text-decoration: underline; }

/* En-tête sur petits téléphones : boutons de droite resserrés pour que le nom du site tienne en entier */
@media (max-width: 400px) {
    .wn-entete-droite { gap: 4px; }
    .wn-bouton-compte.wn-sans-avatar, .wn-menu-plus summary { width: 36px; height: 36px; }
    .wn-langues a { padding: 3px; }
}
/* Très petits téléphones (moins de 340 px) : seul le logo reste, plutôt qu'un nom coupé */
@media (max-width: 340px) {
    .wn-logo span { display: none; }
}
/* Tablettes (768 à 959 px) : le menu tient sur une ligne, le bouton Connexion n'affiche que son icône */
@media (min-width: 768px) and (max-width: 959px) {
    .wn-bouton-compte.wn-sans-avatar { width: 40px; height: 40px; padding: 0; justify-content: center; }
    .wn-bouton-compte .wn-texte-connexion { display: none; }
    .wn-nav-ordi a { padding-left: 10px; padding-right: 10px; }
}

/* Pastille d'icône plus petite dans les filtres actifs, au-dessus des résultats */
.wn-filtre-actif .wn-puce-icone { width: 20px; height: 20px; margin-left: -4px; font-size: 0.65rem; }

/* Localisation du visiteur (js/localisation.js) : explication, aide en cas de refus, choix sur la carte */
.wn-fenetre-loc {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; place-items: end center;
    background: rgba(15, 30, 40, 0.45);
}
.wn-fenetre-loc-boite {
    position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
    background: var(--wn-carte); border-radius: 22px 22px 0 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: var(--wn-ombre-forte); text-align: center;
}
.wn-fenetre-loc-boite .wn-fermer { position: absolute; top: 12px; right: 12px; }
.wn-fenetre-loc-boite h2 { font-size: 1.2rem; margin: 10px 0 8px; }
.wn-fenetre-loc-boite p { margin: 0 0 10px; }
.wn-fenetre-loc-icone {
    display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
    background: var(--wn-bleu-clair); color: var(--wn-bleu); font-size: 1.5rem;
}
.wn-etapes-loc { text-align: left; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: etape; }
.wn-etapes-loc li { counter-increment: etape; position: relative; padding: 6px 0 6px 38px; }
.wn-etapes-loc li::before {
    content: counter(etape); position: absolute; left: 0; top: 4px;
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--wn-or); font-weight: 800; font-size: 0.85rem;
}
.wn-fenetre-loc-boutons { display: grid; gap: 8px; margin-top: 14px; }
.wn-fenetre-loc-boutons button { justify-content: center; width: 100%; padding: 12px 16px; font-size: 0.95rem; }
@media (min-width: 768px) {
    .wn-fenetre-loc { place-items: center; }
    .wn-fenetre-loc-boite { border-radius: 22px; }
}
.wn-bandeau-choix {
    position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 6;
    display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 20px);
    background: var(--wn-texte); color: #fff; border-radius: 999px; padding: 8px 8px 8px 16px;
    font-size: 0.88rem; font-weight: 700; box-shadow: var(--wn-ombre-forte);
}
.wn-bandeau-choix button {
    flex: none; border: 0; border-radius: 999px; padding: 6px 12px;
    background: rgba(255, 255, 255, 0.18); color: #fff; font: inherit; cursor: pointer;
}
.wn-choix-en-cours, .wn-choix-en-cours .leaflet-interactive { cursor: crosshair !important; }