Estagel Nouveau Souffle
☰
🌙
title = "Présentation du site"
page = "presentation-du-site"
description = "Liens, contacts et informations pratiques pour Estagel"

🏛️ L’importance d’un site internet moderne pour une municipalité comme Estagel

📰 Un outil central de communication publique

Pour une commune comme Estagel, le site internet municipal constitue aujourd’hui un outil central de communication publique.
Il est bien plus qu’une vitrine institutionnelle : il représente le principal point d’accès à l’information pour les habitants, les associations, les acteurs locaux et les visiteurs.

Un site clair, lisible et régulièrement mis à jour permet notamment :

📱 Un site adapté à toutes les tailles d’écran

Un site municipal moderne doit être conçu pour s’adapter naturellement à l’ensemble des supports numériques utilisés aujourd’hui.

Il doit offrir une expérience de lecture confortable sur :

Cette adaptation n’est pas un choix esthétique, mais une exigence d’égalité d’accès à l’information publique.

🔄 Portrait et paysage : une continuité de lecture

Les citoyens consultent le site municipal dans des situations très diverses, parfois en déplacement, parfois à domicile, sur des écrans orientés différemment.

Le site doit donc garantir :

Sans zoom excessif, sans défilement horizontal, et sans perte de confort visuel.
La continuité de lecture est une condition essentielle de l’accessibilité.

👁️‍🗨️ Lisibilité et accessibilité : un enjeu démocratique

L’information municipale s’adresse à tous les citoyens, sans distinction d’âge, de compétences numériques ou d’équipement.

Cela suppose :

Une information difficile à lire devient rapidement une information ignorée.

📊 Les usages numériques aujourd’hui

Les données de consultation des sites institutionnels locaux montrent une évolution nette des usages :

Ces chiffres confirment la nécessité de concevoir un site pensé d’abord pour le mobile, tout en conservant un excellent confort de lecture sur les écrans plus larges.

🔄 La mise à jour, condition de crédibilité

Un site municipal qui n’est pas régulièrement mis à jour perd rapidement sa crédibilité et son utilité.

Une mise à jour rigoureuse permet :

Un site vivant reflète une municipalité active, attentive et responsable.

🎨 Une attractivité visuelle sobre et maîtrisée

L’attractivité d’un site municipal repose avant tout sur la sobriété et la cohérence.

Il ne s’agit pas de multiplier les effets visuels, mais de proposer :

Cette sobriété favorise une lecture attentive et respectueuse du contenu.

🧭 Simplicité et convivialité

Un site municipal doit permettre à chacun de trouver rapidement l’information recherchée, sans effort inutile.

Une structure claire, des menus compréhensibles et une navigation cohérente contribuent à une expérience fluide et rassurante pour le lecteur.

⏳ En finir avec les sites internet figés

Les sites conçus uniquement pour les écrans d’ordinateur, à la présentation rigide et statique, ne correspondent plus aux usages actuels.

Ils participent à une forme d’exclusion numérique et nuisent à l’accès à l’information publique.
Un site moderne, adaptatif et lisible traduit au contraire une volonté d’ouverture et de modernité.

🔍 Transparence municipale : une orientation assumée

Le site internet municipal doit être le reflet direct d’une politique de transparence clairement assumée.

Cela implique :

Cette démarche marque une rupture nette avec l’opacité du site actuel.

📝 Une charte éditoriale pour garantir clarté et cohérence

La mise en place d’une charte éditoriale du site communal permet de définir clairement la manière dont l’information est rédigée, présentée et mise à jour.
Elle fixe un cadre commun afin que chaque contenu publié respecte les mêmes principes de clarté, de lisibilité et de neutralité, quels que soient le sujet ou le rédacteur.

Cette charte contribue notamment :

En s’appuyant sur une charte éditoriale, la municipalité affirme une volonté de communication responsable, honnête et durable, au service de l’information citoyenne et du débat public.

🗣️ Participation citoyenne

Questions – réponses

Un espace dédié permet de répondre clairement aux interrogations les plus fréquentes et de faciliter les démarches des habitants.

Commentaires des lecteurs

Un espace d’expression encadré favorise l’écoute, le dialogue et la participation citoyenne, dans un cadre respectueux.

🛡️ Indépendance et gratuité du site

Le site internet municipal est entièrement indépendant :

Il ne s’agit pas d’un Facebook, Instagram ou TikTok dont les propriétaires sont des multinationales milliardaires, dont l’intérêt est purement mercantile et basé sur l’exploitation de tous les utilisateurs.
Le site municipal est au contraire le reflet d’une politique locale, transparente et au service des citoyens, loin de l’impérialisme numérique et commercial.

🌱 Conclusion

Un site internet municipal moderne n’est pas un simple outil technique.
Il constitue un véritable espace public numérique, au service de l’information, de la transparence et de la démocratie locale.

