/* ==========================================================================
   Louise & Anatole — 08.05.2027
   Maquettes Figma : « Desktop — 1440 » (14:2) et « Mobile — 390 » (14:247)
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Amatic SC";
  src: url("fonts/amatic-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --papier: #f4f1ea;
  --encre: #1e2230;
  --encre-douce: #6b6e78;
  --rayure: rgba(30, 34, 48, .05);
  --trait: rgba(30, 34, 48, .6);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.21;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, p { margin: 0; font-weight: 400; }
img { display: block; max-width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--encre);
  outline-offset: 4px;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-douce);
  line-height: 1.3;
}

.filet {
  width: 100%;
  max-width: 1360px;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--encre);
}

.petit-filet { display: none; }
.br-mobile { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   01 · Hero — desktop : la maquette 1440 × 955 est mise à l'échelle (--u)
   ========================================================================== */

.hero {
  --u: min(calc(100vw / 1440), calc(100svh / 955));
  position: relative;
  height: calc(955 * var(--u));
  overflow: hidden;
  background:
    repeating-linear-gradient(to bottom, transparent 0 23px, var(--rayure) 23px 24px)
    0 1px / 100% 24px,
    var(--papier);
  background-repeat: repeat;
}

.hero__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1440 * var(--u));
  height: 100%;
  transform: translateX(-50%);
}

.hero__photos {
  position: absolute;
  z-index: 1;
  left: calc(548 * var(--u));
  top: calc(233 * var(--u));
  width: calc(353 * var(--u));
  height: calc(520 * var(--u));
  will-change: transform;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.hero__photos > .hero__photo:not(:first-child) { display: none; }

.hero__trail {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__names {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}

.hero__name {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__name--1 {
  top: calc(70 * var(--u));
  font-size: calc(236 * var(--u));
  letter-spacing: .02em;
}

.hero__name--2 {
  top: calc(692 * var(--u));
  font-size: calc(200 * var(--u));
  letter-spacing: .02em;
}

.hero__amp { display: none; }

.hero__meta,
.hero__countdown {
  position: absolute;
  z-index: 3;
  font-family: var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__meta {
  top: calc(498 * var(--u));
  font-size: max(10px, calc(13 * var(--u)));
}
.hero__meta--left { left: calc(80 * var(--u)); }
.hero__meta--right { right: calc(80 * var(--u)); }

.hero__countdown {
  left: 0;
  right: 0;
  top: calc(901 * var(--u));
  text-align: center;
  font-size: max(10px, calc(11 * var(--u)));
  color: var(--encre-douce);
}

/* Traînée de photos (desktop) */
.trail-photo {
  position: absolute;
  width: calc(118 * var(--u));
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(20 * var(--u));
  background: #fff;
  box-shadow: 0 2px 10px rgba(30, 34, 48, .14);
  pointer-events: none;
  animation: trail var(--trail-life, 800ms) ease-out forwards;
}
.trail-photo span {
  display: block;
  aspect-ratio: 2 / 3;
  background-repeat: no-repeat;
}

@keyframes trail {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.85); }
  12%  { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(.94); }
}

/* Curseur polaroïd (desktop) */
.curseur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  width: 30px;
  padding: 3px 3px 9px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(30, 34, 48, .25);
  pointer-events: none;
  transform-origin: 0 0;
}
.curseur span {
  display: block;
  aspect-ratio: 1;
  background: var(--encre) url("assets/photo.webp") 0 0 / 200% auto no-repeat;
}
.has-curseur .curseur { display: block; }
.has-curseur,
.has-curseur * { cursor: none !important; }

/* ==========================================================================
   03 · Programme
   ========================================================================== */

.programme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 40px 40px 120px;
}

.programme__date {
  margin-top: 84px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
}

.programme__temps {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: start;
  width: 100%;
  max-width: 1359px;
}

.temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 0 48px;
  text-align: center;
}

.temps__dessin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 420px;
  max-width: 100%;
  height: 373px;
}
.temps__dessin .croquis { width: 380px; max-width: 100%; }
.temps__dessin--serveurs .croquis { width: 420px; }
.croquis img { width: 100%; height: auto; }

.temps__titre {
  font-size: 44px;
  line-height: 1.21;
}

.temps__texte {
  font-size: 21px;
  line-height: 1.21;
}

.lien-adresse {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .35s ease;
}
.lien-adresse:hover,
.lien-adresse:focus-visible { background-size: 100% 1px; }

.programme__separateur {
  width: 1px;
  height: 520px;
  background: var(--trait);
}
.programme__puis { display: none; }

/* Croquis qui se dessinent au scroll (révélé par JS ; visibles sans JS) */
.js .croquis {
  --p: 0;
  clip-path: polygon(0 0, calc(var(--p) * 115%) 0, calc(var(--p) * 115% - 15%) 100%, 0 100%);
}

/* ==========================================================================
   06 · Liste de mariage
   ========================================================================== */

.liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 45px;
  padding: 40px 40px 96px;
  text-align: center;
}

.liste__illustration {
  padding-top: 60px;
  mix-blend-mode: multiply;
}
.liste__illustration img {
  width: 284px;
  height: 300px;
  object-fit: contain;
}

.liste__titre {
  font-size: 12px;
}

.liste__texte {
  max-width: 540px;
  font-size: 22px;
  line-height: 1.21;
}

.bouton {
  display: inline-block;
  margin-top: 45px;
  padding: 16px 28px;
  border: 1px solid var(--encre);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.bouton:hover,
.bouton:focus-visible {
  background: var(--encre);
  color: var(--papier);
}
.bouton[aria-disabled="true"] { cursor: default; }
.bouton[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--encre);
}

/* ==========================================================================
   08 · Photomaton
   ========================================================================== */

.photomaton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px 40px 96px;
  text-align: center;
}
.cabine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

/* La cabine dessinée : le rideau s'ouvre au survol (desktop) ou au défilement (mobile, .is-ouverte) */
.cabine__porte {
  display: none;
  width: min(400px, 82vw);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.cabine[data-etat="accueil"] .cabine__porte,
.cabine[data-etat="erreur"] .cabine__porte { display: block; }

.cabine__dessin {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cabine__dessin .rideau {
  transform-box: fill-box;
  transform-origin: 100% 0;
  transition: transform .9s cubic-bezier(.65, 0, .25, 1);
}
.cabine__dessin .eclat { opacity: 0; }

.cabine__porte:hover .rideau,
.cabine__porte:focus-visible .rideau,
.cabine.is-ouverte .rideau { transform: scaleX(.2); }

.cabine__porte:hover .eclat,
.cabine__porte:focus-visible .eclat,
.cabine.is-ouverte .eclat { animation: eclat 1.6s ease-in-out .7s infinite; }

@keyframes eclat {
  0%, 70%, 100% { opacity: 0; }
  78%           { opacity: 1; }
}
.cabine__porte:focus-visible { outline-offset: 8px; }

/* Écran de prévisualisation : même format qu'une case de la bande (536 × 842) */
.cabine__ecran {
  position: relative;
  display: none;
  width: min(300px, 72vw);
  aspect-ratio: 536 / 842;
  overflow: hidden;
  container-type: size;
  background: #111;
  outline: 10px solid #ecebe7;
  box-shadow: 0 0 0 11px rgba(30, 34, 48, .12), 0 18px 40px rgba(30, 34, 48, .18);
}
.cabine__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  filter: grayscale(1) contrast(1.25) brightness(1.12);
}
.cabine__panneau {
  position: absolute;
  left: -3%;
  right: 4%;
  bottom: -4%;
  height: 43%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#f1f1ef, #e3e3e0);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, .35);
  transform: rotate(-1.2deg);
  transform-origin: 50% 0;
}
.cabine__panneau span {
  font-family: "Amatic SC", var(--serif);
  font-weight: 400;
  font-size: 22cqh;
  line-height: 1;
  letter-spacing: .1em;
  color: #222;
}
.cabine__decompte {
  position: absolute;
  inset: 0 0 43% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34cqh;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.cabine__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.cabine__flash.is-flash { animation: flash .45s ease-out; }
@keyframes flash {
  from { opacity: .95; }
  to   { opacity: 0; }
}

.cabine__resultat {
  display: none;
  width: min(340px, 80vw);
  height: auto;
  box-shadow: 0 2px 6px rgba(30, 34, 48, .12), 0 18px 40px rgba(30, 34, 48, .18);
  transform: rotate(-1.5deg);
}

.cabine__message:empty { display: none; }
.cabine__message,
.cabine__question { font-size: 22px; line-height: 1.21; }
.cabine__question { display: none; }

.cabine__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
}
.cabine__actions .bouton { margin-top: 0; background: none; color: var(--encre); cursor: pointer; }
.cabine__actions .bouton:hover,
.cabine__actions .bouton:focus-visible { background: var(--encre); color: var(--papier); }
.cabine__actions [data-action] { display: none; }

.lien-bouton {
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.lien-bouton:hover { color: var(--encre); }

/* Déclencheur rond et croix de fermeture */
.cabine__declencheur {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1.5px solid var(--encre);
  border-radius: 50%;
  background: radial-gradient(circle, var(--encre) 0 22px, transparent 23px);
  cursor: pointer;
  transition: transform .2s ease;
}
.cabine__declencheur:hover { transform: scale(1.06); }
.cabine__declencheur:active { transform: scale(.94); }

.cabine__fermer {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  cursor: pointer;
}
.cabine[data-etat="prise"] .cabine__fermer { display: none; }

/* États de la cabine */
.cabine[data-etat="camera"] [data-action="declencher"],
.cabine[data-etat="resultat"] [data-action="envoyer"],
.cabine[data-etat="resultat"] [data-action="garder"],
.cabine[data-etat="resultat"] [data-action="recommencer"] { display: inline-block; }

.cabine[data-etat="camera"] .cabine__ecran,
.cabine[data-etat="prise"] .cabine__ecran { display: block; }

.cabine[data-etat="resultat"] .cabine__resultat,
.cabine[data-etat="resultat"] .cabine__question { display: block; }

/* ==========================================================================
   07 · Fin
   ========================================================================== */

.fin {
  padding: 90px 20px;
  background: var(--encre);
  color: var(--papier);
  text-align: center;
}
.fin p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ==========================================================================
   Mobile — maquette 390
   ========================================================================== */

@media (max-width: 699px) {
  .hero {
    --m: calc(100vw / 390);
    height: auto;
    padding: calc(43 * var(--m)) 0 calc(40 * var(--m));
  }

  .hero__stage {
    position: static;
    width: auto;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
      "photo photo photo photo"
      "names names names names"
      ".     left  right .    "
      "count count count count";
    column-gap: calc(17 * var(--m));
  }

  .hero__photos {
    grid-area: photo;
    position: relative;
    left: auto;
    top: auto;
    justify-self: center;
    width: calc(220 * var(--m));
    height: calc(324 * var(--m));
  }

  .hero__photos.is-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .hero__photos.is-carousel::-webkit-scrollbar { display: none; }
  .hero__photos.is-carousel > .hero__photo {
    display: block;
    flex: 0 0 100%;
    scroll-snap-align: center;
  }

  .hero__trail { display: none; }

  .hero__names {
    grid-area: names;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(21 * var(--m));
  }

  .hero__name {
    position: static;
    font-size: calc(65 * var(--m));
    line-height: .9;
    letter-spacing: 0;
  }
  .hero__name--1 { order: 1; }
  .hero__amp {
    order: 2;
    display: block;
    margin: calc(-2 * var(--m)) 0;
    font-size: calc(44 * var(--m));
    font-style: italic;
    line-height: 1;
  }
  .hero__name--2 { order: 3; }
  .hero__amp-inline {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .hero__meta,
  .hero__countdown {
    position: static;
    font-size: max(10px, calc(11 * var(--m)));
  }
  .hero__meta { margin-top: calc(22 * var(--m)); color: var(--encre); }
  .hero__meta--left { grid-area: left; }
  .hero__meta--right { grid-area: right; }
  .hero__countdown { grid-area: count; margin-top: calc(22 * var(--m)); }

  /* Programme */
  .programme {
    gap: 28px;
    padding: 24px 20px 72px;
  }
  .programme__date {
    margin-top: 0;
    font-size: 12px;
  }
  .programme__temps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 350px;
    margin-top: 56px;
  }
  .temps {
    gap: 12px;
    width: 100%;
    padding: 0;
  }
  .temps__dessin {
    width: 100%;
    height: 200px;
    margin-bottom: 6px;
  }
  .temps__dessin .croquis { width: 204px; }
  .temps__dessin--serveurs {
    height: auto;
    padding-top: 10px;
  }
  .temps__dessin--serveurs .croquis { width: 100%; }
  .temps__titre { font-size: 30px; }
  .temps__texte {
    font-size: 17px;
    line-height: 1.4;
  }
  .petit-filet {
    display: block;
    width: 32px;
    height: 1px;
    margin: 0;
    border: 0;
    background: rgba(30, 34, 48, .7);
  }
  .br-mobile { display: inline; }

  .programme__separateur {
    display: flex;
    align-items: center;
    gap: 14px;
    width: auto;
    height: auto;
    background: none;
  }
  .programme__separateur::before,
  .programme__separateur::after {
    content: "";
    width: 64px;
    height: 1px;
    background: var(--trait);
  }
  .programme__puis {
    display: block;
    font-size: 34px;
    line-height: 1.21;
    text-transform: uppercase;
  }

  /* Liste de mariage */
  .liste {
    gap: 18px;
    padding: 24px 20px 80px;
  }
  .liste__illustration { padding-top: 40px; }
  .liste__illustration img {
    width: 218px;
    height: 230px;
  }
  .liste__texte {
    max-width: 320px;
    font-size: 17px;
    line-height: 1.4;
  }
  .bouton { margin-top: 38px; }

  /* Photomaton */
  .photomaton {
    gap: 18px;
    padding: 24px 20px 80px;
  }
  .cabine__message,
  .cabine__question {
    max-width: 320px;
    font-size: 17px;
    line-height: 1.4;
  }
  .cabine { margin-top: 24px; }

  .fin { padding: 60px 20px; }
}

@media (max-width: 359px) {
  .bouton {
    padding-inline: 18px;
    letter-spacing: .16em;
  }
}

/* ==========================================================================
   Mouvement réduit
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .croquis { clip-path: none; }
  .hero__trail { display: none; }
  .cabine__flash.is-flash { animation: none; }
  .cabine__dessin .rideau { transition: none; }
  .cabine__dessin .eclat { animation: none !important; }
  .lien-adresse,
  .bouton { transition: none; }
}