.elementor-kit-8{--e-global-color-primary:#0C3A5B;--e-global-color-secondary:#1B7BB5;--e-global-color-text:#5A7387;--e-global-color-accent:#FBC53F;--e-global-color-17b10c7:#FFFFFF;--e-global-color-6c7175e:#FBF9F5;--e-global-color-b1f3865:#08293F;--e-global-color-ciel001:#EAF2F8;--e-global-color-bcla003:#E9EFF4;--e-global-color-tfs0007:#C8DEEC;--e-global-typography-primary-font-family:"Urbanist";--e-global-typography-primary-font-size:66px;--e-global-typography-primary-font-weight:600;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Urbanist";--e-global-typography-secondary-font-size:44px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.16em;--e-global-typography-secondary-letter-spacing:-0.018em;--e-global-typography-text-font-family:"Urbanist";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.78em;--e-global-typography-text-letter-spacing:-0.005em;--e-global-typography-accent-font-family:"Urbanist";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.18em;--e-global-typography-6011db5-font-family:"Urbanist";--e-global-typography-6011db5-font-size:14px;--e-global-typography-6011db5-font-weight:500;--e-global-typography-6011db5-text-transform:none;--e-global-typography-6011db5-line-height:1.4em;--e-global-typography-c42f1ed-font-family:"Urbanist";--e-global-typography-c42f1ed-font-size:22px;--e-global-typography-c42f1ed-font-weight:600;--e-global-typography-c42f1ed-line-height:1.28em;--e-global-typography-c42f1ed-letter-spacing:-0.015em;--e-global-typography-783494e-font-family:"Urbanist";--e-global-typography-783494e-font-size:14.5px;--e-global-typography-783494e-font-weight:600;--e-global-typography-783494e-text-transform:none;--e-global-typography-783494e-line-height:1.2em;--e-global-typography-220447f-font-family:"Urbanist";--e-global-typography-220447f-font-size:16px;--e-global-typography-220447f-font-weight:600;--e-global-typography-220447f-line-height:1.34em;--e-global-typography-corps14-font-family:"Urbanist";--e-global-typography-corps14-font-size:14px;--e-global-typography-corps14-font-weight:400;--e-global-typography-corps14-line-height:1.68em;--e-global-typography-corps14-letter-spacing:-0.005em;--e-global-typography-tel0001-font-family:"Urbanist";--e-global-typography-tel0001-font-size:27px;--e-global-typography-tel0001-font-weight:600;--e-global-typography-tel0001-line-height:1.2em;--e-global-typography-tel0001-letter-spacing:-0.02em;--e-global-typography-petxl01-font-family:"Petrona";--e-global-typography-petxl01-font-size:66px;--e-global-typography-petxl01-font-weight:400;--e-global-typography-petxl01-font-style:italic;--e-global-typography-petxl01-line-height:1.1em;--e-global-typography-petl001-font-family:"Petrona";--e-global-typography-petl001-font-size:44px;--e-global-typography-petl001-font-weight:400;--e-global-typography-petl001-font-style:italic;--e-global-typography-petl001-line-height:1.16em;--e-global-typography-cita001-font-family:"Petrona";--e-global-typography-cita001-font-size:18px;--e-global-typography-cita001-font-weight:400;--e-global-typography-cita001-font-style:italic;--e-global-typography-cita001-line-height:1.7em;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 );letter-spacing:var( --e-global-typography-text-letter-spacing );}.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-secondary );}.elementor-kit-8 a:hover{color:var( --e-global-color-primary );}.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 );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.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 );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.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-cita001-font-size:17px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.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:55.5px;--e-global-typography-secondary-font-size:37px;--e-global-typography-c42f1ed-font-size:18px;--e-global-typography-petxl01-font-size:55.5px;--e-global-typography-petl001-font-size:37px;--e-global-typography-cita001-font-size:15.5px;}.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:38px;--e-global-typography-secondary-font-size:29px;--e-global-typography-petxl01-font-size:38px;--e-global-typography-petl001-font-size:29px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.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:31px;--e-global-typography-secondary-font-size:25px;--e-global-typography-petxl01-font-size:31px;--e-global-typography-petl001-font-size:25px;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}.elementor-kit-8 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-8 h2{font-size:var( --e-global-typography-secondary-font-size );line-height:var( --e-global-typography-secondary-line-height );letter-spacing:var( --e-global-typography-secondary-letter-spacing );}.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%); } /* ========================================================== VISUAL PORTFOLIO — Filtre, compteurs, calque et pagination Couleurs branchées sur les globales du site. ========================================================== */ .vp-filter__style-minimal .vp-filter__item > a { color: var(--e-global-color-text); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: color .3s ease; } .vp-filter__style-minimal .vp-filter__item > a:hover, .vp-filter__style-minimal .vp-filter__item > a:focus, .vp-filter__style-minimal .vp-filter__item.vp-filter__item-active > a { color: var(--e-global-color-primary); } .vp-filter__style-minimal .vp-filter__item-count { color: var(--e-global-color-secondary); font-weight: 600; } /* --- Calque de survol des vignettes --------------------------------- L'extension ne colore que le
. Le titre est un

dans un : le lien reprend la couleur de lien du site au lieu d'hériter. On vise le lien et son contenu, avec la variable du calque. ------------------------------------------------------------------ */ .vp-portfolio__items-style-fade { --vp-items-style-fade--overlay__border-radius: 14px; } .vp-portfolio__items-style-fade .vp-portfolio__item-overlay a.vp-portfolio__item-meta, .vp-portfolio__items-style-fade .vp-portfolio__item-overlay a.vp-portfolio__item-meta:hover, .vp-portfolio__items-style-fade .vp-portfolio__item-overlay .vp-portfolio__item-meta-title, .vp-portfolio__items-style-fade .vp-portfolio__item-overlay .vp-portfolio__item-meta-category span { color: var(--vp-items-style-fade--overlay__color); } /* --- Bouton « voir plus » ------------------------------------------- Mêmes valeurs qu'un bouton Premium de la charte : arrondi 14, remplissage 17/28, Urbanist 14,5 px en 600. Le survol reprend le mécanisme de l'effet « style6 » de Premium Addons : un disque grandit depuis le centre jusqu'à remplir le bouton. Le bouton, lui, ne bouge pas. ------------------------------------------------------------------ */ .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more { position: relative; z-index: 0; display: inline-block; overflow: hidden; padding: 17px 28px; border: 1px solid var(--e-global-color-accent); border-radius: 14px; background: var(--e-global-color-accent); color: var(--e-global-color-primary); font-family: "Urbanist", sans-serif; font-size: 14.5px; font-weight: 600; line-height: 1.2; text-transform: none; text-decoration: none; transition: border-color .4s ease, color .4s ease; } .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more::before { content: ""; position: absolute; top: 50%; left: 50%; width: 130%; padding-top: 130%; border-radius: 50%; background: var(--e-global-color-primary); transform: translate(-50%, -50%) scale(0); transition: transform .45s cubic-bezier(.25, .46, .45, .94); z-index: 0; } /* Le libellé et l'indicateur de chargement repassent au-dessus du disque. */ .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more > * { position: relative; z-index: 1; } .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more:hover, .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more:focus { border-color: var(--e-global-color-primary); color: var(--e-global-color-17b10c7); } .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more:hover::before, .vp-pagination__style-minimal .vp-pagination__item > a.vp-pagination__load-more:focus::before { transform: translate(-50%, -50%) scale(1); } /* ========================================================== 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: #115199; } /* ========================================================== 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; } /* ========================================================== GDBM — CHARTE MAQUETTE Uniquement ce qui n'est pas réglable nativement dans Elementor. ========================================================== */ /* --- Mot en Petrona italique dans un titre -------------------------- Mêmes valeurs que les typos globales « H1 / H2 italique bleu ». La taille n'est pas redéclarée : elle est héritée du parent, donc un seul jeu de règles couvre le H1 comme les H2. ------------------------------------------------------------------ */ .mot-bleu, .mot-jaune { font-family: 'Petrona', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; } .mot-bleu { color: var(--e-global-color-secondary); } .mot-jaune { color: var(--e-global-color-accent); } /* --- Zoom de l'image au survol de SA carte -------------------------- Le seul effet non transposable : Elementor applique une transformation au survol DE l'élément survolé. Ici le survol est sur la carte (conteneur) et l'effet sur l'image (enfant). Le :has() cible le conteneur qui contient directement l'image, donc la carte, et pas la section entière — aucune classe repère n'est nécessaire. ------------------------------------------------------------------ */ .gdbm-zoom .elementor-widget-container { overflow: hidden; } .gdbm-zoom img { display: block; transition: transform 1.2s cubic-bezier(.19,1,.22,1); } .e-con:has(> .gdbm-zoom):hover .gdbm-zoom img { transform: scale(1.05); } /* --- Puces de communes en pastilles (pas de widget natif équivalent) --- */ .gdbm-communes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .gdbm-communes li { margin: 0; } .gdbm-communes li > a, .gdbm-communes li > span { display: block; padding: 8px 14px; border-radius: 10px; background: var(--e-global-color-17b10c7); color: var(--e-global-color-primary); font-size: 13.5px; line-height: 1.4; transition: background .3s ease, color .3s ease; } .gdbm-communes li > a:hover { background: var(--e-global-color-primary); color: var(--e-global-color-17b10c7); } /* --- Soulignement des liens dans les corps de texte ----------------- La COULEUR est réglée dans Réglages du site > Typographie > Lien. Il ne reste que le soulignement, volontairement limité aux paragraphes : le régler globalement soulignerait aussi le menu. ------------------------------------------------------------------ */ .gdbm-lien-texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ========================================================== GDBM — CHARTE MAQUETTE Uniquement ce qui n'est pas réglable nativement dans Elementor. ========================================================== */ /* --- Mot en Petrona italique dans un titre -------------------------- Mêmes valeurs que les typos globales « H1 / H2 italique bleu ». La taille n'est pas redéclarée : elle est héritée du parent, donc un seul jeu de règles couvre le H1 comme les H2. ------------------------------------------------------------------ */ .mot-bleu, .mot-jaune { font-family: 'Petrona', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0; } .mot-bleu { color: var(--e-global-color-secondary); } .mot-jaune { color: var(--e-global-color-accent); } /* --- Zoom de l'image au survol de SA carte -------------------------- Le seul effet non transposable : Elementor applique une transformation au survol DE l'élément survolé. Ici le survol est sur la carte (conteneur) et l'effet sur l'image (enfant). Le :has() cible le conteneur qui contient directement l'image, donc la carte, et pas la section entière — aucune classe repère n'est nécessaire. ------------------------------------------------------------------ */ .gdbm-zoom .elementor-widget-container { overflow: hidden; } .gdbm-zoom img { display: block; transition: transform 1.2s cubic-bezier(.19,1,.22,1); } .e-con:has(> .gdbm-zoom):hover .gdbm-zoom img { transform: scale(1.05); } /* --- Avis Google sur fond sombre ------------------------------------ Le widget Trustindex écrit « EXCELLENT » et « Basée sur N avis » en noir, illisible sur le bleu marine. Le plugin n'expose pas ces couleurs dans ses réglages, d'où la surcharge. Si tu places un jour le widget sur fond clair, ajoute la classe gdbm-avis-sombre sur son conteneur et remplace le sélecteur par .gdbm-avis-sombre .ti-footer .ti-rating-text ------------------------------------------------------------------ */ .ti-footer .ti-rating-text, .ti-footer .ti-rating-text strong, .ti-footer .ti-rating-text span { color: var(--e-global-color-17b10c7) !important; } /* --- Puces de communes en pastilles (pas de widget natif équivalent) --- */ .gdbm-communes ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .gdbm-communes li { margin: 0; } .gdbm-communes li > a, .gdbm-communes li > span { display: block; padding: 8px 14px; border-radius: 10px; background: var(--e-global-color-17b10c7); color: var(--e-global-color-primary); font-size: 13.5px; line-height: 1.4; transition: background .3s ease, color .3s ease; } .gdbm-communes li > a:hover { background: var(--e-global-color-primary); color: var(--e-global-color-17b10c7); } /* --- Soulignement des liens dans les corps de texte ----------------- La COULEUR est réglée dans Réglages du site > Typographie > Lien. Il ne reste que le soulignement, volontairement limité aux paragraphes : le régler globalement soulignerait aussi le menu. ------------------------------------------------------------------ */ .gdbm-lien-texte a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* ========================================================== COOKIEYES — Bandeau, centre de préférences et boutons L'extension réserve ses réglages de couleur à sa version payante : tout est repris ici sur les globales du site. ========================================================== */ /* --- Le bandeau de premier niveau --- */ .cky-consent-container .cky-consent-bar { background: var(--e-global-color-17b10c7) !important; border: 1px solid var(--e-global-color-bcla003) !important; border-radius: 14px !important; box-shadow: 0 18px 44px rgba(12, 58, 91, .14) !important; font-family: "Urbanist", sans-serif; } .cky-consent-container .cky-title { color: var(--e-global-color-primary) !important; font-family: "Urbanist", sans-serif; font-weight: 600; } .cky-consent-container .cky-notice-des, .cky-consent-container .cky-notice-des p { color: var(--e-global-color-text) !important; font-family: "Urbanist", sans-serif; } .cky-consent-container .cky-notice-des a { color: var(--e-global-color-secondary) !important; text-decoration: underline; } /* --- Le centre de préférences --- */ .cky-modal .cky-preference-center { background: var(--e-global-color-17b10c7) !important; border: 1px solid var(--e-global-color-bcla003) !important; border-radius: 14px !important; font-family: "Urbanist", sans-serif; overflow: hidden; } .cky-modal .cky-preference-header .cky-preference-title { color: var(--e-global-color-primary) !important; font-family: "Urbanist", sans-serif; font-weight: 600; } .cky-modal .cky-preference-content-wrapper, .cky-modal .cky-preference-content-wrapper p, .cky-modal .cky-accordion-header-des, .cky-modal .cky-accordion-header-des p { color: var(--e-global-color-text) !important; } .cky-modal .cky-accordion { border-bottom: 1px solid var(--e-global-color-bcla003) !important; } .cky-modal .cky-accordion-btn, .cky-modal .cky-accordion-header .cky-accordion-btn { color: var(--e-global-color-primary) !important; font-family: "Urbanist", sans-serif; font-weight: 600; } /* Les titres d'accordéon sont des