{"id":14,"date":"2026-06-28T15:07:40","date_gmt":"2026-06-28T15:07:40","guid":{"rendered":"https:\/\/florentcurk.com\/site\/?page_id=14"},"modified":"2026-06-29T17:54:27","modified_gmt":"2026-06-29T17:54:27","slug":"brouillon-auto","status":"publish","type":"page","link":"https:\/\/florentcurk.com\/site\/","title":{"rendered":""},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\n:root {\n    --forest-green: #2d5a3e;\n    --turquoise-ocean: #40c9a3;\n    --brown-tree: #8b6f47;\n    --light-green: #e8f5e9;\n    --dark-bg: #1b3a24;\n    --white: #ffffff;\n}\n\nbody {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    background-color: var(--light-green);\n    color: var(--forest-green);\n    line-height: 1.8;\n}\n\n\/* NAVIGATION *\/\nnav {\n    background: linear-gradient(135deg, var(--dark-bg), var(--forest-green));\n    padding: 1rem 2rem; position: sticky; top: 0; z-index: 100;\n    box-shadow: 0 4px 20px rgba(0,0,0,0.3);\n}\n\nnav ul { list-style: none; display: flex; justify-content: center; gap: 2rem; }\n\nnav a { color: var(--white); text-decoration: none; font-size: 1.05rem; padding: 0.5rem 1.2rem; border-radius: 30px; transition: all 0.3s ease; }\nnav a:hover { background: var(--turquoise-ocean); transform: translateY(-2px); }\n\n\/* HERO *\/\n.hero {\n    min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;\n    background: linear-gradient(135deg, var(--dark-bg) 0%, var(--forest-green) 40%, var(--turquoise-ocean) 70%, var(--light-green) 100%); padding: 2rem; position: relative; overflow: hidden;\n}\n\n.hero::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(64,201,163,0.3), transparent); top: -200px; right: -200px; }\n.hero::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(139,111,71,0.2), transparent); bottom: -150px; left: -150px; }\n\n.hero-content { position: relative; z-index: 1; max-width: 800px; }\n.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--white); text-shadow: 3px 3px 6px rgba(0,0,0,0.3); margin-bottom: 1.5rem; }\n.hero h1 span { display: block; font-size: clamp(2rem, 4vw, 3.5rem); background: linear-gradient(to right, var(--turquoise-ocean), var(--white)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }\n.hero p { font-size: clamp(1rem, 2.5vw, 1.3rem); color: var(--turquoise-ocean); max-width: 600px; margin: 0 auto 2rem; }\n\n.btn-cta { display: inline-block; padding: 1rem 2.5rem; background: linear-gradient(45deg, var(--forest-green), var(--turquoise-ocean)); color: var(--white); text-decoration: none; border-radius: 50px; font-size: 1.1rem; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(45,90,62,0.4); }\n.btn-cta:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 35px rgba(45,90,62,0.6); }\n\n\/* SECTIONS *\/\nsection { padding: 5rem 2rem; }\n.section-header { text-align: center; margin-bottom: 3rem; }\n.section-header h2 { font-size: clamp(2rem, 4vw, 3.2rem); color: var(--forest-green); position: relative; display: inline-block; padding-bottom: 0.5rem; }\n.section-header h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: linear-gradient(to right, var(--turquoise-ocean), var(--forest-green)); border-radius: 2px; }\n\n\/* CARDS *\/\n.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }\n.card { background: var(--white); border-radius: 30px; padding: 2.5rem; box-shadow: 0 8px 30px rgba(45,90,62,0.1); transition: all 0.4s ease; position: relative; overflow: hidden; }\n.card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(64,201,163,0.1), transparent); }\n.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 40px rgba(45,90,62,0.2); }\n.card-icon { font-size: 3rem; margin-bottom: 1rem; }\n.card h3 { color: var(--forest-green); font-size: 1.4rem; margin-bottom: 1rem; }\n.card p { color: #555; font-size: 0.95rem; }\n\n\/* FUTURE *\/\n.life-cycle { max-width: 900px; margin: 0 auto; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 2rem; padding: 3rem 1rem; }\n.life-stage { text-align: center; background: var(--white); border-radius: 50%; width: 180px; height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 25px rgba(45,90,62,0.1); transition: all 0.3s ease; }\n.life-stage:hover { transform: scale(1.1) rotate(5deg); }\n.life-stage-icon { font-size: 3rem; margin-bottom: 0.5rem; }\n.life-stage h4 { color: var(--forest-green); font-size: 0.95rem; }\n\n\/* CONTACT *\/\n#contact { background: linear-gradient(135deg, var(--dark-bg), var(--forest-green)); padding: 6rem 2rem; }\n.contact-container { max-width: 700px; margin: 0 auto; text-align: center; }\n#contact h2 { color: var(--white); font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 1.5rem; }\n.contact-intro { color: rgba(255,255,255,0.85); font-size: 1.1rem; line-height: 1.9; margin-bottom: 3rem; }\n\n.contact-form { background: var(--white); border-radius: 30px; padding: 2.5rem; box-shadow: 0 10px 40px rgba(0,0,0,0.3); }\n.form-group { margin-bottom: 1.8rem; text-align: left; }\n.form-group label { display: block; color: var(--forest-green); font-weight: bold; margin-bottom: 0.5rem; font-size: 0.95rem; }\n.form-group input { width: 100%; padding: 0.8rem 1.2rem; border: 2px solid var(--light-green); border-radius: 15px; font-size: 1rem; transition: all 0.3s ease; background: #f9fdfb; }\n.form-group input:focus { outline: none; border-color: var(--turquoise-ocean); box-shadow: 0 0 0 4px rgba(64,201,163,0.2); }\n\n.btn-send { width: 100%; padding: 1rem; background: linear-gradient(45deg, var(--forest-green), var(--turquoise-ocean)); color: var(--white); border: none; border-radius: 15px; font-size: 1.05rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; }\n.btn-send:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(45,90,62,0.4); }\n\n#send-message { display: none; margin-top: 1rem; padding: 1rem; background: linear-gradient(45deg, var(--turquoise-ocean), var(--forest-green)); color: var(--white); border-radius: 15px; font-weight: bold; }\n\n\/* FOOTER *\/\nfooter { background: var(--dark-bg); padding: 3rem 2rem 1.5rem; text-align: center; }\n.footer-content { max-width: 1000px; margin: 0 auto; }\n.legal-links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }\n.legal-link { color: var(--turquoise-ocean); text-decoration: none; padding: 0.6rem 1.3rem; border-radius: 25px; transition: all 0.3s ease; font-size: 0.9rem; }\n.legal-link:hover { background: rgba(64,201,163,0.1); transform: translateY(-2px); }\n\n.footer-signature { color: var(--brown-tree); font-style: italic; font-size: 1rem; margin-top: 1.5rem; }\n\n\/* ANIMATIONS *\/\n@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(3deg); } 75% { transform: translateY(8px) rotate(-3deg); } }\n.floating { animation: float 6s ease-in-out infinite; }\n\n\/* RESPONSIVE *\/\n@media (max-width: 768px) { nav ul { gap: 0.5rem; flex-wrap: wrap; } nav a { font-size: 0.9rem; padding: 0.4rem 0.8rem; } .life-cycle { flex-direction: column; align-items: center; } }\n\n\/* INFINITY SVG *\/\n.infinity-node { position: absolute; width: 100px; height: 100px; opacity: 0.15; z-index: 0; }\n\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n    a.addEventListener(\"click\", e => {\n        e.preventDefault();\n        const target = document.querySelector(a.getAttribute(\"href\"));\n        if (target) target.scrollIntoView({ behavior: \"smooth\" });\n    });\n});\n\nfunction sendMessage(e) {\n    e.preventDefault();\n    const form = document.getElementById('contactForm');\n    const msgDiv = document.getElementById('send-message');\n    form.style.display = 'none';\n    msgDiv.style.display = 'block';\n}\n\n<\/script>\n\n<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Mairie Verte &#8211; Ville Durable<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n<!-- NAVIGATION -->\n<nav>\n    <ul>\n        <li><a href=\"#accueil\">Accueil<\/a><\/li>\n        <li><a href=\"#project\">Projet<\/a><\/li>\n        <li><a href=\"#future\">Avenir<\/a><\/li>\n        <li><a href=\"#contact\">Contact<\/a><\/li>\n    <\/ul>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\" id=\"accueil\">\n    <div class=\"infinity-node\" style=\"top: 10%; left: 5%;\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"><path d=\"M6.5,12c0-3.9 3.1-7 7-7s7 3.1 7 7\"\/><\/svg>\n    <\/div>\n    <div class=\"infinity-node\" style=\"bottom: -5%; right: -10%;\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"><path d=\"M6.5,12c0-3.9 3.1-7 7-7s7 3.1 7 7\"\/><\/svg>\n    <\/div>\n    <div class=\"hero-content\">\n        <h1><span>Mairie Verte<\/span>Ville Durable &#038; Futur<\/h1>\n        <p>D\u00e9couvrez comment notre politique verte transforme votre quotidien \u2014 de la r\u00e9novation urbaine \u00e0 l&rsquo;action sociale, en passant par des \u00e9v\u00e9nements qui unissent la communaut\u00e9.<\/p>\n        <a href=\"#project\" class=\"btn-cta floating\">En savoir plus \u2192<\/a>\n    <\/div>\n<\/section>\n\n<!-- PROJECT -->\n<section id=\"project\">\n    <div class=\"section-header\">\n        <h2>Nos Projets &#038; Actions<\/h2>\n    <\/div>\n    <div class=\"cards-grid\">\n        <div class=\"card\">\n            <div class=\"card-icon floating\">\ud83c\udfd7\ufe0f<\/div>\n            <h3>R\u00e9novation Urbaine<\/h3>\n            <p>Nous transformons les quartiers vieillissants en espaces verts et durables. Des toits v\u00e9g\u00e9talis\u00e9s, des parcs communautaires et des rues pi\u00e9tonnes am\u00e9liorent directement votre cadre de vie.<\/p>\n        <\/div>\n        <div class=\"card\">\n            <div class=\"card-icon floating\">\ud83c\udf89<\/div>\n            <h3>\u00c9v\u00e9nements Communautaires<\/h3>\n            <p>F\u00eates de quartier, march\u00e9s bio, ateliers cr\u00e9atifs et concerts en plein air. Chaque \u00e9v\u00e9nement rassemble les g\u00e9n\u00e9rations autour d&rsquo;un projet commun pour une ville plus vivante.<\/p>\n        <\/div>\n        <div class=\"card\">\n            <div class=\"card-icon floating\">\ud83e\udd1d<\/div>\n            <h3>Politique Sociale<\/h3>\n            <p>Droit au logement, aides \u00e0 la petite enfance, programmes d&rsquo;insertion professionnelle. Nos actions sociales touchent chaque famille qui habite notre ville.<\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- FUTURE -->\n<section id=\"future\">\n    <div class=\"section-header\">\n        <h2>L&rsquo;Avenir de Votre Ville<\/h2>\n    <\/div>\n    <div style=\"text-align: center; margin-bottom: 3rem;\">\n        <p style=\"font-size: 1.15rem; max-width: 700px; margin: 0 auto; color: #555;\">\n            De la suppression des actions inefficaces au budget allou\u00e9 aux vrais changements, chaque euro est investi pour votre avenir.\n        <\/p>\n    <\/div>\n    <div class=\"life-cycle\">\n        <div class=\"life-stage floating\"><div class=\"life-stage-icon\">\ud83d\udc76<\/div><h4>Enfance<\/h4><\/div>\n        <div class=\"life-stage floating\" style=\"animation-delay: 1s;\"><div class=\"life-stage-icon\">\ud83c\udf92<\/div><h4>\u00c9cole<\/h4><\/div>\n        <div class=\"life-stage floating\" style=\"animation-delay: 2s;\"><div class=\"life-stage-icon\">\ud83d\udcbc<\/div><h4>Travail<\/h4><\/div>\n        <div class=\"life-stage floating\" style=\"animation-delay: 3s;\"><div class=\"life-stage-icon\">\ud83c\udfe0<\/div><h4>Famille<\/h4><\/div>\n        <div class=\"life-stage floating\" style=\"animation-delay: 1.5s;\"><div class=\"life-stage-icon\">\u26bd<\/div><h4>Sport<\/h4><\/div>\n        <div class=\"life-stage floating\" style=\"animation-delay: 2.5s;\"><div class=\"life-stage-icon\">\ud83d\udc74<\/div><h4>S\u00e9nior<\/h4><\/div>\n    <\/div>\n<\/section>\n\n<!-- CONTACT -->\n<section id=\"contact\">\n    <div class=\"contact-container\">\n        <h2>Contactez-nous<\/h2>\n        <p class=\"contact-intro\">Do you feel the need of letting everybody know and understand your action for the good ?<br>Contact me, I&rsquo;ll answer as fast as I can to meet you. (no spamming just real life meeting.)<\/p>\n        <form id=\"contactForm\" class=\"contact-form\" onsubmit=\"sendMessage(event)\">\n            <div class=\"form-group\">\n                <label for=\"name\">Votre nom<\/label>\n                <input type=\"text\" id=\"name\" placeholder=\"Entrez votre nom\" required>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"mail\">Votre email<\/label>\n                <input type=\"email\" id=\"mail\" placeholder=\"votre@email.com\" required>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"phone\">Votrel t\u00e9l\u00e9phone<\/label>\n                <input type=\"tel\" id=\"phone\" placeholder=\"+33 6 XX XX XX XX\" required>\n            <\/div>\n            <button type=\"submit\" class=\"btn-send\">Envoyer le message<\/button>\n        <\/form>\n        <div id=\"send-message\" style=\"display:none;\">\u2713 Nous ferons de notre mieux pour votre communaut\u00e9 !<\/div>\n    <\/div>\n<\/section>\n\n<!-- FOOTER -->\n<footer>\n    <div class=\"footer-content\">\n        <div class=\"legal-links\">\n            <a href=\"#\" class=\"legal-link\">\ud83d\udcc4 R\u00e8gles g\u00e9n\u00e9rales (PDF)<\/a>\n            <a href=\"#\" class=\"legal-link\">\ud83d\udcdd Mon contrat<\/a>\n            <a href=\"#\" class=\"legal-link\">\u00a9 Droit d&rsquo;auteur europ\u00e9en<\/a>\n        <\/div>\n        <p class=\"footer-signature\">by CptCurk for us all !<\/p>\n    <\/div>\n<\/footer>\n\n<script src=\"script.js\"><\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Mairie Verte &#8211; Ville Durable Accueil Projet Avenir Contact Mairie VerteVille Durable &#038; Futur D\u00e9couvrez comment notre politique verte transforme votre quotidien \u2014 de la r\u00e9novation urbaine \u00e0 l&rsquo;action sociale, en passant par des \u00e9v\u00e9nements qui unissent la communaut\u00e9. En savoir plus \u2192 Nos Projets &#038; Actions \ud83c\udfd7\ufe0f R\u00e9novation Urbaine Nous transformons les quartiers vieillissants [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":2,"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/pages\/14\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/florentcurk.com\/site\/wp-json\/wp\/v2\/media?parent=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}