/* ==========================================================
   HOMEPAGE — Serres Dauphinais
   Styles complets pour toutes les sections de la page d'accueil.
   Cible les classes sd-* des content blocks Blocksy.

   Ordre des sections (top → bottom):
     1. Hero
     2. Info Bar
     3. Catégories produits
     4. Newsletter
     5. Section Carte
   ========================================================== */


/* ==========================================================
   1. HERO
   Vidéo plein-écran, overlay raffiné, typo impactante.
   Fond: vert foncé overlay sur vidéo
   ========================================================== */

/* Conteneur racine du content block hero */
.sd-hero {
    margin: 0;
    padding: 0;
}

/* Cover block — exactement du bas du header au bas du viewport
   --sd-hero-height est calculé en JS (window.innerHeight - header.bottom) */
.sd-hero .wp-block-cover,
.sd-hero .wp-block-cover.hero-fullscreen {
    height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
    min-height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Décale le centre optique vers le haut pour compenser l'infobar fixe en bas.
       padding-bottom = 2× la hauteur de l'infobar → shift effectif = infobarHeight */
    padding-bottom: calc(1.25 * var(--sd-infobar-height, 60px)) !important;
}

/* Vidéo de fond — couvre tout le conteneur */
.sd-hero .wp-block-cover__video-background {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

/* Overlay gradient — plus raffiné que l'original */
.sd-hero .wp-block-cover__background.has-background-gradient {
    background: linear-gradient(
        160deg,
        rgba(8, 56, 53, 0.82) 0%,
        rgba(8, 56, 53, 0.60) 45%,
        rgba(8, 56, 53, 0.75) 100%
    ) !important;
}

/* Contenu interne — centré avec espacement généreux */
.sd-hero .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

/* Surtitre (label "Producteur local") */
.sd-hero .wp-block-cover__inner-container > p:first-child {
    font-family: var(--sd-font-body);
    font-size: 0.75rem !important;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(254, 252, 246, 0.72) !important;
    font-weight: 500;
    margin: 0;
}

/* H1 principal — clamp fluide, Playfair Display */
.sd-hero .wp-block-cover h1,
.sd-hero .wp-block-cover .wp-block-heading {
    font-family: var(--sd-font-heading) !important;
    font-size: clamp(2.8rem, 6vw, 4.75rem) !important;
    font-weight: 700;
    line-height: 1.12;
    color: var(--sd-color-7) !important;
    margin: 0;
    text-shadow: 0 2px 20px rgba(8, 56, 53, 0.4);
}

/* Italique dans le H1 */
.sd-hero .wp-block-cover h1 em {
    font-style: italic;
    font-weight: 400;
    color: rgba(254, 252, 246, 0.90);
}

/* Groupe de boutons CTA */
.sd-hero .wp-block-buttons {
    gap: 0.875rem;
    flex-wrap: wrap;
    justify-content: center !important;
    margin-top: 0.5rem;
}

/* CTA primaire — filled vert foncé (Blocksy ajoute is-style-fill) */
.sd-hero .wp-block-button.is-style-fill .wp-block-button__link {
    background-color: var(--sd-color-1) !important;
    border: 2px solid rgba(254, 252, 246, 0.35) !important;
    color: var(--sd-color-7) !important;
    padding: 0.75em 2em;
    font-size: 0.925rem;
    font-weight: 600;
    border-radius: var(--sd-radius-sm);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 20px rgba(8, 56, 53, 0.5);
    transition:
        background-color var(--sd-transition),
        border-color     var(--sd-transition),
        box-shadow       var(--sd-transition),
        transform        var(--sd-transition);
}

.sd-hero .wp-block-button.is-style-fill .wp-block-button__link:hover {
    background-color: var(--sd-color-2) !important;
    border-color: var(--sd-color-2) !important;
    box-shadow: 0 6px 28px rgba(0, 117, 94, 0.45);
    transform: translateY(-2px);
}

/* CTA secondaire — outline blanc translucide */
.sd-hero .wp-block-button:not(.is-style-fill) .wp-block-button__link {
    background-color: rgba(254, 252, 246, 0.10) !important;
    border: 2px solid rgba(254, 252, 246, 0.70) !important;
    color: var(--sd-color-7) !important;
    padding: 0.75em 2em;
    font-size: 0.925rem;
    font-weight: 600;
    border-radius: var(--sd-radius-sm);
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition:
        background-color var(--sd-transition),
        border-color     var(--sd-transition),
        transform        var(--sd-transition);
}

.sd-hero .wp-block-button:not(.is-style-fill) .wp-block-button__link:hover {
    background-color: rgba(254, 252, 246, 0.22) !important;
    border-color: rgba(254, 252, 246, 0.95) !important;
    transform: translateY(-2px);
}

/* Tablet */
@media (max-width: 1000px) {
    .sd-hero .wp-block-cover,
    .sd-hero .wp-block-cover.hero-fullscreen {
        height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
        min-height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
    }
    .sd-hero .wp-block-cover h1,
    .sd-hero .wp-block-cover .wp-block-heading {
        font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    }
}

/* Mobile */
@media (max-width: 690px) {
    .sd-hero .wp-block-cover,
    .sd-hero .wp-block-cover.hero-fullscreen {
        height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
        min-height: var(--sd-hero-height, calc(100dvh - var(--header-height, 80px))) !important;
    }
    .sd-hero .wp-block-cover h1,
    .sd-hero .wp-block-cover .wp-block-heading {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
    .sd-hero .wp-block-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
    }
    .sd-hero .wp-block-button .wp-block-button__link {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================
   2. INFO BAR
   Fond vert foncé, 3 colonnes horizontales.
   ========================================================== */
.sd-infobar {
    background-color: var(--sd-color-1) !important;
    border-top: 1px solid rgba(254, 252, 246, 0.08);
    border-bottom: none;
    margin-block-end: 0 !important;
    margin-block-start: 0 !important;
}

/* Texte du label (ex. "Heure d'ouverture") — déjà stylé en ligne */
.sd-infobar p {
    font-family: var(--sd-font-body);
}

/* Groupe icônes sociales — alignées flush à gauche du label, gap serré */
.sd-infobar-socials {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-left: -10px;
}

.sd-social-link {
    display: inline-flex;
    align-items: center;
    color: rgba(254, 252, 246, 0.72);
    text-decoration: none;
    transition: color var(--sd-transition);
}

.sd-social-link:hover {
    color: var(--sd-color-7);
}

.sd-social-link svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    flex-shrink: 0;
}

.sd-social-link svg path {
    fill: rgba(254, 252, 246, 0.72);
    transition: fill var(--sd-transition);
}

.sd-social-link:hover svg path {
    fill: #fefcf6;
}

/* Icônes Font Awesome dans l'info bar */
.sd-infobar .wp-font-awesome-icon svg {
    width: 1.25em;
    height: 1.25em;
    color: var(--sd-color-7);
    fill: var(--sd-color-7);
    opacity: 0.85;
}

/* ----------------------------------------------------------
   Mobile — carousel auto-rotation
   Une seule info visible à la fois, fade entre items.
   Activation par JS qui ajoute .is-active sur l'item courant.
   Breakpoint 900px : la barre devient trop serrée en 4 colonnes en-dessous.
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    /* Wrapper interne (flex-wrap par défaut) → conteneur de carousel */
    .sd-infobar > .wp-block-group:first-child {
        position: relative;
        display: block !important;
        min-height: 44px;
        padding: 0 !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    /* Chaque item = slide en position absolue, fade in/out */
    .sd-infobar > .wp-block-group:first-child > .wp-block-group {
        position: absolute;
        inset: 0;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 400ms ease,
            visibility 400ms;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.6rem !important;
        flex-wrap: nowrap !important;
    }

    .sd-infobar > .wp-block-group:first-child > .wp-block-group.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Resserrer le bloc interne label+valeur, tout centrer */
    .sd-infobar > .wp-block-group:first-child > .wp-block-group > .wp-block-group {
        gap: 0 !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Texte des labels et valeurs centré */
    .sd-infobar > .wp-block-group:first-child > .wp-block-group p {
        text-align: center !important;
        white-space: nowrap;
    }

    /* Icônes sociales centrées + espace au-dessus pour respirer du label */
    .sd-infobar-socials {
        justify-content: center !important;
        margin-left: 0 !important;
        margin-top: 0.45rem !important;
    }
}


/* ==========================================================
   3. SECTION CATÉGORIES PRODUITS
   Fond crème. 5 cartes vertes avec icône + label.
   Hover: élévation + border-top accent vert moyen.
   ========================================================== */
.sd-categories {
    background-color: var(--sd-color-7);
    padding-top: var(--sd-section-pad) !important;
    padding-bottom: var(--sd-section-pad) !important;
}

/* Titre de section au-dessus des cartes si présent */
.sd-categories > .wp-block-group__inner-container > h2:first-child,
.sd-categories > h2:first-child {
    font-family: var(--sd-font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--sd-color-4);
    text-align: center;
    margin-bottom: 2.5rem;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

/* Colonnes wrapper — gap généreux entre les cartes */
.sd-categories .wp-block-columns {
    gap: 1.25rem !important;
    align-items: stretch;
}

/* Chaque carte catégorie */
.sd-categories .wp-block-column {
    background-color: var(--sd-color-1) !important;
    border-radius: var(--sd-radius-md) !important;
    border-top: 3px solid transparent;
    padding: 2.5rem 1.25rem 2rem !important;
    text-align: center;
    cursor: pointer;
    transition:
        transform   var(--sd-transition),
        box-shadow  var(--sd-transition),
        border-top-color var(--sd-transition);
    /* Neutralise les spacers inline haut/bas */
    min-height: 180px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Supprimer les spacers wp:spacer internes (hauteur définie inline) */
.sd-categories .wp-block-column .wp-block-spacer {
    display: none !important;
    height: 0 !important;
}

/* Hover — légère élévation + border-top accent */
.sd-categories .wp-block-column:hover {
    transform: translateY(-5px);
    box-shadow: var(--sd-shadow-lg);
    border-top-color: var(--sd-color-2) !important;
}

/* Icône SVG Font Awesome dans chaque carte */
.sd-categories .wp-font-awesome-icon svg {
    color: var(--sd-color-7) !important;
    fill: var(--sd-color-7) !important;
    width: 2.5em;
    height: 2.5em;
    transition: transform var(--sd-transition);
}

/* Micro-animation sur l'icône au hover de la carte */
.sd-categories .wp-block-column:hover .wp-font-awesome-icon svg {
    transform: scale(1.12);
}

/* Label de catégorie (H2 dans chaque colonne) */
.sd-categories .wp-block-column h2,
.sd-categories .wp-block-column .wp-block-heading {
    color: var(--sd-color-7) !important;
    font-family: var(--sd-font-heading);
    font-size: 1.05rem !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0.75rem 0 0 !important;
    line-height: 1.3;
}

/* Tablet — grille 3+2 ou scroll horizontal naturel */
@media (max-width: 1000px) {
    .sd-categories .wp-block-columns {
        gap: 1rem !important;
    }
    .sd-categories .wp-block-column {
        min-height: 160px;
        padding: 2rem 1rem 1.5rem !important;
    }
}

/* Mobile — empilement vertical */
@media (max-width: 690px) {
    .sd-categories .wp-block-columns {
        flex-direction: column !important;
        gap: 0.875rem !important;
    }
    .sd-categories .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        min-height: 120px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 1.25rem 1.5rem !important;
        gap: 1rem;
    }
    .sd-categories .wp-block-column h2,
    .sd-categories .wp-block-column .wp-block-heading {
        margin-top: 0 !important;
        font-size: 1rem !important;
    }
    .sd-categories .wp-font-awesome-icon svg {
        width: 1.75em;
        height: 1.75em;
    }
}


/* ==========================================================
   4. SECTION NEWSLETTER — Split horizontal éditorial
   Texte à gauche (eyebrow + titre + description),
   formulaire à droite (inputs verticaux + CTA).
   ========================================================== */
.sd-newsletter {
    background-color: var(--sd-color-8) !important;
    padding-top: calc(var(--sd-section-pad) - 1.5rem) !important;
    padding-bottom: calc(var(--sd-section-pad) - 1.5rem) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    position: relative;
    overflow: hidden;
}

/* Filets décoratifs subtils en haut et bas */
.sd-newsletter::before,
.sd-newsletter::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 85%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(8, 56, 53, 0.18) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.sd-newsletter::before { top: 0; }
.sd-newsletter::after  { bottom: 0; }

/* Colonnes wrapper Gutenberg — masquer la colonne 1/3 vide héritée */
.sd-newsletter .wp-block-columns {
    align-items: stretch;
    justify-content: center;
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 0 !important;
    position: relative;
    z-index: 1;
}

.sd-newsletter .wp-block-columns > .wp-block-column:first-child,
.sd-newsletter .wp-block-columns > .wp-block-column[style*="33.33%"] {
    display: none !important;
    flex: 0 0 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sd-newsletter .wp-block-columns > .wp-block-column:last-child {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Wrapper interne Blocksy — split horizontal en grille 2 colonnes
   Layout : [titre | form  ]
            [desc  | (form) ] */
.sd-newsletter .ct-block-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    row-gap: 0;
    align-items: center;
    text-align: left;
}

/* Colonne gauche — titre H3 (ligne 1) */
.sd-newsletter .ct-block-wrapper > h3,
.sd-newsletter .ct-block-wrapper > .wp-block-heading {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    font-family: var(--sd-font-heading) !important;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    font-weight: 700;
    color: #555 !important;
    margin: 0 !important;
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: uppercase;
    text-align: center;
    display: block;
    position: relative;
}

/* Eyebrow micro-label injecté au-dessus du titre */
.sd-newsletter h3::before,
.sd-newsletter .wp-block-heading::before {
    content: 'Restez connectés';
    display: block;
    font-family: var(--sd-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sd-color-2);
    margin-bottom: 0.95rem;
}

/* Trait décoratif sous le titre — centré */
.sd-newsletter h3::after,
.sd-newsletter .wp-block-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background-color: var(--sd-color-2);
    border-radius: 2px;
    margin: 1.1rem auto 0;
}

/* Colonne gauche — description (ligne 2) */
.sd-newsletter .ct-block-wrapper > p,
.sd-newsletter > .wp-block-group__inner-container p,
.sd-newsletter .wp-block-columns p {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: center;
    margin: 1.4rem auto 0 !important;
    max-width: 460px;
    font-family: var(--sd-font-body);
    font-size: 1rem;
    color: var(--sd-color-3);
    line-height: 1.7;
    opacity: 0.95;
    text-align: center;
}

/* Colonne droite — formulaire (occupe les 2 lignes) */
.sd-newsletter .ct-block-wrapper > .ct-newsletter-subscribe-block {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
    max-width: 460px;
    margin: 0;
}

.sd-newsletter .ct-newsletter-subscribe-form {
    display: block;
}

/* Pile verticale : nom, email, bouton */
.sd-newsletter .ct-newsletter-subscribe-form-elements,
.sd-newsletter .ct-newsletter-subscribe-form-elements[data-columns="3"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 0.75rem !important;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

/* Inputs — encadrés, fond gris très clair (raccord avec section map), focus ring vert */
.sd-newsletter input[type="text"],
.sd-newsletter input[type="email"] {
    width: 100%;
    padding: 1.05em 1.4em;
    border: 1px solid rgba(8, 56, 53, 0.18);
    background: var(--sd-color-6);
    font-family: var(--sd-font-body);
    font-size: 0.95rem;
    color: var(--sd-color-4);
    outline: none;
    border-radius: var(--sd-radius-sm);
    transition:
        border-color var(--sd-transition),
        box-shadow var(--sd-transition);
    box-shadow: 0 1px 2px rgba(8, 56, 53, 0.04);
}

.sd-newsletter input::placeholder {
    color: rgba(85, 95, 122, 0.85);
    font-weight: 400;
}

.sd-newsletter input[type="text"]:focus,
.sd-newsletter input[type="email"]:focus {
    border-color: var(--sd-color-2);
    box-shadow:
        0 0 0 3px rgba(0, 117, 94, 0.12),
        0 1px 2px rgba(8, 56, 53, 0.04);
}

/* Bouton submit — vert foncé compact, flèche animée (taille raccord avec map CTA) */
.sd-newsletter .ct-newsletter-subscribe-form button,
.sd-newsletter button[type="submit"],
.sd-newsletter .ct-newsletter-subscribe-form button.wp-element-button {
    background-color: var(--sd-color-1);
    color: var(--sd-color-7);
    border: 2px solid var(--sd-color-1);
    padding: 0.85em 1.85em;
    border-radius: var(--sd-radius-sm);
    font-family: var(--sd-font-body);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition:
        background-color var(--sd-transition),
        border-color var(--sd-transition),
        transform var(--sd-transition),
        box-shadow var(--sd-transition);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    line-height: 1.5;
    width: auto;
    align-self: center;
    margin-top: 0.5rem;
}

.sd-newsletter .ct-newsletter-subscribe-form button:hover,
.sd-newsletter button[type="submit"]:hover {
    background-color: var(--sd-color-2);
    border-color: var(--sd-color-2);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 117, 94, 0.32);
}

.sd-newsletter .ct-newsletter-subscribe-form button::after {
    content: '→';
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
    transform: translateX(0);
    transition: transform var(--sd-transition);
}

.sd-newsletter .ct-newsletter-subscribe-form button:hover::after {
    transform: translateX(3px);
}

.sd-newsletter .ct-widgets-wrapper {
    text-align: center;
}

/* Tablet — réduire le gap entre colonnes */
@media (max-width: 1000px) {
    .sd-newsletter .ct-block-wrapper {
        column-gap: 2.5rem;
    }
}

/* Mobile — empiler texte / formulaire en vertical */
@media (max-width: 690px) {
    .sd-newsletter .ct-block-wrapper {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 2rem;
        text-align: center;
    }

    .sd-newsletter .ct-block-wrapper > h3,
    .sd-newsletter .ct-block-wrapper > .wp-block-heading {
        grid-column: 1;
        grid-row: auto;
        text-align: center;
    }

    .sd-newsletter h3::before,
    .sd-newsletter .wp-block-heading::before {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
    }

    .sd-newsletter h3::after,
    .sd-newsletter .wp-block-heading::after {
        margin: 1.1rem auto 0;
    }

    .sd-newsletter .ct-block-wrapper > p {
        grid-column: 1;
        grid-row: auto;
        margin: 1rem auto 0 !important;
        max-width: 460px;
        text-align: center;
    }

    .sd-newsletter .ct-block-wrapper > .ct-newsletter-subscribe-block {
        grid-column: 1;
        grid-row: auto;
        max-width: 460px;
        margin: 0 auto;
    }
}


/* ==========================================================
   5. SECTION MAP — Split éditorial : carte à gauche, texte à droite
   Cohérent avec la grammaire de la section infolettre.
   ========================================================== */
.sd-map {
    background-color: var(--sd-color-6) !important;
    padding-top: calc(var(--sd-section-pad) - 1.5rem) !important;
    padding-bottom: calc(var(--sd-section-pad) + 3rem) !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    position: relative;
    overflow: hidden;
}

/* Filets décoratifs subtils en haut/bas */
.sd-map::before,
.sd-map::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(960px, 85%);
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(8, 56, 53, 0.18) 50%,
        transparent 100%
    );
    pointer-events: none;
}

.sd-map::before { top: 0; }
.sd-map::after  { bottom: 0; }

/* Wrapper colonnes — split horizontal centré */
.sd-map .wp-block-columns {
    max-width: 1100px;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
    gap: clamp(2.5rem, 6vw, 5.5rem) !important;
    position: relative;
    z-index: 1;
}

/* Colonnes de la section map — chacune 50% */
.sd-map .wp-block-column {
    flex-basis: 50% !important;
    max-width: 50%;
    padding: 0 !important;
}

/* Colonne carte (gauche) — iframe stylé */
.sd-map .wp-block-column:has(iframe) iframe,
.sd-map iframe[src*="google.com/maps"] {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 460px !important;
    border: 0;
    border-radius: var(--sd-radius-md);
    box-shadow:
        0 1px 2px rgba(8, 56, 53, 0.06),
        0 16px 40px rgba(8, 56, 53, 0.16);
    transition: box-shadow var(--sd-transition);
}

.sd-map iframe:hover {
    box-shadow:
        0 1px 2px rgba(8, 56, 53, 0.06),
        0 22px 56px rgba(8, 56, 53, 0.22);
}

/* Colonne texte (droite) — alignée centre verticalement et horizontalement */
.sd-map .wp-block-column:not(:has(iframe)) {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Titre H3 — même grammaire que infolettre */
.sd-map h3,
.sd-map .wp-block-heading {
    font-family: var(--sd-font-heading) !important;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    font-weight: 700;
    color: #555 !important;
    margin: 0 !important;
    line-height: 1.15;
    letter-spacing: normal;
    text-transform: uppercase;
    text-align: center;
    display: block;
    position: relative;
}

/* Eyebrow micro-label injecté au-dessus du titre */
.sd-map h3::before,
.sd-map .wp-block-heading::before {
    content: 'Plan d\2019 acc\E8 s';
    display: block;
    font-family: var(--sd-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sd-color-2);
    margin-bottom: 0.95rem;
}

/* Trait décoratif sous le titre */
.sd-map h3::after,
.sd-map .wp-block-heading::after {
    content: '';
    display: block;
    width: 56px;
    height: 2px;
    background-color: var(--sd-color-2);
    border-radius: 2px;
    margin: 1.1rem auto 0;
}

/* Description */
.sd-map .wp-block-column p {
    font-family: var(--sd-font-body);
    font-size: 1rem;
    color: var(--sd-color-3);
    line-height: 1.7;
    max-width: 460px;
    margin: 1.4rem auto 1.75rem !important;
    text-align: center;
    opacity: 0.95;
}

/* Bouton CTA — hérite du style global, juste l'ajustement de la flèche */
.sd-map .wp-block-buttons {
    justify-content: center !important;
    margin-top: 0;
}

.sd-map .wp-block-button.is-style-fill .wp-block-button__link {
    padding: 0.85em 1.85em;
    font-size: 0.92rem;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    transition:
        background-color var(--sd-transition),
        transform var(--sd-transition),
        box-shadow var(--sd-transition);
}

.sd-map .wp-block-button.is-style-fill .wp-block-button__link::after {
    content: '→';
    display: inline-block;
    font-size: 1.05em;
    line-height: 1;
    transition: transform var(--sd-transition);
}

.sd-map .wp-block-button.is-style-fill .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 117, 94, 0.32);
}

.sd-map .wp-block-button.is-style-fill .wp-block-button__link:hover::after {
    transform: translateX(3px);
}

/* Tablet — gap réduit */
@media (max-width: 1000px) {
    .sd-map .wp-block-columns {
        gap: 2.5rem !important;
    }
    .sd-map iframe[src*="google.com/maps"] {
        height: 380px !important;
    }
}

/* Mobile — empiler verticalement, carte au-dessus */
@media (max-width: 690px) {
    .sd-map .wp-block-columns {
        flex-direction: column !important;
        gap: 2rem !important;
    }

    .sd-map .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
        width: 100%;
    }

    .sd-map iframe[src*="google.com/maps"] {
        height: 300px !important;
        border-radius: var(--sd-radius-sm);
    }

    .sd-map h3::before,
    .sd-map .wp-block-heading::before {
        font-size: 0.68rem;
        letter-spacing: 0.2em;
    }
}


