Embed

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PDBLTF8C"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mori Ora – Disponibilités</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&family=Poppins:wght@300;400;500;600&display=swap');

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

  :root {
    --deep:     #0d1b2a;
    --ocean:    #1a3a4a;
    --mid:      #2a5568;
    --accent:   #4a9bb5;
    --white:    #ffffff;
    --offwhite: #f8f9fa;
    --border:   #e2e8ed;
    --muted:    #7a9aaa;

    --dispo:      #1a7a4a;
    --dispo-bg:   #eaf7f0;
    --dispo-bd:   #a8dfc0;
    --partiel:    #b06a00;
    --partiel-bg: #fff8ec;
    --partiel-bd: #f0c870;
    --complet:    #a01c1c;
    --complet-bg: #fdf0f0;
    --complet-bd: #e8b0b0;
  }

  body {
    font-family: 'Poppins', sans-serif;
    background: var(--offwhite);
    color: var(--deep);
    min-height: 100vh;
    padding: 2.5rem 1rem 3rem;
  }

  .widget {
    max-width: 900px;
    margin: 0 auto;
  }

  /* ── HEADER ── */
  .header {
    text-align: center;
    margin-bottom: 2.8rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
  }
  .header h1 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.1rem;
    font-weight: 900;
    color: var(--deep);
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
  .header p {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 0.5rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ── NAVIGATION SEMAINE ── */
  .nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
  }
  .nav-btn {
    background: transparent;
    color: var(--ocean);
    border: 1.5px solid var(--ocean);
    width: 36px; height: 36px;
    border-radius: 0;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
    font-weight: 300;
  }
  .nav-btn:hover { background: var(--ocean); color: white; }
  .nav-btn:disabled { border-color: var(--border); color: var(--muted); cursor: default; background: transparent; }
  .nav-label {
    font-family: 'Roboto', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep);
    min-width: 220px;
    text-align: center;
    letter-spacing: 0.01em;
  }
  .today-btn {
    background: transparent;
    border: 1.5px solid var(--ocean);
    color: var(--ocean);
    padding: 0.3rem 1rem;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.2s;
  }
  .today-btn:hover { background: var(--ocean); color: white; }

  /* ── SÉLECTEUR DE DATE ── */
  .date-picker-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 1.8rem;
  }
  .date-picker-label {
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #datePicker {
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: var(--ocean);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 0;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
  }
  #datePicker:focus, #datePicker:hover { border-color: var(--ocean); }

  /* ── LÉGENDE ── */
  .legende {
    display: flex;
    gap: 1.8rem;
    justify-content: center;
    margin-bottom: 1.8rem;
    flex-wrap: wrap;
  }
  .leg-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .leg-dot {
    width: 8px; height: 8px;
    border-radius: 0;
  }
  .leg-dot.dispo   { background: var(--dispo); }
  .leg-dot.partiel { background: var(--partiel); }
  .leg-dot.complet { background: var(--complet); }

  /* ── GRILLE JOURS ── */
  .grille {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border: 1px solid var(--border);
  }

  @media (max-width: 640px) {
    .grille { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── CARTE JOUR ── */
  .jour-carte {
    background: var(--white);
    border-right: 1px solid var(--border);
    overflow: hidden;
    transition: background 0.15s;
  }
  .jour-carte:last-child { border-right: none; }

  .jour-entete {
    background: var(--deep);
    padding: 0.7rem 0.4rem 0.5rem;
    text-align: center;
    border-bottom: 2px solid transparent;
  }
  .jour-nom {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .jour-num {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    margin-top: 0.1rem;
  }
  .jour-entete.aujourd-hui {
    background: var(--ocean);
    border-bottom: 2px solid var(--accent);
  }
  .jour-entete.hors-saison {
    background: #c8d8e0;
  }
  .jour-entete.hors-saison .jour-nom,
  .jour-entete.hors-saison .jour-num { color: rgba(255,255,255,0.6); }

  .jour-body {
    padding: 0.5rem 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 80px;
  }

  /* ── EVENT CARD ── */
  .evt {
    padding: 0.4rem 0.45rem;
    font-size: 0.68rem;
    line-height: 1.45;
    border-left: 2px solid transparent;
    border-bottom: 1px solid transparent;
  }
  .evt.dispo   { background: var(--dispo-bg);   border-left-color: var(--dispo);   border-bottom-color: var(--dispo-bd);   color: #14452e; }
  .evt.partiel { background: var(--partiel-bg); border-left-color: var(--partiel); border-bottom-color: var(--partiel-bd); color: #5a3800; }
  .evt.complet { background: var(--complet-bg); border-left-color: var(--complet); border-bottom-color: var(--complet-bd); color: #5a1010; }

  .evt-titre {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    line-height: 1.2;
  }
  .evt-ligne {
    font-size: 0.64rem;
    font-weight: 400;
    opacity: 0.8;
  }

  .hors-saison-msg {
    padding: 0.7rem 0.4rem;
    text-align: center;
    font-size: 0.64rem;
    color: var(--muted);
    font-style: italic;
    font-weight: 300;
  }

  /* ── LOADING / ERREUR ── */
  .loading-wrap {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--muted);
    font-size: 0.85rem;
    background: var(--white);
  }
  .spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--ocean);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── CONTACT ── */
  .contact {
    text-align: center;
    margin-top: 2.2rem;
    padding: 1.4rem;
    border: 1px solid var(--border);
    background: var(--white);
  }
  .contact p {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
  .contact a {
    color: var(--ocean);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: color 0.2s;
  }
  .contact a:hover { color: var(--accent); }
  .contact-sep { color: var(--border); margin: 0 0.6rem; }
</style>
</head>
<body>
<div class="widget">

  <div class="header">
    <h1>Mori Ora Whale Watching</h1>
    <p>Disponibilités · Saison Baleines Moorea</p>
  </div>

  <div class="nav">
    <button class="nav-btn" id="btnPrev" onclick="changerSemaine(-1)">&#8249;</button>
    <span class="nav-label" id="labelSemaine"></span>
    <button class="nav-btn" id="btnNext" onclick="changerSemaine(1)">&#8250;</button>
    <button class="today-btn" onclick="allerAujourd()">Aujourd'hui</button>
  </div>

  <div class="date-picker-wrap">
    <span class="date-picker-label">Aller à la date :</span>
    <input type="date" id="datePicker" onchange="allerADate(this.value)">
  </div>

  <div class="legende">
    <div class="leg-item"><div class="leg-dot dispo"></div> Disponible</div>
    <div class="leg-item"><div class="leg-dot partiel"></div> Presque complet</div>
    <div class="leg-item"><div class="leg-dot complet"></div> Complet</div>
  </div>

  <div id="grille" class="grille">
    <div class="loading-wrap"><div class="spinner"></div>Chargement...</div>
  </div>

  <div class="contact">
    <p>Réservations &amp; informations</p>
    <a href="mailto:Mori.ora47@gmail.com">Mori.ora47@gmail.com</a>
    <span class="contact-sep">|</span>
    <a href="tel:+68987268096">(+689) 87 26 80 96</a>
  </div>

</div>

<script>
var API_KEY  = 'AIzaSyCUVPgxuIEZgZAoD6u4KVbvsbG1BUvFTZA';
var CAL_ID   = '6e81097cc207a7de17031d2f2a80d959fcabaf1eff6409d87e0f12aae3ffdaad@group.calendar.google.com';

/* ─────────────────────────────────────────────────────────────
   FIX TIMEZONE : tout le widget raisonne désormais en "dates Tahiti
   sous forme de chaînes" (YYYY-MM-DD), jamais en objets Date convertis
   dans le fuseau du visiteur. C'est la même technique que pour
   calendrier_mori_ora.html (Voila Moorea).
   ───────────────────────────────────────────────────────────── */

// Date du jour À TAHITI sous forme de chaîne "YYYY-MM-DD", peu importe
// où se trouve le visiteur.
function aujourdTahitiStr() {
  // en-CA donne nativement le format YYYY-MM-DD
  return new Date().toLocaleDateString('en-CA', { timeZone: 'Pacific/Tahiti' });
}

// Construit une clé "YYYY-MM-DD" à partir d'une année/mois/jour (mois 0-indexé)
function clePourYMD(y, m, d) {
  var mm = String(m + 1).padStart(2, '0');
  var dd = String(d).padStart(2, '0');
  return y + '-' + mm + '-' + dd;
}

// Ajoute n jours à une clé "YYYY-MM-DD" SANS passer par un Date local
// (on construit un Date à midi UTC pour éviter tout glissement de jour,
// puis on relit les composantes en UTC).
function ajouterJours(cle, n) {
  var parts = cle.split('-').map(Number);
  var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0));
  d.setUTCDate(d.getUTCDate() + n);
  return clePourYMD(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
}

function compareCles(a, b) {
  return a < b ? -1 : (a > b ? 1 : 0);
}

// Lundi de la semaine contenant la clé donnée (clé = "YYYY-MM-DD")
function getLundiCle(cle) {
  var parts = cle.split('-').map(Number);
  var d = new Date(Date.UTC(parts[0], parts[1] - 1, parts[2], 12, 0, 0));
  var jour = d.getUTCDay(); // 0 = dimanche
  var diff = (jour === 0) ? -6 : 1 - jour;
  d.setUTCDate(d.getUTCDate() + diff);
  return clePourYMD(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate());
}

// Formatage lisible "27 juillet" à partir d'une clé "YYYY-MM-DD"
// (affichage uniquement — pas de logique de comparaison ici)
var NOMS_MOIS = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
function formatLisible(cle, avecAnnee) {
  var parts = cle.split('-').map(Number);
  var jour  = parts[2];
  var mois  = NOMS_MOIS[parts[1] - 1];
  return jour + ' ' + mois + (avecAnnee ? ' ' + parts[0] : '');
}

var ANNEE_REF   = Number(aujourdTahitiStr().split('-')[0]);
var SAISON_DEBUT_CLE = clePourYMD(ANNEE_REF, 6, 20);  // 20 juillet
var SAISON_FIN_CLE   = clePourYMD(ANNEE_REF, 10, 20); // 20 novembre

var lundiCourantCle = getLundiCle(aujourdTahitiStr());

var picker = document.getElementById('datePicker');
picker.min = SAISON_DEBUT_CLE;
picker.max = SAISON_FIN_CLE;

afficherSemaine();

function changerSemaine(delta) {
  lundiCourantCle = ajouterJours(lundiCourantCle, delta * 7);
  afficherSemaine();
}

function allerAujourd() {
  lundiCourantCle = getLundiCle(aujourdTahitiStr());
  document.getElementById('datePicker').value = '';
  afficherSemaine();
}

function allerADate(valeur) {
  if (!valeur) return;
  lundiCourantCle = getLundiCle(valeur); // <input type="date"> renvoie déjà "YYYY-MM-DD"
  afficherSemaine();
}

function afficherSemaine() {
  var lundiCle    = lundiCourantCle;
  var dimancheCle = ajouterJours(lundiCle, 6);

  var label = formatLisible(lundiCle, false) + ' – ' + formatLisible(dimancheCle, true);
  document.getElementById('labelSemaine').textContent = label;

  document.getElementById('btnPrev').disabled =
    compareCles(ajouterJours(lundiCle, -7), SAISON_FIN_CLE) > 0 ||
    compareCles(dimancheCle, SAISON_DEBUT_CLE) < 0;

  document.getElementById('grille').innerHTML =
    '<div class="loading-wrap"><div class="spinner"></div>Chargement...</div>';

  // Bornes de requête API : on prend une marge de 1 jour de chaque côté
  // pour être sûr d'englober tous les événements Tahiti quel que soit le
  // fuseau du serveur Google Calendar API, puis on filtre nous-mêmes par
  // clé de date Tahiti dans renderSemaine().
  var timeMin = lundiCle + 'T00:00:00-10:00';
  var timeMax = ajouterJours(dimancheCle, 1) + 'T00:00:00-10:00';

  var url = 'https://www.googleapis.com/calendar/v3/calendars/'
           + encodeURIComponent(CAL_ID)
           + '/events?key=' + API_KEY
           + '&timeMin=' + encodeURIComponent(timeMin)
           + '&timeMax=' + encodeURIComponent(timeMax)
           + '&singleEvents=true&orderBy=startTime&maxResults=50';

  fetch(url)
    .then(function(r) { return r.json(); })
    .then(function(data) { renderSemaine(lundiCle, data.items || []); })
    .catch(function() {
      document.getElementById('grille').innerHTML =
        '<div class="loading-wrap">❌ Impossible de charger les disponibilités.</div>';
    });
}

function renderSemaine(lundiCle, events) {
  var parJour = {};

  events.forEach(function(ev) {
    var brut = ev.start.dateTime || ev.start.date;
    // FIX : on lit la date Tahiti directement dans la chaîne ISO
    // (les 10 premiers caractères "YYYY-MM-DD"), sans jamais construire
    // un objet Date qui serait réinterprété dans le fuseau du visiteur.
    var key = brut.substring(0, 10);
    if (!parJour[key]) parJour[key] = [];
    parJour[key].push(ev);
  });

  // Au sein d'un même jour, on trie explicitement par heure de début
  // (toujours via la chaîne ISO, pas via un objet Date) pour garantir
  // Matin avant Après-midi quel que soit l'ordre renvoyé par l'API.
  Object.keys(parJour).forEach(function(key) {
    parJour[key].sort(function(a, b) {
      var ta = (a.start.dateTime || a.start.date);
      var tb = (b.start.dateTime || b.start.date);
      return ta < tb ? -1 : (ta > tb ? 1 : 0);
    });
  });

  var jours    = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
  var aujourdCle = aujourdTahitiStr();
  var html     = '';

  for (var i = 0; i < 7; i++) {
    var cle        = ajouterJours(lundiCle, i);
    var evts       = parJour[cle] || [];
    var estAujourd = cle === aujourdCle;
    var horsSaison = compareCles(cle, SAISON_DEBUT_CLE) < 0 || compareCles(cle, SAISON_FIN_CLE) > 0;
    var entCls     = horsSaison ? 'hors-saison' : (estAujourd ? 'aujourd-hui' : '');
    var jourNum    = Number(cle.split('-')[2]);

    html += '<div class="jour-carte">';
    html += '<div class="jour-entete ' + entCls + '">';
    html += '<div class="jour-nom">' + jours[i] + '</div>';
    html += '<div class="jour-num">' + jourNum + '</div>';
    html += '</div><div class="jour-body">';

    if (horsSaison) {
      html += '<div class="hors-saison-msg">Hors saison</div>';
    } else if (evts.length === 0) {
      html += '<div class="hors-saison-msg">Aucun tour</div>';
    } else {
      evts.forEach(function(ev) {
        var titre = ev.summary || '';
        var desc  = ev.description || '';
        var lignes = desc.split('\n').filter(function(l) { return l.trim(); });

        var statut = 'dispo';
        if (titre.indexOf('COMPLET') !== -1) {
          statut = 'complet';
        } else {
          var nag = parseInt((desc.match(/(\d+) place\(s\) nageur/)   || [0,99])[1]);
          var obs = parseInt((desc.match(/(\d+) place\(s\) non nageur/)|| [0,99])[1]);
          if (nag === 0 || obs === 0) statut = 'partiel';
          if (nag === 0 && obs === 0) statut = 'complet';
        }

        html += '<div class="evt ' + statut + '">';
        html += '<div class="evt-titre">' + titre + '</div>';
        for (var l = 0; l < Math.min(2, lignes.length); l++) {
          html += '<div class="evt-ligne">' + lignes[l] + '</div>';
        }
        html += '</div>';
      });
    }

    html += '</div></div>';
  }

  document.getElementById('grille').innerHTML = html;
}
</script>
</body>
</html>

Contact form

<h3>Contactez-nous</h3>
<p class="normal">Des questions ? Des envies ? Vous souhaitez réserver ?</p>
<p>N'hésitez pas à nous contacter. Nous parlons français, anglais aisément et Doris a des notions d'allemand. </p>
<p>Nous vous répondrons dans les plus brefs délais.</p>
<p><a href="mailto:mori.ora47@gmail.com">mori.ora47@gmail.com</a><br />+689 87 26 80 96<br />+689 87 32 59 81</p>

name

email

phone

address:country

Question anti-spam TROIS FOIS DEUX :

Niveau de PMT (palme masque tuba) : débutant (pas d'expérience ou quelques courtes sorties PMT), intermédiaire (a déjà nagé en océan, est capable de nager 200m en PMT en océan), avancé (très bonne aisance dans l'océan, capable de nager longtemps et à une vitesse soutenue). Expérience en piscine ne compte pas comme une expérience de nage en océan.