/* Révision du 20 octobre 2026 : livre d’or en défilé latéral. */
/* Le site est clair-dominant : fond crème, écritures terracotta.
   Les valeurs viennent de l'affiche du dress code, qui fait référence. */
:root {
  --terracotta: #C65A3A;
  --roux: #A8583D;
  --cannelle: #B3744E;
  --caramel: #C89A6B;
  --sable: #D7C3A7;
  --nude: #E8D5C6;
  --chocolat: #5B3B2E;
  --or-champagne: #D4B06B;

  /* Deux fonds clairs qui alternent d'une section à l'autre : sans cette
     nuance, toutes les coutures disparaîtraient. */
  --cream: #FDF6EC;
  --sand: #F6EADB;
  --page-bg: #EFE2D3;

  /* Encres. Le corps de texte est en chocolat et non en terracotta : sur le
     crème, le terracotta plafonne à 3,6:1 de contraste, sous le seuil lisible.
     Le terracotta porte donc les titres, sur-titres, chiffres et bordures. */
  --ink: var(--chocolat);
  --ink-soft: #6E5B4F;

  /* Le terracotta de l'affiche plafonne à 3,6:1 sur le sable : il tient pour un
     titre (seuil 3) mais pas pour un sur-titre de 11px. Les petits textes
     prennent donc cette version assombrie, mesurée à 4,5:1 sur crème, sable et
     nude ; les grands titres gardent le terracotta d'origine.
     Même raison pour le fond des boutons pleins, que le crème doit surmonter. */
  --terracotta-ink: #99462D;
  --terracotta-fonce: #AE4F30;
  --terracotta-btn: #B75336;
  --line: rgba(198, 90, 58, .28);
  --line-soft: rgba(91, 59, 46, .16);

  /* Anciens noms conservés : d'autres règles et quelques vues s'y réfèrent. */
  --terracotta-dark: #A8583D;
  --terracotta-darker: #8E4227;
  --brown-deep: #5B3B2E;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-script: 'Parisienne', cursive;
  --font-body: 'Lora', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page-bg);
  font-family: var(--font-body);
  color: var(--ink);
  /* Chiffres alignés partout. Le Cormorant dessine par défaut des chiffres
     « elzéviriens », qui descendent sous la ligne et rapetissent : le 11 de
     « 11 octobre » paraissait d'un corps plus petit que le mot qui le suit,
     et le Lora, lui, les dessine droits — deux polices, deux façons de
     chiffrer. Les champs de formulaire n'en héritent pas : on les ajoute. */
  font-variant-numeric: lining-nums;
}
input, button, select, textarea { font-variant-numeric: lining-nums; }

.invitation {
  max-width: 620px;
  margin: 0 auto;
  background: var(--sand);
  box-shadow: 0 26px 60px -30px rgba(91, 59, 46, .35);
  overflow: hidden;
}

@media (min-width: 640px) {
  .invitation { margin: 48px auto 72px; border-radius: 26px; }
}

/* Les sections alternent sable et terracotta. Le sable est la valeur par défaut
   et .section--terracotta marque les exceptions, deux sections sur six : c'est
   plus court que d'étiqueter les six, et une section ajoutée sans classe tombe
   sur un fond valide. Le pied de page a son propre nude, pour refermer la carte. */
.section {
  position: relative;
  padding: 44px 28px;
  background: var(--sand);
  overflow: hidden;
}

/* Sections terracotta : le fond est le terracotta de l'affiche assombri de 12%.
   À sa valeur d'origine (#C65A3A) le crème ne dépasse pas 3,97:1 de contraste,
   sous le seuil ; à #AE4F30 il atteint 4,94:1 et la teinte reste terracotta.
   Tout ce que la section contient est dessiné pour les fonds clairs : il faut
   donc en inverser les contrastes ici, sans quoi c'est terracotta sur terracotta. */
.section--terracotta { background: var(--terracotta-fonce); }

/* Le RSVP n'a plus de branche au-dessus de lui : sans elle, la marge haute
   standard laissait un vide au-dessus du sur-titre. */
#rsvp { padding-top: 26px; }

.section--terracotta .eyebrow,
.section--terracotta .section-title,
.section--terracotta .script-title,
.section--terracotta .quote-ref,
.section--terracotta a { color: var(--cream); }

/* Sur ce fond, un crème atténué tombe sous le seuil (nude : 3,73:1). Les textes
   secondaires gardent donc la pleine valeur et se distinguent par la taille. */
.section--terracotta .text-invite-muted,
.section--terracotta .modal-note { color: var(--cream); }

/* background-color et non le raccourci background : celui-ci remettrait
   background-repeat et background-position à leur valeur initiale, et le chevron
   du menu déroulant se répéterait sur toute la largeur du champ. */
