/* Titres au caractère faire-part — servie par le site lui-même (aucun CDN). */
@font-face {
  font-family: "EBGaramond";
  src: url("/fonts/EBGaramond.woff2") format("woff2");
  font-display: swap;
}

:root {
  --lin: #FBF7EE;        /* ivoire — papier du faire-part */
  --lin-creux: #E7DCC2;  /* surface intermédiaire / bordures */
  --olive: #635B46;      /* brun chaud — structure & texte courant */
  --olive-clair: #7A6228; /* or profond — 4,5:1 sur l'ivoire (accroches, indices) */
  --encre: #2C2A24;      /* encre chaude — titres & écrans photo */
  --citron: #C9A64D;     /* or — accent médian */
  --citron-vif: #DEC06A; /* or clair — haut de dégradé */
  --citron-bas: #B08D3B; /* or profond — base d'ombre */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "EBGaramond", Georgia, "Times New Roman", serif;

  /* grain de glaçure — bruit fractal, réutilisé sur le fond et l'émail */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--lin);
  background-image:
    radial-gradient(150% 85% at 50% -14%, rgba(222, 192, 106, 0.16), transparent 52%),
    radial-gradient(120% 80% at 50% 118%, rgba(176, 141, 59, 0.10), transparent 60%);
  color: var(--olive);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
}

/* grain de céramique posé sur toute la surface, très discret */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

main { height: 100dvh; position: relative; z-index: 1; }
section { height: 100dvh; display: flex; flex-direction: column; }
section[hidden] { display: none; }

/* ---------- Accueil ---------- */
#home {
  overflow-y: auto;
  align-items: center;
  justify-content: center;
  animation: ecran-entree 0.55s ease both;
}
.home-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  /* Remplissage plafonné. En vw pur, il se calcule sur le VIEWPORT alors que la
     boîte est plafonnée à 460px : sur un écran de 3400px, 6vw = 204px de chaque
     côté ne laissaient que 52px de contenu, et l'accueil s'empilait lettre par
     lettre. Invisible sur téléphone (6vw ≈ 23px, sous le plafond), mais c'est
     l'écran de la démo, que les prospects ouvrent depuis un ordinateur. */
  padding:
    clamp(24px, 7vw, 52px)
    clamp(18px, 6vw, 34px)
    calc(clamp(18px, 6vw, 34px) + env(safe-area-inset-bottom));
  text-align: center;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--olive-clair);
  padding-left: 0.42em; /* compense l'interlettrage à droite */
}
.couple {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.9;
  color: var(--encre);
  letter-spacing: 0.01em;
}
.cname {
  font-size: clamp(2.7rem, 13vw, 4.4rem);
}
/* esperluette pivot, centrée entre les deux prénoms, façon faire-part */
.amp {
  font-family: var(--serif);
  /* or profond seul (sans ombre portée) : sur l'ivoire, l'or clair est illisible
     et l'ancienne ombre « peinte » appartenait à l'émail citron. */
  color: #8A6F2E;
  font-size: clamp(1.6rem, 6.6vw, 2.5rem);
  line-height: 1;
  margin: 0.1em 0 0.06em;
}
.date {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--olive-clair);
  padding-left: 0.34em;
}

.sprig { display: block; width: min(240px, 66%); height: auto; margin: 1.5rem auto 1.3rem; }

.question {
  margin: 0 0 1.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 5.6vw, 1.7rem);
  color: var(--olive);
  text-wrap: balance;
}

/* ---------- Carreaux de faïence ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Borné : en vw pur, un grand écran gonflait les espaces (2.8vw ≈ 90 px)
     et écrasait les carreaux à ~26 px. */
  gap: clamp(8px, 2.8vw, 14px);
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}
/* Sans ceci, `display: grid` l'emporte sur la règle [hidden] du navigateur et
   l'attribut reste sans effet (même piège que .share-bar[hidden] plus bas). */
