/* GENERATED by scripts/blog/sync-design.php from the Symfony application: do not edit.
 * Source: app/assets/styles/design.css; the Inter fonts and their licence are in fonts/. */
@layer reset, tokens, base, layout, components, utilities;

/* design/fonts.css */
@layer base {
/* Inter auto-hébergée (OFL 1.1, assets/fonts/inter/README.md) : aucun CDN tiers. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    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-display: swap;
    font-weight: 100 900;
    src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    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;
}
}

/* design/reset.css */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
}

/* design/tokens.css */
@layer tokens {
/*
 * Jetons du design system. Couleurs : charte approuvée (docs/BRANDING.md §3), plus deux nuances dérivées pour
 * l'accessibilité (D-25, validées le 2026-10-10). Aucune autre couleur n'est autorisée hors de ce fichier
 * (test DesignTokensTest). Contrastes vérifiés automatiquement.
 */
:root {
    /* Charte */
    --c-navy: #0F2D5B;
    --c-bleu: #1E88E5;
    --c-turquoise: #2EC4A6;
    --c-orange: #FFA726;
    --c-bleu-clair: #EAF5FF;
    --c-gris-clair: #F7F8FA;
    --c-blanc: #FFFFFF;

    /* Nuances dérivées pour l'accessibilité (le bleu de charte fait 3,68:1 sur blanc) */
    --c-bleu-accessible: #1565C0;
    --c-texte-2: #5B6675;

    /* Rôles */
    --c-texte: var(--c-navy);
    --c-fond: var(--c-blanc);
    --c-fond-doux: var(--c-gris-clair);
    --c-fond-accent: var(--c-bleu-clair);
    --c-lien: var(--c-bleu-accessible);
    --c-focus: var(--c-bleu);
    --c-trait: #E3E8EF;
    --c-desactive: #9AA4B2;
    --c-voile: rgb(15 45 91 / .5);

    /* Typographie */
    --f-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --t-xs: .8125rem;
    --t-s: .9375rem;
    --t-base: 1.0625rem;
    --t-l: 1.25rem;
    --t-h3: clamp(1.1rem, 1rem + .35vw, 1.3rem);
    --t-h2: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
    --t-h1: clamp(2.4rem, 1.5rem + 3vw, 4rem);
    --w-normal: 400;
    --w-medium: 600;
    --w-gras: 700;
    --w-titre: 800;

    /* Espacements (base 4 px) */
    --s-1: .25rem;
    --s-2: .5rem;
    --s-3: .75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 5rem;

    /* Formes et effets */
    --r-s: 10px;
    --r-m: 18px;
    --r-l: 28px;
    --r-full: 999px;
    --ombre: 0 1px 2px rgb(15 45 91 / .05), 0 8px 28px rgb(15 45 91 / .08);
    --transition: .2s ease;

    /* Mise en page */
    --largeur: 80rem;
    --header-h: 84px;
    --header-h-mobile: 68px;
}
}

