/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/
Template: hello-elementor
Author: Elementor Team
Description: Thème enfant optimisé pour Enigmadventure avec curseur personnalisé et animations
Version: 3.1.0.1721055180
*/


/* ============================================
   LOADER
   ============================================ */

#en-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-content: center;
  z-index: 999999;
  overflow: hidden;
  opacity: 1;
  background: #111;
}

.en-loader-animation {
  --loader-width: 20vw;
  animation: loader 2s ease-out infinite alternate-reverse;
  perspective: var(--loader-width);
  width: var(--loader-width);
  height: var(--loader-width);
  max-height: 100%;
  position: relative;
  margin: auto;
}

#en-loader-logo {
  width: 100%;
  max-height: 100%;
  max-width: 500px;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  position: absolute;
}

@keyframes loader {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

/* ============================================
   SCROLL & ANCRES
   ============================================ */

html {
  scroll-padding-top: 8vw;
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 60px;
  }
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */

h1.elementor-heading-title a,
h2.elementor-heading-title a,
h3.elementor-heading-title a {
  font-weight: var(--e-global-typography-accent-font-weight) !important;
  font-family: var(--e-global-typography-accent-font-family) !important;
  transition: all 0.3s;
}

h1.elementor-heading-title a:hover,
h2.elementor-heading-title a:hover,
h3.elementor-heading-title a:hover {
  color: var(--e-global-color-primary) !important;
}

p:last-child {
  margin-block-end: 0 !important;
  margin-bottom: 0;
}

/* Espacements des titres et paragraphes */
.e-t-hero {
  margin-bottom: 20px !important;
}

.e-t2 {
  margin-bottom: 20px !important;
}

.e-titre-box {
  margin-bottom: 20px !important;
}

.e-banniere {
  margin-bottom: 20px !important;
  margin-top: 20px !important;
}

.e-t3 {
  margin-bottom: 20px !important;
}

.e-accroche {
  margin-bottom: 32px !important;
}

.e-p {
  margin-bottom: 20px !important;
}

.elementor-slide-heading {
  padding-bottom: 20px !important;
}

.date-formatted {
  font-family: var(--e-global-typography-b77467f-font-family), Sans-serif;
  font-size: var(--e-global-typography-b77467f-font-size);
  font-weight: var(--e-global-typography-b77467f-font-weight);
  text-transform: var(--e-global-typography-b77467f-text-transform);
}

@media (max-width: 767px) {
  .e-t-hero { margin-bottom: 16px !important; }
  .e-t2 { margin-bottom: 16px !important; }
  .e-titre-box { margin-bottom: 16px !important; }
  .e-banniere { margin-bottom: 16px !important; margin-top: 16px !important; }
  .e-t3 { margin-bottom: 16px !important; }
  .e-accroche { margin-bottom: 20px !important; }
  .e-p { margin-bottom: 16px !important; }
  .elementor-slide-heading { margin-bottom: 16px !important; }
}

/* ============================================
   WPML 
   ============================================ */

/* Sélecteur de langue WPML - Style global Elementor */
.wpml-ls-statics-shortcode_actions a,
.wpml-ls-legacy-list-horizontal a,
.wpml-ls-display,
.wpml-ls-native {
  font-family: var(--e-global-typography-accent-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-accent-font-size) !important;
  font-weight: var(--e-global-typography-accent-font-weight) !important;
  text-transform: var(--e-global-typography-accent-text-transform) !important;
  line-height: var(--e-global-typography-accent-line-height) !important;
  color: var(--e-global-color-text) !important;
  transition: all 0.3s ease;
}
/* État hover avec secondary */
.wpml-ls-legacy-list-horizontal li a:hover,
.wpml-ls-legacy-list-horizontal li a:hover .wpml-ls-display,
.wpml-ls-legacy-list-horizontal li a:hover .wpml-ls-native {
  color: var(--e-global-color-secondary) !important;
}
/* ============================================
   BOUTONS - TRANSITIONS SVG
   ============================================ */

/* Transition pour .e-titre-box (noir au hover) */
:is(.elementor-button.e-titre-box,
    .e-titre-box .elementor-button)
  .elementor-button-icon svg * {
  transition: fill 0.8s ease;
}

:is(.elementor-button.e-titre-box,
    .e-titre-box .elementor-button):is(:hover, :focus)
  .elementor-button-icon svg * {
  fill: var(--e-global-color-primary) !important;
}

/* Transition pour .e-titre-box-d (doré au hover) */
:is(.elementor-button.e-titre-box-d,
    .e-titre-box-d .elementor-button)
  .elementor-button-icon svg * {
  transition: fill 0.8s ease;
}

:is(.elementor-button.e-titre-box-d,
    .e-titre-box-d .elementor-button):is(:hover, :focus)
  .elementor-button-icon svg * {
  fill: var(--e-global-color-secondary) !important;
}

/* Transition pour .btn-fleche */
:is(.elementor-button.btn-fleche,
    .btn-fleche .elementor-button)
  .elementor-button-icon svg * {
  transition: fill 0.8s ease;
}

:is(.elementor-button.btn-fleche,
    .btn-fleche .elementor-button):is(:hover, :focus)
  .elementor-button-icon svg * {
  fill: var(--e-global-color-primary) !important;
}

/* ============================================
   CARTES & HOVER EFFECTS
   ============================================ */

.e-card-hover {
  transition: background-color 1s ease !important;
  border-radius: 0 !important;
}

.e-card-hover:hover {
  background-color: var(--e-global-color-7dadeed) !important;
}

.e-article-hover {
  border-radius: 0 !important;
}

.e-hero-shrink {
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, opacity, filter;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   WOOCOMMERCE - GRILLE PRODUITS
   ============================================ */

.woocommerce ul.products li.product {
  overflow: hidden;
  position: relative;
  max-width: 500px;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center center;
  transition: transform 0.45s ease;
  backface-visibility: hidden;
  will-change: transform;
}

/* Effet zoom au survol (desktop uniquement) */
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover a.woocommerce-LoopProduct-link img {
    transform: scale(1.06);
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
  position: relative;
  z-index: 1;
}

.woocommerce ul.products li.product .woocommerce-loop-product__buttons .button,
.woocommerce ul.products li.product a.button.add_to_cart_button, .button.product_type_variable {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  white-space: normal;
  margin-top: 8px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__buttons {
  display: block;
}

/* ============================================
   WOOCOMMERCE - QUANTITÉ PRODUIT
   ============================================ */

.quantity {
  display: flex !important;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
}

.button:where(:not(:first-child)) {
  margin-inline-start: 0;
  margin-block-start: 0;
}

.quantity .button {
  margin: 0 !important;
  padding: 10px 20px;
  flex-shrink: 0;
}

.quantity .qty {
  margin: 0 !important;
  margin-inline-end: 0;
  vertical-align: top;
}

.quantity .button.minus,
.quantity .button.plus {
  padding: 14px 16px !important;
}

@media (max-width: 1024px) {
  .quantity .button.minus,
  .quantity .button.plus {
    padding: 12px 12px !important;
  }

  .single_add_to_cart_button {
    padding: 12px 24px !important;
    flex: 1;
    min-width: 0;
  }

  .quantity .qty {
    width: 2.5em;
  }
}

/* ============================================
   WOOCOMMERCE - MESSAGES
   ============================================ */

@media (max-width: 767px) {
  .woocommerce-message {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .woocommerce-message .button {
    float: none !important;
    margin-top: 0;
    width: auto;
  }
}

/* ============================================
   EFFETS ZOOM GÉNÉRIQUES
   ============================================ */

.zoom-hover {
  overflow: hidden;
}

.zoom-hover img {
  transition: transform 0.4s ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .zoom-hover:hover img {
    transform: scale(1.05);
  }
}

/* ============================================
   Tap highlight personnalisé
   ============================================ */


/* Ou si vous préférez la couleur primary (noir) */
button,
a,
input,
select,
.elementor-button,
.woocommerce .button {
  -webkit-tap-highlight-color: rgba(17, 17, 17, 0.1) !important; /* Votre primary avec 10% opacité */
}


/* Masquer l'adresse de livraison uniquement sur la page Panier */
.woocommerce-cart .woocommerce-shipping-destination {
    display: none !important;
}


/* ============================================
   Schéma de couleurs du site
   ============================================ */

/* Le site est entièrement sur fond sombre. On le déclare au navigateur :
   il adapte alors de lui-même tout ce qu'il dessine nativement — fond du
   remplissage automatique, flèches des <select>, cases à cocher, barres
   de défilement — au lieu de partir du principe que la page est claire. */
:root {
    color-scheme: dark;
}


/* ============================================
   Notices et messages du checkout
   ============================================ */

/* Style de base, repris de la notice de livraison Europe. */
.eni-notice {
    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);
    color: var(--e-global-color-text);
    line-height: 1.6;
}

/* Même typographie, en rouge, pour les messages d'erreur. */
.eni-notice--error {
    color: #e2401c;
}

.eni-email-mismatch {
    margin-top: 5px;
}


/* ============================================
   Attente de confirmation du paiement
   ============================================ */

/* Voile plein écran affiché tant que le webhook Stripe n'a pas validé la
   commande. Rendu côté serveur (inc/checkout-thankyou.php) pour être
   présent dès le premier affichage, puis retiré par JavaScript. */
.eni-thankyou-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: black;
}

.eni-thankyou-overlay__inner {
    max-width: 420px;
    text-align: left;
}

.eni-thankyou-overlay__spinner {
    width: 42px;
    height: 42px;
    margin: 0 0 20px;
    border: 3px solid rgba(134, 118, 77, 0.3);
    border-top-color: var(--e-global-color-secondary, #86764D);
    border-radius: 50%;
    animation: eni-spin 0.9s linear infinite;
}

@keyframes eni-spin {
    to { transform: rotate(360deg); }
}

/* Respecte les préférences d'accessibilité : pas de rotation continue
   pour qui a demandé à limiter les animations. */
@media (prefers-reduced-motion: reduce) {
    .eni-thankyou-overlay__spinner {
        animation: none;
        opacity: 0.6;
    }
}

.eni-thankyou-overlay__text {
    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 );
    color: var( --e-global-color-text, #F7F7F7 );
    line-height: 1.6;
    margin: 0;
}

/* Délai dépassé : le voile s'efface pour découvrir la page. */
.eni-thankyou-overlay.is-timeout {
    transition: opacity 0.4s ease;
    opacity: 0;
}


/* ============================================
   Case newsletter (MC4WP)
   ============================================ */

/* Elementor style le texte des cases CGV via
   .woocommerce-form__label-for-checkbox span, avec ses variables globales.
   Le label MC4WP n'ayant pas cette classe, on reprend les mêmes variables
   pour un rendu identique — et qui suivra tout changement dans Elementor. */
.mc4wp-checkbox label span {
    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 );
    color: var( --e-global-color-text );
}

/* MC4WP injecte sa propre feuille inline avec .mc4wp-checkbox-woocommerce
   input { margin: 0 6px 0 0 }, plus spécifique que la classe input-checkbox.
   D'où un écart de 2px avec la case CGV, qui utilise la valeur WooCommerce
   (-2px 8px 0 0). On rétablit cette valeur avec une spécificité supérieure. */
.mc4wp-checkbox-woocommerce input[type="checkbox"] {
    margin: -2px 8px 0 0 !important;
    vertical-align: middle !important;
}


/* ============================================
   Champs du checkout : bordures
   ============================================ */

/* Couleurs de bordure, reprises des réglages Elementor du widget checkout :
   normale #86764D (doré), focus #F7F7F7 (blanc). */
:root {
    --eni-field-border: #86764D;
    --eni-field-border-focus: #F7F7F7;
}

/* WooCommerce colore en vert les champs validés : on remet la bordure normale.
   Sélecteurs volontairement larges (sans préfixe .woocommerce form) : le
   balisage d'Elementor n'expose pas toujours les mêmes ancêtres. */
.woocommerce-validated input.input-text,
.woocommerce-validated select,
.woocommerce-validated textarea,
.form-row.woocommerce-validated input.input-text,
.form-row.woocommerce-validated select,
.form-row.woocommerce-validated textarea {
    border-color: var(--eni-field-border) !important;
}

/* Select2 est désactivé (voir inc/checkout-native-select.php) : le champ
   Pays est un <select> natif. Elementor ne stylant pas toujours les <select>
   comme les <input>, on aligne ici le padding et on remplace la flèche
   native (qui rend mal sur fond sombre) par un chevron aux couleurs du site.
   Ajuster ces deux variables si le champ ne colle pas aux autres. */
:root {
    --eni-field-padding-y: 14px;
    --eni-field-padding-x: 20px;
}

/* Même padding pour les champs texte et les <select> : appliqué aux deux
   dans la même règle, ils ne peuvent pas diverger. */
.woocommerce-checkout select,
.woocommerce-cart select,
.woocommerce-account select,
.woocommerce-checkout .form-row .input-text,
.woocommerce-cart .form-row .input-text,
.woocommerce-account .form-row .input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-cart .form-row textarea,
.woocommerce-account .form-row textarea {
    box-sizing: border-box !important;
    padding: var(--eni-field-padding-y) var(--eni-field-padding-x) !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;

    /* Aucune règle du site ne définissait la couleur du texte saisi :
       le navigateur appliquait sa valeur par défaut. On reprend la
       couleur de texte globale d'Elementor. */
    color: var( --e-global-color-text, #F7F7F7 ) !important;
}

/* Pendant la saisie, une règle :focus d'Elementor (gris #69727D) prenait
   le dessus, car un pseudo-sélecteur a une spécificité supérieure.
   On répète donc la couleur sur l'état focus. */
.woocommerce-checkout select:focus,
.woocommerce-cart select:focus,
.woocommerce-account select:focus,
.woocommerce-checkout .form-row .input-text:focus,
.woocommerce-cart .form-row .input-text:focus,
.woocommerce-account .form-row .input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-cart .form-row textarea:focus,
.woocommerce-account .form-row textarea:focus {
    color: var( --e-global-color-text, #F7F7F7 ) !important;
    -webkit-text-fill-color: var( --e-global-color-text, #F7F7F7 );
}

/* Pas de chevron personnalisé : la flèche native du navigateur est dessinée
   pour un fond sombre grâce au color-scheme déclaré sur :root plus haut. */

/* Remplissage automatique du navigateur.
   Chrome impose un fond clair via un style interne que background-color
   ne peut pas écraser. On le recouvre avec une ombre interne épaisse,
   et on force la couleur du texte via -webkit-text-fill-color (la seule
   propriété que Chrome respecte dans cet état).
   La transition très longue empêche le fond de réapparaître brièvement. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #111111 inset !important;
    box-shadow: 0 0 0 1000px #111111 inset !important;
    -webkit-text-fill-color: var( --e-global-color-text, #F7F7F7 ) !important;
    caret-color: var( --e-global-color-text, #F7F7F7 ) !important;
    background-color: #111111 !important;
    background-image: none !important;
    transition: background-color 9999s ease-in-out 0s !important;
}

/* Sélecteur standard (Firefox et navigateurs récents), qui n'utilise
   pas le préfixe WebKit. Firefox applique en plus un filtre de teinte. */
input:autofill,
input:autofill:focus,
select:autofill,
textarea:autofill {
    box-shadow: 0 0 0 1000px #111111 inset !important;
    background-color: #111111 !important;
    color: var( --e-global-color-text, #F7F7F7 ) !important;
    filter: none !important;
}

/* Tant qu'aucun pays n'est choisi, l'option vide est sélectionnée :
   on l'affiche en gris, comme les textes indicatifs des autres champs. */
:root {
    --eni-placeholder-color: rgba(247, 247, 247, 0.5);
}

.woocommerce-checkout select:has(option[value=""]:checked),
.woocommerce-cart select:has(option[value=""]:checked),
.woocommerce-account select:has(option[value=""]:checked) {
    /* !important nécessaire : la règle générale de couleur en utilise un. */
    color: var(--eni-placeholder-color) !important;
}

/* Les options de la liste, elles, restent pleinement lisibles. */
.woocommerce-checkout select option,
.woocommerce-cart select option,
.woocommerce-account select option {
    color: #F7F7F7;
}

/* Les options du menu déroulant sont rendues par le système : on force
   le fond sombre pour éviter du texte blanc sur fond blanc. */
.woocommerce-checkout select option,
.woocommerce-cart select option,
.woocommerce-account select option {
    background-color: #111111;
    color: #F7F7F7;
}

/* Focus : bordure blanche, sans arrondi ni halo bleu du navigateur. */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--eni-field-border-focus) !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}