Pour une commune comme Estagel, il représente un levier essentiel de confiance, de lisibilité et de participation citoyenne.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Présentation du site</title>
<meta name="description" content="Estagel Nouveau Souffle : Programme complet pour les élections municipales 2026. Instaurer une vraie démocratie locale, soutenir l’agriculture et la planification écologique, améliorer l’aménagement urbain et le cadre de vie, renforcer la solidarité et l’action sociale, défendre les services publics et la paix, encourager la culture, le sport et la vie associative, sécuriser le village et dynamiser les commerces.">
<meta name="keywords" content="Estagel, élections municipales 2026, démocratie locale, référendum d’initiative citoyenne, transparence, communication publique, bulletin municipal, site internet, agriculture bio, AMAP, agriculture paysanne, récupération eaux usées, transports publics, gare multimodale, gestion écologique de l’eau, urbanisme, logements vacants, cadre de vie, rénovation mairie, promenade, végétation, jardins, toilettes publiques, solidarité, logement social, CCAS, services publics, paix, jumelage, culture, associations, sport, jeunesse, sécurité, prévention, citoyenneté, commerces, centre du village, taxe foncière, marché local, chèque solidarité">
<meta name="author" content="Michel Garnier">
<meta name="robots" content="index, follow">

<meta property="og:title" content="Estagel Nouveau Souffle - Élections municipales 2026">
<meta property="og:description" content="Programme municipal complet pour Estagel : démocratie, écologie, cadre de vie, solidarité, culture, sécurité et commerce local.">
<meta property="og:image" content="https://estagelnouveausouffle.fr/assets/images/fbShare.jpg">
<meta property="og:url" content="https://estagelnouveausouffle.fr">
<meta property="og:image:secure_url" content="https://estagelnouveausouffle.fr/assets/images/fbShare.jpg">
<meta property="og:type" content="website">
<meta property="og:image:width" content="1167">
<meta property="og:image:height" content="835">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Estagel Nouveau Souffle - Élections municipales 2026">
<meta name="twitter:description" content="Programme municipal complet pour Estagel : démocratie, écologie, cadre de vie, solidarité, culture, sécurité et commerce local.">
<meta name="twitter:image" content="https://estagelnouveausouffle.fr/assets/images/fbShare.jpg">
<link rel="canonical" href="https://wego.ovh/presentation-du-site">


<link rel="icon" type="image/png" href="/assets/images/LogoCouleurENS2.webp">


<style>
/* ==================================================
   1. RESET & BASES (Supprime l'espace blanc en haut)
================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden; /* Empêche le balancement gauche/droite sur mobile */
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, sans-serif;
    background: white;
    color: #111;
    font-size: 1.15rem;
}

/* Titres fluides d'origine */
h1 { font-size: clamp(1.4rem, 5vw, 3rem); }
h2 { font-size: clamp(1.2rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1rem, 3vw, 2rem); }

/* =========================
   CONTENU PRINCIPAL
========================= */
/* =========================
   CONTENU PRINCIPAL (Restauration)
========================= */
main {
    max-width: 1100px;
    margin: 0 auto; /* On garde le 0 en haut pour l'espace blanc */
    padding: 10px 30px;
    /*padding-top :0;*/
    margin-top :0;
    background-color: #FaFdfe;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

main ul {
    list-style-type: none; 
    padding-left: 0;       
    margin-left: 0;        
}

/* Images d'origine */
main img {
    max-width: 100%;
    height: auto;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
    border-radius: 8px; 
    transition: transform 0.3s, box-shadow 0.3s;
}

main pre:first-child {
display: none;
}

/* Règle pour tous les titres du contenu */
main h1, main h2, main h3, main h4 {
    display: block;
    /* Marges standard du navigateur pour aérer le texte */
    margin-top: 1.33em;
    /*margin-bottom: 0.67em;*/
    margin-bottom: 1.2em;
    font-weight: bold;
    line-height: 1.2;
}

/* Cas particulier : si un titre est le tout premier élément du main,
   on réduit sa marge haute pour éviter un décalage inutile */
main h1:first-child, 
main h2:first-child {
    margin-top: 0.5em;
}

/* Espacement standard pour les paragraphes (pour être sûr) */
main p {
    margin-top: 0;
    margin-bottom: 1em; /* C'est la fameuse ligne blanche entre paragraphes */
}


/* Vos Alert Boxes d'origine */
.alert {
    box-sizing: border-box;
    margin: 20px 0;
    padding: 15px 20px;
    border-left-width: 6px;
    border-left-style: solid;
    border-radius: 6px;
    font-size: 1em;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


main {
/*	background: green;*/
}

/* ==================================================
   2. HEADER HERO (Image de fond)
================================================== */




.hero {
width: 100%;
line-height: 0;
margin: 0;
padding: 0;
}
.hero {
box-shadow: 0 10px 15px -5px rgba(0,0,0,0.4);
position: relative;
z-index: 10;
}


.hero img {
width: 100%;
height: auto;
display: block;
}



/* ==================================================
   4. INTERFACE (Burgers, Sidebar, Thèmes)
================================================== */
#burger {
    position: fixed;
    top: 12px;
    right: 15px;
    font-size: 26px;
    cursor: pointer;
    z-index: 1001;
    color: white;
    background: rgba(255, 0, 128, 0.8);
    padding: 5px 12px;
    border-radius: 5px;
}

#themeToggle {
    position: fixed;
    bottom: 12px;
    right: 15px;
    cursor: pointer;
    font-size: 22px;
    z-index: 1002;
}


