/* ═══════════════════════════════════════════════════════════════════
   Vorg Content — Feature Hero ([vorg_hero])
   Reproduit la structure Elementor existante mais 100% CSS custom.
   Sortie deterministe → CLS = 0, pas de dependance au JS Elementor.
   ═══════════════════════════════════════════════════════════════════ */

/* Hero plein-ecran : break-out du conteneur Elementor / theme.
   left:50% + margin-left:-50vw permet a la section d'occuper toute la
   largeur du viewport meme dans un container contraint (typique Elementor).

   overflow-x: clip → empeche un scrollbar horizontal du au break-out
   overflow-y: visible → autorise le SVG decoratif a deborder verticalement
   sous le hero (effet visuel cherche : SVG qui "spille" dans la section
   suivante, comme dans le hero Elementor original). */
.vh {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    background: var(--vh-bg, #F2F7F8);
    min-height: var(--vh-min-h, 200px);
    overflow-x: clip;
    overflow-y: visible;
    /* Police Ubuntu sur tout le hero (et ses enfants par heritage) */
    font-family: 'Ubuntu', sans-serif;
}

/* SVG decoratif — positionne par rapport au hero entier (pas a .vh__inner)
   pour pouvoir etre place ou que ce soit (gauche, droite, deborde, etc.) */
.vh__svg-wrap {
    position: absolute;
    top: var(--vh-svg-top, 0);
    left: 4%;
    pointer-events: none;
    z-index: 0;
}
.vh__svg {
    display: block;
    width: var(--vh-svg-w, 128px);
    height: auto;
    max-width: 100%;
}

/* Conteneur interieur : grid 3 colonnes pour que le titre soit
   VISUELLEMENT centre dans le viewport, quelque soit la presence ou non
   de l'image droite. La premiere colonne (vide) sert de spacer pour
   equilibrer le poids visuel de l'image droite a droite. */
.vh__inner {
    width: 100%;
    /* Pas de max-width par defaut → contenu pleine largeur (comme Elementor).
       Si l'admin definit Vorg Content > Hero > Largeur max contenu, la var
       prend le relais et le contenu se recentre. */
    max-width: var(--vh-max-w, none);
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: var(--vh-right-w, 240px) 1fr var(--vh-right-w, 240px);
    align-items: center;
    position: relative;
    min-height: var(--vh-min-h, 200px);
}

/* Colonne centre : titre + sous-titre (toujours en colonne 2) */
.vh__center {
    grid-column: 2;
    text-align: center;
    padding: 16px 20px;
    z-index: 1;
    position: relative;
}
.vh__title {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    color: var(--vh-title-color, #2C7873) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}
.vh__subtitle {
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 16px !important;
    color: var(--vh-subtitle-color, #3D4F52) !important;
    margin: 8px 0 0 !important;
    line-height: 1.5 !important;
}

/* Colonne droite : dimensions FIXES (visual harmony). On ne stretch PAS pour
   que la colonne reste a 320x200 meme si le hero grandit en hauteur (ce qui
   peut arriver avec un titre long + subtitle). Sinon le ratio change et
   object-fit:cover crope plus que prevu sur les cotes.
   Si le hero est plus haut que 200px, la colonne reste centree verticalement. */
.vh__right {
    grid-column: 3;
    width: 100%;
    height: var(--vh-min-h, 200px);
    overflow: hidden;
    z-index: 1;
    position: relative;
}
.vh__image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    object-fit: cover !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    /* Reduit les colonnes laterales pour donner plus de place au titre */
    .vh__inner {
        grid-template-columns: 80px 1fr 80px;
        min-height: var(--vh-min-h-m, 150px);
    }
    .vh {
        min-height: var(--vh-min-h-m, 150px);
    }
    .vh__svg {
        width: calc(var(--vh-svg-w, 128px) * 0.7);
    }
    .vh__title {
        font-size: 28px !important;
    }
}

@media (max-width: 600px) {
    /* Sur tres petits ecrans, colonne droite cachee : titre prend toute la largeur */
    .vh__inner {
        grid-template-columns: 60px 1fr 0;
    }
    .vh__right {
        display: none;
    }
    .vh__svg {
        width: calc(var(--vh-svg-w, 128px) * 0.5);
    }
    .vh__title {
        font-size: 24px !important;
    }
    .vh__subtitle {
        font-size: 14px !important;
    }
    .vh__center {
        padding: 12px 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Liste des sources d'images ([vorg_hero_sources])
   Affichee typiquement sur la page Mentions legales pour creditter
   les auteurs des photos utilisees dans les heros.
   ═══════════════════════════════════════════════════════════════════ */
.vh-sources {
    font-family: 'Ubuntu', sans-serif;
    margin: 1.5em 0;
}
.vh-sources__title {
    color: #2C7873;
    margin: 0 0 0.8em;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}
.vh-sources__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.vh-sources__item {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eaeaea;
}
.vh-sources__item:first-child {
    padding-top: 0;
}
.vh-sources__item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.vh-sources__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 40px;
    overflow: hidden;
    border-radius: 4px;
    background: #F9F4EF;
    display: block;
}
.vh-sources__thumb-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: none !important;
}
.vh-sources__meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vh-sources__page {
    color: #1F2D30;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}
.vh-sources__credit {
    color: #3D4F52;
    font-size: 14px;
    line-height: 1.5;
}
.vh-sources__credit a {
    color: #2C7873;
    text-decoration: underline;
}
.vh-sources__credit a:hover {
    color: #1F2D30;
}

@media (max-width: 600px) {
    .vh-sources__item {
        gap: 12px;
    }
    .vh-sources__thumb {
        flex-basis: 50px;
        width: 50px;
        height: 32px;
    }
    .vh-sources__title {
        font-size: 18px;
    }
}