.section--terracotta .form-control-invite {
  background-color: rgba(253, 246, 236, .14);
  border-color: rgba(253, 246, 236, .55);
  color: var(--cream);
}
.section--terracotta .form-control-invite::placeholder { color: rgba(253, 246, 236, .78); }
.section--terracotta .form-control-invite:focus {
  background-color: rgba(253, 246, 236, .22);
  border-color: var(--cream);
  color: var(--cream);
}
.section--terracotta select.form-control-invite {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FDF6EC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.section--terracotta select.form-control-invite option {
  background-color: #7E3A22;
  color: var(--cream);
}

/* Les boutons pleins s'inversent : un aplat terracotta sur terracotta ne se
   verrait pas. Le crème devient le fond, le terracotta sombre l'écriture. */
/* .btn-gift n'est pas de la partie : il vit dans une carte blanche, où le plein
   terracotta reste le bon traitement — l'inverser l'y rendait fantomatique. */
.section--terracotta .btn-invite-solid,
.section--terracotta .gift-teaser {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--terracotta-ink);
}
.section--terracotta .btn-invite-solid:hover,
.section--terracotta .gift-teaser:hover { background: #fff; color: var(--terracotta-ink); }

.section--terracotta .btn-invite-outline {
  border-color: rgba(253, 246, 236, .55);
  color: var(--cream);
}
.section--terracotta .btn-invite-outline:hover { background: var(--cream); color: var(--terracotta-ink); }

.section--terracotta .alert-invite,
.section--terracotta .thankyou {
  border-color: rgba(253, 246, 236, .55);
  background: rgba(91, 59, 46, .22);
  color: var(--cream);
}
.section--terracotta .thankyou .script-title,
.section--terracotta .thankyou p { color: var(--cream); }
.section--terracotta .alert-invite.alert-invite--error {
  border-color: #FFD9C8;
  background: rgba(91, 22, 6, .30);
}

.section--terracotta .field-error { color: #FFE0D0; }

/* La carte cadeau est blanche : sa bordure terracotta disparaîtrait sur ce fond. */
.section--terracotta .gift-card { border-color: rgba(253, 246, 236, .3); }

/* Les fiches du livre d'or : fond légèrement creusé plutôt que le blanc translucide
   des sections claires, qui virerait au rose pâle sur le terracotta. */
.section--terracotta .guest-entry {
  border-color: rgba(253, 246, 236, .3);
  background: rgba(91, 59, 46, .18);
}
.section--terracotta .guest-entry .author,
.section--terracotta .guest-entry .text { color: var(--cream); }

/* C'est donc une branche fleurie qui marque le passage d'une section à l'autre.
   Elle est posée en ::before sur toute section qui en suit une autre : rien à
   insérer dans les vues, et une section ajoutée plus tard en hérite. Elle occupe
   une vraie place dans le flux plutôt que d'être calée en absolu — le contenu se
   décale de lui-même, sans avoir à reprendre les marges hautes de chaque section.
   Deux sections en sont exclues : celle des coeurs, dont la pluie fait déjà cet
   office, et celles qui portent .section--sans-separateur — là où le fond change
   de teinte, la couture se voit sans qu'on ait besoin d'une branche en plus. */
.section + .section:not(.section--coeurs):not(.section--sans-separateur)::before {
  content: "";
  display: block;
  /* Les marges négatives valent la marge intérieure de .section : la branche
     court ainsi d'un bord à l'autre au lieu de s'arrêter au texte. */
  margin: -6px -28px 26px;
  aspect-ratio: 620 / 68;
  background: url("../img/separateur-floral.svg") center / contain no-repeat;
}

/* Sur terracotta, les verts du feuillage s'éteignent. La branche a donc une
   seconde version, feuillage et fleurs éclaircis, pour ces deux sections. */
.section--terracotta::before {
  background-image: url("../img/separateur-floral-clair.svg") !important;
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  text-align: center;
  color: var(--terracotta-ink);
}

/* La date de clôture porte à elle seule l'information utile de ce sur-titre :
   elle se détache par la taille et la graisse. L'interlettrage est resserré,
   sinon à cette taille la ligne s'étalerait sur toute la largeur. */
.eyebrow-date {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .14em;
  /* Sans cela, au téléphone la ligne se coupe entre le quantième et le mois et
     la date se retrouve à cheval sur deux lignes. */
  white-space: nowrap;
}

/* Tous les titres de section reprennent l'écriture manuscrite des prénoms.
   .script-title existait déjà pour deux d'entre eux : les deux classes sont
   désormais le même traitement, plutôt que de retoucher toutes les vues.
   Parisienne a un œil bien plus petit que le Cormorant qu'elle remplace, d'où
   la taille nettement plus grande ; et ses hampes sont hautes, d'où l'interligne
   desserré, sans quoi l'accent d'« Élégance » se fait rogner. */
.section-title,
.script-title {
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.25;
  margin: 6px 0 22px;
  color: var(--terracotta);
}

/* Hero */
.hero { position: relative; height: 620px; }
.hero img {
  position: absolute;
  inset: -14% 0 auto;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: 50% 28%;
  /* Aucun filtre : le fichier porte désormais la retouche du photographe,
     transposée depuis la version qu'il a rendue. Le voile sépia qui réchauffait
     la photo pour l'accorder au terracotta la ferait mentir. */
}
/* Voile chocolat et non terracotta : les prénoms restent en crème sur la photo,
   c'est le seul endroit du site où l'écriture claire reste la plus lisible.
   Le haut du voile est presque effacé — c'est là que la photo doit respirer —
   et tout ce qui reste d'ombre est ramené sous la légende, qui en a besoin. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(91,59,46,.10) 0%, rgba(91,59,46,0) 40%, rgba(91,59,46,.40) 76%, rgba(91,59,46,.74) 100%);
}
.hero-caption {
  position: absolute;
  inset: auto 26px 34px;
  text-align: center;
  z-index: 1;
  /* La photo étant éclaircie, le voile ne suffit plus à porter l'écriture
     crème partout : une robe claire ou un carrelage passe sous une lettre et
     elle s'efface. L'ombre porte le texte là où il en a besoin, au lieu de
     réassombrir toute l'image pour quelques pixels. */
  text-shadow: 0 1px 2px rgba(46,28,20,.5), 0 2px 24px rgba(46,28,20,.62);
}
.hero-caption .kicker {
  /* Le sur-titre est fin, petit et très espacé : c'est lui qui souffre le plus
     d'une photo claire. Il lui faut une ombre plus serrée que les prénoms. */
  text-shadow: 0 1px 2px rgba(46,28,20,.7), 0 1px 10px rgba(46,28,20,.75);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(253,246,236,.85);
  margin-bottom: 14px;
}
.hero-caption .names {
  font-family: var(--font-script);
  font-size: 68px;
  line-height: .95;
  color: var(--cream);
}
.hero-divider {
  /* Les filets et le coeur sont dessinés, pas écrits : l'ombre du texte ne les
     touche pas, il leur faut la leur. */
  filter: drop-shadow(0 1px 3px rgba(46,28,20,.55));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 2px 0;
}
.hero-divider span { width: 38px; height: 1px; background: rgba(253,246,236,.65); }

/* Countdown */

#countdown > *:not(.floral) { position: relative; z-index: 1; }

/* Bouquet photographié de l'angle haut gauche. 76px de large en font 141px de
   haut, exactement la hauteur libre au-dessus du filet de la grille. */
.floral {
  position: absolute;
  top: 0;
  left: 0;
  width: 76px;
  height: auto;          /* drapé vertical, bien plus haut que large : ne pas l'écraser */
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.countdown-date {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--terracotta);
}
.countdown-place {
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 8px;
}
.countdown-grid {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.countdown-grid .cell { flex: 1; text-align: center; }
.countdown-grid .num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 300;
  color: var(--terracotta);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown-grid .unit {
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

.quote-box {
  margin: 34px 0 0;
  padding: 30px 22px;
  border: 1px solid var(--line);
  text-align: center;
}
.quote-box p {
  font-family: var(--font-heading);
  font-size: 23px;
  line-height: 1.5;
  font-weight: 300;
  font-style: italic;
  color: var(--ink);
}
.quote-ref {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terracotta-ink);
  margin-top: 16px;
}

/* Pluie de coeurs en haut de la section « Lieu & accès ».
   Le SVG est calé sur la largeur de la carte (620px) et suit sa mise à l'échelle :
   sur un écran étroit les coeurs rapetissent au lieu de se retrouver à l'étroit. */
.section--coeurs { padding-top: 92px; }

.coeurs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.section--coeurs > *:not(.coeurs) { position: relative; z-index: 1; }

/* Timeline */
.timeline { position: relative; padding-left: 84px; margin-top: 10px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 56px; top: 10px; bottom: 22px; width: 1px;
  background: linear-gradient(rgba(198,90,58,.15), rgba(198,90,58,.75) 12%, rgba(198,90,58,.75) 88%, rgba(198,90,58,.15));
}
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-time {
  position: absolute; left: -84px; top: 1px; width: 50px; text-align: right;
  font-family: var(--font-heading); font-size: 17px; color: var(--terracotta-ink); line-height: 1.2;
}
.timeline-dot {
  position: absolute; left: -30px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid var(--terracotta); background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.timeline-dot span { width: 5px; height: 5px; border-radius: 50%; background: var(--terracotta); }
.timeline-kicker {
  font-family: var(--font-heading); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--terracotta-ink); margin-bottom: 4px;
}
.timeline-place { font-family: var(--font-heading); font-size: 22px; color: var(--ink); line-height: 1.2; }
.timeline-detail { font-size: 14px; color: var(--ink-soft); line-height: 1.65; margin-top: 6px; }

/* Dress code swatches */
.swatches { display: flex; justify-content: center; gap: 26px; margin: 24px 0 28px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.swatch-color { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-soft); }
.swatch-label { font-family: var(--font-heading); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }

/* Forms */
.form-control-invite {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: rgba(255,255,255,.62);
  border: 1px solid var(--line);
  border-radius: 4px;
  /* Même famille que les boutons, les intitulés et les mentions qui les
     entourent : un formulaire n'a plus deux polices. Le Cormorant est plus
     petit à corps égal, d'où le corps relevé. */
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--ink);
}
.form-control-invite::placeholder { color: rgba(91,59,46,.45); }
.form-control-invite:focus {
  outline: none;
  border-color: var(--terracotta);
  background: #fff;
  color: var(--ink);
}
textarea.form-control-invite { resize: vertical; }

/* Le raccourci `background` ci-dessus écrase le chevron de Bootstrap : on le
   redessine pour que le champ reste identifiable comme une liste déroulante. */
select.form-control-invite {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C65A3A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 12px;
}
select.form-control-invite option { background-color: #fff; color: var(--ink); }

/* Bouton principal : le seul aplat de terracotta plein du parcours invité. */
.btn-invite-solid {
  min-height: 50px;
  background: var(--terracotta-btn);
  border: 1px solid var(--terracotta-btn);
  color: var(--cream);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: .04em;
  width: 100%;
}
.btn-invite-solid:hover { background: var(--roux); border-color: var(--roux); color: #fff; }

.btn-invite-outline {
  min-height: 48px;
  background: transparent;
  border: 1px solid rgba(198,90,58,.55);
  color: var(--terracotta-ink);
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 15px;
  width: 100%;
}
.btn-invite-outline:hover { background: var(--terracotta-btn); color: var(--cream); }

.alert-invite {
  border: 1px solid rgba(198,90,58,.45);
  padding: 18px 20px;
  background: rgba(255,255,255,.55);
  color: var(--ink);
  border-radius: 4px;
}
.alert-invite.alert-invite--error {
  border-color: #B5391C;
  background: rgba(181,57,28,.09);
}

.thankyou {
  border: 1px solid rgba(198,90,58,.45);
  padding: 24px;
  text-align: center;
  background: rgba(255,255,255,.55);
}
.thankyou .script-title { font-size: 34px; margin: 0; color: var(--terracotta); }
.thankyou p { font-size: 14px; color: var(--ink); margin-top: 6px; }

/* Guestbook */
.guest-entry {
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  background: rgba(255,255,255,.5);
  margin-bottom: 12px;
}
.guest-entry .author { font-family: var(--font-script); font-size: 24px; color: var(--terracotta); }
.guest-entry .text { font-size: 14px; line-height: 1.7; color: var(--ink); }

/* Messages de validation. Ils étaient stylés en ligne dans chaque vue, ce qui
   ne pouvait pas suivre le fond. */
.field-error { display: block; margin-top: 4px; font-size: 13px; color: #A8331A; }

.footer-block {
  position: relative;
  background: var(--nude);
  padding: 34px 26px 40px;
  text-align: center;
  overflow: hidden;
}

/* Ornement de l'angle bas droit du pied de page. */
.pied-coin {
  position: absolute;
  bottom: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Le bouquet photographié est calé dans l'angle haut gauche de son cadre :
   un demi-tour (symétrie centrale) l'amène exactement dans l'angle bas droit,
   en miroir de celui du compte à rebours. */
.pied-coin--fleur { right: 0; transform: rotate(180deg); }
/* Les filets de la clausule s'arrêtent avant le bouquet au lieu de s'y
   planter. */
@media (min-width: 421px) { .merci:not(.merci--coeur) { padding-inline: 34px; } }

.footer-block > *:not(.pied-coin) { position: relative; z-index: 1; }
.footer-block img { width: 120px; height: auto; margin: 0 auto 14px; }
/* Le monogramme au-dessus fixe une largeur sur `.footer-block img`, plus
   spécifique que `.pied-coin` : il faut la reprendre ici, marge comprise, sinon
   les ornements héritent des 120 px du monogramme et de sa marge basse. */
.footer-block img.pied-coin { width: 76px; margin: 0; }
.footer-date { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.footer-contact { margin-top: 20px; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
/* Coupée comme sur le carton, une virgule par ligne, quand la place le
   permet ; au téléphone le texte coule librement. */
.footer-citation {
  max-width: 100%;
  margin: 22px auto 26px;
  font-family: var(--font-script);
  font-size: 23px;
  line-height: 1.45;
  color: var(--terracotta-ink);
}
/* Deux numéros côte à côte, l'un sous l'autre quand la place manque. */
.footer-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.footer-phones .footer-phone { margin-top: 0; }
.footer-phone {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  padding: 10px 18px; border: 1px solid rgba(198,90,58,.55); border-radius: 4px;
  font-family: var(--font-heading); font-size: 16px; color: var(--terracotta-ink); text-decoration: none;
}
.footer-phone:hover { background: var(--terracotta-btn); color: var(--cream); }

/* Clausule de l'affiche. Les filets sont en flex:1 avec une largeur plafonnée :
   ils se partagent la place restante et se raccourcissent d'eux-mêmes quand la
   ligne manuscrite passe sur deux lignes, sur un écran étroit. */
.merci {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 34px;
}

.merci-trait {
  flex: 1 1 0;
  max-width: 92px;
  min-width: 20px;
  height: 1px;
  background: rgba(153, 70, 45, .45);
}

.merci-trait--court { flex: 0 0 46px; max-width: 46px; }

.merci-texte {
  flex: 0 1 auto;
  font-family: var(--font-script);
  font-size: 24px;
  line-height: 1.3;
  color: var(--terracotta-ink);
  text-align: center;
}

.merci--coeur { gap: 12px; margin-top: 8px; }

.text-invite-muted { color: var(--ink-soft); }

a { color: var(--terracotta-ink); }

/* Résumé de validation côté client (jquery.validate.unobtrusive) */
.validation-summary-valid { display: none; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: #B5391C !important; }

/* ---------- Liste de cadeaux ---------- */

.gift-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 26px;
}

@media (min-width: 520px) {
  .gift-grid { grid-template-columns: 1fr 1fr; }
}

.gift-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.gift-card-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.gift-card-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sand);
}

.gift-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }

.gift-card-name {
  font-family: var(--font-heading);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 4px;
  line-height: 1.25;
}

.gift-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* Barre de remplissage : segment encaissé, puis segment en attente de vérification. */
.gift-progress {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--nude);
  margin-top: auto;
}

.gift-progress-done { background: var(--terracotta); }

.gift-progress-pending {
  background: repeating-linear-gradient(
    45deg,
    rgba(198, 90, 58, .45),
    rgba(198, 90, 58, .45) 4px,
    rgba(198, 90, 58, .2) 4px,
    rgba(198, 90, 58, .2) 8px
  );
}

.gift-amounts {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.gift-collected {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--terracotta-ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.gift-target { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }

.gift-pending-note { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin-top: 3px; }

.gift-funded {
  margin-top: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2F7D44;
  border: 1px solid rgba(47, 125, 68, .4);
  border-radius: 4px;
  padding: 9px;
}

.btn-gift {
  display: block;
  margin-top: 12px;
  text-align: center;
  min-height: 44px;
  padding: 11px;
  background: var(--terracotta-btn);
  border: 1px solid var(--terracotta-btn);
  border-radius: 4px;
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 15px;
  text-decoration: none;
}

.btn-gift:hover { background: var(--roux); color: #fff; }

/* Page de participation */
.gift-page { max-width: 620px; margin: 0 auto; padding: 0 0 40px; }

.channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.channel-option { position: relative; }

.channel-option input { position: absolute; opacity: 0; pointer-events: none; }

.channel-option label {
  display: block;
  cursor: pointer;
  border: 1px solid rgba(198, 90, 58, .35);
  border-radius: 6px;
  padding: 12px 10px;
  text-align: center;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 15px;
  min-height: 60px;
}

.channel-option input:checked + label {
  background: var(--terracotta-btn);
  color: var(--cream);
  border-color: var(--terracotta-btn);
}

.channel-option .channel-number {
  display: block;
  font-size: 12px;
  opacity: .75;
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: 2px;
}

/* ---------- Fenêtres de participation ---------- */

.gift-modal .modal-content {
  background: var(--cream);
  border: none;
  border-radius: 10px;
}

.gift-modal .modal-header {
  border-bottom: 1px solid var(--line);
  padding: 16px 22px;
}

.gift-modal .modal-title {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--ink);
  margin: 0;
}

.gift-modal .modal-body { padding: 20px 22px; }

.gift-modal .modal-footer {
  border-top: 1px solid var(--line);
  padding: 14px 22px;
  gap: 8px;
}

.modal-remaining {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}

.modal-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--terracotta-ink);
  margin-bottom: 5px;
}

.modal-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(198, 90, 58, .35);
  border-radius: 4px;
  font-size: 15px;
  color: var(--ink);
}

.modal-input:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(198, 90, 58, .12);
}

textarea.modal-input { min-height: 60px; resize: vertical; }

.modal-channels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.modal-channel input { position: absolute; opacity: 0; pointer-events: none; }

.modal-channel label {
  display: block;
  cursor: pointer;
  border: 1px solid rgba(198, 90, 58, .35);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 14.5px;
  color: var(--ink);
  background: #fff;
  min-height: 56px;
}

.modal-channel input:checked + label {
  background: var(--terracotta-btn);
  border-color: var(--terracotta-btn);
  color: var(--cream);
}

.modal-channel input:focus-visible + label { box-shadow: 0 0 0 3px rgba(198, 90, 58, .3); }

.modal-channel-number {
  display: block;
  font-size: 11.5px;
  opacity: .8;
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: 2px;
}

.modal-note {
  font-size: 12.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.modal-error {
  border: 1px solid #D9534F;
  background: rgba(217, 83, 79, .08);
  color: #A33;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 13.5px;
}

.btn-modal-solid {
  background: var(--terracotta-btn);
  border: 1px solid var(--terracotta-btn);
  color: var(--cream);
  border-radius: 4px;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-size: 15px;
}

.btn-modal-solid:hover { background: var(--roux); color: #fff; }
.btn-modal-solid:disabled { opacity: .65; }

.btn-modal-ghost {
  background: transparent;
  border: 1px solid rgba(198, 90, 58, .4);
  color: var(--terracotta-ink);
  border-radius: 4px;
  min-height: 44px;
  padding: 10px 18px;
  font-family: var(--font-heading);
  font-size: 15px;
}

.btn-modal-ghost:hover { background: rgba(198, 90, 58, .08); }

/* Renvoi vers la page dédiée depuis l'invitation */
.gift-teaser {
  display: block;
  max-width: 320px;
  margin: 22px auto 0;
  text-align: center;
  min-height: 50px;
  padding: 13px 20px;
  background: var(--terracotta-btn);
  border: 1px solid var(--terracotta-btn);
  border-radius: 4px;
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 16px;
  letter-spacing: .03em;
  text-decoration: none;
}

.gift-teaser:hover { background: var(--roux); color: #fff; }

/* ---------- Dress code ---------- */

.dress-inner { padding: 0 4px; }

.dress-lead {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 4px;
}

.section--floral .swatches { gap: 20px; flex-wrap: wrap; }

.dress-note {
  font-size: 12.5px;
  line-height: 1.7;
  font-style: italic;
  color: var(--ink-soft);
  margin: 18px auto 0;
  max-width: 400px;
}

/* Encadré « Réservés à la mariée », repris de l'affiche. */
.reserved-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  max-width: 420px;
  margin: 4px auto 0;
  padding: 18px 24px;
  border: 1px solid rgba(198, 90, 58, .45);
  border-radius: 4px;
  background: rgba(255, 255, 255, .5);
}

.reserved-swatches { display: flex; gap: 22px; }

.reserved-label { display: flex; align-items: center; gap: 8px; }

.reserved-script {
  font-family: var(--font-script);
  font-size: 25px;
  line-height: 1.15;
  color: var(--terracotta);
  text-align: center;
}

@media (max-width: 420px) {
  /* La bande de coeurs mesure 83px de haut à 390px : le sur-titre démarre juste
     en dessous, sinon un coeur vient se poser sur « ACCÈS ». */
  .section--coeurs { padding-top: 84px; }
  /* La date occupe presque toute la largeur sur un écran étroit : les deux
     bouquets lui passeraient forcément dessus. On les réduit et on descend le
     contenu sous eux, plutôt que de laisser « Samedi » démarrer dans les fleurs. */
  .section--bouquets { padding-top: 88px; }
  .section-title,
  .script-title { font-size: 38px; }
  .floral { width: 56px; }
  .footer-block img.pied-coin { width: 56px; }
  .citation-coupure { display: none; }
  /* La clausule passe sur deux lignes ici : on la borne aux ornements pour
     qu'aucun mot n'aille se poser dans le feuillage. */
  .merci-texte { font-size: 21px; }
  .merci { padding: 0 30px; }
  .reserved-box { gap: 16px; padding: 16px; }
  .reserved-script { font-size: 22px; }
}

/* Mentions sous le formulaire de réponse, reprises du faire-part : un titre
   en graisse, une phrase en italique dessous, comme sur le carton. */
.rsvp-mentions { margin: 4px 0 18px; text-align: center; }
.rsvp-mentions p { margin: 0; font-family: var(--font-heading); font-size: 16px; line-height: 1.6; font-style: italic; }
.rsvp-mentions .rsvp-mention-titre {
  font-family: var(--font-heading);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .03em;
}
.rsvp-mentions .rsvp-mention-titre + .rsvp-mention-titre { margin-top: 10px; }

/* Palette du dress code : dix teintes en deux rangées de cinq, comme sur le
   carton. Les colonnes sont égales et les libellés peuvent passer sur deux
   lignes (« Or champagne », « Vert olive ») sans élargir la grille. */
.palette-titre {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0 18px;
  font-family: var(--font-heading); font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--terracotta-ink);
}
.palette-titre::before, .palette-titre::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.palette {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px 8px;
  margin-bottom: 28px;
}
.palette .swatch { gap: 6px; text-align: center; }
.palette .swatch-color { width: 46px; height: 46px; }
.palette .swatch-label { font-size: 10px; letter-spacing: .12em; line-height: 1.3; }

@media (max-width: 420px) {
  .palette { gap: 16px 4px; }
  .palette .swatch-color { width: 38px; height: 38px; }
  .palette .swatch-label { font-size: 8.5px; letter-spacing: .06em; }
}

/* Liste de mariage déposée en boutique : le nom de la boutique porte
   l'information, il prend la taille d'un sous-titre. */
.liste-boutique {
  margin: 18px 0 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}
.liste-boutique-nom {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--terracotta-ink);
}
.liste-boutique-lieu {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.liste-attention { margin: 20px 0 0; font-size: 14.5px; line-height: 1.8; font-style: italic; }

/* « Je serai présent(e) : » — deux cartes à cocher sous le oui/non. La case
   native reste visible (coloriée en crème) : elle dit sans ambiguïté ce qui
   est coché, et la carte s'éclaire en plus quand le navigateur sait le faire. */
.rsvp-moments { margin: 0 0 18px; padding: 0; border: 0; }
.rsvp-moments legend {
  float: none;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--cream);
}
.rsvp-moment {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(253, 246, 236, .55);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--glisse, .18s), border-color var(--glisse, .18s);
}
.rsvp-moment input {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cream);
  cursor: pointer;
}
.rsvp-moment-nom { font-family: var(--font-heading); font-size: 17px; line-height: 1.25; color: var(--cream); }
.rsvp-moment-heure { font-family: var(--font-heading); font-size: 15px; color: var(--cream); }
.rsvp-moment:has(input:checked) { background: rgba(91, 59, 46, .26); border-color: var(--cream); }
.rsvp-moment:has(input:focus-visible) { outline: 2px solid var(--cream); outline-offset: 3px; }