/* design/base.css */
@layer base {
html { scroll-behavior: smooth; }
body {
    font-family: var(--f-texte);
    font-size: var(--t-base);
    line-height: 1.6;
    color: var(--c-texte);
    background: var(--c-fond);
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { line-height: 1.12; letter-spacing: -.02em; font-weight: var(--w-titre); }
h1 { font-size: var(--t-h1); letter-spacing: -.035em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: var(--w-gras); letter-spacing: -.01em; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--c-bleu-clair); color: var(--c-navy); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
}

/* design/layout.css */
@layer layout {
.l-container { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.l-section { padding-block: var(--s-8); }
@media (max-width: 40rem) { .l-section { padding-block: var(--s-6); } }
.l-section--tight { padding-top: 0; }
.l-stack { display: grid; gap: var(--s-4); }
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.l-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.l-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 60rem) { .l-grid--3 { grid-template-columns: 1fr; } }
.l-scroller {
    display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--s-5);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3);
}
.l-scroller > * { scroll-snap-align: start; }
@media (min-width: 60.0625rem) { .l-scroller { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
/* Sur mobile, une rangée de cartes devient un défilement horizontal (même contenu, page plus courte). */
@media (max-width: 40rem) {
    .l-scroll-mobile { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
    .l-scroll-mobile > * { scroll-snap-align: start; }
}
}

/* design/components/button.css */
@layer components {
.c-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    padding: .85rem 1.5rem; border-radius: var(--r-full); border: 1px solid transparent;
    font-weight: var(--w-gras); font-size: var(--t-s); line-height: 1.2; text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.c-button svg { width: 18px; height: 18px; stroke: currentColor; }
.c-button--primary { background: var(--c-navy); color: var(--c-blanc); }
.c-button--primary:hover { background: var(--c-bleu-accessible); }
.c-button--secondary { background: var(--c-blanc); color: var(--c-navy); border-color: var(--c-trait); }
.c-button--secondary:hover { border-color: var(--c-navy); }
.c-button--tertiary { background: transparent; color: var(--c-lien); padding-inline: 0; border-radius: 0; }
.c-button--tertiary:hover { text-decoration: underline; }
.c-button--small { padding: .5rem 1rem; font-size: var(--t-xs); }
.c-button:disabled, .c-button[aria-disabled="true"] {
    background: var(--c-fond-doux); color: var(--c-desactive); border-color: var(--c-trait); cursor: not-allowed; text-decoration: none;
}
}

/* design/components/header.css */
@layer components {
/* Fond blanc derrière le logo en couleurs (docs/BRANDING.md §5). Rapport du logo recadré : 31/7 exactement. */
.c-header { background: var(--c-blanc); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--c-trait); }
.c-header__inner { display: flex; align-items: center; gap: var(--s-6); height: var(--header-h); }
.c-header__logo { flex: none; display: block; }
.c-header__logo img { width: 248px; height: 56px; }
.c-header__nav { display: flex; gap: var(--s-6); font-weight: var(--w-medium); font-size: var(--t-s); margin-inline-end: auto; }
.c-header__nav a { text-decoration: none; padding-block: var(--s-2); position: relative; }
.c-header__nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--c-bleu); transform: scaleX(0); transition: transform var(--transition);
}
.c-header__nav a:hover::after, .c-header__nav a[aria-current="page"]::after { transform: scaleX(1); }
.c-header__menu { display: none; }
.c-header__menu-button { list-style: none; cursor: pointer; }
.c-header__menu-button::-webkit-details-marker { display: none; }
.c-header__menu-button svg { width: 18px; height: 18px; stroke: currentColor; flex: none; }
.c-header__panel {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--c-blanc); border-bottom: 1px solid var(--c-trait);
    box-shadow: var(--ombre); padding: var(--s-4) 1.25rem var(--s-5); display: grid; gap: var(--s-4);
}
.c-header__panel nav { display: grid; }
.c-header__panel nav a { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-trait); text-decoration: none; font-weight: var(--w-medium); }
.c-header__panel nav a[aria-current="page"] { color: var(--c-lien); }
.c-quicksearch--panel { width: auto; }
.c-quicksearch {
    display: flex; align-items: center; gap: var(--s-2); width: 18rem; padding: .55rem .9rem;
    border-radius: var(--r-full); background: var(--c-fond-doux); border: 1px solid var(--c-trait); font-size: var(--t-s);
}
.c-quicksearch:focus-within { border-color: var(--c-bleu); outline: 3px solid var(--c-focus); outline-offset: 2px; }
.c-quicksearch svg { width: 18px; height: 18px; stroke: var(--c-navy); flex: none; }
.c-quicksearch input { border: 0; background: transparent; outline: none; width: 100%; color: var(--c-texte); }
.c-quicksearch input::placeholder { color: var(--c-texte-2); }
@media (max-width: 60rem) {
    .c-header__inner { height: var(--header-h-mobile); justify-content: space-between; }
    .c-header__logo img { width: 186px; height: 42px; }
    .c-header__nav, .c-header__inner > .c-quicksearch { display: none; }
    .c-header__menu { display: block; }
    .c-header__menu-button {
        display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--c-trait); background: var(--c-blanc);
        border-radius: var(--r-full); padding: .5rem .9rem; font-weight: var(--w-medium); font-size: var(--t-s);
    }
    .c-header__menu[open] .c-header__menu-button { border-color: var(--c-navy); }
}
/* Très petits écrans (320 px) : logo réduit en gardant ses proportions exactes (31/7), BRANDING.md §5. */
@media (max-width: 23rem) {
    .c-header__logo img { width: 155px; height: 35px; }
    .c-header__menu-button { padding: .45rem .7rem; }
}
}

/* design/components/footer.css */
@layer components {
/* Fond navy : logo pour fonds foncés, texte bleu clair (12,3:1), titres et liens blancs (13,6:1), BRANDING.md §5. */
.c-footer { padding-block: var(--s-7) var(--s-6); margin-top: var(--s-8); font-size: var(--t-s); background: var(--c-navy); color: var(--c-bleu-clair); }
.c-footer__logo { display: block; width: 217px; height: 49px; margin-bottom: var(--s-4); }
.c-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); }
.c-footer__title { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-blanc); margin-bottom: var(--s-3); font-weight: var(--w-gras); }
.c-footer__list { display: grid; gap: var(--s-2); }
.c-footer a { color: var(--c-blanc); text-decoration: none; }
.c-footer a:hover { text-decoration: underline; }
.c-footer__note { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-bleu-accessible); font-size: var(--t-xs); color: var(--c-bleu-clair); }
@media (max-width: 60rem) { .c-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .c-footer { padding-block: var(--s-6) var(--s-5); margin-top: var(--s-6); } .c-footer__grid { gap: var(--s-5) var(--s-4); } .c-footer__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 20rem) { .c-footer__grid { grid-template-columns: 1fr; } }
.c-footer__legal ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--t-xs); }
}

/* design/components/section-head.css */
@layer components {
.c-section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: var(--s-6); }
.c-section-head__intro { color: var(--c-texte-2); margin-top: var(--s-2); max-width: 36rem; }
.c-section-head__more {
    font-weight: var(--w-medium); font-size: var(--t-s); color: var(--c-lien); text-decoration: none; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 6px;
}
.c-section-head__more svg { width: 16px; height: 16px; stroke: currentColor; transition: transform var(--transition); }
.c-section-head__more:hover { text-decoration: underline; }
.c-section-head__more:hover svg { transform: translateX(3px); }
@media (max-width: 40rem) { .c-section-head { flex-direction: column; align-items: start; } }
}

