/*!
Theme Name: MJ Wedding
Template: Divi
Description: Un theme créé par Bleuebuzz
Version: 1.0
Author: Bleuebuzz
Author URI: https://www.bleuebuzz.fr
*/

/* ALL
========================================== */

/* =========================
   MJ – Étape CODE (style maquette)
   ========================= */

:root{
  --mj-bg: #f6efe6;
  --mj-border: #795633;
  --mj-accent: #795633;
  --mj-accent-text: #ffffff;
  --mj-text: #795633;
  --mj-radius: 14px;
}

/* Conteneur : tout centré uniquement sur l'étape code */
#mj-step-code{
  text-align: center;
}

/* Titre (si besoin) */
#mj-step-code h2{
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  color: var(--mj-accent);
  margin: 0 0 14px;
  font-size: 41px;
}

/* Texte au-dessus : centré, sans marges excessives */
#mj-step-code .mj-code-text{
  max-width: 640px;
  margin: 0 auto 22px;
  font-family: "Lora", serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--mj-text);
}
#mj-step-code .mj-code-text span{
  display: block;      /* la 2e ligne passe dessous */
  margin-top: 2px;     /* “collé” */
}

/* Champ CODE : court + centré */
#mj-step-code .wpcf7-form-control-wrap{
  display: block;
}

#mj-step-code input#invite_code.wpcf7-form-control{
  width: 280px;              /* largeur “maquette” */
  max-width: 90%;
  height: 42px;
  padding: 10px 16px;
  border: 1px solid var(--mj-border);
  border-radius: var(--mj-radius);
  background: var(--mj-bg);
  color: var(--mj-accent);
  font-family: "Lora", serif;
  font-size: 16px;
  text-align: center;        /* texte du champ centré */
  outline: none;
  box-shadow: none;
}

/* Placeholder */
#mj-step-code input#invite_code::placeholder{
  color: var(--mj-accent);
  opacity: 0.85;
}

/* Focus doux */
#mj-step-code input#invite_code:focus{
  border-color: var(--mj-accent);
  box-shadow: 0 0 0 3px rgba(181,138,99,0.18);
}

/* Bouton VALIDER : rose arrondi + centré */
#mj-step-code #mj-validate-code{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  height: 40px;
  padding: 0 34px;
  border: 0;
  border-radius: 12px;
  background: var(--mj-accent);
  color: var(--mj-accent-text);
  font-family: "Lora", serif;
  font-size: 16px;
  font-weight: 450;
  cursor: pointer;
}

#mj-step-code #mj-validate-code:hover{
  filter: brightness(0.95);
}

/* Message d'erreur sous le bouton */
#mj-step-code #mj-code-error{
  margin: 12px auto 0;
  max-width: 520px;
  color: #564fa4;
  font-family: "Lora", serif;
}
/* =========================================================
   MJ – PARTIE 2 (après validation code) – CSS UNIQUE PROPRE
   Portée : uniquement #mj-step-form
   Contenu :
   - Titre + sous-titre centrés
   - Labels Lora medium alignés gauche
   - Inputs/select/textarea : même style que "Code"
   - Radios attendance : 1 ligne, sans cartouches
   - Jours days : colonne, gauche, sans cartouches
   - Number children_count : spinner visible
   - Bouton submit : identique à "Valider"
   ========================================================= */

:root{
  --mj-bg: #f6efe6;
  --mj-border: #795633;
  --mj-accent: #795633;
  --mj-accent-text: #ffffff;
  --mj-text: #795633;
  --mj-radius: 14px;
  --mj-max: 620px;
}

/* -----------------------------------------
   Base bloc
----------------------------------------- */
#mj-step-form{
  font-family: "Lora", serif !important;
  color: var(--mj-text) !important;
}

/* Titre (Great Vibes) */
#mj-step-form h2{
  text-align: center !important;
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  color: var(--mj-accent) !important;
  font-size: 48px !important;
  line-height: 1.05 !important;
  margin: 0 0 12px !important;
}

