.elementor-kit-8{--e-global-color-primary:#172A5A;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#101828;--e-global-color-accent:#B08D57;--e-global-color-28faa1a:#8A8F98;--e-global-color-6e28b62:#F2F0EC;--e-global-color-d4ef71f:#4E8CA5;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:82px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:82px;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:47px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:47px;--e-global-typography-text-font-family:"Source Sans 3";--e-global-typography-text-font-size:1rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5rem;--e-global-typography-accent-font-family:"Source Sans 3";--e-global-typography-accent-font-size:1.08rem;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.5rem;--e-global-typography-c42f1ed-font-family:"Montserrat";--e-global-typography-c42f1ed-font-size:25px;--e-global-typography-c42f1ed-font-weight:600;--e-global-typography-c42f1ed-line-height:25px;--e-global-typography-783494e-font-family:"Montserrat";--e-global-typography-783494e-font-size:1rem;--e-global-typography-783494e-font-weight:600;--e-global-typography-27023e3-font-family:"Source Sans 3";--e-global-typography-27023e3-font-size:0.9rem;--e-global-typography-27023e3-font-weight:400;--e-global-typography-27023e3-line-height:1.17rem;--e-global-typography-5995e18-font-family:"Montserrat";--e-global-typography-5995e18-font-size:47px;--e-global-typography-5995e18-font-weight:700;--e-global-typography-5995e18-line-height:47px;--e-global-typography-250a090-font-family:"Montserrat";--e-global-typography-250a090-font-size:135px;--e-global-typography-250a090-font-weight:600;--e-global-typography-250a090-line-height:135px;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 p{margin-block-end:0px;}.elementor-kit-8 a{color:var( --e-global-color-text );}.elementor-kit-8 a:hover{color:#285162A6;}.elementor-kit-8 h1{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1400px;}.e-con{--container-max-width:1400px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1500px){.elementor-kit-8{--e-global-typography-primary-font-size:77px;--e-global-typography-primary-line-height:77px;--e-global-typography-secondary-font-size:45px;--e-global-typography-secondary-line-height:45px;--e-global-typography-c42f1ed-font-size:24.5px;--e-global-typography-c42f1ed-line-height:24.5px;--e-global-typography-5995e18-font-size:44px;--e-global-typography-5995e18-line-height:44px;--e-global-typography-250a090-font-size:115px;--e-global-typography-250a090-line-height:115px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;}}@media(max-width:1300px){.elementor-kit-8{--e-global-typography-primary-font-size:71px;--e-global-typography-primary-line-height:71px;--e-global-typography-secondary-font-size:43px;--e-global-typography-secondary-line-height:43px;--e-global-typography-accent-font-size:1.04rem;--e-global-typography-accent-line-height:1.4rem;--e-global-typography-c42f1ed-font-size:24px;--e-global-typography-c42f1ed-line-height:24px;--e-global-typography-5995e18-font-size:40px;--e-global-typography-5995e18-line-height:40px;--e-global-typography-250a090-font-size:100px;--e-global-typography-250a090-line-height:100px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:950px;}.e-con{--container-max-width:950px;}}@media(max-width:1024px){.elementor-kit-8{--e-global-typography-primary-font-size:64px;--e-global-typography-primary-line-height:64px;--e-global-typography-secondary-font-size:38px;--e-global-typography-secondary-line-height:38px;--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-line-height:1.4rem;--e-global-typography-c42f1ed-font-size:23px;--e-global-typography-c42f1ed-line-height:23px;--e-global-typography-5995e18-font-size:37px;--e-global-typography-5995e18-line-height:37px;--e-global-typography-250a090-font-size:80px;--e-global-typography-250a090-line-height:80px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:700px;}.e-con{--container-max-width:700px;}}@media(max-width:767px){.elementor-kit-8{--e-global-typography-primary-font-size:35px;--e-global-typography-primary-line-height:35px;--e-global-typography-secondary-font-size:28px;--e-global-typography-secondary-line-height:28px;--e-global-typography-text-font-size:0.95rem;--e-global-typography-text-line-height:1.3rem;--e-global-typography-accent-font-size:0.9rem;--e-global-typography-accent-line-height:1.25rem;--e-global-typography-c42f1ed-font-size:22px;--e-global-typography-c42f1ed-line-height:22px;--e-global-typography-783494e-font-size:0.95rem;--e-global-typography-27023e3-font-size:0.85rem;--e-global-typography-27023e3-line-height:1rem;--e-global-typography-5995e18-font-size:34px;--e-global-typography-5995e18-line-height:34px;--e-global-typography-250a090-font-size:60px;--e-global-typography-250a090-line-height:60px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:90%;}.e-con{--container-max-width:90%;}}/* Start custom CSS *//* ==========================================================
   GENERAL — RESET / UTILITAIRES
   ========================================================== */
html, body {
    overflow-x: hidden; /* Empêche le scroll horizontal */
}

.icon-flex .elementor-icon {
    display: flex;
}

a {
    transition: 300ms; /* Liens smooth hover */
}

.liens-blancs a {
    color: #ffffff !important;
}

.liens-blancs a:hover {
    opacity: 0.7;
}

.liens-decorations a {
    text-decoration: underline !important;
}

strong, b, .liens-decorations a {
    font-weight: 700 !important;
}

/* ==========================================================
   CARROUSEL LOGOS
   ========================================================== */
.elementor-kit-8 .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
}

