/* =======================================================================
   N A T A N Ë L   &   O R A   —   S T Y L E S   P R E M I U M
   -----------------------------------------------------------------------
   PARTIE 1/3 :
   - Variables, reset, tokens design, utilitaires
   - Typo & accessibilité
   - Layout global, navbar + hamburger + sélecteur de langue
   - Hero (background marbre), overlay ivoire
   - Compteur responsive (1 ligne mobile / 4 pastilles desktop)
   - CTA (“Voir l’invitation”), boutons flottants (haut + musique)
   - Animations reveal, barre de progression
   -----------------------------------------------------------------------
   Remarques :
   - Noms de fichiers attendus : logo.png, fond.jpeg (hero), card.jpg (papier)
   - Les PARTIES 2 & 3 ajouteront : section Houppa/Soirée + RSVP + footer + responsive extra
   ======================================================================= */

/* ============================= TOKENS ============================= */

:root {
  /* Couleurs principales */
  --primary: #C1AD97;
  /* or rosé */
  --primary-color: #B78C54;
  /* doré (alias) */
  --primary-d: #B4997E;
  /* hover */
  --gold: #C49A6C;
  --gold-d: #B18149;

  /* Neutres */
  --bg: #FAF6F2;
  /* ivoire papier */
  --text: #2b2b2b;
  --muted: #6f6b65;
  --ring: #eadfcc;
  --panel: #ffffffee;

  /* Effets */
  --shadow-1: 0 6px 24px rgba(0, 0, 0, .10);
  --shadow-2: 0 14px 36px rgba(0, 0, 0, .18);
  --blur: 8px;

  /* Typos (on harmonise avec la ref) */
  --ff-script: "Cardo", serif;
  /* tu pourras switcher vers Kapakana si tu veux */
  --ff-serif: "Playfair Display", serif;
  --ff-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;

  /* Rythme */
  --radius-xs: 10px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Z-index */
  --z-nav: 1000;
  --z-progress: 2000;
  --z-fab: 1100;
}

/* ============================= RESET + BASE ============================= */

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--ff-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Focus visibles pour accessibilité */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Helpers sémantiques */
.main-color {
  color: var(--primary);
  font-weight: 700;
}

.italic {
  font-style: italic;
}

/* ============================= ANIMATIONS GLOBALES ============================= */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Barre de progression scroll */
#scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 4px;
  width: 0%;
  background: var(--primary);
  z-index: var(--z-progress);
  transition: width .2s ease-out;
}

/* ============================= NAVBAR ============================= */

#navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  transition: background .3s ease, box-shadow .3s ease, color .3s ease;
  font-family: var(--ff-serif);
  will-change: background;
}

#navbar.transparent {
  background: rgba(193, 173, 151, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}

#navbar.scrolled {
  background: rgba(183, 163, 141, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}

#navbar nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 40px;
}

/* Logo */
.logo {
  height: 80px;
  width: auto;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0.75;
}

.logo:hover {
  transform: scale(1.05);
  opacity: 0.85;
}

.logo.fade {
  opacity: 0;
}

/* Liens */
.nav-links {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

#navbar nav a {
  position: relative;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}

#navbar nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 0;
  background: #A60808;
  transition: width .3s;
}

#navbar nav a:hover {
  color: #cc2626;
}

#navbar nav a:hover::after {
  width: 100%;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  color: #fff;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

@media (max-width: 768px) {
  #navbar nav {
    padding: 10px 20px;
    justify-content: space-between;
  }

  .hamburger {
    display: flex;
  }

  .nav-links {
    position: absolute;
    inset: 100% 0 auto 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    flex-direction: column;
    gap: 18px;
    padding: 16px 0;
    display: none;
  }

  #navbar.transparent .nav-links {
    background: rgba(57, 57, 57, 0.51);
  }

  #navbar.scrolled .nav-links {
    background: var(--primary);
  }

  .nav-links.active {
    display: flex;
  }

  #navbar nav a {
    color: #fff;
    font-size: 20px;
  }
}

/* ============================= SELECTEUR LANGUE ============================= */

#language-switcher {
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(6px);
  border-radius: 30px;
  padding: 6px 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
}

#language-switcher button {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

#language-switcher button:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Support he/fr */
html[data-lang="he"],
body[data-lang="he"] {
  direction: rtl;
}

html[data-lang="fr"],
body[data-lang="fr"] {
  direction: ltr;
}

/* ============================= HERO (ACCUEIL) ============================= */

#accueil {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  padding-top: 80px;
  text-align: center;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.95) contrast(1.02);
  z-index: 0;
}

/* Overlay ivoire — plus lumineux que gris */
#accueil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(183, 51, 51, 0.22);
  pointer-events: none;
}

#accueil .overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 32px 16px;
}

/* Noms */
.names {
  font-family: var(--ff-script);
  font-style: italic;
  color: #954a0c;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, .6);
  display: inline-block;
  border-radius: var(--radius-xs);
  margin: 0 0 20px;
}

.names-font {
  font-family: var(--ff-script);
}

/* HERO Title avec la même calligraphie que Houppa & Soirée */
#accueil h1.names.names-font {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 120px);
  line-height: 1;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7),
    0 10px 25px rgba(0, 0, 0, .25);
}

/* Optionnel : ajustement des spans à l'intérieur */
#accueil h1.names.names-font span {
  font-family: inherit;
  /* reprend Great Vibes */
  color: inherit;
  /* reprend la couleur or */
}

#accueil .et {
  font-family: var(--ff-serif);
  font-weight: 800;
}

/* ============================= COMPTEUR ============================= */

.compteur {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 22px 0 30px;
  font-family: var(--ff-serif);
}

.compteur-bloc {
  position: relative;
  width: 92px;
  height: 92px;
  padding: 10px;
  background: rgba(193, 173, 151, .25);
  border: 2px solid rgba(193, 173, 151, .65);
  border-radius: 50%;
  text-align: center;
  font-size: 22px;
  transition: transform .2s ease;
  box-shadow: 0 2px 6px rgba(214, 135, 157, .12);
}

.compteur-bloc:hover {
  transform: translateY(-2px);
}

.compteur-bloc .nombre {
  font-weight: 700;
  font-size: 1.4em;
}

.compteur-bloc .label {
  font-size: .7em;
  letter-spacing: .06em;
  text-transform: uppercase;
}

@media (max-width: 992px) {
  .compteur-bloc {
    width: 85px;
    height: 85px;
    font-size: 20px;
  }

  .compteur-bloc .label {
    font-size: .68em;
  }
}

@media (max-width: 768px) {
  .compteur {
    gap: 10px;
  }

  .compteur-bloc {
    width: 70px;
    height: 70px;
    font-size: 18px;
    padding: 8px;
  }

  .compteur-bloc .label {
    font-size: .62em;
  }
}

@media (max-width: 520px) {

  /* Mobile : en pastilles-chips 1 ligne, plus compactes */
  .compteur {
    gap: 8px;
    flex-wrap: wrap;
  }

  .compteur-bloc {
    width: auto;
    height: auto;
    border-radius: var(--radius-pill);
    padding: 8px 10px;
    background: rgba(193, 173, 151, .18);
    border-color: rgba(193, 173, 151, .55);
    box-shadow: none;
  }

  .compteur-bloc .nombre {
    font-size: 1rem;
  }

  .compteur-bloc .label {
    font-size: .65rem;
  }
}

/* ============================= CTA (HERO) ============================= */

.landing-button {
  display: inline-block;
  padding: 12px 22px;
  font-weight: 800;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: 30px;
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

.landing-button:hover {
  background: var(--primary-d);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* ============================= BOUTONS FLOTTANTS ============================= */

#scrollToTop,
#musicToggle {
  position: fixed;
  right: 28px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
  z-index: var(--z-fab);
  display: none;
  /* JS toggles display */
}

#scrollToTop {
  bottom: 28px;
}

#musicToggle {
  bottom: 86px;
}

#scrollToTop:hover,
#musicToggle:hover {
  background: var(--primary-d);
}

@media (max-width: 480px) {

  #scrollToTop,
  #musicToggle {
    right: 20px;
    width: 40px;
    height: 40px;
  }

  #musicToggle {
    bottom: 72px;
  }
}

/* ============================= UTILITAIRES ============================= */