/* design/components/searchbar.css */
@layer components {
/* Recherche compacte « Où · Quand · Avec qui » : les trois critères restent accessibles sur mobile. */
.c-searchbar {
    display: flex; align-items: stretch; background: var(--c-blanc); border: 1px solid var(--c-trait);
    border-radius: var(--r-full); box-shadow: var(--ombre); padding: 6px; max-width: 34rem;
}
.c-searchbar:focus-within { border-color: var(--c-bleu); }
/* Champ actif clairement signalé au clavier (WCAG 2.4.7). */
.c-searchbar__field:focus-within { outline: 3px solid var(--c-focus); outline-offset: -3px; border-radius: var(--r-s); }
.c-searchbar__field { display: grid; padding: .35rem 1rem; flex: 1; min-width: 0; border-inline-end: 1px solid var(--c-trait); }
.c-searchbar__field:last-of-type { border: 0; }
.c-searchbar__label { font-size: 11px; font-weight: var(--w-gras); text-transform: uppercase; letter-spacing: .06em; color: var(--c-texte-2); }
.c-searchbar__control { border: 0; background: transparent; padding: 0; font-size: var(--t-s); font-weight: var(--w-medium); outline: none; min-width: 0; color: var(--c-texte); }
.c-searchbar__control::placeholder { color: var(--c-texte-2); font-weight: var(--w-normal); }
.c-searchbar__submit {
    border: 0; border-radius: var(--r-full); background: var(--c-navy); color: var(--c-blanc);
    width: 48px; display: grid; place-items: center; flex: none; transition: background var(--transition);
}
.c-searchbar__submit:hover { background: var(--c-bleu-accessible); }
.c-searchbar__submit svg { width: 20px; height: 20px; stroke: currentColor; }
.c-searchbar__submit-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-searchbar__submit:disabled { background: var(--c-fond-doux); color: var(--c-desactive); cursor: not-allowed; }
@media (max-width: 40rem) {
    .c-searchbar { flex-direction: column; border-radius: var(--r-m); padding: var(--s-2); max-width: none; }
    .c-searchbar__field { border-inline-end: 0; border-bottom: 1px solid var(--c-trait); padding: .55rem .75rem; }
    .c-searchbar__field:last-of-type { border-bottom: 0; }
    .c-searchbar__submit { width: 100%; height: 48px; margin-top: var(--s-2); border-radius: var(--r-s); display: flex; gap: var(--s-2); align-items: center; justify-content: center; font-weight: var(--w-gras); }
    .c-searchbar__submit-text { position: static; width: auto; height: auto; clip: auto; }
}
.c-suggest { margin-top: var(--s-4); font-size: var(--t-s); color: var(--c-texte-2); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; }
.c-suggest a { color: var(--c-texte); font-weight: var(--w-medium); text-decoration: none; border-bottom: 2px solid var(--c-turquoise); }
.c-suggest a:hover { border-color: var(--c-navy); }
}

/* design/components/pill.css */
@layer components {
/* Pastilles de contexte : texte navy sur turquoise (6,2:1) ou orange (7,0:1), jamais l'inverse. */
.c-pill { display: inline-flex; align-items: center; gap: 4px; padding: .3rem .7rem; border-radius: var(--r-full); font-size: var(--t-xs); font-weight: var(--w-gras); color: var(--c-navy); background: var(--c-fond-doux); border: 1px solid var(--c-trait); text-decoration: none; }
.c-pill--turquoise { background: var(--c-turquoise); border-color: var(--c-turquoise); }
.c-pill--orange { background: var(--c-orange); border-color: var(--c-orange); }
.c-pill--accent { background: var(--c-bleu-clair); border-color: var(--c-bleu-clair); }
a.c-pill:hover { border-color: var(--c-navy); }
.c-place-tag { background: var(--c-blanc); color: var(--c-navy); font-size: var(--t-xs); font-weight: var(--w-gras); padding: .35rem .75rem; border-radius: var(--r-full); box-shadow: var(--ombre); }
}

