/*
 * Feuille publique du site. Couleurs, polices et arrondi sont des jetons de marque, posés par
 * base.html.twig depuis config/brand.yaml (--brand-primary, --brand-cta, --brand-font-heading,
 * --brand-radius...) : aucune valeur de marque ne s'écrit ici en dur. Règles : docs/CHARTE.md.
 */

/* Mise en page (hors marque) : largeur de la colonne de lecture, texte, encarts et colonne
   principale des pages à sommaire. */
:root { --measure: 50rem; }

/* ---------- Polices auto-hébergées (variables, licence OFL : assets/fonts/LICENSE-*) ---------- */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/playfair-display-latin-XKXZKVG.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/playfair-display-latin-ext-whxIhII.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-Gz7AlRl.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-1Br77OV.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

body {
    margin: 0;
    font-family: var(--brand-font-body);
    line-height: 1.6;
    color: var(--brand-ink);
    background: var(--brand-paper);
    overflow-x: clip;
}

h1, h2, h3, h4, .site-header__brand {
    font-family: var(--brand-font-heading);
    font-weight: 700;
    line-height: 1.2;
}
a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-dark); }

/* ---------- En-tête ---------- */
.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.site-header__brand {
    font-size: 1.35rem;
    color: var(--brand-primary);
    text-decoration: none;
}
.locale-switcher { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Icône SVG (components/icon.html.twig) : de la couleur du texte, à sa taille. */
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }

