{"id":415,"date":"2026-05-17T14:12:27","date_gmt":"2026-05-17T14:12:27","guid":{"rendered":"https:\/\/www.mireilleetbenoit.life\/?page_id=415"},"modified":"2026-06-01T09:37:03","modified_gmt":"2026-06-01T09:37:03","slug":"accueil","status":"publish","type":"page","link":"https:\/\/www.mireilleetbenoit.life\/","title":{"rendered":"Accueil"},"content":{"rendered":"<!-- HOME v3 \u2014 \u00ab \u00c9ditorial Riviera \u00bb avec countdown FUN\n     Palette  : ivoire #FBFAF3 + encre #111 + ocre chaud #B08D57\n     Display  : Cormorant Garamond italique (Google Fonts)\n     Body     : Manrope (d\u00e9j\u00e0 charg\u00e9 par le th\u00e8me)\n\n     v3 \u2014 Countdown refondu (full-width, J\/H\/M\/S, secondes qui pulsent,\n          eyebrow qui change selon le nombre de jours restants).\n          M\u00e9t\u00e9o en ligne discr\u00e8te sous le compteur.\n     v2.1 \u2014 Fix : utiliser URLSearchParams + ifs imbriqu\u00e9s pour \u00e9viter\n            l'\u00e9chappement '&' \u2192 '&#038;' par WordPress dans les <script>.\n-->\n\n\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,300;1,400;1,500');\n\n  .meb-home {\n    --ivoire: #FBFAF3;\n    --encre: #111111;\n    --ocre: #B08D57;\n    --ocre-clair: #D9C39A;\n    --mer: #1E3A5F;\n    --grain: rgba(176, 141, 87, 0.06);\n\n    background: var(--ivoire);\n    color: var(--encre);\n    font-family: 'Manrope', system-ui, sans-serif;\n    padding: clamp(48px, 8vw, 120px) clamp(20px, 5vw, 80px);\n    margin: calc(-1 * var(--wp--style--root--padding-top, 0px)) calc(-1 * var(--wp--style--root--padding-right, 0px));\n    position: relative;\n    overflow: hidden;\n  }\n  .meb-home::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-image: radial-gradient(var(--grain) 1px, transparent 1px);\n    background-size: 4px 4px;\n    pointer-events: none;\n    opacity: 0.6;\n  }\n  .meb-home__inner {\n    position: relative;\n    max-width: 880px;\n    margin: 0 auto;\n  }\n\n  .meb-eyebrow {\n    font-family: 'Manrope', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.32em;\n    text-transform: uppercase;\n    color: var(--ocre);\n    margin: 0 0 28px;\n    display: inline-flex;\n    align-items: center;\n    gap: 14px;\n  }\n  .meb-eyebrow::before, .meb-eyebrow::after {\n    content: '';\n    width: 28px;\n    height: 1px;\n    background: var(--ocre);\n  }\n  .meb-hero { text-align: center; }\n\n  \/* Hero avec vid\u00e9o : grille 2 colonnes (video gauche, texte droite) *\/\n  .meb-hero--with-video {\n    display: grid;\n    grid-template-columns: minmax(220px, 300px) 1fr;\n    gap: clamp(28px, 5vw, 64px);\n    align-items: center;\n    margin: 0 auto;\n  }\n  .meb-hero--with-video .meb-hero__text { text-align: center; }\n  .meb-hero__video-wrap {\n    position: relative;\n    border-radius: 18px;\n    overflow: hidden;\n    background: var(--encre);\n    aspect-ratio: 784 \/ 1176;\n    box-shadow: 0 28px 60px -32px rgba(17,17,17,0.45),\n                0 2px 0 rgba(255,255,255,0.6),\n                inset 0 0 0 1px rgba(255,255,255,0.08);\n  }\n  .meb-hero__video {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n  \/* Cadre ocre subtil autour de la vid\u00e9o *\/\n  .meb-hero__video-wrap::after {\n    content: '';\n    position: absolute;\n    inset: -6px;\n    border: 1px solid rgba(176, 141, 87, 0.28);\n    border-radius: 22px;\n    pointer-events: none;\n    z-index: -1;\n  }\n  @media (max-width: 720px) {\n    .meb-hero--with-video {\n      grid-template-columns: 1fr;\n      gap: 36px;\n    }\n    .meb-hero__video-wrap {\n      margin: 0 auto;\n      max-width: 260px;\n      width: 100%;\n    }\n  }\n  .meb-names {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-style: italic;\n    font-weight: 400;\n    font-size: clamp(56px, 11vw, 132px);\n    line-height: 0.92;\n    margin: 0;\n    color: var(--encre);\n    letter-spacing: -0.01em;\n  }\n  .meb-names .amp {\n    display: block;\n    font-size: clamp(36px, 7vw, 84px);\n    color: var(--ocre);\n    margin: -0.05em 0;\n  }\n  .meb-divider {\n    width: 1px;\n    height: 56px;\n    background: var(--ocre);\n    margin: 36px auto 28px;\n    position: relative;\n  }\n  .meb-divider::after {\n    content: '';\n    position: absolute;\n    top: 50%; left: 50%;\n    width: 7px; height: 7px;\n    border-radius: 50%;\n    background: var(--ocre);\n    transform: translate(-50%, -50%);\n  }\n  .meb-date {\n    font-family: 'Manrope', sans-serif;\n    font-size: 16px;\n    font-weight: 500;\n    letter-spacing: 0.3em;\n    text-transform: uppercase;\n    color: var(--encre);\n    margin: 0;\n  }\n  .meb-place {\n    font-family: 'Cormorant Garamond', serif;\n    font-style: italic;\n    font-weight: 300;\n    font-size: 22px;\n    color: var(--ocre);\n    margin: 16px 0 0;\n    letter-spacing: 0.02em;\n  }\n\n  \/* === COUNTDOWN refondu \u2014 pleine largeur, J\/H\/M\/S === *\/\n  .meb-counter {\n    margin: 64px auto 24px;\n    padding: 36px clamp(20px, 5vw, 48px) 32px;\n    background: #ffffff;\n    border: 1px solid rgba(17,17,17,0.08);\n    border-radius: 18px;\n    box-shadow: 0 1px 0 rgba(17,17,17,0.02), 0 16px 40px -28px rgba(17,17,17,0.18);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  \/* D\u00e9cor : petites \u00e9toiles ocres en fond *\/\n  .meb-counter::before, .meb-counter::after {\n    content: '\u2726';\n    position: absolute;\n    font-size: 16px;\n    color: var(--ocre-clair);\n    opacity: 0.5;\n  }\n  .meb-counter::before { top: 16px; left: 20px; }\n  .meb-counter::after { bottom: 16px; right: 20px; }\n\n  .meb-counter__eyebrow {\n    font-family: 'Manrope', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.3em;\n    text-transform: uppercase;\n    color: var(--ocre);\n    margin: 0 0 22px;\n    transition: opacity 0.4s ease;\n  }\n  .meb-counter__grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    align-items: end;\n    gap: 8px;\n    max-width: 580px;\n    margin: 0 auto;\n  }\n  .meb-counter__unit {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    position: relative;\n  }\n  .meb-counter__unit + .meb-counter__unit::before {\n    content: '\u00b7';\n    position: absolute;\n    left: -8px;\n    top: 30%;\n    color: var(--ocre-clair);\n    font-size: 22px;\n  }\n  .meb-counter__num {\n    font-family: 'Cormorant Garamond', Georgia, serif;\n    font-style: italic;\n    font-weight: 500;\n    font-size: clamp(40px, 7vw, 64px);\n    line-height: 1;\n    color: var(--encre);\n    display: inline-block;\n    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n    will-change: transform;\n  }\n  .meb-counter__num.meb-pop {\n    transform: scale(1.18);\n  }\n  .meb-counter__lbl {\n    font-family: 'Manrope', sans-serif;\n    font-size: 12px;\n    font-weight: 600;\n    letter-spacing: 0.22em;\n    text-transform: uppercase;\n    color: #777;\n  }\n  .meb-counter__msg {\n    font-family: 'Cormorant Garamond', serif;\n    font-style: italic;\n    font-weight: 400;\n    font-size: 18px;\n    color: var(--ocre);\n    margin: 26px 0 0;\n    letter-spacing: 0.02em;\n  }\n\n  \/* M\u00e9t\u00e9o en ligne discr\u00e8te sous le compteur *\/\n  .meb-weather {\n    text-align: center;\n    margin: 0 auto 56px;\n    font-family: 'Manrope', sans-serif;\n    font-size: 15px;\n    color: #666;\n    letter-spacing: 0.05em;\n  }\n  .meb-weather strong {\n    color: var(--encre);\n    font-weight: 600;\n  }\n\n  .meb-welcome {\n    text-align: center;\n    max-width: 540px;\n    margin: 0 auto 40px;\n    font-size: 16px;\n    line-height: 1.7;\n    color: #333;\n  }\n  .meb-links {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 14px;\n    margin: 40px 0 28px;\n  }\n  .meb-link {\n    display: inline-block;\n    padding: 14px 26px;\n    background: transparent;\n    color: var(--encre);\n    text-decoration: none;\n    font-size: 15px;\n    letter-spacing: 0.16em;\n    text-transform: uppercase;\n    font-weight: 600;\n    border: 1px solid var(--encre);\n    border-radius: 999px;\n    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;\n  }\n  .meb-link:hover {\n    background: var(--encre);\n    color: var(--ivoire);\n    transform: translateY(-1px);\n  }\n  .meb-private {\n    text-align: center;\n    font-size: 14px;\n    font-style: italic;\n    color: #888;\n    margin: 0;\n    letter-spacing: 0.04em;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .meb-counter__num { transition: none; }\n    .meb-counter__num.meb-pop { transform: none; }\n  }\n  @media (max-width: 540px) {\n    .meb-counter__grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }\n    .meb-counter__unit + .meb-counter__unit::before { display: none; }\n    .meb-counter__lbl { font-size: 10px; letter-spacing: 0.16em; }\n  }\n<\/style>\n\n<div class=\"meb-home\">\n  <div class=\"meb-home__inner\">\n\n    <div class=\"meb-hero meb-hero--with-video\">\n      <div class=\"meb-hero__video-wrap\">\n        <video class=\"meb-hero__video\"\n               autoplay loop muted playsinline preload=\"metadata\"\n               src=\"https:\/\/www.mireilleetbenoit.life\/wp-content\/uploads\/2025\/11\/test1.mp4\"\n               aria-label=\"Vid\u00e9o de Mireille et Beno\u00eet\">\n        <\/video>\n      <\/div>\n      <div class=\"meb-hero__text\">\n        <p class=\"meb-eyebrow\">Save the date<\/p>\n\n        <h1 class=\"meb-names\">\n          Mireille\n          <span class=\"amp\">&amp;<\/span>\n          Beno\u00eet\n        <\/h1>\n\n        <div class=\"meb-divider\"><\/div>\n\n        <p class=\"meb-date\">Samedi \u00b7 6 juin 2026<\/p>\n        <p class=\"meb-place\">Roquebrune-sur-Argens \u2014 Sainte-Maxime<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"meb-counter\">\n      <p class=\"meb-counter__eyebrow\" id=\"meb-cd-eyebrow\">\u2726 Plus que quelques jours \u2726<\/p>\n      <div class=\"meb-counter__grid\">\n        <div class=\"meb-counter__unit\">\n          <span class=\"meb-counter__num\" id=\"meb-cd-d\">\u2013<\/span>\n          <span class=\"meb-counter__lbl\">Jours<\/span>\n        <\/div>\n        <div class=\"meb-counter__unit\">\n          <span class=\"meb-counter__num\" id=\"meb-cd-h\">\u2013<\/span>\n          <span class=\"meb-counter__lbl\">Heures<\/span>\n        <\/div>\n        <div class=\"meb-counter__unit\">\n          <span class=\"meb-counter__num\" id=\"meb-cd-m\">\u2013<\/span>\n          <span class=\"meb-counter__lbl\">Minutes<\/span>\n        <\/div>\n        <div class=\"meb-counter__unit\">\n          <span class=\"meb-counter__num\" id=\"meb-cd-s\">\u2013<\/span>\n          <span class=\"meb-counter__lbl\">Secondes<\/span>\n        <\/div>\n      <\/div>\n      <p class=\"meb-counter__msg\" id=\"meb-cd-msg\">avant de dire \u00ab oui \u00bb<\/p>\n    <\/div>\n\n    <p class=\"meb-weather\">\n      <span id=\"meb-wx-icon\">\ud83c\udf24\ufe0f<\/span>\n      M\u00e9t\u00e9o \u00e0 Sainte-Maxime le 6 juin \u00b7 <strong id=\"meb-wx-text\">en cours\u2026<\/strong>\n    <\/p>\n\n    <p class=\"meb-welcome\">Nous sommes ravis de vous compter parmi nous pour ce grand jour entre mer et collines. Toutes les informations utiles pour pr\u00e9parer votre venue se trouvent dans les pages ci-dessous.<\/p>\n\n    <div class=\"meb-links\">\n      <a class=\"meb-link\" href=\"\/index.php\/informations-pratiques\/\">Informations pratiques<\/a>\n      <a class=\"meb-link\" href=\"\/index.php\/voyage-hebergement\/\">Voyage &amp; h\u00e9bergement<\/a>\n      <a class=\"meb-link\" href=\"\/index.php\/notre-liste\/\">Notre liste<\/a>\n    <\/div>\n\n    <p class=\"meb-private\">Site priv\u00e9 \u2014 acc\u00e8s aux pages d\u00e9taill\u00e9es avec votre mot de passe.<\/p>\n\n  <\/div>\n<\/div>\n\n<script>\n\/\/ IIFE \u2014 toute la logique JS de la home.\n\/\/ IMPORTANT : ne JAMAIS ecrire le caractere ampersand litteral dans ce script\n\/\/ car WordPress le remplace par son entite HTML (&#038;) a l'interieur des\n\/\/ balises script, ce qui casse les operateurs logiques et les URLs.\n\/\/ Astuce : utiliser URLSearchParams pour les URLs et des ifs imbriques au\n\/\/ lieu de l operateur 'et' logique.\n(function(){\n\n  \/\/ ====== COUNTDOWN ======\n  var target = new Date('2026-06-06T14:30:00+02:00');\n  var elD = document.getElementById('meb-cd-d');\n  var elH = document.getElementById('meb-cd-h');\n  var elM = document.getElementById('meb-cd-m');\n  var elS = document.getElementById('meb-cd-s');\n  var elMsg = document.getElementById('meb-cd-msg');\n  var elEy = document.getElementById('meb-cd-eyebrow');\n  var prev = {d:null, h:null, m:null, s:null};\n\n  function pop(el){\n    if (!el) return;\n    el.classList.add('meb-pop');\n    setTimeout(function(){ el.classList.remove('meb-pop'); }, 280);\n  }\n\n  function pick(arr, n){ return arr[n % arr.length]; }\n\n  \/\/ Message d'eyebrow qui evolue selon le nombre de jours restants\n  function eyebrowFor(days){\n    if (days <= 0) return '\u2726 Le grand jour est arriv\u00e9 \u2726';\n    if (days === 1) return '\u2726 Demain, le grand jour ! \u2726';\n    if (days <= 7) return '\u2726 Plus que quelques jours \u2726';\n    if (days <= 30) return '\u2726 On y est presque \u2726';\n    if (days <= 90) return '\u2726 La date approche \u2726';\n    return '\u2726 Save the date \u2726';\n  }\n  function msgFor(days){\n    if (days <= 0) return 'C est aujourd hui !';\n    if (days === 1) return 'avant de dire \u00ab oui \u00bb';\n    var msgs = [\n      'avant de dire \u00ab oui \u00bb',\n      'avant de lever nos verres',\n      'avant la f\u00eate entre mer et collines',\n      'avant de danser pieds nus dans le sable'\n    ];\n    \/\/ change le message en fonction de la dizaine de jours\n    return pick(msgs, Math.floor(days \/ 10));\n  }\n\n  function tick(){\n    if (!elD) return;\n    var diff = target - new Date();\n    if (diff <= 0) {\n      elD.textContent = elH.textContent = elM.textContent = elS.textContent = '0';\n      elEy.textContent = eyebrowFor(0);\n      elMsg.textContent = msgFor(0);\n      return;\n    }\n    var d = Math.floor(diff \/ 86400000);\n    var h = Math.floor((diff % 86400000) \/ 3600000);\n    var m = Math.floor((diff % 3600000) \/ 60000);\n    var s = Math.floor((diff % 60000) \/ 1000);\n\n    if (d !== prev.d) { elD.textContent = d; pop(elD); elEy.textContent = eyebrowFor(d); elMsg.textContent = msgFor(d); prev.d = d; }\n    if (h !== prev.h) { elH.textContent = String(h).padStart(2,'0'); pop(elH); prev.h = h; }\n    if (m !== prev.m) { elM.textContent = String(m).padStart(2,'0'); pop(elM); prev.m = m; }\n    if (s !== prev.s) { elS.textContent = String(s).padStart(2,'0'); pop(elS); prev.s = s; }\n  }\n  tick();\n  setInterval(tick, 1000);\n\n  \/\/ ====== METEO Open-Meteo (sans cle) ======\n  var wxIcon = document.getElementById('meb-wx-icon');\n  var wxText = document.getElementById('meb-wx-text');\n  if (!wxText) return;\n\n  var ICONS = {0:'\u2600\ufe0f',1:'\ud83c\udf24\ufe0f',2:'\u26c5',3:'\u2601\ufe0f',45:'\ud83c\udf2b\ufe0f',48:'\ud83c\udf2b\ufe0f',51:'\ud83c\udf26\ufe0f',53:'\ud83c\udf26\ufe0f',55:'\ud83c\udf27\ufe0f',\n               61:'\ud83c\udf27\ufe0f',63:'\ud83c\udf27\ufe0f',65:'\ud83c\udf27\ufe0f',71:'\ud83c\udf28\ufe0f',73:'\ud83c\udf28\ufe0f',75:'\ud83c\udf28\ufe0f',77:'\u2744\ufe0f',\n               80:'\ud83c\udf26\ufe0f',81:'\ud83c\udf27\ufe0f',82:'\ud83c\udf27\ufe0f',95:'\u26c8\ufe0f',96:'\u26c8\ufe0f',99:'\u26c8\ufe0f'};\n  var LABELS = {0:'Grand soleil',1:'Plut\u00f4t ensoleill\u00e9',2:'Partiellement nuageux',3:'Nuageux',\n                45:'Brumeux',48:'Brumeux',51:'Bruine',53:'Bruine',55:'Bruine soutenue',\n                61:'Pluie faible',63:'Pluie',65:'Pluie forte',71:'Neige',73:'Neige',75:'Neige',77:'Gr\u00e9sil',\n                80:'Averses',81:'Averses',82:'Fortes averses',95:'Orage',96:'Orage de gr\u00eale',99:'Orage de gr\u00eale'};\n\n  var url = new URL('https:\/\/api.open-meteo.com\/v1\/forecast');\n  url.searchParams.set('latitude', '43.31');\n  url.searchParams.set('longitude', '6.64');\n  url.searchParams.set('daily', 'temperature_2m_max,temperature_2m_min,weathercode');\n  url.searchParams.set('start_date', '2026-06-06');\n  url.searchParams.set('end_date', '2026-06-06');\n  url.searchParams.set('timezone', 'Europe\/Paris');\n\n  fetch(url.toString())\n    .then(function(r){ return r.json(); })\n    .then(function(d){\n      if (!d) { fallback(); return; }\n      if (!d.daily) { fallback(); return; }\n      var wc = d.daily.weathercode;\n      if (!wc) { fallback(); return; }\n      var c = wc[0];\n      if (c === null || c === undefined) { fallback(); return; }\n      var tmax = Math.round(d.daily.temperature_2m_max[0]);\n      var tmin = Math.round(d.daily.temperature_2m_min[0]);\n      wxIcon.textContent = ICONS[c] || '\ud83c\udf24\ufe0f';\n      wxText.textContent = (LABELS[c] || 'Pr\u00e9vision') + ' \u00b7 ' + tmax + '\u00b0 \/ ' + tmin + '\u00b0';\n    })\n    .catch(fallback);\n\n  function fallback(){\n    var today = new Date();\n    var firstAvail = new Date('2026-05-22');\n    var rem = Math.max(0, Math.ceil((firstAvail - today) \/ 86400000));\n    wxIcon.textContent = '\ud83c\udf24\ufe0f';\n    wxText.textContent = rem > 0 ? 'pr\u00e9vision disponible dans ' + rem + ' jours' : 'soleil quasi assur\u00e9 en juin';\n  }\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-415","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/pages\/415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/comments?post=415"}],"version-history":[{"count":6,"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions"}],"predecessor-version":[{"id":469,"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/pages\/415\/revisions\/469"}],"wp:attachment":[{"href":"https:\/\/www.mireilleetbenoit.life\/index.php\/wp-json\/wp\/v2\/media?parent=415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}