.grid[hidden] { display: none; }
.grid button {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 12px;
  /* or du faire-part : même dégradé que les boutons de la page de vente */
  background:
    linear-gradient(162deg, var(--citron-vif) 0%, var(--citron) 58%, var(--citron-bas) 100%);
  color: #241F14;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 9vw, 2.7rem);
  line-height: 1;
  cursor: pointer;
  /* ombre courte et posée + micro-relief interne, mat */
  box-shadow:
    0 3px 7px rgba(44, 42, 36, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -3px 7px rgba(120, 92, 8, 0.12);
  transition: transform 0.09s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  animation: tuile-pose 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
/* grain de glaçure sur l'émail — casse le côté plat sans salir */
.grid button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 80px 80px;
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* liseré fin, en retrait du bord du carreau — façon dorure de faire-part */
.grid button::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 8px;
  border: 1.25px solid rgba(122, 98, 40, 0.55);
  pointer-events: none;
  z-index: 1;
}
.grid button:active {
  transform: scale(0.94);
  box-shadow:
    0 1px 4px rgba(44, 42, 36, 0.18),
    inset 0 3px 8px rgba(120, 92, 8, 0.28);
}
.grid button[disabled] {
  cursor: not-allowed;
  color: var(--olive-clair);
  background: var(--lin-creux);
  box-shadow: inset 0 0 0 1px rgba(99, 91, 70, 0.14);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--olive) 14%, transparent);
  opacity: 0.55;
  animation: none;
}
.grid button[disabled]::before {
  border-color: rgba(99, 91, 70, 0.2);
  border-color: color-mix(in srgb, var(--olive) 20%, transparent);
}
.grid button[disabled]::after { opacity: 0.04; }

/* cascade d'apparition */
.grid button:nth-child(1) { animation-delay: 0.04s; }
.grid button:nth-child(2) { animation-delay: 0.09s; }
.grid button:nth-child(3) { animation-delay: 0.14s; }
.grid button:nth-child(4) { animation-delay: 0.19s; }
.grid button:nth-child(5) { animation-delay: 0.24s; }
.grid button:nth-child(6) { animation-delay: 0.29s; }
.grid button:nth-child(7) { animation-delay: 0.34s; }
.grid button:nth-child(8) { animation-delay: 0.39s; }
.grid button:nth-child(9) { animation-delay: 0.44s; }

@keyframes tuile-pose {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ecran-entree {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hint {
  margin: 1.6rem 0 0;
  font-size: 0.9rem;
  color: var(--olive-clair);
}

/* ---------- Écran pose ---------- */
#pose {
  background: var(--encre);
  animation: ecran-entree 0.4s ease both;
}
.pose-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 5vw, 28px) clamp(12px, 5vw, 28px) 0;
}
/* cadre faïence : passe-partout lin épais + liseré olive, ombre profonde */
.pose-frame {
  display: flex;
  max-width: 100%;
  max-height: 100%;
  padding: min(3.4vw, 15px);
  background: var(--lin);
  border-radius: 6px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  animation: pose-entree 0.42s ease both;
}
#pose-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1.5px solid rgba(176, 141, 59, 0.55);
  border-radius: 2px;
}
@keyframes pose-entree {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}
.pose-caption {
  margin: 0;
  padding: 1rem 1rem 0.4rem;
  text-align: center;
  font-family: var(--serif);
  font-size: 1.28rem;
  letter-spacing: 0.01em;
  color: var(--citron);
}
/* Quota de la démo publique : discret, sous la légende de la pose. Il annonce
   la limite au lieu de la subir — la rareté est un choix, pas une panne. */
