/* ═══════════════════════════════════════════════════════════════════════
   Vacancium — direction « Relevé », version LARGE (relooking 2b)

   Le concept ne change pas : chaque location est un lieu relevé sur le
   terrain — coordonnées, massif, distances. Ce qui change, c'est le volume.

     1. L'en-tête passe en encre pleine : la marque tient la page.
     2. La légende des terrains devient une barre de couleur pleine. Les
        quatre teintes ne sont plus un filet de 3 px mais le fond de la
        bande. La montagne, cœur du catalogue, occupe la part large ;
        mer / campagne / ville portent la mention « en ouverture ».
     3. Le titrage monte d'un cran (Bricolage 700, jusqu'à 5.4rem) et
        l'accroche d'accueil passe en pleine largeur, photo comprise.
     4. Le relevé se lit en tableau plutôt qu'en ligne : c'est la donnée
        du lieu qui structure la fiche.

   Aucune teinte nouvelle, aucune police nouvelle : tout sort déjà de la
   version précédente. Les angles restent vifs, jamais d'arrondi.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Papier ---------------------------------------------------------- */
    --pierre: #e6e3da;          /* fond : papier pierre, froid et dense */
    --craie: #f7f5ef;           /* surfaces posées sur le papier */
    --ardoise: #dcd8cd;         /* papier plus sombre : fonds de carte, vignettes */
    --encre: #18222e;           /* texte et bandes pleines : bleu-noir d'encre */
    --encre-claire: #2b3644;    /* encre éclaircie, pour les surfaces dans l'encre */
    --encre-pale: #5d6b7a;      /* texte secondaire */
    --trait: rgb(24 34 46 / 14%);
    --trait-fort: rgb(24 34 46 / 28%);
    --trait-clair: rgb(247 245 239 / 18%);   /* filet sur fond d'encre */

    /* Terrains (clé chromatique du catalogue) -------------------------- */
    --mer: #136f7e;
    --montagne: #5a5b84;
    --campagne: #6b7a35;
    --ville: #9e4e33;

    /* Accent contextuel : neutre par défaut, remplacé par le terrain */
    --accent: #2c4a63;
    --accent-doux: rgb(44 74 99 / 10%);
    --accent-clair: #8e8fb8;    /* accent lisible sur fond d'encre */

    /* Typographie ------------------------------------------------------ */
    --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
    --prose: 'Newsreader', Georgia, serif;
    --releve: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Rythme ----------------------------------------------------------- */
    --page: 1160px;
    --gouttiere: clamp(1rem, 4vw, 2.5rem);
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

