/* =====================================================================
   Mairie de Saint-Paul-sur-Isère — styles de la refonte
   Toutes les valeurs ci-dessous sont RELEVÉES sur le site d'origine
   (styles calculés + règles de custom.css), pas approximées.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TITRES DE SECTION
   Le <h1> d'origine ne contient qu'un seul <span class="subtitle">
   manuscrit — il n'y a pas de double couche.
   --------------------------------------------------------------------- */

.mairie-titre { position: relative; z-index: 6; margin: 0 0 30px; line-height: 1.1; font-size: 0; }
.mairie-titre .subtitle {
    display: table; font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 84px; line-height: 1; letter-spacing: 1px;
}
/* Mécanisme d'origine en DEUX temps qui s'annulent : le h1 est décalé de
   146px vers la droite, et le sous-titre les reprend vers la gauche. Dans
   l'original ce dispositif sert à aligner le gros script sur le bord du
   bloc pendant que le petit texte du h1 reste en retrait. Ne reprendre que
   le margin négatif — ce que je faisais — pousse le titre 146px hors cadre
   et rend le « O » de « Offres » invisible. Les deux vont ensemble. */
.mairie-titre--emplois            { padding-left: 146px; }
.mairie-titre--emplois .subtitle  { color: #D90D14; margin-left: -146px; }
.mairie-titre--gazette .subtitle  { color: #F3C42E; font-size: 63px; margin: 5px 0 0; }

/* Ce palier ne couvre QUE les sous-titres qui ne sont pas dans un titre de
   widget Elementor. Pour les autres — c'est-à-dire ceux de la page — il est
   sans effet : `.mairie-titre .elementor-heading-title .subtitle` (ligne
   1586) compte trois classes et l'emporte, media query ou non. Leurs paliers
   sont donc écrits en section 13, au même niveau de spécificité. */
@media (max-width: 1200px) { .mairie-titre .subtitle { font-size: 70px; } }
@media (max-width: 767px)  {
    .mairie-titre--emplois .subtitle { margin-left: 0; }
}

/* =====================================================================
   2. EN-TÊTE
   Hauteur 176px, transparent, superposé au slider, collant au défilement.
   ===================================================================== */

.mairie-header {
    position: absolute; top: 0; left: 0; right: 0;
    height: 176px; z-index: 1000; background: transparent;
}

/* --- Compatibilité avec la barre d'administration WordPress ----------
   Quand elle est affichée, WordPress décale tout le document en posant
   `html { margin-top: 32px !important }`. Le slider, qui est dans le flux,
   descend donc de 32px. L'en-tête, lui, est en `position: absolute` SANS
   ancêtre positionné : son bloc conteneur est le bloc conteneur initial,
   calé sur l'origine du document et insensible à cette marge. Sans les
   règles ci-dessous il resterait 32px trop haut et se désalignerait du
   slider — le logo et le menu ne tomberaient plus au bon endroit.
   On applique donc le même décalage à la main.

   Les paliers sont ceux d'admin-bar.css : 32px au-dessus de 782px, 46px
   en dessous, et sous 600px la barre n'est plus fixe (elle défile avec la
   page), donc l'en-tête collant revient en haut du viewport.
   Rien de tout cela ne s'applique aux visiteurs : la classe `admin-bar`
   n'existe que pour un utilisateur connecté. L'affichage public est
   strictement inchangé.
   -------------------------------------------------------------------- */
body.admin-bar .mairie-header,
body.admin-bar .mairie-header.is-sticky { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .mairie-header,
    body.admin-bar .mairie-header.is-sticky { top: 46px; }
}
@media screen and (max-width: 600px) {
    body.admin-bar .mairie-header.is-sticky { top: 0; }
}
/* Équivalent du `.container` d'origine (custom.css:122 + 140) : 1470px centré
   sans padding, puis pleine largeur avec 15px de part et d'autre. C'est lui qui
   sert de référence à tous les éléments positionnés en absolu ci-dessous. */
/* Hauteur figée retirée et largeur assouplie (point manager du 19/08/2026,
   posé directement en ligne dans modif_mairie.css) : l'en-tête suit son
   contenu, notamment quand la version collée compacte le remonte. */
.mairie-header-inner {
    position: relative;
    /* height: 176px; */
    width: 100%;
    max-width: 1370px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}
@media (max-width: 1470px) {
    .mairie-header-inner { width: 100%; padding: 0 15px; }
}

/* --- Facebook ------------------------------------------------------
   font-size: 0 pour masquer le libellé — c'est la méthode d'origine.
   Un text-indent négatif laisse le glyphe visible sur certains rendus,
   ce qui produisait le double « f » cassé.
   fb.png est un sprite vertical de 15x66 : l'état survolé est à -36px.
   ------------------------------------------------------------------- */
.mairie-social { position: absolute; top: 20px; left: 15px; z-index: 15; }
.mairie-social a {
    position: relative; display: block; font-size: 0;
    width: 25px; height: 29px; transition: .5s all;
    background: url('img/fb.png') top center no-repeat;
}
.mairie-social a:hover { background-position: center -36px; }
@media (max-width: 1470px) { .mairie-social { left: 66px; } }
@media (max-width: 1280px) { .mairie-social { top: 10px; } }

/* --- Barre du haut (.menu-top d'origine) ----------------------------
   Police TTNorms-Regular — et non TTNORMS-BOLD comme le menu du bas
   (superfish.css:68-73). L'écart entre les deux libellés vient de
   `padding: 0 30px` sur chaque <li> : 30 + 30 = 60px exactement.
   Le dernier garde 15px à droite, le premier rien à gauche.
   ------------------------------------------------------------------- */
.mairie-menu-haut { position: absolute; top: 20px; right: 60px; z-index: 12; }
.mairie-menu-haut ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
.mairie-menu-haut li { float: left; padding: 0 30px; }
.mairie-menu-haut li:first-child { padding-left: 0; }
.mairie-menu-haut li:last-child  { padding-right: 15px; }
/* Le Joomla d'origine utilise ici 'TTNorms-Regular', une police fine que le
   thème n'embarque pas. Après un passage par la police de texte courant, la
   barre du haut est alignée sur le MENU PRINCIPAL : même famille, même corps,
   même interligne, même couleur — les deux lignes se lisent comme un seul
   bloc de navigation.
   Pour revenir à l'original, remettre : 'TTNorms-Regular', Arial, sans-serif */
.mairie-menu-haut a  {
    display: table; position: relative; text-decoration: none;
    font-family: 'TTNORMS-BOLD', Arial, sans-serif; font-weight: normal;
    font-size: 18px; line-height: 1.45em; color: #fff; transition: all .4s;
}
.mairie-menu-haut a:hover { color: #f3c226; }
/* À ce palier les liens descendent à 27px alors que l'icône Facebook reste à
   20px : les deux ne sont plus alignés. C'est ainsi dans l'original. */
@media (max-width: 1470px) { .mairie-menu-haut { top: 27px; } }
@media (max-width: 1280px) { .mairie-menu-haut { top: 20px; } }

/* --- Logo -----------------------------------------------------------
   Le triangle jaune (tr-logo.png) est le FOND du lien, calé en haut et
   centré ; le blason est poussé de 55px vers le bas par le padding.
   Le tout est centré dans la page par margin: auto.
   ------------------------------------------------------------------- */
/* Un seul facteur pilote toute la composition. Les valeurs brutes sont
   celles relevées sur l'original (a.logo : largeur 93px, padding 45/55/42px) ;
   l'échelle les agrandit sans toucher aux proportions. Les pourcentages
   (blason et triangle) n'ont pas à être touchés : ils suivent la largeur.
   Changer ce seul nombre redimensionne le logo partout, état collant compris. */
.mairie-logo {
    --logo-echelle: 1.108;
    position: absolute; top: 0; left: 0; right: 0;
    display: table; width: calc(93px * var(--logo-echelle)); margin: 0 auto; z-index: 10;
    padding-top: calc(45px * var(--logo-echelle));
    background: url('img/tr-logo.png') top center no-repeat;
    background-size: 70%;
}
.mairie-logo img { display: table; margin: auto;   height: auto; }

/* Paliers repris de l'original (a.logo / a.logo img). Ils doivent rester
   APRÈS les règles de base : à spécificité égale, c'est la dernière
   déclaration qui gagne. */
@media (max-width: 1470px) {
    .mairie-logo     { padding-top: calc(55px * var(--logo-echelle)); background-size: 80%; }
    .mairie-logo img { width: 80%; }
}
@media (max-width: 1100px) {
    .mairie-logo     { background-size: 75%; }
    .mairie-logo img { width: 75%; }
}
@media (max-width: 600px) {
    .mairie-logo     { padding-top: calc(45px * var(--logo-echelle)); background-size: 64%; }
    .mairie-logo img { width: 55%; }
}

/* --- Menu principal (.menu-bottom d'origine) ------------------------
   L'espacement n'est PAS réparti automatiquement : chaque <li> porte un
   padding latéral défini individuellement dans superfish.css, et c'est la
   paire item-116 / item-117 qui creuse le vide où vient se loger le blason.
   Le blason lui-même n'a ni <li> réservé ni largeur : il est simplement
   centré dans le flux et passe devant le menu (z-index 10 contre 5).
   ------------------------------------------------------------------- */
.mairie-menu-principal { position: absolute; top: 68px; left: 20px; right: 20px; z-index: 5; }
.mairie-menu-principal > ul {
    display: flex; flex-wrap: wrap; float: left;
    list-style: none; margin: 0; padding: 0;
}
.mairie-menu-principal > ul > li { position: relative; float: left; padding: 0 45px; }

/* Paddings relevés un par un (superfish.css:76-88 et 118-121).
   Somme des paddings horizontaux = 460px, dont 240px pour le blason. */
.mairie-menu-principal > ul > li.item-113 { padding: 0; }
.mairie-menu-principal > ul > li.item-116 { padding: 0 40px 0 0; }
.mairie-menu-principal > ul > li.item-117 { padding: 0 0 0 200px; }
.mairie-menu-principal > ul > li.item-118 { padding: 0 0 0 40px; }
/* Présents dans le balisage d'origine mais masqués (superfish.css:75) : les
   exemplaires visibles sont ceux de la barre du haut, qui pointent ailleurs. */
.mairie-menu-principal > ul > li.item-142,
.mairie-menu-principal > ul > li.item-143 { display: none; }

/* Libellés. `font-weight: normal` : la graisse vient du fichier de police.
   Ni text-transform ni letter-spacing dans l'original. */
.mairie-menu-principal .mairie-separateur,
.mairie-menu-principal a {
    display: table; position: relative; text-decoration: none;
    font-family: 'TTNORMS-BOLD', Arial, sans-serif; font-weight: normal;
    font-size: 18px; line-height: 1.45em; color: #fff;
}
/* Le survol ne colore QUE les <a>. Les six rubriques de 1er niveau sont des
   <span> : elles restent blanches en permanence, le survol se contente
   d'ouvrir le panneau. Ne pas ajouter de couleur ici. */
.mairie-menu-principal a { transition: all .4s; }
.mairie-menu-principal a:hover { color: #f3c226; }

/* --- Sous-menus, niveaux 2 à 4 --------------------------------------
   Ouverture en `display` : INSTANTANÉE, sans transition ni fondu. C'est
   volontaire — superfish.css ne contient aucune transition ni animation.
   Ce point n'est pas qu'esthétique : avec `display: none` la boîte n'existe
   pas au repos, alors qu'un `opacity/visibility` la laisse dans le flux et
   gonfle en permanence le scrollWidth de la page. C'était la vraie cause de
   la barre de défilement horizontale, que l'ancien décalage `right: 0`
   masquait sans la traiter.
   ------------------------------------------------------------------- */
.mairie-sous-menu {
    position: absolute; display: none; top: 100%; left: 0; z-index: 99;
    list-style: none; margin: 0; padding: 0;
    background: rgba(23, 122, 153, .8);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
    /* `min-width: 12em` d'origine, résolu ici en pixels : le <ul> portait la
       classe Bootstrap `small` (font-size: 80%), cumulative à chaque niveau,
       sur un corps de page de 21px. 12 x 16,8 = 201,6 puis 161,3 puis 129. */
    min-width: 201.6px;
}
.mairie-menu-principal li:hover > .mairie-sous-menu { display: block; }
.mairie-sous-menu li {
    position: relative; padding: 5px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .33);
}
/* Le dernier item GARDE son filet : l'original n'a aucune règle :last-child
   pour les sous-menus, le panneau se termine bien par un trait. */
.mairie-sous-menu a { max-width: unset; font-size: inherit; line-height: 1.25em; }

/* --- Hiérarchie typographique des panneaux ---------------------------
   Chaque niveau descend à 88,9% de la taille de son parent : 18px en
   barre, 16px au 2e niveau, 14,2px au 3e. L'original descendait à 80%
   (classe Bootstrap `small` cumulative), juge trop petit à l'usage —
   14,4px des le 2e niveau. Posé sur le <ul>, le pourcentage se compose
   tout seul de niveau en niveau, jusqu'au dernier.

   Dans un panneau, TOUT passe en TTNorms-Regular, à chaque profondeur.
   Depuis le 14/08/2026 (demande client), les entrées qui ouvrent un
   niveau supplémentaire ne se distinguent plus par la graisse : le
   chevron s'en charge. La barre du premier niveau, elle, ne bouge pas —
   son gras vient de la règle de base des libellés, plus haut. */
.mairie-menu-principal .mairie-sous-menu { font-size: 88.9%; }
.mairie-menu-principal .mairie-sous-menu a,
.mairie-menu-principal .mairie-sous-menu .mairie-separateur {
    font-family: 'TTNorms-Regular', Arial, sans-serif;
    font-size: inherit;
}

/* Niveaux 3 et 4 : collés au bord droit du parent, alignés sur son haut.
   Une seule règle les couvre tous les deux, comme dans l'original. */
.mairie-sous-menu .mairie-sous-menu { top: 0; left: 100%; min-width: 161.3px; }
.mairie-sous-menu .mairie-sous-menu .mairie-sous-menu { min-width: 129px; }

/* Recalage sous le TEXTE du libellé : les <li> ayant d'énormes paddings, le
   panneau doit être décalé pour retomber sous le mot. Le combinateur `>` est
   indispensable — sans lui ces valeurs frapperaient aussi les niveaux 3 et 4,
   qui s'ouvriraient par-dessus le niveau 2 au lieu de sortir à droite. */
.mairie-menu-principal > ul > li.item-115 > .mairie-sous-menu { left: 45px; }
.mairie-menu-principal > ul > li.item-117 > .mairie-sous-menu { left: 190px; }
.mairie-menu-principal > ul > li.item-118 > .mairie-sous-menu { left: 40px; }

/* --- Chevrons de sous-menu (AJOUT, absent de l'original) -------------
   Signale les entrées qui ouvrent un niveau supplémentaire.

   Ciblage structurel : `li.parent` est la classe que le balisage porte
   déjà dès qu'une entrée a des enfants, à n'importe quelle profondeur.
   Rien à maintenir à la main — ajouter une entrée au menu suffit.

   Le chevron est un pseudo-élément ABSOLU : il ne prend aucune place
   dans le flux et ne décale donc pas les rubriques, calées au dixième
   de pixel sur l'original.

   Il est dessiné en bordures plutôt qu'avec un caractère « › » : rendu
   net à toute taille, sans dépendre des glyphes disponibles dans
   TTNORMS-BOLD. `currentColor` lui fait suivre la couleur du libellé —
   jaune au survol d'un lien, blanc en permanence sur les séparateurs.
   -------------------------------------------------------------------- */
.mairie-menu-principal li.parent > a::after,
.mairie-menu-principal li.parent > .mairie-separateur::after {
    content: "";
    position: absolute;
    width: 6px; height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    pointer-events: none;
}

/* 1er niveau : le panneau descend, le chevron pointe donc vers le BAS.
   Il se retourne à l'ouverture. Placé juste à droite du libellé, dans
   l'espacement existant — le plus étroit fait 30px au palier le plus
   contraint, le chevron en occupe 8. */
.mairie-menu-principal > ul > li.parent > a::after,
.mairie-menu-principal > ul > li.parent > .mairie-separateur::after {
    right: -16px; top: 50%;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .4s;
}
.mairie-menu-principal > ul > li.parent:hover > a::after,
.mairie-menu-principal > ul > li.parent:hover > .mairie-separateur::after {
    transform: translateY(-25%) rotate(-135deg);
}

/* Niveaux 2 et suivants : le panneau sort à droite, le chevron pointe
   donc à DROITE. On repasse le libellé en `position: static` pour que le
   pseudo-élément s'ancre sur le <li> et non sur le texte : tous les
   chevrons d'un panneau s'alignent alors sur une même verticale, au bord
   du panneau, au lieu de suivre des longueurs de texte inégales.
   Le padding droit réserve la place pour que le texte ne passe pas
   dessous — seule incidence géométrique de cet ajout. */
.mairie-sous-menu li.parent > a,
.mairie-sous-menu li.parent > .mairie-separateur { position: static; }
.mairie-sous-menu li.parent { padding-right: 28px; }
.mairie-sous-menu li.parent > a::after,
.mairie-sous-menu li.parent > .mairie-separateur::after {
    right: 12px; transform: rotate(-45deg);
}
/* Calé sur la 1re ligne du libellé : 5px de padding + la moitié de
   l'interligne, moins la demi-hauteur du chevron. Les liens sont à
   22,5px d'interligne, les séparateurs à 26,1px. */
.mairie-sous-menu li.parent > a::after              { top: 12px; }
.mairie-sous-menu li.parent > .mairie-separateur::after { top: 14px; }

/* --- Paliers du menu, en ordre décroissant --------------------------
   Basculement de mécanisme à 1470px : au-dessus le <ul> flotte à gauche
   (flex, calé sur le bord du conteneur), en dessous il passe en table
   centrée. Ce n'est pas une approximation, c'est bien ce que fait
   l'original — la classe Bootstrap `nav` impose flex au-dessus.
   ------------------------------------------------------------------- */
@media (max-width: 1470px) {
    .mairie-menu-principal { top: 70px; }
    .mairie-menu-principal > ul { display: table; margin: auto; float: none; padding: 0; }
    .mairie-menu-principal > ul > li            { padding: 0 30px; }
    .mairie-menu-principal > ul > li.item-113   { padding: 0 0 0 30px; }
    .mairie-menu-principal > ul > li.item-116   { padding: 0 30px 0 0; }
    .mairie-menu-principal > ul > li.item-117   { padding: 0 0 0 200px; }
    .mairie-menu-principal > ul > li.item-118   { padding: 0 0 0 30px; }
    .mairie-menu-principal > ul > li.item-114 > .mairie-sous-menu { left: -30px; }
    .mairie-menu-principal > ul > li.item-117 > .mairie-sous-menu { left: 124px; }
    .mairie-sous-menu { min-width: 172.8px; }
    .mairie-sous-menu .mairie-sous-menu { min-width: 138.2px; }
    .mairie-sous-menu .mairie-sous-menu .mairie-sous-menu { min-width: 110.6px; }
}
@media (max-width: 1366px) {
    .mairie-menu-principal > ul { padding: 0 15px; }
    .mairie-menu-principal > ul > li.item-113 { padding: 0; }
    .mairie-menu-principal > ul > li.item-117 { padding: 0 0 0 124px; }
}
/* Sous 1310px les libellés sont bridés en largeur et passent volontairement
   sur deux lignes. Les liens de sous-menu en sont exemptés. */
@media (max-width: 1310px) {
    .mairie-menu-principal > ul > li.item-117 { padding: 0 40px 0 160px; }
    .mairie-menu-principal .mairie-separateur,
    .mairie-menu-principal > ul > li > a                        { max-width: 123px; }
    .mairie-menu-principal > ul > li.item-118 > .mairie-separateur { max-width: 153px; }
    .mairie-menu-principal > ul > li.item-115 > .mairie-separateur { max-width: 151px; }
    .mairie-menu-principal > ul > li.item-117 > .mairie-separateur { max-width: 126px; }
    .mairie-sous-menu a { max-width: unset; }
}
@media (max-width: 1280px) { .mairie-menu-principal { top: 65px; } }
/* En dessous, l'original bascule sur le menu hamburger plein écran. Celui-ci
   n'est pas encore construit : la barre disparaît, comme dans l'original. */
@media (max-width: 1199px) { .mairie-menu-principal { display: none; } }

/* --- Débordement horizontal -----------------------------------------
   L'original enveloppe toute la page dans `<div class="body">` porteur d'un
   `overflow: hidden` (custom.css:19). Les panneaux de droite dépassent donc
   visuellement mais sont rognés net, sans jamais alimenter la zone
   défilable : son scrollWidth est égal à son clientWidth. On reproduit ce
   rognage ici. Combiné au `display: none` au repos ci-dessus, c'est ce qui
   supprime la barre horizontale — proprement, cette fois.
   ------------------------------------------------------------------- */
body { overflow-x: hidden; }

/* --- État collant : bandeau bleu plein -------------------------------
   Version compacte voulue par le manager (point du 19/08/2026, posée
   directement en ligne dans modif_mairie.css) : bandeau raccourci à 85px,
   logo réduit de moitié, liens du menu resserrés à 15px, réseaux sociaux
   et menu du haut masqués — seul le menu principal reste, remonté. */
.mairie-header.is-sticky { position: fixed; }
.mairie-header.is-sticky .mairie-header-inner:before {
    content: ""; position: absolute; top: 0; left: -50vw; right: -50vw; height: 85px;
    background: url('img/bg-m.jpg') top left repeat-x #177A99; z-index: -1;
}
.mairie-header.is-sticky .mairie-logo    { background-size: 61%; padding-top: calc(42px * var(--logo-echelle)); }
.mairie-header.is-sticky .mairie-logo img { width: 50%; }
.mairie-header.is-sticky .mairie-menu-principal .mairie-separateur,
.mairie-header.is-sticky .mairie-menu-principal a { font-size: 15px; }

.mairie-header.is-sticky .mairie-social     { top: 15px; display: none; }
.mairie-header.is-sticky .mairie-menu-haut  { top: 15px; display: none; }
.mairie-header.is-sticky .mairie-menu-principal { top: 36px; max-width: 1350px; margin: 0 auto; }
@media (max-width: 1280px) {
    .mairie-header.is-sticky .mairie-menu-principal { top: 50px; }
}

/* =====================================================================
   3. HÉROS
   ===================================================================== */

.mairie-slider { position: relative; }

/* Hauteur du héros.
   Les visuels font 2000x845. L'original les affiche pleine largeur en
   conservant ce ratio : le slider mesure 602px de haut pour 1425 de large
   et 805px pour 1905. Le réglage Elementor imposait 602px fixes quelle que
   soit la largeur, si bien qu'au-delà de 1470px le texte passait à 104px
   dans un héros resté court — d'où le texte et la flèche qui venaient
   buter sur les icônes « EN 1 CLIC ». */
.mairie-slider .elementor-widget-slides,
.mairie-slider .elementor-widget-slides .elementor-slides-wrapper {
    height: auto;
    aspect-ratio: 2000 / 845;
}
/* Elementor génère dans post-12.css :
     .elementor-12 .elementor-element.elementor-element-0018b09 .swiper-slide { height: 602px }
   soit QUATRE classes. Un sélecteur à trois classes perdait, la diapo restait
   figée à 602px pendant que son conteneur suivait le ratio : l'image s'arrêtait
   avant le bas du slider et tout ce qui est calé sur ce bas (libellés
   « EN 1 CLIC », triangle) tombait dans la bande vide. On repasse donc à cinq
   classes, et en `100%` — pas `auto` — pour que la diapo remplisse le conteneur. */
.mairie-slider .elementor-widget-slides .elementor-slides-wrapper .swiper-wrapper .swiper-slide {
    height: 100%;
}

/* Masque de contraste : PNG en surimpression sur chaque visuel, sans lui
   le texte blanc devient illisible sur les zones claires de la photo. */
.mairie-slider .swiper-slide:after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: url('img/mask-slid.png') 50% 0% no-repeat;
    background-size: cover;
}

/* Le widget couvre tout le slider. Ses deux enfants — le bloc texte et la
   flèche — se positionnent donc en % de la hauteur du slider, exactement
   comme .slide-desc-box et .scroll-bottom dans l'original, au lieu d'un
   `top` fixe qui ne suivait pas le changement de taille du texte.
   Deux sélecteurs : l'ancien widget HTML (encore en place sur la préprod
   jusqu'à l'échange dans l'éditeur) et l'élément du thème qui le remplace
   (inc/widget-texte-hero.php). */
.mairie-slider > .elementor-widget-html,
.mairie-slider > .elementor-widget-mairie-texte-hero {
    position: absolute; inset: 0; z-index: 5; pointer-events: none;
}
/* Centré sur son propre milieu : quelle que soit la taille de police du
   palier, l'espace reste équilibré au-dessus et en dessous.
   Le translateY du centrage est porté par ce conteneur, celui de
   l'animation par les deux lignes : ils ne se marchent pas dessus. */
.mairie-hero-texte {
    position: absolute; left: 0; right: 0; top: 50%;
    transform: translateY(-50%); text-align: center;
}

/* Valeurs relevées sur l'original (#flexslider-92 .slide-desc-box .slide-title
   et .slide-desc). line-height 1.4 hérité, letter-spacing normal : le
   chevauchement des deux lignes vient du margin-top négatif, pas d'un
   line-height serré. */
.mairie-hero-sur {
    font-family: 'helvetica', Arial, sans-serif; font-weight: 700;
    font-size: 26px; line-height: 1.4; letter-spacing: normal;
    color: #fff; text-transform: uppercase; margin: 0;
}
.mairie-hero-titre {
    font-family: 'amstagramregular', cursive; font-weight: 400;
    font-size: 104px; line-height: 1.4; color: #F3C226; margin: -65px 0 0;
    /* `.slide-desc` du module porte padding: 8px 0 0. Sans lui la ligne
       manuscrite remonte de 8px par rapport à l'original. */
    padding: 8px 0 0;
}
/* Élément indépendant, comme .scroll-bottom dans l'original : il ne suit
   plus le bas du texte (ce qui le faisait tomber au milieu des icônes
   « EN 1 CLIC » dès que le texte grandissait). */
.mairie-hero-scroll {
    position: absolute; left: 0; right: 0; top: 59%;
    width: 26px; height: 42px; margin: 0 auto;
    background: url('img/scroll.png') center center no-repeat; background-size: contain;
}

/* --- Animations du texte du slider --------------------------------------
   Reprises telles quelles du module joomspirit (mod_joomspirit_slider).
   L'original superpose deux animations sur DEUX éléments imbriqués :
     .anim-js-slide.Center > div > div  -> anim-js-slide-top  1.5s ease
     .anim-js-text .slide-desc          -> anim-js-text-fade  3s ease
   Les opacités s'y multiplient. Ici la flèche de défilement est dans le
   même conteneur que le texte (elle ne bouge pas dans l'original), donc on
   anime les deux lignes séparément : à durées et timing identiques elles
   se déplacent solidairement, pour un rendu équivalent.
   Sur le titre, les deux animations sont cumulées ; la dernière déclarée
   l'emporte sur opacity, ce qui redonne exactement la courbe d'origine
   (invisible pendant 1,5s puis fondu sur 1,5s).
   ---------------------------------------------------------------------- */
@keyframes mairie-slide-top {
    0%   { transform: translateY(-150px); opacity: 0; }
    100% { transform: translateY(0);      opacity: 1; }
}
@keyframes mairie-text-fade {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}
.mairie-hero-texte.is-anim .mairie-hero-sur {
    animation: mairie-slide-top 1.5s ease;
}
.mairie-hero-texte.is-anim .mairie-hero-titre {
    animation: mairie-slide-top 1.5s ease, mairie-text-fade 3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mairie-hero-texte.is-anim .mairie-hero-sur,
    .mairie-hero-texte.is-anim .mairie-hero-titre { animation: none; }
}

/* Paliers de taille repris de custom.css. Ordre décroissant et APRÈS les
   règles de base : à spécificité égale, la dernière déclaration gagne. */
@media (max-width: 1470px) {
    .mairie-hero-titre  { font-size: 74px; margin-top: -40px; }
    .mairie-hero-texte  { top: 59%; }     /* .slide-desc-box */
    .mairie-hero-scroll { top: 78%; }     /* .scroll-bottom  */
}
@media (max-width: 1366px) {
    .mairie-hero-sur   { font-size: 23px; }
    .mairie-hero-titre { font-size: 65px; }
}
@media (max-width: 1280px) {
    .mairie-hero-texte { top: 58%; }
}
@media (max-width: 1100px) {
    .mairie-hero-sur   { font-size: 20px; }
    .mairie-hero-titre { font-size: 50px; margin-top: -30px; }
}
@media (max-width: 991px) {
    .mairie-hero-sur    { font-size: 17px; }
    .mairie-hero-titre  { font-size: 45px; margin-top: -26px; }
    .mairie-hero-texte  { top: 64%; }
    .mairie-hero-scroll { top: 71%; }
}

/* --- Points de navigation du slider ----------------------------------
   Dans l'original, chaque point est en `display: table` : une boîte de
   type table est block-level, donc les points s'EMPILENT VERTICALEMENT
   et le `text-align: center` du conteneur ne les centre pas — ils
   restent calés à gauche. C'est ce mécanisme, pas un flex-direction,
   qui produit la colonne de points à gauche.

   Valeurs relevées sur l'original : conteneur en position absolue avec
   `bottom` (cascade propre), points de 5×5px, blancs, arrondis, avec
   une ombre interne, séparés par `padding: 0 8px`.

   Elementor génère la pagination Swiper (.swiper-pagination-bullet),
   pas la structure FlexSlider : on cible donc les classes Swiper avec
   les mêmes valeurs.
   ------------------------------------------------------------------- */
/* Swiper positionne sa pagination via ses PROPRES variables CSS et des
   sélecteurs à 3 classes (.swiper-pagination-horizontal.swiper-pagination-
   bullets .swiper-pagination-bullet). Une règle à 2 classes est donc
   perdante : d'où le recours aux variables natives ET à un sélecteur plus
   spécifique incluant .elementor-widget-slides. Sans cela, `bottom` et
   `margin` restaient aux valeurs de Swiper (bottom:5px, gap horizontal). */
.mairie-slider {
    --swiper-pagination-bottom: 221px;
    --swiper-pagination-top: auto;
    --swiper-pagination-left: 8px;
    --swiper-pagination-right: auto;
    --swiper-pagination-color: #fff;
    --swiper-pagination-bullet-width: 5px;
    --swiper-pagination-bullet-height: 5px;
    --swiper-pagination-bullet-size: 5px;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .55;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 0px;
    --swiper-pagination-bullet-vertical-gap: 3px;
}
/* Sélecteur volontairement à 5 classes. Elementor impose bottom:5px via
   `.elementor-element .swiper .swiper-pagination-bullets.swiper-pagination-horizontal`
   (4 classes) dans e-swiper.min.css : toute règle moins spécifique est
   ignorée, quelles que soient les variables Swiper posées en amont
   (cette version de Swiper écrit `bottom` en dur, pas via var()). */
.mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.mairie-slider .elementor-widget-slides .swiper-pagination {
    position: absolute;
    bottom: 221px;
    top: auto; left: 8px; right: auto;
    width: auto; height: auto; margin: 0; padding: 0;
    display: block; text-align: left; z-index: 10;
}
.mairie-slider .elementor-widget-slides .swiper-pagination .swiper-pagination-bullet {
    display: table;            /* boîte block-level : empilement vertical, calé à gauche */
    width: 5px; height: 5px; margin: 3px 0; padding: 0;
    background: #fff; opacity: .55; border-radius: 20px;
    box-shadow: inset -1px 1px 1px rgba(0, 0, 0, .5);
    transition: opacity .3s;
}
.mairie-slider .elementor-widget-slides .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff; opacity: 1;
}

/* Le conteneur doit pouvoir ancrer la pagination en absolu */
.mairie-slider .elementor-widget-slides,
.mairie-slider .swiper { position: relative; }

/* Cascade de la position verticale, relevée sur l'original */
@media screen and (max-width: 1470px) {
    .mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mairie-slider .elementor-widget-slides .swiper-pagination { bottom: 160px; }
}
@media screen and (max-width: 1366px) {
    .mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mairie-slider .elementor-widget-slides .swiper-pagination { bottom: 144px; }
}
@media screen and (max-width: 1050px) {
    .mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mairie-slider .elementor-widget-slides .swiper-pagination { bottom: 119px; }
}
@media screen and (max-width: 820px) {
    /* Masqués sous 820px, comme dans l'original */
    .mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mairie-slider .elementor-widget-slides .swiper-pagination { display: none; }
}

/* --- Triangle décoratif jaune ----------------------------------------
   CORRECTION : cet élément n'appartient PAS à la bande "EN 1 CLIC".
   C'est un ::after du conteneur du SLIDER (.banner dans l'original),
   qui déborde de 240px vers le bas pour décorer la jonction avec la
   bande du dessous — d'où l'impression qu'il "appartient" à EN 1 CLIC
   alors qu'il est structurellement rattaché au slider.

   Original : image réelle (triangle-j.png) dans une boîte fixe de
   240×481px, seule sa taille de fond ET sa position varient par palier
   — la boîte elle-même ne change jamais de dimensions. Cascade relevée
   directement dans custom.css (4 paliers, au-delà de 1700px = valeurs
   de base) :

     ≥1701px        left:0     size:auto  bottom:-240px
     1601–1700px    left:-1px  size:80%   bottom:-289px
     1101–1600px    left:-2px  size:60%   bottom:-337px
     601–1100px     left:-31px size:65%   bottom:-325px
     ≤600px         left:-31px size:40%   bottom:-385px

   L'original ne couvre rien sous 600px : ces valeurs s'appliquent donc
   telles quelles jusqu'aux plus petits téléphones. Reproduit à
   l'identique pour la fidélité, plutôt qu'une formule "plus propre"
   qui s'écarterait du rendu voulu.
   ------------------------------------------------------------------- */
.mairie-slider:after {
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    background: url('img/triangle-j.png') top left no-repeat;
    left: 0; bottom: -240px; width: 240px; height: 481px;
}
@media screen and (max-width: 1700px) {
    .mairie-slider:after { left: -1px; background-size: 80%; bottom: -289px; }
}
@media screen and (max-width: 1600px) {
    .mairie-slider:after { left: -2px; background-size: 60%; bottom: -337px; }
}
@media screen and (max-width: 1100px) {
    .mairie-slider:after { left: -31px; background-size: 65%; bottom: -325px; }
}
@media screen and (max-width: 600px) {
    .mairie-slider:after { left: -31px; background-size: 40%; bottom: -385px; }
}

/* =====================================================================
   4. BANDE « EN 1 CLIC »
   ===================================================================== */

/* ---------------------------------------------------------------------
   Reconstitué à partir de custom.css, ligne par ligne, en respectant
   l'ordre du fichier (la cascade détermine qui gagne quand plusieurs
   media queries s'appliquent en même temps — la dernière déclarée l'emporte).

   Deux erreurs de la version précédente, corrigées ici :

   1. Le titre est en float:left, PAS empilé au-dessus de la liste.
      .custom.click-top h2 { float:left; display:table; ... }
      La liste, elle, reste en flux normal : elle vient donc se placer
      À CÔTÉ du titre flottant, pas en dessous. C'est ce flottement natif
      qui produit l'alignement observé, sans qu'aucun positionnement
      absolu ne soit nécessaire.

   2. La grille n'est PAS à 5 colonnes égales. Ce sont des classes
      Bootstrap col-md-2/2/3/3/2 (sur 12) : 16,667% / 16,667% / 25% /
      25% / 16,667%. Un flex:1 partout aplatit une mise en page qui,
      dans l'original, réserve plus de place à "Démarches administratives"
      et "Avis & Comptes-rendus" qu'aux trois autres entrées.

   Cascade complète (container : marge haut+gauche ; ul : retrait gauche ;
   li : espace au-dessus ; lien : taille/casse ; titre : retrait icône) :

     > 1470px   marge:-160px 0 0 0    ul:88px  li:65px  a:20px/MAJ   icône:98px/auto
     ≤ 1470px   marge:-133px 0 0 141  ul:88px  li:49px  a:16px/MAJ   icône:98px/auto
     ≤ 1200px   (idem)                                  a:16px/normal
     ≤ 1100px   marge:-128px 0 0 70
     ≤ 1050px   marge:-106px 0 0 70   ul:20px  li:30px               icône:55px/25%
     ≤  991px   display:none — REMPLACÉ dans l'original par un menu
                mobile séparé (.oneclic) que je n'ai pas encore construit.
                Masquer plutôt que laisser un rendu à moitié fidèle.
   --------------------------------------------------------------------- */
.mairie-clic { position: relative; z-index: 2; margin: -160px 0 0 0; }

.mairie-clic-titre {
    float: left; display: table; color: #fff; font-size: 22px; text-transform: uppercase;
    font-family: 'helvetica', Arial, sans-serif; font-weight: 700;
    background: url('img/icone-clik.png') top right no-repeat;
    padding-right: 98px; margin: 30px 0 10px; height: 60px;
}
.mairie-clic-liste {
    display: flex; list-style: none; margin: 0; padding: 0 0 0 88px;
}
.mairie-clic-liste li { position: relative; padding: 65px 0 0 0; }

/* Grille Bootstrap 2-2-3-3-2 (sur 12), reproduite en pourcentages */
.mairie-clic-liste li.clic-1,
.mairie-clic-liste li.clic-2,
.mairie-clic-liste li.clic-5 { flex: 0 0 16.667%; max-width: 16.667%; }
.mairie-clic-liste li.clic-3,
.mairie-clic-liste li.clic-4 { flex: 0 0 25%; max-width: 25%; }

/* Les media queries de ce bloc sont regroupées PLUS BAS, après toutes les
   règles de base. C'est indispensable : à spécificité égale, la dernière
   règle déclarée l'emporte, media query ou non. Les placer ici les faisait
   écraser par `.mairie-clic-liste a { font-size:20px }` déclaré plus loin,
   et la taille de police du palier ≤1470px ne s'appliquait jamais. */

/* Icône : sprite à DEUX états empilés verticalement dans une seule image.
   Au repos, background-position montre l'icône du haut (contour jaune).
   Le décalage négatif au survol fait glisser l'image et révèle l'état du
   bas (silhouette blanche). La transition sur l'état de repos anime CE
   déplacement : c'est elle qui donne l'impression que l'icône "monte" —
   sans elle le changement est un saut instantané, pas un glissement.
   top:0/left:0/right:0 (pas de largeur fixe) et height:48px : valeurs
   reprises telles quelles de .custom.click-top .row.clic li:before. */
.mairie-clic-liste li:before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 48px;
    background-repeat: no-repeat; background-position: top left;
    transition: .3s all;
}
.mairie-clic-liste li.clic-1:before { background-image: url('img/i-1.png'); }
.mairie-clic-liste li.clic-2:before { background-image: url('img/i-2.png'); }
.mairie-clic-liste li.clic-3:before { background-image: url('img/i-3.png'); }
.mairie-clic-liste li.clic-4:before { background-image: url('img/i-4.png'); }
.mairie-clic-liste li.clic-5:before { background-image: url('img/i-5.png'); }
.mairie-clic-liste li.clic-1:hover:before { background-position: top -59px left; }
.mairie-clic-liste li.clic-2:hover:before { background-position: top -54px left; }
.mairie-clic-liste li.clic-3:hover:before { background-position: top -54px left; }
.mairie-clic-liste li.clic-4:hover:before { background-position: top -54px left; }
.mairie-clic-liste li.clic-5:hover:before { background-position: top -48px left; }