/* Sous-titre (Lora) = 1er p après h2 */
#mj-step-form h2 + p{
  text-align: center !important;
  font-family: "Lora", serif !important;
  font-size: 16pt !important;
  line-height: 1.05 !important;
  margin: 0 0 18px !important;
  color: var(--mj-text) !important;
}

/* Largeur colonne */
#mj-step-form label,
#mj-step-form .wpcf7-form-control-wrap,
#mj-step-form .wpcf7-form-control{
  max-width: var(--mj-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Labels (Lora medium) alignés gauche */
#mj-step-form label{
  display: block !important;
  text-align: left !important;
  font-family: "Lora", serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  margin: 0px auto 12px !important;
  color: var(--mj-accent) !important;
}

/* =========================================================
   MJ – Harmonisation "titre de champ" en <p> avec les <label>
   (ex : <p class="mj-field-title">Sélectionne un invité :</p>)
   ========================================================= */
#mj-step-form .mj-field-title{
  display: block !important;
  text-align: left !important;
  font-family: "Lora", serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  margin: 0 auto 10px !important;
  color: var(--mj-accent) !important;
  padding: 0;
  /* pour qu’il suive la même largeur/centrage que les labels */
  max-width: var(--mj-max) !important;
}

/* -----------------------------------------
   Champs "style Code" (inputs/select/textarea)
   (NE PAS appliquer aux radios/checkbox)
----------------------------------------- */
#mj-step-form input[type="text"].wpcf7-form-control,
#mj-step-form input[type="email"].wpcf7-form-control,
#mj-step-form input[type="number"].wpcf7-form-control,
#mj-step-form select.wpcf7-form-control,
#mj-step-form textarea.wpcf7-form-control{
  width: 100% !important;
  box-sizing: border-box !important;
  height: 42px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--mj-border) !important;
  border-radius: var(--mj-radius) !important;
  background: var(--mj-bg) !important;
  color: var(--mj-accent) !important;
  font-family: "Lora", serif !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;
}

#mj-step-form textarea.wpcf7-form-control{
  height: auto !important;
  min-height: 180px !important;
  padding-top: 14px !important;
}

#mj-step-form input[type="text"].wpcf7-form-control::placeholder,
#mj-step-form input[type="email"].wpcf7-form-control::placeholder,
#mj-step-form input[type="number"].wpcf7-form-control::placeholder,
#mj-step-form textarea.wpcf7-form-control::placeholder{
  color: var(--mj-accent) !important;
  opacity: 0.75 !important;
}

#mj-step-form input[type="text"].wpcf7-form-control:focus,
#mj-step-form input[type="email"].wpcf7-form-control:focus,
#mj-step-form input[type="number"].wpcf7-form-control:focus,
#mj-step-form select.wpcf7-form-control:focus,
#mj-step-form textarea.wpcf7-form-control:focus{
  border-color: var(--mj-accent) !important;
  box-shadow: 0 0 0 3px rgba(181,138,99,0.18) !important;
}

/* Select : flèche */
#mj-step-form select.wpcf7-form-control{
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 44px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mj-border) 50%),
    linear-gradient(135deg, var(--mj-border) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* -----------------------------------------
   Radios (attendance) : 1 ligne, sans cartouches
----------------------------------------- */
#mj-step-form span[data-name="attendance"],
#mj-step-form span[data-name="attendance"] *{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mj-step-form span[data-name="attendance"] .wpcf7-radio{
  max-width: var(--mj-max) !important;
  margin: 0 auto !important;
  text-align: left !important;
}

#mj-step-form span[data-name="attendance"] .wpcf7-list-item{
  display: inline-flex !important;
  align-items: center !important;
  margin: 10px 28px 0 0 !important;
  padding: 0 !important;
}

#mj-step-form span[data-name="attendance"] input[type="radio"]{
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--mj-accent) !important;
  margin: 0 12px 0 0 !important;
  transform: scale(1.1);
}

#mj-step-form span[data-name="attendance"] .wpcf7-list-item-label{
  color: var(--mj-text) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* =========================================================
   MJ – Attendance (Serez-vous présent(e) ?) en BOUTONS
   CF7 : span[data-name="attendance"] .wpcf7-radio > .wpcf7-list-item > label > input + .wpcf7-list-item-label
   => Remplace/écrase l’ancien style “radios simples”
   ========================================================= */

