/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/


/* =============================================
   Portfolio Search
   ============================================= */

.ohio-portfolio-search-wrap {
    margin-bottom: 40px;
    position: relative;
}

.ohio-portfolio-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: inherit;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease;
}

.ohio-portfolio-search-input:focus {
    border-color: rgba(0, 0, 0, 0.5);
}

.ohio-portfolio-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

/* =============================================
   Tag Picto — hover sur vignette portfolio
   ============================================= */

/* Wrapper : centré sur la vignette, flex pour afficher plusieurs pictos */
.portfolio-item:not(.-with-slider) .tag-pictos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    opacity: 0;
    display: flex;
    gap: 12px;
    transition: opacity var(--clb-transition-function, ease) var(--clb-transition-duration, 0.3s);
}

.portfolio-item:hover .tag-pictos,
.portfolio-item .tag-pictos.-passe {
    opacity: 1;
}

.tag-picto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag-picto img {
    display: block;
    width: 120px;
    height: auto;
}

/* =============================================
   Portfolio — Champs ACF overlay (strategy + custom fields)
   ============================================= */

.portfolio-item .project-custom-field {
    color: #fff;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}/* =============================================
   Boutons -small -outlined — contour 1px
   ============================================= */
.button.-outlined.-without-text.-small {
    border-width: 1px;
}

/* =============================================
   Portfolio External Link Button
   ============================================= */

.portfolio-item .project-external-link {
    margin-top: 12px;
}

/* =============================================
   Portfolio Search (no-results)
   ============================================= */

.ohio-portfolio-search-no-results {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.35);
}

/* =============================================
   Hamburger Menu — image footer en bas du popup
   ============================================= */
.clb-popup.hamburger-nav {
    isolation: isolate;
}
.clb-popup.hamburger-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1680 / 286;
    background-image: url('images/LE-POLE_image_footer.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* =============================================
   Hamburger Menu Standard — paires parent + enfants
   ============================================= */

/* Menu : grille 2 colonnes, flux colonne (items 1-4 → col 1, 5-11 → col 2) */
.hamburger-nav:not(.type2):not(.type3) .menu {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-auto-flow: column;
    align-items: start;
}

/* Items 9-11 ancrés en col 2 (sinon ils débordent en col 3) */
.hamburger-nav:not(.type2):not(.type3) .menu > li:nth-child(9)  { grid-column: 2; grid-row: 5; }
.hamburger-nav:not(.type2):not(.type3) .menu > li:nth-child(10) { grid-column: 2; grid-row: 6; }
.hamburger-nav:not(.type2):not(.type3) .menu > li:nth-child(11) { grid-column: 2; grid-row: 7; }

/* Chaque li : flex interne + ancrage pour le sous-menu absolu */
.hamburger-nav:not(.type2):not(.type3) .menu > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    gap: 2.5rem;
}

/* Lien parent : moitié gauche du li */
.hamburger-nav:not(.type2):not(.type3) .menu > li > a {
    flex: 0 0 calc(50% - 1.25rem);
    box-sizing: border-box;
}

/* Items sans enfants : le lien prend tout le li */
.hamburger-nav:not(.type2):not(.type3) .menu > li:not(.has-submenu) > a {
    flex: 0 0 100%;
}

/* Aligne le 1er enfant sur la ligne de base du parent (annule le padding-top hérité de .mega-menu-item) */
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item > ul > li:first-child {
    padding-top: 0;
}

/* Sous-menu hors flux : n'affecte pas la hauteur du li parent */
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item > ul {
    position: absolute;
    top: 0;
    left: calc(50% + 1.25rem);
    width: calc(50% - 1.25rem);
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}

/* Élève le mega-menu-item au-dessus de ses frères pour que le sous-menu
   absolu ne soit pas masqué par un li suivant (will-change:transform crée
   un contexte d'empilement par item, DOM-order gagne sinon) */
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item:hover,
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item.active {
    z-index: 1;
}