.demo-quota {
  margin: 0;
  padding: 0 1rem 0.2rem;
  text-align: center;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(244, 239, 228, 0.72);
}
.demo-quota[hidden] { display: none; }
.demo-quota b { color: var(--citron); font-weight: 600; }
.pose-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
}
.pose-actions-row { display: flex; gap: 0.7rem; }
.pose-actions-row .btn { flex: 1; }
.btn-wide { width: 100%; }
.btn {
  flex: 1;
  padding: 1rem;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.09s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-glaze {
  position: relative;
  border: none;
  color: #241F14;
  overflow: hidden;
  background: linear-gradient(158deg, var(--citron-vif) 0%, var(--citron) 46%, var(--citron-bas) 100%);
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -4px 9px rgba(120, 92, 8, 0.16);
}
.btn-glaze::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 90px 90px;
  opacity: 0.09;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.btn-outline {
  background: transparent;
  color: var(--citron);
  border: 1.6px solid rgba(201, 166, 77, 0.7);
  border-color: color-mix(in srgb, var(--citron) 70%, transparent);
}

/* ---------- Écran comparaison ---------- */
#compare {
  background: var(--encre);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
  animation: ecran-entree 0.4s ease both;
}
.compare-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 3vw, 20px);
  align-items: center;
  padding: clamp(10px, 4vw, 24px) clamp(10px, 4vw, 24px) 0;
}
.compare-cell {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.compare-cell .pose-frame {
  width: 100%;
  padding: min(2.4vw, 10px);
  animation: pose-entree 0.42s ease both;
}
.compare-cell img {
  display: block;
  width: 100%;
  max-height: 46vh;
  object-fit: contain;
  border: 1.5px solid rgba(176, 141, 59, 0.55);
  border-radius: 2px;
}
.compare-cell figcaption {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--citron);
}
.compare-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem 0.3rem;
}
.compare-actions-row {
  display: flex;
  gap: 0.6rem;
}
.compare-actions .btn {
  flex: 1;
  padding: 0.95rem 0.4rem;
  font-size: 0.98rem;
}
/* Bascule discrète : Télécharger/Partager côte à côte (défaut) ⇄ photo seule. */
.save-mode-toggle {
  align-self: center;
  margin: 0.05rem auto 0.15rem;
  padding: 0.3rem 0.5rem;
  background: transparent;
  border: none;
  /* posée sur l'écran sombre (--encre) : --olive-clair, calibré pour le fond lin,
     n'y passait qu'à 3,4:1. Même crème atténuée que la barre de partage. */
  color: rgba(251, 247, 238, 0.72);
  color: color-mix(in srgb, var(--lin) 72%, transparent);
  font-family: var(--sans);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.save-mode-toggle:active { opacity: 0.7; }

/* Barre de partage : petite, en bas — roue + compte à rebours + retrait */
.share-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.2rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  font-family: var(--sans);
  font-size: 0.82rem;
  color: rgba(251, 247, 238, 0.72);
  color: color-mix(in srgb, var(--lin) 72%, transparent);
}
.share-bar[hidden] { display: none; }
.spinner {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(201, 166, 77, 0.28);
  border-color: color-mix(in srgb, var(--citron) 28%, transparent);
  border-top-color: var(--citron);
  animation: spin 0.8s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.share-label { letter-spacing: 0.01em; }
.share-bar.shared .share-label { color: var(--citron); }
.share-bar.shared .share-label::before { content: "✓ "; }
.share-bar.declined .share-label {
  color: rgba(251, 247, 238, 0.55);
  color: color-mix(in srgb, var(--lin) 55%, transparent);
}
/* Envoi qui traîne ou qui a renoncé. Volontairement HORS des deux palettes :
   c'est un état d'alerte, son rôle est justement de ne pas se fondre dans
   l'habillage — l'invité doit voir au premier coup d'œil que ce n'est pas le
   « ✓ Reçue ». Ambre clair et non corail : le fond est ici sombre (--encre), où
   le corail de panel.css (calibré pour du texte sombre sur fond clair) serait
   illisible. Contrastes mesurés sur --encre : 6,6:1 en citron, 5,3:1 en poudre. */
.share-bar.pending .share-label { color: #E8A87C; }
.share-optout {
  border: none;
  background: none;
  padding: 0.25rem 0.4rem;
  color: var(--citron);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.share-optout[hidden] { display: none; }

/* ---------- Écran de remerciement ---------- */
#thanks {
  background: var(--encre);
  align-items: center;
  /* Centrage vertical par margin:auto sur .thanks-inner : en paysage téléphone
     le contenu dépasse la hauteur, et un justify-content:center couperait le
     haut sans permettre de défiler jusqu'aux boutons. */
  overflow-y: auto;
  animation: ecran-entree 0.4s ease both;
}
.thanks-inner {
  margin: auto;
  text-align: center;
  padding: clamp(18px, 8vw, 48px) clamp(18px, 8vw, 48px)
    calc(clamp(18px, 8vw, 48px) + env(safe-area-inset-bottom));
  animation: pose-entree 0.5s ease both;
}
.thanks-mark {
  width: 4.6rem;
  height: 4.6rem;
  margin: 0 auto 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 2.4rem;
  color: #241F14;
  background: linear-gradient(158deg, var(--citron-vif) 0%, var(--citron) 46%, var(--citron-bas) 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.thanks-msg {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 6vw, 1.9rem);
  line-height: 1.3;
  color: var(--lin);
  text-wrap: balance;
}
.thanks-sub {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  color: rgba(251, 247, 238, 0.6);
  color: color-mix(in srgb, var(--lin) 60%, transparent);
}

/* Compte à rebours de l'offre de lancement. Discret par défaut : c'est une
   information, pas une alarme. L'état « urgent » (3 jours ou moins) se contente
   d'un or plus soutenu — ni rouge, ni clignotement, le thème faire-part ne s'y
   prête pas. */
.compteur { font-variant-numeric: tabular-nums; }
.compteur.urgent { color: #B08D3B; font-weight: 600; }
/* Ecart au brief : #demo-buy a un fond sombre (--encre), comme #thanks juste
   au-dessus. Sans cette couleur claire, le texte du compteur (non-urgent)
   heriterait de la couleur de corps sombre et deviendrait illisible — meme
   traitement que .thanks-sub, juste au-dessus dans le DOM. */
#demo-buy .compteur {
  color: rgba(251, 247, 238, 0.6);
  color: color-mix(in srgb, var(--lin) 60%, transparent);
}
/* L'or profond de .compteur.urgent (#B08D3B) est illisible sur le fond encre :
   il faut re-accentuer ici, avec un sélecteur qui l'emporte sur la règle
   #demo-buy .compteur ci-dessus (1,1,0) — donc au moins 1 identifiant + 2
   classes. On reprend l'or clair du dégradé de .thanks-mark (--citron-vif),
   déjà utilisé comme accent sur ce même fond sombre. */
#demo-buy .compteur.urgent {
  color: #DEC06A;
}

/* ---------- Galerie « Mes photos » ---------- */
/* Bouton d'accès sur l'accueil (fond clair : couleurs olive, pas citron). */
.btn-gallery {
  margin-top: 1.5rem;
  width: 100%;
  color: var(--olive);
  background: rgba(250, 247, 235, 0.6);
  border: 1.6px solid rgba(99, 91, 70, 0.45);
  border-color: color-mix(in srgb, var(--olive) 45%, transparent);
}
#gallery {
  background: var(--encre);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
  animation: ecran-entree 0.4s ease both;
}
.gallery-head { padding: 1.2rem 1rem 0.2rem; text-align: center; }
.gallery-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  color: var(--citron);
}
.gallery-note {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: rgba(251, 247, 238, 0.55);
  color: color-mix(in srgb, var(--lin) 55%, transparent);
}
.gallery-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.9rem;
}
.gallery-card {
  background: rgba(251, 247, 238, 0.07);
  background: color-mix(in srgb, var(--lin) 7%, transparent);
  border: 1px solid rgba(251, 247, 238, 0.14);
  border-color: color-mix(in srgb, var(--lin) 14%, transparent);
  border-radius: 14px;
  padding: 0.7rem;
}
.gallery-card-top { display: flex; align-items: center; gap: 0.75rem; }
.gallery-thumb {
  width: 74px;
  height: 74px;
  flex: none;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}
