/* =====================================================================
   Ulalu — complément du site vitrine
   ---------------------------------------------------------------------
   Ce fichier ne redéfinit rien de ulalu.css : il ajoute seulement ce que
   le système de design ne couvre pas, à savoir les illustrations
   abstraites, les photos d'illustration libres de droits (D-090, servies
   depuis /img/exemples, jamais d'ailleurs), quelques réglages d'icônes et
   les listes de définitions des pages légales.

   Sommaire : 1 illustrations · 2 icônes · 3 tableaux · 4 pages légales
              5 offres · 6 comparatif · 7 chiffres · 8 pages d'atterrissage
              9 paliers · 10 photos d'exemple · 11 pages par public
              12 aiguillage · 13 vitrine (D-153)
   ===================================================================== */

/* ---------- 1. Illustrations abstraites ---------- */

/* Remplace l'image d'un tirage dans .photo-stack : même géométrie que
   .photo-stack figure img, mais un dessin, jamais une photographie. */
.frame {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    background: var(--surface-2);
}

/* Bloc illustré autonome (colonne d'un .split). */
.art {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    background: var(--surface);
}

/* Le survol du .photo-stack est déjà animé par ulalu.css ; on ajoute
   seulement une respiration lente sur le halo du héros, désactivée si
   l'utilisateur demande moins d'animation. */
.art--breathe { animation: ulalu-breathe 14s ease-in-out infinite; }

@keyframes ulalu-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .art--breathe { animation: none; }
}

/* Grappe de boutons centrée (appels à l'action de fin de page). */
.cluster--center { justify-content: center; }

/* ---------- 2. Icônes ---------- */
.feature-icon svg { width: 1.45rem; height: 1.45rem; display: block; }

/* ---------- 3. Tableaux ---------- */
/* Les tableaux de limites défilent horizontalement sur un téléphone
   plutôt que de faire déborder la page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Les libellés « oui » et « non » réservés aux lecteurs d'écran (.sr-only, en position
   absolue) restent dans le tableau qui défile, au lieu d'élargir toute la page. */
.table-scroll { position: relative; }
.table-scroll table { min-width: 30rem; }

/* ---------- 4. Pages légales ---------- */
.deflist { margin: 0; display: grid; gap: .15rem 1.2rem; }
.deflist dt { font-weight: 650; color: var(--ink-2); font-size: var(--t-sm); }
.deflist dd { margin: 0 0 .7rem; }

@media (min-width: 34rem) {
    .deflist { grid-template-columns: auto 1fr; align-items: baseline; }
    .deflist dt { margin-bottom: .7rem; }
}

/* Marqueur visible d'une information restant à renseigner : le pointillé
   et le libellé entre crochets portent l'information, pas la couleur. */
.todo {
    display: inline-block;
    padding: .1rem .45rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--t-sm);
    font-style: normal;
}

/* Sommaire d'une page légale. */
.toc { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.toc a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.toc a:hover { color: var(--ember-text); text-decoration: underline; }

/* Les points numérotés d'un article (l'article 5 bis des CGV, D-149) : la numérotation de l'article, pas des puces. */
.terms-points { padding-left: 1.4rem; margin: 0 0 1rem; }
.terms-points li { margin-bottom: .6rem; }

/* Ancres : un titre visé par un lien ne passe pas sous l'en-tête collant. */
h2[id], h3[id], article[id], section[id] { scroll-margin-top: 5rem; }

/* ---------- 5. Offres ---------- */
/* Trois cartes côte à côte, empilées sur un téléphone, dans l'ordre des prix.
   L'offre mise en avant l'est par la mise en page seule : au milieu, un peu plus
   haute, avec le trait de marque et l'unique bouton plein. Aucune étiquette du
   genre « le plus choisi » : aucune vente n'a encore eu lieu. */
.offers { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); margin-top: 2rem; }
.offers > .card { margin-block: 0; }
@media (min-width: 62rem) {
    .offers { grid-template-columns: 1fr 1.08fr 1fr; align-items: stretch; padding-block: 1.2rem; }
    .offers > .offer--featured { margin-block: -1.2rem; padding-block: calc(var(--pad) + 1.2rem); }
}
.offer { display: flex; flex-direction: column; }
.offer--featured { border-color: var(--line-strong); box-shadow: var(--shadow-3); }
.offer__name { font-size: var(--t-xl); margin: 0 0 .35rem; }
.offer__tagline { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: .9rem; }
.offer .price { margin: 0 0 .2rem; }
/* « dès » devant le prix d'une offre en paliers, et l'unité qui passe à la ligne d'un bloc. */
.offer .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .4rem; }
.price small.price__from { font-size: var(--t-md); }
/* Les boutons tombent au bas de la carte : ils restent alignés d'une offre à l'autre. */
.offer__actions { display: grid; gap: .6rem; justify-items: center; margin-top: auto; padding-top: .4rem; }
.offer__actions a:not(.button) { font-size: var(--t-sm); }