[data-terrain='mer'] { --accent: var(--mer); --accent-doux: rgb(19 111 126 / 12%); --accent-clair: #6fb3bd; }
[data-terrain='montagne'] { --accent: var(--montagne); --accent-doux: rgb(90 91 132 / 12%); --accent-clair: #8e8fb8; }
[data-terrain='campagne'] { --accent: var(--campagne); --accent-doux: rgb(107 122 53 / 12%); --accent-clair: #a3b06d; }
[data-terrain='ville'] { --accent: var(--ville); --accent-doux: rgb(158 78 51 / 12%); --accent-clair: #cd8b73; }

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--pierre);
    color: var(--encre);
    font-family: var(--prose);
    font-size: 1.0625rem;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.032em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--encre); }

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

/* Utilitaire : sortir de la largeur de page sans quitter le flux. */
.pleine-largeur {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Ossature ──────────────────────────────────────────────────────── */

main {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--gouttiere) 5rem;
}

/* L'en-tête tient la page : encre pleine, bord à bord. */
.site-header { background: var(--encre); }

.entete-barre {
    max-width: var(--page);
    margin: 0 auto;
    padding: 0.9rem var(--gouttiere);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.logo {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.035em;
    color: var(--craie);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.02;
}

.logo:hover { color: var(--craie); }

/* Signature éditeur sous le logo */
.logo .logo-by {
    font-family: var(--releve);
    font-weight: 400;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    color: rgb(247 245 239 / 55%);
    text-transform: uppercase;
}

.entete-barre nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-family: var(--releve);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.entete-barre nav a { color: rgb(247 245 239 / 85%); text-decoration: none; }
.entete-barre nav a:hover { color: var(--craie); text-decoration: underline; }

/* Devise : information, pas action. */
.entete-devise { color: rgb(247 245 239 / 50%); }

.langues { display: inline-flex; gap: 2px; color: rgb(247 245 239 / 55%); }
.langues a { color: rgb(247 245 239 / 55%); padding: 0.3rem 0.45rem; text-decoration: none; }
.langues a:hover { color: var(--craie); text-decoration: none; }
.langues a[aria-current='true'] { color: var(--craie); background: rgb(247 245 239 / 16%); }
.langues .separateur { display: none; }   /* les points « · » ne servent plus : les pavés suffisent */

/* ── Signature : la légende des terrains, en barre pleine ───────────────
   La bande porte la teinte du terrain, pas seulement un filet. La montagne
   occupe la part large : c'est le cœur du catalogue, les autres terrains
   s'ouvrent. Aucun volume chiffré n'est affiché. */

.legende {
    display: flex;
    align-items: stretch;
}

.legende a {
    --teinte: var(--encre-claire);
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1rem var(--gouttiere) 0.95rem;
    text-decoration: none;
    color: var(--craie);
    background: var(--teinte);
    transition: filter 160ms var(--ease-out);
}

.legende a:hover,
.legende a:focus-visible { filter: brightness(1.12); }
.legende a[aria-current='page'] { filter: brightness(1.18); }

.legende a[data-terrain='mer'] { --teinte: var(--mer); }
.legende a[data-terrain='montagne'] { --teinte: var(--montagne); flex-grow: 2.6; }
.legende a[data-terrain='campagne'] { --teinte: var(--campagne); }
.legende a[data-terrain='ville'] { --teinte: var(--ville); }

.legende-nom {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.022em;
}

.legende-note {
    display: block;
    font-family: var(--releve);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(247 245 239 / 78%);
}

/* Mention « en ouverture » : les terrains que le catalogue ouvre. */
.legende-ouverture {
    display: block;
    font-family: var(--releve);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(247 245 239 / 62%);
    border-top: 1px solid rgb(247 245 239 / 30%);
    padding-top: 0.3rem;
    margin-top: 0.15rem;
}

/* ── Accueil : l'accroche pleine largeur ───────────────────────────────
   Photo bord à bord, thèse en très grand, formulaire de recherche posé
   dessus comme une fiche de relevé. */

.accroche {
    position: relative;
    min-height: clamp(24rem, 46vw, 34rem);
    display: flex;
    align-items: flex-end;
    padding: clamp(2rem, 5vw, 3rem) var(--gouttiere);
    background: var(--ardoise);
    overflow: hidden;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.accroche-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.accroche-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sans photo : le papier hachuré du reste du site, jamais un dégradé. */
.accroche-photo--vide {
    background:
        repeating-linear-gradient(135deg, rgb(24 34 46 / 6%) 0 1px, transparent 1px 9px),
        var(--ardoise);
}

/* Voile : la thèse doit rester lisible sur n'importe quelle photo. */
.accroche-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(230 227 218 / 92%) 0%, rgb(230 227 218 / 74%) 46%, rgb(230 227 218 / 30%) 100%);
}

.accroche-photo--vide::after { background: none; }

.accroche-contenu {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21.5rem;
    align-items: end;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.accroche-texte { display: flex; flex-direction: column; gap: 1rem; }

.accroche-portee {
    font-family: var(--releve);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0;
}

.manifeste { padding: 0; }

.manifeste h1 {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(2.6rem, 7.4vw, 5.4rem);
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.manifeste .sous-titre {
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    color: #3d4a58;
    max-width: 50ch;
    margin: 0;
}

/* ── Recherche : la fiche posée sur l'accroche ──────────────────────── */

form.recherche {
    background: var(--craie);
    border: 1px solid var(--trait-fort);
    border-top: 3px solid var(--accent);
    padding: 1.25rem 1.35rem 1.35rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    background: transparent;
    border-bottom: 1px solid var(--trait);
    padding: 0.5rem 0 0.55rem;
    margin: 0;
}

.champ label {
    font-family: var(--releve);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

.champ input {
    border: 0;
    background: transparent;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    color: var(--encre);
    padding: 0.1rem 0;
    min-width: 0;
}

.champ input::placeholder { color: rgb(93 107 122 / 60%); font-weight: 400; }
.champ input:focus { outline: none; }
.champ:focus-within { border-bottom-color: var(--accent); }

/* Dates et voyageurs tiennent sur une ligne dans la fiche. */
form.recherche .champ-arrivee { grid-column: 1; }
form.recherche .champ-depart { grid-column: 2; }
form.recherche .champ-voyageurs { grid-column: 3; }

form.recherche {
    grid-template-columns: 1fr 1fr 4.5rem;
}

form.recherche .champ-ou { grid-column: 1 / -1; }

form.recherche button {
    grid-column: 1 / -1;
    border: 0;
    background: var(--encre);
    color: var(--craie);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    padding: 0.95rem 1.5rem;
    margin-top: 1rem;
    cursor: pointer;
    transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}

form.recherche button:hover { background: var(--accent); }

/* Page recherche : la même fiche, mais dépliée sur la largeur. */
.recherche.recherche-page {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    align-items: stretch;
    border-top-width: 3px;
}
.recherche.recherche-page .champ-ou { grid-column: 1 / -1; }
.recherche.recherche-page button { grid-column: 1 / -1; padding-block: 0.9rem; }

.champ select {
    border: 0;
    background: transparent;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--encre);
    padding: 0.1rem 0;
    min-width: 0;
    width: 100%;
    cursor: pointer;
}
.champ select:focus { outline: none; }

/* ── Réassurance (accueil) : bande de craie, quatre affirmations ────── */

.confiance {
    max-width: none;
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: clamp(1.5rem, 4vw, 2rem) var(--gouttiere);
    background: var(--craie);
    border-top: 1px solid var(--trait);
    border-bottom: 1px solid var(--trait);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem 2rem;
}

.confiance-item h2 {
    font-family: var(--releve);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}

.confiance-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--encre-pale);
    line-height: 1.5;
}

.confiance-histoire {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--releve);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
}