/* design/components/media.css */
@layer components {
.c-media { position: relative; overflow: hidden; background: var(--c-fond-doux); border-radius: var(--r-m); }
.c-media--l { border-radius: var(--r-l); }
.c-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.c-media--ratio-4-5 { aspect-ratio: 4 / 5; }
.c-media--ratio-3-2 { aspect-ratio: 3 / 2; }
.c-media--ratio-16-10 { aspect-ratio: 16 / 10; }
.c-media__badge { position: absolute; left: var(--s-3); top: var(--s-3); }
.c-media__place { position: absolute; left: var(--s-3); bottom: var(--s-3); }
/* Image absente : surface neutre et pictogramme, jamais d'image partenaire de substitution */
.c-media--empty { display: grid; place-items: center; color: var(--c-texte-2); }
.c-media--empty svg { width: 40px; height: 40px; stroke: currentColor; opacity: .6; }
.c-photo-credit {
    position: absolute; right: var(--s-3); bottom: var(--s-3); font-size: 11px; line-height: 1.4;
    color: var(--c-blanc); background: var(--c-voile); padding: 2px 8px; border-radius: var(--r-full); text-decoration: none;
}
a.c-photo-credit:hover { background: var(--c-navy); }
/* Avec une étiquette de lieu en bas à gauche, le crédit passe en haut à droite (aucun chevauchement sur les petites images). */
.c-media__place ~ .c-photo-credit { top: var(--s-3); bottom: auto; }
/* Aperçu administrateur : image dont les droits attendent la vérification humaine (jamais affichée en public). */
.c-media__pending { position: absolute; right: var(--s-2); top: var(--s-2); font-size: 10px; font-weight: var(--w-gras); color: var(--c-navy); background: var(--c-blanc); border-left: 3px solid var(--c-orange); padding: 1px 6px; border-radius: 4px; opacity: .92; }
.c-media__place ~ .c-photo-credit ~ .c-media__pending { top: auto; bottom: var(--s-3); }
}

/* design/components/card.css */
@layer components {
/* Cartes : l'image domine, le texte est sous l'image (pas de dégradé sombre en surimpression). */
.c-card { display: grid; gap: var(--s-3); align-content: start; position: relative; text-decoration: none; container-type: inline-size; }
.c-card:hover .c-media img { transform: scale(1.04); }
.c-card__link { text-decoration: none; }
.c-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.c-card__link:focus-visible { outline: none; }
.c-card:focus-within { outline: 3px solid var(--c-focus); outline-offset: 4px; border-radius: var(--r-m); }
.c-card .c-photo-credit, .c-card a:not(.c-card__link) { position: relative; z-index: 2; }
.c-card .c-media .c-photo-credit { position: absolute; }
.c-card__kicker { font-size: var(--t-xs); font-weight: var(--w-gras); text-transform: uppercase; letter-spacing: .08em; color: var(--c-texte-2); }
.c-card__title { font-size: var(--t-h3); }
.c-card__text { color: var(--c-texte-2); font-size: var(--t-s); }
.c-card--destination .c-card__title { font-size: 1.6rem; font-weight: var(--w-titre); letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.c-card__count { font-size: var(--t-s); font-weight: var(--w-medium); color: var(--c-texte-2); letter-spacing: 0; }
.c-card--feature .c-card__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.c-card--selection { grid-template-rows: 220px auto; gap: 0; border: 1px solid var(--c-trait); border-radius: var(--r-m); overflow: hidden; background: var(--c-blanc); transition: box-shadow var(--transition), transform var(--transition); }
.c-card--selection:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.c-card--selection .c-media { border-radius: 0; height: 100%; }
.c-card__body { display: grid; gap: var(--s-2); }
.c-card--selection .c-card__body { padding: var(--s-5); }
.c-card__meta { font-size: var(--t-xs); color: var(--c-texte-2); }
.c-card__count-strong { font-size: var(--t-xs); font-weight: var(--w-gras); color: var(--c-lien); }
.c-card--place .c-card__address { font-size: var(--t-s); color: var(--c-texte-2); }
@media (max-width: 60rem) { .c-card--selection { grid-template-rows: 200px auto; } }
}

/* design/components/facts.css */
@layer components {
/* Informations pratiques : icône + texte, jamais la couleur seule. */
.c-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--c-texte); padding: 0; list-style: none; margin: 0; }
.c-facts__item { display: inline-flex; align-items: center; gap: 6px; }
.c-facts svg { width: 16px; height: 16px; stroke: var(--c-bleu); flex: none; }
}

/* design/components/offer.css */
@layer components {
/* Offres partenaires et notes : affichées seulement avec des données réelles, attribuées et datées (D-09, D-23). */
.c-rating-source { font-size: var(--t-xs); color: var(--c-texte-2); }
.c-rating-source__value { color: var(--c-texte); font-weight: var(--w-gras); }
.c-offer-line {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
    padding-top: var(--s-3); border-top: 1px solid var(--c-trait); font-size: var(--t-xs); color: var(--c-texte-2);
}
.c-offer-line__price { font-size: 1.05rem; color: var(--c-texte); font-weight: var(--w-gras); font-variant-numeric: tabular-nums; }
.c-offer-row {
    display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); align-items: center;
    padding: var(--s-4); border: 1px solid var(--c-trait); border-radius: var(--r-m); background: var(--c-blanc);
}
.c-offer-row__provider { font-weight: var(--w-gras); }
.c-offer-row__detail { font-size: var(--t-xs); color: var(--c-texte-2); }
.c-offer-row__actions { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 30rem) { .c-offer-row { grid-template-columns: 1fr; } .c-offer-row__actions { grid-column: auto; grid-row: auto; } }