/* Les deux choix « Oui » / « Non » : le libellé était calé en haut d'un
   bouton de 50 px de haut. On le centre. */
#rsvp-form label.btn-invite-solid,
#rsvp-form label.btn-invite-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* ═══ Finitions ═══════════════════════════════════════════════════════════
   Le site était entièrement figé : pas une transition, pas une ombre, pas un
   anneau de focus ailleurs que sur les champs. C'est ce qui sépare une page
   correcte d'une page soignée, et cela se règle sans toucher ni aux couleurs
   ni à la mise en page. */

:root {
  /* Jamais `all` : on nomme les propriétés animées, sinon le navigateur
     surveille aussi la mise en page et la moindre ombre fait tressauter. */
  --glisse: 180ms cubic-bezier(.4, 0, .2, 1);
}

.btn-invite-solid,
.btn-invite-outline,
.gift-teaser,
.btn-gift,
.footer-phone,
.choice-label,
.swatch-color,
.gift-card,
.guest-entry {
  transition: background-color var(--glisse), border-color var(--glisse),
              color var(--glisse), box-shadow var(--glisse), transform var(--glisse);
}

/* Un soulèvement d'un pixel : assez pour que le bouton réponde, trop peu pour
   que la ligne de base bouge à l'œil. */
.btn-invite-solid:hover,
.btn-invite-outline:hover,
.gift-teaser:hover,
.btn-gift:hover,
.footer-phone:hover { transform: translateY(-1px); }