.confiance-histoire a { color: var(--encre); }

/* ── Les pays au catalogue : l'ouverture dite en géographie, pas en chiffres ── */

.pays-catalogue { margin-bottom: clamp(2rem, 5vw, 3rem); }

.pays-titre {
    font-family: var(--releve);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--encre-pale);
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.6rem;
    margin: 0 0 1px;
}

.pays-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1px;
    background: var(--trait);
}

.pays-item {
    background: var(--craie);
    padding: 0.85rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pays-nom {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.022em;
}

.pays-regions {
    font-family: var(--releve);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

/* ── Aperçu du catalogue ───────────────────────────────────────────── */

.apercu-catalogue { margin-top: 0; }

.apercu-titre {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.7rem;
    margin-bottom: 1.6rem;
}

.apercu-titre h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }

.apercu-titre .compte {
    font-family: var(--releve);
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
    text-decoration: none;
}

.apercu-titre .compte:hover { color: var(--encre); text-decoration: underline; }

/* ── Grille de lieux ───────────────────────────────────────────────── */

/* Le compte de résultats reste un libellé : aucun volume de catalogue. */
.resultats-compte {
    font-family: var(--releve);
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.6rem;
    margin-bottom: 1.6rem;
}

/* Cartes serrées, séparées par un filet plutôt qu'un blanc : la grille se
   lit comme une planche. */
/* Résultats : cartes séparées, lignes marquées. Le min de colonne à 270px
   donne 4 colonnes sur un écran de bureau (et 5 en très grand écran, où
   --page s'élargit — voir le media query en fin de fichier). La séparation
   entre lignes est portée par l'espace vertical ET par le trait de base de
   chaque carte, teinté au terrain de la carte (la clé chromatique du site). */
.grille-hebergements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: clamp(1.6rem, 3vw, 2.2rem) clamp(0.9rem, 1.6vw, 1.3rem);
}

.carte-lieu {
    background: var(--craie);
    border: 1px solid var(--trait);
    border-bottom: 3px solid var(--encre);
    display: flex;
    flex-direction: column;
    transition: filter 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.carte-lieu[data-terrain='mer'] { border-bottom-color: var(--mer); }
.carte-lieu[data-terrain='montagne'] { border-bottom-color: var(--montagne); }
.carte-lieu[data-terrain='campagne'] { border-bottom-color: var(--campagne); }
.carte-lieu[data-terrain='ville'] { border-bottom-color: var(--ville); }

.carte-lieu:hover { filter: brightness(1.015); transform: none; border-color: var(--trait-fort); }
.carte-lieu > a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }

.vignette {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--ardoise);
    overflow: hidden;
}

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

.vignette-vide {
    display: grid;
    place-items: center;
    height: 100%;
    margin: 0;
    background:
        repeating-linear-gradient(135deg, rgb(24 34 46 / 7%) 0 1px, transparent 1px 8px),
        var(--ardoise);
    font-family: var(--releve);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

/* Pastille de pays : la teinte du terrain, en haut à gauche de la vignette. */
.vignette-pays {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-family: var(--releve);
    font-size: 0.64rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--craie);
    background: var(--accent);
    padding: 0.35rem 0.55rem;
}

.carte-lieu[data-terrain='mer'] .vignette-pays { background: var(--mer); }
.carte-lieu[data-terrain='montagne'] .vignette-pays { background: var(--montagne); }
.carte-lieu[data-terrain='campagne'] .vignette-pays { background: var(--campagne); }
.carte-lieu[data-terrain='ville'] .vignette-pays { background: var(--ville); }

.carte-lieu .infos { padding: 0.9rem 1rem 0.55rem; flex: 1; }

.carte-lieu h2 {
    font-size: 1.3rem;
    line-height: 1.14;
    margin-bottom: 0.35rem;
    letter-spacing: -0.028em;
}

.lieu-situation {
    font-family: var(--releve);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--encre-pale);
    margin: 0;
    text-transform: uppercase;
}

/* Coordonnées : la signature du Relevé, en clair sur la carte. */
.lieu-coordonnees {
    font-family: var(--releve);
    font-size: 0.7rem;
    color: var(--encre-pale);
    margin: 0.25rem 0 0;
}

/* Bandeau de relevé : la donnée du lieu, en mono, jamais décorative */
.releve {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.9rem;
    font-family: var(--releve);
    font-size: 0.72rem;
    color: var(--encre-pale);
    border-top: 1px solid var(--trait);
    padding: 0.55rem 1rem;
    margin: 0;
}