/* Containers */
.container {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Grids rapides */
.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 700px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Align */
.center {
  text-align: center;
}

.flex {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.wrap {
  flex-wrap: wrap;
}

/* Marges */
.mt-0 {
  margin-top: 0 !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mt-6 {
  margin-top: 6px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-6 {
  margin-bottom: 6px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

/* Couleurs helpers */
.text-primary {
  color: var(--primary) !important;
}

.text-gold {
  color: var(--gold) !important;
}

.bg-ivory {
  background: var(--bg) !important;
}

.bg-panel {
  background: var(--panel) !important;
}

/* Filets & puces fines (utilisables partout) */
.hr-gold {
  height: 2px;
  width: min(320px, 42vw);
  margin: 10px auto 24px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.bullet-gold {
  position: relative;
  padding-left: 16px;
}

.bullet-gold::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7b289, #b18149);
  box-shadow: 0 0 0 1px rgba(177, 129, 73, .28);
}

/* RTL helper (pour lignes hébreu isolées) */
.rtl-line {
  direction: rtl;
  text-align: center;
  letter-spacing: .03em;
  word-spacing: .12em;
}

/* ================================== FIN PARTIE 1/3 ================================== */
/* =======================================================================
   PARTIE 2/3 — SECTION "HOUPPA & SOIRÉE" (papier plein fond)
   - Fond floral plein écran (card.jpg) avec voile lisible
   - Filigrane logo centré (opacité très faible)
   - Titre hébreu en arc (CircleType gère la courbure via JS)
   - Mise en colonnes : Parents (L/R) + Noms & infos au centre
   - Typo premium (Playfair/Script), puces dorées fines
   - Boutons évènement (Calendar .ics, Waze, Moovit)
   - Ornements optionnels (coins) + focus état RTL
   - Responsive fin : ≥1400 / 1200 / 992 / 768 / 560 / 420
   ======================================================================= */

/* ---------- Conteneur principal papier ---------- */
.paper {
  position: relative;
  padding: 110px 16px 120px;
  text-align: center;
  overflow: hidden;
}

/* Fond : image de papier (card.jpg) + voile lisibilité */
.paper-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.02) saturate(1.02) brightness(1);
}

/* Filigrane logo (discret, centré haut) */
.paper-watermark {
  position: absolute;
  left: 50%;
  top: 220px;
  transform: translateX(-50%);
  width: min(170px, 26vw);
  opacity: .045;
  filter: grayscale(100%);
  z-index: 0;
  pointer-events: none;
}

/* Contrainte de largeur + stacking au-dessus du voile/fond */
.paper-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------- Titre en arc + sous-titre ---------- */
#arc-title {
  letter-spacing: 2px !important;
  font-weight: 500;
  direction: rtl;
  color: var(--primary-color) !important;
}

.middle-logo {
  width: 160px;
  margin: 8px auto 2px;
  position: relative;
  display: block;
}

.middle-logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  border-radius: 50%;
}

@media (max-width: 992px) {
  .middle-logo {
    width: 120px;
  }
}

.script-title {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: var(--primary-color);
  font-size: clamp(32px, 6.1vw, 60px);
  letter-spacing: .3px;
  margin: 6px 0 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

.hairline {
  height: 2px;
  width: min(340px, 46vw);
  margin: 10px auto 28px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ---------- Grille "Parents / Noms & Infos / Parents" ---------- */
.columns {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1.38fr 1fr;
  gap: 34px;
  margin-top: 14px;
}

@media (min-width:1400px) {
  .columns {
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 42px;
  }
}

@media (max-width:1200px) {
  .columns {
    grid-template-columns: 1fr 1.32fr 1fr;
    gap: 28px;
  }
}

@media (max-width:992px) {
  .columns {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
}

/* Colonnes */
.col {
  font-size: 18px;
  color: #534a42;
  line-height: 1.68;
}

.col h3 {
  font-family: var(--ff-serif);
  margin: .25rem 0 .35rem;
  color: #3f3428;
  font-weight: 700;
  letter-spacing: .2px;
}

.parents {
  margin: .25rem 0 .5rem;
}

.rel {
  margin-top: .75rem;
  color: #5c5147;
}

/* Centre (noms + détails) */
.center-col {
  text-align: center;
}

.names-block {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  justify-content: center;
  margin: .42em 0 .36em;
}

.name-fr {
  font-family: var(--ff-script);
  font-size: clamp(46px, 7.8vw, 86px);
  line-height: 1.05;
  color: var(--gold-d);
  text-shadow: 0 0 0 transparent;
}

.and {
  font-family: var(--ff-serif);
  font-weight: 700;
  color: #7c5b39;
  font-size: clamp(20px, 3.1vw, 26px);
  position: relative;
  top: .16em;
}

.when,
.timings,
.place {
  font-family: var(--ff-serif);
  font-size: 18px;
  margin: .28rem 0;
}

.timings strong {
  color: #3f3428;
}

/* Ligne hébreu RTL (lieu) premium */
.place.rtl {
  direction: rtl;
  text-align: center;
  letter-spacing: .03em;
  word-spacing: .12em;
}

/* Grands-parents : puces dorées élégantes */
.grandparents {
  list-style: none;
  margin: .38rem 0 .65rem 0;
  padding: 0;
}

.grandparents li {
  position: relative;
  padding-left: 16px;
  margin: .22rem 0;
}

.grandparents li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #d7b289, #b18149);
  box-shadow: 0 0 0 1px rgba(177, 129, 73, .28);
}

/* Pensée particulière */
.dedic {
  margin-top: .6rem;
  font-size: 17px;
  color: #5c5147;
}

/* ---------- Boutons évènement ---------- */
.btn-event {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.btn-houppa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
  transition: transform .15s ease, filter .2s ease, background .2s ease;
  will-change: transform, filter;
}

.btn-houppa:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.calendar-button {
  background: var(--primary);
  border: 2px solid var(--primary);
}

.calendar-button:hover {
  background: var(--primary-d);
}

.waze-button {
  background: var(--primary);
  border: 2px solid var(--primary);
}

.waze-button:hover {
  background: var(--primary-d);
}

.moovit-button {
  background: #F76100;
  border: 2px solid #F76100;
}

.moovit-button:hover {
  background: #f37019;
}

/* Par défaut desktop : calendar visible ; ajustements mobile plus bas */
.calendar-button {
  display: inline-flex;
}

.moovit-button {
  display: inline-flex;
}

/* ---------- Ornements optionnels (si tu ajoutes les <img class="orn ...">) ---------- */
.orn {
  position: absolute;
  z-index: 0;
  opacity: .18;
  filter: grayscale(100%);
  width: 140px;
  height: auto;
  pointer-events: none;
}

.o-tl {
  top: 34px;
  left: 34px;
}

.o-tr {
  top: 34px;
  right: 34px;
  transform: scaleX(-1);
}

.o-bl {
  bottom: 34px;
  left: 34px;
  transform: scaleY(-1);
}

.o-br {
  bottom: 34px;
  right: 34px;
  transform: scale(-1, -1);
}

@media (max-width: 992px) {
  .orn {
    width: 100px;
  }
}

/* ==================== RESPONSIVE FIN & MICRO-AJUSTEMENTS ==================== */

/* ≥1400 : confort XL */
@media (min-width: 1400px) {
  .name-fr {
    font-size: clamp(58px, 6.8vw, 94px);
  }

  .when,
  .timings,
  .place {
    font-size: 19px;
  }
}

/* ≤1200 : gap réduit */
@media (max-width: 1200px) {
  .paper {
    padding: 96px 16px 110px;
  }

  .paper-watermark {
    top: 210px;
    width: min(180px, 26vw);
  }
}

/* ≤992 : colonne unique + titres centrés */
@media (max-width: 992px) {
  .paper {
    padding: 88px 14px 96px;
  }

  .script-title {
    font-size: clamp(22px, 5.5vw, 40px);
  }

  .columns {
    text-align: left;
  }

  .col h3 {
    margin-top: .4rem;
  }

  .center-col {
    text-align: center;
  }

  .btn-event {
    gap: 10px;
  }

  .calendar-button,
  .moovit-button {
    display: inline-flex;
  }
}

/* ≤880 : confort tablette portrait */
@media (max-width: 880px) {
  .name-fr {
    font-size: clamp(42px, 8.2vw, 72px);
  }

  .and {
    font-size: clamp(18px, 3.4vw, 24px);
    top: .12em;
  }

  .when,
  .timings,
  .place {
    font-size: 17px;
  }
}

/* ≤768 : mobile large */
@media (max-width: 768px) {
  .paper {
    padding: 82px 12px 90px;
  }

  .middle-logo {
    width: 110px;
  }

  .arc {
    font-size: clamp(18px, 3.8vw, 26px);
  }

  .parents {
    font-size: 16px;
  }

  .grandparents li {
    margin: .18rem 0;
  }

  .btn-houppa {
    font-size: .95rem;
    padding: 10px 18px;
  }
}

/* ≤560 : mobiles compacts */
@media (max-width: 560px) {
  .arc {
    font-size: 1.2rem;
  }

  .script-title {
    font-size: 1.55rem;
  }

  .name-fr {
    font-size: 46px;
  }

  .when,
  .timings,
  .place {
    font-size: 16px;
  }

  .btn-event {
    width: 100%;
  }

  .btn-houppa {
    width: auto;
  }
}

/* ≤420 : très petits écrans */
@media (max-width: 420px) {
  .name-fr {
    font-size: 42px;
  }

  .and {
    font-size: 18px;
  }

  .parents,
  .col,
  .when,
  .timings,
  .place {
    font-size: 15px;
  }

  .btn-houppa {
    font-size: .9rem;
    padding: 9px 16px;
  }
}

/* ==================== STATES RTL / LTR (sélecteur langue) ==================== */

html[data-lang="he"],
body[data-lang="he"] {
  direction: rtl;
}

body[data-lang="he"] #navbar {
  font-family: "Noto Serif Hebrew", serif;
}

body[data-lang="he"] .parents,
body[data-lang="he"] .when,
body[data-lang="he"] .timings,
body[data-lang="he"] .place {
  font-family: "Noto Serif Hebrew", serif;
}

/* ==================== IMPRESSION (si on imprime la carte) ==================== */

@media print {
  .paper {
    padding: 40px 24px;
  }

  .btn-event,
  #navbar,
  #scroll-progress,
  #musicToggle,
  #scrollToTop {
    display: none !important;
  }

  .paper-watermark {
    opacity: .07;
  }
}

/* =======================================================================
   PARTIE 3/3 — RSVP + FOOTER + RESPONSIVE EXTRA
   - Carte formulaire avec champs, selects, radios/checkbox custom
   - États : focus/hover/disabled/error/success, messages d’aide
   - Hints dynamiques + transitions hauteur
   - Compat. auto-fill, mobile keyboards, RTL partiel
   - Footer soigné
   - Breakpoints supplémentaires (1140/1040/880/640/380)
   ======================================================================= */

/* ============================ SECTION RSVP ============================ */

.rsvp {
  position: relative;
  padding: 110px 16px 120px;
  background:
    linear-gradient(135deg, rgba(193, 173, 151, .95), rgba(217, 200, 178, .85), rgba(237, 227, 214, .78)),
    radial-gradient(140% 80% at 50% -10%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 70%);
  overflow: hidden;
}

.form-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #efe6d9;
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .10);
  padding: 40px 28px 32px;
  text-align: center;
}

