{"id":1286,"date":"2026-05-09T12:18:58","date_gmt":"2026-05-09T10:18:58","guid":{"rendered":"https:\/\/tomasini-location.fr\/?page_id=1286"},"modified":"2026-05-09T12:27:47","modified_gmt":"2026-05-09T10:27:47","slug":"disponibilites","status":"publish","type":"page","link":"https:\/\/tomasini-location.fr\/en\/disponibilites\/","title":{"rendered":"Disponibilit\u00e9s"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1286\" class=\"elementor elementor-1286\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ede6660 e-flex e-con-boxed e-con e-parent\" data-id=\"ede6660\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-78c4a80 elementor-widget elementor-widget-html\" data-id=\"78c4a80\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n<style>\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n:root {\n  --terra: #c4714a;\n  --terra-dark: #a85a35;\n  --sea: #2d6b7a;\n  --dune: #e8ddd0;\n  --sand: #f5efe6;\n  --dark: #1a1a1a;\n  --mid: #555;\n  --light: #888;\n  --green-bg: #e8f4ee;\n  --green-txt: #2a6645;\n  --red-bg: #fdf0ed;\n  --red-txt: #a85a35;\n}\n\nbody {\n  font-family: 'Jost', sans-serif;\n  background: var(--sand);\n  min-height: 100vh;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 2rem 1rem;\n}\n\n.wrap {\n  width: 100%;\n  max-width: 1140px;\n}\n\n\/* En-t\u00eate *\/\n.page-header {\n  text-align: center;\n  margin-bottom: 2.5rem;\n}\n.eyebrow {\n  font-size: 0.68rem;\n  letter-spacing: 0.35em;\n  text-transform: uppercase;\n  color: var(--terra);\n  margin-bottom: 0.75rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 1rem;\n}\n.eyebrow::before, .eyebrow::after {\n  content: ''; height: 1px; width: 50px;\n  background: var(--terra); opacity: 0.4;\n}\n.page-header h1 {\n  font-family: 'Cormorant Garamond', serif;\n  font-weight: 300;\n  font-size: 2.6rem;\n  color: var(--dark);\n  line-height: 1.15;\n  margin-bottom: 0.4rem;\n}\n.page-header h1 em { font-style: italic; color: var(--terra); }\n.page-header p { font-size: 0.82rem; color: var(--light); font-weight: 300; }\n\n\/* Onglets appartements *\/\n.tabs {\n  display: flex;\n  gap: 0;\n  margin-bottom: 2rem;\n  border-bottom: 1.5px solid var(--dune);\n}\n.tab-btn {\n  padding: 0.75rem 2rem;\n  font-family: 'Jost', sans-serif;\n  font-size: 0.75rem;\n  font-weight: 500;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--light);\n  border-bottom: 2.5px solid transparent;\n  margin-bottom: -1.5px;\n  transition: all 0.2s;\n}\n.tab-btn:hover { color: var(--terra); }\n.tab-btn.active { color: var(--terra); border-bottom-color: var(--terra); }\n\n\/* Carte calendrier *\/\n.cal-card {\n  background: white;\n  border-radius: 2px;\n  padding: 2.2rem 2.5rem;\n  box-shadow: 0 8px 40px rgba(0,0,0,0.07);\n  position: relative;\n  overflow: hidden;\n}\n.cal-card::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 3px;\n  background: linear-gradient(90deg, var(--terra), var(--sea));\n}\n\n\/* Barre de navigation mois *\/\n.cal-nav {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 1.8rem;\n}\n.cal-nav-btns { display: flex; gap: 6px; }\n.nav-btn {\n  width: 34px; height: 34px;\n  border-radius: 2px;\n  border: 1.5px solid var(--dune);\n  background: white;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mid);\n  display: flex; align-items: center; justify-content: center;\n  transition: all 0.2s;\n}\n.nav-btn:hover { border-color: var(--terra); color: var(--terra); }\n\n.sync-status {\n  font-size: 0.75rem;\n  padding: 0.35rem 0.75rem;\n  border-radius: 20px;\n  font-weight: 400;\n}\n.sync-ok { background: var(--green-bg); color: var(--green-txt); }\n.sync-err { background: var(--red-bg); color: var(--red-txt); }\n.sync-loading { background: #f0f0f0; color: var(--light); }\n\n\/* Grille des mois *\/\n.months-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 2rem;\n}\n\n.month-block {}\n.month-title {\n  text-align: center;\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: var(--dark);\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  margin-bottom: 0.85rem;\n}\n\n.day-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n}\n\n.day-lbl {\n  text-align: center;\n  font-size: 0.6rem;\n  color: var(--light);\n  font-weight: 500;\n  padding: 4px 0 6px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n\n.day-cell {\n  aspect-ratio: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 3px;\n  font-size: 0.72rem;\n  font-weight: 400;\n  transition: all 0.15s;\n}\n.day-cell.empty {}\n.day-cell.past { color: #ccc; }\n.day-cell.available { background: var(--green-bg); color: var(--green-txt); font-weight: 500; }\n.day-cell.booked {\n  background: var(--red-bg);\n  color: var(--red-txt);\n  text-decoration: line-through;\n  opacity: 0.8;\n}\n.day-cell.today {\n  outline: 2px solid var(--terra);\n  outline-offset: -2px;\n  font-weight: 500;\n}\n\n\/* L\u00e9gende *\/\n.legend {\n  display: flex;\n  align-items: center;\n  gap: 2rem;\n  margin-top: 1.8rem;\n  padding-top: 1.5rem;\n  border-top: 1px solid var(--dune);\n  flex-wrap: wrap;\n}\n.legend-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.75rem;\n  color: var(--mid);\n  font-weight: 300;\n}\n.legend-dot {\n  width: 14px; height: 14px;\n  border-radius: 3px;\n  flex-shrink: 0;\n}\n\n\n\n\n\n@media (max-width: 800px) {\n  .months-grid { grid-template-columns: repeat(2, 1fr); }\n  .cal-card { padding: 1.5rem 1.2rem; }\n}\n@media (max-width: 520px) {\n  .months-grid { grid-template-columns: 1fr; }\n  .page-header h1 { font-size: 1.9rem; }\n  .tab-btn { padding: 0.65rem 1.2rem; }\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n\n  <div class=\"page-header\">\n    <div class=\"eyebrow\">Porticcio \u00b7 Corse du Sud<\/div>\n    <h1>Calendrier des <em>disponibilit\u00e9s<\/em><\/h1>\n    <p>Mis \u00e0 jour en temps r\u00e9el depuis Abritel<\/p>\n  <\/div>\n\n  <div style=\"text-align:center; margin-bottom:1.5rem;\">\n    <span style=\"font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; color:#1a1a1a;\">\n      Disponibilit\u00e9s du <em style=\"font-style:italic; color:#c4714a;\">Bella Vista<\/em>\n    <\/span>\n  <\/div>\n\n  <div class=\"cal-card\">\n    <div class=\"cal-nav\">\n      <div class=\"cal-nav-btns\">\n        <button class=\"nav-btn\" onclick=\"prev()\">\u2039<\/button>\n        <button class=\"nav-btn\" onclick=\"next()\">\u203a<\/button>\n      <\/div>\n      <span class=\"sync-status sync-loading\" id=\"sync-status\">Synchronisation\u2026<\/span>\n    <\/div>\n\n    <div class=\"months-grid\" id=\"months-grid\"><\/div>\n\n    <div class=\"legend\">\n      <div class=\"legend-item\">\n        <div class=\"legend-dot\" style=\"background:#e8f4ee;border:1px solid #2a664530;\"><\/div>\n        Disponible\n      <\/div>\n      <div class=\"legend-item\">\n        <div class=\"legend-dot\" style=\"background:#fdf0ed;border:1px solid #c4714a30;\"><\/div>\n        R\u00e9serv\u00e9\n      <\/div>\n      <div class=\"legend-item\">\n        <div class=\"legend-dot\" style=\"outline:2px solid #c4714a;border-radius:3px;background:none;\"><\/div>\n        Aujourd'hui\n      <\/div>\n    <\/div>\n\n\n  <\/div>\n\n<\/div>\n\n<script>\nconst ICAL_URL = \"https:\/\/www.tomasini-location.fr\/ical-proxy.php\";\nconst MONTHS = [\"Janvier\",\"F\u00e9vrier\",\"Mars\",\"Avril\",\"Mai\",\"Juin\",\"Juillet\",\"Ao\u00fbt\",\"Septembre\",\"Octobre\",\"Novembre\",\"D\u00e9cembre\"];\nconst DAYS   = [\"Lu\",\"Ma\",\"Me\",\"Je\",\"Ve\",\"Sa\",\"Di\"];\n\nlet booked = new Set();\nlet offset = 0;\nconst today = new Date(); today.setHours(0,0,0,0);\n\nfunction key(d){ return d.getFullYear()+\"-\"+String(d.getMonth()+1).padStart(2,\"0\")+\"-\"+String(d.getDate()).padStart(2,\"0\"); }\n\nfunction parseIcal(txt){\n  const s = new Set();\n  const evs = txt.split(\"BEGIN:VEVENT\");\n  for(let i=1;i<evs.length;i++){\n    const e = evs[i];\n    const ds = e.match(\/DTSTART[^:]*:(\\d{8})\/);\n    const de = e.match(\/DTEND[^:]*:(\\d{8})\/);\n    if(ds && de){\n      let c = pd(ds[1]), end = pd(de[1]);\n      while(c < end){ s.add(key(c)); c.setDate(c.getDate()+1); }\n    }\n  }\n  return s;\n}\n\nfunction pd(s){ return new Date(+s.slice(0,4), +s.slice(4,6)-1, +s.slice(6,8)); }\n\nfunction renderMonth(y, m){\n  let fd = new Date(y,m,1), ld = new Date(y,m+1,0);\n  let dow = fd.getDay(); dow = dow===0?6:dow-1;\n  let h = `<div class=\"month-block\">\n    <div class=\"month-title\">${MONTHS[m]} ${y}<\/div>\n    <div class=\"day-grid\">`;\n  DAYS.forEach(d => { h += `<div class=\"day-lbl\">${d}<\/div>`; });\n  for(let i=0;i<dow;i++) h += `<div class=\"day-cell empty\"><\/div>`;\n  for(let d=1;d<=ld.getDate();d++){\n    const dt=new Date(y,m,d), k=key(dt);\n    const isPast=dt<today, isToday=dt.getTime()===today.getTime(), isBk=booked.has(k);\n    let cls=\"day-cell\";\n    if(isPast) cls+=\" past\";\n    else if(isBk) cls+=\" booked\";\n    else cls+=\" available\";\n    if(isToday) cls+=\" today\";\n    h += `<div class=\"${cls}\">${d}<\/div>`;\n  }\n  h += `<\/div><\/div>`;\n  return h;\n}\n\nfunction render(){\n  const base = new Date(today.getFullYear(), today.getMonth()+offset, 1);\n  let html = \"\";\n  for(let i=0;i<3;i++){\n    const d = new Date(base.getFullYear(), base.getMonth()+i, 1);\n    html += renderMonth(d.getFullYear(), d.getMonth());\n  }\n  document.getElementById(\"months-grid\").innerHTML = html;\n}\n\nfunction prev(){ offset -= 3; render(); }\nfunction next(){ offset += 3; render(); }\n\nasync function load(){\n  try {\n    const r = await fetch(ICAL_URL);\n    if(!r.ok) throw new Error();\n    const txt = await r.text();\n    booked = parseIcal(txt);\n    const el = document.getElementById(\"sync-status\");\n    el.textContent = \"\u2713 Synchronis\u00e9 Abritel\";\n    el.className = \"sync-status sync-ok\";\n  } catch(e){\n    const el = document.getElementById(\"sync-status\");\n    el.textContent = \"\u26a0 Synchronisation indisponible\";\n    el.className = \"sync-status sync-err\";\n  }\n  render();\n}\n\nrender();\nload();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Porticcio \u00b7 Corse du Sud Calendrier des disponibilit\u00e9s Mis \u00e0 jour en temps r\u00e9el depuis Abritel Disponibilit\u00e9s du Bella Vista \u2039 \u203a Synchronisation\u2026 Disponible R\u00e9serv\u00e9 Aujourd&rsquo;hui<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1286","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/pages\/1286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/comments?post=1286"}],"version-history":[{"count":7,"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/pages\/1286\/revisions"}],"predecessor-version":[{"id":1293,"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/pages\/1286\/revisions\/1293"}],"wp:attachment":[{"href":"https:\/\/tomasini-location.fr\/en\/wp-json\/wp\/v2\/media?parent=1286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}