/* Conteneur : 2 boutons côte à côte */
#mj-step-form span[data-name="attendance"] .wpcf7-radio{
  max-width: var(--mj-max) !important;
  margin: 0 auto !important;
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Enlève les marges CF7 */
#mj-step-form span[data-name="attendance"] .wpcf7-list-item{
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 190px !important;     /* 2 colonnes si place, sinon retour ligne */
}

/* Le label devient le “bouton” cliquable */
#mj-step-form span[data-name="attendance"] .wpcf7-list-item > label{
  position: relative !important;
  display: block !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Cache le radio natif */
#mj-step-form span[data-name="attendance"] input[type="radio"]{
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Style “bouton” (état OFF) */
#mj-step-form span[data-name="attendance"] .wpcf7-list-item-label{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 60px !important;
  padding: 10px 20px !important;

  border: 1px solid rgba(199,160,125,0.55) !important; /* var(--mj-border) adouci */
  border-radius: 16px !important;

  background: #ffffff !important;
  color: var(--mj-text) !important;

  font-family: "Lora", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: center !important;

  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .06s ease !important;
}

/* Hover léger */
#mj-step-form span[data-name="attendance"] .wpcf7-list-item > label:hover .wpcf7-list-item-label{
  box-shadow: 0 12px 22px rgba(0,0,0,0.08) !important;
}

/* Style “bouton” (état ON = sélectionné) */
#mj-step-form span[data-name="attendance"] input[type="radio"]:checked + .wpcf7-list-item-label{
  background: #f6efe6 !important;      /* marron foncé (ajuste si besoin) */
  color: #795633 !important;
  border-color: #795633 !important;
}

/* Accessibilité : focus clavier */
#mj-step-form span[data-name="attendance"] input[type="radio"]:focus-visible + .wpcf7-list-item-label{
  outline: 3px solid rgba(181,138,99,0.35) !important;
  outline-offset: 3px !important;
}

/* Mobile : boutons en colonne si nécessaire */
@media (max-width: 520px){
  #mj-step-form span[data-name="attendance"] .wpcf7-radio{
    gap: 14px !important;
  }
  #mj-step-form span[data-name="attendance"] .wpcf7-list-item{
    flex: 1 1 100% !important;
  }
  #mj-step-form span[data-name="attendance"] .wpcf7-list-item-label{
    font-size: 16px !important;
    min-height: 62px !important;
  }
}

/* -----------------------------------------
   Jours (days) : colonne, gauche, sans cartouches
   (structure CF7 vue : span[data-name="days"] ...)
----------------------------------------- */
#mj-step-form span[data-name="days"],
#mj-step-form span[data-name="days"] *{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#mj-step-form span[data-name="days"] .wpcf7-checkbox{
  max-width: var(--mj-max) !important;
  margin: 0 auto !important;
  text-align: left !important;
}

#mj-step-form span[data-name="days"] .wpcf7-list-item{
  display: block !important;
  width: 100% !important;
  margin: 0px 0 0 0 !important;
  padding: 0 !important;
}

#mj-step-form span[data-name="days"] .wpcf7-list-item > label{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mj-step-form span[data-name="days"] input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: auto !important;
  accent-color: var(--mj-accent) !important;
  margin: 0 !important;
  transform: scale(1.1);
}

#mj-step-form span[data-name="days"] .wpcf7-list-item-label{
  color: var(--mj-text) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: left !important;
  padding: 0 !important;
}

/* -----------------------------------------
   Number (children_count) : flèches visibles
----------------------------------------- */
#mj-step-form input#children_count[type="number"]{
  -webkit-appearance: auto !important;
  appearance: auto !important;
  -moz-appearance: number-input !important;
  padding-right: 14px !important;
}

#mj-step-form input#children_count[type="number"]::-webkit-inner-spin-button,
#mj-step-form input#children_count[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance: inner-spin-button !important;
  opacity: 1 !important;
  height: auto !important;
}