/* Menu de devise de l'en-tête : <details> natif, un bouton par devise. */
.currency-menu { position: relative; }
.currency-menu__current { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; cursor: pointer; list-style: none; }
.currency-menu__current::-webkit-details-marker { display: none; }
.currency-menu__current:hover, .currency-menu[open] .currency-menu__current { background: var(--brand-blush); }
.currency-menu__list { position: absolute; right: 0; z-index: 30; display: grid; grid-template-columns: repeat(2, 1fr); gap: .25rem; margin: .35rem 0 0; padding: .5rem; border-radius: var(--brand-radius); background: var(--brand-surface); box-shadow: 0 8px 24px rgba(43, 34, 38, .14); }
.currency-menu__item { padding: .35rem .7rem; border: 0; border-radius: 999px; background: none; color: var(--brand-ink); font: inherit; font-size: .85rem; cursor: pointer; }
.currency-menu__item:hover { background: var(--brand-blush); }
.currency-menu__item.is-current { background: var(--brand-primary); color: #fff; }
.locale-switcher__item {
    padding: .25rem .45rem;
    border-radius: calc(var(--brand-radius) / 2);
    font-size: .85rem;
    color: inherit;
    text-decoration: none;
}
.locale-switcher__item.is-current { background: var(--brand-primary); color: #fff; }

.site-nav { display: flex; gap: 1rem; margin-right: auto; }
.site-nav__item { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.site-nav__item:hover { color: var(--brand-primary); }

/* ---------- Corps ---------- */
.site-main { max-width: 72rem; margin: 0 auto; padding: 2rem 16px; }

.hero {
    /* Pleine largeur hors du conteneur ; body coupe le débordement horizontal (overflow-x: clip). */
    margin: -2rem calc(50% - 50vw) 0;
    padding: 4rem 16px 3.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--brand-blush) 0%, var(--brand-paper) 100%);
}
.hero__title { margin: 0; font-size: 2.25rem; color: var(--brand-primary); }
.hero__tagline { margin: .5rem 0 0; font-size: 1.2rem; }
.hero__note { margin: 1.5rem 0 0; color: var(--brand-muted); }

.error-page { padding: 3rem 0; text-align: center; }
.error-page__code { margin: 0; font-size: 3rem; font-weight: 700; color: var(--brand-primary); }
.error-page__title { margin: .25rem 0 1rem; }
.error-page__home { color: var(--brand-primary-dark); font-weight: 600; }

/* Bouton courant : framboise. `.button--cta` (terracotta) est RÉSERVÉ aux appels à l'action
   immanquables, un par écran au plus, pour qu'il reste le seul à attirer l'œil (docs/CHARTE.md). */
.button {
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.button:hover { background: var(--brand-primary-dark); color: #fff; }
.button--cta { background: var(--brand-cta); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.button--cta:hover { background: var(--brand-cta-dark); }

/* Bloc : carte blanche arrondie, ombre très douce, posée sur le fond (docs/CHARTE.md). */
.block {
    background: var(--brand-surface);
    border-radius: calc(var(--brand-radius) + 4px);
    box-shadow: 0 4px 15px rgba(43, 34, 38, .06);
}

/* Surtitre : petites capitales espacées au-dessus d'un titre. */
.eyebrow {
    display: block;
    margin: 0 0 .35rem;
    font-family: var(--brand-font-body);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

/* Titre à deux graisses : `<h2>Texte léger <strong>partie forte</strong></h2>`. */
.title-mixed { font-weight: 400; }
.title-mixed strong { font-weight: 700; }

/* Pastille : lien en pilule (pays d'un continent, filtres). */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--brand-surface);
    box-shadow: 0 0 0 1px rgba(43, 34, 38, .08);
    color: var(--brand-ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s, box-shadow .15s;
}
a.chip:hover { background: var(--brand-blush); box-shadow: 0 0 0 1px var(--brand-primary); color: var(--brand-ink); }
.chip__count { font-size: .85rem; color: var(--brand-muted); }
.chip-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }

/* Encadré doux (rose poudré) : astuces, quick picks, mises en avant. */
.panel { padding: 1.25rem; border-radius: var(--brand-radius); background: var(--brand-blush); }
.hero__cta { margin: 2rem 0 0; }

/* ---------- City breaks ---------- */
.breadcrumb { margin-bottom: 1rem; font-size: .9rem; }
.breadcrumb__list { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb__list li + li::before { content: "\203A"; margin-right: .35rem; opacity: .6; }
.breadcrumb { color: var(--brand-muted); }
.breadcrumb a { color: inherit; }

.page-head { margin-bottom: 1.5rem; }
.page-head__title { margin: 0; font-size: 2rem; color: var(--brand-primary); }
.page-head__intro { margin: .5rem 0 0; max-width: 40rem; }

.continent-block { margin: 1.5rem 0; padding: 1.5rem; }
.continent-block__title a { color: inherit; text-decoration: none; }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.card { overflow: hidden; transition: box-shadow .18s; }
.card:hover { box-shadow: 0 8px 24px rgba(43, 34, 38, .12); }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__title { display: block; padding: .85rem 1rem 1rem; font-family: var(--brand-font-heading); font-weight: 700; font-size: 1.15rem; }
.card__link:hover .card__title { color: var(--brand-primary); }
.card .photo__img, .card .photo--placeholder { aspect-ratio: 3 / 2; border-radius: 0; box-shadow: none; }

.photo { margin: 0; }
.photo__img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--brand-radius); background: var(--brand-blush); box-shadow: 0 2px 10px rgba(43, 34, 38, .08); }
.photo--placeholder { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--brand-radius); background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.photo__credit { margin-top: .25rem; font-size: .8rem; color: var(--brand-muted); }
.photo--captioned { position: relative; }
.photo__caption { position: absolute; left: .75rem; bottom: .75rem; max-width: calc(100% - 1.5rem); margin: 0; padding: .3rem .75rem; border-radius: 999px; background: rgba(43, 34, 38, .62); color: #fff; font-size: .8rem; line-height: 1.35; backdrop-filter: blur(4px); }
.photo__caption .photo__credit { margin: 0; color: rgba(255, 255, 255, .75); }
.prose > .photo { margin: 0 0 1.5rem; }
.prose > .photo .photo__img { aspect-ratio: 16 / 9; }

/* Carte et sa légende (components/map.html.twig) : une pastille par point, la même dans la
   légende et sur la carte (numéro d'un lieu, avion d'un aéroport). */
/* Atouts et points faibles (components/pros_cons.html.twig) : pastille verte [+], rouge [-]. */
.pros-cons { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.prose .pros-cons > li { margin-top: 0; }
.pros-cons__item { display: flex; align-items: flex-start; gap: .6rem; padding: .3rem 0; line-height: 1.45; }
.pros-cons__badge { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; margin-top: .2rem; border-radius: 999px; background: var(--brand-positive); color: #fff; }
.pros-cons__item--con .pros-cons__badge, .pros-cons__item--avoid .pros-cons__badge { background: var(--brand-negative); }
.pros-cons__item--warning .pros-cons__badge { background: none; color: var(--brand-caution); }
.pros-cons__item--warning .pros-cons__badge .icon { width: 1.3rem; height: 1.3rem; stroke-width: 2.25; }
.pros-cons__badge .icon { width: .9rem; height: .9rem; stroke-width: 3; }

.map-figure { margin: 0 0 1.5rem; }
.map-figure__canvas { height: 18rem; border-radius: var(--brand-radius); background: var(--brand-blush); box-shadow: 0 2px 10px rgba(43, 34, 38, .08); z-index: 0; }
.map-figure--tall .map-figure__canvas { height: 24rem; }
.map-figure__stage { position: relative; }
/* Panneau d'un repère, posé sur la carte : photo, nom, type, itinéraire. */
/* Les paragraphes du panneau précèdent `.prose p` en spécificité : la carte vit dans une section de prose. */
.map-panel { position: absolute; right: .75rem; bottom: .75rem; left: .75rem; z-index: 1; padding: .9rem 1rem 1rem; outline: none; }
.map-panel__close { position: absolute; top: .5rem; right: .5rem; display: inline-flex; padding: .35rem; border: 0; border-radius: 999px; background: var(--brand-blush); color: var(--brand-ink); cursor: pointer; }
.map-panel__close .icon { width: 1rem; height: 1rem; }
.map-panel__photo { display: block; width: 100%; max-height: 9rem; margin: 0 0 .6rem; border-radius: var(--brand-radius); object-fit: cover; }
.map-panel__photo[hidden] { display: none; }
.map-panel .map-panel__name { display: flex; align-items: center; gap: .5rem; margin: 0 2.75rem 0 0; font-family: var(--brand-font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.map-panel__route { display: inline-flex; flex: none; padding: .35rem; border: 0; border-radius: 999px; background: var(--brand-blush); color: var(--brand-primary); cursor: pointer; }
.map-panel__route:hover { background: var(--brand-primary); color: #fff; }
.map-panel__route .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
.map-panel .map-panel__type { margin: .1rem 0 0; font-size: .85rem; color: var(--brand-muted); }
.map-panel .map-panel__actions { margin: .6rem 0 0; }
.map-panel__guide { font-size: .9rem; }
.map-figure__legend { margin-top: .75rem; }
.map-figure__caption { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.4; color: var(--brand-muted); }
.map-figure__credit { margin: .3rem 0 0; font-size: .7rem; line-height: 1.3; text-align: right; color: var(--brand-muted); }
.map-legend { font-size: 1rem; line-height: 1.3; }
.chip--pinned { padding: .3rem .95rem .3rem .3rem; }
.chip--pinned .map-pin { border: 0; box-shadow: none; }
.map-pin { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 2px solid var(--brand-paper); border-radius: 999px; background: var(--brand-primary); color: var(--brand-paper); font-family: var(--brand-font-body); font-size: .85rem; font-weight: 700; line-height: 1; box-shadow: 0 1px 4px rgba(43, 34, 38, .3); }
.map-pin--accent { background: var(--brand-ink); }
/* Les groupes d'une carte (journées d'un programme) : une couleur de série de la charte par
   groupe (config/brand.yaml, series_1 à 4), et une pastille qui s'élargit pour son préfixe (« J1·3 »). */
.map-pin--group-1 { background: var(--brand-series-1); }
.map-pin--group-2 { background: var(--brand-series-2); }
.map-pin--group-3 { background: var(--brand-series-3); }
.map-pin--group-4 { background: var(--brand-series-4); }
.map-pin[class*="map-pin--group-"] { width: auto; min-width: 1.75rem; padding: 0 .5rem; font-size: .75rem; letter-spacing: .02em; }
.map-legend-cards { display: grid; gap: 1rem; margin-top: .25rem; }
.map-legend-card { padding: .9rem 1rem 1rem; }
.map-legend-card .map-legend__group { margin: 0 0 .6rem; }
.map-legend--list { margin: 0; padding: 0; list-style: none; }
.prose .map-legend--list > li { margin-top: 0; }
.map-legend__row { display: flex; align-items: flex-start; gap: .6rem; margin: 0 -.5rem; padding: .35rem .5rem; border-radius: var(--brand-radius); cursor: pointer; }
.map-legend__row:hover { background: var(--brand-blush); }
.map-legend__row .map-pin { margin-top: .05rem; }
.map-legend__text { display: flex; flex-direction: column; line-height: 1.3; }
.map-legend__type { font-size: .8rem; color: var(--brand-muted); }
.map-legend__group { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 .5rem; font-weight: 600; }
.map-legend__group a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.map-legend__group a:hover { color: var(--brand-primary); }
.map-legend__group .map-pin { width: auto; padding: 0 .6rem; font-size: .8rem; }
.map-legend__group + .map-legend { margin-top: 0; }
.map-pin .icon { width: 1rem; height: 1rem; }
.map-marker-icon { background: none; border: 0; }
.map-marker { position: absolute; top: 0; left: 0; display: flex; width: max-content; transform: translate(-50%, -50%); }
.map-marker .chip { gap: .4rem; padding: .2rem .7rem .2rem .2rem; background: var(--brand-paper); box-shadow: 0 1px 6px rgba(43, 34, 38, .3); font-family: var(--brand-font-body); font-size: .85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.map-marker .chip .map-pin { width: 1.5rem; height: 1.5rem; font-size: .8rem; }
.map-marker .chip .map-pin[class*="map-pin--group-"] { width: auto; min-width: 1.5rem; padding: 0 .45rem; font-size: .7rem; }

.photo-hero { margin-bottom: 1.5rem; }
.photo-hero .photo__img, .photo-hero .photo--placeholder { aspect-ratio: 16 / 9; max-height: 32rem; }

/* Mosaïque condensée de tête (components/place_hero.html.twig) : une grande photo, puis deux
   petites en mobile, quatre (ou deux) en desktop ; elle ouvre la visionneuse. */
.photo-mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.photo-mosaic__tile { display: block; min-width: 0; overflow: hidden; border-radius: var(--brand-radius); }
.photo-mosaic__tile:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.photo-mosaic__tile:not(:first-child) { aspect-ratio: 1; }
.photo-mosaic__tile:nth-of-type(n + 4) { display: none; }
.photo-mosaic .photo, .photo-mosaic .photo__img { width: 100%; height: 100%; }
.photo-mosaic .photo__img { border-radius: 0; box-shadow: none; transition: transform .3s; }
.photo-mosaic__tile:hover .photo__img { transform: scale(1.04); }
.photo-mosaic .photo__credit { position: absolute; right: 0; bottom: 0; margin: 0; padding: .15rem .5rem; background: rgba(43, 34, 38, .7); color: #fff; font-size: .75rem; }
.photo-mosaic .photo { position: relative; }
.photo-mosaic__more { position: absolute; right: .75rem; bottom: .75rem; border: 0; font: inherit; font-size: .9rem; cursor: pointer; }

/* Visionneuse : <dialog> natif plein écran, photo entière sur fond sombre. */
.lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20, 16, 18, .96); color: #fff; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(20, 16, 18, .9); }
.lightbox__figure { display: flex; flex-direction: column; align-items: center; gap: .5rem; max-width: 100%; margin: 0; padding: 3.5rem .5rem 1rem; }
.lightbox__image { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; }
.lightbox__caption { font-size: .85rem; opacity: .85; }
.lightbox__button { position: absolute; display: inline-flex; padding: .6rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.lightbox__button:hover { background: rgba(255, 255, 255, .25); }
.lightbox__button .icon { width: 1.5rem; height: 1.5rem; }
.lightbox__close { top: .75rem; right: .75rem; }
.lightbox__previous { left: .5rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: .5rem; top: 50%; transform: translateY(-50%); }

/* Carte : le crédit externe se pose sur la photo, pour que les titres des cartes restent alignés. */
.card .photo { position: relative; }
.card .photo__credit { position: absolute; right: 0; bottom: 0; margin: 0; padding: .15rem .5rem; border-top-left-radius: calc(var(--brand-radius) / 2); background: rgba(43, 34, 38, .7); color: #fff; font-size: .75rem; }

/* ---------- Pages éditoriales (composants de templates/components/) ---------- */
/* Colonne de lecture : textes longs à une largeur confortable. */
.measure { max-width: var(--measure); }
.lead { margin: 0 0 2rem; font-size: 1.25rem; line-height: 1.7; }
.section-title { margin: 0 0 1.25rem; font-size: 1.6rem; }
.subsection-title { margin: 2.5rem 0 .75rem; font-size: 1.25rem; }
h4.subsection-title, h5.subsection-title { margin-top: 2rem; font-family: var(--brand-font-body); font-size: 1.05rem; font-weight: 600; }

.byline { margin: -.75rem 0 1.25rem; font-size: .9rem; color: var(--brand-muted); }
/* Sous une mosaïque, la signature s'en détache : collée, elle se lisait comme une légende des photos. */
.photo-hero + .byline { margin-top: 2.5rem; }

/* Barre des pages de la ville : collée en haut pendant la lecture, sur toute la largeur, une seule
   ligne qui défile à l'horizontale sur petit écran. */
.page-tabs { position: sticky; top: 0; z-index: 20; margin: 0 calc(50% - 50vw) 1.75rem; padding: .6rem calc(50vw - 50%); background: var(--brand-paper); border-bottom: 1px solid rgba(43, 34, 38, .08); }
/* Le défilement horizontal rogne ce qui dépasse : 2 px de marge intérieure gardent le contour du survol visible. */
.page-tabs .chip-list { flex-wrap: nowrap; margin: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.page-tabs .chip { white-space: nowrap; }
.chip.is-current { background: var(--brand-primary); box-shadow: none; color: #fff; }

.quick-picks { margin: 0 0 2.5rem; padding: 1.5rem; }
.definition-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; }
.definition-grid__value { margin: 0; }
.definition-grid .icon { color: var(--brand-primary); }

/* Texte courant d'une page éditoriale (sections et réponses de FAQ) : une seule taille. */
.prose, .faq { font-size: 1.1875rem; line-height: 1.8; }
.prose { margin: 0 0 3.5rem; }
.prose p, .prose ul { margin: 0 0 1.25rem; }
.prose li + li { margin-top: .75rem; }
/* Encarts du texte (tableau, cartes, encadré) : de l'air dessus et dessous, mais collés à
   l'intertitre qui les annonce (pas de marge haute derrière un h3 ou un h4). */
.prose :is(.table-scroll, .icon-card-grid, .callout) { margin-bottom: 2.25rem; }
.prose :is(p, ul, .table-scroll, .icon-card-grid, .callout) + :is(.table-scroll, .icon-card-grid, .callout) { margin-top: 2.25rem; }
.prose strong { font-weight: 600; color: var(--brand-ink); }

/* Tableau de données (budget, prix, horaires) : en-tête framboise, lignes alternées, défilement
   horizontal sur petit écran. */
.table-scroll { overflow-x: auto; margin: 0; border: 2px solid var(--brand-primary); border-radius: var(--brand-radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: .95rem; line-height: 1.5; background: var(--brand-surface); }
.data-table caption { padding: .75rem 1rem; caption-side: top; text-align: left; font-weight: 600; background: var(--brand-primary); color: #fff; }
.data-table th, .data-table td { padding: .6rem 1rem; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--brand-primary-light); color: var(--brand-ink); font-weight: 600; white-space: nowrap; }
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:nth-child(even) { background: var(--brand-paper); }
/* Tableau à groupes (première cellule fusionnée) : un filet entre les groupes plutôt qu'une
   ligne sur deux, et la cellule répétée cachée (elle ne sert qu'aux fiches du petit écran). */
.data-table--grouped tbody tr:nth-child(even) { background: none; }
.data-table--grouped tbody tr.starts-group:not(:first-child) { border-top: 1px solid var(--brand-primary-light); }
.data-table .is-continued { display: none; }
.data-table tbody th[rowspan] { vertical-align: top; }
.inline-icon { display: inline-flex; margin-right: .4rem; vertical-align: -.2em; color: var(--brand-primary); }
.inline-icon .icon { width: 1.15em; height: 1.15em; }

/* Cartes à icône : spécialités, repères, idées. */
.icon-card-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.icon-card { display: grid; grid-template-columns: auto 1fr; align-items: start; align-content: start; column-gap: .9rem; padding: 1rem 1.15rem; line-height: 1.55; }
.icon-card .icon-badge { grid-row: span 2; }
.prose .icon-card-grid > li, .prose .chip-list > li { margin-top: 0; }
.icon-card__title { margin: .35rem 0 .15rem; font-weight: 600; line-height: 1.3; }
.icon-card__text { margin: 0; font-size: .95rem; color: var(--brand-muted); }
.icon-badge { display: inline-flex; padding: .55rem; border-radius: 999px; background: var(--brand-blush); color: var(--brand-primary); }
.icon-badge .icon { width: 1.4rem; height: 1.4rem; }

/* Encadré : astuce, attention, information ; barre de couleur à gauche. */
.heart-rating { display: flex; gap: .15rem; margin: 0 0 .2rem; }
.heart-rating__heart { display: inline-flex; color: var(--brand-primary-light); }
.heart-rating__heart.is-on { color: var(--brand-primary); }
.heart-rating__heart.is-on .icon { fill: currentColor; }
.heart-rating .icon { width: 1.05rem; height: 1.05rem; }
.callout { display: flex; align-items: flex-start; gap: .9rem; margin: 0; padding: 1.1rem 1.25rem; border-radius: var(--brand-radius); background: var(--brand-blush); line-height: 1.6; }
.callout .icon-badge { flex: none; background: var(--brand-surface); }
.callout--warning { background: var(--brand-surface); box-shadow: 0 0 0 1px rgba(43, 34, 38, .08); }
.callout--warning .icon-badge { background: var(--brand-blush); color: var(--brand-cta); }
.callout__body > p { margin: 0; }
.callout__title { font-weight: 600; }
/* Étiquettes compactes (« idéal pour ») sous un titre de section ou d'encart. */
.tag-list { margin: 0 0 1rem; }
.tag-list .chip { padding: .3rem .8rem; font-size: .85rem; }

.teaser-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 0 0 2.5rem; }
.teaser { padding: 1.5rem; }
.teaser__meta { margin: 0 0 .5rem; font-size: .85rem; color: var(--brand-muted); }
.teaser__text { margin: 0 0 1.25rem; }

.faq { margin: 2.5rem 0 0; }
.accordion { margin: 0 0 .75rem; padding: 0 1.25rem; }
.accordion__summary { padding: 1rem 0; font-weight: 600; cursor: pointer; }
.accordion__summary:hover { color: var(--brand-primary); }
.accordion__body { margin: 0; padding: 0 0 1.1rem; }
.accordion__body > p { margin: 0; }
.accordion__body > :last-child { margin-bottom: 0; }
.programme { margin: 0 0 2.25rem; }

/* Page à colonne latérale (sommaire) : une colonne en mobile, deux à partir de 1024 px. */
.with-aside { max-width: var(--measure); margin: 0 auto; }
.with-aside__main { min-width: 0; }
/* Une ancre atteinte (sommaire) s'arrête sous la barre collante. */
.with-aside__main [id] { scroll-margin-top: 5rem; }
.with-aside__side { display: none; }
.toc--sticky { position: sticky; top: 5rem; padding: 1.25rem; border-radius: var(--brand-radius); background: var(--brand-surface); box-shadow: 0 4px 15px rgba(43, 34, 38, .06); }
.toc--collapsible { margin: 0 0 2rem; }
.toc--collapsible .accordion { margin: 0; }
.toc__list { margin: 0; padding: 0 0 0 1.1rem; font-size: .92rem; line-height: 1.45; }
.toc__list li + li { margin-top: .45rem; }
.toc__link { color: var(--brand-ink); text-decoration: none; transition: color .15s; }
.toc__link:hover { color: var(--brand-primary); text-decoration: underline; }
.toc__link.is-current, .toc__list li:has(> .is-current)::marker { color: var(--brand-primary); font-weight: 700; }

.card-grid > li { min-width: 0; }

.empty-note { color: var(--brand-muted); }

/* ---------- Pied de page ---------- */
.site-footer {
    padding: 1.5rem 16px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    text-align: center;
    font-size: .9rem;
    color: var(--brand-muted);
}

/* Note des prix indicatifs (« * »), sous le pied de page. */
.currency-note { margin: .25rem 0 0; font-size: .8rem; }

/* ---------- Media queries, une par condition ---------- */
@media (min-width: 768px) {
    .hero__title { font-size: 3rem; }
    .page-head__title { font-size: 2.75rem; }
    .definition-grid { grid-template-columns: repeat(3, 1fr); column-gap: 1.75rem; }
    .teaser-grid { grid-template-columns: repeat(3, 1fr); }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .section-title { font-size: 1.9rem; }
    .subsection-title { font-size: 1.4rem; }
    .icon-card-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-mosaic { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, 13rem); }
    .photo-mosaic__tile:first-child { grid-column: auto; grid-row: span 2; aspect-ratio: auto; }
    .photo-mosaic__tile:not(:first-child) { aspect-ratio: auto; }
    .photo-mosaic__tile:nth-of-type(n + 4) { display: block; }
    .photo-mosaic--3 { grid-template-columns: 2fr 1fr; }
    .lightbox__previous { left: 1.5rem; }
    .lightbox__next { right: 1.5rem; }
    .map-figure__canvas { height: 26rem; }
    .map-figure--tall .map-figure__canvas { height: 34rem; }
    .map-panel { right: auto; width: 20rem; }
    .map-legend-cards { grid-template-columns: repeat(2, 1fr); }
    .map-panel__photo { max-height: 11rem; }
    /* Tableau à groupes sur grand écran : première colonne étroite, les autres sur une ligne. */
    .data-table--grouped th[scope="row"], .data-table--grouped thead th:first-child { width: 22%; }
    .data-table--grouped td { white-space: nowrap; }
}

@media (min-width: 1024px) {
    .with-aside { display: grid; grid-template-columns: minmax(0, var(--measure)) 17rem; justify-content: space-between; gap: 3rem; align-items: start; max-width: none; }
    .with-aside__side { display: block; align-self: stretch; }
    .toc--collapsible { display: none; }
}

/* Petit écran : un tableau devient une fiche par ligne (la première cellule en titre, chaque
   valeur sous l'intitulé de sa colonne, `data-label`), pour tout voir sans défilement latéral. */
@media (max-width: 639px) {
    .map-marker .map-pin, .map-marker .chip .map-pin { width: 1.35rem; height: 1.35rem; font-size: .7rem; }
    .map-marker .chip .map-pin[class*="map-pin--group-"] { width: auto; min-width: 1.35rem; padding: 0 .35rem; font-size: .65rem; }
    .map-marker .map-pin .icon { width: .8rem; height: .8rem; }
    .map-marker .chip { padding: 0; background: none; box-shadow: none; }
    .map-marker .chip__label { display: none; }
    .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .data-table tbody tr { display: block; padding: .8rem 1rem; }
    .data-table tbody tr + tr { border-top: 1px solid var(--brand-primary-light); }
    .data-table tbody th, .data-table tbody td { display: block; padding: 0; }
    .data-table .is-continued { display: block; }
    .data-table tbody th { margin: 0 0 .35rem; font-size: 1rem; }
    .data-table tbody td + td { margin-top: .4rem; }
    .data-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-muted); }
}

/* Impression : une carte et sa légende sur la même page, sans les boutons de zoom ; les pastilles
   gardent leur couleur, la carte se lit comme un plan. */
@media print {
    .map-figure, .map-legend, .map-legend__group, .map-legend-card { break-inside: avoid; }
    .leaflet-control-container, .map-panel { display: none; }
    .map-pin, .map-marker .chip, .pros-cons__badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}