.rsvp h2 {
  font-family: var(--ff-serif);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--primary);
  margin: 0 0 22px;
  letter-spacing: .2px;
}

/* ---- Champs ---- */

#formulaire form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.input-name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .input-name {
    grid-template-columns: 1fr;
  }
}

#formulaire form input,
#formulaire form select,
#formulaire form textarea {
  width: 100%;
  border: 1px solid #e6dccb;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

/* Placeholders + autofill */
::placeholder {
  color: #a79d90;
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #2b2b2b;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Focus visibles et hover */
#formulaire form input:hover,
#formulaire form select:hover,
#formulaire form textarea:hover {
  border-color: var(--primary);
}

#formulaire form input:focus,
#formulaire form select:focus,
#formulaire form textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 108, .20);
}

/* Désactivés / readonly */
#formulaire form input:disabled,
#formulaire form select:disabled,
#formulaire form textarea:disabled {
  background: #f8f4ef;
  color: #9a9186;
  cursor: not-allowed;
}

/* Textarea */
#formulaire form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

/* Select wrapper (chevron) */
.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▾";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9b9286;
  font-size: .9rem;
  pointer-events: none;
}

#formulaire form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 38px;
  background: #fff;
  cursor: pointer;
}

/* Nombre de personnes + hints révèlent en transition */
#nombre-wrapper {
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
  max-height: 260px;
  opacity: 1;
}

#nombre-wrapper.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0 !important;
  overflow: hidden;
}

/* Hints & messages */
.form-hint {
  font-size: .88rem;
  color: #777;
  margin: -6px 0 10px;
  display: block;
}

/* ---- Radios navette (Assaha) ---- */

.assaha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  text-align: left;
  margin-top: 4px;
}

.assaha label {
  font-weight: 600;
  color: #3e352c;
}

.radio-group {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}

/* Radios custom */
.radio-group input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cdbba4;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.radio-group input[type="radio"]::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .15s ease;
  background: var(--primary);
}

.radio-group input[type="radio"]:checked {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(193, 173, 151, .22);
}

.radio-group input[type="radio"]:checked::before {
  transform: scale(1);
}

/* Ville navette affichée si Oui */
#villeAssahaWrapper {
  margin-top: 6px;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
  max-height: 140px;
}

#villeAssahaWrapper.hidden {
  max-height: 0;
  opacity: 0;
  margin: 0 !important;
  overflow: hidden;
}

/* ---- Bouton submit ---- */

.submit-button {
  background: var(--primary);
  border: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  border-radius: 30px;
  padding: 12px 22px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .10);
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.submit-button:hover {
  background: var(--primary-d);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
}

.submit-button:disabled {
  background: #cdbba7;
  cursor: not-allowed;
}

/* ---- États succès/erreur ---- */

.message {
  position: relative;
  padding: .9rem 1.15rem;
  border-radius: 10px;
  margin-top: 10px;
  text-align: left;
}

.success-message {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

#error-message {
  font-size: .95rem;
}

/* Champs en erreur (si tu ajoutes .is-invalid côté JS) */
.is-invalid {
  border-color: #d64545 !important;
  box-shadow: 0 0 0 3px rgba(214, 69, 69, .18) !important;
}

.invalid-hint {
  color: #a33434;
  font-size: .86rem;
  margin-top: -6px;
}

/* ============================ FOOTER ============================ */

.site-footer.footer-invitation {
  background: #fdf9f3;
  border-top: 1px solid #e3d4c0;
  box-shadow: inset 0 1px 0 #e3d4c0;
  color: #6b5b4a;
  padding: 24px 16px;
  text-align: center;
}

.footer-content p {
  margin: 8px 0;
  line-height: 1.6;
}

.footer-invitation a {
  color: #b8996e;
  font-weight: 700;
}

.footer-invitation a:hover {
  text-decoration: underline;
}

/* ============================ RESPONSIVE EXTRA ============================ */

/* 1140 — confort desktop medium */
@media (max-width:1140px) {
  .form-container {
    max-width: 620px;
  }
}

/* 1040 — tablette large */
@media (max-width:1040px) {
  .form-container {
    padding: 36px 24px;
  }

  .rsvp {
    padding: 96px 14px 108px;
  }
}

/* 880 — tablette portrait */
@media (max-width:880px) {
  .rsvp h2 {
    font-size: clamp(24px, 3.8vw, 30px);
  }

  #formulaire form input,
  #formulaire form select,
  #formulaire form textarea {
    font-size: 15.5px;
    padding: 11px 13px;
  }
}

/* 640 — mobile large */
@media (max-width:640px) {
  .form-container {
    border-radius: 16px;
  }

  .radio-group {
    gap: 12px;
  }

  .submit-button {
    padding: 11px 20px;
  }
}

/* 520 — mobile classique (déjà utilisé dans P1/P2) */

/* 440 — petits mobiles */
@media (max-width:440px) {
  .form-container {
    padding: 28px 18px;
  }

  .rsvp {
    padding: 84px 10px 94px;
  }

  .rsvp h2 {
    font-size: 20px;
  }

  .submit-button {
    padding: 10px 18px;
    font-size: .98rem;
  }
}

