/* Voice Memories — ajouts à la feuille de style d'origine (styles.css, laissée telle quelle).
   Tout ce qui suit reprend les couleurs, les arrondis et les polices de styles.css :
   rose #bd6e6e, bleu nuit #022641 (texte), crème #f9f7f2, Lora pour les titres, Lato pour le texte.
   Sommaire : 1. base  2. en-tête  3. haut de page  4. forfaits  5. galerie  6. écoute et remastérisation
              7. bandeau final  8. réservation  9. pages événement  10. pages d'état  11. divers  12. alignements
              13. pied de page  14. charte (tailles des titres, espaces)  15. couleur du texte
              16. téléphone et tablette */

/* ---------- 1. Base ---------- */
@font-face { font-family: "Lora"; src: url("../fonts/lora.woff") format("woff"); font-weight: 400 700; font-style: normal; font-display: swap; }

[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: #022641; color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #022641; outline-offset: 2px; }
button.btn { cursor: pointer; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* ---------- 2. En-tête ---------- */
/* Sélecteur de langue (repris de l'en-tête d'origine). */
.site-nav .lang-nav-item { display: inline-flex; align-items: center; }
.site-nav .lang-nav-switch { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid #e5d7cf; background: #fff; }
.site-nav .lang-nav-link { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; line-height: 1; }
.site-nav .lang-nav-link.active { background: #bd6e6e; color: #fff; }
.site-nav .lang-nav-switch a.lang-nav-link:hover { background: #f8eded; color: #8f5151; transform: none; }
@media (min-width: 768px) {
  .site-nav .lang-nav-item { margin-left: 1.75rem; margin-right: 0; }
  .site-nav .lang-nav-link { min-width: 32px; height: 26px; padding: 0 9px; font-size: .78rem; }
}
/* La bande des événements mène maintenant aux pages par événement.
   Elle reste centrée tant qu'elle tient sur la largeur, et défile seulement quand elle ne tient plus. */
.event-strip a { color: inherit; transition: color .2s ease; }
.event-strip a:hover, .event-strip a[aria-current="page"] { color: #bd6e6e; }
.event-strip { justify-content: flex-start; }
.event-strip li { flex: none; white-space: nowrap; }
.event-strip li:first-child { margin-left: auto; }
.event-strip li:last-child { margin-right: auto; }

/* Entre tablette et petit ordinateur : le logo garde sa taille et le bouton reste sur une ligne. */
.btn.btn-header { white-space: nowrap; }
@media (min-width: 768px) {
  .brand img { max-width: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .header-inner { gap: .7rem; padding-inline: .6rem; }
  .brand { min-width: 0; }
  .brand img { height: 36px; max-height: 36px; }
  .site-nav ul { gap: .6rem; }
  .site-nav a { font-size: 15px; padding: .22rem .08rem; }
  .site-nav .lang-nav-item { margin-left: .3rem; }
  .site-nav .lang-nav-switch { gap: 3px; padding: 2px; }
  .site-nav .lang-nav-link { min-width: 26px; height: 24px; padding: 0 6px; font-size: .72rem; }
  .btn.btn-header { min-height: 36px; padding: .5rem .85rem; font-size: .84rem; }
}
/* Sur tablette, le lien « Réserver » du menu laisse la place au bouton « Réserver ma date », juste à côté. */
@media (min-width: 768px) and (max-width: 899px) {
  .site-nav .nav-item-booking { display: none; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .site-nav ul { gap: 1rem; }
  .site-nav a { font-size: 16px; }
}

/* ---------- 3. Haut de page : vérifier sa date ---------- */
.date-check { display: grid; gap: .45rem; }
.date-check label { display: block; }
.date-check__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.date-check input[type="date"] { flex: 1 1 170px; width: auto; min-width: 0; min-height: 48px; padding: .55rem 1rem; border-radius: 999px; color: var(--text); }
.date-check .btn { flex: 0 0 auto; min-height: 48px; padding-inline: 1.3rem; white-space: nowrap; }
.date-check__result, .hero-copy .date-check__result { margin: .3rem 0 0; max-width: none; padding: .62rem .85rem; border-radius: 12px; background: #f7ede6; color: var(--text); font-size: .95rem; line-height: 1.4; }
.date-check__result a { margin-left: .2rem; color: #8f5151; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.date-check__result.is-full { background: #fdf0d8; }
/* Sur téléphone, le champ et le bouton prennent toute la largeur, partout où le formulaire apparaît. */
@media (max-width: 620px) {
  .date-check input[type="date"], .date-check .btn { flex: 1 1 100%; text-align: center; }
  .date-check--card { max-width: none; }
}

.date-check--hero { max-width: 470px; margin: 0 0 16px; padding: .85rem 1rem 1rem; border-radius: 22px; background: rgba(255, 255, 255, .95); color: var(--text); box-shadow: 0 14px 30px rgba(22, 18, 17, .2); }
.hero-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-extras .hero-reviews { margin: 0; }
a.hero-reviews:hover { background: rgba(255, 255, 255, .24); }
.hero-listen { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem .3rem .32rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; transition: background-color .2s ease; }
.hero-listen:hover, .hero-listen.is-playing { background: rgba(255, 255, 255, .26); }
.hero-listen-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #bd6e6e; }
.hero-listen-icon .icon { width: 15px; height: 15px; }
.hero-listen-pause, .hero-listen.is-playing .hero-listen-play { display: none; }
.hero-listen.is-playing .hero-listen-pause { display: block; }
.hero-brochure { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .95rem; border-radius: 999px; background: #fff; color: #bd6e6e; font-size: .9rem; font-weight: 700; line-height: 1; transition: opacity .2s ease; }
.hero-brochure:hover { opacity: .9; }
.hero-date-below { display: none; }
@media (min-width: 901px) {
  .hero-cover { min-height: 560px; }
  .hero-extras { width: max-content; max-width: calc(100vw - 6rem); }
}
@media (max-width: 900px) {
  .hero-cover { padding: 26px 0; }
  .hero-copy { max-width: 400px; }
  .date-check--hero { padding: .75rem .8rem .85rem; border-radius: 18px; }
}
@media (max-width: 900px) { .hero-copy p br { display: none; } }
/* Sur téléphone, la photo reste dégagée : le formulaire de date se place à cheval sous le haut de page. */
@media (max-width: 620px) {
  .hero-cover { padding: 26px 0 54px; }
  .hero-copy .date-check--hero { display: none; }
  .hero-date-below { display: block; position: relative; z-index: 3; margin-top: -36px; }
  .hero-date-below .date-check--hero { max-width: none; margin: 0; box-shadow: 0 12px 26px rgba(54, 31, 24, .16); background: #fff; }
  .hero-date-below + .tradition-section { padding-top: 2.6rem; }
  .hero-copy { max-width: 340px; }
  .hero-extras { gap: 8px; }
  .hero-listen, .hero-brochure { font-size: .82rem; }
  .hero-listen { padding-right: .7rem; }
  .hero-brochure { padding-inline: .8rem; }
}


/* ---------- 4. Forfaits ---------- */
/* Les deux cartes affichent les mêmes lignes, avec le même style ; seule la précision à droite change. */
.offer-card { min-width: 0; align-content: start; transition: box-shadow .25s ease, border-color .25s ease; }
.offer-card:hover, .offer-card:focus-within { border-color: #ddc3b7; box-shadow: 0 14px 28px rgba(75, 42, 33, .1); }
.offer-header { min-width: 0; }
.offer-price { font-size: 1.15rem; }
.offer-media { overflow: hidden; border-radius: var(--radius-sm); }
.offer-media picture { display: block; }
.offer-card .offer-media img, .offer-card-featured .offer-media img { object-position: 50% 58%; }

.offer-features { gap: 0; }
.offer-features li { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem .9rem; padding-block: .46rem; border-bottom: 1px solid #efe4dd; }
.offer-features li:last-child { border-bottom: 0; }
.offer-features li::before { top: .48rem; }
.offer-feature { min-width: 0; }
.offer-value { flex: none; font-size: .86rem; font-weight: 700; color: #022641; white-space: nowrap; }
.offer-features li.is-out { color: #9aa5b0; }
.offer-features li.is-out::before { content: "\2013"; color: #cbbdb6; }

.offer-delivery { margin: 0; padding: .7rem .9rem; display: grid; gap: .3rem; border: 1px solid #eadfd9; border-radius: 14px; background: #fff; }
.offer-delivery div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .94rem; line-height: 1.38; }
.offer-delivery dt { color: var(--text); }
.offer-delivery dd { margin: 0; font-weight: 700; color: #022641; white-space: nowrap; }
.offer-cta { text-align: center; }
@media (max-width: 520px) {
  .offer-delivery div { font-size: .9rem; }
  .offer-value { font-size: .82rem; }
}

/* ---------- 5. Galerie ---------- */
a.gallery-item { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); }
.gallery-item picture { display: block; }
.gallery-item img { transition: transform .5s ease; }
.gallery-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .7rem .6rem; background: linear-gradient(180deg, rgba(22, 18, 17, 0) 0%, rgba(22, 18, 17, .62) 100%); color: #fff; font-size: .84rem; font-weight: 700; line-height: 1.25; opacity: 0; transition: opacity .25s ease; }
a.gallery-item:hover img, a.gallery-item:focus-visible img { transform: scale(1.04); }
a.gallery-item:hover .gallery-caption, a.gallery-item:focus-visible .gallery-caption { opacity: 1; }

/* ---------- 6. Écoute et remastérisation ---------- */
.voice-time { white-space: nowrap; }
.remaster { margin-top: 1.1rem; padding: 1.2rem; display: grid; gap: 1.2rem; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: 0 10px 20px rgba(54, 31, 24, .06); }
.remaster__text h2, .remaster__text h3 { margin: 0 0 .55rem; font-size: clamp(24px, 2.6vw, 32px); }
.remaster__text p { margin: 0 0 .7rem; font-size: 1rem; line-height: 1.45; color: var(--text); }
.remaster__text .remaster__tag { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; font-weight: 700; color: #022641; }
.remaster__tag .icon { color: #bd6e6e; }
.ab-demo { display: grid; gap: .8rem; }
.ab-demo__item { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; column-gap: .8rem; row-gap: .1rem; padding: .75rem .9rem; border: 1px solid #eadfd9; border-radius: 16px; background: #fdfbf9; }
.ab-demo__label { margin: 0; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ab-demo__item--after .ab-demo__label { color: #bd6e6e; }
.ab-demo__note { grid-column: 2; margin: 0; font-size: .86rem; line-height: 1.35; color: var(--muted); }
@media (max-width: 620px) {
  .ab-demo__item { grid-template-columns: minmax(0, 1fr); }
  .ab-demo__note { grid-column: 1; }
}
@media (min-width: 900px) {
  .remaster { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 2.2rem; padding: 1.5rem 1.7rem; }
}

/* Lecteur à forme d'onde (remastérisation) : on voit le bruit de fond disparaître. */
.player { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.player__btn { flex: none; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d6b9ad; border-radius: 999px; background: #fff; color: #bd6e6e; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.player__btn:hover, .player.is-playing .player__btn { background: #bd6e6e; border-color: #bd6e6e; color: #fff; }
.player__btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(189, 110, 110, .28); }
.player__btn .icon { width: 17px; height: 17px; }
.player__pause, .player.is-playing .player__play { display: none; }
.player.is-playing .player__pause { display: block; }
.player__wave { flex: 1; min-width: 0; height: 40px; cursor: pointer; border-radius: 6px; }
.player__wave svg { display: block; width: 100%; height: 100%; }
.player__bars { fill: #dfc6be; }
.player__bars--done { fill: #bd6e6e; }
.player__time { flex: none; min-width: 2.4em; font-size: .82rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 7. Bandeau final « Votre date est-elle encore libre ? » ---------- */
/* Rappel discret en bas des pages longues (accueil, pages par événement, articles), dans les tons du site. */
.section.cta-band { padding: 0 0 var(--page-bottom); background: #f9f7f2; }
.offers-section + .cta-band, .how-it-works + .cta-band, .section-white + .cta-band { padding-top: var(--page-bottom); }
.cta-band__inner { padding: 1.4rem 1.3rem; display: grid; gap: 1.1rem; align-items: center; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-soft); color: var(--text); }
.cta-band__text h2 { margin: 0 0 .3rem; }
.cta-band__text p { margin: 0; color: var(--muted); }
.date-check--band label { color: var(--text); }
.date-check--band .date-check__result { background: #fff; }
.site-footer { margin-top: 0; }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: 2rem; padding: 1.7rem 2.2rem; }
}

/* Bouton fixe sur mobile, quand aucun formulaire de date n'est à l'écran. */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .25s ease; }
  .sticky-cta.is-visible { transform: none; }
  .sticky-cta .btn { display: block; padding: .95rem 1rem; text-align: center; }
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* ---------- 8. Réservation : le formulaire par étapes, dans l'habillage de la page d'origine ---------- */
/* Une seule grille pour toute la page : trois colonnes égales. Les trois encadrés en occupent une chacun,
   le formulaire deux et le récapitulatif une : tous les bords tombent au même endroit. */
.btn-large { min-height: 52px; padding: 1.05rem 1.7rem; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 0; }
.btn .icon { vertical-align: -.25em; margin-right: .4em; }
.form-errors { margin: 0 0 1rem; }
.form-errors li { font-size: .98rem; }
.reservation-page { padding-bottom: 3rem; }
.reservation-showcase h1, .contact-clean-head h1, .blog-article-head h1 { text-wrap: balance; }
.reservation-page .narrow { width: min(100% - 2rem, 1100px); }
.reservation-bubbles { gap: 1rem; margin-bottom: 1rem; }
.reservation-bubble { padding: 1rem 1.1rem; border-radius: 16px; }
.reservation-bubble-icon .icon { width: 26px; height: 26px; }
.hp { position: absolute; left: -6000px; width: 1px; height: 1px; overflow: hidden; }

.booking-layout { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 980px) {
  .booking-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-form { grid-column: span 2; }
}
.booking-form.reservation-panel { margin-top: 0; min-width: 0; padding: 1.35rem; }

/* Les étapes : cinq colonnes égales, reliées par un trait. */
.steps-nav { list-style: none; margin: 0 0 1.3rem; padding: 0 0 1.2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #eadfd9; }
.steps-nav li { position: relative; min-width: 0; font-size: inherit; }
.steps-nav li + li::before { content: ""; position: absolute; top: 16px; left: calc(-50% + 26px); right: calc(50% + 26px); height: 2px; margin-top: -1px; border-radius: 2px; background: #eadfd9; transition: background-color .25s ease; }
.steps-nav li:has(.is-done)::before, .steps-nav li:has([aria-current="step"])::before { background: #022641; }
.steps-nav button { width: 100%; display: grid; justify-items: center; align-content: start; gap: .5rem; padding: 0 .3rem; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: .82rem; font-weight: 700; line-height: 1.22; text-align: center; cursor: pointer; transition: color .2s ease; }
.steps-nav__n { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #e3d3ca; border-radius: 50%; background: #fff; color: var(--muted); font-size: .85rem; line-height: 1; transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.steps-nav__label { text-wrap: balance; }
.steps-nav button[aria-current="step"] { color: var(--text); }
.steps-nav button[aria-current="step"] .steps-nav__n { border-color: #bd6e6e; background: #bd6e6e; color: #fff; box-shadow: 0 0 0 4px rgba(189, 110, 110, .16); }
.steps-nav button.is-done { color: #022641; }
.steps-nav button.is-done .steps-nav__n { border-color: #022641; background: #022641; color: #fff; }
.steps-nav button[disabled] { cursor: default; }

/* Une étape. Sans JavaScript, elles s'empilent, chacune dans son encadré numéroté ;
   avec, une seule est visible à la fois et le panneau blanc lui sert de cadre. */
.step { min-width: 0; margin: 0 0 1rem; padding: 1.05rem; border: 1px solid #e9ddd6; border-radius: 16px; background: #fff; }
.step legend { float: left; width: 100%; margin: 0 0 1rem; padding: 0; display: flex; align-items: center; gap: .65rem; font-family: var(--font-heading); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.08; }
.step legend:focus { outline: none; }
.step legend + * { clear: both; }
.step__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #bd6e6e; color: #fff; font-family: var(--font-body); font-size: .95rem; font-weight: 700; }
.step__hint { margin: 0 0 1rem; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.js-steps .step { display: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.js-steps .step.is-current { display: block; }
.js-steps .step__n { display: none; }
.step > :last-child { margin-bottom: 0; }

.step-buttons { display: flex; align-items: center; gap: .7rem; margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid #eadfd9; }
.step-buttons .btn { min-height: 48px; padding: .95rem 1.6rem; line-height: 1.15; text-align: center; cursor: pointer; }
.step-buttons [data-next], .step-buttons [data-submit] { margin-left: auto; }
.booking-form__after { display: flex; align-items: flex-start; gap: .45rem; margin: .9rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.booking-form__after .icon { margin-top: .1rem; }

/* Champs : une seule mesure d'espacement (.7rem) entre colonnes comme entre lignes. */
.field { display: grid; align-content: start; gap: .35rem; min-width: 0; margin: 0 0 .9rem; }
.field label, .field__label { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; }
.field__label { margin: 1.3rem 0 .6rem; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text); }
.field__optional { font-weight: 400; color: var(--muted); }
.field input:not([type="checkbox"]):not([type="radio"]), .field select { width: 100%; min-height: 56px; }
.field textarea { width: 100%; min-height: 104px; resize: vertical; }
.field [aria-invalid="true"] { border-color: #c9665a; background: #fff8f6; }
.field__error { margin: .1rem 0 0; font-size: .88rem; font-weight: 700; color: #9a3f3f; }
.step > .field__error { margin-top: .8rem; }
.field__status { margin: 0; min-height: 1.5em; font-size: .95rem; font-weight: 700; line-height: 1.5; color: #022641; }
.field__status.is-bad { color: #9a3f3f; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; }
.field-row--3 { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.field-row--relay { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr) auto; align-items: end; }
.field-row--relay .field { margin-bottom: 0; }
.field-row--relay .btn { min-height: 56px; padding-inline: 1.5rem; cursor: pointer; }

/* Étape 1 : la date et le type d'événement sur une ligne, le calendrier sur toute la largeur en dessous. */
.step-date { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .7rem; }
.step-date .calendar, .step-date .field__status { grid-column: 1 / -1; }
.step-date .field__status { margin-top: .8rem; min-height: 0; }
.step-date .field__status:empty { display: none; }

.choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.choice { position: relative; display: flex; align-items: flex-start; gap: .8rem; min-width: 0; padding: .9rem 1rem; border: 1px solid #ddd2cb; border-radius: 12px; background: #fff; font-weight: 400; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.choice input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.choice:hover { border-color: #cdb3a8; }
.choice:has(input:checked) { border-color: #bd6e6e; box-shadow: 0 0 0 1px #bd6e6e; background: #fdf7f5; }
.choice:has(input:focus-visible) { outline: 2px solid #022641; outline-offset: 2px; }
.choice__body { display: grid; gap: .15rem; min-width: 0; }
.choice__title { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.choice__price { font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #bd6e6e; }
.choice__text { font-size: .88rem; line-height: 1.4; color: var(--text); }
.choice--media picture { flex: none; }
.choice--media img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; }

/* Quatre colonnes : deux téléphones sous chaque carte de forfait, bords alignés. */
.phone-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.phone-choice { position: relative; display: flex; flex-direction: column; min-width: 0; padding: .45rem .45rem .65rem; border: 1px solid #ddd2cb; border-radius: 12px; background: #fff; font-weight: 400; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
.phone-choice input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.phone-choice picture { display: block; }
.phone-choice img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }
.phone-choice__name { display: block; min-height: 2.6em; margin-top: .5rem; text-align: center; font-size: .84rem; line-height: 1.3; color: var(--text); text-wrap: balance; }
.phone-choice__tag { display: block; margin-top: .15rem; text-align: center; font-size: .76rem; line-height: 1.3; color: var(--muted); }
.phone-choice__taken { display: none; margin-top: .15rem; text-align: center; font-size: .76rem; font-weight: 700; line-height: 1.3; color: #9a3f3f; }
.phone-choice:hover { border-color: #cdb3a8; }
.phone-choice:has(input:checked) { border-color: #bd6e6e; box-shadow: 0 0 0 1px #bd6e6e; }
.phone-choice:has(input:checked)::after { content: "\2713"; position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #bd6e6e; color: #fff; font-size: .8rem; font-weight: 700; line-height: 1; }
.phone-choice:has(input:focus-visible) { outline: 2px solid #022641; outline-offset: 2px; }
.phone-choice.is-taken { cursor: not-allowed; }
.phone-choice.is-taken img { filter: grayscale(1); opacity: .45; }
.phone-choice.is-taken .phone-choice__tag { display: none; }
.phone-choice.is-taken .phone-choice__taken { display: block; }
.phone-choice.is-off { display: none; }

.calendar { padding: 1rem 1.1rem; border: 1px solid #eadfd9; border-radius: 12px; background: #fdfbf9; }
.calendar__months { display: grid; gap: 1.6rem; }
.calendar__head { display: grid; grid-template-columns: 38px minmax(0, 1fr) 38px; align-items: center; min-height: 38px; margin-bottom: .45rem; }
.calendar__title { margin: 0; text-align: center; font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.2; text-transform: capitalize; }
.calendar__nav { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: #bd6e6e; cursor: pointer; transition: background-color .2s ease; }
.calendar__nav:hover:not([disabled]) { background: #fdf2ec; }
.calendar__nav[disabled] { opacity: .35; cursor: default; }
.calendar__nav--prev .icon { transform: rotate(90deg); }
.calendar__nav--next .icon { transform: rotate(-90deg); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; justify-items: center; text-align: center; }
.calendar__dow { width: 100%; padding: 4px 0; font-size: .72rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.calendar__day { position: relative; width: 100%; max-width: 44px; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: .92rem; line-height: 1; cursor: pointer; transition: background-color .15s ease; }
.calendar__day:hover:not([disabled]) { background: #f3e1da; }
.calendar__day[disabled] { color: #aab3bd; cursor: default; }
.calendar__day.is-few::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #c98f12; }
.calendar__day.is-full { text-decoration: line-through; }
.calendar__day[aria-pressed="true"] { background: #bd6e6e; color: #fff; font-weight: 700; }
.calendar__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.2rem; margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid #efe4dd; font-size: .78rem; line-height: 1.4; color: var(--muted); }
.calendar__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.calendar__legend i { width: 8px; height: 8px; border-radius: 50%; background: #c98f12; }
.calendar__legend s { color: #9aa5b0; }
@media (min-width: 720px) {
  .calendar__months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.relay { margin-top: .7rem; padding: 1rem; border: 1px solid #e8dcd6; border-radius: 12px; background: #fdfaf7; }
.relay .field__label { margin-top: 0; }
.relay .field__status { margin-top: .7rem; }
.relay .field__status:empty { display: none; }
/* Résultats : la liste à gauche, la carte à droite ; sur téléphone, la carte au-dessus de la liste. */
.relay__results { display: grid; gap: .7rem; margin-top: .8rem; }
.relay__list { list-style: none; margin: 0; padding: 2px; display: grid; align-content: start; gap: .55rem; max-height: 380px; overflow-y: auto; }
.relay__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .6rem; padding: .68rem .8rem; border: 1px solid #ddd2cc; border-radius: 10px; background: #fff; font-weight: 400; cursor: pointer; }
.relay__item input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.relay__item:has(input:checked) { border-color: #bd6e6e; box-shadow: 0 0 0 1px rgba(189, 110, 110, .6); }
.relay__item:has(input:focus-visible) { outline: 2px solid #022641; outline-offset: 2px; }
.relay__num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #bd6e6e; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1; }
.relay__item:has(input:checked) .relay__num { background: #022641; }
.relay__name { font-size: .96rem; font-weight: 700; line-height: 1.3; }
.relay__net { font-size: .78rem; color: var(--muted); text-align: right; }
.relay__addr { grid-column: 2 / -1; font-size: .88rem; line-height: 1.4; color: var(--text); }
.relay__hours { grid-column: 2 / -1; font-size: .8rem; line-height: 1.4; color: var(--muted); }

.relay-map { position: relative; order: -1; height: 250px; overflow: hidden; border: 1px solid #ddd2cc; border-radius: 12px; background: #e9e5df; cursor: grab; user-select: none; }
.relay-map.is-dragging { cursor: grabbing; }
.relay-map__tiles, .relay-map__pins { position: absolute; inset: 0; }
.relay-map__tiles img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; border-radius: 0; pointer-events: none; }
.relay-map__pin { position: absolute; left: -14px; top: -37px; width: 28px; height: 28px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #bd6e6e; color: #fff; font-size: .74rem; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 3px 8px rgba(2, 38, 65, .28); }
.relay-map__pin::after { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit; border-right: 2px solid #fff; border-bottom: 2px solid #fff; rotate: 45deg; }
.relay-map__pin.is-selected { z-index: 2; background: #022641; }
.relay-map__pin:focus-visible { outline: 2px solid #022641; outline-offset: 2px; }
.relay-map__zoom { position: absolute; top: 10px; right: 10px; display: grid; overflow: hidden; border: 1px solid #ddd2cc; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(2, 38, 65, .12); }
.relay-map__zoom button { width: 34px; height: 34px; padding: 0; border: 0; background: #fff; color: #022641; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.relay-map__zoom button + button { border-top: 1px solid #eadfd9; }
.relay-map__zoom button:hover { background: #fdf2ec; }
.relay-map__credit { position: absolute; right: 0; bottom: 0; padding: 1px 6px; border-top-left-radius: 6px; background: rgba(255, 255, 255, .85); color: #3d4f61; font-size: .68rem; line-height: 1.5; }
@media (min-width: 720px) {
  .relay__results.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .relay-map { order: 0; height: 380px; }
}
.relay__finder { margin: .8rem 0 0; font-size: .9rem; line-height: 1.4; }
.relay__finder a { display: inline-flex; align-items: center; gap: .4rem; color: #8f5151; font-weight: 700; }
.relay__finder a span { text-decoration: underline; text-underline-offset: 2px; }
.relay__finder .icon { width: 1.1em; height: 1.1em; color: #bd6e6e; }
.relay__selected { display: flex; align-items: flex-start; gap: .45rem; margin: .7rem 0 0; font-size: .92rem; font-weight: 700; color: #022641; }

.check { display: flex; align-items: flex-start; gap: .55rem; margin-top: .2rem; font-size: .95rem; font-weight: 400; line-height: 1.45; cursor: pointer; }
.check input { flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; margin: .16rem 0 0; padding: 0; accent-color: #bd6e6e; }
.check a { color: #bd6e6e; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.summary { position: sticky; top: var(--sticky-top, 96px); padding: 1.35rem; border-radius: 18px; border-color: #e7d8cf; box-shadow: 0 8px 20px rgba(56, 34, 28, .04); }
.summary h2 { margin: 0 0 .8rem; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.08; }
.summary__rows { margin: 0; border-top: 1px solid #eadfd9; }
.summary__rows > div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-bottom: 1px solid #eadfd9; font-size: .92rem; line-height: 1.4; }
.summary__rows dt { color: var(--muted); }
.summary__rows dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.summary .reservation-total-box { margin-top: 1rem; }
.summary .reservation-total-value { font-size: clamp(26px, 2.6vw, 32px); white-space: nowrap; }
.summary__notes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.summary__notes li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); align-items: start; gap: .5rem; font-size: .84rem; line-height: 1.4; color: var(--text); }
.summary__notes .icon { margin-top: .05rem; color: #bd6e6e; }
.summary__notes a { color: #8f5151; text-decoration: underline; }
@media (max-width: 979px) { .summary { position: static; } }
/* Sur téléphone, le formulaire passe avant les trois encadrés d'information. */
@media (max-width: 719px) {
  .reservation-page .narrow { display: flex; flex-direction: column; }
  .reservation-bubbles { order: 5; margin: 1rem 0 0; }
  .phone-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .choice-row, .field-row, .field-row--3, .step-date { grid-template-columns: minmax(0, 1fr); }
  .field-row--relay { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .field-row--relay .btn { grid-column: 1 / -1; }
  .booking-form.reservation-panel, .summary { padding: 1rem; }
  .step { padding: .85rem; }
  .js-steps .step { padding: 0; }
  .steps-nav { margin-bottom: 1.1rem; padding-bottom: 1rem; }
  .steps-nav li + li::before { left: calc(-50% + 22px); right: calc(50% + 22px); }
  .steps-nav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .phone-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-buttons { flex-wrap: wrap; }
  .step-buttons .btn { padding-inline: 1.2rem; }
  .step-buttons [data-submit] { order: -1; flex: 1 1 100%; }
  .calendar { padding: .8rem .7rem; }
}

/* ---------- 9. Pages par événement et page locale ---------- */
.event-hero h1 { margin: 0 0 1rem; font-size: clamp(32px, 3.8vw, 52px); }
.event-hero .tradition-grid { align-items: center; }
.event-hero .tradition-media img { aspect-ratio: 4 / 3.6; object-fit: cover; object-position: 68% 50%; }
.crumbs { margin: 0 0 .8rem; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.crumbs a:hover { color: #bd6e6e; }
.crumbs span[aria-hidden] { margin: 0 .25rem; color: #c8b3ab; }
.date-check--card { max-width: 480px; margin: 1.2rem 0 .7rem; padding: .85rem 1rem 1rem; border: 1px solid var(--border); border-radius: 22px; background: #fff; box-shadow: 0 10px 20px rgba(54, 31, 24, .06); }
.event-note { margin: 0; font-size: .95rem; color: var(--muted); }
.ideas-grid { display: grid; gap: 1rem; }
.idea-card { padding: 1.3rem 1.25rem; border-radius: 20px; background: #f9f7f2; border-color: #e8d6cb; }
.idea-card h2, .idea-card h3 { margin: 0 0 .5rem; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.1; }
.idea-card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.tips { margin-top: 1.1rem; padding: 1.3rem 1.25rem; border: 1px solid var(--border); border-radius: 22px; background: #fff; }
.how-it-works .tips { background: #f9f7f2; }
.tips h2 { margin: 0 0 .8rem; font-size: clamp(24px, 2.6vw, 32px); }
.tips p { margin: 0; font-size: 1rem; color: var(--text); }
.tips .offer-list li { font-size: 1rem; }
@media (min-width: 768px) {
  .ideas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tips .offer-list { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* ---------- 10. Pages d'état : confirmation, paiement, page introuvable ---------- */
.status-page { background: #f9f7f2; padding-top: clamp(2.2rem, 4vw, 3.6rem); }
.status-page .narrow { width: min(100% - 2rem, 760px); }
.status-card { padding: clamp(1.2rem, 3vw, 2rem); border-radius: 22px; box-shadow: 0 10px 20px rgba(54, 31, 24, .06); }
.status-card h1 { margin: 0 0 .7rem; font-size: clamp(32px, 4vw, 52px); }
.status-lead { color: var(--text); }
.status-badge { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1rem; padding: .32rem .8rem .32rem .55rem; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.status-badge--ok { background: #f2fbf5; border: 1px solid #b9dfc8; color: #24563a; }
.reference { margin: 0 0 .8rem; color: var(--muted); }
.reference strong { color: #022641; font-variant-numeric: tabular-nums; }
.next-steps { list-style: none; counter-reset: n; margin: 1.3rem 0; padding: 0; display: grid; gap: .8rem; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: .7rem; align-items: start; font-size: 1rem; }
.next-steps li::before { content: counter(n); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #bd6e6e; color: #fff; font-size: .9rem; font-weight: 700; }
.status-card a:not(.btn) { color: #8f5151; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pay__card { margin-top: 1.2rem; }
.pay__card form { margin-top: 1rem; }
.pay__card .btn { cursor: pointer; }
.pay__card .reservation-total-box { margin-top: .9rem; }

/* ---------- 11. Divers : contact, FAQ, blog, pages légales ---------- */
.contact-clean-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem !important; }
.contact-clean-item-icon .icon { width: 22px; height: 22px; }
.faq-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.faq-answer ul { margin: 0 0 .72rem 1.2rem; padding: 0; color: var(--text); font-size: 1.01rem; line-height: 1.55; }
.faq-answer a, .faq-more a { color: #8f5151; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-more { margin: 1.2rem 0 0; color: var(--text); }
.faq-category { cursor: pointer; }
.blog-article-page + .cta-band { padding-top: 0; }
.blog-card-media picture, .blog-article-media picture { display: block; }
.blog-article-content ul, .blog-article-content ol { margin: 0 0 1rem; padding-left: 1.15rem; color: var(--text); display: grid; gap: .3rem; }
.blog-article-content h3 { margin: 1rem 0 .4rem; font-size: clamp(21px, 2.1vw, 26px); }
.blog-article-content a { color: #8f5151; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.figure-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin: .8rem 0 1rem; }
.figure-pair figure { margin: 0; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.figure-pair img { border-radius: 0; aspect-ratio: 16 / 10; object-fit: cover; }
.figure-pair figcaption { padding: .55rem .75rem; font-size: .9rem; font-weight: 600; color: var(--text); }
.blog-article-content .ab-demo { margin: .8rem 0 1rem; }
@media (max-width: 900px) { .figure-pair { grid-template-columns: 1fr; } }
.legal-content a, .legal-block a { color: #8f5151; text-decoration: underline; text-underline-offset: 2px; }
.legal-block ul { margin: 0 0 .65rem; padding-left: 1.1rem; display: grid; gap: .3rem; }

/* ---------- 12. Alignements : ce qui doit tomber à la même hauteur ou sur le même bord ---------- */
/* Témoignages : la barre de lecture reste en bas de chaque carte, quelle que soit la longueur de la citation. */
.voice-card { align-content: start; }
.voice-body { min-height: 0; }
.voice-body .voice-player { margin-top: auto; }
@media (min-width: 1100px) {
  .voice-card { grid-template-rows: auto 1fr; }
  .voice-media img { height: auto; }
}
/* Suppléments : prix, photo et nom partent du haut, même quand un nom passe sur deux lignes. */
.extra-card { align-content: start; }
/* Blog : le lien « Lire l'article » reste en bas de chaque carte. */
.blog-card { display: flex; flex-direction: column; }
.blog-card-body { flex: 1; }
.blog-card h2 { text-wrap: balance; }
/* Cartes à titre puis texte : sur une même ligne, les textes commencent à la même hauteur. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .ideas-grid .idea-card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: .5rem; align-content: start; }
    .ideas-grid .idea-card h2, .ideas-grid .idea-card h3 { margin: 0; }
  }
  @media (min-width: 720px) {
    .reservation-bubble { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .reservation-bubble h2 { min-height: 0; }
  }
}
/* Galerie : dix photos, donc cinq par ligne dès que la place le permet (plus de photo seule en dernière ligne). */
@media (min-width: 620px) and (max-width: 1099px) {
  .gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
}
/* « La tradition » sur tablette : la photo et le texte ont la même largeur. */
@media (max-width: 900px) {
  .tradition-media, .tradition-copy { width: min(100%, 680px); max-width: 680px; margin-inline: auto; }
}
/* Réservation sur téléphone : l'introduction reste centrée sous le titre, et le total sur une ligne. */
@media (max-width: 719px) {
  .reservation-intro { text-align: center; }
  .summary .reservation-total-box, .pay__card .reservation-total-box { flex-direction: row; align-items: center; }
}
/* FAQ et articles : la même marge latérale que le reste du site (ils touchaient le bord du cadre sur téléphone). */
.faq-page .faq-layout { width: min(100% - 2rem, var(--max-width-faq)); }
.blog-article-page .narrow { width: min(100% - 2rem, 860px); }
@media (max-width: 619px) {
  .about-page .container { width: min(100% - 2rem, var(--max-width)); }
  .contact-clean { width: min(100% - 2rem, 980px); }
}
/* Pages légales : une adresse ou un lien très long passe à la ligne au lieu de sortir du cadre. */
.legal-content, .legal-block, .blog-article-content, .faq-answer { overflow-wrap: anywhere; }

/* ---------- 13. Pied de page : logos et ligne « paiement sécurisé » ---------- */
/* (« logo-mark » et non « brand » : cette classe est déjà celle du logo dans l'en-tête.) */
.logo-mark { display: block; fill: currentColor; }
.social-link svg.logo-mark { width: 17px; height: 17px; }
.social-link svg.logo-mark * { fill: currentColor; stroke: none; }
.footer-inner { padding-bottom: 1.15rem; }
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem 1.2rem; padding: .8rem 0 1.25rem; border-top: 1px solid #efe4dd; color: var(--muted); }
.footer-pay__text { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.footer-pay__text .icon { width: 1.15em; height: 1.15em; color: #bd6e6e; }
.footer-pay__marks { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: .85rem; }
.footer-pay__marks li { display: flex; }
.footer-pay__marks .logo-mark { width: 36px; height: 36px; fill: var(--muted); }
.footer-pay__marks .logo-mark-mastercard { width: 30px; height: 30px; }

/* ---------- 14. Charte : une seule échelle de titres, de textes d'introduction et d'espaces ----------
   Quatre tailles de titre, les mêmes sur toutes les pages (elles se réduisent ensemble sur petit écran) :
     --t1  titre de page          (h1 de chaque page, y compris l'accueil)
     --t2  titre de section       (« Les services que nous offrons », « Galerie »…)
     --t3  titre de bloc          (forfaits, étapes de réservation, récapitulatif, articles, pages légales…)
     --t4  titre de carte         (« Comment ça marche », cartes du blog, idées des pages événement…)
   Pour changer une taille partout, il suffit de changer sa valeur ici. */
:root {
  --t1: clamp(34px, 4.2vw, 58px);
  --t2: clamp(30px, 3.6vw, 48px);
  --t3: clamp(24px, 2.6vw, 34px);
  --t4: clamp(20px, 2vw, 24px);
  --page-top: clamp(1.6rem, 4.2vw, 3.6rem);
  --page-bottom: clamp(3rem, 5vw, 4.4rem);
}
main h1, main h2, main h3, .step legend { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* t1 — titre de page */
main h1 { font-size: var(--t1) !important; line-height: 1.06 !important; margin: 0 0 .28em !important; color: var(--text); text-wrap: balance; }
.hero-copy h1 { color: #fff; }
.about-copy h1, .about-copy h2 { color: var(--text); }

/* t2 — titre de section */
.section-head h2, .tradition-copy h2, .about-copy h2 { font-size: var(--t2) !important; line-height: 1.06 !important; margin: 0 0 .42em !important; color: var(--text); text-wrap: balance; }
.section-head { margin-bottom: 2rem; }
.section-head p { margin: 0 auto; }

/* t3 — titre de bloc */
.offer-header h3, .remaster__text h2, .remaster__text h3, .tips h2, .step legend, .cta-band__text h2, .summary h2,
.contact-clean-item h2, .blog-article-content h2, .legal-content h2, .legal-block h2, .pay__card h2 { font-size: var(--t3) !important; line-height: 1.1 !important; color: var(--text); }

/* t4 — titre de carte */
.step-card h3, .idea-card h2, .idea-card h3, .blog-card h2,
.blog-article-content h3, .legal-content h3, .legal-block h3 { font-size: var(--t4) !important; line-height: 1.14 !important; }
.blog-card h2 { min-height: 0; margin-bottom: .45rem; }

/* Têtes de page centrées (réservation, blog, FAQ, pages légales) : même titre, même texte d'introduction, même espace dessous. */
.reservation-showcase, .blog-head, .legal-head, .page-head { margin: 0 auto 1.7rem !important; text-align: center; }
.reservation-showcase > p, .blog-head > p, .page-head > p, .reservation-intro { max-width: 68ch; margin: 0 auto !important; font-size: 18px; line-height: 1.5; color: var(--muted); text-align: center; }
.legal-head h1 { margin-bottom: 0 !important; }

/* Même espace au-dessus du titre et en bas de page, quelle que soit la page. */
.reservation-page, .faq-page, .blog-page, .blog-article-page, .contact-page, .legal-page, .status-page, .event-hero { padding-top: var(--page-top) !important; }
.reservation-page, .faq-page, .blog-page, .contact-page, .legal-page, .status-page { padding-bottom: var(--page-bottom) !important; }
.blog-article-page { padding-bottom: var(--page-bottom) !important; }

/* Textes : trois tailles seulement, identiques sur ordinateur et sur téléphone.
   18 px pour le texte courant, 16 px dans les cartes (citations, réponses de la FAQ, extraits du blog), 15 px pour les listes et libellés. */
.about-copy > p, .contact-clean-copy > p, .contact-clean-note, .tradition-copy > p, .blog-article-content > p, .blog-article-content > ul > li, .blog-article-content > ol > li, .blog-article-intro { font-size: 18px !important; line-height: 1.5 !important; }
.faq-answer p, .faq-answer li, .blog-card-body > p:not(.blog-card-meta), .voice-quote, .remaster__text p, .idea-card p, .tips p, .tips .offer-list li { font-size: 16px !important; line-height: 1.5 !important; }
.offer-list li, .offer-delivery div, .ab-demo__note, .event-note { font-size: 15px !important; }
.voice-quote { min-height: 4.5em; }

/* FAQ : le titre de page est au-dessus ; la colonne de gauche ne garde que son petit intitulé. */
.faq-page .faq-sidebar-title { margin: 0 0 .85rem; }

/* ---------- 15. Couleur du texte : bleu nuit partout ----------
   Le texte du site était brun sur certaines pages et bleu nuit sur d'autres (FAQ, blog, « À propos »).
   Il est maintenant bleu nuit partout : --text pour les titres et le texte, --muted pour le texte secondaire.
   Les lignes ci-dessous reprennent, une à une, les règles de styles.css qui fixaient une couleur brune. */
:root { --text: #022641; --muted: #5b6b7c; }
body { color: var(--text); }
.event-strip li { color: var(--muted); }
.contact-clean-eyebrow { color: var(--muted); }
.blog-head p { color: var(--text); }
.blog-card-meta { color: var(--muted); }
.blog-card p { color: var(--text); }
.blog-article-meta { color: var(--muted); }
.blog-article-intro { color: var(--text); }
.blog-article-content p { color: var(--text); }
.blog-article-list { color: var(--text); }
.blog-audio-missing { color: var(--muted); }
.blog-visual-card figcaption { color: var(--text); }
.voice-event { color: var(--muted); }
.voice-quote { color: var(--text); }
.voice-time { color: var(--muted); }
.voice-file-hint { color: var(--muted); }
.offer-list li { color: var(--text); }
.reservation-bubble p { color: var(--text); }
.reservation-mini-title { color: var(--text); }
.reservation-choice-group legend, .reservation-options-group legend { color: var(--text); }
.reservation-phone-label { color: var(--text); }
.reservation-relay-item-address { color: var(--text); }
.reservation-table th { color: var(--muted); }
.reservation-kv dt { color: var(--muted); }
.reservation-kv dd { color: var(--text); }
.reservation-detail-message { color: var(--text); }
.reservation-calendar-nav strong { color: var(--text); }
.reservation-calendar-weekdays span { color: var(--muted); }
.reservation-calendar-day-number { color: var(--text); }
.reservation-calendar-day-events li { color: var(--text); }
.reservation-calendar-day-events li.is-more { color: var(--muted); }
.reservation-calendar-form label { color: var(--muted); }
.reservation-calendar-list-date { color: var(--muted); }
.reservation-calendar-list-title { color: var(--text); }
.reservation-calendar-list-details p { color: var(--text); }
.reservation-calendar-list-notes { color: var(--text); }
.legal-nav a { color: var(--muted); }
.legal-block h3 { color: var(--text); }
.legal-content-cgv strong { color: var(--text); }
.legal-table th { color: var(--text); }
.faq-sidebar-title { color: var(--text); }
.faq-item summary { color: var(--text); }
.faq-answer p { color: var(--text); }
.faq-answer ol { color: var(--text); }

/* ---------- 16. Téléphone et tablette ----------
   Le design ne change pas. Ce bloc fait trois choses :
   a) sur tablette (à partir de 768 px), la même mise en page que sur ordinateur, au lieu de celle du téléphone ;
   b) sur téléphone, plus rien de coupé ni de chevauché, et des zones tactiles assez grandes pour le doigt ;
   c) dans la réservation, le total reste sous les yeux et chaque champ à corriger est signalé. */

/* --- a. Zones tactiles (écrans de moins de 1024 px) : au moins 36 à 44 px de haut --- */
@media (max-width: 1023px) {
  .nav-toggle { justify-content: center; align-items: center; min-width: 44px; min-height: 44px; margin-right: -5px; }
  .footer-links a, .crumbs a, .blog-backlink, .blog-card-link { display: inline-flex; align-items: center; min-height: 38px; }
  .blog-card-link { align-self: flex-start; }
  .social-link { width: 40px; height: 40px; }
  .legal-nav a { display: inline-flex; align-items: center; min-height: 38px; padding-inline: .9rem; }
  .contact-clean-item a { display: inline-block; padding-block: .45rem; }
  /* Barre de lecture : même trait fin, mais une zone de toucher de 36 px. */
  .voice-track { height: 36px; background: none; overflow: visible; }
  .voice-track::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 10px; border-radius: 999px; background: #efdeda; }
  .voice-progress { inset: 13px auto 13px 0; z-index: 1; border-radius: 999px; }
}
@media (max-width: 767px) {
  .site-nav .lang-nav-switch { margin: .3rem 0 .2rem .35rem; }
  .site-nav .lang-nav-link { min-width: 46px; height: 38px; font-size: .86rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site-nav a { padding-block: .5rem; }
  .site-nav .lang-nav-link { min-width: 32px; height: 32px; }
}

/* --- b. Bande des événements : quand elle défile, son bord s'estompe au lieu de couper un mot --- */
.event-strip { scroll-padding-inline: .75rem; }
.event-strip.can-right { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.event-strip.can-left { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
.event-strip.can-left.can-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

/* --- c. Boutons : un texte sur deux lignes se répartit en deux lignes égales --- */
.btn { text-wrap: balance; }
@media (max-width: 380px) {
  .offer-cta { padding-inline: .8rem; }
}
/* Forfaits sur téléphone : « Téléphone à cadran » et sa précision tiennent sur une ligne dans les deux cartes. */
@media (max-width: 430px) {
  .offer-features li { column-gap: .5rem; }
  .offer-value { font-size: .76rem; }
}

/* --- d. Haut de page de l'accueil --- */
/* Téléphone : le visage reste dégagé. Le titre se pose en bas de la photo ; la note Google, l'écoute et la brochure
   passent sous le formulaire de date. */
.hero-date-below .hero-extras { display: none; }
@media (max-width: 620px) {
  .hero-cover { min-height: 530px; align-items: flex-end; padding: 0 0 62px; }
  .hero-bg { object-position: 86% 50%; }
  .hero-cover::before { background: linear-gradient(180deg, rgba(22, 18, 17, 0) 36%, rgba(22, 18, 17, .5) 56%, rgba(22, 18, 17, .84) 100%); }
  .hero-copy { max-width: none; }
  .hero-copy > p { max-width: none; margin-bottom: 0; }
  .hero-copy .hero-extras { display: none; }
  .hero-date-below .hero-extras { display: flex; justify-content: center; margin-top: .9rem; }
  .hero-date-below .hero-reviews, .hero-date-below .hero-listen { border-color: var(--border); background: #fff; color: var(--text); }
  .hero-date-below a.hero-reviews:hover, .hero-date-below .hero-listen:hover, .hero-date-below .hero-listen.is-playing { background: var(--surface-soft); }
  .hero-date-below .hero-reviews-stars { color: #e0a53a; }
  .hero-date-below .hero-reviews-badge, .hero-date-below .hero-listen-icon { background: #bd6e6e; color: #fff; }
  .hero-date-below .hero-brochure { border: 1px solid var(--border); }
  .hero-date-below .hero-reviews, .hero-date-below .hero-listen, .hero-date-below .hero-brochure { min-height: 40px; }
}
@media (max-width: 350px) {
  .hero-copy h1 { font-size: 30px !important; }
}
/* Petite tablette : le texte reste à gauche de la mariée, le champ de date et son bouton l'un sous l'autre. */
@media (min-width: 621px) and (max-width: 767px) {
  .hero-copy { max-width: 330px; }
  .hero-bg { object-position: 96% 58%; }
  .hero-copy .date-check input[type="date"], .hero-copy .date-check .btn { flex: 1 1 100%; text-align: center; }
}

/* --- e. Tablette (768 à 1099 px) : les mises en page de l'ordinateur --- */
/* « La tradition » et le haut des pages par événement : photo et texte côte à côte. */
@media (min-width: 768px) and (max-width: 900px) {
  .tradition-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .tradition-media, .tradition-copy { width: auto; max-width: none; margin-inline: 0; }
  /* Accueil : la photo à côté du texte, puis les deux chiffres côte à côte sur toute la largeur
     (dans une colonne étroite, ils faisaient une colonne de texte deux fois plus haute que la photo). */
  .tradition-section:not(.event-hero) .tradition-grid { row-gap: 0; }
  .tradition-section:not(.event-hero) .tradition-copy { display: contents; }
  .tradition-section:not(.event-hero) .tradition-media { grid-column: 1; grid-row: 1 / span 12; align-self: center; }
  .tradition-section:not(.event-hero) .tradition-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .tradition-section:not(.event-hero) .tradition-copy > h2, .tradition-section:not(.event-hero) .tradition-copy > p { grid-column: 2; }
  .tradition-section:not(.event-hero) .tradition-copy > p:last-of-type { margin-bottom: 0; }
  .tradition-section:not(.event-hero) .tradition-insights { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; margin-top: 1.8rem; }
  .tradition-section:not(.event-hero) .insight-pill { align-content: start; }
}
/* Pages par événement : la photo à gauche, le titre et la date à droite, dès 700 px. */
@media (min-width: 700px) and (max-width: 900px) {
  .event-hero .tradition-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.8rem; align-items: center; }
  .event-hero .tradition-media, .event-hero .tradition-copy { width: auto; max-width: none; margin: 0; }
  .event-hero .tradition-media img { aspect-ratio: 1 / 1; }
}
@media (min-width: 520px) and (max-width: 699px) {
  .event-hero .tradition-media { width: 100%; max-width: none; }
  .event-hero .tradition-media img { width: 100%; aspect-ratio: 4 / 3; }
}
/* Entre grand téléphone et tablette : la photo en bandeau (elle prenait tout l'écran), les deux chiffres côte à côte. */
@media (min-width: 520px) and (max-width: 767px) {
  .tradition-section:not(.event-hero) .tradition-media { width: 100%; max-width: none; }
  .tradition-section:not(.event-hero) .tradition-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; }
}
@media (min-width: 620px) and (max-width: 767px) {
  .tradition-section:not(.event-hero) .tradition-copy { width: 100%; max-width: none; }
  .tradition-section:not(.event-hero) .tradition-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .tradition-section:not(.event-hero) .insight-pill { align-content: start; }
}
/* Forfaits côte à côte ; photos, listes et boutons tombent à la même hauteur dans les deux cartes. */
@media (min-width: 768px) and (max-width: 1099px) {
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .offer-card { padding: .85rem; }
  .offer-cta { padding-inline: .85rem; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .offers-grid > .offer-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: .85rem; }
  }
}
/* Suppléments : quatre sur une ligne. */
@media (min-width: 700px) and (max-width: 1099px) {
  .extras-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
}
/* Sur une même ligne, prix, photos et noms des suppléments tombent à la même hauteur, même si un prix ou un nom
   passe sur deux lignes (cela arrivait en italien sur téléphone). */
@supports (grid-template-rows: subgrid) {
  .extras-grid > .extra-card { grid-row: span 3; grid-template-rows: subgrid; row-gap: .45rem; }
}
/* « Comment ça marche » : deux par deux, icônes, titres et textes alignés d'une colonne à l'autre. */
@media (min-width: 620px) and (max-width: 1099px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.5rem; }
  .step-card { min-height: 0; padding: 0 .5rem; }
  .step-icon { margin: 0 auto .9rem; }
  @supports (grid-template-rows: subgrid) {
    .steps-grid { row-gap: 0; }
    .steps-grid > .step-card { margin-bottom: 1.6rem; }
    .steps-grid > .step-card:nth-last-child(-n+2) { margin-bottom: 0; }
  }
}
/* Dès que les étapes sont côte à côte : un titre sur deux lignes ne décale plus le texte de sa colonne. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 620px) {
    .steps-grid > .step-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; justify-items: center; align-items: start; row-gap: 0; }
    .steps-grid > .step-card h3 { align-self: end; }
  }
}
/* Extraits à écouter : trois cartes côte à côte dès 900 px. */
@media (min-width: 900px) and (max-width: 1099px) {
  .voice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .voice-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: .85rem; }
  .voice-media img { height: auto; aspect-ratio: 16 / 11; }
}
/* « À propos » : photo et texte côte à côte. */
@media (min-width: 700px) and (max-width: 899px) {
  .about-block-inner { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.6rem; }
  .about-block--reverse .about-block-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .about-media { width: 100%; margin: 0; justify-self: start; }
  .about-block--reverse .about-media { justify-self: end; }
}
/* Contact : texte et photo côte à côte, puis horaires, e-mail et téléphone sur une ligne. */
@media (min-width: 700px) and (max-width: 899px) {
  .contact-clean-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.4rem; }
  .contact-clean-media { justify-self: end; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .contact-clean-infos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  .contact-clean-item + .contact-clean-item { border-left: 1px solid #ebddd2; }
}
/* Pied de page : entre tablette et petit ordinateur, les liens passent sur deux lignes au lieu d'être coupés. */
@media (min-width: 901px) and (max-width: 1139px) {
  .footer-inner { flex-wrap: wrap; white-space: normal; overflow: visible; gap: .3rem 1rem; }
  .footer-meta { width: 100%; justify-content: center; padding-left: 0; border-left: 0; }
}
/* Quand les liens du pied de page passent sur deux lignes, plus de point de séparation en bout de ligne. */
@media (max-width: 767px) {
  .footer-sep { display: none; }
  .footer-links { gap: 0 1.1rem; }
}
@media (max-width: 620px) {
  .section { padding: 3.4rem 0; }
}

/* --- f. Réservation --- */
.check input[aria-invalid="true"] { outline: 2px solid #c9665a; outline-offset: 2px; }
@media (max-width: 560px) {
  /* Étapes : le rond garde sa place, la zone de toucher descend à 44 px. */
  .steps-nav { padding-bottom: .35rem; }
  .steps-nav button { padding-bottom: 12px; }
}
@media (max-width: 1023px) {
  .relay__finder a { min-height: 40px; }
}
@media (max-width: 480px) {
  /* Point relais : le nom sur toute la largeur, « Chronopost » dessous. */
  .relay__item { grid-template-columns: auto minmax(0, 1fr); }
  .relay__net { grid-column: 2; text-align: left; }
}
@media (max-width: 400px) {
  /* Calendrier : des cases plus larges et le mois sur une seule ligne. */
  .calendar { padding: .75rem .35rem; }
  .calendar__grid { gap: 2px 0; }
  .calendar__title { font-size: clamp(1rem, 4.7vw, 1.2rem); white-space: nowrap; }
  .calendar__dow { letter-spacing: 0; }
}
/* Le total reste visible sur téléphone et tablette, où le récapitulatif est sous le formulaire. */
.total-bar { display: none; }
@media (max-width: 979px) {
  .total-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 18px rgba(54, 31, 24, .08); transform: translateY(110%); transition: transform .25s ease; }
  .total-bar.is-visible { transform: none; }
  .total-bar__total { margin: 0; display: flex; align-items: baseline; gap: .6rem; font-size: .95rem; font-weight: 700; color: var(--text); }
  .total-bar__total strong { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 400; line-height: 1; white-space: nowrap; }
  .total-bar__link { flex: none; display: inline-flex; align-items: center; min-height: 42px; padding: 0 1.1rem; border: 1px solid #e5d7cf; border-radius: 999px; background: #fff; color: #8f5151; font-size: .92rem; font-weight: 700; white-space: nowrap; }
  body.has-total-bar { padding-bottom: 66px; }
  /* Un champ atteint au clavier ou par un lien ne se retrouve pas caché derrière le bandeau. */
  html:has(body.has-total-bar) { scroll-padding-bottom: 84px; }
}

/* --- g. Pages légales : le tableau des tarifs tient dans l'écran, sans défilement caché --- */
@media (max-width: 620px) {
  .legal-table { min-width: 0; }
  .legal-table th, .legal-table td { padding: .6rem .65rem; }
  .legal-table th:first-child { width: 64%; }
  .legal-table th:last-child, .legal-table td:last-child { text-align: right; }
}

/* ---------- 17. Page « paiement confirmé » ----------
   Ce que le client voit juste après avoir payé : son téléphone, sa date, et la suite du parcours.
   La photo « sonne » une fois à l'arrivée sur la page (sauf si l'appareil demande moins d'animations). */
.status-page .narrow:has(.confirm) { width: min(100% - 2rem, 880px); }
.confirm { padding: clamp(1.3rem, 3.4vw, 2.6rem); }
.confirm__top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 26%, 230px); gap: clamp(1rem, 4vw, 2.4rem); align-items: center; }
.confirm__top h1 { margin: 0 0 .6rem; text-wrap: balance; }
.confirm__top .status-lead { margin: 0; max-width: 46ch; }
.confirm__photo { margin: 0; transform-origin: 50% 85%; animation: confirm-ring 1.15s ease-in-out .55s 1 both; }
.confirm__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 78%; border-radius: 24px; box-shadow: 0 14px 28px rgba(54, 31, 24, .14); }
@keyframes confirm-ring {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70% { transform: rotate(-2.4deg); }
  20%, 40%, 60%, 80% { transform: rotate(2.4deg); }
}
.confirm__facts { margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 18px; background: #fdfaf7; }
.confirm__facts > div { padding: .9rem 1.1rem; border-left: 1px solid var(--border); min-width: 0; }
.confirm__facts > div:first-child { border-left: 0; }
.confirm__facts dt { margin: 0 0 .2rem; font-size: .88rem; color: var(--muted); }
.confirm__facts dd { margin: 0; font-size: 1rem; font-weight: 700; color: #022641; line-height: 1.3; overflow-wrap: anywhere; }
.confirm__facts dd span { display: block; margin-top: .15rem; font-weight: 400; font-size: .92rem; color: var(--muted); }
.confirm__title { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; font-size: clamp(26px, 3vw, 34px); }
.confirm .next-steps { margin: 1.1rem 0 0; gap: 1rem; }
.confirm .next-steps li { align-items: center; }
.confirm__tip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1.1rem; align-items: start; margin: clamp(1.6rem, 3.4vw, 2.2rem) 0 0; padding: clamp(1rem, 2.6vw, 1.5rem); border-radius: 18px; background: var(--surface-soft); }
.confirm__tip > .icon { width: 2.6rem; height: 2.6rem; padding: .55rem; border-radius: 50%; background: #fff; color: #bd6e6e; }
.confirm__tip h2 { margin: 0 0 .35rem; font-size: clamp(21px, 2.4vw, 26px); }
.confirm__tip p { margin: 0 0 .4rem; }
.confirm__tip p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
  .confirm__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .confirm__facts > div:nth-child(odd) { border-left: 0; }
  .confirm__facts > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .confirm__top { grid-template-columns: minmax(0, 1fr); }
  .confirm__photo { order: -1; width: min(62%, 220px); margin: 0 auto .4rem; }
  .confirm__top .status-badge { margin-bottom: .8rem; }
  .confirm .btn-row .btn { flex: 1 1 100%; }
  .confirm__tip { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
}
@media (max-width: 400px) {
  .confirm__facts { grid-template-columns: minmax(0, 1fr); }
  .confirm__facts > div { border-left: 0; }
  .confirm__facts > div:nth-child(n + 2) { border-top: 1px solid var(--border); }
}

/* ---------- 18. Page introuvable (404) ----------
   Même cadre que la page « paiement confirmé », sans l'animation : un message clair et quatre raccourcis. */
.notfound .confirm__photo { animation: none; }
.notfound__code { margin: 0 0 .7rem; font-size: .95rem; font-weight: 700; color: #8f5151; }
.notfound .confirm__top h1 { font-size: clamp(30px, 3.6vw, 46px); }
.notfound__links { list-style: none; margin: clamp(1.5rem, 3.4vw, 2.2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.notfound__links li { display: flex; }
.status-card .notfound__links a { flex: 1 1 auto; display: block; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 18px; background: #fdfaf7; color: #022641; text-decoration: none; font-weight: 400; transition: background-color .15s, border-color .15s; }
.status-card .notfound__links a:hover, .status-card .notfound__links a:focus-visible { background: var(--surface-soft); border-color: #bd6e6e; }
.notfound__links strong { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; line-height: 1.25; }
.notfound__links span { display: block; margin-top: .2rem; font-size: .95rem; color: var(--muted); }
@media (max-width: 560px) {
  .notfound__links { grid-template-columns: minmax(0, 1fr); }
}

/* 19. Accueil : petite ligne au-dessus du grand titre (même dessin que .eyebrow de la feuille d'origine) */
.hero-kicker { display: block; margin: 0 0 .7rem; font-family: var(--font-body); font-size: .74rem; font-weight: 700; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.hero-kicker span { display: inline-block; }
@media (max-width: 360px) { .hero-kicker { font-size: .68rem; letter-spacing: .05em; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}