/*
 * CSS structurelle du thème Fontaine-sous-Jouy.
 * Grille : 1280px de large maximum, gouttières 24px (16px sous 600px).
 * Ruptures : 1280px, 900px, 600px.
 * Aucune animation ni transition de mouvement (contrainte accessibilité) :
 * seuls des changements de couleur au survol sont utilisés.
 */

:root{
  --abricot:#F9C38E;
  --abricot-pale:#FEF4EA;
  --vert:#418C65;
  --vert-fonce:#2F6549;
  --encre:#22352B;
  --texte:#3D4E44;
  /* Rose réservé au repère "Avis importants", pour le distinguer des
     autres sections qui utilisent toutes le même filet abricot. */
  --rose:#FE89B3;
}

body{font-size:18px}

/*
 * Tableaux hérités du contenu importé (horaires, tarifs, listes de
 * commerces...) : ce sont des <table> HTML brutes de l'éditeur classique,
 * souvent plus larges que l'écran sur les petits formats. On les rend
 * défilables horizontalement plutôt que de les laisser déborder de la
 * page.
 */
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/*
 * ...mais jamais avec une hauteur imposée. L'ancien éditeur en a laissé une
 * dizaine, en attribut `style` sur le <table> lui-même (« height: 509px »).
 * Combinée au `display:block` de la règle précédente, elle transforme le
 * tableau en boîte à ascenseur qui cache la majorité de ses lignes : 12 sur
 * 19 sur « Localisation et chiffres clés », et la moitié des liens de
 * « Bulletins municipaux », qui paraissaient donc ne pas fonctionner.
 *
 * Un tableau n'a aucune raison d'avoir une hauteur figée : elle est
 * neutralisée pour tous, ce qui vaut mieux que de reprendre dix pages de HTML
 * à la main. `!important` est nécessaire et suffisant : une déclaration
 * importante d'une feuille de style l'emporte sur un attribut `style`.
 */
main table[style*="height"]{height:auto !important}
/*
 * Même histoire pour les largeurs, en attributs HTML cette fois
 * (`<table width="380">`, `<td width="120">`). Elles datent d'une maquette
 * de 2015 et n'ont plus de rapport avec la place disponible : sur
 * « Urgences », un tableau de 380 px imposait 141 px à la colonne des
 * intitulés, et « Cabinet médical La Croix St Leuffroy » s'y pliait sur
 * quatre lignes, dans une page qui offrait 760 px.
 *
 * On les neutralise pour laisser le navigateur répartir les colonnes selon
 * leur contenu. Les tableaux trop larges restent bornés par le `max-width`
 * et le défilement horizontal de la règle du haut ; les trop étroits
 * s'étalent enfin.
 */
main table[width],
main table[width] td[width]{width:auto !important}

/*
 * Une adresse électronique passe à la ligne d'un bloc plutôt que de se couper
 * à son tiret : « ce.0270134z@ac- / normandie.fr », sur la page de l'école,
 * se lisait comme un mot coupé, et se recopiait sans le tiret. Si l'adresse
 * est plus large que sa colonne, elle se coupe quand même, sans déborder.
 */
main a[href^="mailto:"]{display:inline-block;max-width:100%;overflow-wrap:anywhere}

/* ============ GRILLE ============ */
.fsj-wrap{
  max-width:1280px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;box-sizing:border-box;width:100%;
}
.fsj-wrap--nogutter{padding-left:0;padding-right:0}
.fsj-gutter{padding-left:24px;padding-right:24px;box-sizing:border-box}
@media (max-width:600px){
  .fsj-wrap{padding-left:16px;padding-right:16px}
  .fsj-gutter{padding-left:16px;padding-right:16px}
}

/* ============ BANDE DE MENU ============ */
.bande-menu .wp-block-navigation{width:100%}
/*
 * `gap:0` indispensable : WordPress applique l'espacement entre blocs de
 * theme.json (16px) à toute ligne flexible, y compris cette bande. Les
 * onglets ne se touchaient donc pas, le survol laissait 16px de vert clair
 * de chaque côté, et les filets blancs de séparation flottaient au lieu de
 * séparer deux onglets contigus.
 */
.bande-menu .wp-block-navigation__container{
  display:flex;width:100%;list-style:none;margin:0;padding:0;flex-wrap:nowrap;gap:0;
}
.bande-menu .wp-block-navigation-item{
  flex:1 1 0;min-width:0;position:relative;border-left:1px solid rgba(255,255,255,.22);
}
/*
 * Parts égales, sauf pour un libellé qui n'y tient pas : il prend la largeur
 * de son texte, et les autres se partagent le reste à égalité. Sans ça,
 * « Urbanisme et environnement » (223 px de texte, 27/09/2026) était coupé
 * dans un onglet de 160 px. Premier niveau seulement : dans un sous-menu, un
 * long libellé doit passer à la ligne, pas élargir la boîte de 300 px.
 */