/* Une carte à côté d'un texte plus long garde sa hauteur au lieu de s'étirer. */
.grid > .card--top { align-self: start; }

/* Titre d'une page d'atterrissage : une phrase entière, écrite pour la recherche,
   donc un cran plus petit que le titre court de l'accueil. */
.hero h1.h1--long { font-size: var(--t-3xl); }

/* Un sur-titre porté par le titre principal (2026-10-05) : le même dessin qu'un paragraphe .eyebrow suivi d'un h1,
   mais un seul titre pour qui lit le code de la page. Le sur-titre reprend sa police, sa graisse et son interligne,
   que le h1 lui aurait prêtés. */
.hero-title__kicker {
    display: flex;
    width: fit-content;
    font-family: var(--font-ui);
    font-variation-settings: normal;
    line-height: 1.5;
}
.hero-title__main { display: block; }

/* Le premier écran de /livre-d-or sur un téléphone (2026-10-04) : c'est là qu'arrive la campagne Google, et ses sept
   premiers clics sur sept venaient d'un téléphone. Le prix d'abord et les boutons ensuite pour qui lit sur un grand
   écran ; sur un téléphone, les boutons d'abord : à 375 px le premier était à 652 px du haut et le second à 715, au ras
   ou sous le bas de l'écran une fois la barre du navigateur comptée. Le prix reste écrit sur le bouton d'achat, et le
   bloc du prix suit juste dessous. */
.hero-buy { display: flex; flex-direction: column; }
.hero-buy__actions { margin-top: 1.2rem; }
.hero-buy__example { margin-top: .9rem; font-weight: 600; }
@media (max-width: 40rem) {
    .hero:has(.hero-buy) { padding-top: 1.4rem; }
    .hero:has(.hero-buy) .lead { margin-bottom: 1.2rem; }
    .hero-buy { flex-direction: column-reverse; }
    .hero-buy__actions { margin-top: 0; }
    .hero-buy__price { margin-top: 1.5rem; }
    .hero-buy .cluster > .button { flex: 1 1 100%; }
    /* La photo d'ambiance, quand l'exemple la suit : un écran de moins avant la vidéo. */
    .hero-buy__aside { display: none; }
    .hero:has(.hero-buy__aside) { padding-bottom: 1.5rem; }
}

/* /livre-d-or, « Le téléphone à louer, ou un QR code ? » (2026-10-05) : trois lignes, deux colonnes à comparer. Il tient
   sur un téléphone sans défiler — c'est là que la campagne arrive — : largeurs fixes, la colonne des libellés étroite,
   la nôtre teintée comme l'offre mise en avant d'un comparatif. */
.table-scroll table.phone-compare { min-width: 0; table-layout: fixed; width: 100%; }
.phone-compare th, .phone-compare td { padding: .55rem .45rem; vertical-align: top; }
.phone-compare thead td, .phone-compare tbody th[scope="row"] { width: 24%; }
.phone-compare th[scope="col"] { color: var(--ink); vertical-align: bottom; }
.phone-compare tbody th[scope="row"] { font-weight: 500; }
.phone-compare tbody tr:last-child > * { border-bottom: 0; }
.phone-compare .is-featured { background: color-mix(in srgb, var(--amber) 9%, var(--surface)); color: var(--ink); }
.phone-compare td.is-featured { font-weight: 600; }
@media (min-width: 40rem) {
    .phone-compare th, .phone-compare td { padding: .8rem 1rem; }
    .phone-compare th[scope="col"] { font-family: var(--font-display); font-size: var(--t-md); }
}

/* ---------- Héros de l'accueil : ce que les invités laissent (D-165) ---------- */
/* Un tirage incliné dépassait de 2 px à droite entre 62rem et la largeur d'un téléphone (mesuré le 2026-09-25 à 900 et
   961 px, en ligne comme en local) : une barre de défilement horizontale pour un coin de photo. Coupé, pas caché — clip
   ne fait pas du héros une boîte qui défile. */
.hero { overflow-x: clip; }
/* Deux phrases, deux lignes : ce qu'ils laissent, puis ce qu'on reçoit. La seconde est un cran plus petite, pour que le
   titre tienne en quatre lignes sur un téléphone au lieu de six. */
.hero__then { display: block; margin-top: .15em; font-size: .72em; line-height: 1.1; }

/* Les usages, un par offre en vente (D-190) : ce qu'on fait, l'offre qui le fait, son prix. Une ligne chacun, de même
   poids, qui mène à sa carte. Ils remplacent les quatre façons de participer de D-165. */