.btn-invite-solid:active,
.btn-invite-outline:active,
.gift-teaser:active,
.btn-gift:active,
.footer-phone:active { transform: translateY(0); }

.btn-invite-solid:hover { box-shadow: 0 8px 18px -10px rgba(91, 59, 46, .55); }
.gift-teaser:hover { box-shadow: 0 10px 22px -12px rgba(91, 59, 46, .5); }

/* Anneau de focus. Il n'existait que sur les champs : au clavier, les boutons
   et les liens ne se signalaient nulle part. `:focus-visible` et non `:focus`,
   pour ne pas l'imposer à la souris. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--terracotta-btn);
  outline-offset: 3px;
  border-radius: 3px;
}

.section--terracotta a:focus-visible,
.section--terracotta button:focus-visible { outline-color: var(--cream); }

/* Les pastilles du dress code lisaient comme des ronds de couleur ; une ombre
   basse et un liseré clair leur donnent l'épaisseur d'un échantillon de tissu. */
.swatch-color {
  box-shadow: 0 3px 8px -3px rgba(91, 59, 46, .45), inset 0 0 0 2px rgba(253, 246, 236, .55);
}
.swatch:hover .swatch-color { transform: translateY(-2px) scale(1.04); }

/* Les fiches du livre d'or sur le terracotta : le fond creusé les distinguait
   à peine du mur. Les détacher par un voile clair était tentant — et faux :
   le crème du texte n'a que 4,94 de contraste sur ce terracotta, si bien
   qu'un voile clair, même à 10 %, le fait tomber à 4,13, sous le seuil. On
   creuse donc davantage, ce qui gagne du contraste (5,65), et c'est le liseré
   gauche et l'ombre portée qui font le relief. */