/* -----------------------------------------
   Bouton Submit : identique "Valider"
----------------------------------------- */
#mj-step-form input.wpcf7-submit{
  display: block !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 16px auto 0 !important;
  height: 52px !important;
  padding: 0 34px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--mj-accent) !important;
  color: var(--mj-accent-text) !important;
  font-family: "Lora", serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

#mj-step-form input.wpcf7-submit:hover{
  filter: brightness(0.95);
}

/* -----------------------------------------
   Mobile
----------------------------------------- */
@media (max-width: 768px){
  #mj-step-form h2{ font-size: 46px !important; }
  #mj-step-form h2 + p{ font-size: 18px !important; } /* éviter 18pt sur mobile */
}
/* =========================================================
   MJ – Fix SELECT "invités du foyer" (guest_select_ui)
   ========================================================= */

/* applique le style "Code" au select des invités */
#mj-step-form select#guest_select_ui,
#mj-step-form select#guest_select{
  width: 100% !important;
  max-width: var(--mj-max) !important;
  box-sizing: border-box !important;
  height: 42px !important;
  padding: 10px 44px 10px 16px !important;
  border: 1px solid var(--mj-border) !important;
  border-radius: var(--mj-radius) !important;
  background: var(--mj-bg) !important;
  color: var(--mj-accent) !important;
  font-family: "Lora", serif !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;

  /* flèche custom (comme dans le bloc global) */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mj-border) 50%),
    linear-gradient(135deg, var(--mj-border) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat !important;
}

#mj-step-form select#guest_select_ui:focus,
#mj-step-form select#guest_select:focus{
  border-color: var(--mj-accent) !important;
  box-shadow: 0 0 0 3px rgba(181,138,99,0.18) !important;
}

/* --- ESPACEMENT CHAMPS ENFANTS (CF7) --- */
#children_names_wrap .mj-child {
  margin: 14px 0 0 !important; /* espace entre Enfant 1/2/3/4/5 */
}

#children_names_wrap .mj-child:first-child {
  margin-top: 10px !important; /* léger espace après le label "Veuillez nous indiquer..." */
}

/* sécurité : si un style existant annule les marges via line-height/p ou span */
#children_names_wrap .wpcf7-form-control-wrap {
  display: block;
}

/* optionnel : si vos inputs ont un margin-bottom:0 forcé ailleurs */
#children_names_wrap input.wpcf7-form-control {
  margin-bottom: 0 !important;
}

#mj-step-form label.allergies {
    margin: 25px auto 0px !important;
}
#mj-step-form label.message{
  padding-top:25px;
}

div[data-id="group_presence"] #days .last {
    padding-top: 10px !important;
}


/* ===== CF7 — Allergies : 2 colonnes, aligné gauche, taille police dissociée ===== */

/* Le bloc entier (label + liste) */
.wpcf7-form-control-wrap[data-name="allergies"]{
  display: block;
}

/* La liste de cases CF7 */
.wpcf7-form-control-wrap[data-name="allergies"] .wpcf7-checkbox{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0px 26px;              /* ligne / colonne */
  justify-items: start;        /* alignement à gauche */
  align-items: start;
  margin-top: 10px;            /* espace après le texte d’intro */
}

/* Chaque item CF7 */
.wpcf7-form-control-wrap[data-name="allergies"] .wpcf7-list-item{
  margin: 0;                   /* CF7 met parfois des marges */
}

/* Le label (case + texte) en ligne, à gauche */
.wpcf7-form-control-wrap[data-name="allergies"] .wpcf7-list-item label{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

/* Taille police des options (plus petit que le titre) */
.wpcf7-form-control-wrap[data-name="allergies"] .wpcf7-list-item-label{
  font-size: 14px;             /* ajuste si besoin (ex: 16–18px) */
  line-height: 0;
}

/* Mobile : on reste en 2 colonnes si possible, sinon 1 colonne */
@media (max-width: 520px){
  .wpcf7-form-control-wrap[data-name="allergies"] .wpcf7-checkbox{
    grid-template-columns: 1fr;
    gap: 0px;
  }
}


/* ===== Save the date – Scratch hearts (CSS propre) ===== */

/* ===== Save the date – Scratch hearts (FINAL) ===== */

#mj-save-the-date{
  position: relative; /* pour ancrer le canvas confetti */
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 20px;
  text-align: center;
}

