/**
 * Theme Name: MANERGO
 * Description: Blocksy Child theme
 * Author: Studio CAD
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =============================================================
 * [STUDIO CAD - 13/05/2026] Override Blocksy — charte 2026
 * -------------------------------------------------------------
 * Aligne les éléments natifs Blocksy sur la charte :
 *   - Bouton primaire   : bleu Manergo (#3643BA = palette-color-4)
 *   - Liens             : bleu Manergo
 *   - Focus formulaires : bleu Manergo
 *   - Selection         : bleu Manergo
 *
 * Hover : reste en vert (#124245 = palette-color-2) pour conserver
 * le contraste de marque sur les states secondaires.
 * ============================================================= */
:root {
	/* Liens en bleu primary */
	--theme-link-initial-color: var(--theme-palette-color-4);
	--theme-link-hover-color:   var(--theme-palette-color-2);

	/* Boutons primaires en bleu */
	--theme-button-background-initial-color: var(--theme-palette-color-4);
	--theme-button-background-hover-color:   var(--theme-palette-color-2);
	--theme-button-text-initial-color:       #ffffff;
	--theme-button-text-hover-color:         #ffffff;

	/* Forms : focus en bleu */
	--theme-form-field-border-focus-color:     var(--theme-palette-color-4);
	--theme-form-selection-field-active-color: var(--theme-palette-color-4);

	/* Selection texte en bleu (avec text blanc) */
	--theme-selection-background-color: var(--theme-palette-color-4);
	--theme-selection-text-color:       #ffffff;

	/* Border par défaut : neutre, pas orange */
	--theme-border-color: var(--theme-palette-color-7);
}

@media (min-width: 1400px) {

.ct-header [data-device="desktop"] [data-row="middle"] .ct-header-trigger {
	display: none;	
}
	
}

@media (max-width: 1400px) {
	.ct-header [data-device="desktop"] [data-row="middle"] #header-menu-1 {
	display: none;
}
}


body, h1, h2, h3, h4, h5, h6, label, figcaption, blockquote, blockquote p, .menu a, .site-title, .entry-meta, .mobile-menu, .widget-title, .ct-post-title, .ct-breadcrumbs, .ct-header-text, .site-description, .page-description, .ct-footer-copyright, .ct-widget>*:not(.widget-title){
	/*color: var(--theme-palette-color-1);*/
}

.padding-both-responsive {
    padding-left: 5vw;
	padding-right: 5vw;
}

.padding-left-responsive {
    padding-left: 5vw;
}

.padding-right-responsive {
	padding-right: 5vw;
}

.grid-column-stretch .stk-row {
	height: stretch;
}

.search-results .site-main {
	padding-bottom: 64px;
}


