/*
 * 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;
    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;
    margin-top: 0;
    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. */
}