.hero-uses {
    list-style: none;
    padding: 0;
    margin: -.6rem 0 1.6rem;
    display: grid;
    gap: .5rem;
}
.hero-use {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .65rem .9rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .18s, box-shadow .2s, transform .2s cubic-bezier(.2, .8, .2, 1);
}
.hero-use:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.hero-use:focus-visible { outline: 2px solid var(--focus-line); outline-offset: 2px; box-shadow: var(--focus); }
.hero-use svg { width: 1.6rem; height: 1.6rem; color: var(--ember); }
.hero-use__text { display: grid; gap: .1rem; min-width: 0; }
.hero-use__what { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.hero-use__offer { font-size: var(--t-xs); color: var(--muted-ink); line-height: 1.3; }
.hero-use__price {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hero-use__price small { margin-right: .2rem; font-family: var(--font-ui); font-size: var(--t-xs); font-weight: 500; color: var(--muted-ink); }
@media (prefers-reduced-motion: reduce) {
    .hero-use:hover { transform: none; }
}
/* Au téléphone, les deux boutons du héros tiennent sur une ligne au lieu de deux : un cran plus petits, 44 px de haut. */
@media (max-width: 30rem) {
    .hero-uses ~ .cluster .btn--lg { padding: .75rem 1.05rem; font-size: var(--t-sm); }
}

/* Les trois étapes au pied du héros (D-185) : une ligne sous un filet sur un grand écran, empilées au téléphone, les
   numéros de .steps gardés. Plus petites que le texte du héros : elles résument, elles ne remplacent pas « Comment ça
   marche ». */
.hero-steps {
    margin: clamp(2rem, 1.2rem + 3vw, 3.5rem) 0 0;
    padding-top: clamp(1.4rem, 1rem + 1.5vw, 2rem);
    border-top: 1px solid var(--line);
    gap: 1rem 1.6rem;
}
@media (min-width: 48rem) { .hero-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-steps li { padding-left: 3rem; }
.hero-steps li::before { width: 2.1rem; height: 2.1rem; font-size: .95rem; }
.hero-steps .hero-steps__title { margin: 0 0 .15rem; font-weight: 650; color: var(--ink); }
.hero-steps li p:not(.hero-steps__title) { font-size: var(--t-sm); line-height: 1.45; }

/* Une illustration qui ne dit rien de plus que le texte à côté d'elle : au téléphone, elle ajoutait un écran sous lui. */
@media (max-width: 47.99rem) { .art--wide { display: none; } }

/* Les signes posés sur deux tirages : le bouton d'une vidéo, la voix qui accompagne une photo. Rien ne se lance. */
.print-play {
    position: absolute;
    top: calc(.5rem + 37.5% - 1.5rem);
    left: calc(50% - 1.5rem);
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(20, 16, 26, .55);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
}
.print-play svg { width: 1.5rem; height: 1.5rem; margin-left: .15rem; }
.print-voice {
    position: absolute;
    left: 1rem;
    bottom: 2.2rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem .35rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #1d1826; /* un tirage reste clair en mode sombre : son étiquette aussi */
    font-size: .8rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-2);
}
.print-voice svg { width: 1rem; height: 1rem; color: var(--ember); }
.print-voice__wave { display: inline-flex; align-items: center; gap: 2px; height: 1rem; }
.print-voice__wave i { display: block; width: 3px; border-radius: 2px; background: var(--ember); }
.print-voice__wave i:nth-child(1) { height: 35%; }
.print-voice__wave i:nth-child(2) { height: 70%; }
.print-voice__wave i:nth-child(3) { height: 100%; }
.print-voice__wave i:nth-child(4) { height: 55%; }
.print-voice__wave i:nth-child(5) { height: 85%; }
.print-voice__wave i:nth-child(6) { height: 45%; }
.print-voice__wave i:nth-child(7) { height: 25%; }
@media (max-width: 26rem) {
    .print-play { width: 2.4rem; height: 2.4rem; top: calc(.5rem + 37.5% - 1.2rem); left: calc(50% - 1.2rem); }
    .print-voice { left: .7rem; bottom: 2rem; font-size: .72rem; padding: .25rem .55rem .25rem .4rem; }
}

/* Une figure en carte (les répliques de l'appareil) garde l'alignement des cartes. */
figure.card { margin-inline: 0; }

/* Liste de lignes courtes : un libellé à gauche, un signe ou une valeur à droite (liens nommés d'un festival). */
.moves { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.moves li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: .3rem 1rem;
    padding: .7rem .9rem;
    border-radius: var(--r);
    background: var(--surface-2);
    font-size: var(--t-sm);
}
.moves strong { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; }

/* ---------- 6. Comparatif ---------- */
/* Cinq colonnes : le tableau défile sur un téléphone et la première colonne
   reste visible pendant le défilement. Oui et non sont dits en toutes lettres
   aux lecteurs d'écran ; la coche n'est qu'un signe. */
.table-scroll table.compare { min-width: 40rem; }
.compare th[scope="col"] { font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); vertical-align: bottom; }
.compare td, .compare th[scope="col"] + th[scope="col"] { text-align: center; }
.compare tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
    font-weight: 500;
    min-width: 11rem;
}
@media (max-width: 34rem) {
    .compare tbody th[scope="row"] { min-width: 8.5rem; }
}
.compare .compare__group th {
    position: static;
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--t-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: left;
}
.compare .is-featured { background: color-mix(in srgb, var(--amber) 9%, var(--surface)); }
.mark { display: inline-block; min-width: 1.2rem; font-weight: 700; }
.mark--yes::before { content: "✓"; color: var(--jade); }
.mark--no::before { content: "—"; color: var(--muted-ink); font-weight: 400; }