.link-underline-white a {
	text-decoration: underline;
	color: var(--theme-palette-color-8, #ffffff);
	font-weight: 500;
}

.link-underline-white svg {
	fill: var(--theme-palette-color-8, #ffffff);
}

.link-underline-white:hover a {
	color: var(--theme-palette-color-6, #F2B205) !important;
}

.link-underline-white:hover svg {
	fill: var(--theme-palette-color-6, #F2B205) !important;
}


.accordion-brown.stk--is-open .stk-block-accordion__heading {
	background-color: var(--theme-palette-color-3, #380D14) !important;
}

.accordion-brown.stk--is-open .stk-block-heading__text {
	color: var(--theme-palette-color-1, #EDE4DD) !important;
}

.fleche-1, .fleche-2, .fleche-3 {
		height: stretch !important;
    }


.hero-section {
	padding-top: 64px;
}

.text-cover-grid {
	white-space: nowrap;
}

/* ==========================================================================
   HEADER : SÉLECTEUR DE LANGUE (.manergo-lang-switcher)
   ========================================================================== */

.manergo-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Espacement entre les lettres et la barre */
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

/* Style de base des langues */
.manergo-lang-switcher .lang-item {
    text-decoration: none !important;
    color: var(--theme-palette-color-11, #878783) !important; /* Utilise la couleur de ton thème */
    opacity: 0.6; /* Un peu plus clair par défaut pour les langues non-actives */
    transition: all 0.3s ease;
}

/* Effet au survol */
.manergo-lang-switcher .lang-item:hover {
    color: var(--theme-palette-color-5, #E84A2E) !important; /* Passe au Bleu Manergo au survol */
    opacity: 1;
}

/* Style de la langue active */
.manergo-lang-switcher .lang-item.active {
    color: var(--theme-palette-color-5, #E84A2E) !important; /* Bleu Manergo */
    font-weight: 700; /* Plus épais */
    opacity: 1;
}

/* Style de la petite barre de séparation */
.manergo-lang-switcher .lang-separator {
    color: #B5C5C6; /* Couleur grise/neutre */
    opacity: 0.7;
    user-select: none; /* Empêche de pouvoir sélectionner textuellement la barre */
}

/* ==========================================================================
   TABLETTE (max 1024px) : GRILLE EN "S" SUR 2 COLONNES
   ========================================================================== */

@media (max-width: 1000px) {
    /* On force la grille sur 2 colonnes et on nettoie les marges du desktop */
    .home-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; 
    }
    
    .home-grid > * {
        margin: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    /* --- LIGNE 1 : Bloc 01 | Flèche 1 --- */
    .bloc-01 { grid-column: 1; grid-row: 1; }
    .fleche-1 { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; }

    /* --- LIGNE 2 : Flèche 2 | Bloc 02 --- */
    .fleche-2 { grid-column: 1; grid-row: 2; justify-self: center; align-self: center; }
    .bloc-02 { grid-column: 2; grid-row: 2; }

    /* --- LIGNE 3 : Bloc 03 | Flèche 3 --- */
    .bloc-03 { grid-column: 1; grid-row: 3; }
    .fleche-3 { grid-column: 2; grid-row: 3; justify-self: center; align-self: center; }

    /* --- LIGNE 4 : Vide | Bloc 04 --- */
    .bloc-04 { grid-column: 2; grid-row: 4; }
	
	.approche-grid .bloc-photo {
    grid-column: 2;
    grid-row: 4 !important;
}

	.grid-clients > *:nth-last-child(2) {
    order: 2 !important;
}
}

/* ==========================================================================
   MOBILE (max 768px) : 1 COLONNE PROPRE
   ========================================================================== */

@media (max-width: 768px) {
    .home-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* On cache toutes les flèches sur téléphone, plus besoin ! */
    .fleche-1, .fleche-2, .fleche-3 {
        display: none !important;
    }

    /* On force l'empilement vertical classique : 1, 2, 3, 4 */
    .bloc-01 { order: 1; }
    .bloc-02 { order: 2; }
    .bloc-03 { order: 3; }
    .bloc-04 { order: 4; }
	
	.hero-section {
	padding-top: 40px;
}
}




/* ==========================================================================
   GRILLE CLIENTS (.grid-clients)
   ========================================================================== */

/* TABLETTE (jusqu'à 1024px) : 3 Colonnes */
@media (max-width: 1024px) {
    .grid-clients {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* Force 3 colonnes égales */
        gap: 20px !important; /* Ajuste l'espacement entre les cartes selon tes besoins */
    }

    /* On s'assure que chaque carte rentre parfaitement dans sa case sans déborder */
    .grid-clients > * {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* MOBILE (jusqu'à 768px) : 2 Colonnes ou 1 Colonne (pour ne pas écraser les images) */
@media (max-width: 768px) {
    .grid-clients {
        grid-template-columns: repeat(2, 1fr) !important; /* Passe sur 2 colonnes sur téléphone */
        /* Si tu préfères 1 seule colonne sur mobile, remplace "repeat(2, 1fr)" par "1fr" */
        gap: 15px !important;
    }
}



/* ==========================================
   BANDEROLLE DEFILANTE MANERGO (MASTER WRAPPER)
   ========================================== */

.manergo-banderole-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    background-color: transparent; 
    padding: 20px 0;
}

/* Le wagon maître qui contient les deux pistes */
.manergo-banderole-wrapper {
    display: flex;
    width: max-content; /* Force le bloc à prendre la taille cumulée réelle des deux pistes */
    flex-wrap: nowrap;
    /* L'animation est appliquée ICI et passée à 45s pour un défilé très fluide et lent */
    animation: defilement-manergo 40s linear infinite;
    will-change: transform; 
}

.manergo-banderole-piste {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    gap: 50px; 
    padding-right: 50px; /* Espace de transition entre la piste 1 et la piste 2 */
}

.manergo-banderole-texte {
    color: #A89886;
    font-size: 120px;
    font-weight: 500 !important;
    line-height: 1;
    margin: 0;
    font-family: inherit;
    white-space: nowrap;
    flex-shrink: 0; 
}

.manergo-banderole-icon {
    height: 64px; 
    width: auto;
    flex-shrink: 0; 
}

/* Force le texte en blanc pur */
.banderole-chiffres .manergo-banderole-texte {
    color: #FFFFFF !important;
}

/* Transforme l'icône SVG beige en blanc pur via un filtre */
.banderole-chiffres .manergo-banderole-icon {
    filter: brightness(0) invert(1) !important;
}

/* ANIMATION : On translate de -50% car le wrapper contient deux pistes identiques. 
   Arrivé à la moitié, la piste 2 est exactement à la place de la piste 1, le reset est invisible. */
@keyframes defilement-manergo {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* Version Tablette et Mobile */
@media (max-width: 1024px) {
    .manergo-banderole-texte { font-size: 80px; }
    .manergo-banderole-icon { height: 64px; }
    .manergo-banderole-piste { gap: 32px; padding-right: 30px; }
}

@media (max-width: 768px) {
    .manergo-banderole-texte { font-size: 64px; }
    .manergo-banderole-icon { height: 40px; }
    .manergo-banderole-piste { gap: 24px; padding-right: 20px; }
}






/* ==========================================
   SERVICE CARD + -
   ========================================== */

.bouton-service a {
	justify-content:space-between !important;
}
/* content-moins caché par défaut, positionné en absolu par-dessus */
.content-moins {
	width: 100%;
	height: 100%;
	transform: translateY(100%);
	transition: transform 0.4s ease-in-out !important;
	z-index: 10;
}

/* État ouvert */
.content-moins.is-open {
	transform: translateY(0) !important;
}


@media screen and (min-width: 1000px) and (max-width: 1229px) {
	.service-colonne.stk-block-column {
		flex: 0 1 calc(50% - var(--stk-column-gap, 0px) * 1 / 2) !important;
	}
	.services .fleche-un {
		left: 46% !important;
	}
	.services .fleche-deux {
		top: 30% !important;
		right:2% !important;
		transform:rotate(90deg);
	}
	
	.services .fleche-trois {
		bottom: 31% !important;
		right:90% !important;
	}
	.services .fleche-quatre {
		top: 35% !important;
		right:47% !important;
	}

	.services .stk-block-column:nth-child(3) {
		order: var(--stk-col-order-5, initial);
	}
	.services .stk-block-column:nth-child(6) {
		order: var(--stk-col-order-5, initial);
	}
	.services .stk-block-column:nth-child(5) {
		order: var(--stk-col-order-6, initial);
	}
}



/* ==========================================================================
   FOOTER : Menu de navigation (Classe : .menu-nav-footer)
   ========================================================================== */

/* 1. Structure de la liste (Alignement vertical et espacement) */
.menu-menu-produits-footer-container ul,
.menu-menu-produits-footer-container .wp-block-navigation__container, .menu-menu-de-navigation-footer-container ul,
.menu-menu-de-navigation-footer-container .wp-block-navigation__container {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espacement vertical exact entre chaque lien */
}

/* 2. Style initial des liens (Blanc) */
.menu-menu-produits-footer-container a,
.menu-menu-produits-footer-container .wp-block-navigation-item__content, .menu-menu-de-navigation-footer-container a,
.menu-menu-de-navigation-footer-container .wp-block-navigation-item__content {
    color: var(--theme-palette-color-8, #ffffff) !important; /* Blanc pur comme sur la maquette globale */
    font-size: 18px; /* Taille de texte standard, à ajuster si besoin */
    font-weight: 400 !important; /* Graisse normale/regular */
    text-decoration: none !important; /* Suppression du soulignement natif */
    padding: 0 !important;
    transition: color 0.3s ease-in-out; /* Animation de transition fluide */
}

/* 3. Effet au survol (Passage au Jaune Manergo) */
.menu-menu-produits-footer-container a:hover,
.menu-menu-produits-footer-container a:focus,
.menu-menu-produits-footer-container .wp-block-navigation-item__content:hover,
.menu-menu-produits-footer-container .wp-block-navigation-item__content:focus, .menu-menu-de-navigation-footer-container a:hover,
.menu-menu-de-navigation-footer-container a:focus,
.menu-menu-de-navigation-footer-container .wp-block-navigation-item__content:hover,
.menu-menu-de-navigation-footer-container .wp-block-navigation-item__content:focus {
    color: #F1B20C !important; /* Jaune officiel de la charte Manergo */
    text-decoration: none !important;
}





/* ==========================================================================
   FOOTER : Section Contact (.colonne-contact-footer)
   ========================================================================== */

/* 1. Titre */
.colonne-contact-footer h2,
.colonne-contact-footer h3,
.colonne-contact-footer h4,
.colonne-contact-footer .wp-block-heading {
    font-size: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-weight: 500 !important;
    color: var(--theme-palette-color-1, #EDE4DD) !important;
    margin-bottom: 32px !important;
}

/* 2. Liste d'informations */
.colonne-contact-footer .ct-contact-info-block  ul,
.colonne-contact-footer .wp-block-contact-info {
    list-style: none !important;
    padding-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 24px !important; /* Espacement aéré entre chaque ligne */
    margin-bottom: 40px !important;
}

.colonne-contact-footer .ct-contact-info-block li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 300;
}

/* Le trait sous le texte */
.colonne-contact-footer .ct-contact-info-block li a,
.colonne-contact-footer .ct-contact-info-block li span,
.colonne-contact-footer .ct-contact-info-block li .wp-block-contact-info__text {
    color: var(--theme-palette-color-8, #ffffff) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px; /* Décolle le trait du texte pour faire "chic" */
    text-decoration-thickness: 1px; /* Trait très fin */
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

/* Hover en jaune Manergo */
.colonne-contact-footer .ct-contact-info-block li a:hover {
    color: var(--theme-palette-color-6, #F2B205) !important;
    text-decoration-color: var(--theme-palette-color-6, #F2B205) !important;
}

/* Finesse des icônes SVG */
.colonne-contact-footer .ct-contact-info-block li svg {
    width: 24px !important;
    height: 24px !important;
    margin-top: 2px; /* Aligne l'icône avec la première ligne de texte */
    stroke-width: 1.5; /* Rend l'icône plus fine */
}

/* 3. Transformation du bouton (Bordures droites, fond Beige) */
.colonne-contact-footer .wp-block-button__link {
    background-color: var(--theme-palette-color-1, #EDE4DD) !important; /* Beige de la charte */
    color: var(--theme-palette-color-2, #124245) !important; /* Vert sombre pour le texte */
    border-radius: 0 !important; /* Brutalisme : on casse les arrondis */
    padding: 14px 28px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

/* Effet au survol du bouton */
.colonne-contact-footer .wp-block-button__link:hover {
    background-color: var(--theme-palette-color-8, #ffffff) !important;
    transform: translateY(-2px); /* Léger soulèvement */
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.1); /* Ombre géométrique subtile */
}


.colonne-contact-footer .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 6px;
    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23144246'%3E%3Cpath d='M496.1 128L512.1 128L512.1 416L480.1 416L480.1 182.6L155.4 507.3L144.1 518.6L121.5 496L132.8 484.7L457.5 160L224.1 160L224.1 128L496.1 128z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.colonne-contact-footer .wp-block-button__link:hover::after {
    transform: translate(3px, -3px);
}



.ct-footer [data-row="top"] .ct-container-fluid {
	width: 100% !important;
	padding-top: 0px !important;
}

.logo-image-footer {
	margin-top: 80px !important;
    margin-left: 3% !important;
	margin-bottom: 64px !important;
    max-width: 880px !important;
    width: 100%;
    display: block;
}

.logo-image-footer img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .logo-manergo-footer img {
        max-width: 480px !important;
    }
}

@media (max-width: 768px) {
    .logo-manergo-footer img {
        max-width: 220px !important;
    }
}

/* ==========================================================================
   FOOTER : Barre de Copyright (.manergo-copyright-bar)
   ========================================================================== */

.manergo-copyright-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--theme-palette-color-7, #F2B205);
}

.manergo-copyright-bar a {
    color: var(--theme-palette-color-7, #F2B205) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.manergo-copyright-bar a:hover {
    color: var(--theme-palette-color-6, #F2B205) !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .manergo-copyright-bar {
        justify-content: center;
        gap: 16px;
        text-align: center;
    }
}


.logo-partenaire-footer {
    max-height: 45px !important; /* Harmonise la hauteur */
    width: auto !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-left: 32px; /* Gère l'espacement entre eux */
}


/* ==========================================================================
   NOTRE HISTOIRE : Frise
   ========================================================================== */

/* ==========================================================================
   FIL ARIANE
   ========================================================================== */

.ct-breadcrumbs span{
	font-weight:normal;
	font-size:16px:
}

.ct-breadcrumbs a {
	color : var(--theme-palette-color-11);
}
.ct-breadcrumbs .last-item span {
		color : var(--theme-palette-color-5);
}

/* Layout global */
.mgo-sectors {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

@media (min-width: 992px) {
    .mgo-sectors {
        flex-direction: row;
        align-items: stretch;
        gap: 60px;
    }
}


/* ==========================================================================
   Secteurs interactifs (Responsive & Awwwards Effect)
   ========================================================================== */

/* Layout Global */
.mgo-sectors {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin: 60px 0;
    position: relative;
}

@media (min-width: 992px) {
    .mgo-sectors {
        flex-direction: row;
        align-items: flex-start;
        gap: 120px;
    }
}

/* --- COLONNE LISTE --- */
.mgo-sectors-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}
@media (min-width: 992px) {
    .mgo-sectors-list { width: calc(45% - 60px); }
}

/* Ligne Secteur */
.mgo-sector-item {
    position: relative; /* Indispensable pour la miniature absolue */
    display: flex;
    align-items: center;
    padding: 3.5vh 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 24px; /* Plus petit sur mobile */
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 992px) {
    .mgo-sector-item { font-size: 32px; }
}

.mgo-sector-title { position: relative; z-index: 2; }
.mgo-sector-item:last-child { border-bottom: none; }

/* État Hover / Active */
.mgo-sector-item:hover,
.mgo-sector-item.active {
    color: var(--wp--preset--color--palette-color-6, #F2B205);
    padding-left: 12px;
    border-bottom-color: var(--wp--preset--color--palette-color-6, #F2B205);
}

/* --- MINIATURES FLOTTANTES (TABLETTE / MOBILE) --- */
.mgo-sector-title { 
    position: relative; 
    z-index: 5; /* Assure que le texte passe au-dessus de la grande image */
	text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.mgo-sector-thumb {
    position: absolute;
    right: 0;
    top: 50%;
    /* Départ : plus petit, rotation plus forte, et décalé vers le bas */
    transform: translateY(-30%) scale(0.7) rotate(-6deg); 
    width: 120px; /* Légèrement agrandi sur mobile */
    height: 100px;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    /* Transition "Spring" (rebond très subtil et premium) */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); 
    z-index: 1;
    filter: grayscale(100%) brightness(0.6); /* Sombre et grisant au départ */
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Format Tablette : On lâche les chevaux sur la taille ! */
@media (min-width: 600px) {
    .mgo-sector-thumb { 
        width: 240px; /* 2x plus grand qu'avant ! */
        height: 180px; 
        right: 5%; /* On le décale un peu du bord droit */
    }
}

/* Animation d'apparition "Awwwards" */
.mgo-sector-item.active .mgo-sector-thumb {
    opacity: 1;
    /* Arrivée : il remonte, prend sa taille normale et bascule dans l'autre sens */
    transform: translateY(-50%) scale(1) rotate(2deg); 
    right: 16px; 
    filter: grayscale(0%) brightness(0.9); /* Revient en couleur avec une belle luminosité */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 600px) {
    .mgo-sector-item.active .mgo-sector-thumb {
        right: 8%; /* Placement idéal sur tablette */
    }
}

/* On cache la miniature sur Desktop puisqu'on a la grande image à droite */
@media (min-width: 992px) {
    .mgo-sector-thumb { display: none !important; }
}


/* --- GRANDE IMAGE (DESKTOP UNIQUEMENT) --- */
.mgo-sectors-img-wrap {
    display: none; /* Caché par défaut (Mobile/Tablette) */
}

@media (min-width: 992px) {
    .mgo-sectors-img-wrap {
        display: block;
        width: calc(55% - 60px);
        height: calc(100vh - 200px); 
        position: sticky; 
        top: 160px; 
        overflow: hidden;
        background-color: rgba(255,255,255,0.02);
    }
    
    .mgo-img-layer {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.15) translateY(20px); 
        clip-path: inset(100% 0 0 0); 
        filter: grayscale(100%) contrast(120%); 
        transition: 
            clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1),
            transform 1s cubic-bezier(0.25, 1, 0.5, 1),
            filter 1s ease,
            opacity 0.2s ease;
        z-index: 1;
    }

    .mgo-img-layer.active {
        opacity: 1;
        clip-path: inset(0 0 0 0); 
        transform: scale(1) translateY(0); 
        filter: grayscale(0%) contrast(100%); 
        z-index: 2;
    }
	
	.mgo-sector-item:hover,
.mgo-sector-item.active {
    padding-left: 20px;
}
}



/* ==========================================================================
   SECTION CLIENTS : Grille et Animations (Awwwards Style)
   ========================================================================== */

/* 1. Le conteneur de chaque logo */
.logo-client-container {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    will-change: transform, opacity, box-shadow;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. L'animation d'entrée (déclenchée par le JS) */
.logo-client-container.is-visible {
    /* La variable --delay sera injectée par le JS pour l'effet cascade */
    animation: revealLogo 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--delay, 0s);
}

/* Keyframe de l'apparition (Glissement vers le haut + léger dézoom) */
@keyframes revealLogo {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 3. L'effet Hover (Élévation 3D) */
/* On s'assure qu'il ne s'active que si l'élément est déjà visible */
.logo-client-container.is-visible:hover {
    /* On passe d'une opacité de 0.25 à 0.08 pour une ombre ultra douce et élégante sur fond clair */
    /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important; */
    transform: translateY(-8px) scale(1.02) !important; /* Un peu moins haut pour rester naturel */
    z-index: 2;
}

/* 4. L'image du logo à l'intérieur */
.logo-client-img {
    max-width: 100%;
    height: auto;
	transform-origin: center;
    
    /* Effet premium : tous les logos sont gris et légèrement effacés par défaut */
    filter: grayscale(100%) opacity(0.5);
    transition: filter 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Au survol de la case : le logo reprend sa couleur et fait un micro-zoom */
.logo-client-container.is-visible:hover .logo-client-img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}




/* ==========================================================================
   Engagements interactifs (Pleine largeur & Couleurs dynamiques)
   ========================================================================== */

.mgo-eng-container {
    display: flex;
    flex-direction: column;
    /* Force le block à prendre 100% de la largeur de l'écran */
    width: 100%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background-color: #EFEBE1; /* Fond beige de base */
    overflow: hidden; /* Évite les mini-scrolls horizontaux résiduels */
}

.mgo-eng-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 5vw sur les côtés et un peu d'espace vertical */
    padding: 4vh 5vw; 
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    transition: background-color 0.4s ease;
    position: relative;
}

.mgo-eng-item:last-child {
    border-bottom: none;
}

/* --- TYPOGRAPHIE --- */
.mgo-eng-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: normal; /* Fin par défaut pour UTENTION et NOMIE */
    color: #1C3F3B;
    text-transform: uppercase;
    transition: color 0.4s ease;
    display: flex;
    align-items: center;
}

/* Classes spécifiques injectées via le PHP */
.mgo-bold {
    font-weight: bold;
}

.mgo-orange {
    color: #DE4C28; /* Le orange de votre maquette */
    font-weight: 400; /* Équilibre visuel pour le + et le = */
    margin-right: 12px; /* Dégage les symboles du texte */
}


/* --- IMAGES ET FLÈCHES --- */
.mgo-eng-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 240px;
    height: 120px;
}

.mgo-eng-arrow {
    color: #1C3F3B;
    position: absolute;
    right: 0;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.mgo-eng-img {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    filter: grayscale(100%);
}

/* ÉTAT ACTIF / SURVOL */


/* La couleur de fond récupère la variable CSS injectée dans le HTML */
.mgo-eng-item.active {
    background-color: var(--hover-bg); 
}

/* Le texte devient clair */
.mgo-eng-item.active .mgo-eng-title {
    color: #EFEBE1; 
}

/* Garder le orange intact même quand le fond change */
.mgo-eng-item.active .mgo-orange {
    color: #FFFFFF; 
}

/* Disparition de la flèche */
.mgo-eng-item.active .mgo-eng-arrow {
    opacity: 0;
    transform: translateX(-20px);
}

/* Apparition de l'image */
.mgo-eng-item.active .mgo-eng-img {
    opacity: 1;
    transform: translateX(0);
    filter: grayscale(0%);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}




/* WPFORM Custom */

.contact-form {
    margin: 0px !important;
}

/* =========================================================
   1. SECTION TITRE (.form-titre-section)
   ========================================================= */

.form-titre-section {
	margin-top: 64px !important;
}

.form-titre-section h2 {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 5px;
    font-size: 28px;
    font-weight: 800;
    color: var(--wp--preset--color--palette-color-2) !important; 
}

.form-titre-section .form-number {
    font-size: 80px;
    font-weight: 200;
    color: var(--wp--preset--color--palette-color-2) !important;
    line-height: 0.8;
}

.form-titre-section .form-number-dot {
    color: var(--wp--preset--color--palette-color-5) !important;
    font-weight: bold;
}

.form-titre-section hr.solid {
    border: none;
    border-top: 1px solid #D4C5B5;
    margin: 0 0 24px 0;
}

/* =========================================================
   2. SECTION CARTES (.form-demande)
   ========================================================= */

.form-demande ul.wpforms-image-choices {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 25px !important;
    width: 100% !important;
}

.form-demande .wpforms-image-choices-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
}

.form-demande .wpforms-image-choices-item label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    background-color: var(--wp--preset--color--palette-color-8) !important;
    padding: 30px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: none !important; 
    border-radius: 0px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.form-demande .wpforms-image-choices-item-indicator,
.form-demande .wpforms-selected-indicator {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.form-demande .wpforms-image-choices-item .wpforms-image-choices-image {
    width: 32px !important; 
    height: 32px !important;
    margin: 0 0 25px 0 !important;
    display: block !important;
}

.form-demande .wpforms-image-choices-item .wpforms-image-choices-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: all 0.3s ease;
}

.form-demande .wpforms-image-choices-item .wpforms-image-choices-label {
    display: block !important;
    text-align: left !important;
    width: 100% !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--palette-color-2) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.form-demande .wpforms-image-choices-item .wpforms-image-choices-label::after {
    display: block !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--palette-color-11) !important;
    text-transform: none !important;
    margin-top: 8px !important;
    line-height: 1.4 !important;
}

.form-demande .wpforms-image-choices-item:nth-child(1) .wpforms-image-choices-label::after { content: "Produit standard ou configurable"; }
.form-demande .wpforms-image-choices-item:nth-child(2) .wpforms-image-choices-label::after { content: "Bureau d'études - cahier des charges"; }
.form-demande .wpforms-image-choices-item:nth-child(3) .wpforms-image-choices-label::after { content: "Question technique - documentation"; }
.form-demande .wpforms-image-choices-item:nth-child(4) .wpforms-image-choices-label::after { content: "Décrivez votre situation"; }

.form-demande .wpforms-image-choices-image:after, .form-demande li:has(input:checked) .wpforms-image-choices-image:after {
    opacity: 0 !important;
}


@media (max-width: 698px) {
    .form-demande ul.wpforms-image-choices {
        gap: 8px !important;
    }
	
	.form-demande #wpforms-2519-field_1 li {
		padding-right: 0px !important;
		margin-bottom: 0px !important;
	}
	
	.form-demande .wpforms-image-choices-item label {
		padding: 12px !important;
	}
	
	.form-titre-section .wpforms-field-row h2 {
		line-height: 24px !important;
		font-size: 26px !important;
	}
	
	.form-demande .wpforms-image-choices-item .wpforms-image-choices-label {
		font-size: 14px !important;
	}
	
	.form-number {
		min-width: fit-content !important;
	}
}


/* =========================================================
   3. ÉTAT SÉLECTIONNÉ (Carte active)
   ========================================================= */

.form-demande .wpforms-image-choices-item.wpforms-selected label {
    background-color: var(--wp--preset--color--palette-color-4) !important;
}

.form-demande .wpforms-image-choices-item.wpforms-selected .wpforms-image-choices-label,
.form-demande .wpforms-image-choices-item.wpforms-selected .wpforms-image-choices-label::after {
    color: var(--wp--preset--color--palette-color-1) !important;
}

/* Filtre calculé pour transformer l'icône noire en beige #EDE4DD */
.form-demande .wpforms-image-choices-item.wpforms-selected .wpforms-image-choices-image img {
    filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(697%) hue-rotate(334deg) brightness(101%) contrast(90%) !important;
}


/* =========================================================
   LABELS GLOBAUX (S'applique à tous les titres de champs)
   ========================================================= */
.contact-form .wpforms-field-label {
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--wp--preset--color--palette-color-12) !important; 
    margin-bottom: 20px !important;
    display: block !important;
}

.contact-form .wpforms-field-label .wpforms-required-label {
    color: var(--wp--preset--color--palette-color-5) !important;
    font-weight: 400 !important;
}


/* =========================================================
   4. SECTION LISTES DÉROULANTES ("Vous êtes")
   ========================================================= */


/* Style Global du select (Apparence par défaut et texte sélectionné) */
.contact-form .wpforms-field-select select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--wp--preset--color--palette-color-7) !important;
    border-radius: 0px !important;
    
    /* Couleur du texte UNE FOIS SÉLECTIONNÉ (Variable 12) */
    color: var(--wp--preset--color--palette-color-12) !important; 
    font-size: 16px !important;
    font-weight: 400 !important; /* Légèrement plus lisible que 300 pour du texte foncé */
    
    padding: 0px 30px 10px 0px !important; 
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    cursor: pointer !important;

    /* Icône SVG + */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E84A2E' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 26px !important; 
    background-position: right 0px bottom 6px !important; 
}

/* LE PLACEHOLDER : Couleur quand aucun choix n'est fait (via invalid) */
.contact-form .wpforms-field-select select:invalid,
.contact-form .wpforms-field-select select option[value=""] {
    color: var(--wp--preset--color--palette-color-11) !important; /* Variable 11 (Gris clair) */
}

/* Style du menu déroulant (pour les navigateurs qui l'acceptent) */
.contact-form .wpforms-field-select select option {
    background-color: var(--wp--preset--color--palette-color-8) !important; /* Fond du menu déroulant */
    color: var(--wp--preset--color--palette-color-12) !important; /* Texte des choix */
    padding: 10px !important;
    font-size: 16px !important;
}

/* Comportement au clic (focus) */
.contact-form .wpforms-field-select select:focus {
    outline: none !important;
    border-bottom: 1px solid var(--wp--preset--color--palette-color-12) !important; /* Bordure plus foncée au focus */
}

/* =========================================================
   STYLE POUR LES LISTES DÉROULANTES MODERNES (Choices.js)
   ========================================================= */

/* 1. Le conteneur principal du champ (la ligne) */
.contact-form .wpforms-field-select .choices__inner {
	min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #878783 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    outline: none !important;
    
    /* Injection de la croix SVG + */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E84A2E' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'></line><line x1='5' y1='12' x2='19' y2='12'></line></svg>") !important;
    background-repeat: no-repeat !important;
    background-size: 26px !important; 
    /* Correction de l'alignement : on s'aligne à 8px du bas pour compenser le padding */
    background-position: right 0px bottom 8px !important; 
}

/* 2. Éradiquer le bug blanc et la bordure native au clic */
.contact-form .wpforms-field-select .choices,
.contact-form .wpforms-field-select .choices.is-open,
.contact-form .wpforms-field-select .choices.is-focused {
    background-color: transparent !important;
    overflow: visible !important;
}

.contact-form .wpforms-field-select .choices.is-focused .choices__inner,
.contact-form .wpforms-field-select .choices.is-open .choices__inner {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--wp--preset--color--palette-color-12) !important;
    box-shadow: none !important;
}

/* 3. Cacher la flèche native de Choices.js */
.contact-form .wpforms-field-select .choices[data-type*="select-one"]::after {
    display: none !important;
}

/* 4. Style du texte sélectionné */
.contact-form .wpforms-field-select .choices__list--single {
    padding: 0 !important;
    width: 100% !important;
}

.contact-form .wpforms-field-select .choices__list--single .choices__item {
    color: var(--wp--preset--color--palette-color-12) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

/* 5. Style du placeholder */
.contact-form .wpforms-field-select .choices__list--single .choices__placeholder {
    color: var(--wp--preset--color--palette-color-11) !important;
    opacity: 1 !important; 
}

/* =========================================================
   LE MENU DÉROULANT (La boîte avec les options)
   ========================================================= */

/* Le fond du menu déroulant */
.contact-form .wpforms-field-select .choices__list--dropdown {
    background-color: var(--wp--preset--color--palette-color-8) !important;
    border: none !important; /* Enlève la bordure qui causait le bug graphique */
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    margin-top: 10px !important; /* Écarte bien le menu de la bordure du champ */
    padding: 5px 0 !important;
    z-index: 99 !important;
    word-break: break-word;
}

/* Les textes des choix dans le menu */
.contact-form .wpforms-field-select .choices__list--dropdown .choices__item {
    color: var(--wp--preset--color--palette-color-12) !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
}

.contact-form .choices__button {
	display: none;
}

/* Le choix survolé par la souris */
.contact-form .wpforms-field-select .choices__list--dropdown .choices__item.is-highlighted {
    background-color: var(--wp--preset--color--palette-color-1) !important;
    color: var(--wp--preset--color--palette-color-2) !important;
}

/* =========================================================
   5. SECTION MESSAGE (Champ texte / Textarea)
   ========================================================= */
.contact-form textarea {
    background-color: transparent !important;
    border: 1px solid var(--theme-palette-color-11, #878783) !important; /* Bordure complète contrairement aux selects */
    border-radius: 0px !important;
    color: var(--wp--preset--color--palette-color-11) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    padding: 15px !important;
    width: 100% !important;
    min-height: 120px !important;
    box-shadow: none !important;
    resize: vertical !important; /* Permet d'agrandir uniquement vers le bas */
    transition: border-color 0.3s ease !important;
}

/* Bordure foncée au clic */
.contact-form textarea:focus {
    outline: none !important;
    border-color: var(--wp--preset--color--palette-color-12) !important;
}

/* Style du texte d'exemple (Placeholder) */
.contact-form textarea::placeholder {
    color: var(--theme-palette-color-11, #878783) !important;
    font-weight: 300 !important;
	opacity: 1 !important;
}

/* =========================================================
   04. SECTION COORDONNÉES (Champs de saisie)
   ========================================================= */

/* Réinitialisation minimaliste (Bordure bas uniquement) */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #878783 !important;
    border-radius: 0px !important;
    padding: 0px 0px 10px 0px;
    box-shadow: none !important;
    font-size: 16px !important;
    color: var(--wp--preset--color--palette-color-12) !important;
    transition: border-color 0.3s ease !important;
}

/* Ajustement spécifique pour le champ Téléphone (Drapeau) */
.contact-form input[type="tel"] {
    padding-left: 45px !important; /* Libère l'espace nécessaire pour le drapeau */
}

/* Bordure plus foncée au clic (Focus) */
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus {
    outline: none !important;
    border-bottom-color: var(--wp--preset--color--palette-color-12) !important;
}

/* Couleur et opacité du texte d'exemple (Placeholder) */
.contact-form input::placeholder {
    color: var(--wp--preset--color--palette-color-11) !important;
    font-weight: 300 !important;
    opacity: 1 !important; /* Force l'opacité à 100% contre le style par défaut des navigateurs */
}

.contact-form .wpforms-field {
	margin-bottom: 16px;
}

.contact-form-btn {
	margin-top: 40px !important;
}







/* =========================================================
   RÉSUMÉ PANIER (DESIGN INDUSTRIEL & CARRÉ)
   ========================================================= */

.contact-form .mgo-form-cart-summary,
.mgo-form-cart-summary {
    background-color: transparent !important;
    border: none !important;
    border-top: 2px solid var(--wp--preset--color--palette-color-2, #124245) !important;
    border-radius: 0 !important;
    padding: 30px 0 !important;
    margin-bottom: 40px !important;
}

.mgo-form-cart-summary .mgo-summary-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--palette-color-2, #124245) !important;
    text-transform: uppercase !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
}

.mgo-form-cart-summary .mgo-summary-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.mgo-form-cart-summary .mgo-summary-list li.mgo-summary-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important; 
    align-items: stretch !important;
    padding: 24px !important;
    background-color: var(--wp--preset--color--palette-color-8, #ffffff) !important;
    border: 1px solid var(--wp--preset--color--palette-color-7, #D9D9D6) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: border-color 0.2s ease !important;
}

.mgo-form-cart-summary .mgo-summary-list li.mgo-summary-item:hover {
    border-color: var(--wp--preset--color--palette-color-2, #124245) !important;
}

.mgo-form-cart-summary .mgo-summary-img-wrap {
    width: 120px !important;
    flex-shrink: 0 !important;
    background-color: transparent !important; 
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mgo-form-cart-summary .mgo-summary-img-wrap img {
    width: 100% !important;
    height: 100% !important;
    max-height: 110px !important;
    object-fit: contain !important;
    margin: 0 !important;
    border: none !important;
    mix-blend-mode: multiply !important;
}

/* NOUVEAU : En-tête de la carte (Titre + Badge Quantité) */
.mgo-form-cart-summary .mgo-summary-details {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.mgo-form-cart-summary .mgo-summary-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid var(--wp--preset--color--palette-color-7, #D9D9D6) !important;
}

.mgo-form-cart-summary .mgo-summary-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--wp--preset--color--palette-color-2, #124245) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
}

/* NOUVEAU : Le tag Quantité explicite et élégant */
.mgo-form-cart-summary .mgo-summary-qty-tag {
    background-color: var(--wp--preset--color--palette-color-9, #FAF6F2) !important;
    border: 1px solid var(--wp--preset--color--palette-color-7, #D9D9D6) !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    color: var(--wp--preset--color--palette-color-11, #878783) !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
}

.mgo-form-cart-summary .mgo-summary-qty-tag strong {
    color: var(--wp--preset--color--palette-color-2, #124245) !important;
    font-size: 14px !important;
}

/* Sous-liste des métadonnées */
.mgo-form-cart-summary .mgo-summary-meta {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.mgo-form-cart-summary .mgo-summary-meta li {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: var(--wp--preset--color--palette-color-11, #878783) !important;
    line-height: 1.5 !important;
}

.mgo-form-cart-summary .mgo-summary-meta li::before,
.mgo-form-cart-summary .mgo-summary-meta li::after {
    content: none !important;
    display: none !important;
}

.mgo-form-cart-summary .mgo-summary-meta strong {
    font-weight: 700 !important;
    color: var(--wp--preset--color--palette-color-2, #124245) !important;
    margin-right: 6px !important;
}

/* NOUVEAU : Alignement de la pastille de couleur */
.mgo-form-cart-summary .mgo-meta-color {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.mgo-form-cart-summary .mgo-cart-swatch {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important; /* On garde la pastille ronde, norme du web pour les couleurs */
    border: 1px solid rgba(0,0,0,0.1) !important;
    flex-shrink: 0 !important;
}


.scroller-nav-wrapper {
            display: flex;
            justify-content: flex-end; /* Aligne les flèches à droite au-dessus de la frise */
            gap: 15px;
            margin-bottom: 20px;
        }
.scroller-nav-wrapper button {
            background-color: #3643BA; /* Bleu Manergo */
            color: var(--theme-palette-color-8, #ffffff) !important;
            border: none;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        .scroller-nav-wrapper button:hover {
            background-color: var(--theme-palette-color-8, #ffffff) !important; /* Vert Manergo */
			color: var(--theme-palette-color-4) !important;

        }
		
		
.scroller-nav-wrapper svg {
            width: 32px;
            height: 32px;
        }


.video-cover-hp video {
	height: 120% !important;
}

.video-cover-hp video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
}

.btn-hero-home .stk-link {
	min-width: 280px;
}




@media (max-width: 689.99px){
	.video-cover-hp {display: none !important;}
}

@media (min-width: 689.99px){
	.video-cover-hp-mobile {display: none !important;}
}








@media (min-width: 689.99px) and (max-width: 1024px){
	
	.hide-for-tablet{
		display: none;
	}
	.mobile-non-animation {
		transform:none !important;
	}
}

@media (min-width: 689.99px) and (max-width: 960px){
	
	
}

@media (max-width: 768px){
	
	
}


@media (min-width: 768px) and (max-width: 1024px){

	
}
@media (max-width: 689.98px){
	.hide-for-mobile{
		display: none;
	}
	.mobile-non-animation {
		transform:none !important;
	}
	.mgo-eng-item .mgo-eng-arrow {
		width: 40px !important;
		height: 40px !important;
	}
	.mgo-eng-item.active {
		gap: 16px;
	}
}