/* Titres */
#mj-save-the-date .mj-scratch-title{
  font-family: "Great Vibes", cursive;
  font-size: clamp(44px, 5vw, 48px);
  line-height: 1;
  margin: 0 0 10px;
  color: #795633;
}

#mj-save-the-date .mj-scratch-sub{
  font-family: "Lora", serif;
  letter-spacing: 4px;
  font-size: 16px;
  margin: 0 0 26px;
  color: #795633;
}

/* Grille : DESKTOP = 3 coeurs */
#mj-save-the-date .mj-scratch-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  align-items: center;

  max-width: 980px;
  margin: 0 auto;

  gap: 18px;
  padding: 10px 0 20px;
}

/* Carte (coeur) */
#mj-save-the-date .mj-scratch-card{
  position: relative;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 800 / 650;

  user-select: none;
  -webkit-user-select: none;

  background: url("https://www.mjwedding2026.fr/wp-content/uploads/2026/03/heart-outline.png")
              center / contain no-repeat;

  touch-action: none;
}

/* Texte révélé (jour/mois/année) */
#mj-save-the-date .mj-scratch-reveal{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  font-family: "Lora", serif;
  font-weight: 400;
  color: #795633;
  font-size: clamp(34px, 6vw, 36px);

  z-index: 1;
}

/* Canvas au-dessus : gold à gratter */
#mj-save-the-date .mj-scratch-canvas{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  z-index: 2;
}

/* Terminé */
#mj-save-the-date .mj-scratch-card.is-done .mj-scratch-canvas{
  pointer-events: none;
  opacity: 0;
}

#mj-save-the-date .mj-scratch-card.is-locked{
  opacity: 1 !important;
  filter: none !important;
}

/* Confetti overlay */
#mj-save-the-date .mj-confetti-canvas{
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

/* ===== MOBILE : 1 seul coeur (milieu) centré ===== */
@media (max-width: 768px){

  #mj-save-the-date{
    max-width: 100% !important;
    padding: 12px 10px 10px !important;
  }

  #mj-save-the-date .mj-scratch-title{
    font-size: clamp(36px, 9vw, 46px) !important;
    margin: 0 0 8px !important;
  }

  #mj-save-the-date .mj-scratch-sub{
    font-size: 14px !important;
    letter-spacing: 3px !important;
    line-height: 1.2 !important;
    margin: 0 0 32px !important;
  }

  /* Grille : 1 colonne + centrage */
  #mj-save-the-date .mj-scratch-grid{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    align-items: start !important;

    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;

    gap: 16px !important;
    padding: 10px 0 0 !important;
  }

  /* On cache coeur 1 et 3 (on garde le coeur 2) */
  #mj-save-the-date .mj-scratch-card:nth-child(1),
  #mj-save-the-date .mj-scratch-card:nth-child(3){
    display: none !important;
  }

  /* Coeur du milieu : centré et grand */
  #mj-save-the-date .mj-scratch-card:nth-child(2){
    display: block !important;
    justify-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;

    width: min(86vw, 420px) !important;
    max-width: 420px !important;
  }

  /* Texte du coeur : adapté */
  #mj-save-the-date .mj-scratch-reveal{
    font-size: clamp(18px, 5.2vw, 28px) !important;
    line-height: 1 !important;
  }

  @media (max-width: 768px){
    #mj-save-the-date .mj-scratch-card:nth-child(2) .mj-scratch-reveal{
      font-family: "Lora", serif !important;
      font-style: italic !important;
      font-weight: 400 !important;
    }
  }
}

/* Très petit écran */
@media (max-width: 380px){
  #mj-save-the-date{
    padding: 10px 8px 8px !important;
  }
  #mj-save-the-date .mj-scratch-card:nth-child(2){
    width: min(90vw, 420px) !important;
  }
  #mj-save-the-date .mj-scratch-reveal{
    font-size: clamp(16px, 5.8vw, 24px) !important;
  }

}