/* Offres d'une formule (fiche activité) */
.c-offers { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
.c-offers__title { font-size: var(--t-base); font-weight: var(--w-gras); }
.c-offers__test { font-size: var(--t-xs); font-weight: var(--w-gras); color: var(--c-navy); background: var(--c-orange); border-radius: var(--r-full); padding: 2px 10px; justify-self: start; }

/* Expériences réservables d'une destination (lues en direct chez le partenaire) */
.c-card__cta { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: auto; font-size: var(--t-s); font-weight: var(--w-gras); color: var(--c-lien); }
.c-card__cta svg { width: 16px; height: 16px; stroke: currentColor; }
.c-card--partner .c-card__link:hover { text-decoration: underline; }
.c-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.c-pager__status { font-size: var(--t-s); color: var(--c-texte-2); }
.l-section .c-offers__test { display: inline-block; margin-bottom: var(--s-4); }
}

/* design/components/tile.css */
@layer components {
.c-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); padding: 0; list-style: none; }
.c-tile { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5) var(--s-4); border-radius: var(--r-m); background: var(--c-fond-doux); text-decoration: none; height: 100%; transition: background var(--transition); }
.c-tile:hover { background: var(--c-fond-accent); }
.c-tile svg { width: 28px; height: 28px; stroke: var(--c-navy); }
.c-tile__title { font-size: var(--t-s); font-weight: var(--w-gras); }
.c-tile__text { font-size: var(--t-xs); color: var(--c-texte-2); }
@media (max-width: 70rem) { .c-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40rem) { .c-tiles { grid-template-columns: repeat(2, 1fr); } }
}

/* design/components/trust.css */
@layer components {
/* Transparence : filets fins, sans aplat de couleur. */
.c-trust { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--c-trait); padding: 0; margin: 0; list-style: none; }
.c-trust__item { padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-2); align-content: start; }
.c-trust__item + .c-trust__item { border-inline-start: 1px solid var(--c-trait); }
.c-trust__item svg { width: 26px; height: 26px; stroke: var(--c-turquoise); stroke-width: 2.2; }
.c-trust__title { font-size: 1rem; }
.c-trust__text { font-size: var(--t-s); color: var(--c-texte-2); }
.c-trust__text a { color: var(--c-lien); }
@media (max-width: 60rem) {
    .c-trust { grid-template-columns: 1fr 1fr; }
    .c-trust__item:nth-child(3) { border-inline-start: 0; }
    .c-trust__item:nth-child(n+3) { border-top: 1px solid var(--c-trait); }
}
@media (max-width: 40rem) {
    .c-trust__item { padding: var(--s-4) var(--s-3); }
    .c-trust__title { font-size: var(--t-s); }
    .c-trust__text { font-size: var(--t-xs); }
}
@media (max-width: 22rem) {
    .c-trust { grid-template-columns: 1fr; }
    .c-trust__item + .c-trust__item { border-inline-start: 0; border-top: 1px solid var(--c-trait); }
}
}

/* design/components/feature.css */
@layer components {
/* Bloc photo + texte sur fond clair (ex. « Idées cadeaux ») ; accroche visuelle de page. */
.c-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-7); align-items: center; background: var(--c-fond-accent); border-radius: var(--r-l); overflow: hidden; }
.c-feature__media { position: relative; height: 100%; min-height: 360px; border-radius: 0; }
.c-feature__media img { position: absolute; inset: 0; }
.c-feature > .c-media { height: 100%; min-height: 320px; border-radius: 0; }
.c-feature--text { grid-template-columns: minmax(0, 1fr); }
.c-feature--text .c-feature__body { padding: var(--s-6) var(--s-7); max-width: 48rem; }
.c-feature > .c-media img { position: absolute; inset: 0; }
.c-feature__body { padding: var(--s-7) var(--s-7) var(--s-7) 0; display: grid; gap: var(--s-4); justify-items: start; }
.c-feature__body p { color: var(--c-texte-2); }
@media (max-width: 60rem) {
    .c-feature { grid-template-columns: 1fr; gap: 0; }
    .c-feature__media, .c-feature > .c-media { min-height: 220px; }
    .c-feature__body, .c-feature--text .c-feature__body { padding: var(--s-5); }
}

.c-hero { padding-block: var(--s-5) var(--s-6); }
.c-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: center; }
.c-hero--text .c-hero__grid { grid-template-columns: minmax(0, 46rem); }
.c-hero__kicker { font-size: var(--t-s); font-weight: var(--w-medium); color: var(--c-lien); margin-bottom: var(--s-4); display: inline-flex; gap: var(--s-2); align-items: center; }
.c-hero__kicker::before { content: ""; width: 28px; height: 2px; background: var(--c-turquoise); }
.c-hero__lead { font-size: var(--t-l); color: var(--c-texte-2); margin-block: var(--s-5) var(--s-6); max-width: 30rem; }
/* Hauteur bornée : avec l'en-tête, le haut de la section suivante reste visible (1440×900 et 390×844). */
.c-hero__visual { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); height: clamp(380px, 56vh, 520px); }
.c-hero__visual > :first-child { grid-row: 1 / 3; }
.c-hero__visual > :only-child { grid-column: 1 / -1; }
.c-hero__visual .c-media { height: 100%; }
@media (max-width: 60rem) {
    .c-hero { padding-block: var(--s-4) var(--s-5); }
    .c-hero__grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .c-hero__visual { order: -1; height: clamp(180px, 26vh, 240px); grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .c-hero__visual > :not(:first-child) { display: none; }
    .c-hero h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.6rem); }
    .c-hero__kicker { margin-bottom: var(--s-2); }
    .c-hero__lead { font-size: var(--t-base); margin-block: var(--s-3) var(--s-4); }
    .c-hero .c-suggest { margin-top: var(--s-3); }
}
}