/* 380 — très petits écrans */
@media (max-width:380px) {

  #formulaire form input,
  #formulaire form select,
  #formulaire form textarea {
    font-size: 15px;
  }

  .radio-group input[type="radio"] {
    width: 16px;
    height: 16px;
  }

  .radio-group input[type="radio"]::before {
    width: 9px;
    height: 9px;
  }
}

/* ============================ RTL FIN (si bascule complète en HE) ============================ */

body[data-lang="he"] #formulaire h2,
body[data-lang="he"] #formulaire form,
body[data-lang="he"] .form-hint {
  font-family: "Noto Serif Hebrew", serif;
}

body[data-lang="he"] #formulaire input,
body[data-lang="he"] #formulaire textarea {
  direction: rtl;
}

/* ============================ PRINT ============================ */

@media print {
  .rsvp {
    padding: 40px 0;
    background: #fff;
  }

  .form-container {
    border: none;
    box-shadow: none;
  }

  #scrollToTop,
  #musicToggle {
    display: none !important;
  }
}

/* =========================
   HOUPPA & SOIRÉE — PROSE
   Overrides pour mise en page style faire-part
   ========================= */

/* Fond pleine page avec bg-floral.jpeg */
/* Le background CSS avec "fixed" crée l'effet parallax */
#houppa-soiree.paper {
  position: relative;
  padding: clamp(64px, 8vw, 120px) 18px;
  overflow: hidden;
  /* Background fixé comme Natanel-Ora - effet parallax */
  background: url('bg-floral.jpeg') center/cover no-repeat fixed;
}

/* Voile transparent sur la carte - position ABSOLUTE pour rester dans la section */
#houppa-soiree .paper-veil {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .74) 38%, rgba(255, 255, 255, .62) 100%),
    radial-gradient(120% 100% at 50% 0, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
}

/* Image de fond : CACHÉE car on utilise le background CSS avec fixed */
/* Gardée seulement pour Safari/iOS qui ne supporte pas bien background-attachment:fixed */
#houppa-soiree .paper-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: contrast(1.02) saturate(1.02) brightness(1.02);
  /* Cachée par défaut - le background CSS prend le relais */
  display: none;
}

/* Fallback Safari/iOS : afficher l'image si background-attachment:fixed ne fonctionne pas */
@supports (-webkit-touch-callout: none) {
  #houppa-soiree.paper {
    background: none;
  }

  #houppa-soiree .paper-bg {
    display: block;
  }
}

/* Filigrane logo centré et discret */
#houppa-soiree .paper-watermark {
  position: absolute;
  left: 50%;
  top: 180px;
  transform: translateX(-50%);
  width: min(220px, 32vw);
  opacity: .07;
  filter: grayscale(100%);
  z-index: 0;
  pointer-events: none;
}

/* Conteneur du texte */
#houppa-soiree .paper-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
}

/* Titre arc hébreu */
#houppa-soiree #arc-title {
  text-align: center;
  color: var(--primary-color);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .03em;
  font-size: clamp(18px, 2.6vw, 28px);
  margin: 0 0 6px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* Taille en mode hébreu - même que français */
#houppa-soiree.he-mode #arc-title,
html[data-lang="he"] #houppa-soiree #arc-title {
  font-size: clamp(18px, 2.5vw, 28px);
}

/* "Houppa & Soirée" + filet doré */
#houppa-soiree #houppa_title {
  text-align: center;
  color: var(--primary-color);
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(24px, 5vw, 56px);
  margin: 6px 0 10px;
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

#houppa-soiree .hairline {
  width: 64px;
  height: 3px;
  border-radius: 2px;
  margin: 10px auto 24px;
  background: var(--primary-color);
  position: relative;
  z-index: 2;
}

/* Bloc parents alignés gauche/droite (se replie au centre sur mobile) */
.parents-duo {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 980px;
  margin: 0 auto 8px;
  padding: 0 6px;
  font-family: "Playfair Display", serif;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.45;
  color: #3b342e;
}

.parents-duo span {
  white-space: nowrap
}

@media (max-width:760px) {
  .parents-duo {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center
  }
}

/* Paragraphe de prose */
#houppa-soiree .hp {
  font-family: "Cardo", serif;
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.65;
  color: #4a4038;
  text-align: center;
}

/* NOMS — calligraphie + & en serif */
#houppa-soiree .names-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

#houppa-soiree .names-block .name-fr {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--primary-color);
  font-size: clamp(42px, 7.5vw, 80px);
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

#houppa-soiree .names-block .and {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: #7d5d3a;
  font-size: clamp(20px, 3.8vw, 34px);
}

#houppa-soiree .names-block .he-only {
  font-size: clamp(18px, 3.2vw, 26px);
  color: #7d5d3a;
}

/* Lignes date / lieu / horaires */
#houppa-soiree .when {
  margin: .45rem 0 .2rem;
  color: #3d3832
}

#houppa-soiree .timings {
  margin: .35rem 0;
  font-style: italic
}

#houppa-soiree .place {
  margin: .35rem 0;
  direction: rtl;
}

/* Boutons événement (Waze / Calendrier / Moovit) */
#houppa-soiree .btn-event {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

#houppa-soiree .btn-houppa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 700;
  text-decoration: none;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  transition: .18s transform ease, .18s box-shadow ease;
}

#houppa-soiree .btn-houppa:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12)
}

#houppa-soiree .calendar-button {
  background: var(--primary-color);
  border: 1px solid var(--primary-color)
}

#houppa-soiree .waze-button {
  background: var(--primary-color);
  border: 1px solid var(--primary-color)
}

#houppa-soiree .moovit-button {
  background: #F76100;
  border: 1px solid #F76100
}

/* Logo central un peu plus compact sur mobile */
#houppa-soiree .middle-logo {
  width: min(160px, 26vw);
  display: block;
  margin: 6px auto 2px;
  position: relative;
  z-index: 2;
  opacity: 0.85;
  filter: grayscale(15%);
}

#houppa-soiree .middle-logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
  border-radius: 50%;
}

/* Petites corrections de rythme */
#houppa-soiree .hp+.hp {
  margin-top: .25rem
}

#houppa-soiree .dedic {
  color: #5b5249
}

/* ============================
   PALETTE OR / IVOIRE
   ============================ */
:root {
  --primary-color: #B78C54;
  /* Doré élégant */
  --primary-dark: #7d5d3a;
  /* Brun chaud */
  --text-main: #2b2b2b;
  --text-muted: #6a625a;
  --bg-light: #FAF6F2;
}

/* === Textes importants === */
.accent,
.names-calligraphy .script,
.names-calligraphy .under,
.hp.when strong,
.hp.timings .accent {
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* === Compteur élégant === */
.compteur.compteur-elegant .compteur-bloc {
  background: rgba(183, 140, 84, .10);
  border: 2px solid rgba(183, 140, 84, .55);
  border-radius: 14px;
  padding: 12px 18px;
  min-width: 80px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
}

.compteur.compteur-elegant .nombre {
  font-family: "Great Vibes", cursive;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
  color: var(--primary-color);
  margin-bottom: 6px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

.compteur.compteur-elegant .label {
  font-family: "Playfair Display", serif;
  font-variant: small-caps;
  letter-spacing: .06em;
  color: var(--primary-dark);
  font-size: 13px;
}

/* === Bloc prénoms === */
.names-calligraphy .script {
  font-size: clamp(46px, 8vw, 110px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

.names-calligraphy .under {
  font-size: clamp(14px, 1.9vw, 22px);
  color: var(--primary-dark);
}

/* === Texte hébreu bas === */
.hebrew-bottom {
  font-family: "Noto Serif Hebrew", serif;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--primary-dark);
  margin: .6rem 0 .2rem;
}

/* === Dédicace plus discrète === */
.dedic.small {
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--text-muted);
  line-height: 1.4;
}

/* === Général === */
body {
  background: var(--bg-light);
  color: var(--text-main);
}


/* === Fond "floral doré" === */

/* ---------- Grille parents / grands-parents ---------- */
.parents-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px clamp(40px, 8vw, 100px);
  max-width: 1100px;
  margin: 0 auto 10px;
  font-family: 'Playfair Display', serif;
  color: #4b3b2a;
}

.parents-grid .col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parents-grid .line {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.35;
}

.parents-grid .line strong {
  color: #7d5d3a;
  font-weight: 600;
}

/* Mobile : colonnes l’une sous l’autre */
@media (max-width: 820px) {
  .parents-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: center;
  }
}

