/* 
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(9px, 1.2vw + 7px, 11.5px);
  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; } /* clip > hidden pour éviter certains bugs iOS */
  .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 {
  --black-color: 3, 3, 3;
  --text-color: 17, 9, 35;
  --greywhite-color: 250, 250, 250;
  --violet-color: 133, 100, 255;
  --violet-hover-color: 74, 24, 191;
}

::selection {
    color: rgba(var(--greywhite-color),1);
    background-color: rgba(var(--violet-color),1);
}

/* ===========================
   03. Liens
=========================== */
.s-link a{
	font-size: 0.9rem !important;
	line-height: 1.1rem !important;
}

.s-link a::after {
	color: rgba(var(--black-color),1);
  content: '';
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
}


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

.btn-violet a{
	border-color: rgba(var(--violet-color),1) !important;
	background-color: rgba(var(--violet-color),1) !important;
}

.btn-violet a:hover{
	border-color: rgba(var(--violet-hover-color),1) !important;
	background-color: rgba(var(--violet-hover-color),1) !important;
}

/* ================================
   05. MENU
   STICKY: fond glass + bordure
===================================*/
.elementor-sticky--effects .bkg-color {
  background: rgba(252, 252, 252, 0.7) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1.5px solid rgba(17, 9, 35, 0.1);
  transition: all 0.5s ease-in-out;
}

/* Fallback si pas de blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .elementor-sticky--effects .bkg-color {
    background: rgba(252, 252, 252, 0.92) !important;
  }
}

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

.original-logo-mob, 
.scroll-logo-mob {
	position: absolute;
	top: 24px;
	transform: translateY(-50%);
	transition: opacity 0.4s ease, max-width 0.4s ease;
}

/* Base générale (pages "fond sombre") */
.original-logo, .original-logo-mob { 
	opacity: 1; 
	pointer-events: auto; 
}
.scroll-logo, .scroll-logo-mob   { 
	opacity: 0; 
	pointer-events: none; 
}

.original-logo a img, 
.original-logo-mob a img, 
.scroll-logo a img, 
.scroll-logo-mob a img {
	width: 180px !important;
}

/* Swap en sticky */
.elementor-sticky--effects .original-logo, 
.elementor-sticky--effects .original-logo-mob {
	opacity: 0;
	pointer-events: none; 
}
.elementor-sticky--effects .scroll-logo, 
.elementor-sticky--effects .scroll-logo-mob { 
	opacity: 1;
	pointer-events: auto; 
}

/* ================================
   TEXTE DU MENU (clair → foncé)
===================================*/
.menutextcolours ul li a {
	color: #fcfcfc;
	transition: color .5s ease;
}
.elementor-sticky--effects .menutextcolours ul li a {
	color: #110923 !important;
}

/* ================================
   PAGES FOND CLAIR (menu-dark-base)
   - pas de glass au chargement
   - texte foncé dès le départ
   - scroll-logo actif par défaut
===================================*/
.menu-dark-base .bkg-color {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
}

/* Priorité plus forte pour remettre le glass AU SCROLL
   sur ces mêmes pages fond clair */
.menu-dark-base .elementor-sticky--effects .bkg-color {
  background: rgba(252, 252, 252, 0.7) !important;
  backdrop-filter: blur(12px) saturate(180%);
}

/* Texte foncé dès le chargement */
.menu-dark-base .menutextcolours ul li a {
  color: #110923 !important;
}

/* Scroll-logo actif par défaut sur ces pages 
   (on agit sur les wrappers + descendants, pas seulement img) */
.menu-dark-base .original-logo, 
.menu-dark-base .original-logo * {
  opacity: 0; 
  pointer-events: none; 
}
.menu-dark-base .scroll-logo, 
.menu-dark-base .scroll-logo * {
  opacity: 1; 
  pointer-events: auto; 
}

/* ================================
   FR / EN "pilule" — styles communs
===================================*/
.menu-nav-tp .elementor-nav-menu > li:last-child .elementor-item,
.menu-nav-tp .elementor-nav-menu > li:nth-last-child(2) .elementor-item {
  padding: 4px 12px !important;
}

/* Forme de la pilule */
.menu-nav-tp .elementor-nav-menu > li:nth-last-child(2) > a{
  border-right: 0;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  font-size: 1rem !important;
}
.menu-nav-tp .elementor-nav-menu > li:last-child > a{
  border-left: 0;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  font-size: 1rem !important;
}

/* Contours + couleur (BASE = clair, pour fond sombre) */
.menu-nav-tp .elementor-nav-menu > li:nth-last-child(2) > .elementor-item,
.menu-nav-tp .elementor-nav-menu > li:last-child > .elementor-item{
  border-style: solid;
  border-width: 1px;
  color: #fcfcfc;
  border-color: rgba(252, 252, 252, 1);
}

/* En sticky (fond clair) → contours & texte FONCÉS */
.elementor-sticky--effects .menu-nav-tp .elementor-nav-menu > li:nth-last-child(2) > .elementor-item,
.elementor-sticky--effects .menu-nav-tp .elementor-nav-menu > li:last-child > .elementor-item{
  color: #110923;
  border-color: rgba(17, 9, 35, 1);
}
.elementor-sticky--effects .menu-nav-tp .elementor-nav-menu > li:last-child > .elementor-item::before{
  background: rgba(17, 9, 35, 1);
}


/* Pages fond clair (base) → contours & texte FONCÉS dès le départ */
.menu-dark-base .menu-nav-tp .elementor-nav-menu > li:nth-last-child(2) > .elementor-item,
.menu-dark-base .menu-nav-tp .elementor-nav-menu > li:last-child > .elementor-item{
  color: #110923;
  border-color: rgba(17, 9, 35, 1);
}
.menu-dark-base .menu-nav-tp .elementor-nav-menu > li:last-child > .elementor-item::before{
  background: rgba(17, 9, 35, 1);
}

.menu-nav-desk .elementor-nav-menu > li:nth-last-child(2) .elementor-item { margin-left: 40px; }
.menu-nav-mob .elementor-nav-menu > li:nth-last-child(2) .elementor-item { margin-left: 12px; }
.menu-nav-tp .elementor-nav-menu > li:last-child .elementor-item { margin-left: -1px; }