.bande-menu .wp-block-navigation__container > .wp-block-navigation-item{min-width:max-content}
.bande-menu .wp-block-navigation-item:first-child{border-left:0}
.bande-menu .wp-block-navigation-item__content{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-sizing:border-box;
  text-align:center;padding:20px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:"Outfit",sans-serif;font-size:1.05rem;font-weight:600;letter-spacing:.1px;
  color:#fff;text-decoration:none;
}
.bande-menu .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.bande-menu .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content{
  background:var(--vert-fonce);
}
.bande-menu .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{
  background:var(--abricot);color:var(--encre);
}
.bande-menu .wp-block-navigation-submenu__toggle{
  position:absolute;inset:0;width:100%;height:100%;background:none;border:0;opacity:0;cursor:pointer;
}
/*
 * Spécificité alignée sur celle de la CSS cœur de WordPress pour ce même
 * sélecteur (.wp-block-navigation .has-child .wp-block-navigation__submenu-container),
 * qui masque les sous-menus par largeur/hauteur nulles plutôt que par
 * display:none. Sans ce niveau de spécificité, notre min-width/padding
 * l'emportait sur les valeurs nulles du cœur et le sous-menu replié
 * continuait à occuper 300px de large hors écran (débordement horizontal
 * de la page, invisible mais bien réel).
 */
.bande-menu .wp-block-navigation .wp-block-navigation__submenu-container{
  position:absolute;top:100%;left:0;z-index:30;
  background:#fff;padding:0;border-radius:0 0 18px 18px;
  box-shadow:0 14px 30px rgba(34,53,43,.18);border-top:0 solid var(--abricot);text-align:left;
  visibility:hidden;opacity:0;overflow:hidden;width:0;height:0;
}
.bande-menu .wp-block-navigation .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.bande-menu .wp-block-navigation .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
  visibility:visible;opacity:1;overflow:visible;width:300px;height:auto;
  padding:10px;border-top-width:4px;
}
/*
 * Le dernier onglet ouvre son sous-menu vers la gauche : ancré à gauche
 * comme les autres, « Documents » dépassait de 174px hors de l'écran à
 * 1024px, illisible et créant un défilement horizontal. Depuis le 27/09/2026,
 * le dernier onglet est « Contact », sans sous-menu ; la règle reste pour le
 * jour où il en aurait un.
 */
.bande-menu .wp-block-navigation__container > .wp-block-navigation-item:last-child > .wp-block-navigation__submenu-container{
  left:auto;right:0;
}
/*
 * Spécificité portée au niveau de celle du cœur, qui force ces liens en
 * flex centré. Sans ça, les libellés courts (« NATURA 2000 ») se
 * retrouvaient centrés et les longs calés à gauche, en dents de scie.
 */
.bande-menu .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content{
  justify-content:flex-start;text-align:left;padding:9px 14px;border-radius:10px;color:var(--encre);
  font-size:.97rem;font-weight:400;white-space:normal;
}
.bande-menu .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content{
  background:var(--abricot-pale);
}
@media (max-width:900px){
  .bande-menu .wp-block-navigation__container{flex-wrap:wrap}
  .bande-menu .wp-block-navigation-item{flex:1 1 33%;border-top:1px solid rgba(255,255,255,.22)}
  .bande-menu .wp-block-navigation__container > .wp-block-navigation-item{min-width:0}
  .bande-menu .wp-block-navigation-item__content{white-space:normal;padding:12px 6px}
}

/*
 * Sous ~782px, WordPress remplace la bande de menu par un bouton "Ouvrir
 * le menu" qui ouvre un panneau plein écran à fond blanc. Les réglages du
 * bloc ci-dessus (texte blanc, pensés pour la bande verte) s'y appliquaient
 * aussi : texte blanc sur fond blanc, panneau illisible. On reprend
 * l'habillage spécifiquement pour ce panneau - rubriques en gras avec
 * filet abricot, sous-pages en retrait sur fond abricot pâle.
 */
/*
 * Pas de `display` ici : le cœur de WordPress cache déjà ce bouton à
 * partir de 600px via une media query (le menu complet tient dans la
 * bande). Le fixer à `flex` l'aurait emporté sur cette media query
 * (même spécificité, notre feuille chargée après) et affichait le bouton
 * "3 barres" en double des onglets sur desktop.
 */