/* ---------- Waze : même style que le bouton agenda ---------- */
.btn-houppa.waze-button {
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: #fff !important;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .2s ease, background-color .25s ease, box-shadow .25s ease;
}

.btn-houppa.waze-button:hover {
  background: #9a6e3f;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

/* ---------- On cache le bouton son s’il était encore dans le HTML ---------- */
#musicToggle {
  display: none !important;
}


.parents-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  max-width: 1000px;
  margin: 1.2rem auto;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  /* <-- plus léger */
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.5;
  color: #4b3b2c;
}

.parents-grid .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.parents-grid .line {
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
}

.parents-grid .line:hover {
  color: var(--primary-color);
}

@media (max-width: 700px) {
  .parents-grid {
    flex-direction: column;
    gap: 12px;
  }
}

.invitation-text {
  font-family: 'Cardo', serif;
  font-size: clamp(17px, 2vw, 22px);
  color: #3f3428;
  line-height: 1.6;
}

.invitation-text strong {
  color: var(--primary-color);
  font-weight: 600;
}

.invitation-text .accent {
  color: var(--primary-color);
  font-weight: 500;
}

.parents-grid {
  display: flex;
  justify-content: center;
  gap: 50px;
  max-width: 1000px;
  margin: 1.5rem auto 0;
  text-align: center;
  flex-wrap: wrap;
}

.parents-grid .col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parents-grid .line {
  font-family: 'Cardo', serif;
  font-size: clamp(17px, 2vw, 22px);
  color: #3f3428;
  line-height: 1.6;
}

.invitation-text {
  font-family: 'Cardo', serif;
  font-size: clamp(17px, 2vw, 22px);
  color: #3f3428;
  line-height: 1.6;
}

.invitation-text strong {
  color: var(--primary-color);
  font-weight: 600;
}

.invitation-text .accent {
  color: var(--primary-color);
  font-weight: 500;
}

.paper #houppa_title.script-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--primary-color) !important;
  font-size: clamp(22px, 5.5vw, 42px) !important;
  text-align: center !important;
  margin-top: 0.6rem !important;
  margin-bottom: 0.9rem !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25) !important;
}


/* ===== HE MODE (hébreu élégant) ===== */
:root {
  --he-font: "Noto Serif Hebrew", serif;
}

body.he-mode {
  direction: rtl;
}

#houppa-soiree.he-mode {
  direction: rtl;
  text-align: center;
}

/* Titres et textes de la carte en hébreu */
#houppa-soiree.he-mode .script-title,
#houppa-soiree.he-mode .hp,
#houppa-soiree.he-mode .parents-grid .line,
#houppa-soiree.he-mode .invitation-text,
#houppa-soiree.he-mode .timings,
#houppa-soiree.he-mode .place {
  font-family: var(--he-font);
}

/* Titre "Houppa & Soirée" → plus fin en hébreu */
#houppa-soiree.he-mode #houppa_title.script-title {
  font-weight: 500;
  /* plus fin */
  letter-spacing: 0.02em;
  /* plus serré */
  font-size: clamp(18px, 2vw, 24px);
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* Noms calligraphiés en hébreu : mêmes proportions que le français */
#houppa-soiree.he-mode .names-calligraphy .script {
  font-family: var(--he-font);
  font-weight: 700;
  font-size: clamp(46px, 8vw, 110px);
  line-height: .9;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

#houppa-soiree.he-mode .names-calligraphy .amp {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: #7d5d3a;
  font-size: clamp(22px, 3.5vw, 36px);
  margin: 0 .15em .15em;
}

/* Sous-texte hébreu visible et de même style */
#houppa-soiree.he-mode .names-calligraphy .under {
  display: block;
  font-family: var(--he-font);
  font-weight: 600;
  font-size: clamp(14px, 2vw, 20px);
  color: var(--primary-color);
  margin-top: 0.3em;
}

/* on enlève le petit sous-titre latin */

#houppa-soiree.he-mode .parents-grid {
  gap: 10px;
}

#houppa-soiree.he-mode .parents-grid .col .line {
  font-weight: 500;
}

/* Boutons en hébreu : même style, juste RTL */
#houppa-soiree.he-mode .btn-event {
  direction: rtl;
}

/* ===== mode hébreu étendu ===== */
body.he-mode {
  direction: rtl;
}

#houppa-soiree.he-mode,
#formulaire.he-mode {
  direction: rtl;
  text-align: center;
}

body.he-mode input,
body.he-mode select,
body.he-mode textarea {
  direction: rtl;
  text-align: right;
}

/* typo hébreu élégante sur la carte + RSVP */
:root {
  --he-font: "Noto Serif Hebrew", serif;
}

#houppa-soiree.he-mode .hp,
#houppa-soiree.he-mode .invitation-text,
#houppa-soiree.he-mode .parents-grid .line,
#houppa-soiree.he-mode .timings,
#houppa-soiree.he-mode .place,
#houppa-soiree.he-mode #houppa_title,
#formulaire.he-mode h2,
#formulaire.he-mode label,
#formulaire.he-mode .form-hint,
#formulaire.he-mode .submit-button,
#formulaire.he-mode input,
#formulaire.he-mode select,
#formulaire.he-mode textarea {
  font-family: var(--he-font);
}

/* H1 (HERO) noms en hébreu élégant */
body.he-mode #accueil .names {
  font-family: var(--he-font) !important;
}

#arc-title {
  letter-spacing: 2px !important;
  font-weight: 500;
  direction: rtl;
  color: var(--primary-color) !important;
}

/* ====== Prénoms calligraphiés — centre de carte ====== */
.names-calligraphy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 2.5vw, 28px);
  margin: clamp(12px, 2.2vw, 24px) auto clamp(10px, 1.8vw, 18px);
  text-align: center;
  flex-wrap: wrap;
}

.names-calligraphy .script {
  font-family: "Great Vibes", cursive;
  font-size: clamp(44px, 9vw, 120px);
  line-height: .9;
  letter-spacing: clamp(0.2px, 0.1vw, 0.8px);
  color: var(--primary-color);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.names-calligraphy .amp {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
  margin: 0 .15em .2em;
  color: #7d5d3a;
  letter-spacing: 0.02em;
}

.names-calligraphy .under {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 600;
  font-size: clamp(14px, 2.5vw, 22px);
  line-height: 1.1;
  margin-top: clamp(2px, .4vw, 6px);
  color: #7d5d3a;
  letter-spacing: 0.02em;
}

/* Mobile : resserrer un chouïa et éviter que ça “pète” la ligne */
@media (max-width: 560px) {
  .names-calligraphy {
    gap: clamp(10px, 3vw, 16px);
  }

  .names-calligraphy .script {
    font-size: clamp(40px, 11.5vw, 78px);
    letter-spacing: 0.3px;
  }

  .names-calligraphy .amp {
    font-size: clamp(20px, 6.5vw, 28px);
    margin-bottom: .15em;
  }
}

/* Mode hébreu : utiliser un tiret fin, resserrer légèrement la lettre */
.he-mode .names-calligraphy .amp {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.he-mode .names-calligraphy .script {
  letter-spacing: 0.1px;
  /* un peu plus serré en HE */
}

/* Petit fondu lors du switch de langue */
.lang-fade {
  transition: opacity .25s ease;
  opacity: .25;
}

/* ====== Noms calligraphiés (centre de carte) ====== */
.names-calligraphy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 26px);
  margin: clamp(12px, 2.2vw, 24px) auto clamp(8px, 1.6vw, 16px);
  text-align: center;
  flex-wrap: wrap;
}