/* design/components/feedback.css */
@layer components {
.c-alert { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-m); border: 1px solid var(--c-trait); background: var(--c-fond-doux); font-size: var(--t-s); }
.c-alert svg { width: 20px; height: 20px; flex: none; stroke: var(--c-navy); }
.c-alert--info { background: var(--c-fond-accent); border-color: var(--c-fond-accent); }
.c-alert__title { font-weight: var(--w-gras); }
/* État vide : pas d'offre, pas de résultat. Toujours une explication et une suite possible. */
.c-empty { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: var(--s-7) var(--s-5); border: 1px dashed var(--c-trait); border-radius: var(--r-m); color: var(--c-texte-2); }
.c-empty svg { width: 32px; height: 32px; stroke: var(--c-texte-2); }
.c-empty__title { color: var(--c-texte); font-weight: var(--w-gras); font-size: var(--t-base); }
.c-empty--compact { justify-items: start; text-align: left; grid-template-columns: auto 1fr; column-gap: var(--s-3); padding: var(--s-4) var(--s-5); border-style: solid; background: var(--c-fond-doux); border-color: var(--c-fond-doux); }
.c-empty--compact svg { grid-row: span 2; width: 24px; height: 24px; margin-top: 2px; }
.c-empty--compact p { margin: 0; font-size: var(--t-s); }
}

/* design/components/navigation.css */
@layer components {
.c-breadcrumb { font-size: var(--t-xs); color: var(--c-texte-2); }
.c-breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 0; margin: 0; list-style: none; }
.c-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--s-1); color: var(--c-trait); }
.c-breadcrumb a { color: var(--c-texte-2); text-decoration: none; }
.c-breadcrumb a:hover { color: var(--c-texte); text-decoration: underline; }
.c-breadcrumb [aria-current="page"] { color: var(--c-texte); font-weight: var(--w-medium); }
.c-pagination { display: flex; gap: var(--s-2); align-items: center; justify-content: center; padding: 0; list-style: none; font-size: var(--t-s); }
.c-pagination a, .c-pagination span { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding-inline: var(--s-2); border-radius: var(--r-full); border: 1px solid var(--c-trait); text-decoration: none; }
.c-pagination a:hover { border-color: var(--c-navy); }
.c-pagination [aria-current="page"] { background: var(--c-navy); color: var(--c-blanc); border-color: var(--c-navy); font-weight: var(--w-gras); }
.c-pagination [aria-disabled="true"] { color: var(--c-desactive); }
}

/* design/components/page.css */
@layer components {
/* Structure des pages publiques (P3.3) : en-tête de page, colonne latérale, texte éditorial, blocs. */
.c-skip { position: absolute; left: var(--s-3); top: -100px; z-index: 100; background: var(--c-navy); color: var(--c-blanc); padding: var(--s-2) var(--s-4); border-radius: var(--r-s); font-weight: var(--w-medium); }
.c-skip:focus { top: var(--s-3); }
main:focus { outline: none; }

.c-preview-bar { background: var(--c-orange); color: var(--c-navy); font-size: var(--t-s); }
.c-preview-bar__inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); justify-content: space-between; padding-block: var(--s-2); }
.c-preview-bar a { font-weight: var(--w-gras); }
.c-preview-bar code { font-size: var(--t-xs); }

.c-page-head { padding-block: var(--s-5) var(--s-7); }
.c-page-head .c-breadcrumb { margin-bottom: var(--s-5); }
.c-page-head__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: center; }
.c-page-head--text .c-page-head__grid { grid-template-columns: minmax(0, 1fr); }
.c-page-head__kicker { font-size: var(--t-s); font-weight: var(--w-medium); color: var(--c-lien); margin-bottom: var(--s-3); display: inline-flex; gap: var(--s-2); align-items: center; }
.c-page-head__kicker::before { content: ""; width: 28px; height: 2px; background: var(--c-turquoise); }
.c-page-head h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem); }
.c-page-head__lead { font-size: var(--t-l); color: var(--c-texte-2); margin-top: var(--s-4); max-width: 38rem; }
.c-page-head .c-facts { margin-top: var(--s-5); font-size: var(--t-s); gap: var(--s-2) var(--s-5); }
.c-page-head .c-facts svg { width: 18px; height: 18px; }
.c-page-head__visual { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s-3); height: clamp(300px, 46vh, 460px); }
.c-page-head__visual > :only-child { grid-column: 1 / -1; grid-row: 1 / -1; }
.c-page-head__visual > :first-child:not(:only-child) { grid-row: 1 / 3; }
.c-page-head__visual > :nth-child(2):last-child { grid-row: 1 / 3; }
.c-page-head__visual .c-media { height: 100%; }
@media (max-width: 60rem) {
    .c-page-head { padding-block: var(--s-4) var(--s-6); }
    .c-page-head__grid { grid-template-columns: 1fr; gap: var(--s-5); }
    .c-page-head__visual { order: -1; height: clamp(200px, 30vh, 280px); grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .c-page-head__visual > :not(:first-child) { display: none; }
    .c-page-head__visual > :first-child { grid-row: 1 / -1; }
    .c-page-head__lead { font-size: var(--t-base); }
}

.l-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s-7); align-items: start; }
.l-with-aside > .l-aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); display: grid; gap: var(--s-4); }
@media (max-width: 60rem) {
    .l-with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .l-with-aside > .l-aside { position: static; }
}