.releve b { font-weight: 500; color: var(--encre); }

.prix {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--releve);
    font-size: 0.78rem;
    color: var(--encre-pale);
    border-top: 1px solid var(--trait);
    padding: 0.7rem 1rem 0.8rem;
    margin: 0;
}

.prix strong { font-weight: 600; font-size: 1.15rem; color: var(--encre); }
.prix .prix-mention { color: var(--encre-pale); font-size: 0.72rem; }

/* Rappel de l'action sur la carte : c'est le propriétaire qu'on contacte. */
.prix-action {
    font-family: var(--releve);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.carte-lieu[data-terrain='mer'] .prix-action { color: var(--mer); }
.carte-lieu[data-terrain='montagne'] .prix-action { color: var(--montagne); }
.carte-lieu[data-terrain='campagne'] .prix-action { color: var(--campagne); }
.carte-lieu[data-terrain='ville'] .prix-action { color: var(--ville); }

.aucun-resultat {
    border: 1px solid var(--trait);
    background: var(--craie);
    padding: 2rem;
    font-size: 1.05rem;
}

.aucun-resultat .relance { color: var(--encre-pale); font-size: 0.95rem; margin: 0.4rem 0 0; }

/* ── Pagination ────────────────────────────────────────────────────── */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin: 3rem 0 0;
    font-family: var(--releve);
    font-size: 0.85rem;
}

.pagination a {
    color: var(--encre);
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--trait);
    background: var(--craie);
}

.pagination a:hover { border-color: var(--accent); color: var(--encre); }
.pagination a[aria-current='page'] { background: var(--encre); color: var(--craie); border-color: var(--encre); }
.pagination .ellipsis { padding: 0.4rem 0.2rem; color: var(--encre-pale); }

/* ── Fiche d'un lieu ───────────────────────────────────────────────── */

/* En-tête de fiche : photo plein cadre, titre posé dessus sur un carton de
   craie liseré de la teinte du terrain. */
.fiche-hero {
    position: relative;
    min-height: clamp(20rem, 40vw, 27.5rem);
    display: flex;
    align-items: flex-end;
    padding: clamp(1.5rem, 4vw, 2.5rem) var(--gouttiere);
    background:
        repeating-linear-gradient(135deg, rgb(24 34 46 / 6%) 0 1px, transparent 1px 9px),
        var(--ardoise);
    overflow: hidden;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.fiche-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.fiche-carton {
    position: relative;
    z-index: 1;
    max-width: min(48rem, 100%);
    background: var(--craie);
    border-top: 4px solid var(--accent);
    padding: 1.4rem 1.6rem 1.5rem;
    margin: 0 auto 0 max(0px, calc(50% - var(--page) / 2));
}

.fiche-carton .fiche-terrain {
    font-family: var(--releve);
    font-size: 0.7rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.5rem;
}

.fiche-carton h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    letter-spacing: -0.038em;
}

.fiche > header { margin-bottom: 1.2rem; }
.fiche .lieu-situation { font-size: 0.78rem; margin-bottom: 1rem; }

/* Relevé en ligne (dans le carton) : la donnée sous le titre. */
.fiche-releve {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.6rem;
    font-family: var(--releve);
    font-size: 0.78rem;
    color: var(--encre-pale);
    padding: 0;
    margin: 0;
    border: 0;
}

.fiche-releve span { white-space: nowrap; }
.fiche-releve b { font-weight: 500; color: var(--encre); }

/* Relevé en tableau : la version développée, plus bas dans la fiche. */
.releve-grille { margin-top: 2.5rem; }

.releve-grille h2 {
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.7rem;
    margin-bottom: 1px;
}

.releve-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 1px;
    background: var(--trait);
    margin: 0;
}

.releve-table > div {
    background: var(--craie);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--releve);
    font-size: 0.76rem;
    color: var(--encre-pale);
}

.releve-table dt { margin: 0; }
.releve-table dd { margin: 0; font-weight: 500; color: var(--encre); }

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 2px;
    margin-bottom: 2.5rem;
}

.galerie img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }

/* Vignettes cliquables (visionneuse) : le lien est l'élément de grille. */
.galerie-item { display: block; cursor: zoom-in; }
.galerie-item:hover img, .galerie-item:focus-visible img { opacity: 0.92; }

/* Bouton « Voir les N photos » posé sur le héros. */
.galerie-ouvrir-hero {
    position: absolute;
    right: var(--gouttiere);
    bottom: clamp(1rem, 3vw, 1.6rem);
    z-index: 2;
    font-family: var(--releve);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--craie);
    background: rgb(24 34 46 / 78%);
    padding: 0.5rem 0.85rem;
    cursor: zoom-in;
}
.galerie-ouvrir-hero:hover { background: var(--encre); }

/* ── Visionneuse photos (dialog + piste scroll-snap) ────────────────────
   Plein écran sur l'encre ; le balayage au doigt est natif (scroll-snap),
   les flèches et le clavier servent le desktop. */
