/*
 * La Commune - Page Bar convivial
 * =============================================================================
 * Regles reprises TELLES QUELLES de homepage_style.css, renommees
 * commune-home- -> commune-bar-. Ne rien retoucher ici : une correction doit
 * venir de la feuille d'origine, sinon les deux pages divergent en silence.
 * =============================================================================
 */

/*
 * La Commune — Homepage Refonte
 * Fichier CSS companion de homepage_new.php
 * Scope : .commune-bar-hero / .commune-bar-wave / .commune-bar-nav
 * ──────────────────────────────────────────────────────────────────
 * Usage : enqueued automatiquement par homepage_new.php
 * Copier tel quel dans uncode-child/ sur Saint-Étienne ET Lyon
 */


/* ════════════════════════════════════════════════════════════════════
   BLOC 1 — HERO [commune_home_hero]
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-hero {
    background: #FFFDE9;
    border: 1px solid #000;
    border-radius: 50px;
    overflow: visible;
    font-family: Poppins, sans-serif;
    position: relative;
    z-index: 1;
    padding-bottom: 60px;
    margin: 10px 25px;
}

.commune-bar-nav-section {
    z-index: 2;
}

.commune-bar-hero-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    min-height: 580px;       /* héro plus haut */
    overflow: hidden;
    border-radius: 50px;
}

/* ── Côté gauche (65%) ── */
.commune-bar-hero-left {
    width: 65%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 480px;
}

.commune-bar-hero-content {
    padding: 3rem 2.5rem 1.5rem 3rem;
    flex: 0 0 auto;
}

/* Titre principal — Le Murmure grande taille */
.commune-bar-hero-title {
    margin: 0 0 0.75rem !important;
    color: #000 !important;
    font-family: Basteleur, serif !important;
    font-size: 48px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 64px !important;
}

/* Logo La Commune inline dans le titre */
.commune-bar-hero-logo {
    width: auto !important;
    height: 40px !important;
    vertical-align: middle;
    margin-left: 6px;
    display: inline !important;
}

/* Sous-titre — Basteleur */
.commune-bar-hero-subtitle {
    margin: 0 0 1rem !important;
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 32px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: normal !important;
    max-width: none !important;
}

/* Corps de texte — Poppins */
.commune-bar-hero-body {
    color: #000;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    max-width: 480px;
}

.commune-bar-hero-body p {
    margin: 0 0 0.75em !important;
}

/* Zone cartes (bas du côté gauche) */
.commune-bar-hero-cards-zone {
    flex: 1 1 auto;
    min-height: 200px;
    padding: 1.5rem 2.5rem 2.5rem 3rem;  /* inchangé — éléments fixes */
    display: flex;
    align-items: flex-end;               /* cartes collées en bas = ne bougent pas si hero grandit */
    justify-content: flex-start;
    box-sizing: border-box;
}

.commune-bar-hero-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.commune-bar-hero-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 20px 10px;
    width: 180px;
    height: 180px;
    border-radius: 20px;
    border: 1px solid #000;
    text-decoration: none;
    flex: 0 0 auto;
    box-sizing: border-box;
    text-align: center;
    color: #000;
    transition: transform 0.2s ease;
}

.commune-bar-hero-card:hover {
    transform: scale(1.04);
    text-decoration: none;
    color: #000;
}

.commune-bar-hero-card-label {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    flex: 0 0 auto;
}

.commune-bar-hero-card-icon {
    width: auto;
    height: 60%;
    object-fit: contain;
    flex-shrink: 0;
    margin-top: auto;
}

.commune-bar-prv-cards-zone .commune-bar-hero-card:first-child .commune-bar-hero-card-icon {
    height: 75%;
}

.commune-bar-hero-skateboard {
    display: block;
    width: 100%;
    max-width: 480px;
    max-height: 180px;
    object-fit: contain;
}

/* ── Côté droit (35%) — photo ── */
.commune-bar-hero-right {
    width: 35%;
    position: relative;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commune-bar-hero-image-wrap {
    position: relative;
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    border: 1px solid #000;
    overflow: visible;      /* stickers débordent */
    aspect-ratio: 4 / 5;
}

.commune-bar-hero-image-inner {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
}

.commune-bar-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}

/* Sticker MACARON (::before) — URL injectée via <style> scopé dans le PHP */
.commune-bar-hero-image-wrap::before {
    content: "";
    position: absolute;
    top: 180px;
    left: -160px;
    width: 250px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
    pointer-events: none;
    transform: rotate(-45deg);
}

/* Sticker personnage / skate (::after) — URL injectée via <style> scopé dans le PHP */
.commune-bar-hero-image-wrap::after {
    content: "";
    position: absolute;
    bottom: -30px;
    right: 340px;
    width: 260px;
    height: 260px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
    pointer-events: none;
    transform: rotate(-10deg);
}

/* ════════════════════════════════════════════════════════════════════
   BLOC 2 — VAGUE + TICKER [commune_home_wave]
   Technique : <textPath> SVG — texte qui suit physiquement la courbe.
   Animation via <animateTransform> SMIL (unités SVG, pas CSS px).
   Pas de div ticker — tout est dans le SVG.
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-wave {
    /* ── Full viewport width (breakout WPBakery) ── */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    /* Les -125px etaient un heritage de homepage_new.php (la vague y suit
       directement le heros). Ici elle suit la carte edito : ce pull laissait
       un vide blanc entre la carte et la vague au lieu de les joindre.
       -12px avale juste la marge de 10px de .commune-bar-edito. */
    margin-top: -12px;
    /* ── Aucun espace sous la vague ── */
    margin-bottom: -2px;
    z-index: 5;
    /* ── Base ── */
    overflow: visible;   /* la dalle rose doit déborder vers le bas */
    line-height: 0;
    display: block;
}

/* viewBox 0 0 1512 146 → ratio natif 146/1512 = 9.656%
   La vague n'est pas déformée. */
.commune-bar-wave-svg {
    display: block;
    width: 100%;
    height: clamp(80px, 9.66vw, 146px);
}

/* Dalle pleine sous le SVG — même couleur rose, couvre tout gap WPBakery */
.commune-bar-wave-floor {
    display: block;
    width: 100%;
    height: 300px;        /* plus que n'importe quel gap WPBakery */
    margin-top: -1px;     /* joint pixel-perfect avec le bas du SVG */
}

/* Texte SVG — font-size en unités viewBox (pas en CSS px)
   26 unités SVG ≈ 43% du stroke (60 unités) → centré lisiblement dans le ruban */
.commune-bar-wave-text {
    font-family: Basteleur, 'Le Murmure_Regular', serif;
    font-size: 26px;           /* px ici = unités SVG viewBox, pas CSS pixels */
    font-weight: 400;
    fill: #000;
    dominant-baseline: middle; /* centre le texte verticalement sur le path */
}

/* ════════════════════════════════════════════════════════════════════
   BLOC 3 — GRILLE NAV [commune_home_nav]
   Fond : bg-blc-2.svg (pattern squiggles roses)
   Grille : 3 colonnes × 2 lignes avec tuiles colorées + icônes
   ════════════════════════════════════════════════════════════════════ */

/* Wrapper plein écran (même breakout que la vague) */
/* ── Section nav : fond rose + breakout full-width ──────────────────────
   Le fond rose du SVG de la vague (#F7D8D8) et ce fond doivent se toucher.
   On remonte la section avec un margin-top négatif pour avaler le gap WPBakery.
   Le padding-top compense pour que le contenu reste au bon endroit.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Rows WPBakery : padding forcé à 0 ───────────────────────────────────
   Toutes les variantes de noms de classes WPBakery/Uncode sont ciblées.
   La row du héro n'a pas de padding-bottom ; celle de la nav pas de padding-top.
   ──────────────────────────────────────────────────────────────────────── */

/* Row qui contient le héro / la vague */
.vc_row:has(.commune-bar-hero),
.wpb_row:has(.commune-bar-hero),
.row-container:has(.commune-bar-hero),
.row-parent:has(.commune-bar-hero) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Row qui contient la grille nav */
.vc_row:has(.commune-bar-nav-section),
.wpb_row:has(.commune-bar-nav-section),
.row-container:has(.commune-bar-nav-section),
.row-parent:has(.commune-bar-nav-section) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    background: white !important;
    background-color: white !important;
}

/* ── Section nav ──────────────────────────────────────────────────────── */
.commune-bar-nav-section {
    position: relative;
    isolation: isolate; /* stacking context → z-index:-1 du bgDiv reste confiné ici */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    margin-top: 0 !important;
    padding-top: 0;
    background: transparent;
    padding-right: 24px;
    padding-bottom: 100px;
    padding-left: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Vague intégrée dans la section nav */
.commune-bar-nav-section .commune-bar-wave {
    margin-top: 0;
    margin-bottom: 0;
    background-color: transparent !important;
}

.commune-bar-nav-section .commune-bar-wave-floor {
    display: none;
}

/* La carte blanche de la grille */
.commune-bar-nav {
    background: transparent;
    border: none;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    max-width: 720px;
    margin: 0 auto;
}

.commune-bar-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    grid-template-areas:
        "icon-tl manger  icon-tr"
        "boire   icon-br danser";
}

.commune-bar-nav-icon--tl { grid-area: icon-tl; }

.commune-bar-nav-tile--manger { grid-area: manger; }

.commune-bar-nav-icon--tr { grid-area: icon-tr; }

.commune-bar-nav-tile--boire { grid-area: boire; }

.commune-bar-nav-icon--br { grid-area: icon-br; }

.commune-bar-nav-tile--danser { grid-area: danser; }

/* Tuiles nav (avec titre + CTA) */
.commune-bar-nav-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.25rem;
    border-radius: 0;
    border: none;
    text-decoration: none;
    color: #000;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    transition: transform 0.2s ease;
    overflow: hidden;
}

.commune-bar-nav-tile:hover {
    text-decoration: none;
    color: #000;
}

.commune-bar-nav-tile-title {
    display: block;
    font-family: 'Le Murmure_Regular', 'Le Murmure', serif;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.5em;
}

/* CTA pill — width: fit-content pour ne PAS s'étirer */
.commune-bar-nav-tile-cta {
    display: inline-block;
    display: flex;
    height: 30px;
    padding: 10px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 30px;
    border: none;
    white-space: nowrap;
    box-sizing: border-box;
}

.commune-bar-nav-tile-cta-short {
    display: none;
}

.commune-bar-nav-tile-cta-long,
.commune-bar-nav-tile-cta-short {
    align-items: center;
    justify-content: center;
    width: 100%;
}

.commune-bar-nav-tile--manger .commune-bar-nav-tile-cta {
    background: #F18BAD;
}

.commune-bar-nav-tile--boire .commune-bar-nav-tile-cta {
    background: #2F81C4;
}

.commune-bar-nav-tile--danser .commune-bar-nav-tile-cta {
    background: #90B698;
    border-radius: 26px;
}

/* Tuiles icône */
.commune-bar-nav-icon {
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    box-sizing: border-box;
    padding: 16px;
}

.commune-bar-nav-icon img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.commune-bar-nav-icon:hover img {
    transform: none;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */

/* ── Tablette paysage (< 1200px) ── */
@media (max-width: 1200px) {
.commune-bar-hero-title {
        font-size: 52px !important;
    }
.commune-bar-hero-subtitle {
        font-size: 24px !important;
    }
.commune-bar-hero-right {
        padding: 1.5rem;
    }
.commune-bar-hero-image-wrap::after {
        right: 280px;
        width: 220px;
        height: 220px;
    }
}

/* ── Tablette portrait (< 1024px) : passage en colonne ── */
@media (max-width: 1024px) {
.commune-bar-hero-inner {
        flex-direction: column;
        min-height: 0;
    }
.commune-bar-hero-left {
        width: 100%;
        min-height: 0;
    }
.commune-bar-hero-content {
        padding: 2rem 2rem 1.25rem;
    }
.commune-bar-hero-title {
        font-size: 44px !important;
        max-width: none;
    }
.commune-bar-hero-logo {
        height: 44px !important;
    }
.commune-bar-hero-subtitle {
        font-size: 22px !important;
    }
.commune-bar-hero-cards-zone {
        padding: 1.5rem 2rem 2rem;
        min-height: 160px;
        justify-content: center;
    }
.commune-bar-hero-cards {
        justify-content: center;
    }
.commune-bar-hero-right {
        width: 100%;
        padding: 2rem;
        justify-content: center;
    }
.commune-bar-hero-image-wrap {
        margin: 0 auto;
        max-width: 100%;
    }
.commune-bar-hero-image-wrap::before {
        top: 60px; left: -70px; width: 160px; height: 160px;
    }
.commune-bar-hero-image-wrap::after {
        bottom: -20px; right: 50%;
        transform: translate(50%, 0) rotate(-10deg);
        width: 200px; height: 200px;
    }
/* Nav : 2 colonnes — gauche = ligne du haut desktop, droite = ligne du bas */
    .commune-bar-nav-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "icon-tl boire"
            "manger  icon-br"
            "icon-tr danser";
    }
}

