/* Magique Wedding : le programme du jour posé sur les photos de la journée */

@font-face { font-family: "Bodoni Moda"; src: url(assets/fonts/BodoniModa.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(assets/fonts/BodoniModa-Italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(assets/fonts/HankenGrotesk.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --papier: #fff5f2;
  --papier-2: #f8e9e3;
  --terra: #cb6d5a;
  --terra-fonce: #9a4433;
  --terra-bouton: #b05442;
  --encre: #2b1e19;
  --encre-douce: #5e4a42;
  --trait: rgba(154, 68, 51, 0.28);
  --nuit: #0f0d10;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --gouttiere: clamp(16px, 4vw, 56px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--terra) transparent; }
body {
  margin: 0; background: var(--papier); color: var(--encre);
  font: 400 1.0625rem/1.6 var(--sans); font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
::selection { background: var(--terra); color: var(--papier); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.015em; }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0 0 0.9em; }

/* ---------- Les photos de la journée, fixes derrière tout ---------- */
#photos { position: fixed; inset: 0; height: 100vh; height: 100lvh; z-index: 0; overflow: hidden; background: #2a1f1b; }
.plan { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.plan:first-child { opacity: 1; visibility: visible; }
.plan img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%);
  transform: scale(1.1); transform-origin: 50% 45%; will-change: transform; backface-visibility: hidden; }
/* Même photo que l'accueil, resserrée sur la table */
.plan--detail img { transform-origin: var(--origine, 50% 85%); }
@media (prefers-reduced-motion: reduce) { .plan:not(.plan--detail) img { transform: none; } }
.voile-haut { position: fixed; inset: 0 0 auto 0; height: 140px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(28, 18, 14, 0.38), rgba(28, 18, 14, 0)); }
.voile-bas { position: fixed; inset: auto 0 0 0; height: 46vh; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(28, 18, 14, 0.55), rgba(28, 18, 14, 0.18) 55%, rgba(28, 18, 14, 0)); }
.voile-gauche { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: opacity 0.8s var(--sortie);
  background: linear-gradient(100deg, rgba(24, 16, 12, 0.7) 0%, rgba(24, 16, 12, 0.5) 36%, rgba(24, 16, 12, 0) 64%); }
.apres-accueil .voile-gauche { opacity: 0; }
.est-soir .voile-haut { height: 170px; background: linear-gradient(to bottom, rgba(28, 18, 14, 0.58), rgba(28, 18, 14, 0)); }
/* Le soir, l'ombre des cartes prend la chaleur des guirlandes */
.est-nuit .programme { box-shadow: 0 30px 70px -26px rgba(60, 26, 6, 0.75), 0 0 0 1px rgba(255, 200, 140, 0.08), 0 2px 6px rgba(30, 16, 10, 0.2); }

/* ---------- Écran d'attente ---------- */
#chargement { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 0.6rem;
  background: var(--papier); transition: opacity 0.9s var(--sortie), visibility 0.9s; }
#chargement.fini { opacity: 0; visibility: hidden; }
#chargement img { width: 60px; margin-bottom: 1.2rem; }
.chargement-heure { font: italic 500 3.4rem/1 var(--serif); color: var(--terra); margin: 0; font-variant-numeric: lining-nums; }
.chargement-texte { color: var(--encre-douce); margin: 0; }
.chargement-barre { width: 180px; height: 1px; background: var(--trait); margin-top: 1rem; overflow: hidden; }
.chargement-barre span { display: block; height: 100%; background: var(--terra); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--sortie); }

/* ---------- En-tête ---------- */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 2rem;
  padding: 18px var(--gouttiere); color: #fff; transition: color 0.6s; }
.marque { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; }
.marque img { width: 22px; filter: brightness(0) invert(1); transition: filter 0.6s; }
.marque span { font: 500 1.2rem/1 var(--serif); letter-spacing: 0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25); }
.menu { display: flex; gap: 1.6rem; font-size: 0.95rem; }
.menu a { text-decoration: none; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); padding: 6px 0; background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.35s var(--sortie); }
.menu a:hover { background-size: 100% 1px; }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 46px; padding: 0 1.4rem;
  font: 600 0.95rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; border-radius: 3px; border: 1px solid transparent; cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--sortie), box-shadow 0.25s; }