/* ---------- 7. Chiffres ---------- */
/* Les volumes d'une offre, lus dans le catalogue. Des limites, pas des compteurs :
   aucun chiffre ici ne parle de ventes, de clients ni d'avis. */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin: 1.5rem 0; padding: 0; list-style: none; }
.stat { margin: 0; padding: 1.1rem 1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.stat strong { display: block; font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.15; color: var(--ink); }
.stat span { color: var(--muted-ink); font-size: var(--t-sm); }

/* ---------- 8. Pages d'atterrissage ---------- */
/* Les trois promesses de l'appareil : des titres de carte, pas des titres de page. */
.promise__title { font-size: var(--t-xl); margin: 0 0 .5rem; }

/* Ce que la rareté fait dire : des bulles de conversation, alternées. */
.bubbles { display: grid; gap: .8rem; align-content: center; }
.bubbles .eyebrow { margin-bottom: .2rem; }
.bubble {
    justify-self: start;
    max-width: 85%;
    margin: 0;
    padding: .75rem 1.05rem;
    border-radius: var(--r-lg) var(--r-lg) var(--r-lg) .3rem;
    background: var(--surface);
    box-shadow: var(--shadow-1);
    font-family: var(--font-display);
    font-size: var(--t-lg);
    line-height: 1.35;
}
.bubble--reply {
    justify-self: end;
    border-radius: var(--r-lg) var(--r-lg) .3rem var(--r-lg);
    background: var(--mirror-soft);
}

/* Le héros d'une page racontée par ses messages (AudienceVariant.HeroVoices) : une colonne dans l'ordre d'un téléphone
   — le titre, ce qu'on y laisse, puis les boutons —, deux sur un grand écran, les messages à droite du texte. */
.hero-told .lead { margin-bottom: 1.2rem; }
@media (min-width: 62rem) {
    .hero-told {
        display: grid;
        grid-template-columns: 1.05fr .95fr;
        column-gap: clamp(1.5rem, 1rem + 3vw, 4rem);
        align-items: start;
    }
    .hero-told > * { grid-column: 1; }
    .hero-told > .hero-voices { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
    .hero-told .lead { margin-bottom: 1.8rem; }
    .hero-told .hero-voice__said { font-size: var(--t-lg); }
}

/* Les messages dessinés : qui parle, sous une onde, puis ce qu'il dit. Un cran plus petits que les bulles d'une
   section ; au téléphone, deux suffisent pour que le bouton d'achat reste sur le premier écran. */
.hero-voices { margin: 0 0 1.5rem; gap: .6rem; }
.hero-voice { max-width: 92%; padding: .6rem .95rem; }
.hero-voice p { margin: 0; }
.hero-voice__who {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-ui);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--muted-ink);
}
.hero-voice__who svg { width: 3.2rem; height: .8rem; flex: none; fill: var(--ember); }
.hero-voice__said { margin-top: .2rem; font-size: var(--t-md); line-height: 1.35; }
@media (max-width: 61.99rem) {
    .hero-voice:nth-of-type(n + 3) { display: none; }
}

/* Les fêtes : des cartes en liste, sans puces. */
.occasions { list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.occasions > .card { margin-block: 0; }
.occasions h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.occasions p { font-size: var(--t-sm); color: var(--ink-2); }

/* Petit QR code dessiné à côté du nom d'un lien de dépôt. */
.qr-mini { width: 1.35rem; height: 1.35rem; flex: none; color: var(--ink-2); }

/* Ce qu'un accord ou une offre ne couvre pas : un trait ambré, pas une erreur. */
.card--note { border-left: 4px solid var(--amber); }

/* Adresse de contact des partenaires : elle peut être longue sur un téléphone. */
.mailto { font-weight: 600; overflow-wrap: anywhere; }

/* Les volumes d'une offre dans une carte : deux colonnes, même sur un téléphone. */
.stats--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 0; }
.stats--compact .stat { padding: .8rem .6rem; }
.stats--compact .stat strong { font-size: var(--t-xl); }