/* Ajustement demandé : "Réservez le périscolaire" est le texte le plus
   long du groupe et remplit presque toute sa colonne (154px de texte
   dans une boîte de 165px, contre 46 à 74px de marge pour les autres
   entrées) — visuellement trop collé à "Ecoles du RPI". Décalage vers
   la gauche de l'icône + du texte, SANS toucher à la largeur ni à la
   position de la boîte elle-même : les colonnes suivantes ne bougent
   pas d'un pixel (vérifié : clic-2 reste à x=669 avant/après). Seul
   l'espace visuel entre "périscolaire" et "Ecoles" s'agrandit, jusqu'à
   49px — dans la fourchette des autres entrées (46-74px). C'est un
   ajustement esthétique demandé explicitement, pas une valeur du
   Joomla d'origine : le CSS source n'a pas cette asymétrie. */
.mairie-clic-liste li.clic-1:before          { left: -38px; }
.mairie-clic-liste li.clic-1 .mairie-clic-libelle { margin-left: -38px; }

/* Séparateur : PAS une bordure. C'est une barre verticale jaune (#ffc434)
   portée par ::before sur le <span> qui enveloppe le texte du lien —
   .custom.click-top .row.clic span:before dans l'original. Posée sur
   chaque entrée, y compris la première (règle universelle côté Joomla). */
.mairie-clic-liste .mairie-clic-libelle {
    position: relative; display: table; max-width: 119px; padding-left: 12px;
}
.mairie-clic-liste .mairie-clic-libelle:before {
    content: ""; position: absolute; top: 4px; left: 0;
    width: 2px; height: 43px; background: #ffc434;
}
/* display:inline, PAS block — c'est ce qui crée l'écart icône/texte.
   Le <a> inline contient un <span> en display:table (donc block-level) :
   cela force une boîte de ligne vide AVANT le span, dont la hauteur vaut
   le line-height du <a>. C'est ce décalage (~23px) qui, ajouté aux 49px
   de padding-top du li, place le texte 28px sous le bas de l'icône.
   Avec display:block, ce décalage disparaît et le texte remonte contre
   l'icône (1px au lieu de 28px). L'original ne déclare aucun display
   sur ce <a> : il reste inline par défaut. */