.names-calligraphy .script {
  font-family: "Great Vibes", cursive;
  font-size: clamp(44px, 9vw, 118px);
  line-height: .9;
  letter-spacing: clamp(0.2px, 0.1vw, 0.8px);
  color: var(--primary-color);
  text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.names-calligraphy .amp {
  font-family: "Playfair Display", serif;
  font-weight: 600;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1;
  margin: 0 .15em .18em;
  color: #7d5d3a;
  letter-spacing: 0.02em;
}

.names-calligraphy .under {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 600;
  font-size: clamp(14px, 2.5vw, 22px);
  line-height: 1.1;
  margin-top: clamp(2px, .4vw, 6px);
  color: #7d5d3a;
  letter-spacing: 0.02em;
}

/* mobile: éviter que ça “pète” les lignes */
@media (max-width: 560px) {
  .names-calligraphy {
    gap: clamp(8px, 3vw, 14px);
  }

  .names-calligraphy .script {
    font-size: clamp(40px, 11.5vw, 78px);
  }

  .names-calligraphy .amp {
    font-size: clamp(18px, 6.5vw, 28px);
  }
}

/* Afficher les sous-titres HÉBREU seulement en HE */
.he-only {
  display: none;
}

.he-mode .he-only {
  display: inline;
}

/* En HE, utiliser un séparateur type tiret fin (le JS posera le bon char) */
.he-mode .names-calligraphy .amp {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Noms au centre - style par défaut (FR) déjà OK avec Great Vibes
   On n'y touche pas. On surcharge seulement quand la langue = he. */

/* Container commun (si pas déjà défini) */
.names-inline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 18px);
  flex-wrap: wrap;
  margin: .35rem 0 .15rem;
  text-align: center;
}

/* FR déjà configuré chez toi : .names-inline .script = Great Vibes */
/* HE — look plus fin et typé hébreu */
html[data-lang="he"] .names-inline .script {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-weight: 400;
  /* plus fin */
  font-size: clamp(42px, 8.4vw, 120px);
  line-height: .92;
  letter-spacing: 0.01em;
  /* resserrer légèrement sans coller */
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 1, "kern" 1;
}

/* Tiret fin entre les prénoms en HE (un poil plus petit) */
html[data-lang="he"] .names-inline .amp {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-weight: 400;
  font-size: clamp(22px, 4.2vw, 48px);
  transform: translateY(-0.12em);
  opacity: .9;
}

/* Si tu affiches des sous-légendes sous les prénoms (underLeft/underRight), affine aussi */
html[data-lang="he"] .names-inline .under {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-weight: 400;
  font-size: clamp(14px, 2.4vw, 22px);
  letter-spacing: 0.015em;
  color: #7d5d3a;
  margin-top: -4px;
}

/* Petites optimisations mobile */
@media (max-width: 560px) {
  html[data-lang="he"] .names-inline {
    gap: clamp(6px, 2.5vw, 12px);
  }

  html[data-lang="he"] .names-inline .script {
    font-size: clamp(36px, 12vw, 96px);
  }
}

/* --- Version affinée hébreu pour נתנאל & אורה מרים --- */
html[data-lang="he"] .names-inline .script {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-weight: 300;
  /* plus fin */
  font-size: clamp(42px, 8vw, 118px);
  line-height: 0.9;
  color: var(--primary-color);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* Affine davantage le rendu typographique (anti-aliasing) */
html[data-lang="he"] .names-inline .script span {
  display: inline-block;
  vertical-align: baseline;
}

/* נתנאל (Natanel) = taille normale */
html[data-lang="he"] .names-inline .script .he-natanel {
  font-weight: 300;
}

/* אורה = un peu plus grand, Mרים = légèrement plus petit */
html[data-lang="he"] .names-inline .script .he-ora {
  font-weight: 300;
  font-size: 1em;
}

html[data-lang="he"] .names-inline .script .he-miriam {
  font-weight: 300;
  font-size: 0.75em;
  /* plus petit et plus fin */
  margin-right: 0.1em;
  opacity: 0.95;
}

/* Tiret discret entre les deux prénoms */
html[data-lang="he"] .names-inline .amp {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-size: clamp(20px, 3.5vw, 42px);
  font-weight: 300;
  opacity: 0.9;
}

/* --- Style hébreu uniquement pour נתנאל & אורה מרים --- */
html[data-lang="he"] .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", "Miriam Libre", serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* Le prénom principal (Natanel / Ora) */
html[data-lang="he"] .names-calligraphy .script .under.he-only {
  display: block;
  font-family: "Noto Serif Hebrew", "Miriam Libre", serif;
  font-weight: 300;
  font-size: 0.8em;
  line-height: 1;
  letter-spacing: 0.04em;
  margin-top: 0.1em;
  opacity: 0.95;
}

/* Variante pour la kala (אורה מרים) : Miriam plus petite */
html[data-lang="he"] #namesInlineGroom .under.he-only {
  display: inline-block;
  font-size: 0.4em;
  font-weight: 300;
  color: var(--primary-color);
}

html[data-lang="he"] #namesInlineGroom .under.he-only::after {
  content: " ";
}

/* Effet fin et élégant sur toute la calligraphie hébreu */
html[data-lang="he"] .names-calligraphy {
  direction: rtl;
  text-align: center;
}

html[data-lang="he"] .names-calligraphy .name-left,
html[data-lang="he"] .names-calligraphy .name-right {
  font-weight: 300;
  color: var(--primary-color);
}

/* ===== Raffinement HÉBREU – noms au centre ===== */
html[data-lang="he"] .names-calligraphy {
  direction: rtl;
  text-align: center;
}

/* Noms principaux (grands) en hébreu : même taille que français */
html[data-lang="he"] .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 700;
  font-size: clamp(46px, 8vw, 110px);
  line-height: .9;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
  color: var(--primary-color);
}

/* Séparateur au centre (& grand et visible) */
html[data-lang="he"] #namesInlineAnd {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  color: #7d5d3a;
  transform: translateY(-0.08em);
  margin: 0 .35em;
}

/* “מרים” plus petit (injecté via JS avec .he-miriam) */
html[data-lang="he"] #namesInlineGroom .he-miriam {
  font-size: 0.62em;
  /* plus petit que “אורה” */
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-inline-start: .25em;
  display: inline-block;
}

/* Sous-lignes hébreu (si tu les affiches) : plus fines */
html[data-lang="he"] .names-calligraphy .under.he-only {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  font-size: 0.82em;
  line-height: 1;
  letter-spacing: 0.03em;
  opacity: 0.95;
  margin-top: 0.15em;
}

/* ===== Raffinement HÉBREU – noms du héros (compte à rebours) ===== */
html[data-lang="he"] #accueil .names .bride,
html[data-lang="he"] #accueil .names .groom {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 400;
  /* plus fin que 700 */
  font-size: clamp(36px, 8.5vw, 84px);
  /* légèrement plus petit */
  letter-spacing: 0.01em;
}

html[data-lang="he"] #accueil .names .et {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  transform: translateY(-0.06em);
}

/* ====== HE — Noms au centre : affiner, aligner, & plus petit ====== */
html[data-lang="he"] .names-calligraphy {
  direction: rtl;
  display: flex;
  justify-content: center;
  align-items: center;
  /* évite le décalage vertical de נתנאל */
  gap: .25em;
  text-align: center;
}

html[data-lang="he"] .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 700;
  font-size: clamp(46px, 8vw, 110px);
  line-height: .9;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
  color: var(--primary-color);
}

/* Séparateur au centre : plus grand et visible */
html[data-lang="he"] #namesInlineAnd {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1;
  color: #7d5d3a;
  transform: translateY(-0.08em);
  margin: 0 .35em;
}

/* “מרים” réduit (injecté par styleHebrewInlineNames) */
html[data-lang="he"] #namesInlineGroom .he-miriam {
  font-size: 0.62em;
  font-weight: 300;
  letter-spacing: .02em;
  margin-inline-start: .25em;
  display: inline-block;
}

/* On supprime le doublon “מרים” de la sous-ligne */
html[data-lang="he"] .names-calligraphy .under.he-only {
  display: none;
}

/* Mobile : encore un peu plus doux */
@media (max-width: 560px) {
  html[data-lang="he"] .names-calligraphy .script {
    font-size: clamp(36px, 10vw, 64px);
  }

  html[data-lang="he"] #namesInlineAnd {
    font-size: .50em;
  }
}

/* ====== HE — Héros (compte à rebours) : plus fin et un poil plus petit ====== */
html[data-lang="he"] #accueil .names .bride,
html[data-lang="he"] #accueil .names .groom {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 400;
  font-size: clamp(32px, 7.5vw, 72px);
  letter-spacing: .01em;
}

html[data-lang="he"] #accueil .names .et {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  transform: translateY(-0.06em);
}