/* Affiche les enfants au hover du parent */
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item:hover > ul,
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item.active > ul {
    opacity: 1;
    visibility: visible;
}

/* Annule les transforms Ohio au hover */
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item:hover > ul > *,
.hamburger-nav:not(.type2):not(.type3) .menu .mega-menu-item.active > ul > * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* =============================================
   Portfolio — événements passés en noir & blanc
   ============================================= */
.portfolio-item.-event-past .image-holder {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}
.portfolio-item.-event-past:hover .image-holder {
    filter: grayscale(0%);
}

/* =============================================
   Blog grid — bouton play vidéo centré sur la vignette
   ============================================= */
.blog-item .image-holder {
    position: relative;
}
.blog-item .clb-post-video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: auto;
}

/* =============================================
   Page Le Pôle — conteneur épinglé (position: fixed)
   Ohio applique left: calc(--clb-container-offset * -1) sur .e-con-full
   pour le full-width en position:relative, ce calcul est faux en fixed
   (référence viewport ≠ référence document).
   Spécificité (0,7,0) > rule Ohio (0,6,0) pour l'emporter avec !important.
   ============================================= */
.elementor-page .page-container:not(.-full-w) .elementor .elementor-element-7b43e81.e-con-full.e-parent,
.elementor-page .page-container.-full-w .elementor .elementor-element-7b43e81.e-con-full.e-parent {
    left: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 100vw !important;
    width: 100vw !important;
}

/* =============================================
   Header — CTA button (.btn-optional)
   ============================================= */

.button.btn-optional {
    background-color: #1D1D1B;
    border-color: #1D1D1B;
    color: var(--clb-color-white);
}

.button.btn-optional:hover {
    background-color: #282825;
    border-color: #282825;
    color: var(--clb-color-white);
}

/* =============================================
   Portfolio — Carousel : Horizontal (grid_6 / layout6)
   =============================================

/* Overlay transparent (supprime le fond blanc par-dessus l'image) */
.portfolio-item.-layout6 .overlay::after {
    background-color: rgba(255, 255, 255, 0);
}

/* Supprime le pattern de points (radial-gradient ::before) sur tous les devices */
.portfolio-item.-layout6 .project-content::before {
    content: none;
}

/* Carousel Horizontal — hauteur fullscreen : 92vh
   Chaîne de 4 éléments à synchroniser (parent natif : 100vh / 68vh) :
   1. wrapper .portfolio-projects.-full-vh  (parent : 100vh via .-full-vh)
   2. outer-stage                           (parent : 100vh via .clb-slider.-full-vh)
   3. slide .clb-slider-item.-full-vh       (parent : 100vh via .-full-vh.clb-slider-item)
   4. .project-content                      (parent :  68vh via layout6 rule)            */

/* 1 — Wrapper externe */
.portfolio-projects.-full-vh:has(.portfolio-onepage-slider.grid_6) {
    height: 92vh;
}

/* 2 — Outer stage (track scrollable des slides) */
.portfolio-onepage-slider.grid_6 .clb-slider-outer-stage {
    height: 92vh;
}

/* 3 — Chaque slide individuelle */
.portfolio-onepage-slider.grid_6 .clb-slider-item.-full-vh {
    height: 92vh;
}

/* 4 — Zone de contenu textuel */
.portfolio-item.-layout6.-full-vh .project-content {
    height: 92vh;
}

/* Tablet 769px – 1180px : 92vh */
@media screen and (min-width: 769px) and (max-width: 1180px) {
    .portfolio-projects.-full-vh:has(.portfolio-onepage-slider.grid_6) {
        height: 92vh;
    }
    .portfolio-onepage-slider.grid_6 .clb-slider-outer-stage {
        height: 92vh;
    }
    .portfolio-onepage-slider.grid_6 .clb-slider-item.-full-vh {
        height: 92vh;
    }
    .portfolio-item.-layout6.-full-vh .project-content {
        height: 92vh;
    }
}