.mairie-clic-liste a {
    color: #fff; text-transform: uppercase; font-family: 'tt_normslight', Arial, sans-serif;
    font-size: 20px; line-height: 1.12em;
    padding: 0 0 0 88px;
}
.mairie-clic-liste a:hover { color: #F3C42E; }

/* ---------------------------------------------------------------------
   Paliers responsives du bloc EN 1 CLIC.
   Placés ICI, après toutes les règles de base : à spécificité égale la
   dernière déclaration l'emporte, et une media query ne fait pas
   exception. Déclarés plus haut, ils étaient écrasés par les règles de
   base qui suivaient (la taille de police du palier ≤1470px ne
   s'appliquait jamais : 20px au lieu de 16px).
   --------------------------------------------------------------------- */
@media screen and (max-width: 1470px) {
    /* Retrait en PADDING et non en margin : Elementor impose une largeur
       pleine a ce conteneur, donc une marge gauche s'ajoutait a sa largeur
       au lieu de la rogner — c'etait l'origine des 141px de debordement
       horizontal de la page. Le padding, lui, reste dans la boite. */
    .mairie-clic { margin: -133px 0 0 0; padding-left: 141px; }
    .mairie-clic-liste li { padding-top: 49px; }
    .mairie-clic-liste a  { font-size: 16px; line-height: 1.2em; }
}
@media screen and (max-width: 1200px) {
    .mairie-clic-liste a { text-transform: none; }
}
@media screen and (max-width: 1100px) {
    .mairie-clic { margin: -128px 0 0 0; padding-left: 70px; }
}
@media screen and (max-width: 1050px) {
    .mairie-clic { margin: -106px 0 0 0; padding-left: 70px; }
    .mairie-clic-titre  { padding-right: 55px; background-size: 25%; }
    .mairie-clic-liste  { padding-left: 20px; }
    .mairie-clic-liste li { padding-top: 30px; }
}
@media screen and (max-width: 991px) {
    /* Masqué comme dans l'original. Le menu mobile de remplacement
       (.oneclic dans le Joomla source) reste à construire séparément :
       ce n'est pas dans le périmètre de cette page d'accueil. */
    .mairie-clic { display: none; }
}

/* =====================================================================
   4 bis. PAGE ARTICLE
   Equivalent de la classe `.view-article` que Joomla pose sur le <body>.
   Cote WordPress c'est `body.mairie-interieur` qui joue ce role.
   ===================================================================== */

/* L'en-tete n'est transparent que parce qu'il se pose sur le slider. Sur une
   page article il n'y a AUCUNE banniere : sans fond propre il devient du
   texte blanc sur du blanc — c'est ce qui rendait l'en-tete illisible.
   `bg-m.jpg` fait 9x109 : un degrade bleu-canard repete horizontalement.
   L'en-tete repasse aussi dans le FLUX, sinon le contenu glisserait dessous. */
/* `:not(.home)` et non `single-post` : l'en-tete n'est transparent que sur
   l'accueil, ou il se pose sur le slider. TOUTE autre page — article, liste
   d'actualites, pages interieures a venir — doit recevoir sa bande bleue et
   reprendre sa place dans le flux, sinon elle chevauche le contenu. */
body:not(.home) .mairie-header {
    position: relative;
    background: url('img/bg-m.jpg') top left repeat-x;
}
/* …MAIS le `position: relative` ci-dessus ne doit valoir qu'au repos. Il
   ecrasait `.mairie-header.is-sticky { position: fixed }` deux fois : par la
   specificite — `:not(.home)` compte pour une classe, donc (0,2,1) contre
   (0,2,0) — et par l'ordre, cette regle venant 458 lignes plus bas. Resultat :
   sur toutes les pages sauf l'accueil, l'en-tete ne se figeait jamais au
   defilement ; la classe `is-sticky` etait bien posee par le JS, mais sans
   effet. On rend donc l'etat collant explicite hors accueil. */
body:not(.home) .mairie-header.is-sticky { position: fixed; }

/* …et son FOND doit disparaitre une fois colle. Au repos, l'en-tete des
   pages interieures peint lui-meme le bandeau sur ses 176px : il n'y a pas
   de visuel derriere, contrairement a l'accueil ou le heros occupe la
   place. Mais une fois colle, ce fond de 176px restait en place SOUS la
   bande de 82px du § « Etat collant » — le bandeau paraissait donc deux
   fois trop haut sur toute page autre que l'accueil (releve du 15/08/2026).
   En le retirant, seule la bande commune subsiste : l'en-tete colle est
   alors STRICTEMENT identique a celui de l'accueil, a toutes les largeurs.
   Aucune media query ici, volontairement : l'ecart existait aussi bien sur
   telephone que sur grand ecran. */
body:not(.home) .mairie-header.is-sticky { background: none; }

/* Fond de contenu en parallaxe, comme `.view-article main#content`.
   `width: 100%` et `max-width: none` sont indispensables : le theme parent
   contraint `.site-main` a une largeur de contenu, si bien que le fond
   s'arretait en colonne centrale avec deux bandes blanches sur les cotes.
   Le fond doit couvrir toute la largeur ; c'est le `.container` interieur
   qui borne le texte. */
body.mairie-interieur .site-main {
    position: relative;
    width: 100%; max-width: none; margin: 0;
    background: url('img/bloc-1.jpg') top center no-repeat fixed;
    background-size: cover;
    padding: 60px 0 120px;
    overflow-x: clip;
}

/* --- Decors de la page article ---------------------------------------
   Quatre decors dans l'original, poses sur le conteneur de contenu. Le
   premier est le trait pointille rouge que vous demandiez : il deborde
   volontairement de 130px a GAUCHE du cadre, d'ou le `overflow-x: clip`
   ci-dessus qui le rogne sans creer de barre de defilement.
   Tous disparaissent sous 991px, comme dans l'original.
   -------------------------------------------------------------------- */
body.mairie-interieur .site-main:before {
    content: ""; position: absolute; pointer-events: none;
    top: 30px; bottom: 0; left: -130px; right: 0; z-index: 0;
    background: url('img/t-inter-left.png') top left no-repeat;
}
/* `bottom: 0` et non le `-200px` de l'original : ce debord de 200px place
   le decor exactement sous le haut du pied de page, qui le recouvre
   integralement. Ecart assume — un decor invisible ne sert a rien. */
body.mairie-interieur .site-main:after {
    content: ""; position: absolute; pointer-events: none;
    top: 0; bottom: 0; left: 0; right: 0; z-index: 0;
    background: url('img/t-inter-right-bottom.png') bottom right no-repeat;
}
/* Les deux triangles jaunes.
   Portes par `.page-content`, qui est PLEINE LARGEUR a toute resolution, et
   non par `.container` : celui-ci plafonne a 1470px et se centre, si bien
   que son bord droit s'ecarte du bord de l'ecran des que la fenetre depasse
   1470 — le triangle se decollait alors d'une trentaine de pixels. Dans
   l'original le decor est lui aussi porte par un element pleine largeur.
   `background-origin: border-box` neutralise en plus le padding lateral. */
/* Marges du contenu. L'original empile TROIS retraits que je n'avais pas
   repris : 40px sur le conteneur externe, 15px de Bootstrap sur le
   conteneur, et 40px sur le bloc d'article — soit 95px de chaque cote.
   Le texte revient donc a la ligne au bon endroit au lieu de filer jusqu'au
   bord. Les 40px externes rognent aussi la largeur disponible AVANT le
   plafond de 1470px, ce qui compte au-dela de 1550px de fenetre. */
body.mairie-interieur .site-main .page-content { position: relative; padding: 0 40px 70px; }
/* Le decor doit ignorer ce padding : sans les -40px il se retrouverait
   insere de 40px et le triangle se decollerait a nouveau du bord droit. */
body.mairie-interieur .site-main .page-content:before {
    content: ""; position: absolute; pointer-events: none;
    top: 36%; bottom: 0; left: -40px; right: -40px; z-index: 0;
    background: url('img/bg-j-tr.png') top left no-repeat,
                url('img/bg-j-tr-right.png') top 49% right no-repeat;
    background-origin: border-box, border-box;
}
/* Le contenu passe devant les decors : un decor ne doit jamais recouvrir
   du texte. */
body.mairie-interieur .site-main .page-content > * { position: relative; z-index: 1; }

@media (max-width: 1470px) {
    body.mairie-interieur .site-main:before,
    body.mairie-interieur .site-main:after { background-size: 35%; }
    body.mairie-interieur .site-main .page-content:before { background-size: 10%; }
}
@media (max-width: 991px) {
    body.mairie-interieur .site-main:before,
    body.mairie-interieur .site-main:after,
    body.mairie-interieur .site-main .page-content:before { content: none; }
}
/* --- Articles : un seul decor de bas de page sous le palier laptop -----
   Les decors ci-dessus sont ancres en POURCENTAGE de la hauteur de
   `.page-content` (top:36% / top 49%) ou colles au bas de `.site-main`.
   Sur un article — contenu court, contrairement au formulaire de
   /contact/ — ils retombent dans les 200px qui precedent le pied de page,
   la ou la bande `triangle-foot-2.png` du footer deborde deja de 94px
   vers le haut : les deux se superposent. Et le palier de 991px vient du
   Bootstrap d'origine, pas de la tablette du site (1024px, kit
   Elementor) : entre 992px et le laptop, les decors se peignent encore.
   On etend donc leur retrait jusqu'au laptop, pour les ARTICLES
   seulement : en dessous ne reste que la bande de trois triangles du
   footer — le bas de page exact de /contact/. A partir de 1366px, et sur
   toutes les pages (`single-post` ne vise que les articles) : rien ne
   change. */
@media (max-width: 1365px) {
    body.single-post.mairie-interieur .site-main:before,
    body.single-post.mairie-interieur .site-main:after,
    body.single-post.mairie-interieur .site-main .page-content:before { content: none; }
}
/* 55px = les 15px de Bootstrap + les 40px du bloc d'article de l'original.
   Ajoutes aux 40px de `.page-content`, cela donne les 95px de marge. */
body.mairie-interieur .site-main .page-content > * {
    width: 1470px; max-width: 100%; margin: 0 auto; padding: 0 55px 70px;
    box-sizing: border-box;
}

/* Ces 95px etaient appliques a TOUTE resolution : sur un telephone de
   375px, ils ne laissaient que 185px au contenu — moins de la moitie de
   l'ecran, des photos a 145px et des tableaux illisibles. L'original ne
   souffrait pas du defaut : les 15px venaient d'un `.container` Bootstrap,
   qui reduit ses gouttieres sur petit ecran. On restitue cette decrue.
   La largeur utile passe de 49% a 87% de l'ecran sur un mobile courant. */
@media (max-width: 1200px) {
    body.mairie-interieur .site-main .page-content     { padding: 0 30px 70px; }
    body.mairie-interieur .site-main .page-content > * { padding: 0 40px 60px; }
}
@media (max-width: 991px) {
    body.mairie-interieur .site-main .page-content     { padding: 0 20px 55px; }
    body.mairie-interieur .site-main .page-content > * { padding: 0 20px 45px; }
}
@media (max-width: 600px) {
    body.mairie-interieur .site-main .page-content     { padding: 0 14px 40px; }
    body.mairie-interieur .site-main .page-content > * { padding: 0 10px 35px; }
}

/* --- Titre de l'article -----------------------------------------------
   Reproduction de `.view-article main#content h1` et de son `.subtitle`
   (custom.css:884-905, palier ligne 1609).

   Structure composite d'origine : <h1><span class="subtitle">…</span></h1>.
   Le h1 exterieur porte 40px / #151c43 et n'affiche aucun texte ; tout le
   rendu visible vient du span. Le span est insere cote PHP par
   `mairie_titre_article_compose()` (functions.php), pour que TOUT article —
   y compris ceux que la mairie creera plus tard — recoive la meme
   presentation sans intervention.

   Deux pieges corriges ici :

   1. Une regle `body.mairie-interieur .entry-title` a 84px rouge vivait au-dessus,
      mais `body.mairie-interieur .page-header .entry-title` la battait : specificite (0,2,2)
      contre (0,2,1). Le titre sortait donc a 40px en bleu nuit. Elle est
      supprimee plutot que renforcee — avec la structure composite elle
      ferait doublon, et une surenchere de specificite se serait repayee au
      prochain ajout de regle.

   2. La line-height. Le h1 est a 1.5em, soit 60px pour une fonte de 40px, et
      le span HERITE cette valeur en PIXELS. Le script de 84px est donc
      interligne a 60px : c'est le rendu serre de l'original. Poser une
      line-height relative sur le span la recalculerait sur 84px — 126px —
      et ecarterait les lignes.
   -------------------------------------------------------------------- */
/* L'en-tete reprend exactement la boite du corps d'article : dans le Joomla,
   le titre et le texte vivent dans le MEME conteneur et partagent donc la
   meme mesure (1330px a 1920px de large, verifie sur l'original). */
body.mairie-interieur .page-header {
    display: block; text-align: center;
    width: 1470px; max-width: 100%; margin: 0 auto; padding: 0 55px;
    box-sizing: border-box;
}
/* Hors PC, les 55px de retrait etranglent le titre : a 440px il ne lui
   reste que 330px et « Contact St Paul-sur-Isère » se plie en deux
   lignes serrees. Le titre est centre et seul dans son en-tete : il peut
   respirer jusqu'aux bords sans gener personne (demande du 16/08/2026 :
   diminuer les espaces gauche et droite du titre hors PC). */
@media (max-width: 1024px) {
    body.mairie-interieur .page-header { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) {
    body.mairie-interieur .page-header { padding-left: 15px; padding-right: 15px; }
}
/* Hello Elementor plafonne `.page-header .entry-title` a 500 / 600 / 800 /
   1140px selon la largeur d'ecran (theme.css). C'est l'echelle de son
   gabarit par defaut, sans rapport avec cette maquette : elle etranglait le
   titre 220px en deca de la mesure du corps de texte, si bien qu'il passait
   sur deux lignes la ou l'original tient sur une. Media queries et
   specificite ne se cumulent pas : (0,3,1) suffit a passer devant ses
   (0,2,0), a toutes les largeurs et sans !important.

   `width: auto` est indispensable en plus : Hello pose AUSSI `width: 100%`,
   qui rendait muettes les declarations `display: table` et `margin: auto`
   ci-dessous. Le rendu ne bougeait pas — le texte est centre de toute facon —
   mais deux declarations decoratives laissaient croire a un comportement
   qu'elles n'avaient plus. On les rend effectives plutot que de les laisser
   mentir : la boite du titre se dimensionne alors sur son contenu, comme
   dans l'original. */
body.mairie-interieur .page-header .entry-title { width: auto; max-width: none; }

body.mairie-interieur .page-header .entry-title {
    position: relative; z-index: 1;
    display: table; margin: auto;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 40px; line-height: 1.5em; color: #151c43; text-transform: none;
}
body.mairie-interieur .page-header .entry-title .subtitle {
    display: block; margin: 0px auto 50px;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 84px; letter-spacing: 1px; padding-right: 40px;
    color: #d10a12;
    /* Casse d'affichage uniforme : peu importe la saisie — souvent tout en
       capitales, comme « AM01.2026 TRAVAUX ARLYSERE… » —, le titre sort en
       bas de casse avec une seule majuscule initiale. C'est une
       transformation d'AFFICHAGE : le titre reste stocke tel que la mairie
       l'a saisi, et reste donc modifiable normalement en administration. */
    text-transform: lowercase;
    /* Interlignage. L'original herite 60px du h1, ce qui convient tant que le
       titre tient sur une ligne — le cas de tous les titres du Joomla. Sur
       deux lignes, 60px sous une fonte de 84px font se chevaucher hampes et
       jambages. Ecart assume, demande par le client. */
    line-height: .95em;
}
body.mairie-interieur .page-header .entry-title .subtitle::first-letter { text-transform: uppercase; }
/* Unique palier de l'original (custom.css:1595 → 1609). Il n'y en a pas
   d'autre : le titre reste a 70px jusqu'au mobile. Le palier a 45px sous
   600px qui figurait ici etait une invention de ma part, pas une reprise. */
@media (max-width: 1100px) {
    body.mairie-interieur .page-header .entry-title .subtitle { font-size: 70px; }
}

/* Corps de l'article : meme typographie que le reste du site. */
body.mairie-interieur .site-main .page-content {
    font-family: 'helvetica', Arial, sans-serif;
    font-size: 22px; line-height: 1.5em; color: #707287;
}
body.mairie-interieur .site-main .page-content img { max-width: 100%; height: auto; border-radius: 10px; }
body.mairie-interieur .site-main .page-content a { color: #003366; transition: all .4s; }
body.mairie-interieur .site-main .page-content a:hover { color: #e1211e; }

/* Le pied de page prend le meme fond que le contenu sur ces pages. */
body.mairie-interieur .mairie-footer,
body.mairie-interieur footer.elementor-location-footer {
    background: url('img/bloc-1.jpg') top center no-repeat fixed;
    background-size: cover;
}

/* --- Entete des pages interieures ------------------------------------
   Sur l'original, la page liste des actualites porte le titre dans un bloc
   `.item-pages` a fond clair, AVANT la bande grise des cartes — avec le
   style de titre d'ARTICLE (centre, 84px, rouge), pas celui de la bande
   « Focus sur » qui est aligne a droite.
   -------------------------------------------------------------------- */
/* Le fond est pose sur le BODY, pas sur une section : il couvre ainsi toute
   la page quelle que soit sa longueur. `fixed` cale l'image sur le viewport,
   elle remplit donc l'ecran en permanence — deux articles ou vingt, le rendu
   est identique et il n'y a jamais de zone nue en bas. */
body.page:not(.home) {
    background: url('img/bloc-1.jpg') top center no-repeat fixed;
    background-size: cover;
}
/* Les sections deviennent transparentes pour laisser voir ce fond. */
body.page:not(.home) .mairie-bloc-2 { background: transparent; }

.mairie-bloc-titre {
    position: relative; text-align: center;
    padding: 100px 0 60px;
    overflow-x: clip;
}
/* Decors : le trait pointille rouge a gauche et le triangle jaune a droite,
   les memes que sur la page article. Ancres sur une boite pleine largeur,
   en z-index 0 sous un contenu en z-index 1 — un decor ne doit jamais
   recouvrir du texte. */
.mairie-bloc-titre:before,
.mairie-bloc-titre:after {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
    top: 0; bottom: 0;
}
.mairie-bloc-titre:before {
    left: 0; right: 0;
    background: url('img/t-inter-left.png') top left no-repeat;
}
.mairie-bloc-titre:after {
    left: 0; right: 0;
    background: url('img/bg-j-tr-right.png') top 60% right no-repeat;
    background-origin: border-box;
}
.mairie-bloc-titre > * { position: relative; z-index: 1; }
@media (max-width: 1470px) {
    .mairie-bloc-titre:before { background-size: 35%; }
    .mairie-bloc-titre:after  { background-size: 10%; }
}
@media (max-width: 991px) {
    .mairie-bloc-titre:before,
    .mairie-bloc-titre:after { content: none; }
}
/* Page « Les Actualités » : resserrement téléphone demandé le 15/08/2026.
   Les aplombs de .mairie-bloc-titre et .mairie-bloc-2 sont posés EN DUR par
   le thème, à égalité de spécificité avec le CSS des conteneurs Elementor
   mais chargés après lui : les réglages responsive de l'éditeur perdent la
   partie sur la propriété padding. On surcharge donc ici, borné à CETTE
   page par sa classe de corps — l'accueil, qui partage ces classes, ne
   bouge pas. */
@media (max-width: 767px) {
    .page-id-36 .mairie-bloc-titre { padding: 30px 0 20px; }
    .page-id-36 .mairie-bloc-2    { padding: 10px 0 180px; }
}
/* Meme page : les deux decors du bas du bloc gris (trait pointille rouge
   a gauche, triangles jaunes a droite) sont en z-index 2 et debordent de
   94px SOUS le bloc — sur l'accueil c'est l'effet voulu, ils mordent sur
   la bande blanche qui suit. Ici la section est la DERNIERE avant le pied
   de page : le debord tombait en plein sur la bande de trois triangles du
   footer (demande du 15/08/2026 : le decor rouge reste en arriere-plan,
   jamais sur les articles). Bornes a CETTE page :
   - `overflow: clip` remplace le clip horizontal seul : plus aucun
     debord sous le bloc, la couture avec le footer redevient celle de
     /contact/ — la bande de trois triangles, seule ;
   - z-index 0 : peints avant l'enveloppe des cartes (ordre du flux),
     ils ne peuvent JAMAIS passer au-dessus du contenu, quel que soit le
     nombre de lignes ou l'etat de la pagination. */
.page-id-36 .mairie-bloc-2 { overflow: clip; }
.page-id-36 .mairie-bloc-2:before,
.page-id-36 .mairie-bloc-2:after { z-index: 0; }

/* Deux écritures pour le même titre : le h1 historique en HTML brut, et
   l'élément Titre d'Elementor — la classe est alors posée sur l'enveloppe
   du widget (Avancé > Classes CSS), le h1 rendu est .elementor-heading-title.
   Migration demandée le 15/08/2026 : la page « Les Actualités » passe en
   éléments natifs. */
.mairie-titre-page,
.mairie-titre-page .elementor-heading-title {
    display: table; margin: 0 auto;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 40px; color: #151c43;
}
.mairie-titre-page .subtitle {
    display: block; margin: -10px auto 0;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 84px; letter-spacing: 1px; color: #d10a12;
}
@media (max-width: 600px) { .mairie-titre-page .subtitle { font-size: 45px; } }

/* =====================================================================
   5. BLOCS DE CONTENU
   ===================================================================== */

/* --- Bloc 1 : bienvenue, sous le slider ------------------------------
   Reproduction de `.moduletable.bloc-1` (custom.css:415-546 du Joomla).
   La version precedente n'en reprenait que le fond : il manquait le trait
   decoratif, le rectangle jaune, le triangle, le chevauchement des photos
   et toute la cascade responsive.
   `min-height: 945px` n'est pas arbitraire : c'est la hauteur native de
   bloc-1.jpg (2000x945). Le fond est en `fixed` — effet parallaxe. iOS
   l'ignore, comme sur l'original ; on ne compense pas, par fidelite.
   -------------------------------------------------------------------- */
.mairie-bloc-1 {
    position: relative;
    background: url('img/bloc-1.jpg') top center no-repeat fixed;
    background-size: cover;
    padding: 150px 0 0;
    color: #707287;
    font-family: 'helvetica', Arial, sans-serif;
    font-weight: normal;
    font-size: 22px;
    min-height: 945px;
    /* Le triangle deborde de ~20px a droite et le trait de 184px a gauche.
       L'original absorbe ce debordement avec l'`overflow: hidden` de son
       conteneur de page. On rogne ici, au plus pres : `clip` et non `hidden`,
       car `hidden` forcerait l'axe vertical en `auto` et couperait le trait,
       qui doit pouvoir deborder vers le bloc suivant comme dans l'original. */
    overflow-x: clip;
    /* Boite d'empilement de la section (19/08/2026). Sans elle, un decor en
       z-index negatif ci-dessous remonterait jusqu'a la racine et passerait
       DERRIERE la photo de fond. Ici il reste dans la section : au-dessus du
       fond, en dessous du contenu. */
    z-index: 0;
}
/* --- Decors de la section : trait rouge et rectangle jaune --------------
   Ils vivaient au-dessus du contenu et ne restaient invisibles que parce
   que les colonnes portaient un z-index plus fort (5 contre 2). Le bloc
   etant desormais compose d'elements Elementor natifs, sans z-index, le
   trait repassait devant : il masquait le texte, et surtout sa boite —
   695px de haut sur toute la largeur, transparente presque partout —
   INTERCEPTAIT LES CLICS. Le bouton « Plus de details » ne repondait plus.

   On ne compte donc plus sur le contenu pour couvrir le decor : le decor
   est mis derriere, une fois pour toutes, et rendu insensible au pointeur
   puisqu'il n'a rien d'interactif. Le rendu ne bouge pas d'un pixel. */
.mairie-bloc-1:before,
.mairie-bloc-1:after { z-index: -1; pointer-events: none; }
/* Trait decoratif. Son `left` negatif le fait deborder a gauche ; c'est
   l'overflow-x du body qui absorbe ce debordement. */
.mairie-bloc-1:before {
    content: ""; position: absolute; top: 391px; left: 0;
    width: 100%; height: 695px;
    background: url('img/trait.png') bottom left no-repeat;
}
/* Rectangle jaune en bas a gauche : un APLAT, pas une image, et seul son
   coin haut-droit est arrondi. */
.mairie-bloc-1:after {
    content: ""; position: absolute; bottom: 0; left: 0;
    width: 437px; height: 42px;
    background: #f3c532; border-top-right-radius: 25px;
}

.mairie-bloc-1-inner {
    position: relative; width: 1470px; max-width: 100%;
    margin: 0 auto; padding: 0 15px; box-sizing: border-box;
}

/* Le titre : le h1 est a 32px mais ne porte aucun texte propre — tout est
   dans le span a 60px, remonte de 18px pour compenser l'interligne de 48px
   herite. Contrairement aux autres titres du site, PAS de `font-size: 0`
   sur le parent ici. */
.mairie-bloc-1-titre {
    position: relative; z-index: 6;
    color: #293da8; font-family: 'amstagramregular', cursive;
    font-size: 32px; line-height: 1.5em; font-weight: normal;
    margin: 0 0 70px; text-align: center;
}
.mairie-bloc-1-titre .subtitle {
    display: table; margin: -18px auto 0;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 60px; letter-spacing: 1px;
}

/* Deux colonnes en flottants 50/50 — aucune grille. Le conteneur ne les
   nettoie pas : c'est le min-height de 945px qui tient la hauteur, comme
   dans l'original. */
.mairie-bloc-1-gauche { position: relative; float: left;  width: 50%; z-index: 5; }
.mairie-bloc-1-droite { position: relative; float: right; width: 50%; z-index: 5; }

.mairie-bloc-1-info { line-height: 1.32em; padding-left: 70px; }
.mairie-bloc-1-info p {
    font-family: 'helvetica', Arial, sans-serif;
    font-weight: 700; color: #151c43; margin: 0 0 16px;
}
.mairie-bloc-1-info ul { margin: 0; padding: 0; list-style: none; }
/* La puce est une image de FOND du <li> — ni ::before, ni list-style-image,
   ni caractere. 13x12px collee a gauche, 8px du haut ; les 25px de padding
   laissent 12px entre la puce et le texte. */
.mairie-bloc-1-info li {
    margin: 0; padding: 0 0 0 25px;
    background: url('img/list-icon02.png') top 8px left no-repeat;
}
/* --- Bouton « Plus de details » --------------------------------------
   Ecart assume par rapport a l'original, a votre demande : la-bas c'est un
   simple lien gris avec une fleche en image de fond, sans autre effet au
   survol qu'un changement de couleur. On en fait un vrai bouton.

   Trois choix de conception :
   1. Le remplissage jaune balaie depuis la gauche. C'est un `background-size`
      anime sur un degrade plat, PAS un pseudo-element : le texte n'a donc pas
      besoin d'etre enveloppe dans un <span>, et le balisage reste inchange.
   2. La fleche est DESSINEE en bordures avec `currentColor`, et non l'image
      `flech-j.png`. Celle-ci est jaune : elle disparaitrait sur le
      remplissage jaune. En `currentColor` elle suit la couleur du texte et
      reste lisible dans les deux etats.
   3. L'animation ne touche que des proprietes composables (transform,
      background-size) : aucun recalcul de mise en page au survol.
   -------------------------------------------------------------------- */
.mairie-bloc-1-info a {
    display: inline-flex; align-items: center; gap: 14px;
    margin: 72px 0 0; padding: 14px 32px;
    font-family: 'helvetica', Arial, sans-serif; font-size: 20px; font-weight: 700;
    color: #151c43; text-decoration: none;
    border: 2px solid #f3c42e; border-radius: 999px;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1),
                transform .25s ease, box-shadow .25s ease;
}
.mairie-bloc-1-info a::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
/* La couleur du texte est verrouillee sur TOUS les etats. Sans cela, une
   regle `a:hover` generique (thema parent ou kit Elementor) la passait au
   jaune : texte jaune sur remplissage jaune, le libelle disparaissait.
   #151c43 sur #f3c42e donne un contraste d'environ 8,9:1 — largement
   au-dessus du minimum AA de 4,5:1. */
.mairie-bloc-1-info a:link,
.mairie-bloc-1-info a:visited,
.mairie-bloc-1-info a:hover,
.mairie-bloc-1-info a:focus,
.mairie-bloc-1-info a:focus-visible,
.mairie-bloc-1-info a:active { color: #151c43; }

.mairie-bloc-1-info a:hover,
.mairie-bloc-1-info a:focus-visible {
    background-size: 100% 100%;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(243, 196, 46, .35);
}
/* Le decalage s'applique APRES la rotation : il suit donc les axes tournes,
   ce qui pousse bien la pointe vers la droite a l'ecran. */
.mairie-bloc-1-info a:hover::after,
.mairie-bloc-1-info a:focus-visible::after { transform: rotate(-45deg) translate(3px, 3px); }
.mairie-bloc-1-info a:focus-visible { outline: 3px solid #177a99; outline-offset: 3px; }
.mairie-bloc-1-info a:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .mairie-bloc-1-info a,
    .mairie-bloc-1-info a::after { transition: none; }
    .mairie-bloc-1-info a:hover { transform: none; }
}

/* Photos : coins arrondis a 10px, la grande remontee de 193px sous le
   slider, la petite en absolu par-dessus. Aucune des deux n'a de z-index —
   c'est l'ordre du DOM qui met la petite devant. */
.mairie-bloc-1 .mairie-photo img { border-radius: 10px; max-width: 100%; height: auto; display: block; }
.mairie-bloc-1 .ph-1 { position: relative; float: right; margin: -193px 33px 0 0; }
.mairie-bloc-1 .ph-2 { clear: both; position: absolute; bottom: -96px; left: -159px; }
/* Triangle : porte par la GRANDE photo, il deborde de 94px sur sa droite. */
.mairie-bloc-1 .ph-1:after {
    content: ""; position: absolute; right: -94px; bottom: 143px;
    width: 186px; height: 94px;
    background: url('img/triangl2.png') top right no-repeat;
}

/* --- Paliers, en ordre decroissant --- */
@media (max-width: 1700px) { .mairie-bloc-1:before { top: 378px; left: -101px; } }
@media (max-width: 1600px) { .mairie-bloc-1:before { top: 364px; left: -184px; } }
@media (max-width: 1470px) {
    .mairie-bloc-1 { font-size: 20px; }
    .mairie-bloc-1-inner { width: 100%; padding: 0 15px; }
    .mairie-bloc-1:before { top: 382px; left: -224px; }
    /* La boite reste 186x94 : seul le DESSIN retrecit, cale en haut a droite. */
    .mairie-bloc-1 .ph-1:after { right: -57px; background-size: 60%; }
}
@media (max-width: 1366px) { .mairie-bloc-1 .ph-2 { left: -155px; } }
/* Le trait disparait ici et ne revient plus en dessous. */
@media (max-width: 1200px) { .mairie-bloc-1:before { content: none; } }
@media (max-width: 1100px) {
    .mairie-bloc-1-info { padding-left: 0; padding-right: 26px; }
    .mairie-bloc-1 .ph-2 { left: -18px; bottom: -169px; }
}
@media (max-width: 1050px) {
    .mairie-bloc-1 { padding: 50px 0 150px; }
    .mairie-bloc-1-titre { margin-bottom: 40px; }
    .mairie-bloc-1-gauche,
    .mairie-bloc-1-droite { float: none; width: auto; display: table; margin: 20px auto; }
    .mairie-bloc-1-info { padding: 15px; }
    /* `margin: auto` annule la remontee de -193px — c'est voulu dans l'original. */
    .mairie-bloc-1 .ph-1 { float: none; margin: auto; display: table; }
    /* Changement de mecanisme : on quitte l'absolu, le chevauchement passe
       a une marge negative verticale. */
    .mairie-bloc-1 .ph-2 {
        position: relative; left: unset; right: unset; top: unset; bottom: unset;
        display: table; margin: -150px 0 0;
    }
}
/* Fin du chevauchement : la petite photo se centre sous la grande. */
@media (max-width: 991px) { .mairie-bloc-1 .ph-2 { margin: 31px auto 0; } }
@media (max-width: 767px) { .mairie-bloc-1 .ph-2 { display: table; margin: 40px auto 0; } }
@media (max-width: 600px) {
    .mairie-bloc-1-titre .subtitle { font-size: 45px; }
    .mairie-bloc-1 .ph-2 { margin: 50px auto 0; }
    /* Triangle et rectangle jaune supprimes par la meme regle. */
    .mairie-bloc-1 .ph-1:after,
    .mairie-bloc-1:after { content: none; }
}
@media (max-width: 375px) { .mairie-bloc-1-titre .subtitle { font-size: 35px; } }

/* --- Bloc 2 : « Focus sur » ET les actualites -------------------------
   ATTENTION : dans l'original ce n'est PAS deux sections mais UNE bande
   unique (index.php:176-184) qui enchaine quatre modules — titre Focus,
   cartes Focus, titre actus, cartes + liste actus. Un seul fond gris.
   -------------------------------------------------------------------- */
.mairie-bloc-2 {
    position: relative;
    background: #eaeaea;
    padding: 100px 0 180px;
    /* Même garde-fou que sur le bloc 1 : `clip` et non `hidden`, pour que
       les triangles puissent continuer à déborder VERS LE BAS (bottom:-93px)
       tout en étant rognés à droite comme le fait l'original. */
    overflow-x: clip;
}
/* Les triangles jaunes en bas a droite. Jamais supprimes, meme en mobile. */
/* Trait pointille rouge : accroche au bas du bloc des articles. bottom:-94
   avec 234px de haut = il monte de 140px dans le gris et deborde de 94px
   dans le blanc — les valeurs de l origine, mesurees depuis la frontiere. */
.mairie-bloc-2:before {
    content: ""; position: absolute; left: 0; bottom: -94px;
    width: 577px; height: 234px; z-index: 2;
    background: url('img/trait-2.png') top left no-repeat;
}
@media (max-width: 1200px) { .mairie-bloc-2:before { content: none; } }

/* Le creux de 180px logeait le bouton ABSOLU des actualites ; avec le bouton
   dans le flux, il ne loge plus rien. On le resserre quand ce bouton est la.
   Sans :has (vieux navigateurs), on garde simplement l ancien creux. */
.mairie-bloc-2:has(.mairie-lien-actus--flux) { padding-bottom: 60px; }

.mairie-bloc-2:after {
    content: ""; position: absolute; right: 0; bottom: -93px;
    width: 435px; height: 282px; z-index: 2;
    background: url('img/triangles.png') top right no-repeat;
}
@media (max-width: 1200px) { .mairie-bloc-2:after { bottom: -169px; background-size: 60%; } }

/* `position: relative` indispensable : c'est l'ancre du lien
   « toutes les actualites », qui se place SOUS ce conteneur. */
.mairie-bloc-2-inner {
    position: relative; width: 1470px; max-width: 100%;
    margin: 0 auto; padding: 0 15px; box-sizing: border-box;
}
@media (max-width: 1470px) { .mairie-bloc-2-inner { width: 100%; } }

/* Titre de section. Le `capitalize` du sous-titre est ce qui fait afficher
   « Focus Sur » et non « Focus sur » — c'est le rendu d'origine.
   Le rouge vient d'un style inline pose dans le contenu du module Joomla,
   il ecrase le jaune de la charte : reproduit tel quel, a arbitrer. */
.mairie-bloc-2-titre {
    display: table; position: relative; z-index: 1;
    font-family: 'amstagramregular', cursive; font-size: 28px; line-height: 42px;
    color: #151c43; text-transform: uppercase; margin: 0 0 70px; text-align: right;
}
.mairie-bloc-2-titre .subtitle {
    display: table; margin: 0;
    font-family: 'amstagramregular', cursive; font-weight: normal;
    font-size: 84px; line-height: 42px; color: #ff0000;
    text-transform: capitalize;
}
/* Titre de la bande « actus » : meme composant que « Focus sur », au jaune
   pres (custom.css:578). L'original ecrit « actusStPaul/Isère » sans espace ;
   le `text-transform: capitalize` en fait « ActusStPaul/Isère ». */
.mairie-bloc-2-titre--actus .subtitle { color: #f3c42e; }
@media (max-width: 1100px) { .mairie-bloc-2-titre .subtitle { font-size: 70px; } }

/* --- Cartes « Focus sur » --------------------------------------------
   Trois colonnes flottantes declarees pour deux articles seulement : le
   tiers de droite reste vide. C'est ainsi dans l'original.
   -------------------------------------------------------------------- */
.mairie-focus-liste:after { content: ""; display: table; clear: both; }
.mairie-focus-carte {
    float: left; width: 33.3333%; position: relative;
    padding: 0 20px 20px 0; box-sizing: border-box;
}
@media (max-width: 767px) { .mairie-focus-carte { float: none; display: table; width: auto; } }

/* Le `margin-bottom: 105px` reserve la place ou vient se loger le titre,
   positionne en absolu. Le triangle jaune pointe vers ce titre. */
.mairie-focus-img { position: relative; display: block; margin: 6px 14px 105px 0; }
.mairie-focus-img img { width: 100%; height: auto; border-radius: 25px; display: block; }
.mairie-focus-img:after {
    content: ""; position: absolute; bottom: -29px; left: 40px;
    width: 59px; height: 29px;
    background: url('img/tr-bx.png') top left no-repeat;
}
@media (max-width: 600px) { .mairie-focus-img { margin-bottom: 40px; } }

.mairie-focus-titre {
    position: absolute; bottom: 90px; width: 100%; margin: 0;
    font-family: 'helvetica', Arial, sans-serif; font-size: 22px; font-weight: 700;
    line-height: 1.5em; color: #151c43;
}
@media (max-width: 1470px) { .mairie-focus-titre { font-size: 18px; } }
@media (max-width: 1366px) { .mairie-focus-titre { width: 306px; } }
@media (max-width: 900px)  { .mairie-focus-titre { width: 245px; } }
/* Sous 900px le titre repasse dans le flux et remonte au-dessus de l'image.
   L'original garde le positionnement absolu jusqu'à 600px en descendant
   simplement le titre à `bottom: 40px`. Mais ce `bottom` se mesure sur la
   CARTE, pas sur l'image : le titre retombe donc dans l'extrait dès que la
   colonne se resserre — chevauchement mesuré de 226x23px à 768px.
   Le défaut est structurel : il dépend de la hauteur de l'extrait, donc de
   ce que l'administration publie. 900px est le palier où les colonnes
   deviennent trop étroites (c'est là que la largeur du titre tombe à
   245px) ; au-dessus, la composition d'origine tient et ne bouge pas. */
@media (max-width: 900px)  { .mairie-focus-titre { position: relative; bottom: auto; width: auto; } }

.mairie-focus-extrait {
    float: left; margin: 0; padding: 0;
    font-size: 21px; line-height: 31.5px; color: #707287;
}
.mairie-focus-extrait a { color: #003366; text-decoration: none; transition: all .4s; }
.mairie-focus-extrait a:hover { color: #e1211e; }
@media (max-width: 1470px) { .mairie-focus-extrait { font-size: 18px; line-height: 27px; } }

/* --- Page liste : grille auto-remplie ---------------------------------
   La disposition d'origine tient sur l'accueil, qui n'affiche que DEUX
   cartes de meme hauteur. Elle s'effondre sur la page liste, qui en empile
   vingt et un avec des vignettes de proportions tres differentes. Trois
   defauts s'y cumulaient, tous issus du meme mecanisme :

   1. TROUS VERTICAUX. Les cartes sont des flottants : un flottant s'accroche
      au bas du precedent quand il est plus haut, et saute une place. D'ou les
      grands vides. La grille place chaque carte dans sa propre cellule, la
      hauteur de la voisine n'entre plus en jeu.

   2. TITRE SUR L'EXTRAIT. Le titre est en `position: absolute; bottom: 90px`
      — mesure depuis le bas de la CARTE, pas depuis l'image. Sa position
      dependait donc de la longueur de l'extrait : extrait court, le titre
      retombait dessus. Il repasse dans le flux normal.

   3. TRIANGLE SUR LE TITRE. Meme cause : il pointe vers un titre dont la
      place variait. La marge sous l'image devient un vrai espace, le
      triangle s'y loge.

   `auto-fill` + `minmax` : le nombre de colonnes suit la largeur disponible,
   sans palier a maintenir. La mairie peut publier autant d'articles qu'elle
   veut, avec des images de n'importe quelle proportion : rien a regler.

   La classe n'est posee que par l'element « Toutes les actualites —
   Mairie », donc sur la page des actualites seulement ; les bandes de
   l'accueil (element « Liste d'articles ») restent en --flux, la
   disposition deja validee.
   -------------------------------------------------------------------- */
.mairie-focus-liste--grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 64px 30px;
    align-items: start;
}
.mairie-focus-liste--grille:after { content: none; }
.mairie-focus-liste--grille .mairie-focus-carte {
    float: none; width: auto; padding: 0;
    display: flex; flex-direction: column;
}
/* L'ordre du balisage garde le titre en premier — c'est lui qui doit etre
   annonce d'abord par un lecteur d'ecran. L'ordre VISUEL, lui, place la
   vignette en tete, comme dans la maquette. */
.mairie-focus-liste--grille .mairie-focus-img     { order: 1; }
.mairie-focus-liste--grille .mairie-focus-titre   { order: 2; }
.mairie-focus-liste--grille .mairie-focus-extrait { order: 3; }

/* Boite de vignette a proportion constante : c'est ce qui aligne les cartes
   entre elles. `contain` plutot que `cover` — beaucoup de ces vignettes sont
   des affiches ou des arretes en portrait, les rogner couperait le texte. */
.mairie-focus-liste--grille .mairie-focus-img {
    margin: 0 0 46px; aspect-ratio: 4 / 3;
    background: #fff; border-radius: 25px;
    /* `min-height: 0` est indispensable : la carte est un conteneur flex, et
       un element flex a `min-height: auto`, c'est-a-dire une taille minimale
       egale a celle de son contenu. Les affiches en portrait imposaient donc
       leur hauteur intrinseque — jusqu'a 601px au lieu des 253px voulus — et
       l'`aspect-ratio` restait sans effet sur elles. */
    min-height: 0;
}
.mairie-focus-liste--grille .mairie-focus-img img {
    width: 100%; height: 100%; object-fit: contain; border-radius: 25px;
}
.mairie-focus-liste--grille .mairie-focus-titre {
    position: static; width: auto; margin: 0 0 12px;
}
.mairie-focus-liste--grille .mairie-focus-extrait { float: none; }

/* --- Page des actualites : barre de filtre et pagination -------------
   L'element « Toutes les actualites — Mairie ». Le visiteur trie et
   filtre SANS JavaScript : le formulaire recharge la page avec ses choix
   dans l'adresse, les menus les reaffichent d'eux-memes.
   Rien de neuf a l'oeil : champs a la recette du formulaire de contact
   (libelles 20px, chevron SVG a la place de la fleche systeme, anneau
   bleu double d'un halo au focus), bouton et pastilles a celle du bouton
   « Plus de details » (pastille 999px, bordure jaune, remplissage
   balaye, chevron dessine en currentColor — voir ces blocs pour les
   choix de conception, qui valent ici aussi).
   Les etats survol/focus du bouton et des pastilles REDECLARENT couleur
   et fond : le reset du theme parent peint `button:hover` en #c36/blanc
   et `a:hover` en #336 — memes armes que « Plus de details », qui
   verrouille sa couleur sur tous les etats pour la meme raison. */
.mairie-actus {
    /* les liens de pagination ramenent a l'ancre #actualites : l'en-tete
       colle (bande bleue de 109px) recouvrirait le haut de la barre */
    scroll-margin-top: 140px;
}
.mairie-actus-filtre {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 24px;
    margin: 0 0 56px;
}
.mairie-actus-champ {
    display: flex; flex-direction: column; gap: 8px;
    flex: 0 1 330px; min-width: 0;
}
.mairie-actus-champ > span {
    font-family: 'helvetica', Arial, sans-serif;
    font-size: 20px; font-weight: 400; color: #151c43;
}
.mairie-actus-filtre select {
    width: 100%; height: 50px; padding: 0 44px 0 16px; cursor: pointer;
    border: 1px solid #c9cedb; border-radius: 8px;
    font-family: 'helvetica', Arial, sans-serif; font-size: 18px; color: #151c43;
    -webkit-appearance: none; appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23151c43' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.mairie-actus-filtre select:hover { border-color: #177a99; }
.mairie-actus-filtre select:focus {
    outline: 2px solid #177a99; outline-offset: 1px; border-color: #177a99;
    box-shadow: 0 0 0 4px rgba(23, 122, 153, .12);
}
.mairie-actus-bouton {
    display: inline-flex; align-items: center; gap: 12px;
    height: 50px; padding: 0 32px; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-size: 19px; font-weight: 700;
    color: #151c43; border: 2px solid #f3c42e; border-radius: 999px;
    background-color: transparent;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1);
}
.mairie-actus-bouton::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
/* trois classes de specificite : passe devant `[type=submit]:hover` du
   reset parent quel que soit l'ordre de chargement */
.mairie-actus-filtre .mairie-actus-bouton:hover,
.mairie-actus-filtre .mairie-actus-bouton:focus,
.mairie-actus-filtre .mairie-actus-bouton:active {
    background-size: 100% 100%;
    background-color: transparent; color: #151c43;
}
.mairie-actus-filtre .mairie-actus-bouton:focus-visible { outline: 2px solid #177a99; outline-offset: 3px; }

.mairie-actus-pages {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 10px; margin: 64px 0 0;
    font-family: 'helvetica', Arial, sans-serif;
}
.mairie-actus-page {
    min-width: 46px; height: 46px; padding: 0 8px; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: #151c43; text-decoration: none;
    border: 2px solid #c9cedb; border-radius: 999px; background: #fff;
    transition: border-color .25s ease, background-color .25s ease;
}
/* couleur verrouillee sur tous les etats (le reset peint a:hover en
   #336) ; survol et focus remplissent en jaune, comme la feuille
   courante — l'anneau bleu distingue le focus clavier */
a.mairie-actus-page:link, a.mairie-actus-page:visited { color: #151c43; }
a.mairie-actus-page:hover, a.mairie-actus-page:focus {
    color: #151c43; border-color: #f3c42e; background-color: #f3c42e;
}
a.mairie-actus-page:focus-visible { outline: 2px solid #177a99; outline-offset: 3px; }
.mairie-actus-page--ici { border-color: #f3c42e; background: #f3c42e; }
.mairie-actus-trous { color: #151c43; font-size: 18px; letter-spacing: 2px; }
/* fleches precedent/suivant : le meme chevron dessine que partout */
.mairie-actus-page--fleche::before {
    content: ""; display: block; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.mairie-actus-page--prec::before { transform: rotate(135deg); margin-left: 3px; }
.mairie-actus-page--suiv::before { transform: rotate(-45deg); margin-right: 3px; }

@media (prefers-reduced-motion: reduce) {
    .mairie-actus-bouton, .mairie-actus-page,
    .mairie-actus-filtre select { transition: none; }
}

/* telephone : champs et bouton en pleine largeur, cibles de 46px ;
   l'en-tete colle est plus bas que celui du bureau */
@media (max-width: 767px) {
    .mairie-actus { scroll-margin-top: 110px; }
    .mairie-actus-filtre { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 40px; }
    .mairie-actus-champ { flex-basis: auto; }
    .mairie-actus-bouton { justify-content: center; }
    .mairie-actus-pages { margin-top: 48px; gap: 8px; }
}

/* --- Lien « toutes les actualites » ----------------------------------
   Il est en absolu SOUS le conteneur (bottom: -118px), donc dans le
   padding-bottom de 180px de la bande. Le decor n'est pas une fleche
   malgre son nom de classe : c'est une bulle de dialogue avec un « + »,
   un sprite de 254x119 affiche dans une fenetre de 119x119. Au survol,
   `background-position` bascule de `top left` a `top right` : la bulle
   passe du jaune au rouge en 0,5s. Elle ne se deplace pas — dans
   l'original la regle de survol pose un `right` sans annuler le `left`,
   qui l'emporte. On reproduit ce comportement.
   -------------------------------------------------------------------- */
.mairie-lien-actus {
    position: absolute; bottom: -118px; left: 0; right: 0; margin: auto;
    display: block; text-align: center; text-decoration: none;
    font-family: 'helvetica', Arial, sans-serif; font-weight: 700;
    font-size: 22px; line-height: 1.2em; text-transform: uppercase;
    color: #151c43; transition: all .4s;
}
.mairie-lien-actus:hover { color: #e1211e; }
.mairie-lien-actus span {
    position: relative; display: table; text-align: right; margin: auto; z-index: 4;
}
/* Le libelle « flech » est masque par font-size: 0, comme dans l'original. */
.mairie-lien-actus .fl { font-size: 0; z-index: 1; }
.mairie-lien-actus .fl:before {
    content: ""; position: absolute; top: -79px; left: 51px;
    width: 119px; height: 119px; margin: auto; z-index: 0;
    background: url('img/plus.png') top left no-repeat;
    transition: .5s all;
}
.mairie-lien-actus:hover .fl:before { background-position: top right; }
@media (max-width: 1470px) { .mairie-lien-actus { font-size: 20px; } }
/* --- Bloc 3 : offres d'emplois ---------------------------------------
   Le trait pointillé rouge est porté par ce bloc, pas par le précédent :
   son `top: -140px` le fait volontairement déborder VERS LE HAUT, sur le
   bas de la bande des actualités. C'est pour cela qu'il semble appartenir
   à la zone du dessus.
   -------------------------------------------------------------------- */
.mairie-bloc-3 {
    position: relative;
    background: #fffdfd;
    padding: 120px 0;
}
/* Le trait etait ancre ICI (top:-140px), donc suspendu au bloc des offres :
   quand le bouton des actualites est passe dans le flux, le bloc du dessous
   est descendu et le trait avec lui — il quittait la zone des articles. Il
   est desormais accroche au bas du bloc des articles (meme geometrie :
   140px au-dessus de la frontiere, 94px en dessous), independant de ce qui
   suit. */
/* Le titre doit partir du MEME conteneur que « Focus sur » : sans cela il se
   cale sur le bord du bloc au lieu de la colonne de contenu, d'où un écart
   de 15px entre les deux titres. Mesuré sur l'original : ils sont alignés
   au pixel (écart 0), tous deux à 15px du bord au format testé. */
.mairie-bloc-3 > .e-con-inner {
    width: 1470px; max-width: 100%; margin: 0 auto;
    padding: 0 15px; box-sizing: border-box;
}
/* Verticalement, l'original place le titre à exactement 80px du haut du bloc
   — le padding, rien de plus — ce qui le fait CHEVAUCHER le bas du trait de
   14px. Elementor intercalait 70px de retrait : on remet à zéro et on reprend
   le `margin: 0 0 50px` du h1 d'origine. */
.mairie-bloc-3 > .e-con-inner > .elementor-element { margin-top: 0; }
.mairie-bloc-3 .mairie-titre--emplois { margin: 0 0 50px; }

@media (max-width: 1470px) { .mairie-bloc-3 { padding: 80px 0 120px; } }
@media (max-width: 1366px) { .mairie-bloc-3:before { background-size: 100%; } }
@media (max-width: 1280px) { .mairie-bloc-3:before { background-size: 80%; } }
/* Le trait disparaît ici et ne revient pas : la règle @900px qui le
   redéclare est morte, `content: none` n'y étant jamais annulé. */
@media (max-width: 1200px) { .mairie-bloc-3:before { content: none; } }
@media (max-width: 820px)  { .mairie-bloc-3 { padding: 80px 0 10px; } }
/* =====================================================================
   6. PIED DE PAGE
   ===================================================================== */

/* Le fond photo est calé `top right`, pas centré. Les deux décors jaunes
   sont portés par le footer lui-même : le grand triangle en bas à gauche
   et la bande dentelée en haut à droite. */
.mairie-footer { position: relative; padding: 125px 0 0; background: #fffdfd; }
.mairie-foot-top {
    position: relative;
    background: url('img/footer-min.jpg') top right no-repeat;
    background-size: cover;
}
/* Décors de la bande bleue. Repositionnés par rapport au BAS de la bande
   plutôt que d'après les coordonnées de l'original, dont le `.foot-top`
   n'a pas la même géométrie : c'est ce décalage qui les faisait passer en
   travers du texte au premier essai.
   Le z-index les place sous le contenu — un décor ne doit jamais recouvrir
   du texte.

   `overflow-x: clip` et non `overflow: hidden` : le motif de gauche doit
   déborder VERS LE HAUT, dans la zone blanche au-dessus du pied de page,
   tout en restant contenu horizontalement (le décor de droite fait 1125px
   et sortirait du cadre sur un écran étroit). `hidden` aurait rogné le
   débordement vertical ; `clip` ne contraint que l'axe demandé et laisse
   `overflow-y` visible — ce que `hidden` ne permet pas, puisqu'il force
   l'autre axe à `auto`. */
.mairie-foot-top { overflow-x: clip; }
.mairie-foot-top:before,
.mairie-foot-top:after {
    content: ""; position: absolute; bottom: 0; z-index: 0; pointer-events: none;
}
/* Motif d'angle : deux triangles jaunes et un triangle beige inversé,
   assemblés sans espace. Il est calé pour que sa LIGNE DE JONCTION tombe
   exactement sur le bord haut du pied de page : les deux triangles jaunes
   restent dans le blanc, le beige entre dans la bande. La jonction est à
   94px du haut d'une image de 187px, d'où `top: -94px`. */
.mairie-foot-top:before {
    left: 0; top: -94px; bottom: auto;
    width: 375px; height: 187px;
    background: url('img/triangle-foot-2.png') top left no-repeat;
}
/* Cette image porte à la fois les triangles et le trait pointillé jaune. */
.mairie-foot-top:after {
    right: 0; width: 1125px; height: 286px;
    background: url('img/tr-jaune-2.png') bottom right no-repeat;
}
.mairie-foot-top > * { position: relative; z-index: 2; }

/* Coordonnées : texte BLANC (j'avais mis un bleu foncé illisible sur ce
   fond) et chaque ligne porte son icône jaune en image de fond, calée en
   haut à gauche, le texte étant décalé de 67px. */
/* Bloc ramené vers la gauche (le retrait de 60px de l'original le poussait
   trop au centre dans cette grille) et lignes un peu plus aérées. */
.mairie-coord {   color: #fff; position: relative; z-index: 5; }
.mairie-coord ul { margin: 0; padding: 0; list-style: none; }
.mairie-coord ul li { margin: 0 0 20px; padding: 0; list-style: none; }  /* 30px d origine : trop aere, resserre a la demande */
.mairie-coord ul li:last-child { margin-bottom: 0; }
/* `min-height` = hauteur de la plus grande icône (i-adrs, 38px). Sans elle
   une ligne simple ne fait que ~29px et rogne le bas de i-tel (32px) et
   de i-mail (31px) — c'était la cause de l'icône téléphone coupée. */
.mairie-coord ul li span,
.mairie-coord ul li a {
    display: block; padding-left: 67px; min-height: 38px;
    color: #fff; text-decoration: none;
}
.mairie-coord .adrs    { background: url('img/i-adrs.png')    top left no-repeat; }
.mairie-coord .tel     { background: url('img/i-tel.png')     top left no-repeat; }
.mairie-coord .mail-c  { background: url('img/i-mail.png')    top left no-repeat; }
.mairie-coord .horaire { background: url('img/i-horaire.png') top left no-repeat; }
.mairie-coord .mail-c:hover { text-decoration: none; color: #f3c42e; }

/* « S'inscrire à la gazette » : posé en absolu AU-DESSUS du champ. */
/* Le titre de la gazette porte DEUX fois le même texte : une fois en clair,
   une fois dans un `<span class="subtitle">` — c'est le mécanisme du site
   d'origine, où le texte extérieur est masqué et seul le script s'affiche.
   Ici les classes `mairie-titre` se posent sur le conteneur du widget
   Elementor, pas sur le `h2` : la règle `font-size: 0` ne l'atteignait pas et
   les deux libellés se superposaient. On vise donc le titre du widget. */
.mairie-titre .elementor-heading-title { font-size: 0; line-height: 1.1; }
.mairie-titre .elementor-heading-title .subtitle { font-size: 84px; }
.mairie-titre--gazette .elementor-heading-title .subtitle { font-size: 63px; }
@media (max-width: 1280px) {
    .mairie-titre--gazette .elementor-heading-title .subtitle { font-size: 43px; }
}

.mairie-gazette form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mairie-gazette input[type="email"] {
    flex: 1 1 260px;
    border-radius: 9px; padding: 12px; font-size: 22px; color: #707287;
    border: 0; max-width: 100%;
}
.mairie-gazette input[type="email"]::placeholder {
    color: #707287; font-size: 22px; letter-spacing: 1px;
}

/* Bouton d'inscription.
   L'original masquait le libellé et posait un triangle jaune en image de
   fond : rien n'indiquait qu'il s'agissait d'un bouton. On reprend la
   pastille animée de « Plus de détails », qui se lit comme un bouton.
   Sur le bleu du pied de page, le libellé est BLANC au repos — le bleu nuit
   de la version claire y serait illisible — puis passe au bleu nuit quand le
   remplissage jaune arrive. Contraste : 8,6:1 au repos, 7,3:1 au survol. */
.mairie-gazette button, .mairie-gazette input[type="submit"] {
    display: inline-flex; align-items: center; gap: 12px;
    width: auto; height: auto; padding: 13px 30px; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-size: 19px; font-weight: 700;
    color: #fff; border: 2px solid #f3c42e; border-radius: 999px;
    background-color: transparent;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1),
                color .38s cubic-bezier(.4, 0, .2, 1), transform .25s ease, box-shadow .25s ease;
}
.mairie-gazette button::after, .mairie-gazette input[type="submit"]::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.mairie-gazette button:hover, .mairie-gazette button:focus-visible {
    background-size: 100% 100%; color: #243664;
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(243, 196, 46, .35);
}
.mairie-gazette button:hover::after,
.mairie-gazette button:focus-visible::after { transform: rotate(-45deg) translate(3px, 3px); }
.mairie-gazette button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mairie-gazette button:active { transform: translateY(0); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
    .mairie-gazette button,
    .mairie-gazette button::after { transition: none; }
    .mairie-gazette button:hover { transform: none; }
}

.mairie-footer-bas { clear: both; position: relative; z-index: 5; color: #939393; font-size: 18px; text-align: right; }

/* =====================================================================
   9. CONTENU DES PAGES INTÉRIEURES
   Style du corps d'une page fixe ou d'un article, relevé sur le Joomla
   (custom.css). Il vaut pour TOUTE page portant `mairie-interieur`, donc
   pour celles que la mairie créera ensuite : elle saisit son texte, la
   présentation suit.
   ===================================================================== */

/* Titres. Trois bleus distincts, du plus foncé au plus clair. */
.mairie-interieur .page-content h2 { font-family: 'helvetica', Arial, sans-serif; font-size: 32px; font-weight: 700; line-height: 1.5em; color: #144b94; margin: 30px 0 10px; }
.mairie-interieur .page-content h3 { font-family: 'helvetica', Arial, sans-serif; font-size: 25px; font-weight: 700; line-height: 1.5em; color: #2e60a8; margin: 20px 0 10px; }
.mairie-interieur .page-content h4 { font-family: 'helvetica', Arial, sans-serif; font-size: 23px; font-weight: 700; line-height: 1.5em; color: #4879bf; margin: 20px 0 10px; }

/* Puces : une petite flèche jaune de 8x16, pas un disque. Elle est calée
   4px sous le haut de la ligne pour tomber au milieu de la première ligne
   de texte. */
.mairie-interieur .page-content ul { padding-left: 0; margin: 0 0 15px; }
.mairie-interieur .page-content ul li {
    list-style: none; padding-left: 20px; margin-bottom: 15px; line-height: 28px;
    background: url('img/puce-j.png') top 4px left no-repeat;
}
/* Élement « Liste d’icônes » d’Elementor : chaque entrée porte déjà son
   propre pictogramme. La puce jaune venait s’ajouter DEVANT lui, et le
   retrait de 20px qui lui fait sa place décalait toute la ligne. On sort
   ce seul élément de la règle ci-dessus — partout ailleurs la puce reste
   exactement ce qu’elle est. `list-style: none` est conservé : sans lui,
   le navigateur remettrait ses propres disques. */
.mairie-interieur .page-content ul.elementor-icon-list-items > li.elementor-icon-list-item {
    background-image: none;
    padding-left: 0;
}

/* Habillage texte/photo. Trois dispositifs coexistent dans l'original :
   un bloc flottant à droite, des images flottantes individuelles, et une
   grille Bootstrap. On les reproduit tous les trois — ils servent selon
   les pages. */
.mairie-interieur .page-content .right-side { position: relative; float: right; margin: 0 0 25px 180px; }
.mairie-interieur .page-content .img-left   { float: left;  margin: 0 40px 10px 0; }
.mairie-interieur .page-content .img-right  { float: right; margin: 0 0 10px 40px; }
.mairie-interieur .page-content .clearfix::after { content: ""; display: block; clear: both; }

/* La seconde photo remonte de 119px et déborde de 156px vers la gauche :
   c'est ce chevauchement qui donne l'assemblage en biais de l'original. */
.mairie-interieur .page-content .photo.ph-2 { position: relative; margin: -119px 0 0 -156px; }

/* Sous 1050px l'habillage est abandonné : les blocs se centrent et
   s'empilent, comme dans l'original. */
@media (max-width: 1050px) {
    .mairie-interieur .page-content .right-side { float: none; width: auto; display: table; margin: 20px auto; }
    .mairie-interieur .page-content .photo.ph-2 { display: table; margin: -150px 0 0; }
    .mairie-interieur .page-content .img-left,
    .mairie-interieur .page-content .img-right { display: table; float: none; margin: 10px auto 25px; }
}
@media (max-width: 900px) { .mairie-interieur .page-content .photo.ph-2 { margin: 31px auto 0; } }
@media (max-width: 600px) { .mairie-interieur .page-content .photo.ph-2 { margin: 50px auto 0; } }

/* Deux colonnes d'un tiers, la troisième volontairement vide — c'est ainsi
   dans l'original, qui utilise deux `col-md-4` sur trois. */
.mairie-interieur .page-content .row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.mairie-interieur .page-content .col-md-4 { position: relative; width: 100%; padding: 0 15px; box-sizing: border-box; }
@media (min-width: 768px) { .mairie-interieur .page-content .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } }

/* Tableaux de contenu. L'original n'en habille aucun : largeur calée sur le
   contenu, sans bordure. On ajoute seulement le défilement horizontal —
   sans lui, un tableau large déborde la page sur mobile, ce qui est un vrai
   défaut de l'original. */
.mairie-interieur .page-content table { border-collapse: collapse; max-width: 100%; }
.mairie-interieur .page-content td { vertical-align: top; padding: 0 10px 0 0; }
@media (max-width: 767px) {
    .mairie-interieur .page-content .mairie-tableau { display: block; overflow-x: auto; }
}

/* Image occupant toute la largeur du contenu, proportions conservées.
   Utilisée pour l'organigramme : l'original le figeait à 587px de large,
   taille à laquelle un schéma de services se lit mal. */
/* --- Formulaire de contact -------------------------------------------
   L'original range Nom/Prénom et Objet/Email par paires sur une ligne, le
   message en pleine largeur. La classe `mairie-moitie` est posée sur les
   champs concernés depuis la configuration du formulaire.
   -------------------------------------------------------------------- */
.mairie-formulaire { margin: 20px 0 40px; }
.mairie-formulaire .wpforms-field { padding: 10px 0; }
@media (min-width: 768px) {
    .mairie-formulaire .wpforms-field-container { display: flex; flex-wrap: wrap; gap: 0 30px; }
    .mairie-formulaire .wpforms-field { flex: 1 1 100%; }
    .mairie-formulaire .mairie-moitie { flex: 1 1 calc(50% - 15px); max-width: calc(50% - 15px); }
}
.mairie-formulaire .wpforms-field-label {
    font-family: 'helvetica', Arial, sans-serif; font-size: 20px; font-weight: 400; color: #151c43;
}
.mairie-formulaire input[type="text"],
.mairie-formulaire input[type="email"],
.mairie-formulaire select,
.mairie-formulaire textarea {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1px solid #c9cedb; border-radius: 6px; background: #fff;
    font-family: 'helvetica', Arial, sans-serif; font-size: 18px; color: #151c43;
}
.mairie-formulaire textarea { min-height: 260px; resize: vertical; }
.mairie-formulaire input:focus,
.mairie-formulaire select:focus,
.mairie-formulaire textarea:focus { outline: 2px solid #177a99; outline-offset: 1px; border-color: #177a99; }
.mairie-formulaire .wpforms-required-label { color: #d10a12; }

/* Bouton d'envoi : même pastille animée que le reste du site — remplissage
   jaune balayé de la gauche, libellé qui passe au bleu nuit. */
.mairie-formulaire button[type="submit"] {
    position: relative; border: 2px solid #f3c42e; border-radius: 999px;
    padding: 14px 40px; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-size: 20px; font-weight: 700;
    color: #fff; background-color: #25819f;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1),
                color .38s cubic-bezier(.4, 0, .2, 1), transform .25s ease, box-shadow .25s ease;
}
.mairie-formulaire button[type="submit"]:hover,
.mairie-formulaire button[type="submit"]:focus-visible {
    background-size: 100% 100%; color: #243664;
    transform: translateY(-2px); box-shadow: 0 8px 20px rgba(243, 196, 46, .35);
}
.mairie-formulaire button[type="submit"]:focus-visible { outline: 3px solid #243664; outline-offset: 3px; }

/* Mention RGPD : un texte juridique, discret mais lisible. */
.mairie-rgpd {
    margin: 30px 0 0; font-size: 15px; line-height: 1.6; color: #707287; font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
    .mairie-formulaire button[type="submit"] { transition: none; }
    .mairie-formulaire button[type="submit"]:hover { transform: none; }
}

/* Signature de l'agence, tout en bas à DROITE du pied de page. Elle occupe
   ainsi le coin opposé aux mentions légales de la commune, qui gardent le
   bord gauche : chacune son côté, aucune ne concurrence l'autre.
   Le conteneur centre son contenu, d'où le `text-align` explicite. */
/* Le widget qui contient la signature est un élément flex : il se
   dimensionne sur son contenu — 659px pour un conteneur de 1265 — et un
   `text-align: right` alignerait au bord de CE bloc, pas de la page.
   On le fait donc occuper toute la largeur. `:has()` évite d'avoir à
   toucher au modèle Elementor pour y poser une classe. */
/* Mentions légales et signature sur UNE SEULE ligne : les mentions de la
   commune à gauche, la signature de l'agence à droite, alignées sur la même
   ligne de base. Empilées, elles laissaient un vide inutile et allongeaient
   d'autant le bandeau blanc. `wrap` les remet l'une sous l'autre quand la
   place manque.

   La disposition est posée sur le widget lui-même, et non sur un
   `.elementor-widget-container` : Elementor n'émet plus ce conteneur
   intermédiaire pour les widgets HTML. */
.elementor-location-footer .elementor-widget:has(.mairie-signature) {
    flex: 1 1 100%; width: 100%;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px 24px;
}
.mairie-bas { text-align: left; }
.mairie-signature { margin: 0; text-align: right; }
.mairie-signature a {
    display: inline-flex; align-items: center; gap: 10px;
    text-decoration: none; opacity: .75; transition: opacity .3s ease;
}
.mairie-signature a:hover,
.mairie-signature a:focus-visible { opacity: 1; }
.mairie-signature span { font-size: 13px; color: #707287; }
.mairie-signature img { display: block; width: 130px; height: auto; }

/* =====================================================================
   10. TITRES DE COMPOSANT — priorité sur les typographies globales

   La procédure de l'agence impose des typographies H1/H2/H3 globales dans
   les réglages Elementor. Elles produisent `.elementor-kit-5 h2 { color:
   #144b94; font-size: 32px }`, de spécificité (0,1,1) — qui bat mes règles
   de composant en (0,1,0). Résultat : les quatre titres de l'accueil et les
   titres de carte étaient repassés au bleu du kit, en 32px et 25px.

   Ces éléments ne sont pas des titres de contenu : ce sont des composants
   graphiques qui se servent de balises de titre. Ils gardent donc leurs
   valeurs propres, relevées sur le Joomla d'origine (custom.css:314, 434,
   566) et rendues gagnantes en chaînant la balise et le parent — sans
   `!important`, pour que la règle reste elle-même surchargeable.
   ===================================================================== */
.mairie-clic h2.mairie-clic-titre {
    color: #fff; font-size: 22px; font-weight: 700;
    font-family: 'helvetica', Arial, sans-serif; text-transform: uppercase;
}
.mairie-bloc-1 h2.mairie-bloc-1-titre {
    color: #293da8; font-size: 32px; font-weight: normal;
    font-family: 'helvetica', Arial, sans-serif; line-height: 1.5em;
}
.mairie-bloc-2 h2.mairie-bloc-2-titre {
    color: #151c43; font-size: 28px; line-height: 42px; font-weight: normal;
    font-family: 'amstagramregular', cursive; text-transform: uppercase;
}
.mairie-bloc-2 h3.mairie-focus-titre {
    color: #151c43; font-size: 22px; font-weight: 700; line-height: 1.5em;
    font-family: 'helvetica', Arial, sans-serif;
}
@media (max-width: 1470px) {
    .mairie-bloc-2 h3.mairie-focus-titre { font-size: 18px; }
}

/* =====================================================================
   12. NAVIGATION MOBILE
   =====================================================================

   Jusqu'ici, sous 1199px, `.mairie-menu-principal` passait simplement en
   `display: none` : soixante et un liens sur trois niveaux devenaient
   inatteignables, et le site n'offrait plus que « Nos actualités » et
   « Contact ». C'était le trou le plus grave de la refonte.

   Le Joomla d'origine, lui, bascule à la MÊME largeur (custom.css:1561)
   sur un bouton jaune en haut à droite qui ouvre un panneau latéral géré
   par la bibliothèque jQuery mmenu. On en reproduit l'apparence et le
   comportement sans la bibliothèque : mêmes couleurs (#f3c42e pour le
   bouton, #004873 pour le panneau), même largeur (80%, plafonnée à 440px,
   jquery.mmenu.all.css), même glissement depuis la gauche.

   Deux écarts assumés par rapport à l'original, tous deux au bénéfice de
   l'usage tactile :
   - le bouton fait 44x44px au lieu de 34x32 — en dessous, la cible est
     trop petite pour un pouce ;
   - les sous-menus s'ouvrent sur appui d'un bouton dédié, et non au
     survol : sur écran tactile, un « hover » se déclenche au premier appui
     et ouvrirait un panneau alors que le visiteur voulait suivre le lien.

   AMÉLIORATION PROGRESSIVE. Tout ce bloc est conditionné à la classe
   `mairie-nav-js`, posée par le script sur <html>. Sans JavaScript, aucune
   de ces règles ne s'applique : le menu reste affiché en liste, moins joli
   mais entièrement navigable. Un burger sans script serait un menu
   définitivement fermé.
   ===================================================================== */

/* Le bouton n'existe qu'en dessous du palier : au-dessus, la barre
   horizontale fait le travail. */
.mairie-burger { display: none; }

@media (max-width: 1199px) {
    .mairie-menu-haut {
        display: none;
    }
    /* --- Bouton ------------------------------------------------------ */
    .mairie-nav-js .mairie-burger {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: 13px; right: 13px; z-index: 100002;
        width: 44px; height: 44px; padding: 0;
        background: #f3c42e; border: 0; cursor: pointer;
        -webkit-appearance: none; appearance: none;
        transition: background .3s;
    }
    .mairie-nav-js .mairie-burger:hover { background: #ffd543; }
    .mairie-nav-js .mairie-burger:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

    /* Les trois traits. Celui du milieu est l'élément lui-même, ceux du
       dessus et du dessous ses pseudo-éléments : trois barres pour un seul
       nœud, et la croix s'obtient en effaçant celui du milieu. */
    .mairie-nav-js .mairie-burger-traits,
    .mairie-nav-js .mairie-burger-traits::before,
    .mairie-nav-js .mairie-burger-traits::after {
        display: block; width: 22px; height: 3px;
        background: #fff; border-radius: 1px;
        transition: transform .3s, opacity .2s;
    }
    .mairie-nav-js .mairie-burger-traits { position: relative; }
    .mairie-nav-js .mairie-burger-traits::before,
    .mairie-nav-js .mairie-burger-traits::after { content: ""; position: absolute; left: 0; }
    .mairie-nav-js .mairie-burger-traits::before { top: -7px; }
    .mairie-nav-js .mairie-burger-traits::after  { top:  7px; }

    .mairie-nav-js.mairie-menu-ouvert .mairie-burger-traits { background: transparent; }
    .mairie-nav-js.mairie-menu-ouvert .mairie-burger-traits::before { transform: translateY(7px) rotate(45deg); }
    .mairie-nav-js.mairie-menu-ouvert .mairie-burger-traits::after  { transform: translateY(-7px) rotate(-45deg); }

    /* --- Voile -------------------------------------------------------
       `visibility` en plus de `opacity` : un voile seulement transparent
       reste posé en travers de la fenêtre et avale tous les clics de la
       page. La visibilité, elle, se transitionne par palier — le délai la
       retient le temps du fondu de sortie, puis elle disparaît d'un coup. */
    .mairie-nav-js .mairie-voile {
        position: fixed; inset: 0; z-index: 100000;
        background: rgba(0, 0, 0, .5);
        opacity: 0; visibility: hidden;
        transition: opacity .35s, visibility 0s linear .35s;
    }
    .mairie-nav-js.mairie-menu-ouvert .mairie-voile {
        opacity: 1; visibility: visible;
        transition: opacity .35s, visibility 0s;
    }

    /* --- Panneau ------------------------------------------------------
       On réutilise le <nav> existant plutôt que d'en cloner un second : un
       clone dupliquerait soixante et un liens dans le document, donc dans
       l'ordre de tabulation et dans ce que lit un lecteur d'écran.

       Les sélecteurs partent tous de `.mairie-nav-js .mairie-header` :
       trois classes contre deux ou une pour les règles de bureau plus
       haut, ce qui suffit à les emporter. Une media query n'ajoute aucune
       spécificité — s'en remettre à l'ordre du fichier serait fragile. */
    .mairie-nav-js .mairie-header .mairie-menu-principal {
        display: block;
        position: fixed; top: 0; left: 0; bottom: 0; right: auto;
        width: 80%; min-width: 140px; max-width: 440px;
        margin: 0; padding: 64px 0 40px;
        background: #004873;
        overflow-y: auto; overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        /* Fermé, le panneau est hors champ mais ses soixante et un liens
           resteraient dans l'ordre de tabulation : au clavier, on traverserait
           un menu invisible avant d'atteindre la page. `visibility` les en
           sort, et son délai la retient le temps du glissement de sortie. */
        visibility: hidden;
        transition: transform .35s ease, visibility 0s linear .35s;
        z-index: 100001;
    }
    .mairie-nav-js.mairie-menu-ouvert .mairie-header .mairie-menu-principal {
        transform: translateX(0);
        visibility: visible;
        transition: transform .35s ease, visibility 0s;
    }

    /* L'en-tête collé passe en position: fixed avec son propre empilement ;
       sans cette remise à plat, le panneau serait rogné par lui. */
    .mairie-nav-js .mairie-header.is-sticky .mairie-menu-principal { top: 0; }

    /* --- Listes ------------------------------------------------------- */
    .mairie-nav-js .mairie-header .mairie-menu-principal > ul {
        display: block; float: none; width: auto; margin: 0; padding: 0;
    }
    /* Remet à zéro les paddings calculés pour la barre horizontale : ils
       vont jusqu'à 200px à gauche pour creuser la place du blason. */
    .mairie-nav-js .mairie-header .mairie-menu-principal > ul > li,
    .mairie-nav-js .mairie-header .mairie-menu-principal .mairie-sous-menu li {
        display: block; float: none; position: relative;
        padding: 0; margin: 0; border: 0;
    }
    /* « Nos actualités » et « Contact » sont masqués dans la barre du haut
       parce qu'ils y figurent déjà. Dans le panneau on les rétablit, comme
       le fait l'original à partir de 1050px (superfish.css:224). */
    .mairie-nav-js .mairie-header .mairie-menu-principal > ul > li.item-142,
    .mairie-nav-js .mairie-header .mairie-menu-principal > ul > li.item-143 { display: block; }

    /* --- Libellés ------------------------------------------------------
       `max-width: none` neutralise le bridage à 123px du palier 1310px, qui
       forcerait des retours à la ligne absurdes dans un panneau large. */
    .mairie-nav-js .mairie-header .mairie-menu-principal a,
    .mairie-nav-js .mairie-header .mairie-menu-principal .mairie-separateur {
        display: block; width: auto; max-width: none;
        padding: 13px 58px 13px 22px;
        font-size: 17px; line-height: 1.35;
        color: #fff; text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, .14);
    }
    .mairie-nav-js .mairie-header .mairie-menu-principal a:hover,
    .mairie-nav-js .mairie-header .mairie-menu-principal a:focus { color: #f3c42e; }
    /* Une rubrique sans lien ouvre son tiroir au toucher : le curseur doit
       l'annoncer. La graisse suit la même hiérarchie que le reste du menu
       (1er niveau en gras par la règle de base, sous-menus en régulier) :
       plus de police imposée ici depuis le 14/08/2026. */
    .mairie-nav-js .mairie-header .mairie-menu-principal .mairie-separateur {
        cursor: pointer;
    }

    /* --- Sous-menus ----------------------------------------------------
       De panneaux flottants ils deviennent des tiroirs dans le flux.
       La règle d'ouverture au survol doit être explicitement annulée : sur
       écran tactile le premier appui produit un :hover, et le tiroir
       s'ouvrirait tout seul au moment où le doigt vise un lien. */
    .mairie-nav-js .mairie-header .mairie-menu-principal .mairie-sous-menu {
        position: static; display: none;
        min-width: 0; width: auto; margin: 0; padding: 0;
        background: rgba(0, 0, 0, .16); box-shadow: none;
    }
    .mairie-nav-js .mairie-header .mairie-menu-principal li:hover > .mairie-sous-menu { display: none; }
    .mairie-nav-js .mairie-header .mairie-menu-principal li.est-ouvert > .mairie-sous-menu { display: block; }

    /* Décalage par niveau, pour que la profondeur se lise d'un coup d'œil. */
    .mairie-nav-js .mairie-header .mairie-sous-menu a,
    .mairie-nav-js .mairie-header .mairie-sous-menu .mairie-separateur { padding-left: 40px; font-size: 16px; }
    .mairie-nav-js .mairie-header .mairie-sous-menu .mairie-sous-menu a,
    .mairie-nav-js .mairie-header .mairie-sous-menu .mairie-sous-menu .mairie-separateur { padding-left: 58px; font-size: 15px; }

    /* Les chevrons de bureau sont des pseudo-éléments décoratifs posés sur
       le libellé. Dans le panneau, c'est un vrai bouton qui ouvre le
       tiroir : garder les deux afficherait deux chevrons pour une action. */
    .mairie-nav-js .mairie-header .mairie-menu-principal li.parent > a::after,
    .mairie-nav-js .mairie-header .mairie-menu-principal li.parent > .mairie-separateur::after { content: none; }
    .mairie-nav-js .mairie-header .mairie-menu-principal .mairie-sous-menu li.parent { padding-right: 0; }

    /* --- Bouton d'ouverture d'un tiroir --------------------------------
       Séparé du lien, et non superposé : une rubrique comme « Urbanisme »
       est à la fois une page et un parent. Confondre les deux gestes
       obligerait à choisir entre ouvrir la page et voir ses enfants. */
    .mairie-sous-bascule {
        position: absolute; top: 0; right: 0; z-index: 2;
        width: 52px; height: 48px; padding: 0;
        background: none; border: 0; cursor: pointer;
        -webkit-appearance: none; appearance: none;
    }
    .mairie-sous-bascule::after {
        content: ""; display: block;
        width: 8px; height: 8px; margin: 0 auto;
        border-right: 2px solid #fff; border-bottom: 2px solid #fff;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .3s;
    }
    .mairie-sous-bascule[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
    .mairie-sous-bascule:focus-visible { outline: 2px solid #f3c42e; outline-offset: -2px; }

    /* --- Verrou de défilement ------------------------------------------
       Sans lui, le doigt qui défile dans le panneau entraîne la page
       derrière : on rouvre le menu et le contenu a bougé. */
    .mairie-menu-ouvert body { overflow: hidden; }
}

/* Au-delà du palier, plus rien de tout cela : si la fenêtre est agrandie
   alors que le panneau est ouvert, la barre horizontale reprend sans
   qu'il reste un voile invisible en travers de la page. */
@media (min-width: 1200px) {
    .mairie-voile { display: none; }
    .mairie-sous-bascule { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mairie-nav-js .mairie-header .mairie-menu-principal,
    .mairie-nav-js .mairie-voile,
    .mairie-burger-traits,
    .mairie-burger-traits::before,
    .mairie-burger-traits::after,
    .mairie-sous-bascule::after { transition: none; }
}


/* =====================================================================
   13. TITRES DE SECTION EN PETITE LARGEUR
   =====================================================================

   Le débordement horizontal de la page d'accueil venait d'ici, et d'une
   seule ligne : `.mairie-titre .elementor-heading-title .subtitle` (ligne
   1586, trois classes) bat `.mairie-titre .subtitle` (ligne 28, deux
   classes). Une media query n'ajoute aucune spécificité : le palier à
   70px de la ligne 28 n'a donc JAMAIS pris effet. Le titre « Offres
   d'emplois » restait à 84px à toutes les largeurs et sortait de 211px
   de l'écran sur un téléphone de 360px.

   Les paliers ci-dessous sont donc écrits au même niveau de spécificité
   que la règle qui gagnait, et placés après elle.

   La variante « gazette » a ses propres tailles (63px, 43px sous 1280px).
   Le `:not()` l'écarte au lieu de l'écraser — sans lui, ces règles, plus
   bas dans le fichier et de spécificité égale, lui prendraient la main.

   Rien ne change au-dessus de 1200px : le rendu de bureau est validé.
   ===================================================================== */

/* --- Titre de section (.mairie-titre) --------------------------------
   Paliers de l'original : 84px, puis 70px sous 1100px, puis 57px sous
   375px (custom.css:1595 et 1921). On reprend les deux premiers tels
   quels et on descend le troisième à 767px : entre 375 et 767 l'original
   laisse 70px, une taille qui déborde déjà chez lui. */
@media (max-width: 1100px) {
    .mairie-titre:not(.mairie-titre--gazette) .elementor-heading-title .subtitle { font-size: 70px; }
}
@media (max-width: 767px) {
    .mairie-titre:not(.mairie-titre--gazette) .elementor-heading-title .subtitle { font-size: 57px; }
}
@media (max-width: 430px) {
    .mairie-titre:not(.mairie-titre--gazette) .elementor-heading-title .subtitle { font-size: 44px; }
}

/* Le décalage de 146px est un MÉCANISME EN DEUX TEMPS : le bloc pousse à
   droite, le sous-titre reprend d'autant vers la gauche (lignes 24-25).
   Le palier mobile n'annulait que la seconde moitié : le titre partait
   alors 146px trop à droite et sortait de l'écran. Les deux tombent
   ensemble, comme le fait l'original (custom.css:1934). */
@media (max-width: 767px) {
    .mairie-titre--emplois { padding-left: 0; }
}

/* --- Titre de la gazette --------------------------------------------- */
@media (max-width: 430px) {
    .mairie-titre--gazette .elementor-heading-title .subtitle { font-size: 34px; }
}

/* --- « Focus sur » et « actus StPaul / Isère » ------------------------
   L'original s'arrête à 70px et déborde en dessous de 430px environ.
   On prolonge la descente plutôt que de reproduire le défaut. */
@media (max-width: 700px) { .mairie-bloc-2-titre .subtitle { font-size: 52px; } }
@media (max-width: 480px) { .mairie-bloc-2-titre .subtitle { font-size: 42px; } }
@media (max-width: 360px) { .mairie-bloc-2-titre .subtitle { font-size: 36px; } }

/* --- « Mairie de St Paul sur Isère » ---------------------------------- */
@media (max-width: 430px) { .mairie-bloc-1-titre .subtitle { font-size: 38px; } }

/* --- Garde-fou général ------------------------------------------------
   Quel que soit le titre que l'administration publiera, il ne pourra plus
   sortir du cadre.

   `overflow-wrap: anywhere` et non `break-word` : les deux coupent un mot
   trop long, mais seul `anywhere` est pris en compte dans le calcul de la
   largeur minimale intrinsèque. Or ces titres sont en `display: table`,
   une boîte qui se dimensionne au minimum sur son contenu : avec
   `break-word` elle resterait large et déborderait quand même.

   Restreint aux largeurs sous 1200px : au-dessus, la composition est
   validée et certains titres débordent volontairement de leur bloc. */
@media (max-width: 1199px) {
    .mairie-titre .subtitle,
    .mairie-titre-page .subtitle,
    .mairie-bloc-1-titre .subtitle,
    .mairie-bloc-2-titre .subtitle {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}


/* =====================================================================
   14. EN-TÊTE, HÉROS ET RACCOURCIS EN PETITE LARGEUR
   ===================================================================== */

/* --- Texte du héros --------------------------------------------------
   Le blason est calé en haut, centré ; le texte du héros est posé à 58-64%
   de la hauteur. Quand le visuel se réduit, les deux se rejoignent :
   chevauchement mesuré de 103x13px à 768px, jusqu'à 103x69px à 320px — le
   blason finit posé en travers de « DESSINONS ENSEMBLE ».

   L'original tranche de la même façon et au même endroit : sous 900px il
   masque la boîte de texte (custom.css:1719, `.slide-desc-box
   { display: none !important }`). Le slogan est décoratif ; le visuel, lui,
   reste. */
@media (max-width: 900px) {
    .mairie-hero-texte { display: none; }
}

/* --- Barre du haut ---------------------------------------------------
   « Nos actualités » et « Contact » sont posés en absolu à droite, le
   blason est centré : sous 660px environ ils se recouvrent (62x26px à
   600px, 103x26px à 480px), et à 320px l'icône Facebook passe elle aussi
   dessous.

   Écart assumé par rapport à l'original, qui les laisse se chevaucher : on
   les retire de la barre. Ils ne sont pas perdus pour autant — le panneau
   du burger les rétablit, ce que fait aussi l'original à partir de 1050px
   (superfish.css:224). L'en-tête mobile se réduit alors à trois éléments
   qui ne se disputent plus la place : Facebook, blason, burger. */
@media (max-width: 680px) {
    .mairie-menu-haut { display: none; }
}

/* --- Raccourcis « EN 1 clic » ----------------------------------------
   Sous 991px la bande passait en `display: none` : les cinq raccourcis les
   plus utilisés du site — périscolaire, écoles, démarches, comptes-rendus,
   emplois — devenaient inaccessibles sur téléphone.

   L'original les remplace par une barre bleue qui ouvre un second panneau
   coulissant. On s'en écarte : sur un site de mairie, ces cinq entrées
   valent mieux qu'un panneau de plus à ouvrir. Elles restent donc visibles,
   en grille, sur le bleu de l'original (#004873) — la même couleur que sa
   barre, et que le panneau du menu.

   La grille est en `auto-fit` : deux colonnes sur un téléphone, trois sur
   une tablette, sans palier à maintenir. Ajouter un sixième raccourci ne
   demandera aucune retouche. */
@media (max-width: 991px) {
    .mairie-clic {
        display: block;
        /* La remontée de 160px sert à poser la bande PAR-DESSUS le visuel du
           héros. Hors du visuel, elle la ferait chevaucher le bloc suivant. */
        margin: 0;
        background: #004873;
        padding: 26px 15px 30px;
    }
    /* 234px de vide bleu traînaient sous la liste. Ce n'était pas une
       hauteur minimale — la mise en page flex du conteneur Elementor
       étirait le widget bien au-delà de son contenu. Mesuré : en repassant
       `.e-con-inner` en bloc, la bande tombe de 685px à 451px, soit
       exactement la hauteur du titre et des trois rangées.

       Quatre classes dans le sélecteur : Elementor écrit ses propres règles
       de conteneur à trois, et l'ordre de chargement des feuilles n'est pas
       garanti. */
    .mairie-clic.e-con.e-flex > .e-con-inner { display: block; padding: 0; }

    /* Le décalage de -38px sur la première entrée est un ajustement
       esthétique de la bande horizontale : il élargit l'écart avec
       « Ecoles du RPI ». En grille, il pousse simplement « Réservez le
       périscolaire » hors de l'écran. */
    .mairie-clic-liste li.clic-1:before { left: 0; }
    .mairie-clic-liste li.clic-1 .mairie-clic-libelle { margin-left: 0; }

    /* 119px suffisaient aux colonnes étroites du bureau ; ici la place est
       disponible et le bridage coupait « Comptes~Rendus ». */
    .mairie-clic-liste .mairie-clic-libelle { max-width: none; }

    .mairie-clic-titre {
        float: none; display: block; height: auto;
        margin: 0 0 22px; padding-right: 46px;
        background-size: 34px auto;
        font-size: 20px;
    }

    .mairie-clic-liste {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        gap: 4px; padding: 0;
    }
    /* Les largeurs en pourcentage de la grille Bootstrap d'origine
       n'ont plus de sens ici : la grille CSS répartit seule. */
    .mairie-clic-liste li.clic-1,
    .mairie-clic-liste li.clic-2,
    .mairie-clic-liste li.clic-3,
    .mairie-clic-liste li.clic-4,
    .mairie-clic-liste li.clic-5 {
        flex: none; max-width: none;
        padding: 56px 8px 0 0; margin: 0;
    }
    /* Le filet vertical qui séparait les colonnes n'a plus lieu d'être
       quand les entrées passent sur plusieurs lignes. */
    .mairie-clic-liste li:after { content: none; }
    /* Ne PAS toucher à la taille du fond de `li:before` : chaque icône est un
       sprite à deux états empilés verticalement, et la fenêtre de 48px n'en
       montre que le premier. Mettre le fond à l'échelle comprime les deux
       états dans la fenêtre et affiche l'icône en double. */

    .mairie-clic-liste a {
        display: block; padding: 4px 0 14px;
        font-size: 15px; line-height: 1.3;
    }
}

/* --- Cibles tactiles --------------------------------------------------
   Les liens de titre et d'extrait des cartes sont des <a> en ligne hauts de
   20px : sous le doigt, c'est trop peu pour viser sans se tromper. On les
   passe en bloc avec de quoi atteindre une hauteur utilisable, sans
   toucher au rendu de bureau — tout est borné sous 1200px.
   ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .mairie-focus-titre a,
    .mairie-focus-extrait a,
    .mairie-lien-actus {
        display: inline-block; padding: 6px 0; min-height: 32px;
    }
    /* Le pied de page aligne des liens serrés les uns sous les autres. */
    .elementor-location-footer .mairie-coord a,
    .elementor-location-footer .mairie-bas a { padding: 5px 0; display: inline-block; }
}


/* =====================================================================
   15. PAGES INTÉRIEURES EN PETITE LARGEUR
   =====================================================================
   Ces trois défauts ne touchent pas l'accueil mais toutes les autres pages.
   Ils sont traités ici parce qu'ils sont génériques : ils viennent du
   contenu repris du Joomla, pas d'une composition particulière.
   ===================================================================== */

/* --- Titre de page ----------------------------------------------------
   L'original garde 70px jusqu'au mobile et déborde : « Démarches
   Administratives » sortait de 97px à 360px. Un palier à 45px avait été
   retiré d'ici parce qu'il ne venait pas de l'original — c'était juste.
   Mais entre reproduire un défaut et livrer un titre coupé, on tranche
   pour le titre lisible, et seulement là où l'original casse déjà. */
@media (max-width: 600px) {
    body.mairie-interieur .page-header .entry-title .subtitle { font-size: 46px; }
}
@media (max-width: 400px) {
    body.mairie-interieur .page-header .entry-title .subtitle { font-size: 38px; }
}
@media (max-width: 1199px) {
    body.mairie-interieur .page-header .entry-title .subtitle {
        max-width: 100%; overflow-wrap: anywhere; padding-right: 0;
    }
}

/* --- Adresses écrites en toutes lettres -------------------------------
   Plusieurs liens ont l'URL elle-même pour libellé
   (« https://immatriculation.ants.gouv.fr/… »). Un mot de 75 caractères ne
   se coupe nulle part et sortait de l'écran. */
@media (max-width: 1199px) {
    .page-content a,
    .elementor-widget-container a { overflow-wrap: anywhere; }
}

/* --- Tableaux ---------------------------------------------------------
   Le script les enveloppe dans `.mairie-tableau-defile`. La largeur en dur
   héritée du Joomla (jusqu'à 1409px) est ramenée à la largeur du contenu :
   `!important` est ici le seul moyen d'atteindre un style en ligne, qui
   l'emporte sur n'importe quel sélecteur.

   Le tableau garde ensuite sa largeur naturelle et c'est l'enveloppe qui
   défile — un tableau de démarches à trois colonnes comprimé dans 330px
   ne se lit plus. */
.mairie-tableau-defile { max-width: 100%; }
@media (max-width: 900px) {
    .mairie-tableau-defile {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        /* Un contenu qui déborde par le côté doit se voir : sans cette
           marge, rien ne signale qu'il reste du tableau à droite. */
        padding-bottom: 6px;
    }
    .mairie-tableau-defile:focus-visible { outline: 2px solid #f3c42e; outline-offset: 2px; }
    .page-content table,
    .mairie-tableau { width: auto !important; height: auto !important; }
    .page-content table td,
    .mairie-tableau td { min-width: 132px; }
}


/* =====================================================================
   16. ÉQUILIBRE DE LA BARRE DE NAVIGATION
   =====================================================================

   La barre reprenait du Joomla un calage manuel : chaque rubrique portait
   sa propre marge, et `item-117` un `padding-left: 200px` en dur destiné à
   creuser la place du blason. Ces valeurs avaient été relevées sur des
   libellés qui ne sont pas exactement les nôtres, d'où le déséquilibre
   mesuré à 1920px : 115px entre « Vie locale et sociale » et le blason
   contre 21px de l'autre côté, et 0px à gauche contre 104px à droite.

   On abandonne le calage au pixel pour une répartition automatique :
   `space-between` colle la première rubrique au bord gauche, la dernière au
   bord droit, et répartit le reste également. Un couloir central réservé
   écarte les deux rubriques voisines du blason.

   Conséquence : les quatre écarts que le client veut égaux le deviennent, et
   ils le restent si la mairie renomme une rubrique — ce que le calage
   manuel ne permettait pas.

   Rien ne change sous 1200px : en dessous, c'est le panneau du burger.
   ===================================================================== */

@media (min-width: 1200px) {

    /* Largeur du couloir central réservé au blason, qui mesure 103px.
       Elle suit la largeur de l'écran plutôt que d'être figée : un couloir
       fixe assez large pour respirer à 1920px viendrait coller les rubriques
       les unes aux autres à 1220px. Les bornes tiennent les deux extrêmes —
       jamais moins de 150px, jamais plus de 200px. */
    .mairie-header {
        --mairie-couloir: clamp(150px, 10vw, 200px);
        /* Débordement du chevron : `right: -16px` dans la règle qui le dessine. */
        --mairie-chevron: 16px;
    }

    .mairie-header .mairie-header-inner .mairie-menu-principal > ul {
        display: flex; flex-wrap: nowrap; float: none;
        width: 100%; margin: 0; padding: 0;
        justify-content: space-between;
        /* Les libellés qui passent sur deux lignes ne doivent pas décaler
           verticalement les autres. */
        align-items: flex-start;
    }

    /* Remise à plat des marges relevées une par une : item-113, 116, 117,
       118 en portaient chacune de différentes, jusqu'à 200px.

       Le padding droit réserve la place du chevron. Celui-ci est un
       pseudo-élément en `position: absolute; right: -16px` : il se voit, mais
       il ne compte pas dans la boîte, donc la répartition l'ignorait. Deux
       conséquences que ce padding corrige d'un coup — l'espace à gauche du
       blason paraissait 22px plus étroit qu'à droite, parce qu'il était
       entamé par le chevron de « Vie locale et sociale » ; et le chevron de
       « Services », dernière rubrique, sortait du cadre de 16px, donc de
       l'écran, à 1470px et en dessous. */
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li {
        float: none; padding: 0 var(--mairie-chevron) 0 0; margin: 0;
    }

    /* Le couloir. Il s'ajoute à l'espace déjà réparti entre la troisième et
       la quatrième rubrique, celles qui encadrent le blason. */
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li:nth-child(4) {
        margin-left: var(--mairie-couloir);
    }

    /* Le bridage à 123px sous 1310px servait à faire tenir la barre calée à
       la main, en forçant les libellés sur deux lignes. Il n'a plus lieu
       d'être : la répartition automatique absorbe la contrainte. Il était en
       plus asymétrique — 123, 151, 153 et 126px selon la rubrique —, ce qui
       creusait un écart de 48px entre les deux côtés du blason à 1280px. */
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li > a,
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li > .mairie-separateur {
        max-width: none;
    }

    /* --- Panneaux déroulants --------------------------------------------
       Les décalages d'origine (45px, 190px, 40px) compensaient les marges
       qu'on vient de supprimer : sans cette remise à zéro, les panneaux
       s'ouvriraient à côté de leur rubrique. */
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li > .mairie-sous-menu {
        left: 0; right: auto;
    }
    /* La dernière rubrique est collée au bord droit : son panneau doit
       s'ouvrir vers l'intérieur, sinon il sort de l'écran. */
    .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li:nth-child(6) > .mairie-sous-menu {
        left: auto; right: 0;
    }

    /* --- Barre du haut ---------------------------------------------------
       « Contact » se termine exactement à la verticale de « Services ».
       La barre était calée 60px avant le bord, plus 15px de retrait sur son
       dernier élément : 75px en tout, une valeur sans rapport avec le menu du
       dessous. On l'aligne sur la fin du TEXTE de la dernière rubrique,
       c'est-à-dire le bord moins la réserve du chevron.

       Les 60px entre « Nos actualités » et « Contact » ne bougent pas :
       l'ensemble se décale, il ne s'étire pas. */
    .mairie-header .mairie-menu-haut { right: 30px; }
	.mairie-menu-haut a {
    font-size: 15px;
}
    .mairie-header .mairie-menu-haut li:last-child { padding-right: 0; }

    /* --- Panneaux déroulants passant sous le blason -----------------------
       Le blason passe DEVANT le menu au repos, volontairement (z-index 10
       contre 5, plus haut dans ce fichier) : c'est ce que fait l'original.
       Mais un panneau ouvert est un CONTENU qu'on consulte, pas un décor —
       quand « Vie locale et sociale » ouvre son 2e niveau puis « Vous Avez
       la Parole » son 3e, ce dernier s'étend sous le blason et s'y trouve
       amputé.

       `.mairie-menu-principal` crée son propre contexte d'empilement
       (position + z-index) : tout ce qu'il contient, quel que soit son
       z-index local, plafonne à sa valeur de 5 face au blason, qui lui est
       extérieur. Remonter ce plafond seulement le temps qu'un panneau soit
       ouvert — via `:has()`, plutôt qu'en permanence — laisse le repos
       identique à l'original et ne change que le cas où quelque chose est
       effectivement affiché par-dessus.

       Sans support de `:has()` (navigateurs anciens), la règle ne s'applique
       simplement pas : on retombe sur le comportement actuel, pas sur une
       régression. */
    .mairie-menu-principal:has(> ul > li:hover) {
        z-index: 11;
    }
}


/* =====================================================================
   17. ELEMENT « EN 1 CLIC »
   =====================================================================
   La bande est desormais rendue par l'element Elementor du theme
   (inc/widget-en-1-clic.php), qui produit le meme balisage que l'ancien
   widget HTML. Les deux regles ci-dessous ne concernent que les options
   nouvelles de l'editeur ; tant qu'on n'y touche pas, rien ne s'applique.
   ===================================================================== */

/* Icone personnalisee choisie dans la mediatheque. Les icones d'origine
   sont des sprites a deux etats — une image quelconque n'en a qu'un : elle
   est affichee entiere (contain) et le survol ne glisse pas. Meme
   specificite que les regles clic-N, placees plus haut : c'est l'ordre du
   fichier qui donne la main a celle-ci. */
.mairie-clic-liste li.clic-perso:before {
    background-image: var(--mairie-clic-icone);
    background-size: contain;
}
.mairie-clic-liste li.clic-perso:hover:before { background-position: top left; }

/* Reglage « Animation : aucune » de l'element. Neutralise les glissements
   par item (clic-1 a clic-5), a egalite de specificite, par l'ordre. */
.mairie-clic-liste.mairie-clic-sans-anim li:hover:before { background-position: top left; }

/* Un bloc de texte par diapositive : seul celui de la photo active est
   visible, mairie.js fait la bascule. Au chargement, le premier est montre
   et les suivants portent cette classe. */
.mairie-hero-texte.mairie-hero-texte--repos { display: none; }


/* =====================================================================
   18. ÉLÉMENT « LISTE D'ARTICLES »
   =====================================================================
   Les sections « Focus sur » et « actus » sont désormais rendues par
   l'élément Elementor du thème (inc/widget-liste-articles.php) : le bloc-2
   contient plusieurs widgets empilés là où il n'y avait qu'un widget HTML.
   ===================================================================== */

/* Les conteneurs Elementor espacent leurs enfants (gap par défaut). Avec un
   seul widget l'écart était invisible ; avec trois, il ajouterait deux fois
   20px absents de l'original. Le rythme vertical reste porté par les marges
   des titres, comme avant.
   Deux formes : bloc-2 est un conteneur PLEINE LARGEUR — ses enfants sont
   directement dans .e-con, sans .e-con-inner. On couvre aussi la forme
   boxed au cas où le conteneur changerait de type dans l'éditeur. */
.mairie-bloc-2.e-con.e-flex { gap: 0; }
.mairie-bloc-2.e-con.e-flex > .e-con-inner { gap: 0; }

/* --- Défilement (uniquement quand articles > cartes visibles) ---------
   La liste devient une piste dans une fenêtre rognée ; les flèches la
   déplacent d'une carte à la fois. Quand tout tient, AUCUNE de ces règles
   ne s'applique : le balisage est celui d'origine. */
.mairie-focus-defile  { position: relative; }
.mairie-focus-fenetre { overflow: hidden; }

.mairie-focus-piste {
    display: flex; float: none;
    /* la durée réelle est posée par mairie.js d'après le réglage du widget */
    will-change: transform;
}
/* le clearfix de la liste flottée n'a pas de sens sur une piste flex */
.mairie-focus-piste:after { content: none; }
.mairie-focus-piste .mairie-focus-carte {
    float: none; flex: 0 0 33.3333%; max-width: none; box-sizing: border-box;
}
@media (max-width: 900px) { .mairie-focus-piste .mairie-focus-carte { flex-basis: 50%; } }
@media (max-width: 600px) { .mairie-focus-piste .mairie-focus-carte { flex-basis: 100%; } }

/* --- Flèches ----------------------------------------------------------
   Jaune du site, chevron dessiné en bordures — même famille visuelle que
   le bouton du menu mobile. Désactivée = à demi effacée, plus cliquable. */
.mairie-focus-fleche {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
    width: 44px; height: 44px; padding: 0;
    background: #f3c42e; border: 0; border-radius: 50%; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    transition: background .3s, opacity .3s;
}
.mairie-focus-fleche:hover:not(:disabled) { background: #ffd543; }
.mairie-focus-fleche:disabled { opacity: .3; cursor: default; }
.mairie-focus-fleche:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
.mairie-focus-fleche:before {
    content: ""; display: block; width: 11px; height: 11px; margin: auto;
    border-right: 3px solid #fff; border-bottom: 3px solid #fff;
}
.mairie-focus-fleche--prec { left: -10px; }
.mairie-focus-fleche--prec:before { transform: rotate(135deg); margin-left: 18px; }
.mairie-focus-fleche--suiv { right: -10px; }
.mairie-focus-fleche--suiv:before { transform: rotate(-45deg); margin-right: 18px; }

/* Sous le palier du carrousel (cartes à 50% puis 100%), les flèches en
   surimpression finissent TOUJOURS par recouvrir quelque chose — l'affiche,
   le titre ou l'extrait, selon la hauteur de la carte. Garantie « quel que
   soit le contenu » (14/08/2026) : une bande leur est réservée SOUS la
   carte, par le padding du conteneur. Cette bande est vide par
   construction : rien ne peut s'y superposer. Les deux pastilles s'y
   rangent côte à côte, centrées, à 20px l'une de l'autre. */
@media (max-width: 900px) {
    .mairie-focus-defile { padding-bottom: 64px; }
    .mairie-focus-fleche {
        top: auto; bottom: 0;
        transform: none;
    }
    .mairie-focus-fleche--prec { left: calc(50% - 54px); }
    .mairie-focus-fleche--suiv { right: calc(50% - 54px); }

    /* Les flèches suivent la fin EXACTE de l'article affiché : mairie.js
       cale la hauteur de la fenêtre sur la carte courante (ajusterHauteur).
       Deux conditions pour que ça marche : les cartes gardent leur hauteur
       NATURELLE (sans flex-start, chaque carte s'étire sur la plus haute
       et toutes mesurent pareil), et la fenêtre glisse en douceur d'une
       hauteur à l'autre à chaque changement de carte. */
    .mairie-focus-piste { align-items: flex-start; }
    .mairie-focus-fenetre { transition: height .3s ease; }
}
@media (prefers-reduced-motion: reduce) {
    .mairie-focus-fenetre { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mairie-focus-piste { transition: none !important; }
}

/* Deux « Liste d'articles » empiles : de l'air entre les deux. Le script
   du titre (84px de fonte sur 42px d'interligne) deborde au-dessus de sa
   boite ; sans cette marge, ses hampes viennent toucher l'extrait de la
   liste du dessus. Ne s'applique qu'entre deux instances consecutives —
   une instance seule ne bouge pas. */
.elementor-widget-mairie-liste-articles + .elementor-widget-mairie-liste-articles {
    margin-top: 45px;
}

/* Bouton « toutes les actualites » pose par l'element du theme : il resort
   du positionnement absolu (-118px sous le bloc, heritage du Joomla) pour
   occuper SA place dans le flux. Deplacable et margeable depuis l'editeur,
   sans rien changer a son dessin. */
.mairie-lien-actus.mairie-lien-actus--flux {
    position: relative; bottom: auto; left: auto; right: auto;
    display: table; margin: 30px auto 45px;
}

/* Mode « Focus » de l'element Liste d'articles : images en tailles reelles,
   mais titres EN FLUX. L'heritage Joomla posait le titre en absolu a 90px du
   bas de la carte — un calage qui ne tombait juste que pour les deux cartes
   historiques, et qui envoyait le titre dans le triangle des que l'extrait
   manquait. Ici : image, triangle (29px sous l'image), titre a 41px pour le
   laisser respirer, extrait. Correct pour n'importe quel article. */
/* Le balisage met le titre AVANT l image (heritage du calage absolu) :
   la colonne flex retablit l ordre visuel — image, titre, extrait. */
.mairie-focus-liste--flux .mairie-focus-carte { display: flex; flex-direction: column; }
.mairie-focus-liste--flux .mairie-focus-img { order: 1; margin-bottom: 0; }
.mairie-focus-liste--flux .mairie-focus-titre { order: 2; }
.mairie-focus-liste--flux .mairie-focus-extrait { order: 3; }
.mairie-focus-liste--flux .mairie-focus-titre {
    position: static; bottom: auto; width: auto;
    margin: 41px 14px 10px 0;
}
.mairie-focus-liste--flux .mairie-focus-extrait { float: none; margin: 0 14px 0 0; }

/* Message d'une categorie encore vide, dans la typographie des extraits. */
.mairie-focus-vide {
    margin: 0 0 20px; padding: 4px 0 26px;
    font-size: 21px; line-height: 31.5px; color: #707287; font-style: italic;
}

/* Le formulaire WPForms de la gazette, coule dans l'habillage existant :
   le style du champ et du bouton vient des regles .mairie-gazette au-dessus,
   celles-ci ne font qu'aligner les enveloppes propres a WPForms. */
.mairie-gazette .wpforms-container { width: 100%; }
.mairie-gazette form.wpforms-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.mairie-gazette .wpforms-field-container { flex: 1 1 260px; }
.mairie-gazette .wpforms-field { padding: 0; }
.mairie-gazette .wpforms-field-label { display: none; }
.mairie-gazette .wpforms-submit-container { padding: 0; }
.mairie-gazette input[type="email"] { width: 100%; }
.mairie-gazette em.wpforms-error { display: block; color: #ffd543; font-size: 15px; margin-top: 6px; font-style: normal; }
.mairie-gazette .wpforms-confirmation-container-full {
    background: none; border: 0; color: #fff; font-size: 20px; padding: 6px 0; margin: 0;
}

/* WPForms charge sa feuille APRES la notre et vise le bouton avec
   « div.wpforms-container-full .wpforms-form button[type=submit] » — trois
   classes et deux elements. Nos regles a une classe perdaient : le bouton
   retombait sur l'habillage bleu de WPForms. On redeclare la pastille avec
   une specificite superieure, memes valeurs que .mairie-gazette button. */
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"] {
    display: inline-flex; align-items: center; gap: 12px;
    width: auto; height: auto; padding: 13px 30px; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-size: 19px; font-weight: 700;
    color: #fff; border: 2px solid #f3c42e; border-radius: 999px;
    background-color: transparent;
    background-image: linear-gradient(#f3c42e, #f3c42e);
    background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
    transition: background-size .38s cubic-bezier(.4, 0, .2, 1),
                color .38s cubic-bezier(.4, 0, .2, 1), transform .25s ease, box-shadow .25s ease;
}
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]::after {
    content: ""; flex: 0 0 auto; width: 8px; height: 8px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(-45deg); transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible {
    color: #243664; background-size: 100% 100%;
    transform: translateY(-2px); box-shadow: 0 6px 18px rgba(243, 196, 46, .35);
}
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:hover::after,
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible::after { transform: rotate(-45deg) translate(3px, 3px); }
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.mairie-gazette div.wpforms-container-full .wpforms-form button[type="submit"]:active { transform: translateY(0); box-shadow: none; }
.mairie-gazette div.wpforms-container-full .wpforms-submit-container { padding: 0; }
.mairie-gazette div.wpforms-container-full .wpforms-field input[type="email"] {
    border-radius: 9px; padding: 12px; font-size: 22px; color: #707287; border: 0;
}

/* L'ancien widget HTML posait ses deux blocs a meme l'enveloppe du widget ;
   l'element du theme, lui, recoit un .elementor-widget-container
   intermediaire. La mise en ligne gauche/droite doit donc s'appliquer a ce
   conteneur-la aussi. */
.elementor-location-footer .elementor-widget:has(.mairie-signature) > .elementor-widget-container {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px 24px; width: 100%;
}

/* =====================================================================
   19. ELEMENT « LIEN ANIME »
   =====================================================================
   Un lien texte avec une animation de REPOS (il vit avant le survol) et
   une animation de SURVOL, choisies separement dans l'editeur. Tout est
   en CSS. Les classes : lar--* pour le repos, las--* pour le survol.
   ===================================================================== */

.mairie-lien-anime {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 22px; text-decoration: none; cursor: pointer;
    font-family: 'helvetica', Arial, sans-serif; font-weight: 700; font-size: 19px;
    color: #003366; border-radius: 6px;
    overflow: hidden; isolation: isolate;
}

/* ---- repos : cadre qui se dessine en boucle -------------------------
   Quatre segments de degrade, un par cote, dont la position tourne. */
.mairie-lien-anime.lar--cadre {
    background:
        linear-gradient(90deg, #f3c42e 50%, transparent 50%) repeat-x left top    / 200% 2px,
        linear-gradient(90deg, #f3c42e 50%, transparent 50%) repeat-x left bottom / 200% 2px,
        linear-gradient(0deg,  #f3c42e 50%, transparent 50%) repeat-y left top    / 2px 200%,
        linear-gradient(0deg,  #f3c42e 50%, transparent 50%) repeat-y right top   / 2px 200%;
    animation: mairie-cadre-danse 6s linear infinite;
}
@keyframes mairie-cadre-danse {
    to { background-position: left -200% top, left 200% bottom, left top -200%, right top 200%; }
}

/* ---- repos : soulignement qui va et vient --------------------------- */
.mairie-lien-anime.lar--souligne {
    border-radius: 0; padding: 10px 4px;
    background: linear-gradient(#f3c42e, #f3c42e) no-repeat left bottom / 34% 3px;
    animation: mairie-souligne-navette 2.6s ease-in-out infinite alternate;
}
@keyframes mairie-souligne-navette {
    to { background-position: right bottom; }
}

/* ---- repos : pulsation douce ---------------------------------------- */
.mairie-lien-anime.lar--pulse {
    box-shadow: 0 0 0 0 rgba(243, 196, 46, .55);
    animation: mairie-pulse 2.2s ease-out infinite;
}
@keyframes mairie-pulse {
    70%  { box-shadow: 0 0 0 12px rgba(243, 196, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 196, 46, 0); }
}

/* ---- survol : remplissage jaune (la pastille de « Plus de details ») */
.mairie-lien-anime.las--remplissage::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #f3c42e; transform: scaleX(0); transform-origin: left center;
    transition: transform .38s cubic-bezier(.4, 0, .2, 1);
}
.mairie-lien-anime.las--remplissage:hover::before,
.mairie-lien-anime.las--remplissage:focus-visible::before { transform: scaleX(1); }
.mairie-lien-anime.las--remplissage:hover,
.mairie-lien-anime.las--remplissage:focus-visible { color: #243664; }

/* ---- survol : fleche qui entre --------------------------------------
   La place de la fleche n'est reservee qu'au survol : le texte glisse. */
.mairie-lien-anime.las--fleche::after {
    content: ""; width: 9px; height: 9px; flex: 0 0 auto;
    border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
    transform: rotate(-45deg) translate(-14px, -14px); opacity: 0;
    margin-left: -19px;
    transition: transform .32s ease, opacity .32s ease, margin-left .32s ease;
}
.mairie-lien-anime.las--fleche:hover::after,
.mairie-lien-anime.las--fleche:focus-visible::after {
    transform: rotate(-45deg) translate(0, 0); opacity: 1; margin-left: 0;
}
.mairie-lien-anime.las--fleche:hover,
.mairie-lien-anime.las--fleche:focus-visible { color: #e1211e; }

/* ---- survol : reflet qui balaie -------------------------------------- */
.mairie-lien-anime.las--eclat::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; z-index: -1;
    background: linear-gradient(105deg, transparent, rgba(243, 196, 46, .5), transparent);
    transition: left .5s ease;
}
.mairie-lien-anime.las--eclat:hover::after,
.mairie-lien-anime.las--eclat:focus-visible::after { left: 125%; }

/* ---- survol : soulevement avec ombre --------------------------------- */
.mairie-lien-anime.las--souleve {
    transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.mairie-lien-anime.las--souleve:hover,
.mairie-lien-anime.las--souleve:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 51, 102, .25);
    color: #e1211e;
}

.mairie-lien-anime:focus-visible { outline: 2px solid #f3c42e; outline-offset: 2px; }

/* Moins de mouvement : les liens deviennent sobres, ils restent lisibles
   et cliquables. */
@media (prefers-reduced-motion: reduce) {
    .mairie-lien-anime,
    .mairie-lien-anime::before,
    .mairie-lien-anime::after { animation: none !important; transition: none !important; }
}


/* =====================================================================
   16. ACCUEIL EN PETITE LARGEUR — retours du 12 août 2026
   =====================================================================
   Huit retours client sur le rendu téléphone, traités ensemble et EN FIN
   DE FICHIER : à spécificité égale, ces règles doivent battre les paliers
   historiques écrits plus haut. Ne pas les remonter.
   ===================================================================== */

/* --- Footer : l'e-mail recouvrait son icône ---------------------------
   La règle « cibles tactiles » (§ plus haut) posait `padding: 5px 0` sur
   les liens du pied de page : elle écrasait le `padding-left: 67px` qui
   réserve la place de l'icône enveloppe (fond du lien). On redonne les
   67px en gardant le débord tactile vertical. */
@media (max-width: 1199px) {
    .elementor-location-footer .mairie-coord a { padding: 5px 0 5px 67px; }
}

/* --- Menu mobile : boutons de tiroir au survol/focus -------------------
   Le thème parent pose `button:hover, button:focus { background:#c36 }`
   (rose). Le bouton-chevron des tiroirs n'avait qu'un fond transparent à
   (0,1,0) : le rose gagnait. Même famille visuelle que le burger : jaune,
   chevron repeint en bleu du panneau pour rester lisible. */
.mairie-nav-js .mairie-sous-bascule:hover,
.mairie-nav-js .mairie-sous-bascule:focus { background: #f3c42e; }
.mairie-nav-js .mairie-sous-bascule:hover::after,
.mairie-nav-js .mairie-sous-bascule:focus::after { border-color: #004873; }
/* Les flèches du carrousel d'articles sont exposées au même rose sur
   :focus ((0,1,1) contre (0,1,0)) : on fixe l'état une bonne fois. */
.mairie-focus-fleche:focus { background: #f3c42e; }
.mairie-focus-fleche:focus:hover { background: #ffd543; }

/* --- Barre du haut : Facebook calé à gauche ----------------------------
   Sous le palier du burger, l'icône restait à 66px du bord (palier 1470
   pensé pour le bureau). Elle prend la même marge que le burger à droite
   (13px), et descend au niveau de son centre (burger : top 13 + 44/2 = 35 ;
   icône de 29px : top 20 + 29/2 ≈ 35). */
@media (max-width: 1199px) {
    .mairie-social { left: 13px; top: 20px; }
    /* En en-tête collé, l’icône ne reparaît QUE sous ce palier — là où la
       barre de menus a laissé place au burger. Au-dessus, elle viendrait
       se poser sur « Vie municipale ». */
    .mairie-header.is-sticky .mairie-social { display: block; }
}

/* --- Héros : plus grand sur téléphone, texte rétabli -------------------
   Le ratio natif 2000/845 ne laissait qu'un bandeau de 159px sur un écran
   de 375 : le visuel devient une vraie scène d'entrée, comme au bureau.
   `cover` recadre l'image sur son centre — c'est le comportement déjà en
   place pour les diapositives Elementor. Le slogan et la flèche, masqués
   sous 900px jusqu'ici (écart hérité de l'original), reviennent avec des
   corps adaptés : l'approche bureau, à l'échelle du téléphone. */
@media (max-width: 900px) {
    .mairie-slider .elementor-widget-slides,
    .mairie-slider .elementor-widget-slides .elementor-slides-wrapper {
        aspect-ratio: auto;
        height: min(68vh, 520px);
    }
    .mairie-hero-texte  { display: block; top: 46%; }
    .mairie-hero-sur    { font-size: 14px; }
    .mairie-hero-titre  { font-size: 42px; margin-top: -20px; }
    .mairie-hero-scroll { display: block; top: auto; bottom: 34px; }
    /* les points suivent le bas du nouveau cadre au lieu du 221px du bureau */
    .mairie-slider { --swiper-pagination-bottom: 30px; }
    .mairie-slider .elementor-widget-slides .swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
    .mairie-slider .elementor-widget-slides .swiper-pagination { bottom: 30px; }
}

/* --- « EN 1 CLIC » : trois raccourcis, puis deux centrés ---------------
   La grille auto-fit donnait 2+2+1, la cinquième entrée seule à gauche.
   Passage en flex : chaque entrée tient un tiers, les deux dernières se
   centrent d'elles-mêmes sur la seconde ligne. */
@media (max-width: 600px) {
    .mairie-clic-liste {
        display: flex; flex-wrap: wrap; justify-content: center;
        gap: 14px 0;
    }
    .mairie-clic-liste li.clic-1,
    .mairie-clic-liste li.clic-2,
    .mairie-clic-liste li.clic-3,
    .mairie-clic-liste li.clic-4,
    .mairie-clic-liste li.clic-5 { flex: 0 0 33.333%; box-sizing: border-box; }
}

/* --- Bloc 1 : les photos passent juste sous le titre ------------------
   Demande du 14/08/2026. Empilé, le bloc donnait titre → texte → photos ;
   les photos se retrouvaient tout en bas, loin du titre qu'elles
   illustrent. On veut titre → photos → texte.

   Le balisage ne change pas — il n'a pas à changer pour une question de
   présentation, et l'ordre du DOM reste celui du bureau, où les deux
   colonnes sont côte à côte. `order` est le seul moyen de réordonner en
   CSS, et il exige un conteneur flex : d'où le passage de
   `.mairie-bloc-1-inner` en colonne, UNIQUEMENT sous le palier où les
   colonnes s'empilent déjà (1050px). Au-dessus, le conteneur reste en
   `block` et les flottants du bureau ne sont pas touchés.

   Les marges automatiques des deux colonnes (`margin: 20px auto`) les
   gardent centrées : en flex, une marge auto sur l'axe transversal
   neutralise l'étirement, la colonne conserve donc sa largeur de contenu. */
@media (max-width: 1050px) {
    .mairie-bloc-1-inner  { display: flex; flex-direction: column; }
    .mairie-bloc-1-titre  { order: 1; }
    .mairie-bloc-1-droite { order: 2; }
    .mairie-bloc-1-gauche { order: 3; }
}

/* --- Bloc 1 : les deux photos se chevauchent comme au bureau -----------
   La cascade héritée empilait la petite photo sous la grande dès 1050px.
   On rejoue la composition du bureau à l'échelle : la petite (ph-2) revient
   en absolu sur le coin bas-gauche de la grande, et déborde de ~51px sous
   sa colonne. */
@media (max-width: 767px) {
    .mairie-bloc-1-droite { position: relative; }
    .mairie-bloc-1 .ph-2 {
        display: block; position: absolute; margin: 0;
        width: 56%; left: -4%; bottom: -13%;
    }
    .mairie-bloc-1 .ph-2 img { width: 100%; height: auto; }
    /* Le débord de ph-2 tombait dans le bas du bloc tant que les photos
       le terminaient ; maintenant qu'elles précèdent le texte, c'est LUI
       qui passerait dessous. On réserve la place ici, et le bas du bloc
       n'a plus besoin des 170px qui absorbaient ce débord. */
    .mairie-bloc-1-droite { margin-bottom: 78px; }
    .mairie-bloc-1 { padding-bottom: 90px; }
}

/* --- Titres script : à gauche sur téléphone ----------------------------
   `text-align: right` vient de la composition bureau (le titre s'appuie
   sur la droite de la bande). Sur téléphone le bloc est seul sur sa
   colonne : il part du bord gauche, comme le reste du contenu. */
@media (max-width: 767px) {
    .mairie-bloc-2-titre { text-align: left; }
}

/* --- En-tête collé : bandeau au 3/4, blason contenu --------------------
   Retour client : le bandeau de 109px mange trop d'écran en mobile, et le
   blason déborde largement dessous. Le quart retiré l'est « du haut vers
   le bas » : le bandeau garde son ancrage en haut, tout ce qu'il porte
   remonte et rétrécit pour tenir dans les 82px restants. */
@media (max-width: 767px) {
    .mairie-header.is-sticky .mairie-header-inner:before { height: 82px; }
    .mairie-header.is-sticky .mairie-logo {
        padding-top: calc(18px * var(--logo-echelle));
        background-size: 38%;
    }
    .mairie-header.is-sticky .mairie-logo img { width: 36%; }
    /* icône (29px) et burger (44px) centrés sur le bandeau de 82px */
    .mairie-header.is-sticky .mairie-social { top: 26px; }
    .mairie-header.is-sticky .mairie-burger { top: 19px; }
}

/* --- Carrousel d'articles : flèches inutiles au bureau -----------------
   Le widget enveloppe désormais ses cartes dès qu'il y en a deux (pour le
   carrousel téléphone) : quand tout tient à l'écran au bureau, la classe
   --tel masque les flèches, et le rendu bureau reste celui d'avant. */
@media (min-width: 901px) {
    .mairie-focus-defile--tel .mairie-focus-fleche { display: none; }
}


/* =====================================================================
   17. DÉFILEMENTS — souris du héros cliquable, retour en haut
   =====================================================================
   Pendants visuels du bloc « Défilements » de mairie.js (14/08/2026).
   ===================================================================== */

/* Le conteneur du texte du héros bloque les clics (pointer-events: none,
   § 4) pour laisser vivre le slider dessous : on ne réactive le clic que
   sur la souris elle-même. */
.mairie-hero-scroll {
    pointer-events: auto;
    cursor: pointer;
}
.mairie-hero-scroll:focus-visible { outline: 2px solid #f3c42e; outline-offset: 4px; }

/* --- Retour en haut ---------------------------------------------------
   Même famille visuelle que les flèches du carrousel (§ 15) : pastille
   jaune, chevron dessiné en bordures, ombre portée. Le bouton est créé
   par mairie.js — sans script il n'existe pas. Invisible au repos, il
   monte en fondu dès 600px de défilement. Les états :hover/:focus sont
   posés à deux classes : la règle rose du thème parent (button:hover,
   une classe et un type) ne peut pas les battre. */
.mairie-haut {
    position: fixed; right: 16px; bottom: 16px; z-index: 9000;
    width: 48px; height: 48px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: #f3c42e; border: 0; border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .3s, visibility .3s, transform .3s, background .3s;
}
.mairie-haut.est-visible { opacity: 1; visibility: visible; transform: none; }
.mairie-haut:hover,
.mairie-haut:focus { background: #ffd543; }
.mairie-haut:focus-visible { outline: 2px solid #003366; outline-offset: 2px; }
/* Le chevron n’est pas sa boîte : tourné à -45°, le « ^ » ne peint que les
   bordures haut et droite, dont l’encre n’occupe que la moitié HAUTE du
   carré — une boîte centrée paraît donc remontée de (11-3)/2√2 = 2.828px.
   La marge de 20px calée à la main ne compensait pas cela : elle passait
   par le centrage implicite du contenu des <button>, qui la divise par
   deux, et laissait la flèche 7.17px trop bas. D’où les deux temps : le
   flex du bouton centre la boîte au pixel, la translation redescend
   l’encre d’exactement son décalage. */
.mairie-haut::before {
    content: ""; display: block; width: 11px; height: 11px;
    margin: 0;
    border-right: 3px solid #fff; border-top: 3px solid #fff;
    transform: translateY(2.828px) rotate(-45deg);
    transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
    .mairie-haut { transition: none; }
}

/* =====================================================================
   18. TEXTES DU HÉROS DANS L'ÉLÉMENT DIAPOSITIVES (demande du 15/08/2026)
   =====================================================================
   Le client demande que le slogan vive dans les champs NATIFS de
   l'élément Diapositives — Titre et Description de chaque diapositive —
   et non plus dans un widget de superposition séparé. Ces règles font
   rendre ces deux champs EXACTEMENT comme l'ancien « Texte du héros » :
   mêmes polices, mêmes corps à chaque palier, mêmes animations d'entrée
   (rejouées à chaque diapositive : la classe swiper-slide-active se
   déplace, l'animation repart d'elle-même), même position verticale.

   Tant que les champs des diapositives sont vides, tout ceci est sans
   effet : la bascule se fait dans l'éditeur, sans à-coup visuel.
   ===================================================================== */

/* Le conteneur de contenu de la diapositive prend la place exacte de
   l'ancienne superposition : bandeau pleine largeur centré, calé en
   pourcentage de la hauteur du visuel. z-index 5 : au-dessus du masque
   de contraste (z-index 1), comme l'ancien widget. */
.mairie-slider .elementor-widget-slides .swiper-slide-contents {
    position: absolute; left: 0 !important; right: 0 !important;
    top: 50%; transform: translateY(-50%);
    /* !important : le reglage « Largeur du contenu » du widget ecrit un
       max-width (66% par defaut) dans le CSS genere de la page, avec la
       specificite d un identifiant de page — imbattable proprement. Le
       bandeau doit couvrir toute la largeur, comme l ancienne
       superposition. */
    width: 100% !important; max-width: none !important;
    margin: 0 !important; text-align: center; z-index: 5;
}

/* Ligne 1 — l'ancien surtitre (« DESSINONS ENSEMBLE ») */
.mairie-slider .elementor-widget-slides .elementor-slide-heading {
    font-family: 'helvetica', Arial, sans-serif; font-weight: 700;
    font-size: 26px; line-height: 1.4; letter-spacing: normal;
    color: #fff; text-transform: uppercase;
    /* !important : Elementor pose margin-bottom 30px sur le titre de
       diapositive à une spécificité supérieure — l'ancien surtitre n'en
       avait pas, la ligne jaune doit venir mordre dessus. */
    margin: 0 !important;
}

/* Ligne 2 — l'ancien titre manuscrit (« Notre futur village »).
   Le chevauchement des deux lignes vient du margin-top négatif. */
.mairie-slider .elementor-widget-slides .elementor-slide-description {
    font-family: 'amstagramregular', cursive; font-weight: 400;
    font-size: 104px; line-height: 1.4; color: #F3C226;
    margin: -65px 0 0 !important; padding: 8px 0 0 !important;
}

/* Un SEUL texte à l'écran à la fois. Pendant le fondu-enchaîné des
   photos, la diapositive sortante reste partiellement visible le temps du
   croisement : son texte et celui de l'entrante — identiques — se
   superposaient, et l'entrant semblait « descendre d'un mauvais endroit »
   avant de prendre sa place (relevé client du 15/08/2026, absent au
   premier affichage puisqu'il n'y a alors rien derrière). L'ancien widget
   n'affichait qu'un bloc de texte : on reproduit ce contrat — le texte de
   toute diapositive non active est éteint instantanément, celui de
   l'active arrive par son animation d'entrée.
   Le mode boucle DUPLIQUE les diapositives (9 pour 3) et la visible peut
   être un doublon porteur de duplicate-active : il compte comme actif,
   sans quoi le texte disparaîtrait à chaque rebouclage. */
.mairie-slider .elementor-widget-slides .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .swiper-slide-contents {
    opacity: 0;
}

/* Animations d'entrée : STRICTEMENT celles de l'ancien widget, déjà
   déclarées au § 4 (mairie-slide-top, mairie-text-fade) — consigne
   client du 15/08/2026 : l'animation d'origine se garde à l'identique,
   on ne la remplace pas. Accrochées à la diapositive ACTIVE : Swiper
   déplace cette classe à chaque changement, l'animation repart à chaque
   photo, doublons de boucle compris. */
.mairie-slider .elementor-widget-slides .swiper-slide-active .elementor-slide-heading,
.mairie-slider .elementor-widget-slides .swiper-slide-duplicate-active .elementor-slide-heading {
    animation: mairie-slide-top 1.5s ease;
}
.mairie-slider .elementor-widget-slides .swiper-slide-active .elementor-slide-description,
.mairie-slider .elementor-widget-slides .swiper-slide-duplicate-active .elementor-slide-description {
    animation: mairie-slide-top 1.5s ease, mairie-text-fade 3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .mairie-slider .elementor-widget-slides .swiper-slide-active .elementor-slide-heading,
    .mairie-slider .elementor-widget-slides .swiper-slide-duplicate-active .elementor-slide-heading,
    .mairie-slider .elementor-widget-slides .swiper-slide-active .elementor-slide-description,
    .mairie-slider .elementor-widget-slides .swiper-slide-duplicate-active .elementor-slide-description { animation: none; }
}

/* La souris de défilement peut désormais être créée par mairie.js
   directement dans le slider : même géométrie que dans l'ancien widget,
   et cliquable par-dessus les diapositives. */
.mairie-slider > .mairie-hero-scroll { z-index: 5; }

/* --- Paliers : la cascade exacte de l'ancien widget (§ 4 et § 16) ----- */
@media (max-width: 1470px) {
    /* comme l'ancien widget : seul le point d'ancrage descend, le
       recentrage translateY(-50%) de la règle de base reste actif */
    .mairie-slider .elementor-widget-slides .swiper-slide-contents { top: 59%; }
    .mairie-slider .elementor-widget-slides .elementor-slide-description { font-size: 74px; margin-top: -40px !important; }
}
@media (max-width: 1366px) {
    .mairie-slider .elementor-widget-slides .elementor-slide-heading { font-size: 23px; }
    .mairie-slider .elementor-widget-slides .elementor-slide-description { font-size: 65px; }
}
@media (max-width: 1280px) {
    .mairie-slider .elementor-widget-slides .swiper-slide-contents { top: 58%; }
	.mairie-header .mairie-header-inner .mairie-menu-principal > ul > li > a, .mairie-header .mairie-header-inner .mairie-menu-principal > ul > li > .mairie-separateur{font-size: 15px;}
}
@media (max-width: 1100px) {
    .mairie-slider .elementor-widget-slides .elementor-slide-heading { font-size: 20px; }
    .mairie-slider .elementor-widget-slides .elementor-slide-description { font-size: 50px; margin-top: -30px !important; }
}
@media (max-width: 991px) {
    .mairie-slider .elementor-widget-slides .swiper-slide-contents { top: 64%; }
    .mairie-slider .elementor-widget-slides .elementor-slide-heading { font-size: 17px; }
    .mairie-slider .elementor-widget-slides .elementor-slide-description { font-size: 45px; margin-top: -26px !important; }
}
@media (max-width: 900px) {
    /* le héros agrandi du § 16 : mêmes corps que .mairie-hero-sur/-titre */
    .mairie-slider .elementor-widget-slides .swiper-slide-contents { top: 46%; }
    .mairie-slider .elementor-widget-slides .elementor-slide-heading { font-size: 14px; }
    .mairie-slider .elementor-widget-slides .elementor-slide-description { font-size: 42px; margin-top: -20px !important; }
}


/* --- Accordeon « Ouvrir/fermer » (Elementor) : l habit du site -------
   S applique PARTOUT ou l element est pose — pages actuelles et pages
   futures, sans aucun reglage a refaire. Les couleurs portent
   !important : elles priment sur les reglages de style poses widget
   par widget dans l editeur, pour que le dessin reste le meme sur tout
   le site. Volets en cartes, en-tete sarcelle a l ouverture, icone
   jaune qui pivote, coupe des mots longs, reduits sur telephone. */
.elementor-widget-toggle .elementor-toggle-item {
    margin: 0 0 12px; background: #fff;
    border: 1px solid #e3e6ef; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(21, 28, 67, .06);
    overflow: hidden;
    transition: box-shadow .25s ease;
}
.elementor-widget-toggle .elementor-toggle-item:hover { box-shadow: 0 4px 16px rgba(21, 28, 67, .12); }
.elementor-widget-toggle .elementor-tab-title {
    margin: 0 !important;
    padding: 16px 20px !important;
    font-family: 'helvetica', Arial, sans-serif; font-size: 18px !important; font-weight: 700;
    color: #151c43 !important; background: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 14px;
    overflow-wrap: anywhere;
    transition: background-color .25s ease, color .25s ease;
}
.elementor-widget-toggle .elementor-tab-title:hover { background: #f6f7fb; }
.elementor-widget-toggle .elementor-tab-title.elementor-active {
    background-image: linear-gradient(#25819f, #177a99) !important;
}
/* le libelle vit dans un span qui recoit sa PROPRE couleur des reglages
   du widget : l heritage ne suffit pas, on vise chaque porteur de texte */
.elementor-widget-toggle .elementor-tab-title.elementor-active,
.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-title,
.elementor-widget-toggle .elementor-tab-title.elementor-active a {
    color: #fff !important;
}
.elementor-widget-toggle .elementor-tab-title .elementor-toggle-title { color: inherit !important; }
.elementor-widget-toggle .elementor-tab-title a { color: inherit !important; }
.elementor-widget-toggle .elementor-toggle-icon {
    flex: 0 0 auto; color: #f3c42e !important;
    transition: transform .35s ease;
}
.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
    transform: rotate(180deg); color: #fff !important;
}
.elementor-widget-toggle .elementor-toggle-icon svg { width: 16px; height: 16px; fill: currentColor; }
.elementor-widget-toggle .elementor-tab-content {
    padding: 18px 20px; border-top: 1px solid #e3e6ef;
    font-family: 'helvetica', Arial, sans-serif; font-size: 16px; color: #151c43;
}
@media (max-width: 767px) {
    .elementor-widget-toggle .elementor-tab-title { padding: 14px 16px !important; font-size: 16px !important; }
    .elementor-widget-toggle .elementor-tab-content { padding: 14px 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .elementor-widget-toggle .elementor-toggle-item,
    .elementor-widget-toggle .elementor-tab-title,
    .elementor-widget-toggle .elementor-toggle-icon { transition: none; }
}
@media(max-width:450px){
	.mairie-interieur .page-content ul li, p{
    font-size: 17px;
    line-height: 1.4;
}
}