/* ---------- 9. Paliers ---------- */
/* Les paliers d'une offre dans sa carte : le palier à gauche, le prix à droite. */
.offer__tiers { list-style: none; padding: 0; margin: .6rem 0 .2rem; display: grid; gap: .25rem; }
.offer__tiers li { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); padding: .3rem 0; border-bottom: 1px dashed var(--line); }
.offer__tiers li:last-child { border-bottom: 0; }
.offer__tiers strong { font-weight: 650; color: var(--ink); }

/* Le tableau des paliers : il tient sur un téléphone sans défiler, les textes passent à la ligne. */
.table-scroll table.tiers__table { min-width: 0; }
.tiers__table th, .tiers__table td { vertical-align: middle; }
.tiers__table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.tiers__price { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; color: var(--ink); white-space: nowrap; }
.tiers__choose { text-align: right; }
.tiers__choose .button { white-space: nowrap; }
.tiers__rules { margin-top: 1.4rem; }
/* ---------- 10. Photos d'exemple ---------- */
/* Un tirage : un bord clair, le prénom de l'invité dessous, comme sur une pellicule révélée. */
.print {
    margin: 0;
    padding: .55rem .55rem 0;
    border-radius: var(--r);
    background: var(--surface);
    box-shadow: var(--shadow-2);
}
.print img { display: block; width: 100%; height: auto; border-radius: 6px; background: var(--surface-2); }
.print figcaption {
    padding: .45rem .15rem .6rem;
    font-family: var(--font-display);
    font-size: var(--t-md);
    font-style: italic;
    color: var(--ink-2);
}
.print:not(:has(figcaption)) { padding-bottom: .55rem; }
.print--hero { transform: rotate(-1.5deg); box-shadow: var(--shadow-3); max-width: 36rem; margin-inline: auto; }

/* La galerie : une grille de tirages légèrement de travers, alignés sur un téléphone. */
.prints { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
@media (min-width: 34rem) {
    .prints li:nth-child(3n + 1) .print { transform: rotate(-1.2deg); }
    .prints li:nth-child(3n + 2) .print { transform: rotate(.9deg); }
}
@media (prefers-reduced-motion: reduce) {
    .prints .print, .print--hero { transform: none; }
}

/* ---------- 11. Pages par public (D-091) ---------- */
/* Les six publics sur l'accueil : une carte cliquable entière, la photo d'en-tête de sa page au-dessus. */
.audiences { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); }
@media (min-width: 34rem) { .audiences { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .audiences { grid-template-columns: repeat(3, 1fr); } }
.audiences > .card { margin-block: 0; }
.audience-card { position: relative; display: flex; flex-direction: column; }
.audience-card__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: .9rem; background: var(--surface-2); }
.audience-card__title { font-size: var(--t-lg); margin: 0 0 .35rem; }
.audience-card__title a { color: var(--ink); text-decoration: none; }
/* Le lien du titre couvre la carte : un seul arrêt au clavier, toute la carte au doigt. */
.audience-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.audience-card:hover .audience-card__title a { color: var(--ember-text); }
.audience-card__title a:focus-visible { outline: none; }
.audience-card:has(a:focus-visible) { outline: 2px solid var(--focus-line); outline-offset: 3px; box-shadow: var(--focus); }
.audience-card p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 0; }
/* Sur un téléphone, six grandes photos l'une sous l'autre feraient défiler longtemps : la photo passe à gauche, en vignette.
   Et les six cartes deviennent une liste à filets (D-190) : leur cadre, leur marge et leur ombre pesaient à elles seules
   un tiers d'écran pour six lignes qu'on parcourt du pouce. Toute la ligne reste la cible du lien. */
@media (max-width: 33.99rem) {
    .audiences { gap: 0; margin-top: 1.4rem; border-top: 1px solid var(--line); }
    .audiences > .audience-card { padding: .75rem .25rem; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-sm); background: transparent; box-shadow: none; }
    .audience-card:has(.audience-card__photo) { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: .9rem; align-items: center; }
    .audience-card__photo { grid-row: 1 / span 2; aspect-ratio: 1; height: auto; margin-bottom: 0; border-radius: var(--r-sm); }
    .audience-card__title { align-self: end; margin-bottom: .15rem; font-size: var(--t-md); }
    .audience-card p { align-self: start; font-size: var(--t-xs); line-height: 1.45; }
}