.bande-menu .wp-block-navigation__responsive-container-open,
.bande-menu .wp-block-navigation__responsive-container-close{
  width:44px;height:44px;align-items:center;justify-content:center;position:relative;
}
.bande-menu .wp-block-navigation__responsive-container-open svg,
.bande-menu .wp-block-navigation__responsive-container-close svg{
  width:28px;height:28px;
}
.bande-menu .wp-block-navigation__responsive-container-open::before{
  content:"";position:absolute;width:18px;height:2px;background:currentColor;
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open{background:#fff}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color:var(--encre);
}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label{
  color:var(--encre);
}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:1.1rem;
  justify-content:flex-start;text-align:left;
  padding:16px 24px;border-bottom:2px solid var(--abricot);
}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  background:var(--abricot-pale);
}
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  font-family:"Nunito Sans",sans-serif;font-weight:400;font-size:1rem;
  padding:13px 24px 13px 40px;border-bottom:1px solid #F4E4D3;
}
/*
 * WordPress met le focus clavier sur "Accueil" dès l'ouverture du panneau
 * (accessibilité standard des boîtes de dialogue). Sans cette règle, il
 * hérite du fond vert foncé prévu pour le survol souris de la bande de
 * menu desktop - un vert qui n'a rien à faire ici et n'apparaît que sur
 * cet élément, au hasard du focus.
 */
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content{
  background:none;
}
/*
 * Dans le panneau, les sous-rubriques sont déjà toutes dépliées en
 * permanence (pas d'accordéon). Mais la règle plus haut qui fait
 * apparaître le sous-menu flottant au survol, sur desktop, s'appliquait
 * aussi ici : au passage de la souris sur "Village", un second bloc (fond
 * blanc, ombre, coins arrondis) surgissait par-dessus la liste déjà
 * visible - d'où l'impression que l'onglet "grossissait" brusquement.
 */
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation__submenu-container,
.bande-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:focus-within > .wp-block-navigation__submenu-container{
  width:auto;height:auto;padding:0;border-top-width:0;box-shadow:none;
}

/* ============ IDENTITÉ ============ */
/*
 * Le dessin du village court derrière toute la bande : derrière le logo, le
 * vide du milieu et les horaires. Il est décoratif, donc en fond CSS et non
 * en balise <img> — rien à annoncer à un lecteur d'écran.
 *
 * Le voile blanc est une couche de dégradé posée AU-DESSUS de la photo dans
 * la même propriété : il rend le texte lisible sans ajouter d'élément ni
 * jouer avec les plans de superposition.
 *
 * 65 %, et ce chiffre ne se règle pas seul : IL VA AVEC LE FICHIER IMAGE.
 *
 * Le seuil de contraste est fixé par le pixel le plus sombre du dessin. Tant
 * que c'était du noir pur — les traits de contour — il fallait un voile de
 * 74 % pour que le texte courant tienne 4,5:1, et le dessin restait pâle.
 * L'image livrée ici a donc son point noir relevé à 70 et sa saturation
 * portée à 1,25 : les contours deviennent gris foncé, les couleurs
 * remontent, et un voile bien plus léger suffit. Le dessin passe de 26 % à
 * 35 % de présence, soit un tiers de couleur en plus.
 *
 * Mesuré sur les fichiers RÉELLEMENT servis, après compression :
 *   jpg  pixel le plus sombre (58,64,60) → texte 4,64:1  encre 6,82
 *   webp pixel le plus sombre (59,59,61) → texte 4,57:1  encre 6,72
 * Seuils RGAA : 4,5:1 pour le texte courant, 3:1 pour le téléphone (gras
 * 20,8 px, donc « grand texte »). Le téléphone était en vert foncé, à 3,57 :
 * conforme, mais la mairie le trouvait peu lisible sur le dessin. Il est en
 * encre depuis le 27/09/2026, comme le nom de la commune.
 *
 * ⚠ Mesurer AVANT compression ne suffit pas : le JPEG recrée des pixels plus
 * sombres que le plancher qu'on a posé. Une première tentative à 65 % sur une
 * image plancher 55 est tombée à 4,30:1 pour cette seule raison.
 *
 * Donc : ne pas rebaisser ce voile sans régénérer l'image, et ne pas
 * remplacer l'image sans revérifier le voile. Le script de génération est
 * dans le message de la session du 18/09/2026.
 *
 * La couleur de fond blanche reste dessous : si la photo ne charge pas, la
 * bande est blanche et le texte reste lisible, au lieu de virer au gris.
 */
.identite{
  border-bottom:1px solid #EDF2EF;
  background-color:#fff;
  background-image:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),url(../images/village-accueil.jpg);
  background-image:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),image-set(url(../images/village-accueil.webp) type("image/webp"), url(../images/village-accueil.jpg) type("image/jpeg"));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/*
 * `:not(.fsj-wrap)` est indispensable : sans lui, cette règle (2 classes)
 * l'emporte sur `.fsj-wrap{max-width:1280px}` (1 classe) et la bande
 * identité est la seule à sortir de la grille. Elle s'étale alors sur
 * toute la largeur de l'écran et `space-between` plaque le logo et les
 * horaires contre les deux bords - d'autant plus loin que l'écran est large.
 */
.identite .wp-block-group:not(.fsj-wrap){max-width:100%}
.identite .nom{font-family:"Outfit",sans-serif;font-size:1.75rem;font-weight:700;color:var(--encre);line-height:1.1;margin:0}
.identite .baseline{font-size:.98rem;margin:0}
.identite .pratique{text-align:right;max-width:100%;box-sizing:border-box}
.identite .pratique p{margin:0 0 4px}
.identite .tel{font-family:"Outfit",sans-serif;font-size:1.3rem;font-weight:700;color:var(--encre)}
.identite .horaires-resume{font-size:.95rem}
.identite .recherche{margin-top:8px;max-width:100%}