/* =========================================================
   MJ HERO — FINAL PROPRE (enveloppe + gâteau)
   - Background section
   - Header 1: enveloppe plein écran + hitbox
   - Header 2: cartouche "arche" + gâteau petit en haut + logo/texte dessous + picto bas
   - Blur + scroll lock
   - Spécificité maîtrisée (pas de bloc global .mj-video)
   ========================================================= */

/* ===== Section (hero) ===== */
#mj-hero.mj-hero{
  position: relative;
  width: 100%;
  height: min(92vh, 900px);
  overflow: hidden;

  background: #f9f6f3 !important;
  background-image: none !important;
}

/* ===== Layers ===== */
#mj-hero .mj-hero-layer{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease;
  z-index: 1;
}

#mj-hero .mj-hero-layer.is-active{
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

/* =========================================================
   HEADER 1 — ENVELOPPE
   ========================================================= */
#mj-hero-envelope .mj-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#mj-hero-envelope .mj-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hitbox cachet */
#mj-hero #mjSealButton.mj-seal-hitbox{
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  width: clamp(70px, 10vw, 140px);
  aspect-ratio: 1/1;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  z-index: 999;
  pointer-events: auto;
}

/* Hint sous le cachet */
#mj-hero .mj-hint{
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, calc(-50% + (clamp(70px, 10vw, 140px) / 2) + 18px));
  font-size: 14px;
  letter-spacing: 0.06em;
  opacity: 0.75;
  user-select: none;
  pointer-events: none;
  z-index: 999;
}

@media (hover:hover){
  #mj-hero #mjSealButton.mj-seal-hitbox:hover{
    outline: 2px solid rgba(0,0,0,0.12);
    outline-offset: 6px;
  }
}

/* =========================================================
   BLUR TRANSITION
   ========================================================= */
#mj-hero #mjBlur.mj-blur-transition{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;

  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition: opacity 450ms ease, backdrop-filter 450ms ease, -webkit-backdrop-filter 450ms ease;
}

#mj-hero #mjBlur.mj-blur-transition.is-on{
  opacity: 1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* =========================================================
   HEADER 2 — GÂTEAU (CARTOUCHE ARCHE MAQUETTE)
   HTML attendu :
   #mj-hero-gateau .mj-card
     .mj-gateau-video-wrap > video.mj-video.mj-video--gateau
     .mj-gateau-overlay (logo + texte)
     img.mj-step.mj-step--picto (direct child de .mj-card)
   ========================================================= */
#mj-hero-gateau .mj-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Cartouche arche (sans shadow) */
#mj-hero-gateau .mj-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(92vw, 520px);
  height: min(86vh, 860px);

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;

  display: grid;
  grid-template-rows: 340px 1fr 80px;
  align-items: start;
  justify-items: center;
  row-gap: 10px;
  padding: 0; /* important */
}

@media (min-width: 768px){
  #mj-hero-gateau .mj-card{
    row-gap: 28px; /* augmente l'espace entre gâteau (ligne 1) et overlay (ligne 2) */
  }
}

/* 1) Zone gâteau : petit + en haut */
#mj-hero-gateau .mj-gateau-video-wrap{
  grid-row: 1;
  width: 100%;
  height: 350px;
  position: relative;
  z-index: 1;
  background: #f9f6f3 !important;
}

/* voile anti-saut de boucle */
#mj-hero-gateau .mj-gateau-video-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: #f9f6f3;          /* même couleur que section + vidéo */
  opacity: 0;                   /* invisible par défaut */
  pointer-events: none;
  transition: opacity 140ms linear;
}

/* quand on masque la jonction */
#mj-hero-gateau .mj-gateau-video-wrap.is-fading::after{
  opacity: 1;
}

/* IMPORTANT : ne pas fullscreen la vidéo gâteau */
#mj-hero-gateau video#mjGateauVideo.mj-video.mj-video--gateau{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  background: transparent !important;
  filter: none !important;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 2) Zone centrale : logo + texte (sous le gâteau) */