/* Mobile ≤ 768px : 75vh */
@media screen and (max-width: 768px) {
    .portfolio-projects.-full-vh:has(.portfolio-onepage-slider.grid_6) {
        height: 75vh;
    }
    .portfolio-onepage-slider.grid_6 .clb-slider-outer-stage {
        height: 75vh;
    }
    .portfolio-onepage-slider.grid_6 .clb-slider-item.-full-vh {
        height: 75vh;
    }
    .portfolio-item.-layout6.-full-vh .project-content,
    .portfolio-item.-layout6.-full-vh .project-content.-with-featured-video {
        height: 75vh !important;
    }
    .portfolio-item.-layout6 .project-content.-left.animated-holder.-with-featured-video {
        padding-top: 112px;
    }
    .portfolio-onepage-slider.grid_6 .clb-slider-nav-btn,
    .scroll-bar-container.grid_6 {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Desktop ≥ 1181px : overlay positionné à 50%, 25% de largeur, contenu centré verticalement */
@media (min-width: 1181px) {
    .portfolio-item.-layout6 .overlay {
        position: absolute;
        top: 0;
        left: 50%;
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .portfolio-item.-layout6 .project-content {
        min-height: auto;
        height: auto;
        padding-top: 0;
    }
}

/* Tablet 769px – 1180px : overlay plus large */
@media screen and (min-width: 769px) and (max-width: 1180px) {
    .portfolio-item.-layout6 .overlay {
        position: absolute;
        top: 0;
        left: 50%;
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
    }
    .portfolio-item.-layout6 .project-content {
        min-height: auto;
        height: auto;
        padding-top: 0;
    }
}

/* layout6 — H3 taille fixe desktop sur tous les breakpoints
   Parent desktop  : clamp(h3-min, 2.25vw+…, h3-max) → rétrécit sur petits écrans
   Parent mobile   : var(--clb-h1-font-size-min)       → trop grand
   On fixe la valeur max (h3-font-size) sans clamp, tous breakpoints. */
.portfolio-item.-layout6 .project-content h3.headline {
    font-size: var(--clb-h3-font-size);
    letter-spacing: var(--clb-h3-letter-spacing);
    line-height: var(--clb-h3-line-height);
}

/* =============================================
   Portfolio Carousel Horizontal — bug slider-with-bullets
   ============================================= */

/* Le JS ajoute .slider-with-bullets sur <body> dès qu'un .portfolio-onepage-slider
   contient un .clb-slider-pagination — même pour grid_6 (carousel multi-items)
   qui n'a pas de barre latérale verticale.
   Le CSS parent applique alors margin-right sur .header, décalant le menu sticky.
   On annule ce décalage lorsque seul le carousel grid_6 est présent. */
body.slider-with-bullets:not(.slider-with-bullets-type8):has(.portfolio-onepage-slider.grid_6) .header {
    margin-right: 0;
}

/* =============================================
   Header-3 — Search bouton à la suite du menu
   ============================================= */

/* Le conteneur nav + search remplace le positionnement absolu du .nav seul */
.header.header-3:not(.-mobile) .nav-with-search {
    position: absolute;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

/* Annule le positionnement absolu hérité sur .nav à l'intérieur du wrapper */
.header.header-3:not(.-mobile) .nav-with-search .nav {
    position: static;
    left: auto;
    transform: none;
}

/* Masque le search dans .menu-optional pour éviter le doublon (desktop) */
.header.header-3:not(.-mobile) .menu-optional .icon-button-holder:has(.search-global) {
    display: none;
}

/* Masque le bouton CTA dans .menu-optional pour éviter le doublon avec .nav-with-search */
.header.header-3 .menu-optional .button-group {
    display: none;
}

/* Slide transparent (carousel grid_6) — masque overlay et contenu */
.portfolio-item.-layout6.-transparent-slide .project {
    display: none;
}

/* Carousel grid_6 — position du background-image (Ohio défaut : left bottom) */
.portfolio-item.-layout6 .portfolio-item-image {
    background-position: center top;
}

/* =============================================
   Carousel grid_6 — Couleur texte overlay + header selon fond de slide
   =============================================

   data-slide-theme="light"  : fond sombre → texte blanc dans le slide
   data-slide-theme="dark"   : fond clair  → texte sombre dans le slide
   Tag portfolio "fond-sombre" → data-slide-theme="light"

   Sur le header :
     .has-carousel-typo    → init (JS ajouté au chargement si le carrousel est sur la page)
     .carousel-light-typo  → header blanc  (fond sombre)
     .carousel-dark-typo   → header sombre (fond clair)
   ============================================= */

/* Overlay — texte blanc sur fond sombre */
.portfolio-item.-layout6[data-slide-theme="light"] .headline,
.portfolio-item.-layout6[data-slide-theme="light"] .category a,
.portfolio-item.-layout6[data-slide-theme="light"] .date,
.portfolio-item.-layout6[data-slide-theme="light"] .project-details p,
.portfolio-item.-layout6[data-slide-theme="light"] .button.-text {
    color: #fff;
}

/* Overlay — texte sombre sur fond clair */
.portfolio-item.-layout6[data-slide-theme="dark"] .headline,
.portfolio-item.-layout6[data-slide-theme="dark"] .category a,
.portfolio-item.-layout6[data-slide-theme="dark"] .date,
.portfolio-item.-layout6[data-slide-theme="dark"] .project-details p,
.portfolio-item.-layout6[data-slide-theme="dark"] .button.-text {
    color: #1D1D1B;
}

/* Header — transition douce sur le changement de slide */
.header.header-3.has-carousel-typo:not(.-sticky) .hamburger-outer,
.header.header-3.has-carousel-typo:not(.-sticky) .btn-optional {
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease;
}

/* Header — slide fond sombre : hamburger en blanc */
.header.header-3.carousel-light-typo:not(.-sticky) .hamburger-outer {
    color: #fff !important;
}

/* CTA button — inversé sur fond sombre */
.header.header-3.carousel-light-typo:not(.-sticky) .btn-optional {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #fff !important;
}

/* Header — slide fond clair : reset hamburger */
.header.header-3.carousel-dark-typo:not(.-sticky) .hamburger-outer {
    color: inherit;
}

/* CTA button — reset sur fond clair */
.header.header-3.carousel-dark-typo:not(.-sticky) .btn-optional {
    background-color: #1D1D1B !important;
    border-color: #1D1D1B !important;
    color: var(--clb-color-white) !important;
}

/* Logo dynamique — crossfade selon fond de slide
   Ohio utilise position:absolute + opacity sur .dark/.light.
   On force display:block sur les deux versions pour que la transition CSS fonctionne,
   puis on joue uniquement sur opacity.

   carousel-dark-typo  → fond clair  : logo sombre visible
   carousel-light-typo → fond sombre : logo blanc visible
*/

/* Transition activée sur les deux versions dès que le carrousel est présent */
#masthead.has-carousel-typo .logo-dynamic .light,
#masthead.has-carousel-typo .logo-dynamic .dark {
    display: block !important;
    transition: opacity 0.4s ease;
}

/* Masquer .logo principal quand le carousel gère l'affichage — évite le doublon.
   opacity:0 plutôt que display:none : le logo reste dans le flux et maintient
   la hauteur/alignement du header. Les spans logo-dynamic sont superposés via
   position:absolute (même approche qu'Ohio en header-dynamic-typo natif).
   opacity:0 n'a pas besoin de !important : la valeur inline d'Ohio (display:flex
   lors du un-sticky) ne nous gêne pas, on masque via opacity indépendamment. */
#masthead.has-carousel-typo:not(.-sticky) .logo {
    opacity: 0;
}

/* Superposer .dark et .light au même endroit (centré verticalement dans .branding)
   sans ajouter de hauteur dans le flux — évite le doublon de hauteur. */
#masthead.has-carousel-typo:not(.-sticky) .logo-dynamic .light,
#masthead.has-carousel-typo:not(.-sticky) .logo-dynamic .dark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* Slide fond sombre → logo blanc visible, logo sombre masqué */
#masthead.carousel-light-typo .logo-dynamic .light {
    opacity: 1 !important;
}
#masthead.carousel-light-typo .logo-dynamic .dark {
    opacity: 0 !important;
}
/* Mobile : inverser logo-mobile sur fond sombre */
#masthead.carousel-light-typo:not(.-sticky) .logo-mobile img {
    filter: brightness(0) invert(1);
    transition: filter 0.4s ease;
}