/* ----- HE : noms au centre, & plus petit, alignement nickel ----- */
html[data-lang="he"] .names-calligraphy {
  direction: rtl;
  display: flex;
  justify-content: center;
  align-items: center;
  /* aligne נתנאל / אורה */
  gap: .3em;
  text-align: center;
}

html[data-lang="he"] .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  font-size: clamp(44px, 7.0vw, 92px);
  line-height: 1;
  letter-spacing: .01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
  color: var(--primary-color);
}

/* le symbole & (au milieu) plus discret */
html[data-lang="he"] #namesInlineAnd {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  font-size: .55em;
  /* <-- plus petit */
  line-height: 1;
  transform: translateY(-0.06em);
  margin: 0 .25em;
}

/* "מרים" plus petit dans la ligne principale */
html[data-lang="he"] #namesInlineGroom .he-miriam {
  font-size: 0.62em;
  font-weight: 300;
  letter-spacing: .02em;
  margin-inline-start: .25em;
  display: inline-block;
}

/* supprime la sous-ligne en HE (évite le doublon) */
html[data-lang="he"] .names-calligraphy .under.he-only {
  display: none !important;
}

/* Mobile : un peu plus doux */
@media (max-width: 560px) {
  html[data-lang="he"] .names-calligraphy .script {
    font-size: clamp(36px, 10vw, 64px);
  }

  html[data-lang="he"] #namesInlineAnd {
    font-size: .48em;
  }
}

/* ----- HE : héros (compteur) un poil plus fin/petit ----- */
html[data-lang="he"] #accueil .names .bride,
html[data-lang="he"] #accueil .names .groom {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 600;
  font-size: clamp(32px, 7.5vw, 92px);
  letter-spacing: .01em;
}

html[data-lang="he"] #accueil .names .et {
  font-family: "Noto Serif Hebrew", serif;
  font-weight: 300;
  transform: translateY(-0.06em);
}


/* ====== NOMS — overrides HE uniquement ====== */

/* 1) En hébreu, on ne montre pas les petits sous-titres (les <span class="under he-only">) */
html[data-lang="he"] .names-calligraphy .under.he-only {
  display: none !important;
}

/* 2) Ligne de noms compacte, une seule ligne */
html[data-lang="he"] .names-calligraphy {
  direction: rtl;
  flex-wrap: nowrap;
  /* force une seule ligne */
  justify-content: center;
  align-items: baseline;
  /* aligne visuellement les baselines */
  gap: 0.28em;
  line-height: 1;
  text-align: center;
}

/* 3) Style des prénoms hébreu : plus fin + plus petit */
html[data-lang="he"] .names-calligraphy .script {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  /* tu as déjà importé Miriam Libre */
  font-weight: 400;
  /* plus fin */
  font-size: clamp(34px, 6.2vw, 68px);
  /* plus petit que FR */
  letter-spacing: 0.01em;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
}

/* 4) Le symbole & un peu plus petit et mieux calé */
html[data-lang="he"] #namesInlineAnd {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
  font-weight: 400;
  font-size: 0.58em;
  /* réduit par rapport aux noms */
  margin: 0 0.15em 0;
  transform: translateY(-0.06em);
  /* léger ajustement vertical */
  color: var(--primary-color);
}

/* 5) Petits ajustements sur le conteneur de droite pour éviter un décalage vertical */
html[data-lang="he"] .names-calligraphy .name-right {
  display: inline-flex;
  flex-direction: row;
  /* empêche les colonnes qui décalent */
  align-items: baseline;
}

/* 6) Version "dans la carte" si tu utilises la classe .in-card (on garde la même ligne) */
html[data-lang="he"] .names-calligraphy.in-card .script {
  font-size: clamp(32px, 5.8vw, 64px);
}

/* 7) Mobile : on réduit un peu plus pour tenir sur une ligne */
@media (max-width: 560px) {
  html[data-lang="he"] .names-calligraphy .script {
    font-size: clamp(28px, 7.2vw, 56px);
  }

  html[data-lang="he"] #namesInlineAnd {
    font-size: 0.54em;
  }
}

/* ====== (optionnel) HERO : prénoms au compteur un peu plus fins en HE ====== */
@media (max-width: 9999px) {
  html[data-lang="he"] #accueil .names {
    font-family: "Miriam Libre", "Noto Serif Hebrew", serif;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
}

/* ===== HE — prénoms du bloc carte (forcés) ===== */
html[data-lang="he"] #namesInline {
  direction: rtl;
  flex-wrap: nowrap !important;
  /* une seule ligne */
  white-space: nowrap !important;
  align-items: baseline;
  gap: .28em;
  line-height: 1;
  text-align: center;
}

html[data-lang="he"] #namesInline .script {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  /* plus fin */
  font-size: clamp(32px, 5.6vw, 64px) !important;
  /* plus petit */
  letter-spacing: .01em;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25) !important;
}

html[data-lang="he"] #namesInlineAnd {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  font-size: 0.56em !important;
  /* & plus petit */
  line-height: 1 !important;
  margin: 0 .15em 0 !important;
  transform: translateY(-.06em);
  /* petit ajustement vertical */
  color: var(--primary-color) !important;
}

/* Masque les sous-lignes hébraïques pour éviter le doublon "מרים" */
html[data-lang="he"] #namesInline .under.he-only {
  display: none !important;
}

/* Mobile : on réduit encore un peu pour tenir sur une ligne */
@media (max-width: 480px) {
  html[data-lang="he"] #namesInline .script {
    font-size: clamp(26px, 7.6vw, 48px) !important;
  }

  html[data-lang="he"] #namesInlineAnd {
    font-size: .52em !important;
  }
}

/* ===== HE — H1 du héros au compteur un peu plus fin aussi ===== */
html[data-lang="he"] #accueil .names {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
}

html[data-lang="he"] #accueil .names .et {
  font-size: .6em !important;
}

/* ===== HE — prénoms AU CENTRE DE LA CARTE uniquement ===== */
html[data-lang="he"] #namesInline {
  direction: rtl;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  align-items: baseline;
  gap: .28em;
  line-height: 1;
}

html[data-lang="he"] #namesInline .script {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  /* plus fin */
  font-size: clamp(32px, 5.6vw, 64px) !important;
  /* plus petit */
  letter-spacing: .01em;
  color: var(--primary-color);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25) !important;
}

html[data-lang="he"] #namesInlineAnd {
  font-family: "Miriam Libre", "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  font-size: 0.56em !important;
  /* & plus petit */
  line-height: 1 !important;
  margin: 0 .15em 0 !important;
  transform: translateY(-.06em);
  color: var(--primary-color) !important;
}

/* Evite le doublon “מרים” (les petites sous-lignes) */
html[data-lang="he"] #namesInline .under.he-only {
  display: none !important;
}

@media (max-width:480px) {
  html[data-lang="he"] #namesInline .script {
    font-size: clamp(26px, 7.6vw, 48px) !important;
  }

  html[data-lang="he"] #namesInlineAnd {
    font-size: .52em !important;
  }
}

/* RSVP — enfants */
.kids-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.kid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
}

.kid-row input {
  width: 100%;
}

html[dir="rtl"] .kid-row {
  direction: rtl;
}

@media (max-width:520px) {
  .kid-row {
    grid-template-columns: 1fr 1fr;
  }

  .kid-row input.kid-age {
    grid-column: 1 / -1;
  }
}

/* Cache générique, pour tous les blocs .hidden (enfants, etc.) */
.hidden {
  display: none !important;
}

/* Labels plus légers et harmonisés */
.rsvp label,
.assaha label,
#childrenLabel {
  font-weight: 500;
  /* au lieu de 600 “gras” */
  color: #5b5044;
  /* doux */
}

/* Bouton Envoyer : discret, beige, arrondi/petit */
.submit-button {
  background: var(--primary);
  /* déjà beige doré chez toi */
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  /* plus petit */
  font-weight: 600;
  /* léger/ferme, pas trop gras */
  font-size: .98rem;
}

/* Enfants : grille compacte & mobile friendly (tu as déjà la base) */
.kids-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.kid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
}

.kid-row input {
  width: 100%;
}

html[dir="rtl"] .kid-row {
  direction: rtl;
}

@media (max-width:520px) {
  .kid-row {
    grid-template-columns: 1fr 1fr;
  }

  .kid-row input.kid-age {
    grid-column: 1 / -1;
  }
}

/* RSVP — enfants */
.kids-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.kid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 90px;
  gap: 8px;
}