.gallery-meta { flex: 1; min-width: 0; color: var(--lin); }
.gallery-pose { margin: 0; font-weight: 600; }
.gallery-when {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: rgba(251, 247, 238, 0.6);
  color: color-mix(in srgb, var(--lin) 60%, transparent);
}
.gallery-card-actions { display: flex; gap: 0.5rem; margin-top: 0.7rem; }
.gallery-card-actions .btn {
  flex: 1;
  padding: 0.55rem 0.3rem;
  font-size: 0.8rem;
  border-radius: 10px;
}
.gallery-delete {
  color: rgba(251, 247, 238, 0.7);
  color: color-mix(in srgb, var(--lin) 70%, transparent);
  border-color: rgba(251, 247, 238, 0.35);
  border-color: color-mix(in srgb, var(--lin) 35%, transparent);
}
.gallery-empty {
  margin: 2.5rem 1rem;
  text-align: center;
  color: rgba(251, 247, 238, 0.6);
  color: color-mix(in srgb, var(--lin) 60%, transparent);
}
.gallery-foot { padding: 0.4rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom)); }

/* ---------- Bandeau navigateur intégré iOS ---------- */
/* Fixé en haut pour ne pas décaler les sections plein écran (100dvh). N'apparaît
   que si un navigateur intégré iOS est détecté (voir lib/inapp-browser.js). */
.inapp-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 1rem 0.7rem;
  background: var(--lin-creux);
  border-bottom: 1.5px solid var(--olive);
  box-shadow: 0 4px 14px rgba(44, 42, 36, 0.18);
  animation: banner-descend 0.35s ease both;
}
.inapp-banner[hidden] { display: none; }
.inapp-text {
  flex: 1;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--encre);
}
.inapp-banner .btn {
  flex: 0 0 auto;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  background: var(--olive);
  color: var(--lin);
  border: none;
}
@keyframes banner-descend {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- Accessibilité ---------- */
:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; border-radius: 4px; }
#pose :focus-visible, #compare :focus-visible, #thanks :focus-visible,
#gallery :focus-visible { outline-color: var(--citron); }