.section--terracotta .guest-entry {
  background: rgba(91, 59, 46, .26);
  border-color: rgba(253, 246, 236, .30);
  border-left: 3px solid rgba(253, 246, 236, .6);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 12px 26px -20px rgba(46, 28, 20, .9);
}
.section--terracotta .guest-entry:hover { background: rgba(91, 59, 46, .34); }

.guest-entry {
  border-left: 3px solid rgba(198, 90, 58, .45);
  border-radius: 0 6px 6px 0;
}

/* La carte cadeau était le seul blanc pur du site ; le crème la remet dans le
   ton. L'ombre est très ouverte et très diluée : elle pose la carte sur le
   sable sans jamais se voir comme une ombre. */
.gift-card {
  background: var(--cream);
  box-shadow: 0 14px 30px -22px rgba(91, 59, 46, .55);
}
.gift-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -22px rgba(91, 59, 46, .6);
}

/* Le cadre vide d'un cadeau sans photo occupait 150 px de sable pour une
   icône de 30. Moins haut, le motif plus grand et posé sur un halo, il
   devient un ornement au lieu d'un trou. */
.gift-card-photo--empty {
  height: 118px;
  background:
    radial-gradient(circle at 50% 45%, rgba(253, 246, 236, .95), rgba(253, 246, 236, 0) 62%),
    var(--sand);
}
.gift-card-photo--empty svg { width: 42px; height: 42px; }

