/*
 * La Commune — Footer
 * =============================================================================
 * Feuille compagnon de modules/footer.php — shortcode [commune_footer].
 * Enqueued automatiquement par footer.php.
 * =============================================================================
 */

/* ════════════════════════════════════════════════════════════════════
   FOOTER [commune_footer]
   Bandeau rose (onglets + ticket) · bandeau vert (liens) · signature.
   Les couleurs arrivent en variables depuis le shortcode.
   ════════════════════════════════════════════════════════════════════ */

.commune-footer {
    position: relative;
    z-index: 7;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    --footer-tab-body: 31px;
}

/*
   Même recette que .commune-temoignages : supprimer le padding inter-rows
   Uncode pour que les onglets chevauchent le bloc du dessus (traits noirs).
*/
.main-container .row-container .row-parent:has(.commune-footer) {
    padding-top: 0 !important;
    /*
       Et le padding bas : sinon 36px du fond crème du body (#FEFEF8) restaient
       visibles sous le bloc wordmark, qui est en blanc pur.
    */
    padding-bottom: 0 !important;
}

/*
   Et le padding bas de la DERNIÈRE row de la page, juste au-dessus du footer.
   Un sélecteur de frère adjacent (`+ .row-container .commune-footer`) ne
   fonctionne plus : depuis que le shortcode vit dans le bloc de contenu assigné
   comme footer, il est dans <footer class="site-footer">, donc plus frère des
   rows de la page. On vise donc la dernière row de premier niveau de
   .page-wrapper — les rows imbriquées (accordéons, tabs) n'ont pas
   data-parent="true" et sont exclues d'office.
*/
.main-container:has(.site-footer .commune-footer)
    .page-wrapper .row-container[data-parent="true"]:last-of-type > .row-parent {
    padding-bottom: 0 !important;
}

/* ── Bandeau rose ── */
.commune-footer-top {
    position: relative;
    z-index: 2;
    background: var(--footer-top-bg, #F18BAD);
    --footer-top-pad-y: clamp(1.25rem, 2.5vw, 2rem);
    /* Exposé en variable : le décalage des onglets doit pouvoir s'y référer */
    --footer-pad-x: clamp(1rem, 3vw, 3rem);
    padding-top: var(--footer-top-pad-y);
    padding-bottom: var(--footer-top-pad-y);
    padding-left: var(--footer-pad-x);
    padding-right: var(--footer-pad-x);
    border-top: 1px solid #000;
}

/* Radios hors flux : sinon 2× <input> laissent un trou en haut du bandeau */
.commune-footer-top > .commune-footer-tabinput {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    appearance: none !important;
}

.commune-footer-tabs {
    position: relative;
    --footer-tabs-pad: clamp(1.25rem, 2.5vw, 2.5rem);
    padding-left: var(--footer-tabs-pad);
    z-index: 8;
}

/*
   Identique à .commune-temoignages-label-row : overlap = hauteur de l'onglet
   seulement, pas 79px — le bloc du dessus reste lisible.
*/
.commune-footer-tab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    top: -62px;
    margin-bottom: calc(-1 * var(--footer-tab-body));
    left: -70px;
}

.commune-footer-tab {
    display: inline-block;
    cursor: pointer;
    color: #000;
    background: #fff;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 16px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: none;
    border-top-left-radius: 0;
    border-top-right-radius: 12px;
}

