/* ==========================================================================
   STYLE PREMIUM ÉPURÉ (POUR UNDERSTRAP / BOOTSTRAP 5)
   ========================================================================== */

:root {
  --premium-black: #000000;
  --premium-white: #ffffff;
  --premium-light-grey: #f8f9fa;
  --premium-cool-grey: #d8d9da;
  --premium-dark-grey: #1c1c1e;
  --premium-red: #d5001c;

  /* Typo principale forcée */
  --bs-font-sans-serif: 'Google Sans Flex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- Fond et Base --- */
html, body {
  background-color: var(--premium-white);
  color: #2b2b2b;
  font-family: var(--bs-font-sans-serif);
  font-size: 1.1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
  overflow: visible !important;
  overflow-x: clip !important; /* Cette fois, sécurité sans éclater le sticky ! */
}

/* Reset des liens généraux */
a {
  color: var(--premium-black);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #333333;
}

/* Texte courant */
p {
  font-weight: 400; /* Poids normal pour la lecture */
  margin-bottom: 1.25rem;
}

strong, b {
  font-weight: 600; /* Poids pour les éléments importants */
}


/* ---- État initial (En haut de page) ---- */
header {
    background-color: #ffffff;
    transition: background-color 0.3s ease;
}

/* On cible directement le remplissage du logo */
header .c-header__logo {
    fill: #e30613; /* Rouge Kymco initial */
    transition: fill 0.3s ease;
}

/* ---- État au scroll ---- */
header.is-scrolled {
    background-color: rgba(0, 0, 0, 0.90);
}

/* Le logo passe en blanc au scroll */
header.is-scrolled .c-header__logo{ 
    fill: #ffffff !important; 
}

/* Les liens du menu passent en blanc au scroll */
header.is-scrolled .navbar-nav a { 
    color: #ffffff ; 
}
header.is-scrolled .navbar-toggler { 
    color: #ffffff !important; 
    border-color: #ffffff !important;
}

/* ---- État au scroll : On force le burger en blanc ---- */
header.is-scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Footer collé en bas quand la page est courte */
	#page { display: flex; flex-direction: column; min-height: 100vh; }
	body.admin-bar #page { min-height: calc(100vh - 32px); }
	@media (max-width: 782px) { body.admin-bar #page { min-height: calc(100vh - 46px); } }
	#page > .mk-footer { margin-top: auto; }

	/* ===== Footer Mykymco ===== */
	.mk-footer {
		--mk-bg: #0b1c33;
		--mk-bg-2: #08152a;
		--mk-text: #e8edf5;
		--mk-muted: #9fb0c8;
		--mk-line: #22385a;
		--mk-accent: #3d8bff;
		background: var(--mk-bg);
		color: var(--mk-text);
		font: 400 15px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}
	.mk-footer a { color: var(--mk-muted); text-decoration: none; }
	.mk-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
	.mk-footer a:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 3px; border-radius: 2px; }

	.mk-footer__inner {
		max-width: 1180px; margin: 0 auto; padding: 48px 24px 36px;
		display: grid; gap: 40px 32px;
		grid-template-columns: 1.6fr 1fr 1fr 1fr;
	}
	.mk-footer__brand a.mk-footer__home { display: inline-block; color: #fff; }
	.mk-footer__brand a.mk-footer__home:hover { color: var(--mk-accent); text-decoration: none; }
	.mk-footer__logo { display: block; width: 88px; height: auto; }
	.mk-footer__brand p { margin: 14px 0 0; max-width: 34ch; color: var(--mk-muted); }

	.mk-footer h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: #fff; }
	.mk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

	.mk-footer__bar { background: var(--mk-bg-2); border-top: 1px solid var(--mk-line); }
	.mk-footer__bar-inner {
		max-width: 1180px; margin: 0 auto; padding: 18px 24px;
		display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
		font-size: 13px; color: var(--mk-muted);
	}
	.mk-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }

	@media (max-width: 860px) {
		.mk-footer__inner { grid-template-columns: 1fr 1fr; }
		.mk-footer__brand { grid-column: 1 / -1; }
	}
	@media (max-width: 480px) {
		.mk-footer__inner { grid-template-columns: 1fr; padding-top: 40px; }
	}
  
/* ==========================================================================
   TYPOGRAPHIE & TITRES (GOOGLE SANS FLEX)
   ========================================================================== */

h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Google Sans Flex', sans-serif;
  text-transform: uppercase;
  /* Valeur pour gérer la graisse des titres (de 100 à 1000) */
  font-weight: 500 !important; 
  letter-spacing: -0.02em; /* Rapprochement propre au style Google */
  line-height: 1.1;
  color: #111111;
}