.visionneuse {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    /* inset:0 + width/height auto couvrent l'écran SANS l'excès de 100vw
       (qui inclut la barre de défilement et créait un débordement horizontal). */
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    background: var(--encre);
    color: var(--craie);
}
.visionneuse::backdrop { background: rgb(24 34 46 / 92%); }

/* Visionneuse ouverte : la page derrière ne défile plus. */
html:has(.visionneuse[open]) { overflow: hidden; }

.visionneuse-barre {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem var(--gouttiere);
    background: linear-gradient(rgb(24 34 46 / 65%), transparent);
}
.visionneuse-compteur { font-family: var(--releve); font-size: 0.8rem; letter-spacing: 0.06em; }
.visionneuse-fermer {
    border: 0;
    background: transparent;
    color: var(--craie);
    font-size: 1.3rem;
    line-height: 1;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}
.visionneuse-fermer:hover { color: #fff; }

.visionneuse-piste {
    display: flex;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.visionneuse-piste::-webkit-scrollbar { display: none; }

.visionneuse-vue {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 3.2rem var(--gouttiere) 1.4rem;
    min-width: 0;
}
.visionneuse-vue img {
    max-width: 100%;
    max-height: min(74dvh, 100%);
    object-fit: contain;
    flex: 0 1 auto;
    min-height: 0;
}
.visionneuse-vue figcaption {
    font-family: var(--releve);
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgb(247 245 239 / 82%);
    max-width: 62ch;
    max-height: 5.5rem;
    overflow-y: auto;
    text-align: center;
    flex: none;
}

.visionneuse-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    background: rgb(247 245 239 / 12%);
    color: var(--craie);
    font-size: 1.8rem;
    line-height: 1;
    width: 2.6rem;
    height: 3.4rem;
    cursor: pointer;
    transition: background 140ms var(--ease-out);
}
.visionneuse-fleche:hover { background: rgb(247 245 239 / 24%); }
.visionneuse-fleche--prec { left: 0.4rem; }
.visionneuse-fleche--suiv { right: 0.4rem; }

/* Mobile : le geste remplace les flèches — on les garde discrètes en bas,
   hors du trajet du pouce sur l'image. */
@media (max-width: 700px) {
    .visionneuse-fleche { top: auto; bottom: 0.6rem; transform: none; }
    .visionneuse-fleche--prec { left: 0.6rem; }
    .visionneuse-fleche--suiv { right: 0.6rem; }
    .visionneuse-vue { padding-bottom: 3.6rem; }
}

.description {
    max-width: 62ch;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    line-height: 1.65;
}

/* ── Séjours proposés ──────────────────────────────────────────────── */

.disponibilites {
    margin-top: 2.75rem;
    background: transparent;
    border: 0;
    padding: 0;
}

.disponibilites > h2 {
    margin: 0 0 1px;
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.7rem;
}

.disponibilites .mois + .mois { margin-top: 1.5rem; }

.disponibilites h3 {
    font-family: var(--releve);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin: 1rem 0 0.2rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--trait);
}

.disponibilites ul { list-style: none; padding: 0; margin: 0; font-family: var(--prose); font-size: 1rem; }

.disponibilites li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.8rem 0.2rem;
    margin: 0;
    border-bottom: 1px solid var(--trait);
    transition: background 140ms var(--ease-out);
}

.disponibilites li:last-child { border-bottom: 0; }
.disponibilites li:hover { background: var(--craie); }

.disponibilites .offre-libelle {
    flex: 1 1 auto;
    font-family: var(--prose);
    font-size: 1.05rem;
    color: var(--encre);
}

.bouton-reserver {
    flex: 0 0 auto;
    display: inline-block;
    background: var(--accent);
    color: var(--craie);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    padding: 0.6rem 1rem;
    transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.bouton-reserver:hover { background: var(--encre); color: var(--craie); }

/* Badge « meilleur prix » : pastille pleine (campagne sur craie), angles vifs
   comme le reste de la direction. La marge gauche garantit l'espace avec le
   prix quel que soit le blanc du gabarit. Affiché seulement quand le mois
   compte plusieurs prix distincts (voir fiche.html.twig). */
.moins-cher {
    display: inline-block;
    margin-left: 0.55rem;
    font-family: var(--releve);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--craie);
    background: var(--campagne);
    padding: 0.16rem 0.55rem 0.14rem;
    white-space: nowrap;
    vertical-align: 0.1em;
}
.aucune-offre { color: var(--encre-pale); font-size: 0.95rem; margin: 0.4rem 0 0; }

/* ── Services & équipements (fiche) ────────────────────────────────── */

.services { margin-top: 2.75rem; }
.services-groupe { margin-top: 1.5rem; }

.services > h2 {
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.7rem;
    margin-bottom: 0;
}

.services-groupe h3 {
    font-family: var(--releve);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--trait);
}

.services-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 0.15rem 1.5rem;
}