@media (prefers-reduced-motion: reduce) {
  .grid button, #pose-img, .pose-frame, #home, #pose, #compare, #thanks, #gallery,
  .thanks-inner, .inapp-banner { animation: none !important; }
  .spinner { animation-duration: 2.4s; } /* on garde une rotation lente comme indicateur d'activité */
  .btn, .grid button { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THÈME BAPTÊME — aquarelle rose poudré + sauge + or, repris du faire-part.
   Redéfinit les jetons de couleur/typo ; quelques réglages structurels
   adoucissent l'émail « céramique » du thème citron (tuiles, boutons, grain).
   ═══════════════════════════════════════════════════════════════════════ */
body[data-theme="poudre"] {
  --lin: #FAF6F1;         /* papier ivoire chaud */
  --lin-creux: #EFE3DA;   /* creux discret */
  --olive: #6E6257;       /* taupe doux — texte courant */
  --olive-clair: #7B6E62; /* taupe clair — accroches, dates, indices (4,5:1 sur l'ivoire) */
  --encre: #453C36;       /* taupe profond — fond des écrans photo & titres */
  --citron: #C3A059;      /* or antique — accents (lettrage, liserés, SVG) */
  --citron-vif: #DAC08A;  /* or clair */
  --citron-bas: #A9863F;  /* or profond (ombre) */
  /* rose poudré — action principale, en écho aux carreaux et à la guirlande */
  --rose: #E4B9BD;        /* rose de la guirlande */
  --rose-vif: #F2D5D7;    /* rose clair (éclat) */
  --rose-bas: #C9959B;    /* rose profond (ombre) */
  --serif: "Marcellus", Georgia, serif;
  --script: "Pinyon Script", "Marcellus", cursive;
}
/* fond : halos rose poudré (haut) et sauge (bas) au lieu du citron/olive */
body[data-theme="poudre"] {
  background-image:
    radial-gradient(150% 85% at 50% -14%, rgba(216, 160, 165, 0.16), transparent 55%),
    radial-gradient(120% 80% at 50% 118%, rgba(138, 160, 126, 0.14), transparent 60%);
}
body[data-theme="poudre"]::before { opacity: 0.03; } /* grain céramique presque effacé */

/* accroche & date : lettrage doré délicat */
body[data-theme="poudre"] .eyebrow,
body[data-theme="poudre"] .date { color: var(--citron-bas); }

/* nom vedette en script doré (faire-part) */
body[data-theme="poudre"] .couple {
  font-family: var(--script);
  color: var(--citron);
  line-height: 1.02;
  letter-spacing: 0.01em;
}
body[data-theme="poudre"] .cname { font-size: clamp(3.2rem, 16vw, 5rem); }
body[data-theme="poudre"] .question { color: var(--olive); }

/* guirlande florale visible ici ; brindille d'olive du thème citron masquée */
.motif { display: none; }
body[data-theme="poudre"] .motif {
  display: block;
  width: min(240px, 66%);
  height: auto;
  margin: 1.5rem auto 1.3rem;
}
body[data-theme="poudre"] .sprig { display: none; }

/* tuiles : aquarelle rose poudré, fin liseré doré, ombre douce (plus d'émail dur) */
body[data-theme="poudre"] .grid button {
  background: linear-gradient(160deg, #F6E7E4 0%, #EBD2D2 60%, #E3C4C6 100%);
  color: var(--encre);
  box-shadow:
    0 3px 8px rgba(150, 110, 110, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body[data-theme="poudre"] .grid button::before { border-color: rgba(195, 160, 89, 0.6); }
body[data-theme="poudre"] .grid button::after { opacity: 0.05; }
body[data-theme="poudre"] .grid button:active {
  box-shadow:
    0 1px 4px rgba(150, 110, 110, 0.2),
    inset 0 3px 8px rgba(170, 120, 90, 0.16);
}
body[data-theme="poudre"] .grid button[disabled] {
  background: var(--lin-creux);
  color: var(--olive-clair);
}

/* Action principale : rose poudré (et non l'or), en écho aux carreaux de
   l'accueil et à la guirlande. Texte en taupe profond : sur ce rose clair, du
   blanc tomberait à 1,8:1 — illisible. Le taupe donne 6,1:1. */
body[data-theme="poudre"] .btn-glaze {
  background: linear-gradient(158deg, var(--rose-vif) 0%, var(--rose) 48%, var(--rose-bas) 100%);
  color: var(--encre);
  box-shadow:
    0 3px 9px rgba(90, 50, 55, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 9px rgba(150, 95, 100, 0.18);
}
body[data-theme="poudre"] .thanks-mark {
  background: linear-gradient(158deg, var(--rose-vif) 0%, var(--rose) 48%, var(--rose-bas) 100%);
  color: var(--encre);
}

/* cadre photo : passe-partout ivoire, liseré doré discret */
body[data-theme="poudre"] #pose-img,
body[data-theme="poudre"] .compare-cell img { border-color: rgba(195, 160, 89, 0.5); }
body[data-theme="poudre"] .pose-frame > img { border-color: rgba(195, 160, 89, 0.5); }