/* Échelles de tailles fluides */
h1, .h1 {
  font-size: calc(2.6rem + 2vw); 
  margin-bottom: 1.5rem;
}

h2, .h2 {
  font-size: calc(1.9rem + 1.2vw);
  margin-bottom: 1.25rem;
}

h3, .h3 {
  font-size: calc(1.5rem + 0.6vw);
  margin-bottom: 1rem;
}

h4, .h4 {
  font-size: calc(1.4rem + 0.5vw);
  margin-bottom: 1rem;
  color:#3A3F4E;
}

h4 strong, .h4 strong{
  color: #3E7995;
  font-weight: 500 !important;
}

/* Masquer le titre principal uniquement sur la page d'accueil */
body.home .entry-title,
body.home .page-title {
  display: none !important;
}

/* Code couleur spécifique */
.bleu   { color: #3E7995 !important; }
.gris   { color: #3A3F4E !important; }
.gold   { color: #C6C200 !important; }
.orange { color: #E7310D !important; }


/* ==========================================================================
   STRUCTURE, LAYOUT & PLUGINS SPECIFIQUES
   ========================================================================== */

.section-premium {
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--premium-cool-grey);
}

.bg-dark-premium {
  background-color: var(--premium-dark-grey) !important;
  color: var(--premium-white);
}
.bg-dark-premium h1,
.bg-dark-premium h2,
.bg-dark-premium h3 {
  color: var(--premium-white);
}

/* Supprime les marges et bordures résiduelles d'UnderStrap sous le menu */
#wrapper-navbar {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1030; /* Assure que le menu passe au-dessus du slider et du reste */
}

#wrapper-navbar .navbar {
  margin-bottom: 0 !important;
}

/* Annule l'overflow qui bloque le sticky header */
.site,
#page {
  overflow: visible !important;
}

/* Forminator spécifique */
.recapitulatif .forminator-repeater-field {
  border: #3E7995 1px solid;
  box-shadow: inset 5px 0px 0px #3E7995 !important;
}

label.forminator-repeater-label {
  text-transform: uppercase;
  font-size: 2rem !important;
  line-height: normal !important;
  letter-spacing: 0.02em;
  line-height: 1;
}

.exergue {
  font-size: 2rem;
}

img.attachment-large.size-large.wp-post-image {
  display: none;
}


/* ==========================================================================
   CARROUSEL & OVERLAYS DÉGRADÉS
   ========================================================================== */

#eventCalendarCarousel {
  /* Sortie forcée du container Understrap */
  width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: 0 !important;
}

#eventCalendarCarousel .date { 
  font-size: 1.5rem; 
}

/* Gestion des images de fond fixes dans le slider */
.parallax-bg-full {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed; 
  width: 100%;
}

.parallax-bg-full h3 {
  color: color-mix(in srgb, var(--premium-white) 90%, transparent);
  font-size: 9vh;
}

/* L'overlay avec dégradé transparent vers noir 70% */
.parallax-overlay {
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  min-height: 450px;
  font-size: 2vh;
}

body.home .parallax-overlay {
  min-height: 80vh;
}