.slider-logos {
    mask-image: linear-gradient(to right, transparent 0, #000 20%, #000 80%, transparent 100%);
}

/

/* ==========================================================
   MEGA MENU — Centrage + transition
   ========================================================== */
.elementskit-megamenu-panel {
    transition: 400ms !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Largeur Mega Menu pour 1024px à 1040px si besoin */
@media (min-width: 1024px) and (max-width: 1040px) {
    .elementskit-megamenu-panel {
        width: 750px !important; /* Ajuster selon widget */
    }
}

/* ==========================================================
   BOUTON COOKIE — Element Kit
   ========================================================== */
.elementor-kit-8 button:hover {
    background-color: #0B1533;
}

/* ==========================================================
   FILTER CSS COLORS — Icônes / images
   ========================================================== */
.filter-css-blanc {
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(0%) 
            hue-rotate(24deg) brightness(111%) contrast(100%);
}

/* ==========================================================
   CUSTOM POSITIONS — Centre & responsive
   ========================================================== */
.position-center-x {
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 1300px) {
    .position-relative-tablette-paysage {
        position: relative !important;
    }
}

@media (max-width: 1024px) {
    .position-relative-tablette {
        position: relative !important;
    }
}

@media (max-width: 767px) {
    .position-relative-mobile {
        position: relative !important;
    }
}

/* ==========================================================
   CUSTOM HEIGHT
   ========================================================== */
.max-height {
    height: 100%;
}

/* ==========================================================
   CUSTOM MAP — 100% hauteur
   ========================================================== */
.custom-map,
.custom-map .elementor-custom-embed,
.elementor-custom-embed {
    height: 100%;
}


.custom-list a {
    display: inline !important;
}

/* ==========================================================
       CARROUSEL LOGO PARTENAIRES  ========================================================== */

.elementor-kit-8 .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

.cky-preference-center, .cky-consent-container .cky-consent-bar {
    border-radius: 0px !important;
}

.cky-title {
    color: #33373a !important;
}

.cky-notice-des {
    color: #8A8F98 !important;
}

.cky-btn {
    border-radius: 0px !important;
    border-color: #285162 !important;
}

.cky-btn-accept, .cky-btn-revisit-wrapper {
    background-color: #33373a !important;
}

.cky-btn-revisit-wrapper:hover button {
    background-color: #33373a !important;
}

.cky-btn-reject, .cky-btn-preferences {
    color: #285162 !important;
}

.cky-btn-accept {
    background-color: #285162 !important;
}

.cky-accordion-btn:hover, .cky-btn-close:hover, .cky-show-desc-btn:hover {
    background-color: transparent !important;
}

/* Personnalisation bandeau cookies */

.cky-consent-bar,
.cky-modal,
.cky-modal .cky-preference-center {
    border-radius: 0 !important;
}

.cky-title {
    color: #0B1533 !important;
}

.cky-notice-des {
    color: #ADADAD !important;
}

.cky-btn {
    border-radius: 0 !important;
    border-color: #B08D57 !important;
}

/* Bouton accepter */
.cky-btn-accept {
    background-color: #B08D57 !important;
    border-color: #B08D57 !important;
    color: #fff !important;
}

/* Bouton refuser et préférences */
.cky-btn-reject,
.cky-btn-preferences {
    color: #B08D57 !important;
    border-color: #B08D57 !important;
}

/* Bouton flottant de réouverture */
.cky-btn-revisit-wrapper {
    background-color: #0B1533 !important;
}

.cky-btn-revisit-wrapper:hover button {
    background-color: #0B1533 !important;
}

/* Hover des éléments */
.cky-accordion-btn:hover,
.cky-btn-close:hover,
.cky-show-desc-btn:hover {
    background-color: transparent !important;
}

/* ==========================================================
   VISUAL PORTFOLIO — Couleurs filtres & pagination
   MS Energies
   ========================================================== */

/* Couleur par défaut */
.vp-filter__style-minimal .vp-filter__item > *,
.vp-filter__style-minimal .vp-filter__item > a {
    color: #6b6b6b !important;
    transition: color .3s ease;
}

/* Hover */
.vp-filter__style-minimal .vp-filter__item > a:hover,
.vp-filter__style-minimal .vp-filter__item > a:focus {
    color: #B08D57 !important;
}

/* Élément actif */
.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active > *,
.vp-filter__style-minimal .vp-filter__item.vp-filter__item-active > a {
    color: #0B1533 !important;
}

/* Pagination */
.vp-pagination__style-minimal .vp-pagination__item > a {
    color: #6b6b6b !important;
    transition: color .3s ease;
}

.vp-pagination__style-minimal .vp-pagination__item > a:hover,
.vp-pagination__style-minimal .vp-pagination__item > a:focus {
    color: #B08D57 !important;
}

.vp-pagination__style-minimal .vp-pagination__item.vp-pagination__item-active > a,
.vp-pagination__style-minimal .vp-pagination__item.vp-pagination__item-active > span {
    color: #0B1533 !important;
}

/* ===========================
   64 DE NAVIGATION LATÉRALE
   Le corps de page se décale de la largeur de la barre. C'est la seule règle qui ne peut pas
   être un réglage Elementor : elle porte sur <body>, qui n'appartient à aucun conteneur.
   =========================== */
body:has(.rail) { padding-left: 80px; }
@media (max-width: 1024px) {
    body:has(.rail) { padding-left: 0; padding-top: 64px; }
}
/* Repli sans :has() — le décalage est alors global, une gouttière vide sur l'article et la 404,
   moins grave qu'une barre qui recouvre le contenu. */
@supports not .elementor-kit-8(:has(*)) {
    body { padding-left: 80px; }
    @media (max-width: 1024px) { body { padding-left: 0; padding-top: 64px; } }
}



/* ===========================
   BURGER ↔ CROIX, AU MÊME ENDROIT
   Elementor laisse le panneau dans le DOM après fermeture, avec style="display: none" : on teste
   l'état VISIBLE, pas la présence, sans quoi la croix ne repart jamais.
   Les deux icônes partagent une cellule de grille et pivotent en sens inverse.
   =========================== */
.rail .menu-toggle { display: grid; place-items: center; }

.rail .menu-toggle > .elementor-widget-icon {
    grid-area: 1 / 1;
    transition: opacity .28s ease,
                transform .45s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear .28s;
}

/* au repos : le burger est là, la croix attend, pivotée */
.rail .menu-toggle > .elementor-widget-icon:not(.rail-croix) { opacity: 1; visibility: visible; transform: rotate(0); }
.rail .rail-croix { opacity: 0; visibility: hidden; transform: rotate(-90deg); }

/* panneau ouvert : ils échangent leurs rôles */
body.panneau-ouvert .rail .menu-toggle > .elementor-widget-icon:not(.rail-croix) { opacity: 0; visibility: hidden; transform: rotate(90deg); }
body.panneau-ouvert .rail .rail-croix { opacity: 1; visibility: visible; transform: rotate(0); transition-delay: 0s; }

/* Repli sans :has() : le burger reste en place, la croix ne s'affiche pas — le panneau se ferme
   alors par le voile ou la touche Échap, rien n'est bloqué. */
@supports not .elementor-kit-8(:has(*)) {
    .rail .rail-croix { display: none; }
}

/* Respect du réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .rail .menu-toggle > .elementor-widget-icon { transition: opacity .01s, visibility 0s; transform: none !important; }
}


/* ===========================
   CENTRAGE DANS LA BARRE
   `.icon-flex` passe .elementor-icon en flex sans justification : les icônes se collent à gauche.
   On ne vise QUE les icônes : appliqué au widget image, le flex crée une dépendance circulaire
   entre la largeur du conteneur et celle de l'image, et le navigateur tranche à une valeur arbitraire.
   =========================== */
.rail .icon-flex .elementor-icon { justify-content: center; display: flex; }


/* ===========================
   LARGEUR DES BLOCS DE LA BARRE
   En colonne, chaque bloc prend toute la largeur de la barre : sans cela il se dimensionne sur son
   contenu, qui se dimensionne sur lui, et le navigateur tranche par une valeur arbitraire.
   En bandeau, largeur automatique pour que les trois blocs se répartissent sur la ligne.
   =========================== */
@media (min-width: 1025px) {
    .rail > .e-con { width: 100%; flex: 0 0 auto; }
}
@media (max-width: 1024px) {
    .rail > .e-con { width: auto !important; flex: 0 0 auto !important; padding: 0 !important; }
    .rail { flex-wrap: nowrap !important; }
}


/* ===========================
   LOGO QUI SE DÉPLIE
   Une seule image : le logo complet. Au repos, la fenêtre est réduite à la largeur du monogramme ;
   à l'ouverture elle s'élargit et le texte se révèle. AUCUNE mise à l'échelle — le dessin garde
   exactement la même taille, seul le texte apparaît à sa droite.
   `max-width: none` est indispensable des deux côtés : sans lui, la fenêtre est plafonnée à la
   largeur de la barre et le conteneur se dimensionne sur l'image qui se dimensionne sur lui.
   =========================== */
.rail .elementor-element.logo-white {
    width: 44px !important;
    max-width: none !important;
    overflow: hidden;
    align-self: flex-start;
    /* l'image est calée à GAUCHE : centrée, elle glisserait vers la droite dès que la
       fenêtre devient plus large qu'elle, et le monogramme ne serait plus immobile */
    text-align: left !important;
    margin-left: 18px;
    will-change: width;
    /* RETOUR. La fenêtre se referme en 160 ms, avant que le panneau ne parte : le texte a disparu
       derrière la barre au moment où le fond s'efface. */
    transition: width .16s cubic-bezier(0, 0, .2, 1);
}
.rail .logo-white img {
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(0%) hue-rotate(24deg) brightness(111%) contrast(100%);
    height: 41px;
    width: auto !important;
    max-width: none !important;
    display: block;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* ALLER. La fenêtre s'ouvre 180 ms après le panneau : le texte suit son arrivée. */
body.panneau-ouvert .rail .elementor-element.logo-white {
    width: 108px !important;
    transition: width .46s cubic-bezier(.22, 1, .36, 1) .18s;
}

/* En bandeau, la place ne manque pas en largeur : le logo est déplié en permanence. */
@media (max-width: 1024px) {
    .rail .elementor-element.logo-white { width: 84px !important; margin-left: 0; }
    .rail .logo-white img { height: 32px; }
    body.panneau-ouvert .rail .elementor-element.logo-white { width: 84px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .rail .elementor-element.logo-white { transition: none; }
}


/* ===========================
   CENTRAGE DU DÉCLENCHEUR EN BANDEAU
   Trois blocs en `space-between` : le milieu n'est centré que si les extrémités font la même
   largeur. Le logo en fait 84, le téléphone 20 — d'où 32 px de décalage. On leur donne la même
   part d'espace, et le milieu se centre de lui-même.
   =========================== */
@media (max-width: 1024px) {
    .rail > .e-con:first-child,
    .rail > .e-con:last-child { flex: 1 1 0 !important; width: auto !important; }
    /* les conteneurs Elementor lisent leur alignement dans --justify-content, pas dans la
       propriété : sans la variable, la règle est ignorée et le téléphone flotte au milieu */
    .rail > .e-con:last-child { --justify-content: flex-end; justify-content: flex-end !important; }
    .rail > .e-con:first-child { --justify-content: flex-start; justify-content: flex-start !important; }
    .rail > .menu-toggle { flex: 0 0 auto !important; }
}

/* ===========================
   FERMETURE — sans latence
   Elementor pose `display: none` par un minuteur calé sur la durée d'entrée : 750 ms pendant
   lesquels le panneau reste à l'écran après le clic. On le fait sortir visuellement dès que la
   classe est retirée ; le `display: none` d'Elementor n'a alors plus rien à cacher.
   =========================== */
body:not(.panneau-ouvert) .elementor-popup-modal {
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s cubic-bezier(.4, 0, 1, 1);
}
body:not(.panneau-ouvert) .elementor-popup-modal .dialog-message {
    transform: translateX(-102%);
    transition: transform .3s cubic-bezier(.4, 0, 1, 1);
    animation: none !important;   /* on coupe l'animation d'Elementor, qui rejouerait l'entrée */
}

/* ===========================
   VERROU DE DÉFILEMENT
   Elementor pose son propre verrou à l'ouverture et ne le retire jamais : son réglage est
   désactivé, le verrou suit la classe — posée au clic, retirée au clic.
   La classe est sur <html> ET <body> : posée sur le seul <body>, elle ne verrouille rien quand
   c'est <html> qui porte le défilement du document, ce qui est le cas ici.
   =========================== */
html.panneau-ouvert,
body.panneau-ouvert { overflow: hidden !important; }
html { scrollbar-gutter: stable; }

/* Le panneau reste défilable pour lui-même — indispensable sur un écran bas — mais son défilement
   ne se propage plus à la page une fois arrivé en bout de course. */
.elementor-popup-modal .dialog-message {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ===========================
   FLÈCHES DE CARROUSEL EN ÉCRAN ÉTROIT
   Les flèches doivent rester HORS des cartes sans toucher le bord de l'écran. Le carrousel vit
   normalement dans un conteneur plafonné à 90 %, ce qui ne laisse que 19,5 px de gouttière pour
   des flèches de 20 : il n'y a pas la place. On la crée — pleine largeur, et une marge interne
   de 44 px au carrousel, où les flèches se logent.
   Le sélecteur ne descend pas de `.e-n-carousel` : les flèches en sont les sœurs, pas les enfants.
   =========================== */
@media (max-width: 1024px) {
    .section-carrousel > .e-con-inner { max-width: 100% !important; }
    .section-carrousel .elementor-widget-n-carousel > .elementor-widget-container { padding-inline: 44px !important; }
}/* End custom CSS */