<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Découvrir la Grèce</title>
	<atom:link href="https://visiter-santorini.fr/feed/" rel="self" type="application/rss+xml" />
	<link>https://visiter-santorini.fr/</link>
	<description>Les destinations incontournables en Grèce</description>
	<lastBuildDate>Tue, 28 Jul 2026 07:04:33 +0000</lastBuildDate>
	<language>fr-FR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>
	<item>
		<title>Carte interactive d&#8217;Athènes</title>
		<link>https://visiter-santorini.fr/carte-interactive-athenes/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Tue, 04 Aug 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Carte Interactive]]></category>
		<category><![CDATA[Athènes & Attique]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11472</guid>

					<description><![CDATA[<p>Explorer Athènes Carte interactived&#8217;Athènes Acropole, agoras, musées majeurs, quartiers historiques et collines panoramiques : 26 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position dans la ville. 26 Étapes guidées 5 Catégories de lieux 3 000 Ans d&#8217;histoire Votre visite guidée d&#8217;Athènes, étape par étape Touchez un point&#8230;&#160;<a href="https://visiter-santorini.fr/carte-interactive-athenes/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Carte interactive d&#8217;Athènes</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/carte-interactive-athenes/">Carte interactive d&rsquo;Athènes</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ============================================================
     VISITE GUIDEE INTERACTIVE D'ATHENES, visiter-santorini.fr (v1)
     A coller dans un bloc "HTML personnalise" (Gutenberg) sur une
     page dediee. Ce bloc ne contient AUCUN script : le moteur est
     le snippet WP Code "visite-guidee-athenes" (JavaScript Snippet,
     Site Wide Footer, Frontend only).
     Tout est scope sous #vga : aucune regle CSS globale. Le snippet
     Athenes ne s'active que sur la page qui contient #vga : il peut
     donc rester actif en meme temps que le snippet Santorin (#vgs).

     FONCTIONNEMENT
     - 26 lieux en 5 categories : quartiers, sites archeologiques,
       musees, points de vue, monuments et places.
     - Clic sur un point de la carte ou une carte de la liste ->
       fiche complete (resume, note pratique, ecoute audio).
     - Bouton "Activer le guidage GPS" : position en direct sur la
       carte, tri des lieux par distance, bandeau "Prochaines etapes"
       avec les 3 lieux non vus les plus proches. A moins de 120 m
       d'un lieu, sa fiche s'ouvre toute seule.
     - Audio : lecture vocale du texte par le navigateur (voix
       francaise du telephone). Pour remplacer par VOS enregistrements,
       hebergez un MP3 dans la mediatheque et collez son URL dans le
       champ audio:"" du lieu concerne, dans le snippet.
     - URLS D'ARTICLES : le champ url:"" de chaque lieu est vide.
       Collez uniquement des URL publiees du site ; une URL vide
       masque le bouton "Lire l'article". Ne rien inventer.
     - PHOTOS : champ photo:"" vide par defaut. Collez l'URL d'une
       image de la mediatheque pour l'afficher en haut de la fiche.
     - IMAGE DU HERO : remplacez l'URL A-REMPLACER ci-dessous (img
       du hero + preload) par une photo d'Athenes de votre
       mediatheque (Acropole ou vue sur la ville).
     - Le guidage GPS demande l'autorisation de localisation et
       fonctionne uniquement en HTTPS (le site l'est).
     - Attributions OpenStreetMap / CARTO / Esri obligatoires :
       incluses, ne pas les retirer.
     ============================================================ -->

<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/athenes-grece-22.jpg" fetchpriority="high">

<style>
.gsan-vga-hero-wrap {
  --c-deep:#0d2d4a; --c-gold:#c9a84c; --c-gold-lt:#e8d5a0; --c-white:#faf9f7;
  font-family:'Jost',sans-serif; line-height:1.7;
}
.gsan-vga-hero-wrap *, .gsan-vga-hero-wrap *::before, .gsan-vga-hero-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.gsan-vga-hero-wrap .gsan-hero { position:relative; height:66vh; min-height:440px; overflow:hidden; display:flex; align-items:flex-end; }
.gsan-vga-hero-wrap .gsan-hero img {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 40%;
  transform:scale(1.05); animation:gsanVgaZoom 14s ease-out forwards;
}
@keyframes gsanVgaZoom { to { transform:scale(1); } }
.gsan-vga-hero-wrap .gsan-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,45,74,.92) 0%, rgba(13,45,74,.3) 55%, transparent 100%); }
.gsan-vga-hero-wrap .gsan-hero-content { position:relative; z-index:2; padding:3.2rem 5vw 3.8rem; max-width:820px; }
.gsan-vga-hero-wrap .gsan-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold); font-weight:500; margin-bottom:.8rem; }
.gsan-vga-hero-wrap .gsan-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--c-gold); }
.gsan-vga-hero-wrap .gsan-hero-content h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:300; color:var(--c-white); line-height:1.05; margin-bottom:1rem; }
.gsan-vga-hero-wrap .gsan-hero-content h1 em { font-style:italic; color:var(--c-gold-lt); }
.gsan-vga-hero-wrap .gsan-hero-content p { color:rgba(250,249,247,.78); font-size:.95rem; max-width:580px; margin-bottom:1.8rem; }
.gsan-vga-hero-wrap .gsan-hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.gsan-vga-hero-wrap .gsan-hero-stat .num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--c-gold-lt); line-height:1; }
.gsan-vga-hero-wrap .gsan-hero-stat .label { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,249,247,.55); margin-top:.2rem; }

/* ============ Visite guidee ============ */
#vga {
  --deep:#0d2d4a; --deep-2:#123a5e; --gold:#c9a84c; --gold-lt:#e8d5a0;
  --white:#faf9f7; --ink:#1c2733; --mut:#5b6b7a; --line:rgba(13,45,74,.12);
  --c-quartier:#c9a84c; --c-site:#b5543b; --c-musee:#8a6fb8; --c-vue:#e2795a; --c-monument:#3d8bd4;
  font-family:'Jost',sans-serif; color:var(--ink); background:var(--white);
  padding:2.2rem 4vw 3rem;
}
#vga *, #vga *::before, #vga *::after { box-sizing:border-box; margin:0; padding:0; }
#vga .vga-intro { max-width:820px; margin:0 auto 1.6rem; text-align:center; }
#vga .vga-intro h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--deep); margin-bottom:.55rem; }
#vga .vga-intro p { font-size:.92rem; color:var(--mut); }

/* Barre de guidage GPS */
#vga .vga-gpsbar {
  max-width:1180px; margin:0 auto 1rem; display:flex; flex-wrap:wrap; gap:.7rem;
  align-items:center; justify-content:space-between;
  background:var(--deep); border-radius:14px; padding:.75rem 1rem;
}
#vga .vga-gpsbar .left { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
#vga #vga-gps {
  border:1px solid var(--gold); background:transparent; color:var(--gold-lt);
  font-family:inherit; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; transition:background .2s,color .2s;
}
#vga #vga-gps:hover { background:var(--gold); color:var(--deep); }
#vga #vga-gps.on { background:var(--gold); color:var(--deep); }
#vga #vga-gps-status { font-size:.8rem; color:rgba(250,249,247,.75); }
#vga #vga-progress { font-size:.8rem; color:var(--gold-lt); letter-spacing:.06em; white-space:nowrap; }

/* Bandeau prochaines etapes */
#vga #vga-next { max-width:1180px; margin:0 auto 1rem; display:none; gap:.7rem; flex-wrap:wrap; }
#vga #vga-next.on { display:flex; }
#vga .vga-next-card {
  flex:1 1 220px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; padding:.7rem .9rem; cursor:pointer; text-align:left; font-family:inherit;
  transition:box-shadow .15s;
}
#vga .vga-next-card:hover { box-shadow:0 4px 14px rgba(13,45,74,.12); }
#vga .vga-next-card .tag { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:600; }
#vga .vga-next-card .nom { font-size:.92rem; color:var(--deep); font-weight:500; margin-top:.15rem; }
#vga .vga-next-card .dist { font-size:.76rem; color:var(--mut); margin-top:.1rem; }

/* Layout panneau + carte */
#vga .vga-layout { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:360px 1fr; gap:1rem; }
#vga .vga-panel {
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; height:620px;
}
#vga .vga-tools { padding:.9rem .9rem .6rem; border-bottom:1px solid var(--line); }
#vga #vga-search {
  width:100%; border:1px solid var(--line); border-radius:999px; padding:.55rem 1rem;
  font-family:inherit; font-size:.85rem; color:var(--ink); background:var(--white); outline:none;
}
#vga #vga-search:focus { border-color:var(--gold); }
#vga .vga-filtres { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.6rem; }
#vga .vga-filtre {
  border:1px solid var(--line); background:#fff; color:var(--mut); font-family:inherit;
  font-size:.7rem; letter-spacing:.04em; padding:.3rem .65rem; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; gap:.35rem; transition:border-color .15s,color .15s;
}
#vga .vga-filtre .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
#vga .vga-filtre:hover { border-color:var(--gold); color:var(--ink); }
#vga .vga-filtre.on { border-color:var(--deep); color:var(--deep); background:rgba(13,45,74,.05); font-weight:600; }

/* Liste */
#vga #vga-liste { overflow-y:auto; flex:1; }
#vga .vga-item {
  width:100%; text-align:left; border:none; border-bottom:1px solid var(--line);
  background:transparent; cursor:pointer; padding:.75rem .9rem; font-family:inherit;
  display:flex; gap:.7rem; align-items:flex-start; transition:background .15s,border-color .15s;
}
#vga .vga-item:hover { background:rgba(201,168,76,.08); }
#vga .vga-item.vu { opacity:.55; }
#vga .vga-item .pin {
  flex:none; width:26px; height:26px; border-radius:50%; color:#fff; font-size:.68rem;
  font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
#vga .vga-item .nom { font-size:.92rem; color:var(--ink); font-weight:500; line-height:1.3; }
#vga .vga-item .sub { font-size:.76rem; color:var(--mut); margin-top:.15rem; }
#vga .vga-item .dist { font-size:.74rem; color:var(--gold); margin-top:.15rem; letter-spacing:.03em; }
#vga .vga-vide { padding:1rem; font-size:.85rem; color:var(--mut); }

/* Fiche */
#vga #vga-fiche { display:none; overflow-y:auto; flex:1; }
#vga #vga-fiche.on { display:block; }
#vga #vga-liste.off { display:none; }
#vga .vga-fiche-photo { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
#vga .vga-fiche-body { padding:1rem 1.1rem 1.3rem; }
#vga #vga-retour {
  border:none; background:transparent; color:var(--mut); font-family:inherit;
  font-size:.8rem; cursor:pointer; padding:.85rem 1.1rem .2rem; letter-spacing:.04em;
}
#vga #vga-retour:hover { color:var(--deep); }
#vga .vga-fiche-cat { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin-bottom:.35rem; }
#vga #vga-fiche-nom { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.55rem; color:var(--deep); line-height:1.15; margin-bottom:.6rem; }
#vga #vga-fiche-dist { font-size:.8rem; color:var(--gold); letter-spacing:.04em; margin-bottom:.6rem; display:none; }
#vga #vga-fiche-texte { font-size:.9rem; color:var(--ink); line-height:1.75; }
#vga #vga-fiche-note { margin-top:.8rem; font-size:.83rem; color:var(--mut); border-left:2px solid var(--gold); padding-left:.75rem; line-height:1.65; }
#vga #vga-audio-player { width:100%; margin-top:.9rem; display:none; }
#vga .vga-fiche-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
#vga .vga-btn {
  border:1px solid var(--deep); background:var(--deep); color:#fff; font-family:inherit;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; padding:.55rem 1rem;
  border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center;
  transition:background .2s,color .2s;
}
#vga .vga-btn:hover { background:var(--deep-2); }
#vga .vga-btn.gold { background:var(--gold); border-color:var(--gold); color:var(--deep); }
#vga .vga-btn.gold:hover { background:var(--gold-lt); border-color:var(--gold-lt); }
#vga .vga-btn.ghost { background:transparent; color:var(--deep); }
#vga .vga-btn.ghost:hover { background:rgba(13,45,74,.06); }

/* Carte */
#vga .vga-carte-wrap { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); height:620px; }
#vga #vga-carte { position:absolute; inset:0; z-index:1; }
#vga #vga-carte-fallback {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; color:var(--mut); background:var(--white); z-index:0;
}
#vga .vga-basemap { position:absolute; top:.7rem; right:.7rem; z-index:500; display:flex; border-radius:999px; overflow:hidden; box-shadow:0 2px 10px rgba(13,45,74,.25); }
#vga .vga-basemap button {
  border:none; background:#fff; color:var(--mut); font-family:inherit; font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; padding:.45rem .8rem; cursor:pointer;
}
#vga .vga-basemap button.on { background:var(--deep); color:#fff; }

/* Marqueurs Leaflet */
#vga .vga-marker { border-radius:50%; border:2px solid #fff; box-shadow:0 1px 6px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Jost',sans-serif; font-size:.62rem; font-weight:600; }
#vga .vga-marker.vu { opacity:.55; }
#vga .vga-user-dot { width:16px; height:16px; border-radius:50%; background:#2f7fe0; border:3px solid #fff; box-shadow:0 0 0 0 rgba(47,127,224,.5); animation:vgaPulse 2s infinite; }
@keyframes vgaPulse { 0%{box-shadow:0 0 0 0 rgba(47,127,224,.5);} 70%{box-shadow:0 0 0 16px rgba(47,127,224,0);} 100%{box-shadow:0 0 0 0 rgba(47,127,224,0);} }
@media (prefers-reduced-motion:reduce) { #vga .vga-user-dot { animation:none; } .gsan-vga-hero-wrap .gsan-hero img { animation:none; transform:none; } }

#vga .vga-attrib { max-width:1180px; margin:.5rem auto 0; font-size:.68rem; color:var(--mut); text-align:right; }
#vga .vga-attrib a { color:var(--mut); }

@media (max-width:900px) {
  #vga .vga-layout { grid-template-columns:1fr; }
  #vga .vga-carte-wrap { height:56vh; min-height:380px; order:-1; }
  #vga .vga-panel { height:auto; max-height:70vh; }
  #vga .vga-gpsbar { position:sticky; top:0; z-index:600; }
}
</style>

<div class="gsan-vga-hero-wrap">
  <div class="gsan-hero">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/athenes-grece-22.jpg" alt="Athènes en Grèce" loading="eager" fetchpriority="high">
    <div class="gsan-hero-overlay"></div>
    <div class="gsan-hero-content">
      <div class="gsan-eyebrow"><span>Explorer Athènes</span></div>
      <h1>Carte interactive<br>d&rsquo;<em>Athènes</em></h1>
      <p>Acropole, agoras, musées majeurs, quartiers historiques et collines panoramiques : 26 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position dans la ville.</p>
      <div class="gsan-hero-stats">
        <div class="gsan-hero-stat"><div class="num">26</div><div class="label">Étapes guidées</div></div>
        <div class="gsan-hero-stat"><div class="num">5</div><div class="label">Catégories de lieux</div></div>
        <div class="gsan-hero-stat"><div class="num">3 000</div><div class="label">Ans d&rsquo;histoire</div></div>
      </div>
    </div>
  </div>
</div>

<div id="vga">
  <div class="vga-intro">
    <h2>Votre visite guidée d&rsquo;Athènes, étape par étape</h2>
    <p>Touchez un point sur la carte ou un lieu dans la liste pour ouvrir sa fiche. Sur place, activez le guidage GPS : la carte affiche votre position et vous propose les étapes les plus proches.</p>
  </div>

  <div class="vga-gpsbar">
    <div class="left">
      <button id="vga-gps" type="button">Activer le guidage GPS</button>
      <span id="vga-gps-status">Guidage désactivé</span>
    </div>
    <span id="vga-progress">0 / 26 lieux vus</span>
  </div>

  <div id="vga-next" aria-label="Prochaines étapes proposées"></div>

  <div class="vga-layout">
    <aside class="vga-panel">
      <div class="vga-tools">
        <input id="vga-search" type="search" placeholder="Rechercher un lieu (Acropole, Plaka, Lycabette...)" aria-label="Rechercher un lieu">
        <div class="vga-filtres" id="vga-filtres"></div>
      </div>
      <div id="vga-liste" aria-live="polite"></div>
      <div id="vga-fiche">
        <button id="vga-retour" type="button">← Retour à la liste</button>
        <img id="vga-fiche-photo" class="vga-fiche-photo" alt="" style="display:none">
        <div class="vga-fiche-body">
          <div class="vga-fiche-cat" id="vga-fiche-cat"></div>
          <h3 id="vga-fiche-nom"></h3>
          <div id="vga-fiche-dist"></div>
          <p id="vga-fiche-texte"></p>
          <p id="vga-fiche-note"></p>
          <audio id="vga-audio-player" controls="" preload="none"></audio>
          <div class="vga-fiche-actions">
            <button id="vga-ecouter" class="vga-btn gold" type="button">Écouter la fiche</button>
            <button id="vga-vu" class="vga-btn ghost" type="button">Marquer comme vu</button>
            <a id="vga-cta" class="vga-btn" href="#">Lire l&rsquo;article</a>
          </div>
        </div>
      </div>
    </aside>

    <div class="vga-carte-wrap">
      <div id="vga-carte-fallback">Chargement de la carte d&rsquo;Athènes&#8230;</div>
      <div id="vga-carte" role="application" aria-label="Carte interactive d'Athènes"></div>
      <div class="vga-basemap">
        <button id="vga-sat" type="button" class="on">Satellite</button>
        <button id="vga-plan" type="button">Plan</button>
      </div>
    </div>
  </div>

  <p class="vga-attrib">Fonds de carte : © <a href="https://www.openstreetmap.org/copyright" rel="noopener" target="_blank">OpenStreetMap</a>, © CARTO, imagerie © Esri</p>
</div>



<!--
==========================================================
CONTENU SEO SOUS LA CARTE INTERACTIVE D'ATHENES
Site : visiter-santorini.fr
==========================================================
A coller dans un SECOND bloc "HTML personnalise" (Gutenberg),
juste sous le bloc de la carte interactive, sur la meme page.

Mot-cle principal : carte interactive d'Athenes

AUTONOME : tout est scope sous #athenes-seo et le CSS est inclus
dans le bloc. Palette egeenne identique a celle de la carte.

LARGEUR : mise en page 10/80/10 (padding lateral de 10% sur les deux
sections, 7% sous 1024px, 6vw sur mobile). Pour elargir ou resserrer,
modifier la seule valeur 10% dans .ath-section et .ath-programme.

IMAGE DU CTA : remplacez A-REMPLACER par l'URL d'une photo d'Athenes
de votre mediatheque avant publication.

Donnees verifiees en juillet 2026 (Acropole 30 euros a creneau
horaire obligatoire, plafond d'environ 20 000 visiteurs/jour,
gratuit pour les moins de 25 ans de l'UE ; billet combine sept
sites 36 euros sur hhticket.gr ; ticket metro 1,20 euro valable
90 minutes). A revoir chaque debut de saison.
==========================================================
-->

<style>
#athenes-seo{--deep:#0d2d4a;--deep-2:#123a5e;--gold:#c9a84c;--gold-lt:#e8d5a0;--white:#faf9f7;--ink:#1c2733;--mut:#5b6b7a;--line:rgba(13,45,74,.12);font-family:'Jost',sans-serif;color:var(--ink);line-height:1.75}
#athenes-seo *,#athenes-seo *::before,#athenes-seo *::after{box-sizing:border-box;margin:0;padding:0}
#athenes-seo .ath-section{background:#fff;padding:4rem 10%}
#athenes-seo .ath-programme{background:var(--white);padding:4rem 10%}
#athenes-seo .ath-inner{width:100%;margin:0 auto}
#athenes-seo .ath-eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.9rem}
#athenes-seo .ath-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
#athenes-seo h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem);color:var(--deep);line-height:1.15}
#athenes-seo h2 em{font-style:italic;color:var(--gold)}
#athenes-seo h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--deep);margin-top:3.4rem;margin-bottom:.55rem;line-height:1.3}
#athenes-seo h3+p,#athenes-seo h3+ul{margin-top:0}
#athenes-seo h2+p{margin-top:1.2rem}
#athenes-seo p{font-size:.95rem;margin-bottom:1rem}
#athenes-seo ul{list-style:none;padding-left:24px;margin:16px 0}
#athenes-seo ul li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6;font-size:.95rem}
#athenes-seo ul li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-size:1.3em;font-weight:700;line-height:1.4}
#athenes-seo ul:last-child,#athenes-seo p:last-child{margin-bottom:0}
#athenes-seo .ath-note{margin-top:24px;background:#fff;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:1.1rem 1.3rem}
#athenes-seo .ath-note p{font-size:.9rem;color:var(--mut);margin-bottom:0}
#athenes-seo .ath-ctaimg{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#athenes-seo .ath-ctaimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
#athenes-seo .ath-ctaimg-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,45,74,.9) 0%,rgba(13,45,74,.6) 100%)}
#athenes-seo .ath-ctaimg-content{position:relative;z-index:2;text-align:center;padding:4rem 5vw;max-width:660px}
#athenes-seo .ath-ctaimg-eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
#athenes-seo .ath-ctaimg-eyebrow span{width:24px;height:1px;background:var(--gold);display:block}
#athenes-seo .ath-ctaimg-content h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:300;color:var(--white);margin-bottom:1.2rem}
#athenes-seo .ath-ctaimg-content h2 em{font-style:italic;color:var(--gold-lt)}
#athenes-seo .ath-ctaimg-content p{color:rgba(250,249,247,.72);font-size:.92rem;line-height:1.75;margin:0 auto 2.4rem;max-width:520px}
#athenes-seo .ath-ctaimg-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);color:var(--deep);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:.95rem 2.1rem;border-radius:2px;text-decoration:none;transition:background .3s,transform .2s}
#athenes-seo .ath-ctaimg-btn:hover{background:var(--gold-lt);transform:translateY(-2px)}
@media (max-width:1024px){#athenes-seo .ath-section,#athenes-seo .ath-programme{padding:3.5rem 7%}}
@media (max-width:700px){#athenes-seo .ath-section,#athenes-seo .ath-programme{padding:3rem 6vw}}
</style>

<div id="athenes-seo">

<!-- ======================== CE QUE PRÉSENTE LA CARTE (fond blanc) ======================== -->
<div class="ath-section">
  <div class="ath-inner">
    <div class="ath-eyebrow">Les 26 points</div>
    <h2>Ce que présente la carte interactive <em>d&rsquo;Athènes</em></h2>

    <p>La carte réunit 26 points concentrés dans le centre historique, de l&rsquo;Acropole au Lycabette, du Kérameikos au stade panathénaïque. Chaque point ouvre ensuite une fiche avec un résumé, une note pratique et une lecture audio. Les cinq familles ci-dessous correspondent aux filtres colorés de la carte, ce qui permet d&rsquo;organiser les journées par secteur : presque tout se fait à pied, les deux musées les plus éloignés restant à moins de 25 minutes de marche de Syntagma.</p>

    <h3>Les sites archéologiques d&rsquo;Athènes</h3>

    <p>Huit points racontent la ville antique, du rocher sacré aux quartiers des potiers.</p>

    <ul>
      <li><strong>L&rsquo;Acropole et le Parthénon</strong> : le symbole de la Grèce classique, élevé sous Périclès au Ve siècle av. J.-C.</li>
      <li><strong>Le théâtre de Dionysos</strong> : le berceau de la tragédie, sur le versant sud du rocher.</li>
      <li><strong>L&rsquo;odéon d&rsquo;Hérode Atticus</strong> : l&rsquo;odéon romain des concerts d&rsquo;été, au pied de l&rsquo;Acropole illuminée.</li>
      <li><strong>L&rsquo;agora antique et le temple d&rsquo;Héphaïstos</strong> : le cœur civique de la cité et l&rsquo;un des temples grecs les mieux conservés au monde.</li>
      <li><strong>L&rsquo;agora romaine et la Tour des Vents</strong> : le marché d&rsquo;époque romaine et son étonnante station météo antique.</li>
      <li><strong>La bibliothèque d&rsquo;Hadrien</strong> : le cadeau monumental de l&#8217;empereur à sa ville d&rsquo;adoption, en plein centre.</li>
      <li><strong>Le temple de Zeus Olympien</strong> : le colosse aux 104 colonnes, commencé au VIe siècle av. J.-C. et achevé sept siècles plus tard.</li>
      <li><strong>Le Kérameikos</strong> : le quartier des potiers et la grande nécropole antique, à l&rsquo;écart des foules.</li>
    </ul>

    <h3>Les musées d&rsquo;Athènes</h3>

    <p>Quatre points couvrent ensuite les collections majeures de la capitale.</p>

    <ul>
      <li><strong>Le musée de l&rsquo;Acropole</strong> : les sculptures originales du rocher, Caryatides et galerie du Parthénon face au temple.</li>
      <li><strong>Le musée national archéologique</strong> : la plus grande collection d&rsquo;antiquités grecques au monde, du masque d&rsquo;Agamemnon au mécanisme d&rsquo;Anticythère.</li>
      <li><strong>Le musée Benaki</strong> : la Grèce racontée dans sa continuité, de l&rsquo;âge du bronze au XIXe siècle.</li>
      <li><strong>Le musée d&rsquo;art cycladique</strong> : les idoles de marbre des Cyclades qui ont fasciné Picasso et Brancusi.</li>
    </ul>

    <h3>Les quartiers historiques</h3>

    <p>Cinq points suivent également la vie athénienne, des ruelles anciennes aux terrasses animées.</p>

    <ul>
      <li><strong>Plaka</strong> : le plus ancien quartier de la ville, sur les pentes de l&rsquo;Acropole.</li>
      <li><strong>Anafiotika</strong> : le hameau aux maisons blanches des Cyclades, bâti par les maçons de l&rsquo;île d&rsquo;Anafi.</li>
      <li><strong>Monastiraki</strong> : la place animée, son marché aux puces et ses toits-terrasses face au rocher.</li>
      <li><strong>Psyrri</strong> : le quartier du street art, des artisans et des soirées athéniennes.</li>
      <li><strong>Kolonaki</strong> : le quartier chic des galeries et des cafés, au pied du Lycabette.</li>
    </ul>

    <h3>Les points de vue sur la ville</h3>

    <p>Trois points cadrent les panoramas, de la vue rapprochée au tour d&rsquo;horizon complet.</p>

    <ul>
      <li><strong>La colline du Lycabette</strong> : le point culminant du centre à 277 mètres, avec funiculaire et chapelle blanche au sommet.</li>
      <li><strong>La colline de Philopappos</strong> : la plus belle vue frontale sur le Parthénon, gratuite et paisible.</li>
      <li><strong>L&rsquo;Aréopage</strong> : le rocher du tribunal antique, au plus près des Propylées, superbe au soleil couchant.</li>
    </ul>

    <h3>Les monuments et les places</h3>

    <p>Six points complètent enfin la visite, entre vie quotidienne et grandes heures de la Grèce moderne.</p>

    <ul>
      <li><strong>La place Syntagma et la relève de la garde</strong> : le Parlement et la chorégraphie des evzones, chaque heure devant le Soldat inconnu.</li>
      <li><strong>Le Jardin national</strong> : l&rsquo;ancien jardin royal, la meilleure pause de fraîcheur du centre.</li>
      <li><strong>Le stade panathénaïque</strong> : le stade de marbre des premiers Jeux olympiques modernes de 1896.</li>
      <li><strong>La cathédrale métropolitaine et la Petite Métropole</strong> : dix siècles d&rsquo;histoire religieuse côte à côte.</li>
      <li><strong>Le marché central Varvakios</strong> : le ventre d&rsquo;Athènes sous ses halles du XIXe siècle.</li>
      <li><strong>L&rsquo;Académie d&rsquo;Athènes</strong> : le plus beau bâtiment de la trilogie néoclassique, statues d&rsquo;Athéna et d&rsquo;Apollon en façade.</li>
    </ul>
  </div>
</div>

<!-- ======================== FAQ (fond crème) ======================== -->
<div class="ath-programme">
  <div class="ath-inner">
    <div class="ath-eyebrow">Préparer le séjour</div>
    <h2>Questions fréquentes <em>sur la visite d&rsquo;Athènes</em></h2>

    <h3>Combien de jours faut-il pour visiter Athènes ?</h3>

    <p>Deux jours pleins couvrent l&rsquo;essentiel : l&rsquo;Acropole et son musée le premier jour, les agoras, Plaka et Monastiraki le deuxième. Trois jours permettent ensuite d&rsquo;ajouter le musée national archéologique, le stade panathénaïque et un coucher de soleil au Lycabette ou à Philopappos. Avec quatre ou cinq jours, la ville devient une base pour rayonner vers le cap Sounion, Delphes ou une île du golfe Saronique. Les 26 points de la carte se répartissent bien sur trois journées à pied, par secteur : rocher et versant sud, centre antique et quartiers, puis Syntagma, musées et collines.</p>

    <h3>Faut-il réserver l&rsquo;Acropole à l&rsquo;avance ?</h3>

    <p>Oui, c&rsquo;est devenu indispensable. L&rsquo;entrée fonctionne par créneau horaire obligatoire depuis 2023, avec un plafond d&rsquo;environ 20 000 visiteurs par jour. Le billet adulte est affiché à 30 euros en 2026, la réservation se fait sur la billetterie officielle hhticket.gr, et les créneaux du matin partent vite de mai à septembre. Les moins de 25 ans ressortissants de l&rsquo;Union européenne entrent gratuitement sur présentation d&rsquo;une pièce d&rsquo;identité, ainsi que les moins de 18 ans venant d&rsquo;un autre pays. Le site ferme ponctuellement les après-midi de forte canicule : vérifiez les annonces la veille en plein été.</p>

    <h3>Quels sont les incontournables d&rsquo;Athènes ?</h3>

    <p>Cinq points concentrent l&rsquo;essentiel d&rsquo;un premier séjour.</p>

    <ul>
      <li><strong>L&rsquo;Acropole et le Parthénon</strong>, à l&rsquo;ouverture ou en fin de journée.</li>
      <li><strong>Le musée de l&rsquo;Acropole</strong>, juste avant ou juste après le rocher.</li>
      <li><strong>L&rsquo;agora antique</strong> et la vue sur le temple d&rsquo;Héphaïstos.</li>
      <li><strong>Plaka et Anafiotika</strong>, pour flâner entre les deux visites.</li>
      <li><strong>Un coucher de soleil en hauteur</strong>, au Lycabette ou à Philopappos.</li>
    </ul>

    <p>En ajoutant deux étapes, prenez la relève de la garde à Syntagma puis le musée national archéologique, la plus riche collection d&rsquo;antiquités grecques au monde.</p>

    <h3>Combien coûtent les entrées des sites et des musées ?</h3>

    <p>L&rsquo;Acropole est affichée à 30 euros en 2026. Les autres sites antiques, agora antique, agora romaine, bibliothèque d&rsquo;Hadrien, temple de Zeus et Kérameikos, se situent entre 6 et 15 euros l&rsquo;unité. Le musée de l&rsquo;Acropole applique un billet distinct du site, autour de 15 à 20 euros selon la saison, le musée national archéologique environ 20 euros en haute saison, le stade panathénaïque une douzaine d&rsquo;euros avec audioguide. Les moins de 25 ans de l&rsquo;Union européenne entrent gratuitement sur la plupart des sites publics. Ces tarifs relèvent du ministère grec de la Culture et évoluent d&rsquo;une saison à l&rsquo;autre : vérifiez-les avant le départ.</p>

    <h3>Existe-t-il un billet combiné pour les sites antiques ?</h3>

    <p>Oui. Le billet combiné regroupe l&rsquo;Acropole et six autres sites antiques du centre, dont l&rsquo;agora antique, l&rsquo;agora romaine, la bibliothèque d&rsquo;Hadrien, le temple de Zeus et le Kérameikos, pour 36 euros en plein tarif 2026, moitié prix en tarif réduit. Il est valable plusieurs jours consécutifs, ce qui permet d&rsquo;étaler les visites sans refaire la file des guichets. Il devient rentable dès trois sites visités en plus de l&rsquo;Acropole. Sa disponibilité et son contenu ont changé plusieurs fois ces dernières années : vérifiez les conditions du moment sur hhticket.gr avant d&rsquo;acheter.</p>

    <h3>Comment se déplacer dans Athènes ?</h3>

    <p>À pied pour l&rsquo;essentiel : les 26 points de la carte tiennent dans un rayon de 2,5 kilomètres, et la promenade piétonne Dionysiou Areopagitou relie le musée de l&rsquo;Acropole, le versant sud et Philopappos. Le métro complète très bien la marche, avec trois lignes et des stations utiles à Syntagma, Monastiraki, Acropoli et Victoria pour le musée national. Le ticket urbain coûte 1,20 euro et reste valable 90 minutes sur métro, bus et tramway. La voiture n&rsquo;apporte rien dans le centre : circulation dense, stationnement rare, secteurs piétonniers.</p>

    <h3>Quelle est la meilleure période pour visiter Athènes ?</h3>

    <p>Avril à juin puis septembre et octobre réunissent une lumière superbe, des températures agréables sur les sites en plein soleil et une affluence supportable. Juillet et août cumulent chaleur et foule, avec des pointes au-dessus de 35 degrés sur le rocher de l&rsquo;Acropole et des fermetures ponctuelles l&rsquo;après-midi en cas de canicule : visez alors l&rsquo;ouverture à 8 heures et les musées climatisés aux heures chaudes. L&rsquo;hiver reste doux et très praticable, avec des horaires réduits sur certains sites, des tarifs plus bas et une ville rendue aux Athéniens.</p>

    <h3>Comment rejoindre le centre depuis l&rsquo;aéroport ?</h3>

    <p>Trois options couvrent tous les budgets. Le métro ligne 3 relie l&rsquo;aéroport à Syntagma et Monastiraki en 40 minutes environ, avec un billet spécial aéroport plus cher que le ticket urbain. Le bus X95 rejoint également Syntagma 24 heures sur 24, plus lent mais plus économique, pratique pour les vols de nuit. Le taxi applique enfin un forfait vers le centre, autour de 40 euros en journée, majoré la nuit, pour 35 kilomètres et 45 minutes de trajet selon la circulation. À l&rsquo;arrivée, presque tous les hébergements du centre restent accessibles à pied depuis Syntagma ou Monastiraki.</p>

    <h3>La carte interactive d&rsquo;Athènes fonctionne-t-elle sur place ?</h3>

    <p>Oui, depuis un téléphone, avec deux conditions. Le fond de carte se télécharge à l&rsquo;affichage, une connexion mobile reste donc nécessaire pour le voir apparaître. Le guidage GPS demande ensuite l&rsquo;autorisation de localisation du navigateur ; en ville, la précision varie de quelques mètres à quelques dizaines de mètres entre les immeubles. Une fois la page ouverte et la carte chargée, les fiches et l&rsquo;audio restent consultables même si le réseau faiblit. Enfin, les points marqués comme vus sont enregistrés dans le navigateur et se retrouvent d&rsquo;une journée à l&rsquo;autre du séjour.</p>

    <div class="ath-note">
      <p><strong>À prévoir avant de partir explorer la ville :</strong> les marbres de l&rsquo;Acropole et de l&rsquo;Aréopage sont polis et très glissants, portez des chaussures qui accrochent. Emportez de l&rsquo;eau et un chapeau l&rsquo;été, l&rsquo;ombre manque sur les sites antiques. Dans la foule de Monastiraki et du métro, gardez les objets de valeur devant vous. Enfin, chargez le téléphone avant la journée, le guidage GPS et la lecture audio consomment de la batterie entre les étapes.</p>
    </div>
  </div>
</div>

<!-- ======================== CTA FINAL : Athènes (image immersive) ======================== -->
<div class="ath-ctaimg">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/decouvrir-athenes-grece-2-scaled.jpg" alt="Athènes, capitale de la Grèce">
  <div class="ath-ctaimg-ov"></div>
  <div class="ath-ctaimg-content">
    <div class="ath-ctaimg-eyebrow"><span></span>Continuer la visite<span></span></div>
    <h2>Découvrir Athènes <em>au-delà de la carte</em></h2>
    <p>Les sites antiques, les musées, les quartiers où loger et manger, les excursions vers le cap Sounion et Delphes, les conseils pour organiser deux à cinq jours sur place : retrouvez tout le guide pour préparer le séjour.</p>
    <a class="ath-ctaimg-btn" href="https://visiter-santorini.fr/decouvrir-athenes/">Découvrir Athènes</a>
  </div>
</div>

</div>
<!-- Fin #athenes-seo -->
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-athenes%2F&amp;linkname=Carte%20interactive%20d%E2%80%99Ath%C3%A8nes" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-athenes%2F&amp;linkname=Carte%20interactive%20d%E2%80%99Ath%C3%A8nes" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-athenes%2F&amp;linkname=Carte%20interactive%20d%E2%80%99Ath%C3%A8nes" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-athenes%2F&#038;title=Carte%20interactive%20d%E2%80%99Ath%C3%A8nes" data-a2a-url="https://visiter-santorini.fr/carte-interactive-athenes/" data-a2a-title="Carte interactive d’Athènes"></a></p><p>L’article <a href="https://visiter-santorini.fr/carte-interactive-athenes/">Carte interactive d&rsquo;Athènes</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Carte interactive de la Crète</title>
		<link>https://visiter-santorini.fr/carte-interactive-crete/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Tue, 28 Jul 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Carte Interactive]]></category>
		<category><![CDATA[La Crète]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11513</guid>

					<description><![CDATA[<p>Explorer la Crète Carte interactivede la Crète Villes vénitiennes, palais minoens, plages parmi les plus connues de Grèce, gorges et monastères : 24 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position sur l&#8217;île. 24 Étapes guidées 5 Catégories de lieux 4 000 Ans d&#8217;histoire minoenne Votre visite&#8230;&#160;<a href="https://visiter-santorini.fr/carte-interactive-crete/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Carte interactive de la Crète</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/carte-interactive-crete/">Carte interactive de la Crète</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ============================================================
     VISITE GUIDEE INTERACTIVE DE LA CRETE, visiter-santorini.fr (v1)
     A coller dans un bloc "HTML personnalise" (Gutenberg) sur une
     page dediee. Ce bloc ne contient AUCUN script : le moteur est
     le snippet WP Code "visite-guidee-crete" (JavaScript Snippet,
     Site Wide Footer, Frontend only). Le snippet ne s'active que
     sur la page contenant #vgc : il peut rester actif en meme
     temps que les snippets Santorin (#vgs) et Athenes (#vga).
     Tout est scope sous #vgc : aucune regle CSS globale.

     IMAGE DU HERO : remplacez A-REMPLACER (2 occurrences : le
     preload et la balise img) par l'URL d'une photo de Crete de
     votre mediatheque. Ne publiez pas la page avant.

     FONCTIONNEMENT
     - 24 lieux en 5 categories : villes et villages, sites
       archeologiques, plages, sites naturels, monasteres et musees.
     - Clic sur un point de la carte ou une carte de la liste ->
       fiche complete (resume, note pratique, ecoute audio).
     - Bouton "Activer le guidage GPS" : position en direct sur la
       carte, tri des lieux par distance, bandeau "Prochaines etapes"
       avec les 3 lieux non vus les plus proches. A moins de 120 m
       d'un lieu, sa fiche s'ouvre toute seule.
     - Audio : lecture vocale du texte par le navigateur (voix
       francaise du telephone). Pour remplacer par VOS enregistrements,
       hebergez un MP3 dans la mediatheque et collez son URL dans le
       champ audio:"" du lieu concerne, dans le snippet.
     - URLS D'ARTICLES : le champ url:"" de chaque lieu est vide.
       Collez uniquement des URL publiees du site ; une URL vide
       masque le bouton "Lire l'article". Ne rien inventer.
     - PHOTOS : champ photo:"" vide par defaut. Collez l'URL d'une
       image de la mediatheque pour l'afficher en haut de la fiche.
     - Le guidage GPS demande l'autorisation de localisation et
       fonctionne uniquement en HTTPS (le site l'est).
     - Attributions OpenStreetMap / CARTO / Esri obligatoires :
       incluses, ne pas les retirer.
     ============================================================ -->

<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/lagon-de-balos-crete-2.jpg" fetchpriority="high">

<style>
.gsan-vgc-hero-wrap {
  --c-deep:#0d2d4a; --c-gold:#c9a84c; --c-gold-lt:#e8d5a0; --c-white:#faf9f7;
  font-family:'Jost',sans-serif; line-height:1.7;
}
.gsan-vgc-hero-wrap *, .gsan-vgc-hero-wrap *::before, .gsan-vgc-hero-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.gsan-vgc-hero-wrap .gsan-hero { position:relative; height:66vh; min-height:440px; overflow:hidden; display:flex; align-items:flex-end; }
.gsan-vgc-hero-wrap .gsan-hero img {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 40%;
  transform:scale(1.05); animation:gsanVgcZoom 14s ease-out forwards;
}
@keyframes gsanVgcZoom { to { transform:scale(1); } }
.gsan-vgc-hero-wrap .gsan-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,45,74,.92) 0%, rgba(13,45,74,.3) 55%, transparent 100%); }
.gsan-vgc-hero-wrap .gsan-hero-content { position:relative; z-index:2; padding:3.2rem 5vw 3.8rem; max-width:820px; }
.gsan-vgc-hero-wrap .gsan-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold); font-weight:500; margin-bottom:.8rem; }
.gsan-vgc-hero-wrap .gsan-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--c-gold); }
.gsan-vgc-hero-wrap .gsan-hero-content h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:300; color:var(--c-white); line-height:1.05; margin-bottom:1rem; }
.gsan-vgc-hero-wrap .gsan-hero-content h1 em { font-style:italic; color:var(--c-gold-lt); }
.gsan-vgc-hero-wrap .gsan-hero-content p { color:rgba(250,249,247,.78); font-size:.95rem; max-width:580px; margin-bottom:1.8rem; }
.gsan-vgc-hero-wrap .gsan-hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.gsan-vgc-hero-wrap .gsan-hero-stat .num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--c-gold-lt); line-height:1; }
.gsan-vgc-hero-wrap .gsan-hero-stat .label { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,249,247,.55); margin-top:.2rem; }

/* ============ Visite guidee Crete ============ */
#vgc {
  --deep:#0d2d4a; --deep-2:#123a5e; --gold:#c9a84c; --gold-lt:#e8d5a0;
  --white:#faf9f7; --ink:#1c2733; --mut:#5b6b7a; --line:rgba(13,45,74,.12);
  --c-ville:#c9a84c; --c-site:#b5543b; --c-plage:#3d8bd4; --c-nature:#4f9d6b; --c-monastere:#8a6fb8;
  font-family:'Jost',sans-serif; color:var(--ink); background:var(--white);
  padding:2.2rem 4vw 3rem;
}
#vgc *, #vgc *::before, #vgc *::after { box-sizing:border-box; margin:0; padding:0; }
#vgc .vgc-intro { max-width:820px; margin:0 auto 1.6rem; text-align:center; }
#vgc .vgc-intro h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--deep); margin-bottom:.55rem; }
#vgc .vgc-intro p { font-size:.92rem; color:var(--mut); }

/* Barre de guidage GPS */
#vgc .vgc-gpsbar {
  max-width:1180px; margin:0 auto 1rem; display:flex; flex-wrap:wrap; gap:.7rem;
  align-items:center; justify-content:space-between;
  background:var(--deep); border-radius:14px; padding:.75rem 1rem;
}
#vgc .vgc-gpsbar .left { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
#vgc #vgc-gps {
  border:1px solid var(--gold); background:transparent; color:var(--gold-lt);
  font-family:inherit; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; transition:background .2s,color .2s;
}
#vgc #vgc-gps:hover { background:var(--gold); color:var(--deep); }
#vgc #vgc-gps.on { background:var(--gold); color:var(--deep); }
#vgc #vgc-gps-status { font-size:.8rem; color:rgba(250,249,247,.75); }
#vgc #vgc-progress { font-size:.8rem; color:var(--gold-lt); letter-spacing:.06em; white-space:nowrap; }

/* Bandeau prochaines etapes */
#vgc #vgc-next { max-width:1180px; margin:0 auto 1rem; display:none; flex-wrap:wrap; gap:.6rem; }
#vgc #vgc-next.on { display:flex; }
#vgc .vgc-next-card {
  flex:1 1 220px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:12px; padding:.7rem .9rem; cursor:pointer; transition:box-shadow .2s;
}
#vgc .vgc-next-card:hover { box-shadow:0 6px 18px rgba(13,45,74,.12); }
#vgc .vgc-next-card .tag { font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:.15rem; }
#vgc .vgc-next-card .nom { font-size:.9rem; font-weight:500; color:var(--deep); }
#vgc .vgc-next-card .dist { font-size:.76rem; color:var(--mut); margin-top:.1rem; }

/* Layout panneau + carte */
#vgc .vgc-layout { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:380px 1fr; gap:1rem; }
#vgc .vgc-panel {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  height:640px; display:flex; flex-direction:column; overflow:hidden;
}
#vgc .vgc-tools { padding:.9rem .9rem .6rem; border-bottom:1px solid var(--line); }
#vgc #vgc-search {
  width:100%; font-family:inherit; font-size:.88rem; color:var(--ink);
  border:1px solid var(--line); border-radius:999px; padding:.55rem 1rem; outline:none;
  background:var(--white);
}
#vgc #vgc-search:focus { border-color:var(--gold); }
#vgc .vgc-filtres { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
#vgc .vgc-filtre {
  font-family:inherit; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; color:var(--mut);
  padding:.35rem .75rem; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; transition:all .2s;
}
#vgc .vgc-filtre .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
#vgc .vgc-filtre:hover { border-color:var(--gold); color:var(--deep); }
#vgc .vgc-filtre.actif { background:var(--deep); border-color:var(--deep); color:var(--white); }

/* Liste */
#vgc #vgc-liste { flex:1; overflow-y:auto; padding:.6rem; }
#vgc .vgc-item {
  display:flex; gap:.7rem; align-items:flex-start; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:12px;
  padding:.65rem .7rem; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s;
}
#vgc .vgc-item:hover { background:var(--white); border-color:var(--line); }
#vgc .vgc-item.vu .nom::after { content:' ✓'; color:var(--gold); }
#vgc .vgc-item .pastille { width:10px; height:10px; border-radius:50%; margin-top:.4rem; flex:none; }
#vgc .vgc-item .nom { font-size:.95rem; font-weight:500; color:var(--deep); }
#vgc .vgc-item .sous { font-size:.78rem; color:var(--mut); margin-top:.1rem; }
#vgc .vgc-item .km { font-size:.74rem; color:var(--gold); margin-top:.1rem; }
#vgc .vgc-vide { padding:1rem; font-size:.85rem; color:var(--mut); text-align:center; }

/* Fiche */
#vgc #vgc-fiche { display:none; flex:1; overflow-y:auto; flex-direction:column; }
#vgc #vgc-fiche.on { display:flex; }
#vgc #vgc-retour {
  align-self:flex-start; margin:.8rem .9rem 0; font-family:inherit; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mut);
  background:transparent; border:none; cursor:pointer;
}
#vgc #vgc-retour:hover { color:var(--deep); }
#vgc .vgc-fiche-photo { width:100%; height:170px; object-fit:cover; margin-top:.7rem; }
#vgc .vgc-fiche-body { padding:.9rem 1.1rem 1.2rem; }
#vgc .vgc-fiche-cat { font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:.3rem; }
#vgc #vgc-fiche-nom { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.5rem; color:var(--deep); line-height:1.15; }
#vgc #vgc-fiche-dist { font-size:.78rem; color:var(--gold); margin-top:.25rem; }
#vgc #vgc-fiche-texte { font-size:.9rem; color:var(--ink); margin-top:.7rem; line-height:1.75; }
#vgc #vgc-fiche-note { font-size:.82rem; color:var(--mut); margin-top:.6rem; padding:.6rem .8rem; background:var(--white); border-left:3px solid var(--gold); border-radius:0 8px 8px 0; }
#vgc #vgc-fiche-note:empty { display:none; }
#vgc #vgc-audio-player { width:100%; margin-top:.8rem; display:none; }
#vgc #vgc-audio-player.on { display:block; }
#vgc .vgc-fiche-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
#vgc .vgc-btn {
  font-family:inherit; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1rem; border-radius:999px; cursor:pointer; text-decoration:none;
  border:1px solid var(--deep); background:var(--deep); color:var(--white); transition:opacity .2s;
}
#vgc .vgc-btn:hover { opacity:.88; }
#vgc .vgc-btn.gold { background:var(--gold); border-color:var(--gold); color:var(--deep); }
#vgc .vgc-btn.ghost { background:transparent; color:var(--deep); }
#vgc .vgc-btn.ghost.vu { background:var(--gold); border-color:var(--gold); color:var(--deep); }
#vgc #vgc-cta { display:none; }
#vgc #vgc-cta.on { display:inline-block; }

/* Carte */
#vgc .vgc-carte-wrap { position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); height:640px; background:var(--deep-2); }
#vgc #vgc-carte { position:absolute; inset:0; z-index:1; }
#vgc #vgc-carte-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--white); font-size:.9rem; z-index:0; }
#vgc .vgc-basemap { position:absolute; top:.7rem; right:.7rem; z-index:500; display:flex; gap:.3rem; background:rgba(13,45,74,.85); border-radius:999px; padding:.25rem; }
#vgc .vgc-basemap button {
  font-family:inherit; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:none; background:transparent; color:rgba(250,249,247,.75);
  padding:.35rem .8rem; border-radius:999px; cursor:pointer;
}
#vgc .vgc-basemap button.on { background:var(--gold); color:var(--deep); }

/* Marqueurs et position */
#vgc .vgc-marker { width:16px; height:16px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4); }
#vgc .vgc-marker.vu { outline:2px solid var(--gold); outline-offset:1px; }
#vgc .vgc-user-dot { width:16px; height:16px; border-radius:50%; background:#2f7fe0; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4); animation:vgcPulse 2s infinite; }
@keyframes vgcPulse { 0%{box-shadow:0 0 0 0 rgba(47,127,224,.5);} 70%{box-shadow:0 0 0 16px rgba(47,127,224,0);} 100%{box-shadow:0 0 0 0 rgba(47,127,224,0);} }
@media (prefers-reduced-motion:reduce) { #vgc .vgc-user-dot { animation:none; } .gsan-vgc-hero-wrap .gsan-hero img { animation:none; transform:none; } }

#vgc .vgc-attrib { max-width:1180px; margin:.5rem auto 0; font-size:.68rem; color:var(--mut); text-align:right; }
#vgc .vgc-attrib a { color:var(--mut); }

@media (max-width:900px) {
  #vgc .vgc-layout { grid-template-columns:1fr; }
  #vgc .vgc-carte-wrap { height:56vh; min-height:380px; order:-1; }
  #vgc .vgc-panel { height:auto; max-height:70vh; }
  #vgc .vgc-gpsbar { position:sticky; top:0; z-index:600; }
}
</style>

<div class="gsan-vgc-hero-wrap">
  <div class="gsan-hero">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/lagon-de-balos-crete-2.jpg" alt="Carte interactive de la Crète, entre mer et montagnes" loading="eager" fetchpriority="high">
    <div class="gsan-hero-overlay"></div>
    <div class="gsan-hero-content">
      <div class="gsan-eyebrow"><span>Explorer la Crète</span></div>
      <h1>Carte interactive<br>de la <em>Crète</em></h1>
      <p>Villes vénitiennes, palais minoens, plages parmi les plus connues de Grèce, gorges et monastères : 24 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position sur l&rsquo;île.</p>
      <div class="gsan-hero-stats">
        <div class="gsan-hero-stat"><div class="num">24</div><div class="label">Étapes guidées</div></div>
        <div class="gsan-hero-stat"><div class="num">5</div><div class="label">Catégories de lieux</div></div>
        <div class="gsan-hero-stat"><div class="num">4 000</div><div class="label">Ans d&rsquo;histoire minoenne</div></div>
      </div>
    </div>
  </div>
</div>

<div id="vgc">
  <div class="vgc-intro">
    <h2>Votre visite guidée de la Crète, étape par étape</h2>
    <p>Touchez un point sur la carte ou un lieu dans la liste pour ouvrir sa fiche. Sur place, activez le guidage GPS : la carte affiche votre position et vous propose les étapes les plus proches.</p>
  </div>

  <div class="vgc-gpsbar">
    <div class="left">
      <button id="vgc-gps" type="button">Activer le guidage GPS</button>
      <span id="vgc-gps-status">Guidage désactivé</span>
    </div>
    <span id="vgc-progress">0 / 24 lieux vus</span>
  </div>

  <div id="vgc-next" aria-label="Prochaines étapes proposées"></div>

  <div class="vgc-layout">
    <aside class="vgc-panel">
      <div class="vgc-tools">
        <input id="vgc-search" type="search" placeholder="Rechercher un lieu (Knossos, Balos, La Canée...)" aria-label="Rechercher un lieu">
        <div class="vgc-filtres" id="vgc-filtres"></div>
      </div>
      <div id="vgc-liste" aria-live="polite"></div>
      <div id="vgc-fiche">
        <button id="vgc-retour" type="button">← Retour à la liste</button>
        <img id="vgc-fiche-photo" class="vgc-fiche-photo" alt="" style="display:none">
        <div class="vgc-fiche-body">
          <div class="vgc-fiche-cat" id="vgc-fiche-cat"></div>
          <h3 id="vgc-fiche-nom"></h3>
          <div id="vgc-fiche-dist"></div>
          <p id="vgc-fiche-texte"></p>
          <p id="vgc-fiche-note"></p>
          <audio id="vgc-audio-player" controls="" preload="none"></audio>
          <div class="vgc-fiche-actions">
            <button id="vgc-ecouter" class="vgc-btn gold" type="button">Écouter la fiche</button>
            <button id="vgc-vu" class="vgc-btn ghost" type="button">Marquer comme vu</button>
            <a id="vgc-cta" class="vgc-btn" href="#">Lire l&rsquo;article</a>
          </div>
        </div>
      </div>
    </aside>

    <div class="vgc-carte-wrap">
      <div id="vgc-carte-fallback">Chargement de la carte de la Crète&#8230;</div>
      <div id="vgc-carte" role="application" aria-label="Carte interactive de la Crète"></div>
      <div class="vgc-basemap">
        <button id="vgc-sat" type="button" class="on">Satellite</button>
        <button id="vgc-plan" type="button">Plan</button>
      </div>
    </div>
  </div>

  <p class="vgc-attrib">Fonds de carte : © <a href="https://www.openstreetmap.org/copyright" rel="noopener" target="_blank">OpenStreetMap</a>, © CARTO, imagerie © Esri</p>
</div>



<!--
==========================================================
CONTENU SEO SOUS LA CARTE INTERACTIVE DE LA CRETE
Site : visiter-santorini.fr
==========================================================
A coller dans un SECOND bloc "HTML personnalise" (Gutenberg),
juste sous le bloc de la carte interactive, sur la meme page.

Mot-cle principal : carte interactive de la Crete

AUTONOME : tout est scope sous #crete-seo et le CSS est inclus dans
le bloc. Palette egeenne identique a celle de la carte.

LARGEUR : mise en page 10/80/10 (padding lateral de 10% sur les deux
sections, 7% sous 1024px, 6vw sur mobile). Pour elargir ou resserrer,
modifier la seule valeur 10% dans .crete-section et .crete-programme.

IMAGE DU CTA : remplacez A-REMPLACER par l'URL d'une photo de Crete
de votre mediatheque avant publication.

Donnees verifiees en juillet 2026 (Samaria 5 euros, ouvert 1er mai -
mi/fin octobre 6h-16h ; Knossos 20 euros, Spinalonga 20 euros + bateau,
musee archeologique d'Heraklion 20 euros ; grotte de Psychro rouverte
mai 2026). A revoir chaque debut de saison.
==========================================================
-->

<style>
#crete-seo{--deep:#0d2d4a;--deep-2:#123a5e;--gold:#c9a84c;--gold-lt:#e8d5a0;--white:#faf9f7;--ink:#1c2733;--mut:#5b6b7a;--line:rgba(13,45,74,.12);font-family:'Jost',sans-serif;color:var(--ink);line-height:1.75}
#crete-seo *,#crete-seo *::before,#crete-seo *::after{box-sizing:border-box;margin:0;padding:0}
#crete-seo .crete-section{background:#fff;padding:4rem 10%}
#crete-seo .crete-programme{background:var(--white);padding:4rem 10%}
#crete-seo .crete-inner{width:100%;margin:0 auto}
#crete-seo .crete-eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.9rem}
#crete-seo .crete-eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
#crete-seo h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem);color:var(--deep);line-height:1.15}
#crete-seo h2 em{font-style:italic;color:var(--gold)}
#crete-seo h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.5rem);color:var(--deep);margin-top:3.4rem;margin-bottom:.55rem;line-height:1.3}
#crete-seo h3+p,#crete-seo h3+ul{margin-top:0}
#crete-seo h2+p{margin-top:1.2rem}
#crete-seo p{font-size:.95rem;margin-bottom:1rem}
#crete-seo ul{list-style:none;padding-left:24px;margin:16px 0}
#crete-seo ul li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6;font-size:.95rem}
#crete-seo ul li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-size:1.3em;font-weight:700;line-height:1.4}
#crete-seo ul:last-child,#crete-seo p:last-child{margin-bottom:0}
#crete-seo .crete-note{margin-top:24px;background:#fff;border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:1.1rem 1.3rem}
#crete-seo .crete-note p{font-size:.9rem;color:var(--mut);margin-bottom:0}
#crete-seo .crete-ctaimg{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#crete-seo .crete-ctaimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
#crete-seo .crete-ctaimg-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,45,74,.9) 0%,rgba(13,45,74,.6) 100%)}
#crete-seo .crete-ctaimg-content{position:relative;z-index:2;text-align:center;padding:4rem 5vw;max-width:660px}
#crete-seo .crete-ctaimg-eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
#crete-seo .crete-ctaimg-eyebrow span{width:24px;height:1px;background:var(--gold);display:block}
#crete-seo .crete-ctaimg-content h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:300;color:var(--white);margin-bottom:1.2rem}
#crete-seo .crete-ctaimg-content h2 em{font-style:italic;color:var(--gold-lt)}
#crete-seo .crete-ctaimg-content p{color:rgba(250,249,247,.72);font-size:.92rem;line-height:1.75;margin:0 auto 2.4rem;max-width:520px}
#crete-seo .crete-ctaimg-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--gold);color:var(--deep);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:.95rem 2.1rem;border-radius:2px;text-decoration:none;transition:background .3s,transform .2s}
#crete-seo .crete-ctaimg-btn:hover{background:var(--gold-lt);transform:translateY(-2px)}
@media (max-width:1024px){#crete-seo .crete-section,#crete-seo .crete-programme{padding:3.5rem 7%}}
@media (max-width:700px){#crete-seo .crete-section,#crete-seo .crete-programme{padding:3rem 6vw}}
</style>

<div id="crete-seo">

<!-- ======================== CE QUE PRÉSENTE LA CARTE (fond blanc) ======================== -->
<div class="crete-section">
  <div class="crete-inner">
    <div class="crete-eyebrow">Les 24 points</div>
    <h2>Ce que présente la carte interactive <em>de la Crète</em></h2>

    <p>La carte réunit 24 points répartis sur toute l&rsquo;île, des villes vénitiennes de la côte nord aux palais minoens de la plaine, des plages de l&rsquo;ouest aux monastères de l&rsquo;est. Chaque point ouvre ensuite une fiche avec un résumé, une note pratique et une lecture audio. Les cinq familles ci-dessous correspondent aux filtres colorés de la carte, ce qui permet d&rsquo;organiser le séjour selon les régions traversées et le temps disponible.</p>

    <h3>Les villes et villages de Crète</h3>

    <p>Six points couvrent les localités de l&rsquo;île, des ports vénitiens de la côte nord aux villages isolés du sud.</p>

    <ul>
      <li><strong>La Canée</strong> : la ville la plus photographiée de Crète, autour de son vieux port vénitien et de son phare.</li>
      <li><strong>Réthymnon</strong> : vieille ville vénitienne et ottomane bien conservée, dominée par sa forteresse, la Fortezza.</li>
      <li><strong>Héraklion</strong> : capitale et principal port d&rsquo;arrivée, base des deux visites majeures que sont Knossos et le musée archéologique.</li>
      <li><strong>Agios Nikolaos</strong> : station de la côte est autour du lac Voulismeni, meilleure base pour Spinalonga et le Lassithi.</li>
      <li><strong>Loutro</strong> : village de la côte sud accessible uniquement à pied ou en bateau, sans aucune route.</li>
      <li><strong>Matala</strong> : ses grottes creusées dans la falaise et son passé de village hippie des années 1960.</li>
    </ul>

    <h3>Les sites archéologiques</h3>

    <p>Cinq points racontent ensuite les grandes civilisations de l&rsquo;île, de la puissance minoenne à la Crète romaine.</p>

    <ul>
      <li><strong>Le palais de Knossos</strong> : le plus grand palais minoen, cœur de la première civilisation d&rsquo;Europe, à 15 minutes d&rsquo;Héraklion.</li>
      <li><strong>Le palais de Phaistos</strong> : deuxième palais minoen par la taille, sans reconstruction moderne, face à la plaine de la Messara.</li>
      <li><strong>Gortyne</strong> : capitale de la Crète romaine, qui conserve le plus long texte de loi grec ancien, le code de Gortyne.</li>
      <li><strong>Le palais de Malia</strong> : troisième grand palais minoen, en bord de mer, où fut trouvé le célèbre pendentif aux abeilles.</li>
      <li><strong>Spinalonga</strong> : île-forteresse vénitienne devenue léproserie jusqu&rsquo;en 1957, rendue célèbre par le roman de Victoria Hislop.</li>
    </ul>

    <h3>Les plages de Crète</h3>

    <p>Six points suivent également le littoral, des lagons turquoise de l&rsquo;ouest aux criques encaissées de la côte nord.</p>

    <ul>
      <li><strong>Elafonissi</strong> : lagon peu profond et sable rosé à la pointe sud-ouest, la plage la plus célèbre de l&rsquo;île.</li>
      <li><strong>Balos</strong> : lagon entre la presqu&rsquo;île de Gramvoussa et le cap Tigani, accessible en bateau ou par une piste éprouvante.</li>
      <li><strong>Falassarna</strong> : longue plage de sable de l&rsquo;ouest, orientée plein couchant, réputée pour ses couchers de soleil.</li>
      <li><strong>Vaï</strong> : la plage de la plus grande palmeraie naturelle d&rsquo;Europe, à l&rsquo;extrême est de l&rsquo;île.</li>
      <li><strong>Préveli</strong> : embouchure d&rsquo;une rivière bordée de palmiers, sur la côte sud, au pied de son monastère.</li>
      <li><strong>Seitan Limania</strong> : crique en fjord aux eaux turquoise, encaissée dans les falaises de la presqu&rsquo;île d&rsquo;Akrotiri.</li>
    </ul>

    <h3>Les sites naturels et les gorges</h3>

    <p>Quatre points cadrent enfin les paysages de montagne et les curiosités géologiques de l&rsquo;intérieur.</p>

    <ul>
      <li><strong>Les gorges de Samaria</strong> : 16 kilomètres de descente depuis le plateau d&rsquo;Omalos jusqu&rsquo;à la mer de Libye, l&rsquo;une des plus longues gorges d&rsquo;Europe.</li>
      <li><strong>Les gorges d&rsquo;Imbros</strong> : version accessible de Samaria, 8 kilomètres de descente douce en 2 à 3 heures.</li>
      <li><strong>Le lac de Kournas</strong> : le seul lac naturel d&rsquo;eau douce de Crète, avec ses tortues et ses pédalos.</li>
      <li><strong>La grotte de Psychro</strong> : la grotte de la naissance de Zeus dans la mythologie, sur le plateau du Lassithi, rouverte en 2026.</li>
    </ul>

    <h3>Les monastères et les musées</h3>

    <p>Trois points complètent la visite, entre mémoire crétoise et trésors minoens.</p>

    <ul>
      <li><strong>Le musée archéologique d&rsquo;Héraklion</strong> : la plus riche collection minoenne au monde, avec les fresques de Knossos et le disque de Phaistos.</li>
      <li><strong>Le monastère d&rsquo;Arkadi</strong> : symbole de la lutte pour la liberté crétoise après le sacrifice de 1866, au-dessus de Réthymnon.</li>
      <li><strong>Le monastère de Toplou</strong> : monastère fortifié de l&rsquo;est, connu pour son icône majeure et ses produits biologiques.</li>
    </ul>
  </div>
</div>

<!-- ======================== FAQ (fond crème) ======================== -->
<div class="crete-programme">
  <div class="crete-inner">
    <div class="crete-eyebrow">Préparer le séjour</div>
    <h2>Questions fréquentes <em>sur la visite de la Crète</em></h2>

    <h3>Combien de jours faut-il pour visiter la Crète ?</h3>

    <p>Une semaine couvre l&rsquo;essentiel d&rsquo;une seule région. Vous consacrez alors trois jours à l&rsquo;ouest autour de La Canée, puis quelques jours au centre autour d&rsquo;Héraklion et de Knossos. Dix jours permettent ensuite de relier l&rsquo;ouest et l&rsquo;est, en ajoutant Réthymnon, le Lassithi et la côte sud. La Crète est la plus grande île de Grèce, avec plus de 250 kilomètres d&rsquo;est en ouest : vouloir tout voir en une semaine impose trop de route. Les 24 points de la carte se répartissent mieux sur deux séjours ou sur un long circuit de deux semaines.</p>

    <h3>Faut-il louer une voiture en Crète ?</h3>

    <p>Oui, dans presque tous les cas. Le réseau de bus KTEL relie bien les villes de la côte nord, mais dessert mal les plages de l&rsquo;ouest, les palais du sud et les monastères de l&rsquo;est. La location reste alors la seule façon d&rsquo;atteindre Elafonissi, Phaistos ou Toplou sans excursion organisée. Comptez également 27 à 60 euros par jour en moyenne selon la saison et le modèle, avec deux aéroports de prise en charge, Héraklion au centre et La Canée à l&rsquo;ouest. La conduite se fait ensuite à droite, sur des routes de montagne souvent étroites et lentes : prévoyez large sur les temps de trajet.</p>

    <h3>Quels sont les incontournables de la Crète ?</h3>

    <p>Cinq points concentrent l&rsquo;essentiel d&rsquo;un premier séjour.</p>

    <ul>
      <li><strong>Le palais de Knossos</strong>, cœur de la civilisation minoenne, près d&rsquo;Héraklion.</li>
      <li><strong>Le musée archéologique d&rsquo;Héraklion</strong>, qui conserve les fresques et les objets des palais.</li>
      <li><strong>La Canée</strong> et son vieux port vénitien, au coucher du soleil.</li>
      <li><strong>Une plage de l&rsquo;ouest</strong>, Elafonissi ou Balos selon l&rsquo;accès choisi.</li>
      <li><strong>Les gorges de Samaria</strong>, pour la grande randonnée de l&rsquo;île, de mai à octobre.</li>
    </ul>

    <p>En ajoutant deux étapes, prenez Spinalonga et son histoire de léproserie puis Réthymnon et sa vieille ville vénitienne.</p>

    <h3>Combien coûtent les entrées des sites et des musées ?</h3>

    <p>Le palais de Knossos est affiché à 20 euros en 2026, le musée archéologique d&rsquo;Héraklion à 20 euros, avec un billet combiné pour les deux. Spinalonga revient à 20 euros, plus le bateau d&rsquo;accès depuis Plaka ou Elounda. Phaistos et les autres sites minoens se situent entre 8 et 15 euros. Les moins de 25 ans ressortissants de l&rsquo;Union européenne entrent gratuitement sur présentation d&rsquo;une pièce d&rsquo;identité, ainsi que les moins de 18 ans venant d&rsquo;un autre pays. Ces tarifs relèvent du ministère grec de la Culture et évoluent d&rsquo;une saison à l&rsquo;autre : vérifiez-les avant le départ.</p>

    <h3>Quand peut-on faire les gorges de Samaria ?</h3>

    <p>Le parc national ouvre du 1er mai à la mi ou la fin octobre selon la météo, tous les jours de 6 heures à 16 heures, pour 5 euros par personne. La descente compte 16 kilomètres depuis Xyloskalo, à 1 230 mètres d&rsquo;altitude, jusqu&rsquo;à Agia Roumeli au bord de la mer de Libye, soit 5 à 7 heures de marche. Aucune route ne dessert l&rsquo;arrivée : un bateau relie ensuite Agia Roumeli à Chora Sfakion ou Sougia, où bus et voitures attendent. Le parc ferme ponctuellement par forte chaleur, pluie ou risque d&rsquo;incendie. Vérifiez donc l&rsquo;ouverture la veille sur le site officiel. Pour une version plus douce, les gorges d&rsquo;Imbros offrent 8 kilomètres sans difficulté technique.</p>

    <h3>Faut-il réserver Knossos et les grands sites à l&rsquo;avance ?</h3>

    <p>Oui pour Knossos, le site le plus visité de l&rsquo;île. Les billets coupe-file en ligne évitent la file au guichet, et les groupes de croisiéristes saturent le site en milieu de matinée. Venir à l&rsquo;ouverture ou en fin de journée reste ainsi la meilleure parade, à Knossos comme au musée d&rsquo;Héraklion. Spinalonga demande aussi d&rsquo;anticiper le bateau en haute saison, à réserver la veille depuis Plaka, Elounda ou Agios Nikolaos. Les autres sites, Phaistos, Gortyne ou Malia, restent nettement plus calmes et n&rsquo;imposent aucune réservation.</p>

    <h3>Quelle est la meilleure période pour venir en Crète ?</h3>

    <p>Mai, juin, septembre et début octobre réunissent une mer déjà chaude, des sentiers praticables et une affluence supportable. Juillet et août cumulent chaleur, foule et prix hauts, avec des températures qui dépassent souvent 35 degrés dans les gorges. Avril et fin octobre conviennent également aux visites culturelles, la baignade devenant alors aléatoire et Samaria pas toujours ouvert. L&rsquo;hiver ferme une partie des hôtels de la côte et réduit les horaires des sites, mais la Crète, plus vaste et plus habitée que les autres îles, reste vivante toute l&rsquo;année autour de ses villes.</p>

    <h3>Comment arrive-t-on en Crète ?</h3>

    <p>Par avion ou par ferry. Deux aéroports accueillent les vols, Héraklion au centre et La Canée à l&rsquo;ouest, avec des liaisons directes depuis plusieurs villes européennes en saison. Par la mer, des ferries de nuit relient également le port du Pirée, près d&rsquo;Athènes, à Héraklion, La Canée et d&rsquo;autres ports crétois, avec plusieurs traversées par semaine et par compagnie. Le choix de l&rsquo;aéroport ou du port d&rsquo;arrivée dépend ensuite de la région visitée en priorité : l&rsquo;ouest depuis La Canée, le centre et l&rsquo;est depuis Héraklion. Louer la voiture au point d&rsquo;arrivée simplifie ensuite tout le séjour.</p>

    <h3>La carte interactive de la Crète fonctionne-t-elle sur place ?</h3>

    <p>Oui, depuis un téléphone, avec deux conditions. Le fond de carte se télécharge à l&rsquo;affichage, une connexion mobile reste donc nécessaire pour le voir apparaître. Le guidage GPS demande ensuite l&rsquo;autorisation de localisation du navigateur. Une fois la page ouverte et la carte chargée, les fiches et l&rsquo;audio restent consultables même si le réseau faiblit sur les routes de montagne du sud et de l&rsquo;ouest. Enfin, les points marqués comme vus sont enregistrés dans le navigateur et se retrouvent à l&rsquo;étape suivante du circuit.</p>

    <div class="crete-note">
      <p><strong>À prévoir avant de partir sur l&rsquo;île :</strong> les distances sont trompeuses en Crète, les routes de montagne rallongent beaucoup les temps de trajet, calez un itinéraire réaliste par région plutôt qu&rsquo;un grand tour improvisé. Emportez de l&rsquo;eau et de bonnes chaussures pour Samaria, l&rsquo;ancienne carrière de Gortyne et les sites en plein soleil, où l&rsquo;ombre manque. Le sable sombre de certaines plages du sud devient brûlant l&rsquo;après-midi. Enfin, chargez le téléphone avant la journée, le guidage GPS et la lecture audio consomment de la batterie sur les longues étapes.</p>
    </div>
  </div>
</div>

<!-- ======================== CTA FINAL : Crète (image immersive) ======================== -->
<div class="crete-ctaimg">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/plage-de-preveli-crete-grece.jpg" alt="Plage en Crète">
  <div class="crete-ctaimg-ov"></div>
  <div class="crete-ctaimg-content">
    <div class="crete-ctaimg-eyebrow"><span></span>Continuer la visite<span></span></div>
    <h2>Découvrir la Crète <em>au-delà de la carte</em></h2>
    <p>Les villes vénitiennes, les palais minoens, les plages de l&rsquo;ouest et les gorges de montagne, les monastères de l&rsquo;est et les conseils pour organiser un circuit par région : retrouvez tout le guide pour préparer le séjour.</p>
    <a class="crete-ctaimg-btn" href="https://visiter-santorini.fr/crete/">Découvrir la Crète</a>
  </div>
</div>

</div>
<!-- Fin #crete-seo -->
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-crete%2F&amp;linkname=Carte%20interactive%20de%20la%20Cr%C3%A8te" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-crete%2F&amp;linkname=Carte%20interactive%20de%20la%20Cr%C3%A8te" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-crete%2F&amp;linkname=Carte%20interactive%20de%20la%20Cr%C3%A8te" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-crete%2F&#038;title=Carte%20interactive%20de%20la%20Cr%C3%A8te" data-a2a-url="https://visiter-santorini.fr/carte-interactive-crete/" data-a2a-title="Carte interactive de la Crète"></a></p><p>L’article <a href="https://visiter-santorini.fr/carte-interactive-crete/">Carte interactive de la Crète</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Carte interactive de l&#8217;Acropole d&#8217;Athènes</title>
		<link>https://visiter-santorini.fr/carte-interactive-acropole-athenes/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Tue, 21 Jul 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Carte Interactive]]></category>
		<category><![CDATA[Athènes & Attique]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11496</guid>

					<description><![CDATA[<p>Visite guidee interactive L&#8217;Acropole d&#8217;Athènes Le rocher sacré, ses temples, ses statues et ses théâtres, point par point. Suivez la carte, écoutez chaque fiche et activez le guidage GPS pour vous repérer sur place. 22 Points clés 2 500 Ans d&#8217;histoire GPS Guidage sur place Explorer l&#8217;Acropole point par point Vingt-deux étapes repérées sur la&#8230;&#160;<a href="https://visiter-santorini.fr/carte-interactive-acropole-athenes/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Carte interactive de l&#8217;Acropole d&#8217;Athènes</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/carte-interactive-acropole-athenes/">Carte interactive de l&rsquo;Acropole d&rsquo;Athènes</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ============================================================
     VISITE GUIDEE INTERACTIVE DE L'ACROPOLE D'ATHENES
     visiter-santorini.fr
     A coller dans un bloc "HTML personnalise" (Gutenberg), page dédiée.

     A SAVOIR :
     - Ce bloc ne contient AUCUN script (WordPress les retire des
       blocs HTML). Le moteur est dans le snippet WP Code associe :
       "Visite guidee Acropole" (JavaScript, Site Wide Footer, Frontend only).
     - Un seul snippet carte actif à la fois n'est PAS necessaire ici :
       ce snippet est scope sous #vgac, il coexiste avec Santorin (#vgs),
       Athènes (#vga) et Crète (#vgc).
     - IMAGE DU HERO : remplacer les deux occurrences de A-REMPLACER
       par l'URL d'une photo de l'Acropole de votre mediatheque.
     - URLS D'ARTICLES : le champ url:"" de chaque point est vide dans
       le snippet. Collez uniquement des URL publiees ; une URL vide
       masque le bouton "Lire l'article". Ne rien inventer.
     - PHOTOS : champ photo:"" vide par defaut. Collez l'URL d'une
       image de la mediatheque pour l'afficher en haut de la fiche.
     - Le guidage GPS demande l'autorisation de localisation et
       fonctionne uniquement en HTTPS (le site l'est).
     - Attributions OpenStreetMap / CARTO / Esri obligatoires : incluses.
     ============================================================ -->

<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/parthenon-acropole-athenes.jpg" fetchpriority="high">

<style>
.gsan-vgac-hero-wrap {
  --c-deep:#0d2d4a; --c-gold:#c9a84c; --c-gold-lt:#e8d5a0; --c-white:#faf9f7;
  font-family:'Jost',sans-serif; line-height:1.7;
}
.gsan-vgac-hero-wrap *, .gsan-vgac-hero-wrap *::before, .gsan-vgac-hero-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.gsan-vgac-hero-wrap .gsan-hero { position:relative; height:66vh; min-height:440px; overflow:hidden; display:flex; align-items:flex-end; }
.gsan-vgac-hero-wrap .gsan-hero img {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 40%;
  transform:scale(1.05); animation:gsanVgacZoom 14s ease-out forwards;
}
@keyframes gsanVgacZoom { to { transform:scale(1); } }
.gsan-vgac-hero-wrap .gsan-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,45,74,.92) 0%, rgba(13,45,74,.3) 55%, transparent 100%); }
.gsan-vgac-hero-wrap .gsan-hero-content { position:relative; z-index:2; padding:3.2rem 5vw 3.8rem; max-width:820px; }
.gsan-vgac-hero-wrap .gsan-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold); font-weight:500; margin-bottom:.8rem; }
.gsan-vgac-hero-wrap .gsan-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--c-gold); }
.gsan-vgac-hero-wrap .gsan-hero-content h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:300; color:var(--c-white); line-height:1.05; margin-bottom:1rem; }
.gsan-vgac-hero-wrap .gsan-hero-content h1 em { font-style:italic; color:var(--c-gold-lt); }
.gsan-vgac-hero-wrap .gsan-hero-content p { color:rgba(250,249,247,.78); font-size:.95rem; max-width:580px; margin-bottom:1.8rem; }
.gsan-vgac-hero-wrap .gsan-hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.gsan-vgac-hero-wrap .gsan-hero-stat .num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--c-gold-lt); line-height:1; }
.gsan-vgac-hero-wrap .gsan-hero-stat .label { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,249,247,.55); margin-top:.2rem; }

/* ============ Visite guidee ============ */
#vgac {
  --deep:#0d2d4a; --deep-2:#123a5e; --gold:#c9a84c; --gold-lt:#e8d5a0;
  --white:#faf9f7; --ink:#1c2733; --mut:#5b6b7a; --line:rgba(13,45,74,.12);
  --c-monument:#c9a84c; --c-statue:#8a6fb8; --c-théâtre:#b5543b; --c-vue:#e2795a; --c-musée:#3d8bd4;
  font-family:'Jost',sans-serif; color:var(--ink); background:var(--white);
  padding:2.2rem 4vw 3rem;
}
#vgac *, #vgac *::before, #vgac *::after { box-sizing:border-box; margin:0; padding:0; }
#vgac .vgac-intro { max-width:820px; margin:0 auto 1.6rem; text-align:center; }
#vgac .vgac-intro h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--deep); margin-bottom:.55rem; }
#vgac .vgac-intro p { font-size:.92rem; color:var(--mut); }

/* Barre de guidage GPS */
#vgac .vgac-gpsbar {
  max-width:1180px; margin:0 auto 1rem; display:flex; flex-wrap:wrap; gap:.7rem;
  align-items:center; justify-content:space-between;
  background:var(--deep); border-radius:14px; padding:.75rem 1rem;
}
#vgac .vgac-gpsbar .left { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
#vgac #vgac-gps {
  border:1px solid var(--gold); background:transparent; color:var(--gold-lt);
  font-family:inherit; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; transition:background .2s,color .2s;
}
#vgac #vgac-gps:hover { background:var(--gold); color:var(--deep); }
#vgac #vgac-gps.on { background:var(--gold); color:var(--deep); }
#vgac #vgac-gps-status { font-size:.8rem; color:rgba(250,249,247,.75); }
#vgac #vgac-progress { font-size:.8rem; color:var(--gold-lt); letter-spacing:.06em; white-space:nowrap; }

/* Bandeau prochaines étapes */
#vgac #vgac-next { max-width:1180px; margin:0 auto; display:none; }
#vgac #vgac-next.on { display:block; margin-bottom:1rem; }
#vgac #vgac-next .vgac-next-title { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:.5rem; }
#vgac #vgac-next .vgac-next-row { display:flex; gap:.7rem; flex-wrap:wrap; }
#vgac .vgac-next-card {
  flex:1 1 200px; border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem;
  background:#fff; cursor:pointer; transition:border-color .2s,transform .2s;
}
#vgac .vgac-next-card:hover { border-color:var(--gold); transform:translateY(-2px); }
#vgac .vgac-next-card .n { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:600; }
#vgac .vgac-next-card .t { font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--deep); margin:.15rem 0; }
#vgac .vgac-next-card .d { font-size:.78rem; color:var(--mut); }

/* Layout */
#vgac .vgac-layout { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:minmax(0,380px) 1fr; gap:1.2rem; }
@media (max-width:900px) {
  #vgac .vgac-layout { grid-template-columns:1fr; }
  #vgac .vgac-carte-wrap { height:56vh; min-height:380px; order:-1; }
  #vgac .vgac-panel { height:auto; max-height:70vh; }
  #vgac .vgac-gpsbar { position:sticky; top:0; z-index:600; }
}
@media (prefers-reduced-motion:reduce) {
  .gsan-vgac-hero-wrap .gsan-hero img { animation:none; transform:none; }
}

/* Panneau gauche */
#vgac .vgac-panel { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; max-height:640px; }
#vgac .vgac-tools { padding:1rem 1rem .6rem; border-bottom:1px solid var(--line); }
#vgac #vgac-search {
  width:100%; border:1px solid var(--line); border-radius:10px; padding:.6rem .8rem;
  font-family:inherit; font-size:.88rem; color:var(--ink); outline:none;
}
#vgac #vgac-search:focus { border-color:var(--gold); }
#vgac .vgac-filtres { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
#vgac .vgac-filtre {
  border:1px solid var(--line); background:#fff; color:var(--mut);
  font-family:inherit; font-size:.72rem; letter-spacing:.03em; padding:.35rem .7rem;
  border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:.35rem; transition:all .18s;
}
#vgac .vgac-filtre .dot { width:9px; height:9px; border-radius:50%; }
#vgac .vgac-filtre.on { background:var(--deep); color:#fff; border-color:var(--deep); }

/* Liste */
#vgac #vgac-liste { overflow-y:auto; padding:.4rem; }
#vgac .vgac-item {
  display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .6rem; border-radius:12px;
  cursor:pointer; transition:background .15s; border:1px solid transparent;
}
#vgac .vgac-item:hover { background:#f4f6f8; }
#vgac .vgac-item.vu { opacity:.55; }
#vgac .vgac-item .pin { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem; font-weight:600; }
#vgac .vgac-item .info { min-width:0; }
#vgac .vgac-item .info .nom { font-family:'Cormorant Garamond',serif; font-size:1.15rem; color:var(--deep); line-height:1.15; }
#vgac .vgac-item .info .cat { font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin-top:.1rem; }
#vgac .vgac-item .info .dist { font-size:.72rem; color:var(--gold); margin-top:.15rem; }

/* Fiche */
#vgac #vgac-fiche { display:none; flex-direction:column; overflow-y:auto; }
#vgac #vgac-fiche.on { display:flex; }
#vgac #vgac-retour {
  align-self:flex-start; margin:.7rem 0 0 .7rem; border:none; background:transparent;
  color:var(--mut); font-family:inherit; font-size:.8rem; cursor:pointer; padding:.3rem;
}
#vgac #vgac-retour:hover { color:var(--deep); }
#vgac .vgac-fiche-photo { width:100%; height:170px; object-fit:cover; border-radius:12px; margin:.6rem 0 0; }
#vgac .vgac-fiche-body { padding:.9rem 1.1rem 1.3rem; }
#vgac #vgac-fiche-cat { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin-bottom:.35rem; }
#vgac #vgac-fiche-nom { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:1.7rem; color:var(--deep); line-height:1.1; margin-bottom:.3rem; }
#vgac #vgac-fiche-dist { font-size:.78rem; color:var(--gold); margin-bottom:.7rem; }
#vgac #vgac-fiche-texte { font-size:.9rem; color:var(--ink); line-height:1.75; margin-bottom:.7rem; }
#vgac #vgac-fiche-note { font-size:.82rem; color:var(--mut); background:#f4f6f8; border-left:3px solid var(--gold); padding:.6rem .8rem; border-radius:0 8px 8px 0; margin-bottom:.9rem; }
#vgac #vgac-audio-player { width:100%; margin-bottom:.8rem; }
#vgac .vgac-fiche-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
#vgac .vgac-btn {
  font-family:inherit; font-size:.78rem; letter-spacing:.04em; padding:.55rem 1rem;
  border-radius:999px; cursor:pointer; border:1px solid var(--deep); background:var(--deep); color:#fff;
  text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; transition:opacity .2s;
}
#vgac .vgac-btn:hover { opacity:.86; }
#vgac .vgac-btn.gold { background:var(--gold); border-color:var(--gold); color:var(--deep); }
#vgac .vgac-btn.ghost { background:transparent; color:var(--deep); }

/* Carte */
#vgac .vgac-carte-wrap { position:relative; border:1px solid var(--line); border-radius:16px; overflow:hidden; min-height:520px; }
#vgac #vgac-carte { position:absolute; inset:0; }
#vgac #vgac-carte-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--mut); font-size:.88rem; text-align:center; padding:2rem; }
#vgac .vgac-basemap { position:absolute; top:10px; right:10px; z-index:500; display:flex; gap:.3rem; background:#fff; border-radius:999px; padding:.2rem; box-shadow:0 2px 10px rgba(0,0,0,.15); }
#vgac .vgac-basemap button {
  border:none; background:transparent; font-family:inherit; font-size:.72rem; letter-spacing:.04em;
  padding:.35rem .8rem; border-radius:999px; cursor:pointer; color:var(--mut);
}
#vgac .vgac-basemap button.on { background:var(--deep); color:#fff; }
#vgac .vgac-pastille {
  width:26px; height:26px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center;
}
#vgac .vgac-pastille span { transform:rotate(45deg); color:#fff; font-size:.62rem; font-weight:700; }
#vgac .vgac-pastille.vu { opacity:.5; }
#vgac .vgac-attrib { max-width:1180px; margin:.7rem auto 0; font-size:.68rem; color:var(--mut); text-align:right; }
#vgac .vgac-attrib à { color:var(--mut); }

/* Marqueur position utilisateur */
#vgac .vgac-me { width:18px; height:18px; border-radius:50%; background:#2e74a6; border:3px solid #fff; box-shadow:0 0 0 4px rgba(46,116,166,.3); }
</style>

<div class="gsan-vgac-hero-wrap">
  <div class="gsan-hero">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/parthenon-acropole-athenes.jpg" alt="L'Acropole d'Athènes et le Parthénon à Athènes">
    <div class="gsan-hero-overlay"></div>
    <div class="gsan-hero-content">
      <div class="gsan-eyebrow">Visite guidee interactive</div>
      <h1>L&rsquo;Acropole <em>d&rsquo;Athènes</em></h1>
      <p>Le rocher sacré, ses temples, ses statues et ses théâtres, point par point. Suivez la carte, écoutez chaque fiche et activez le guidage GPS pour vous repérer sur place.</p>
      <div class="gsan-hero-stats">
        <div class="gsan-hero-stat"><div class="num">22</div><div class="label">Points clés</div></div>
        <div class="gsan-hero-stat"><div class="num">2 500</div><div class="label">Ans d&rsquo;histoire</div></div>
        <div class="gsan-hero-stat"><div class="num">GPS</div><div class="label">Guidage sur place</div></div>
      </div>
    </div>
  </div>
</div>

<div id="vgac">
  <div class="vgac-intro">
    <h2>Explorer l&rsquo;Acropole point par point</h2>
    <p>Vingt-deux étapes repérées sur la carte : les grands monuments du plateau, les statues, les théâtres du versant sud, les sanctuaires et les meilleurs points de vue. Sur place, activez le guidage GPS : la carte affiche votre position et vous propose les étapes les plus proches.</p>
  </div>

  <div class="vgac-gpsbar">
    <div class="left">
      <button id="vgac-gps" type="button">Activer le guidage GPS</button>
      <span id="vgac-gps-status">Guidage désactivé</span>
    </div>
    <span id="vgac-progress">0 / 22 points vus</span>
  </div>

  <div id="vgac-next" aria-label="Prochaines étapes proposées"></div>

  <div class="vgac-layout">
    <aside class="vgac-panel">
      <div class="vgac-tools">
        <input id="vgac-search" type="search" placeholder="Rechercher un point (Parthénon, Cariatides, Hérode...)" aria-label="Rechercher un point">
        <div class="vgac-filtres" id="vgac-filtres"></div>
      </div>
      <div id="vgac-liste" aria-live="polite"></div>
      <div id="vgac-fiche">
        <button id="vgac-retour" type="button">← Retour à la liste</button>
        <img id="vgac-fiche-photo" class="vgac-fiche-photo" alt="" style="display:none">
        <div class="vgac-fiche-body">
          <div id="vgac-fiche-cat"></div>
          <h3 id="vgac-fiche-nom"></h3>
          <div id="vgac-fiche-dist"></div>
          <p id="vgac-fiche-texte"></p>
          <p id="vgac-fiche-note"></p>
          <audio id="vgac-audio-player" controls="" preload="none"></audio>
          <div class="vgac-fiche-actions">
            <button id="vgac-ecouter" class="vgac-btn gold" type="button">Écouter la fiche</button>
            <button id="vgac-vu" class="vgac-btn ghost" type="button">Marquer comme vu</button>
            <a id="vgac-cta" class="vgac-btn" href="#">Lire l&rsquo;article</a>
          </div>
        </div>
      </div>
    </aside>

    <div class="vgac-carte-wrap">
      <div id="vgac-carte-fallback">Chargement de la carte de l&rsquo;Acropole&#8230;</div>
      <div id="vgac-carte" role="application" aria-label="Carte interactive de l'Acropole d'Athènes"></div>
      <div class="vgac-basemap">
        <button id="vgac-sat" type="button" class="on">Satellite</button>
        <button id="vgac-plan" type="button">Plan</button>
      </div>
    </div>
  </div>

  <p class="vgac-attrib">Fonds de carte : © <a href="https://www.openstreetmap.org/copyright" rel="noopener" target="_blank">OpenStreetMap</a>, © CARTO, imagerie © Esri</p>
</div>



<!-- 
==========================================================
CONTENU SEO SOUS LA CARTE INTERACTIVE DE L'ACROPOLE
Site : visiter-santorini.fr
CSS : WP Code snippet "gr-activite"
==========================================================
A coller dans un SECOND bloc "HTML personnalisé" (Gutenberg),
juste sous le bloc de la carte interactive, sur la même page.

Mot-clé principal : carte interactive de l'Acropole

A REMPLACER avant publication :
- https://visiter-santorini.fr/wp-content/uploads/athenes-grece-24-1536x864.jpg  ->  URL d'une photo d'Athènes de la médiathèque
  (image de fond du CTA final). Le lien du CTA est déjà en place.
==========================================================
-->

<!-- CSS complémentaire (listes + CTA immersif repris du système oiap, non chargé dans gr-activite) -->
<style>
#acropole-seo .gr-section ul,
#acropole-seo .gr-programme-inner ul{list-style:none;padding-left:24px;margin:16px 0}
#acropole-seo .gr-section ul li,
#acropole-seo .gr-programme-inner ul li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6}
#acropole-seo .gr-section ul li::before,
#acropole-seo .gr-programme-inner ul li::before{content:"›";position:absolute;left:0;color:#c5a255;font-size:1.3em;font-weight:700;line-height:1.4}
/* Chaque bloc h3 + texte forme une unité : titre collé à son paragraphe,
   espace généreux APRES le bloc, avant le h3 suivant. */
#acropole-seo .gr-section h3,
#acropole-seo .gr-programme-inner h3{margin-top:3.4rem;margin-bottom:.55rem;line-height:1.3}
#acropole-seo .gr-section h3 + p,
#acropole-seo .gr-programme-inner h3 + p{margin-top:0}
#acropole-seo .gr-section h2 + p,
#acropole-seo .gr-programme-inner h2 + p{margin-top:1.2rem}
#acropole-seo .gr-section p,
#acropole-seo .gr-programme-inner p{margin-bottom:1rem}
#acropole-seo .gr-section ul:last-child,
#acropole-seo .gr-programme-inner ul:last-child,
#acropole-seo .gr-section p:last-child,
#acropole-seo .gr-programme-inner p:last-child{margin-bottom:0}
#acropole-seo .gr-ctaimg{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Jost',sans-serif}
#acropole-seo .gr-ctaimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
#acropole-seo .gr-ctaimg-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,45,74,.9) 0%,rgba(13,45,74,.6) 100%)}
#acropole-seo .gr-ctaimg-content{position:relative;z-index:2;text-align:center;padding:4rem 5vw;max-width:660px}
#acropole-seo .gr-ctaimg-eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:#c9a84c;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
#acropole-seo .gr-ctaimg-eyebrow span{width:24px;height:1px;background:#c9a84c;display:block}
#acropole-seo .gr-ctaimg-content h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:#faf9f7;line-height:1.1;margin-bottom:1.2rem}
#acropole-seo .gr-ctaimg-content h2 em{font-style:italic;color:#e8d5a0}
#acropole-seo .gr-ctaimg-content p{color:rgba(250,249,247,.7);font-size:.92rem;line-height:1.75;margin:0 auto 2.4rem;max-width:520px}
#acropole-seo .gr-ctaimg-btn{display:inline-flex;align-items:center;gap:.6rem;background:#c9a84c;color:#0d2d4a;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:.95rem 2.1rem;border-radius:2px;text-decoration:none;transition:background .3s,transform .2s}
#acropole-seo .gr-ctaimg-btn:hover{background:#e8d5a0;transform:translateY(-2px)}
#acropole-seo .gr-ctaimg-btn i{font-size:.62rem;transition:transform .2s}
#acropole-seo .gr-ctaimg-btn:hover i{transform:translateX(3px)}
</style>

<div class="gr-activite" id="acropole-seo">

<!-- ======================== CE QUE PRÉSENTE LA CARTE (fond blanc) ======================== -->
<div class="gr-section">
  <span class="gr-eyebrow">Les 22 points</span>
  <h2>Ce que présente la carte interactive <em>de l&rsquo;Acropole d&rsquo;Athènes</em></h2>

  <p>La carte réunit 22 points répartis sur le rocher, ses versants et les collines voisines. Chaque point ouvre une fiche avec un résumé, une note pratique et une lecture audio. Les cinq familles ci-dessous correspondent aux filtres colorés de la carte, ce qui permet d&rsquo;organiser la visite selon le temps disponible.</p>

  <h3>Les monuments du plateau</h3>

  <p>Huit points couvrent le sommet du rocher et replacent chaque édifice dans sa chronologie, du sac perse de 480 avant notre ère au programme de Périclès.</p>

  <ul>
    <li><strong>Le Parthénon</strong> : temple d&rsquo;Athéna Parthénos achevé en 438 avant notre ère, conçu par Ictinos et Callicratès.</li>
    <li><strong>L&rsquo;Erechthéion</strong> : temple ionique aux cultes multiples, bâti sur le lieu le plus sacré du rocher.</li>
    <li><strong>Les Propylées</strong> : porte monumentale de Mnésiclès, restée inachevée à cause de la guerre du Péloponnèse.</li>
    <li><strong>Le temple d&rsquo;Athéna Niké</strong> : petit édifice ionique perché sur son bastion, à droite de l&rsquo;entrée.</li>
    <li><strong>La porte Beulé</strong> : ouvrage fortifié romain qui commande l&rsquo;accès actuel du site.</li>
    <li><strong>Le monument d&rsquo;Agrippa</strong> : haut socle qui portait un quadrige de bronze, redédicacé à l&rsquo;époque romaine.</li>
    <li><strong>L&rsquo;ancien temple d&rsquo;Athéna Polias</strong> : fondations archaïques entre le Parthénon et l&rsquo;Erechthéion.</li>
    <li><strong>Le sanctuaire de Zeus Polieus</strong> : enclos à ciel ouvert des rites anciens, à l&rsquo;angle nord-est.</li>
  </ul>

  <h3>Les statues et le décor sculpté</h3>

  <p>Deux points traitent la sculpture et distinguent clairement ce qui subsiste de ce qui a disparu.</p>

  <ul>
    <li><strong>Le portique des Cariatides</strong> : les six figures visibles sur place sont des copies, cinq originaux se trouvent au musée de l&rsquo;Acropole et le sixième au British Museum.</li>
    <li><strong>L&#8217;emplacement d&rsquo;Athéna Promachos</strong> : statue de bronze colossale de Phidias qui signalait le sanctuaire aux navires approchant du Pirée, disparue depuis le Moyen Âge.</li>
  </ul>

  <h3>Les théâtres et sanctuaires du versant sud</h3>

  <p>Sept points descendent le flanc sud, secteur souvent traversé trop vite en montant vers le plateau.</p>

  <ul>
    <li><strong>Le théâtre de Dionysos</strong> : berceau du théâtre occidental, où furent créées les pièces d&rsquo;Eschyle, de Sophocle et d&rsquo;Euripide.</li>
    <li><strong>L&rsquo;odéon d&rsquo;Hérode Atticus</strong> : théâtre romain de 161, toujours en activité pour le festival d&rsquo;Athènes.</li>
    <li><strong>La stoa d&rsquo;Eumène</strong> : longue galerie qui reliait les deux salles et abritait le public entre deux représentations.</li>
    <li><strong>Le sanctuaire de Dionysos</strong> : enclos sacré d&rsquo;où le théâtre tire son nom et sa fonction rituelle.</li>
    <li><strong>L&rsquo;Asclépiéion</strong> : sanctuaire de guérison où les malades dormaient pour espérer un rêve curatif.</li>
    <li><strong>Le monument de Thrasyllos</strong> : grotte aménagée en monument, transformée ensuite en chapelle.</li>
    <li><strong>Le sanctuaire d&rsquo;Artémis Brauronia</strong> : enclos des offrandes féminines, sur le plateau.</li>
  </ul>

  <h3>Les points de vue sur l&rsquo;Acropole</h3>

  <p>Quatre points sortent de l&rsquo;enceinte payante, tous d&rsquo;accès libre et gratuit.</p>

  <ul>
    <li><strong>L&rsquo;Aréopage</strong> : ancien tribunal athénien, juste sous l&rsquo;entrée ouest, sur une roche très glissante.</li>
    <li><strong>Le belvédère du drapeau grec</strong> : pointe est du plateau, vue plongeante vers le temple de Zeus olympien.</li>
    <li><strong>La colline de Philopappos</strong> : le cadrage le plus reconnu pour photographier le Parthénon au coucher du soleil.</li>
    <li><strong>La Pnyx</strong> : siège de l&rsquo;assemblée des citoyens, calme et peu fréquentée.</li>
  </ul>

  <h3>Le musée de l&rsquo;Acropole</h3>

  <p>Un point est consacré au musée ouvert en 2009, construit au-dessus de fouilles visibles sous un plancher de verre. Son dernier niveau, incliné pour reprendre l&rsquo;orientation du Parthénon, expose la frise et les frontons à hauteur d&rsquo;œil, avec les emplacements laissés vides pour les marbres conservés à Londres. C&rsquo;est là que se voient les Cariatides originales, réunies.</p>
</div>


&nbsp;

<!-- ======================== FAQ (fond crème) ======================== -->
<div class="gr-programme">
  <div class="gr-programme-inner">
    <span class="gr-eyebrow">Préparer la visite</span>
    <h2>Questions fréquentes <em>sur la visite de l&rsquo;Acropole</em></h2>

    <h3>Combien de temps faut-il pour visiter l&rsquo;Acropole ?</h3>

    <p>Comptez une heure trente à deux heures pour le plateau seul, montée et descente comprises. En ajoutant le versant sud, ses théâtres et son sanctuaire de guérison, prévoyez trois heures. Avec le musée de l&rsquo;Acropole, la visite occupe une demi-journée complète. Les 22 points de la carte se parcourent confortablement sur cette durée longue ; sur un créneau court, les filtres permettent de cibler les monuments du plateau seuls.</p>

    <h3>Par où arrive-t-on sur le site ?</h3>

    <p>Deux entrées desservent l&rsquo;Acropole.</p>

    <ul>
      <li><strong>L&rsquo;entrée ouest</strong>, la principale : elle mène par la porte Beulé et les Propylées directement au plateau, chemin le plus court et le plus fréquenté.</li>
      <li><strong>L&rsquo;entrée sud</strong>, à l&rsquo;angle de la rue Dionysiou Areopagitou et de la rue Thrasyllou, presque en face du musée : la visite commence par le théâtre de Dionysos puis remonte le versant, dans un ordre chronologique plus logique et avec moins d&rsquo;affluence au départ.</li>
    </ul>

    <h3>Quels sont les incontournables à voir absolument ?</h3>

    <p>Cinq points concentrent l&rsquo;essentiel de la visite.</p>

    <ul>
      <li><strong>Le Parthénon</strong>, temple d&rsquo;Athéna qui domine le plateau.</li>
      <li><strong>L&rsquo;Erechthéion</strong> et son portique des Cariatides.</li>
      <li><strong>Les Propylées</strong>, seuil monumental du sanctuaire.</li>
      <li><strong>Le temple d&rsquo;Athéna Niké</strong>, en surplomb de l&rsquo;entrée.</li>
      <li><strong>Le théâtre de Dionysos</strong>, sur le versant sud.</li>
    </ul>

    <p>En ajoutant deux étapes, prenez l&rsquo;odéon d&rsquo;Hérode Atticus vu d&rsquo;en haut puis le belvédère est pour le panorama. Le musée de l&rsquo;Acropole complète l&rsquo;ensemble, puisqu&rsquo;il abrite les sculptures retirées des monuments.</p>

    <h3>Combien coûte le billet et faut-il réserver ?</h3>

    <p>Le billet plein tarif est affiché à 30 euros en 2026, le tarif réduit à 15 euros. Un billet combiné donnant accès à sept sites archéologiques d&rsquo;Athènes existe à 36 euros, valable cinq jours. La réservation d&rsquo;un créneau horaire est obligatoire depuis avril 2024 : l&rsquo;entrée est acceptée de quinze minutes avant à quinze minutes après l&rsquo;heure choisie. Les créneaux du matin partent vite en haute saison. Les tarifs et les modalités évoluent chaque année, vérifiez-les avant de réserver.</p>

    <h3>Le billet du musée de l&rsquo;Acropole est-il compris ?</h3>

    <p>Non. Le musée relève d&rsquo;une billetterie distincte de celle du site archéologique, avec ses propres horaires et son propre tarif, de l&rsquo;ordre de 15 euros en plein tarif. Il faut donc prévoir deux entrées séparées pour enchaîner la colline et les collections.</p>

    <h3>Quel est le meilleur moment de la journée pour monter ?</h3>

    <p>Le premier créneau du matin reste le meilleur compromis entre lumière, chaleur supportable et affluence. Entre 10 heures et 15 heures en haute saison, la foule et la chaleur culminent ensemble sur un plateau sans ombre. Les jours où plusieurs paquebots sont à quai au Pirée chargent encore le site en fin de matinée. La fin d&rsquo;après-midi fonctionne également, avec une lumière rasante favorable aux photos. Les horaires suivent la saison : ouverture à 8 heures toute l&rsquo;année, fermeture vers 17 heures l&rsquo;hiver et jusqu&rsquo;à 20 heures en plein été, dernière entrée une demi-heure avant.</p>

    <h3>Le Parthénon est-il encore sous échafaudages ?</h3>

    <p>Les échafaudages extérieurs de la façade ouest ont été démontés définitivement en juin 2026, à l&rsquo;achèvement de la restauration du fronton ouest engagée en 2017. Cette façade se découvre dégagée pour la première fois depuis environ 220 ans. Le chantier de conservation de l&rsquo;Acropole, ouvert depuis 1975, se poursuit sur d&rsquo;autres parties du monument : des structures plus légères restent possibles selon les phases de travaux.</p>

    <h3>La carte interactive de l&rsquo;Acropole fonctionne-t-elle sur place ?</h3>

    <p>Oui, depuis un téléphone, avec deux conditions. Le fond de carte se télécharge à l&rsquo;affichage, une connexion mobile reste donc nécessaire pour le voir apparaître. Le guidage GPS demande l&rsquo;autorisation de localisation du navigateur. Une fois la page ouverte et la carte chargée, les fiches et l&rsquo;audio restent consultables même si le réseau faiblit sur le rocher. Enfin, les points marqués comme vus sont enregistrés dans le navigateur et se retrouvent à la visite suivante.</p>

    <div class="gr-note" style="margin-top: 24px;">
      <p><strong>À prévoir avant de monter :</strong> le marbre des Propylées et du plateau est poli par des millions de passages, il glisse, des chaussures fermées à semelle adhérente valent mieux que des sandales. Aucune ombre n&rsquo;existe sur le sommet, emportez eau et chapeau d&rsquo;avril à octobre. Enfin, chargez le téléphone avant la montée, le guidage GPS et la lecture audio consomment de la batterie.</p>
    </div>

  </div>
</div>


<!-- ======================== CTA FINAL : Athènes (image immersive) ======================== -->
<div class="gr-ctaimg">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/athenes-grece-24-1536x864.jpg" alt="Vue d'Athènes depuis l'Acropole en Grèce">
  <div class="gr-ctaimg-ov"></div>
  <div class="gr-ctaimg-content">
    <div class="gr-ctaimg-eyebrow"><span></span>Continuer la visite<span></span></div>
    <h2>Découvrir Athènes <em>au-delà du rocher</em></h2>
    <p>L&rsquo;agora antique, Plaka et Anafiotika, le temple de Zeus olympien, les marchés et les tavernes de quartier : la capitale grecque se prolonge bien après la descente de l&rsquo;Acropole. Retrouvez tout le guide pour organiser le reste du séjour.</p>
    <a class="gr-ctaimg-btn" href="https://visiter-santorini.fr/decouvrir-athenes/">Découvrir Athènes <i class="fa-solid fa-arrow-right"></i></a>
  </div>
</div>

</div>
<!-- Fin .gr-activite -->
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-acropole-athenes%2F&amp;linkname=Carte%20interactive%20de%20l%E2%80%99Acropole%20d%E2%80%99Ath%C3%A8nes" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-acropole-athenes%2F&amp;linkname=Carte%20interactive%20de%20l%E2%80%99Acropole%20d%E2%80%99Ath%C3%A8nes" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-acropole-athenes%2F&amp;linkname=Carte%20interactive%20de%20l%E2%80%99Acropole%20d%E2%80%99Ath%C3%A8nes" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-acropole-athenes%2F&#038;title=Carte%20interactive%20de%20l%E2%80%99Acropole%20d%E2%80%99Ath%C3%A8nes" data-a2a-url="https://visiter-santorini.fr/carte-interactive-acropole-athenes/" data-a2a-title="Carte interactive de l’Acropole d’Athènes"></a></p><p>L’article <a href="https://visiter-santorini.fr/carte-interactive-acropole-athenes/">Carte interactive de l&rsquo;Acropole d&rsquo;Athènes</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Carte interactive de Santorin : les incontournables</title>
		<link>https://visiter-santorini.fr/carte-interactive-santorin/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Sun, 19 Jul 2026 12:20:33 +0000</pubDate>
				<category><![CDATA[Carte Interactive]]></category>
		<category><![CDATA[Santorin]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11469</guid>

					<description><![CDATA[<p>Explorer Santorin Carte interactivede Santorin Villages de la caldeira, sites archéologiques, musées, plages de sable noir, points de vue et volcan : 30 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position sur l&#8217;île. 30 Étapes guidées 6 Catégories de lieux 3 600 Ans d&#8217;histoire Votre visite guidée&#8230;&#160;<a href="https://visiter-santorini.fr/carte-interactive-santorin/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Carte interactive de Santorin : les incontournables</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/carte-interactive-santorin/">Carte interactive de Santorin : les incontournables</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ============================================================
     VISITE GUIDEE INTERACTIVE DE SANTORIN, visiter-santorini.fr (v1.1)
     A coller dans un bloc "HTML personnalise" (Gutenberg) sur une
     page dediee. Ce bloc ne contient AUCUN script : le moteur est
     le snippet WP Code "visite-guidee-santorin" (JavaScript Snippet,
     Site Wide Footer, Frontend only, un seul snippet carte actif).
     Tout est scope sous #vgs : aucune regle CSS globale.

     FONCTIONNEMENT
     - 30 lieux en 6 categories : villages, sites archeologiques,
       musees, plages, points de vue, volcan et caldeira.
     - Clic sur un point de la carte ou une carte de la liste ->
       fiche complete (resume, note pratique, ecoute audio).
     - Bouton "Activer le guidage GPS" : position en direct sur la
       carte, tri des lieux par distance, bandeau "Prochaines etapes"
       avec les 3 lieux non vus les plus proches. A moins de 120 m
       d'un lieu, sa fiche s'ouvre toute seule.
     - Audio : lecture vocale du texte par le navigateur (voix
       francaise du telephone). Pour remplacer par VOS enregistrements,
       hebergez un MP3 dans la mediatheque et collez son URL dans le
       champ audio:"" du lieu concerne, dans le snippet.
     - URLS D'ARTICLES : renseignees dans le snippet, champ url:"",
       uniquement quand la page traite vraiment du lieu. 13 lieux
       sur 30 ont un lien ; les autres ont un champ vide, qui masque
       le bouton "Lire l'article". Ne rien inventer.
     - PHOTOS : champ photo:"" vide par defaut. Collez l'URL d'une
       image de la mediatheque pour l'afficher en haut de la fiche.
     - Le guidage GPS demande l'autorisation de localisation et
       fonctionne uniquement en HTTPS (le site l'est).
     - Attributions OpenStreetMap / CARTO / Esri obligatoires :
       incluses, ne pas les retirer.
     ============================================================ -->

<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/oia-santorin-cyclades-4.jpg" fetchpriority="high">

<style>
.gsan-vgs-hero-wrap {
  --c-deep:#0d2d4a; --c-gold:#c9a84c; --c-gold-lt:#e8d5a0; --c-white:#faf9f7;
  font-family:'Jost',sans-serif; line-height:1.7;
}
.gsan-vgs-hero-wrap *, .gsan-vgs-hero-wrap *::before, .gsan-vgs-hero-wrap *::after { box-sizing:border-box; margin:0; padding:0; }
.gsan-vgs-hero-wrap .gsan-hero { position:relative; height:66vh; min-height:440px; overflow:hidden; display:flex; align-items:flex-end; }
.gsan-vgs-hero-wrap .gsan-hero img {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 40%;
  transform:scale(1.05); animation:gsanVgsZoom 14s ease-out forwards;
}
@keyframes gsanVgsZoom { to { transform:scale(1); } }
.gsan-vgs-hero-wrap .gsan-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(13,45,74,.92) 0%, rgba(13,45,74,.3) 55%, transparent 100%); }
.gsan-vgs-hero-wrap .gsan-hero-content { position:relative; z-index:2; padding:3.2rem 5vw 3.8rem; max-width:820px; }
.gsan-vgs-hero-wrap .gsan-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--c-gold); font-weight:500; margin-bottom:.8rem; }
.gsan-vgs-hero-wrap .gsan-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--c-gold); }
.gsan-vgs-hero-wrap .gsan-hero-content h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(2.6rem,6vw,4.8rem); font-weight:300; color:var(--c-white); line-height:1.05; margin-bottom:1rem; }
.gsan-vgs-hero-wrap .gsan-hero-content h1 em { font-style:italic; color:var(--c-gold-lt); }
.gsan-vgs-hero-wrap .gsan-hero-content p { color:rgba(250,249,247,.78); font-size:.95rem; max-width:580px; margin-bottom:1.8rem; }
.gsan-vgs-hero-wrap .gsan-hero-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.gsan-vgs-hero-wrap .gsan-hero-stat .num { font-family:'Cormorant Garamond',serif; font-size:2rem; font-weight:400; color:var(--c-gold-lt); line-height:1; }
.gsan-vgs-hero-wrap .gsan-hero-stat .label { font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,249,247,.55); margin-top:.2rem; }

/* ============ Visite guidee ============ */
#vgs {
  --deep:#0d2d4a; --deep-2:#123a5e; --gold:#c9a84c; --gold-lt:#e8d5a0;
  --white:#faf9f7; --ink:#1c2733; --mut:#5b6b7a; --line:rgba(13,45,74,.12);
  --c-village:#c9a84c; --c-site:#b5543b; --c-musee:#8a6fb8; --c-plage:#3d8bd4; --c-vue:#e2795a; --c-volcan:#4f5b66;
  font-family:'Jost',sans-serif; color:var(--ink); background:var(--white);
  padding:2.2rem 4vw 3rem;
}
#vgs *, #vgs *::before, #vgs *::after { box-sizing:border-box; margin:0; padding:0; }
#vgs .vgs-intro { max-width:820px; margin:0 auto 1.6rem; text-align:center; }
#vgs .vgs-intro h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--deep); margin-bottom:.55rem; }
#vgs .vgs-intro p { font-size:.92rem; color:var(--mut); }

/* Barre de guidage GPS */
#vgs .vgs-gpsbar {
  max-width:1180px; margin:0 auto 1rem; display:flex; flex-wrap:wrap; gap:.7rem;
  align-items:center; justify-content:space-between;
  background:var(--deep); border-radius:14px; padding:.75rem 1rem;
}
#vgs .vgs-gpsbar .left { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
#vgs #vgs-gps {
  border:1px solid var(--gold); background:transparent; color:var(--gold-lt);
  font-family:inherit; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1.1rem; border-radius:999px; cursor:pointer; transition:background .2s,color .2s;
}
#vgs #vgs-gps:hover { background:var(--gold); color:var(--deep); }
#vgs #vgs-gps.on { background:var(--gold); color:var(--deep); }
#vgs #vgs-gps-status { font-size:.8rem; color:rgba(250,249,247,.75); }
#vgs #vgs-progress { font-size:.8rem; color:var(--gold-lt); letter-spacing:.06em; white-space:nowrap; }

/* Bandeau prochaines etapes */
#vgs #vgs-next { max-width:1180px; margin:0 auto .9rem; display:none; gap:.6rem; flex-wrap:wrap; }
#vgs #vgs-next.on { display:flex; }
#vgs .vgs-next-chip {
  display:flex; align-items:center; gap:.5rem; border:1px solid var(--line);
  background:#fff; border-radius:999px; padding:.4rem .85rem; cursor:pointer;
  font-family:inherit; font-size:.82rem; color:var(--ink); transition:border-color .2s;
}
#vgs .vgs-next-chip:hover { border-color:var(--gold); }
#vgs .vgs-next-chip .dot { width:9px; height:9px; border-radius:50%; flex:none; }
#vgs .vgs-next-chip .dist { color:var(--mut); font-size:.76rem; }

/* Layout panneau + carte */
#vgs .vgs-layout { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:360px 1fr; gap:1rem; align-items:stretch; }
#vgs .vgs-panel { background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; height:660px; }
#vgs .vgs-tools { padding:.9rem .9rem .6rem; border-bottom:1px solid var(--line); }
#vgs #vgs-search {
  width:100%; border:1px solid var(--line); border-radius:9px; padding:.55rem .8rem;
  font-family:inherit; font-size:.88rem; color:var(--ink); background:var(--white); outline:none;
}
#vgs #vgs-search:focus { border-color:var(--gold); }
#vgs .vgs-filtres { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
#vgs .vgs-filtre {
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:.28rem .7rem;
  font-family:inherit; font-size:.74rem; letter-spacing:.03em; color:var(--mut);
  cursor:pointer; display:flex; align-items:center; gap:.35rem; transition:all .15s;
}
#vgs .vgs-filtre .dot { width:8px; height:8px; border-radius:50%; }
#vgs .vgs-filtre.on { border-color:var(--deep); color:var(--deep); background:rgba(13,45,74,.06); }
#vgs #vgs-liste { overflow-y:auto; flex:1; padding:.5rem; }
#vgs .vgs-item {
  width:100%; text-align:left; border:1px solid transparent; background:transparent;
  border-radius:11px; padding:.65rem .75rem; cursor:pointer; font-family:inherit;
  display:flex; gap:.7rem; align-items:flex-start; transition:background .15s,border-color .15s;
}
#vgs .vgs-item:hover { background:rgba(201,168,76,.08); }
#vgs .vgs-item.vu { opacity:.55; }
#vgs .vgs-item .pin {
  flex:none; width:26px; height:26px; border-radius:50%; color:#fff; font-size:.68rem;
  font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
#vgs .vgs-item .nom { font-size:.92rem; color:var(--ink); font-weight:500; line-height:1.3; }
#vgs .vgs-item .sub { font-size:.76rem; color:var(--mut); margin-top:.15rem; }
#vgs .vgs-item .dist { font-size:.74rem; color:var(--gold); margin-top:.15rem; letter-spacing:.03em; }

/* Fiche */
#vgs #vgs-fiche { display:none; overflow-y:auto; flex:1; }
#vgs #vgs-fiche.on { display:block; }
#vgs #vgs-liste.off { display:none; }
#vgs .vgs-fiche-photo { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
#vgs .vgs-fiche-body { padding:1rem 1.1rem 1.3rem; }
#vgs #vgs-retour {
  border:none; background:transparent; color:var(--mut); font-family:inherit;
  font-size:.8rem; cursor:pointer; padding:.85rem 1.1rem .2rem; letter-spacing:.04em;
}
#vgs #vgs-retour:hover { color:var(--deep); }
#vgs .vgs-fiche-cat { font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin-bottom:.35rem; }
#vgs #vgs-fiche-nom { font-family:'Cormorant Garamond',serif; font-weight:500; font-size:1.55rem; color:var(--deep); line-height:1.15; margin-bottom:.6rem; }
#vgs #vgs-fiche-dist { font-size:.8rem; color:var(--gold); letter-spacing:.04em; margin-bottom:.6rem; display:none; }
#vgs #vgs-fiche-texte { font-size:.9rem; color:var(--ink); line-height:1.75; }
#vgs #vgs-fiche-note { margin-top:.8rem; font-size:.83rem; color:var(--mut); border-left:2px solid var(--gold); padding-left:.75rem; line-height:1.65; }
#vgs .vgs-fiche-actions { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.1rem; }
#vgs .vgs-btn {
  border:1px solid var(--deep); background:var(--deep); color:#fff; font-family:inherit;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; padding:.55rem 1rem;
  border-radius:999px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
  transition:opacity .2s;
}
#vgs .vgs-btn:hover { opacity:.85; }
#vgs .vgs-btn.ghost { background:transparent; color:var(--deep); }
#vgs .vgs-btn.gold { background:var(--gold); border-color:var(--gold); color:var(--deep); }
#vgs #vgs-audio-player { width:100%; margin-top:1rem; display:none; }
#vgs #vgs-cta { display:none; margin-top:0; }

/* Carte */
#vgs .vgs-carte-wrap { position:relative; height:660px; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--deep-2); }
#vgs #vgs-carte { position:absolute; inset:0; z-index:1; }
#vgs #vgs-carte-fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(250,249,247,.7); font-size:.9rem; padding:2rem; text-align:center; z-index:0; }
#vgs .vgs-basemap {
  position:absolute; top:12px; right:12px; z-index:500; display:flex; border-radius:999px; overflow:hidden;
  border:1px solid rgba(13,45,74,.25); background:#fff;
}
#vgs .vgs-basemap button { border:none; background:#fff; color:var(--mut); font-family:inherit; font-size:.74rem; letter-spacing:.05em; padding:.4rem .8rem; cursor:pointer; }
#vgs .vgs-basemap button.on { background:var(--deep); color:#fff; }
#vgs .vgs-pastille { border-radius:50%; color:#fff; font-weight:600; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 6px rgba(0,0,0,.4); border:2px solid rgba(255,255,255,.85); }
#vgs .vgs-pastille.vu { opacity:.55; }
#vgs .vgs-label {
  background:rgba(13,45,74,.85); color:#fff; font-family:'Jost',sans-serif; font-size:.72rem;
  letter-spacing:.03em; padding:.15rem .5rem; border-radius:6px; white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
#vgs .vgs-user-dot { width:16px; height:16px; border-radius:50%; background:#2f7fe0; border:3px solid #fff; box-shadow:0 0 0 0 rgba(47,127,224,.5); animation:vgsPulse 2s infinite; }
@keyframes vgsPulse { 0%{box-shadow:0 0 0 0 rgba(47,127,224,.5);} 70%{box-shadow:0 0 0 16px rgba(47,127,224,0);} 100%{box-shadow:0 0 0 0 rgba(47,127,224,0);} }
@media (prefers-reduced-motion:reduce) { #vgs .vgs-user-dot { animation:none; } .gsan-vgs-hero-wrap .gsan-hero img { animation:none; transform:none; } }

#vgs .vgs-attrib { max-width:1180px; margin:.5rem auto 0; font-size:.68rem; color:var(--mut); text-align:right; }
#vgs .vgs-attrib a { color:var(--mut); }

@media (max-width:900px) {
  #vgs .vgs-layout { grid-template-columns:1fr; }
  #vgs .vgs-carte-wrap { height:56vh; min-height:380px; order:-1; }
  #vgs .vgs-panel { height:auto; max-height:70vh; }
  #vgs .vgs-gpsbar { position:sticky; top:0; z-index:600; }
}
</style>

<div class="gsan-vgs-hero-wrap">
  <div class="gsan-hero">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/oia-santorin-cyclades-4.jpg" alt="Visite guidée interactive de Santorin, vue sur la caldeira" loading="eager" fetchpriority="high">
    <div class="gsan-hero-overlay"></div>
    <div class="gsan-hero-content">
      <div class="gsan-eyebrow"><span>Explorer Santorin</span></div>
      <h1>Carte interactive<br>de <em>Santorin</em></h1>
      <p>Villages de la caldeira, sites archéologiques, musées, plages de sable noir, points de vue et volcan : 30 étapes sur la carte satellite, avec fiche complète, lecture audio et guidage GPS selon votre position sur l&rsquo;île.</p>
      <div class="gsan-hero-stats">
        <div class="gsan-hero-stat"><div class="num">30</div><div class="label">Étapes guidées</div></div>
        <div class="gsan-hero-stat"><div class="num">6</div><div class="label">Catégories de lieux</div></div>
        <div class="gsan-hero-stat"><div class="num">3 600</div><div class="label">Ans d&rsquo;histoire</div></div>
      </div>
    </div>
  </div>
</div>

<div id="vgs">
  <div class="vgs-intro">
    <h2>Votre visite guidée de Santorin, étape par étape</h2>
    <p>Touchez un point sur la carte ou un lieu dans la liste pour ouvrir sa fiche. Sur place, activez le guidage GPS : la carte affiche votre position et vous propose les étapes les plus proches.</p>
  </div>

  <div class="vgs-gpsbar">
    <div class="left">
      <button id="vgs-gps" type="button">Activer le guidage GPS</button>
      <span id="vgs-gps-status">Guidage désactivé</span>
    </div>
    <span id="vgs-progress">0 / 30 lieux vus</span>
  </div>

  <div id="vgs-next" aria-label="Prochaines étapes proposées"></div>

  <div class="vgs-layout">
    <aside class="vgs-panel">
      <div class="vgs-tools">
        <input id="vgs-search" type="search" placeholder="Rechercher un lieu (Oia, Akrotiri, Kamari...)" aria-label="Rechercher un lieu">
        <div class="vgs-filtres" id="vgs-filtres"></div>
      </div>
      <div id="vgs-liste" aria-live="polite"></div>
      <div id="vgs-fiche">
        <button id="vgs-retour" type="button">← Retour à la liste</button>
        <img id="vgs-fiche-photo" class="vgs-fiche-photo" alt="" style="display:none">
        <div class="vgs-fiche-body">
          <div class="vgs-fiche-cat" id="vgs-fiche-cat"></div>
          <h3 id="vgs-fiche-nom"></h3>
          <div id="vgs-fiche-dist"></div>
          <p id="vgs-fiche-texte"></p>
          <p id="vgs-fiche-note"></p>
          <audio id="vgs-audio-player" controls="" preload="none"></audio>
          <div class="vgs-fiche-actions">
            <button id="vgs-ecouter" class="vgs-btn gold" type="button">Écouter la fiche</button>
            <button id="vgs-vu" class="vgs-btn ghost" type="button">Marquer comme vu</button>
            <a id="vgs-cta" class="vgs-btn" href="#">Lire l&rsquo;article</a>
          </div>
        </div>
      </div>
    </aside>

    <div class="vgs-carte-wrap">
      <div id="vgs-carte-fallback">Chargement de la carte de Santorin&#8230;</div>
      <div id="vgs-carte" role="application" aria-label="Carte interactive de Santorin"></div>
      <div class="vgs-basemap">
        <button id="vgs-sat" type="button" class="on">Satellite</button>
        <button id="vgs-plan" type="button">Plan</button>
      </div>
    </div>
  </div>

  <p class="vgs-attrib">Fonds de carte : © <a href="https://www.openstreetmap.org/copyright" rel="noopener" target="_blank">OpenStreetMap</a>, © CARTO, imagerie © Esri</p>
</div>



<!-- 
==========================================================
CONTENU SEO SOUS LA CARTE INTERACTIVE DE SANTORIN
Site : visiter-santorini.fr
CSS : WP Code snippet "gr-activite"
==========================================================
A coller dans un SECOND bloc "HTML personnalise" (Gutenberg),
juste sous le bloc de la carte interactive, sur la meme page.

Mot-cle principal : carte interactive de Santorin

Tarifs et horaires verifies en juillet 2026 (site d'Akrotiri 20 euros,
ancienne Thera 10 euros, musees 10 euros, telepherique 10 euros).
A revoir chaque debut de saison.
==========================================================
-->

<!-- CSS complémentaire (listes + CTA immersif repris du système oiap, non chargé dans gr-activite) -->
<style>
#santorin-seo .gr-section ul,
#santorin-seo .gr-programme-inner ul{list-style:none;padding-left:24px;margin:16px 0}
#santorin-seo .gr-section ul li,
#santorin-seo .gr-programme-inner ul li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.6}
#santorin-seo .gr-section ul li::before,
#santorin-seo .gr-programme-inner ul li::before{content:"›";position:absolute;left:0;color:#c5a255;font-size:1.3em;font-weight:700;line-height:1.4}
/* Chaque bloc h3 + texte forme une unité : titre collé à son paragraphe,
   espace généreux APRES le bloc, avant le h3 suivant. */
#santorin-seo .gr-section h3,
#santorin-seo .gr-programme-inner h3{margin-top:3.4rem;margin-bottom:.55rem;line-height:1.3}
#santorin-seo .gr-section h3 + p,
#santorin-seo .gr-programme-inner h3 + p{margin-top:0}
#santorin-seo .gr-section h2 + p,
#santorin-seo .gr-programme-inner h2 + p{margin-top:1.2rem}
#santorin-seo .gr-section p,
#santorin-seo .gr-programme-inner p{margin-bottom:1rem}
#santorin-seo .gr-section ul:last-child,
#santorin-seo .gr-programme-inner ul:last-child,
#santorin-seo .gr-section p:last-child,
#santorin-seo .gr-programme-inner p:last-child{margin-bottom:0}
#santorin-seo .gr-ctaimg{position:relative;min-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'Jost',sans-serif}
#santorin-seo .gr-ctaimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
#santorin-seo .gr-ctaimg-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,45,74,.9) 0%,rgba(13,45,74,.6) 100%)}
#santorin-seo .gr-ctaimg-content{position:relative;z-index:2;text-align:center;padding:4rem 5vw;max-width:660px}
#santorin-seo .gr-ctaimg-eyebrow{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:#c9a84c;margin-bottom:1rem;display:flex;align-items:center;justify-content:center;gap:.8rem}
#santorin-seo .gr-ctaimg-eyebrow span{width:24px;height:1px;background:#c9a84c;display:block}
#santorin-seo .gr-ctaimg-content h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:#faf9f7;line-height:1.1;margin-bottom:1.2rem}
#santorin-seo .gr-ctaimg-content h2 em{font-style:italic;color:#e8d5a0}
#santorin-seo .gr-ctaimg-content p{color:rgba(250,249,247,.7);font-size:.92rem;line-height:1.75;margin:0 auto 2.4rem;max-width:520px}
#santorin-seo .gr-ctaimg-btn{display:inline-flex;align-items:center;gap:.6rem;background:#c9a84c;color:#0d2d4a;font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;padding:.95rem 2.1rem;border-radius:2px;text-decoration:none;transition:background .3s,transform .2s}
#santorin-seo .gr-ctaimg-btn:hover{background:#e8d5a0;transform:translateY(-2px)}
#santorin-seo .gr-ctaimg-btn i{font-size:.62rem;transition:transform .2s}
#santorin-seo .gr-ctaimg-btn:hover i{transform:translateX(3px)}
</style>

<div class="gr-activite" id="santorin-seo">

<!-- ======================== CE QUE PRÉSENTE LA CARTE (fond blanc) ======================== -->
<div class="gr-section">
  <span class="gr-eyebrow">Les 30 points</span>
  <h2>Ce que présente la carte interactive <em>de Santorin</em></h2>

  <p>La carte réunit 30 points répartis sur le rebord de la caldeira, l&rsquo;intérieur viticole, les deux côtes de l&rsquo;île et le centre de la baie. Chaque point ouvre ensuite une fiche avec un résumé, une note pratique et une lecture audio. Les six familles ci-dessous correspondent aux filtres colorés de la carte, ce qui permet d&rsquo;organiser la visite selon le temps disponible et le mode de transport choisi.</p>

  <h3>Les villages de Santorin</h3>

  <p>Dix points couvrent les localités de l&rsquo;île, du balcon de la caldeira aux villages fortifiés de l&rsquo;intérieur et aux stations de la côte est.</p>

  <ul>
    <li><strong>Oia</strong> : village de la pointe nord, reconstruit après le séisme de 1956 dans le respect de l&rsquo;architecture cycladique.</li>
    <li><strong>Imerovigli</strong> : le point le plus haut du bord de caldeira, à environ 300 mètres au-dessus de la mer.</li>
    <li><strong>Firostefani</strong> : la couronne de Fira, même vue plongeante avec une fréquentation moindre.</li>
    <li><strong>Fira</strong> : capitale de l&rsquo;île, nœud du réseau de bus et base la plus pratique sans voiture.</li>
    <li><strong>Pyrgos</strong> : ancien village fortifié en cercles concentriques, capitale de Santorin jusqu&rsquo;au XIXe siècle.</li>
    <li><strong>Megalochori</strong> : village viticole aux clochers-porches, entouré de domaines d&rsquo;assyrtiko.</li>
    <li><strong>Emporio</strong> : plus grand village de l&rsquo;île, autour d&rsquo;un kasteli médiéval en labyrinthe.</li>
    <li><strong>Le village d&rsquo;Akrotiri</strong> : promontoire du sud-ouest, organisé autour de son château vénitien.</li>
    <li><strong>Le village de Perissa</strong> : versant sud du Mesa Vouno, autour de la plus grande église de l&rsquo;île.</li>
    <li><strong>Le village de Kamari</strong> : côte est, né du séisme de 1956 et habité toute l&rsquo;année.</li>
  </ul>

  <h3>Les sites archéologiques</h3>

  <p>Deux points racontent également les deux grandes époques de l&rsquo;île, séparées par mille ans et par l&rsquo;éruption minoenne.</p>

  <ul>
    <li><strong>Le site d&rsquo;Akrotiri</strong> : cité de l&rsquo;âge du bronze ensevelie sous les cendres il y a environ 3 600 ans, fouillée depuis 1967 et protégée par un abri bioclimatique.</li>
    <li><strong>L&rsquo;ancienne Théra</strong> : cité dorienne, hellénistique puis romaine, perchée sur la crête du Mesa Vouno à 360 mètres au-dessus de Kamari et Perissa.</li>
  </ul>

  <h3>Les musées</h3>

  <p>Trois points complètent ensuite les sites, puisque les objets et les fresques ont été déposés loin de leur lieu de découverte.</p>

  <ul>
    <li><strong>Le Musée de la Préhistoire de Théra</strong>, à Fira : les fresques et les objets d&rsquo;Akrotiri, à voir avant ou après le site.</li>
    <li><strong>Le Musée archéologique de Théra</strong>, à Fira : les siècles dorien, hellénistique et romain, en écho à l&rsquo;ancienne Théra.</li>
    <li><strong>Le Musée naval d&rsquo;Oia</strong> : l&rsquo;épopée maritime du XIXe siècle qui a financé les demeures du village.</li>
  </ul>

  <h3>Les plages de sable noir et de sable rouge</h3>

  <p>Six points suivent également le littoral, des criques de la caldeira aux longues plages volcaniques du sud et de l&rsquo;est.</p>

  <ul>
    <li><strong>La baie d&rsquo;Ammoudi</strong> : le port d&rsquo;Oia au pied de falaises rouges, avec sa baignade en eau profonde.</li>
    <li><strong>La Red Beach</strong> : falaises de scories rouges près d&rsquo;Akrotiri, accès par un sentier parfois fermé pour éboulements.</li>
    <li><strong>Vlychada</strong> : sable gris sombre au pied de falaises de cendre blanche sculptées par le vent.</li>
    <li><strong>Perivolos</strong> : la plage la plus animée, beach bars et sports nautiques sur plusieurs kilomètres.</li>
    <li><strong>Perissa</strong> : sable noir au pied du Mesa Vouno, ambiance familiale et abordable.</li>
    <li><strong>Kamari</strong> : grande plage organisée de la côte est, promenade piétonne et liaison directe avec Fira.</li>
  </ul>

  <h3>Les points de vue sur la caldeira</h3>

  <p>Six points servent enfin à cadrer le volcan, à des heures et depuis des altitudes différentes.</p>

  <ul>
    <li><strong>Le château d&rsquo;Oia</strong> : les ruines vénitiennes du coucher de soleil, accès libre et gratuit.</li>
    <li><strong>Le rocher de Skaros</strong> : ancienne capitale vénitienne de l&rsquo;île, sentier depuis Imerovigli jusqu&rsquo;à la chapelle de Theoskepasti.</li>
    <li><strong>Le vieux port et le téléphérique de Fira</strong> : la caldeira vue depuis la falaise et depuis l&rsquo;eau.</li>
    <li><strong>Le monastère du Prophète Élie</strong> : point culminant de Santorin à environ 567 mètres, panorama sur l&rsquo;île entière.</li>
    <li><strong>Le phare d&rsquo;Akrotiri</strong> : la caldeira vue de l&rsquo;extérieur, alternative à Oia pour le coucher du soleil.</li>
    <li><strong>Santo Wines</strong> : terrasse panoramique au-dessus de la baie, avec parking et dégustation d&rsquo;assyrtiko.</li>
  </ul>

  <h3>Le volcan de Santorin et la caldeira</h3>

  <p>Trois points se rejoignent uniquement en bateau, au centre de la baie, et forment la journée volcan classique au départ du vieux port de Fira ou d&rsquo;Ammoudi. <strong>Néa Kaméni</strong> est l&rsquo;îlot noir actif, avec son sentier de scories jusqu&rsquo;aux cratères sommitaux, <strong>Palea Kameni</strong> abrite les sources chaudes ocre de la baie d&rsquo;Agios Nikolaos, et <strong>Thirassia</strong> ferme la caldeira à l&rsquo;ouest avec son village perché de Manolas.</p>
</div>


&nbsp;

<!-- ======================== FAQ (fond crème) ======================== -->
<div class="gr-programme">
  <div class="gr-programme-inner">
    <span class="gr-eyebrow">Préparer le séjour</span>
    <h2>Questions fréquentes <em>sur la visite de Santorin</em></h2>

    <h3>Combien de jours faut-il pour visiter Santorin ?</h3>

    <p>Trois jours pleins couvrent l&rsquo;essentiel. Vous profitez d&rsquo;abord d&rsquo;une journée sur le bord de caldeira entre Fira, Firostefani, Imerovigli et Oia. Ensuite, prévoyez une journée pour Akrotiri, Red beach et le sud. Enfin, offrez-vous une journée pour découvrir les villages de l&rsquo;intérieur ainsi qu&rsquo;une plage. Quatre à cinq jours permettent ensuite d&rsquo;ajouter l&rsquo;ancienne Théra, une dégustation dans un domaine et une sortie en bateau vers le volcan. Les 30 points de la carte se parcourent confortablement sur cette durée. Sur une escale d&rsquo;une journée, les filtres permettent de cibler les villages de la caldeira seuls.</p>

    <h3>Comment se déplacer sur l&rsquo;île sans voiture ?</h3>

    <p>Le réseau de bus KTEL rayonne depuis la gare routière de Fira vers Oia, l&rsquo;aéroport, le port d&rsquo;Athinios, Kamari, Perissa, Akrotiri et les villages de l&rsquo;intérieur. Loger à Fira réduit alors les correspondances au minimum. Uber et Bolt ne fonctionnent pas à Santorin, les taxis se prennent à l&rsquo;aéroport, au port ou depuis un hôtel. La location de voiture ou de scooter reste également la solution la plus souple pour le sud et l&rsquo;ancienne Théra, avec deux réserves : les ruelles de village sont étroites et le stationnement se raréfie vite en haute saison.</p>

    <h3>Quels sont les incontournables de Santorin ?</h3>

    <p>Cinq points concentrent l&rsquo;essentiel d&rsquo;un premier séjour.</p>

    <ul>
      <li><strong>Le site d&rsquo;Akrotiri</strong>, la cité de l&rsquo;âge du bronze sous son abri.</li>
      <li><strong>Oia et les ruines de son château</strong>, pour la caldeira au coucher du soleil.</li>
      <li><strong>Le Musée de la Préhistoire de Théra</strong>, qui conserve les fresques d&rsquo;Akrotiri.</li>
      <li><strong>Le sentier de la caldeira</strong> entre Fira et Oia, environ 10 kilomètres et 3 à 4 heures de marche.</li>
      <li><strong>Une plage de sable noir</strong>, Perissa ou Kamari selon le versant du Mesa Vouno.</li>
    </ul>

    <p>En ajoutant deux étapes, prenez Pyrgos et son kasteli puis le monastère du Prophète Élie pour le panorama depuis le point culminant de l&rsquo;île.</p>

    <h3>Combien coûtent les entrées des sites et des musées ?</h3>

    <p>Le site d&rsquo;Akrotiri est affiché à 20 euros en 2026, l&rsquo;ancienne Théra à 10 euros, le Musée de la Préhistoire de Théra et le Musée archéologique de Théra à 10 euros chacun. Les moins de 25 ans ressortissants de l&rsquo;Union européenne entrent gratuitement sur présentation d&rsquo;une pièce d&rsquo;identité, ainsi que les moins de 18 ans venant d&rsquo;un autre pays. Enfin, ces tarifs relèvent du ministère grec de la Culture et ont augmenté en 2025 : vérifiez-les avant le départ, ils évoluent d&rsquo;une saison à l&rsquo;autre.</p>

    <h3>Quels sont les horaires des sites archéologiques ?</h3>

    <p>Le site d&rsquo;Akrotiri ouvre de 8 heures à 20 heures en été, avec deux journées courtes le lundi et le jeudi de 8 h 30 à 15 h 30 ; en hiver, il passe à 8 h 30 &#8211; 15 h 30 et ferme le mardi. L&rsquo;ancienne Théra ouvre de 8 h 30 à 15 h 30 et ferme le mercredi, avec un accès très réduit de décembre à février. Le Musée de la Préhistoire ferme également le mardi, le Musée archéologique de Théra a rouvert en juin 2025 après rénovation. La dernière admission tombe vingt minutes avant la fermeture.</p>

    <h3>Où voir le coucher du soleil sans la foule d&rsquo;Oia ?</h3>

    <p>Le château d&rsquo;Oia se remplit plus d&rsquo;une heure avant l&rsquo;heure officielle en été. Trois alternatives figurent sur la carte. Le phare d&rsquo;Akrotiri offre la caldeira vue de l&rsquo;extérieur, à la pointe sud-ouest, avec un parking limité au bout d&rsquo;une route étroite. La terrasse de Santo Wines, près de Pyrgos, donne le même spectacle avec parking et dégustation, sur réservation. Le kasteli de Pyrgos monte ensuite plus haut, à 360 degrés, sans aucune billetterie. Enfin, le lever du soleil sur le bord de caldeira offre la même lumière rasante à personne.</p>

    <h3>Quelle est la meilleure période pour venir à Santorin ?</h3>

    <p>Mai, juin, septembre et début octobre réunissent une mer déjà chaude, des sentiers praticables et une affluence supportable. Juillet et août cumulent chaleur, foule et prix hauts, avec un meltemi qui souffle fort sur la côte ouest. Avril et fin octobre conviennent également aux marcheurs, la baignade devenant alors aléatoire. L&rsquo;hiver ferme une partie des hôtels et des restaurants, les horaires des sites se réduisent et le vent domine, ce qui reste la période la plus calme pour les villages.</p>

    <h3>L&rsquo;île est-elle sûre après la crise sismique de 2025 ?</h3>

    <p>La crise de janvier et février 2025 a produit plus de 25 000 secousses entre Santorin et Amorgos, avec un état d&rsquo;urgence local et le départ de plusieurs milliers d&rsquo;habitants. Une étude publiée dans la revue Science en novembre 2025 l&rsquo;attribue à une intrusion de magma en profondeur, à plus de 10 kilomètres sous le plancher marin, sans que le magma atteigne la surface. Ainsi, aucune éruption n&rsquo;a eu lieu. L&rsquo;activité est d&rsquo;ailleurs revenue à des niveaux normaux depuis mai 2025 et la surveillance a été renforcée autour de la caldeira et du volcan sous-marin Kolumbo. Les sites et musées, fermés par précaution durant l&rsquo;hiver 2025, ont également tous rouvert.</p>

    <h3>Que faut-il savoir quand on arrive en croisière ?</h3>

    <p>Santorin n&rsquo;a pas de quai pour les paquebots : les navires mouillent dans la caldeira et débarquent par navettes au vieux port de Fira. Un plafond de 8 000 croisiéristes par jour s&rsquo;applique depuis 2025, avec un système de créneaux géré par le fonds portuaire. Une taxe de débarquement s&rsquo;ajoute également au billet, à 20 euros par escale du 1er juin au 30 septembre, 12 euros en avril, mai et octobre, 4 euros de novembre à mars. Seuls les passagers de croisière la paient, les arrivées en ferry et en avion restent hors du dispositif. Depuis le vieux port, le téléphérique monte à Fira en trois minutes pour 10 euros l&rsquo;aller simple, 5 euros pour les 6 à 12 ans ; les files atteignent parfois trois quarts d&rsquo;heure les jours de forte escale. L&rsquo;escalier compte près de 600 marches ; la montée à dos d&rsquo;âne, que nous vous invitons à laisser de côté, se pratique toujours.</p>

    <h3>La carte interactive de Santorin fonctionne-t-elle sur place ?</h3>

    <p>Oui, depuis un téléphone, avec deux conditions. Le fond de carte se télécharge à l&rsquo;affichage, une connexion mobile reste donc nécessaire pour le voir apparaître. Le guidage GPS demande l&rsquo;autorisation de localisation du navigateur. Une fois la page ouverte et la carte chargée, les fiches et l&rsquo;audio restent consultables même si le réseau faiblit sur les routes du sud. Enfin, les points marqués comme vus sont enregistrés dans le navigateur et se retrouvent à la visite suivante.</p>

    <div class="gr-note" style="margin-top: 24px;">
      <p><strong>À prévoir avant de partir sur l&rsquo;île :</strong> les villages de la caldeira se parcourent uniquement à pied, par des ruelles et des escaliers en pente, des chaussures fermées à semelle adhérente valent mieux que des sandales. Le sable noir de Perissa et de Kamari devient brûlant l&rsquo;après-midi, prévoyez des sandales pour rejoindre l&rsquo;eau. Ensuite, aucun point d&rsquo;eau n&rsquo;existe à l&rsquo;ancienne Théra ni sur le sentier Fira &#8211; Oia, emportez de quoi boire d&rsquo;avril à octobre. Enfin, chargez le téléphone avant la journée, le guidage GPS et la lecture audio consomment de la batterie.</p>
    </div>

  </div>
</div>


<!-- ======================== CTA FINAL : Santorin (image immersive) ======================== -->
<div class="gr-ctaimg">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/ammoudi-port-oia-santorin.jpg" alt="Le port d'Ammoudi au pied d'Oia à Santorin en Grèce">
  <div class="gr-ctaimg-ov"></div>
  <div class="gr-ctaimg-content">
    <div class="gr-ctaimg-eyebrow"><span></span>Continuer la visite<span></span></div>
    <h2>Découvrir Santorin <em>au-delà de la carte</em></h2>
    <p>Les villages de la caldeira, les domaines d&rsquo;assyrtiko, les excursions vers le volcan et Thirassia, les plages volcaniques et les conseils pour choisir sa période : retrouvez tout le guide pour organiser le séjour.</p>
    <a class="gr-ctaimg-btn" href="https://visiter-santorini.fr/santorin/">Découvrir Santorin <i class="fa-solid fa-arrow-right"></i></a>
  </div>
</div>

</div>
<!-- Fin .gr-activite -->
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-santorin%2F&amp;linkname=Carte%20interactive%20de%20Santorin%20%3A%20les%20incontournables" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-santorin%2F&amp;linkname=Carte%20interactive%20de%20Santorin%20%3A%20les%20incontournables" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-santorin%2F&amp;linkname=Carte%20interactive%20de%20Santorin%20%3A%20les%20incontournables" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fcarte-interactive-santorin%2F&#038;title=Carte%20interactive%20de%20Santorin%20%3A%20les%20incontournables" data-a2a-url="https://visiter-santorini.fr/carte-interactive-santorin/" data-a2a-title="Carte interactive de Santorin : les incontournables"></a></p><p>L’article <a href="https://visiter-santorini.fr/carte-interactive-santorin/">Carte interactive de Santorin : les incontournables</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Jeu de piste à Santorin : 12 sites incontournables</title>
		<link>https://visiter-santorini.fr/jeu-de-piste-santorin/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Wed, 01 Jul 2026 07:48:06 +0000</pubDate>
				<category><![CDATA[Santorin]]></category>
		<category><![CDATA[Jeux et quiz]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11437</guid>

					<description><![CDATA[<p>Jeu de piste · Grèce Go GRÈCE GOSantorin Un parcours à faire en famille pour découvrir Santorin, la plus célèbre des îles grecques, née d&#8217;un volcan. Reconnais un site emblématique à chaque étape, de la caldeira aux villages blancs. Pas le temps de tout visiter sur place ? Réponds aux questions pour débloquer ton badge.&#8230;&#160;<a href="https://visiter-santorini.fr/jeu-de-piste-santorin/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Jeu de piste à Santorin : 12 sites incontournables</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/jeu-de-piste-santorin/">Jeu de piste à Santorin : 12 sites incontournables</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- BZH Go Mégalithes (mode collection) — jeu de piste patrimoine. Reconnais 8 types de monuments mégalithiques, dans l'ordre que l'enfant veut. Coller dans un bloc "HTML personnalise" (Gutenberg) ou un snippet WP Code de type HTML. Tout est encapsule sous #santo-go. -->
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&#038;family=Space+Grotesk:wght@400;500;600;700&#038;display=swap" rel="stylesheet">

<style>
#santo-go{position:relative;overflow:hidden;box-sizing:border-box}
#santo-go{
  --ardoise:#0E2C49; --ardoise-2:#143A5E; --ardoise-3:#1C4E78; --marle:#2E74A6;
  --or:#F2A65A; --or-clair:#FBD089; --hermine:#F5F7FA; --hermine-soft:rgba(245,247,250,.66);
  --mousse:#76B493; --brique:#C5664C; --trace:rgba(232,178,76,.22);
  --shadow:0 18px 40px -18px rgba(0,0,0,.7); --r:18px; --node:24px;
}
#santo-go, #santo-go *{box-sizing:border-box;margin:0;padding:0}
#santo-go{font-family:"Space Grotesk",system-ui,sans-serif;color:var(--hermine);
  background:radial-gradient(125% 85% at 50% -12%, #1F6FA6 0%, var(--ardoise) 52%, #061528 100%);
  min-height:100dvh;-webkit-font-smoothing:antialiased;}
#santo-go .app{position:relative;max-width:440px;margin:0 auto;min-height:100dvh;
  padding:0 18px calc(28px + env(safe-area-inset-bottom));overflow:hidden;}
#santo-go .amb{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#santo-go .amb svg{position:absolute;opacity:.06;fill:var(--hermine);animation:bzhdrift 26s linear infinite}
#santo-go .amb svg:nth-child(1){top:8%;left:12%;width:34px;animation-duration:30s}
#santo-go .amb svg:nth-child(2){top:26%;left:78%;width:22px;animation-duration:38s;animation-delay:-6s}
#santo-go .amb svg:nth-child(3){top:62%;left:8%;width:28px;animation-duration:34s;animation-delay:-12s}
#santo-go .amb svg:nth-child(4){top:80%;left:70%;width:20px;animation-duration:42s;animation-delay:-4s}
#santo-go .amb svg:nth-child(5){top:46%;left:46%;width:16px;animation-duration:46s;animation-delay:-18s}
@keyframes bzhdrift{from{transform:translateY(0) rotate(0)}to{transform:translateY(-26px) rotate(8deg)}}
#santo-go .screen{position:relative;z-index:1;display:none;animation:bzhrise .5s cubic-bezier(.2,.7,.2,1) both}
#santo-go .screen.on{display:block}
@keyframes bzhrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#santo-go /* INTRO */
.intro{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 24px}
#santo-go .seal{width:96px;height:96px;margin:0 auto 22px;position:relative}
#santo-go .seal .ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--trace);animation:bzhspin 30s linear infinite}
#santo-go .seal .ring.b{inset:11px;border-style:dashed;border-color:rgba(232,178,76,.35);animation-direction:reverse;animation-duration:22s}
@keyframes bzhspin{to{transform:rotate(360deg)}}
#santo-go .seal .core{position:absolute;inset:24px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--or-clair), var(--or) 70%);
  display:grid;place-items:center;box-shadow:0 0 26px rgba(232,178,76,.45)}
#santo-go .seal .core svg{width:26px;height:26px;fill:var(--ardoise)}
#santo-go .eyebrow{text-align:center;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--or);font-weight:600;margin-bottom:14px;padding-left:.42em}
#santo-go .title{font-family:"Cinzel",serif;text-align:center;line-height:.92;letter-spacing:.02em}
#santo-go .title .go{display:block;white-space:nowrap;font-size:clamp(2.2rem,14vw,3.5rem);font-weight:700;
  background:linear-gradient(180deg,var(--hermine),#C9C6BD);-webkit-background-clip:text;background-clip:text;color:transparent}
#santo-go .title .ville{display:block;font-size:clamp(1.9rem,11vw,2.5rem);font-weight:600;color:var(--or);margin-top:2px}
#santo-go .promise{text-align:center;color:var(--hermine-soft);font-size:.98rem;line-height:1.6;max-width:33ch;margin:22px auto 0}
#santo-go .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px auto 0;max-width:340px}
#santo-go .chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;padding:7px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(244,239,230,.12);color:var(--hermine-soft)}
#santo-go .chip svg{width:13px;height:13px;fill:none;stroke:var(--or);stroke-width:1.7}
#santo-go .cta{display:block;width:100%;margin-top:30px;border:0;cursor:pointer;font-family:"Space Grotesk";font-size:1.04rem;font-weight:700;
  letter-spacing:.01em;color:var(--ardoise);padding:17px;border-radius:14px;
  background:linear-gradient(180deg,var(--or-clair),var(--or));box-shadow:0 14px 30px -12px rgba(232,178,76,.6);
  transition:transform .15s ease, box-shadow .15s ease}
#santo-go .cta:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(232,178,76,.7)}
#santo-go .cta:active{transform:translateY(0)}
#santo-go .foot{text-align:center;font-size:.72rem;color:rgba(244,239,230,.34);margin-top:18px}
#santo-go /* HUD */
.hud{padding:24px 0 8px}
#santo-go .hud-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
#santo-go .brandmini{font-family:"Cinzel",serif;font-weight:600;font-size:.92rem;letter-spacing:.06em}
#santo-go .brandmini b{color:var(--or)}
#santo-go .counter{font-size:.78rem;font-weight:600;color:var(--hermine-soft);letter-spacing:.04em}
#santo-go .trail{position:relative;display:flex;justify-content:space-between;align-items:center;padding:0 0;margin-bottom:6px}
#santo-go .trail::before{content:"";position:absolute;left:12px;right:12px;top:50%;height:2px;background:rgba(244,239,230,.14);transform:translateY(-50%)}
#santo-go .trail .fill{position:absolute;left:12px;top:50%;height:2px;background:var(--or);transform:translateY(-50%);transition:width .5s ease;box-shadow:0 0 10px var(--or)}
#santo-go .node{position:relative;z-index:1;width:var(--node);height:var(--node);border-radius:50%;background:var(--ardoise-2);
  border:2px solid rgba(244,239,230,.22);display:grid;place-items:center;font-size:.66rem;font-weight:700;color:var(--hermine-soft);transition:all .35s ease;flex:0 0 auto}
#santo-go .node.done{background:var(--or);border-color:var(--or);color:var(--ardoise)}
#santo-go .node.current{border-color:var(--or);color:var(--or);box-shadow:0 0 0 4px rgba(232,178,76,.18);animation:bzhpulse 2s ease-in-out infinite}
#santo-go .node.done svg{width:12px;height:12px;stroke:var(--ardoise);stroke-width:2.8;fill:none}
@keyframes bzhpulse{0%,100%{box-shadow:0 0 0 4px rgba(232,178,76,.16)}50%{box-shadow:0 0 0 8px rgba(232,178,76,.05)}}
#santo-go /* SCENE */
.scene{background:linear-gradient(165deg,var(--ardoise-2),var(--ardoise-3));border:1px solid rgba(244,239,230,.09);
  border-radius:var(--r);padding:22px 20px 20px;box-shadow:var(--shadow);margin-top:14px}
#santo-go .scene .step-tag{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--or)}
#santo-go .scene .step-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--or)}
#santo-go .lieu{font-family:"Cinzel",serif;font-size:1.62rem;font-weight:700;line-height:1.12;margin:10px 0 3px}
#santo-go .zone{font-size:.82rem;color:var(--hermine-soft);display:flex;align-items:center;gap:6px}
#santo-go .zone svg{width:13px;height:13px;fill:none;stroke:var(--or);stroke-width:1.7}
#santo-go .find{margin:18px 0;padding:14px 14px;border-radius:12px;background:rgba(232,178,76,.07);border:1px solid rgba(232,178,76,.2)}
#santo-go .find .lbl{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
#santo-go .find .lbl svg{width:15px;height:15px;fill:none;stroke:var(--or);stroke-width:1.8}
#santo-go .find p{font-size:.96rem;line-height:1.5}
#santo-go .scene-note{margin:-4px 0 16px;padding:11px 13px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(244,239,230,.16);display:flex;gap:9px;align-items:flex-start}
#santo-go .scene-note svg{width:15px;height:15px;flex:0 0 15px;margin-top:2px;fill:none;stroke:var(--or-clair);stroke-width:1.8}
#santo-go .scene-note p{font-size:.85rem;line-height:1.5;color:var(--hermine-soft)}
#santo-go .q{font-weight:600;font-size:1.02rem;line-height:1.4;margin:4px 0 12px}
#santo-go .opts{display:flex;flex-direction:column;gap:9px}
#santo-go .opt{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;font-family:"Space Grotesk";font-size:.96rem;font-weight:500;
  color:var(--hermine);background:rgba(255,255,255,.035);border:1.5px solid rgba(244,239,230,.13);border-radius:12px;padding:14px 14px;transition:all .18s ease}
#santo-go .opt:hover:not(:disabled){border-color:rgba(232,178,76,.5);background:rgba(232,178,76,.06)}
#santo-go .opt:disabled{cursor:default}
#santo-go .opt .key{flex:0 0 24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:.78rem;font-weight:700;background:rgba(244,239,230,.1);color:var(--hermine-soft);transition:all .18s ease}
#santo-go .opt.good{border-color:var(--mousse);background:rgba(118,180,147,.12)}
#santo-go .opt.good .key{background:var(--mousse);color:var(--ardoise)}
#santo-go .opt.bad{border-color:var(--brique);background:rgba(197,102,76,.1);animation:bzhshake .4s}
#santo-go .opt.bad .key{background:var(--brique);color:#fff}
#santo-go .opt.dim{opacity:.42}
@keyframes bzhshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
#santo-go .hint{font-size:.84rem;color:var(--brique);margin-top:12px;display:none;align-items:center;gap:7px}
#santo-go .hint.on{display:flex}
#santo-go .hint svg{width:14px;height:14px;fill:none;stroke:var(--brique);stroke-width:2}
#santo-go /* REVEAL */
.reveal{display:none;margin-top:18px}
#santo-go .reveal.on{display:block;animation:bzhrise .5s both}
#santo-go .reveal .won{display:flex;align-items:center;gap:8px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mousse);margin-bottom:12px}
#santo-go .reveal .won svg{width:16px;height:16px;fill:none;stroke:var(--mousse);stroke-width:2.2}
#santo-go .card{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#243A4D,#1A2A38);
  border:1px solid rgba(232,178,76,.4);box-shadow:0 0 0 1px rgba(232,178,76,.12), 0 22px 44px -20px rgba(0,0,0,.8);animation:bzhflip .7s cubic-bezier(.3,.8,.25,1) both}
@keyframes bzhflip{0%{transform:perspective(800px) rotateY(85deg);opacity:0}60%{opacity:1}100%{transform:perspective(800px) rotateY(0);opacity:1}}
#santo-go .card .glow{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 0%,rgba(232,178,76,.22),transparent 70%)}
#santo-go .card .body{position:relative;padding:18px 18px 16px}
#santo-go .card .ctag{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or)}
#santo-go .card .cname{font-family:"Cinzel",serif;font-size:1.32rem;font-weight:700;margin:5px 0 9px;color:var(--hermine)}
#santo-go .card .lore{font-size:.88rem;line-height:1.55;color:var(--hermine-soft)}
#santo-go .card .herm{position:absolute;top:14px;right:14px;width:26px;height:26px;fill:rgba(244,239,230,.16)}
#santo-go /* PHOTO */
.photo-block{margin-top:14px}
#santo-go .addphoto{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;cursor:pointer;font-family:"Space Grotesk";font-weight:600;font-size:.9rem;
  color:var(--hermine-soft);background:rgba(255,255,255,.03);border:1.5px dashed rgba(244,239,230,.22);border-radius:12px;padding:14px;transition:all .18s}
#santo-go .addphoto:hover{border-color:rgba(232,178,76,.5);color:var(--or)}
#santo-go .addphoto svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7}
#santo-go .photo-wrap{position:relative;border-radius:12px;overflow:hidden;border:1px solid rgba(232,178,76,.3)}
#santo-go .photo-wrap img{display:block;width:100%;max-height:240px;object-fit:cover}
#santo-go .photo-acts{display:flex;gap:8px;margin-top:8px}
#santo-go .photo-acts button{flex:1;cursor:pointer;font-family:"Space Grotesk";font-size:.8rem;font-weight:600;padding:9px;border-radius:9px;
  background:rgba(255,255,255,.04);border:1px solid rgba(244,239,230,.14);color:var(--hermine-soft);transition:all .15s}
#santo-go .photo-acts button:hover{border-color:rgba(232,178,76,.4);color:var(--or)}
#santo-go .photo-cap{font-size:.72rem;color:rgba(244,239,230,.4);margin-top:7px;text-align:center;line-height:1.4}
#santo-go .next{display:block;width:100%;margin-top:16px;border:0;cursor:pointer;font-family:"Space Grotesk";font-size:.98rem;font-weight:700;color:var(--ardoise);
  padding:15px;border-radius:13px;background:linear-gradient(180deg,var(--or-clair),var(--or));box-shadow:0 12px 26px -12px rgba(232,178,76,.55);transition:transform .15s ease}
#santo-go .next:hover{transform:translateY(-2px)}
#santo-go .next.ghost{background:transparent;color:var(--hermine-soft);box-shadow:none;border:1.5px solid rgba(244,239,230,.18)}
#santo-go .reset{display:block;margin:20px auto 0;background:none;border:0;cursor:pointer;font-family:"Space Grotesk";font-size:.78rem;
  color:rgba(244,239,230,.4);text-decoration:underline;text-underline-offset:3px}
#santo-go /* FINAL */
.final{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:46px 0 30px;text-align:center}
#santo-go .badge{width:138px;height:138px;margin:0 auto 22px;position:relative;animation:bzhbadgepop .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes bzhbadgepop{0%{transform:scale(.4) rotate(-12deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
#santo-go .badge .rays{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 8deg,rgba(232,178,76,.18) 8deg 16deg);animation:bzhspin 24s linear infinite}
#santo-go .badge .disc{position:absolute;inset:16px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--or-clair),var(--or) 68%);
  display:grid;place-items:center;box-shadow:0 0 34px rgba(232,178,76,.5),inset 0 -8px 18px rgba(0,0,0,.18)}
#santo-go .badge .disc svg{width:54px;height:54px;fill:var(--ardoise)}
#santo-go .badge .star{position:absolute;width:18px;height:18px;fill:var(--or-clair);opacity:0;animation:bzhtwinkle 1.6s ease-in-out infinite}
#santo-go .badge .star.s1{top:2px;left:50%;animation-delay:.1s}
#santo-go .badge .star.s2{bottom:8px;left:6px;animation-delay:.5s}
#santo-go .badge .star.s3{bottom:14px;right:4px;animation-delay:.9s}
@keyframes bzhtwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1)}}
#santo-go .final .got{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--or);font-weight:600;padding-left:.4em}
#santo-go .final h2{font-family:"Cinzel",serif;font-size:1.9rem;font-weight:700;margin:8px 0 12px;color:var(--hermine)}
#santo-go .final .msg{color:var(--hermine-soft);font-size:.96rem;line-height:1.6;max-width:32ch;margin:0 auto}
#santo-go .coll{margin:26px 0 4px}
#santo-go .sec-t{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--hermine-soft);margin-bottom:12px;text-align:left}
#santo-go .grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#santo-go .mini{position:relative;border-radius:11px;padding:12px 11px;text-align:left;overflow:hidden;background:linear-gradient(150deg,#223648,#1A2A37);border:1px solid rgba(232,178,76,.28)}
#santo-go .mini .mn{font-family:"Cinzel",serif;font-size:.82rem;font-weight:600;color:var(--hermine);line-height:1.2}
#santo-go .mini .ml{font-size:.64rem;color:var(--or);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
#santo-go .mini .h{position:absolute;bottom:-6px;right:-6px;width:34px;height:34px;fill:rgba(232,178,76,.1)}
#santo-go .carnet{margin-top:26px;text-align:left;display:none}
#santo-go .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#santo-go .pcell{position:relative;border-radius:11px;overflow:hidden;border:1px solid rgba(232,178,76,.25)}
#santo-go .pcell img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
#santo-go .pcell .pc{position:absolute;left:0;right:0;bottom:0;padding:14px 9px 7px;font-family:"Cinzel",serif;font-size:.72rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
#santo-go .teasers{margin-top:26px;text-align:left}
#santo-go .teaser{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(244,239,230,.09);margin-bottom:8px}
#santo-go .teaser .tn{font-family:"Cinzel",serif;font-weight:600;font-size:.95rem}
#santo-go .teaser .soon{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--or);padding:4px 9px;border-radius:999px;border:1px solid rgba(232,178,76,.3)}
@media (prefers-reduced-motion: reduce){#santo-go, #santo-go *{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.05s !important}}
#santo-go .progress{display:flex;align-items:center;gap:10px;margin:2px 0 16px}
#santo-go .pbar{flex:1;height:6px;border-radius:999px;background:rgba(244,239,230,.12);overflow:hidden}
#santo-go .pbar i{display:block;height:100%;width:0;background:var(--or);box-shadow:0 0 10px var(--or);transition:width .45s ease}
#santo-go .pcount{font-size:.78rem;font-weight:600;color:var(--hermine-soft);white-space:nowrap}
#santo-go .pcount b{color:var(--or)}
#santo-go .gogrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:2px}
#santo-go .gocard{position:relative;text-align:left;cursor:pointer;border:1px solid rgba(244,239,230,.12);border-radius:14px;padding:14px 13px 13px;
  background:linear-gradient(155deg,#143A5E,#0E2C49);overflow:hidden;transition:transform .15s ease,border-color .2s ease;min-height:104px;display:flex;flex-direction:column;justify-content:space-between}
#santo-go .gocard:hover{transform:translateY(-2px);border-color:rgba(232,178,76,.4)}
#santo-go .gocard .gnum{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.42)}
#santo-go .gocard .gname{font-family:"Cinzel",serif;font-size:1.02rem;font-weight:600;line-height:1.14;margin:7px 0 0;color:var(--hermine)}
#santo-go .gocard .gst{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:.68rem;font-weight:600;letter-spacing:.05em;color:var(--hermine-soft)}
#santo-go .gocard .gst svg{width:13px;height:13px;fill:none;stroke:var(--hermine-soft);stroke-width:1.8}
#santo-go .gocard.done{border-color:rgba(232,178,76,.5);background:linear-gradient(155deg,#22364A,#1A2A38)}
#santo-go .gocard.done .gst{color:var(--or)}
#santo-go .gocard.done .gst svg{stroke:var(--or)}
#santo-go .gocard .gherm{position:absolute;bottom:-8px;right:-8px;width:40px;height:40px;fill:rgba(232,178,76,.09)}
#santo-go .gocard.done .gherm{fill:rgba(232,178,76,.22)}
#santo-go .gocard .gphoto{position:absolute;top:10px;right:10px;width:18px;height:18px;fill:none;stroke:var(--or-clair);stroke-width:1.8;opacity:0}
#santo-go .gocard.haspic .gphoto{opacity:.9}
#santo-go .backlink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:"Space Grotesk";font-size:.8rem;font-weight:600;color:var(--hermine-soft);margin-bottom:14px;padding:4px 0}
#santo-go .backlink svg{width:15px;height:15px;fill:none;stroke:var(--or);stroke-width:2}
#santo-go .next.lock{opacity:.45;cursor:not-allowed;filter:saturate(.5)}
#santo-go .next.lock:hover{transform:none}
#santo-go .ref-vis{display:flex;justify-content:center;margin:16px 0 2px}
#santo-go .ref-vis .rv{width:108px;height:92px;border-radius:14px;background:rgba(232,178,76,.06);border:1px solid rgba(232,178,76,.22);display:flex;align-items:center;justify-content:center}
#santo-go .ref-vis svg{width:72px;height:64px;fill:none;stroke:var(--or);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#santo-go :focus-visible{outline:2px solid var(--or-clair);outline-offset:3px;border-radius:8px}
</style>


<div id="santo-go">
<div class="amb">
  <svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>
  <svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>
  <svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>
  <svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>
  <svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>
</div>

<div class="app">
  <!-- INTRO -->
  <section class="screen on" id="s-intro">
    <div class="intro">
      <div class="seal"><div class="ring"></div><div class="ring b"></div>
        <div class="core"><svg viewBox="0 0 24 24"><path d="M12 2l2 6 6 .3-4.7 3.8L17 18l-5-3.4L7 18l1.7-5.9L4 8.3 10 8z"/></svg></div>
      </div>
      <div class="eyebrow">Jeu de piste · Grèce Go</div>
      <h1 class="title"><span class="go">GRÈCE GO</span><span class="ville">Santorin</span></h1>
      <p class="promise">Un parcours à faire en famille pour découvrir Santorin, la plus célèbre des îles grecques, née d&rsquo;un volcan. Reconnais un site emblématique à chaque étape, de la caldeira aux villages blancs. Pas le temps de tout visiter sur place ? Réponds aux questions pour débloquer ton badge. Ces trésors se prolongent d&rsquo;ailleurs dans toutes les Cyclades.</p>
      <div class="chips">
        <span class="chip"><svg viewBox="0 0 24 24"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>Santorin · Cyclades</span>
        <span class="chip"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>En famille</span>
        <span class="chip" id="chip-count"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 0 1 4.5 1.5c0 2-2.5 2-2.5 3.5M12 17h.01"/></svg>Gratuit</span>
      </div>
      <button class="cta" id="start">Commencer l&rsquo;aventure</button>
      <p class="foot">À découvrir à Santorin, dans les Cyclades, en mer Égée</p>
    </div>
  </section>

  <!-- GRILLE / COLLECTION -->
  <section class="screen" id="s-grid">
    <div class="hud-top"><span class="brandmini">GRÈCE <b>GO</b> Santorin</span><span class="counter" id="counter"></span></div>
    <div class="progress"><div class="pbar"><i id="pbar-fill"></i></div><span class="pcount" id="pcount"></span></div>
    <div class="gogrid" id="gogrid"></div>
    <button class="next lock" id="see-badge" style="margin-top:22px" disabled>Repère les 12 sites pour ton badge</button>
    <button class="reset" id="reset">Tout recommencer</button>
  </section>

  <!-- CARTE / ANIMAL -->
  <section class="screen" id="s-card">
    <button class="backlink" id="back-grid"><svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>Retour aux sites</button>
    <div id="card-mount"></div>
  </section>

  <!-- FINAL -->
  <section class="screen" id="s-final">
    <div class="final">
      <div class="badge"><div class="rays"></div>
        <svg class="star s1" viewBox="0 0 24 24"><path d="M12 2l2 7 7 .5-5.5 4.3L17 21l-5-3.6L7 21l1.5-7.2L3 9.5 10 9z"/></svg>
        <svg class="star s2" viewBox="0 0 24 24"><path d="M12 2l2 7 7 .5-5.5 4.3L17 21l-5-3.6L7 21l1.5-7.2L3 9.5 10 9z"/></svg>
        <svg class="star s3" viewBox="0 0 24 24"><path d="M12 2l2 7 7 .5-5.5 4.3L17 21l-5-3.6L7 21l1.5-7.2L3 9.5 10 9z"/></svg>
        <div class="disc"><svg viewBox="0 0 24 24"><path d="M12 1l2.4 7 7.4.4-5.8 4.6L18 21l-6-4.2L6 21l2-8L2.2 8.4 9.6 8z"/></svg></div>
      </div>
      <div class="got">Badge débloqué</div>
      <h2>Explorateur de Santorin</h2>
      <p class="msg">Bravo. Tu connais maintenant les douze sites qui font Santorin, du volcan endormi au coucher de soleil d&rsquo;Oia. Et même sans avoir tout visité sur place, tu as gagné ton badge en répondant aux questions : de quoi raconter l&rsquo;île à tout le monde au retour.</p>
      <div class="coll"><div class="sec-t" id="coll-title">Vos cartes</div><div class="grid" id="collection"></div></div>
      <div class="carnet" id="carnet"><div class="sec-t">Votre carnet de voyage</div><div class="pgrid" id="pgrid"></div></div>
      <button class="next" id="download" style="margin-top:20px">Télécharger mon carnet</button>
      <p class="photo-cap" style="margin-top:8px">Une image à garder ou à partager.</p>
      <button class="next ghost" id="back-from-final" style="margin-top:14px">Revenir aux sites pour ajouter des photos</button>
      <div class="teasers"><div class="sec-t">La série Grèce Go</div>
        <div class="teaser"><span class="tn">Grèce Go Athènes</span><span class="soon">Bientôt</span></div>
        <div class="teaser"><span class="tn">Grèce Go Crète</span><span class="soon">Bientôt</span></div>
        <div class="teaser"><span class="tn">Grèce Go Mythologie</span><span class="soon">Bientôt</span></div>
        <div class="teaser"><span class="tn">Grèce Go Saveurs grecques</span><span class="soon">Bientôt</span></div>
      </div>
      <button class="next ghost" id="replay" style="margin-top:24px">Rejouer le parcours</button>
    </div>
  </section>
</div>
</div>

<script>

const HERM = '<svg viewBox="0 0 24 30"><path d="M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z"/></svg>';
const CHECK = '<svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>';

/* ===== ÉTAPES — pour en ajouter, copier un bloc { ... } ci-dessous (10 max conseillé). ===== */
const STEPS = [
  { lieu:"La caldeira", zone:"L'immense baie ronde au cœur de l'île",
    trouver:"Regarde la grande baie en demi-cercle, bordée de hautes falaises où s'accrochent les villages blancs. Cette baie géante porte un nom : la caldeira.",
    q:"Qu'est-ce qui a creusé cette immense baie ronde au milieu de Santorin ?",
    opts:[{t:"Une énorme éruption de volcan",ok:true},{t:"La chute d'une météorite"},{t:"Un glacier qui a fondu"}],
    carte:"La Caldeira",
    lore:"Santorin est un volcan. Il y a environ 3 600 ans, une éruption gigantesque, l'une des plus puissantes de l'histoire, a vidé le volcan. Le centre de l'île s'est alors effondré dans la mer, formant cette baie qu'on appelle la caldeira. Les villages sont aujourd'hui perchés tout en haut du cratère." },
  { lieu:"Néa Kaméni", zone:"Le petit îlot noir au centre de la baie",
    trouver:"Au milieu de la caldeira, repère un îlot sombre et pelé, sans maisons. C'est Néa Kaméni, qu'on rejoint en bateau pour monter jusqu'au cratère.",
    q:"Le volcan de Santorin est-il complètement éteint ?",
    opts:[{t:"Oui, il s'est éteint après la grande éruption"},{t:"Non, il est encore actif et fume encore un peu",ok:true},{t:"Oui, il s'est arrêté il y a environ 100 ans"}],
    carte:"Néa Kaméni",
    lore:"Néa Kaméni veut dire « la nouvelle brûlée ». Sur cet îlot au centre de la caldeira, le sol est chaud sous les pieds et de la fumée s'échappe encore de petites fentes, les fumerolles : le volcan dort, mais il est toujours vivant. Juste à côté, on peut nager dans des sources d'eau chaude." },
  { lieu:"Oia", zone:"Le village blanc tout au nord de l'île",
    trouver:"Cherche le village le plus célèbre, accroché à la pointe nord : des maisons blanches, des coupoles bleues et de vieilles demeures suspendues au-dessus de la caldeira.",
    q:"Chaque soir, où la foule se rassemble-t-elle à Oia pour voir le soleil plonger dans la mer ?",
    opts:[{t:"Au sommet du volcan"},{t:"Sur la plage de sable noir"},{t:"Près des ruines du vieux château",ok:true}],
    carte:"Oia",
    lore:"Chaque soir, la foule se presse près des ruines du château vénitien d'Oia pour voir le soleil plonger dans la mer Égée : c'est l'un des couchers de soleil les plus célèbres du monde. Le village garde aussi ses coupoles bleues et ses anciennes maisons de capitaines." },
  { lieu:"Fira", zone:"La capitale, posée en haut de la falaise",
    trouver:"Repère la plus grande ville, Fira, étalée tout en haut de la falaise au-dessus de la caldeira, avec son petit port loin en contrebas.",
    q:"Combien de marches relient Fira à son vieux port, tout en bas de la falaise ?",
    opts:[{t:"Près de 600",ok:true},{t:"Une petite centaine"},{t:"Plus de 3 000"}],
    carte:"Fira",
    lore:"Pour rejoindre le vieux port de Fira, tout en bas, on descend 588 marches. On peut aussi prendre le téléphérique, ou monter à dos d'âne. Les marches et le téléphérique restent les plus simples, et le panorama sur la caldeira est partout magnifique." },
  { lieu:"Skaros", zone:"Le gros rocher qui avance dans la mer, sous Imerovigli",
    trouver:"Sous le village d'Imerovigli, le plus haut de la caldeira, repère un grand rocher pointu qui s'avance dans la mer. On le voit de très loin : c'est Skaros.",
    q:"Skaros se repère de loin. Que peut-on y faire aujourd'hui ?",
    opts:[{t:"Suivre un sentier jusqu'à son pied et une petite chapelle",ok:true},{t:"Monter en téléphérique jusqu'à son sommet"},{t:"Y passer la nuit dans un grand hôtel"}],
    carte:"Skaros",
    lore:"Un sentier part d'Imerovigli, le village le plus haut de la caldeira, et descend jusqu'au pied du rocher et à la petite chapelle Theoskepasti, avec une vue superbe. Les plus aventureux grimpent jusqu'au sommet, où se cachent les ruines d'une forteresse qui protégeait autrefois les habitants des pirates. La fin de la montée est raide et un peu technique : mieux vaut de bonnes chaussures et de la prudence." },
  { lieu:"Les plages noires", zone:"Le long du littoral de Kamari et Perissa",
    trouver:"Sur la côte est, à Kamari et Perissa, marche sur de longues plages au sable étonnant : il est tout noir.",
    q:"Pourquoi le sable de ces plages est-il noir ?",
    opts:[{t:"C'est de la poussière de charbon"},{t:"Des algues séchées le recouvrent"},{t:"Il vient de la lave du volcan",ok:true}],
    carte:"Les Plages Noires",
    lore:"À Kamari et Perissa, le sable noir vient des roches volcaniques de l'île, broyées par la mer au fil du temps. Attention, ce sable foncé chauffe très vite au soleil : les sandales sont bien utiles. Ces deux grandes plages se trouvent au pied de la montagne du Mesa Vouno." },
  { lieu:"La plage Rouge", zone:"Une crique près d'Akrotiri, au sud",
    trouver:"Près d'Akrotiri, au sud, cherche une petite plage encadrée de hautes falaises d'une couleur surprenante : le rouge.",
    note:"L'accès se fait par un sentier rocheux qui est parfois fermé à cause des chutes de pierres. Mieux vaut vérifier sur place avant d'y aller.",
    q:"D'où vient la couleur rouge de la plage Rouge ?",
    opts:[{t:"Du reflet du coucher de soleil sur la mer"},{t:"De ses falaises riches en fer, comme de la rouille",ok:true},{t:"De millions de petits coquillages rouges"}],
    carte:"La Plage Rouge",
    lore:"La plage Rouge, ou Kokkini, doit sa couleur à ses falaises gorgées de fer : en rouillant, la roche devient rouge, comme un vieux clou oublié dehors. Le contraste avec le bleu de la mer en fait l'un des coins les plus photographiés de l'île." },
  { lieu:"Akrotiri", zone:"Le grand site de fouilles, au sud de l'île",
    trouver:"Au sud, sous un grand toit qui protège les fouilles, on visite Akrotiri : une ville entière vieille de plus de 3 500 ans, sortie peu à peu des cendres.",
    note:"Si tu veux un autre site antique, cette fois en plein air et face à la mer Égée, tu aimeras l'Ancienne Théra, perchée tout en haut du mont Mesa Vouno.",
    q:"Pourquoi compare-t-on souvent Akrotiri à la ville de Pompéi ?",
    opts:[{t:"Une ville détruite d'un coup par un tremblement de terre"},{t:"Une ville engloutie sous la mer"},{t:"Une ville entière ensevelie et conservée sous les cendres",ok:true}],
    carte:"Akrotiri",
    lore:"Akrotiri était une cité prospère de l'âge du bronze. L'éruption du volcan l'a ensevelie sous les cendres, qui l'ont conservée intacte pendant des milliers d'années, comme Pompéi. On n'y a trouvé aucun squelette : les habitants avaient eu le temps de fuir. Certains chercheurs pensent même que cette catastrophe a inspiré la légende de l'Atlantide." },
  { lieu:"Le phare d'Akrotiri", zone:"À la pointe sud-ouest de l'île",
    trouver:"Tout au bout de la route, au sud-ouest, repère une tour blanche solitaire au bord d'une haute falaise rouge : le phare d'Akrotiri.",
    q:"Qui a construit ce phare en 1892 ?",
    opts:[{t:"Une société française",ok:true},{t:"Une compagnie anglaise"},{t:"Les moines d'un monastère voisin"}],
    carte:"Le Phare d'Akrotiri",
    lore:"Le phare a été bâti en 1892 par une société française, Collas et Michel : c'est l'un des plus vieux de Grèce. Posé sur une falaise de la caldeira, il ne se visite pas à l'intérieur, mais on peut s'en approcher. Le coin est superbe au coucher du soleil, et bien plus calme qu'à Oia." },
  { lieu:"Pyrgos", zone:"Le village perché le plus haut de l'île",
    trouver:"À l'intérieur des terres, cherche un village qui grimpe en spirale sur une colline, tout en haut de l'île, loin de la foule des falaises.",
    q:"Au sommet de Pyrgos, le village le plus haut, que trouve-t-on ?",
    opts:[{t:"Un grand port de pêche"},{t:"Les ruines d'un château",ok:true},{t:"Un phare"}],
    carte:"Pyrgos",
    lore:"Pyrgos fut longtemps la capitale de l'île. Ses ruelles montent en escargot jusqu'à un château médiéval, le kasteli. Du sommet, on embrasse toute Santorin d'un seul regard : la caldeira, les vignes et la mer. Tout autour, les caves font goûter le vin de l'île." },
  { lieu:"Mégalochori", zone:"Un village traditionnel au centre de l'île",
    trouver:"Au cœur des vignes, repère un village ancien aux ruelles étroites et tortueuses, avec ses clochers et ses petites places à l'ombre.",
    q:"Pourquoi Mégalochori a-t-il été construit serré, avec de petites fenêtres et des entrées étroites ?",
    opts:[{t:"Pour se protéger du vent violent"},{t:"Pour se barricader et se défendre des pirates",ok:true},{t:"Pour se cacher des collecteurs d'impôts"}],
    carte:"Mégalochori",
    lore:"Mégalochori veut dire « grand village ». Au Moyen Âge, la mer grouillait de pirates : on a donc bâti le village ramassé, avec de petites fenêtres et des entrées biscornues, faciles à barricader pour repousser les attaques. On y trouve de belles demeures de capitaines et des caves creusées dans la roche, les kanava." },
  { lieu:"Les vignes en panier", zone:"Dans les champs, posées à même le sol",
    trouver:"Dans les champs, cherche des vignes étonnantes : au lieu de grimper sur des fils, elles sont enroulées en rond comme des paniers, posées par terre.",
    note:"Dernière étape. Bravo, tu touches au but : réponds et ton badge d'Explorateur de Santorin est à toi.",
    q:"Pourquoi enroule-t-on les vignes de Santorin en panier, au ras du sol ?",
    opts:[{t:"Pour les protéger du gel en hiver"},{t:"Pour empêcher les chèvres de les manger"},{t:"Pour protéger les grappes du vent",ok:true}],
    carte:"Les Vignes en Panier",
    lore:"Sur cette île battue par le vent, on enroule chaque vigne en corbeille posée au sol, la « kouloura » : les grappes poussent à l'abri, au centre du panier, protégées du vent et de la chaleur. Le raisin Assyrtiko, très ancien, donne un vin blanc minéral, fierté de Santorin." }
];
const KEYS = ["A","B","C","D","E"];
/* ===== Icônes de reconnaissance (au trait, ordre identique aux STEPS). Remplaçables par de vraies photos. ===== */
const ICONS = [
  `<svg viewBox="0 0 64 58"><path d="M14 18 A20 18 0 1 0 50 18"/><path d="M27 34 l5 -8 5 8 Z"/><path d="M12 48 q6 -3 12 0 t12 0 t12 0"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M17 46 L28 25 H36 L47 46 Z"/><path d="M28 25 q4 3 8 0"/><path d="M33 21 q-4 -4 0 -8 q4 -4 0 -8"/><path d="M10 47 H54"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M13 38 H51"/><path d="M22 38 a10 10 0 0 1 20 0"/><path d="M32 22 V15 M45 27 l4 -4 M19 27 l-4 -4"/><path d="M12 47 q6 -3 11 0 t11 0 t11 0"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M9 47 H55"/><path d="M14 47 V34 H24 V47"/><path d="M24 47 V29 H34 V47"/><path d="M40 47 V37 H50 V47"/><path d="M40 37 a5 4 0 0 1 10 0"/><path d="M45 31 V28 M43.4 29.5 H46.6"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M22 46 L25 20 L33 14 L40 23 L43 46 Z"/><path d="M31 14 V9 M29.4 10.6 H32.6"/><path d="M8 49 q6 -3 11 0 M45 49 q6 -3 11 0"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M30 44 V24 M22 24 a8 6 0 0 1 16 0 Z"/><path d="M8 45 H52"/><path d="M11 51 q5 -3 10 0 t10 0 t10 0 t10 0"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M10 31 Q12 20 20 20 Q27 20 28 31"/><path d="M36 31 Q38 17 47 17 Q55 17 54 31"/><path d="M22 37 q10 7 20 0"/><path d="M8 44 q6 -3 12 0 t12 0 t12 0 t12 0"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M11 47 H53"/><path d="M18 44 V25 M27 44 V25 M15 25 H30 M15 44 H30"/><path d="M37 44 V31 M46 44 V31 M34 31 H49 M35 44 H48"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M26 46 L28 23 H36 L38 46 Z"/><path d="M27 23 H37 V16 H27 Z"/><path d="M26 16 H38 L32 11 Z"/><path d="M40 13 H49 M40 18 l8 3"/><path d="M16 47 H48"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M9 46 Q32 29 55 46"/><path d="M25 40 V28 H29 V32 H33 V28 H37 V32 H41 V40"/><path d="M25 40 H41"/><path d="M29 28 V22 L35 24 L29 26"/></svg>`,
  `<svg viewBox="0 0 64 58"><path d="M24 47 V21 H40 V47"/><path d="M21 21 L32 12 L43 21"/><path d="M29 47 V33 a3.5 4.5 0 0 1 7 0 V47"/><circle cx="32" cy="23.5" r="2.6"/><path d="M14 48 H50"/></svg>`,
  `<svg viewBox="0 0 64 58"><ellipse cx="32" cy="33" rx="15" ry="9"/><ellipse cx="32" cy="33" rx="8" ry="4.6"/><path d="M14 46 H50"/><circle cx="30" cy="31" r="1.5"/><circle cx="34" cy="31" r="1.5"/><circle cx="32" cy="34" r="1.5"/></svg>`
];

/* ===== Progression : localStorage (repli mémoire) ===== */
const store = (() => {
  let mem = {}; const K = "santogo_santorin_collection_v1";
  return {
    read(){ try{ const v=localStorage.getItem(K); return v?JSON.parse(v):null; }catch(e){ return mem[K]||null; } },
    write(o){ try{ localStorage.setItem(K, JSON.stringify(o)); }catch(e){ mem[K]=o; } },
    clear(){ try{ localStorage.removeItem(K); }catch(e){} mem={}; }
  };
})();

/* ===== Photos : IndexedDB (repli mémoire si bloqué) ===== */
const photoDB = (() => {
  let db=null, mem=new Map();
  function open(){ return new Promise(res=>{ try{
    const r=indexedDB.open('santogo_photos',1);
    r.onupgradeneeded=e=>{ e.target.result.createObjectStore('photos'); };
    r.onsuccess=e=>{ db=e.target.result; res(); };
    r.onerror=()=>{ db=null; res(); };
  }catch(e){ db=null; res(); } }); }
  function put(k,b){ return new Promise(res=>{ if(!db){ mem.set(k,b); return res(); }
    try{ const t=db.transaction('photos','readwrite'); t.objectStore('photos').put(b,k); t.oncomplete=()=>res(); t.onerror=()=>{mem.set(k,b);res();}; }catch(e){ mem.set(k,b); res(); } }); }
  function get(k){ return new Promise(res=>{ if(!db) return res(mem.get(k)||null);
    try{ const t=db.transaction('photos','readonly'); const q=t.objectStore('photos').get(k); q.onsuccess=()=>res(q.result||mem.get(k)||null); q.onerror=()=>res(mem.get(k)||null); }catch(e){ res(mem.get(k)||null); } }); }
  function del(k){ return new Promise(res=>{ mem.delete(k); if(!db) return res();
    try{ const t=db.transaction('photos','readwrite'); t.objectStore('photos').delete(k); t.oncomplete=()=>res(); t.onerror=()=>res(); }catch(e){ res(); } }); }
  function clearAll(){ return new Promise(res=>{ mem.clear(); if(!db) return res();
    try{ const t=db.transaction('photos','readwrite'); t.objectStore('photos').clear(); t.oncomplete=()=>res(); t.onerror=()=>res(); }catch(e){ res(); } }); }
  return {open,put,get,del,clearAll};
})();

/* ===== Compression à la prise (~1100 px, JPEG 0.72) ===== */
function compress(file){ return new Promise((res,rej)=>{
  const img=new Image();
  img.onload=()=>{ const max=1100; let w=img.width,h=img.height;
    if(w>h && w>max){ h=Math.round(h*max/w); w=max; } else if(h>=w && h>max){ w=Math.round(w*max/h); h=max; }
    const c=document.createElement('canvas'); c.width=w; c.height=h;
    c.getContext('2d').drawImage(img,0,0,w,h);
    c.toBlob(b=>{ URL.revokeObjectURL(img.src); b?res(b):rej(new Error('blob')); },'image/jpeg',0.72);
  };
  img.onerror=()=>{ URL.revokeObjectURL(img.src); rej(new Error('img')); };
  img.src=URL.createObjectURL(file);
}); }

let objURLs=[];
function trackURL(u){ objURLs.push(u); return u; }
function revokeAll(){ objURLs.forEach(u=>{try{URL.revokeObjectURL(u);}catch(e){}}); objURLs=[]; }

let state = store.read() || { started:false, unlocked:[], open:null };
if(!Array.isArray(state.unlocked)) state.unlocked=[];
const ROOT=document.getElementById('santo-go');
const $ = s => ROOT.querySelector(s);
const N = STEPS.length;
function show(id){ ROOT.querySelectorAll(".screen").forEach(s=>s.classList.remove("on")); $(id).classList.add("on"); window.scrollTo(0,0); }
const isDone = i => state.unlocked.includes(i);

const PIN='<svg viewBox="0 0 24 24"><path d="M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>';

async function renderGrid(){
  const found=state.unlocked.length;
  $("#counter").textContent=`${found} / ${N} trouvés`;
  $("#pcount").innerHTML=`<b>${found}</b> / ${N}`;
  const fill=$("#pbar-fill"); if(fill) fill.style.width=`${Math.round(found/N*100)}%`;
  const g=$("#gogrid"); g.innerHTML="";
  for(let i=0;i<N;i++){
    const d=STEPS[i], done=isDone(i);
    const b=document.createElement("button");
    b.className="gocard"+(done?" done":"");
    b.setAttribute("aria-label",(done?"Trouvé : ":"À trouver : ")+d.lieu);
    b.innerHTML=`<svg class="gphoto" viewBox="0 0 24 24"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2l1.2-1.8A1 1 0 0 1 8.5 4.7h7a1 1 0 0 1 .8.5L17.5 7h2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="12.5" r="3.2"/></svg>
      <div><div class="gnum">N°${i+1}</div><div class="gname">${d.lieu}</div></div>
      <span class="gst">${done?CHECK+'Trouvé':PIN+'À trouver'}</span>
      <span class="gherm">${HERM}</span>`;
    b.onclick=()=>openCard(i);
    g.appendChild(b);
  }
  const sb=$("#see-badge");
  if(found>=N){ sb.disabled=false; sb.classList.remove("lock"); sb.textContent="Voir mon badge"; }
  else { sb.disabled=true; sb.classList.add("lock"); sb.textContent=`Repère les ${N} sites pour ton badge`; }
  for(let i=0;i<N;i++){ const blob=await photoDB.get('p'+i); if(blob){ const card=g.children[i]; if(card) card.classList.add("haspic"); } }
}

function openCard(i){ state.open=i; store.write(state); renderCard(i); show("#s-card"); }

function renderCard(i){
  const d=STEPS[i], done=isDone(i);
  $("#card-mount").innerHTML=`
    <div class="scene">
      <span class="step-tag"><span class="dot"></span>Site ${i+1} sur ${N}</span>
      <h2 class="lieu">${d.lieu}</h2>
      <div class="zone">${PIN}${d.zone}</div>
      <div class="ref-vis"><div class="rv">${ICONS[i]||''}</div></div>
      <div class="find">
        <div class="lbl"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.2"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3"/></svg>À trouver</div>
        <p>${d.trouver}</p>
      </div>
      ${d.note ? `<div class="scene-note"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></svg><p>${d.note}</p></div>` : ''}
      ${done ? '' : `<p class="q">${d.q}</p>
      <div class="opts" id="opts"></div>
      <div class="hint" id="hint"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>Regarde encore autour de toi, et réessaie.</div>`}
      <div class="reveal${done?' on':''}" id="reveal"></div>
    </div>`;
  if(done){ renderReveal(i); }
  else {
    const opts=$("#opts");
    d.opts.forEach((o,k)=>{ const b=document.createElement("button"); b.className="opt";
      b.innerHTML=`<span class="key">${KEYS[k]}</span><span>${o.t}</span>`;
      b.onclick=()=>answer(b,o,i); opts.appendChild(b);
    });
  }
}

function answer(btn,opt,i){
  if(opt.ok){
    ROOT.querySelectorAll("#opts .opt").forEach(b=>{ b.disabled=true; if(b!==btn) b.classList.add("dim"); });
    btn.classList.remove("dim"); btn.classList.add("good"); $("#hint").classList.remove("on");
    if(!isDone(i)) state.unlocked.push(i);
    store.write(state);
    renderReveal(i);
  } else {
    btn.classList.add("bad"); $("#hint").classList.add("on");
    setTimeout(()=>btn.classList.remove("bad"),500);
  }
}

function renderReveal(i){
  const d=STEPS[i]; const r=$("#reveal");
  r.innerHTML=`
    <div class="won"><svg viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>Carte débloquée</div>
    <div class="card"><div class="glow"></div><span class="herm">${HERM}</span>
      <div class="body"><div class="ctag">Carte ${i+1} sur ${N}</div>
        <div class="cname">${d.carte}</div><p class="lore">${d.lore}</p></div>
    </div>
    <div class="photo-block" id="photo-mount"></div>
    <button class="next" id="advance">Retour aux sites</button>`;
  r.classList.add("on");
  renderPhotoBlock(i);
  $("#advance").onclick=()=>backToGrid();
  r.scrollIntoView({behavior:"smooth",block:"nearest"});
}

function backToGrid(){ state.open=null; store.write(state); renderGrid(); show("#s-grid"); }

async function renderPhotoBlock(i){
  const mount=ROOT.querySelector('#photo-mount'); if(!mount) return;
  const blob=await photoDB.get('p'+i);
  if(blob){
    const url=trackURL(URL.createObjectURL(blob));
    mount.innerHTML=`<div class="photo-wrap"><img decoding="async" alt="Votre photo de l'étape" src="${url}"></div>
      <div class="photo-acts"><button data-act="redo">Reprendre</button><button data-act="del">Retirer</button></div>`;
    mount.querySelector('[data-act="redo"]').onclick=()=>pickPhoto(i);
    mount.querySelector('[data-act="del"]').onclick=async()=>{ await photoDB.del('p'+i); renderPhotoBlock(i); };
  } else {
    mount.innerHTML=`<button class="addphoto" id="addp">
      <svg viewBox="0 0 24 24"><path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2l1.2-1.8A1 1 0 0 1 8.5 4.7h7a1 1 0 0 1 .8.5L17.5 7h2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/><circle cx="12" cy="12.5" r="3.2"/></svg>
      Prendre une photo <span style="opacity:.6">· facultatif</span></button>
      <p class="photo-cap">Sur mobile, l'appareil photo s'ouvre. Sur ordinateur, choisissez une image.</p>`;
    mount.querySelector('#addp').onclick=()=>pickPhoto(i);
  }
}

function pickPhoto(i){
  const input=document.createElement('input');
  input.type='file'; input.accept='image/*';
  input.onchange=async()=>{ const f=input.files&&input.files[0]; if(!f) return;
    try{ const blob=await compress(f); await photoDB.put('p'+i,blob); renderPhotoBlock(i); }
    catch(e){ const m=ROOT.querySelector('#photo-mount'); if(m){ const p=document.createElement('p'); p.className='photo-cap'; p.style.color='var(--brique)'; p.textContent='Photo non ajoutée, réessayez.'; m.appendChild(p);} }
  };
  input.click();
}

async function finish(){
  $("#coll-title").textContent=`Vos ${STEPS.length} cartes`;
  const c=$("#collection"); c.innerHTML="";
  STEPS.forEach((d,i)=>{ const m=document.createElement("div"); m.className="mini";
    m.innerHTML=`<div class="ml">N°${i+1}</div><div class="mn">${d.carte}</div><span class="h">${HERM}</span>`;
    c.appendChild(m);
  });
  const pg=$("#pgrid"); pg.innerHTML=""; let count=0;
  for(let i=0;i<STEPS.length;i++){ const blob=await photoDB.get('p'+i); if(!blob) continue; count++;
    const url=trackURL(URL.createObjectURL(blob)); const cell=document.createElement("div"); cell.className="pcell";
    cell.innerHTML=`<img decoding="async" alt="" src="${url}"><div class="pc">${STEPS[i].lieu}</div>`; pg.appendChild(cell);
  }
  $("#carnet").style.display=count?"block":"none";
  show("#s-final");
}

/* ===== Carnet PNG (1080x1350) à télécharger / partager ===== */
const MOIS=['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
function loadImg(blob){ return new Promise((res,rej)=>{ const u=URL.createObjectURL(blob); const im=new Image();
  im.onload=()=>res({im,u}); im.onerror=()=>{URL.revokeObjectURL(u);rej(new Error('img'));}; im.src=u; }); }
function rr(ctx,x,y,w,h,r){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r);
  ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); }
function cover(ctx,im,x,y,w,h){ const ir=im.width/im.height, dr=w/h; let sx,sy,sw,sh;
  if(ir>dr){ sh=im.height; sw=sh*dr; sx=(im.width-sw)/2; sy=0; } else { sw=im.width; sh=sw/dr; sx=0; sy=(im.height-sh)/2; }
  ctx.drawImage(im,sx,sy,sw,sh,x,y,w,h); }
function spaced(ctx,text,cx,y,ls){ let tot=0; for(const ch of text) tot+=ctx.measureText(ch).width+ls; tot-=ls;
  let x=cx-tot/2; const a=ctx.textAlign; ctx.textAlign='left';
  for(const ch of text){ const w=ctx.measureText(ch).width; ctx.fillText(ch,x,y); x+=w+ls; } ctx.textAlign=a; }

async function downloadCarnet(){
  const btn=$("#download"); const label=btn.textContent; btn.disabled=true; btn.textContent="Création…";
  const loaded=[];
  try{
    for(let i=0;i<STEPS.length;i++){ const b=await photoDB.get('p'+i); if(b){ try{ const o=await loadImg(b); loaded.push({im:o.im,u:o.u,lieu:STEPS[i].lieu}); }catch(e){} } }
    try{ await document.fonts.load('700 90px "Cinzel"'); await document.fonts.load('600 30px "Space Grotesk"'); await document.fonts.ready; }catch(e){}

    const W=1080,H=1350,M=72; const cv=document.createElement('canvas'); cv.width=W; cv.height=H;
    const ctx=cv.getContext('2d');
    const bg=ctx.createLinearGradient(0,0,0,H); bg.addColorStop(0,'#1C4E78'); bg.addColorStop(.5,'#0E2C49'); bg.addColorStop(1,'#061528');
    ctx.fillStyle=bg; ctx.fillRect(0,0,W,H);
    const glow=ctx.createRadialGradient(W/2,-120,80,W/2,260,720); glow.addColorStop(0,'rgba(232,178,76,.16)'); glow.addColorStop(1,'rgba(232,178,76,0)');
    ctx.fillStyle=glow; ctx.fillRect(0,0,W,520);
    // faint hermine spots
    ctx.save(); ctx.globalAlpha=.05; ctx.fillStyle='#F5F7FA';
    const herm=new Path2D('M12 0c1 3 2.4 4.6 4.6 5.4-2 .8-3.4 2.6-3.4 5h-2.4c0-2.4-1.4-4.2-3.4-5C9.6 4.6 11 3 12 0zM12 12l3 18H9z');
    [[120,1140,3.2],[940,160,2.4],[60,300,2]].forEach(([hx,hy,s])=>{ ctx.save(); ctx.translate(hx,hy); ctx.scale(s,s); ctx.fill(herm); ctx.restore(); });
    ctx.restore();

    ctx.textAlign='center';
    ctx.fillStyle='rgba(244,239,230,.66)'; ctx.font='600 27px "Space Grotesk",sans-serif';
    spaced(ctx,"AUJOURD'HUI, J'AI EXPLORÉ",W/2,128,3);
    ctx.fillStyle='#F2A65A'; ctx.font='700 96px "Cinzel",serif'; ctx.fillText('SANTORIN',W/2,232);
    const dt=new Date(); ctx.fillStyle='rgba(244,239,230,.5)'; ctx.font='400 30px "Space Grotesk",sans-serif';
    ctx.fillText(`${dt.getDate()} ${MOIS[dt.getMonth()]} ${dt.getFullYear()}`,W/2,284);

    const top=336, bottom=1120, areaH=bottom-top, areaW=W-2*M;
    if(loaded.length){
      const n=loaded.length; const cols=n<=1?1:n<=4?2:n<=9?3:4; const rows=Math.ceil(n/cols);
      const gap=16; const tw=(areaW-(cols-1)*gap)/cols; const th=(areaH-(rows-1)*gap)/rows;
      loaded.forEach((it,k)=>{ const c=k%cols, r=Math.floor(k/cols);
        const x=M+c*(tw+gap), y=top+r*(th+gap);
        ctx.save(); rr(ctx,x,y,tw,th,18); ctx.clip(); cover(ctx,it.im,x,y,tw,th);
        const sc=ctx.createLinearGradient(0,y+th-70,0,y+th); sc.addColorStop(0,'rgba(0,0,0,0)'); sc.addColorStop(1,'rgba(0,0,0,.78)');
        ctx.fillStyle=sc; ctx.fillRect(x,y+th-70,tw,70);
        ctx.fillStyle='#fff'; ctx.textAlign='left'; ctx.font='600 23px "Cinzel",serif';
        let nm=it.lieu; while(ctx.measureText(nm).width>tw-24 && nm.length>4){ nm=nm.slice(0,-2); } if(nm!==it.lieu) nm=nm.trim()+'…';
        ctx.fillText(nm,x+16,y+th-22); ctx.restore();
        ctx.save(); rr(ctx,x,y,tw,th,18); ctx.strokeStyle='rgba(232,178,76,.4)'; ctx.lineWidth=2; ctx.stroke(); ctx.restore();
      });
    } else {
      // pas de photo : emblème centré
      ctx.save(); const cxp=W/2, cyp=top+areaH/2-30;
      const gd=ctx.createRadialGradient(cxp-26,cyp-30,10,cxp,cyp,120); gd.addColorStop(0,'#FBD089'); gd.addColorStop(1,'#F2A65A');
      ctx.fillStyle=gd; ctx.beginPath(); ctx.arc(cxp,cyp,116,0,Math.PI*2); ctx.fill();
      ctx.fillStyle='#0E2C49'; const star=new Path2D('M12 1l2.4 7 7.4.4-5.8 4.6L18 21l-6-4.2L6 21l2-8L2.2 8.4 9.6 8z');
      ctx.save(); ctx.translate(cxp-54,cyp-54); ctx.scale(4.5,4.5); ctx.fill(star); ctx.restore();
      ctx.restore();
      ctx.textAlign='center'; ctx.fillStyle='rgba(244,239,230,.6)'; ctx.font='400 28px "Space Grotesk",sans-serif';
      ctx.fillText('Parcours terminé',W/2,cyp+186);
    }

    // badge + signature
    ctx.textAlign='center';
    ctx.fillStyle='#F2A65A'; ctx.font='700 40px "Cinzel",serif'; ctx.fillText("Explorateur de Santorin",W/2,1196);
    ctx.fillStyle='rgba(244,239,230,.78)'; ctx.font='500 26px "Space Grotesk",sans-serif';
    ctx.fillText('Un jeu de piste à découvrir sur',W/2,1256);
    ctx.fillStyle='#FBD089'; ctx.font='600 30px "Space Grotesk",sans-serif';
    ctx.fillText('visiter-santorini.fr',W/2,1296);

    await new Promise(res=>cv.toBlob(b=>{ if(!b) return res();
      const url=URL.createObjectURL(b); const a=document.createElement('a'); a.href=url; a.download='carnet-santorin.png';
      document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(url),5000); res();
    },'image/png')); 
  } catch(e){ btn.textContent='Téléchargement indisponible ici'; setTimeout(()=>btn.textContent=label,2200); btn.disabled=false; loaded.forEach(o=>{try{URL.revokeObjectURL(o.u);}catch(_){}}); return; }
  loaded.forEach(o=>{try{URL.revokeObjectURL(o.u);}catch(e){}});
  btn.textContent=label; btn.disabled=false;
}

async function hardReset(){ state={started:false,unlocked:[],open:null}; store.clear(); await photoDB.clearAll(); revokeAll(); }

/* nav */
$("#start").onclick=async()=>{ if(state.unlocked.length>=N){ await hardReset(); } state.started=true; store.write(state); await renderGrid(); show("#s-grid"); };
$("#reset").onclick=async()=>{ await hardReset(); state.started=true; store.write(state); await renderGrid(); show("#s-grid"); window.scrollTo(0,0); };
$("#back-grid").onclick=()=>backToGrid();
$("#see-badge").onclick=async()=>{ if(state.unlocked.length>=N) await finish(); };
$("#back-from-final").onclick=()=>backToGrid();
$("#replay").onclick=async()=>{ await hardReset(); state.started=true; store.write(state); await renderGrid(); show("#s-grid"); };
$("#download").onclick=downloadCarnet;

/* init */
(async()=>{
  $("#chip-count").lastChild.textContent=`Gratuit · ${N} sites`;
  await photoDB.open();
  if(state.started){
    await renderGrid();
    if(state.open!=null && state.open>=0 && state.open<N){ renderCard(state.open); show("#s-card"); }
    else { show("#s-grid"); }
  }
})();
</script>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fjeu-de-piste-santorin%2F&amp;linkname=Jeu%20de%20piste%20%C3%A0%20Santorin%20%3A%2012%20sites%20incontournables" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fjeu-de-piste-santorin%2F&amp;linkname=Jeu%20de%20piste%20%C3%A0%20Santorin%20%3A%2012%20sites%20incontournables" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fjeu-de-piste-santorin%2F&amp;linkname=Jeu%20de%20piste%20%C3%A0%20Santorin%20%3A%2012%20sites%20incontournables" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fjeu-de-piste-santorin%2F&#038;title=Jeu%20de%20piste%20%C3%A0%20Santorin%20%3A%2012%20sites%20incontournables" data-a2a-url="https://visiter-santorini.fr/jeu-de-piste-santorin/" data-a2a-title="Jeu de piste à Santorin : 12 sites incontournables"></a></p><p>L’article <a href="https://visiter-santorini.fr/jeu-de-piste-santorin/">Jeu de piste à Santorin : 12 sites incontournables</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Mykonos, Paros &#038; Santorin en 7 jours</title>
		<link>https://visiter-santorini.fr/mykonos-paros-santorin-7-jours/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Mon, 04 May 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11373</guid>

					<description><![CDATA[<p>3 ÎLES Itinéraire · Cyclades Mykonos, Paros&#38; Santorin en 7 jours Le grand tour des Cyclades iconiques Trois îles, sept jours, tempo soutenu. Mykonos pour l&#8217;énergie et Délos, Paros pour le charme cycladique et les ports vénitiens, Santorin pour la caldeira et le coucher de soleil d&#8217;Oia. Voici l&#8217;itinéraire jour par jour pour enchaîner les&#8230;&#160;<a href="https://visiter-santorini.fr/mykonos-paros-santorin-7-jours/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Mykonos, Paros &#38; Santorin en 7 jours</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/mykonos-paros-santorin-7-jours/">Mykonos, Paros &amp; Santorin en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ══════════════════════════════════════════════
     BLOC PERSONNALISÉ HTML — MYKONOS + PAROS + SANTORIN EN 7 JOURS
     visiter-santorini.fr
     ══════════════════════════════════════════════ -->

<!-- PRELOAD image hero -->
<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-5.jpg" fetchpriority="high">

<!-- Fonts & icons -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=Jost:wght@300;400;500&#038;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
.oiap {
  --c-deep:    #0d2d4a;
  --c-azur:    #1a6fa8;
  --c-gold:    #c9a84c;
  --c-gold-lt: #e8d5a0;
  --c-cream:   #f2ede4;
  --c-white:   #faf9f7;
  --c-text:    #2c2c2c;
  --c-muted:   #6b6860;
  --ease:      cubic-bezier(.4,0,.2,1);
  font-family: 'Jost', sans-serif;
  color: var(--c-text);
  line-height: 1.7;
}
.oiap *, .oiap *::before, .oiap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.oiap img { display: block; width: 100%; }
.oiap a { text-decoration: none; color: inherit; }

/* ── REVEAL ── */
.oiap-rev { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.oiap-rev.oiap-v { opacity: 1; transform: none; }
.oiap-d1 { transition-delay:.1s; }
.oiap-d2 { transition-delay:.2s; }
.oiap-d3 { transition-delay:.3s; }
.oiap-d4 { transition-delay:.4s; }

/* ════════════ HERO ════════════ */
.oiap-hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.oiap-hero img {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  object-position: center 40%;
  transform: scale(1.06); animation: oiapHeroZoom 18s ease-out forwards;
}
@keyframes oiapHeroZoom { to { transform: scale(1); } }
.oiap-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,45,74,.95) 0%, rgba(13,45,74,.4) 50%, rgba(13,45,74,.1) 100%);
}
.oiap-hero-deco {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10rem, 20vw, 18rem); font-weight: 300; line-height: 1;
  color: rgba(201,168,76,.06); letter-spacing: -.04em;
  user-select: none; pointer-events: none;
}
.oiap-hero-content { position: relative; z-index: 2; padding: 0 7vw 5rem; width: 100%; }
.oiap-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
}
.oiap-hero-text { max-width: 620px; }
.oiap-hero-eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.1rem;
}
.oiap-hero-eyebrow-line { width: 28px; height: 1px; background: var(--c-gold); }
.oiap-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300;
  color: var(--c-white); line-height: 1.05; margin-bottom: .4rem;
}
.oiap-hero h1 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--c-gold-lt); margin-bottom: 1rem; font-weight: 300;
}
.oiap-hero-intro { color: rgba(250,249,247,.7); font-size: .94rem; max-width: 460px; line-height: 1.75; }
.oiap-hero-stats { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.oiap-hero-stat .num { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; color: var(--c-gold-lt); line-height: 1; text-align: right; }
.oiap-hero-stat .lbl { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,249,247,.4); text-align: right; }

/* ════════════ INTRO CHAPEAU ════════════ */
.oiap-intro { padding: 5.5rem 5vw; background: var(--c-white); text-align: center; }
.oiap-intro-inner { max-width: 720px; margin: 0 auto; }
.oiap-eyebrow-c {
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .8rem;
}
.oiap-eyebrow-c span { width: 24px; height: 1px; background: var(--c-gold); display: block; }
.oiap-intro p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.18rem, 2vw, 1.48rem); font-weight: 300;
  color: var(--c-deep); line-height: 1.72; margin-bottom: 1.2rem;
}
.oiap-intro p:last-child { margin-bottom: 0; }
.oiap-intro-deco { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--c-gold), transparent); margin: 2.5rem auto 0; }

/* ════════════ TITRE DE SECTION ════════════ */
.oiap-section-title {
  background: var(--c-white);
  padding: 3rem 7vw 2.8rem;
  border-top: 1px solid rgba(201,168,76,.35);
  display: flex; align-items: baseline; gap: 2.5rem;
}
.oiap-section-title-label {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold); white-space: nowrap; flex-shrink: 0;
}
.oiap-section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.1;
}
.oiap-section-title h2 em { font-style: italic; }

/* ════════════ BLOCS IMMERSIFS ════════════ */
.oiap-block {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 580px;
}
.oiap-block.oiap-reverse .oiap-photo { order: 2; }
.oiap-block.oiap-reverse .oiap-content { order: 1; }

.oiap-photo { position: relative; overflow: hidden; min-height: 520px; }
.oiap-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.oiap-block:hover .oiap-photo img { transform: scale(1.04); }
.oiap-photo-num {
  position: absolute; bottom: 1.2rem; right: 1.5rem;
  font-family: 'Cormorant Garamond', serif; font-size: 3.5rem;
  font-weight: 300; color: rgba(255,255,255,.2); line-height: 1; user-select: none;
  letter-spacing: -.02em;
}
.oiap-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 5vw 5rem 4.5vw;
}
.oiap-block.oiap-reverse .oiap-content { padding: 5rem 4.5vw 5rem 5vw; }
.oiap-content.oiap-white { background: var(--c-white); }
.oiap-content.oiap-cream { background: var(--c-cream); }

.oiap-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.3rem; display: flex; align-items: center; gap: .7rem;
}
.oiap-label::before { content: ''; width: 20px; height: 1px; background: var(--c-gold); }
.oiap-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.2; margin-bottom: 1.4rem;
}
.oiap-content h3 em { font-style: italic; color: var(--c-azur); }
.oiap-rule { width: 40px; height: 1px; background: var(--c-gold); margin-bottom: 1.6rem; }
.oiap-content p { font-size: .93rem; color: var(--c-muted); line-height: 1.82; margin-bottom: 1rem; }
.oiap-content p:last-of-type { margin-bottom: 0; }
.oiap-content p strong { color: var(--c-text); font-weight: 500; }

.oiap-note {
  margin-top: 1.5rem; padding: 1rem 1.2rem;
  background: rgba(201,168,76,.09); border-left: 2px solid var(--c-gold);
  border-radius: 0 3px 3px 0;
}
.oiap-note p { font-size: .83rem; color: var(--c-text); margin: 0; line-height: 1.6; }
.oiap-note p i { color: var(--c-gold); margin-right: .4rem; }

.oiap-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--c-azur); font-size: .78rem; font-weight: 500;
  margin-top: 1.4rem; transition: gap .2s;
}
.oiap-link:hover { gap: .7rem; }
.oiap-link i { font-size: .68rem; }

/* ════════════ ENCART INFOS PRATIQUES (deep blue) ════════════ */
.oiap-circuits { background: var(--c-deep); padding: 5rem 5vw; }
.oiap-circuits-inner { max-width: 1100px; margin: 0 auto; }
.oiap-circuits-header { text-align: center; margin-bottom: 3.5rem; }
.oiap-circuits-header .oiap-eyebrow-c { color: var(--c-gold); }
.oiap-circuits-header .oiap-eyebrow-c span { background: var(--c-gold); }
.oiap-circuits-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 300; color: var(--c-white);
  line-height: 1.15; margin-bottom: 1rem;
}
.oiap-circuits-header h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuits-header p { font-size: .92rem; color: rgba(250,249,247,.7); max-width: 620px; margin: 0 auto; line-height: 1.75; }
.oiap-circuits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.oiap-circuit-card {
  background: rgba(255,255,255,.04); padding: 2rem 1.8rem; border-radius: 3px;
  border-top: 3px solid var(--c-gold);
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oiap-circuit-card-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .8rem;
}
.oiap-circuit-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 400; color: var(--c-white);
  line-height: 1.25; margin-bottom: 1rem;
}
.oiap-circuit-card h3 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuit-card-route {
  font-size: .82rem; color: var(--c-gold-lt); font-weight: 500;
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.oiap-circuit-card p { font-size: .86rem; color: rgba(250,249,247,.7); line-height: 1.7; }

/* ════════════ CTA FINAL ════════════ */
.oiap-cta {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oiap-cta img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 30%; }
.oiap-cta-ov { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,45,74,.9) 0%, rgba(13,45,74,.6) 100%); }
.oiap-cta-content { position: relative; z-index: 2; text-align: center; padding: 4rem 5vw; max-width: 660px; }
.oiap-cta-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; color: var(--c-white);
  line-height: 1.1; margin-bottom: 1.2rem;
}
.oiap-cta-content h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-cta-content p { color: rgba(250,249,247,.65); font-size: .9rem; margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.oiap-btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-gold); color: var(--c-deep);
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500; padding: .9rem 2rem; border-radius: 2px;
  transition: background .3s, transform .2s; margin-bottom: 1.5rem;
}
.oiap-btn-gold:hover { background: var(--c-gold-lt); transform: translateY(-2px); }
.oiap-cta-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.oiap-cta-links a {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: var(--c-white); padding: .75rem 1.3rem; border-radius: 3px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; transition: all .3s;
}
.oiap-cta-links a:hover { background: rgba(201,168,76,.2); border-color: var(--c-gold); }

/* ── RESPONSIVE ── */
@media(max-width: 960px) {
  .oiap-block { grid-template-columns: 1fr; }
  .oiap-photo { min-height: 320px; }
  .oiap-block.oiap-reverse .oiap-photo { order: 0; }
  .oiap-block.oiap-reverse .oiap-content { order: 1; }
  .oiap-hero-stats { display: none; }
  .oiap-section-title { gap: 1.2rem; padding: 2.2rem 5vw 2rem; }
  .oiap-circuits-grid { grid-template-columns: 1fr; }
}
</style>


<div class="oiap">

<!-- ═══ HERO ═══ -->
<div class="oiap-hero">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-5.jpg" alt="Mykonos Paros Santorin 7 jours Cyclades" fetchpriority="high">
  <div class="oiap-hero-ov"></div>
  <div class="oiap-hero-deco" aria-hidden="true">3 ÎLES</div>
  <div class="oiap-hero-content">
    <div class="oiap-hero-inner">
      <div class="oiap-hero-text">
        <div class="oiap-hero-eyebrow oiap-rev"><div class="oiap-hero-eyebrow-line"></div>Itinéraire · Cyclades</div>
        <h1 class="oiap-rev oiap-d1">Mykonos, Paros<br>&amp; Santorin en <em>7 jours</em></h1>
        <p class="oiap-hero-tagline oiap-rev oiap-d2">Le grand tour des Cyclades iconiques</p>
        <p class="oiap-hero-intro oiap-rev oiap-d3">Trois îles, sept jours, tempo soutenu. Mykonos pour l&rsquo;énergie et Délos, Paros pour le charme cycladique et les ports vénitiens, Santorin pour la caldeira et le coucher de soleil d&rsquo;Oia. Voici l&rsquo;itinéraire jour par jour pour enchaîner les trois sans s&rsquo;épuiser.</p>
      </div>
      <div class="oiap-hero-stats oiap-rev oiap-d3">
        <div class="oiap-hero-stat"><div class="num">3 îles</div><div class="lbl">stars des Cyclades</div></div>
        <div class="oiap-hero-stat"><div class="num">2 ferries</div><div class="lbl">entre les 3 îles</div></div>
        <div class="oiap-hero-stat"><div class="num">2+2+2</div><div class="lbl">nuits par île</div></div>
      </div>
    </div>
  </div>
</div>

<!-- ═══ INTRO CHAPEAU ═══ -->
<div class="oiap-intro">
  <div class="oiap-intro-inner">
    <div class="oiap-eyebrow-c oiap-rev"><span></span>Le grand classique<span></span></div>
    <p class="oiap-rev oiap-d1">Combiner Mykonos, Paros et Santorin en 7 jours reste le circuit le plus demandé des Cyclades. Les trois îles sont alignées sur l&rsquo;axe ferry principal de l&rsquo;archipel et se complètent parfaitement : Mykonos concentre l&rsquo;énergie festive et Délos, Paros offre l&rsquo;authenticité cycladique à mi-chemin, Santorin clôture en beauté avec la caldeira et les couchers de soleil d&rsquo;Oia.</p>
    <p class="oiap-rev oiap-d2">L&rsquo;itinéraire qui suit propose <strong>2 nuits par île</strong> avec des ferries choisis pour préserver les journées sur place. L&rsquo;ordre Mykonos → Paros → Santorin est volontaire : il suit la chronologie des liaisons maritimes les plus fréquentes, et finir par Santorin facilite le retour — plus de vols directs vers l&rsquo;Europe. Le tempo reste dense mais réaliste.</p>
    <div class="oiap-intro-deco oiap-rev oiap-d3"></div>
  </div>
</div>

<!-- ═══ SECTION : ITINÉRAIRE JOUR PAR JOUR ═══ -->
<div class="oiap-section-title oiap-rev">
  <div class="oiap-section-title-label">Programme jour par jour</div>
  <h2>L&rsquo;itinéraire<br>sur <em>7 jours</em></h2>
</div>

<!-- JOUR 1 : Arrivée Mykonos - Chora + Little Venice -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/vacances-mykonos-scaled.jpg" alt="Little Venice Mykonos coucher de soleil" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J1</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Mykonos · Chora &amp; Little Venice</div>
    <h3>Arrivée à Mykonos :<br>Chora et les <em>moulins à vent</em></h3>
    <div class="oiap-rule"></div>
    <p>Arrivée à Mykonos par vol direct depuis Paris, Lyon ou Marseille en saison, ou par ferry depuis Le Pirée (2h30 en rapide). Installation à Chora ou dans les environs. Première plongée dans le labyrinthe blanc de la <strong>capitale</strong>, conçu pour dérouter les pirates : ruelles pavées, cours fleuries de bougainvilliers, petites églises à chaque tournant. Quartier de Matogianni pour l&rsquo;animation, ruelles descendantes vers la mer pour les plus belles surprises.</p>
    <p>Fin d&rsquo;après-midi à <strong>Little Venice</strong> (Alefkandra), maisons colorées du XVIIIe siècle construites au ras de l&rsquo;eau, balcons suspendus au-dessus des vagues. Juste au-dessus, les <strong>cinq moulins à vent de Kato Mili</strong> datant du XVIe siècle dominent la scène. Coucher de soleil depuis une terrasse (arriver 45 min à l&rsquo;avance). Dîner dans une taverne de Chora.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/mykonos-cyclades/">Découvrir Mykonos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 2 : Délos + plage -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/Delos-Cyclades-Grece-930x620.jpg.avif" alt="Délos site archéologique UNESCO" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J2</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Mykonos · Délos &amp; plages</div>
    <h3>Délos :<br>l&rsquo;île <em>sacrée d&rsquo;Apollon</em></h3>
    <div class="oiap-rule"></div>
    <p>Départ matinal depuis le Vieux-Port de Mykonos pour <strong>Délos</strong>, à 30 minutes de traversée. Classé au patrimoine mondial de l&rsquo;UNESCO, ce site est l&rsquo;un des plus importants de la Méditerranée — lieu de naissance mythologique d&rsquo;Apollon et d&rsquo;Artémis, l&rsquo;un des ports commerciaux les plus actifs du monde antique. Temples, mosaïques, maisons de marchands, la célèbre <strong>Terrasse des Lions</strong>. Audioguide ou visite guidée recommandée.</p>
    <p>Retour à Mykonos en début d&rsquo;après-midi. Détente sur l&rsquo;une des plages emblématiques de l&rsquo;île selon votre profil : <strong>Elia</strong> pour la plus longue et la plus calme, <strong>Platis Gialos</strong> pour l&rsquo;animation familiale, <strong>Paradise Beach</strong> pour les beach-clubs, <strong>Psarou</strong> pour le glamour. Soirée à Little Venice pour un dernier verre avec vue, ou dans les bars branchés de Chora.</p>
    <div class="oiap-note"><p><i class="fas fa-info-circle"></i> Délos fermée le lundi. Pas d&rsquo;ombre ni de restaurant sur le site — eau et chapeau indispensables, surtout en juillet-août.</p></div>
  </div>
</div>

<!-- JOUR 3 : Transition Mykonos → Paros + Naoussa -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/naoussa-paros-cyclades-3-scaled.jpg" alt="Naoussa port vénitien Paros Cyclades" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J3</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Mykonos → Paros · Naoussa</div>
    <h3>Cap sur Paros :<br><em>Naoussa</em> et son port vénitien</h3>
    <div class="oiap-rule"></div>
    <p>Ferry vers Paros le matin — comptez <strong>45 minutes à 1h30</strong> selon le bateau (Seajets rapide ou Blue Star Ferries classique). Plusieurs rotations par jour en haute saison. Arrivée au port de Parikia, mais cap direct sur Naoussa pour maximiser le temps sur place. Installation à l&rsquo;hôtel à Naoussa (recommandé pour cette étape) ou à Parikia.</p>
    <p>Après-midi à <strong>Naoussa</strong>, ancien village de pêcheurs devenu l&rsquo;un des lieux les plus courus des Cyclades sans avoir perdu son authenticité. Petit port vénitien protégé par les ruines d&rsquo;un château englouti, caïques colorés, tavernes de poisson les pieds dans l&rsquo;eau. Caïque-taxi vers la plage de <strong>Kolymbithres</strong> où les rochers de granit sculptés par les vagues forment des piscines naturelles. Dîner sur le port, immersion dans l&rsquo;ambiance nocturne animée.</p>
    <div class="oiap-note"><p><i class="fas fa-ship"></i> Réservation du ferry Mykonos-Paros indispensable en juillet-août. Compagnies principales : Seajets, Blue Star Ferries, Golden Star Ferries.</p></div>
  </div>
</div>

<!-- JOUR 4 : Paros - Parikia + Lefkès -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/village-lefkes-paros.jpg" alt="Lefkès village traditionnel Paros" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J4</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Paros · Parikia &amp; Lefkès</div>
    <h3>Parikia et <em>Lefkès</em> :<br>entre capitale et montagne</h3>
    <div class="oiap-rule"></div>
    <p>Matinée à <strong>Parikia</strong>, la capitale de Paros. Dédale de ruelles blanchies à la chaux fleuries de bougainvilliers, <strong>église Panagia Ekatontapiliani</strong> (Notre-Dame aux Cent Portes), l&rsquo;un des monuments paléochrétiens les plus importants de Grèce, datant du IVe siècle. Kastro vénitien construit avec des vestiges de temples antiques, promenade sur le port.</p>
    <p>Après-midi dans les terres, à <strong>Lefkès</strong>, ancienne capitale perchée au cœur des montagnes et village le mieux préservé de l&rsquo;île. Ruelles pavées de marbre local, maisons néoclassiques, églises byzantines, panorama sur toute l&rsquo;île depuis la place principale. Courte marche sur la <strong>voie byzantine</strong> pavée, ancien sentier historique qui reliait Lefkès à Prodromos. Fin de journée sur <strong>Golden Beach</strong> ou à <strong>Piso Livadi</strong>, petit port de pêcheurs authentique sur la côte est. Dîner à Naoussa.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/decouvrir-paros-une-ile-idyllique-dans-les-cyclades/">Découvrir Paros <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 5 : Transition Paros → Santorin + Fira -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2024/03/architecture-fira-santorin-cyclades-2048x1536.jpg" alt="Fira capitale Santorin caldeira" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J5</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Paros → Santorin · Transition</div>
    <h3>Cap sur Santorin :<br>arrivée à <em>Fira</em></h3>
    <div class="oiap-rule"></div>
    <p>Départ matinal de Paros pour Santorin — comptez <strong>2h à 3h en ferry rapide</strong> (Seajets, Minoan Lines) ou 3h30 en classique (Blue Star Ferries). Arrivée au port d&rsquo;<strong>Athinios</strong>, remontée spectaculaire de la route en lacets vers le haut de la caldeira. Installation à l&rsquo;hôtel : Fira pour l&rsquo;animation et les prix raisonnables, Imerovigli pour le calme et les vues, Oia pour le prestige (prix élevés).</p>
    <p>Après-midi à <strong>Fira</strong>, capitale de Santorin. Corniche de la caldeira avec ses panoramas vertigineux sur les falaises ocre et noires plongeant à 400 mètres dans une mer d&rsquo;un bleu profond, musée archéologique de Théra, ruelles animées. Première impression forte de la caldeira. En fin de journée, court trajet vers <strong>Imerovigli</strong> pour voir le rocher de Skaros, ancien site d&rsquo;une forteresse vénitienne, au coucher du soleil. Dîner à Fira ou à Firostefani.</p>
    <div class="oiap-note"><p><i class="fas fa-ship"></i> Ferry Paros-Santorin souvent ballotté par le meltemi en juillet-août — la traversée peut être agitée. Prendre un cachet contre le mal de mer si sensible.</p></div>
  </div>
</div>

<!-- JOUR 6 : Randonnée Fira-Oia + coucher de soleil -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2020/03/hike-santorini.jpg" alt="Randonnée Fira Oia caldeira Santorin" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J6</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Santorin · Randonnée &amp; Oia</div>
    <h3>Randonnée Fira → Oia<br>et le <em>coucher de soleil</em></h3>
    <div class="oiap-rule"></div>
    <p>Journée reine de Santorin : la <strong>randonnée Fira-Oia</strong>, 12 km en corniche sur la crête de la caldeira, à travers Firostefani, Imerovigli et le rocher de Skaros. Trois à quatre heures de marche avec des panoramas vertigineux à chaque pas, les falaises plongeant 400 mètres plus bas dans la caldeira. Partir tôt (avant 9h) pour éviter la chaleur, chaussures fermées, eau et crème solaire indispensables.</p>
    <p>Arrivée à <strong>Oia</strong> en milieu d&rsquo;après-midi — le village le plus photographié de Grèce : maisons troglodytes blanches accrochées à la falaise, dômes bleus des églises, ruelles pavées. Déjeuner tardif et visite du port d&rsquo;Amoudi en contrebas (escalier de 300 marches, tavernes de poisson). En fin de journée, positionnement stratégique pour le <strong>coucher de soleil</strong> — le château byzantin est le spot le plus célèbre mais le plus bondé ; préférer une terrasse de restaurant réservée à l&rsquo;avance. Retour à Fira en bus.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/randonnee-oia-fira/">Découvrir la randonnée <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 7 : Akrotiri + Red Beach + volcan + départ -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2022/01/red-beach-akrotiri-106-scaled.jpg" alt="Red Beach Akrotiri Santorin falaises rouges" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J7</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Santorin · Akrotiri &amp; départ</div>
    <h3>Akrotiri, <em>Red Beach</em><br>et le départ</h3>
    <div class="oiap-rule"></div>
    <p>Dernière journée centrée sur le sud de l&rsquo;île. Matinée au site archéologique d&rsquo;<strong>Akrotiri</strong>, surnommé « la Pompéi grecque » : une ville minoenne entière préservée sous les cendres de l&rsquo;éruption de 1600 av. J.C. Rues pavées, maisons à plusieurs étages, fresques exceptionnelles, systèmes de plomberie avancés. Aucun reste humain retrouvé — la population avait fui avant la catastrophe. Certains chercheurs y voient l&rsquo;origine du mythe de l&rsquo;Atlantide. Le site est couvert et frais, agréable en été.</p>
    <p>À 10 minutes à pied, la <strong>Red Beach</strong>, plage spectaculaire encadrée de falaises volcaniques rouges. Rapide passage à <strong>Pyrgos</strong>, village médiéval perché offrant l&rsquo;unique panorama à 360° sur toute l&rsquo;île, ou dégustation d&rsquo;<strong>Assyrtiko</strong> dans un domaine viticole (Santo Wines, Domaine Sigalas). Transfert à l&rsquo;aéroport de Santorin (JTR) ou au port d&rsquo;Athinios en fin d&rsquo;après-midi. Sept jours dans les Cyclades iconiques achevés.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/akrotiri/">Découvrir Akrotiri <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- ═══ ENCART INFOS PRATIQUES (deep blue) ═══ -->
<div class="oiap-circuits">
  <div class="oiap-circuits-inner">
    <div class="oiap-circuits-header oiap-rev">
      <div class="oiap-eyebrow-c" style="justify-content:center;"><span></span>Pour préparer votre voyage<span></span></div>
      <h2>Infos pratiques<br>pour <em>combiner les trois îles</em></h2>
      <p>Enchaîner trois îles en une semaine demande un minimum de préparation : liaisons ferry, hébergements et timing des visites.</p>
    </div>
    <div class="oiap-circuits-grid">
      <div class="oiap-circuit-card oiap-rev">
        <div class="oiap-circuit-card-label">Transport</div>
        <h3>Deux <em>ferries</em> clés</h3>
        <div class="oiap-circuit-card-route">Mykonos → Paros → Santorin</div>
        <p>Mykonos → Paros : 45 min à 1h30 (Seajets, Blue Star Ferries). Paros → Santorin : 2h à 3h30. Vols directs possibles à l&rsquo;arrivée sur Mykonos (JMK) et au départ de Santorin (JTR) depuis Paris, Lyon, Marseille. Réservation des ferries à faire 3-4 semaines à l&rsquo;avance en juillet-août.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d1">
        <div class="oiap-circuit-card-label">Hébergement</div>
        <h3>Trois <em>bases</em> à choisir</h3>
        <div class="oiap-circuit-card-route">Chora · Naoussa · Fira ou Imerovigli</div>
        <p>Mykonos : Chora centrale ou Ornos pour les plages. Paros : <strong>Naoussa</strong> plutôt que Parikia pour cet itinéraire court. Santorin : Fira pour l&rsquo;animation et les budgets moyens, Imerovigli pour le calme et la vue sans les prix d&rsquo;Oia. Éviter de changer d&rsquo;hôtel sur la même île.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d2">
        <div class="oiap-circuit-card-label">Quand partir</div>
        <h3>Tempo et <em>période idéale</em></h3>
        <div class="oiap-circuit-card-route">Mai-juin et septembre</div>
        <p>Haute saison de juillet-août : prix exorbitants, foule, meltemi fort qui peut perturber les ferries. <strong>Mi-mai à mi-juin</strong> et <strong>mi-septembre à mi-octobre</strong> : idéal. Rythme dense sur 7 jours — prévoir une journée off au retour pour récupérer.</p>
      </div>
    </div>
  </div>
</div>

<!-- ═══ CTA FINAL ═══ -->
<div class="oiap-cta">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/ile-de-santorin-tomas-nozina-scaled.jpg" alt="Caldeira Santorin Cyclades" loading="lazy">
  <div class="oiap-cta-ov"></div>
  <div class="oiap-cta-content">
    <div class="oiap-eyebrow-c oiap-rev" style="margin-bottom:1rem;"><span></span>À explorer aussi<span></span></div>
    <h2 class="oiap-rev oiap-d1">Prolonger l&rsquo;aventure<br>dans les <em>Cyclades</em></h2>
    <p class="oiap-rev oiap-d2">Trois îles en sept jours, c&rsquo;est déjà le grand tour iconique. L&rsquo;archipel réserve aussi Naxos, Milos, Amorgos, Sifnos et les Petites Cyclades pour un prochain voyage plus long.</p>
    <a href="https://visiter-santorini.fr/decouvrir-les-cyclades-en-grece/" class="oiap-btn-gold oiap-rev oiap-d3">Découvrir les Cyclades <i class="fas fa-arrow-right"></i></a>
    <div class="oiap-cta-links oiap-rev oiap-d4">
      <a href="https://visiter-santorini.fr/mykonos-cyclades/">Mykonos</a>
      <a href="https://visiter-santorini.fr/decouvrir-paros-une-ile-idyllique-dans-les-cyclades/">Paros</a>
      <a href="https://visiter-santorini.fr/santorin/">Santorin</a>
      <a href="https://visiter-santorini.fr/10-jours-dans-les-cyclades/">10 jours dans les Cyclades</a>
      <a href="https://visiter-santorini.fr/iles-grece/">Toutes les îles</a>
    </div>
  </div>
</div>

</div><!-- /oiap -->

<script>
(function(){
  var els = document.querySelectorAll('.oiap-rev');
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){ e.target.classList.add('oiap-v'); io.unobserve(e.target); }
    });
  }, { threshold: .06, rootMargin: '0px 0px -30px 0px' });
  els.forEach(function(el){ io.observe(el); });
})();
</script>



<p class="wp-block-paragraph"></p>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-paros-santorin-7-jours%2F&amp;linkname=Mykonos%2C%20Paros%20%26%20Santorin%20en%207%20jours" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-paros-santorin-7-jours%2F&amp;linkname=Mykonos%2C%20Paros%20%26%20Santorin%20en%207%20jours" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-paros-santorin-7-jours%2F&amp;linkname=Mykonos%2C%20Paros%20%26%20Santorin%20en%207%20jours" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-paros-santorin-7-jours%2F&#038;title=Mykonos%2C%20Paros%20%26%20Santorin%20en%207%20jours" data-a2a-url="https://visiter-santorini.fr/mykonos-paros-santorin-7-jours/" data-a2a-title="Mykonos, Paros &amp; Santorin en 7 jours"></a></p><p>L’article <a href="https://visiter-santorini.fr/mykonos-paros-santorin-7-jours/">Mykonos, Paros &amp; Santorin en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Milos et Sifnos en 7 jours</title>
		<link>https://visiter-santorini.fr/milos-sifnos-7-jours/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Mon, 27 Apr 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11370</guid>

					<description><![CDATA[<p>7 JOURS Itinéraire · Cyclades Milos &#38; Sifnosen 7 jours Nature volcanique et gastronomie authentique Milos, l&#8217;île aux couleurs : roches blanches de Sarakiniko, grottes pirates de Kleftiko, villages de pêcheurs colorés. Sifnos, l&#8217;île des chefs : monastères blancs, sentiers de randonnée, revithada et mastelo. Voici l&#8217;itinéraire jour par jour pour combiner les deux. 235&#8230;&#160;<a href="https://visiter-santorini.fr/milos-sifnos-7-jours/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Milos et Sifnos en 7 jours</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/milos-sifnos-7-jours/">Milos et Sifnos en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ══════════════════════════════════════════════
     BLOC PERSONNALISÉ HTML — MILOS ET SIFNOS EN 7 JOURS
     visiter-santorini.fr
     ══════════════════════════════════════════════ -->

<!-- PRELOAD image hero -->
<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/2021/04/milos-villages-pecheurs.jpg" fetchpriority="high">

<!-- Fonts & icons -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=Jost:wght@300;400;500&#038;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
.oiap {
  --c-deep:    #0d2d4a;
  --c-azur:    #1a6fa8;
  --c-gold:    #c9a84c;
  --c-gold-lt: #e8d5a0;
  --c-cream:   #f2ede4;
  --c-white:   #faf9f7;
  --c-text:    #2c2c2c;
  --c-muted:   #6b6860;
  --ease:      cubic-bezier(.4,0,.2,1);
  font-family: 'Jost', sans-serif;
  color: var(--c-text);
  line-height: 1.7;
}
.oiap *, .oiap *::before, .oiap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.oiap img { display: block; width: 100%; }
.oiap a { text-decoration: none; color: inherit; }

/* ── REVEAL ── */
.oiap-rev { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.oiap-rev.oiap-v { opacity: 1; transform: none; }
.oiap-d1 { transition-delay:.1s; }
.oiap-d2 { transition-delay:.2s; }
.oiap-d3 { transition-delay:.3s; }
.oiap-d4 { transition-delay:.4s; }

/* ════════════ HERO ════════════ */
.oiap-hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.oiap-hero img {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  object-position: center 40%;
  transform: scale(1.06); animation: oiapHeroZoom 18s ease-out forwards;
}
@keyframes oiapHeroZoom { to { transform: scale(1); } }
.oiap-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,45,74,.95) 0%, rgba(13,45,74,.4) 50%, rgba(13,45,74,.1) 100%);
}
.oiap-hero-deco {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10rem, 20vw, 18rem); font-weight: 300; line-height: 1;
  color: rgba(201,168,76,.06); letter-spacing: -.04em;
  user-select: none; pointer-events: none;
}
.oiap-hero-content { position: relative; z-index: 2; padding: 0 7vw 5rem; width: 100%; }
.oiap-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
}
.oiap-hero-text { max-width: 620px; }
.oiap-hero-eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.1rem;
}
.oiap-hero-eyebrow-line { width: 28px; height: 1px; background: var(--c-gold); }
.oiap-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300;
  color: var(--c-white); line-height: 1.05; margin-bottom: .4rem;
}
.oiap-hero h1 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--c-gold-lt); margin-bottom: 1rem; font-weight: 300;
}
.oiap-hero-intro { color: rgba(250,249,247,.7); font-size: .94rem; max-width: 460px; line-height: 1.75; }
.oiap-hero-stats { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.oiap-hero-stat .num { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; color: var(--c-gold-lt); line-height: 1; text-align: right; }
.oiap-hero-stat .lbl { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,249,247,.4); text-align: right; }

/* ════════════ INTRO CHAPEAU ════════════ */
.oiap-intro { padding: 5.5rem 5vw; background: var(--c-white); text-align: center; }
.oiap-intro-inner { max-width: 720px; margin: 0 auto; }
.oiap-eyebrow-c {
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .8rem;
}
.oiap-eyebrow-c span { width: 24px; height: 1px; background: var(--c-gold); display: block; }
.oiap-intro p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.18rem, 2vw, 1.48rem); font-weight: 300;
  color: var(--c-deep); line-height: 1.72; margin-bottom: 1.2rem;
}
.oiap-intro p:last-child { margin-bottom: 0; }
.oiap-intro-deco { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--c-gold), transparent); margin: 2.5rem auto 0; }

/* ════════════ TITRE DE SECTION ════════════ */
.oiap-section-title {
  background: var(--c-white);
  padding: 3rem 7vw 2.8rem;
  border-top: 1px solid rgba(201,168,76,.35);
  display: flex; align-items: baseline; gap: 2.5rem;
}
.oiap-section-title-label {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold); white-space: nowrap; flex-shrink: 0;
}
.oiap-section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.1;
}
.oiap-section-title h2 em { font-style: italic; }

/* ════════════ BLOCS IMMERSIFS ════════════ */
.oiap-block {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 580px;
}
.oiap-block.oiap-reverse .oiap-photo { order: 2; }
.oiap-block.oiap-reverse .oiap-content { order: 1; }

.oiap-photo { position: relative; overflow: hidden; min-height: 520px; }
.oiap-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.oiap-block:hover .oiap-photo img { transform: scale(1.04); }
.oiap-photo-num {
  position: absolute; bottom: 1.2rem; right: 1.5rem;
  font-family: 'Cormorant Garamond', serif; font-size: 3.5rem;
  font-weight: 300; color: rgba(255,255,255,.2); line-height: 1; user-select: none;
  letter-spacing: -.02em;
}
.oiap-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 5vw 5rem 4.5vw;
}
.oiap-block.oiap-reverse .oiap-content { padding: 5rem 4.5vw 5rem 5vw; }
.oiap-content.oiap-white { background: var(--c-white); }
.oiap-content.oiap-cream { background: var(--c-cream); }

.oiap-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.3rem; display: flex; align-items: center; gap: .7rem;
}
.oiap-label::before { content: ''; width: 20px; height: 1px; background: var(--c-gold); }
.oiap-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.2; margin-bottom: 1.4rem;
}
.oiap-content h3 em { font-style: italic; color: var(--c-azur); }
.oiap-rule { width: 40px; height: 1px; background: var(--c-gold); margin-bottom: 1.6rem; }
.oiap-content p { font-size: .93rem; color: var(--c-muted); line-height: 1.82; margin-bottom: 1rem; }
.oiap-content p:last-of-type { margin-bottom: 0; }
.oiap-content p strong { color: var(--c-text); font-weight: 500; }

.oiap-spots { margin-top: 1.5rem; list-style: none; }
.oiap-spots li {
  padding: .78rem 0; border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: flex-start; gap: .8rem;
}
.oiap-spots li:last-child { border-bottom: none; }
.oiap-spots li i { color: var(--c-gold); font-size: .78rem; margin-top: .28rem; flex-shrink: 0; }
.oiap-spots li div strong { font-size: .88rem; color: var(--c-deep); display: block; margin-bottom: .15rem; }
.oiap-spots li div span { font-size: .82rem; color: var(--c-muted); }

.oiap-note {
  margin-top: 1.5rem; padding: 1rem 1.2rem;
  background: rgba(201,168,76,.09); border-left: 2px solid var(--c-gold);
  border-radius: 0 3px 3px 0;
}
.oiap-note p { font-size: .83rem; color: var(--c-text); margin: 0; line-height: 1.6; }
.oiap-note p i { color: var(--c-gold); margin-right: .4rem; }

.oiap-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--c-azur); font-size: .78rem; font-weight: 500;
  margin-top: 1.4rem; transition: gap .2s;
}
.oiap-link:hover { gap: .7rem; }
.oiap-link i { font-size: .68rem; }

/* ════════════ ENCART INFOS PRATIQUES (deep blue) ════════════ */
.oiap-circuits { background: var(--c-deep); padding: 5rem 5vw; }
.oiap-circuits-inner { max-width: 1100px; margin: 0 auto; }
.oiap-circuits-header { text-align: center; margin-bottom: 3.5rem; }
.oiap-circuits-header .oiap-eyebrow-c { color: var(--c-gold); }
.oiap-circuits-header .oiap-eyebrow-c span { background: var(--c-gold); }
.oiap-circuits-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 300; color: var(--c-white);
  line-height: 1.15; margin-bottom: 1rem;
}
.oiap-circuits-header h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuits-header p { font-size: .92rem; color: rgba(250,249,247,.7); max-width: 620px; margin: 0 auto; line-height: 1.75; }
.oiap-circuits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.oiap-circuit-card {
  background: rgba(255,255,255,.04); padding: 2rem 1.8rem; border-radius: 3px;
  border-top: 3px solid var(--c-gold);
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oiap-circuit-card-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .8rem;
}
.oiap-circuit-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 400; color: var(--c-white);
  line-height: 1.25; margin-bottom: 1rem;
}
.oiap-circuit-card h3 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuit-card-route {
  font-size: .82rem; color: var(--c-gold-lt); font-weight: 500;
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.oiap-circuit-card p { font-size: .86rem; color: rgba(250,249,247,.7); line-height: 1.7; }

/* ════════════ CTA FINAL ════════════ */
.oiap-cta {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oiap-cta img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 30%; }
.oiap-cta-ov { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,45,74,.9) 0%, rgba(13,45,74,.6) 100%); }
.oiap-cta-content { position: relative; z-index: 2; text-align: center; padding: 4rem 5vw; max-width: 660px; }
.oiap-cta-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; color: var(--c-white);
  line-height: 1.1; margin-bottom: 1.2rem;
}
.oiap-cta-content h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-cta-content p { color: rgba(250,249,247,.65); font-size: .9rem; margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.oiap-btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-gold); color: var(--c-deep);
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500; padding: .9rem 2rem; border-radius: 2px;
  transition: background .3s, transform .2s; margin-bottom: 1.5rem;
}
.oiap-btn-gold:hover { background: var(--c-gold-lt); transform: translateY(-2px); }
.oiap-cta-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.oiap-cta-links a {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: var(--c-white); padding: .75rem 1.3rem; border-radius: 3px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; transition: all .3s;
}
.oiap-cta-links a:hover { background: rgba(201,168,76,.2); border-color: var(--c-gold); }

/* ── RESPONSIVE ── */
@media(max-width: 960px) {
  .oiap-block { grid-template-columns: 1fr; }
  .oiap-photo { min-height: 320px; }
  .oiap-block.oiap-reverse .oiap-photo { order: 0; }
  .oiap-block.oiap-reverse .oiap-content { order: 1; }
  .oiap-hero-stats { display: none; }
  .oiap-section-title { gap: 1.2rem; padding: 2.2rem 5vw 2rem; }
  .oiap-circuits-grid { grid-template-columns: 1fr; }
}
</style>


<div class="oiap">

<!-- ═══ HERO ═══ -->
<div class="oiap-hero">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2021/04/milos-villages-pecheurs.jpg" alt="Milos et Sifnos en 7 jours Cyclades" fetchpriority="high">
  <div class="oiap-hero-ov"></div>
  <div class="oiap-hero-deco" aria-hidden="true">7 JOURS</div>
  <div class="oiap-hero-content">
    <div class="oiap-hero-inner">
      <div class="oiap-hero-text">
        <div class="oiap-hero-eyebrow oiap-rev"><div class="oiap-hero-eyebrow-line"></div>Itinéraire · Cyclades</div>
        <h1 class="oiap-rev oiap-d1">Milos &amp; Sifnos<br>en <em>7 jours</em></h1>
        <p class="oiap-hero-tagline oiap-rev oiap-d2">Nature volcanique et gastronomie authentique</p>
        <p class="oiap-hero-intro oiap-rev oiap-d3">Milos, l&rsquo;île aux couleurs : roches blanches de Sarakiniko, grottes pirates de Kleftiko, villages de pêcheurs colorés. Sifnos, l&rsquo;île des chefs : monastères blancs, sentiers de randonnée, revithada et mastelo. Voici l&rsquo;itinéraire jour par jour pour combiner les deux.</p>
      </div>
      <div class="oiap-hero-stats oiap-rev oiap-d3">
        <div class="oiap-hero-stat"><div class="num">235 km²</div><div class="lbl">superficie totale des 2 îles</div></div>
        <div class="oiap-hero-stat"><div class="num">45 min</div><div class="lbl">de ferry entre Milos et Sifnos</div></div>
        <div class="oiap-hero-stat"><div class="num">4 + 3</div><div class="lbl">jours de chaque côté</div></div>
      </div>
    </div>
  </div>
</div>

<!-- ═══ INTRO CHAPEAU ═══ -->
<div class="oiap-intro">
  <div class="oiap-intro-inner">
    <div class="oiap-eyebrow-c oiap-rev"><span></span>Le combo nature &amp; saveurs<span></span></div>
    <p class="oiap-rev oiap-d1">Milos et Sifnos forment l&rsquo;un des duos les plus riches des Cyclades pour qui cherche autre chose que les sentiers balisés. Milos, île volcanique aux paysages presque lunaires, concentre les formations géologiques les plus spectaculaires de l&rsquo;archipel. Sifnos, son élégante voisine, est réputée pour sa gastronomie, ses monastères et ses sentiers pédestres parmi les mieux entretenus de Grèce.</p>
    <p class="oiap-rev oiap-d2">L&rsquo;itinéraire qui suit propose <strong>4 jours à Milos</strong> pour prendre le temps d&rsquo;explorer Sarakiniko, Kleftiko en bateau, les villages colorés de Klima et les plages volcaniques du sud, puis <strong>3 jours à Sifnos</strong> pour découvrir Kastro, Chrysopigi et goûter la célèbre revithada. Le ferry Milos-Sifnos prend 45 minutes en rapide, 1h30 en classique — la transition est douce.</p>
    <div class="oiap-intro-deco oiap-rev oiap-d3"></div>
  </div>
</div>

<!-- ═══ SECTION : ITINÉRAIRE JOUR PAR JOUR ═══ -->
<div class="oiap-section-title oiap-rev">
  <div class="oiap-section-title-label">Programme jour par jour</div>
  <h2>L&rsquo;itinéraire<br>sur <em>7 jours</em></h2>
</div>

<!-- JOUR 1 : Arrivée Milos - Adamas + Plaka -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/vacances-Milos-scaled.jpg" alt="Plaka village capitale Milos coucher de soleil" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J1</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Milos · Adamas &amp; Plaka</div>
    <h3>Arrivée à Milos :<br>Plaka et le <em>Kastro vénitien</em></h3>
    <div class="oiap-rule"></div>
    <p>Arrivée à Milos par avion depuis Athènes (30 minutes de vol) ou par ferry depuis Le Pirée (3h en rapide, 5-7h en classique). Accueil à <strong>Adamas</strong>, le port principal et cœur animé de l&rsquo;île. Installation à l&rsquo;hôtel à Adamas pour un accès central, ou à Pollonia pour une ambiance plus calme. Après-midi consacrée à la découverte de la capitale.</p>
    <p>Direction <strong>Plaka</strong>, perchée en hauteur pour se protéger des attaques de pirates au Moyen Âge. Dédale de ruelles blanchies à la chaux, bougainvilliers fuchsia, boutiques d&rsquo;artisans. Fin de journée au <strong>Kastro vénitien</strong> au sommet du village — la montée essouffle mais la vue panoramique à 360° sur le golfe de Milos récompense chaque pas. Coucher de soleil depuis l&rsquo;église de Panagia Korfiatissa, dîner à Plaka dans une taverne traditionnelle.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/milos/">Découvrir Milos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 2 : Sarakiniko + Mandrakia + Firopotamos -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/milos-plage-de-sarakiniko-vasilis-karkalas-zDUnvNcCP_o-unsplash-scaled.jpg" alt="Sarakiniko roches volcaniques blanches Milos" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J2</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Milos · Côte nord lunaire</div>
    <h3>Sarakiniko :<br>marcher sur la <em>Lune</em></h3>
    <div class="oiap-rule"></div>
    <p>Lever très tôt pour <strong>Sarakiniko</strong> — le site le plus photographié de Milos. Une étendue de roche volcanique blanche polie par l&rsquo;érosion, qui ondule comme des dunes de pierre avant de plonger dans une eau turquoise électrique. Pas de sable, pas d&rsquo;arbres, juste un contraste saisissant. Arrivée avant 8h indispensable pour éviter la foule qui débarque vers 10h.</p>
    <p>Route ensuite vers <strong>Mandrakia</strong>, petit village de pêcheurs avec ses maisons aux portes colorées au ras de l&rsquo;eau, puis vers <strong>Firopotamos</strong>, autre village typique encore plus préservé. Déjeuner de poulpe séché au soleil dans une taverne de Mandrakia (Medusa est un classique). Après-midi baignade à Firopotamos, aux eaux cristallines dans une crique abritée. Retour en fin de journée à Adamas.</p>
    <div class="oiap-note"><p><i class="fas fa-sun"></i> Chaussures d&rsquo;eau indispensables à Sarakiniko — la roche est dure et chaude. Prévoir eau en quantité : aucun point d&rsquo;ombre sur le site.</p></div>
  </div>
</div>

<!-- JOUR 3 : Kleftiko en bateau -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/excursion-Kleftiko-Milos.jpg" alt="Kleftiko grottes pirates Milos bateau" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J3</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Milos · Croisière</div>
    <h3>Kleftiko :<br>le <em>repaire des pirates</em> en voilier</h3>
    <div class="oiap-rule"></div>
    <p>Journée complète en bateau — l&rsquo;expérience incontournable de Milos. Départ matinal depuis le port d&rsquo;Adamas pour le tour de l&rsquo;île, avec comme point d&rsquo;orgue <strong>Kleftiko</strong>, à la pointe sud-ouest. Ce chaos organisé de blocs de calcaire blanc posés sur une eau cristalline était l&rsquo;ancien repaire des pirates de la mer Égée, qui utilisaient le labyrinthe naturel de grottes pour cacher leurs navires.</p>
    <p>Sur place, l&rsquo;eau est d&rsquo;une transparence absolue. Baignade à travers les arches naturelles, exploration des grottes où l&rsquo;eau luit d&rsquo;un bleu phosphorescent, snorkeling. Sur le trajet, arrêts à <strong>Gerakas</strong>, <strong>Sykia</strong> (plage accessible uniquement par mer, avec son fameux puits de lumière naturel) et les formations de <strong>Glaronissia</strong>. Privilégier une sortie en voilier semi-privé (10-12 personnes maximum) plutôt qu&rsquo;un gros catamaran de 50 personnes.</p>
    <div class="oiap-note"><p><i class="fas fa-ship"></i> Réservation 2-3 semaines à l&rsquo;avance en haute saison. Par meltemi (vent du nord) fort en juillet-août, les sorties peuvent être annulées — prévoir un jour de marge si possible.</p></div>
  </div>
</div>

<!-- JOUR 4 : Klima + Sud volcanique -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2021/04/milos-villages-pecheurs-1024x802.jpg" alt="Klima village pêcheurs Syrmata Milos" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J4</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Milos · Klima &amp; sud volcanique</div>
    <h3>Klima :<br>les <em>Syrmata colorés</em> et les plages du sud</h3>
    <div class="oiap-rule"></div>
    <p>Matinée à <strong>Klima</strong>, le village-carte postale vivante de Milos. Une rangée de maisons de pêcheurs s&rsquo;aligne au ras de l&rsquo;eau — les <strong>Syrmata</strong>, habitations traditionnelles à deux étages (habitation au-dessus, garage à bateau creusé dans la roche au rez-de-chaussée) aux portes peintes de rouge, bleu, jaune, vert. L&rsquo;authenticité cycladique à l&rsquo;état pur, où le clapotis de l&rsquo;eau vient littéralement lécher le pas des portes.</p>
    <p>Après-midi sur les plages du sud, volcaniques et spectaculaires. <strong>Paliochori</strong>, où le sable est chaud grâce à l&rsquo;activité volcanique souterraine et où les rochers déclinent rouge, ocre et jaune. Ou <strong>Fyriplaka</strong>, vaste plage au cadre minéral impressionnant. Pour les aventuriers, <strong>Tsigrado</strong> — petite crique émeraude accessible par une faille rocheuse et une échelle en bois contre la paroi. Dîner à Pollonia au bout de l&rsquo;île, village chic du nord-est.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/milos/">Découvrir Milos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 5 : Transition Milos vers Sifnos -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/Apollonia-Sifnos.jpg" alt="Apollonia capitale Sifnos ruelles" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J5</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Milos → Sifnos · Transition</div>
    <h3>Cap sur Sifnos :<br>Apollonia et <em>Artemonas</em></h3>
    <div class="oiap-rule"></div>
    <p>Matinée libre pour profiter une dernière fois de Milos : baignade à Adamas, achats de céramiques locales à Plaka ou dégustation de pitarakia (chaussons frits au fromage xerotiri). Ferry vers Sifnos en début d&rsquo;après-midi — comptez <strong>45 minutes en rapide</strong> (Seajets) ou 1h30 en classique (Zante Ferries, Blue Star Ferries). Plusieurs rotations par jour en haute saison.</p>
    <p>Arrivée au port de <strong>Kamares</strong>, puis montée vers <strong>Apollonia</strong>, la capitale perchée au centre de l&rsquo;île. Installation à l&rsquo;hôtel. En fin de journée, découverte d&rsquo;Apollonia et de sa voisine <strong>Artemonas</strong>, séparées seulement de quelques minutes à pied : boutiques, tavernes animées, maisons néoclassiques de style vénitien, ruelles pavées. Dîner dans une taverne d&rsquo;Apollonia — premières découvertes de la gastronomie locale (revithokeftedes, salade de Sifnos au câpres).</p>
    <div class="oiap-note"><p><i class="fas fa-ship"></i> Compagnies Milos-Sifnos : Zante Ferries (classique), Seajets (rapide), Blue Star Ferries. Attention, pas de vol direct sur Sifnos — arrivée obligatoirement par ferry.</p></div>
  </div>
</div>

<!-- JOUR 6 : Kastro + Chrysopigi + Vathy -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/plage-de-vathy-sifnos.jpg" alt="Plage de Vathy Sifnos côte sud" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J6</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Sifnos · Kastro, Chrysopigi &amp; Vathy</div>
    <h3>Kastro médiéval<br>et le <em>monastère de Chrysopigi</em></h3>
    <div class="oiap-rule"></div>
    <p>Matinée à <strong>Kastro</strong>, le village le plus ancien de Sifnos, perché sur une falaise au-dessus de la mer Égée. Ses ruelles étroites et ses maisons blanches forment un labyrinthe médiéval traversé de passages voûtés. La <strong>petite église des Sept Martyrs</strong>, accrochée à un promontoire rocheux semblant flotter sur l&rsquo;eau, est l&rsquo;un des spots les plus photographiés de l&rsquo;île. Vue imprenable sur la mer, ambiance quasi hors du temps.</p>
    <p>Route ensuite vers le <strong>monastère de Chrysopigi</strong>, construit en 1650 sur un rocher relié à la terre par une passerelle. Sainte patronne de Sifnos, la Panagia Chrysopigi est considérée comme la protectrice des marins. Après-midi à la plage de <strong>Vathy</strong>, petite baie fermée sur la côte sud — eaux peu profondes, petites maisons blanches, atmosphère apaisée. Dîner de <strong>mastelo</strong> (agneau cuit en pot d&rsquo;argile scellé) dans une taverne traditionnelle.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/sifnos-cyclades/">Découvrir Sifnos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 7 : Randonnée + Faros + départ -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/Fasolou-plage-sifnos-cyclades.jpg" alt="Fassolou plage Faros Sifnos" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J7</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Sifnos · Randonnée &amp; départ</div>
    <h3>Randonnée Kastro-Poulati<br>et les <em>plages de Faros</em></h3>
    <div class="oiap-rule"></div>
    <p>Dernière journée au rythme doux. Matinée consacrée à la randonnée <strong>Kastro &#8211; monastère de Poulati</strong>, l&rsquo;un des plus beaux sentiers de Sifnos (1h30 aller-retour, niveau modéré). Le chemin longe les falaises au-dessus de la mer, bordé de fleurs sauvages, avec des vues magnifiques sur Kastro et la mer Égée. Le petit monastère de Poulati, perché sur un éperon rocheux, offre l&rsquo;un des plus beaux points de vue de l&rsquo;île.</p>
    <p>Après la randonnée, déjeuner à <strong>Faros</strong>, village de pêcheurs au charme discret avec ses trois plages : la centrale face au monastère de Chrysopigi, Glyfo et <strong>Fassolou</strong>, petite perle avec sa taverne et sa chapelle blanche. Dernière baignade, dernier verre d&rsquo;Assyrtiko local. Transfert au port de Kamares pour le ferry retour — vers Le Pirée directement, ou via Milos pour un vol depuis là-bas. Sept jours au cœur des Cyclades les plus authentiques.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/sifnos-cyclades/">Découvrir Sifnos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- ═══ ENCART INFOS PRATIQUES (deep blue) ═══ -->
<div class="oiap-circuits">
  <div class="oiap-circuits-inner">
    <div class="oiap-circuits-header oiap-rev">
      <div class="oiap-eyebrow-c" style="justify-content:center;"><span></span>Pour préparer votre voyage<span></span></div>
      <h2>Infos pratiques<br>pour <em>combiner les deux îles</em></h2>
      <p>Quelques repères essentiels pour organiser cet itinéraire sans mauvaise surprise : liaisons ferry, hébergement, transports sur place.</p>
    </div>
    <div class="oiap-circuits-grid">
      <div class="oiap-circuit-card oiap-rev">
        <div class="oiap-circuit-card-label">Transport</div>
        <h3>Ferry &amp; <em>accès</em></h3>
        <div class="oiap-circuit-card-route">Milos ↔ Sifnos en 45 min à 1h30</div>
        <p>Ferries quotidiens Zante Ferries, Seajets (rapide) et Blue Star Ferries. Milos est accessible en vol depuis Athènes (30 min) ou par ferry (3h à 7h). Sifnos uniquement par ferry depuis Le Pirée (2h30 en rapide, 5h en classique) ou depuis les îles voisines.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d1">
        <div class="oiap-circuit-card-label">Sur place</div>
        <h3>Véhicule et <em>hébergement</em></h3>
        <div class="oiap-circuit-card-route">Voiture ou quad · 2 bases recommandées</div>
        <p>À Milos (25 km d&rsquo;est en ouest, nombreux chemins de terre), <strong>voiture ou quad indispensable</strong>. Base à Adamas (central) ou Pollonia (plus calme). À Sifnos, bus efficaces entre villages ; voiture utile pour les plages isolées. Base à Apollonia ou Artemonas, en centre d&rsquo;île.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d2">
        <div class="oiap-circuit-card-label">Quand partir</div>
        <h3>Meilleure <em>période</em></h3>
        <div class="oiap-circuit-card-route">Mi-mai à fin septembre</div>
        <p>Juillet-août : meltemi parfois fort, excursions Kleftiko parfois annulées, affluence marquée. <strong>Juin et septembre</strong> : compromis idéal, météo favorable, mer chaude, affluence gérable. Mai et début octobre : possible, mais certains restaurants et excursions fonctionnent au ralenti.</p>
      </div>
    </div>
  </div>
</div>

<!-- ═══ CTA FINAL ═══ -->
<div class="oiap-cta">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/decouvrir-Milos-scaled.jpg" alt="Milos Sifnos Cyclades Grèce" loading="lazy">
  <div class="oiap-cta-ov"></div>
  <div class="oiap-cta-content">
    <div class="oiap-eyebrow-c oiap-rev" style="margin-bottom:1rem;"><span></span>À explorer aussi<span></span></div>
    <h2 class="oiap-rev oiap-d1">Prolonger l&rsquo;aventure<br>dans les <em>Cyclades</em></h2>
    <p class="oiap-rev oiap-d2">Milos et Sifnos offrent les Cyclades les plus authentiques, mais l&rsquo;archipel réserve encore Santorin, Naxos, Paros, Amorgos et Mykonos pour un prochain voyage.</p>
    <a href="https://visiter-santorini.fr/decouvrir-les-cyclades-en-grece/" class="oiap-btn-gold oiap-rev oiap-d3">Découvrir les Cyclades <i class="fas fa-arrow-right"></i></a>
    <div class="oiap-cta-links oiap-rev oiap-d4">
      <a href="https://visiter-santorini.fr/milos/">Milos</a>
      <a href="https://visiter-santorini.fr/sifnos-cyclades/">Sifnos</a>
      <a href="https://visiter-santorini.fr/kleftiko-milos/">Kleftiko</a>
      <a href="https://visiter-santorini.fr/10-jours-dans-les-cyclades/">10 jours dans les Cyclades</a>
      <a href="https://visiter-santorini.fr/iles-grece/">Toutes les îles</a>
    </div>
  </div>
</div>

</div><!-- /oiap -->

<script>
(function(){
  var els = document.querySelectorAll('.oiap-rev');
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){ e.target.classList.add('oiap-v'); io.unobserve(e.target); }
    });
  }, { threshold: .06, rootMargin: '0px 0px -30px 0px' });
  els.forEach(function(el){ io.observe(el); });
})();
</script>



<p class="wp-block-paragraph"></p>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmilos-sifnos-7-jours%2F&amp;linkname=Milos%20et%20Sifnos%20en%207%20jours" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmilos-sifnos-7-jours%2F&amp;linkname=Milos%20et%20Sifnos%20en%207%20jours" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmilos-sifnos-7-jours%2F&amp;linkname=Milos%20et%20Sifnos%20en%207%20jours" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fmilos-sifnos-7-jours%2F&#038;title=Milos%20et%20Sifnos%20en%207%20jours" data-a2a-url="https://visiter-santorini.fr/milos-sifnos-7-jours/" data-a2a-title="Milos et Sifnos en 7 jours"></a></p><p>L’article <a href="https://visiter-santorini.fr/milos-sifnos-7-jours/">Milos et Sifnos en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Mykonos &#038; Santorin en 7 jours</title>
		<link>https://visiter-santorini.fr/mykonos-santorin-7jours/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Mon, 20 Apr 2026 10:00:00 +0000</pubDate>
				<category><![CDATA[Non classé]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=11367</guid>

					<description><![CDATA[<p>7 JOURS Itinéraire · Cyclades Mykonos &#38; Santorinen 7 jours Le duo iconique des Cyclades Les deux îles les plus célèbres de l&#8217;archipel, les plus photographiées, les plus intenses. Mykonos pour les moulins et Délos, Santorin pour la caldeira et les couchers de soleil d&#8217;Oia. Voici l&#8217;itinéraire jour par jour pour combiner les deux en&#8230;&#160;<a href="https://visiter-santorini.fr/mykonos-santorin-7jours/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">Mykonos &#38; Santorin en 7 jours</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/mykonos-santorin-7jours/">Mykonos &amp; Santorin en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<!-- ══════════════════════════════════════════════
     BLOC PERSONNALISÉ HTML — SANTORIN ET MYKONOS EN 7 JOURS
     visiter-santorini.fr
     ══════════════════════════════════════════════ -->

<!-- PRELOAD image hero -->
<link rel="preload" as="image" href="https://visiter-santorini.fr/wp-content/uploads/oia-santorin-cyclades-2.jpg" fetchpriority="high">

<!-- Fonts & icons -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&#038;family=Jost:wght@300;400;500&#038;display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
.oiap {
  --c-deep:    #0d2d4a;
  --c-azur:    #1a6fa8;
  --c-gold:    #c9a84c;
  --c-gold-lt: #e8d5a0;
  --c-cream:   #f2ede4;
  --c-white:   #faf9f7;
  --c-text:    #2c2c2c;
  --c-muted:   #6b6860;
  --ease:      cubic-bezier(.4,0,.2,1);
  font-family: 'Jost', sans-serif;
  color: var(--c-text);
  line-height: 1.7;
}
.oiap *, .oiap *::before, .oiap *::after { box-sizing: border-box; margin: 0; padding: 0; }
.oiap img { display: block; width: 100%; }
.oiap a { text-decoration: none; color: inherit; }

/* ── REVEAL ── */
.oiap-rev { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.oiap-rev.oiap-v { opacity: 1; transform: none; }
.oiap-d1 { transition-delay:.1s; }
.oiap-d2 { transition-delay:.2s; }
.oiap-d3 { transition-delay:.3s; }
.oiap-d4 { transition-delay:.4s; }

/* ════════════ HERO ════════════ */
.oiap-hero {
  position: relative; height: 100vh; min-height: 600px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.oiap-hero img {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  object-position: center 40%;
  transform: scale(1.06); animation: oiapHeroZoom 18s ease-out forwards;
}
@keyframes oiapHeroZoom { to { transform: scale(1); } }
.oiap-hero-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,45,74,.95) 0%, rgba(13,45,74,.4) 50%, rgba(13,45,74,.1) 100%);
}
.oiap-hero-deco {
  position: absolute; right: -2vw; top: 50%; transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10rem, 20vw, 18rem); font-weight: 300; line-height: 1;
  color: rgba(201,168,76,.06); letter-spacing: -.04em;
  user-select: none; pointer-events: none;
}
.oiap-hero-content { position: relative; z-index: 2; padding: 0 7vw 5rem; width: 100%; }
.oiap-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3rem;
}
.oiap-hero-text { max-width: 620px; }
.oiap-hero-eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.1rem;
}
.oiap-hero-eyebrow-line { width: 28px; height: 1px; background: var(--c-gold); }
.oiap-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 300;
  color: var(--c-white); line-height: 1.05; margin-bottom: .4rem;
}
.oiap-hero h1 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--c-gold-lt); margin-bottom: 1rem; font-weight: 300;
}
.oiap-hero-intro { color: rgba(250,249,247,.7); font-size: .94rem; max-width: 460px; line-height: 1.75; }
.oiap-hero-stats { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.oiap-hero-stat .num { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; color: var(--c-gold-lt); line-height: 1; text-align: right; }
.oiap-hero-stat .lbl { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(250,249,247,.4); text-align: right; }

/* ════════════ INTRO CHAPEAU ════════════ */
.oiap-intro { padding: 5.5rem 5vw; background: var(--c-white); text-align: center; }
.oiap-intro-inner { max-width: 720px; margin: 0 auto; }
.oiap-eyebrow-c {
  font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: .8rem;
}
.oiap-eyebrow-c span { width: 24px; height: 1px; background: var(--c-gold); display: block; }
.oiap-intro p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.18rem, 2vw, 1.48rem); font-weight: 300;
  color: var(--c-deep); line-height: 1.72; margin-bottom: 1.2rem;
}
.oiap-intro p:last-child { margin-bottom: 0; }
.oiap-intro-deco { width: 1px; height: 60px; background: linear-gradient(to bottom, var(--c-gold), transparent); margin: 2.5rem auto 0; }

/* ════════════ TITRE DE SECTION ════════════ */
.oiap-section-title {
  background: var(--c-white);
  padding: 3rem 7vw 2.8rem;
  border-top: 1px solid rgba(201,168,76,.35);
  display: flex; align-items: baseline; gap: 2.5rem;
}
.oiap-section-title-label {
  font-size: .6rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-gold); white-space: nowrap; flex-shrink: 0;
}
.oiap-section-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.1;
}
.oiap-section-title h2 em { font-style: italic; }

/* ════════════ BLOCS IMMERSIFS ════════════ */
.oiap-block {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 580px;
}
.oiap-block.oiap-reverse .oiap-photo { order: 2; }
.oiap-block.oiap-reverse .oiap-content { order: 1; }

.oiap-photo { position: relative; overflow: hidden; min-height: 520px; }
.oiap-photo img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.oiap-block:hover .oiap-photo img { transform: scale(1.04); }
.oiap-photo-num {
  position: absolute; bottom: 1.2rem; right: 1.5rem;
  font-family: 'Cormorant Garamond', serif; font-size: 3.5rem;
  font-weight: 300; color: rgba(255,255,255,.2); line-height: 1; user-select: none;
  letter-spacing: -.02em;
}
.oiap-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 5rem 5vw 5rem 4.5vw;
}
.oiap-block.oiap-reverse .oiap-content { padding: 5rem 4.5vw 5rem 5vw; }
.oiap-content.oiap-white { background: var(--c-white); }
.oiap-content.oiap-cream { background: var(--c-cream); }

.oiap-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 1.3rem; display: flex; align-items: center; gap: .7rem;
}
.oiap-label::before { content: ''; width: 20px; height: 1px; background: var(--c-gold); }
.oiap-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 300; color: var(--c-deep);
  line-height: 1.2; margin-bottom: 1.4rem;
}
.oiap-content h3 em { font-style: italic; color: var(--c-azur); }
.oiap-rule { width: 40px; height: 1px; background: var(--c-gold); margin-bottom: 1.6rem; }
.oiap-content p { font-size: .93rem; color: var(--c-muted); line-height: 1.82; margin-bottom: 1rem; }
.oiap-content p:last-of-type { margin-bottom: 0; }
.oiap-content p strong { color: var(--c-text); font-weight: 500; }

.oiap-note {
  margin-top: 1.5rem; padding: 1rem 1.2rem;
  background: rgba(201,168,76,.09); border-left: 2px solid var(--c-gold);
  border-radius: 0 3px 3px 0;
}
.oiap-note p { font-size: .83rem; color: var(--c-text); margin: 0; line-height: 1.6; }
.oiap-note p i { color: var(--c-gold); margin-right: .4rem; }

.oiap-link {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--c-azur); font-size: .78rem; font-weight: 500;
  margin-top: 1.4rem; transition: gap .2s;
}
.oiap-link:hover { gap: .7rem; }
.oiap-link i { font-size: .68rem; }

/* ════════════ ENCART INFOS PRATIQUES (deep blue) ════════════ */
.oiap-circuits { background: var(--c-deep); padding: 5rem 5vw; }
.oiap-circuits-inner { max-width: 1100px; margin: 0 auto; }
.oiap-circuits-header { text-align: center; margin-bottom: 3.5rem; }
.oiap-circuits-header .oiap-eyebrow-c { color: var(--c-gold); }
.oiap-circuits-header .oiap-eyebrow-c span { background: var(--c-gold); }
.oiap-circuits-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 300; color: var(--c-white);
  line-height: 1.15; margin-bottom: 1rem;
}
.oiap-circuits-header h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuits-header p { font-size: .92rem; color: rgba(250,249,247,.7); max-width: 620px; margin: 0 auto; line-height: 1.75; }
.oiap-circuits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.oiap-circuit-card {
  background: rgba(255,255,255,.04); padding: 2rem 1.8rem; border-radius: 3px;
  border-top: 3px solid var(--c-gold);
  border-left: 1px solid rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.oiap-circuit-card-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--c-gold); margin-bottom: .8rem;
}
.oiap-circuit-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem; font-weight: 400; color: var(--c-white);
  line-height: 1.25; margin-bottom: 1rem;
}
.oiap-circuit-card h3 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-circuit-card-route {
  font-size: .82rem; color: var(--c-gold-lt); font-weight: 500;
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
.oiap-circuit-card p { font-size: .86rem; color: rgba(250,249,247,.7); line-height: 1.7; }

/* ════════════ CTA FINAL ════════════ */
.oiap-cta {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oiap-cta img { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center 30%; }
.oiap-cta-ov { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,45,74,.9) 0%, rgba(13,45,74,.6) 100%); }
.oiap-cta-content { position: relative; z-index: 2; text-align: center; padding: 4rem 5vw; max-width: 660px; }
.oiap-cta-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 300; color: var(--c-white);
  line-height: 1.1; margin-bottom: 1.2rem;
}
.oiap-cta-content h2 em { font-style: italic; color: var(--c-gold-lt); }
.oiap-cta-content p { color: rgba(250,249,247,.65); font-size: .9rem; margin-bottom: 2.5rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.oiap-btn-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--c-gold); color: var(--c-deep);
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  font-weight: 500; padding: .9rem 2rem; border-radius: 2px;
  transition: background .3s, transform .2s; margin-bottom: 1.5rem;
}
.oiap-btn-gold:hover { background: var(--c-gold-lt); transform: translateY(-2px); }
.oiap-cta-links { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.oiap-cta-links a {
  display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: var(--c-white); padding: .75rem 1.3rem; border-radius: 3px;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; transition: all .3s;
}
.oiap-cta-links a:hover { background: rgba(201,168,76,.2); border-color: var(--c-gold); }

/* ── RESPONSIVE ── */
@media(max-width: 960px) {
  .oiap-block { grid-template-columns: 1fr; }
  .oiap-photo { min-height: 320px; }
  .oiap-block.oiap-reverse .oiap-photo { order: 0; }
  .oiap-block.oiap-reverse .oiap-content { order: 1; }
  .oiap-hero-stats { display: none; }
  .oiap-section-title { gap: 1.2rem; padding: 2.2rem 5vw 2rem; }
  .oiap-circuits-grid { grid-template-columns: 1fr; }
}
</style>


<div class="oiap">

<!-- ═══ HERO ═══ -->
<div class="oiap-hero">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/oia-santorin-cyclades-2.jpg" alt="Santorin et Mykonos en 7 jours Cyclades" fetchpriority="high">
  <div class="oiap-hero-ov"></div>
  <div class="oiap-hero-deco" aria-hidden="true">7 JOURS</div>
  <div class="oiap-hero-content">
    <div class="oiap-hero-inner">
      <div class="oiap-hero-text">
        <div class="oiap-hero-eyebrow oiap-rev"><div class="oiap-hero-eyebrow-line"></div>Itinéraire · Cyclades</div>
        <h1 class="oiap-rev oiap-d1">Mykonos &amp; Santorin<br>en <em>7 jours</em></h1>
        <p class="oiap-hero-tagline oiap-rev oiap-d2">Le duo iconique des Cyclades</p>
        <p class="oiap-hero-intro oiap-rev oiap-d3">Les deux îles les plus célèbres de l&rsquo;archipel, les plus photographiées, les plus intenses. Mykonos pour les moulins et Délos, Santorin pour la caldeira et les couchers de soleil d&rsquo;Oia. Voici l&rsquo;itinéraire jour par jour pour combiner les deux en une semaine.</p>
      </div>
      <div class="oiap-hero-stats oiap-rev oiap-d3">
        <div class="oiap-hero-stat"><div class="num">2 îles</div><div class="lbl">stars des Cyclades</div></div>
        <div class="oiap-hero-stat"><div class="num">2h</div><div class="lbl">de ferry rapide entre les 2</div></div>
        <div class="oiap-hero-stat"><div class="num">3 + 4</div><div class="lbl">jours de chaque côté</div></div>
      </div>
    </div>
  </div>
</div>

<!-- ═══ INTRO CHAPEAU ═══ -->
<div class="oiap-intro">
  <div class="oiap-intro-inner">
    <div class="oiap-eyebrow-c oiap-rev"><span></span>Le duo iconique<span></span></div>
    <p class="oiap-rev oiap-d1">Mykonos et Santorin forment le duo le plus demandé des Cyclades. Les deux îles sont complémentaires plus qu&rsquo;elles ne se ressemblent : Mykonos concentre l&rsquo;énergie, les ruelles blanches, la vie nocturne et l&rsquo;excursion à Délos ; Santorin offre le spectacle volcanique, les falaises vertigineuses de la caldeira et les couchers de soleil les plus photographiés au monde.</p>
    <p class="oiap-rev oiap-d2">L&rsquo;itinéraire qui suit propose <strong>3 jours à Mykonos</strong> pour en découvrir les essentiels (Chora, Little Venice, plages, Délos), puis <strong>4 jours à Santorin</strong> pour prendre le temps d&rsquo;explorer la caldeira, le site d&rsquo;Akrotiri, les plages volcaniques et les vignobles. Commencer par Mykonos et finir par Santorin facilite le retour — les vols directs depuis Santorin vers Athènes et plusieurs villes européennes sont nombreux.</p>
    <div class="oiap-intro-deco oiap-rev oiap-d3"></div>
  </div>
</div>

<!-- ═══ SECTION : ITINÉRAIRE JOUR PAR JOUR ═══ -->
<div class="oiap-section-title oiap-rev">
  <div class="oiap-section-title-label">Programme jour par jour</div>
  <h2>L&rsquo;itinéraire<br>sur <em>7 jours</em></h2>
</div>

<!-- JOUR 1 : Arrivée Mykonos - Chora & Little Venice -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/vacances-mykonos-scaled.jpg" alt="Little Venice et moulins Mykonos" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J1</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Mykonos · Chora &amp; Little Venice</div>
    <h3>Arrivée à Mykonos :<br>Little Venice et les <em>moulins à vent</em></h3>
    <div class="oiap-rule"></div>
    <p>Arrivée à Mykonos par avion direct depuis Paris, Lyon ou Marseille en saison, ou par ferry depuis Le Pirée (2h30 en rapide, 5h en classique). Installation en fin de matinée, puis première flânerie dans les ruelles blanches de <strong>Chora</strong>, labyrinthe conçu pour dérouter les pirates — le quartier de Matogianni pour son animation, les ruelles descendant vers la mer pour les plus belles surprises.</p>
    <p>En fin d&rsquo;après-midi, direction <strong>Little Venice</strong> (Alefkandra), le quartier le plus romantique de l&rsquo;île : maisons colorées du XVIIIe siècle construites au ras de l&rsquo;eau, balcons suspendus au-dessus des vagues. Juste au-dessus, les <strong>cinq moulins à vent de Kato Mili</strong> datant du XVIe siècle dominent la scène. Arrivez 45 minutes avant le coucher du soleil — les terrasses se remplissent vite. Dîner dans une taverne de Chora.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/mykonos-cyclades/">Découvrir Mykonos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 2 : Délos -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/Delos-Cyclades-Grece-930x620.jpg.avif" alt="Délos site archéologique UNESCO" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J2</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Mykonos · Excursion à Délos</div>
    <h3>Délos :<br>l&rsquo;île <em>sacrée d&rsquo;Apollon</em></h3>
    <div class="oiap-rule"></div>
    <p>Départ matinal depuis le Vieux-Port de Mykonos vers <strong>Délos</strong>, à 30 minutes de traversée. Classé au patrimoine mondial de l&rsquo;UNESCO, ce site est l&rsquo;un des plus importants de la Méditerranée — lieu de naissance d&rsquo;Apollon et d&rsquo;Artémis dans la mythologie, l&rsquo;un des ports commerciaux les plus actifs du monde antique dans la réalité historique.</p>
    <p>Sur place : temples, mosaïques, maisons de marchands, et la célèbre <strong>Terrasse des Lions</strong>. L&rsquo;île est déserte depuis des siècles — seuls les archéologues y travaillent. Comptez une demi-journée minimum. Audioguide ou visite guidée fortement recommandée pour comprendre la densité du site. Retour à Mykonos en début d&rsquo;après-midi, après-midi baignade à la plage d&rsquo;<strong>Elia</strong> (plus calme que Paradise) ou à <strong>Psarou</strong>.</p>
    <div class="oiap-note"><p><i class="fas fa-info-circle"></i> Délos est fermée le lundi. Pas d&rsquo;ombre sur le site, pas de restaurant — eau et chapeau indispensables, surtout de juin à août.</p></div>
  </div>
</div>

<!-- JOUR 3 : Plages et vie nocturne Mykonos -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/paradise-beach-mykonos.jpg" alt="Paradise Beach Mykonos plages" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J3</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Mykonos · Plages &amp; Ano Mera</div>
    <h3>Plages du sud<br>et la <em>Mykonos authentique</em></h3>
    <div class="oiap-rule"></div>
    <p>Journée consacrée aux plages. Selon votre profil : <strong>Paradise Beach</strong> et <strong>Super Paradise</strong> pour l&rsquo;ambiance fête et les beach-clubs, <strong>Platis Gialos</strong> pour les familles (point de départ des bateaux-taxis), <strong>Elia</strong> pour la plus longue plage de l&rsquo;île et la tranquillité, <strong>Ftelia</strong> au nord pour les véliplanchistes dans un cadre naturel.</p>
    <p>En fin d&rsquo;après-midi, rupture avec l&rsquo;ambiance festive : direction <strong>Ano Mera</strong>, le deuxième village de l&rsquo;île à 8 km de Chora. Ici, pas de boutiques de luxe ni de DJ : une place de village, quelques tavernes, et le <strong>monastère de Panagia Tourliani</strong> fondé en 1542, avec son clocher en marbre sculpté et ses icônes byzantines. Soirée à Chora pour profiter une dernière fois de l&rsquo;animation nocturne.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/mykonos-cyclades/">Découvrir Mykonos <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 4 : Transition Mykonos vers Santorin -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2024/03/architecture-fira-santorin-cyclades-2048x1536.jpg" alt="Fira capitale Santorin caldeira" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J4</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Mykonos → Santorin · Transition</div>
    <h3>Cap sur Santorin :<br>arrivée à <em>Fira</em></h3>
    <div class="oiap-rule"></div>
    <p>Matinée libre à Mykonos pour un dernier bain ou une flânerie. Ferry vers Santorin en début d&rsquo;après-midi — comptez <strong>2h à 2h30 en rapide</strong> (Seajets), 4h à 5h en conventionnel (Blue Star Ferries). Plusieurs rotations par jour en haute saison, réservation indispensable en juillet-août.</p>
    <p>Arrivée au port d&rsquo;<strong>Athinios</strong> à Santorin, remontée spectaculaire de la route en lacets vers Fira. Installation à l&rsquo;hôtel (choix selon budget : Fira pour l&rsquo;animation, Imerovigli pour le calme et les vues, Oia pour le prestige). En fin de journée, première découverte de <strong>Fira</strong>, capitale de Santorin : corniche de la caldeira avec ses panoramas vertigineux, musée archéologique, ruelles animées. Dîner en terrasse avec vue sur le volcan.</p>
    <div class="oiap-note"><p><i class="fas fa-ship"></i> Compagnies principales Mykonos-Santorin : Seajets et Minoan Lines (rapides), Blue Star Ferries (conventionnel). Les catamarans rapides subissent parfois l&rsquo;annulation par grand vent (meltemi en juillet-août) — prévoir une marge.</p></div>
  </div>
</div>

<!-- JOUR 5 : Randonnée Fira-Oia + coucher de soleil -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2020/03/hike-santorini.jpg" alt="Randonnée Fira Oia caldeira Santorin" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J5</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Santorin · Caldeira &amp; Oia</div>
    <h3>Randonnée Fira → Oia<br>et le <em>coucher de soleil</em></h3>
    <div class="oiap-rule"></div>
    <p>Au programme, l&rsquo;expérience la plus marquante de Santorin : la <strong>randonnée Fira-Oia</strong>, 12 km en corniche sur la crête de la caldeira, à travers Firostefani, Imerovigli et le rocher de Skaros (vestige d&rsquo;une forteresse vénitienne). Trois à quatre heures de marche avec des panoramas vertigineux à chaque pas, les falaises ocre plongeant 400 mètres plus bas dans une mer d&rsquo;un bleu profond.</p>
    <p>Pause déjeuner à <strong>Imerovigli</strong>, « le balcon de la caldeira », village le plus haut perché de l&rsquo;île. Arrivée à <strong>Oia</strong> en milieu d&rsquo;après-midi. Le village le plus photographié de Grèce : maisons troglodytes blanches accrochées à la falaise, dômes bleus, ruelles pavées. En fin de journée, installation stratégique pour le coucher de soleil — le château byzantin est le spot le plus célèbre mais aussi le plus bondé, préférer une terrasse de restaurant réservée à l&rsquo;avance.</p>
    <div class="oiap-note"><p><i class="fas fa-hiking"></i> Prévoir chaussures fermées, eau, chapeau et crème solaire. Partir tôt le matin (avant 9h) pour éviter la chaleur. Possibilité de retour en bus depuis Oia.</p></div>
    <a class="oiap-link" href="https://visiter-santorini.fr/randonnee-oia-fira/">Découvrir la randonnée <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 6 : Akrotiri + Red Beach + Pyrgos -->
<div class="oiap-block oiap-reverse oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2022/01/red-beach-akrotiri-106-scaled.jpg" alt="Red Beach Akrotiri Santorin falaises rouges" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J6</div>
  </div>
  <div class="oiap-content oiap-cream">
    <div class="oiap-label">Santorin · Sud de l&rsquo;île</div>
    <h3>Akrotiri :<br>la <em>Pompéi grecque</em> et la Red Beach</h3>
    <div class="oiap-rule"></div>
    <p>Cap sur le sud de l&rsquo;île. Matinée au site archéologique d&rsquo;<strong>Akrotiri</strong>, surnommé « la Pompéi grecque » : une ville minoenne entière préservée sous les cendres de l&rsquo;éruption de 1600 av. J.C. Rues pavées, maisons à plusieurs étages, fresques exceptionnelles, systèmes de plomberie avancés. Aucun reste humain retrouvé — la population avait fui avant la catastrophe. Certains chercheurs y voient l&rsquo;origine du mythe de l&rsquo;Atlantide.</p>
    <p>À 10 minutes à pied du site, la <strong>Red Beach</strong> : plage spectaculaire encadrée de falaises volcaniques rouges, accès par un petit sentier caillouteux. En après-midi, remontée vers <strong>Pyrgos</strong>, village médiéval perché qui offre le seul panorama à 360° sur toute l&rsquo;île. Labyrinthe de ruelles blanches, kastro vénitien au sommet, atmosphère authentique loin de la foule. Dégustation d&rsquo;Assyrtiko dans un domaine viticole voisin (Santo Wines, Domaine Sigalas ou Argyros).</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/akrotiri/">Découvrir Akrotiri <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- JOUR 7 : Volcan + sources chaudes -->
<div class="oiap-block oiap-rev">
  <div class="oiap-photo">
    <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/2020/03/volcan-santorini-22.jpg" alt="Volcan Néa Kaméni Santorin" loading="lazy">
    <div class="oiap-photo-num" aria-hidden="true">J7</div>
  </div>
  <div class="oiap-content oiap-white">
    <div class="oiap-label">Santorin · Volcan &amp; départ</div>
    <h3>Le volcan,<br>les <em>sources chaudes</em> et le retour</h3>
    <div class="oiap-rule"></div>
    <p>Dernière journée, consacrée à l&rsquo;une des excursions les plus marquantes de Santorin : la <strong>visite du volcan Néa Kaméni</strong>, île encore active au centre de la caldeira. Départ en bateau depuis le Vieux-Port de Fira Skala ou d&rsquo;Ammoudi (sous Oia). Marche d&rsquo;une trentaine de minutes jusqu&rsquo;au cratère principal, fumerolles sulfureuses, paysage lunaire. Vue imprenable sur les falaises de Santorin depuis le large.</p>
    <p>Arrêt baignade aux <strong>sources chaudes de Palaia Kaméni</strong> — l&rsquo;eau verte-jaune est chauffée par l&rsquo;activité volcanique sous-marine, mélange de soufre et de fer qui teint les maillots de bain. Sensation unique. Retour à Fira en début d&rsquo;après-midi. Transfert vers l&rsquo;aéroport de Santorin (JTR) ou le port d&rsquo;Athinios selon votre vol ou ferry de départ. Sept jours dans les Cyclades sous le signe de l&rsquo;iconique.</p>
    <a class="oiap-link" href="https://visiter-santorini.fr/activites/volcan/">Découvrir le volcan <i class="fas fa-arrow-right"></i></a>
  </div>
</div>

<!-- ═══ ENCART INFOS PRATIQUES (deep blue) ═══ -->
<div class="oiap-circuits">
  <div class="oiap-circuits-inner">
    <div class="oiap-circuits-header oiap-rev">
      <div class="oiap-eyebrow-c" style="justify-content:center;"><span></span>Pour préparer votre voyage<span></span></div>
      <h2>Infos pratiques<br>pour <em>combiner les deux îles</em></h2>
      <p>Quelques repères essentiels pour organiser cet itinéraire sans mauvaise surprise : liaisons ferry, budget, période idéale.</p>
    </div>
    <div class="oiap-circuits-grid">
      <div class="oiap-circuit-card oiap-rev">
        <div class="oiap-circuit-card-label">Transport</div>
        <h3>Ferry &amp; <em>vols</em></h3>
        <div class="oiap-circuit-card-route">Mykonos ↔ Santorin en 2h à 2h30</div>
        <p>Ferries quotidiens Seajets, Minoan Lines (rapides) et Blue Star Ferries (classique). Vols directs depuis Paris, Lyon, Marseille en saison vers Mykonos (JMK) et Santorin (JTR). Finir par Santorin facilite le retour — plus de vols directs vers la France.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d1">
        <div class="oiap-circuit-card-label">Budget</div>
        <h3>Prévoir un <em>budget confortable</em></h3>
        <div class="oiap-circuit-card-route">Les deux îles les plus chères des Cyclades</div>
        <p>Mykonos et Santorin sont les deux destinations les plus onéreuses de l&rsquo;archipel. Hébergement, restauration, beach-clubs : compter <strong>150 à 300 € par jour par personne</strong> en haute saison, plus en caldeira à Santorin. Réservation très à l&rsquo;avance pour juin-août.</p>
      </div>
      <div class="oiap-circuit-card oiap-rev oiap-d2">
        <div class="oiap-circuit-card-label">Quand partir</div>
        <h3>Meilleure <em>période</em></h3>
        <div class="oiap-circuit-card-route">Mai-juin et septembre-octobre</div>
        <p>Juillet-août : mer chaude, animation maximale, tarifs exorbitants et forte affluence. <strong>Mi-mai à mi-juin</strong> et <strong>mi-septembre à octobre</strong> : compromis idéal, températures agréables, foule gérable, prix plus raisonnables. En avril ou octobre, certains hôtels et restaurants sont encore fermés.</p>
      </div>
    </div>
  </div>
</div>

<!-- ═══ CTA FINAL ═══ -->
<div class="oiap-cta">
  <img decoding="async" src="https://visiter-santorini.fr/wp-content/uploads/ile-de-santorin-tomas-nozina-scaled.jpg" alt="Caldeira Santorin Mykonos Cyclades" loading="lazy">
  <div class="oiap-cta-ov"></div>
  <div class="oiap-cta-content">
    <div class="oiap-eyebrow-c oiap-rev" style="margin-bottom:1rem;"><span></span>À explorer aussi<span></span></div>
    <h2 class="oiap-rev oiap-d1">Prolonger l&rsquo;aventure<br>dans les <em>Cyclades</em></h2>
    <p class="oiap-rev oiap-d2">Mykonos et Santorin concentrent l&rsquo;iconique mais l&rsquo;archipel réserve encore Paros, Naxos, Milos, Amorgos et les Petites Cyclades pour un prochain voyage.</p>
    <a href="https://visiter-santorini.fr/decouvrir-les-cyclades-en-grece/" class="oiap-btn-gold oiap-rev oiap-d3">Découvrir les Cyclades <i class="fas fa-arrow-right"></i></a>
    <div class="oiap-cta-links oiap-rev oiap-d4">
      <a href="https://visiter-santorini.fr/santorin/">Santorin</a>
      <a href="https://visiter-santorini.fr/mykonos-cyclades/">Mykonos</a>
      <a href="https://visiter-santorini.fr/delos-cyclades/">Délos</a>
      <a href="https://visiter-santorini.fr/10-jours-dans-les-cyclades/">10 jours dans les Cyclades</a>
      <a href="https://visiter-santorini.fr/iles-grece/">Toutes les îles</a>
    </div>
  </div>
</div>

</div><!-- /oiap -->

<script>
(function(){
  var els = document.querySelectorAll('.oiap-rev');
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(e){
      if(e.isIntersecting){ e.target.classList.add('oiap-v'); io.unobserve(e.target); }
    });
  }, { threshold: .06, rootMargin: '0px 0px -30px 0px' });
  els.forEach(function(el){ io.observe(el); });
})();
</script>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-santorin-7jours%2F&amp;linkname=Mykonos%20%26%20Santorin%20en%207%20jours" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-santorin-7jours%2F&amp;linkname=Mykonos%20%26%20Santorin%20en%207%20jours" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-santorin-7jours%2F&amp;linkname=Mykonos%20%26%20Santorin%20en%207%20jours" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fmykonos-santorin-7jours%2F&#038;title=Mykonos%20%26%20Santorin%20en%207%20jours" data-a2a-url="https://visiter-santorini.fr/mykonos-santorin-7jours/" data-a2a-title="Mykonos &amp; Santorin en 7 jours"></a></p><p>L’article <a href="https://visiter-santorini.fr/mykonos-santorin-7jours/">Mykonos &amp; Santorin en 7 jours</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>La spanakopita : dégustez le feuilleté grec aux épinards et feta</title>
		<link>https://visiter-santorini.fr/spanakopita/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Wed, 04 Feb 2026 11:00:00 +0000</pubDate>
				<category><![CDATA[Gastronomie grecque]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=10353</guid>

					<description><![CDATA[<p>La spanakopita figure parmi les préparations les plus emblématiques de la cuisine grecque. Ce feuilleté doré aux épinards et à la feta, enveloppé dans de fines feuilles de pâte filo croustillantes, séduit par son équilibre parfait entre légèreté et gourmandise. Servie en entrée, en plat principal ou en snack rapide, elle s&#8217;invite aussi bien sur&#8230;&#160;<a href="https://visiter-santorini.fr/spanakopita/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">La spanakopita : dégustez le feuilleté grec aux épinards et feta</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/spanakopita/">La spanakopita : dégustez le feuilleté grec aux épinards et feta</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">La <strong>spanakopita</strong> figure parmi les préparations les plus emblématiques de la cuisine grecque. Ce feuilleté doré aux épinards et à la feta, enveloppé dans de fines feuilles de pâte filo croustillantes, séduit par son équilibre parfait entre légèreté et gourmandise. Servie en entrée, en plat principal ou en snack rapide, elle s&rsquo;invite aussi bien sur les tables familiales que dans les pâtisseries de rue. Vous découvrirez un classique méditerranéen où la simplicité des ingrédients révèle toute la subtilité de la gastronomie hellénique.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Découvrir la spanakopita</h2>



<p class="wp-block-paragraph">Le nom <em>spanakopita</em> provient de la combinaison de deux mots grecs : <em>spanaki</em> (épinards) et <em>pita</em> (tarte ou feuilleté). Cette préparation ancestrale puise ses origines dans la tradition byzantine, où les cuisiniers maîtrisaient déjà l&rsquo;art des pâtes feuilletées. Les premières mentions écrites remontent au <strong>Moyen Âge</strong>, bien que les historiens culinaires suspectent une existence bien antérieure sous des formes légèrement différentes.</p>



<p class="wp-block-paragraph">Dans la Grèce rurale traditionnelle, la spanakopita se préparait avec les <strong>herbes sauvages</strong> récoltées au printemps : horta (verdures champêtres), orties tendres et bien sûr épinards. Les familles consommaient ce plat durant les périodes de jeûne orthodoxe, car sa version classique ne contient ni viande ni produits laitiers autres que la feta. Aujourd&rsquo;hui encore, certaines régions grecques perpétuent des recettes familiales transmises de génération en génération, chacune avec ses particularités locales.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph">En Grèce, on dit qu&rsquo;une bonne spanakopita doit craquer sous la dent à l&rsquo;extérieur tout en révélant un cœur moelleux et parfumé, signe d&rsquo;un dosage parfait entre pâte et garniture.</p>
</blockquote>



<p class="wp-block-paragraph">La <strong>pâte filo</strong> constitue l&rsquo;élément technique signature de ce plat. Ces feuilles ultra-fines, presque translucides, demandent traditionnellement un savoir-faire considérable pour être confectionnées à la main. Heureusement, la pâte filo industrielle de qualité permet aujourd&rsquo;hui aux cuisiniers de toutes origines de réaliser d&rsquo;excellentes spanakopitas sans des années d&rsquo;apprentissage. Le secret réside dans la manipulation délicate de ces feuilles fragiles et dans le beurrage méticuleux de chaque couche.</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1200" height="800" src="https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-1200x800.jpg" alt="recette spanakopita" class="wp-image-10367" srcset="https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-1200x800.jpg 1200w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-400x267.jpg 400w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-768x512.jpg 768w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-1536x1025.jpg 1536w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-2048x1366.jpg 2048w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-930x620.jpg 930w, https://visiter-santorini.fr/wp-content/uploads/recette-spanakopita-scaled.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">La recette</h2>



<h3 class="wp-block-heading">Ingrédients</h3>



<p class="wp-block-paragraph"><strong>Pour 8 personnes :</strong></p>



<ul class="wp-block-list">
<li>1 kg d&rsquo;épinards frais (ou 500 g d&rsquo;épinards surgelés décongelés)</li>



<li>300 g de feta de qualité, émiettée</li>



<li>3 oignons verts (avec leur partie verte) finement hachés</li>



<li>1 bouquet d&rsquo;aneth frais (environ 50 g), ciselé</li>



<li>1 petit bouquet de persil plat, ciselé</li>



<li>4 œufs légèrement battus</li>



<li>100 g de ricotta ou de fromage blanc égoutté</li>



<li>500 g de pâte filo (environ 20 feuilles)</li>



<li>200 ml d&rsquo;huile d&rsquo;olive extra vierge (ou 150 g de beurre fondu)</li>



<li>Sel, poivre noir fraîchement moulu</li>



<li>Noix de muscade râpée (une pincée)</li>



<li>Zeste d&rsquo;un demi-citron (optionnel)</li>
</ul>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Préparation</h3>



<p class="wp-block-paragraph"><strong>Étape 1 : Préparation des épinards.</strong> Si vous utilisez des épinards frais, lavez-les soigneusement puis plongez-les 2 minutes dans une grande casserole d&rsquo;eau bouillante salée. Égouttez-les immédiatement et passez-les sous l&rsquo;eau froide pour stopper la cuisson. Pressez-les fermement entre vos mains pour extraire le maximum d&rsquo;eau, puis hachez-les grossièrement. Pour les épinards surgelés, décongelez-les complètement et pressez-les énergiquement dans un torchon propre pour éliminer toute l&rsquo;eau résiduelle. Cette étape est cruciale pour éviter une garniture détrempée.</p>



<p class="wp-block-paragraph"><strong>Étape 2 : Préparation de la garniture.</strong> Dans un grand saladier, mélangez les épinards hachés, la feta émiettée, les oignons verts, l&rsquo;aneth et le persil ciselés. Ajoutez les œufs battus et la ricotta, puis assaisonnez avec du sel (modérément car la feta est déjà salée), du poivre et la noix de muscade. Si vous aimez les notes acidulées, incorporez le zeste de citron. Mélangez délicatement jusqu&rsquo;à obtenir une préparation homogène. Goûtez et ajustez l&rsquo;assaisonnement. Réservez au frais pendant que vous préparez la pâte.</p>



<p class="wp-block-paragraph"><strong>Étape 3 : Montage dans le plat.</strong> Préchauffez le four à 180°C. Badigeonnez généreusement un plat rectangulaire d&rsquo;environ 30&#215;40 cm avec de l&rsquo;huile d&rsquo;olive. Déroulez délicatement la pâte filo et couvrez-la immédiatement d&rsquo;un torchon légèrement humide pour éviter qu&rsquo;elle ne sèche. Déposez une première feuille au fond du plat, badigeonnez-la d&rsquo;huile d&rsquo;olive au pinceau. Superposez ainsi 10 feuilles de pâte en les badigeonnant systématiquement d&rsquo;huile entre chaque couche. Les bords peuvent dépasser du plat, vous les replierez plus tard.</p>



<p class="wp-block-paragraph"><strong>Étape 4 : Assemblage final.</strong> Répartissez uniformément la garniture aux épinards sur la base de pâte. Tassez légèrement avec le dos d&rsquo;une cuillère pour éliminer les poches d&rsquo;air. Recouvrez avec les 10 feuilles de pâte filo restantes, en badigeonnant toujours chaque feuille d&rsquo;huile d&rsquo;olive. Rabattez les bords qui dépassent vers l&rsquo;intérieur pour former un cadre. Badigeonnez généreusement la surface avec le reste d&rsquo;huile d&rsquo;olive. À l&rsquo;aide d&rsquo;un couteau bien aiguisé, tracez délicatement des losanges ou des carrés sur la surface (sans couper jusqu&rsquo;au fond) pour faciliter la découpe après cuisson.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Cuisson</h3>



<p class="wp-block-paragraph">Enfournez pour 45 à 50 minutes, jusqu&rsquo;à ce que la spanakopita soit magnifiquement dorée et croustillante. Les bords doivent être bien colorés et légèrement recourbés. Si la surface dore trop rapidement, couvrez-la légèrement de papier aluminium en fin de cuisson. Laissez reposer 10 minutes avant de découper complètement selon les tracés préalables. Servez tiède ou à température ambiante : la spanakopita se déguste aussi bien chaude que froide.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Variantes</h2>



<ul class="wp-block-list">
<li><strong>Spanakopita individuelle</strong> : Formez des triangles en pliant les feuilles de filo en accordéon autour de petites portions de garniture. Idéal pour les buffets et les pique-niques, ces portions individuelles se transportent facilement.</li>



<li><strong>Version enrichie au fromage</strong> : Ajoutez 100 g de graviera (fromage grec) râpé ou de gruyère à la garniture pour une texture encore plus fondante et un goût plus prononcé.</li>



<li><strong>Spanakopita aux herbes multiples</strong> : Incorporez du fenouil frais, de la menthe et de la roquette aux épinards pour une version printanière aux arômes complexes, particulièrement appréciée dans les îles grecques.</li>



<li><strong>Avec poireaux</strong> : Remplacez les oignons verts par un poireau finement émincé et revenu à l&rsquo;huile d&rsquo;olive. Cette variante apporte une douceur supplémentaire à la garniture.</li>



<li><strong>Version végétalienne</strong> : Substituez la feta par du tofu ferme émietté et mariné dans du jus de citron et des herbes, et remplacez les œufs par une préparation de graines de lin moulues (3 cuillères à soupe de graines + 9 cuillères à soupe d&rsquo;eau, laissez reposer 15 minutes).</li>
</ul>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Recommandations</h2>



<h3 class="wp-block-heading">Conseils de préparation</h3>



<p class="wp-block-paragraph"><strong>Choix de la feta :</strong> Privilégiez une feta grecque authentique AOP, de préférence au lait de brebis. Sa texture friable et son goût caractéristique font toute la différence. Évitez les « fromages type feta » qui manquent de personnalité. Une bonne feta doit être légèrement humide sans être spongieuse, avec un goût salé équilibré et des notes lactiques prononcées.</p>



<p class="wp-block-paragraph"><strong>Manipulation de la pâte filo :</strong> Sortez la pâte du réfrigérateur 30 minutes avant utilisation pour éviter qu&rsquo;elle ne se casse. Travaillez rapidement et gardez toujours les feuilles inutilisées sous un torchon humide. Ne soyez pas découragé si quelques feuilles se déchirent : vous pouvez les réparer en les superposant. L&rsquo;important est d&rsquo;obtenir des couches régulières et bien beurrées.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Dégustation</h3>



<p class="wp-block-paragraph"><strong>Service et accompagnements :</strong> La spanakopita se suffit à elle-même, mais s&rsquo;accompagne merveilleusement d&rsquo;une salade grecque classique (tomates, concombres, olives, oignons rouges). Un filet de citron pressé juste avant la dégustation rehausse agréablement les saveurs. Servez avec du yaourt grec nature nature agrémenté d&rsquo;aneth et d&rsquo;ail pour un contraste rafraîchissant.</p>



<p class="wp-block-paragraph"><strong>Conservation et réchauffage :</strong> La spanakopita se conserve 3 jours au réfrigérateur dans un contenant hermétique. Réchauffez-la au four à 160°C pendant 15 minutes pour retrouver son croustillant, jamais au micro-ondes qui ramollirait la pâte. Vous pouvez également congeler les portions crues ou cuites : décongelez au réfrigérateur avant de réchauffer.</p>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<h3 class="wp-block-heading">Bon à savoir</h3>



<p class="wp-block-paragraph"><strong>Astuce de chef :</strong> Pour une spanakopita particulièrement croustillante, alternez les couches de pâte badigeonnées d&rsquo;huile d&rsquo;olive avec quelques couches badigeonnées de beurre fondu. En effet, le mélange des deux matières grasses crée une texture exceptionnelle et un parfum incomparable. Saupoudrez également quelques graines de sésame sur la surface avant cuisson pour une touche décorative et gustative.</p>



<p class="wp-block-paragraph"><strong>Équilibre nutritionnel :</strong> Malgré l&rsquo;utilisation généreuse d&rsquo;huile d&rsquo;olive, la spanakopita reste un plat équilibré grâce aux épinards riches en fer et vitamines, à la feta source de calcium et protéines. Pour une version plus légère, vous pouvez réduire le nombre de couches de pâte filo à 6-7 de chaque côté et utiliser un pinceau pour ne mettre qu&rsquo;une fine couche d&rsquo;huile.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Plus de recettes grecques</h2>


<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fspanakopita%2F&amp;linkname=La%20spanakopita%20%3A%20d%C3%A9gustez%20le%20feuillet%C3%A9%20grec%20aux%20%C3%A9pinards%20et%20feta" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fspanakopita%2F&amp;linkname=La%20spanakopita%20%3A%20d%C3%A9gustez%20le%20feuillet%C3%A9%20grec%20aux%20%C3%A9pinards%20et%20feta" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fspanakopita%2F&amp;linkname=La%20spanakopita%20%3A%20d%C3%A9gustez%20le%20feuillet%C3%A9%20grec%20aux%20%C3%A9pinards%20et%20feta" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fspanakopita%2F&#038;title=La%20spanakopita%20%3A%20d%C3%A9gustez%20le%20feuillet%C3%A9%20grec%20aux%20%C3%A9pinards%20et%20feta" data-a2a-url="https://visiter-santorini.fr/spanakopita/" data-a2a-title="La spanakopita : dégustez le feuilleté grec aux épinards et feta"></a></p><p>L’article <a href="https://visiter-santorini.fr/spanakopita/">La spanakopita : dégustez le feuilleté grec aux épinards et feta</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>White Beach à Santorin : évasion sauvage sous les falaises blanches</title>
		<link>https://visiter-santorini.fr/white-beach-santorin/</link>
		
		<dc:creator><![CDATA[Santo]]></dc:creator>
		<pubDate>Fri, 30 Jan 2026 11:00:00 +0000</pubDate>
				<category><![CDATA[Santorin]]></category>
		<category><![CDATA[Lieux et plages]]></category>
		<guid isPermaLink="false">https://visiter-santorini.fr/?p=10344</guid>

					<description><![CDATA[<p>White Beach, ou Aspri Paralia en grec, compte parmi les plages les plus spectaculaires de Santorin. Nichée au pied de falaises de pierre ponce d&#8217;un blanc immaculé, cette petite crique isolée offre un contraste saisissant avec les eaux turquoise de la mer Égée. Son accès difficile en fait une destination privilégiée pour ceux qui recherchent&#8230;&#160;<a href="https://visiter-santorini.fr/white-beach-santorin/" rel="bookmark">Lire la suite &#187;<span class="screen-reader-text">White Beach à Santorin : évasion sauvage sous les falaises blanches</span></a></p>
<p>L’article <a href="https://visiter-santorini.fr/white-beach-santorin/">White Beach à Santorin : évasion sauvage sous les falaises blanches</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">White Beach, ou <strong>Aspri Paralia</strong> en grec, compte parmi les plages les plus spectaculaires de Santorin. Nichée au pied de falaises de pierre ponce d&rsquo;un blanc immaculé, cette petite crique isolée offre un contraste saisissant avec les eaux turquoise de la mer Égée. Son accès difficile en fait une destination privilégiée pour ceux qui recherchent authenticité et tranquillité loin des foules touristiques. Vous découvrirez un petit bout de paradis préservé où la nature volcanique de l&rsquo;île s&rsquo;exprime dans toute sa splendeur.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Découvrir White Beach</h2>



<p class="wp-block-paragraph">White Beach se situe sur la côte sud de Santorin, à proximité immédiate du site archéologique d&rsquo;Akrotiri et non loin de la célèbre <strong><a href="https://visiter-santorini.fr/detour-par-red-beach/" type="post" id="770">Red Beach</a></strong>. La plage doit son nom aux imposantes falaises de pierre ponce blanche qui l&rsquo;encadrent et la protègent des vents. Cette formation géologique unique résulte des éruptions volcaniques qui ont façonné Santorin au fil des millénaires. Les parois rocheuses atteignent plusieurs dizaines de mètres de hauteur, créant une sorte d&rsquo;amphithéâtre naturel ouvert sur la mer.</p>



<p class="wp-block-paragraph">Contrairement aux plages de sable noir caractéristiques de Santorin, White Beach présente un mélange de galets blancs et gris clair. La superficie de la plage reste modeste, environ 100 mètres de long pour une dizaine de mètres de profondeur à marée basse. Cette configuration intime limite naturellement le nombre de visiteurs, préservant ainsi son caractère sauvage et paisible. L&rsquo;eau y est particulièrement limpide grâce à l&rsquo;absence de sable en suspension.</p>



<figure class="wp-block-gallery has-nested-images columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><a href="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1.jpg"><img decoding="async" width="1200" height="675" data-id="10355" src="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-1200x675.jpg" alt="white beach santorin cyclades (1)" class="wp-image-10355" srcset="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-1200x675.jpg 1200w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-400x225.jpg 400w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-768x432.jpg 768w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-1536x864.jpg 1536w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1-2048x1152.jpg 2048w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-1-1.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" /></a></figure>



<figure class="wp-block-image size-large"><a href="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2.jpg"><img decoding="async" width="1200" height="675" data-id="10357" src="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-1200x675.jpg" alt="white beach santorin cyclades (2)" class="wp-image-10357" srcset="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-1200x675.jpg 1200w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-400x225.jpg 400w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-768x432.jpg 768w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-1536x864.jpg 1536w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2-2048x1152.jpg 2048w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-2-2.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" /></a></figure>



<figure class="wp-block-image size-large"><a href="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1.jpg"><img decoding="async" width="1200" height="675" data-id="10356" src="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-1200x675.jpg" alt="white beach santorin cyclades (3)" class="wp-image-10356" srcset="https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-1200x675.jpg 1200w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-400x225.jpg 400w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-768x432.jpg 768w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-1536x864.jpg 1536w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1-2048x1152.jpg 2048w, https://visiter-santorini.fr/wp-content/uploads/white-beach-santorin-cyclades-3-1.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" /></a></figure>
</figure>



<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p class="wp-block-paragraph"><em>La White Beach est une expérience visuelle à ne pas manquer. Si vous aimez les paysages géologiques spectaculaires</em>, prenez le temps d&rsquo;y faire escale.</p>
</blockquote>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Une plage fascinante à Santorin</h2>



<h3 class="wp-block-heading">Les falaises de pierre ponce</h3>



<p class="wp-block-paragraph">Les <strong>falaises blanches</strong> constituent l&rsquo;attraction principale de White Beach. Leur couleur immaculée, presque irréelle sous le soleil méditerranéen, crée un décor photographique exceptionnel. La roche volcanique friable se détache par endroits, formant des grottes naturelles peu profondes où vous pourrez vous abriter du soleil aux heures les plus chaudes. Attention toutefois à ne pas vous installer directement sous les parois : des chutes de pierres peuvent survenir, notamment après de fortes pluies.</p>



<h3 class="wp-block-heading">Les fonds marins</h3>



<p class="wp-block-paragraph">White Beach offre des <strong>conditions idéales pour le snorkeling</strong>. Les eaux cristallines permettent une visibilité exceptionnelle jusqu&rsquo;à plusieurs mètres de profondeur. Vous observerez une faune marine variée : poissons méditerranéens colorés, oursins dans les anfractuosités rocheuses, et parfois même des poulpes camouflés. La zone située près des rochers à droite de la plage (face à la mer) se révèle particulièrement riche. Le fond marin descend progressivement, rendant la baignade sûre même pour les nageurs moins expérimentés.</p>



<h3 class="wp-block-heading">Le point de vue depuis la mer</h3>



<p class="wp-block-paragraph">Durant la traversée en bateau-taxi, prenez le temps d&rsquo;admirer la <strong>côte sud de Santorin</strong> depuis la mer. Vous apercevrez successivement Red Beach avec ses falaises rouges, le phare d&rsquo;Akrotiri perché sur son promontoire, et la silhouette des villages blancs accrochés aux hauteurs de la caldeira au loin. Cette perspective maritime offre une compréhension unique de la géologie tourmentée de l&rsquo;île.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="nv-iframe-embed"><iframe loading="lazy" title="White Beach - Santorini 4K" width="1200" height="675" src="https://www.youtube.com/embed/47nCG1vvGbw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
</div></figure>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Activités à découvrir</h2>



<ul class="wp-block-list">
<li><strong>Snorkeling et exploration sous-marine</strong> : Apportez masque, tuba et palmes pour explorer les fonds rocheux. Les heures matinales offrent la meilleure visibilité avant que le vent ne se lève.</li>



<li><strong>Photographie de paysage</strong> : Le contraste entre le blanc des falaises, le bleu de la mer et le ciel constitue un sujet photographique saisissant. La lumière dorée en fin d&rsquo;après-midi sublime particulièrement les lieux.</li>



<li><strong>Baignade tranquille</strong> : Profitez de l&rsquo;intimité de cette petite crique pour nager dans un cadre préservé. L&rsquo;eau reste généralement calme, protégée par la configuration naturelle du site.</li>



<li><strong>Combinaison avec Red Beach</strong> : De nombreux bateaux-taxis proposent un forfait incluant les deux plages. Vous pourrez ainsi découvrir ces deux merveilles géologiques lors d&rsquo;une même sortie.</li>



<li><strong>Farniente minimaliste</strong> : White Beach ne dispose d&rsquo;aucune infrastructure commerciale. C&rsquo;est l&rsquo;occasion de vivre une expérience balnéaire authentique, loin des transats et des bars de plage.</li>



<li><strong>Observation géologique</strong> : Examinez de près les strates visibles dans les falaises, témoins des différentes éruptions volcaniques qui ont construit Santorin. Les passionnés de géologie y trouveront un véritable livre ouvert.</li>
</ul>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Comment y accéder ?</h2>



<h3 class="wp-block-heading">Les bateaux-taxis</h3>



<p class="wp-block-paragraph">Les bateaux-taxis partent du petit port d&rsquo;Akrotiri, accessible en voiture ou en bus depuis Fira (15 km). La traversée dure environ 5 minutes et coûte généralement entre 5 et 10 euros par personne selon la saison. Plusieurs départs sont proposés dans la matinée, avec des retours échelonnés l&rsquo;après-midi. Renseignez-vous sur les horaires auprès des bateliers et convenez d&rsquo;une heure de retour.</p>



<h3 class="wp-block-heading">Les croisières en catamaran (L&rsquo;option confort)</h3>



<p class="wp-block-paragraph">La White Beach est une étape incontournable des excursions en bateau à Santorin. C’est l’option idéale pour admirer les falaises depuis le large et plonger directement depuis le pont du bateau.</p>



<div data-gyg-href="https://widget.getyourguide.com/default/activities.frame" data-gyg-locale-code="fr-FR" data-gyg-widget="activities" data-gyg-number-of-items="2" data-gyg-partner-id="C1GDA7A" data-gyg-tour-ids="465302,591220"><span>Powered by <a target="_blank" rel="sponsored" href="https://www.getyourguide.com/fira-l9797/">GetYourGuide</a></span></div>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<h2 class="wp-block-heading">Recommandations</h2>



<p class="wp-block-paragraph"><strong>Quand visiter ?</strong> La période idéale s&rsquo;étend de mai à septembre, lorsque les conditions météorologiques sont stables et que les bateaux-taxis fonctionnent régulièrement. Privilégiez les matinées en semaine pour éviter l&rsquo;affluence relative. En juillet-août, même cette plage reculée peut accueillir une trentaine de personnes simultanément. Hors saison, le service de bateau devient irrégulier voire inexistant.</p>



<p class="wp-block-paragraph"><strong>Que prévoir ?</strong> White Beach est totalement dépourvue d&rsquo;infrastructures : pas de taverne, pas de parasols, pas de sanitaires. Prévoyez impérativement de l&rsquo;eau en quantité suffisante, des snacks, un chapeau et de la crème solaire. Un parasol portable peut s&rsquo;avérer judicieux si vous comptez rester plusieurs heures. Les zones d&rsquo;ombre naturelle sont limitées et très convoitées. N&rsquo;oubliez pas votre équipement de snorkeling si vous en possédez, la location n&rsquo;étant pas disponible sur place.</p>



<p class="wp-block-paragraph"><strong>Précautions de sécurité</strong> : Ne vous installez jamais directement au pied des falaises en raison du risque d&rsquo;éboulement. Portez des chaussures d&rsquo;eau pour marcher sur les galets et entrer dans l&rsquo;eau confortablement. Si vous êtes sujet au mal de mer, prenez vos précautions avant la traversée en bateau, surtout par temps venteux. Emportez un sac pour vos déchets et ramenez-les avec vous : il n&rsquo;existe aucune poubelle sur la plage.</p>



<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-cover alignfull" style="min-height:700px;aspect-ratio:unset;"><img decoding="async" width="1200" height="675" class="wp-block-cover__image-background wp-image-9504 size-large" alt="red beach santorin cyclades (2)" src="https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-1200x675.jpg" data-object-fit="cover" srcset="https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-1200x675.jpg 1200w, https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-400x225.jpg 400w, https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-768x432.jpg 768w, https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-1536x864.jpg 1536w, https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2-2048x1152.jpg 2048w, https://visiter-santorini.fr/wp-content/uploads/red-beach-santorin-cyclades-2.jpg 1920w" sizes="(max-width: 1200px) 100vw, 1200px" /><span aria-hidden="true" class="wp-block-cover__background has-neve-text-color-background-color has-background-dim-30 has-background-dim"></span><div class="wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow">
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color">Explorer Santorin</h2>



<p class="has-text-align-center has-white-color has-text-color wp-block-paragraph" style="font-size:23px">Retrouvez toutes les informations utiles pour préparer votre séjour.</p>



<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>



<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex">
<div class="wp-block-button is-style-primary"><a class="wp-block-button__link wp-element-button" href="https://visiter-santorini.fr/santorin/">Découvrir</a></div>
</div>
</div></div>
</div></div>
<p><a class="a2a_button_facebook" href="https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fwhite-beach-santorin%2F&amp;linkname=White%20Beach%20%C3%A0%20Santorin%20%3A%20%C3%A9vasion%20sauvage%20sous%20les%20falaises%20blanches" title="Facebook" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_pinterest" href="https://www.addtoany.com/add_to/pinterest?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fwhite-beach-santorin%2F&amp;linkname=White%20Beach%20%C3%A0%20Santorin%20%3A%20%C3%A9vasion%20sauvage%20sous%20les%20falaises%20blanches" title="Pinterest" rel="nofollow noopener" target="_blank"></a><a class="a2a_button_email" href="https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fvisiter-santorini.fr%2Fwhite-beach-santorin%2F&amp;linkname=White%20Beach%20%C3%A0%20Santorin%20%3A%20%C3%A9vasion%20sauvage%20sous%20les%20falaises%20blanches" title="Email" rel="nofollow noopener" target="_blank"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share#url=https%3A%2F%2Fvisiter-santorini.fr%2Fwhite-beach-santorin%2F&#038;title=White%20Beach%20%C3%A0%20Santorin%20%3A%20%C3%A9vasion%20sauvage%20sous%20les%20falaises%20blanches" data-a2a-url="https://visiter-santorini.fr/white-beach-santorin/" data-a2a-title="White Beach à Santorin : évasion sauvage sous les falaises blanches"></a></p><p>L’article <a href="https://visiter-santorini.fr/white-beach-santorin/">White Beach à Santorin : évasion sauvage sous les falaises blanches</a> est apparu en premier sur <a href="https://visiter-santorini.fr">Découvrir la Grèce</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