.service {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    padding: 0.22rem 0;
    font-size: 0.98rem;
    line-height: 1.4;
}

.service-marque { flex: none; font-family: var(--releve); font-size: 0.8rem; color: var(--accent); }
.service-nom { flex: 1 1 auto; }

.service-note {
    font-family: var(--releve);
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--encre-pale);
}
.service-note--payant { color: var(--ville); }

.service--non { color: var(--encre-pale); }
.service--non .service-marque { color: var(--trait-fort); }

/* ── Informations de réservation (fiche) ───────────────────────────── */

.infos-reservation { margin-top: 2.75rem; }

.infos-reservation > h2 {
    border-bottom: 1px solid var(--trait);
    padding-bottom: 0.7rem;
    margin-bottom: 0;
}

.infos-resa-liste { margin: 0; border-top: 0; }

.infos-resa-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
    align-items: baseline;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--trait);
}

.infos-resa-ligne dt {
    flex: 0 0 12rem;
    font-family: var(--releve);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin: 0;
}

.infos-resa-ligne dd { flex: 1 1 12rem; margin: 0; font-size: 0.98rem; }
.infos-resa-ligne--large { flex-direction: column; gap: 0.25rem; }
/* En colonne, le flex-basis 12rem du dt devient une HAUTEUR (grand vide
   sous « Conditions d'annulation ») : on le neutralise. */
.infos-resa-ligne--large dt { flex: 0 0 auto; }
.infos-resa-ligne--large dd { max-width: 68ch; }

.periode-demandee {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    align-items: baseline;
    margin: 0 0 1.5rem;
    padding: 0.95rem 1.15rem;
    background: var(--craie);
    border-top: 3px solid var(--accent);
    font-family: var(--releve);
    font-size: 0.88rem;
}
.periode-demandee .periode-prix b { font-size: 1.1rem; }

.bouton-contact {
    display: inline-block;
    margin-top: 2rem;
    background: var(--accent);
    color: var(--craie);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    text-decoration: none;
    padding: 0.85rem 1.8rem;
    transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.bouton-contact:hover { background: var(--encre); color: var(--craie); }

/* ── Éditorial (pages de terrain) ──────────────────────────────────── */

.editorial { max-width: 64ch; padding-top: clamp(2rem, 5vw, 3rem); }
.editorial h1 { border-bottom: 5px solid var(--accent); padding-bottom: 0.4rem; }
.editorial h2 { margin-top: 2.2rem; font-size: 1.45rem; }
.editorial ul { padding-left: 1.1rem; }
.editorial .retour-recherche { font-family: var(--releve); font-size: 0.78rem; letter-spacing: 0.04em; }

/* ── Page de contact : formulaire + interlocuteur ──────────────────── */

.contact-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    padding-top: clamp(2rem, 5vw, 3rem);
}

/* L'interlocuteur, en encre pleine : c'est la promesse du site. */
.fiche-loueur {
    background: var(--encre);
    border: 0;
    border-top: 0;
    color: var(--craie);
    padding: 1.5rem 1.6rem 1.6rem;
}

.fiche-loueur h2 {
    font-family: var(--releve);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgb(247 245 239 / 55%);
    margin-bottom: 1rem;
}

.loueur-identite { display: flex; align-items: center; gap: 0.95rem; }

.loueur-avatar {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 50%;
    flex: none;
    background: var(--encre-claire);
}

.loueur-nom {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.12;
    letter-spacing: -0.028em;
    margin: 0;
    color: var(--craie);
}

.loueur-confiance {
    display: block;
    font-family: var(--releve);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-clair);
    margin-top: 0.3rem;
}

.loueur-releve {
    border-top: 1px solid var(--trait-clair);
    padding: 0.9rem 0 0;
    gap: 0 1.1rem;
    color: rgb(247 245 239 / 65%);
    margin-top: 0.9rem;
}

.loueur-releve b { color: var(--craie); }

.loueur-langues {
    font-family: var(--releve);
    font-size: 0.76rem;
    color: var(--craie);
    border-top: 1px solid var(--trait-clair);
    padding-top: 0.8rem;
    margin: 0.8rem 0 0;
}

.loueur-label { color: rgb(247 245 239 / 55%); margin-right: 0.4rem; }

.loueur-mot {
    border-top: 1px solid var(--trait-clair);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    font-size: 1rem;
    color: var(--craie);
}

.loueur-note {
    font-family: var(--releve);
    font-size: 0.72rem;
    line-height: 1.5;
    color: rgb(247 245 239 / 50%);
    border-top: 1px solid var(--trait-clair);
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
}

/* ── Formulaires ───────────────────────────────────────────────────── */

.formulaire { max-width: 34rem; }
.formulaire > div { margin-bottom: 1.15rem; }

.formulaire label {
    display: block;
    font-family: var(--releve);
    font-size: 0.68rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin-bottom: 0.3rem;
}

.formulaire input, .formulaire textarea {
    width: 100%;
    font-family: var(--prose);
    font-size: 1.05rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--trait-fort);
    background: var(--craie);
    color: var(--encre);
}