/* ── Mobile large (< 768px) ── */
@media (max-width: 768px) {
.commune-bar-hero {
        border-radius: 28px;
    }
.commune-bar-hero-inner {
        border-radius: 28px;
    }
.commune-bar-hero-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
.commune-bar-hero-logo {
        height: 36px !important;
    }
.commune-bar-hero-subtitle {
        font-size: 20px !important;
    }
.commune-bar-hero-card {
        width: 150px;
        height: 150px;
    }
.commune-bar-hero-card-label {
        font-size: 14px;
    }
.commune-bar-hero-image-wrap::before {
        top: 40px; left: -50px; width: 130px; height: 130px;
    }
.commune-bar-hero-image-wrap::after {
        width: 170px; height: 170px;
    }
.commune-bar-wave-svg {
        max-height: 120px;
        width: 200%;
    }
/* Clip le débordement du SVG étiré (ne touche que la vague dans nav-section) */
    .commune-bar-nav-section .commune-bar-wave {
        overflow: hidden;
    }
.commune-bar-wave-track {
        font-size: clamp(14px, 3.5vw, 20px);
    }
/* Nav : gauche = 3 du haut desktop, droite = 3 du bas */
    .commune-bar-nav-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        gap: 0;
        background: transparent;
        grid-template-areas:
            "icon-tl boire"
            "manger  icon-br"
            "icon-tr danser";
    }
.commune-bar-nav-tile {
        min-height: 130px;
    }
.commune-bar-nav-icon {
        min-height: 90px;
    }
.commune-bar-nav-tile-cta-long {
        display: none;
    }
.commune-bar-nav-tile-cta-short {
        display: flex;
    }
}

/* ── Mobile serré (< 600px) ── */
@media (max-width: 600px) {
.commune-bar-hero {
        border-radius: 20px;
    }
.commune-bar-hero-inner {
        border-radius: 20px;
    }
.commune-bar-hero-title {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }
.commune-bar-hero-logo {
        height: 30px !important;
    }
.commune-bar-hero-subtitle {
        font-size: 18px !important;
    }
.commune-bar-hero-content {
        padding: 1.5rem 1.25rem 1rem;
    }
.commune-bar-hero-cards-zone {
        display: none;
    }
.commune-bar-hero-card {
        width: 140px;
        height: 140px;
        padding: 12px 8px;
    }
.commune-bar-hero-card-label {
        font-size: 13px;
        line-height: 1.2;
    }
.commune-bar-hero-card-icon {
        height: 55%;
    }
.commune-bar-hero-image-wrap::before {
        top: -40px; left: 120px; width: 140px; height: 140px;
    }
.commune-bar-hero-image-wrap::after {
        bottom: -15px; right: 50%;
        transform: translate(50%, 0) rotate(-10deg);
        width: 130px; height: 130px;
    }
.commune-bar-nav {
        padding: 10px;
        border-radius: 18px;
    }
.commune-bar-nav-grid {
        gap: 0;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "icon-tl boire"
            "manger  icon-br"
            "icon-tr danser";
    }
.commune-bar-nav-tile {
        min-height: 110px;
        padding: 1rem;
    }
.commune-bar-nav-tile-title {
        font-size: 28px !important;
    }
.commune-bar-nav-tile-cta {
        font-size: 10px;
        padding: 4px 10px;
    }
.commune-bar-nav-icon {
        min-height: 80px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   BLOC 4 — SAISISSEZ L'INSTANT [commune_home_saisir]
   Fond orange, sticker label, texte gauche, photo droite
   Identique au pattern utilisé sur les héros marketing du site
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-saisir {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    margin-top: 0;
    z-index: 3;                      /* au-dessus de nav-section (z-index:2) */
    border-top: 1px solid #000;
    font-family: Poppins, sans-serif;
    overflow: visible;
    box-sizing: border-box;
}

/* Sticker label : dépasse au-dessus dans la zone nav-section */
.commune-bar-saisir-label {
    position: relative;
    top: -30px;
    left: -1px;
    display: inline-block;
    color: #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-right-radius: 12px;
    background: inherit;
    margin-bottom: -30px;            /* annule le vide laissé dans le flux */
}

/* Layout flex : gauche (texte) + droite (photo) */
.commune-bar-saisir-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 3rem 5rem;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
}

).
   :has() cible le parent depuis l'enfant : on annule le padding à la source
   plutôt que de le compenser par marge négative, et la règle du thème reste
   intacte sur toutes les autres rows.
   Volontairement SANS classe conditionnelle : le bloc est en pleine largeur
   (100vw), donc ce padding ne produit jamais qu'une bande blanche parasite
   au-dessus et en dessous. Aucune raison de le vouloir, où que soit le bloc.
   Le padding horizontal, lui, est déjà contourné par le 100vw.
*/
.main-container .row-container .row-parent:has(.commune-bar-saisir) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/*
   Variante inversée : photo à gauche, texte à droite.
   row-reverse + flex-wrap:wrap conserve l'ordre vertical une fois empilé
   (le texte reste le premier enfant du DOM, donc au-dessus sur mobile).
*/
.commune-bar-saisir--reverse .commune-bar-saisir-inner {
    flex-direction: row-reverse;
}

