/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ===========================
   01. HTML
=========================== */

html {
	font-size: clamp(8.5px, 1.2vw + 7px, 12px);
    overflow-x: clip; 
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Coupe le scroll horizontal sur mobile sans flinguer les menus off-canvas */
@media (max-width: 767px) {
  html, body { overflow-x: clip; }
  .elementor-section,
  .elementor-container { overflow-x: clip; }
}

/* Sécurise les médias */
img, video, iframe { max-width: 100%; height: auto; }

/* Si tu utilises 100vw quelque part, remplace par 100%.
   En attendant, on neutralise les largeurs excessives : */
*[style*="100vw"] { width: 100% !important; }

/* ===========================
   02. Couleurs
=========================== */
:root{
	--platinum-color: 255,250,242;
	--orange-color: 241,90,34;
	--dark-color: 21,21,21;
	--glass-bg: rgba(255,250,242,0.7);
	--glass-filter: blur(18px) saturate(200%);
}

::selection{
	color: rgba(var(--dark-color),1);
	background-color: rgba(var(--orange-color),.55);
}

.diff{
    mix-blend-mode:difference; 
}


/* ===========================
   03. Liens et Tag
=========================== */

.tag a{
	padding: 4px 8px;
	background-color: rgba(var(--dark-color),0.5);
	border-radius: 128px;
	color: rgba(var(--platinum-color),1) !important;
	transition: background-color 0.3s ease, color 0.3s ease;
	font-size: 1rem !important;
}
.tag a:hover {
	background-color: rgba(var(--dark-color),0.8);
}

.lire a, .lire-blanc a{
  color: rgba(var(--dark-color), 1);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.lire a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: rgba(var(--dark-color), 1) !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: left;
  transform: scaleX(1);
}

.lire-blanc a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: rgba(var(--platinum-color), 1) !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform-origin: left;
  transform: scaleX(1);
}

.lire a:hover, .lire-blanc a:hover{
	color: rgba(var(--orange-color), 1);
}

.lire a:hover::after, .lire-blanc a:hover::after{
	background-color: rgba(var(--orange-color), 1) !important;
	transform: scaleX(1.1);
}

/* ===========================
   04. Boutons
=========================== */

.btn-with-arrow a{
	padding: 16px 22px 16px 22px !important;
	align-items: center;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s ease;
}

.btn-with-arrow span{
	align-items: center;
}

.btn-with-arrow a:hover {
	transform: translateY(1px);
	box-shadow: 0 0 4px rgba(var(--orange-color), 0.3);
}

.elementor-button-icon svg{
	width: 28px !important;
}

.btn-with-arrow .elementor-button-icon {
	transition: transform 0.3s ease;
}

.btn-with-arrow:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* ===========================
   Divers
=========================== */

.orange-dot h1::after, .orange-dot h2::after {
	content: "";
	display: inline-block !important;
	width: 1rem;
	height: 1rem;
	background: rgba(var(--orange-color),1);
	border-radius: 50%;
	margin-left: 0.15em;
	margin-bottom: -4px;
}

.font-contour{
  color: rgba(var(--orange-color),1);
  -webkit-text-stroke: 1px rgba(var(--orange-color),1);
  text-shadow: 
    1px 0 rgba(var(--orange-color),1),
   -1px 0 rgba(var(--orange-color),1),
    0 1px rgba(var(--orange-color),1),
    0 -1px rgba(var(--orange-color),1);
	letter-spacing: 4px;  
}

ul{
	margin-bottom: 24px;
}

/* ================================
   LOGOS 
===================================*/
.original-logo,
.white-logo,
.scroll-logo {
  position: absolute;
  top: 50%; 
  left: 0;
  transform: translateY(-50%);
  transition: opacity .35s ease, max-width .35s ease;
}

.original-logo img,
.white-logo img,
.scroll-logo img { 
  height: auto; 
  display: block; 
}

/* ================================
   COULEURS MENU — États complets
   - ORIGINAL (logo noir) : texte dark, hover orange, active dark .4
   - WHITE (logo blanc via .menu-on-dark) : texte platinum, hover orange, active platinum .4
   - STICKY (toujours lisible sur verre clair) : texte dark, hover orange, active dark .4
===================================*/

/* Base = pages fond clair (original-logo) */
.menutextcolours .elementor-item,
.menutextcolours .elementor-sub-item,
.menutextcolours ul li a span,
.menutextcolours .elementor-menu-toggle {
  color: rgba(var(--dark-color),1);
  transition: color .35s ease;
}

.menutextcolours a:hover span,
.menutextcolours .elementor-item:hover span { 
  color: rgba(var(--orange-color),1) !important; 
}

/* actifs (WP + Elementor) */
.menutextcolours .elementor-item.elementor-item-active,
.menutextcolours .current-menu-item > a span,
.menutextcolours .current_page_item > a span,
.menutextcolours .current-menu-ancestor > a span,
.menutextcolours .current_page_ancestor > a span { 
  color: rgba(var(--dark-color),.4) !important; 
}

/* Variante pages fond sombre (white-logo) */
.menu-on-dark .menutextcolours .elementor-item,
.menu-on-dark .menutextcolours .elementor-sub-item,
.menu-on-dark .menutextcolours ul li a span,
.menu-on-dark .menutextcolours .elementor-menu-toggle {
  color: rgba(var(--platinum-color),1) !important;
}