.pratique-ligne-haut{font-size:.9rem;margin:0 0 6px}
.fsj-separateur{color:#9AAAA1}
.fsj-statut{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--encre)}
.fsj-statut-detail{font-weight:400}
.fsj-statut-puce{width:9px;height:9px;border-radius:50%;display:inline-block}
.fsj-statut-ouvert .fsj-statut-puce{background:var(--vert)}
.fsj-statut-ferme .fsj-statut-puce{background:#E9A867}

/*
 * Le bloc Recherche natif place la bordure visible sur
 * .wp-block-search__inside-wrapper (pas sur le champ texte) quand le
 * bouton est "à l'intérieur" - cibler seulement .wp-block-search__input
 * laissait la bordure grise par défaut du cœur de WordPress s'afficher.
 * On reprend l'habillage au bon endroit, en pilule, et on rend l'ensemble
 * flexible plutôt que figé à 190px pour qu'il ne déborde plus sur mobile.
 */
.identite .recherche .wp-block-search__inside-wrapper{
  border:2px solid #E2EAE5;border-radius:999px;background:#fff;padding:3px;
  max-width:100%;box-sizing:border-box;
}
.identite .recherche .wp-block-search__input{
  border:none;padding:7px 14px;font-size:.96rem;width:190px;max-width:100%;
  background:transparent;min-width:0;
}
.identite .recherche .wp-block-search__input:focus{outline:none}
.identite .recherche .wp-block-search__button{
  border:0;background:var(--vert);color:#fff;border-radius:999px;padding:8px 20px;font-weight:700;font-size:.95rem;
  flex-shrink:0;
}
.identite .recherche .wp-block-search__button:hover{background:var(--vert-fonce)}
@media (max-width:900px){
  .identite .pratique{text-align:left}
}
@media (max-width:600px){
  .identite .nom{font-size:1.4rem}
  .identite .recherche .wp-block-search__input{width:auto;flex:1 1 auto}
}

/* ============ PANNEAUPOCKET + AVIS IMPORTANTS (deux colonnes) ============ */
.pp-avis{align-items:flex-start;gap:30px;flex-wrap:wrap}
/* Largeur figée, calée sur le gabarit du widget PanneauPocket : il ne
   s'élargit pas, l'étirer laisserait du vide dans son cadre. */
.pp-col-widget{flex:0 0 330px;max-width:100%}
/* Rendez-vous remonte ici, à côté de PanneauPocket (demande du maire,
   18/09/2026). Base étroite mais compressible : trois titres et leurs dates
   n'ont pas besoin de plus, et Avis importants garde ainsi le reste. */
.pp-col-rdv{flex:1 1 240px;min-width:0;max-width:320px}
.pp-col-avis{flex:4 1 420px;min-width:0}
.pp .puce{background:var(--vert);color:#fff;border-radius:999px;padding:4px 15px;font-size:.85rem;font-weight:700;display:inline-block;margin:8px 0 12px}
.pp-widget{display:flex;justify-content:center}
.pp-widget iframe{max-width:100%}
.pp-repli{font-size:.85rem;text-align:center;margin-top:8px}
@media (max-width:900px){
  .pp-avis{flex-direction:column}
  .pp-col-widget,.pp-col-rdv,.pp-col-avis{flex-basis:auto;width:100%;max-width:100%}
}

/* ============ TÊTES DE SECTION ============ */
.tete{border-bottom:3px solid var(--abricot);padding-bottom:8px;margin-bottom:18px;width:100%}
.tete h2{margin:0}
.tete .tout{font-weight:700;font-size:.96rem;margin:0}

/* ============ AVIS IMPORTANTS ============ */
/* Seule section dont le repère est rose plutôt qu'abricot, pour la
   distinguer visuellement des autres (Rendez-vous, Travaux...). */
.pp-col-avis .tete{border-bottom-color:var(--rose)}
.pp-col-avis .tete .tout a{color:#C8447E}
.une-visuel{border-radius:24px;overflow:hidden;background:var(--abricot-pale);aspect-ratio:16/9}
.une .wp-block-post-title{font-family:"Outfit",sans-serif;font-size:1.6rem;font-weight:700;margin:14px 0 6px}
.une .wp-block-post-title a{color:var(--encre);text-decoration:none}
.une .wp-block-post-title a:hover{text-decoration:underline}
.wp-block-post-date{font-size:.86rem;color:#6E7F75}

.autres .wp-block-post-template{list-style:none;margin:0;padding:0}
.autres li{padding:14px 0;border-bottom:1px solid #EDF2EF}
.autres li:first-child{padding-top:0}
.autres .wp-block-post-title{font-family:"Outfit",sans-serif;font-weight:600;font-size:1.08rem;margin:0}
.autres .wp-block-post-title a{color:var(--encre);text-decoration:none}
.autres .wp-block-post-title a:hover{text-decoration:underline}
.autres .wp-block-post-date{display:block;margin-top:2px}

@media (max-width:900px){
  .une.wp-block-columns{flex-wrap:wrap}
}

/*
 * Retirées le 18/09/2026, à la demande du maire : la bande verte « Vos
 * démarches en un clic » et ses huit tuiles, et la section « Travaux ».
 * « Rendez-vous » a rejoint la bande abricot, à côté de PanneauPocket.
 * Les règles `.demarches`, `.grille-tuiles`, `.tuile` et `.duo` n'avaient
 * plus aucun élément à habiller — vérifié dans templates/ et parts/.
 */

/* ============ CONTACTER LA MAIRIE ============ */
.mairie.wp-block-columns{border-radius:26px;padding:28px 32px;gap:30px;margin-top:34px}
.mairie .intitule{font-family:"Outfit",sans-serif;font-weight:700;color:var(--encre);margin:0 0 4px}
.mairie .tel{font-family:"Outfit",sans-serif;font-size:1.45rem;font-weight:700;color:var(--vert-fonce);margin:0 0 8px}
@media (max-width:900px){
  .mairie.wp-block-columns{flex-wrap:wrap}
}

/* ============ BOUTONS ============ */
.bouton.wp-block-button .wp-block-button__link{
  background:var(--vert);color:#fff;border-radius:999px;padding:11px 24px;
  font-family:"Outfit",sans-serif;font-weight:600;text-decoration:none;
}
.bouton.wp-block-button .wp-block-button__link:hover{background:var(--vert-fonce)}
.bouton-pale.wp-block-button .wp-block-button__link{
  background:var(--abricot);color:var(--encre);border-radius:999px;padding:10px 22px;
  font-family:"Outfit",sans-serif;font-weight:600;text-decoration:none;
}

/* ============ PIED DE PAGE ============ */
/*
 * Liens en blanc, comme le texte. Ils prenaient la couleur des liens du site,
 * le vert foncé, qui sur le fond encre ne donnait que 1,9:1 — et au survol
 * l'encre, sur l'encre : invisibles. Retiré à la demande de la mairie,
 * 27/09/2026.
 *
 * Dans les listes et la ligne du bas, la place suffit à dire que ce sont des
 * liens. Le seul lien posé dans un paragraphe, « Bulletins municipaux »,
 * ressemblerait au texte blanc au-dessus de lui : il reste souligné.
 */
footer.wp-block-group a{color:#fff;text-decoration:none}
footer.wp-block-group a:hover{color:#fff;text-decoration:underline}
.pied p a{text-decoration:underline;text-underline-offset:3px}
.pied p a:hover{text-decoration-thickness:2px}
.pied.wp-block-columns{gap:28px}
.pied h3{color:#fff;font-size:1rem;margin-bottom:10px}
/* Adresse et téléphone viennent des réglages, donc en paragraphes séparés
   plutôt qu'en une seule ligne : on resserre pour garder le bloc compact. */
.pied p{margin:0 0 6px}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{padding:3px 0}
.bas{border-top:1px solid rgba(255,255,255,.2);margin-top:24px;padding-top:14px;font-size:.88rem}
.bas p{margin:0}
/* La signature ferme la ligne, repoussée contre le bord droit : c'est une
   mention de conception, pas un lien légal de plus, et l'aligner avec les
   autres la ferait lire comme tel. Elle repasse à la ligne avec le reste
   quand la place manque. */
.bas .conception{margin-left:auto;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .pied.wp-block-columns{flex-wrap:wrap}
}

/* ============ TABLEAUX DE COUPLES : FICHE, CONTACTS, NUMÉROS ============ */
/*
 * Trois familles de petits tableaux « intitulé / valeur », refaits en blocs
 * Tableau natifs pour rester modifiables par un agent dans l'éditeur :
 *
 *   .fsj-fiche             les chiffres clés de la commune, quatre tableaux
 *                          côte à côte dont les intitulés doivent s'aligner
 *   .fsj-contacts          des annuaires : intitulé long, numéro court
 *   .fsj-urgences-numeros  les numéros d'urgence, où le numéro passe devant
 *
 * Ce ne sont pas des données à balayer mais des couples à lire : le
 * défilement horizontal posé plus haut sur les tableaux hérités ne leur sert
 * à rien et leur collait un ascenseur parasite. On les repasse en tableau
 * normal.
 */
.fsj-fiche .wp-block-table,
.fsj-contacts .wp-block-table{margin:0}
.fsj-fiche table,
.fsj-contacts table,
.fsj-urgences-numeros table{
  display:table;width:100%;overflow:visible;
  border-collapse:collapse;
}
/* `border:0` avant le filet du bas : la CSS du bloc Tableau du cœur de
   WordPress cerne chaque cellule sur ses quatre côtés, ce qui dessine une
   grille de tableur là où on ne veut qu'un filet de séparation. */
.fsj-fiche td,
.fsj-contacts td{
  padding:8px 0;border:0;border-bottom:1px solid #EDF2EF;
  vertical-align:top;font-size:1rem;
}
.fsj-fiche tr:last-child td,
.fsj-contacts tr:last-child td{border-bottom:0}
.fsj-fiche .wp-block-column,
.fsj-contacts .wp-block-column{margin-bottom:22px}
.fsj-fiche h3{margin:0 0 4px}
.fsj-contacts h2{margin:0 0 8px}

/* Fiche : colonne d'intitulés à largeur fixe. Sans elle, chaque tableau cale
   la sienne sur son plus long intitulé et les quatre ne s'alignent plus entre
   eux, ce qui se voit immédiatement sur deux colonnes côte à côte. */
.fsj-fiche td:first-child{
  width:46%;padding-right:16px;
  font-weight:600;color:var(--encre);
}

/* Annuaires : c'est le NUMÉRO qui est calibré, pas l'intitulé — l'inverse de
   la fiche. Les numéros font tous la même longueur, les intitulés vont de
   « Collecte des déchets » à « Cabinet médical La Croix-Saint-Leufroy » : leur
   imposer une largeur fixe les plierait sur trois lignes pour rien.
   `nowrap` empêche un numéro de se couper en fin de ligne. */
.fsj-contacts td:last-child{
  width:9.5em;padding-left:14px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/*
 * Les numéros d'urgence, sur la page qu'on ouvre justement pour eux : le
 * numéro passe devant, dans la police des titres et à la taille d'un
 * sous-titre. `tabular-nums` aligne les chiffres en colonne — sans lui, le
 * « 1 » est plus étroit que les autres et la liste ondule.
 *
 * Largeur de colonne en `em` et non en pourcentage : elle est calée sur
 * « 116 117 », le plus long, et doit tenir même quand le tableau est étroit.
 *
 * Le tableau est borné : sept intitulés courts étalés sur 760 px laissent un
 * grand vide à droite de « Pompiers » et la liste se disloque.
 */
.fsj-urgences-numeros{max-width:30em}
.fsj-urgences-numeros td{
  padding:10px 0;border:0;border-bottom:1px solid #EDF2EF;
  vertical-align:baseline;
}
.fsj-urgences-numeros tr:last-child td{border-bottom:0}
.fsj-urgences-numeros td:first-child{
  width:6.5em;padding-right:18px;white-space:nowrap;
  font-family:"Outfit",sans-serif;font-weight:700;font-size:1.3rem;
  color:var(--vert-fonce);font-variant-numeric:tabular-nums;
}

/* Année de recensement, unité d'origine : utile, mais ça n'est pas la donnée.
   L'ancienne page l'écrivait en <sub> à 8px, illisible. */
.fsj-precision{color:#6B7C72;font-size:.9em}
.fsj-fiche figcaption{color:#6B7C72;font-size:.88rem;margin-top:8px}
.fsj-fiche-tete figcaption{color:#6B7C72;font-size:.92rem}

/* ============ LISTES DE DOCUMENTS ============ */
/*
 * Délibérations, comptes rendus : des listes de PDF numérotés, souvent
 * cinquante par année. Le numéro tient sa propre colonne et l'intitulé la
 * sienne, pour qu'on balaye la liste du regard au lieu de la lire.
 *
 * `display:flex` sur le lien plutôt que sur la ligne : le numéro et
 * l'intitulé sont tous deux DANS le lien — c'est ce qui rend toute la ligne
 * cliquable, cible confortable sur un téléphone. Un intitulé long se replie
 * alors sous lui-même et non sous le numéro.
 *
 * Le soulignement des liens n'est pas retiré : c'est ce qui les signale comme
 * liens à qui ne distingue pas les couleurs.
 */
.fsj-documents{list-style:none;margin:0 0 32px;padding:0}
.fsj-documents li{padding:7px 0;border-bottom:1px solid #EDF2EF}
.fsj-documents li:last-child{border-bottom:0}
.fsj-documents a{display:flex;gap:14px;align-items:baseline}
.fsj-documents a > strong{
  flex:0 0 auto;min-width:6.5em;
  font-variant-numeric:tabular-nums;font-weight:600;
}
@media (max-width:600px){
  /* Sous 600px, la colonne de numéros mange la moitié de la largeur utile :
     le numéro repasse au-dessus de son intitulé. */
  .fsj-documents a{display:block}
  .fsj-documents a > strong{display:block;min-width:0}
}
/*
 * Une séance dont le compte rendu n'a jamais été mis en ligne. L'entrée reste
 * — la faire disparaître effacerait la trace que le conseil s'est tenu — mais
 * elle ne doit pas se lire comme un lien qu'on aurait mal cliqué : d'où le
 * gris et la mention explicite plutôt qu'une ligne muette.
 */
.fsj-doc-absent{color:#6B7C72}
.fsj-doc-absent em{font-size:.92em}

/* ============ TABLEAUX DE DONNÉES ============ */
/*
 * Tableaux à plusieurs colonnes avec une vraie ligne d'en-tête, refaits en
 * blocs Tableau natifs : la liste des hébergements, et ce qui suivra du même
 * genre. À distinguer des couples intitulé/valeur plus bas, qui n'ont pas
 * d'en-tête et se lisent ligne à ligne.
 *
 * Pas de `display:table` ici, volontairement : on laisse la règle
 * `main table{display:block;overflow-x:auto}` du haut du fichier s'appliquer.
 * C'est elle qui rend ces tableaux défilables sur un téléphone, où cinq
 * colonnes ne tiennent pas — et c'est exactement le cas pour lequel elle
 * existe. La forcer en `table` ici ferait déborder la page.
 */
.fsj-tableau{margin:18px 0 26px}
.fsj-tableau table{width:100%;border-collapse:collapse}
.fsj-tableau th{
  text-align:left;vertical-align:bottom;
  padding:0 16px 8px 0;border:0;border-bottom:2px solid var(--vert);
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.95rem;
  color:var(--encre);white-space:nowrap;
}
.fsj-tableau td{
  padding:10px 16px 10px 0;border:0;border-bottom:1px solid #EDF2EF;
  vertical-align:top;font-size:1rem;
}
.fsj-tableau tr:last-child td{border-bottom:0}
.fsj-tableau th:last-child,
.fsj-tableau td:last-child{padding-right:0}
/* Un numéro ne se coupe pas en fin de ligne. */
.fsj-tableau td:nth-child(4){white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============ PLAN D'ACCÈS ============ */
/*
 * Le plan d'accès à la mairie, sur « Comment contacter la mairie ? ».
 *
 * Il suit la colonne de lecture, il n'en sort pas. Première tentative : le
 * laisser s'étendre sur les 1280 px de la grille, au motif qu'une carte a
 * besoin de place. À l'écran c'est raté — le plan occupait 1232 px et 823 px
 * de haut au milieu d'une page dont tout le texte tient dans 760, il écrasait
 * la page au lieu de l'illustrer.
 *
 * `content-size` plutôt que 760px en dur : si la largeur de lecture change
 * dans theme.json, le plan suit sans qu'on y pense.
 *
 * Sur un téléphone il tombe à 345 px, où la carte n'est plus déchiffrable.
 * C'est assumé : l'information utile est dans la ligne « Par la route »
 * juste en dessous, et dans le texte de remplacement. Le plan y redevient
 * ce qu'il est alors — une illustration — et le lien l'ouvre en pleine
 * taille pour qui veut le détail.
 */
.fsj-plan-acces{
  margin:22px 0 18px;
  max-width:var(--wp--style--global--content-size, 760px);
}
.fsj-plan-acces img{
  display:block;width:100%;height:auto;
  border-radius:18px;border:1px solid #E1EAE5;
}
.fsj-plan-acces figcaption{color:#6B7C72;font-size:.9rem;margin-top:8px}

/* ============ PLAN DU SITE ============ */
/*
 * Deux colonnes sur large écran : la liste fait une cinquantaine d'entrées,
 * et une seule colonne obligerait à faire défiler trois écrans pour en voir
 * la fin. Les sous-pages restent sous leur parent — c'est le seul repère de
 * hiérarchie, il ne faut pas le perdre en coupant la colonne n'importe où,
 * d'où `break-inside`.
 */
.fsj-plan{margin:38px 0}
.fsj-plan h3{margin:26px 0 10px}
.fsj-plan-pages{list-style:none;margin:0;padding:0}
.fsj-plan-pages .children{list-style:none;margin:2px 0 8px;padding-left:22px}
.fsj-plan-pages li{padding:3px 0;break-inside:avoid}
.fsj-plan-pages > li{break-inside:avoid-column}
.fsj-plan-compte{color:#6B7C72;font-size:.9em}
@media (min-width:900px){
  .fsj-plan-pages{columns:2;column-gap:40px}
}

/* ============ CONSEIL MUNICIPAL, COMMISSIONS ET DÉLÉGATIONS ============ */
/* Rendu des raccourcis [fsj_commissions], [fsj_delegations] et
   [fsj_conseil_municipal]. Ces sections sont en `alignwide` : dans le
   gabarit de page, le texte courant reste à 760px mais une grille
   d'encadrés a besoin des 1280px pour tenir sur trois colonnes. */
.fsj-conseil{margin:38px 0}
.fsj-conseil .tete h2{font-size:1.5rem}

/* `min(340px,100%)` et pas `340px` seul : sous 372px de large, une piste
   de 340px déborderait de l'écran au lieu de se réduire. */
.fsj-cartes{
  list-style:none;margin:0;padding:0;
  display:grid;gap:20px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
}
.fsj-carte{
  background:#fff;border:1px solid #EFE0CE;border-radius:22px;
  padding:22px 24px 20px;box-sizing:border-box;
}
.fsj-bloc--delegations .fsj-carte{border-color:#D6E6DD}
.fsj-bloc--delegations .tete{border-bottom-color:var(--vert)}
.fsj-carte h3{font-family:"Outfit",sans-serif;font-size:1.2rem;font-weight:700;color:var(--encre);margin:0}
/* Filet de couleur au-dessus du titre : abricot pour les commissions
   municipales, vert pour les représentations extérieures. C'est le seul
   signe qui distingue les deux grilles une fois qu'on a dépassé le
   titre de section. */
.fsj-carte h3::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:var(--abricot);margin-bottom:12px}
.fsj-bloc--delegations .fsj-carte h3::before{background:var(--vert)}
.fsj-domaines{font-size:.95rem;color:#61736A;margin:6px 0 0}
.fsj-desc{margin:10px 0 0}
.fsj-vide{color:#61736A;font-style:italic;margin:14px 0 0}

.fsj-membres{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid #EDF2EF}
.fsj-membres li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:4px 0}
.fsj-nom{font-family:"Outfit",sans-serif;font-weight:600;color:var(--encre)}
/* Fonction de l'élu, affichée quand sa case est cochée dans la commission. */
.fsj-role{font-size:.9rem;font-weight:600;color:#8A5A1E;background:var(--abricot-pale);border-radius:999px;padding:2px 10px}
/* Rôle dans la commission (président, titulaire…). Aplat plein et coins
   moins arrondis que la fonction : c'est l'information que cherche un
   habitant, elle doit se distinguer de la pastille pâle d'à côté.
   Abricot pour les commissions municipales, vert foncé pour les
   représentations extérieures - la couleur dit à quelle famille appartient
   l'encadré sans qu'il faille remonter au titre de section. */
.fsj-tag{
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--abricot);color:var(--encre);border-radius:6px;padding:3px 8px;
}
/* Blanc sur #418C65 ne donne que 4,06:1 : c'est le vert foncé qu'il faut
   ici, pas le vert de la charte. */
.fsj-bloc--delegations .fsj-tag{background:var(--vert-fonce);color:#fff}

.fsj-membres-cle{margin:16px 0 0;font-size:.9rem;font-weight:700;color:#8A5A1E;text-transform:uppercase;letter-spacing:.06em}
.fsj-bloc--delegations .fsj-membres-cle{color:var(--vert-fonce)}
.fsj-membres-cle + .fsj-membres{margin-top:8px;padding-top:0;border-top:0}
/* « Membres : tout le conseil municipal », quand chaque élu figure dans la
   commission. Seuls ceux qui ont un rôle sont alors nommés, au-dessus. */
.fsj-tout{margin:16px 0 0;padding-top:14px;border-top:1px solid #EDF2EF;font-family:"Outfit",sans-serif;font-weight:600;color:var(--encre)}
.fsj-membres + .fsj-tout{margin-top:6px;padding-top:0;border-top:0}
.fsj-tout .fsj-membres-cle{margin:0 6px 0 0}

.fsj-elus{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
}
.fsj-elu{background:#fff;border:1px solid #E1EAE5;border-radius:18px;padding:14px 18px;box-sizing:border-box}
.fsj-elu .fsj-nom{display:block;font-size:1.08rem}
.fsj-elu .fsj-role-txt{display:block;font-size:.95rem;color:#61736A;margin-top:2px}

/* ---- Photo de groupe et légende numérotée ---- */
/*
 * La pastille reprend le numéro inscrit sur la photo. Elle est posée à côté
 * du texte et non au-dessus : sur une carte étroite, un numéro en surtitre
 * se confond avec le nom.
 */
.fsj-conseil-photo{margin:0 0 22px;}
/*
 * Pas de `width:100%` : une photo de groupe étirée au-delà de sa taille réelle
 * devient floue, et les numéros posés sur les visages cessent d'être lisibles.
 * Elle occupe donc sa largeur naturelle, centrée, et ne se réduit que lorsque
 * le conteneur est plus étroit qu'elle.
 */
.fsj-conseil-photo img{
  display:block;max-width:100%;height:auto;
  margin-inline:auto;
  border-radius:18px;border:1px solid #E1EAE5;
}

/* ---- Numéros de la liste ---- */
/*
 * Les numéros posés sur les visages viennent du fichier image fourni par la
 * mairie ; le site n'en superpose plus. Ceux qui suivent sont ceux de la
 * liste, qui répondent à la photo comme une légende.
 */
.fsj-elus--numerotes .fsj-elu{display:flex;gap:12px;align-items:flex-start}
.fsj-elu-txt{min-width:0}
.fsj-num{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--vert);color:#fff;
  font-weight:700;font-size:1rem;line-height:1;
}

@media (max-width:600px){
  .fsj-num{width:30px;height:30px;font-size:.95rem}
}

/* ============ GABARIT DE PAGE ============ */
/*
 * Le gabarit de page pose un conteneur de 1280px (`fsj-wrap`) et laisse
 * le contenu de la page gérer sa propre largeur de lecture : c'est ce
 * qui permet à une section large (grille d'encadrés, tableau, galerie)
 * d'utiliser toute la largeur alors que le texte courant reste à 760px.
 *
 * WordPress centre les blocs d'une mise en page « contrainte ». Ici on
 * les cale à gauche : sinon le titre de la page et les paragraphes,
 * centrés dans leur colonne de 760px, flottaient à 260px du bord gauche
 * des encadrés larges, ce qui se lisait comme un défaut d'alignement.
 *
 * `!important` est indispensable ici : WordPress génère lui-même
 * `margin-left:auto !important` pour centrer les blocs d'une mise en
 * page contrainte. Aucune spécificité ne passe devant, seul un
 * `!important` en face peut le neutraliser.
 */
.contenu-page > .wp-block-post-content > *{margin-left:0 !important;margin-right:auto !important}
.contenu-page > .wp-block-post-content > .alignwide{max-width:100%}