.formulaire input:focus, .formulaire textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.formulaire textarea { min-height: 8rem; resize: vertical; }

.formulaire button {
    border: 0;
    background: var(--encre);
    color: var(--craie);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.8rem 1.9rem;
    cursor: pointer;
    transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}

.formulaire button:hover { background: var(--accent); }
.formulaire ul { color: var(--ville); font-size: 0.9rem; padding-left: 1.1rem; }

/* ── Messages ──────────────────────────────────────────────────────── */

.succes, .alerte {
    border-left: 4px solid var(--accent);
    background: var(--craie);
    padding: 0.95rem 1.15rem;
    margin-bottom: 1.5rem;
}

.alerte { border-left-color: var(--ville); }
.alerte-succes { border-left-color: var(--campagne); }

/* ── Pied : encre pleine, en écho à l'en-tête ──────────────────────── */

.site-footer {
    border-top: 0;
    background: var(--encre);
    color: rgb(247 245 239 / 60%);
    padding: 2.25rem var(--gouttiere);
    font-family: var(--releve);
    font-size: 0.74rem;
    letter-spacing: 0.05em;
}

.site-footer a { color: rgb(247 245 239 / 60%); text-decoration: none; }
.site-footer a:hover { color: var(--craie); text-decoration: underline; }

.site-footer .pied-infos {
    max-width: var(--page);
    margin: 0 auto 1.5rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--trait-clair);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.site-footer .pied-barre {
    max-width: var(--page);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-footer p { margin: 0; }

/* La promesse commerciale ressort en craie pleine. */
.site-footer .pied-barre p:last-child { color: var(--craie); }

/* ── Retour au clic sur tous les CTA ───────────────────────────────── */

.bouton-reserver:active,
.bouton-contact:active,
.formulaire button:active,
form.recherche button:active,
.rechf-btn:active { transform: scale(0.975); }

/* ── Tableau de bord superadmin (inchangé dans son principe) ────────── */

section.carte {
    background: var(--craie);
    border: 1px solid var(--trait);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

section.carte h2 { margin-top: 0; }

table.tableau-admin { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.tableau-admin th, table.tableau-admin td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.tableau-admin th { font-family: var(--releve); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-pale); }
table.tableau-admin form { display: inline; margin-right: 0.4rem; }
table.tableau-admin button { font-family: var(--display); font-weight: 600; border: 1px solid var(--trait-fort); background: var(--craie); padding: 0.35rem 0.8rem; cursor: pointer; }
table.tableau-admin button:hover { background: var(--encre); color: var(--craie); }
table.tableau-admin td { overflow-wrap: anywhere; }

.brouillon-apercu {
    margin: 0.6rem 0 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px dashed var(--trait-fort);
    background: var(--craie);
}
.brouillon-apercu p { margin: 0.25rem 0; }
.brouillon-apercu pre,
pre.corps-post {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0.3rem 0;
    font-size: 0.85rem;
}

/* ── Page publique « devenir hôte » ───────────────────────────────── */

.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.candidature-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
    padding-top: clamp(2rem, 5vw, 3rem);
}

.candidature-these {
    max-width: 42rem;
    font-family: var(--prose);
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    color: var(--encre-pale);
}

.candidature-arguments ul { padding-left: 1.1rem; }
.candidature-arguments li { margin-bottom: 0.6rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Recherche — formulaire de filtres, MOBILE-FIRST (structure inchangée)
   ═══════════════════════════════════════════════════════════════════════ */

.rechf {
    background: var(--craie);
    border: 1px solid var(--trait-fort);
    border-top: 3px solid var(--accent);
    padding: clamp(0.95rem, 3vw, 1.25rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
    display: grid;
    gap: 1rem;
}
.rechf-principal { display: grid; gap: 0.9rem; }

.rechf-champ { display: flex; flex-direction: column; gap: 0.3rem; margin: 0; min-width: 0; }
.rechf label, .rechf legend {
    font-family: var(--releve);
    font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--encre-pale); padding: 0;
}
.rechf input[type="text"],
.rechf input[type="number"],
.rechf input[type="date"],
.rechf select {
    width: 100%; min-height: 3rem;
    font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--encre);
    background: #fff; border: 1px solid var(--trait-fort);
    padding: 0.6rem 0.7rem;
}
.rechf input:focus, .rechf select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.rechf-sejour { border: 0; margin: 0; padding: 0; display: grid; gap: 0.55rem; min-width: 0; }
.rechf-dates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0.4rem; }
.rechf-dates label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.6rem; }
.rechf-fleche { align-self: center; padding-bottom: 0.85rem; color: var(--encre-pale); }

