/* ============================================================
   Bat-Mitsva de Noy — 15 août 2023
   Reproduction en HTML autonome du site d'origine (bm-noy.com).
   Toutes les couleurs et les tailles viennent du site original.
   ============================================================ */

/* ---------- 1. POLICES (toutes locales, le site marche hors-ligne) ---------- */

/* Cormorant Upright — la navigation, la date du hero, les titres */
@font-face { font-family:'Cormorant Upright'; font-weight:500; font-display:swap;
  src:url('fonts/CormorantUpright-3.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Cormorant Upright'; font-weight:500; font-display:swap;
  src:url('fonts/CormorantUpright-2.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Cormorant Upright'; font-weight:600 700; font-display:swap;
  src:url('fonts/CormorantUpright-6.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Cormorant Upright'; font-weight:600 700; font-display:swap;
  src:url('fonts/CormorantUpright-5.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Cormorant — le texte courant (voir la note « polices » dans LISEZ-MOI.md :
   le site d'origine utilise Cormorant Infant, sa très proche cousine) */
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/Cormorant-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Cormorant'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/Cormorant-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Cormorant'; font-style:italic; font-weight:400 600; font-display:swap;
  src:url('fonts/Cormorant-italique-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Cormorant'; font-style:italic; font-weight:400 600; font-display:swap;
  src:url('fonts/Cormorant-italique-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Libre Caslon Display — les chiffres du compte à rebours */
@font-face { font-family:'Libre Caslon Display'; font-weight:400; font-display:swap;
  src:url('fonts/LibreCaslonDisplay-2.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Libre Caslon Display'; font-weight:400; font-display:swap;
  src:url('fonts/LibreCaslonDisplay-1.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* Montserrat — la pastille « Bat Mitsva » et les libellés du formulaire */
@font-face { font-family:'Montserrat'; font-weight:400 600; font-display:swap;
  src:url('fonts/Montserrat-5.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Montserrat'; font-weight:400 600; font-display:swap;
  src:url('fonts/Montserrat-4.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }


/* ---------- 2. LA PALETTE DU SITE ---------- */

:root {
  --brun:       #502F2B;   /* la couleur signature : nav, boutons, texte  */
  --brun-clair: #6B443F;   /* boutons au survol                          */
  --brun-voile: rgba(71, 40, 36, .72);  /* la pastille du hero           */
  --creme:      #FFF4ED;   /* fond des cartes et de la section RSVP      */
  --blanc:      #FFFFFF;

  /* « Cormorant Infant » et « Plus Jakarta Sans » sont déclarées en premier :
     si tu déposes ces fichiers de police dans fonts/, elles reprennent la main. */
  --titre:   'Cormorant Upright', Georgia, serif;
  --corps:   'Cormorant Infant', 'Cormorant', Georgia, serif;
  --chiffre: 'Libre Caslon Display', Georgia, serif;
  --ui:      'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif;

  --hauteur-nav: 65px;
}


/* ---------- 3. BASES ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--hauteur-nav); }

body {
  margin: 0;
  background: var(--creme);
  color: var(--brun);
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
}

/* tant que l'enveloppe est fermée, on empêche le défilement derrière */
body.pas-de-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }


/* ---------- 4. L'ENVELOPPE À SEQUINS ---------- */

.enveloppe {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-image: url('images/fond-sequins.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.2s ease, visibility 1.2s ease;
}

.enveloppe.disparait { opacity: 0; visibility: hidden; }

/* Le rabat de l'enveloppe : le grand pli en V qui descend du haut.
   C'est juste un voile sombre découpé en polygone — le fond à sequins
   reste visible dessous, comme sur le site d'origine. */
.enveloppe__rabat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 28%, 50% 56%, 0 28%);
  background: linear-gradient(to bottom, rgba(70, 40, 36, .10), rgba(70, 40, 36, .30));
  filter: drop-shadow(0 3px 5px rgba(60, 30, 26, .35));
}

.enveloppe__centre {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* le sceau de cire, dessiné en CSS : un disque bombé avec l'initiale */
.enveloppe__sceau {
  width: 104px;
  height: 104px;
  margin: 0 auto 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 34% 30%, #8A5C4F 0%, #6B3F37 42%, #4A2A26 100%);
  box-shadow:
    inset 0 3px 6px rgba(255, 214, 196, .35),
    inset 0 -5px 10px rgba(35, 16, 13, .55),
    0 6px 16px rgba(60, 30, 26, .45);
}

.enveloppe__sceau span {
  font-family: var(--titre);
  font-size: 46px;
  color: rgba(255, 236, 226, .82);
  text-shadow: 0 1px 1px rgba(35, 16, 13, .6);
}

.enveloppe__bouton {
  font-family: var(--titre);
  font-size: 20px;
  color: var(--creme);
  background: var(--brun-voile);
  border: none;
  border-radius: 500px;
  padding: 12px 34px;
  cursor: pointer;
  transition: background-color .3s;
}

.enveloppe__bouton:hover,
.enveloppe__bouton:focus-visible { background: var(--brun); }


/* ---------- 5. LA BARRE DE NAVIGATION (pilule brune flottante) ---------- */

.nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(641px, calc(100% - 30px));
  background: var(--brun);
  border-radius: 500px;
  padding: 10px;
}

.nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

/* le petit trait vertical entre deux liens, comme sur le site d'origine */
.nav li + li::before {
  content: '|';
  color: rgba(255, 244, 237, .5);
  margin: 0 14px;
}

.nav a {
  font-family: var(--titre);
  font-size: 15px;
  font-weight: 700;
  color: var(--creme);
  text-decoration: none;
  transition: opacity .3s;
}

.nav a:hover,
.nav a:focus-visible { opacity: .7; }


/* ---------- 6. LE HERO ---------- */

.hero {
  min-height: 100vh;
  background-image: url('images/fond-hero.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 100px 24px 60px;
}

.hero__logo { width: 342px; max-width: 70%; margin-bottom: 18px; }

.hero__date {
  font-family: var(--titre);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--blanc);
  margin: 0 0 22px;
}

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--creme);
  background: var(--brun-voile);
  border-radius: 500px;
  padding: 8px 20px;
  margin: 0;
}

.pastille__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--creme);
}


/* ---------- 7. LE COMPTE À REBOURS ---------- */

.compteur {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0;
  padding: 26px 20px;
  background: var(--creme);
}

.compteur__case {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* le médaillon est une image : le texte se pose par-dessus */
.compteur__cadre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compteur__chiffre {
  position: relative;
  font-family: var(--chiffre);
  font-size: 26px;
  line-height: 1;
  color: var(--brun);
  font-variant-numeric: tabular-nums;   /* les chiffres ne sautillent pas */
}

.compteur__libelle {
  position: relative;
  font-family: var(--corps);
  font-size: 12px;
  color: var(--brun);
  margin-top: 4px;
}


/* ---------- 8. LE GRAND FOND À SEQUINS ---------- */

.sequins {
  background-image: url('images/fond-sequins.jpg');
  background-size: contain;
  background-position: center top;
  padding: 10px 0;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ---------- 9. LES CARTES EN ARCHE ---------- */

/* Trois couches emboîtées, toutes arrondies en arche (border-radius
   énorme), exactement comme sur le site d'origine :
     1. .arche         → le liseré texturé qui fait le tour
     2. .arche__creme  → le disque crème sur lequel on lit le texte
     3. .arche__fleurs → les fleurs posées par-dessus, en haut */
.arche {
  width: min(631px, 94%);
  margin: 0 auto;
  padding: 20px;
  border-radius: 2000px;
  background-image: url('images/arche.webp');
  background-size: cover;
  background-position: center;
}

.arche__creme {
  background: var(--creme);
  border-radius: 2000px;
}

.arche__fleurs {
  border-radius: 2000px;
  padding: 100px 0;
  background-image: url('images/fleurs-arche.png');
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
}

.arche__contenu {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 30px;
  text-align: center;
}


/* ---------- 10. LE TEXTE DES CARTES ---------- */

.texte {
  font-family: var(--corps);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: var(--brun);
  margin: 0 0 18px;
}

.texte--gras { font-weight: 600; }
.texte--serre { margin-top: -12px; }

.prenom {
  font-family: var(--corps);
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brun);
  margin: 10px 0 0;
}

.prenom-second {
  font-family: var(--corps);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brun);
  margin: 0 0 24px;
}

.titre-section {
  font-family: var(--titre);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--brun);
  margin: 0 0 24px;
}

.ornement { width: 130px; margin: 26px auto 0; }


/* ---------- 11. BOUTONS ---------- */

.bouton {
  display: inline-block;
  font-family: var(--titre);
  font-size: 16px;
  color: var(--creme);
  background: var(--brun);
  text-decoration: none;
  border: none;
  border-radius: 6px;
  padding: 10px 26px;
  margin: 6px 0 18px;
  cursor: pointer;
  transition: background-color .3s;
}

.bouton:hover,
.bouton:focus-visible { background: var(--brun-clair); }


/* ---------- 12. RSVP ---------- */

.rsvp {
  background: var(--creme);
  padding: 40px 20px 30px;
}

/* le cadre arrondi à double filet brun, avec les fleurs aux angles */
.cadre-rsvp {
  position: relative;
  width: min(631px, 100%);
  margin: 0 auto;
  padding: 60px 30px 40px;
  background-color: var(--creme);
  background-image: url('images/fleurs-rsvp.webp');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  border: 2px solid var(--brun);
  border-radius: 44px;
  box-shadow: inset 0 0 0 6px var(--creme), inset 0 0 0 8px rgba(80, 47, 43, .55);
}

.formulaire {
  max-width: 430px;
  margin: 0 auto;
}

.champ {
  border: none;
  margin: 0 0 20px;
  padding: 0;
}

.champ label,
.champ legend,
.champ .label {
  display: block;
  font-family: var(--corps);
  font-size: 17px;
  color: var(--brun);
  margin: 0 0 6px;
  padding: 0;
}

.obligatoire { color: #B03A3A; }

.champ input[type="text"] {
  width: 100%;
  font-family: var(--ui);
  font-size: 15px;
  color: var(--brun);
  background: var(--blanc);
  border: 1px solid #E3D8CF;
  border-radius: 8px;
  padding: 12px 14px;
}

.champ input[type="text"]::placeholder { color: #B6A79E; }

.champ input[type="text"]:focus {
  outline: none;
  border-color: var(--brun);
}

/* les deux boutons OUI / NON */
.choix {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.choix__option {
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brun);
  background: var(--blanc);
  border: 1px solid #E3D8CF;
  border-radius: 8px;
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}

/* la vraie case à cocher est masquée : c'est la puce qui l'affiche */
.choix__option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choix__puce {
  width: 16px;
  height: 16px;
  border: 1px solid var(--brun);
  border-radius: 50%;
  flex-shrink: 0;
}

.choix__option:has(input:checked) {
  border-color: var(--brun);
  background: #FBEFE7;
}

.choix__option:has(input:checked) .choix__puce {
  background: var(--brun);
  box-shadow: inset 0 0 0 3px var(--creme);
}

.choix__option:has(input:focus-visible) { outline: 2px solid var(--brun); }

.bouton--envoyer {
  display: block;
  width: 100%;
  font-family: var(--ui);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 14px;
  margin: 6px 0 0;
}

.merci {
  display: none;
  font-family: var(--corps);
  font-size: 18px;
  text-align: center;
  color: var(--brun);
  margin-top: 20px;
}

.merci.visible { display: block; }


/* ---------- 13. PIED DE PAGE ---------- */

.pied {
  background: var(--creme);
  text-align: center;
  padding: 10px 20px 26px;
}

.pied p {
  font-family: var(--corps);
  font-size: 14px;
  color: var(--brun);
  margin: 0;
}


/* ============================================================
   14. MOBILE — la majorité des invités ouvriront le site au téléphone
   ============================================================ */

@media (max-width: 767px) {
  :root { --hauteur-nav: 58px; }

  .nav { top: 12px; padding: 8px; }
  .nav a { font-size: 13px; }
  .nav li + li::before { margin: 0 9px; }

  .hero { padding: 90px 18px 50px; }
  .hero__date { font-size: 16px; }

  .compteur { gap: 14px; padding: 20px 12px; }
  .compteur__case { width: 74px; height: 74px; }
  .compteur__chiffre { font-size: 20px; }
  .compteur__libelle { font-size: 10px; }

  .arche { width: 100%; padding: 12px; }
  .arche__fleurs { padding: 70px 0; }
  .arche__contenu { padding: 0 20px; }

  .texte { font-size: 16px; }
  .prenom { font-size: 32px; }
  .titre-section { font-size: 24px; }

  .cadre-rsvp { padding: 44px 18px 30px; border-radius: 30px; }
}


/* ============================================================
   LE BOUTON MUSIQUE
   Un rond fixe en bas a droite. Quand la musique joue, les quatre
   barres dansent, le bouton respire et une onde s'en echappe.
   Le meme composant est utilise sur tous les sites.
   ============================================================ */

.musique {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--brun);
  background: var(--brun);
  box-sizing: border-box;
  display: none;                /* apparait une fois l'invitation ouverte */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .2s ease, background-color .3s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.musique.visible { display: flex; }

/* l'onde qui s'echappe du bouton pendant la lecture */
.musique::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--brun);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
}

.musique.joue { animation: musique-respire 2s infinite ease-in-out; }
.musique.joue::before { animation: musique-onde 1.5s infinite ease-out; }

@keyframes musique-respire {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

@keyframes musique-onde {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: .8; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

/* les quatre barres de l'egaliseur */
.musique__barres {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 16px;
}

.musique__barres span {
  width: 2.5px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}

/* a l'arret les barres restent basses ; en lecture elles montent en vague */
.musique.joue .musique__barres span {
  animation: musique-vague .45s infinite ease-in-out alternate;
}

.musique.joue .musique__barres span:nth-child(1) { animation-delay: 0s; }
.musique.joue .musique__barres span:nth-child(2) { animation-delay: .15s; }
.musique.joue .musique__barres span:nth-child(3) { animation-delay: .3s; }
.musique.joue .musique__barres span:nth-child(4) { animation-delay: .1s; }

@keyframes musique-vague {
  from { height: 3px; }
  to   { height: 16px; }
}

/* Respecte les personnes qui ont désactivé les animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .musique.joue,
  .musique.joue::before,
  .musique.joue .musique__barres span { animation: none; }
}