https://mairie-allouis.fr/informations-pratiques.html

1<!doctype html><html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#0e382b"><title>Informations pratiques — Allouis</title><style>
2:root{--g950:#0e382b;--g900:#124938;--g800:#195a46;--g700:#23705a;--paper:#faf9f5;--sun:#f5c34f;--sunsoft:#fff2bf;--ink:#1d2925;--muted:#64716c;--line:#e2e8e4;--soft:0 8px 26px rgba(20,52,42,.08);--shadow:0 18px 52px rgba(20,52,42,.12);--max:1180px}
3*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 90% 0,rgba(245,195,79,.07),transparent 25rem),var(--paper);line-height:1.5}a{color:inherit}button,input,select,textarea{font:inherit}.container{width:min(var(--max),calc(100% - 36px));margin:auto}
4header{background:rgba(255,255,255,.98);border-bottom:1px solid rgba(14,56,43,.07);position:sticky;top:0;z-index:40}.head{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:baseline;gap:11px;text-decoration:none}.brand strong{font-size:2rem;color:var(--g950)}.brand span{font-size:.75rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#738079}.nav{display:flex;gap:23px;font-size:.91rem;font-weight:770}.nav a{text-decoration:none;white-space:nowrap;padding:10px 0;position:relative}.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:99px;background:var(--sun);transform:scaleX(0);transform-origin:left}.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
5.page{padding:44px 0 70px}.page h1{margin:0;color:var(--g950);font-size:clamp(2.7rem,6vw,5rem);line-height:.96;letter-spacing:-.05em}.lead{max-width:870px;margin:15px 0 0;color:var(--muted);font-size:1.06rem}.sections{display:grid;gap:15px;margin-top:24px}.box{padding:22px;border-radius:18px;background:#fff;border:1px solid rgba(14,56,43,.07);box-shadow:var(--soft)}.box h2{margin:0 0 8px;color:var(--g950);font-size:1.25rem}.box p,.box li{color:#5d6964}.box ul{margin:8px 0 0;padding-left:20px}.box a{color:var(--g800);font-weight:800}.btn{min-height:45px;padding:0 16px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-weight:820;cursor:pointer}.btn.primary{background:var(--g800);color:#fff}.btn.light{background:#f2f7f4;border-color:#dce7e1;color:var(--g950)}.btn.sun{background:var(--sunsoft);border-color:#f1d984;color:#5a470d}
6footer{padding:27px 0;background:var(--g950);color:#dce9e4}.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.foot a{color:#fff0b2;text-decoration:none}.footnote{max-width:700px;color:#bcd0c7;font-size:.88rem}.legal-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.legal-links a{white-space:nowrap}
7@media(max-width:700px){.container{width:min(100% - 24px,100%)}.head{min-height:auto;padding:12px 0 10px;flex-direction:column;align-items:flex-start;gap:5px}.brand span{display:none}.brand strong{font-size:1.55rem}.nav{width:100%;justify-content:space-between;gap:9px;overflow-x:auto;font-size:.8rem}.page{padding:32px 0 54px}.foot{display:block}.footnote{margin-top:14px}.legal-links{margin-top:12px}}
8@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
9
10.hero{padding:45px 0 27px}.kicker{margin:0 0 7px;color:var(--g700);font-size:.77rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.hero h1{margin:0;color:var(--g950);font-size:clamp(2.7rem,6vw,5.1rem);line-height:.96;letter-spacing:-.05em}.hero p{max-width:830px;margin:15px 0 0;color:var(--muted);font-size:1.06rem}
11.tools{position:sticky;top:76px;z-index:25;background:rgba(250,249,245,.96);

11backdrop-filter:blur(7px);border-block:1px solid rgba(14,56,43,.07);padding:14px 0}.toolbox{width:min(570px,47vw);min-width:430px}.tool-label{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:6px}.tool-label strong{color:var(--g950);font-size:.88rem}.count{font-size:.8rem;color:var(--muted)}.search{width:100%;min-height:46px;border:1px solid #dce4df;border-radius:14px;padding:0 14px;background:#fff;outline:none}.search:focus{border-color:#91b5a5;box-shadow:0 0 0 4px rgba(35,112,90,.08)}.browse-label{display:block;margin-top:12px;color:var(--g950);font-size:.82rem;font-weight:850}.filter-shell{position:relative;margin-top:7px}.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:1px 24px 3px 0;scroll-behavior:smooth}.filters::-webkit-scrollbar{display:none}.filter{border:1px solid #dfe7e2;background:#fff;border-radius:999px;padding:8px 13px;font-size:.82rem;font-weight:790;white-space:nowrap;cursor:pointer}.filter.active{background:var(--g800);color:#fff;border-color:var(--g800)}.filter-shell::after{content:"›";position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:24px;height:34px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(90deg,rgba(250,249,245,.25),var(--paper));color:var(--g700);font-size:1.35rem;font-weight:900;pointer-events:none}.edge{position:absolute;top:0;bottom:0;width:34px;z-index:2}.edge.left{left:-5px}.edge.right{right:-5px}
12.content{padding:27px 0 68px}.group{margin-top:34px}.group:first-child{margin-top:0}.group h2{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--g950);font-size:1.4rem}.group h2::after{content:"";height:1px;background:var(--line);flex:1}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.card{padding:19px;border-radius:18px;background:#fff;border:1px solid rgba(14,56,43,.07);box-shadow:var(--soft);display:flex;flex-direction:column}.card h3{margin:0 0 12px;color:var(--g950);font-size:1.12rem;line-height:1.2}.meta{display:grid;gap:8px}.row{font-size:.91rem}.row a{color:var(--g800);font-weight:690;text-decoration:none;overflow-wrap:anywhere}.lines{margin:10px 0 0;padding-left:18px;color:#5e6b66;font-size:.88rem}.actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:15px}.smallbtn{min-height:36px;padding:0 10px;border-radius:999px;border:1px solid #dce6e0;background:#f6f9f7;color:var(--g900);font-size:.78rem;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.smallbtn.map{background:var(--sunsoft);border-color:#f1db91;color:#5a470d}.status{height:17px;margin-top:6px;color:var(--g700);font-size:.76rem;font-weight:800}.mobile-directory{display:none}.modal{display:none}
13@media(max-width:920px) and (min-width:701px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbox{width:min(650px,78vw)}}
14@media(max-width:700px){.tools{top:94px}.hero{padding:32px 0 22px}.hero h1{font-size:3rem}.toolbox{width:100%;min-width:0}.filter-shell::after{right:-2px}.content{padding-top:20px}.desktop-groups{display:none}.mobile-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.tile{min-height:86px;padding:12px;border:1px solid rgba(14,56,43,.08);border-radius:15px;background:#fff;box-shadow:0 4px 14px rgba(20,52,42,.06);text-align:left;cursor:pointer}.tile strong{display:block;color:var(--g950);font-size:.91rem;line-height:1.16}.tile span{display:block;margin-top:6px;color:#73807a;font-size:.72rem}.modal.open{display:flex;position:fixed;inset:0;z-index:100;background:rgba(10,30,23,.48);align-items:flex-end}.sheet{width:100%;max-height:84vh;overflow:auto;background:#fff;border-radius:23px 23px 0 0;padding:20px 18px 28px;box-shadow:0 -18px 55px rgba(0,0,0,.18)}.grab{width:48px;height:5px;border-radius:99px;background:#d3dcd7;margin:0 auto 14px}.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.sheet h2{margin:0;color:var(--g950);font-size:1.45rem}.close{width:38px;height:38px;border:0;border-radius:50%;background:#eef4f1;color:var(--g950);font-size:1.35rem;cursor:pointer}.sheet-body{margin-top:14px}.sheet .actions{margin-top:18px}}
15
16.local-cta{margin:0 0 26px;padding:20px 22px;border-radius:18px;background:linear-gradient(145deg,#eef7f2,#fff9e7);border:1px solid #d9e8df;box-shadow:var(--soft)}
17.local-cta h2{margin:0 0 7px;color:var(--g950);font-size:1.22rem}
18.local-cta p{margin:0;color:#5d6964;max-width:900px}
19.local-cta .cta-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
20.local-cta .cta-btn{min-height:41px;padding:0 14px;border-radius:999px;text-decoration:none;font-weight:820;display:inline-flex;align-items:center;justify-content:center}
21.local-cta .cta-btn.primary{background:var(--g800);color:#fff}
22.local-cta .cta-btn.light{background:#fff;border:1px solid #dce7e1;color:var(--g950)}
23@media(max-width:700px){.local-cta{padding:17px}.local-cta .cta-actions{flex-direction:column}.local-cta .cta-btn{width:100%}}
24
25
26/* ---------- Accès unique : gérer une activité locale ---------- */
27.hero .container{
28  display:grid;
29  grid-template-columns:minmax(0,1fr) minmax(245px,300px);
30  gap:34px;
31  align-items:center;
32}
33.hero-main{grid-column:1;grid-row:1}
34.local-cta{
35  grid-column:2;
36  grid-row:1;
37  margin:0;
38  padding:17px 18px;
39  border-radius:18px;
40  background:linear-gradient(145deg,#eef7f2,#fff9e7);
41  border:1px solid #d9e8df;
42  box-shadow:var(--soft);
43}
44.local-cta .cta-kicker{
45  margin:0 0 5px;
46  color:var(--g700);
47  font-size:.7rem;
48  font-weight:950;
49  letter-spacing:.12em;
50  text-transform:uppercase;
51}
52.local-cta h2{
53  margin:0;
54  color:var(--g950);
55  font-size:1.05rem;
56  line-height:1.2;
57}
58.local-cta p{
59  margin:7px 0 0;
60  color:#5d6964;
61  font-size:.82rem;
62  line-height:1.4;
63}
64.local-cta .cta-btn{
65  margin-top:12px;
66  min-height:39px;
67  padding:0 13px;
68  border-radius:11px;
69  background:var(--g800);
70  color:#fff;
71  text-decoration:none;
72  font-size:.8rem;
73  font-weight:850;
74  display:flex;
75  align-items:center;
76  justify-content:center;
77  text-align:center;
78}
79.local-cta .cta-btn::after{content:"›";margin-left:8px;font-size:1.15rem}
80
81@media(max-width:820px){
82  .hero .container{
83    grid-template-columns:1fr;
84    gap:15px;
85  }
86  .hero-main{grid-column:1;grid-row:1}
87  .local-cta{
88    grid-column:1;
89    grid-row:2;
90    padding:13px 14px;
91  }
92  .local-cta .cta-kicker{display:none}
93  .local-cta h2{font-size:.96rem}
94  .local-cta p{font-size:.78rem;margin-top:4px}
95  .local-cta .cta-btn{margin-top:9px;min-height:37px}
96}
97@media(max-width:520px){

98  .local-cta p{display:none}
99  .local-cta{
100    display:grid;
101    grid-template-columns:1fr auto;
102    gap:8px 12px;
103    align-items:center;
104  }
105  .local-cta h2{font-size:.92rem}
106  .local-cta .cta-btn{
107    margin:0;
108    min-height:36px;
109    padding:0 11px;
110    white-space:nowrap;
111    font-size:.75rem;
112  }
113}
114</style>  <link rel="stylesheet" href="avis-visite.css">
115</head><body><header><div class="container head"><a class="brand" href="index.html"><strong>ALLOUIS</strong><span>Notre commune</span></a><nav class="nav" aria-label="Navigation principale"><a href="index.html">Accueil</a><a class="active" href="informations-pratiques.html">Informations pratiques</a><a href="contact.html">Nous contacter</a></nav></div></header><section class="hero"><div class="container">
116<div class="hero-main">
117  <p class="kicker">Au quotidien</p>
118  <h1>Informations pratiques</h1>
119  <p>Retrouvez rapidement les coordonnées, horaires, associations et services utiles. Recherchez une information ou parcourez les fiches par thème.</p>
120</div>
121<aside class="local-cta" id="activites-locales" aria-label="Ajouter, modifier ou supprimer une activité locale">
122  <p class="cta-kicker">Activités locales</p>
123  <h2>Ajouter, modifier ou supprimer une fiche</h2>
124  <p>Pour une entreprise, un commerce, un artisan, une profession libérale, une association, un club ou une autre activité liée à Allouis.</p>
125  <a class="cta-btn" href="referencement-activite.html">Gérer une activité</a>
126</aside>
127</div></section>
128<div class="tools"><div class="container"><div class="toolbox"><div class="tool-label"><strong>Rechercher une information</strong><span class="count" id="count"></span></div><input class="search" id="search" type="search" placeholder="École, association, gendarmerie, transport…" aria-label="Rechercher une information"><span class="browse-label">Parcourir par thème</span><div class="filter-shell"><div class="edge left" id="edgeLeft" aria-hidden="true"></div><div class="filters" id="filters"></div><div class="edge right" id="edgeRight" aria-hidden="true"></div></div></div></div></div>
129<main class="content"><div class="container"><div class="desktop-groups" id="desktop"></div><div class="mobile-directory" id="mobile"></div></div></main>
130<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="sheetTitle"><div class="sheet"><div class="grab"></div><div class="sheet-head"><h2 id="sheetTitle"></h2><button class="close" id="close" aria-label="Fermer">×</button></div><div class="sheet-body" id="sheetBody"></div></div></div><footer><div class="container foot"><div><strong>Mairie d’Allouis</strong><br>6 Place de la Mairie — 18500 Allouis<br><a href="tel:+33248573081">02 48 57 30 81</a> · <a href="mailto:[email protected]">[email protected]</a></div><div class="footnote">Point d’information et de contact de la commune d’Allouis pendant la préparation du nouveau site internet.<div class="legal-links"><a href="a-propos.html">À propos</a><a href="mentions-legales.html">Mentions légales</a><a href="protection-des-donnees.html">Protection des données</a><a href="conditions-utilisation.html">Conditions d’utilisation</a></div></div></div></footer>

130<script src="informations-pratiques.js" defer></script>

130  

130<script src="avis-visite.js" defer></script>

130
131</body></html>