.rechf-flex { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rechf-pilule { display: inline-flex; }
.rechf-pilule input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rechf-pilule span {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.85rem;
    font-family: var(--releve); font-size: 0.74rem; white-space: nowrap;
    border: 1px solid var(--trait-fort); background: #fff; color: var(--encre); cursor: pointer;
    transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.rechf-pilule input:checked + span { background: var(--accent); color: var(--craie); border-color: var(--accent); }
.rechf-pilule input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 2px; }

.rechf-btn {
    border: 0; background: var(--encre); color: var(--craie);
    font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.015em;
    min-height: 3rem; padding: 0.9rem 1.5rem; cursor: pointer;
    transition: background 160ms var(--ease-out), transform 120ms var(--ease-out);
}
.rechf-btn:hover { background: var(--accent); }

.rechf-avances { border-top: 1px solid var(--trait); padding-top: 0.4rem; }
.rechf-avances summary {
    font-family: var(--releve); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase;
    color: var(--accent); cursor: pointer; list-style: none; user-select: none;
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0;
}
.rechf-avances summary::-webkit-details-marker { display: none; }
.rechf-avances summary::before { content: '+'; display: inline-block; width: 0.8rem; text-align: center; }
.rechf-avances[open] summary::before { content: '−'; }
.rechf-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 0.7rem; }
.rechf-prix { grid-column: 1 / -1; }
.rechf-prix-paire { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }

@media (min-width: 700px) {
    .rechf-principal { grid-template-columns: 1.2fr 2.3fr 0.7fr auto; align-items: end; }
    .rechf-grille { grid-template-columns: repeat(4, 1fr); }
    .rechf-prix { grid-column: span 2; }
}

/* ── Pages SEO destinations ────────────────────────────────────────────
   Gabarit page-seo.html.twig : fil d'Ariane en mono, chapeau en évidence,
   FAQ en filets, maillage « Explorer aussi ». Même matière que le reste :
   craie, filets d'encre, angles vifs. */

.fil-ariane {
    font-family: var(--releve);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--encre-pale);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.4rem;
}
.fil-ariane a { color: var(--encre-pale); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; color: var(--encre); }

.page-seo-entete { margin-bottom: 2rem; }
.page-seo-entete h1 { max-width: 22ch; }
.page-seo-entete .chapeau {
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
    color: var(--encre-pale);
    max-width: 58ch;
}

.page-seo-listing { margin-block: 2rem 2.5rem; }
.page-seo-listing .voir-plus { margin-top: 1.6rem; }

.page-seo-contenu { margin-top: 2.5rem; }

.page-seo-faq { margin-top: 2.5rem; max-width: 68ch; }
.faq-liste { margin: 0; border-top: 1px solid var(--trait); }
.faq-item { padding: 1rem 0 0.9rem; border-bottom: 1px solid var(--trait); }
.faq-item dt {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}
.faq-item dd { margin: 0; color: var(--encre-pale); }

.page-seo-liens { margin-top: 2.5rem; border-top: 1px solid var(--trait); padding-top: 1.2rem; }
.page-seo-liens h2 {
    font-family: var(--releve);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-pale);
}
.page-seo-liens ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.page-seo-liens a { color: var(--encre); }

/* Bloc « Destinations » du pied de page (maillage présent sur tout le site). */
.pied-destinations {
    max-width: var(--page);
    margin: 0 auto 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
}
.pied-destinations-titre {
    font-family: var(--releve);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pied-destinations a { color: inherit; text-decoration: none; }
.pied-destinations a:hover { text-decoration: underline; }

/* ── Adaptations ───────────────────────────────────────────────────── */

/* Grand écran : la page s'élargit — l'en-tête, le pied et les grilles suivent,
   et la grille de résultats gagne une colonne (5 au lieu de 4). */
@media (min-width: 1480px) {
    :root { --page: 1400px; }
}

@media (max-width: 980px) {
    .accroche-contenu { grid-template-columns: minmax(0, 1fr); }
    .accroche { align-items: stretch; }
    .accroche-photo::after { background: rgb(230 227 218 / 82%); }
}

@media (max-width: 780px) {
    .contact-colonnes { grid-template-columns: 1fr; }
    .candidature-colonnes { grid-template-columns: minmax(0, 1fr); }
    /* La légende repasse en deux colonnes : la barre pleine ne tient pas. */
    .legende { display: grid; grid-template-columns: repeat(2, 1fr); }
    .legende a[data-terrain='montagne'] { flex-grow: 0; }
    .galerie .galerie-item:first-child img { aspect-ratio: 3 / 2; }
    .galerie .galerie-item:first-child { grid-column: 1 / -1; }
    .fiche-carton { margin-left: 0; }
    .infos-resa-ligne dt { flex-basis: 100%; }
}

@media (max-width: 400px) {
    .rechf-dates { grid-template-columns: 1fr; }
    .rechf-fleche { display: none; }
    .rechf-grille { grid-template-columns: 1fr; }
    form.recherche { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    .carte-lieu:hover { transform: none; }
    .bouton-reserver:active,
    .bouton-contact:active,
    .formulaire button:active,
    form.recherche button:active,
    .rechf-btn:active { transform: none; }
}