.bouton--plein { background: var(--terra-bouton); color: #fff; box-shadow: 0 6px 18px -8px rgba(20, 10, 5, 0.45); }
.bouton--plein:hover { background: var(--terra-fonce); transform: translateY(-1px); }
.bouton--plein:active { transform: translateY(0); }
.bouton--trait { background: transparent; color: var(--terra-fonce); border-color: var(--terra); }
.bouton--trait:hover { background: var(--terra-bouton); border-color: var(--terra-bouton); color: #fff; }
.bouton--trait[aria-pressed="true"] { background: var(--terra-bouton); border-color: var(--terra-bouton); color: #fff; }
.bouton--large { width: 100%; min-height: 54px; font-size: 1rem; }

/* ---------- Horloge du jour ---------- */
.horloge { transition: opacity 0.5s var(--sortie); }
.horloge { left: auto; }
@media (min-width: 861px) {
  .carte-droite .horloge { right: auto; left: var(--gouttiere); justify-items: start; text-align: left; }
}
.horloge-cachee .horloge { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.horloge { position: fixed; right: var(--gouttiere); bottom: clamp(18px, 4vh, 40px); z-index: 10; text-align: right; color: #fff; pointer-events: none;
  display: grid; justify-items: end; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.horloge-heure { font: italic 500 clamp(3.4rem, 9vw, 6rem)/0.9 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: "opsz" 96; }
.horloge-moment { font: 500 0.95rem/1.2 var(--sans); letter-spacing: 0.02em; margin-top: 0.4rem; opacity: 0.92; }

/* ---------- Sections ---------- */
main { position: relative; z-index: 5; }
.moment { position: relative; min-height: 190vh; padding: 0 var(--gouttiere); }
.moment--accueil { min-height: 135vh; }

.accueil { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(32px, 9vh, 96px); color: #fff; max-width: 40rem; }
.accueil h1 { font-size: clamp(3.2rem, 8vw, 6rem); line-height: 0.95; letter-spacing: -0.025em; font-weight: 500; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.3); }
.accueil-texte { font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 34rem; margin: 1.4rem 0 1.8rem; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
.accueil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; }
.lien-defiler { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; text-decoration: none; font-weight: 500; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.lien-defiler svg { animation: descend 2.4s var(--sortie) infinite; }
@keyframes descend { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Le programme : une carte imprimée posée sur la scène */
.programme { position: sticky; top: max(96px, 14vh); width: min(30rem, 100%); padding: clamp(28px, 3vw, 40px);
  background: var(--papier); color: var(--encre); border-radius: 2px;
  box-shadow: 0 30px 60px -28px rgba(30, 16, 10, 0.55), 0 2px 6px rgba(30, 16, 10, 0.12);
  outline: 1px solid var(--trait); outline-offset: -10px; }
.programme h2 { margin-bottom: 0.9rem; }
.programme p { color: var(--encre-douce); }
.programme-formule { font: italic 500 1.15rem/1.3 var(--serif); color: var(--terra-fonce) !important; margin-bottom: 1rem !important; }
.liste { list-style: none; padding: 0; margin: 1.1rem 0 0; border-top: 1px solid var(--trait); }
.liste li { padding: 0.7rem 0 0.7rem 1.4rem; border-bottom: 1px solid var(--trait); position: relative; font-size: 0.98rem; }
.liste li::before { content: ""; position: absolute; left: 0.1rem; top: 1.2rem; width: 0.55rem; height: 1px; background: var(--terra); }
.tarif { margin: 1.2rem 0 0 !important; font-size: 0.92rem; }
.aparte { font: italic 500 1.2rem/1.4 var(--serif); color: var(--terra-fonce) !important; margin-top: 1.1rem; }

.programme--oriane { width: min(46rem, 100%); display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: start; }
.portrait { margin: 0; }
.portrait img { aspect-ratio: 2 / 3; object-fit: cover; object-position: 20% 18%; border-radius: 1px; }
.citation { margin: 1.2rem 0 0; font: italic 500 1.3rem/1.35 var(--serif); color: var(--terra-fonce); text-wrap: balance; }

.programme--avis { width: min(36rem, 100%); }
.note { font-size: 0.92rem; }
.avis { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trait); }
.avis blockquote { margin: 0; font: italic 400 1.08rem/1.5 var(--serif); color: var(--encre); }
.avis figcaption { margin-top: 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--terra-fonce); }

/* Côté droit pour certaines sections, pour laisser voir la scène */
#decoration .programme, #oriane .programme { margin-left: auto; margin-right: clamp(0px, 6vw, 120px); }

/* ---------- Fin de journée : gâteau et contact ---------- */
.moment--fin { min-height: auto; padding-bottom: 0; }
.programme--gateau { top: max(96px, 16vh); margin-bottom: 70vh; }
.programme--gateau .bouton { margin-top: 0.6rem; }

.contact { position: relative; margin: 0 calc(var(--gouttiere) * -1); padding: clamp(56px, 8vw, 110px) var(--gouttiere) 40px;
  background: var(--papier); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.contact h2 { margin-bottom: 1.6rem; }
.deroule ol { list-style: none; margin: 0; padding: 0; counter-reset: etape; }
.deroule li { position: relative; padding: 0 0 1.6rem 3rem; counter-increment: etape; }
.deroule li::before { content: counter(etape); position: absolute; left: 0; top: -0.2rem; font: italic 500 2rem/1 var(--serif); color: var(--terra); }
.deroule li + li { border-top: 1px solid var(--trait); padding-top: 1.4rem; }
.deroule li + li::before { top: 1.2rem; }
.deroule h3 { margin-bottom: 0.3rem; }
.duree { font-size: 0.92rem; font-weight: 600; color: var(--terra-fonce); margin-bottom: 0.5rem; }
.deroule p { color: var(--encre-douce); max-width: 34rem; }

.formulaire { background: #fff; padding: clamp(24px, 3.4vw, 44px); border-radius: 2px; outline: 1px solid var(--trait); outline-offset: -10px;
  box-shadow: 0 30px 60px -36px rgba(80, 40, 25, 0.45); align-self: start; }
.formulaire-intro { color: var(--encre-douce); margin-bottom: 1.6rem; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.champ { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--encre); }
.champ--large { margin-top: 1.2rem; }
.champ input, .champ select, .champ textarea { font: 400 1rem/1.4 var(--sans); color: var(--encre); background: var(--papier); border: 1px solid transparent;
  border-bottom-color: rgba(43, 30, 25, 0.35); border-radius: 2px 2px 0 0; padding: 0.7rem 0.75rem; width: 100%; transition: border-color 0.2s, background-color 0.2s; caret-color: var(--terra); }
.champ input::placeholder, .champ textarea::placeholder { color: #7a645b; }
.champ input:hover, .champ select:hover, .champ textarea:hover { border-bottom-color: var(--terra); }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--terra); background: #fff; }
.champ [aria-invalid="true"] { border-color: #b3261e; background: #fff4f2; }
.champ textarea { resize: vertical; min-height: 7rem; }
.formules { border: 0; padding: 0; margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.formules legend { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; padding: 0; }
.formules label { position: relative; cursor: pointer; }
.formules input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.formules span { display: inline-block; padding: 0.55rem 0.9rem; border: 1px solid var(--trait); border-radius: 3px; font-size: 0.92rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.formules label:hover span { border-color: var(--terra); }
.formules input:checked + span { background: var(--terra-bouton); border-color: var(--terra-bouton); color: #fff; }
.formules input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.erreur { color: #b3261e; font-weight: 600; font-size: 0.95rem; margin: 1rem 0 0; }
.formulaire .bouton { margin-top: 1.4rem; }
.formulaire-note { font-size: 0.88rem; color: var(--encre-douce); margin: 0.8rem 0 0; }

.pied { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.4rem; margin-top: 1rem; border-top: 1px solid var(--trait); font-size: 0.95rem; }
.pied a { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.pied a:hover { color: var(--terra-fonce); text-decoration: underline; }
.pied svg { color: var(--terra); flex: none; }
.pied-titre { font: italic 500 1.15rem/1.3 var(--serif); margin-bottom: 0.8rem; }
.horaires { color: var(--encre-douce); }
.pied-mentions { color: var(--encre-douce); font-size: 0.86rem; }

/* La nuit : en-tête et horloge restent clairs, la carte reste papier */
.est-nuit .voile-bas { background: linear-gradient(to top, rgba(10, 8, 10, 0.6), rgba(10, 8, 10, 0)); }

/* ---------- Trous de la maquette ---------- */
.trou { background: repeating-linear-gradient(-45deg, rgba(203, 109, 90, 0.16) 0 6px, rgba(203, 109, 90, 0.05) 6px 12px); color: var(--terra-fonce); padding: 0.05em 0.4em; border-radius: 2px; font-style: italic; }
.trous { position: fixed; left: 50%; transform: translateX(-50%); top: 22px; z-index: 30; max-width: 260px; font-size: 0.78rem; line-height: 1.4; background: #fff; color: var(--encre); padding: 10px 12px; border-radius: 3px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.35); opacity: 0.92; }
.trous summary { cursor: pointer; }
.trous ul { margin: 0.4rem 0 0; padding-left: 1rem; }

/* ---------- Petits écrans ---------- */
@media (max-width: 860px) {
  .menu { display: none; }
  .entete { gap: 1rem; padding-top: 14px; }
  .entete .bouton { min-height: 40px; padding: 0 1rem; font-size: 0.88rem; }
  .marque span { font-size: 1.05rem; }
  .horloge { top: 70px; bottom: auto; right: var(--gouttiere); z-index: 4; } /* sous les cartes */
  .horloge-heure { font-size: 2.6rem; }
  .horloge-moment { font-size: 0.85rem; }
  .moment { min-height: 0; padding-top: 85vh; padding-bottom: 70vh; }
  .moment--accueil { padding-top: 0; padding-bottom: 20vh; }
  .moment--fin { padding-bottom: 0; }
  /* Une carte passe sous l'en-tête : sur téléphone l'horloge serait coupée par le bandeau clair, on la cache */
  .sous-carte .horloge { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
  .programme { position: relative; top: auto; }
  #decoration .programme, #oriane .programme { margin-right: 0; }
  .programme--oriane { grid-template-columns: 1fr; gap: 1.2rem; }
  .portrait img { aspect-ratio: 4 / 5; object-position: 35% 30%; }
  .programme--gateau { margin-bottom: 60vh; }
  .contact { grid-template-columns: 1fr; }
  .champs { grid-template-columns: 1fr; }
  .pied { grid-template-columns: 1fr; gap: 1.4rem; }
  .trous { display: none; }
  .plan img { object-position: var(--pos-m, 50% 50%); }
  .plan--detail img { transform-origin: var(--origine-m, var(--origine, 50% 85%)); }
  .accueil { padding-bottom: 40px; }
  .voile-gauche { background: linear-gradient(to top, rgba(24, 16, 12, 0.82) 0%, rgba(24, 16, 12, 0.7) 55%, rgba(24, 16, 12, 0) 78%); }
}

/* Arrivée sur le contact : l'en-tête passe en encre sur papier */
.entete { transition: color 0.4s, background-color 0.4s; }
.au-contact .entete, .sous-carte .entete { color: var(--encre); background: rgba(255, 245, 242, 0.94); box-shadow: 0 1px 0 var(--trait); }
.au-contact .marque img, .sous-carte .marque img { filter: none; }
.au-contact .marque span, .au-contact .menu a, .sous-carte .marque span, .sous-carte .menu a { text-shadow: none; }
.au-contact .voile-haut, .au-contact .voile-bas { opacity: 0; }