// — Démarrage du bloc de code JavaScript pour le comparateur de voyages —
// Données du tableau comparatif fournies par l’utilisateur
const travelData = [
{‘Type de voyage’: ‘Voyage Solidaire Erika Fillandy Network’, ‘Caractéristiques’: [
‘Circuit 100% local avec partenaires malgaches’,
‘Écoresponsable: réduction empreinte carbone, suppression plastique’,
‘Engagé: 10% reversé aux projets locaux (Vohibola)’,
‘Immersion culturelle profonde et rencontres authentiques’,
‘Observation lémuriens et biodiversité endémique’,
‘Détente sur plages de Sainte-Marie’,
‘Contribution active au développement durable’
]},
{‘Type de voyage’: ‘Voyage Touristique Traditionnel’, ‘Caractéristiques’: [
‘Souvent organisé par de grands tours opérateurs étrangers’,
‘Impact écologique variable, peu de mesures concrètes’,
‘Faibles retombées économiques directes pour les locaux’,
‘Expériences standardisées, rencontres superficielles’,
‘Visite de sites classiques, parfois surfréquentés’,
‘Détente isolée dans des resorts’,
‘Contribution passive à l’économie générale’
]}
];
// Mapping sémantique pour aligner les caractéristiques dans le tableau
// Ceci permet de comparer point par point même si les phrases originales sont différentes.
const semanticMapping = [
{
aspect: “Partenariats Locaux & Organisation”,
solidaire: “Circuit 100% local avec partenaires malgaches”,
traditionnel: “Souvent organisé par de grands tours opérateurs étrangers”,
iconSolidaire: “✅”, // Coche verte pour les aspects positifs
iconTraditionnel: “👎”, // Pouce vers le bas pour les aspects moins favorables
tooltipSolidaire: “Soutien direct à l’économie et à l’emploi local, bénéfices restant à Madagascar.”,
tooltipTraditionnel: “Les bénéfices sont souvent rapatriés à l’étranger, impact local indirect et limité.”
},
{
aspect: “Impact Environnemental”,
solidaire: “Écoresponsable: réduction empreinte carbone, suppression plastique”,
traditionnel: “Impact écologique variable, peu de mesures concrètes”,
iconSolidaire: “🌱”, // Plante pour l’écologie
iconTraditionnel: “🚫”, // Symbole d’interdiction/stop
tooltipSolidaire: “Des actions concrètes pour préserver l’environnement et minimiser l’empreinte carbone.”,
tooltipTraditionnel: “Peu d’efforts ou de mesures pour réduire l’impact écologique du tourisme.”
},
{
aspect: “Contribution Économique Locale”,
solidaire: “Engagé: 10% reversé aux projets locaux (Vohibola)”,
traditionnel: “Faibles retombées économiques directes pour les locaux”,
iconSolidaire: “💖”, // Cœur pour la solidarité
iconTraditionnel: “💸”, // Sac d’argent qui s’éloigne
tooltipSolidaire: “Financement direct de projets communautaires pour un développement durable.”,
tooltipTraditionnel: “Peu d’argent généré par le tourisme traditionnel bénéficie directement aux communautés locales.”
},
{
aspect: “Immersion Culturelle & Rencontres”,
solidaire: “Immersion culturelle profonde et rencontres authentiques”,
traditionnel: “Expériences standardisées, rencontres superficielles”,
iconSolidaire: “🤝”, // Poignée de main pour les rencontres
iconTraditionnel: “🎭”, // Masque pour la superficialité
tooltipSolidaire: “Vivez la culture locale de l’intérieur, échangez avec les habitants.”,
tooltipTraditionnel: “Interaction limitée et souvent scénarisée, peu d’authenticité.”
},
{
aspect: “Expériences Nature & Sites”,
solidaire: “Observation lémuriens et biodiversité endémique”,
traditionnel: “Visite de sites classiques, parfois surfréquentés”,
iconSolidaire: “🐒”, // Lémurien
iconTraditionnel: “🚶♂️”, // Personne qui marche, symbolisant la foule
tooltipSolidaire: “Découverte respectueuse de la faune et la flore unique de Madagascar.”,
tooltipTraditionnel: “Visite de sites classiques, parfois surfréquentés, avec un impact potentiel sur l’environnement.”
},
{
aspect: “Type de Détente”,
solidaire: “Détente sur plages de Sainte-Marie”,
traditionnel: “Détente isolée dans des resorts”,
iconSolidaire: “🏖️”, // Plage
iconTraditionnel: “🏢”, // Bâtiment pour les resorts
tooltipSolidaire: “Détente authentique, souvent intégrée à la vie locale.”,
tooltipTraditionnel: “Détente coupée des réalités locales, souvent dans des complexes hôteliers fermés.”
},
{
aspect: “Engagement & Développement Durable”,
solidaire: “Contribution active au développement durable”,
traditionnel: “Contribution passive à l’économie générale”,
iconSolidaire: “🌍”, // Globe terrestre pour le développement durable
iconTraditionnel: “❓”, // Point d’interrogation pour l’incertitude de l’impact
tooltipSolidaire: “Vous êtes acteur du changement positif et participez activement au développement des communautés.”,
tooltipTraditionnel: “Votre impact sur le développement durable est indirect, peu clair ou minimal.”
}
];
// État actuel du mode d’affichage (true = différences clés, false = mode complet)
let showKeyDifferencesMode = false;
/**
* Génère et affiche le tableau comparatif.
* @param {boolean} showDifferences – Si true, met en évidence les différences et ajoute des icônes.
*/
function renderTable(showDifferences) {
const tbody = document.getElementById(‘comparateurBody’);
tbody.innerHTML = ”; // Nettoyer le corps du tableau existant
semanticMapping.forEach(item => {
const row = document.createElement(‘tr’);
row.classList.add(‘transition-colors’, ‘duration-200’, ‘ease-in-out’, ‘hover:bg-blue-50’);
// Cellule Aspect Clé – Rendre sticky
const tdAspect = document.createElement(‘td’);
tdAspect.classList.add(‘py-4’, ‘px-6’, ‘font-semibold’, ‘text-gray-800’, ‘border-r’, ‘border-gray-100’, ‘sticky’, ‘left-0’, ‘bg-white’, ‘z-10’, ‘min-w-[200px]’); // min-w pour éviter que le texte ne soit trop compressé
tdAspect.textContent = item.aspect;
row.appendChild(tdAspect);
// Cellule Voyage Solidaire
const tdSolidaire = document.createElement(‘td’);
tdSolidaire.classList.add(‘py-4’, ‘px-6’, ‘text-center’, ‘text-gray-700’, ‘border-r’, ‘border-gray-100’, ‘transition-all’, ‘duration-300’, ‘ease-in-out’);
if (showDifferences) {
tdSolidaire.classList.add(‘bg-green-50’, ‘font-medium’, ‘text-green-800’);
tdSolidaire.innerHTML = `${item.iconSolidaire} ${item.solidaire}`;
} else {
tdSolidaire.textContent = item.solidaire;
}
row.appendChild(tdSolidaire);
// Cellule Voyage Touristique Traditionnel
const tdTraditionnel = document.createElement(‘td’);
tdTraditionnel.classList.add(‘py-4’, ‘px-6’, ‘text-center’, ‘text-gray-700’, ‘transition-all’, ‘duration-300’, ‘ease-in-out’);
if (showDifferences) {
tdTraditionnel.classList.add(‘bg-red-50’, ‘font-medium’, ‘text-red-800’);
tdTraditionnel.innerHTML = `${item.iconTraditionnel} ${item.traditionnel}`;
} else {
tdTraditionnel.textContent = item.traditionnel;
}
row.appendChild(tdTraditionnel);
tbody.appendChild(row);
});
}
// Gestionnaire d’événement pour le bouton “Voir les différences clés”
document.addEventListener(‘DOMContentLoaded’, () => {
const toggleButton = document.getElementById(‘toggleDifferencesBtn’);
// Première rendu du tableau en mode complet
renderTable(showKeyDifferencesMode);
toggleButton.addEventListener(‘click’, () => {
showKeyDifferencesMode = !showKeyDifferencesMode; // Inverser l’état
renderTable(showKeyDifferencesMode); // Re-rendre le tableau avec le nouvel état
// Mettre à jour le texte et le style du bouton
if (showKeyDifferencesMode) {
toggleButton.textContent = ‘Afficher tous les détails’;
toggleButton.classList.remove(‘bg-indigo-700’, ‘hover:bg-indigo-800’, ‘focus:ring-indigo-300’);
toggleButton.classList.add(‘bg-teal-600’, ‘hover:bg-teal-700’, ‘focus:ring-teal-300’);
} else {
toggleButton.textContent = ‘Voir les différences clés’;
toggleButton.classList.remove(‘bg-teal-600’, ‘hover:bg-teal-700’, ‘focus:ring-teal-300’);
toggleButton.classList.add(‘bg-indigo-700’, ‘hover:bg-indigo-800’, ‘focus:ring-indigo-300’);
}
});
// — Intégration de l’API gratuite WorldTimeAPI pour une touche d’interactivité —
// Cette section permet d’afficher l’heure locale à Antananarivo, Madagascar.
// C’est un exemple d’intégration d’API publique gratuite et sans clé,
// ajoutant une information contextuelle sans alourdir le composant principal.
// URL de l’API pour obtenir l’heure actuelle à Antananarivo, Madagascar
// Documentation: https://worldtimeapi.org/
// Exemple de réponse JSON (simplifié pour la lisibilité):
// {
// “datetime”: “2023-10-27T10:30:00.123456+03:00”,
// “timezone”: “Africa/Antananarivo”,
// …
// }
const timeApiUrl = ‘https://worldtimeapi.org/api/timezone/Africa/Antananarivo’;
const timeDisplayElement = document.getElementById(‘madagascarTime’);
if (timeDisplayElement) {
fetch(timeApiUrl)
.then(response => {
if (!response.ok) {
throw new Error(`Erreur HTTP! Statut: ${response.status}`);
}
return response.json();
})
.then(data => {
// Extraire la date et l’heure, puis formater pour l’affichage en français
const dateTimeString = data.datetime;
// Utiliser Intl.DateTimeFormat pour un formatage plus robuste
const date = new Date(dateTimeString);
const options = {
weekday: ‘long’, year: ‘numeric’, month: ‘long’, day: ‘numeric’,
hour: ‘2-digit’, minute: ‘2-digit’, second: ‘2-digit’,
hour12: false, // Format 24h
timeZone: ‘Africa/Antananarivo’ // S’assurer que le formatage est pour le bon fuseau
};
const formattedTime = new Intl.DateTimeFormat(‘fr-FR’, options).format(date);
timeDisplayElement.textContent = `Heure actuelle à Antananarivo, Madagascar : ${formattedTime}`;
timeDisplayElement.classList.remove(‘text-gray-500’, ‘italic’);
timeDisplayElement.classList.add(‘text-blue-700’, ‘font-medium’);
})
.catch(error => {
console.error(‘Erreur lors de la récupération de l’heure de Madagascar:’, error);
timeDisplayElement.textContent = ‘Impossible de charger l’heure actuelle de Madagascar.’;
timeDisplayElement.classList.remove(‘text-gray-500’, ‘italic’);
timeDisplayElement.classList.add(‘text-red-600’, ‘font-medium’); // En cas d’erreur
});
}
});
// — Fin du bloc de code JavaScript pour le comparateur de voyages —
{“@context”:”https://schema.org”,”@type”:”FAQPage”,”mainEntity”:[{“@type”:”Question”,”name”:”Qu’est-ce que le projet Mihomehy de Grandcamp-Maisy u00e0 Madagascar ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Le projet Mihomehy (qui signifie ‘en riant’ en malgache) est une initiative d’Olivier Guillon, un ancien marin-pu00eacheur de Grandcamp-Maisy. Il consiste en un voyage solidaire u00e0 Madagascar, ou00f9 Olivier, son u00e9pouse Nora et quatre amis naviguent de village en village pour partager des moments de culture, notamment par la diffusion de films muets, et apporter de la joie aux communautu00e9s locales. C’est une alliance entre navigation, du00e9couverte et engagement humanitaire.”}},{“@type”:”Question”,”name”:”Comment ce voyage solidaire contribue-t-il au du00e9veloppement durable ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Ce voyage est conu00e7u pour u00eatre 100% local, maximisant les retombu00e9es u00e9conomiques directes pour les communautu00e9s malgaches. Il est u00e9galement u00e9coresponsable, avec des efforts pour ru00e9duire l’empreinte carbone et supprimer les plastiques u00e0 usage unique. De plus, 10% du prix du voyage est directement reversu00e9 u00e0 des projets solidaires, comme le soutien u00e0 l’Association Razan’ny Vohibola qui u0153uvre pour la protection de la foru00eat de Vohibola, une initiative de du00e9veloppement durable cruciale.”}},{“@type”:”Question”,”name”:”Quels sont les points forts de l’expu00e9rience proposu00e9e ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Les points forts incluent des rencontres authentiques avec les habitants, l’observation de la biodiversitu00e9 exceptionnelle de Madagascar (notamment les lu00e9muriens), la participation u00e0 des actions solidaires comme le reboisement de la foru00eat de Vohibola, des moments de du00e9tente sur les plages paradisiaques de Sainte-Marie, et des u00e9changes culturels inoubliables, notamment gru00e2ce aux projections de films muets dans les villages reculu00e9s. C’est une immersion profonde et transformatrice.”}},{“@type”:”Question”,”name”:”Quelle est la date limite d’inscription pour le prochain du00e9part ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Le prochain du00e9part est fixu00e9 au 3 septembre 2025. La date limite d’inscription pour celles et ceux qui souhaitent prendre part u00e0 cette aventure humaine unique est le 30 juin 2025. Il est conseillu00e9 de s’inscrire rapidement car les places pour ce type de voyage engagu00e9 sont limitu00e9es et tru00e8s demandu00e9es.”}},{“@type”:”Question”,”name”:”Comment le voyageur peut-il s’assurer de l’impact ru00e9el de son engagement ? “,”acceptedAnswer”:{“@type”:”Answer”,”text”:”Le projet s’engage u00e0 la transparence. En travaillant exclusivement avec des partenaires locaux, les retombu00e9es u00e9conomiques sont directes. Les 10% reversu00e9s sont du00e9diu00e9s u00e0 des projets clairement identifiu00e9s, comme celui de l’Association Razan’ny Vohibola. Les participants vivent une immersion complu00e8te et constatent par eux-mu00eames l’impact de leurs actions et de leur pru00e9sence sur les communautu00e9s et l’environnement, offrant ainsi une visibilitu00e9 concru00e8te de leur contribution.”}}]}