/* « Pour qui ? » sous une offre, et les autres publics en bas d'une page par public. */
.audience-links { font-size: var(--t-sm); color: var(--ink-2); margin: .2rem 0 .8rem; }
.audience-links__label { font-weight: 650; color: var(--ink); margin-right: .25rem; }
.center .audience-links, .audience-links.center { text-align: center; }

/* La galerie d'une page par public : quelques tirages qui occupent la largeur, sans trou, recadrés au même format. */
.prints--fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.prints--fit .print img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Les cartes d'arguments : trois par ligne pour 3 ou 6, deux puis quatre pour 4, jamais une carte seule au bout. */
.audience-cards--3, .audience-cards--6 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
@media (min-width: 62rem) { .audience-cards--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 34rem) { .audience-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .audience-cards--4 { grid-template-columns: repeat(4, 1fr); } }
/* Deux offres conseillées à la suite (entreprise, associations) : un espace, et le titre de la seconde. */
.audience-offers { margin-top: 2rem; }
.event-offers + .audience-offers, .audience-offers + .event-offers { margin-top: 3.5rem; }
.audience-offers__title { font-size: var(--t-2xl); margin-bottom: 1.2rem; }
.prints--few { max-width: 52rem; margin-inline: auto; }

/* Une seule offre conseillée en carte : la largeur d'une colonne de lecture. */
.audience-offer--single { max-width: 34rem; margin-inline: auto; }
/* Les boutons des paliers au pied d'un guide (D-186) : la largeur de deux boutons, pas celle de la colonne. */
.guide-tiers { max-width: 34rem; margin-inline: auto; }

/* Les paliers conseillés à ce public : un fond ambré et un mot, pas seulement la couleur. */
.audience-tiers { max-width: 46rem; margin: 2.8rem auto 0; }
.tiers__table tr.is-recommended > * { background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.tiers__tag { display: block; width: fit-content; margin-top: .2rem; padding: .05rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; }

/* Événement et Grand événement : leurs deux paliers, puis ce que toute organisation y trouve. */
.event-offers { margin-top: 2.8rem; }
.event-offers__title { font-size: var(--t-2xl); }
.event-offers__included { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.event-offers__included > .card { margin-block: 0; }
.event-offers__included p { font-size: var(--t-sm); }
.event-offers__what { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 650; color: var(--ink); margin-bottom: .35rem; }

/* ---------- 12. Aiguillage des offres (D-096) ---------- */
/* /tarifs ne compare plus : trois destinations, aucun prix. Même carte cliquable entière que les publics. */
.routes { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); }
@media (min-width: 48rem) { .routes { grid-template-columns: repeat(3, 1fr); } }
.routes > .card { margin-block: 0; }
.route { position: relative; display: flex; flex-direction: column; }
.route__title { font-size: var(--t-lg); margin: 0 0 .5rem; }
.route__title a { color: var(--ink); text-decoration: none; }
.route__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.route:hover .route__title a { color: var(--ember-text); }
.route__title a:focus-visible { outline: none; }
.route:has(a:focus-visible) { outline: 2px solid var(--focus-line); outline-offset: 3px; box-shadow: var(--focus); }
.route__body { margin-bottom: .6rem; }
.route__examples { font-size: var(--t-sm); margin-bottom: 0; margin-top: auto; }
/* Le champ de la page /offert (D-105), centré sous la phrase qui l'appelle. */
.promo-entry__form--center { max-width: 26rem; margin: 1.4rem auto 0; }
.promo-entry__row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.promo-entry__row input { flex: 1 1 12rem; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
/* L'adresse qui ouvre un livre d'or offert (D-233), sous la valeur : le formulaire se lit de gauche à droite, et sur un
   téléphone le bouton passe sous le champ, sur toute la largeur. */
.promo-address { max-width: 30rem; margin: 1.4rem auto 0; }
form.promo-address { text-align: left; }
.promo-address__row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .4rem; }
.promo-address__row input { flex: 1 1 14rem; min-width: 0; width: auto; }
.promo-address__row .button { flex: 1 1 auto; }
.route__photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: .9rem; background: var(--surface-2); }
/* Un ordre de grandeur, pas un comparatif : la page indique le prix de la destination, jamais le nom de l'offre. */
.route__price { font-weight: 600; color: var(--ember-text); margin: 0 0 .6rem; }
@media (min-width: 48rem) {
    .routes { align-items: stretch; padding-block: 1.2rem; }
    .routes > .route--featured { margin-block: -1.2rem; padding-block: calc(var(--pad) + 1.2rem); }
}