.kid-row input {
  width: 100%;
}

.kid-row .kid-age {
  text-align: center;
}

html[dir="rtl"] .kid-row {
  direction: rtl;
}

@media (max-width:520px) {
  .kid-row {
    grid-template-columns: 1fr 1fr;
  }

  .kid-row .kid-age {
    grid-column: 1 / -1;
  }
}

/* ================== MOBILE SEULEMENT ================== */
@media (max-width: 768px) {

  html,
  body {
    overflow-x: hidden;
  }

  body {
    padding-inline: clamp(12px, 4vw, 20px);
  }

  /* Typos responsives */
  h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
  }

  h2 {
    font-size: clamp(20px, 6vw, 28px);
  }

  p,
  li,
  label,
  input,
  select,
  textarea {
    font-size: clamp(14px, 4vw, 18px);
  }

  /* Conteneurs / sections */
  .container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
  }

  section {
    padding: clamp(24px, 6vw, 48px) 0;
  }

  /* Hero 100vh iOS-friendly + fond */
  .hero {
    min-height: calc(var(--vh, 1vh) * 100);
    display: grid;
    place-items: center;
    padding: 24px 0;
    background: url("./bg-floral.jpeg") center/cover no-repeat;
    position: relative;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .72);
  }

  .hero .cta {
    width: 100%;
    max-width: 420px;
  }

  /* Navbar / Burger */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 60;
  }

  .burger {
    width: 44px;
    height: 44px;
  }

  .menu {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(255, 255, 255, .96);
    padding: 24px;
    transform: translateY(-100%);
    transition: transform .25s ease;
  }

  .menu.is-open {
    transform: translateY(0);
  }

  body.nav-open {
    overflow: hidden;
    height: 100dvh;
  }

  /* bloque le scroll derrière le menu */

  /* Grilles */
  .grid {
    display: grid;
    gap: 16px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* passe en 1 colonne sur mobile */
  .countdown {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .countdown .pill {
    padding: 12px 10px;
    border-radius: 14px;
  }

  /* Formulaire RSVP (touch 44px + anti-zoom iOS) */
  input,
  select,
  textarea,
  button {
    min-height: 44px;
    font-size: 16px;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
  }

  /* Médias */
  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
  }

  .map-embed,
  .video {
    width: 100%;
    aspect-ratio: 16/9;
  }

  /* Audio fixé en bas + place au footer */
  .audio-fixed {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0) + 12px);
    transform: translateX(-50%);
    width: min(420px, 94vw);
    z-index: 80;
  }

  footer {
    padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
  }

  /* Ancrages sous header sticky */
  .anchor {
    scroll-margin-top: 80px;
  }

  /* RTL pour l’hébreu */
  html[dir="rtl"] {
    direction: rtl;
  }

  html[dir="rtl"] .menu,
  html[dir="rtl"] .navbar {
    text-align: right;
  }
}

/* ===================== PATCH MOBILE (<=768px) ===================== */
/* ===================== PATCH MOBILE (<=768px) ===================== */
@media (max-width: 768px) {

  /* 1) Accueil : "Natanel & Ora" PLUS GRAND */
  .hero h1,
  .hero .title,
  .hero .names,
  .hero .couple-name {
    font-size: clamp(34px, 12vw, 56px);
    line-height: 1.1;
    letter-spacing: .02em;
    margin-bottom: 8px;
    text-align: center;
  }

  /* 1bis) Compte à rebours PLUS PETIT et sur UNE SEULE LIGNE */
  .countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  .countdown .pill {
    padding: 10px 8px;
    border-radius: 14px;
  }

  .countdown .number {
    font-size: clamp(18px, 7.5vw, 26px);
    line-height: 1;
  }

  .countdown .label {
    font-size: clamp(11px, 3.5vw, 14px);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .countdown .number,
  .countdown .label {
    white-space: nowrap;
  }

  /* évite le retour à la ligne */

  /* 2) Logo sous l’arc : LÉGÈREMENT PLUS GRAND */
  .logo,
  img.logo,
  .brand-logo {
    width: clamp(140px, 44vw, 200px);
    max-width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }

  /* 2bis) Titre "HOUPPA & SOIRÉE" LÉGÈREMENT PLUS PETIT */
  #houppa h2,
  #soiree h2,
  .title-houppa,
  .title-soiree,
  .section-title {
    font-size: clamp(18px, 5vw, 22px);
    letter-spacing: .08em;
  }

  /* 3) Noms des parents : sur la MÊME LIGNE (hatan à gauche, kala à droite) */
  /* 📝 Mets class="parents" autour des deux colonnes, et class="hatan"/"kala" sur chaque bloc */
  .parents,
  .parents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  .parents .hatan,
  .parents-grid .hatan {
    text-align: left;
  }

  .parents .kala,
  .parents-grid .kala {
    text-align: right;
  }

  /* 4) Texte de la carte : un peu PLUS D’ESPACE (moins condensé) */
  .invitation,
  .invitation-card,
  .card-text,
  .carte {
    max-width: 98vw;
    padding-inline: clamp(12px, 4vw, 20px);
  }

  .invitation p,
  .carte p {
    line-height: 1.55;
  }

  /* 5) Nom "Natanel & Ora" (au centre de la carte) LÉGÈREMENT PLUS GRAND */
  .names-center,
  .names-large,
  .noms-centre,
  .couple-name-center {
    font-size: clamp(26px, 9vw, 36px);
    line-height: 1.1;
    text-align: center;
  }
}

/* ============================================================
   OVERRIDES FINALES POUR L'HÉBREU (haute priorité)
   ============================================================ */

/* Ampersand "&" plus grand en mode hébreu */
html[data-lang="he"] .names-calligraphy .amp,
html[data-lang="he"] #namesInlineAnd,
body.he-mode .names-calligraphy .amp,
body.he-mode #namesInlineAnd {
  font-family: "Playfair Display", serif !important;
  font-weight: 700 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  color: #7d5d3a !important;
  margin: 0 .4em !important;
  line-height: 1 !important;
}

/* Noms hébreux avec même taille que français */
html[data-lang="he"] .names-calligraphy .script,
body.he-mode .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", serif !important;
  font-weight: 700 !important;
  font-size: clamp(46px, 8vw, 110px) !important;
  line-height: .9 !important;
  color: var(--primary-color) !important;
}

/* ============================================================
   CORRECTIFS FINAUX
   ============================================================ */

/* 1) Le "&" dans le Hero doit avoir le même effet de contour que les noms */
#accueil .names .et {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0 10px 25px rgba(0, 0, 0, .25);
  color: var(--primary-color);
}

/* 2) Noms hébreux dans la CARTE : plus légers et élégants */
html[data-lang="he"] #houppa-soiree .names-calligraphy .script,
body.he-mode #houppa-soiree .names-calligraphy .script {
  font-family: "Noto Serif Hebrew", serif !important;
  font-weight: 400 !important;
  font-size: clamp(42px, 7vw, 90px) !important;
  line-height: .9 !important;
  color: var(--primary-color) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 4px 12px rgba(0, 0, 0, .12) !important;
}

/* 3) Le "&" dans la carte hébreu : même couleur que les noms */
html[data-lang="he"] #houppa-soiree .names-calligraphy .amp,
html[data-lang="he"] #houppa-soiree #namesInlineAnd,
body.he-mode #houppa-soiree .names-calligraphy .amp,
body.he-mode #houppa-soiree #namesInlineAnd {
  font-family: "Playfair Display", serif !important;
  font-weight: 600 !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  color: var(--primary-color) !important;
  margin: 0 .4em !important;
  text-shadow: none !important;
}

/* 4) Titre "Houppa" plus opaque en HE et FR */
#houppa_title.script-title,
#houppa_title_he.script-title {
  opacity: 1 !important;
  color: var(--primary-color) !important;
}

/* 5) Texte mémoriel (dédicace) plus petit en mode hébreu */
html[data-lang="he"] .hp.dedic,
body.he-mode .hp.dedic {
  font-size: clamp(12px, 2vw, 16px) !important;
  line-height: 1.4 !important;
}

/* 6) Titre "חופה" doré et visible au-dessus du voile */
#houppa_title_he {
  color: var(--primary-color) !important;
  opacity: 1 !important;
  position: relative;
  z-index: 10;
}