/* NetPeople : direction "carte d'état-major" (fond anthracite, accent vermillon, cartouches à double filet, médaillons ronds) */
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(/static/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/courier-prime-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-style:normal;font-display:swap;src:url(/static/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-style:normal;font-display:swap;src:url(/static/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --fond:#1b1e24; --fond2:#23272f; --ligne:#3b414c; --gris:#6d7380; --filet:#d9d6cc;
  --texte:#ecebe4; --clair:#c9ccd3; --doux:#b9bdc6;
  --accent:#ff7a59; --accent-lien:#ff8a6b; --encre:#1b1e24; --papier:#f4eee0;
  --titre:"Barlow Condensed", "Arial Narrow", sans-serif;
  --machine:"Courier Prime", "Courier New", monospace;
  --sans:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{font-size:118.75%;background:var(--fond)}
body{margin:0;min-height:100vh;color:var(--texte);background:var(--fond);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{max-width:100%}
a{color:var(--accent-lien);text-underline-offset:3px}
a:hover{color:#ffb39e}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.saut{position:absolute;left:-999px}.saut:focus{left:8px;top:8px;background:var(--texte);color:var(--encre);padding:.6rem 1rem;z-index:50}
.cadre{max-width:1160px;margin:0 auto;padding:0 1.5rem}
main{position:relative;z-index:2}

h1,h2,h3{font-family:var(--titre);font-weight:700;color:var(--texte);margin:0;text-transform:uppercase;letter-spacing:.02em}
h1{font-size:clamp(2.4rem,6vw,4.1rem);line-height:.98}
h2{font-size:2.2rem;line-height:1.05}
h3{font-size:1.45rem;line-height:1.15}
.kicker{margin:0;font:600 1.05rem var(--titre);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.chapeau{font-size:1.15rem;color:var(--clair);max-width:34rem;margin:1.2rem 0 0}

/* Cartouche : filet intérieur fin + filet extérieur épais, légende posée sur le cadre */
.cartouche{position:relative;border:1px solid var(--filet);box-shadow:0 0 0 5px var(--fond),0 0 0 7px var(--filet);margin:7px}
.legende{position:absolute;top:-.75em;left:1rem;padding:0 .5rem;background:var(--fond);font:700 .9rem/1.4 var(--titre);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* Médaillons tirés de l'acte de 1902 */
.med{display:block;border-radius:50%;object-fit:cover;background:var(--fond2);box-shadow:0 0 0 5px var(--fond),0 0 0 7px var(--filet),0 0 0 11px var(--fond),0 0 0 12px var(--accent)}
.med-coin{position:absolute;z-index:3;width:104px;height:104px;top:-52px;right:-26px}

/* Boutons */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3.2rem;padding:0 1.5rem;font:700 1.2rem var(--titre);letter-spacing:.1em;text-transform:uppercase;color:var(--encre);background:var(--accent);border:2px solid var(--accent);border-radius:0;cursor:pointer;text-decoration:none}
.bouton:hover{background:#ff9b80;border-color:#ff9b80;color:var(--encre)}
.bouton.gros{min-height:3.8rem;padding:0 2rem;font-size:1.35rem}
.bouton.clair{background:transparent;color:var(--texte);border-color:var(--texte)}
.bouton.clair:hover{background:rgba(236,235,228,.1);color:var(--texte)}
.lien{background:none;border:0;padding:0;color:var(--accent-lien);font:inherit;text-decoration:underline;cursor:pointer}

/* En-tête */
.haut{border-bottom:1px solid var(--ligne)}
.haut .cadre{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:84px}
.marque{font:700 1.65rem/1 var(--titre);letter-spacing:.2em;text-transform:uppercase;color:var(--texte);text-decoration:none}
.marque i{font-style:normal;color:var(--accent)}
.marque:hover{color:var(--texte)}
.haut p{margin:0;font:400 .95rem var(--machine);color:var(--doux)}
@media(max-width:640px){.haut p{display:none}}

/* Les quatre outils, en onglets sous l'en-tête ; la précision s'affiche au survol */
.onglets{border-bottom:1px solid var(--ligne);padding:.9rem 0;position:relative;z-index:30}
.onglets .cadre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.onglet{position:relative;display:flex;align-items:center;justify-content:center;gap:.8rem;min-height:3.6rem;padding:.4rem 1.1rem;border:2px solid var(--accent);color:var(--texte);text-decoration:none}
.onglet img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--fond),0 0 0 3px var(--filet)}
.onglet b{font:700 1.25rem/1.05 var(--titre);letter-spacing:.04em;text-transform:uppercase}
.onglet b em{font-style:normal}
.onglet:hover{background:rgba(255,122,89,.12);color:var(--texte)}
.onglet.actif{background:var(--accent);color:var(--encre)}
.onglet.actif img{box-shadow:0 0 0 2px var(--accent),0 0 0 3px var(--encre)}
.bulle{position:absolute;top:calc(100% + 12px);left:50%;z-index:40;width:max-content;max-width:min(28rem,90vw);white-space:nowrap;padding:.6rem .95rem;
  background:var(--fond2);color:var(--texte);border:1px solid var(--filet);border-radius:var(--arrondi-petit,10px);
  box-shadow:0 0 0 4px var(--fond),0 0 0 5px var(--accent),0 14px 30px rgba(0,0,0,.55);
  font:400 .95rem/1.35 var(--machine);text-align:center;text-transform:none;letter-spacing:0;
  opacity:0;visibility:hidden;transform:translate(-50%,-4px);transition:opacity .15s,transform .15s,visibility .15s;pointer-events:none}
.bulle::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:var(--fond2);border-left:1px solid var(--filet);border-top:1px solid var(--filet);border-radius:3px 0 0 0;transform:translateX(-50%) rotate(45deg)}
.onglet:hover .bulle,.onglet:focus-visible .bulle{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:.12s}
@media(hover:none){.bulle{display:none}}
@media(max-width:1180px){.onglet b{font-size:1.1rem}.onglet img{width:34px;height:34px}.onglet{gap:.6rem;padding:.4rem .7rem}}
@media(max-width:900px){.onglets .cadre{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .onglets{padding:.7rem 0}
  .onglets .cadre{grid-template-columns:1fr 1fr;gap:.6rem;padding:0 .8rem}
  .onglet{min-height:3.4rem;padding:.4rem .6rem;text-align:center}
  .onglet img,.bulle{display:none}
  .onglet b{font-size:1.1rem;letter-spacing:.03em}
  .onglet b em{display:block;font-size:.72em;letter-spacing:.02em}
}
/* Accueil : en-tête avec courbes de niveau */
.hero{padding:3.2rem 0 4.6rem;background-image:repeating-radial-gradient(ellipse at 88% 30%,transparent 0 26px,rgba(236,235,228,.06) 26px 27px),repeating-radial-gradient(ellipse at 70% 110%,transparent 0 34px,rgba(236,235,228,.05) 34px 35px)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:3rem;align-items:start}
.hero h1{margin-top:.5rem;max-width:42rem}
.portrait-hero{margin:.6rem 0 0;text-align:center}
.portrait-hero .med{width:280px;height:280px;margin:0 auto}
.portrait-hero figcaption{margin-top:1.6rem;font:400 .95rem/1.5 var(--machine);color:var(--doux)}
@media(max-width:1080px){
  .hero{padding-top:2rem}
  .hero-grille{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .portrait-hero{order:-1;margin:0}
  .portrait-hero .med{width:170px;height:170px}
  .portrait-hero figcaption{margin-top:1.2rem}
}

/* Recherche */
.carte{margin-top:3.4rem;max-width:44rem;padding:2rem 1.7rem 1.5rem}
.carte .med-coin{width:120px;height:120px;top:-64px;right:-40px;transform:rotate(-6deg)}
.carte label{display:block;font:700 1.1rem var(--sans);margin-bottom:.7rem;padding-right:5.5rem;color:var(--texte)}
.zone{position:relative}
.champ{display:flex;gap:.7rem}
.champ input{flex:1;min-width:0;height:3.8rem;padding:0 1.1rem;font:400 1.25rem var(--sans);color:var(--encre);background:var(--texte);border:3px solid var(--texte);border-radius:0}
.champ input::placeholder{color:#5f5a4d}
.champ input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.4)}
.exemples{margin:.8rem 0 0;font:400 .95rem var(--machine);color:var(--doux)}
.res{list-style:none;margin:8px 0 0;padding:0;position:absolute;left:0;right:0;z-index:20;max-height:min(34rem,70vh);overflow-y:auto;background:var(--texte);box-shadow:0 20px 40px rgba(0,0,0,.6)}
.res li{border-bottom:1px solid #cfccc0}.res li:last-child{border:0}
.res button{display:flex;width:100%;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;background:transparent;border:0;font:inherit;text-align:left;cursor:pointer;color:var(--encre)}
.res button:hover,.res button[aria-selected="true"]{background:#ffe0d6}
.res .n{font:700 1.15rem var(--sans)}
.res .d{font:400 .95rem var(--machine);color:#4d4a40;text-align:right;align-self:center}
.res button.tous{justify-content:center;font:700 1.2rem var(--titre);letter-spacing:.08em;text-transform:uppercase;background:#ffd2c4}
.res button.tous:hover,.res button.tous[aria-selected="true"]{background:var(--accent)}
.liste-res{list-style:none;margin:2.4rem 0 0;padding:0;max-width:44rem}
.liste-res li{margin:0 0 .6rem}
.liste-res a{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border:1px solid var(--gris);background:var(--fond2);color:var(--texte);text-decoration:none}
.liste-res a:hover{border-color:var(--accent)}
.liste-res .n{font:700 1.15rem var(--sans)}
.liste-res .d{font:400 .95rem var(--machine);color:var(--doux);align-self:center;text-align:right}
@media(max-width:640px){
  .carte{padding:1.7rem 1rem 1.2rem}
  .carte .med-coin{width:80px;height:80px;top:-44px;right:-14px}
  .carte label{padding-right:3.6rem}
  .champ{flex-direction:column}
  .champ input{flex:none}
  .champ .bouton{width:100%}
  .res button,.liste-res a{flex-direction:column;gap:.15rem}
  .res .d,.liste-res .d{text-align:left;align-self:flex-start}
}

/* Comment ça marche */
.section{border-top:1px solid var(--ligne);padding:4rem 0}
.etapes{list-style:none;margin:3.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}
.etapes li{margin:0;padding:1.8rem 1.3rem 1.4rem}
.etapes h3{margin:0 0 .5rem;padding-right:4rem}
.etapes p{margin:0;color:var(--clair)}
@media(max-width:860px){.etapes{grid-template-columns:minmax(0,1fr);gap:3.4rem}}

/* Note en marge */
.note{display:flex;align-items:center;gap:3rem;margin-top:4.4rem;max-width:58rem}
.note .med{flex:none;width:200px;height:200px}
.fiche-info{flex:1;min-width:0;background:var(--fond2);border:1px dashed var(--gris);padding:1.6rem 1.6rem 1.4rem}
.fiche-info .marge{margin:0;font:400 .95rem var(--machine);color:var(--accent)}
.fiche-info h2{margin:.3rem 0 .6rem;font-size:1.9rem}
.fiche-info p{margin:0 0 .6rem;color:#d8d9dd}
.fiche-info p:last-child{margin:0}
@media(max-width:760px){.note{flex-direction:column;gap:2rem}.note .med{width:130px;height:130px}}

/* Page mairie */
.page{max-width:58rem;padding-top:2rem;padding-bottom:4.5rem}
.accueil-retour{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 0 2.2rem}
.accueil-retour .aide{margin:0}
.accueil-retour.bas{margin:3rem 0 0}
.tete-mairie{display:flex;align-items:center;gap:2.4rem}
.tete-mairie>div{flex:1;min-width:0}
.tete-mairie h1{font-size:clamp(2.3rem,5vw,3.4rem);line-height:1;margin-top:.3rem;overflow-wrap:break-word;hyphens:auto}
.tete-mairie .med{flex:none;width:150px;height:150px;margin-right:12px;transform:rotate(8deg)}
.fiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:0;margin:2rem 0 0;border-top:1px solid var(--gris);border-bottom:1px solid var(--gris)}
.fiche div{min-width:0;padding:1rem 1.2rem 1rem 0}
.fiche dt{font:400 .95rem var(--machine);color:var(--accent-lien)}
.fiche dd{margin:.2rem 0 0;overflow-wrap:anywhere;line-height:1.45}
.intro-page{margin:2rem 0 0;max-width:46rem;font-size:1.1rem;color:var(--texte)}

.bloc{min-width:0;margin:3.4rem 7px 0;padding:1.9rem 1.5rem 1.4rem}
.bloc legend{display:flex;align-items:center;gap:.6rem;margin-left:.4rem;padding:0 .6rem;background:var(--fond);font:700 1.35rem/1.2 var(--titre);letter-spacing:.06em;text-transform:uppercase;color:var(--texte)}
.bloc legend span{display:grid;place-items:center;width:2rem;height:2rem;background:var(--accent);color:var(--encre);font:700 1.1rem var(--titre)}
.intro{margin:0 0 1.1rem;padding-right:4.5rem;max-width:44rem;color:var(--clair);font-size:1rem;line-height:1.5}
.rang{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.1rem 1.3rem;margin-bottom:1.1rem}
label.f{display:block;font-weight:700;font-size:1.05rem;color:var(--texte)}
.f input:not([type=checkbox]),.f select{display:block;width:100%;height:3.3rem;margin-top:.4rem;padding:0 .9rem;font:400 1.1rem var(--sans);color:var(--encre);background-color:var(--texte);border:2px solid var(--texte);border-radius:0}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4rem}
.f input::placeholder{color:#5f5a4d}
.f input:focus,.f select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.45)}
.f.err input{border-color:#ff9a7a;box-shadow:0 0 0 4px rgba(255,154,122,.45)}
.indice{display:block;margin-top:.35rem;font-weight:400;font-size:1rem;line-height:1.45;color:var(--doux)}
label.case{display:flex;gap:.8rem;align-items:flex-start;margin:.4rem 0 .9rem;padding:.8rem 1rem;border:1px dashed var(--gris);font-size:1rem;color:var(--texte)}
label.case .indice{margin-top:.15rem}
.case input{width:1.5rem;height:1.5rem;margin-top:.1rem;accent-color:var(--accent);flex:none}
.avis{border-left:4px solid var(--accent);background:rgba(255,122,89,.1);padding:.75rem 1.1rem;margin:.6rem 0 0;font-size:1rem}
.avis.astuce{border-color:#7fb0c9;background:rgba(127,176,201,.1)}
.aide{color:var(--doux);font-size:1rem;margin:.5rem 0 0}
.generer{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:3rem;padding:1.5rem;background:#2a2219;border:2px solid var(--accent)}
.generer .med{flex:none;width:96px;height:96px;margin:6px;box-shadow:0 0 0 5px #2a2219,0 0 0 7px var(--filet)}
.generer .aide{margin:0;flex:1 1 16rem;color:#d8d9dd}
.msg-err{margin:.8rem 0 0;color:#ffb8a0;font-weight:700}
.source{margin-top:2.4rem;font-size:.95rem;color:var(--doux)}
@media(max-width:640px){
  .accueil-retour .bouton{width:100%}
  .tete-mairie{gap:1rem}
  .tete-mairie .med{width:72px;height:72px;margin-right:8px}
  .tete-mairie h1{font-size:2rem}
  .med-coin{width:72px;height:72px;top:-38px;right:-10px}
  .bloc{padding:1.7rem 1rem 1.2rem}
  .bloc legend{font-size:1.1rem;letter-spacing:.03em;margin-left:0;margin-right:3.2rem;padding:0 .4rem}
  .bloc legend span{width:1.7rem;height:1.7rem}
  .bloc .med-coin{width:64px;height:64px;top:-34px;right:-8px}
  .intro{padding-right:0}
  .generer .bouton{width:100%}
  .generer .med{display:none}
}

/* Courrier généré */
.page.large{max-width:1160px}
.retour{margin:0 0 1.8rem;padding:1.1rem 1.3rem;border:1px solid var(--gris);background:var(--fond2);display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.retour .bouton{flex:none}
.retour .aide{margin:0;flex:1 1 20rem}
#vue-courrier .page.large{max-width:1400px}
.deux{display:grid;grid-template-columns:minmax(0,52rem) 18rem;justify-content:space-between;gap:3rem;align-items:start;margin-top:1.4rem}
/* Aperçu présenté comme une vraie lettre : expéditeur, mairie, date, objet, texte, signature */
.feuille{position:relative;background:var(--papier);color:#1c1c1c;padding:3.6rem 4.2rem 4rem;font:400 1.05rem/1.6 var(--sans);box-shadow:0 24px 50px -18px rgba(0,0,0,.75)}
.feuille p{margin:0}
.l-exp{margin-bottom:2.4rem}
.l-exp:first-line{font-weight:700}
.l-dest{margin:0 0 2.4rem auto;width:fit-content;min-width:45%;max-width:60%}
.l-dest:first-line{font-weight:700}
.l-date{text-align:right;margin-bottom:2rem!important}
.objet{margin:0 0 1.6rem!important;font-weight:700}
.l-corps p{margin:0 0 1rem}
.l-corps .l-bloc{padding-left:2rem;margin-bottom:1.2rem}
.l-sign{text-align:right;margin-top:2.4rem!important;font-weight:700}
.options{padding:1.6rem 1.3rem 1.2rem;border:2px solid var(--accent);background:var(--fond2)}
.options h2{font-size:1.7rem;margin-bottom:1rem}
.opt{padding:.9rem;margin-bottom:.8rem;border:1px solid var(--ligne);background:var(--fond)}
.opt .bouton{width:100%;min-height:3.4rem}
.opt .aide{margin:.5rem 0 0}
.opt.off{opacity:.6}
.opt.off .bouton{pointer-events:none}
#manque .avis{margin-bottom:1rem}
/* Envoi par mail : webmails pré-remplis, copier-coller guidé, logiciel installé */
.envoi-mail{display:flex;flex-direction:column}
.envoi-mail h3{font-size:1.35rem}
.envoi-mail>.aide{margin:.4rem 0 .8rem}
.services{display:flex;flex-direction:column;gap:.5rem}
.services .bouton{width:100%;min-height:3.2rem;font-size:1.15rem}
.autre-mail{margin-top:1rem;border-top:1px solid var(--ligne);padding-top:.8rem}
.autre-mail summary{cursor:pointer;color:var(--accent-lien);font-weight:700;font-size:1rem;line-height:1.35}
.etapes-mail{margin:.9rem 0 0;padding-left:1.3rem;font-size:.98rem;color:var(--clair)}
.etapes-mail li{margin-bottom:.9rem}
.etapes-mail .copie{display:flex;width:100%;min-height:2.8rem;margin-bottom:.4rem;font-size:1.05rem}
.autre-mail .aide{margin:0}
.logiciel{margin-top:1rem;font-size:.98rem}
.services .bouton,.etapes-mail .copie{text-align:center}
/* Sur téléphone, l'application de messagerie est le plus simple : on la met en premier, en vrai bouton */
@media(max-width:900px) and (pointer:coarse){
  .envoi-mail h3{order:-2}
  .envoi-mail .logiciel{order:-1;display:flex;align-items:center;justify-content:center;min-height:3.4rem;margin:.6rem 0 .4rem;padding:.4rem 1rem;background:var(--accent);color:var(--encre);font:700 1.15rem/1.2 var(--titre);letter-spacing:.08em;text-transform:uppercase;text-align:center;text-decoration:none}
}
@media(max-width:1100px){.deux{grid-template-columns:minmax(0,1fr) 17rem;gap:2rem}.feuille{padding:2.6rem 2.6rem 3rem}}
@media(max-width:900px){.deux{grid-template-columns:minmax(0,1fr)}.options{position:static}.feuille{padding:1.6rem 1.3rem;font-size:1rem}.l-dest{max-width:none;min-width:0;margin-left:2rem}}
@media(max-width:640px){.retour .bouton{width:100%}}

/* Pied de page */
.pied{margin-top:3rem;padding:3.2rem 0 1.6rem;border-top:1px solid var(--ligne);--fond:#16191e;background:var(--fond);font-size:1rem;color:var(--doux)}
.vente{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.4rem;padding:.9rem 1.4rem}
.vente .med{flex:none;width:56px;height:56px;box-shadow:0 0 0 3px var(--fond),0 0 0 4px var(--filet),0 0 0 7px var(--fond),0 0 0 8px var(--accent)}
.vente strong{font:700 1.2rem/1.25 var(--titre);letter-spacing:.04em;text-transform:uppercase;color:var(--texte)}
@media(max-width:640px){.vente{padding:.9rem 1rem}.vente .med{width:44px;height:44px}.vente strong{font-size:1.05rem}}

/* Liens du pied de page */
.liens-pied{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}

/* Archives sur la page mairie */
.archives-mairie{margin-top:3rem;padding:1.4rem 1.5rem;background:var(--fond2);border:1px dashed var(--gris)}
.archives-mairie h2{font-size:1.6rem;margin-bottom:.5rem}
.archives-mairie p{margin:.5rem 0 0}
.kicker a{color:var(--accent)}

/* Départements */
.grille-depts{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem 1.4rem}
.grille-depts a{display:flex;gap:.7rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--ligne);color:var(--texte);text-decoration:none;font-size:1.05rem}
.grille-depts a:hover{color:var(--accent-lien);border-color:var(--accent)}
.grille-depts span{flex:none;min-width:2.6rem;font:400 .95rem var(--machine);color:var(--accent-lien)}
.alphabet{display:flex;flex-wrap:wrap;gap:.4rem;margin:3rem 0 0}
.alphabet a{display:grid;place-items:center;min-width:2.8rem;height:2.8rem;border:1px solid var(--gris);color:var(--texte);text-decoration:none;font:700 1.2rem var(--titre)}
.alphabet a:hover{border-color:var(--accent);color:var(--accent-lien)}
.lettre{margin-top:2.6rem;scroll-margin-top:1rem}
.lettre h2{font-size:2rem;color:var(--accent);border-bottom:1px solid var(--ligne);padding-bottom:.3rem}
.communes{list-style:none;margin:1rem 0 0;padding:0;columns:3 16rem;column-gap:2rem}
.communes li{break-inside:avoid;padding:.3rem 0;font-size:1.05rem}
.communes a{color:var(--texte)}
.communes a:hover{color:var(--accent-lien)}
.communes span{font:400 .95rem var(--machine);color:var(--doux)}
.page.large .note{max-width:none;margin-top:2.6rem}
.choix-dept{margin-top:3.4rem}
.champ select{flex:1;min-width:0;height:3.8rem;padding:0 1rem;font:400 1.2rem var(--sans);color:var(--encre);background:var(--texte);border:3px solid var(--texte);border-radius:0}
.champ select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.4)}
@media(max-width:640px){.champ select{flex:none}}
.titre-grille{margin-top:4rem;font-size:1.8rem}
.recent{margin-top:3.4rem;max-width:46rem}
.recent h2{font-size:1.8rem;margin-bottom:.5rem}
.recent p{margin:0}
.depliant{margin-top:2rem}
.depliant summary{display:inline-flex;align-items:center;gap:.8rem;min-height:3.6rem;padding:0 1.5rem;border:2px solid var(--texte);font:700 1.25rem var(--titre);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;list-style:none}
.depliant summary::-webkit-details-marker{display:none}
.depliant summary::before{content:"+";font-size:1.6rem;color:var(--accent)}
.depliant[open] summary::before{content:"\2212"}
.depliant summary:hover{background:rgba(236,235,228,.1)}
.depliant .alphabet{margin-top:2rem}
.fiche-info .bouton{margin-top:.4rem}

/* Convertisseur de dates républicaines */
.convertir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem;margin-top:1rem}
.convertir .carte{max-width:none;margin-top:2.4rem}
.f-titre{margin:0 0 .8rem;font-weight:700;font-size:1.1rem}
.trois{display:grid;grid-template-columns:1fr 1.4fr 1.3fr;gap:.6rem;margin-bottom:1.2rem}
.trois label{display:flex;flex-direction:column;gap:.3rem;margin:0;padding:0;font:400 .95rem var(--machine);color:var(--doux)}
.trois select{width:100%;height:3.6rem;padding:0 .6rem;font:400 1.15rem var(--sans);color:var(--encre);background:var(--texte);border:3px solid var(--texte);border-radius:0}
.trois select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.4)}
.convertir .bouton{width:100%}
.resultat-date{margin-top:3rem;padding:2rem 1.8rem 1.6rem;text-align:center;scroll-margin-top:1rem}
.resultat-date p{margin:0}
.r-de{font:700 clamp(1.6rem,3.4vw,2.3rem)/1.15 var(--titre);text-transform:uppercase;letter-spacing:.03em}
.r-egal{margin:.5rem 0!important;font:400 1rem var(--machine);color:var(--doux)}
.r-vers{font:700 clamp(2rem,4.6vw,3.2rem)/1.1 var(--titre);text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}
.r-detail{margin-top:1rem!important;color:var(--clair)}
.resultat-date .avis{text-align:left}
.tableau-defile{overflow-x:auto;margin-top:1.4rem}
.tableau{width:100%;border-collapse:collapse;font-size:1.02rem}
.tableau th{text-align:left;font:700 1rem var(--titre);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding:.5rem .8rem;border-bottom:2px solid var(--accent)}
.tableau td{padding:.55rem .8rem;border-bottom:1px solid var(--ligne)}
.sextile{display:block;font:400 .85rem var(--machine);color:var(--doux)}
@media(max-width:900px){.convertir{grid-template-columns:minmax(0,1fr);gap:0}}
@media(max-width:640px){.tete-mairie h1.titre-long{font-size:1.6rem}.trois{grid-template-columns:1fr}.tableau{font-size:.95rem}.tableau th,.tableau td{padding:.5rem .4rem}}

/* Questions fréquentes */
.faq{display:flex;flex-direction:column;gap:2.4rem;margin-top:3rem}
.question{padding:1.4rem 1.5rem 1.1rem}
.question h2{font-size:1.6rem;margin-bottom:.6rem}
.question p{margin:0 0 .7rem;color:#d8d9dd}

/* Pages simples */
.legal{max-width:46rem;padding:2.4rem 1.5rem 4rem}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1.2rem}
.legal h2{font-size:1.6rem;margin:2rem 0 .5rem}
.legal p{color:var(--texte);max-width:42rem}
.erreur{padding:3rem 1.5rem 5rem;max-width:40rem}
.erreur h1{font-size:clamp(2.2rem,5vw,3.2rem)}
noscript .avis{color:#ffb8a0}

@media print{.retour,.options,#t-courrier,.intro-page,#manque{display:none!important}.deux{display:block}.feuille{padding:0;margin:0;box-shadow:none}body{background:#fff!important;color:#000}.haut,.onglets,.pied,#demande,.fiche,h1,.lien,.aide,.accueil-retour,.tete-mairie{display:none!important}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Coins arrondis partout : aucun angle droit */
:root{--arrondi:14px;--arrondi-petit:10px}
.bouton,.onglet,.cartouche,.fiche-info,.generer,.retour,.options,.opt,.archives-mairie,.liste-res a,.res,.alphabet a,
.depliant summary,label.case,.avis,.feuille,.envoi-mail .logiciel,.saut,.tuile,.periodes a{border-radius:var(--arrondi)}
.champ input,.champ select,.f input:not([type=checkbox]),.f select,.trois select,textarea{border-radius:var(--arrondi-petit)}
.legende{border-radius:8px}
.bloc legend span{border-radius:50%}
.res li:first-child button{border-radius:var(--arrondi) var(--arrondi) 0 0}
.res li:last-child button{border-radius:0 0 var(--arrondi) var(--arrondi)}
.res li:only-child button{border-radius:var(--arrondi)}
.tableau-defile{border-radius:var(--arrondi-petit)}
input[type=checkbox]{border-radius:4px}

/* Espace privé et statistiques */
.connexion{max-width:36rem}
.connexion label{padding-right:0}
.stats-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap}
.stats-tete h1{margin-bottom:.3rem}
.en-ligne{margin:0;font:400 1rem var(--machine);color:var(--doux);display:flex;align-items:center;gap:.5rem}
.en-ligne .point{width:.7rem;height:.7rem;border-radius:50%;background:var(--accent)}
.periodes{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0 .6rem}
.periodes a{display:inline-flex;align-items:center;min-height:2.8rem;padding:0 1.1rem;border:2px solid var(--ligne);color:var(--texte);text-decoration:none;font:700 1.1rem var(--titre);letter-spacing:.08em;text-transform:uppercase}
.periodes a:hover{border-color:var(--accent)}
.periodes a.actif{background:var(--accent);border-color:var(--accent);color:var(--encre)}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;margin:1.6rem 0 2.6rem}
.tuile{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.2rem;background:var(--fond2);border:1px solid var(--ligne)}
.tuile.accent{border:2px solid var(--accent)}
.t-nom{font:400 .95rem var(--machine);color:var(--doux)}
.tuile strong{font:700 2.6rem/1 var(--titre);color:var(--texte)}
.evol{font-size:.95rem;color:var(--clair)}
.grille-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.8rem 1.6rem;margin-top:1.6rem}
.bloc-stat{padding:1.8rem 1.4rem 1rem;margin:7px;min-width:0}
.large-bloc{margin:2.4rem 7px}
.barres{list-style:none;margin:0;padding:0}
.barres li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem 1rem;padding:.45rem 0}
.b-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-nom a{color:var(--texte)}
.b-val{font-weight:700;text-align:right;white-space:nowrap}
.b-val small{font-weight:400;color:var(--doux);margin-left:.3rem}
.b-fond{grid-column:1/-1;height:.55rem;border-radius:999px;background:var(--ligne);overflow:hidden}
.b-fond span{display:block;height:100%;min-width:.55rem;border-radius:999px;background:var(--accent)}
.b-reste{margin:.6rem 0 0;color:var(--doux)}
.b-unite{margin:.8rem 0 0;font:400 .85rem var(--machine);color:var(--gris)}
.entonnoir .b-nom{white-space:normal}
.histo{display:flex;align-items:stretch;gap:3px;height:15rem;padding-top:.5rem}
.histo.petit{height:9rem;gap:2px}
.h-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:default}
.h-col:hover .h-barre{background:#ff9b80}
.h-val{font-size:.75rem;color:var(--doux);min-height:1.1rem}
.h-barre{display:block;width:100%;max-width:2.6rem;min-height:2px;border-radius:6px 6px 2px 2px;background:var(--accent)}
.h-lib{height:1.4rem;margin-top:.3rem;font:400 .75rem var(--machine);color:var(--doux);white-space:nowrap;overflow:visible}
.detail-chiffres{margin-top:1rem}
.detail-chiffres summary{cursor:pointer;color:var(--accent-lien)}
.note-stats{margin-top:2.6rem;border-radius:var(--arrondi)}
.note-stats h2{font-size:1.6rem}
.reglages{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:2rem}
.reglages h3{margin-top:0}
.reglages .bouton{margin-top:1rem}
@media(max-width:640px){.tuile strong{font-size:2.1rem}.histo{height:11rem;gap:1px}.h-val{display:none}.h-lib{font-size:.65rem}.periodes a{min-height:2.5rem;padding:0 .8rem;font-size:1rem}}
/* Guides pratiques */
.guides-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,21rem),1fr));gap:2.2rem 1.8rem;margin-top:3rem}
.guide-carte{display:flex;flex-direction:column;gap:.5rem;padding:1.6rem 1.4rem 1.3rem;margin:7px;color:var(--texte);text-decoration:none;background:var(--fond)}
.guide-carte:hover{background:var(--fond2);color:var(--texte)}
.guide-carte .med{width:96px;height:96px;margin:-3.4rem 0 .6rem auto}
.g-kicker{font:400 .9rem var(--machine);color:var(--accent)}
.guide-carte strong{font:700 1.7rem/1.1 var(--titre);text-transform:uppercase;letter-spacing:.02em}
.g-resume{color:var(--doux);font-size:1rem}
.g-lire{margin-top:auto;padding-top:.6rem;font:700 1.1rem var(--titre);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.chapeau-guide{font-size:1.2rem;line-height:1.55}
.sommaire{margin-top:2.6rem;padding:1.6rem 1.4rem 1rem;max-width:44rem}
.sommaire ol{margin:0;padding-left:1.4rem}
.sommaire li{margin:.35rem 0}
.sommaire a{color:var(--texte)}
.guide-texte{max-width:44rem;margin-top:1rem}
.guide-texte h2{font-size:1.9rem;margin:2.8rem 0 .8rem;scroll-margin-top:1rem}
.guide-texte p,.guide-texte li{font-size:1.12rem;line-height:1.65;color:var(--texte)}
.guide-texte ul{padding-left:1.3rem}
.guide-texte li{margin:.45rem 0}
.guide-texte li::marker{color:var(--accent)}
.guide-texte a{color:var(--accent-lien)}
.passer{margin-top:3.4rem;padding:1.8rem 1.4rem 1.2rem}
.passer-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:1.4rem}
.passer .bouton{width:100%;text-align:center;line-height:1.15;padding:.5rem 1rem}
.passer .aide{margin:.5rem 0 0}
.autres-guides{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem}
.autres-guides a{display:inline-flex;align-items:center;min-height:2.9rem;padding:.3rem 1.1rem;border:2px solid var(--ligne);border-radius:var(--arrondi);color:var(--texte);text-decoration:none}
.autres-guides a:hover{border-color:var(--accent)}
.guides-utiles{margin-top:2.4rem;padding:1.3rem 1.4rem;border:1px dashed var(--gris);border-radius:var(--arrondi);background:var(--fond2)}
.guides-utiles h2{font-size:1.5rem;margin:0 0 .6rem}
.guides-utiles ul{margin:0;padding-left:1.2rem}
.guides-utiles li{margin:.35rem 0}
@media(max-width:640px){.guide-carte .med{width:72px;height:72px;margin-top:-2.8rem}.guide-carte strong{font-size:1.45rem}.guide-texte h2{font-size:1.6rem}}
/* Fiche mairie : ce qui est propre à la commune */
.sur-commune{margin-top:3.4rem;max-width:46rem}
.sur-commune h2{font-size:1.9rem;margin-bottom:.7rem}
.sur-commune h3{font:700 1.4rem var(--titre);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:2.2rem 0 .5rem}
.sur-commune p{color:var(--texte)}
.reperes{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.reperes li{padding:.8rem 1.1rem;background:var(--fond2);border:1px solid var(--ligne);border-radius:var(--arrondi-petit)}
.voisines{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:.6rem}
.voisines a{display:block;font-weight:700;color:var(--texte)}
.voisines li{padding:.7rem 1rem;border:1px solid var(--ligne);border-radius:var(--arrondi-petit)}
.voisines li:hover{border-color:var(--accent)}
.voisines span{font:400 .9rem var(--machine);color:var(--doux)}
/* Accueil : lien vers l'annuaire ; annuaire : nombre de mairies */
.parcourir{margin:.9rem 0 0;font-size:1.05rem}
.parcourir a{color:var(--accent-lien);font-weight:700}
.grille-depts small{margin-left:auto;font:400 .85rem var(--machine);color:var(--doux)}
/* Formulaire de contact et messages reçus */
.contact{max-width:40rem}
.contact label{margin:1.1rem 0 0;padding-right:0}
.contact .indice{display:block;margin-top:.3rem;font-size:.95rem;color:var(--doux)}
.contact textarea{display:block;width:100%;margin-top:.4rem;padding:.8rem .9rem;font:400 1.1rem/1.5 var(--sans);color:var(--encre);background:var(--texte);border:2px solid var(--texte);resize:vertical}
.contact textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,122,89,.45)}
.contact .bouton{margin-top:1.6rem}
.contact .avis p{margin:.2rem 0}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.message{margin:2.4rem 7px 0;padding:1.6rem 1.4rem 1.2rem;max-width:52rem}
.message.non-lu{box-shadow:0 0 0 5px var(--fond),0 0 0 7px var(--accent)}
.m-de{margin:0}
.m-de a{color:var(--accent-lien)}
.m-date{margin:.2rem 0 1rem;font:400 .9rem var(--machine);color:var(--doux)}
.m-texte{white-space:pre-wrap;padding:1rem 1.1rem;background:var(--fond2);border-radius:var(--arrondi-petit);color:var(--texte)}
.m-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
/* Pied de page en colonnes */
.vente{margin-bottom:2.8rem}
.pied-grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2rem 2.6rem;padding-bottom:2.4rem}
.pied-marque p{margin:1rem 0 0;max-width:22rem;line-height:1.55}
.pied h2{margin:0 0 .9rem;font:700 .95rem var(--machine);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pied-col ul{list-style:none;margin:0;padding:0}
.pied-col li{margin:0 0 .55rem}
.pied-col a{color:var(--texte);text-decoration:none}
.pied-col a:hover{color:var(--accent-lien);text-decoration:underline}
.pied-contact p{margin:0 0 1rem}
.pied-contact .bouton{width:100%;color:var(--encre)}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;padding-top:1.4rem;border-top:1px solid var(--ligne);font:400 .85rem var(--machine);color:var(--gris)}
.pied-bas a{color:var(--gris)}
.pied-bas a:hover{color:var(--texte)}
@media(max-width:960px){.pied-grille{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.pied-grille{grid-template-columns:1fr;gap:1.8rem}.pied-bas{flex-direction:column}}
/* Envoi par mail : quatre messageries avec leur logo */
.services{display:grid;grid-template-columns:1fr;gap:.6rem}
.service{display:flex;align-items:center;gap:.9rem;min-height:3.6rem;padding:.4rem 1.1rem;background:var(--texte);color:var(--encre);border:2px solid var(--texte);border-radius:var(--arrondi);font:700 1.25rem var(--titre);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.service img{flex:none;width:28px;height:28px;object-fit:contain}
.service:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,89,.45);color:var(--encre)}
.note-vente{margin:.8rem 0 0;max-width:46rem;font-size:.95rem;color:var(--doux)}

/* Bandeau à vendre : ajusté au texte et centré */
.vente{width:fit-content;max-width:calc(100% - 14px);margin:0 auto 2.8rem;padding:.9rem 2rem .9rem 1.4rem}
@media(max-width:640px){.vente{width:auto;margin:0 7px 2.4rem;padding:.9rem 1rem}}