.menu-on-dark .menutextcolours a:hover span,
.menu-on-dark .menutextcolours .elementor-item:hover span{ 
  color: rgba(var(--orange-color),1) !important; 
}

.menu-on-dark .menutextcolours .elementor-item.elementor-item-active,
.menu-on-dark .menutextcolours .current-menu-item > a span,
.menu-on-dark .menutextcolours .current_page_item > a span,
.menu-on-dark .menutextcolours .current-menu-ancestor > a span,
.menu-on-dark .menutextcolours .current_page_ancestor > a span { 
  color: rgba(var(--platinum-color),.4) !important; 
}

/* Sticky (verre clair) = on repasse en texte dark pour les deux variantes */
.elementor-sticky--effects .menutextcolours .elementor-item,
.elementor-sticky--effects .menutextcolours .elementor-sub-item,
.elementor-sticky--effects .menutextcolours ul li a span,
.elementor-sticky--effects .menutextcolours .elementor-menu-toggle {
  color: rgba(var(--dark-color),1) !important;
}

.elementor-sticky--effects .menutextcolours a:hover span,
.elementor-sticky--effects .menutextcolours .elementor-item:hover span{ 
  color: rgba(var(--orange-color),1) !important; 
}

.elementor-sticky--effects .menutextcolours .elementor-item.elementor-item-active,
.elementor-sticky--effects .menutextcolours .current-menu-item > a span,
.elementor-sticky--effects .menutextcolours .current_page_item > a span,
.elementor-sticky--effects .menutextcolours .current-menu-ancestor > a span,
.elementor-sticky--effects .menutextcolours .current_page_ancestor > a span{ 
  color: rgba(var(--dark-color),.4) !important; 
}

/* ================================
   LOGOS visible/invisible (base)
===================================*/
.original-logo { opacity: 1; }
.white-logo, .scroll-logo { opacity: 0; }

/* Variante fond sombre (white-logo visible par défaut) */
.menu-on-dark .white-logo { opacity: 1; }
.menu-on-dark .original-logo,
.menu-on-dark .scroll-logo  { opacity: 0; }

/* Swap au scroll (montre scroll-logo dans tous les cas) */
.elementor-sticky--effects .scroll-logo  { opacity: 1; }
.elementor-sticky--effects .original-logo,
.elementor-sticky--effects .white-logo   { opacity: 0; }

/* ================================
   HEADER GLASS — CORRIGÉ MÉGA MENU
===================================*/
.bkg-color {
  position: relative;
  overflow: visible;
  border-radius: 10px;
  border: 1px solid transparent;
  z-index: 9999;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* pseudo overlay pour le blur/tint (derrière le contenu) */
.bkg-color::before {
  content: "";
  position: absolute; 
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  opacity: 0;
  border-radius: inherit;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity;
  -webkit-transform: translateZ(0);
}

/* s'assurer que tout le contenu passe AU-DESSUS de ::before */
.bkg-color > * { 
  position: relative; 
  z-index: 1; 
}

/* Sticky: on révèle le verre + on teinte bordure + ombre douce */
.elementor-sticky--effects .bkg-color::before { 
  opacity: 1; 
}

.elementor-sticky--effects .bkg-color {
  border-color: rgba(var(--platinum-color),1);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Fallback sans backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bkg-color::before { display: none; }
  .elementor-sticky--effects .bkg-color {
    background: var(--glass-bg);
    border-color: rgba(var(--platinum-color),1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
}

/* ================================
   Méga-menu / dropdown
===================================*/
.elementor-nav-menu--dropdown,
.elementor-nav-menu .sub-menu,
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  z-index: 10001 !important;
  position: absolute;
}

/* Pour les méga-menus Elementor Pro */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > .elementor-nav-menu--dropdown,
.elementor-nav-menu--layout-horizontal .elementor-nav-menu > li > .sub-menu {
  z-index: 10001 !important;
}

/* ================================
   Menu Terrain
===================================*/

/* Curseur pointer */
#secteurs,
#secteurs .e-n-menu-title, #secteurs .e-n-menu-title-text {
	cursor: pointer !important;
}

/* Base : fond clair (texte noir) */
#secteurs .e-n-menu-title-text{
	color: rgba(var(--dark-color),1) !important;
}

/* Variante fond sombre (texte blanc) */
.menu-on-dark #secteurs .e-n-menu-title-text{
	color: rgba(var(--platinum-color),1) !important;
}
.menu-on-dark #secteurs svg{
	fill: rgba(var(--platinum-color),1) !important;
}

/* Au scroll : retour en noir */
.elementor-sticky--effects #secteurs .e-n-menu-title-text{
	color: rgba(var(--dark-color),1) !important;
}
.elementor-sticky--effects #secteurs svg{
	fill: rgba(var(--dark-color),1) !important;
}

/* Hover : orange dans tous les cas */
#secteurs:hover .e-n-menu-title, #secteurs:hover .e-n-menu-title-text{
	color: rgba(var(--orange-color),1) !important;
}
#secteurs:hover svg{
	fill: rgba(var(--orange-color),1) !important;
}

/* ================================
   CTA Contact
===================================*/

#contact-menu a span{
  padding: 4px 16px;
  background-color: rgba(var(--orange-color),1);
  border-radius: 128px;
  color: rgba(var(--platinum-color),1) !important;
  border: 2px solid rgba(var(--orange-color),1);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#contact-menu a:hover span{
  background-color: transparent;
  color: rgba(var(--orange-color),1) !important;
}