/* ==========================================================================
   Mariage de Clémence et Guillaume
   Palette : blanc papier, baby blue, vert pastel, beige, encre bleu nuit
   ========================================================================== */

:root {
  --papier: #FCFBF8;
  --bleu: #C8DEF0;
  --vert: #D2E2C9;
  --beige: #EEE3D0;
  --encre: #22344F;
  --encre-douce: #4A5F7D;
  --lumiere: #F3C56E;
  --alerte: #9E3434;

  /* Teinte de fond courante : mise à jour par le script au fil du défilement */
  --fond: var(--papier);

  --titre: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --texte: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --marge: 24px;
  --doux: cubic-bezier(.2, .7, .2, 1);
}

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

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

body {
  margin: 0;
  background-color: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

main {
  position: relative;
  overflow-x: clip;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

::selection { background: var(--encre); color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

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

.evitement {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding: .6em 1em;
  border-radius: 999px;
  background: var(--encre);
  color: var(--papier);
  text-decoration: none;
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* Points de repère invisibles : le fil part et arrive sur ces ancres */
.ancre {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* ---------- Navigation ---------- */

.navigation {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  padding: 4px;
  border: 1px solid rgba(34, 52, 79, .14);
  border-radius: 999px;
  background: rgba(252, 251, 248, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(34, 52, 79, .55);
  transform: translateX(-50%);
  animation: apparaitre .8s ease 2.1s backwards;
  transition: opacity .25s ease, visibility 0s;
}

/* Sur mobile, la navigation s'efface pendant la saisie pour ne pas recouvrir le formulaire */
@media (max-width: 899px) {
  body:has(#formulaire input[type="text"]:focus, #formulaire textarea:focus) .navigation {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility 0s .25s;
  }
}

.navigation a {
  position: relative;
  padding: .55em 1.05em;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}

.navigation a[aria-current="true"] { color: var(--papier); }

/* Pastille qui glisse sous le chapitre en cours */
.navigation-curseur {
  position: absolute;
  top: 4px;
  left: 0;
  width: var(--curseur-largeur, 0px);
  height: calc(100% - 8px);
  border-radius: 999px;
  background: var(--encre);
  opacity: var(--curseur-visible, 0);
  transform: translateX(var(--curseur-x, 0px));
  transition: transform .5s var(--doux), width .5s var(--doux), opacity .3s ease;
}

@media (min-width: 900px) {
  .navigation {
    top: 18px;
    bottom: auto;
  }
}

/* ---------- Le fil ---------- */

.fil {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

html:not(.js) .fil { display: none; }

.fil-trait {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.seine {
  fill: none;
  stroke: var(--bleu);
  stroke-width: 26;
  stroke-linecap: round;
}

.carte-point { fill: var(--encre); }

.carte-nom {
  fill: var(--encre);
  font-family: var(--texte);
  font-size: 15px;
  font-weight: 500;
}

.carte-nom--depart { text-anchor: end; }

.carte-nom--seine {
  fill: var(--encre-douce);
  font-family: var(--titre);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  text-anchor: middle;
}

.voiture {
  opacity: 0;
  transition: opacity .3s ease;
}
.voiture.visible { opacity: 1; }

.voiture path,
.voiture circle {
  fill: var(--fond);
  stroke: var(--encre);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.voiture-sens {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .28s ease;
}
.voiture-sens.gauche { transform: scaleX(-1); }

/* ---------- Ouverture ---------- */

.ouverture {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(40px, 9vh, 96px) var(--marge) 0;
}

.ouverture-lavis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  background: radial-gradient(60vmax 60vmax at 88% 34%, rgba(238, 227, 208, .75), rgba(238, 227, 208, 0) 70%);
}

/* Deux lavis d'aquarelle qui dérivent très lentement */
.ouverture-lavis::before,
.ouverture-lavis::after {
  content: "";
  position: absolute;
  width: 95vmax;
  height: 95vmax;
  border-radius: 50%;
  animation: deriver 28s ease-in-out infinite alternate;
}

.ouverture-lavis::before {
  top: -48vmax;
  left: -40vmax;
  background: radial-gradient(closest-side, rgba(200, 222, 240, .95), rgba(200, 222, 240, 0));
}

.ouverture-lavis::after {
  right: -46vmax;
  bottom: -52vmax;
  background: radial-gradient(closest-side, rgba(210, 226, 201, .95), rgba(210, 226, 201, 0));
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

@keyframes deriver {
  from { transform: translate3d(-3vmax, -2vmax, 0) scale(1); }
  to { transform: translate3d(5vmax, 4vmax, 0) scale(1.08); }
}

.ouverture-contenu {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.ouverture-invitation {
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  letter-spacing: .04em;
  animation: apparaitre .9s ease .1s both;
}

.noms {
  display: grid;
  margin: .12em 0 .22em;
  font-family: var(--titre);
  font-size: clamp(3.5rem, 17vw, 10rem);
  font-style: italic;
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.015em;
}

.nom--elle {
  justify-self: start;
  padding-left: 3%;
  animation: venir-de-gauche 1.1s var(--doux) .25s both;
}

.nom--lui {
  justify-self: end;
  padding-right: 3%;
  animation: venir-de-droite 1.1s var(--doux) .55s both;
}

.esperluette {
  justify-self: center;
  width: clamp(92px, 27vw, 230px);
  margin: -.13em 0 -.1em;
  line-height: 0;
}

.esperluette svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.esperluette path {
  fill: none;
  stroke: var(--encre);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  animation: tracer 1.7s cubic-bezier(.6, 0, .3, 1) .5s both;
}

/* Graisse et taille optique renforcées : les déliés du Bodoni rendaient le « 4 » trop pâle */
.ouverture-date {
  font-family: var(--titre);
  font-weight: 500;
  font-variation-settings: 'opsz' 10;
  font-size: clamp(1.45rem, 5.4vw, 2.1rem);
  line-height: 1.2;
  animation: apparaitre .9s ease 1.3s both;
}

.ouverture-lieux {
  max-width: 22em;
  margin: .5em auto 0;
  color: var(--encre-douce);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 1.45;
  animation: apparaitre .9s ease 1.45s both;
}

/* Bouton encadré comme les autres (voir .bouton) : ici, seulement sa place et son apparition */
.lien-agenda {
  margin-top: 1.4em;
  animation: apparaitre .9s ease 1.6s backwards;
}

.ouverture-suite {
  position: relative;
  justify-self: center;
  margin: clamp(20px, 4vh, 44px) 0 clamp(96px, 19vh, 180px);
  font-family: var(--titre);
  font-size: 1.15rem;
  font-style: italic;
  animation: apparaitre .9s ease 1.9s both;
}
.ouverture-suite a { text-decoration: none; }
.ouverture-suite .ancre { top: calc(100% + 10px); left: 50%; }

@keyframes apparaitre {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes venir-de-gauche {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}
@keyframes venir-de-droite {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}
@keyframes tracer {
  from { stroke-dashoffset: 1.02; }
  to { stroke-dashoffset: 0; }
}

@media (min-width: 900px) {
  /* La navigation passe en haut : on lui laisse de la place */
  .ouverture { padding-top: 104px; }
  .esperluette path { stroke-width: 1.9; }
}

/* ---------- Chapitres : cérémonie et cocktail ---------- */

.chapitre {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 36px;
  justify-items: center;
  max-width: 1080px;
  margin-inline: auto;
  padding: 11vh var(--marge) 13vh;
  scroll-margin-top: 4vh;
}

.chapitre-texte {
  width: 100%;
  max-width: 30rem;
}

.heure {
  margin-bottom: .08em;
  font-family: var(--titre);
  font-size: clamp(4.6rem, 21vw, 8.5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.02em;
}

h2 {
  margin-bottom: .55em;
  font-family: var(--titre);
  font-size: clamp(1.9rem, 6.4vw, 2.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
}

address {
  margin: 1.1em 0 1.5em;
  padding-left: 16px;
  border-left: 1.5px solid var(--encre);
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
}

/* Dessins au trait */
.dessin {
  position: relative;
  width: 100%;
}
.dessin svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dessin--eglise { max-width: min(82vw, 400px); }
.dessin--eglise .ancre { top: 4.5%; left: 50.3%; }

.dessin--domaine { max-width: 580px; }
.dessin--domaine .ancre { top: 3.4%; left: -1.25%; }

.t {
  fill: none;
  stroke: var(--encre);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.t--fin { stroke-width: 1; opacity: .75; }

.dessin--domaine .t { stroke-width: 1.9; }
.dessin--domaine .t--fin { stroke-width: 1.3; }

/* Guirlande : les ampoules s'allument une fois le dessin terminé */
.ampoule { transition: fill .7s ease; }
.halo {
  fill: var(--lumiere);
  opacity: 0;
  transition: opacity .9s ease;
}
.allume .ampoule { fill: var(--lumiere); }
.allume .halo { opacity: .3; }

.ancre--sortie { bottom: 6vh; left: 50%; }

@media (min-width: 900px) {
  .chapitre {
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    padding-block: 14vh;
  }
  .chapitre--cocktail .dessin { order: 2; }
  .chapitre--cocktail .chapitre-texte { justify-self: end; }
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .6em 1.5em;
  border: 1.5px solid var(--encre);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .15s ease;
}
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton:active { transform: scale(.97); }

.bouton--plein {
  width: 100%;
  background: var(--encre);
  color: var(--papier);
}
.bouton--plein:hover { background: #31486B; }
.bouton--plein:disabled { opacity: .6; cursor: progress; }

/* ---------- La route ---------- */

.route {
  position: relative;
  z-index: 1;
  padding: 2vh var(--marge) 0;
}

.route-texte {
  max-width: 30rem;
  margin-inline: auto;
  text-align: center;
}
.route-texte p { margin-bottom: 1.4em; }

/* Zone laissée libre : le fil y serpente et traverse la Seine */
.route-carte {
  height: clamp(520px, 96vh, 800px);
  max-width: 1080px;
  margin: 5vh auto 0;
}

@media (min-width: 900px) {
  /* Carte plus étroite sur grand écran : les virages gardent leur ampleur */
  .route-carte { max-width: 760px; }
  .seine { stroke-width: 38; }
  .carte-nom--seine { font-size: 22px; }
}

/* ---------- La réponse ---------- */

.reponse {
  position: relative;
  z-index: 1;
  padding: 16vh var(--marge) 12vh;
  scroll-margin-top: -6vh;
}

.carton-zone {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
}
.carton-zone .ancre { top: 0; left: 50%; }

.carton {
  position: relative;
  padding: 34px 22px 26px;
  border-radius: 6px;
  background: var(--papier);
  box-shadow: 0 1px 0 rgba(34, 52, 79, .08), 0 30px 60px -34px rgba(46, 78, 52, .6);
}
.carton[hidden] { display: none; }

.carton-entete {
  margin-bottom: 1.8em;
  text-align: center;
}
.carton-entete h2 { margin-bottom: .35em; }
.carton-delai {
  margin-top: .3em;
  color: var(--encre-douce);
  font-size: 1rem;
}

.champ {
  margin: 0 0 1.5em;
  padding: 0;
  border: 0;
  min-width: 0;
}

.champ label,
.champ legend,
.compteur-libelle {
  display: block;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.facultatif {
  color: var(--encre-douce);
  font-weight: 400;
}

.champ input[type="text"],
.champ textarea {
  display: block;
  width: 100%;
  padding: .5em 0 .45em;
  border: 0;
  border-bottom: 1.5px solid rgba(34, 52, 79, .4);
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  line-height: 1.4;
  resize: vertical;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.champ input[type="text"]:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 1.5px 0 var(--encre);
}
.champ [aria-invalid="true"] { border-color: var(--alerte); }

.choix-options {
  display: flex;
  gap: 10px;
  margin-top: .7em;
}

.option {
  position: relative;
  flex: 1;
  cursor: pointer;
}
.option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .4em .6em;
  border: 1.5px solid rgba(34, 52, 79, .4);
  border-radius: 999px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.option input:checked + span {
  border-color: var(--encre);
  background: var(--encre);
  color: var(--papier);
}
.option input:focus-visible + span {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
}

/* Bloc qui se déplie quand une réponse appelle des précisions */
.repli {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--doux);
}
.repli-contenu {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s .5s;
}
.repli.ouvert { grid-template-rows: 1fr; }
.repli.ouvert > .repli-contenu {
  visibility: visible;
  transition-delay: 0s;
}
html:not(.js) .repli { grid-template-rows: 1fr; }
html:not(.js) .repli-contenu { visibility: visible; }

.compteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.compteur-pas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.compteur-pas button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid rgba(34, 52, 79, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.compteur-pas button:hover:not(:disabled) { background: var(--encre); color: var(--papier); }
.compteur-pas button:active:not(:disabled) { transform: scale(.94); }
.compteur-pas button:disabled { opacity: .3; cursor: default; }
.compteur-pas output {
  min-width: 1.6em;
  font-family: var(--titre);
  font-size: 1.7rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums;
}

.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.erreur {
  margin-top: .45em;
  color: var(--alerte);
  font-size: .98rem;
  line-height: 1.4;
}
.erreur[hidden] { display: none; }
.erreur--envoi { margin: 0 0 1em; }

.confirmation {
  padding-block: 40px 34px;
  text-align: center;
}
.confirmation:focus { outline: none; }
.confirmation h3 {
  margin: .5em 0 .4em;
  font-family: var(--titre);
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}
.confirmation p {
  max-width: 24em;
  margin: 0 auto 1.6em;
}
.dessin-flutes {
  display: block;
  width: 124px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

@media (min-width: 600px) {
  .carton { padding: 48px 48px 40px; }
}

/* ---------- Pied de page ---------- */

.pied {
  position: relative;
  z-index: 1;
  padding: 2vh var(--marge) calc(108px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.pied-noms {
  font-family: var(--titre);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-style: italic;
  line-height: 1.2;
}
.pied a {
  display: inline-block;
  margin-top: 1.2em;
  padding: .3em 0;
  font-size: 1rem;
  text-underline-offset: 5px;
}

@media (min-width: 900px) {
  .pied { padding-bottom: 9vh; }
}

/* ---------- Mouvement réduit : tout est affiché, rien ne bouge ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .esperluette path { stroke-dasharray: none; }
}