.c-block + .c-block { margin-top: var(--s-7); }
.c-block__title { font-size: var(--t-h3); font-weight: var(--w-titre); margin-bottom: var(--s-4); }
.c-block__intro { color: var(--c-texte-2); margin: calc(var(--s-4) * -0.5) 0 var(--s-4); font-size: var(--t-s); }

.c-prose { max-width: 44rem; line-height: 1.75; }
.c-prose p + p { margin-top: var(--s-4); }
.c-prose--muted { color: var(--c-texte-2); font-size: var(--t-s); }

.c-aside-box { border: 1px solid var(--c-trait); border-radius: var(--r-m); padding: var(--s-5); display: grid; gap: var(--s-4); background: var(--c-blanc); }
.c-aside-box--soft { background: var(--c-fond-doux); border-color: var(--c-fond-doux); }
.c-aside-box__title { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-texte-2); font-weight: var(--w-gras); }
.c-aside-box .c-facts { display: grid; gap: var(--s-3); font-size: var(--t-s); }
.c-aside-box .c-facts svg { width: 18px; height: 18px; }

.c-practical { display: grid; gap: var(--s-4); margin: 0; }
.c-practical > div { display: grid; gap: var(--s-1); align-content: start; }
.c-practical dt { font-weight: var(--w-gras); font-size: var(--t-s); }
.c-practical dd { color: var(--c-texte-2); font-size: var(--t-s); margin: 0; }
.c-practical--columns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--s-5); }

.c-formulas { display: grid; gap: var(--s-3); list-style: none; padding: 0; margin: 0; }
.c-formula { border: 1px solid var(--c-trait); border-radius: var(--r-m); padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-2); }
.c-formula__title { font-weight: var(--w-gras); }
.c-formula__draft { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: var(--w-gras); color: var(--c-navy); border-left: 3px solid var(--c-orange); padding: 1px 6px; background: var(--c-fond-doux); border-radius: 4px; white-space: nowrap; }
.c-formula__meta { font-size: var(--t-s); color: var(--c-texte-2); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }

.c-sources { font-size: var(--t-xs); color: var(--c-texte-2); display: grid; gap: var(--s-2); }
.c-sources ul { margin: 0; padding-left: var(--s-4); display: grid; gap: var(--s-1); }
.c-sources a { color: var(--c-lien); overflow-wrap: anywhere; }

.c-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.c-chip { display: inline-flex; gap: var(--s-2); align-items: baseline; padding: .55rem 1rem; border: 1px solid var(--c-trait); border-radius: var(--r-full); font-size: var(--t-s); font-weight: var(--w-medium); text-decoration: none; background: var(--c-blanc); transition: border-color var(--transition); }
.c-chip:hover { border-color: var(--c-navy); }
.c-chip__count { color: var(--c-texte-2); font-weight: var(--w-normal); font-size: var(--t-xs); }
.c-chip[aria-current="page"], .c-chip[aria-pressed="true"] { background: var(--c-navy); border-color: var(--c-navy); color: var(--c-blanc); }
.c-chip[aria-current="page"] .c-chip__count, .c-chip[aria-pressed="true"] .c-chip__count { color: var(--c-blanc); }

.c-link-list { display: grid; gap: var(--s-2); list-style: none; padding: 0; margin: 0; font-size: var(--t-s); }
.c-link-list a { color: var(--c-lien); font-weight: var(--w-medium); }

.c-band { background: var(--c-fond-doux); border-radius: var(--r-l); padding: var(--s-7); }
@media (max-width: 40rem) { .c-band { padding: var(--s-5); border-radius: var(--r-m); } }

/* Liste éditoriale ordonnée (sélections) : rang, carte, justification. */
.c-ranked { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-6); counter-reset: none; }
.c-ranked__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: start; padding-bottom: var(--s-6); border-bottom: 1px solid var(--c-trait); }
.c-ranked__item:last-child { border-bottom: 0; padding-bottom: 0; }
.c-ranked__rank { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); background: var(--c-navy); color: var(--c-blanc); font-weight: var(--w-titre); font-variant-numeric: tabular-nums; }
.c-ranked__card .c-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--s-5); align-items: start; }
.c-ranked__card .c-card > .c-media { grid-row: 1 / span 6; }
.c-ranked__why { grid-column: 2; color: var(--c-texte-2); font-size: var(--t-s); border-left: 3px solid var(--c-turquoise); padding-left: var(--s-4); }
@media (max-width: 40rem) {
    .c-ranked__item { grid-template-columns: minmax(0, 1fr); }
    .c-ranked__why { grid-column: 1; }
    .c-ranked__card .c-card { grid-template-columns: minmax(0, 1fr); }
    .c-ranked__card .c-card > .c-media { grid-row: auto; }
}