#mj-hero-gateau .mj-gateau-overlay{
  grid-row: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  text-align: center;
  pointer-events: none;

  margin: 0;
  padding: 0;
}

/* Logo noms */
#mj-hero-gateau .mj-step--names{
  width: min(74vw, 360px);
  height: auto;
}

/* Texte */
#mj-hero-gateau .mj-step--text{
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 36px !important;     /* ajustez si besoin */
  line-height: 1 !important;
  letter-spacing: 0.02em;
  color: #795633;
  margin: 0;
}

/* 3) Picto : bas de carte */
#mj-hero-gateau .mj-step--picto{
  grid-row: 3;
  align-self: end;
  justify-self: center;
  width: 54px;
  height: auto;
  padding-bottom: 80px;
}

#mj-hero-gateau .mj-gateau-overlay,
#mj-hero-gateau .mj-step--picto{
  position: relative;
  z-index: 2;
}

@media (min-width: 768px){
  #mj-hero-gateau .mj-step--picto{
    padding-bottom: 0;      /* ou 6px / 10px */
  }
}

/* --- Desktop : évite le chevauchement CTA / picto --- */
@media (min-width: 769px){

  /* on réserve de l'espace en bas pour le CTA */
  #mj-hero-gateau .mj-card{
    padding-bottom: 70px; /* espace réservé (ajuste 60–90px) */
  }

  /* on remonte le picto (logo MJ) */
  #mj-hero-gateau .mj-step--picto{
    align-self: end;
    padding-bottom: 0 !important;
    margin-bottom: 40px !important; /* remonte le picto */
  }

  /* CTA un peu plus bas si besoin */
  #mj-hero-gateau .mj-hero-cta{
    bottom: 18px;
  }
}

/* Apparition séquencée */
#mj-hero-gateau .mj-step{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
  will-change: transform, opacity, filter;
}

#mj-hero-gateau.is-active .mj-step--names{
  animation: mjFadeUp 700ms ease forwards;
  animation-delay: 250ms;
}

#mj-hero-gateau.is-active .mj-step--text{
  animation: mjFadeUp 700ms ease forwards;
  animation-delay: 850ms;
}

#mj-hero-gateau.is-active .mj-step--picto{
  animation: mjFadeUp 700ms ease forwards;
  animation-delay: 1350ms;
}

@keyframes mjFadeUp{
  to{ opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Mobile */
@media (max-width: 520px){
  #mj-hero-gateau .mj-card{
    grid-template-rows: 300px 1fr 80px;
    row-gap: 16px;
    width: min(92vw, 520px);
    height: min(86vh, 860px);
    background: transparent !important;
  }

  #mj-hero-gateau .mj-gateau-video-wrap{
    height: 300px;
  }

  #mj-hero-gateau .mj-step--names{
    width: min(78vw, 250px);
  }

  #mj-hero-gateau .mj-step--picto{
    width: 48px;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  #mj-hero-gateau .mj-step{
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

/* ===== CTA bas (Header 2) ===== */
/* CTA bas */
#mj-hero-gateau .mj-hero-cta{
  position: absolute;
  left: 50%;
  bottom: 22px;              /* ajuste la hauteur */
  transform: translateX(-50%);
  z-index: 20;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  text-decoration: none;
  color: #795633;            /* ton marron */
  pointer-events: auto;
}

/* texte RSVP */
#mj-hero-gateau .mj-hero-cta__text{
  font-family: "Lora", serif;
  letter-spacing: 0.35em;
  font-size: 12px;
}

/* flèche */
#mj-hero-gateau .mj-hero-cta__arrow{
  font-size: 16px;
  line-height: 1;
  transform: translateY(-2px);
}

/* optionnel : petite anim “bounce” */
@media (prefers-reduced-motion: no-preference){
  #mj-hero-gateau .mj-hero-cta__arrow{
    animation: mjArrowBounce 1.2s ease-in-out infinite;
  }
  @keyframes mjArrowBounce{
    0%,100%{ transform: translateY(-2px); opacity: .85; }
    50%    { transform: translateY(4px);  opacity: 1; }
  }
}