/* ---------- Listes de liens des guides (sprint 31) ---------- */
/* Une liste qui ne porte que des liens n'est pas du texte courant : au doigt, ses lignes faisaient 23 px. Même
   correction que le pied de page — le lien prend toute la ligne, et la ligne fait 44 px. À la souris, rien ne bouge. */
@media (pointer: coarse) {
    .link-list { gap: 0; }
    .link-list li > a { display: flex; align-items: center; min-height: 44px; }
}

/* ---------- 13. Vitrine : les offres rangées par ce qu'on garde (D-153, docs/09 § 37) ---------- */
/* Trois cartes — Leurs photos · Leurs mots · Tout, en film —, deux quand le livre d'or est éteint. Le Film, qui comprend
   les deux autres, ferme la rangée : un peu plus haut, avec le trait de marque et l'unique bouton plein. Sur un
   téléphone, les cartes s'empilent dans le même ordre, de la plus petite à la plus complète. */
.showcase { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); margin-top: 2rem; }
.showcase > .card { margin-block: 0; }
@media (min-width: 48rem) {
    .showcase--2 { grid-template-columns: 1fr 1.08fr; max-width: 52rem; margin-inline: auto; }
}
@media (min-width: 62rem) {
    .showcase--3 { grid-template-columns: 1fr 1fr 1.08fr; }
    .showcase { align-items: stretch; padding-block: 1.2rem; }
    .showcase > .offer--featured { margin-block: -1.2rem; padding-block: calc(var(--pad) + 1.2rem); }
}
/* Ce qu'on garde, au-dessus du nom : c'est ce qui range les cartes, pas le nom de l'offre. */
.showcase-card__keep { margin-bottom: .35rem; }
/* Le nom puis le prix. Au téléphone (et sur la tablette, où les cartes sont pleine largeur), sur une même ligne : le nom à
   gauche, le prix à droite et « TTC, par événement » dessous — une ligne de moins par carte (D-190). */
.showcase-card__head .price { margin: 0 0 .2rem; }
@media (max-width: 61.99rem) {
    .showcase-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem; }
    .showcase-card__head .offer__name { margin: 0; }
    .showcase-card__head .price { display: block; margin: 0; font-size: var(--t-2xl); text-align: right; }
    .showcase-card__head .price__from { margin-right: .25rem; }
    .showcase-card__head .price__unit { display: block; margin-top: .2rem; font-size: var(--t-xs); }
}
/* « Le plus complet » : un constat en toutes lettres, jamais une couleur seule ni « le plus choisi ». */
.showcase-card__badge {
    width: fit-content;
    margin: -.1rem 0 .7rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    background: var(--mirror-soft);
    color: var(--ember-text);
    font-size: var(--t-xs);
    font-weight: 650;
}
.showcase-card__unit { color: var(--ink-2); font-size: var(--t-sm); font-weight: 600; margin: .5rem 0 0; }
/* La ligne « sans… » d'une petite carte : ce qu'elle ne garde pas, dit sans appel à monter. */
.showcase-card__without { color: var(--muted-ink); font-size: var(--t-sm); margin: 0 0 .8rem; }

/* Les deux bandes sous les cartes : l'Édition, puis le cadeau (le cadeau d'abord de mi-novembre à fin décembre). */
.showcase-bands { display: grid; gap: 1rem; margin-top: 2.4rem; }
.showcase-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .9rem 1.6rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--amber);
    border-radius: var(--r-lg);
    background: var(--surface);
}
.showcase-band > div { flex: 1 1 22rem; min-width: 0; }
.showcase-band p { color: var(--ink-2); font-size: var(--t-sm); }
.showcase-band__title { font-size: var(--t-lg); margin: 0 0 .3rem; }
.showcase-band--gift { border-left-color: var(--ember); }
.showcase-band .button { flex: none; }

/* « Conseillé pour un mariage » : la seule recommandation d'une page, écrite, sur la carte qu'elle désigne. */
.showcase-recommended {
    width: fit-content;
    margin: 0 0 .6rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--amber) 16%, var(--surface));
    color: var(--ink);
    font-size: var(--t-xs);
    font-weight: 650;
}

/* /tarifs : le tableau des trois offres. Il tient sur un téléphone sans défiler : la colonne des libellés passe à la
   ligne, les colonnes des offres ne portent que des coches, et le bouton de chaque colonne dit « Choisir » (son nom
   complet est dans son aria-label). Au-delà de 48rem, il respire. */