/* Le verset flottait dans un simple rectangle de filet. Un fond crème et la
   même ombre très diluée que les cartes cadeaux en font une plaque posée sur
   le sable — angles vifs conservés, c'est ce qui lui donne son air gravé. */
.quote-box {
  background: rgba(253, 246, 236, .6);
  box-shadow: 0 14px 30px -24px rgba(91, 59, 46, .5);
}

/* Jusqu'au bleu de sélection du navigateur, qui jurait avec tout le reste. */
::selection { background: rgba(198, 90, 58, .22); color: var(--chocolat); }
.section--terracotta ::selection { background: rgba(253, 246, 236, .3); color: var(--cream); }

/* ── Apparition au défilement ──
   Chaque section se pose en montant de quelques pixels la première fois
   qu'on l'atteint. La classe est posée par le script : sans JavaScript, rien
   n'est masqué. */
.au-vol { opacity: 0; transform: translateY(16px); }
.au-vol--visible {
  opacity: 1;
  transform: none;
  transition: opacity 640ms ease-out, transform 640ms cubic-bezier(.22, .61, .36, 1);
}

/* À l'impression, rien n'a été « atteint » par le défilement : sans cela, une
   invitation imprimée sortirait à moitié vide. */
@media print {
  .au-vol { opacity: 1 !important; transform: none !important; }
}