/* Actif : fond rose du bandeau, comme l'onglet temoignages posé sur sa section */
.commune-footer-tabinput--1:checked ~ .commune-footer-tabs .commune-footer-tab--1,
.commune-footer-tabinput--2:checked ~ .commune-footer-tabs .commune-footer-tab--2 {
    background: var(--footer-top-bg, #F18BAD);
}

.commune-footer-tabinput:focus-visible ~ .commune-footer-tabs .commune-footer-tab {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* ── Le ticket ── */
.commune-footer-ticket {
    position: relative;
    display: grid;
    /* 4 parts égales : horaires · contact · trouver · map */
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    background: var(--footer-ticket-bg, #FFFDE9);
    border-radius: 26px;
    /* Padding vertical symétrique — horizontal sur les cellules */
    --ticket-pad-y: clamp(1rem, 2vw, 2rem);
    padding-top: var(--ticket-pad-y);
    padding-bottom: var(--ticket-pad-y);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    --ticket-notch-x: calc(100% / 4);
    --ticket-dash-w: 3px;
    --ticket-dash-l: 22px;
    --ticket-dash-gap: 18px;
    --ticket-dash-period: calc(var(--ticket-dash-l) + var(--ticket-dash-gap));
    --ticket-notch-r: 26px;
    --ticket-notch-d: calc(var(--ticket-notch-r) * 2);
    --ticket-dash-notch-gap: 4px;
}

/*
   Encoches du ticket : demi-cercles sur le bord haut / bas (pas de cercle entier
   qui dépasse). Couleur du bandeau rose = effet de perforation.
*/
.commune-footer-ticket::before,
.commune-footer-ticket::after {
    content: "";
    position: absolute;
    left: calc(var(--ticket-notch-x) - var(--ticket-notch-r));
    width: var(--ticket-notch-d);
    height: var(--ticket-notch-r);
    background: var(--footer-top-bg, #F18BAD);
}

.commune-footer-ticket::before {
    /* Remontée de 2px : referme le liseré crème qui affleurait au-dessus du demi-cercle */
    top: -2px;
    border-radius: 0 0 var(--ticket-notch-r) var(--ticket-notch-r);
}

.commune-footer-ticket::after {
    bottom: 0;
    border-radius: var(--ticket-notch-r) var(--ticket-notch-r) 0 0;
}

/* Séparateurs pointillés : tirets plus épais et plus espacés (gradient, pas border dashed) */
.commune-footer-cell + .commune-footer-cell {
    border-left: none;
    padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}

.commune-footer-cell + .commune-footer-cell::before {
    content: "";
    position: absolute;
    left: 0;
    /* Démarre sous le demi-cercle haut, finit au-dessus du demi-cercle bas */
    top: max(0px, calc(var(--ticket-notch-r) - var(--ticket-pad-y) + var(--ticket-dash-notch-gap)));
    bottom: max(0px, calc(var(--ticket-notch-r) - var(--ticket-pad-y) + var(--ticket-dash-notch-gap)));
    width: var(--ticket-dash-w);
    background: repeating-linear-gradient(
        to bottom,
        #000 0,
        #000 var(--ticket-dash-l),
        transparent var(--ticket-dash-l),
        transparent var(--ticket-dash-period)
    );
    pointer-events: none;
}

.commune-footer-cell {
    position: relative;
    padding-right: clamp(1rem, 2vw, 2rem);
    min-width: 0;
}

.commune-footer-cell:first-child {
    padding-left: clamp(1.25rem, 2.5vw, 2.5rem);
}

.commune-footer-cell:last-child {
    padding-right: clamp(1.25rem, 2.5vw, 2.5rem);
}

.commune-footer-h {
    margin: 0 0 1rem !important;
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: clamp(20px, 1.8vw, 26px) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
}

/* ── Horaires ── */
.commune-footer-hourset {
    display: none;
}

.commune-footer-tabinput--1:checked ~ .commune-footer-ticket .commune-footer-hourset--1,
.commune-footer-tabinput--2:checked ~ .commune-footer-ticket .commune-footer-hourset--2 {
    display: block;
}

.commune-footer-hour {
    margin: 0 0 0.75rem !important;
    color: #000 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
}

.commune-footer-hour:last-child {
    margin-bottom: 0 !important;
}

.commune-footer-hour strong {
    display: block;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* ── Contact ── */
.commune-footer-contact {
    display: flex;
    flex-direction: column;
}

.commune-footer-mail {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #000 !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.commune-footer-mail svg {
    width: 26px;
    height: auto;
    flex: 0 0 auto;
}

.commune-footer-mascot {
    display: block;
    width: 42%;
    max-width: 120px;
    height: auto;
    margin: auto 0 0 auto;
    transform: scaleX(-1);
}

/* ── Nous trouver (col. 3) ── */
.commune-footer-find-text {
    min-width: 0;
}

/* Perforation « trouver » : hauteur ticket entière (padding vertical compris) */
.commune-footer-cell + .commune-footer-find::before {
    top: calc(-1 * var(--ticket-pad-y));
    bottom: calc(-1 * var(--ticket-pad-y));
}

/*
   ── Plan (col. 4) ──
   Le plan ne doit PAS piloter la hauteur du ticket. En le laissant s'étirer
   (align-items:stretch + height:100%), son ratio propre s'imposait à toute la
   ligne : 430×645 mesuré à 1024px, 266×400 à 1440px, et 0 tant que l'image en
   loading="lazy" n'était pas chargée — d'où un ticket surdimensionné et un saut
   de mise en page au chargement.
   Hauteur explicite donc, identique à toutes les largeurs, image centrée en
   width:auto pour garder son ratio sans bandes latérales.
*/
.commune-footer-map-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Pas de perforation pointillée avant la map */
.commune-footer-cell + .commune-footer-map-cell::before {
    content: none;
    display: none;
}

.commune-footer-map {
    display: block;
    flex: 0 1 auto;
    max-width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.commune-footer-map img {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(220px, 22vw, 300px);
    object-fit: contain;
    object-position: center center;
}

/* ── Nous trouver — typo adresse / trajets ── */
.commune-footer-address,
.commune-footer-route,
.commune-footer-transit {
    margin: 0 0 0.6rem !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #000 !important;
}

.commune-footer-address a,
.commune-footer-transit a {
    color: #000 !important;
    text-decoration: none !important;
}

.commune-footer-route {
    color: #2E7D4F !important;
}

.commune-footer-transit {
    margin-top: 1rem !important;
    font-weight: 700;
}

/* ── Bandeau vert ── */
.commune-footer-links {
    position: relative;
    background: var(--footer-links-bg, #00A66A);
    border-top: 1px solid #000;
    /* Le bord ondulé mange 12px en bas : 46px pour que les pattes de la poule ne le touchent pas */
    padding: 30px clamp(1rem, 3vw, 3rem) 46px;
}

/*
   Bord ondulé : petites vagues répétées (pas une seule grande courbe).
*/
.commune-footer-links::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6 Q10 0 20 6 T40 6 V12 H0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 12px;
    background-position: left bottom;
}

/*
   La colonne newsletter est plus large que les trois colonnes de liens : elle
   doit loger les réseaux ET la bulle côte à côte (~105px + ~300px), ce que des
   colonnes égales ne permettent jamais sous le plafond de 1500px.
*/
.commune-footer-links-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.6fr;
    gap: 2rem;
    max-width: 1500px;
    margin: 0 auto;
}

.commune-footer-col {
    min-width: 0;
}

.commune-footer-col + .commune-footer-col {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
    padding-left: 2rem;
}

.commune-footer-coltitle {
    /*
       Deux lignes réservées pour que les listes démarrent à la même hauteur
       quand un intitulé passe sur deux lignes. La marge basse est réduite en
       conséquence : sinon un titre d'une seule ligne cumulait 21px de vide
       réservé + 28px de marge.
    */
    min-height: calc(2 * 21.6px);
    margin: 0 0 0.75rem !important;
    color: #fff !important;
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 21.6px !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.commune-footer-col ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.commune-footer-col li {
    margin: 0;
}

.commune-footer-col li a {
    color: #fff !important;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 21.6px;
    text-decoration: none !important;
    text-transform: uppercase;
}

.commune-footer-col li a:hover {
    text-decoration: underline !important;
}

/* ── Newsletter ── */
.commune-footer-nl {
    display: grid;
    /* réseaux (largeur de leur contenu) · bulle (tout le reste) */
    grid-template-columns: auto minmax(0, 1fr);
    /* titre · formulaire · (réseaux + bulle) */
    grid-template-rows: auto auto auto;
    align-items: end;
    column-gap: 1rem;
    min-height: 0;
}

.commune-footer-nl .commune-footer-coltitle,
.commune-footer-nlform {
    grid-column: 1 / -1;
}

.commune-footer-nlform {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px 6px 14px;
    position: relative;
    z-index: 3;
    width: 100%;
    box-sizing: border-box;
}

.commune-footer-nlform input {
    flex: 1 1 auto;
    min-width: 0;
    border: none !important;
    outline: none;
    background: transparent !important;
    box-shadow: none !important;
    /* Le placeholder ne tombait pas au milieu de la pastille blanche.

       La cause est dans le CSS d'Uncode, qui pose sur les champs une hauteur
       et des marges propres : une fois la bordure et le fond retires, il
       reste une boite plus haute que sa ligne de texte, et le texte n'y est
       plus centre. Plutot que de chercher la declaration exacte dans le CSS
       du theme, on retire au champ toute latitude : hauteur libre, marges
       nulles, interlignage explicite. Sa boite ne vaut alors plus que sa
       ligne de texte (20 + 6 + 6 = 32px), et le centrage vertical ne depend
       plus de personne — c'est `align-items: center` du formulaire qui place
       cette boite, et le navigateur qui centre le texte dedans. */
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 20px !important;
    padding: 6px 0 !important;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    color: #000;
}

.commune-footer-nlform button {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #000;
    padding: 4px;
    line-height: 0;
    position: relative;
    z-index: 4;
}

.commune-footer-nlform button svg {
    width: 26px;
    height: auto;
}

.commune-footer-social {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    margin-top: 1rem;
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    position: relative;
    z-index: 3;
}

.commune-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    line-height: 0;
}

.commune-footer-social svg {
    display: block;
    width: 29px;
    height: 29px;
    flex-shrink: 0;
}

/*
   Bulle + poule : les deux SVG de la maquette, à droite, sans chevaucher le
   formulaire ni les réseaux.

   Tout est exprimé en proportions de la largeur de la zone (W), jamais en px,
   d'après la géométrie des deux SVG :
     · bulle    146 × 89  → hauteur = 0.610 · W
     · corps    0 → 65.66 de 89     → 73.8 % de la hauteur du SVG (le reste = queue)
     · queue    pointe à 84.9 / 146 → 58 % de la largeur : la poule se cale juste après
     · poule    59 × 76             → hauteur = 1.288 × sa largeur
     · zone     bulle + débord de la poule = 0.94 · W → aspect-ratio 146/137.2
   La hauteur passe par aspect-ratio (et non un calc en px) pour que la zone
   puisse être en width:% sans casser les pourcentages verticaux des enfants ;
   la taille du texte par cqw, seule unité indexée sur la bulle elle-même.
   Le SVG garde son ratio (pas de preserveAspectRatio="none") : aucun trait
   déformé, les proportions de la maquette sont conservées telles quelles.
*/
.commune-footer-bubble-zone {
    /*
       À droite des réseaux, sur la même ligne. La largeur est fluide : elle
       prend ce que la colonne laisse après les icônes, plafonnée à 340px.
       C'est la piste large qui permet de tenir à côté d'elles.
    */
    grid-column: 2;
    grid-row: 3;
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 340px);
    /* bulle (0.610·W) + la poule qui déborde en bas = 0.94·W */
    aspect-ratio: 146 / 137.2;
    /* Unité de référence des enfants : 1cqw = 1 % de la largeur de la bulle */
    container-type: inline-size;
    /* La bulle est collee au formulaire sans cette marge : elle partage sa
       rangee de grille avec les reseaux sociaux, mais eux ont un
       `margin-top: 1rem` et elle non — elle demarrait donc au ras du haut de
       la rangee, et finissait plus haut que les icones posees a cote d'elle.
       Le point est deja traite sous 700px (1,5rem), c'est la version desktop
       qui manquait.

       Releve sur la maquette, en ecart vertical entre le bas du champ et le
       haut de la bulle, rapporte a la largeur de la bulle — seule reference
       comparable, les deux captures n'etant pas a la meme echelle :
       11,7 % attendus contre 4,2 % au rendu, soit 40px pour une bulle a son
       plafond de 340px.

       clamp plutot qu'un 2,5rem sec : le pourcentage se calcule sur la
       largeur de la colonne, l'ecart reste donc proportionnel si elle se
       resserre, tout en etant borne a 40px des que la bulle plafonne. */
    margin-top: clamp(1.25rem, 12%, 2.5rem);
    padding-left: 0;
    align-self: end;
    justify-self: end;
    pointer-events: none;
    z-index: 1;
}

.commune-footer-bubble {
    position: relative;
    width: 100%;
    margin: 0 !important;
}

.commune-footer-bubble-shape {
    display: block;
    width: 100%;
    height: auto;
}

/* Le texte se cale dans le corps de la bulle seulement, jamais sur la queue */
.commune-footer-bubble-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 26.2%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 11%;
    color: #000 !important;
    font-size: clamp(12px, 5.6cqw, 18px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left;
}

/* Poule : posée à droite de la pointe de la queue, chevauchant le bas de la bulle */
.commune-footer-bubble-deco {
    position: absolute;
    left: 57%;
    /* 0.406·W rapporté à la hauteur de la zone (0.94·W) */
    top: 43.2%;
    display: block;
    width: 41%;
    height: auto;
}


/* ── Signature ── */
.commune-footer-wordmark {
    background: #fff;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem);
}

.commune-footer-wordmark img {
    display: block;
    width: 100%;
    height: auto;
}

/* ── Responsive ── */
/*
   Bascule à 1100 : au-dessus on reste en quatre colonnes. Un portable de
   1200-1280px est un écran de bureau — l'y basculer en 2×2 étalait tout le
   footer sur le double de hauteur.
*/
@media (max-width: 1100px) {
    .commune-footer-ticket {
        grid-template-columns: repeat(2, 1fr);
        --ticket-notch-x: 50%;
    }
    /* En 2×2 : horaires|contact puis trouver|map — encoche au milieu de la 1re ligne */
    .commune-footer-ticket::before,
    .commune-footer-ticket::after {
        left: calc(var(--ticket-notch-x) - var(--ticket-notch-r));
    }

    /*
       Onglets un peu moins remontés qu'en desktop.
       Le -70px de la règle de base annule les deux paddings (bandeau + onglets)
       pour ramener les onglets vers la gauche. Sous 1100px ces paddings ont
       fondu, et -70px sortait le premier onglet de l'écran (-14px à 1024,
       -34px à 500). Le max() le laisse aller au plus loin possible — jusqu'au
       bord, jamais au-delà.
    */
    .commune-footer-tab-row {
        top: -50px;
        left: max(-70px, calc(-1 * (var(--footer-pad-x) + var(--footer-tabs-pad))));
    }

    /*
       En 2×2, la 3e cellule ouvre une nouvelle ligne : sa perforation verticale
       se retrouve plaquée contre le bord gauche du ticket, et rien ne sépare
       plus les deux lignes. On bascule donc les perforations de la 2e ligne à
       l'horizontale, au-dessus d'elle.
    */
    .commune-footer-find,
    .commune-footer-map-cell {
        padding-top: 1.75rem;
        padding-bottom: 0;
        margin-top: 1.75rem;
    }

    .commune-footer-cell + .commune-footer-find::before,
    .commune-footer-cell + .commune-footer-map-cell::before {
        content: "";
        /* la règle de base masque celle du plan : il faut lever les deux */
        display: block;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: var(--ticket-dash-w);
        background: repeating-linear-gradient(
            to right,
            #000 0,
            #000 var(--ticket-dash-l),
            transparent var(--ticket-dash-l),
            transparent var(--ticket-dash-period)
        );
    }

    /*
       Les trois colonnes de liens restent sur une seule ligne, seule la
       newsletter passe en dessous. En 2 colonnes, la troisième occupait une
       ligne entière dont la moitié droite restait vide.
    */
    .commune-footer-links-inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .commune-footer-col:first-child {
        border-left: none;
        padding-left: 0;
    }

    .commune-footer-nl {
        grid-column: 1 / -1;
        border-left: none !important;
        padding-left: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.45);
        padding-top: 2rem;
        margin-top: 0.25rem;
    }

    /*
       La bulle pilote à elle seule la hauteur de la ligne « réseaux + bulle »
       (0.94 × sa largeur). Pleine largeur de colonne, 340px imposaient 320px de
       haut alors qu'elle n'a plus besoin d'être aussi grande ici.
    */
    .commune-footer-bubble-zone {
        width: min(100%, 280px);
    }
}

@media (max-width: 700px) {
    .commune-footer-ticket {
        grid-template-columns: 1fr;
        border-radius: 18px;
    }
    .commune-footer-cell + .commune-footer-cell {
        border-left: none;
        padding-left: 0;
        border-top: none;
        padding-top: 1.75rem;
        margin-top: 1.75rem;
    }

    .commune-footer-cell + .commune-footer-cell::before {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        width: auto;
        height: var(--ticket-dash-w);
        background: repeating-linear-gradient(
            to right,
            #000 0,
            #000 var(--ticket-dash-l),
            transparent var(--ticket-dash-l),
            transparent var(--ticket-dash-period)
        );
    }

    .commune-footer-cell + .commune-footer-find::before {
        top: 0;
        bottom: auto;
    }
    .commune-footer-ticket::before,
    .commune-footer-ticket::after {
        display: none;   /* plus de colonne à découper */
    }
    .commune-footer-links-inner {
        grid-template-columns: 1fr;
    }
    .commune-footer-col + .commune-footer-col {
        border-left: none;
        padding-left: 0;
    }
    .commune-footer-nl {
        grid-template-columns: 1fr;
        border-top: 1px solid rgba(255, 255, 255, 0.45);
        padding-top: 2rem;
        margin-top: 0.5rem;
    }
    .commune-footer-social {
        grid-column: 1;
        grid-row: auto;
    }
    .commune-footer-bubble-zone {
        grid-column: 1;
        grid-row: auto;
        width: min(100%, 280px);
        justify-self: start;
        margin-top: 1.5rem;
        padding-left: 0;
    }
    .commune-footer-mascot {
        margin-right: 0;
        margin-top: 0.75rem;
    }

    /* Le plan est déjà traité par le palier ≤1280px, qui s'applique aussi ici. */
}


/* ════════════════════════════════════════════════════════════════════════
   LE TICKET N'A PLUS DE GOUTTIÈRE LATÉRALE SOUS 700px
   ════════════════════════════════════════════════════════════════════════

   Correctif rapatrié depuis le style.css de l'install Saint-Étienne, où il
   existait déjà (mêmes valeurs, même sélecteur : aucun changement de rendu
   à Saint-Étienne). Le style.css de Lyon ne l'avait pas : le porter ici le
   fait voyager avec le module, sur les deux installs.

   Le retrait latéral des cellules du ticket est réparti sur trois règles :
   padding-right sur .commune-footer-cell, padding-left sur :first-child et
   sur .commune-footer-cell + .commune-footer-cell (pour dégager le texte de
   la perforation verticale). Sous 700px le ticket passe en une colonne et
   cette dernière règle est réécrite en padding-left: 0 : « NOUS CONTACTER »
   et « NOUS TROUVER » se retrouvaient collés au bord crème du ticket.

   On repose donc un retrait uniforme sur les quatre cellules. Les
   perforations ne bougent pas : leurs ::before sont en left: 0; right: 0.
   Classe doublée (.x.x → 0-3-0) pour passer devant les règles 0-2-0 quel
   que soit l'ordre de chargement des feuilles.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

    .commune-footer-ticket .commune-footer-cell.commune-footer-cell {
        /* 20px sur les petits écrans, jusqu'à 32px vers 700px. */
        padding-left: clamp(1.25rem, 4vw, 2rem);
        padding-right: clamp(1.25rem, 4vw, 2rem);
    }
}