?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Bat Mitsva de Romy Rachel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Frank+Ruhl+Libre:wght@400;500;700&family=Allura&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0;}
html,body{
width:100%;
min-height:100%;
background:#f4d6d2;
font-family:'Cinzel', serif;
color:#5a463f;
}
body{
display:flex;
flex-direction:column; /* invitation EN-DESSUS, formulaire EN-DESSOUS */
align-items:center;
padding:0 14px 40px;
}
/* L'image (sans les éléments centraux) reste le fond.
Tout le contenu manquant est ajouté en HTML par-dessus. */
.invitation{
position:relative;
width:100%;
max-width:760px;
aspect-ratio: 728 / 1080; /* ratio de l'image fournie */
background:url('invitation.jpg') center/contain no-repeat;
margin:0 auto;
/* Container query : tout l'intérieur se redimensionne par rapport
à la largeur de la carte (cqw), pas du viewport. Ça rend tout
proprement responsive sans se baser sur le viewport. */
container-type: inline-size;
}
/* ============== PANNEAU GÉNÉRIQUE ============== */
.overlay{
position:absolute;
text-align:center;
}
/* ===== DATE / HEURE / LIEU (3 colonnes flottant sur le sable) ===== */
.bloc-info{
left:0.63%;
top:35.32%;
width:95.31%;
height:17.28%;
}
.grille-info{
display:grid;
grid-template-columns:repeat(3, 1fr);
height:100%;
gap:6px;
}
.info-col{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1px;
}
.info-col .icone{
color:#d36a85;
margin-bottom:2px;
}
.info-col .icone svg{ width: clamp(20px, 5.5cqw, 42px); height: auto; }
.info-col .titre-fr{
font-family:'Cinzel', serif;
font-weight:600;
letter-spacing:1.2px;
color:#5a463f;
font-size: clamp(9px, 2.2cqw, 17px);
}
.info-col .titre-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#5a463f;
font-size: clamp(10px, 2.2cqw, 17px);
}
.info-col .val-fr{
font-family:'Cinzel', serif;
font-weight:600;
color:#2f5b6e;
font-size: clamp(12px, 3cqw, 24px);
letter-spacing:.8px;
margin-top:.25em;
}
.info-col .val-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#2f5b6e;
font-size: clamp(11px, 2.5cqw, 19px);
}
.info-col .ligne{
color:#5a463f;
font-size: clamp(9px, 2cqw, 16px);
line-height:1.3;
}
/* ===== POUR S'Y RENDRE (carte translucide avec QR) ===== */
.bloc-rendre{
left:14.71%; /* centré horizontalement : (100-70.58)/2 */
top:52.83%;
width:70.58%;
height:24.77%;
background:linear-gradient(180deg,
rgba(255,247,238,.55) 0%,
rgba(253,232,220,.55) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border:1px solid rgba(201,161,74,.55);
border-radius:14px;
padding:1.6% 2.2%;
box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);
}
.bloc-rendre::before{
content:"";
position:absolute;inset:5px;
border:1px solid rgba(201,161,74,.3);
border-radius:10px;
pointer-events:none;
}
.bloc-titre{
color:#d36a85;
font-family:'Cinzel', serif;
letter-spacing:1.5px;
font-weight:600;
font-size: clamp(8px, 2cqw, 15px);
}
.bloc-titre-he{
direction:rtl;
color:#d36a85;
font-family:'Frank Ruhl Libre', serif;
font-size: clamp(9px, 2cqw, 15px);
margin-bottom:.3em;
}
.grille-rendre{
display:grid;
grid-template-columns:1fr auto 1fr;
gap:2%;
align-items:start;
height:calc(100% - 3em);
}
.col-rendre{
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
align-items:center;
gap:.2em;
}
.col-rendre .marque{
font-family:'Cinzel', serif;
font-weight:600;
letter-spacing:1.4px;
color:#5a463f;
font-size: clamp(8px, 1.7cqw, 13px);
}
.col-rendre .marque-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#5a463f;
font-size: clamp(8px, 1.7cqw, 13px);
}
.row-qr{
display:flex;
align-items:center;
justify-content:center;
gap:.5em;
margin:.3em 0;
}
.col-rendre .qr{
width: clamp(50px, 13cqw, 100px);
height: clamp(50px, 13cqw, 100px);
background:#fff;
padding:3px;
border-radius:6px;
box-shadow:0 2px 5px rgba(0,0,0,.12);
}
.col-rendre .logo{
width: clamp(20px, 5cqw, 38px);
height: clamp(20px, 5cqw, 38px);
object-fit: contain;
}
.col-rendre .scan{
font-family:'Cormorant Garamond', serif;
font-style:italic;
color:#8a7a72;
font-size: clamp(8px, 1.6cqw, 12px);
}
.col-rendre .scan-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#8a7a72;
font-size: clamp(8px, 1.6cqw, 12px);
}
.col-rendre .lien{
color:#c97a8a;
font-size: clamp(6px, 1.3cqw, 10px);
text-decoration:underline;
word-break:break-all;
margin-top:.15em;
}
.sep-vert{
width:1px;
align-self:stretch;
background:linear-gradient(180deg,
transparent, rgba(201,161,74,.6), transparent);
position:relative;
}
.sep-vert::before, .sep-vert::after{
content:"♥";
position:absolute;
left:50%; transform:translateX(-50%);
color:#d36a85;
background:rgba(255,247,238,.7);
padding:0 3px;
font-size:11px;
}
.sep-vert::before{ top:25%; }
.sep-vert::after{ bottom:25%; }
/* ===== COMPTE À REBOURS ===== */
.bloc-cd{
left:18.53%; /* centré horizontalement : (100-62.95)/2 */
top:78.45%;
width:62.95%;
height:13.26%;
background:linear-gradient(180deg,
rgba(255,247,238,.55) 0%,
rgba(253,232,220,.55) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border:1px solid rgba(201,161,74,.55);
border-radius:14px;
padding:1.6% 2.2%;
box-shadow:inset 0 0 0 3px rgba(255,255,255,.25);
}
.bloc-cd::before{
content:"";
position:absolute;inset:5px;
border:1px solid rgba(201,161,74,.3);
border-radius:10px;
pointer-events:none;
}
.grille-cd{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:2%;
height:calc(100% - 2.6em);
}
.case-cd{
display:flex;
flex-direction:column;
align-items:center;
gap:.15em;
}
.case-cd .nb-wrap{
width:100%;
background:linear-gradient(180deg,
rgba(255,255,255,.65) 0%,
rgba(253,230,220,.65) 100%);
border:1.4px solid rgba(201,161,74,.55);
border-radius:9px;
padding:.3em 0;
box-shadow:inset 0 0 6px rgba(255,255,255,.4);
}
.case-cd .nb{
font-family:'Cinzel', serif;
font-weight:600;
color:#2f5b6e;
line-height:1;
font-size: clamp(14px, 4.5cqw, 32px);
}
.case-cd .lbl-fr{
font-family:'Cinzel', serif;
letter-spacing:1px;
color:#5a463f;
font-size: clamp(7px, 1.4cqw, 11px);
margin-top:.3em;
}
.case-cd .lbl-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#5a463f;
font-size: clamp(8px, 1.5cqw, 12px);
}
/* ===== RSVP ===== */
.bloc-rsvp{
left:20.00%; /* centré horizontalement : (100-60)/2 */
top:92.96%;
width:60.00%;
height:10.00%;
}
.rsvp-fr{
font-family:'Cormorant Garamond', serif;
font-style:italic;
color:#5a463f;
font-size: clamp(10px, 2.1cqw, 16px);
line-height:1.2;
}
.rsvp-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#5a463f;
font-size: clamp(9px, 1.9cqw, 14px);
margin-bottom:.3em;
line-height:1.2;
}
.rsvp-l2{
font-family:'Allura', cursive;
color:#c97a8a;
font-size: clamp(12px, 2.5cqw, 19px);
margin-top:.3em;
line-height:1.2;
}
/* =========================================================================
CONTAINER QUERY MOBILE
Quand la carte fait moins de 500px de large, on resserre tout pour
que le contenu reste DANS les blocs (pas de débordement vertical).
========================================================================= */
@container (max-width: 500px){
/* Bloc "Pour s'y rendre" : on tasse */
.bloc-rendre{ padding:1% 1.5%; }
.bloc-titre{ letter-spacing:.6px; }
.bloc-titre-he{ margin-bottom:.1em; line-height:1.1; }
.col-rendre{ gap:0; }
.col-rendre .marque-he{ line-height:1.05; }
.col-rendre .row-qr{ margin:.15em 0; gap:.3em; }
.col-rendre .qr{ padding:2px; }
/* l'URL longue est cachée sur petite carte (le QR suffit) */
.col-rendre .lien{ display:none; }
.col-rendre .scan{ line-height:1; margin-top:.1em; }
.col-rendre .scan-he{ line-height:1; }
/* Bloc compte à rebours : on tasse aussi */
.bloc-cd{ padding:1% 1.5%; }
.case-cd{ gap:1px; }
.case-cd .nb-wrap{ padding:.18em 0; }
.case-cd .lbl-fr{ margin-top:.15em; line-height:1; }
.case-cd .lbl-he{ line-height:1; }
/* RSVP : on resserre les lignes */
.rsvp-fr, .rsvp-he, .rsvp-l2{ line-height:1.1; }
.rsvp-he{ margin-bottom:.1em; }
.rsvp-l2{ margin-top:.15em; }
}
/* Très petit écran : on cache aussi les libellés hébreux du compte
à rebours pour gagner encore en place. */
@container (max-width: 380px){
.case-cd .lbl-he{ display:none; }
.col-rendre .scan-he{ display:none; }
}
/* ============== Mode CALIBRATION (?cal=1) ============== */
body.cal .overlay{
outline:2px dashed #e91e63;
cursor:move;
user-select:none;
}
#cal-panel{
position:fixed;
bottom:10px; left:10px;
background:rgba(0,0,0,.85);
color:#fff;
font-family:monospace;
font-size:12px;
padding:10px 12px;
border-radius:8px;
z-index:9999;
max-width:90vw;
line-height:1.5;
}
#cal-panel b{color:#ffd54f;}
#cal-panel button{
margin-top:6px;
background:#e91e63;color:#fff;
border:0;border-radius:4px;
padding:4px 10px;cursor:pointer;
font-family:monospace;font-size:12px;
}
#cal-panel pre{
background:#111;
padding:6px;border-radius:4px;
margin-top:6px;
white-space:pre-wrap;word-break:break-all;
}
/* ===================================================================
Formulaire RSVP (placé sous la carte d'invitation)
================================================================= */
.rsvp-form{
width:100%;
max-width:760px;
margin: 22px auto 40px;
padding: 26px 24px 22px;
background:
linear-gradient(180deg,
rgba(255,247,238,.92) 0%,
rgba(253,232,220,.92) 100%);
border:1px solid rgba(201,161,74,.6);
border-radius:18px;
box-shadow:
0 20px 50px rgba(120,60,60,.25),
inset 0 0 0 3px rgba(255,255,255,.35);
position:relative;
font-family:'Cormorant Garamond', serif;
color:#5a463f;
}
.rsvp-form::before{
content:"";
position:absolute;inset:8px;
border:1px solid rgba(201,161,74,.35);
border-radius:13px;
pointer-events:none;
}
.rsvp-form > *{ position:relative; }
.rsvp-form h2{
text-align:center;
color:#d36a85;
font-family:'Cinzel', serif;
font-weight:600;
letter-spacing:2px;
font-size: clamp(15px, 2.4vw, 19px);
margin-bottom:2px;
}
.rsvp-form .sous-titre-he{
text-align:center;
direction:rtl;
color:#d36a85;
font-family:'Frank Ruhl Libre', serif;
font-size: clamp(14px, 2.1vw, 17px);
margin-bottom:4px;
}
.rsvp-form .sous-titre{
text-align:center;
font-family:'Cormorant Garamond', serif;
font-style:italic;
color:#7a6a62;
font-size: clamp(13px, 1.9vw, 15px);
margin-top:6px;
}
.rsvp-form .sous-titre + .sous-titre-he{
margin-bottom:18px;
color:#7a6a62;
font-style:italic;
font-family:'Frank Ruhl Libre', serif;
font-size: clamp(13px, 1.9vw, 15px);
}
.rsvp-form .ligne{
display:grid;
grid-template-columns: 1fr 1fr;
gap:14px;
margin-bottom:14px;
}
.rsvp-form .champ{ display:flex; flex-direction:column; }
.rsvp-form label{
font-family:'Cinzel', serif;
font-size:12px;
letter-spacing:1.4px;
color:#5a463f;
margin-bottom:5px;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:baseline;
gap:8px;
}
.rsvp-form label .lbl-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
font-size:13px;
letter-spacing:0;
color:#5a463f;
font-weight:500;
}
.rsvp-form input,
.rsvp-form select,
.rsvp-form textarea{
width:100%;
background:rgba(255,255,255,.7);
border:1.5px solid rgba(201,161,74,.55);
border-radius:8px;
padding:9px 12px;
font-family:'Cormorant Garamond', serif;
font-size:16px;
color:#3a2a22;
transition:border-color .2s, box-shadow .2s;
}
.rsvp-form input:focus,
.rsvp-form select:focus,
.rsvp-form textarea:focus{
outline:none;
border-color:#d36a85;
box-shadow:0 0 0 3px rgba(211,106,133,.15);
}
.rsvp-form textarea{
min-height:90px;
resize:vertical;
font-style:italic;
}
.rsvp-form .pleine{ grid-column: 1 / -1; }
.rsvp-form .btn{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
width:100%;
margin-top:6px;
padding:13px 20px;
background:linear-gradient(180deg, #e89bb0 0%, #d36a85 100%);
color:#fff;
font-family:'Cinzel', serif;
font-weight:600;
letter-spacing:2px;
font-size:14px;
border:0;
border-radius:10px;
cursor:pointer;
box-shadow:0 4px 12px rgba(211,106,133,.35);
transition:transform .15s, box-shadow .15s;
}
.rsvp-form .btn .btn-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
letter-spacing:0;
font-size:14px;
font-weight:500;
}
.rsvp-form .btn:hover{
transform:translateY(-1px);
box-shadow:0 6px 16px rgba(211,106,133,.45);
}
.rsvp-form .btn:active{ transform:translateY(0); }
.rsvp-form .merci{
display:none;
text-align:center;
padding:24px 12px;
color:#5a463f;
}
.rsvp-form .merci .titre{
font-family:'Allura', cursive;
color:#c97a8a;
font-size: clamp(26px, 3.4vw, 34px);
margin-bottom:2px;
}
.rsvp-form .merci .titre-he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
color:#c97a8a;
font-size: clamp(20px, 2.6vw, 24px);
margin-bottom:14px;
font-weight:500;
}
.rsvp-form .merci p{
font-family:'Cormorant Garamond', serif;
font-size:16px;
line-height:1.45;
margin-top:8px;
}
.rsvp-form .merci p.he{
font-family:'Frank Ruhl Libre', serif;
direction:rtl;
font-size:15px;
}
.rsvp-form.envoye form{ display:none; }
.rsvp-form.envoye .merci{ display:block; }
@media (max-width:520px){
.rsvp-form{ padding:20px 16px; }
.rsvp-form .ligne{ grid-template-columns:1fr; gap:10px; margin-bottom:10px; }
}
</style>
</head>
<body>
<main class="invitation" aria-label="Invitation Bat Mitsva de Romy Rachel">
<!-- ============== DATE / HEURE / LIEU ============== -->
<section class="overlay bloc-info">
<div class="grille-info">
<div class="info-col">
<div class="icone">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="5" width="18" height="16" rx="2"/>
<path d="M3 9h18M8 3v4M16 3v4"/>
<circle cx="12" cy="14" r="1.3" fill="currentColor"/>
</svg>
</div>
<div class="titre-fr">DIMANCHE</div>
<div class="titre-he">×™×•× ×¨×שון</div>
<div class="val-fr">7 JUIN</div>
<div class="val-he">7 ×‘×™×•× ×™</div>
</div>
<div class="info-col">
<div class="icone">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="9"/>
<path d="M12 7v5l3 2"/>
</svg>
</div>
<div class="titre-fr">À PARTIR DE</div>
<div class="titre-he">החל מהשעה</div>
<div class="val-fr">19H45</div>
<div class="val-he">19:45</div>
</div>
<div class="info-col">
<div class="icone">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/>
<circle cx="12" cy="9" r="2.4"/>
</svg>
</div>
<div class="titre-fr">SALLE LOUIE</div>
<div class="titre-he">××•×œ× ×œ×•××™</div>
<div class="ligne">5, HaYetzira, Ra'anana</div>
<div class="val-he">היצירה 5, ×¨×¢× × ×”</div>
</div>
</div>
</section>
<!-- ============== POUR S'Y RENDRE ============== -->
<section class="overlay bloc-rendre">
<div class="bloc-titre">♥ POUR S'Y RENDRE ♥</div>
<div class="bloc-titre-he">כיצד להגיע</div>
<div class="grille-rendre">
<a class="col-rendre"
href="https://maps.app.goo.gl/Y5d1K8Xh1pZ3"
target="_blank" rel="noopener">
<div class="marque">GOOGLE MAPS</div>
<div class="marque-he">גוגל מפות</div>
<div class="row-qr">
<img class="qr" alt="QR Google Maps"
src="https://api.qrserver.com/v1/create-qr-code/?size=600x600&margin=0&ecc=H&qzone=1&format=png&data=https%3A%2F%2Fmaps.app.goo.gl%2FY5d1K8Xh1pZ3">
<img class="logo" src="gmaps.png" alt="Google Maps">
</div>
<div class="scan">Scannez-moi</div>
<div class="scan-he">סרקו ×ותי</div>
<div class="lien">maps.app.goo.gl/Y5d1K8Xh1pZ3</div>
</a>
<div class="sep-vert" aria-hidden="true"></div>
<a class="col-rendre"
href="https://waze.com/ul?q=%D7%94%D7%99%D7%A6%D7%99%D7%A8%D7%94%205%20%D7%A8%D7%A2%D7%A0%D7%A0%D7%94"
target="_blank" rel="noopener">
<div class="marque">WAZE</div>
<div class="marque-he">וייז</div>
<div class="row-qr">
<img class="qr" alt="QR Waze"
src="https://api.qrserver.com/v1/create-qr-code/?size=600x600&margin=0&ecc=H&qzone=1&format=png&data=https%3A%2F%2Fwaze.com%2Ful%3Fq%3D%25D7%2594%25D7%2599%25D7%25A6%25D7%2599%25D7%25A8%25D7%2594%25205%2520%25D7%25A8%25D7%25A2%25D7%25A0%25D7%25A0%25D7%2594">
<img class="logo" src="waze.png" alt="Waze">
</div>
<div class="scan">Scannez-moi</div>
<div class="scan-he">סרקו ×ותי</div>
<div class="lien">waze.com → היצירה 5, ×¨×¢× × ×”</div>
</a>
</div>
</section>
<!-- ============== COMPTE À REBOURS ============== -->
<section class="overlay bloc-cd" aria-live="polite">
<div class="bloc-titre">♥ COMPTE À REBOURS JUSQU'AU JOUR J ♥</div>
<div class="bloc-titre-he">ספירה ל×חור עד ×œ×™×•× ×”×’×“×•×œ</div>
<div class="grille-cd">
<div class="case-cd">
<div class="nb-wrap"><div class="nb" id="cd-j">--</div></div>
<div class="lbl-fr">JOURS</div>
<div class="lbl-he">ימי×</div>
</div>
<div class="case-cd">
<div class="nb-wrap"><div class="nb" id="cd-h">--</div></div>
<div class="lbl-fr">HEURES</div>
<div class="lbl-he">שעות</div>
</div>
<div class="case-cd">
<div class="nb-wrap"><div class="nb" id="cd-m">--</div></div>
<div class="lbl-fr">MINUTES</div>
<div class="lbl-he">דקות</div>
</div>
<div class="case-cd">
<div class="nb-wrap"><div class="nb" id="cd-s">--</div></div>
<div class="lbl-fr">SECONDES</div>
<div class="lbl-he">×©× ×™×•×ª</div>
</div>
</div>
</section>
<!-- ============== RSVP ============== -->
<section class="overlay bloc-rsvp">
<div class="rsvp-fr">Merci de confirmer votre présence ♥</div>
<div class="rsvp-he">× ×•×“×” ל×ישור הגעתכ×</div>
<div class="rsvp-l2">Hâte de partager ce moment magique avec vous !</div>
</section>
</main>
<!-- ============================ FORMULAIRE RSVP ============================ -->
<section class="rsvp-form" id="rsvp-form" aria-labelledby="rsvp-titre">
<form action="https://api.web3forms.com/submit"
method="POST"
id="form-rsvp">
<h2 id="rsvp-titre">♥ CONFIRMEZ VOTRE PRÉSENCE ♥</h2>
<div class="sous-titre-he">♥ ×ישור ×”×’×¢×” ♥</div>
<div class="sous-titre">Et laissez un petit mot drôle pour Romy ✨</div>
<div class="sous-titre-he">הש×ירו מילה ×§×˜× ×” ומצחיקה לרומי ✨</div>
<!-- Configuration Web3Forms (cachée) -->
<input type="hidden" name="access_key" value="9a4ef34d-c4ed-4e80-8350-834f936b4341">
<input type="hidden" name="subject" value="🎉 Nouveau RSVP / ×ישור ×”×’×¢×” חדש — Bat Mitsva Romy">
<input type="hidden" name="from_name" value="Invitation Bat Mitsva Romy">
<!-- Honeypot anti-spam (doit rester vide) -->
<input type="checkbox" name="botcheck" style="display:none;" tabindex="-1" autocomplete="off">
<div class="ligne">
<div class="champ">
<label for="prenom">
<span>PRÉNOM</span>
<span class="lbl-he">×©× ×¤×¨×˜×™</span>
</label>
<input type="text" id="prenom" name="Prenom" required autocomplete="given-name" placeholder="Ex. David / לדוגמה: דוד">
</div>
<div class="champ">
<label for="nom">
<span>NOM</span>
<span class="lbl-he">×©× ×ž×©×¤×—×”</span>
</label>
<input type="text" id="nom" name="Nom" required autocomplete="family-name" placeholder="Ex. Cohen / לדוגמה: כהן">
</div>
</div>
<div class="ligne">
<div class="champ">
<label for="nb">
<span>NOMBRE DE PERSONNES</span>
<span class="lbl-he">מספר ×× ×©×™×</span>
</label>
<select id="nb" name="Nombre_de_personnes" required>
<option value="">— Choisissez / בחרו —</option>
<option value="1">1 personne / ×יש ×חד</option>
<option value="2">2 personnes / 2 ×× ×©×™×</option>
<option value="3">3 personnes / 3 ×× ×©×™×</option>
<option value="4">4 personnes / 4 ×× ×©×™×</option>
<option value="5">5 personnes / 5 ×× ×©×™×</option>
<option value="6">6 personnes / 6 ×× ×©×™×</option>
<option value="7+">7 et plus / 7 ויותר</option>
<option value="0">Désolé, je ne pourrai pas venir / מצטערי×, ×œ× × ×•×›×œ להגיע 😢</option>
</select>
</div>
<div class="champ">
<label for="email">
<span>EMAIL (optionnel)</span>
<span class="lbl-he">×ימייל (××•×¤×¦×™×•× ×œ×™)</span>
</label>
<input type="email" id="email" name="Email" autocomplete="email" placeholder="Pour la réponse / לתגובה">
</div>
</div>
<div class="ligne">
<div class="champ pleine">
<label for="message">
<span>UN MESSAGE DRÔLE POUR ROMY ♥</span>
<span class="lbl-he">מסר מצחיק לרומי ♥</span>
</label>
<textarea id="message" name="Message_pour_Romy"
placeholder="Une blague, un souvenir, une anecdote… faites-la sourire ! / בדיחה, זיכרון, סיפור קצר… גרמו לה לחייך! 😄"
maxlength="800"></textarea>
</div>
</div>
<button type="submit" class="btn">
<span class="btn-fr">ENVOYER MA RÉPONSE ♥</span>
<span class="btn-he">שליחת תשובה ♥</span>
</button>
</form>
<!-- Message affiché après envoi (bilingue) -->
<div class="merci" id="merci">
<div class="titre">Merci infiniment !</div>
<div class="titre-he">תודה רבה!</div>
<p>Votre réponse a bien été envoyée.<br>
Hâte de partager ce moment avec vous le <strong>7 juin 2026</strong> ✨</p>
<p class="he">×ª×©×•×‘×ª×›× × ×©×œ×—×” בהצלחה.<br>
×ž×¦×¤×™× ×œ×—×œ×•×§ ××™×ª×›× ×ת הרגע ×”×–×” ב-<strong>7 ×‘×™×•× ×™ 2026</strong> ✨</p>
</div>
</section>
<script>
</script>
</body>
</html>