/*
Theme Name:   Centre Etiopathie Lausanne
Description:  Theme sur-mesure pour centre-etiopathie-lausanne.ch. Contenu et gabarits en dur dans le theme (pas de page builder, pas de contenu en base de donnees).
Author:       Marc Linsi
Version:      1.0.0
Text Domain:  cel-theme
*/

:root {
    --cel-green: #326963;
    --cel-accent: #95c11f;
}

/*
 * Bandeau d'en-tete image des pages (A propos, Nos cabinets, Contact, Accueil) :
 * meme traitement que le footer (padding autour + coins arrondis) pour unifier l'UI.
 */
.cel-hero-wrap {
    padding: 40px;
}
.cel-hero-wrap .pv-container {
    border-radius: 40px;
    overflow: hidden;
}
.cel-hero-wrap .pv-overlay {
    border-radius: 40px;
    background: rgb(0 0 0 / .45);
}
.cel-hero-title {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}
.cel-hero-title h1 {
    color: #fff;
    margin: 0;
}
@media screen and (max-width: 768px) {
    .cel-hero-wrap {
        padding: 16px;
    }
    .cel-hero-wrap .pv-container,
    .cel-hero-wrap .pv-overlay {
        border-radius: 24px;
    }
}

/* A propos + Contact : images alignees sur les bords du hero (40px, 16px en mobile) */
body.page-id-501 .element_image_text_full,
body.page-id-539 .element_image_text_full {
    max-width: none !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
}
body.page-id-539 .element_image_text_full .sd_content {
    max-width: none !important;
}

/*
 * MOBILE (<= 768px) : meme gouttiere (40px = celle du footer) pour tous les contenus de toutes les pages,
 * meme espace entre image et texte empiles, et pas d'image de hero (le titre reste sur fond vert).
 */
@media screen and (max-width: 768px) {
    :root {
        --cel-gutter: 40px;
        --cel-stack-gap: 32px;
    }
    #home_nav {
        position: sticky !important;
    }
    #main > div:not(.cel-footer-wrap),
    #main > section {
        padding-left: var(--cel-gutter) !important;
        padding-right: var(--cel-gutter) !important;
    }
    #main .container,
    #main .container-fluid,
    #main .row {
        --bs-gutter-x: 0 !important;
    }
    .element_bloc_politique_confidentialite .container,
    .element_column .sd_text,
    .element_image_text_full .sd_2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .element_image_text_full .row {
        --bs-gutter-y: var(--cel-stack-gap);
    }
    #main h1,
    #main h2,
    #main h3 {
        overflow-wrap: anywhere;
    }
    .cel-hero-wrap:not(.cel-map-wrap) .pv-block,
    .cel-hero-wrap:not(.cel-map-wrap) .pv-overlay {
        display: none !important;
    }
    .cel-hero-wrap:not(.cel-map-wrap) .pv-container {
        height: auto !important;
        min-height: 0 !important;
        background: var(--cel-green);
    }
    .cel-hero-wrap:not(.cel-map-wrap) .cel-hero-title {
        position: static;
        padding: 48px 20px;
    }
}

/* Contact : photo mise en miroir + coins arrondis */
body.page-id-539 .element_image_text_full .sd_image img {
    transform: scaleX(-1) !important;
    border-radius: 20px !important;
}

/* Hero page d'accueil : logo a gauche, titre + textes empiles a droite (pas d'image de fond). */
.cel-home-hero {
    background: var(--cel-green);
    border-radius: 40px;
    padding: 60px 0;
}
.cel-home-hero-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 50%;
}
.cel-home-hero h1,
.cel-home-hero h1 span,
.cel-home-hero h1 strong,
.cel-home-hero p {
    color: #fff !important;
}
.cel-home-hero-text1 { margin-top: 24px; }
.cel-home-hero-text2 { margin-top: 24px; text-align: justify; }
@media screen and (max-width: 768px) {
    .cel-home-hero {
        border-radius: 24px;
        padding: 32px 0;
    }
    .cel-home-hero-img { max-width: 180px; }
}
.cel-home-hero h1 { font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.15; margin: 0; }