/* =========================================================
   SCROLL LOCK (enveloppe non ouverte)
   ========================================================= */
html.mj-scroll-locked,
body.mj-scroll-locked{
  overflow: hidden;
  height: 100%;
}

body.mj-scroll-locked{
  position: fixed;
  width: 100%;
}


/* Séparateur MJ : trait - icône - trait */
.mj-separator{
  --sep-line-color: #795633;
  --sep-line-width: 70px;
  --sep-line-height: 1px;
  --sep-gap: 14px;
  --sep-icon-size: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 30px 0;
}

.mj-separator::before,
.mj-separator::after{
  content: "";
  display: block;
  width: var(--sep-line-width);
  height: var(--sep-line-height);
  background: var(--sep-line-color);
  flex: 0 0 auto;
}

.mj-separator::before{ margin-right: var(--sep-gap); }
.mj-separator::after{  margin-left:  var(--sep-gap); }

/* Icône */
.mj-separator__icon{
  display: block;
  width: var(--sep-icon-size);
  height: var(--sep-icon-size);
  flex: 0 0 auto;
}

/* Mobile */
@media (max-width: 480px){
  .mj-separator{
    --sep-line-width: 48px;
    margin: 22px 0;
  }
}

.mj-gifts-confetti-host{ position: relative; }

.mj-gifts-confetti-gif{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 9999;
}

.mj-gifts-confetti-gif img{
  width: 420px;
  height: 420px;
  object-fit: contain;
}

@media (max-width: 768px){
  .mj-gifts-confetti-gif img{
    width: 320px;
    height: 320px;
  }
}

/* Séparateur entre titre et contenu du toggle "participation" */
.et_pb_toggle.mj-gift-toggle.et_pb_toggle_open .et_pb_toggle_content{
  border-top: 1px solid rgba(121, 86, 51, 0.22); /* couleur + transparence */
  padding-top: 22px;  /* espace après la ligne */
  margin-top: 0;      /* évite les écarts imprévus */
}

/* Optionnel : un peu d'air sous le titre */
.et_pb_toggle.mj-gift-toggle.et_pb_toggle_open .et_pb_toggle_title{
  padding-bottom: 18px;
}

/* Mobile : GIF = 80% largeur écran (avec limite max pour éviter trop grand) */
@media (max-width: 768px){
  .mj-gifts-confetti-gif img{
    width: min(80vw, 520px);
    height: auto;            /* garde le ratio */
    object-fit: contain;
  }
}

/* =========================================
   TIMELINE — ANIMATION VAGUE (MOBILE + DESKTOP)
   Cibles:
   - desktop : .timeline-row
   - mobile  : .tl-row
   ========================================= */

/* ============================
   TIMELINE — VAGUE (DESKTOP + MOBILE)
   Desktop : .timeline-row (1 row / 5 colonnes)
   Mobile  : .tl-row (plusieurs rows)
   ============================ */

/* --- DESKTOP : on anime les COLONNES --- */
.timeline-row > .et_pb_column{
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity 650ms ease, transform 650ms ease, filter 650ms ease;
  transition-delay: var(--tl-delay, 0ms);
  will-change: opacity, transform, filter;
}

.timeline-row > .et_pb_column.tl-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --- MOBILE : on anime la ROW entière (vague de haut en bas) --- */
.tl-row{
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition: opacity 650ms ease, transform 650ms ease, filter 650ms ease;
  transition-delay: var(--tl-delay, 0ms);
  will-change: opacity, transform, filter;
}

.tl-row.tl-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --- MOBILE : la ligne verticale (tl-left) ne doit pas apparaître avant --- */
@media (max-width: 980px){
  .tl-wrap .tl-left::before,
  .tl-wrap .tl-left::after{
    opacity: 0;
    transition: opacity 450ms ease;
    transition-delay: 180ms;
  }
  .tl-wrap.tl-animated .tl-left::before,
  .tl-wrap.tl-animated .tl-left::after{
    opacity: 1;
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .timeline-row > .et_pb_column,
  .tl-row{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}