/* ==================================================
   RESTAURATION STRICTE DU STYLE SIDEBAR D'ORIGINE
================================================== */

#sidebar {
  position: fixed;
  top: 0;
  left: -304px;
  width: 304px;
  height: 100%;
  padding: 0.8rem;
  font-family: system-ui, sans-serif;
  overflow-x: hidden;
  padding-top: 2rem;
  transition: left 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  box-sizing: border-box;
  color: white;
  background-image: linear-gradient(135deg, #D65A5A, #C27BA0, #7D6B91);
  box-shadow: 10px 0 20px -5px rgba(0, 0, 0, 0.2);
}

#sidebar .sidebar-logo {
  display: block;
  width: 90%;
  height: auto;
  margin: 0 auto 1rem auto;  
  border: 1px solid white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

#sidebar.open {
  left: 0;
}

#sidebar > h2 {
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  text-align: center;
  color: #FFF8E1;
  margin-bottom: 2rem;
  font-weight: 400;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar a {
  display: block;
  padding: 0.35rem 0.6rem;
  line-height: 1.35;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

#sidebar a,
#sidebar summary {
  color: #ffffff;
  line-height: 0.8;  
}

#sidebar details {
  margin: 0.3rem 0;
}

#sidebar details > summary {
  padding: 0.4rem 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

#sidebar summary::-webkit-details-marker {
  display: none;
}

#sidebar details ul {
  padding-left: 1.0rem;
}

#sidebar a::first-letter,
#sidebar summary::first-letter {
  font-size: 1.4em;
  margin-right: 0.3rem;
}

#sidebar a:hover,
#sidebar summary:hover {
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
}

#sidebar details {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
}




/* ==================================================
   5. FOOTER & ALERTS
================================================= */
#pageFooter {
background:#c0d0e0;
padding:1rem;
text-align:center;
}

#pageFooter ul, #pageFooter ul ul, #pageFooter ul ul ul {
list-style:none;
line-height: 1.3;
}

#pageFooter a {
color: navy;
text-decoration:none;
font-size:1.2rem;
}

#pageFooter a:hover {
text-decoration:underline;
}

#pageFooter ul {
list-style:none;
font-size:1.2rem;
color: black;
}


#pageFooter .icon-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
text-align: center;
}

#pageFooter .icon-block {
display: flex;
flex-direction: column;
align-items: center;
}

#pageFooter .icon {
font-size: 2rem;
text-decoration: none;
cursor: pointer;
}

#pageFooter .icon.red {
color: red;
}

#pageFooter .icon.black {
color: black;
}

#pageFooter .icon-text {
font-size: 1.2rem;
margin-top: 0.3rem;
}