/* Le mouvement se supprime en bloc pour qui l'a demandé à son système. Les
   états restent, seule l'animation disparaît. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn-invite-solid, .btn-invite-outline, .gift-teaser, .btn-gift, .footer-phone,
  .choice-label, .swatch-color, .gift-card, .guest-entry { transition: none; }
  .btn-invite-solid:hover, .btn-invite-outline:hover, .gift-teaser:hover,
  .btn-gift:hover, .footer-phone:hover, .gift-card:hover,
  .swatch:hover .swatch-color { transform: none; }
  .au-vol, .au-vol--visible { opacity: 1; transform: none; transition: none; }
}

/* ═══ Page /souvenirs : dépôt des photos et vidéos ═══════════════════════ */
.souvenirs-intro { margin: 14px 0 22px; font-size: 15px; line-height: 1.8; color: var(--ink); }

/* La demande des mariés : un encadré clair et un titre, pour qu'elle se
   lise avant même le formulaire. */
.souvenirs-demande {
  margin: 0 0 26px;
  padding: 18px 20px;
  text-align: center;
  background: rgba(253, 246, 236, .7);
  border: 1px solid rgba(198, 90, 58, .45);
  border-radius: 6px;
  box-shadow: 0 14px 30px -24px rgba(91, 59, 46, .5);
}
.souvenirs-demande svg { display: block; margin: 0 auto 6px; }
.souvenirs-demande p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--ink); }
.souvenirs-demande .souvenirs-demande-titre {
  margin-bottom: 4px;
  font-family: var(--font-script);
  font-size: 27px;
  line-height: 1.2;
  color: var(--terracotta-ink);
}