/* Slide fond clair → logo sombre visible, logo blanc masqué */
#masthead.carousel-dark-typo .logo-dynamic .dark {
    opacity: 1 !important;
}
#masthead.carousel-dark-typo .logo-dynamic .light {
    opacity: 0 !important;
}
/* Mobile : logo-mobile en couleur naturelle sur fond clair */
#masthead.carousel-dark-typo:not(.-sticky) .logo-mobile img {
    filter: none;
    transition: filter 0.4s ease;
}

/* Mobile : logo-dynamic masqué — logo-mobile prend le relais sur toutes les pages.
   Précédemment limité à has-carousel-typo, ce qui laissait logo-dynamic visible
   (doublon logo) sur les pages sans carousel (projets, programmation…).          */
@media screen and (max-width: 768px) {
    .header .logo-dynamic {
        display: none !important;
    }

    .header-wrap:not(.page-container) {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Slider nav — fond semi-transparent sur tous les sliders */
.clb-slider .clb-slider-nav-btn,
.clb-smooth-slider .clb-slider-nav-btn {
    background-color: rgba(216, 216, 216, 0.35);
}

/* Slider nav — flèches prev/next : transition couleur selon slide active */
/* Annuler le margin-right imposé par .slider-with-bullets (scroll-bar masqué intentionnellement) */
.portfolio-onepage-slider.grid_6 .clb-slider-nav-btn {
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
    margin-right: 0 !important;
}
.portfolio-onepage-slider.grid_6.slider-theme-light .clb-slider-nav-btn {
    color: #fff !important;
}
.portfolio-onepage-slider.grid_6.slider-theme-dark .clb-slider-nav-btn {
    color: #1D1D1B !important;
}

/* Bouton -text pleine hauteur + hover sans débordement */
.e-con:has(> .elementor-widget.button_trio) {
    display: flex;
    flex-direction: column;
}
.elementor-widget.button_trio {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.elementor-widget.button_trio .elementor-widget-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.elementor-widget.button_trio .ohio-widget-holder {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.elementor-widget.button_trio .button {
    flex: 1;
    justify-content: space-between;
    padding-inline:24px;
}
.elementor-widget.button_trio .button.-text:hover,
.elementor-widget.button_trio .button.-text:focus,
.elementor-widget.button_trio .button.-text:active {
    box-shadow: none;
    background-color: var(--clb-color-fill);
    border-radius: var(--clb-button-border-radius-small);
}

.titre_slider {
  pointer-events: none;
}

/* =============================================
   Layout2 — hover : fade titre → "Show project"
   Strategy + ACF restent toujours visibles (hors .show-project)
   Le slide natif Ohio (translate -100%) est conçu pour des éléments
   de même hauteur ; on remplace par un cross-fade opacity.
   ============================================= */

/* grid_2 Minimal — hauteur fixe 50vh (containers empilés de largeurs différentes)
   On sort du padding-bottom (relatif à la largeur) pour une hauteur uniforme en vh. */
.portfolio-projects.grid_2 .card.-metro .image-holder {
    padding-bottom: 0;
    height: 50vh;
}

/* grid_2 — exclure les images picto de la règle -metro qui applique
   position:absolute sur tous les img de .image-holder (collapse du flex container) */
.card.-metro .image-holder .tag-picto img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 120px !important;
    min-width: auto !important;
    height: auto !important;
    object-fit: initial !important;
}

/* Annule le translate Ohio : fade seul sur le titre */
.portfolio-item.-layout2 .show-project .category-holder {
    transition: opacity var(--clb-transition-function) var(--clb-transition-duration);
}
.portfolio-item.-layout2:hover .show-project .category-holder {
    transform: none;
    opacity: 0;
}

/* show-project-link : centré verticalement dans la zone titre, fade in au hover */
.portfolio-item.-layout2 .show-project-link {
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--clb-transition-function) var(--clb-transition-duration);
}
.portfolio-item.-layout2:hover .show-project-link {
    transform: translateY(-50%);
    opacity: 1;
}

/* Bouton Découvrir — style H4 au hover */
.portfolio-item.-layout2:hover .show-project-link a {
    font-size: clamp(var(--clb-h4-font-size-min), var(--clb-h4-clamp-size), var(--clb-h4-font-size));
    font-weight: bold;
    letter-spacing: var(--clb-h4-letter-spacing);
    line-height: var(--clb-h4-line-height);
}


/* =============================================
   Footer — H1 Le PÔLE — Arts en Circulation
   ============================================= */
.footer-headline {
    font-size: 10vw;
    letter-spacing: -2.8px;
    padding-left: 72px;
    line-height: 1;
    margin: 0;
    font-weight: 600;
    color:#FDEB3E;
    line-height: 90%;
}

@media screen and (min-width: 769px) and (max-width: 1180px) {
    .footer-headline {
        font-size: 113px;
        padding-left: 36px;
    }
    #colophon .page-container.-full-w {
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media screen and (max-width: 768px) {
    .footer-headline {
        font-size: 66px;
        padding-left: 24px;
    }
    #colophon .page-container.-full-w {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* Footer — colonnes dimensionnées au contenu */
@media (min-width: 769px) {
    .site-footer .widgets.vc_row {
        display: flex;
        margin-left: 0;
        margin-right: 0;
    }
    .site-footer .widgets .widgets-column {
        flex: 0 0 auto;
        width: auto;
    }
    .site-footer .widgets .widgets-column:nth-child(1) {
        flex: 0 0 40%;
    }
    .site-footer .widgets .widgets-column:nth-child(2) {
        margin-left: auto;
    }
}

/* =============================================
   Footer — image décorative pleine largeur
   Positionnée en absolu au bas du footer, sous le contenu (z-index: -1)
   isolation: isolate sur #colophon crée un stacking context pour que
   z-index: -1 reste au-dessus du background du footer mais sous son contenu
   ============================================= */
#colophon {
    position: relative;
    isolation: isolate;
}
#colophon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1680 / 286;
    background-image: url('images/LE-POLE_image_footer.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

.options-group{
    border-top: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 768px) {
    .options-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── options-group li : border bottom jaune sur le h6.title ─────────────────── */
.options-group > li {
    border-top: none;
    padding-top: 0;
}
.options-group > li .title {
    border-bottom: var(--clb-spacer-1) solid #FDEB3E;
    padding-bottom: var(--clb-spacer-1);
    margin-bottom: var(--clb-spacer-1);
}
.options-group > li p {
    margin-top: 0;
}

/* ── project-task : titre et contenu sur la même ligne ──────────────────────── */
.project-task {
    display: flex;
    align-items: baseline;
    gap: var(--clb-spacer-2);
}
.project-task .title {
    text-transform: uppercase;
    margin-bottom: 0;
    white-space: nowrap;
    display: none;
}
.project-task p {
    margin: 0;
}

/* ── Page Builder : même spacing vertical que .project-content .holder ──────── */
.project-custom {
    padding-top: var(--clb-grid-gutter-5x);
    padding-bottom: var(--clb-grid-gutter-5x);
}
.project-custom > * + * {
    margin-top: var(--clb-grid-gutter-3x);
}

/* ── Fonds page projet : galerie vs détails ────────────────────────────────── */
.single-ohio_portfolio .page-container:not(.-full-w) {
    background-color: #ffffff;
}
.single-ohio_portfolio .page-container.-full-w {
    background-color: #C95B45;
    color: var(--clb-color-white);
}
.single-ohio_portfolio .page-container.-full-w .project-task .title,
.single-ohio_portfolio .page-container.-full-w .headline {
    color: var(--clb-color-white);
}

/* ── Sticky header — pages projet ────────────────────────────────────────────
   Ohio gate ses règles sur :not(.-sticky). On les réplique pour .-sticky
   uniquement sur .single-ohio_portfolio, avec dépendance à light-typo.         */

/* Global : tous les headers sticky masquent logo-dynamic (carousel side-effect) */
.header.-sticky .logo-dynamic {
    display: none;
}

/* Pages projet : réactiver logo-dynamic */
body.single-ohio_portfolio .header.-sticky .logo-dynamic {
    display: block;
}

/* ── Surcharges light-typo — pages projet ────────────────────────────────────
   Ohio cible :not(.-sticky) en non-sticky → spécificité (0,6-7,x).
   Nos règles ajoutent :not(.dark-scheme) pour égaler cette spécificité et
   gagner grâce à l'ordre de cascade (notre CSS est chargé après Ohio).
   En sticky : les règles Ohio :not(.-sticky) ne s'appliquent pas → nos règles
   (sans :not(.dark-scheme)) suffisent déjà.                                   */

/* Hamburger → blanc */
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .hamburger-outer {
    color: var(--clb-color-white) !important;
}

/* Logo → filter invert (sticky + non-sticky) */
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .branding img {
    filter: brightness(0) invert(1) !important;
}

/* Liens menu → inherit (noir) */
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .menu:not(.mobile-menu) > li > a {
    color: inherit !important;
}

/* Icon buttons → inherit (sombre) */
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .icon-button:not(.-overlay-button):not(.-small),
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .cart-button-total a,
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .button.-flat,
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .button.-text {
    color: inherit !important;
}

/* CTA → style natif forcé */
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .btn-optional {
    background-color: #1D1D1B !important;
    border-color: #1D1D1B !important;
    color: var(--clb-color-white) !important;
}
body.single-ohio_portfolio:not(.dark-scheme) .header-dynamic-typo.light-typo .btn-optional:hover {
    background-color: #282825 !important;
    border-color: #282825 !important;
    color: var(--clb-color-white) !important;
}

/* Recent Projects — grid_1 Classic : force les items "Wide 2 col" à rester 1 colonne + equal height vignette */
.portfolio-projects.grid_1 .portfolio-item-wrap.double-width .card.-metro .image-holder {
    padding-bottom: 100% !important;
}
@media (min-width: 1200px) {
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-lg-12 { width: calc(8.3333333333% * 6) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-lg-8  { width: calc(8.3333333333% * 4) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-lg-6  { width: calc(8.3333333333% * 3) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-lg-4  { width: calc(8.3333333333% * 2) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-lg-2  { width: calc(8.3333333333% * 1) !important; }
}
@media (min-width: 769px) and (max-width: 1199px) {
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-md-12 { width: calc(8.3333333333% * 6) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-md-8  { width: calc(8.3333333333% * 4) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-md-6  { width: calc(8.3333333333% * 3) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-md-4  { width: calc(8.3333333333% * 2) !important; }
    .portfolio-projects.grid_1 .portfolio-item-wrap.double-width.vc_col-md-2  { width: calc(8.3333333333% * 1) !important; }
}

/* grid_1 Classic — title sur une ligne avec ellipsis */
.portfolio-projects.grid_1 .portfolio-item h4.title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hamburger — masquer la caption "Menu" et son padding résiduel sur mobile */
@media (max-width: 768px) {
    .hamburger-caption {
        display: none;
    }
    .header .mobile-hamburger.-right .hamburger-outer {
        padding-left: 0;
    }
}

/* Masquer l'icône recherche quand Ohio est en mode mobile (classe ajoutée par JS) */
.is-mobile-menu .header .icon-button.search-global {
    display: none !important;
}

/* Masquer la caption "Scroll" dans le carrousel Recent Projects layout grid_6 */
.scroll-bar-container.grid_6 {
    display: none !important;
}

/* Masquer les badges de catégories fonctionnelles (lieu) dans tous les layouts */
/* Exception visible : regards-sur-rue, hors-les-murs */
.category-holder .category:has(a[href*="/armand-gatti/"]),
.category-holder .category:has(a[href*="/chapiteaux/"]),
.category-holder .category:has(a[href*="/festival-regards-sur-rue/"]),
.category-holder .category:has(a[href*="/theatre-le-pole/"]) {
    display: none !important;
}

/* Projet — catégories stylées comme les tags (badge) */
.project-content .headline-meta .category-holder {
    display: flex;
    flex-wrap: wrap;
}
.project-content .headline-meta .category {
    background: var(--clb-color-badge-fill);
    font-weight: var(--clb-text-medium);
    gap: var(--clb-gap);
    line-height: var(--clb-h1-line-height);
    padding: var(--clb-spacer-05) var(--clb-spacer-2);
    min-height: var(--clb-badge-height);
    font-size: var(--clb-font-size-caption);
    transition-duration: var(--clb-transition-duration);
    white-space: nowrap;
    border-radius: var(--clb-border-radius);
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}
.project-content .headline-meta .category-holder .category:not(:last-child)::after {
    content: none;
}

/* Projet — figcaption alignée à gauche */
.project-custom figcaption {
    text-align: left;
}

/* Projet layout3 mobile */
@media (max-width: 768px) {
    .project.-layout3 .project-gallery > img:nth-of-type(n+3) {
        display: none;
    }
    .project.-layout3 .project-content,
    .project.-layout3 ~ .page-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Boutons de filtre sans résultat — masqués */
/* Variante grisée (désactivée) :
.portfolio-filter [data-isotope-filter].is-unavailable {
    opacity: 0.25;
    pointer-events: none;
    cursor: default;
    transition: opacity 0.2s ease;
} */
.portfolio-filter [data-isotope-filter].is-unavailable {
    display: none;
}

/* ── Filtre groupé (Lieu / Type / Âge) ─────────────────────────────────────── */
.portfolio-filter.-grouped .-unlist {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.portfolio-filter.-grouped.-center .-unlist {
    align-items: center;
}

/* Centrage des boutons qui wrappent à la ligne */
.portfolio-filter.-grouped.-center .filter-header,
.portfolio-filter.-grouped.-center .filter-row {
    justify-content: center;
}

/* Ligne "Filter by / All" et chaque ligne de groupe */
.portfolio-filter.-grouped .filter-header,
.portfolio-filter.-grouped .filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Label de groupe */
.portfolio-filter.-grouped .filter-by-label,
.portfolio-filter.-grouped .filter-group-label {
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.5;
    pointer-events: none;
    margin-right: 4px;
}

/* Masquer le compteur */
.portfolio-filter.-grouped a .num {
    display: none;
}

/* Supprimer les séparateurs "/" — spécificité égale au parent pour l'écraser */
.portfolio-filter.-grouped li:not(:first-child):not(:last-child)::after {
    content: none;
}

/* Bouton actif dans le filtre groupé */
.portfolio-filter.-grouped [data-isotope-filter].is-active {
    opacity: 1;
    font-weight: 600;
    color: #C95B45;
}

/* Pictos accessibilité — espacement entre icônes */
.access-pictos img + img {
    margin-left: 4px;
}

/* Widget "Autres évènements" — padding bottom desktop + tablet */
@media screen and (min-width: 769px) {
    .ohio-child-related-projects {
        padding-bottom: 8vh;
    }
}

/* Carousel horizontal (grid_6) — masquer headline-meta et project-details en mobile */
@media screen and (max-width: 768px) {
    .grid_6 .headline-meta,
    .grid_6 .project-details {
        display: none;
    }
}