.alert {
    margin: 20px 0;
    padding: 15px;
    border-left: 6px solid;
    border-radius: 6px;
    display: flex;
    gap: 10px;
}
.alert-info { background: #e7f3fe; border-left-color: #2196f3; color: #0b3d91; }
.alert-success { background: #e6f4ea; border-left-color: #4caf50; color: #2e6b2e; }

/* Thèmes dynamiques */
.theme1 { background:#f0f5f5; color:#2e5d7d; }
.theme2 { background:#f5f0f5; color:#7d2e5d; }
.theme3 { background:#f5f5f0; color:#5d7d2e; }
.theme4 { background:#eef5f5; color:#2e7d7d; }
.theme5 { background:#f5f2ee; color:#7d5d2e; }

.no-wrap {
    white-space: nowrap;        /* Empêche tout retour à la ligne automatique */
    overflow-wrap: normal;      /* Ne force pas le découpage de mots */
    word-break: normal;         /* Conserve les mots intacts */
    overflow-x: auto;           /* Permet le scroll horizontal si le texte dépasse */
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.centered {
  text-align: center;
}

.colonnes2 {
  column-count: 2;
  column-gap: 40px;
  column-fill: balance;
 /* text-align: justify;*/
  text-align: center;
}

.image-centree {
    display: block;      /* nécessaire pour centrer avec margin auto */
    width: 96vw;         /* 90% de la largeur de l’écran */
    max-width: 96vw;     /* sécurité */
    height: auto;        /* conserve les proportions */
    margin: 0 auto;      /* centrage horizontal */
    box-shadow: none;
filter: none;
border: none;
}

</style>




</head>

<body>


<header class="hero">
<img src="/assets/images/header.webp" alt="Estagel Nouveau Souffle" width="100%" height="auto" fetchpriority="high">

</header>

<div id="burger" onclick="toggleMenu()">☰</div>




<div id="sidebar">
<img src="/assets/images/LogoCouleurENS2.webp" alt="Logo" class="sidebar-logo">
<h2>Estagel ancien Souffle</h2>
<ul>
  <li><a href="/accueil">🏠 <span>Accueil</span></a></li>
  <li><a href="/sommaire">📋 <span>Sommaire</span></a></li>
  <li><a href="/actualites">📄 <span>Actualites</span></a></li>
  <li><a href="/adresses-utiles">⚙️ <span>Adresses utiles</span></a></li>
  <li><a href="/associations">📝 <span>Associations</span></a></li>
  <li><a href="/calendrier-electoral">🖼️ <span>Calendrier electoral</span></a></li>
  <li><a href="/candidat">📜 <span>Candidat</span></a></li>
  <li><a href="/commentaires">📄 <span>Commentaires</span></a></li>
  <li><a href="/contact">📄 <span>Contact</span></a></li>
  <li><a href="/equipe">🖼️ <span>Equipe</span></a></li>
  <li><a href="/liste">📘 <span>Liste</span></a></li>
  <li><a href="/mentions-legales">📝 <span>Mentions legales</span></a></li>
  <li><a href="/participer">📄 <span>Participer</span></a></li>
  <li><a href="/presentation-du-site">📝 <span>Presentation du site</span></a></li>
  <li><a href="/programme">🖼️ <span>Programme</span></a></li>
  <li><a href="/questions-reponses">📖 <span>Questions reponses</span></a></li>
  <li><a href="/synchronisation">🖼️ <span>Synchronisation</span></a></li>
  <li>
<details>
<summary>📁 <span>Documents</span></summary>
<ul>
  <li><a href="/Documents/charte-graphique">📜 <span>Charte graphique</span></a></li>
  <li><a href="/Documents/compta-estagel-2525">📝 <span>Compta estagel 2525</span></a></li>
</ul>
</details>
</li>
  <li>
<details>
<summary>📁 <span>Programme</span></summary>
<ul>
  <li><a href="/Programme/programme">📘 <span>Programme</span></a></li>
  <li><a href="/Programme/programme-axe1">📝 <span>Programme axe1</span></a></li>
  <li><a href="/Programme/programme-axe4">📘 <span>Programme axe4</span></a></li>
  <li><a href="/Programme/programme-axe5">📜 <span>Programme axe5</span></a></li>
</ul>
</details>
</li>
</ul>

</div>

<div id="themeToggle" onclick="toggleTheme()">🌙</div>




<main>
<!-- Contenu principal de la page -->
<pre id="metadata">
title = "Présentation du site"
page = "presentation-du-site"
description = "Liens, contacts et informations pratiques pour Estagel"
</pre>
<style>
h2.section {
background:#E9EDF7;
border:1px solid #B8C0D8;
border-radius:8px;
padding:10px 16px;
margin-top:2.4em;
margin-bottom:1.2em;
font-weight:600;
}

h2.section.blue {
background:#E6ECFA;
}

h2.section.green {
background:#E8F3EA;
}

h2.section.sand {
background:#F4EFE6;
}

h2.section.violet {
background:#EFEAF6;
}

h2.section.red {
background:#F6EAEA;
}

h2.section.gray {
background:#EEEEEE;
}

h3.subsection {
font-weight:600;
margin-top:1.6em;
margin-bottom:0.6em;
}
</style>
<h2>🏛️ L’importance d’un site internet moderne pour une municipalité comme Estagel</h2>
<h3 class="section blue">📰 Un outil central de communication publique</h3>
<p>Pour une commune comme <strong>Estagel</strong>, le site internet municipal constitue aujourd’hui un <strong>outil central de communication publique</strong>.<br >
Il est bien plus qu’une vitrine institutionnelle : il représente le principal point d’accès à l’information pour les habitants, les associations, les acteurs locaux et les visiteurs.</p>
<p>Un site clair, lisible et régulièrement mis à jour permet notamment :</p>
<ul>
<li>🔍 d’assurer une <strong>information transparente et accessible</strong>  </li>
<li>🤝 de renforcer la <strong>confiance entre la municipalité et les citoyens</strong>  </li>
<li>🏘️ de maintenir un <strong>lien continu avec la vie communale</strong></li>
</ul>
<hr >
<h2 class="section green">📱 Un site adapté à toutes les tailles d’écran</h2>
<p>Un site municipal moderne doit être conçu pour s’adapter naturellement à <strong>l’ensemble des supports numériques</strong> utilisés aujourd’hui.</p>
<p>Il doit offrir une expérience de lecture confortable sur :</p>
<ul>
<li>📱 les smartphones, désormais majoritaires  </li>
<li>📲 les tablettes  </li>
<li>💻 les ordinateurs portables et fixes  </li>
<li>📺 les écrans de grande taille et télévisions connectées  </li>
</ul>
<p>Cette adaptation n’est pas un choix esthétique, mais une <strong>exigence d’égalité d’accès à l’information publique</strong>.</p>
<hr >
<h2 class="section sand">🔄 Portrait et paysage : une continuité de lecture</h2>
<p>Les citoyens consultent le site municipal dans des situations très diverses, parfois en déplacement, parfois à domicile, sur des écrans orientés différemment.</p>
<p>Le site doit donc garantir :</p>
<ul>
<li>🔄 une lecture fluide en mode portrait  </li>
<li>🔁 une lisibilité équivalente en mode paysage  </li>
</ul>
<p>Sans zoom excessif, sans défilement horizontal, et sans perte de confort visuel.<br >
La continuité de lecture est une condition essentielle de l’accessibilité.</p>
<hr >
<h2 class="section violet">👁️‍🗨️ Lisibilité et accessibilité : un enjeu démocratique</h2>
<p>L’information municipale s’adresse à <strong>tous les citoyens</strong>, sans distinction d’âge, de compétences numériques ou d’équipement.</p>
<p>Cela suppose :</p>
<ul>
<li>🔤 une typographie suffisamment lisible  </li>
<li>🎨 des contrastes mesurés et cohérents  </li>
<li>🧭 une hiérarchie claire des titres et des contenus  </li>
<li>🗂️ une navigation simple et logique  </li>
</ul>
<p>Une information difficile à lire devient rapidement une information ignorée.</p>
<hr >
<h2 class="section blue">📊 Les usages numériques aujourd’hui</h2>
<p>Les données de consultation des sites institutionnels locaux montrent une évolution nette des usages :</p>
<ul>
<li>📱 environ <strong>70 %</strong> des consultations se font sur smartphone  </li>
<li>💻 <strong>15 à 20 %</strong> sur ordinateur  </li>
<li>📺 <strong>5 à 10 %</strong> sur tablette  </li>
<li>📺 une part encore limitée mais en progression sur écrans connectés  </li>
</ul>
<p>Ces chiffres confirment la nécessité de concevoir un site <strong>pensé d’abord pour le mobile</strong>, tout en conservant un excellent confort de lecture sur les écrans plus larges.</p>
<hr >
<h2 class="section red">🔄 La mise à jour, condition de crédibilité</h2>
<p>Un site municipal qui n’est pas régulièrement mis à jour perd rapidement sa crédibilité et son utilité.</p>
<p>Une mise à jour rigoureuse permet :</p>
<ul>
<li>📰 de diffuser des informations fiables et actuelles  </li>
<li>🎉 de valoriser la vie locale et les événements communaux  </li>
<li>📄 de publier les décisions et documents officiels  </li>
<li>🚫 d’éviter la circulation d’informations obsolètes  </li>
</ul>
<p>Un site vivant reflète une municipalité active, attentive et responsable.</p>
<hr >
<h2 class="section gray">🎨 Une attractivité visuelle sobre et maîtrisée</h2>
<p>L’attractivité d’un site municipal repose avant tout sur la <strong>sobriété et la cohérence</strong>.</p>
<p>Il ne s’agit pas de multiplier les effets visuels, mais de proposer :</p>
<ul>
<li>🎨 une palette de couleurs mesurée  </li>
<li>📐 une mise en page aérée  </li>
<li>📖 un confort de lecture durable  </li>
</ul>
<p>Cette sobriété favorise une lecture attentive et respectueuse du contenu.</p>
<hr >
<h2 class="section blue">🧭 Simplicité et convivialité</h2>
<p>Un site municipal doit permettre à chacun de trouver rapidement l’information recherchée, sans effort inutile.</p>
<p>Une structure claire, des menus compréhensibles et une navigation cohérente contribuent à une <strong>expérience fluide et rassurante</strong> pour le lecteur.</p>
<hr >
<h2 class="section sand">⏳ En finir avec les sites internet figés</h2>
<p>Les sites conçus uniquement pour les écrans d’ordinateur, à la présentation rigide et statique, ne correspondent plus aux usages actuels.</p>
<p>Ils participent à une forme d’exclusion numérique et nuisent à l’accès à l’information publique.<br >
Un site moderne, adaptatif et lisible traduit au contraire une <strong>volonté d’ouverture et de modernité</strong>.</p>
<hr >
<h2 class="section green">🔍 Transparence municipale : une orientation assumée</h2>
<p>Le site internet municipal doit être le reflet direct d’une <strong>politique de transparence clairement assumée</strong>.</p>
<p>Cela implique :</p>
<ul>
<li>📂 des informations facilement accessibles  </li>
<li>🗓️ des contenus datés et contextualisés  </li>
<li>📊 des décisions expliquées et compréhensibles  </li>
<li>💬 des espaces de dialogue ouverts  </li>
</ul>
<p>Cette démarche marque une rupture nette avec l’opacité du site actuel.</p>
<hr >
<h2 class="section gray">📝 Une charte éditoriale pour garantir clarté et cohérence</h2>
<p>La mise en place d’une <strong>charte éditoriale du site communal</strong> permet de définir clairement la manière dont l’information est rédigée, présentée et mise à jour.<br >
Elle fixe un cadre commun afin que chaque contenu publié respecte les mêmes principes de <strong>clarté, de lisibilité et de neutralité</strong>, quels que soient le sujet ou le rédacteur.</p>
<p>Cette charte contribue notamment :</p>
<ul>
<li>🧭 à garantir un <strong>ton cohérent et respectueux</strong>, accessible à tous les publics  </li>
<li>📖 à privilégier une écriture claire, explicative et compréhensible  </li>
<li>🗂️ à structurer l’information de façon logique et lisible  </li>
<li>🔍 à renforcer la <strong>transparence</strong> en évitant les formulations floues ou ambiguës  </li>
</ul>
<p>En s’appuyant sur une charte éditoriale, la municipalité affirme une volonté de communication <strong>responsable, honnête et durable</strong>, au service de l’information citoyenne et du débat public.</p>
<hr >
<h2 class="section violet">🗣️ Participation citoyenne</h2>
<h3 class="subsection">Questions – réponses</h3>
<p>Un espace dédié permet de répondre clairement aux interrogations les plus fréquentes et de faciliter les démarches des habitants.</p>
<h3 class="subsection">Commentaires des lecteurs</h3>
<p>Un espace d’expression encadré favorise l’écoute, le dialogue et la participation citoyenne, dans un cadre respectueux.</p>
<hr >
<h2 class="section green">🛡️ Indépendance et gratuité du site</h2>
<p>Le site internet municipal est <strong>entièrement indépendant</strong> :  </p>
<ul>
<li>🏗️ conçu et développé localement  </li>
<li>🇫🇷 hébergé en France  </li>
<li>🚫 sans aucune publicité  </li>
<li>📡 ne dépend d’aucun réseau social commercial  </li>
</ul>
<p>Il ne s’agit <strong>pas d’un Facebook, Instagram ou TikTok</strong> dont les propriétaires sont des multinationales milliardaires, dont l’intérêt est purement mercantile et basé sur l’exploitation de tous les utilisateurs.<br >
Le site municipal est au contraire le reflet d’une politique <strong>locale, transparente et au service des citoyens</strong>, loin de l’impérialisme numérique et commercial.</p>
<hr >
<h2 class="section blue">🌱 Conclusion</h2>
<p>Un site internet municipal moderne n’est pas un simple outil technique.<br >
Il constitue un <strong>véritable espace public numérique</strong>, au service de l’information, de la transparence et de la démocratie locale.</p>
<p>Pour une commune comme <strong>Estagel</strong>, il représente un levier essentiel de confiance, de lisibilité et de participation citoyenne.</p>
</main>






<!-- Footer avec copyright et icône changement de thème -->

<footer id="pageFooter" style="">
    <div class="icon-row">
        <!-- Flèche retour -->
        <div class="icon-block">
<a href="#" id="backButton" class="icon red">⬅️</a>  
            <div class="icon-text">Retour</div>
        </div>
        <!-- Page d'accueil -->
        <div class="icon-block">
            <a href="/" class="icon black">🏠</a>
            <div class="icon-text">Accueil</div>
        </div>
        <!-- Changement de thème -->
        <div class="icon-block">
            <span id="themeIcon" class="icon">🎨</span>
            <div class="icon-text">Thèmes</div>
        </div>
    </div>

<!-- Ligne 2 et 3 : espacement -->
<div style="height:2rem;"></div>

<div class="colonnes2">
  <p>
    <ul>
  <li><a href="/accueil">🏠 <span>Accueil</span></a></li>
  <li><a href="/sommaire">📋 <span>Sommaire</span></a></li>
  <li><a href="/actualites">📄 <span>Actualites</span></a></li>
  <li><a href="/adresses-utiles">⚙️ <span>Adresses utiles</span></a></li>
  <li><a href="/associations">📝 <span>Associations</span></a></li>
  <li><a href="/calendrier-electoral">🖼️ <span>Calendrier electoral</span></a></li>
  <li><a href="/candidat">📜 <span>Candidat</span></a></li>
  <li><a href="/commentaires">📄 <span>Commentaires</span></a></li>
  <li><a href="/contact">📄 <span>Contact</span></a></li>
  <li><a href="/equipe">🖼️ <span>Equipe</span></a></li>
  <li><a href="/liste">📘 <span>Liste</span></a></li>
  <li><a href="/mentions-legales">📝 <span>Mentions legales</span></a></li>
  <li><a href="/participer">📄 <span>Participer</span></a></li>
  <li><a href="/presentation-du-site">📝 <span>Presentation du site</span></a></li>
  <li><a href="/programme">🖼️ <span>Programme</span></a></li>
  <li><a href="/questions-reponses">📖 <span>Questions reponses</span></a></li>
  <li><a href="/synchronisation">🖼️ <span>Synchronisation</span></a></li>
  <li>
<details>
<summary>📁 <span>Documents</span></summary>
<ul>
  <li><a href="/Documents/charte-graphique">📜 <span>Charte graphique</span></a></li>
  <li><a href="/Documents/compta-estagel-2525">📝 <span>Compta estagel 2525</span></a></li>
</ul>
</details>
</li>
  <li>
<details>
<summary>📁 <span>Programme</span></summary>
<ul>
  <li><a href="/Programme/programme">📘 <span>Programme</span></a></li>
  <li><a href="/Programme/programme-axe1">📝 <span>Programme axe1</span></a></li>
  <li><a href="/Programme/programme-axe4">📘 <span>Programme axe4</span></a></li>
  <li><a href="/Programme/programme-axe5">📜 <span>Programme axe5</span></a></li>
</ul>
</details>
</li>
</ul>

  </p>
</div>

<div style="height:2rem;"></div>

<a href="https://www.facebook.com/sharer/sharer.php?u=https://estagelnouveausouffle.fr/presentation-du-site?update=1"
   target="_blank" rel="noopener noreferrer"
   style="display:inline-flex;
          align-items:center;
          gap:8px;
          padding:10px 15px;
          
          color:black;
          text-decoration:none;
          border-radius:5px;
          font-weight:bold;">
   <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png" 
        alt="Facebook" width="36" height="36">
   Partager sur Facebook
</a>

<div style="height:1rem;"></div>

<img src="../assets/images/5logos.webp" alt="5logos" class="image-centree">



<!--
-->
	
<div style="height:1rem;"></div>

    <!-- Ligne 4 : copyright centré -->
    <div style="text-align:center; font-size:0.9rem; color:#555;">
        &copy; 2026 Estagel Nouveau Souffle
    </div>
  <div style="height:2rem;"></div>
</footer>






<script>

// ===== Éléments =====
var backBtn = document.getElementById('backButton');
var themeIcon = document.getElementById('themeIcon');
var themes = ['theme1', 'theme2', 'theme3', 'theme4', 'theme5'];

// ===== Gestion des thèmes =====
function loadTheme() {
    var currentTheme = parseInt(localStorage.getItem('themeIndex')) || 0;
    document.body.classList.add(themes[currentTheme]);
}

function changeTheme() {
    var currentTheme = parseInt(localStorage.getItem('themeIndex')) || 0;
    document.body.classList.remove(...themes); // Syntaxe moderne pour retirer toutes les classes
    currentTheme = (currentTheme + 1) % themes.length;
    document.body.classList.add(themes[currentTheme]);
    localStorage.setItem('themeIndex', currentTheme);
}

function setupTheme() {
    if (themeIcon) {
        themeIcon.addEventListener('click', function(e) {
            e.stopPropagation();
            changeTheme();
        });
    }
}

// ===== Bouton retour =====
function setupBackButton() {
    if (backBtn) {
        backBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // Ferme le menu si ouvert avant de reculer
            var sidebar = document.getElementById('sidebar');
            if (sidebar && sidebar.classList.contains('open')) {
                sidebar.classList.remove('open');
            }
            // Retour page précédente avec un léger délai pour l'animation
            setTimeout(function() {
                if (window.history.length > 1) {
                    window.history.back();
                } else {
                    window.location.href = '/'; // Repli vers l'accueil si pas d'historique
                }
            }, 100);
        });
    }
}

// ===== Menu hamburger =====
function toggleMenu() {
    var sidebar = document.getElementById('sidebar');
    if (sidebar) {
        sidebar.classList.toggle('open');
    }
}

// ===== Fermeture du panneau latéral si clic en dehors =====
document.addEventListener('click', function(e) {
    var sidebar = document.getElementById('sidebar');
    var burger = document.getElementById('burger');
    if (sidebar && sidebar.classList.contains('open')) {
        if (e.target !== burger && !sidebar.contains(e.target)) {
            sidebar.classList.remove('open');
        }
    }
});



// ===== Disqus =====
   var disqus_config = function () {
    this.page.url = window.location.href;  // Replace PAGE_URL with your page's canonical URL variable
    this.page.identifier = "page-presentation-du-site";; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    
    (function() { // DON'T EDIT BELOW THIS LINE
    var d = document, s = d.createElement('script');
    s.src = 'https://estagel-nouveau-souffle.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();








// ===== Initialisation sécurisée =====
function init() {
    loadTheme();
    setupTheme();
    setupBackButton();
    // Les fonctions inexistantes ont été retirées pour éviter les erreurs
}

// Lancement au chargement du DOM
document.addEventListener('DOMContentLoaded', init);

</script>

<noscript>Veuillez activer JavaScript pour voir les commentaires.</noscript>




</body>
</html>


Variables globales :
$homeIcon = 🏠
$folderIcon = 📁
$site_name = Estagel  ancien Souffle ....
$default_page = accueil
$pages_dir = pages/
$siteName = Estagel ancien Souffle
$subSite = Élections municipales 2026
$title = Présentation du site
$SITE_URL = https://estagelnouveausouffle.fr
$DISQUS_SHORTNAME = estagel-nouveau-souffle
$copyright = 2026 Estagel Nouveau Souffle
$mentions-legales = Mentions légales
$date = 2020-12-25
$license = default
$hero = 
$hero_image = hero.jpg
$headerImage = /assets/images/header.webp
$comments = 
$disqus = 
$view_source = 1
$view_metadata = 1
$edition = 
$page = presentation-du-site
$description = Estagel Nouveau Souffle : Programme complet pour les élections municipales 2026. Instaurer une vraie démocratie locale, soutenir l’agriculture et la planification écologique, améliorer l’aménagement urbain et le cadre de vie, renforcer la solidarité et l’action sociale, défendre les services publics et la paix, encourager la culture, le sport et la vie associative, sécuriser le village et dynamiser les commerces.

Sections / tableaux :
$pages = Array
(
    [accueil] => Accueil
    [actualites] => Actualités
    [candidat] => Le candidat
    [equipe] => L’équipe
    [programme] => Programme
    [participer] => Participer
    [contact] => Contact
)

$metadata = Array
(
    [lang] => fr
    [title] => Estagel Nouveau Souffle - Élections municipales 2026
    [description] => Estagel Nouveau Souffle : Programme complet pour les élections municipales 2026. Instaurer une vraie démocratie locale, soutenir l’agriculture et la planification écologique, améliorer l’aménagement urbain et le cadre de vie, renforcer la solidarité et l’action sociale, défendre les services publics et la paix, encourager la culture, le sport et la vie associative, sécuriser le village et dynamiser les commerces.
    [keywords] => Estagel, élections municipales 2026, démocratie locale, référendum d’initiative citoyenne, transparence, communication publique, bulletin municipal, site internet, agriculture bio, AMAP, agriculture paysanne, récupération eaux usées, transports publics, gare multimodale, gestion écologique de l’eau, urbanisme, logements vacants, cadre de vie, rénovation mairie, promenade, végétation, jardins, toilettes publiques, solidarité, logement social, CCAS, services publics, paix, jumelage, culture, associations, sport, jeunesse, sécurité, prévention, citoyenneté, commerces, centre du village, taxe foncière, marché local, chèque solidarité
    [author] => Michel Garnier
    [viewport] => width=device-width, initial-scale=1.0
    [robots] => index, follow
)

$opengraph = Array
(
    [og:title] => Estagel Nouveau Souffle - Élections municipales 2026
    [og:description] => Programme municipal complet pour Estagel : démocratie, écologie, cadre de vie, solidarité, culture, sécurité et commerce local.
    [og:image] => https://estagelnouveausouffle.fr/assets/images/fbShare.jpg
    [og:url] => https://estagelnouveausouffle.fr
    [og:image:secure_url] => https://estagelnouveausouffle.fr/assets/images/fbShare.jpg
    [og:type] => website
    [og:image:width] => 1167
    [og:image:height] => 835
)

$twitter = Array
(
    [twitter:card] => summary_large_image
    [twitter:title] => Estagel Nouveau Souffle - Élections municipales 2026
    [twitter:description] => Programme municipal complet pour Estagel : démocratie, écologie, cadre de vie, solidarité, culture, sécurité et commerce local.
    [twitter:image] => https://estagelnouveausouffle.fr/assets/images/fbShare.jpg
)



Array
(
    [title] => Présentation du site
    [page] => presentation-du-site
    [description] => Liens, contacts et informations pratiques pour Estagel
)