.commune-bar-saisir-left {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/*
   Texte noir sur le bloc orange UNIQUEMENT.
   Le sélecteur s'accroche à la couleur de fond posée en style inline par le
   shortcode : il fonctionne donc sur le markup déjà en ligne, sans attendre
   que le PHP soit redéployé. Les autres blocs saisir (violet, etc.) gardent
   leur texte blanc.
   Route propre à terme : l'attribut text_color="#000" du shortcode, qui pilote
   la variable --saisir-text et évite d'écrire une couleur dans un sélecteur.
*/
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-title,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-body,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-body p,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-cta,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-cta:link,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-cta:visited,
.commune-bar-saisir[style*="#F3723C"] .commune-bar-saisir-cta:hover {
    color: #000 !important;
}

.commune-bar-saisir-title {
    margin: 0 !important;
    color: var(--saisir-text, #fff) !important;
    font-family: Basteleur, serif !important;
    font-size: 40px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.commune-bar-saisir-body {
    color: var(--saisir-text, #fff) !important;
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    max-width: 480px;
}

.commune-bar-saisir-body p {
    margin: 0 0 0.75em !important;
}

.commune-bar-saisir-cta,
.commune-bar-saisir-cta:link,
.commune-bar-saisir-cta:visited {
    display: inline-block;
    color: var(--saisir-text, #fff) !important;
    font-family: Poppins, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
    width: fit-content;
}

.commune-bar-saisir-cta.cursor-init {
    cursor: default;
}

.commune-bar-saisir-cta:hover,
.commune-bar-saisir-cta:focus {
    opacity: 0.75;
    color: var(--saisir-text, #fff) !important;
    text-decoration: none !important;
}

/*
   Mascotte sur le bloc VIOLET, en CSS seul.
   Posée en ::after de la colonne de gauche et accrochée à la couleur de fond
   inline : fonctionne sur le markup déjà en ligne, sans attendre que le PHP
   connaisse l'attribut mascot. Ratio 354/196 = celui du SVG, pour qu'il ne se
   déforme jamais.
   À supprimer une fois le PHP déployé : l'attribut mascot="…" fait la même
   chose proprement, sans coder une URL ni une couleur dans un sélecteur.
*/
.commune-bar-saisir[style*="#8F7BBB"] .commune-bar-saisir-left::after {
    content: "";
    display: block;
    width: clamp(140px, 40%, 240px);
    aspect-ratio: 354 / 196;
    margin: 0.75rem 0 0 34%;
    background: url('https://lacommune.co/saint-etienne/wp-content/uploads/2026/05/bladinghome.svg') no-repeat center / contain;
    pointer-events: none;
}

@media (max-width: 768px) {
.commune-bar-saisir[style*="#8F7BBB"] .commune-bar-saisir-left::after {
        margin-left: 16%;
        width: clamp(120px, 34%, 170px);
    }
}

/* Mascotte décorative sous le CTA, décalée vers la droite (cf. maquette).
   Ne s'affiche que si l'attribut mascot est renseigné : les blocs existants
   ne bougent pas. */
.commune-bar-saisir-mascot {
    display: block;
    width: clamp(120px, 40%, 210px);
    height: auto;
    margin: 0.5rem 0 0 38%;
    pointer-events: none;
}

@media (max-width: 768px) {
.commune-bar-saisir-mascot {
        margin-left: 20%;
        width: clamp(100px, 34%, 160px);
    }
}

/* Droite : photo */
.commune-bar-saisir-right {
    flex: 1 1 340px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.commune-bar-saisir-img-wrap {
    border-radius: 20px;
    border: 1px solid #000;
    overflow: hidden;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 4 / 3;
}

.commune-bar-saisir-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 768px) {
.commune-bar-saisir-inner {
        padding: 2rem 1.5rem 100px;
        flex-direction: column;
    }
.commune-bar-saisir-right {
        width: 100%;
    }
.commune-bar-saisir-img-wrap {
        max-width: 100%;
    }
}

@media (max-width: 600px) {
.commune-bar-saisir-inner {
        padding: 1.5rem 1.25rem 2rem;
    }
}

/* ════════════════════════════════════════════════════════════════════
   BLOC COMBINÉ [commune_home_hero_nav]
   ════════════════════════════════════════════════════════════════════ */

/* Neutralise les marges/padding WPBakery sur la row contenant le bloc combiné */
.vc_row:has(.commune-bar-block),
.wpb_row:has(.commune-bar-block),
.row-container:has(.commune-bar-block),
.row-parent:has(.commune-bar-block) {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
}

.vc_row:has(.commune-bar-block) .vc_column_container,
.vc_row:has(.commune-bar-block) .vc_col-sm-12,
.vc_row:has(.commune-bar-block) .wpb_column {
    padding: 0 !important;
    background: #fff !important;
}

.vc_row:has(.commune-bar-block) .vc_column-inner {
    padding: 0 !important;
}

.commune-bar-block {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    z-index: 0;
}

.commune-bar-prv-title .commune-bar-hero-logo {
    height: 42px !important;
}

@media (max-width: 768px) {
.commune-bar-prv-title .commune-bar-hero-logo {
        height: 24px !important;
    }
.commune-bar-prv-cards-zone .commune-bar-hero-cards {
        gap: 4rem;
        margin-bottom: 30px;
    }
}

@media (max-width: 600px) {
.commune-bar-prv-title .commune-bar-hero-logo {
        height: 20px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   CARTE EDITO — reprise telle quelle d'incubateur_style.css,
   renommee commune-incubateur-edito -> commune-bar-edito.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   BLOC EDITO [commune_incubateur_edito]
   Deux cartes éditoriales — même style que .commune-incubateur-hero
   ════════════════════════════════════════════════════════════════════ */

/*
   Largeur alignée sur .commune-incubateur-parcours-inner.
   Celui-ci vaut min(1300px, 100vw - 8rem) centré sur le VIEWPORT ; l'edito,
   lui, était prisonnier du .limit-width du thème (1200px). On le sort en
   pleine largeur, puis un padding latéral calculé reproduit exactement la même
   zone de contenu — sans wrapper supplémentaire dans le markup.
     · écran large  → (100vw - 1300px) / 2  ⇒ contenu = 1300px
     · écran étroit → 4rem                  ⇒ même gouttière que le parcours
*/
.commune-bar-edito {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100vw;
    max-width: 100vw;
    margin: 10px calc(50% - 50vw);
    padding-left: max(4rem, calc((100vw - 1300px) / 2));
    padding-right: max(4rem, calc((100vw - 1300px) / 2));
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
}

/* ── Style commun à chaque carte ── */
.commune-bar-edito-card {
    background: #FFFDE9;
    border: 1px solid #000;
    border-radius: 50px;
    padding: 2.5rem 3rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Card 1 : image gauche + contenu droite ── */
.commune-bar-edito-card--1 {
    display: flex;
    align-items: stretch;
    gap: 2.5rem;
}

.commune-bar-edito-img-wrap--left {
    flex: 0 0 260px;
    width: 260px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #000;
}

.commune-bar-edito-content {
    flex: 1 1 0;
    border: 1px solid #000;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* ── Card 2 content : pleine largeur ── */
.commune-bar-edito-card--2 .commune-bar-edito-content {
    width: 100%;
}

/* ── Titre ── */
.commune-bar-edito-title {
    font-family: Basteleur, 'Le Murmure_Regular', serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #000 !important;
    text-transform: uppercase;
    margin: 0 0 1.5rem !important;
    /* Ligne pleine largeur : compense le padding du content (1.5rem 2rem) */
    margin-left: -2rem !important;
    margin-right: -2rem !important;
    padding: 0 2rem 1rem !important;
    border-bottom: 1px solid #000;
}

.commune-bar-edito-title--large {
    font-size: 32px !important;
    margin-bottom: 2rem !important;
}

/* ── 2 colonnes de texte ── */
.commune-bar-edito-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

/* Typo verrouillée sur la colonne ET ses <p> : sans !important, la taille et
   l'interlignage d'Uncode reprennent la main (même cause que les <li> du
   parcours — une règle directe du thème bat la valeur héritée). */
.commune-bar-edito-col,
.commune-bar-edito-col p {
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
}

.commune-bar-edito-col p {
    margin: 0 0 0.75em !important;
}

/* ── Card 2 : content gauche + image droite (même structure que card 1 inversée) ── */
.commune-bar-edito-card--2 {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2.5rem;
}

.commune-bar-edito-img-wrap--right {
    flex: 0 0 200px;
    width: 200px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #000;
}

.commune-bar-edito-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
}

/*
   ── Responsive : carte « image à droite » ──
   L'image est figée à 200px. En dessous de ~1100px il ne reste plus assez de
   largeur pour les deux colonnes de texte à côté : mesuré à 938px, elles
   tombaient à 187px chacune, soit une vingtaine de caractères par ligne, et la
   photo s'étirait en bandeau de 198×860.
   On empile donc : image en pleine largeur, texte en dessous. Les deux colonnes
   sont conservées (~380px chacune à 938px, largement lisibles) — elles ne
   fusionnent qu'en dessous de 768px, plus bas.

   Ce bloc doit rester AVANT celui de 768px, qui affine ces mêmes propriétés.
*/
@media (max-width: 1100px) {
.commune-bar-edito-card--2 {
        flex-direction: column;
    }
.commune-bar-edito-img-wrap--right {
        flex: none;
        width: 100%;
        height: clamp(200px, 26vw, 280px);
        align-self: auto;
    }
/*
       Le cadre passe de portrait à bandeau : un `cover` centré ne garde que la
       bande médiane de la photo, c'est-à-dire le menton. On remonte le point
       d'ancrage pour conserver le visage.
    */
    .commune-bar-edito-card--2 .commune-bar-edito-img {
        object-position: center 22%;
    }
}

/* ── Responsive : tablette / mobile ── */
@media (max-width: 768px) {
/*
       `margin: 10px` écrasait le breakout `calc(50% - 50vw)` alors que la
       largeur reste 100vw : le bloc débordait de 10px à droite (778 pour un
       écran de 768). Et le padding restait à 4rem pendant que
       .commune-incubateur-parcours descendait à 15px, d'où des cartes plus
       étroites que les étapes en dessous (640 contre 738 mesurés).
       On garde donc le breakout et on aligne le retrait sur celui du parcours.
    */
    .commune-bar-edito {
        margin: 10px calc(50% - 50vw);
        padding-left: 15px;
        padding-right: 15px;
    }
.commune-bar-edito-card {
        border-radius: 28px;
        padding: 1.5rem;
    }
.commune-bar-edito-card--1 {
        flex-direction: column;
    }
.commune-bar-edito-content {
        border-radius: 16px;
        padding: 1.25rem;
    }
.commune-bar-edito-title {
        margin-left: -1.25rem !important;
        margin-right: -1.25rem !important;
        padding: 0 1.25rem 1rem !important;
    }
.commune-bar-edito-img-wrap--left {
        flex: none;
        width: 100%;
        height: 200px;
    }
.commune-bar-edito-cols {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
.commune-bar-edito-card--2 {
        flex-direction: column;
    }
.commune-bar-edito-img-wrap--right {
        flex: none;
        width: 100%;
        height: 180px;
        align-self: auto;
    }
.commune-bar-edito-title {
        font-size: 22px !important;
    }
.commune-bar-edito-title--large {
        font-size: 24px !important;
    }
}

@media (max-width: 600px) {
.commune-bar-edito-card {
        border-radius: 20px;
        padding: 1.25rem;
    }
.commune-bar-edito-title {
        font-size: 20px !important;
    }
.commune-bar-edito-title--large {
        font-size: 22px !important;
    }
}

/* Titre de section quand il est remonté au-dessus de la carte edito
   (cas de [commune_incubateur_foodhall]) : même retrait que .commune-bar-edito */
/* Étiquette d'onglet de la section — même gabarit que
   .commune-incubateur-rejoindre-label, aligné sur la zone de contenu commune. */
/*
   Pour que l'onglet chevauche vraiment le bloc du dessus, il faut supprimer les
   DEUX paddings qui les séparent :
     · celui du haut de notre propre row
     · celui du bas de la row PRÉCÉDENTE — atteint via :has(+ …), qui sélectionne
       un élément d'après son voisin suivant. Sans ça, 36px de blanc subsistent
       et l'onglet flotte sous la section précédente au lieu de mordre dedans.
*/
.main-container .row-container .row-parent:has(.commune-incubateur-foodhall-label) {
    padding-top: 0 !important;
}


/* ════════════════════════════════════════════════════════════════════
   Surcharges propres a la page bar
   Les regles copiees plus haut restent intactes : toute divergence
   voulue avec l'incubateur se declare ici, et nulle part ailleurs.
   ════════════════════════════════════════════════════════════════════ */

/* Photo a gauche, texte a droite.
   On inverse l'ordre visuel plutot que le DOM : les regles responsive
   copiees ciblent --img-wrap--right, elles continuent donc de s'appliquer.
   En colonne (mobile) ce meme order place la photo au-dessus du texte. */
.commune-bar-edito-card--2 .commune-bar-edito-img-wrap {
    order: -1;
}

/* Fond rose de la carte. */
.commune-bar-edito-card {
    background: #F7C6DA;
}

/* Le conteneur colle aux bords : plus de retrait lateral.
   Il gardait le retrait de l'incubateur — max(4rem, (100vw - 1300px)/2). */
.commune-bar-edito {
    padding-left: 0;
    padding-right: 0;
}

/* La carte perd son cadre complet et ses coins : il ne reste qu'un filet
   en haut, qui separe la carte du heros. */
.commune-bar-edito-card {
    border: none;
    border-top: 1px solid #000;
    border-radius: 0;
}

/* Etiquette-onglet posee sur le filet du haut de la carte.
   Gabarit repris de .commune-incubateur-rejoindre-label ; le fond reprend le
   rose de la carte pour que le trait se raccorde sans rupture.
   Elle est placee AVANT la carte et non dedans : la carte a overflow:hidden,
   qui rognerait un element remonte en negatif. */
.commune-bar-edito-label {
    position: relative;
    top: -31px;
    left: -1px;
    align-self: flex-start;          /* sinon le span s'etire, parent en flex colonne */
    display: inline-block;
    color: #000;
    background: #F7C6DA;
    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-right-radius: 12px;
    margin-bottom: -31px;
}

/* Etiquette remontee de 10px seulement.
   `top` ne fait que decaler visuellement ; c'est `margin-bottom` qui retire de
   la hauteur reelle. Les deux doivent rester egaux, sinon la carte remonte de
   31px pendant que l'etiquette ne bouge que de 10 et vient la recouvrir. */
.commune-bar-edito-label {
    top: -10px;
    margin-bottom: -10px;
}

/* Respiration du conteneur edito. */
.commune-bar-edito {
    padding-top: 2rem;
}

/* Plus de hauteur imposee : la dalle ne sert plus a combler un gap. */
.commune-bar-wave-floor {
    height: auto;
}

/* ════════════════════════════════════════════════════════════════════
   INTERIEUR DU BLOC SAISIR — carte terrasse, nuages, blocs illustres
   Refait pour coller a la maquette Figma. Ne concerne que ce qui vit
   dans .commune-bar-saisir-inner ; le bloc lui-meme n'est pas touche.
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-saisir-inner {
    position: relative;
    display: block;              /* etait une grille 2 colonnes */
    max-width: 1300px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem) clamp(3rem, 6vw, 6rem);
    box-sizing: border-box;
}

/* ── Nuages ── */
.commune-bar-nuages {
    position: absolute;
    inset: 0;
    z-index: 0;                  /* derriere les cartes */
    pointer-events: none;
    overflow: hidden;
}

.commune-bar-nuage {
    position: absolute;
    height: auto;
}

/* Positions en %, donc solidaires de la largeur du bloc. */
.commune-bar-nuage--1 { width:  9%; left:  2%; top: 14%; }
.commune-bar-nuage--2 { width:  7%; left: 86%; top: 20%; }
.commune-bar-nuage--3 { width: 11%; left: 60%; top: 30%; }
.commune-bar-nuage--4 { width:  8%; left:  6%; top: 40%; }
.commune-bar-nuage--5 { width: 10%; left: 82%; top: 52%; }
.commune-bar-nuage--6 { width:  9%; left:  3%; top: 62%; }
.commune-bar-nuage--7 { width:  7%; left: 74%; top: 72%; }
.commune-bar-nuage--8 { width: 11%; left: 12%; top: 82%; }
.commune-bar-nuage--9 { width:  8%; left: 88%; top: 90%; }

/* ── Carte terrasse ── */
.commune-bar-terrasse {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: clamp(1rem, 2vw, 2rem);
    align-items: stretch;
    background: #fff;
    border: 1px solid #000;
    border-radius: 22px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
    margin-bottom: clamp(2rem, 5vw, 5rem);
}

.commune-bar-terrasse-title {
    margin: 0 0 1rem !important;
    color: #000 !important;
    font-family: Basteleur, serif !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    text-transform: uppercase;
}

.commune-bar-terrasse-texte p {
    margin: 0 0 0.8em !important;
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.commune-bar-terrasse-texte p:last-child { margin-bottom: 0 !important; }

.commune-bar-terrasse-photo {
    /* people-drinking-scaled.jpg fait 1366x2048 (portrait) : sans ratio force,
       le navigateur etire toute la carte a la hauteur de la photo. */
    aspect-ratio: 3 / 2;
    align-self: start;
    border-radius: 14px;
    overflow: hidden;
}

.commune-bar-terrasse-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Les quatre blocs illustres ── */
.commune-bar-univers {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 5rem);
}

.commune-bar-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center;
}

/* Illustration a droite : on inverse l'ordre visuel, pas le DOM, pour que
   l'ordre de lecture reste illustration -> texte une fois empile. */
.commune-bar-bloc--droite .commune-bar-bloc-media { order: 2; }
.commune-bar-bloc--droite .commune-bar-bloc-carte { order: 1; }

.commune-bar-bloc-media img {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
}

.commune-bar-bloc-carte {
    /* Meme bug que la carte terrasse : sans fond opaque, ce qui est derriere
       (nuages, olives...) se voit a travers plutot que d'etre masque. */
    background: #fff;
    border: 1px solid #000;
    border-radius: 18px;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.commune-bar-bloc-title {
    margin: 0 0 0.75rem !important;
    color: #000 !important;
    font-family: Basteleur, serif !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.commune-bar-bloc-chapo {
    margin: 0 0 0.8em !important;
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    line-height: 1.5 !important;
}

.commune-bar-bloc-body,
.commune-bar-bloc-body p {
    color: #000 !important;
    font-family: Poppins, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .commune-bar-terrasse {
        grid-template-columns: minmax(0, 1fr);
    }
    .commune-bar-terrasse-photo {
        height: clamp(180px, 30vw, 240px);
    }

    .commune-bar-bloc,
    .commune-bar-bloc--droite {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }
    .commune-bar-bloc--droite .commune-bar-bloc-media,
    .commune-bar-bloc--droite .commune-bar-bloc-carte {
        order: 0;
    }
    .commune-bar-bloc-media img { max-width: 220px; }

    /* Les nuages deviennent du bruit sur petit ecran. */
    /* Les nuages ne vivent plus tous dans .commune-bar-nuages : masquer le
       conteneur ne suffit plus, il faut viser les images elles-memes. */
    .commune-bar-nuages,
    .commune-bar-nuage { display: none; }

    /* Le bloc « bieres » repasse en colonne unique comme les trois autres.
       Sans ce retour en arriere, grid-template-areas nomme deux colonnes que
       grid-template-columns n'a plus : le navigateur en cree une implicite et
       le bloc reste sur deux colonnes, la ou tous les autres se sont empiles. */
    /* Les decors sont masques a cette largeur : l'air qu'ils reclamaient
       n'aurait plus servi qu'a trouer la page. */
    .commune-bar-bloc--cafe,
    .commune-bar-bloc--pleine-largeur { margin-top: 0; }
    .commune-bar-bloc--cafe .commune-bar-bloc-media {
        margin-top: 0;
        margin-bottom: 0;
    }

    .commune-bar-bloc--pleine-largeur { grid-template-areas: none; }
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-carte,
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media { grid-area: auto; }
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media {
        width: auto;
        margin-top: 0;
    }
}

/* ── Nuages : un seul fichier PNG, ratio 2,7:1 ──
   La hauteur decoule de la largeur, inutile de la fixer. */
.commune-bar-nuage {
    opacity: .9;
}

/* ── Personnages ──
   Positionnes en % du bloc saisir, donc solidaires de sa largeur. */
.commune-bar-perso {
    position: absolute;
    /* Le commentaire disait "derriere les cartes" mais 2 > 1 (z-index des
       cartes) les faisait passer devant : c'est ce qui les faisait paraitre
       dessinés par-dessus le texte une fois les cartes rendues opaques. */
    z-index: 0;                   /* devant les nuages (memes z-index, mais apres eux dans le DOM), derriere les cartes */
    height: auto;
    pointer-events: none;
}

/* Tasse : a gauche du bloc cafe. */
.commune-bar-perso--tasse {
    width: 11%;
    min-width: 90px;
    left: 30%;
    top: 62%;
}

@media (max-width: 900px) {
    .commune-bar-perso { display: none; }
}

/* ── Recalage sur la maquette ──
   Les illustrations sont tres elancees (le verre fait 235x499). Borner la
   largeur ne suffit pas : c'est la HAUTEUR qui fait exploser la mise en page.
   On borne donc les deux, et c'est la hauteur qui commande. */
.commune-bar-bloc-media img {
    max-width: 100%;
    max-height: clamp(180px, 22vw, 300px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Rythme vertical resserre. */
.commune-bar-univers {
    gap: clamp(1.5rem, 3vw, 3.5rem);
}

.commune-bar-bloc {
    gap: clamp(1rem, 2.5vw, 2.5rem);
    align-items: center;
}

/* Cartes plus compactes : la maquette a du texte petit et dense. */
.commune-bar-bloc-carte {
    padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2vw, 1.75rem);
}

.commune-bar-bloc-title {
    margin-bottom: 0.5rem !important;
    font-size: clamp(17px, 1.5vw, 22px) !important;
}

.commune-bar-bloc-chapo {
    font-size: 11px !important;
    margin-bottom: 0.6em !important;
}

.commune-bar-bloc-body,
.commune-bar-bloc-body p {
    font-size: 12px !important;
    line-height: 1.55 !important;
}

/* Carte terrasse : meme densite. */
.commune-bar-terrasse {
    margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.commune-bar-terrasse-texte p {
    font-size: 12px !important;
}

/* Le personnage bouteille etait trop gros et trop bas. */
.commune-bar-perso--bouteille {
    width: auto;
    max-height: 190px;
    min-width: 0;
    left: 46%;
    top: 16%;
}

.commune-bar-perso--tasse {
    width: auto;
    max-height: 120px;
    min-width: 0;
    left: 34%;
    top: 60%;
}

/* Brochette d'olives : sous la carte cocktails, comme sur la maquette.
   SVG inline, donc dimensionne par le CSS et non par ses attributs. */
.commune-bar-perso--olives {
    max-height: 210px;
    width: auto;
    left: 26%;
    top: 44%;
}

/* ════════════════════════════════════════════════════════════════════
   AJOUT SPECIFIQUE — NE PAS MIRRORER vers homepage_style.css
   Coeur smiley en haut a droite du titre du heros.

   Pose en ::after inline-block plutot qu'en position absolue : il suit
   ainsi la fin du texte du titre quelle que soit sa longueur, au lieu
   d'aller se coller dans le coin d'une boite qui fait toute la largeur
   de la colonne (65 % du heros) et de flotter loin du texte.

   Toutes les mesures sont en em : elles se calent sur le font-size du
   titre, donc le coeur suit tout seul les quatre paliers responsive
   deja definis pour .commune-bar-hero-title (48 / 44 / 36 / 30 px).
   Aucune regle a ajouter dans les media queries.

   URL relative au fichier CSS : .../modules/ -> ../../../uploads/.
   Elle reste donc valable si cette feuille est copiee sur Lyon, ce
   qu'un chemin absolu /saint-etienne/... ne permettrait pas.
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-hero-title::after,
.commune-home-hero-title::after,
.commune-incubateur-hero-title::after {
    content: "";
    display: inline-block;
    /* Le PNG porte ~28 % de transparence autour du coeur (contenu utile :
       50x51 px dans un canevas de 71x71). Une boite de 1.8em ne donne donc
       qu'un coeur visible d'environ 1.3em, ce que mesure la maquette. */
    width: 1.8em;
    height: 1.8em;
    margin-left: -0.2em;       /* rattrape l'espace-mot avant le pseudo-element */
    /* Largeur d'avancee nulle : la marge droite negative annule exactement
       la largeur de la boite. Sans elle, la ligne « Bienvenue a » + le logo
       (environ 300px de large a 40px de haut, ratio 196x26) + les 1.8em du
       coeur depasse la colonne, et le navigateur renvoie le coeur a la
       ligne suivante. Le coeur deborde donc a droite du dernier mot sans
       jamais peser sur le retour a la ligne. */
    margin-right: -1.8em;
    /* Cale le bas de la boite 0.1em au-dessus de la ligne de base : avec la
       marge basse du PNG, le coeur visible se pose alors 0.4em plus haut,
       soit a mi-hauteur des minuscules, comme sur la maquette. */
    vertical-align: 0.1em;
    background-image: url('../../../uploads/2026/08/Group-38.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* ── Placement des decors, releve sur la maquette ─────────────────────
   Positions obtenues par detection de couleur sur la maquette, exprimees
   en % de la largeur / hauteur de .commune-bar-saisir-inner — le meme
   repere que les regles d'origine. */

/* Bouteille verte inclinee (Calque_1-3.png, 246x413).
   A ne pas confondre avec .commune-bar-perso--bouteille, le personnage-
   bouteille blanc a yeux et jambes (bouteille.png, 556x2025) : deux
   illustrations distinctes, toutes deux presentes sur la maquette.
   Derriere les cartes comme les autres decors — pas de z-index propre. */
.commune-bar-perso--flacon {
    /* Ancree sur la carte terrasse (elle en est enfant, la carte etant en
       position: relative) : top: 100% designe son bord bas, et les marges en
       % se calculent sur sa LARGEUR. Les trois valeurs sont donc lues telles
       quelles sur la maquette et ne bougent plus avec la hauteur du bloc.
       Releve : x 61,3 %, bouteille visible large de 12 %, haute de 20 %.
       14,5 % de boite pour 12 % visible : le PNG porte 16 % de transparence
       a gauche (trace utile x 39->242 sur 246). */
    width: 14.5%;
    min-width: 90px;
    /* 61,3 % la posait 2,8 % de la largeur de contenu trop a droite : centre
       du vert releve a 66,3 % sur la maquette, 69,1 % au rendu. */
    left: 58.5%;
    /* `top: 77%` se calculait sur la HAUTEUR de la carte, qui a change trois
       fois aujourd'hui — d'ou la derive. On revient a l'ancrage sur son bord
       bas : le releve donne le haut de la bouteille 4,8 % de la largeur de
       carte au-dessus de ce bord, plus 0,9 % de transparence en haut du PNG. */
    top: 100%;
    margin-top: -5.7%;
    /* 0, et non 2 : un enfant positionne se peint de toute facon au-dessus du
       fond de son parent, la bouteille passe donc devant la carte terrasse
       sans avoir besoin de valeur positive. Et comme la carte ne cree plus de
       contexte d'empilement (z-index: auto), ce 0 la place bien DERRIERE la
       carte « Bar a vins », qui est en z-index: 1 dans .commune-bar-univers. */
    z-index: 0;
}

/* Tasse bleue (Calque_1-4.png, 372x326), a droite du bloc « bieres ».
   Absente du module d'origine. Position relevee par detection de sa teinte
   #AED4DE dans la maquette — 1608 pixels dans cette zone, 14 ailleurs :
   le releve ne souffre d'aucune ambiguite. */
.commune-bar-perso--mug {
    /* Ancree sur la carte « bieres », bord HAUT. Releve maquette, ramene en
       % de largeur de carte : la tasse commence 14,9 % au-dessus de ce bord
       et deborde a droite de la carte. */
    width: 52.6%;
    min-width: 0;
    left: 130.9%;
    top: 0;
    margin-top: -14.9%;
    /* Derriere l'illustration des chopes : elle est rendue dans la carte,
       donc apres le media dans le DOM. Sans z-index negatif elle passerait
       devant, alors qu'elle etait jusqu'ici un decor de fond. */
    z-index: -1;
}

/* Personnage-gobelet a paille (Group-90.png, 173x264), a gauche des chopes.
   Absent du module d'origine. Trait noir sur fond rose, donc mesure par
   blob et non par couleur : le rapport obtenu, 0.60, correspond bien au
   0.655 du fichier — la mesure tient. */
.commune-bar-perso--gobelet {
    /* Ancre sur la carte « bieres », bord BAS. */
    width: 26.3%;
    min-width: 0;
    left: 13.2%;
    top: 100%;
    margin-top: 13.7%;
    z-index: -1;
}

/* Personnage-bouteille blanc : etait a left 44% / top 12%. */
/* Personnage-bouteille blanc : ancre lui aussi sur la carte terrasse.
   Releve : x 36,8 %, 32,4 % sous la carte, large de 7,7 %. */
.commune-bar-perso--bouteille {
    /* Ancre sur la carte « Bar a vins », bord HAUT — et non plus sur le bas
       de la carte terrasse. Le nuage sur lequel il se tient (nuage 3) est
       ancre sur la MEME carte et le MEME bord : c'est la seule facon que la
       paire ne se disjoigne pas quand la hauteur d'une carte change. C'est
       exactement ce qui s'etait produit : le nuage se retrouvait au-dessus
       de sa tete au lieu d'etre sous ses pieds.
       Le max-height sautait aussi son rapport d'image (82x297) : supprime,
       la hauteur decoule de la largeur. */
    width: 10.8%;
    min-width: 0;
    max-height: none !important;
    left: -30.5%;
    top: 0;
    /* 30,3 %, et non les 22,9 % lus au depart sur la maquette.

       Le premier releve a ete fait sur la vignette Figma de 189px de large :
       a cette taille le nuage ne fait que 11px de haut, et les pieds y
       semblaient poses a 18 % de sa hauteur. Sur l'agrandissement du meme
       endroit, ou le nuage fait 44px, la mesure donne 55 % — le personnage
       s'enfonce en fait jusqu'au milieu du nuage. C'est cette valeur-la qui
       fait foi.

       Tout etant en % de la largeur de la carte « Bar a vins », le calcul se
       pose directement :
         hauteur du personnage = 10,8 / 0,276 (rapport de Group-89) = 39,1
         hauteur du nuage      = 40   / 2,718 (rapport du PNG nuage) = 14,7
         haut du nuage                                              = 61,3
         cible des pieds       = 61,3 + 14,7 x 0,55                 = 69,4
         margin-top            = 69,4 - 39,1                        = 30,3

       Si l'un des trois — largeur du personnage, largeur du nuage, position
       du nuage — bouge, refaire ce calcul, sinon les pieds decrochent. */
    margin-top: 30.3%;
    z-index: 0;
}

/* Personnage-tasse : ancre sur la carte « Mokxa », bord BAS — et non plus
   sur la carte cocktails, dont il etait separe par deux inter-blocs. Ce
   bras de levier de 137,7 % accumulait tout l'ecart de rythme vertical
   entre la maquette et le rendu, et le decalait vers le bas.

   Le nuage 8, sur lequel il se tient, partage la meme carte et le meme bord.

   Releve maquette ramene en % de largeur de carte : left -30,3 %,
   12,6 % sous la carte, large de 26,3 % (il faisait 40 %, soit une fois
   et demie sa taille de maquette). */
.commune-bar-perso--tasse {
    width: 26.3%;
    min-width: 0;
    max-height: none;
    left: -30.3%;
    top: 100%;
    margin-top: 12.6%;
}

/* Brochette d'olives : ancree sur la carte du bloc cocktails, dont elle est
   desormais enfant. top: 100% designe le bas de cette carte, et les marges
   en % se calculent sur sa largeur.

   Releve, origine au coin bas-gauche de la carte cocktails :
     left 64,3 %   1,6 % SOUS la carte   large de 28,6 %
   Le rendu la placait 38 % AU-DESSUS de ce bord, d'ou son chevauchement du
   texte. Elle etait aussi bridee par un max-height de 210px qui la reduisait
   a 22,8 % de large au lieu de 28,6 %. */
.commune-bar-bloc-carte {
    position: relative;
}

/* Olives : la largeur se deduit de la hauteur, pas l'inverse.
   Le SVG a un viewBox de 188x460, soit un rapport de 0,409 — tres elance a
   cause de la pique. Sur la maquette la brochette occupe 90,8 % de la
   largeur de carte en hauteur ; a ce rapport, cela fait 37 % en largeur.
   Mes 43,8 % du tour precedent la rendaient donc un tiers trop haute, d'ou
   la brochette demesuree.
   Le haut, lui, etait juste : 0,8 % sous la carte. */
.commune-bar-perso--olives {
    width: 25.7%;
    max-height: none;
    height: auto;
    left: 57.2%;
    top: 100%;
    margin-top: -2.9%;
}

/* Les neuf nuages. Ancien motif : alternance mecanique gauche/droite tous
   les 10%. Releve reel ci-dessous — l'espacement est irregulier et trois
   d'entre eux sont au centre, sous un personnage. */
/* Le conteneur des nuages passe en z-index: auto et en overflow visible.
   En z-index: 0 il creait un contexte d'empilement : tous les nuages
   restaient derriere les cartes, quelle que soit leur propre valeur. En
   `auto`, chacun peut se placer librement — les nuages gardent 0, celui qui
   doit passer devant la deuxieme carte prend 2. */
.commune-bar-nuages {
    z-index: auto;
    overflow: visible;
}

.commune-bar-nuage { z-index: 0; }

/* Les nuages 1 et 2 sont enfants de la carte terrasse, pas du conteneur :
   leur position se lit sur la maquette par rapport au bas de la carte.
   top: 100% designe ce bord, et les marges en % se calculent sur la largeur
   de la carte — les trois valeurs viennent donc du releve, sans conversion.

   Nuage 1 : left -4,6 %, 12,0 % sous la carte, large de 10,8 %. Le left
   negatif le fait deborder jusqu'au bord de la fenetre, comme la maquette ;
   c'est ce debord que l'overflow: hidden d'origine rognait. */
.commune-bar-nuage--1 {
    width: 25.4%;
    left: -18.2%;
    top: 100%;
    margin-top: 12.2%;
}

/* La carte terrasse ne doit PAS creer de contexte d'empilement.

   Son z-index: 1 d'origine en creait un : ses quatre decors — bouteille verte,
   personnage-bouteille, nuages 1 et 2 — s'empilaient a l'interieur et ne
   comptaient plus que pour un seul calque, a la valeur 1. Comme
   .commune-bar-univers porte le meme 1 et arrive apres dans le DOM, le bloc
   des quatre cartes recouvrait le tout : aucune valeur donnee a un decor ne
   pouvait l'en sortir.

   Lui donner 3 reglait le nuage mais faisait remonter la bouteille avec lui.
   En `auto`, la carte ne cree plus de contexte : chaque decor negocie
   directement avec le z-index: 1 du bloc, et on peut donc les separer —
   la bouteille en 0 passe derriere la carte « Bar a vins », le nuage 2 en 2
   passe devant.

   La carte reste bien au-dessus des nuages de fond : en z-index auto elle est
   peinte dans l'ordre du DOM, et .commune-bar-nuages la precede. */
.commune-bar-terrasse {
    z-index: auto;
}

/* Nuage 2 : chevauche la carte « Bar a vins » sur sa droite, par devant. */
/* Le bloc des quatre cartes monte a 4, bien au-dessus du 0 des decors.

   Raison : jouer sur le z-index de la bouteille supposait de connaitre le
   contexte d'empilement exact dans lequel elle se trouve — or il depend de
   l'endroit ou le PHP la rend. En remontant le BLOC plutot qu'en descendant
   le decor, le resultat ne depend plus de rien : ou qu'elle soit dans le
   DOM, une image a z-index 0 passe derriere un bloc a 4. */
.commune-bar-univers {
    z-index: 4;
}

/* Nuage 2 : 5, donc au-dessus du bloc passe a 4. */
.commune-bar-nuage--2 {
    /* Elargi : il portait Group-39.png (rapport 1,2), il porte desormais le
       nuage commun cloud-scaled-1.png (rapport 2,7). A largeur egale il
       serait deux fois moins haut que sur la maquette. */
    /* 12 % et non 21 % : la seule variable qui restait.

       Le nuage doit etre DEVANT la carte, a hauteur de la coupure
       titre/texte, et ne jamais toucher une ligne. A droite de son bord
       gauche (91,2 % du contenu), le texte de la carte laisse libre une
       seule fenetre verticale — entre le bas du titre et la premiere ligne
       du corps, soit 30px de haut sur le rendu. A 21 % le nuage en fait 45 :
       il ne pouvait tenir dans aucun blanc, quelle que soit sa position.
       A 12 % il fait 27px de haut et rentre, avec 2px de marge de part et
       d'autre. Sa position horizontale n'a pas bouge. */
    width: 12%;
    /* 95 % et non 91,2 % : a 12 % de large il ne debordait plus que de 19px
       a droite de la carte, il paraissait colle dessus. 95 % lui rend la
       proportion de la maquette — 42 % du nuage sur la carte, 58 % dehors.
       Le decalage vers la droite ne fait que l'eloigner du texte : la ligne
       la plus longue sous lui s'arrete a 81,8 % du contenu. */
    left: 95%;
    /* Position verticale calee sur la carte « Bar a vins », pas sur la
       maquette : le nuage doit croiser son bord droit a hauteur de la
       coupure entre le titre et le texte.

       Releve sur le rendu (carte y 242-339, contenu large de 597) : le titre
       finit a 274, le chapo commence a 282 — la coupure est donc a 278. Le
       nuage fait 21 % de 597 = 125 de large, soit 46 de haut au rapport
       2,718 : son milieu tombe sur 278 pour un haut a 255, c'est-a-dire
       99 sous le bas de la carte terrasse.

       Valeur retenue apres reduction a 12 % : la fenetre libre va de y 119 a
       148, le nuage fait 27 de haut, on le pose a 120,5 — soit 108,5 sous le
       bas de la carte terrasse, 18 % de la largeur de contenu. Son milieu
       tombe sur 134, la coupure titre/chapo est a 133. */
    top: 100%;
    margin-top: 18%;
    /* DERRIERE la carte, et non plus devant (il etait a 5).

       A cette hauteur il chevauche la zone de texte de la carte « Bar a
       vins » sur ses 40 derniers pixels, et le tiers gauche du PNG est
       opaque a 90 % dans sa moitie basse : devant, il mangeait la fin des
       lignes. Aucune valeur de `top` ne reglait ca — le nuage fait 45px de
       haut, l'interligne 8 : il ne rentre dans aucun blanc.

       Derriere, la carte etant opaque, seule la part qui deborde a droite
       reste visible : 71px sur 122, a hauteur de la coupure titre/texte.
       Il repasse DEVANT (5). C'est possible depuis qu'il est assez petit
       pour tenir dans le blanc entre le titre et le corps — voir la note sur
       la largeur ci-dessus.

       Attention : ce calage depend du texte de cette carte. Si le titre
       passe a trois lignes ou si le corps s'allonge, la fenetre libre se
       deplace et il faut reprendre margin-top. Sous 1200px, ou le texte
       reflue en permanence, il repasse derriere — voir la media query. */
    z-index: 5;
}
/* Nuages 3 et 4 : enfants de la carte du bloc cocktails, comme les olives.
   top: 0 designe le haut de cette carte, et les marges en % se calculent sur
   sa largeur — les valeurs sont donc celles relevees sur la maquette.

   Releve, origine au coin haut-gauche de la carte cocktails :
     nuage 3 (sous le personnage-bouteille) left 73,4 %  29,9 % au-dessus  larg 49,4 %
     nuage 4 (a droite du cocktail)         left 199,0 %  7,5 % en dessous larg 35,7 %
   Le rendu les placait respectivement 38 % et 56 % trop haut. */
.commune-bar-nuage--3 {
    /* Ancre sur la carte « Bar a vins », bord HAUT — meme ancre et meme bord
       que le personnage-bouteille qui se tient dessus. */
    width: 40%;
    left: -41.7%;
    top: 0;
    /* 61,3 % : suit les 3 % de descente du personnage-bouteille. */
    margin-top: 61.3%;
    z-index: -1;
}

.commune-bar-nuage--4 {
    width: 30.9%;
    left: 173.3%;
    top: 0;
    margin-top: 4.6%;
    z-index: -1;
}
/* Nuages 5 a 9 : ancres sur une carte, comme les autres.

   Ils etaient poses sur la section, en % de sa HAUTEUR. Or cette hauteur
   depend du texte des cinq cartes, et le rythme vertical du rendu est plus
   serre que celui de la maquette : chaque nuage derivait d'autant plus
   qu'il etait bas dans la section. Le nuage 8, cense etre sous les pieds du
   personnage-tasse, se retrouvait plusieurs centaines de pixels au-dessus.

   Ancres 5, 6 et 7 sur la carte « Mokxa », 8 sur elle aussi (avec la tasse,
   meme bord), 9 sur la carte « bieres ». Les trois valeurs se lisent en %
   de la largeur de la carte, qui ne depend d'aucun contenu. */
.commune-bar-nuage--5 { width: 44.6%; left:   15.4%; top:    0; margin-top: -29.7%; z-index: -1; }
.commune-bar-nuage--6 { width: 37.7%; left: -101.2%; top:    0; margin-top:   3.4%; z-index: -1; }
.commune-bar-nuage--7 { width: 40.0%; left:   78.3%; top: 100%; margin-top:  -6.9%; z-index: -1; }
.commune-bar-nuage--8 { width: 38.9%; left:  -39.4%; top: 100%; margin-top:  28.6%; z-index: -1; }
.commune-bar-nuage--9 { width: 43.5%; left:  -14.3%; top: 100%; margin-top:  53.7%; z-index: -1; }

/* Nuages 10 et 11 : presents sur la maquette, absents du module. Le 10 se
   pose a droite de la carte « bieres », a hauteur de son bord bas ; le 11 a
   droite de l'illustration des chopes. Sans eux le bas de la section est
   nettement plus vide que la maquette. Ancres sur la carte « bieres ». */
.commune-bar-nuage--10 { width: 27.4%; left:  195.0%; top:    0; margin-top:  35.5%; z-index: -1; }
.commune-bar-nuage--11 { width: 44.6%; left:  150.4%; top: 100%; margin-top:  49.2%; z-index: -1; }

/* ── Bloc « bieres » : ce n'est pas une ligne a deux colonnes ──────────
   Sur la maquette la carte occupe la moitie gauche et l'illustration passe
   DESSOUS, centree sur toute la largeur de contenu. Rendue a cote de la
   carte comme les trois autres, elle tombait exactement sur la tasse bleue,
   qui disparaissait derriere elle — c'est ce qui rendait tout le bas faux.

   Releve maquette, en % de la largeur de contenu : illustration centree,
   36,5 % de haut, posee 5,5 % sous la carte.

   La largeur, elle, ne peut pas etre relevee : l'illustration de la maquette
   est une paire de chopes qui trinquent (rapport 1,58), alors que le fichier
   du serveur, 04-bieres.svg, est une chope seule au rapport 0,98. On garde
   donc la HAUTEUR de la maquette et la largeur en decoule : 36,5 x 0,979. */
/* ── Air devant les deux blocs qui recoivent un decor haut ────────────
   Le gap commun de .commune-bar-univers convient aux trois premiers
   inter-blocs, pas aux deux derniers : ce sont les seuls a devoir loger un
   decor plus haut que l'espace laisse.

   Mesure sur le rendu, en % de la largeur de contenu :
     - la brochette d'olives descend 27,1 % sous la carte cocktails, l'espace
       n'en offre que 18,2 % : elle mordait de 12,4 % sur le grain de cafe
       la ou la maquette ne tolere que 1,4 % ;
     - la paire personnage-tasse + son nuage descend 20,7 % sous la carte
       Mokxa, l'espace n'en offre que 8,9 % : les deux passaient entierement
       derriere la carte « bieres ».

   Le complement est pose en marge sur le bloc SUIVANT, pas sur le gap
   commun : elargir le gap aurait aussi ecarte les trois premiers blocs, qui
   sont deja au bon ecart. En flex colonne, une marge en % se calcule sur la
   LARGEUR du conteneur — soit exactement le repere du releve. */
.commune-bar-bloc--cafe { margin-top: 11.1%; }

/* ── Grain de cafe : 25 % trop gros ───────────────────────────────────
   Les quatre illustrations partagent un meme max-height. Ca convient aux
   trois autres — boite haute de 28,5 % et 30,5 % de la largeur de contenu
   sur la maquette, 30,7 % au rendu — mais pas au grain de cafe, que la
   maquette veut a 24,5 %. Le fichier 03-cafe.svg est presque carre
   (251x271) la ou les autres sont tres elances : borne par la hauteur, il
   sort donc bien plus large qu'eux, et c'est cette largeur en trop qui
   allait chercher la brochette d'olives.

   0,8 x la valeur commune : 24,5 / 30,7. */
.commune-bar-bloc--cafe .commune-bar-bloc-media img {
    /* 0,8 x 435px — la valeur commune n'est pas le clamp(180px, 22vw, 300px)
       de la regle « Recalage sur la maquette » : elle est surchargee a 435px
       plus bas dans ce fichier. C'est cette valeur-la qu'il faut suivre si
       elle rebouge. */
    max-height: 348px;
}

/* Et 3,4 % de la largeur de contenu plus bas : sur la maquette le grain
   n'est pas centre sur sa carte, il est pose legerement en dessous.
   Marge haute compensee par une marge basse negative : la boite de marge
   garde sa hauteur, la ligne de grille ne bouge pas, seule l'illustration
   descend. Le pourcentage se calcule sur la largeur de la zone de grille,
   soit une colonne — d'ou 6,9 % et non 3,4 %. */
.commune-bar-bloc--cafe .commune-bar-bloc-media {
    margin-top: 6.9%;
    margin-bottom: -6.9%;
}

.commune-bar-bloc--pleine-largeur {
    margin-top: 15.7%;
    grid-template-areas:
        "carte ."
        "media media";
    align-items: start;
}

.commune-bar-bloc--pleine-largeur .commune-bar-bloc-carte { grid-area: carte; }

.commune-bar-bloc--pleine-largeur .commune-bar-bloc-media {
    grid-area: media;
    justify-self: center;
    /* Ces deux valeurs se calculent sur la largeur de la zone de grille, qui
       couvre ici les deux colonnes : ce sont donc des % de la largeur de
       contenu, le meme repere que le releve. */
    width: 35.7%;
    margin-top: 5.5%;
}

.commune-bar-bloc--pleine-largeur .commune-bar-bloc-media img {
    /* Le max-height commun (300px) rabaissait l'illustration bien en dessous
       de sa taille de maquette des que la section s'elargissait. */
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
}

/* Les decors ajoutes suivent la regle d'origine : masques sous 900px, ou
   .commune-bar-perso est deja mis de cote faute de place. */
@media (max-width: 900px) {
    .commune-bar-perso--flacon,
    .commune-bar-perso--mug,
    .commune-bar-perso--gobelet { display: none; }
}


/* Carte terrasse : la photo occupe toute la hauteur de la carte, sans la
   piloter.

   `align-self: stretch` ne suffit pas : un element de grille etire contribue
   quand meme a la hauteur de la ligne par la hauteur de son contenu. Avec
   l'image en flux, people-drinking-scaled.jpg (1366x2048, portrait) imposait
   358px de haut pour 239 de large — d'ou la carte etiree et sa grande zone
   vide sous le texte. C'est exactement ce que redoutait le commentaire
   d'origine, et que l'aspect-ratio 3/2 evitait au prix d'une photo en
   paysage collee en haut.

   On sort donc l'image du flux : en position absolue elle ne compte plus
   dans le calcul de la ligne. La hauteur vient du texte, le cadre s'y etire,
   et object-fit: cover recadre la photo dedans. */
.commune-bar-terrasse-photo {
    aspect-ratio: auto;
    align-self: stretch;
    position: relative;
    min-height: 0;
}

.commune-bar-terrasse-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Filet sous le titre, present sur la maquette et absent du rendu. */
.commune-bar-terrasse-title {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #000;
}

.commune-bar-bloc--gauche{
    margin-bottom: 20px!important;
}

/* ── Bloc « Saisissez l'instant » : recalage sur la maquette ──────────
   Deux ecarts mesurables entre le rendu et la maquette. */

/* 1. Les illustrations sont trop petites par rapport a leur colonne. Sur la
      maquette elles occupent environ 30 % de la largeur de contenu, contre
      moins de 20 % ici : le plafond de hauteur les bride avant que la
      largeur n'entre en jeu. On desserre ce plafond.
      La regle d'origine (« Recalage sur la maquette », plus haut) bornait a
      clamp(180px, 22vw, 300px). */
/* Releve sur la carte cocktails : le verre a cocktail occupe 60,1 % de sa
   largeur sur la maquette contre 46,0 % au rendu — un tiers de trop peu.

   Attention au terme qui s'applique reellement : a 1270px de fenetre, 26vw
   vaut 330px, bien en dessous du plafond de 465 — c'est donc le vw qui
   commande, et lui seul. Il faut 330 x 1,31 = 432px, soit 34vw. */
.commune-bar-bloc-media img {
    max-height: clamp(350px, 34vw, 605px);
}

/* 2. Rythme vertical trop aere : sur la maquette les blocs s'enchainent
      serres, ici ils sont separes par des bandes vides. */
.commune-bar-univers {
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

/* Ecart entre la carte terrasse et le premier bloc.
   Releve : le haut de la carte « Bar a vins » se trouve 16 % de la largeur
   de carte sous le bas de la terrasse ; le rendu n'en donnait que 9,5 %.
   C'est ce qui tronquait la bouteille verte — la deuxieme carte lui passait
   dessus avant qu'elle ne soit entiere, d'ou sa hauteur visible de 13,7 %
   au lieu de 20,1 %. */
.commune-bar-terrasse {
    margin-bottom: clamp(3rem, 10vw, 3rem);
}

.commune-bar-terrasse .commune-bar-terrasse-texte{
    border-radius: 25px;
    border: 1px solid #000;
    padding: 30px!important;
}


/* ── Contenu limite a 1200px et centre, fonds en pleine largeur ────────
   On ne plafonne pas la largeur des blocs : leurs fonds, filets et
   couleurs doivent continuer a courir d'un bord a l'autre de l'ecran.
   On elargit leur padding lateral jusqu'a ce que la zone de contenu
   retombe a 1200px ; sous 1200px + gouttiere, c'est la gouttiere qui
   reprend la main.

   C'est l'idiome deja present a l'origine dans ce fichier, sur
   .commune-bar-edito : max(4rem, calc((100vw - 1300px) / 2)).

   La bande .commune-bar-band-inner n'est PAS traitee ici mais dans
   bar_convivial.php : sa feuille est imprimee dans le corps de la page,
   donc apres celle-ci, et l'emporterait. */

.commune-bar-hero-inner {
    padding-left: max(0px, calc((100% - 1200px) / 2));
    padding-right: max(0px, calc((100% - 1200px) / 2));
    box-sizing: border-box;
}

.commune-bar-edito-card {
    padding-left: max(3rem, calc((100% - 1200px) / 2));
    padding-right: max(3rem, calc((100% - 1200px) / 2));
}

.commune-bar-saisir-inner {
    max-width: 1200px;
    /* content-box, et non border-box : le padding lateral s'ajoute alors aux
       1200px au lieu de les rogner. En border-box le contenu ne faisait que
       1104px (1200 - 2x48), soit 83 % de la fenetre la ou la maquette en
       donne 95 %. C'est ce qui rendait la carte terrasse trop etroite. */
    box-sizing: content-box;
}

/* Sous 1200px la formule retombe deja sur la gouttiere ; on retablit ici
   les retraits reduits d'origine de la carte edito. */
@media (max-width: 768px) {
    .commune-bar-edito-card {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 600px) {
    .commune-bar-edito-card {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}


/* NB : la geometrie des bandes .commune-bar-band-* ne se regle PAS ici.
   Leur feuille est imprimee en <style> dans le corps de la page par
   commune_bar_bands_style(), donc apres celle-ci : a specificite egale
   c'est elle qui l'emporte. Largeur, gouttieres et debord du bas se
   modifient dans bar_convivial.php. */


/* Etiquette « Saisissez l'instant » posee sur le filet de la carte edito.

   .commune-bar-edito est une colonne flex avec gap: 20px. Ce gap s'insere
   entre l'etiquette et la carte : l'etiquette a beau sortir du flux par sa
   marge basse negative, les 20px du gap subsistent et laissent une bande
   blanche entre le bas de l'onglet et le filet du haut de la carte (releve
   sur le rendu : bas de l'onglet y=38, filet y=59).

   On absorbe donc le gap dans cette marge, plus 1px pour que l'onglet
   recouvre le filet au lieu de le laisser passer dessous — il est en
   position: relative, il se peint donc au-dessus de la carte.
     -10px (valeur d'origine) - 20px (gap) - 1px (recouvrement) = -31px */
.commune-bar-edito-label {
    margin-bottom: -31px;
}


/* Logo « La Commune » centre sur les capitales du titre.
   Releve sur le rendu : avec `vertical-align: middle`, la boite du logo
   descendait 13 px sous la ligne de base, d'ou le titre desaxe. En
   `baseline`, ses 40 px coincident exactement avec la hauteur de capitale
   du titre a 48 px — et la proportion tient aux quatre paliers, logo et
   titre etant reduits ensemble.
   Selecteur volontairement limite au titre du heros : .commune-home-hero-logo
   sert aussi dans .commune-home-prv-title, qu'il ne faut pas decaler. */
.commune-bar-hero-title .commune-bar-hero-logo,
.commune-home-hero-title .commune-home-hero-logo,
.commune-incubateur-hero-title .commune-incubateur-hero-logo {
    vertical-align: baseline;
}


/* ── Les deux cartes sous le texte du heros ────────────────────────────
   Le gabarit .commune-bar-hero-card existe deja (180x180, coins 20px,
   filet noir, picto cale en bas). Seuls trois ecarts avec la maquette. */

/* 1. Libelle en haut a GAUCHE et non centre. On ne touche pas a
      align-items du parent, qui doit rester `center` pour le picto :
      seul le libelle s'etire et s'aligne a gauche. */
.commune-bar-hero-card-label,
.commune-home-hero-card-label,
.commune-incubateur-hero-card-label {
    align-self: stretch;
    text-align: left;
}

/* 2. Retrait lateral : a 10px le libelle collait au filet. */
.commune-bar-hero-card,
.commune-home-hero-card,
.commune-incubateur-hero-card {
    padding-left: 16px;
    padding-right: 16px;
}

/* 3. Picto un peu plus haut — 64 % de la carte sur la maquette. */
.commune-bar-hero-card-icon,
.commune-home-hero-card-icon,
.commune-incubateur-hero-card-icon {
    height: 64%;
}

/* ── Mobile ──
   Ce bloc est place APRES les media queries d'origine : sans lui, les trois
   regles ci-dessus ecraseraient leurs valeurs mobiles (retrait 8px, picto a
   55 %). On les redonne donc ici.

   Surtout : .commune-bar-hero-cards-zone etait masquee sous 600px. Sans
   consequence tant qu'elle ne contenait qu'un skateboard decoratif, mais
   elle porte desormais deux liens de navigation — les masquer priverait le
   mobile des acces « Menu bar » et « Reserver ». On la reaffiche, les deux
   cartes passant a la ligne si la place manque. */
@media (max-width: 600px) {
    .commune-bar-hero-cards-zone,
    .commune-home-hero-cards-zone,
    .commune-incubateur-hero-cards-zone {
        display: flex;
    }
    .commune-bar-hero-card,
    .commune-home-hero-card,
    .commune-incubateur-hero-card {
        padding-left: 12px;
        padding-right: 12px;
    }
    .commune-bar-hero-card-icon,
    .commune-home-hero-card-icon,
    .commune-incubateur-hero-card-icon {
        height: 55%;
    }
}


/* ════════════════════════════════════════════════════════════════════
   BLOC « SAISISSEZ L'INSTANT » — GEOMETRIE FIGEE
   ════════════════════════════════════════════════════════════════════

   Toutes les valeurs de cette section etaient en clamp(min, Xvw, max) :
   elles variaient donc en continu avec la largeur de la fenetre, et la
   position relative des decors bougeait a chaque redimensionnement — ce qui
   rendait tout calage impossible a verifier d'une capture a l'autre.

   Elles sont ici figees a leur valeur pour une fenetre de 1280px, la largeur
   sur laquelle la maquette est dessinee (1200px de contenu + 2 x 40 de
   gouttiere). Conversion : 1vw = 12,8px, 1rem = 16px.

   Les positions des decors, elles, n'ont pas besoin d'etre touchees : elles
   sont en % de la largeur d'une carte, et les cartes sont plafonnees a
   1200px — donc deja fixes au-dela de cette largeur.

   Le responsive se reprendra en media queries, en surchargeant ce bloc.
   ════════════════════════════════════════════════════════════════════ */

.commune-bar-saisir-inner {
    padding: 38px 38px 77px;        /* clamp(1rem, 3vw, 3rem) x2 + clamp(3rem, 6vw, 6rem) */
}

.commune-bar-terrasse {
    gap: 26px;                      /* clamp(1rem, 2vw, 2rem) */
    padding: 32px;                  /* clamp(1.25rem, 2.5vw, 2rem) */
    margin-bottom: 48px;            /* valeur retenue : ton clamp(3rem, 10vw, 3rem) */
}

.commune-bar-terrasse-title {
    font-size: 26px !important;     /* clamp(20px, 2vw, 28px) */
}

.commune-bar-univers {
    gap: 32px;                      /* clamp(1.25rem, 2.5vw, 2.5rem) */
}

.commune-bar-bloc {
    gap: 32px;                      /* clamp(1rem, 2.5vw, 2.5rem) */
}

.commune-bar-bloc-carte {
    padding: 23px 26px;             /* clamp(1rem, 1.8vw, 1.5rem) / clamp(1.1rem, 2vw, 1.75rem) */
}

.commune-bar-bloc-title {
    font-size: 19px !important;     /* clamp(17px, 1.5vw, 22px) */
}

.commune-bar-bloc-media img {
    max-height: 435px;              /* clamp(350px, 34vw, 605px) */
}

/* Quatrieme bloc uniquement : les chopes de biere.
   Mesure sur les boites completes, rapportees a la largeur d'une carte de
   bloc — maquette 124,6 % de large, rendu 87,0 %. Un facteur 1,43 manque,
   et lui seul : le grain de cafe tombe juste (61,5 contre 64,1) comme le
   verre a cocktail.
   Cible par :nth-child plutot que par une classe : inutile de toucher au
   PHP, et surtout de retoucher au dimensionnement des trois autres. */
.commune-bar-univers > .commune-bar-bloc:nth-child(4) .commune-bar-bloc-media img {
    max-height: 622px;
}


/* ── Personnage-nuage pose sur le verre a cocktail (Group-91.png) ─────
   Absent du module d'origine.

   Le conteneur de l'illustration epouse desormais la largeur de celle-ci
   (fit-content) au lieu de remplir sa colonne de grille. Sans ca, les
   pourcentages du personnage se seraient calcules sur la colonne — donc sur
   une largeur sans rapport avec le verre, et variable d'un bloc a l'autre
   selon le format de chaque illustration.

   Releve sur la maquette, unite = largeur du verre :
     largeur 41,8 %   centre a 63 %   bas 3,4 % au-dessus du bord du verre
   Controle : le rapport mesure du personnage, 0,803, correspond bien au
   0,823 du fichier — la mesure ne porte pas sur autre chose. */
.commune-bar-bloc-media {
    position: relative;
    width: fit-content;
    margin-inline: auto;
}

/* Selecteur volontairement qualifie par `img` : la regle d'origine
   `.commune-bar-bloc-media img` pese 0,0,1,1 et l'emportait sur la classe
   seule, qui ne pese que 0,0,1,0. Le personnage heritait donc de
   `width: 100%` et `max-width: 300px` au lieu de ses 41,8 % — c'est ce qui
   le faisait disparaitre, demesurement agrandi au-dessus du cadre.
   Les proprietes heritees sont explicitement neutralisees. */
.commune-bar-bloc-media img.commune-bar-perso--frimousse {
    /* Les trois valeurs d'origine — 41,8 %, 63 %, 3,4 % — avaient bien ete
       relevees en largeur de VERRE, mais elles s'appliquent a la boite de
       l'ILLUSTRATION, qui est plus large : le verre n'en occupe que 80,9 %,
       le reste etant la main. D'ou un personnage trop gros, decale a droite,
       et surtout flottant 3,4 % au-dessus du verre au lieu d'y poser les
       pieds.

       Reconverties dans le bon repere (mesure sur le rendu : boite 141 px,
       verre 114 px, personnage 59 px) :
         largeur   41,8 % du verre -> 37 % de la boite
         centre    12,9 % de largeur de verre a droite du centre du verre,
                   soit 53,1 % de la boite (le verre n'y est pas centre : son
                   milieu tombe a 42,8 %)
         bas       0 : `bottom: 100%` designe deja le haut de l'illustration,
                   c'est-a-dire le trait du bord du verre. Toute marge
                   positive ne pouvait que l'en decoller. */
    left: 53.1%;
    transform: translateX(-50%);
    width: 37%;
    max-width: none;
    max-height: none;
    margin: 0;
    bottom: 100%;
    /* `bottom: 100%` pose ses pieds sur le haut de la BOITE de
       l'illustration, or le trait du bord du verre commence un pixel plus
       bas : a 0 il restait une ligne de vide entre les deux. -1 % de la
       largeur de la boite le fait mordre juste ce qu'il faut pour que les
       pieds se posent sur le trait, comme sur la maquette. */
    margin-bottom: -1%;
}


/* ════════════════════════════════════════════════════════════════════
   BLOC « SAISISSEZ L'INSTANT » — RESPONSIVE
   ════════════════════════════════════════════════════════════════════

   A reprendre ICI, en fin de fichier, et nulle part ailleurs.

   Raison : le bloc « GEOMETRIE FIGEE » ci-dessus arrete toutes les valeurs
   de la section a celles d'une fenetre de 1280px, et il est place APRES les
   media queries d'origine (768px et 600px, plus haut dans ce fichier). A
   specificite egale, c'est la derniere regle qui gagne : ces media queries
   ne s'appliquaient donc plus du tout, et la section gardait ses 38px de
   gouttiere et ses illustrations de 435px de haut jusqu'a 320px de large.

   Quatre paliers :
     > 1200px    la maquette telle quelle, rien n'est touche
     <= 1200px   meme mise en page, mais les valeurs figees repassent en vw.
                 Necessaire : les decors sont, eux, en % de largeur de carte,
                 donc ils retrecissent avec la fenetre. Si les illustrations
                 et les gouttieres restent en px, le rapport entre les deux
                 se defait et les decors finissent dans les illustrations.
     <= 900px    empilement en une colonne (declare plus haut), decors
                 masques, valeurs ramenees a des tailles lisibles
     <= 600px    resserrement final

   Regle a tenir : chaque selecteur ci-dessous est qualifie AU MOINS autant
   que celui qu'il annule. Plusieurs regles de placement sont a 0,2,1 ou
   0,4,1 (le 348px du cafe, le 622px des chopes, le max-height: none du bloc
   pleine largeur) : une regle a 0,1,1 dans une media query ne les toucherait
   pas, media query ou pas.
   ════════════════════════════════════════════════════════════════════ */

/* Aucun decor ne sort de la section, quelle que soit la largeur.
   Plusieurs debordent volontairement du contenu — jusqu'a 112 % de sa
   largeur — pour aller mourir au bord de la fenetre ; sans garde-fou ils
   creent une barre de defilement horizontale sur toute la page.
   `clip` et non `hidden` : `hidden` ferait de la section un conteneur de
   defilement et rognerait aussi l'onglet-sticker, qui deborde vers le haut.
   L'axe vertical reste donc explicitement visible. */
.commune-bar-saisir {
    overflow-x: clip;
    overflow-y: visible;
}

/* Filet de securite, toutes largeurs : le contenu d'une carte passe devant
   les decors qu'elle heberge.

   Sans ca, un decor rendu DANS une carte est peint apres le contenu en flux
   — donc par-dessus le texte des que les deux se croisent. Ca n'arrive pas
   aux largeurs de la maquette, mais ca arrive des que la carte s'allonge :
   c'est exactement ce que fait un ecran plus etroit, ou un texte plus long.
   Le z-index: 1 sur le contenu inverse l'ordre une fois pour toutes ; les
   decors gardent leurs 0 et leurs -1, rien ne bouge en desktop. */
.commune-bar-terrasse > :not(.commune-bar-nuage):not(.commune-bar-perso),
.commune-bar-bloc-carte > :not(.commune-bar-nuage):not(.commune-bar-perso) {
    position: relative;
    z-index: 1;
}


/* ── <= 1200px : la grille a deux colonnes tient encore ──────────────
   Equivalences avec les valeurs figees a 1280px : 38px = 3vw,
   32px = 2.5vw, 26px = 2vw, 23px = 1.8vw, 19px = 1.5vw, 435px = 34vw. */
@media (max-width: 1200px) {
    .commune-bar-saisir-inner { padding: 3vw 3vw 6vw; }

    .commune-bar-terrasse {
        gap: 2vw;
        padding: 2.5vw;
        margin-bottom: 3.75vw;
    }
    .commune-bar-terrasse-title { font-size: clamp(19px, 2vw, 26px) !important; }

    .commune-bar-univers { gap: 2.5vw; }
    .commune-bar-bloc { gap: 2.5vw; }
    .commune-bar-bloc-carte { padding: 1.8vw 2vw; }
    .commune-bar-bloc-title { font-size: clamp(16px, 1.5vw, 19px) !important; }

    .commune-bar-bloc-media img { max-height: 34vw; }
    /* Le grain de cafe garde son rapport de 0,8 avec les trois autres. */
    .commune-bar-bloc--cafe .commune-bar-bloc-media img { max-height: 27.2vw; }

    /* Le nuage 2 est devant la carte en desktop, ou son calage vertical est
       verifie ligne a ligne. Sous 1200px le texte de la carte reflue a
       chaque largeur : la fenetre libre se deplace et aucune valeur fixe ne
       tient. Il repasse donc derriere — seule la part qui deborde a droite
       reste visible, et plus rien ne peut masquer de texte. */
    .commune-bar-nuage--2 { z-index: -1; }
}


/* ── <= 900px : blocs empiles, decors masques ───────────────────────
   L'empilement et le masquage des decors sont declares plus haut. Ne restent
   ici que les valeurs figees a defaire.

   Les decors sont masques et non repositionnes : leurs offsets vont de
   -101 % a +195 % de la largeur d'une carte. Sur une carte pleine largeur
   ils atterrissent tous hors de l'ecran — les garder demanderait un second
   jeu de coordonnees, c'est-a-dire une deuxieme maquette. */
@media (max-width: 900px) {

    /* ── 1. Annulations de la geometrie desktop ──────────────────────
       Ces quatre reglages etaient deja ecrits dans la media query 900px du
       milieu du fichier — mais les regles desktop qu'ils annulent sont
       declarees APRES elle. A specificite egale c'est la derniere qui gagne :
       l'annulation n'avait jamais pris. D'ou, en colonne, deux vides de
       ~50px avant le bloc cafe et avant le bloc bieres, et un bloc bieres
       qui gardait son gabarit a deux rangees (carte puis illustration, au
       lieu d'illustration puis carte comme les trois autres).
       Refaites ici, en fin de fichier, donc en dernier. */
    .commune-bar-bloc--cafe,
    .commune-bar-bloc--pleine-largeur { margin-top: 0; }

    .commune-bar-bloc--cafe .commune-bar-bloc-media {
        margin-top: 0;
        margin-bottom: 0;
    }

    .commune-bar-bloc--pleine-largeur { grid-template-areas: none; }
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-carte,
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media { grid-area: auto; }
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media {
        width: auto;
        margin-top: 0;
    }

    /* ── 2. Rythme ───────────────────────────────────────────────────── */
    .commune-bar-saisir-inner { padding: 24px 20px 36px; }

    .commune-bar-terrasse {
        gap: 18px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .commune-bar-terrasse-title { font-size: 21px !important; }
    .commune-bar-terrasse-texte p { font-size: 13px !important; }

    .commune-bar-univers { gap: 24px; }
    .commune-bar-bloc { gap: 10px; }
    .commune-bar-bloc-carte { padding: 18px 20px; }
    .commune-bar-bloc-title { font-size: 18px !important; }
    .commune-bar-bloc-body,
    .commune-bar-bloc-body p { font-size: 13px !important; }

    /* Meme plafond pour les quatre illustrations : les ecarts de taille
       releves sur la maquette n'ont plus d'objet une fois les blocs empiles.
       Les quatre selecteurs sont indispensables — voir la note de
       specificite en tete de bloc. */
    .commune-bar-bloc-media img,
    .commune-bar-bloc--cafe .commune-bar-bloc-media img,
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media img,
    .commune-bar-univers > .commune-bar-bloc:nth-child(4) .commune-bar-bloc-media img {
        width: auto;
        max-width: 190px;
        max-height: 190px;
    }

    /* ── 3. Decors du format colonne ─────────────────────────────────
       Tout masquer laissait une section nue. Mais les valeurs desktop ne
       sont pas transposables : leurs offsets vont de -101 % a +195 % de la
       largeur d'une carte, or en colonne la carte fait toute la largeur —
       ils atterrissent tous hors ecran.

       Jeu propre au format colonne, choisi pour ne jamais entrer en conflit
       avec le texte :
         - un nuage par bloc, centre, a cheval sur le haut de la carte : en
           z-index negatif il passe derriere la carte ET derriere
           l'illustration posee juste au-dessus, qui parait donc s'y appuyer,
           comme les personnages de la maquette se tiennent sur leur nuage ;
         - deux nuages et la bouteille verte sous la carte terrasse ;
         - un nuage bas a droite du bloc cafe, pour casser la symetrie.
       Tout le reste — brochette d'olives, personnage-bouteille,
       personnage-tasse, tasse bleue, gobelet — reste masque : ce sont les
       decors hauts, ceux qui reclamaient un inter-bloc que la colonne n'a
       plus.

       Le personnage-nuage du verre a cocktail, lui, n'est pas concerne : il
       est place par rapport a l'illustration et non par rapport a une carte,
       donc il suit a toutes les largeurs. */
    .commune-bar-nuage--1,
    .commune-bar-nuage--2,
    .commune-bar-nuage--3,
    .commune-bar-nuage--4,
    .commune-bar-nuage--5,
    .commune-bar-nuage--7,
    .commune-bar-nuage--9 {
        display: block;
    }

    /* Nuages poses sur le haut de chaque carte de bloc. `top: 0` designe ce
       bord ; la marge negative les fait remonter derriere l'illustration. */
    .commune-bar-nuage--3 { left: 28%; width: 44%; top: 0; margin-top: -13%; z-index: -1; }
    .commune-bar-nuage--4 { left: 20%; width: 40%; top: 0; margin-top: -12%; z-index: -1; }
    .commune-bar-nuage--5 { left: 32%; width: 42%; top: 0; margin-top: -12%; z-index: -1; }
    .commune-bar-nuage--9 { left: 26%; width: 44%; top: 0; margin-top: -13%; z-index: -1; }

    /* Celui-ci sort par la droite, sous la carte Mokxa. */
    .commune-bar-nuage--7 { left: 70%; width: 36%; top: 100%; margin-top: 3%; z-index: -1; }

    /* Sous la carte terrasse : deux nuages. */
    .commune-bar-nuage--1 { left: -12%; width: 42%; top: 100%; margin-top: 1%; z-index: -1; }
    .commune-bar-nuage--2 { left:  72%; width: 40%; top: 100%; margin-top: 7%; z-index: -1; }

    /* La bouteille verte reste masquee en colonne.
       Elle se lit, sur la maquette, par rapport au bord bas de la carte
       terrasse ET par rapport a la photo qui l'accompagne a droite. En
       colonne la photo passe sous le texte et occupe toute la largeur : il
       n'y a plus de « bas de carte a droite de la photo » ou la poser. Toute
       position tenable la mettait soit au milieu du bloc, soit a cheval sur
       l'illustration suivante.
       Rien a ecrire : la media query du milieu de fichier masque deja
       .commune-bar-perso en bloc, on se contente de ne pas la rouvrir. */

    /* Le personnage-nuage du verre a cocktail est place par rapport a
       l'illustration, pas par rapport a une carte : ses pourcentages restent
       valables a toutes les largeurs, il n'y a rien a recalculer. Il faut en
       revanche le rouvrir explicitement — il porte la classe
       .commune-bar-perso, que la media query du milieu de fichier masque en
       bloc. Selecteur qualifie par le nom d element pour peser plus lourd qu'elle. */
    .commune-bar-bloc-media img.commune-bar-perso--frimousse {
        display: block;
    }
}


/* ── <= 600px : resserrement final ──────────────────────────────────── */
@media (max-width: 600px) {
    .commune-bar-saisir-inner { padding: 20px 16px 32px; }

    .commune-bar-terrasse {
        gap: 14px;
        padding: 16px;
        margin-bottom: 22px;
    }
    .commune-bar-terrasse-title { font-size: 19px !important; }

    .commune-bar-univers { gap: 22px; }
    .commune-bar-bloc-carte { padding: 16px; }
    .commune-bar-bloc-title { font-size: 17px !important; }

    .commune-bar-bloc-media img,
    .commune-bar-bloc--cafe .commune-bar-bloc-media img,
    .commune-bar-bloc--pleine-largeur .commune-bar-bloc-media img,
    .commune-bar-univers > .commune-bar-bloc:nth-child(4) .commune-bar-bloc-media img {
        max-width: 150px;
        max-height: 150px;
    }

    /* L'onglet-sticker : 13px sur 16px de gouttiere passait a la ligne. */
    .commune-bar-saisir-label {
        font-size: 12px;
        padding: 5px 12px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   Carte terrasse masquee — Saint-Etienne
   Son contenu decrit la terrasse de LYON (Lyon 7, 400 m2) et le wording
   stephanois ne fournit rien pour le remplacer. On masque donc la carte
   entiere : le cadre, la photo et les trois decors qui lui sont ancres
   (personnage-flacon, nuages 1 et 2).

   La classe est posee dans bar_convivial.php sur .commune-bar-terrasse.
   Pour reafficher le bloc : retirer cette regle, ou retirer la classe
   commune-bar-terrasse--masquee du PHP.
   ════════════════════════════════════════════════════════════════════ */
.commune-bar-terrasse--masquee {
    display: none;
}


/* ════════════════════════════════════════════════════════════════════════
   CORRECTIFS RESPONSIVE
   Ajoutes en fin de feuille : meme specificite que les regles d'origine,
   c'est l'ordre source qui tranche. Rien n'est supprime au-dessus.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Interlignage des titres qui reste bloque ────────────────────────
   .commune-bar-hero-title est pose en font-size:48px / line-height:64px,
   un interligne FIXE en px. Les paliers 1200px et 1024px reduisent bien le
   corps du texte (52px puis 44px) mais ne retouchent pas l'interligne : a
   44px de corps pour 64px d'interligne le ratio passe de 1,33 a 1,45 et le
   titre se delite. Ce n'est qu'a 768px qu'un ratio sans unite reprend la
   main.
   On repasse donc en ratio des le premier palier : il suit la taille du
   texte quelle qu'elle soit, et il n'y a plus de trou entre 1024 et 1200.

   .commune-bar-saisir-title a le meme defaut en pire : 40px en dur, aucun
   palier responsive. On lui donne un corps fluide.                       */
@media (max-width: 1200px) {
    .commune-bar-hero-title {
        line-height: 1.2 !important;
    }
}

.commune-bar-saisir-title {
    font-size: clamp(24px, 3.4vw, 40px) !important;
    line-height: 1.2 !important;
}

/* ── 2. Respiration au-dessus des titres ────────────────────────────────
   .commune-bar-edito-title et .commune-bar-bloc-title sont tous deux poses
   en margin-top:0. En pleine largeur le padding de la carte parente suffit,
   mais des que celui-ci se resserre (1.25rem a 768px, 16px a 600px) le
   titre vient toucher le bord haut.
   On ajoute un retrait minimal porte par le titre lui-meme, pour ne pas
   dependre du padding du parent.

   Cas particulier de .commune-bar-edito-title : ses marges laterales
   negatives dessinent un filet pleine largeur, on ne touche donc qu'au
   padding haut, jamais aux marges.                                       */
@media (max-width: 900px) {
    .commune-bar-edito-title {
        padding-top: 0.5rem !important;
    }
    .commune-bar-bloc-title,
    .commune-bar-terrasse-title {
        margin-top: 0.25rem !important;
    }
}

/* ── 3. Cesure des titres longs ─────────────────────────────────────────
   « Bar a Lyon 7 : une carte raffinee pour tous les gouts. » et les titres
   de blocs debordent de leur carte sur les petites largeurs. On autorise la
   coupure plutot que le debordement.                                     */
.commune-bar-hero-title,
.commune-bar-hero-subtitle,
.commune-bar-edito-title,
.commune-bar-bloc-title,
.commune-bar-terrasse-title {
    overflow-wrap: break-word;
    hyphens: auto;
}


/* ════════════════════════════════════════════════════════════════════════
   CORRECTIFS RESPONSIVE — SERIE 2
   ════════════════════════════════════════════════════════════════════════ */

/* ── 4. Titre du hero : le coeur gonfle la ligne ────────────────────────
   .commune-bar-hero-title::after est une boite inline-block de 1.8em de
   COTE. A 30px de corps cela fait 54px de haut : c'est elle, et non le
   line-height, qui impose la hauteur de la ligne. Quand le titre passe sur
   deux lignes, « Bienvenue a » d'un cote et le logo de l'autre, ce sont ces
   54px qui creusent l'ecart entre les deux.
   On ramene le coeur a la taille du texte sous 768px. La marge droite
   negative doit suivre exactement la largeur, sinon l'avancee cesse d'etre
   nulle et le coeur repousse le logo a la ligne.                          */
@media (max-width: 768px) {
    .commune-bar-hero-title::after {
        width: 1.1em;
        height: 1.1em;
        margin-right: -1.1em;
    }
    .commune-bar-hero-title {
        line-height: 1.1 !important;
    }
}

/* ── 5. Bandes editoriales : image et titre colles ──────────────────────
   .commune-bar-band-inner est un flex avec `gap: 4%`. Sous 900px il passe
   en colonne : le gap devient un ECART VERTICAL, et un pourcentage vertical
   se resout contre la hauteur du conteneur — indefinie ici, donc zero. La
   photo et le titre se retrouvent au contact.
   On repose un ecart en rem, qui ne depend d'aucune hauteur.

   Prefixe .commune-bar-block : ces regles vivent dans un <style> imprime
   par le PHP DANS le corps de page, donc apres cette feuille. A specificite
   egale il gagnerait ; le prefixe passe devant sans toucher au PHP.        */
@media (max-width: 900px) {
    .commune-bar-block .commune-bar-band-inner {
        gap: 1.5rem;
    }
    .commune-bar-block .commune-bar-band-title {
        margin-top: 0 !important;
    }
}


/* ── 6. Le coeur ne doit JAMAIS gonfler la ligne, a aucune largeur ──────
   Le correctif 4 ne s'appliquait que sous 768px. Or le probleme existe des
   que le titre passe sur deux lignes, ce qui arrive bien plus tot : a
   1024px le corps vaut 44px, donc la boite du coeur 1.8em = 79px.

   Une inline-block impose sa hauteur a la ligne, et le line-height n'y peut
   rien. En revanche c'est sa boite de MARGE qui compte : des marges
   verticales negatives la retrecissent sans changer la taille affichee du
   coeur. -0.45em en haut et en bas ramenent 1.8em a 0.9em, soit la hauteur
   du texte — la ligne reprend donc sa hauteur normale.

   Sans media query : valable a toutes les largeurs, y compris en plein
   ecran ou le titre tient sur une ligne (aucun effet visible alors).      */
.commune-bar-hero-title::after,
.commune-home-hero-title::after,
.commune-incubateur-hero-title::after {
    margin-top: -0.45em;
    margin-bottom: -0.45em;
}

/* ── 7. Ecart vertical des bandes, a toutes les largeurs ────────────────
   Meme raisonnement que le correctif 5, sans borne haute : `gap: 4%` est
   deja douteux en ligne (4 % de la largeur du conteneur), il est nul en
   colonne. On pose une valeur en rem une bonne fois.                      */
.commune-bar-block .commune-bar-band-inner {
    gap: clamp(1.25rem, 4%, 3rem);
}