.table-scroll table.showcase-compare { min-width: 0; table-layout: fixed; width: 100%; }
.showcase-compare th[scope="col"]:first-child, .showcase-compare tbody th[scope="row"] { width: 38%; min-width: 0; }
.showcase-compare th, .showcase-compare td { padding: .55rem .35rem; }
.showcase-compare th[scope="col"] { font-family: var(--font-ui); vertical-align: bottom; }
.showcase-compare__keep { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ember-text); text-transform: uppercase; letter-spacing: .06em; }
.showcase-compare__name { display: block; font-family: var(--font-display); font-size: var(--t-md); color: var(--ink); overflow-wrap: anywhere; }
.showcase-compare__badge { display: block; font-size: var(--t-xs); font-weight: 500; color: var(--ink-2); }
.showcase-compare__price { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 700; color: var(--ink); }
.showcase-compare__actions .button { min-height: 44px; }
.showcase-compare tbody th[scope="row"] { font-size: var(--t-sm); }
@media (max-width: 33.99rem) {
    .showcase-compare__name { font-size: var(--t-sm); }
    .showcase-compare__price { font-size: var(--t-md); }
    .showcase-compare td { font-size: var(--t-xs); }
    .showcase-compare__actions .button { padding-inline: .5rem; }
}
@media (min-width: 48rem) {
    .showcase-compare th, .showcase-compare td { padding: .7rem .8rem; }
    .showcase-compare th[scope="col"]:first-child, .showcase-compare tbody th[scope="row"] { width: 34%; }
}

/* /tarifs au téléphone (D-190) : une carte par offre à la place du tableau, qui y faisait quatre colonnes, des colonnes
   d'offre de 67 px et un en-tête de 168 px. Sous 48rem les cartes, au-delà le tableau : jamais les deux, et l'autre est
   en display: none — absent aussi pour un lecteur d'écran, qui ne lit donc pas deux fois la même chose. */
.hero--compact { padding-block: clamp(2rem, 1.2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.compare-section { padding-top: clamp(.5rem, .2rem + 1.5vw, 1.5rem); }
.compare-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.compare-cards > .card { margin-block: 0; }
@media (min-width: 48rem) { .compare-cards { display: none; } }
@media (max-width: 47.99rem) { .showcase-compare-wrap { display: none; } }
/* Les paliers en forme courte (les invités sur le prix) servaient une colonne de 53 px au téléphone. Le tableau n'y est
   plus : sur un grand écran, une ligne, « 100 · 19 € ». Le nom complet reste dans l'aria-label de chaque bouton. */
@media (min-width: 62rem) {
    .showcase-compare .button.tier-buttons__short { flex-direction: row; gap: .35rem; }
    .showcase-compare .tier-buttons__short span + span::before { content: "·"; margin-right: .35rem; }
}

.compare-card { display: flex; flex-direction: column; }
.compare-card--featured { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
.compare-card__keep { margin-bottom: .3rem; }
.compare-card .showcase-card__head { margin-bottom: .45rem; }
.compare-card .showcase-card__badge { margin: 0 0 .5rem; }
.compare-card__for { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.compare-card__label { font-weight: 500; color: var(--muted-ink); margin-right: .2rem; }
.compare-card__has { margin: .8rem 0 .6rem; }
.compare-card .showcase-card__without { margin: 0 0 .9rem; }
.compare-card__actions { display: grid; gap: .6rem; margin-top: .3rem; }
/* Le détail : la colonne du tableau, repliée sous les boutons. */
.compare-card .compare-card__detail { margin: .9rem 0 -.4rem; border-top: 1px solid var(--line); border-bottom: 0; padding: 0; }
.compare-card .compare-card__detail summary { font-size: var(--t-sm); min-height: 44px; padding-block: .6rem; }
.compare-card__detail p.compare-card__group {
    margin: .4rem 0 .35rem;
    padding: 0;
    font-size: var(--t-xs);
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.compare-card__rows { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .35rem; }
.compare-card__rows li { display: flex; gap: .5rem; align-items: baseline; font-size: var(--t-sm); color: var(--ink); }
.compare-card__rows li.is-no { color: var(--muted-ink); }
.compare-card__rows .mark { flex: none; text-align: center; }
/* « Essayer l'appareil sur votre téléphone » passait sur deux lignes à 360 et 375 px : un cran plus petit, une ligne. */
@media (max-width: 26rem) {
    .cluster--fit .btn--lg { padding-inline: 1rem; font-size: var(--t-sm); }
}

/* /livre-d-or : les trois portes, de même poids — un choix, pas une recommandation. */
.showcase-doors { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.8rem); }
@media (min-width: 48rem) {
    .showcase-doors--2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; margin-inline: auto; }
    .showcase-doors--3 { grid-template-columns: repeat(3, 1fr); }
}
.showcase-doors > .card { margin-block: 0; display: flex; flex-direction: column; }
.showcase-door h3 { font-size: var(--t-lg); }
.showcase-door p { color: var(--ink-2); font-size: var(--t-sm); }
.showcase-door .button { margin-top: auto; }