/* Ombre légère sur le texte pour le contraste */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Ajustement de la hauteur pour les écrans PC */
@media (min-width: 768px) {
  .parallax-overlay {
    min-height: 550px;
  }
  body.home .parallax-overlay {
    min-height: 80vh;
  }
}


/* ==========================================================================
   BOUTONS, FORMULAIRES & COMPOSANTS
   ========================================================================== */

/* Boutons Généraux Premium (Lignes droites, pas d'arrondis par défaut) */
.btn {
  border-radius: 0px !important;
  padding: 12px 30px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.2s ease-in-out;
}

/* Bouton Principal Noir */
.btn-primary-premium {
  background-color: var(--premium-black);
  border: 1px solid var(--premium-black);
  color: var(--premium-white);
}
.btn-primary-premium:hover {
  background-color: #222222;
  border-color: #222222;
  color: var(--premium-white);
}

/* Bouton Secondaire Transparent / Outline */
.btn-outline-premium {
  background-color: transparent;
  border: 1px solid var(--premium-black);
  color: var(--premium-black);
}
.btn-outline-premium:hover {
  background-color: var(--premium-black);
  color: var(--premium-white);
}

/* Version pour fond sombre */
.bg-dark-premium .btn-outline-premium {
  border-color: var(--premium-white);
  color: var(--premium-white);
}
.bg-dark-premium .btn-outline-premium:hover {
  background-color: var(--premium-white);
  color: var(--premium-black);
}

/* Surcharge des boutons natifs Bootstrap (.btn-primary & .btn-secondary) */
.btn-primary {
  background-color: var(--premium-black) !important;
  border-color: var(--premium-black) !important;
  color: var(--premium-white) !important;
  border-radius: 0px !important;  
  backdrop-filter: blur(10px);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #222222 !important;
  border-color: #222222 !important;
  color: var(--premium-white) !important;
  box-shadow: none !important;
}

.btn-secondary {
  background-color: transparent !important;  
  backdrop-filter: blur(10px);
  border-color: var(--premium-black) !important;
  color: var(--premium-black) !important;
  border-radius: 0px !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
  background-color: var(--premium-black) !important;
  border-color: var(--premium-black) !important;
  color: var(--premium-white) !important;
  box-shadow: none !important;
}

/* Boutons spécifiques du slider (Arrondis + Flou) */
#eventCalendarCarousel .btn {
  border-radius: 0.375rem !important;
  backdrop-filter: blur(10px);
  background: rgba(216, 217, 218, 0.2) !important;
  color: #ffffff !important;
}
#eventCalendarCarousel .btn:hover {
  background: rgba(231, 49, 13, 0.8) !important;
}
#eventCalendarCarousel .btn-lg {
  border-radius: 0.5rem !important;
}

/* Bouton Gutenberg Orange */
.wp-block-button.btn.orange a, .wp-block-button a { 
  background: rgba(231, 49, 13, 0.8) !important; 
  color: #ffffff !important; 
  backdrop-filter: blur(10px) !important; 
  border-radius: 2rem !important;
}

/* Effets de survol avancés sur les boutons (Animations pseudo-éléments) */
.btn::before, .btn::after, .btn a::before, .btn a::after, .wp-block-button a::before, .wp-block-button a::after  {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    background: rgba(231, 49, 13, 0.9) !important; color:#ffffff !important; backdrop-filter: blur(10px) !important; border-radius: 2rem !important;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scaleX(0);
    transition: background 0.5s, transform 0.5s, opacity 0.5s ease-in;
}

.btn::before, .btn a::before, .wp-block-button a::before {
    left: -30%;
}

.btn::after, .btn a::after, .wp-block-button a::after {
    right: -30%;
}

.btn:hover::after, .btn a:hover::after, .wp-block-button a:hover::after {
    transform: scale(1);
}

.btn:active, .btn a:active, .wp-block-button a:active {
    transform: translateY(2px);
}

/* Cartes & Badges */
.card-premium {
  border: none;
  background: var(--premium-light-grey);
  border-radius: 0px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}