.c-block__title--l { font-size: var(--t-h2); margin-bottom: var(--s-5); }
.c-prose--page { padding-bottom: var(--s-6); }
.c-prose--page h2 { font-size: var(--t-h3); margin: var(--s-6) 0 var(--s-3); }
.c-prose--page h2:first-child { margin-top: 0; }

/* Index des types : cartes texte légères (pas de liste massive de liens). */
.c-type-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.c-type-card { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); border-radius: var(--r-m); background: var(--c-fond-doux); text-decoration: none; transition: background var(--transition); }
.c-type-card:hover { background: var(--c-fond-accent); }
.c-type-card__name { font-weight: var(--w-gras); }
.c-type-card__text { font-size: var(--t-s); color: var(--c-texte-2); }
.c-type-card__count { font-size: var(--t-xs); font-weight: var(--w-gras); color: var(--c-lien); }

.l-grid--destinations { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--s-6) var(--s-5); }

/* Accueil : une grande mise en avant et quatre cartes (maquette v2.1). */
.c-showcase { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
.c-showcase--single { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
.c-showcase__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (max-width: 60rem) {
    .c-showcase { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
    /* Les quatre cartes défilent horizontalement (même contenu, page plus courte). */
    .c-showcase__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
    .c-showcase__grid > * { scroll-snap-align: start; }
}

/* Recherche (P3.8) : formulaire accessible, filtres repliables, sans JavaScript. */
.c-search-form { margin-top: var(--s-5); display: grid; gap: var(--s-4); max-width: 56rem; }
.c-search-form__main { display: flex; gap: var(--s-2); }
.c-search-form__input { flex: 1; min-width: 0; padding: .8rem 1.1rem; border: 1px solid var(--c-trait); border-radius: var(--r-full); font: inherit; color: var(--c-texte); background: var(--c-blanc); }
.c-search-form__input:focus { border-color: var(--c-bleu); outline: none; box-shadow: 0 0 0 3px var(--c-bleu-clair); }
.c-search-form__filters { border: 1px solid var(--c-trait); border-radius: var(--r-m); padding: var(--s-3) var(--s-5); }
.c-search-form__filters summary { cursor: pointer; font-weight: var(--w-medium); font-size: var(--t-s); padding-block: var(--s-1); }
.c-search-form__grid { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.c-search-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-4) var(--s-2); }
.c-field { display: grid; gap: var(--s-1); font-size: var(--t-s); align-content: start; }
.c-field__label { font-weight: var(--w-gras); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-texte-2); }
.c-field__control { padding: .6rem .8rem; border: 1px solid var(--c-trait); border-radius: var(--r-s); font: inherit; color: var(--c-texte); background: var(--c-blanc); min-width: 0; }
.c-field__control:focus { border-color: var(--c-bleu); outline: none; box-shadow: 0 0 0 3px var(--c-bleu-clair); }
.c-field__help { font-size: var(--t-xs); color: var(--c-texte-2); }
.c-check { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-s); font-weight: var(--w-medium); align-self: end; padding-bottom: .6rem; }
.c-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-navy); }
.c-chip--removable span[aria-hidden] { font-size: 1.1em; line-height: 1; }
@media (max-width: 40rem) { .c-search-form__main { flex-direction: column; } }

/* Mobile (P4.0) : pages plus courtes, sans retirer d'information. */
@media (max-width: 40rem) {
    .c-page-head { padding-block: var(--s-3) var(--s-5); }
    .c-page-head .c-breadcrumb { margin-bottom: var(--s-3); }
    .c-page-head .c-facts { margin-top: var(--s-4); }
    .c-block + .c-block { margin-top: var(--s-6); }
    .c-band { padding: var(--s-5) var(--s-4); }
    .c-showcase { gap: var(--s-4); }
    .c-practical--columns { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
    .c-ranked { gap: var(--s-5); }
    .c-ranked__item { padding-bottom: var(--s-5); }
    /* « En bref » reprend les faits déjà affichés sous le titre : masqué sur mobile (aucune information perdue). */
    .c-aside-box--facts { display: none; }
    .c-empty { padding: var(--s-5) var(--s-4); }
}
@media (max-width: 22rem) { .c-practical--columns { grid-template-columns: 1fr; } }

/* Tarifs officiels (P4.3) : liste sobre, distincte des offres partenaires (aucun bouton de réservation). */
.c-prices { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.c-price { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-trait); }
.c-price__amount { font-weight: var(--w-gras); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-price__meta { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--c-texte-2); }
.c-price__label .c-price__meta { grid-column: auto; }

/* Pages légales (P4.7) : document de travail signalé, faits manquants visibles (jamais inventés). */
.c-legal-draft { padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--c-bleu-clair); color: var(--c-navy); }
.c-todo { padding: 0 var(--s-1); border-radius: var(--r-s); background: var(--c-orange); color: var(--c-navy); font-weight: var(--w-medium); }
}

/* design/utilities.css */
@layer utilities {
.u-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.u-muted { color: var(--c-texte-2); }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mb-3 { margin-bottom: var(--s-3); }
}