/* ChoisirUnSyndic / SyndicusKiezen — site statique (12/10/2026).
   Reprend l'identité du site WordPress : bleu #145DA0, bleu clair #56AEFF, rouge #E12901,
   Roboto pour le texte, Roboto Slab gras pour les boutons en pilule, bandeau bleu sous le menu,
   sections sur fond gris clair. Modernisé : plus d'air, cartes arrondies, texte plus lisible. */
:root {
  --bleu: #145DA0;
  --bleu-fonce: #0E4A82;
  --bleu-nuit: #0A3866;
  --bleu-clair: #56AEFF;
  --bleu-pale: #EEF5FB;
  --rouge: #E12901;
  --or: #C9A227;
  --texte: #656363;   /* gris « secondaire » de la charte Elementor (le texte courant y est #7A7A7A) */
  --titre: #145DA0;
  --gris: #F5F6F8;
  --ligne: #E3E7EC;
  --blanc: #FFFFFF;
  --vert: #2E8B57;
  --rayon: 14px;
  --ombre: 0 6px 24px rgba(10, 56, 102, .08);
  --corps: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bouton: "Roboto Slab", Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--corps); color: var(--texte); background: var(--blanc); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-fonce); text-decoration: underline; }
h1, h2, h3 { color: var(--titre); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3 { font-size: 1.25rem; }
.conteneur { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }

/* En-tête */
.entete { background: var(--blanc); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.entete .logo img { height: 52px; width: auto; display: block; }
.bouton, .entete .cta {
  display: inline-block; font-family: var(--bouton); font-weight: 700; font-size: 15px;
  background: var(--bleu-clair); color: var(--blanc); padding: 12px 26px; border-radius: 50px;
  border: 0; cursor: pointer; transition: background .15s, transform .15s; text-align: center;
}
.bouton:hover, .entete .cta:hover { background: var(--bleu); color: var(--blanc); text-decoration: none; transform: translateY(-1px); }
.bouton.rouge { background: var(--rouge); }
.bouton.rouge:hover { background: #B82100; }

/* Menu */
.menu { background: var(--bleu); }
.menu ul { list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1180px; display: flex; justify-content: space-between; flex-wrap: wrap; }
.menu > ul > li { position: relative; }
.menu > ul > li > a { display: block; color: var(--blanc); font-weight: 600; padding: 16px 14px; font-size: 16px; }
.menu > ul > li > a:hover { background: var(--bleu-fonce); text-decoration: none; }
.menu li ul { display: none; position: absolute; top: 100%; left: 0; min-width: 300px; background: var(--blanc); box-shadow: var(--ombre); border-radius: 0 0 10px 10px; padding: 8px 0; z-index: 20; flex-direction: column; }
.menu li:hover > ul, .menu li:focus-within > ul { display: flex; }
.menu li ul a { display: block; padding: 9px 18px; color: var(--texte); font-size: 15px; }
.menu li ul a:hover { background: var(--bleu-pale); color: var(--bleu); text-decoration: none; }
.menu .burger { display: none; }

/* Fil d'Ariane */
.ariane { font-size: 13px; padding-block: 10px; color: #8A94A3; }
.ariane a { color: var(--bleu-clair); }

/* Bandeau de titre */
.bandeau { background: var(--bleu); color: var(--blanc); }
.bandeau .conteneur { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding-block: 44px; }
.bandeau h1 { color: var(--blanc); font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: .25em; }
.bandeau p { margin: 0; font-size: 1.15rem; color: #DCEBF8; }
.bandeau .logo-bureau { background: var(--blanc); border-radius: var(--rayon); padding: 14px 18px; box-shadow: var(--ombre); max-width: 240px; }
.bandeau .logo-bureau img { display: block; max-height: 90px; width: auto; margin: 0 auto; }

/* Sections et cartes */
.section { padding-block: 48px; }
.section.grise { background: var(--gris); }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 28px; box-shadow: var(--ombre); min-width: 0; }
.carte h2 { font-size: 1.5rem; }

/* Label */
.label-encart { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: -28px; position: relative; }
.label-encart p { margin: 0; font-size: 1.05rem; }
.label-encart img { width: 120px; }
.label-encart .numero { font-size: 13px; color: #8A94A3; margin-top: 6px; }

/* Atouts */
.atouts { list-style: none; padding: 0; margin: 0 0 12px; }
.atouts li { padding: 6px 0 6px 30px; position: relative; }
.atouts li::before { content: "✓"; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--vert); color: var(--blanc); font-size: 12px; display: grid; place-items: center; font-weight: 700; }
.horaires { width: 100%; border-collapse: collapse; }
.horaires td { padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.horaires td:first-child { font-weight: 600; color: var(--bleu-nuit); width: 40%; }

/* Zone géographique */
.zone { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: start; }
.zone .chiffre { font-size: 2.6rem; font-weight: 700; color: var(--bleu); line-height: 1; }
.carte-map { height: 420px; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--ligne); }
/* Leaflet empile ses calques à 400 et ses boutons à 1000 : sans contexte propre, la carte passe
   par-dessus l'en-tête collant (z-index 30) quand on fait défiler la page. */
.leaflet-container { z-index: 0; }
.communes-liste { list-style: none; padding: 0; margin: 12px 0 0; }
.communes-liste li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--ligne); padding: 5px 0; font-size: 15px; }
.note { font-size: 13px; color: #8A94A3; }

/* Contact */
.contact dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.contact dt { font-weight: 600; color: var(--bleu-nuit); }
.contact dd { margin: 0; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Avis */
.avis-resume { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.avis-resume .note-g { font-size: 2.4rem; font-weight: 700; color: var(--bleu-nuit); }
.etoiles { color: #F4B400; letter-spacing: 2px; }
.etoiles .vide { color: #D7DCE2; }
.avis-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; align-items: start; }
.avis-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 12px; padding: 18px; font-size: 15px; }
.avis-carte .auteur { font-weight: 600; color: var(--bleu-nuit); }
.avis-carte .date { font-size: 13px; color: #8A94A3; }
.precaution { background: var(--bleu-pale); border-left: 4px solid var(--bleu-clair); padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 20px; }

/* Présentation */
.presentation { max-width: none; }

/* Agents et autres syndics */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; list-style: none; padding: 0; }
/* La photo de l'agent, quand c'en est une (tools/photos_agents.py, 09/11/2026). */
.agents li.avec-photo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.agents .photo-agent { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.autres { list-style: none; padding: 0; columns: 2; column-gap: 32px; }
.autres li { padding: 4px 0; break-inside: avoid; }

/* Appel à l'action « Trouvez un bon syndic » */
.appel { background: var(--bleu-pale); border-radius: var(--rayon); padding: 36px; text-align: center; }
.appel p { max-width: 700px; margin: 0 auto 20px; }

/* Pied de page */
.pied { background: var(--bleu-nuit); color: #C9D7E6; padding-block: 48px 24px; font-size: 15px; margin-top: 48px; }
.pied a { color: var(--blanc); }
.pied .colonnes { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pied h3 { color: var(--blanc); font-size: 1.1rem; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { padding: 3px 0; }
.pied .bas { border-top: 1px solid rgba(255,255,255,.15); margin-top: 32px; padding-top: 16px; font-size: 13px; text-align: center; }
.pied img.label-pied { width: 90px; }

@media (max-width: 860px) {
  .bandeau .conteneur, .zone, .label-encart { grid-template-columns: 1fr; }
  .pied .colonnes { grid-template-columns: 1fr 1fr; }
  .autres { columns: 1; }
  .menu ul { justify-content: flex-start; }
  .menu > ul > li > a { padding: 12px 10px; font-size: 15px; }
  .entete .cta { padding: 10px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
:focus-visible { outline: 3px solid var(--bleu-clair); outline-offset: 2px; }

/* Pages de contenu (articles, pages, questions) reprises de WordPress */
.contenu { max-width: 1180px; margin: 0 auto; padding-block: 40px; }
.contenu h1 { font-size: clamp(1.9rem, 3.6vw, 2.4rem); }
.contenu h2 { margin-top: 1.6em; }
.contenu h3 { margin-top: 1.3em; }
.contenu p, .contenu li { color: var(--texte); }
.contenu img { border-radius: 10px; height: auto; display: block; margin: 16px 0; max-width: min(100%, 560px); }
.contenu table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; display: block; overflow-x: auto; }
.contenu th, .contenu td { border: 1px solid var(--ligne); padding: 8px 10px; text-align: left; vertical-align: top; }
.contenu th { background: var(--bleu-pale); color: var(--bleu-nuit); }
.contenu blockquote { border-left: 4px solid var(--bleu-clair); margin: 20px 0; padding: 8px 18px; background: var(--bleu-pale); border-radius: 8px; }
.contenu a { text-decoration: underline; text-underline-offset: 2px; }
.contenu .publie { font-size: 14px; color: #8A94A3; }
.grille-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; list-style: none; padding: 0; }
.grille-liens li a { display: flex; justify-content: space-between; gap: 8px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 10px; padding: 12px 16px; color: var(--bleu-nuit); }
.grille-liens li a:hover { border-color: var(--bleu-clair); text-decoration: none; }
.grille-liens .compte { color: #8A94A3; font-size: 14px; }
/* L'ordre alphabétique se lit de haut en bas, colonne après colonne (Patrick, 30/10/2026). */
.grille-liens.en-colonnes { display: block; columns: 4 240px; column-gap: 12px; }
.grille-liens.en-colonnes li { break-inside: avoid; margin-bottom: 12px; }
/* La carte des communes à côté de la liste ; au-dessus sur un téléphone, avec moins de noms. */
.communes-carte { margin: 12px auto 24px; max-width: 1000px; }
.grille-liens.communes-suite { margin: 0; }
.carte-communes { margin: 0; }
.carte-communes svg { display: block; width: 100%; height: auto; }
.carte-communes path { stroke: #fff; stroke-width: 1; }
.carte-communes .cc-page { fill: #b1dae0; }
.carte-communes .cc-vide { fill: #E6E9ED; }
.carte-communes a:hover .cc-page, .carte-communes a:focus .cc-page { fill: var(--bleu-clair); }
.carte-communes .cc-point { fill: var(--bleu); stroke: #fff; stroke-width: 1.5; }
.carte-communes a:hover .cc-point { fill: var(--bleu-clair); }
.carte-communes text { text-anchor: middle; pointer-events: none; }
.carte-communes .cc-nom { font-size: 13px; font-weight: 600; fill: var(--bleu-nuit); }
.carte-communes .cc-autre { font-size: 10.5px; fill: #8A94A3; }
.carte-communes .cc-mobile { display: none; font-size: 26px; font-weight: 600; fill: var(--bleu-nuit); }
.carte-communes figcaption { font-size: 12px; color: #8A94A3; margin-top: 8px; }
.cc-lg { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin: 0 5px 0 8px; vertical-align: -1px; }
.cc-lg:first-child { margin-left: 0; }
.cc-lg-page { background: #b1dae0; }
.cc-lg-vide { background: #E6E9ED; }
@media (max-width: 760px) {
  .carte-communes { margin-bottom: 12px; }
  .carte-communes .cc-nom, .carte-communes .cc-autre { display: none; }
  .carte-communes .cc-mobile { display: inline; }
}
.tableau-label { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau-label th, .tableau-label td { border-bottom: 1px solid var(--ligne); padding: 10px 8px; text-align: left; }
.tableau-label th { color: var(--bleu-nuit); font-weight: 600; background: var(--bleu-pale); }
.tableau-label .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.defile { overflow-x: auto; }

/* Accueil */
.bandeau.accueil .conteneur { padding-block: 56px; }
.bandeau.accueil h2.sous { color: var(--blanc); font-size: 1.4rem; margin-top: 18px; }
.bandeau.accueil p { color: #DCEBF8; max-width: 640px; }
.bandeau.accueil p a { color: var(--blanc); text-decoration: underline; }
.bandeau.accueil .actions { margin-top: 24px; }
.bandeau.accueil .logo-bureau img { max-height: 160px; }
/* Sous le label : l'appel vers le formulaire ; sous la recherche : la recherche par nom (09/11/2026). */
.bandeau.accueil .logo-bureau .label-appel { color: var(--texte, #33475B); margin: 12px 0 0; text-align: center; font-size: .9rem; line-height: 1.35; max-width: 220px; }
.bandeau.accueil .logo-bureau .label-appel strong { display: block; color: var(--titre); font-size: 1rem; margin-bottom: 4px; }
.bandeau.accueil .logo-bureau .label-appel span { display: block; margin-bottom: 8px; }
.bandeau.accueil .logo-bureau .label-appel a { color: var(--rouge, #C8102E); font-weight: 700; text-decoration: none; }
.bandeau.accueil p.recherche-nom { margin: 10px 0 0; font-size: .95rem; }
.cartes .carte h3 a { color: var(--titre); }

/* Formulaires (12/10/2026) : demande d'offre en trois étapes, message à un bureau, contact,
   question, newsletter. Envoyés par formulaires.js vers l'application PHP (/api/). */
.formulaire { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 28px; }
.formulaire-section .formulaire { max-width: 860px; margin: 0 auto; }
.formulaire h2 { margin-bottom: .3em; }
.formulaire .intro { margin-top: 0; }
.formulaire .champ { display: block; margin: 0 0 18px; border: 0; padding: 0; min-width: 0; }
.formulaire .champ > span, .formulaire legend { display: block; font-weight: 600; color: var(--bleu-nuit); margin-bottom: 6px; font-size: 16px; padding: 0; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select, .formulaire textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--texte); background: var(--blanc);
  border: 1px solid #CBD3DC; border-radius: 10px; padding: 11px 14px; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(86, 174, 255, .25); }
.formulaire .options { display: grid; gap: 8px; }
.formulaire .option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 14px; cursor: pointer; background: var(--blanc); }
.formulaire .option:hover { border-color: var(--bleu-clair); background: var(--bleu-pale); }
.formulaire .option:has(input:checked) { border-color: var(--bleu); background: var(--bleu-pale); }
.formulaire .option input, .formulaire .case input { margin-top: 5px; accent-color: var(--bleu); flex: none; }
.formulaire .case { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; font-size: 15px; }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.formulaire .etape-titre { font-family: var(--bouton); color: var(--bleu); font-weight: 700; margin: 0 0 16px; }
.formulaire .etape-titre span { display: inline-block; background: var(--bleu-pale); border-radius: 50px; padding: 2px 10px; margin-right: 6px; font-size: 14px; }
.formulaire .etape-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.formulaire .etape-actions .bouton:only-child { margin-left: auto; }
.formulaire:not(.par-etapes) [data-suivant], .formulaire:not(.par-etapes) [data-precedent] { display: none; }
.formulaire:not(.par-etapes) .etape + .etape { border-top: 1px solid var(--ligne); padding-top: 18px; margin-top: 8px; }
.bouton.secondaire { background: var(--blanc); color: var(--bleu); border: 1px solid var(--bleu-clair); }
.bouton.secondaire:hover { background: var(--bleu-pale); color: var(--bleu); }
button.bouton { border: 0; cursor: pointer; }
button.bouton:disabled { opacity: .6; cursor: wait; }
.formulaire .en-erreur > span, .formulaire .en-erreur legend { color: var(--rouge); }
.formulaire .en-erreur input, .formulaire .en-erreur textarea, .formulaire .en-erreur .option { border-color: var(--rouge); }
.form-retour:empty { display: none; }
.form-retour.erreur { color: var(--rouge); font-weight: 600; }
.form-merci { font-size: 1.15rem; color: var(--vert); font-weight: 600; margin: 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-fiche { align-items: start; }
@media (max-width: 640px) {
  .formulaire { padding: 20px 16px; }
  .formulaire .deux { grid-template-columns: 1fr; }
}
.conteneur.etroit { max-width: 860px; }
.formulaire [hidden] { display: none !important; }

/* Formulaire de demande d'offre : textes repris de Gravity Forms, barre de progression. */
.formulaire-cadre { max-width: 860px; margin: 0 auto; }
.formulaire-cadre > h2 { text-align: center; }
.formulaire-cadre > .intro { text-align: center; max-width: 720px; margin: 0 auto 24px; }
.formulaire .progression { height: 8px; background: var(--bleu-pale); border-radius: 50px; margin: 0 0 20px; overflow: hidden; }
.formulaire:not(.par-etapes) .progression { display: none; }
.formulaire .progression span { display: block; height: 100%; width: 0; background: var(--bleu-clair); border-radius: 50px; transition: width .3s; }
.formulaire .bloc-texte { background: var(--bleu-pale); border-radius: 10px; padding: 14px 18px; margin: 0 0 18px; font-size: 15px; }
.formulaire .bloc-texte p { margin: 0 0 .5em; }
.formulaire .bloc-texte p:last-child { margin-bottom: 0; }
.formulaire .aide { font-size: 14px; color: #6B7684; margin: -2px 0 8px; }
.formulaire fieldset.champ .deux .champ { margin-bottom: 0; }

/* Archives : dossiers, forum. */
.tete-archive { padding-block: 32px 8px; }
.grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding-block: 16px 32px; }
.carte.article { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte.article .vignette img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carte.article .article-corps { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.carte.article h2 { font-size: 1.2rem; margin-bottom: .4em; }
.carte.article h2 a, .carte.question h2 a { color: var(--titre); }
.carte .date { font-size: 14px; color: #7A8694; margin: 0 0 .6em; }
.carte .plus { margin-top: auto; font-weight: 600; }
.grille-questions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; padding-block: 16px 32px; }
.carte.question { display: flex; flex-direction: column; padding: 22px; }
.carte.question h2 { font-size: 1.15rem; margin-bottom: .4em; }
.carte.question .qui { font-size: 14px; color: #7A8694; margin: 0 0 .8em; }
.carte.question .question-texte { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.puces { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.puces a { display: inline-block; background: var(--bleu-pale); color: var(--bleu); border-radius: 50px; padding: 6px 14px; font-size: 15px; font-weight: 500; }
.puces a:hover { background: var(--bleu); color: var(--blanc); text-decoration: none; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding-block: 8px 40px; }
.pagination a, .pagination .courante { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ligne); }
.pagination .courante { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* Communes, sur le principe Gesti+ : les bureaux en tableau, le formulaire à côté. */
.commune-corps { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; }
.commune-bureaux h2 { margin-top: 32px; font-size: 1.35rem; }
.commune-formulaire { position: sticky; top: 16px; }
.commune-formulaire .formulaire-cadre > h2 { font-size: 1.35rem; text-align: left; }
.commune-formulaire .formulaire-cadre > .intro { text-align: left; font-size: 15px; margin: 0 0 16px; }
.commune-formulaire .formulaire { padding: 20px; }
.commune-formulaire .formulaire .deux { grid-template-columns: 1fr; }
.tableau-bureaux { width: 100%; border-collapse: collapse; background: var(--blanc); font-size: 15px; }
.tableau-bureaux th { text-align: left; background: var(--bleu-pale); color: var(--bleu-nuit); padding: 10px 12px; font-weight: 600; }
.tableau-bureaux td { padding: 12px; border-top: 1px solid var(--ligne); vertical-align: middle; }
.tableau-bureaux tr:hover td { background: #FAFCFE; }
.tableau-bureaux .bureau-logo { width: 110px; }
.tableau-bureaux .bureau-logo img { max-width: 96px; max-height: 56px; width: auto; height: auto; display: block; }
.tableau-bureaux .bureau-nom a { font-weight: 600; color: var(--titre); }
.tableau-bureaux td a { color: inherit; }
.tableau-bureaux .avis-mini { display: block; font-size: 14px; }
.tableau-bureaux .bureau-label { width: 60px; }
.tableau-bureaux .label-tel { display: none; }
.acp h1 { margin-top: 0; }
.acp-syndic { margin: 16px 0; }
@media (max-width: 980px) {
  .commune-corps { grid-template-columns: 1fr; }
  .commune-formulaire { position: static; }
}
@media (max-width: 640px) {
  .tableau-bureaux .bureau-logo, .tableau-bureaux .bureau-label { display: none; }
  /* Sur un téléphone, le label passe sous le nom : la colonne n'y tient pas (Patrick, 01/11/2026). */
  .tableau-bureaux .label-tel { display: block; margin-top: 6px; }
}

/* Articles et pages : les sections Elementor de WordPress, avec leur fond (12/10/2026). */
.article-tete .conteneur { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-block: 48px; }
.article-tete h1 { text-transform: uppercase; font-weight: 500; }
.article-tete h2, .article-tete h3 { color: var(--blanc); font-size: 1.3rem; font-weight: 500; }
.article-tete p { color: var(--blanc); font-size: 1.15rem; }
.article-tete a { color: var(--blanc); text-decoration: underline; }
.article-tete .article-image img { max-width: 380px; max-height: 300px; width: auto; border-radius: var(--rayon); background: var(--blanc); display: block; }
.section-article { padding-block: 44px; }
.section-article.grise { background: var(--gris); }
.section-article.bleu { background: var(--bleu); color: var(--blanc); }
.section-article.bleu h2, .section-article.bleu h3, .section-article.bleu h4 { color: var(--blanc); }
.section-article.bleu a:not(.bouton) { color: var(--blanc); text-decoration: underline; }
.section-article .texte { max-width: 820px; margin: 0 auto; font-size: 18px; line-height: 1.7; }
.section-article .texte.large { max-width: none; }
.section-article .texte > h2:first-child { text-align: center; margin-bottom: .9em; }
.section-article .texte img { border-radius: 10px; }
.section-article .texte table { width: 100%; border-collapse: collapse; margin: 1em 0; background: var(--blanc); color: var(--texte); }
.section-article .texte th, .section-article .texte td { border: 1px solid var(--ligne); padding: 8px 12px; text-align: left; }
.section-article .bouton { margin: 8px 0; }
.section-article p:has(> .bouton:only-child) { text-align: center; }
.deux-colonnes { columns: 2; column-gap: 48px; }
.deux-colonnes p { break-inside: avoid; margin-top: 0; }
@media (max-width: 900px) {
  .article-tete .conteneur { grid-template-columns: 1fr; }
  .article-tete .article-image img { max-width: 260px; }
  .deux-colonnes { columns: 1; }
}

/* ── Thème « principe Gesti+ » aux couleurs ChoisirUnSyndic (Erwin, 12/10/2026) ──────────
   Structure et sobriété de gestiplus.be : en-tête blanche sur une ligne et collante, titres
   sur fond blanc, encadrés teintés au lieu d'aplats, boutons rectangulaires en capitales,
   pied foncé. Palette de la charte Elementor de CUS : #145DA0, #56AEFF, #E12901, #B1DAE0,
   #656363. Ce bloc passe après les règles précédentes et les remplace. */
:root {
  --voile: rgba(177, 218, 224, .22);   /* #B1DAE0 de la charte, en fond d'encadré */
  --trait: #DDE5EC;
  --encre: #0E3A66;                    /* texte fort, pied : le bleu de la charte, assombri */
  --rayon: 6px;
  --ombre: 0 1px 2px rgba(14, 58, 102, .06);
}
body { font-size: 18px; color: var(--texte); }
h1, h2 { color: var(--titre); font-weight: 700; }
h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 2.2vw, 1.65rem); }
h3 { color: var(--bleu); font-weight: 600; }
main p a, .texte p a, .texte li a, .contenu p a, .contenu li a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rouge); }

/* Boutons : rectangles en capitales, rouge plein ; le secondaire est souligné d'un trait. */
.bouton, .entete .cta {
  font-family: var(--corps); font-weight: 600; text-transform: uppercase; letter-spacing: .02em;
  font-size: .82rem; line-height: 1.3; padding: .85rem 1.4rem; border-radius: var(--rayon);
  background: var(--rouge); color: var(--blanc); border: 1px solid var(--rouge); transform: none;
}
.bouton:hover, .entete .cta:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); transform: none; }
.bouton.rouge:hover { background: var(--encre); }
.bouton.secondaire { background: var(--blanc); color: var(--bleu); border-color: var(--bleu); }
.bouton.secondaire:hover { background: var(--voile); color: var(--bleu); }
a.bouton { text-decoration: none !important; }

/* En-tête : logo, menu, bouton sur une ligne ; collante. */
.entete { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--trait); }
.entete-ligne { display: flex; align-items: center; gap: 1rem; padding-block: .55rem !important; }
/* Le logo, plus présent (Erwin, 29/10/2026 : 40 px, deux fois et demie plus petit que sous WordPress, 100 px).
   Il ne rétrécit jamais : sur grand écran, le menu complet comprimait le bloc du logo et l'image
   s'écrasait en largeur, sa hauteur étant fixée (« déformé », Erwin, 29/10/2026). */
.entete .logo { flex: 0 0 auto; }
.entete .logo img { height: 64px; width: auto; max-width: none; object-fit: contain; }
.entete .cta { margin-left: auto; white-space: nowrap; }
.entete .menu { background: none; flex: 1 1 auto; }
.entete .menu > ul { max-width: none; padding: 0; justify-content: flex-start; gap: .1rem; flex-wrap: nowrap; }
.entete .menu > ul > li > a { color: var(--encre); font-weight: 500; font-size: .92rem; padding: .5rem .65rem; border-radius: var(--rayon); white-space: nowrap; }
.entete .menu > ul > li > a:hover { background: var(--voile); color: var(--rouge); }
.entete .menu li ul { top: calc(100% + 4px); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .4rem; box-shadow: 0 8px 24px rgba(14, 58, 102, .13); }
.entete .menu li ul a { color: var(--encre); font-size: .9rem; border-radius: 3px; padding: .5rem .7rem; }
.entete .menu li ul a:hover { background: var(--voile); color: var(--rouge); }
.menu-enveloppe { display: none; }
.menu-bascule { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 .6rem;
  border-radius: var(--rayon); background: var(--bleu); color: var(--blanc); cursor: pointer; list-style: none; }
.menu-bascule::-webkit-details-marker { display: none; }
.menu-bascule span { display: block; height: 2px; background: currentColor; }
.menu-replie { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc); border-bottom: 1px solid var(--trait); box-shadow: 0 10px 24px rgba(14, 58, 102, .1); max-height: 80vh; overflow: auto; }
.menu-replie ul { list-style: none; margin: 0; padding: .4rem 0 1rem; }
.menu-replie li a { display: block; padding: .5rem .2rem; color: var(--encre); font-weight: 500; }
.menu-replie li ul { padding: 0 0 .4rem 1.2rem; }
.menu-replie li ul a { font-weight: 400; color: var(--texte); font-size: .95rem; }
/* L'en-tête complet (logo, menu, Espace syndic, bouton) demande ~1 290 px : plus large que le contenu
   des pages (1 180). Il prend jusqu'à 1 440 px, et le menu complet n'apparaît qu'à partir de 1 350. */
.entete .conteneur { max-width: 1440px; }
@media (max-width: 1350px) {
  .entete .menu { display: none; }
  .menu-enveloppe { display: block; margin-left: auto; }
  .entete-ligne { position: relative; }
  .entete .cta { margin-left: 0; font-size: .72rem; padding: .55rem .8rem; }
}
@media (max-width: 560px) { .entete .cta { display: none; } .entete .logo img { height: 44px; } }

/* Fil d'Ariane discret, titres sur fond blanc. */
.ariane { font-size: .82rem; color: #8A8A8A; padding-top: 1.1rem; }
.ariane a { color: #8A8A8A; }
.bandeau { background: var(--blanc); color: var(--texte); border-bottom: 1px solid var(--trait); }
.bandeau .conteneur { padding-block: 1.6rem 2.2rem; }
.bandeau h1 { color: var(--titre); }
.bandeau p { color: var(--texte); font-size: 1.1rem; }
.bandeau .logo-bureau { box-shadow: none; border: 1px solid var(--trait); }
.bandeau.accueil { background: linear-gradient(180deg, var(--voile), var(--blanc)); }
.bandeau h2.sous { color: var(--bleu); }

/* Articles : le H1 et son image côte à côte (le « duo » de Gesti+), les sections teintées en encadrés. */
.article-tete { border-bottom: 0; }
.article-tete h1 { text-transform: none; color: var(--titre); }
.article-tete h2, .article-tete h3 { color: var(--bleu); }
.article-tete p { color: var(--texte); }
.article-tete a { color: var(--bleu); }
.article-tete .article-image img { border: 1px solid var(--trait); }
.section-article { padding-block: 1.4rem; }
.section-article.bleu, .section-article.grise { background: none; color: var(--texte); }
.section-article.bleu .texte, .section-article.grise .texte {
  background: var(--voile); border-left: 4px solid var(--bleu-clair); border-radius: var(--rayon); padding: 1.6rem 1.8rem; }
.section-article.bleu h2, .section-article.bleu h3, .section-article.bleu h4 { color: var(--titre); }
.section-article.bleu a:not(.bouton) { color: var(--bleu); }
.section-article .texte > h2:first-child { text-align: left; }
.section-article .texte { max-width: none; }

/* Sections et cartes : traits fins, pas d'ombre portée. */
.section { padding-block: 2.6rem; }
.section.grise { background: var(--voile); }
.carte { border-radius: var(--rayon); box-shadow: var(--ombre); }
.formulaire { border-radius: var(--rayon); box-shadow: 0 8px 24px rgba(14, 58, 102, .08); }
.formulaire .option, .formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=tel], .formulaire select, .formulaire textarea { border-radius: var(--rayon); }
.formulaire .bloc-texte { background: var(--voile); border-left: 4px solid var(--bleu-clair); border-radius: var(--rayon); }
.precaution { background: var(--voile); border-radius: var(--rayon); }
.appel { background: var(--voile); border-radius: var(--rayon); }
.puces a { border-radius: var(--rayon); }
.tableau-bureaux th, .tableau-label th { background: var(--voile); color: var(--encre); }

/* Pied foncé, en colonnes. */
.pied { background: var(--encre); color: #CFE1F0; font-size: .88rem; }
.pied h3 { font-size: .95rem; font-weight: 600; }
.pied a:hover { color: var(--bleu-clair); }

/* Le formulaire d'abord (Erwin, 12/10/2026) : incitation sous le nom d'une fiche, recherche
   par commune ou code postal, bouton fixe sur mobile. */
.incitation { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  background: var(--voile); border-left: 4px solid var(--rouge); padding: 16px 20px; margin: 20px 0 0; }
.incitation p { margin: 0; font-weight: 500; color: var(--encre); }
.recherche { display: flex; gap: 8px; margin: 18px 0 8px; max-width: 560px; }
.recherche input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 16px; border: 1px solid #C5D2DE; border-radius: var(--rayon); }
.recherche input:focus { outline: none; border-color: var(--bleu-clair); box-shadow: 0 0 0 3px rgba(86, 174, 255, .25); }
.hors-vue { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.offres-mobile { display: none; }
@media (max-width: 760px) {
  .offres-mobile { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; text-align: center;
    background: var(--rouge); color: var(--blanc); font-weight: 600; text-transform: uppercase; font-size: .9rem; letter-spacing: .02em;
    padding: 14px; border-radius: var(--rayon); box-shadow: 0 6px 20px rgba(14, 58, 102, .25); }
  .offres-mobile:hover { color: var(--blanc); text-decoration: none; }
  body { padding-bottom: 72px; }
  .recherche { flex-direction: column; }
  .commune-corps .commune-formulaire { order: -1; }
}
.bandeau.accueil h2.sous { color: var(--bleu); }
.bandeau.accueil p { color: var(--texte); }
.bandeau.accueil p a { color: var(--bleu); }
.bandeau.accueil .actions .bouton:not(.rouge) { background: var(--blanc); color: var(--bleu); border-color: var(--bleu); }
.bandeau.accueil .logo-bureau { border: 0; background: none; }

/* Carte : secteurs avec leur nombre d'immeubles dans la bulle. */
.secteur { border-radius: 50%; background: rgba(86, 174, 255, .85); border: 2px solid var(--bleu); box-shadow: 0 0 0 4px rgba(86, 174, 255, .25); }
.secteur.groupe { display: flex; align-items: center; justify-content: center; background: var(--bleu); border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 0 5px rgba(20, 93, 160, .25); color: var(--blanc); font: 700 13px/1 var(--corps); }

/* Largeur de lecture (~75 caractères) : le texte ne court pas sur 1 180 px. */
.section-article .texte { max-width: 860px; }
.section-article .texte.large { max-width: none; }
.section-article .texte > h2:first-child { text-align: center; }
.texte-image { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.texte-image figure { margin: 0; position: sticky; top: 90px; }
.texte-image figure img { width: 100%; height: auto; border-radius: var(--rayon); display: block; }
.section-article.bleu .texte.large, .section-article.grise .texte.large { padding: 2rem 2.2rem; }
@media (max-width: 900px) { .texte-image { grid-template-columns: 1fr; } .texte-image figure { position: static; max-width: 420px; } }
.acp-syndic-nom { font-size: 1.25rem; font-weight: 700; color: var(--titre); margin: 0 0 .6rem; }
.acp-syndic-nom a { color: var(--titre); }
.acp-syndic p:empty { display: none; }
.acp-label { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--encre); margin: 0 0 .8rem; }
.acp-label img { display: block; }
.societes { list-style: none; margin: 0; padding: 0; } .societes li { padding: 1px 0; } .contact .note { display: block; margin-top: 4px; }
.absorption { margin: 20px 0 0; padding: 14px 20px; background: #FFF6E5; border-left: 4px solid #E0A100; color: var(--encre); }
.absorption p { margin: 0; }
.absorption a { font-weight: 600; }

/* Mises en avant payantes : places province, bureau vérifié à proximité (maquette 13/10/2026). */
.promo-province { padding-block: 1.6rem 2rem; }
.promo-province h2 { font-size: 1.3rem; }
.promo-commune { margin-bottom: 1.6rem; }
.promo-commune h2 { font-size: 1.15rem; margin-top: 0; }
.promo-commune .promo-grille { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.promo-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.promo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--blanc);
  border: 1px solid var(--trait); border-top: 4px solid var(--bleu); border-radius: var(--rayon); padding: 18px 18px 16px; color: var(--texte); }
.promo:hover { text-decoration: none; box-shadow: 0 8px 24px rgba(14, 58, 102, .12); color: var(--texte); }
.promo-mention { position: absolute; top: 8px; right: 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #8A8A8A; }
.promo-logo { max-height: 54px; max-width: 160px; width: auto; margin-bottom: 4px; }
.promo-nom { font-weight: 700; color: var(--titre); font-size: 1.1rem; }
.promo-ville { font-size: 14px; }
.promo-avis { font-size: 14px; }
.promo-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--encre); }
.promo .bouton { margin-top: 6px; }
.promo-proximite { background: var(--voile); border-left: 4px solid var(--bleu-clair); padding: 20px 22px; border-radius: var(--rayon); }
.promo-proximite h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.promo-proximite p { font-size: 15px; margin: 0 0 12px; }
.promo-proximite .promo-grille { grid-template-columns: repeat(auto-fill, minmax(240px, 300px)); }
/* Sans script, seules les 3 premières annonces (les plus proches) s'affichent ; promo.js fait tourner. */
.promo-grille[data-rotation]:not(.tournee) > .promo:nth-child(n+4) { display: none; }
.promo[hidden] { display: none !important; }
.label-encart { margin-top: 20px; }

/* Avis Google : carrousel horizontal (13/10/2026). */
.avis-carrousel { position: relative; }
.avis-carrousel .avis-grille { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, calc((100% - 54px) / 4)); grid-template-columns: none;
  gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 12px; align-items: stretch; scrollbar-width: thin; }
.avis-carrousel .avis-carte { scroll-snap-align: start; display: flex; flex-direction: column; }
.avis-carrousel .avis-carte p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.avis-carrousel .avis-carte.ouverte p { -webkit-line-clamp: unset; display: block; }
.avis-suite { margin-top: auto; align-self: flex-start; background: none; border: 0; padding: 0; color: var(--bleu); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.avis-fleche { position: absolute; top: 40%; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--trait); background: var(--blanc);
  color: var(--bleu); font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(14, 58, 102, .15); }
.avis-fleche.prec { left: -18px; } .avis-fleche.suiv { right: -18px; }
.avis-fleche:hover { background: var(--bleu); color: var(--blanc); }
@media (max-width: 760px) { .avis-carrousel .avis-grille { grid-auto-columns: 85%; } .avis-fleche { display: none; } }

/* Articles (dossiers), 13/10/2026 : une colonne de lecture de ~70 caractères, le sommaire à côté,
   des intertitres qui respirent ; tableaux, citations et images habillés. */
.art-tete { max-width: 1080px; padding-block: 8px 8px; }
.art-tete h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.15; margin: .2em 0 .4em; max-width: 22ch; max-width: 900px; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: #6B7684; margin: 0 0 22px; }
.art-meta .sep { color: #B8C2CC; }
.art-sujet { background: var(--bleu-pale); color: var(--bleu); padding: 3px 10px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.art-sujet:hover { background: var(--bleu); color: var(--blanc); text-decoration: none; }
.art-couverture { margin: 0 0 8px; }
.art-couverture img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: cover; border-radius: 12px; }
.art-grille { max-width: 1080px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 28px 56px; }
.art-grille.sans-cote { grid-template-columns: minmax(0, 1fr); }
.art-grille.sans-cote .art-corps { width: 100%; justify-self: center; }
.art-cote { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 16px; }
.art-sommaire { border: 1px solid var(--trait); border-radius: 10px; padding: 14px 16px; background: var(--blanc); }
.art-sommaire summary { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--encre); cursor: pointer; list-style: none; }
.art-sommaire summary::-webkit-details-marker { display: none; }
.art-sommaire ol { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: s; max-height: 60vh; overflow: auto; }
.art-sommaire li { counter-increment: s; margin: 0; }
.art-sommaire a { display: grid; grid-template-columns: 22px 1fr; padding: 6px 0; font-size: 14px; line-height: 1.35; color: var(--texte); text-decoration: none; border-top: 1px solid #F0F3F6; }
.art-sommaire li:first-child a { border-top: 0; }
.art-sommaire a::before { content: counter(s); color: var(--bleu-clair); font-weight: 700; }
.art-sommaire a:hover { color: var(--bleu); }
.art-cote-cta { text-align: center; }
.art-corps { max-width: 720px; min-width: 0; overflow-wrap: break-word; font-size: 18.5px; line-height: 1.75; color: #4A4F57; }
.art-corps > :first-child { margin-top: 0; }
.art-corps > p:first-of-type { font-size: 1.12em; color: #3C4249; }
.art-corps p { margin: 0 0 1.15em; }
.art-corps h2 { font-size: clamp(1.35rem, 2.3vw, 1.7rem); margin: 2.1em 0 .6em; padding-top: .2em; scroll-margin-top: 90px; }
.art-corps h3 { font-size: 1.2rem; margin: 1.7em 0 .5em; color: var(--encre); }
.art-corps h4 { font-size: 1.05rem; margin: 1.4em 0 .4em; color: var(--encre); }
.art-corps strong, .art-corps b { color: #2F3640; }
.art-corps a:not(.bouton):not(.gc-bouton-lien) { color: var(--bleu); text-decoration: underline; text-decoration-color: rgba(20, 93, 160, .35); text-underline-offset: 3px; }
.art-corps a:not(.bouton):not(.gc-bouton-lien):hover { text-decoration-color: currentColor; color: var(--rouge); }
.art-corps ul, .art-corps ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.art-corps li { margin: .35em 0; padding-left: .2em; }
.art-corps ul > li::marker { color: var(--bleu-clair); }
.art-corps ol > li::marker { color: var(--bleu); font-weight: 700; }
.art-corps img { display: block; max-width: 100%; height: auto; border-radius: 10px; margin: 1.6em auto; }
.art-corps figure { margin: 1.8em 0; }
.art-corps figcaption { font-size: 14px; color: #8A94A3; margin-top: 8px; text-align: center; }
.art-corps blockquote { margin: 1.6em 0; padding: 16px 22px; background: var(--bleu-pale); border-left: 4px solid var(--bleu); border-radius: 0 10px 10px 0; font-size: 1.02em; color: #3C4249; }
.art-corps blockquote p:last-child { margin-bottom: 0; }
.art-corps table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6em 0; font-size: 15.5px; line-height: 1.5;
  border: 1px solid var(--trait); border-radius: 10px; overflow: hidden; }
@media (max-width: 760px) { .art-corps table { display: block; overflow-x: auto; } }
.art-corps th, .art-corps td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--trait); }
.art-corps th { background: var(--bleu); color: var(--blanc); font-weight: 600; }
.art-corps tr:nth-child(even) td { background: #F7FAFC; }
.art-corps tr:last-child td { border-bottom: 0; }
.art-corps hr { border: 0; border-top: 1px solid var(--trait); margin: 2.4em 0; }
.art-forum { margin-top: 2.4em; padding: 16px 20px; border-radius: 10px; background: var(--gris); font-size: 16px; }
.art-forum p { margin: 0; }
.art-suite h2 { text-align: center; margin-bottom: 1.2em; }
.art-suite-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .art-suite-grille { grid-template-columns: minmax(0, 1fr); } }
.art-suite-carte { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 12px; color: var(--texte); text-decoration: none; transition: box-shadow .2s, transform .2s; }
.art-suite-carte:hover { box-shadow: 0 10px 28px rgba(14, 58, 102, .12); transform: translateY(-2px); text-decoration: none; color: var(--texte); }
.art-suite-carte h3 { font-size: 1.08rem; line-height: 1.35; margin: 0; color: var(--titre); text-wrap: pretty; }
.art-suite-carte p { font-size: 15px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.art-suite-carte .note { margin-top: auto; font-size: 13px; color: #8A94A3; }
.art-reactions { max-width: 720px; margin: 0 auto; font-size: 16px; color: #5B6470; }
@media (max-width: 960px) {
  .art-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 12px; }
  .art-cote { position: static; }
  .art-cote-cta { display: none; }
  .art-sommaire:not([open]) { padding-block: 12px; }
  .art-corps { font-size: 17.5px; width: 100%; }
}

/* Articles mis en forme à la main dans WordPress (guide-copro, gc-*), repris tels quels. */
.guide-copro { color: inherit; }
.gc-encadre { background: #F5F9FC; border-left: 4px solid var(--bleu); padding: 16px 20px; margin: 1.6em 0; border-radius: 0 10px 10px 0; }
.gc-encadre > :last-child { margin-bottom: 0; }
.gc-encadre-attention { border-left-color: var(--rouge); background: #FFF3F0; }
.gc-resume { border: 1px solid #B1DAE0; border-radius: 10px; padding: 18px 22px; margin: 2em 0; background: var(--blanc); }
.gc-resume > :last-child { margin-bottom: 0; }
.gc-figure img { border: 1px solid var(--trait); }
.gc-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 1.6em 0; }
.gc-chiffre { border: 1px solid #B1DAE0; border-radius: 10px; padding: 14px 16px; background: var(--blanc); line-height: 1.4; }
.gc-chiffre b { display: block; font-size: 1.7rem; color: var(--bleu); line-height: 1.15; }
.gc-chiffre span { display: block; font-size: 15px; margin-top: 4px; }
.gc-citation { font-size: 1.3rem; font-weight: 700; color: var(--bleu); border-left: 4px solid var(--bleu); padding: 8px 20px; margin: 1.6em 0; line-height: 1.45; }
.art-corps .gc-table td.n, .art-corps .gc-table th.n { text-align: right; white-space: nowrap; }
.gc-sources { font-size: 14px; color: #8A94A3; border-top: 1px solid var(--trait); padding-top: 1em; margin-top: 2.4em; line-height: 1.6; }
.gc-bouton { text-align: center; margin: 2.2em 0; }
.art-corps a.gc-bouton-lien { display: inline-block; background: var(--rouge); color: var(--blanc); border-radius: var(--rayon); padding: .9rem 1.6rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .02em; font-size: .85rem; text-decoration: none; }
.art-corps a.gc-bouton-lien:hover { background: var(--encre); color: var(--blanc); }
.cs-lead { font-size: 1.12em; color: #3C4249; }
.pied ul + h3 { margin-top: 1.6em; }

/* Pages de guide (types de syndics, BCE, syndic bénévole…) : le gabarit des articles, avec un
   chapô et les sections colorées d'Elementor en encadrés. */
.guide-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding-block: 12px 4px; }
.guide-tete h1 { margin-bottom: .35em; }
.guide-chapo { font-size: 1.15rem; line-height: 1.6; color: #3C4249; max-width: 760px; }
.guide-chapo p { margin: 0 0 .6em; }
.guide-chapo .bouton { margin-top: 6px; }
.guide-tete-img img { display: block; max-width: 260px; max-height: 120px; width: auto; height: auto; }
.encadre-bleu, .encadre-gris { border-radius: 12px; padding: 22px 26px; margin: 2em 0; }
.encadre-bleu { background: var(--bleu-pale); border-left: 4px solid var(--bleu); }
.encadre-gris { background: var(--gris); }
.encadre-bleu > :first-child, .encadre-gris > :first-child { margin-top: 0; }
.encadre-bleu > :last-child, .encadre-gris > :last-child { margin-bottom: 0; }
.art-corps p:has(> .bouton:only-child), .art-corps p:has(> a.bouton) { text-align: left; }
.art-corps .bouton { text-decoration: none; color: var(--blanc); }
.art-corps .cartes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 1em 0 2em; }
.guide .art-corps > p:first-of-type { font-size: inherit; color: inherit; }
@media (max-width: 760px) { .guide-tete { grid-template-columns: 1fr; } .guide-tete-img { order: -1; } .guide-tete-img img { max-width: 180px; } }
/* Formulaire BCE (Partena) */
.prix-ttc { font-size: 1.05rem; margin: 6px 0 14px; }
.prix-ttc strong { color: var(--bleu); font-size: 1.2rem; margin-left: 6px; }
.champ.fichier input[type=file] { padding: 10px; border: 1px dashed var(--trait); border-radius: 8px; background: var(--gris); width: 100%; font-size: 15px; }
.champ.fichier .aide { display: block; font-size: 13px; color: #8A94A3; margin-top: 4px; }
.formulaire-cadre.dans-texte { margin: 1.4em 0 2.4em; font-size: 16px; line-height: 1.5; }

/* Ancres : le haut de la cible ne passe pas sous l'en-tête fixe. */
[id] { scroll-margin-top: 96px; }

/* Questions du forum et maillage par sujet (13/10/2026) */
.question-page .retour { font-size: 14px; margin: 0 0 6px; }
.question-page .art-meta .art-sujet { margin-left: 4px; }
.question-posee { background: var(--gris); border-radius: 12px; padding: 18px 22px; margin-bottom: 1.6em; font-size: .97em; }
.question-posee > :last-child { margin-bottom: 0; }
.maillage { margin: 2.4em 0 0; padding-top: 1.4em; border-top: 1px solid var(--trait); }
.maillage h2 { font-size: 1.25rem; margin: 0 0 .8em; }
.maillage-sujets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1em; }
.maillage-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.maillage-liens a { display: block; padding: 12px 16px; border: 1px solid var(--trait); border-radius: 10px; text-decoration: none !important; color: var(--titre) !important; font-weight: 500; }
.maillage-liens a:hover { border-color: var(--bleu); box-shadow: 0 6px 18px rgba(14, 58, 102, .08); }
.maillage-type { display: inline-block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--blanc); background: var(--bleu); border-radius: 4px; padding: 2px 7px; margin-right: 10px; vertical-align: 2px; }
.art-corps .grille-questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.question-bio { margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--trait); font-size: .95em; }
.question-bio img { max-width: 160px; border-radius: 50%; margin: 0 0 10px; }
/* Sauver et continuer plus tard (formulaire BCE / KBO) */
.etape-actions .sauver { margin-left: auto; font-size: 14px; }
.brouillon { margin-top: 14px; padding: 14px 16px; background: var(--bleu-pale); border-radius: 10px; font-size: 15px; }
.brouillon p { margin: 0 0 8px; }
.brouillon .brouillon-retour { margin: 8px 0 0; font-weight: 600; color: var(--encre); }

/* Revue de Patrick (14/10/2026) */
/* Le sous-menu ne disparaît plus en descendant la souris : un pont invisible couvre l'espace sous le titre. */
.entete .menu li ul::before { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; height: 12px; }
/* Le formulaire d'offre plus large, l'introduction sur une ou deux lignes. */
.formulaire-cadre { max-width: 1080px; }
.formulaire-section .formulaire { max-width: 1080px; }
.formulaire-cadre > .intro { max-width: 980px; }
/* Recherches et filtres */
.outils-liste { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; margin: 4px 0 16px; }
.filtre-liste, .recherche-index input { font: inherit; font-size: 16px; padding: 10px 14px; border: 1px solid var(--trait); border-radius: 10px; min-width: 260px; background: var(--blanc); }
.recherche-index { position: relative; flex: 1 1 320px; max-width: 520px; }
.recherche-index input { width: 100%; }
.recherche-index .resultats { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 6px; background: var(--blanc);
  border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 10px 28px rgba(14, 58, 102, .14); max-height: 420px; overflow: auto; }
.recherche-index .resultats li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 6px; font-size: 15px; }
.recherche-index .resultats li:hover { background: var(--bleu-pale); }
.recherche-index .resultats li span { color: #8A94A3; font-size: 13px; white-space: nowrap; }
.recherche-index .resultats li.rien { color: #8A94A3; }
.bandeau .recherche-index { margin-top: 12px; }
.filtre-vide { color: #8A94A3; font-style: italic; }
.actions.retours { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.carte.publication { padding: 0; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--texte); }
.carte.publication .vignette img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.carte.publication .article-corps { padding: 18px 20px; }
.carte.publication h3 { color: var(--titre); font-size: 1.1rem; margin: 0 0 .4em; }
.faq-formulaire { max-width: 1080px; }
.faq-formulaire .formulaire { max-width: none; }
.faq-avocats img { max-width: 140px !important; border-radius: 50%; }
.actions.centre { justify-content: center; text-align: center; margin-top: 20px; }
.titre-bloc { margin: 1.4em 0 .6em; font-size: 1.35rem; }
/* Contraste des pages annuaire (fiche, commune, province) : bandeau bleu pâle, cartes détachées. */
.bandeau { background: linear-gradient(180deg, #E6F0FA 0%, #F5F9FD 100%); border-bottom: 1px solid #DCE7F2; }
.section .cartes > .carte, .contact-fiche .carte, .label-encart { border: 1px solid var(--trait); box-shadow: 0 4px 16px rgba(14, 58, 102, .07); background: var(--blanc); }
/* Largeurs : sans sommaire, l'en-tête et le texte ont la même colonne ; le chapô n'est plus étroit. */

.guide-chapo { max-width: 900px; }
.guide .formulaire-section { margin-top: 8px; }
/* Nos partenaires (accueil, page Partenariat) */
.partenaires h2 { text-align: center; }
.grille-partenaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; align-items: start; margin-top: 18px; }
.partenaire { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 12px; border-radius: 12px; color: var(--texte); text-decoration: none !important; }
.partenaire:hover { background: var(--bleu-pale); }
.partenaire-logo { height: 90px; display: flex; align-items: center; }
.partenaire-logo img { max-height: 90px; max-width: 170px; width: auto; height: auto; }
.partenaire-legende { font-style: italic; color: #6B7684; font-size: 15px; }
.partenaires.avec-texte .grille-partenaires { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.partenaires.avec-texte .partenaire { border: 1px solid var(--trait); background: var(--blanc); padding: 18px; }
.partenaire-texte { font-size: 14px; line-height: 1.5; color: #4A4F57; }
/* La bannière newsletter */
.bandeau-newsletter { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60; width: min(760px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px; padding: 12px 44px 12px 18px; background: var(--blanc); border: 1px solid var(--trait);
  border-left: 4px solid var(--bleu); border-radius: 12px; box-shadow: 0 10px 30px rgba(14, 58, 102, .18); }
.bandeau-newsletter[hidden] { display: none; }
.bandeau-newsletter p { margin: 0; font-size: 15px; color: var(--encre); flex: 1; }
.bandeau-newsletter .bouton { white-space: nowrap; }
.bandeau-newsletter .fermer { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: #8A94A3; cursor: pointer; }
@media (max-width: 760px) { .bandeau-newsletter { bottom: 78px; flex-direction: column; align-items: flex-start; } }
/* Nos partenaires, en plus compact (Erwin, 14/10/2026 : « trop grand ») */
.partenaires { padding-block: 28px; }
.partenaires h2 { font-size: 1.3rem; margin-bottom: 4px; }
.grille-partenaires { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.partenaire { padding: 8px; gap: 4px; }
.partenaire-logo { height: 52px; }
.partenaire-logo img { max-height: 52px; max-width: 120px; }
.partenaire-legende { font-size: 12.5px; line-height: 1.3; }
.partenaires.avec-texte .grille-partenaires { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.partenaires.avec-texte .partenaire { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; text-align: left; align-items: center;
  column-gap: 14px; row-gap: 2px; padding: 12px 14px; }
.partenaires.avec-texte .partenaire-logo { grid-row: span 2; height: 56px; justify-content: center; }
.partenaires.avec-texte .partenaire-logo img { max-height: 48px; max-width: 96px; }
.partenaires.avec-texte .partenaire-legende { font-style: normal; font-weight: 600; color: var(--encre); font-size: 14px; }
.partenaires.avec-texte .partenaire-texte { font-size: 13px; line-height: 1.45; }
@media (max-width: 760px) { .grille-partenaires { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partenaires.avec-texte .grille-partenaires { grid-template-columns: 1fr; } }
.pied .realise { text-align: center; margin: 10px 0 0; }
.pied .realise img { width: 90px; height: auto; opacity: .85; border-radius: 4px; }
.pied .realise img:hover { opacity: 1; }
.titre-agents { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.titre-agents h2 { margin: 0; }
.logo-agentsimmo img { display: block; height: 28px; width: auto; opacity: .9; }
.logo-agentsimmo:hover img { opacity: 1; }

/* « Nom de votre syndic actuel » : les suggestions sous le champ. */
.choix-syndic { position: relative; }
.choix-syndic .resultats { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; list-style: none; margin: 4px 0 0; padding: 6px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto; }
.choix-syndic .resultats button { display: flex; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 15px; text-align: left; border-radius: 6px; cursor: pointer; color: inherit; }
.choix-syndic .resultats button:hover, .choix-syndic .resultats button:focus { background: var(--bleu-pale); }
.choix-syndic .resultats span { color: #6b7684; font-size: 13px; white-space: nowrap; }

/* Les éléments masqués (filtres, étapes…) le restent, quel que soit leur display (Patrick, 14/10/2026). */
[hidden] { display: none !important; }
/* « Espace syndic » dans l'en-tête, à côté du bouton (Patrick, 14/10/2026). */
.lien-pro { font-size: 14px; font-weight: 600; color: var(--bleu); text-decoration: none; white-space: nowrap; margin-left: auto; margin-right: 14px; }
.lien-pro:hover { text-decoration: underline; }
@media (max-width: 1100px) { .lien-pro { display: none; } }
/* Le logo WEBonWEB, bleu : sur une pastille claire dans le pied de page bleu. */
.realise img { background: #fff; padding: 4px 8px; border-radius: 6px; }

/* La recherche inversée du syndic d'un immeuble (assets/acp.js). */
.recherche-acp { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.recherche-acp input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 10px; flex: 1 1 140px; min-width: 0; }
.recherche-acp input[name="cp"] { flex: 0 1 120px; }
.recherche-acp input[name="num"] { flex: 0 1 100px; }
.recherche-acp { position: relative; }
.recherche-acp .propositions-rue { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; list-style: none; margin: 4px 0 0; padding: 4px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); max-height: 320px; overflow-y: auto; }
.recherche-acp .propositions-rue button { display: block; width: 100%; text-align: left; font: inherit; padding: 9px 12px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--texte); }
.recherche-acp .propositions-rue button:hover, .recherche-acp .propositions-rue button:focus { background: var(--bleu-pale); outline: none; }
.resultats-acp ul { list-style: none; padding: 0; margin: 0 0 12px; }
.resultats-acp li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--ligne); text-decoration: none; }
.resultats-acp li a:hover { background: var(--bleu-pale); }
.resultats-acp li span { font-weight: 600; white-space: nowrap; }

/* Revue de Patrick (2e tour, 14/10/2026) : l'en-tête et le texte des articles et guides alignés sur
   le menu et le fil d'Ariane (même largeur que .conteneur), des titres et des chapeaux qui prennent
   la largeur au lieu de revenir à la ligne tôt ; sans sommaire, le texte reste à gauche, sous le titre. */
.art-tete, .art-grille { max-width: 1180px; }
.art-tete h1 { max-width: 1040px; }
.guide-chapo, .art-tete .art-chapo { max-width: 1040px; }
.art-corps { max-width: 780px; }
.art-grille.sans-cote .art-corps { justify-self: start; max-width: 860px; }

/* Le bandeau newsletter, sur toutes les pages au-dessus du pied (Patrick, 14/10/2026, comme Agentsimmo). */
.bande-newsletter { background: var(--bleu-pale); color: var(--texte); padding-block: 26px; border-top: 1px solid var(--ligne); }
.bande-newsletter .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.bande-texte { flex: 1 1 360px; }
.bande-titre { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; color: var(--bleu); }
.bande-texte p { margin: 0; }
.formulaire.bande { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: none; padding: 0; box-shadow: none; margin: 0; max-width: 560px; }
.formulaire.bande input[type="email"] { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 16px; padding: 11px 14px; border: 1px solid var(--trait); border-radius: 10px; background: var(--blanc); }
.formulaire.bande .bouton { white-space: nowrap; }
.bande-mention { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: #6B7684; }
.bande-mention a { color: var(--bleu); }
.formulaire.bande .form-retour { flex-basis: 100%; margin: 0; color: var(--bleu); font-weight: 600; }
.formulaire.bande .form-retour:empty { display: none; }
/* Les sujets et le champ de recherche des pages d'archive : de l'air entre les deux (Erwin, 14/10/2026). */
.tete-archive .puces { margin-bottom: 20px; }
.tete-archive .recherche-index, .tete-archive .outils-liste { margin-top: 8px; }

/* /syndic/ : la carte cliquable des provinces, couleurs de l'extension « be-map » de WordPress. */
.carte-provinces svg { display: block; width: 100%; max-width: 680px; margin: 0 auto; }
.carte-provinces path { fill: #b1dae0; stroke: #6b8b9e; transition: fill .15s; }
.carte-provinces path.eteinte { fill: #bfbfbf; }
.carte-provinces a:hover path, .carte-provinces a:focus path { fill: #56aeff; }
.carte-provinces a { cursor: pointer; outline: none; }
.carte-provinces text { pointer-events: none; fill: #555; }

/* Les questions sous un dossier : une liste de liens (Erwin, 29/10/2026). */
.liste-questions { list-style: none; padding: 0; margin: 0; }
.liste-questions li { border-bottom: 1px solid var(--ligne); }
.liste-questions a { display: block; padding: 12px 0; font-weight: 600; text-decoration: none; }
.liste-questions a:hover { text-decoration: underline; }

/* Les onglets des pages de sujet : dossiers et questions, avec leur nombre (Patrick, 29/10/2026). */
.onglets-sujet { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.onglets-sujet a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--bleu); border-radius: 50px; color: var(--bleu); font-weight: 600; text-decoration: none; background: var(--blanc); }
.onglets-sujet a:hover { background: var(--bleu-pale); }
.onglets-sujet a span { background: var(--bleu); color: var(--blanc); border-radius: 50px; padding: 1px 9px; font-size: .85em; }
#contenu-sujet .titre-bloc { scroll-margin-top: 110px; }