/* La zone de dépôt : tout le cadre est cliquable, le sélecteur natif est
   caché mais reste accessible au clavier (il garde le focus). */
.souvenirs-depot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 26px 18px;
  text-align: center;
  color: var(--terracotta-ink);
  background: rgba(255, 255, 255, .5);
  border: 1.5px dashed rgba(198, 90, 58, .6);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .18s, border-color .18s;
}
.souvenirs-depot:hover, .souvenirs-depot.est-survolee { background: rgba(255, 255, 255, .8); border-color: var(--terracotta); }
.souvenirs-depot:focus-within { outline: 2px solid var(--terracotta-btn); outline-offset: 3px; }
.souvenirs-depot input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.souvenirs-depot-titre { font-family: var(--font-heading); font-size: 20px; font-weight: 500; }
.souvenirs-depot-aide { font-size: 13px; color: var(--ink-soft); }

.souvenirs-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.souvenirs-liste li {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px;
  padding: 7px 2px; border-bottom: 1px solid var(--line-soft);
  font-size: 14px; color: var(--ink);
}
.souvenirs-liste .nom { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.souvenirs-liste .etat { flex-shrink: 0; color: var(--ink-soft); }
.souvenirs-liste .etat--ok { color: #2F7D44; }
/* Un refus s'explique en toutes lettres : il passe sous le nom du fichier au
   lieu de l'écraser. */
.souvenirs-liste .etat--erreur { flex-basis: 100%; color: #A8331A; font-size: 13px; }

.souvenirs-progression { margin: 0 0 16px; }
.souvenirs-barre { height: 8px; border-radius: 4px; overflow: hidden; background: var(--nude); }
.souvenirs-barre span { display: block; height: 100%; width: 0; background: var(--terracotta); transition: width .2s; }
.souvenirs-etat { margin: 8px 0 0; text-align: center; font-size: 14px; color: var(--ink-soft); }

.souvenirs-merci { margin: 30px 0 0; font-family: var(--font-script); font-size: 24px; color: var(--terracotta-ink); }

/* ═══ Livre d'or : défilé latéral au-delà de cinq messages ═══════════════ */
/* Un message par diapositive, à 86 % de la largeur : le bord du suivant
   dépasse et dit « glissez » sans qu'il faille l'écrire. Les cartes d'une
   même rangée prennent la hauteur de la plus longue, pour que les flèches
   ne sautent pas d'un message à l'autre. */
.livre-defile { margin-top: 6px; }

.livre-defile-piste {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 16px;
  outline: none;
}
.livre-defile-piste::-webkit-scrollbar { display: none; }
.livre-defile-piste:focus-visible {
  outline: 2px solid rgba(253, 246, 236, .8);
  outline-offset: 4px;
  border-radius: 6px;
}

.livre-defile-diapo.guest-entry {
  flex: 0 0 86%;
  margin-bottom: 0;
  scroll-snap-align: start;
  overflow-wrap: anywhere;
}

.livre-defile-commandes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 6px;
}
.livre-defile-commandes[hidden] { display: none; }

.livre-defile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(253, 246, 236, .6);
  border-radius: 50%;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background-color var(--glisse), opacity var(--glisse);
}
.livre-defile-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.livre-defile-btn:hover:not(:disabled) { background: rgba(253, 246, 236, .14); }
.livre-defile-btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 50%; }
.livre-defile-btn:disabled { opacity: .35; cursor: default; }

.livre-defile-compteur {
  min-width: 64px;
  text-align: center;
  font-size: 15px;
  letter-spacing: .12em;
  color: var(--cream);
  font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .livre-defile-piste { scroll-behavior: auto; }
  .livre-defile-btn { transition: none; }
}

/* À l'impression, le défilé redevient une liste. */
@media print {
  .livre-defile-piste { display: block; overflow: visible; }
  .livre-defile-diapo.guest-entry { margin-bottom: 12px; }
  .livre-defile-commandes { display: none; }
}