.card-premium .card-body {
  padding: 2rem 1.5rem;
}

.badge {
  border-radius: 0px !important;
}

/* Surcharges utilitaires d'arrière-plans */
.bg-primary { background-color: var(--premium-black) !important; }
.bg-light   { background-color: var(--premium-light-grey) !important; }
.bg-dark    { background-color: var(--premium-dark-grey) !important; }

/* Formulaires (Style minimaliste) */
.form-control, .form-select {
  border-radius: 0px !important;
  border: 1px solid var(--premium-cool-grey);
  padding: 12px 15px;
  background-color: var(--premium-light-grey);
  color: var(--premium-black);
}
.form-control:focus, .form-select:focus {
  border-color: var(--premium-black) !important;
  box-shadow: none !important;
  background-color: var(--premium-white);
}


/* ==========================================================================
   EFFETS AVANCÉS, LIENS & EFFET DE ZOOM IMAGES
   ========================================================================== */

/* Liens textuels Premium animés */
.premium-link {
  color: var(--premium-black);
  text-decoration: none;
  font-weight: 600;
  position: relative;
  padding-bottom: 2px;
}
.premium-link::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--premium-black);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.premium-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* Force le masque et l'overflow sur les blocs d'images arrondis (Sécurité Zoom) */
/* --- Double sécurité CSS pour les arrondis et le zoom --- */

/* On force l'arrondi et le masque sur le conteneur Gutenberg, même si la classe .rounded a sauté */
.wp-block-image:not(.no-radius, .no-radius img ), .wp-block-media-text__media:not(.no-radius, .no-radius img ), .tribe-events-event-image:not(.no-radius, .no-radius img ) {
    overflow: hidden !important;
    border-radius: 32px !important;
    display: block !important;
}

/* On s'assure que la balise <figure> elle-même n'a pas de comportement bizarre */
figure.wp-block-image, figure.wp-block-media-text__media {
    margin-bottom: 1.5rem !important;
}

/* On force aussi l'image interne à épouser cette forme sans déborder */
.wp-block-image img:not(.no-radius, .no-radius img ), .wp-block-media-text__media img:not(.no-radius, .no-radius img ), .tribe-events-event-image img:not(.no-radius, .no-radius img ) {
    border-radius: 32px !important;
    object-fit: cover !important;
}

/* Transition fluide sur l'image interne */
.wp-block-image img:not(.no-radius, .no-radius img ), .wp-block-media-text__media img:not(.no-radius, .no-radius img ), .tribe-events-event-image img:not(.no-radius, .no-radius img ) {
    border-radius: 32px !important;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Déclenchement du zoom uniquement si l'image est visible à l'écran et survolée */
.wp-block-image.reveal-item.is-visible:hover img:not(.no-radius, .no-radius img ), .wp-block-media-text__media.reveal-item.is-visible:hover img:not(.no-radius, .no-radius img ), .tribe-events-event-image.reveal-item.is-visible:hover img:not(.no-radius, .no-radius img ) {
    transform: scale(1.05) !important; /* Zoom de 5% */
}

/* ==========================================================================
   ANIMATIONS AUTOMATIQUES AU SCROLL (CIBLAGE <ARTICLE>)
   ========================================================================== */

/* --- État initial (Masqué et décalé) --- */
article p.reveal-item,
article .wp-block-image.reveal-item,
article .wp-block-media-text__media.reveal-item { 
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Un peu plus d'amplitude et d'impact pour les titres */
article h1.reveal-item, 
article h2.reveal-item, 
article h3.reveal-item {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1s cubic-bezier(0.215, 0.610, 0.355, 1), 
                transform 1s cubic-bezier(0.215, 0.610, 0.355, 1);
}

/* --- État activé par le JS au scroll --- */
article .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Cache le champ sur le front tout en gardant la valeur active */
.masquer-calcul { display: none !important; }

#no-title-page-wrapper.wrapper { padding: 0 !important;}