/* ==========================================================
   6. COHÉRENCE INTER-SECTIONS
   Supprimer l'espace excessif entre les content blocks Blocksy
   (les blocs shortcode n'ont pas de marge par défaut mais les
    groupes wp-block-group en rajoutent parfois).
   ========================================================== */

/* Supprimer les paragraphes vides Gutenberg (<!-- wp:paragraph --><p></p>)
   qui créent des espaces indésirables entre les sections */
.wp-block-post-content .wp-block-paragraph:empty,
.entry-content .wp-block-paragraph:empty,
.wp-block-paragraph:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Neutralise le margin-block-end Gutenberg sur les wrappers du contenu homepage.
   Structure: entry-content > wp-block-group.alignfull > wp-block-shortcode > [contenu]
   Le margin s'applique à chaque niveau imbriqué dans un is-layout-constrained/flow. */
.entry-content > .wp-block-group,
.entry-content > .wp-block-shortcode,
.wp-block-group.alignfull > .wp-block-shortcode,
.wp-block-group.is-layout-constrained > .wp-block-shortcode {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-block: 0 !important;
}

.sd-hero,
.sd-infobar,
.sd-categories,
.sd-newsletter {
    margin-block: 0 !important;
}

/* Neutralise le margin-block-end Gutenberg sur les wrappers data-block
   (enfants directs du entry-content de la homepage) */
.smart-sticky-block,
[data-block] {
    margin-block: 0 !important;
}

/* ==========================================================
   7. FOOTER — Séparateur visuel
   L'infobar sticky sert de séparateur — pas de border-top ici
   pour éviter une ligne de 1px visible entre l'infobar et le footer.
   ========================================================== */