/* ============================================================
   Bar Mitzvah Lenny Abitbol — 15 août 2023
   Reproduction en HTML autonome du site bm-lenny-abitbol.com
   Toutes les couleurs et les tailles viennent du site original.
   ============================================================ */

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

/* Antro Vectra Bolder — les grands titres.
   C'est TA police, récupérée telle quelle depuis ton serveur. */
@font-face {
  font-family: 'antro-vectra-bolder';
  src: url('fonts/AntroVectraBolder.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Playfair Display — tout le texte courant */
@font-face { font-family:'Playfair Display'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/PlayfairDisplay-4.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:'Playfair Display'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/PlayfairDisplay-3.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:'Playfair Display'; font-style:italic; font-weight:400 600; font-display:swap;
  src:url('fonts/PlayfairDisplay-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:'Playfair Display'; font-style:italic; font-weight:400 600; font-display:swap;
  src:url('fonts/PlayfairDisplay-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; }

/* 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; }

/* Open Sans — les deux boutons de langue */
@font-face { font-family:'Open Sans'; font-weight:500; font-display:swap;
  src:url('fonts/OpenSans-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:'Open Sans'; font-weight:500; font-display:swap;
  src:url('fonts/OpenSans-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; }

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

:root {
  --bleu:        #2257A7;   /* la couleur signature : texte, titres, boutons */
  --bleu-fonce:  #18478E;   /* boutons au survol                            */
  --creme-couv:  #EFEAE3;   /* fond de la page de garde                     */
  --creme:       #F3EADD;   /* fond des sections                            */
  --creme-rsvp:  #FFF7ED;   /* voile de la section RSVP                     */
  --nav-texte:   #F8F7F3;
  --blanc:       #FFFFFF;

  --titre:  'antro-vectra-bolder', 'Playfair Display', cursive;
  --corps:  'Playfair Display', Georgia, serif;
  --chiffre:'Libre Caslon Display', Georgia, serif;
  --ui:     'Open Sans', system-ui, sans-serif;

  --hauteur-nav: 70px;
}

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

* { box-sizing: border-box; }

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

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

/* Bloque le défilement tant que l'invitation n'est pas ouverte */
body.pas-de-scroll { height: 100vh; overflow: hidden; }

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

/* ---------- 4. PAGE DE GARDE (la couverture à ouvrir) ---------- */

.couverture {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0;
  background-color: var(--creme-couv);
  background-image: url('images/fond-couverture.jpg');
  background-position: center right;
  background-size: cover;
  background-repeat: no-repeat;
}

.couverture__contenu {
  width: 70%;
  text-align: center;
}

.couverture__titre {
  font-family: var(--corps);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--bleu);
  margin: 0 0 10px;
}

.couverture__logo { width: 15%; margin: 0 auto 10px; }

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

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

.compteur__case {
  background-color: transparent;
  border: none;
  border-radius: 100px;
  padding: 6px 14px;
  text-align: center;
}

.compteur__chiffre {
  display: block;
  font-family: var(--chiffre);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1em;
  color: var(--bleu);
}

.compteur__libelle {
  display: block;
  font-family: var(--corps);
  font-size: 11px;
  font-weight: 400;
  color: var(--bleu);
}

/* dans la section, les chiffres sont plus grands */
.compteur--section .compteur__chiffre { font-size: 40px; }

/* ---------- 6. BOUTONS ---------- */

/* « Ouvrir l'invitation » : contour double, fond transparent */
.bouton-ouvrir {
  display: inline-block;
  margin-top: 30px;
  background: transparent;
  color: var(--bleu);
  font-family: var(--corps);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: 4px double var(--bleu);
  border-radius: 4px;
  padding: 14px 26px;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}

.bouton-ouvrir:hover,
.bouton-ouvrir:focus-visible { background: var(--bleu); color: var(--blanc); }

/* « Lien Waze » : plein bleu */
.bouton {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  font-family: var(--corps);
  font-weight: 500;
  text-decoration: none;
  border: none;
  padding: 15px 25px;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color .3s;
}

.bouton:hover,
.bouton:focus-visible { background: var(--bleu-fonce); color: var(--blanc); }

/* ---------- 7. LA BARRE DE NAVIGATION (collante en haut) ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--hauteur-nav);
  background: var(--bleu);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0 15px;
}

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

.nav li { display: flex; align-items: center; }

/* le filet vertical entre deux entrées */
.nav li:not(:last-child)::after {
  content: '';
  height: 1em;
  border-left: 1px solid #F8F7F38A;
  margin: 0 50px;
}

.nav a {
  font-family: var(--corps);
  font-weight: 400;
  color: var(--nav-texte);
  text-decoration: none;
  transition: color .7s;
}

.nav a:hover,
.nav a:focus-visible { color: var(--blanc); }

/* ---------- 8. LES SECTIONS ---------- */

.section {
  position: relative;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--creme);
  background-image: url('images/fond-papier.jpg');
  background-size: 100% auto;
  background-repeat: repeat;
}

/* le voile crème qui adoucit la texture */
.section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--creme);
  opacity: .31;
  pointer-events: none;
}

.section > * { position: relative; z-index: 1; }

.section--torah { padding: 0 0 80px; }

/* la section RSVP : motif discret, presque entièrement voilé de blanc chaud */
.section--rsvp {
  background-color: var(--blanc);
  background-image: url('images/motif-rsvp.png');
  background-size: 19% auto;
  background-position: center center;
  padding: 80px 0;
}

.section--rsvp::before {
  background-color: var(--creme-rsvp);
  opacity: .95;
}

/* la largeur de contenu du site */
.contenu {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- 9. LE SÉPARATEUR EN FEUILLES ---------- */

/* le séparateur : deux rangées de feuilles, et une flèche au milieu */
.separateur {
  width: 62%;
  margin: 15px auto 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.separateur__fleche {
  width: 30px;
  height: 30px;
  flex: none;
  fill: var(--bleu);
}

.separateur__trait {
  flex: 1;
  height: 12.2px;
  background-color: var(--bleu);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 117 26' fill='black' stroke='none'%3E%3Cpath d='M3,1.5C5,4.9,6,8.8,6,13s-1.7,8.1-5,11.5C0.3,21.1,0,17.2,0,13S1,4.9,3,1.5z M16,1.5c2,3.4,3,7.3,3,11.5s-1,8.1-3,11.5c-2-4.1-3-8.3-3-12.5S14,4.3,16,1.5z M29,1.5c2,4.8,3,9.3,3,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S27,4.9,29,1.5z M41.1,1.5C43.7,4.9,45,8.8,45,13s-1,8.1-3,11.5c-2-3.4-3-7.3-3-11.5S39.7,4.9,41.1,1.5zM55,1.5c2,2.8,3,6.3,3,10.5s-1.3,8.4-4,12.5c-1.3-3.4-2-7.3-2-11.5S53,4.9,55,1.5z M68,1.5c2,3.4,3,7.3,3,11.5s-0.7,8.1-2,11.5c-2.7-4.8-4-9.3-4-13.5S66,3.6,68,1.5z M82,1.5c1.3,4.8,2,9.3,2,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S79.3,4.9,82,1.5z M94,1.5c2,3.4,3,7.3,3,11.5s-1.3,8.1-4,11.5c-1.3-1.4-2-4.3-2-8.5S92,6.9,94,1.5z M107,1.5c2,2.1,3,5.3,3,9.5s-0.7,8.7-2,13.5c-2.7-3.4-4-7.3-4-11.5S105,4.9,107,1.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMidYMid meet' overflow='visible' height='100%25' viewBox='0 0 117 26' fill='black' stroke='none'%3E%3Cpath d='M3,1.5C5,4.9,6,8.8,6,13s-1.7,8.1-5,11.5C0.3,21.1,0,17.2,0,13S1,4.9,3,1.5z M16,1.5c2,3.4,3,7.3,3,11.5s-1,8.1-3,11.5c-2-4.1-3-8.3-3-12.5S14,4.3,16,1.5z M29,1.5c2,4.8,3,9.3,3,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S27,4.9,29,1.5z M41.1,1.5C43.7,4.9,45,8.8,45,13s-1,8.1-3,11.5c-2-3.4-3-7.3-3-11.5S39.7,4.9,41.1,1.5zM55,1.5c2,2.8,3,6.3,3,10.5s-1.3,8.4-4,12.5c-1.3-3.4-2-7.3-2-11.5S53,4.9,55,1.5z M68,1.5c2,3.4,3,7.3,3,11.5s-0.7,8.1-2,11.5c-2.7-4.8-4-9.3-4-13.5S66,3.6,68,1.5z M82,1.5c1.3,4.8,2,9.3,2,13.5s-1,7.4-3,9.5c-2-3.4-3-7.3-3-11.5S79.3,4.9,82,1.5z M94,1.5c2,3.4,3,7.3,3,11.5s-1.3,8.1-4,11.5c-1.3-1.4-2-4.3-2-8.5S92,6.9,94,1.5z M107,1.5c2,2.1,3,5.3,3,9.5s-0.7,8.7-2,13.5c-2.7-3.4-4-7.3-4-11.5S105,4.9,107,1.5z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ---------- 10. LES TEXTES ---------- */

.bsd {
  font-family: var(--corps);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--bleu);
  margin: 0 0 10px;
}

.titre-section {
  font-family: var(--titre);
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--bleu);
  margin: 0;
  padding: 10px 0;
  /* Antro Vectra n'existe qu'en un seul graissage. Le site d'origine demande
     600 et laisse le navigateur épaissir lui-même ; ce contour fait la même
     chose, mais de façon identique sur tous les navigateurs. */
  -webkit-text-stroke: 1.1px currentColor;
  paint-order: stroke fill;
}

.texte {
  font-family: var(--corps);
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: var(--bleu);
  margin: 0 0 6px;
}

/* les textes de section sont très resserrés sur le site d'origine */
.texte--resserre { padding: 0 350px; }

.texte--gras   { font-weight: 600; margin-top: -15px; }
.texte--serre  { margin-top: -15px; }
.texte--pensee { font-size: 16px; font-style: italic; padding-top: 20px; }
.texte--maillot { font-size: 20px; font-weight: 600; font-style: italic; padding-top: 30px; }

.logo-section { width: 21%; margin: 0 auto 10px; }

.photo-section { width: 100%; margin: 0 auto; }

/* ---------- 11. LE SÉLECTEUR DE LANGUE ---------- */

.langues {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 20px;
}

.langues a {
  font-family: var(--ui);
  font-weight: 500;
  color: var(--blanc);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--bleu);
  transition: background-color .3s;
}

.langues a:first-child { background: var(--bleu); }
.langues a:last-child  { background: rgba(34, 87, 167, .35); }
.langues a:hover       { background: var(--bleu); }

/* ---------- 12. LE BOUTON MUSIQUE ---------- */

.musique {
  /* Collé au bord droit de l'écran : le demi-losange est arrondi à gauche
     et plat à droite, il est donc fait pour affleurer ce bord. */
  position: fixed;
  right: 0;
  bottom: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bleu);
  color: var(--blanc);
  border: none;
  padding: 7px 10px 7px 12px;
  border-radius: 50px 0 0 50px;   /* le demi-losange du site d'origine */
  cursor: pointer;
  margin: 0;
  transition: background-color .3s;
}

.musique:hover { background: var(--bleu-fonce); }
.musique svg { width: 25px; height: 25px; fill: currentColor; display: block; }
.musique .icone-stop { display: none; }
.musique.joue .icone-play { display: none; }
.musique.joue .icone-stop { display: block; }

/* ---------- 13. LE FORMULAIRE RSVP ---------- */

.bloc-formulaire {
  width: 60%;
  margin: 20px auto 0;
  padding: 0 25px;
}

.formulaire { max-width: 560px; margin: 0 auto; text-align: left; }

.champ { margin-bottom: 18px; }

.champ > label,
.champ .intitule {
  display: block;
  font-family: var(--corps);
  font-size: 15px;
  font-weight: 500;
  color: var(--bleu);
  margin-bottom: 6px;
}

/* l'astérisque des champs obligatoires */
.champ--requis > label::after,
.champ--requis .intitule::after {
  content: ' *';
  color: var(--bleu);
}

.champ input[type=text],
.champ select,
.champ textarea {
  width: 100%;
  font-family: var(--corps);
  font-size: 16px;
  color: var(--bleu);
  background: transparent;
  border: 1px solid rgba(34, 87, 167, .35);
  border-radius: 2px;
  padding: 11px 13px;
  appearance: none;
}

.champ textarea { min-height: 110px; resize: vertical; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: none; border-color: var(--bleu); }

/* les deux choix de présence, en boutons radio */
.choix { display: flex; flex-direction: column; gap: 8px; }

.choix label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--corps);
  font-size: 16px;
  color: var(--bleu);
  cursor: pointer;
}

.choix input[type=radio] { accent-color: var(--bleu); width: 18px; height: 18px; }

/* le bouton d'envoi : centré et étroit, pas pleine largeur */
.envoi { text-align: center; margin-top: 20px; }

.formulaire .bouton {
  padding: 10px 25px;
  font-size: 15px;
  border-radius: 2px;
  margin-top: 0;
}

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

.merci.visible { display: block; }

/* ---------- 14. PIED DE PAGE ---------- */

.barre-signature {
  min-height: 60px;
  background: var(--blanc);
  border-top: 1px solid #2257A730;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
}

.barre-signature p {
  font-family: var(--corps);
  font-size: 14px;
  color: var(--bleu);
  margin: 0;
  text-align: center;
}

/* ============================================================
   15. TABLETTE ET MOBILE
   ============================================================ */

@media (max-width: 1024px) {
  .texte--resserre { padding: 0 80px; }
  .couverture__contenu { width: 90%; }
  .nav li:not(:last-child)::after { margin: 0 24px; }
}

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

  .couverture { padding: 10px; }
  .couverture__contenu { width: 100%; }
  .couverture__logo { width: 35%; }
  .logo-section { width: 35%; }

  .bouton-ouvrir { border-width: 2px; border-radius: 3px; padding: 14px 20px; }

  .compteur { gap: 4px; }
  .compteur__case { padding: 6px 8px; }
  .compteur__chiffre,
  .compteur--section .compteur__chiffre { font-size: 30px; }
  .compteur__libelle { font-size: 8px; }

  .nav a { font-size: 13px; }
  .nav li:not(:last-child)::after { margin: 0 10px; }

  .bsd,
  .texte { font-size: 15px; line-height: 1.5em; }
  .texte--gras { font-size: 16px; }
  .texte--resserre { padding: 0 30px; }
  .texte--pensee { font-size: 13px; }
  .texte--maillot { font-size: 16px; line-height: 1.5em; }

  .titre-section { font-size: 35px; -webkit-text-stroke-width: .6px; }
  .titre-prenom  { font-size: 50px; -webkit-text-stroke-width: .8px; }
  .separateur    { gap: 8px; margin-bottom: 60px; }
  .separateur__fleche { width: 22px; height: 22px; }

  /* sur mobile, le voile crème des sections disparaît */
  .section::before { opacity: 0; }
  .section--rsvp::before { opacity: .89; }
  .section--rsvp { background-size: 183px auto; }

  .section { padding: 20px 0 80px; }
  .section--reception { padding: 0; }
  .section--party { padding: 80px 0; }

  .langues { padding: 0 15px; }
  .musique svg { width: 15px; height: 15px; }
  .musique { padding: 6px; }

  .bloc-formulaire { width: 100%; padding: 0 10px; }
}

/* Respecte les personnes qui ont désactivé les animations */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}