/*
Theme Name: uMEn Enfant
Theme URI: https://umen-mutuelles.fr
Description: Theme enfant sur mesure pour uMEn, base sur Hello Elementor. Reconstruit proprement en 2026 (base neuve, saine). Reprend la charte : Raleway + palette de marque, et integre le slider d'accueil recode en CSS/JS.
Author: newp
Template: hello-elementor
Version: 1.0.0
Text Domain: umen-child
*/

/* =========================================================
   Charte uMEn - tokens de marque
   ========================================================= */
:root{
  --umen-cyan:#00ABDF;
  --umen-cyan-d:#0093c0;
  --umen-blue:#0280CD;
  --umen-blue-d:#021D96;
  --umen-blue-dd:#001055;
  --umen-green:#A7C13C;
  --umen-green-d:#98B037;
  --umen-purple:#84338A;
  --umen-purple-d:#5F3089;
  --umen-mint:#CBE2DA;
  --umen-grey:#F1F1F1;
  --umen-white:#FFFFFF;
  --umen-black:#000000;
}

body{
  font-family:"Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================
   Slider hero d'accueil (recode, sans Slider Revolution)
   ========================================================= */
.umen-hero{
  position:relative;
  width:100%;
  min-height:640px;
  height:70vh;
  max-height:820px;
  overflow:hidden;
  background:var(--umen-black);
}
.umen-hero__track{position:absolute;inset:0;}
.umen-hero__slide{
  position:absolute;inset:0;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease;
  background-size:cover;
  background-position:center center;
  display:flex;
  align-items:center;
}
.umen-hero__slide.is-active{opacity:1;visibility:visible;z-index:2;}
.umen-hero__slide::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 42%, rgba(0,0,0,0) 78%);
  z-index:1;
}
.umen-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 40px;
}
.umen-hero__content{max-width:640px;color:#fff;}
.umen-hero__title{
  font-family:"Raleway",sans-serif;
  font-weight:800;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:1.05;
  letter-spacing:.5px;
  margin:0 0 18px;
  color:#fff;
  text-transform:none;
}
.umen-hero__title .accent{color:var(--umen-cyan);}
.umen-hero__text{
  font-family:"Raleway",sans-serif;
  font-weight:400;
  font-size:clamp(1rem,1.5vw,1.25rem);
  line-height:1.5;
  margin:0 0 30px;
  color:#f4f4f4;
  max-width:520px;
}
.umen-hero__btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--umen-cyan);
  color:#fff;
  font-family:"Raleway",sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:.5px;
  text-decoration:none;
  padding:15px 34px;
  border-radius:40px;
  transition:background .25s ease, transform .25s ease;
}
.umen-hero__btn:hover{background:var(--umen-cyan-d);transform:translateY(-2px);color:#fff;}

/* Fleches */
.umen-hero__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:54px;height:54px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--umen-blue-d);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.umen-hero__nav:hover{background:#fff;}
.umen-hero__nav svg{width:20px;height:20px;}
.umen-hero__nav--prev{left:24px;}
.umen-hero__nav--next{right:24px;}

/* Puces */
.umen-hero__dots{
  position:absolute;
  left:0;right:0;bottom:26px;
  z-index:5;
  display:flex;justify-content:center;gap:12px;
}
.umen-hero__dot{
  width:12px;height:12px;border-radius:50%;
  border:2px solid #fff;background:transparent;
  cursor:pointer;padding:0;
  transition:background .25s ease;
}
.umen-hero__dot.is-active{background:#fff;}

@media (max-width:781px){
  /* Slides gardees en position absolue (empilees) : seule l'active s'affiche */
  .umen-hero{min-height:0;height:74vh;max-height:600px;}
  .umen-hero__slide::before{background:linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.72) 100%);}
  .umen-hero__inner{padding:0 22px;}
  .umen-hero__content{max-width:100%;}
  .umen-hero__title{font-size:2rem;}
  .umen-hero__text{font-size:1rem;margin-bottom:22px;}
  /* Sur mobile : fleches masquees (chevauchent le contenu), navigation par puces + autoplay */
  .umen-hero__nav{display:none;}
}

/* =========================================================
   Neutralisation des styles boutons globaux (fleches + puces)
   ========================================================= */
.umen-hero__nav,
.umen-hero__dot{
  -webkit-appearance:none;
  appearance:none;
  box-shadow:none;
  min-width:0;
  min-height:0;
  font-size:0;
  line-height:0;
}
.umen-hero__nav{padding:0;}
.umen-hero__nav svg{display:block;width:22px;height:22px;color:var(--umen-blue-d);}
.umen-hero__dot{width:13px;height:13px;padding:0;border-radius:50%;flex:0 0 auto;}

/* Override haute specificite (bat les styles boutons Elementor) */
.umen-hero .umen-hero__nav{
  width:54px !important;height:54px !important;min-width:0 !important;
  border-radius:50% !important;padding:0 !important;
  background:rgba(255,255,255,.9);border:none;
}
.umen-hero .umen-hero__nav:hover{background:#fff !important;}
.umen-hero .umen-hero__nav svg{width:22px !important;height:22px !important;display:block;color:var(--umen-blue-d) !important;}
.umen-hero .umen-hero__dot{
  width:13px !important;height:13px !important;min-width:0 !important;
  border-radius:50% !important;padding:0 !important;
  background:transparent;border:2px solid #fff;
}
.umen-hero .umen-hero__dot.is-active{background:#fff !important;}

/* =========================================================
   Corrections responsive (en-tete mobile + debordement horizontal)
   ========================================================= */
/* Empeche tout defilement horizontal (ex. effet Ken Burns Elementor).
   overflow-x:clip ne casse pas le sticky de l'en-tete (contrairement a hidden). */
html, body { overflow-x: clip; }

@media (max-width: 767px) {
  /* En-tete mobile : on evite le chevauchement des boutons.
     "Mon espace" passe dans le menu burger ; on garde le CTA "Demande de devis" compact. */
  .elementor-location-header .bouton_compte { display: none !important; }
  .elementor-location-header .bouton_devis_en_ligne_header .elementor-button {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* Correctif logo responsive 2026 : evite le debordement du logo hors de l entete sur tablette et mobile */
@media (max-width:1024px){.elementor-location-header .elementor-element-195ec11 img,.elementor-location-header img.wp-image-9{max-height:70px !important;width:auto !important;height:auto !important;}}
@media (max-width:767px){.elementor-location-header .elementor-element-195ec11 img,.elementor-location-header img.wp-image-9{max-height:52px !important;width:auto !important;height:auto !important;}}

/* Correctif menu principal 2026 : evite le retour a la ligne (Contactez-nous) sur ecrans portables */
@media (min-width:1025px){.elementor-location-header .menu_principal .e-n-menu-heading{flex-wrap:nowrap !important;gap:34px !important;}.elementor-location-header .menu_principal .e-n-menu-heading>.e-n-menu-item{margin-left:0 !important;margin-right:0 !important;}}

/* Menu principal : taille adaptee sur ecrans portables pour tenir sur une ligne */
@media (min-width:1025px) and (max-width:1450px){.elementor-location-header .menu_principal .e-n-menu-title-container,.elementor-location-header .menu_principal .e-n-menu-title-text{font-size:14px !important;}.elementor-location-header .menu_principal .e-n-menu-heading{gap:26px !important;}}

/* Menu principal : resserrage final pour marge sur petits portables */
@media (min-width:1025px) and (max-width:1450px){.elementor-location-header .menu_principal .e-n-menu-heading{gap:16px !important;}.elementor-location-header .menu_principal .e-n-menu-title-container,.elementor-location-header .menu_principal .e-n-menu-title-text{font-size:14px !important;}}

/* === Menu principal : soulignement colore au survol (markup Elementor actuel) ===
   Restaure la barre coloree par rubrique (les ID #green/#blue/#soft_blue d'origine
   ne sont plus presents ; on cible par position sur le markup e-n-menu actuel). */
.menu_principal .e-n-menu-heading > li.e-n-menu-item > .e-n-menu-title { position: relative; }
.menu_principal .e-n-menu-heading > li.e-n-menu-item > .e-n-menu-title::after {
    content: ""; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
    bottom: -12px; width: 70px; height: 6px; border-radius: 3px;
    opacity: 0; transition: opacity 300ms ease; background-color: #00abdf; pointer-events: none;
}
.menu_principal .e-n-menu-heading > li.e-n-menu-item:hover > .e-n-menu-title::after,
.menu_principal .e-n-menu-heading > li.e-n-menu-item.e-current > .e-n-menu-title::after { opacity: 1; }
.menu_principal .e-n-menu-heading > li.e-n-menu-item:nth-child(1) > .e-n-menu-title::after { background-color: #a7c13c; } /* Particuliers */
.menu_principal .e-n-menu-heading > li.e-n-menu-item:nth-child(2) > .e-n-menu-title::after { background-color: #021d96; } /* Entreprises */
.menu_principal .e-n-menu-heading > li.e-n-menu-item:nth-child(3) > .e-n-menu-title::after { background-color: #00abdf; } /* uMEn & vous */
.menu_principal .e-n-menu-heading > li.e-n-menu-item:nth-child(4) > .e-n-menu-title::after { background-color: #00abdf; } /* Contactez-nous */


/* =============================================================================
   UMEN — Correctif d'affichage des formulaires de simulation
   -----------------------------------------------------------------------------
   OÙ COLLER CE CODE :
   WordPress > Apparence > Personnaliser > CSS additionnel
   (ou dans le fichier style.css de votre thème enfant "umen-child").

   Aucun fichier ni aucun code de l'ancien site (infecté) n'est réutilisé.
   Ce fichier ne contient que des règles CSS écrites de zéro.

   CHARTE COULEURS APPLIQUÉE :
   - Bleu foncé  #021D96  → contexte ENTREPRISE + titres "Je souhaite"
   - Bleu clair  #00ABDF  → couleur de marque / boutons de navigation
   - Vert        #A7C13C  → indicateurs PARTICULIER uniquement (inchangé)
   - Rouge       #D32F2F  → messages d'erreur (remplace le ROSE #E2445C supprimé)

   Le ROSE (#E2445C) provenait uniquement des messages de validation
   du plugin multi-étapes (.cf7mls-msg). Il est ici remplacé par un rouge
   d'erreur lisible, non rose.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1) SUPPRESSION DU ROSE
   Les messages d'erreur / validation passent d'un rose (#E2445C) à un rouge net.
   -------------------------------------------------------------------------- */
.wpcf7 .cf7mls-msg,
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
    color: #D32F2F !important;
    border-color: #D32F2F !important;
    outline-color: #D32F2F !important;
}
.wpcf7 .wpcf7-not-valid {
    border-color: #D32F2F !important;
}


/* -----------------------------------------------------------------------------
   2) CONTEXTE ENTREPRISE → BLEU FONCÉ (jamais de vert)
   Le bouton d'envoi de la simulation "santé entreprise" était vert : on le
   force en bleu foncé #021D96. (Le bouton "Je souhaite" est déjà bleu foncé.)
   Double ciblage : par identifiant de page ET par classe, au cas où l'ID
   changerait après une reconstruction de la page (page-id-23532 actuellement).
   -------------------------------------------------------------------------- */
body.page-id-23532 .wpcf7-submit,
.cf7mls-form:has(.section_sante_entreprise) .wpcf7-submit {
    background-color: #021D96 !important;
    border-color: #021D96 !important;
    color: #ffffff !important;
}


/* -----------------------------------------------------------------------------
   3) ALIGNEMENT DU TEXTE — tout à gauche
   Certaines étapes étaient centrées (obsèques étape 2, entreprise étape 3),
   d'autres à gauche : on uniformise à gauche.
   -------------------------------------------------------------------------- */
.cf7mls-form [class*="section_form"] {
    text-align: left !important;
}


/* -----------------------------------------------------------------------------
   4) BOUTONS RADIO / CASES À COCHER — espacement
   Les options affichées en ligne (ex. "3000 € 4500 € 6000 € 7500 €", les types
   de contrat, "Des cadres / non-cadres / …") étaient collées / superposées.
   Le "gap" n'agit QUE sur les groupes déjà horizontaux : les groupes verticaux
   (ex. "1 à 10 / 10 à 50 / plus de 50") restent empilés.
   -------------------------------------------------------------------------- */
.cf7mls-form .wpcf7-radio,
.cf7mls-form .wpcf7-checkbox {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start !important;
    column-gap: 26px;
    row-gap: 8px;
    text-align: left !important;
}
.cf7mls-form .wpcf7-list-item > label {
    display: inline-flex;
    align-items: center;
}
/* espace entre le bouton radio/case et son libellé */
.cf7mls-form .wpcf7-list-item input[type="radio"],
.cf7mls-form .wpcf7-list-item input[type="checkbox"] {
    margin: 0 8px 0 0 !important;
    flex: 0 0 auto;
}


/* -----------------------------------------------------------------------------
   5) LIGNES À DEUX COLONNES — champs alignés
   Ex. "Convention collective" (libellé sur 2 lignes) / "Code APE" (1 ligne) :
   les deux champs de saisie s'alignent désormais sur la même ligne.
   -------------------------------------------------------------------------- */
.cf7mls-form .col2 {
    display: flex !important;
    gap: 24px !important;
    align-items: flex-end !important;
}
.cf7mls-form .col2 > div {
    flex: 1 1 0;
    min-width: 0;
}


/* -----------------------------------------------------------------------------
   6) BLOC "MONTANT OBSÈQUES" — aligné à gauche
   Ce bloc était décalé/centré par une marge gauche : on le remet à gauche.
   -------------------------------------------------------------------------- */
.cf7mls-form .section_montant_obseques {
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}


/* -----------------------------------------------------------------------------
   7) BOUTONS DE NAVIGATION — cohérents sur toutes les étapes
   "Étape suivante" = bleu clair plein ; "Étape précédente" = contour bleu foncé.
   -------------------------------------------------------------------------- */
.cf7mls-btn--next {
    background-color: #00ABDF !important;
    border-color: #00ABDF !important;
    color: #ffffff !important;
}
.cf7mls-btn--prev,
.cf7mls-btn--back {
    background: #ffffff !important;
    color: #021D96 !important;
    border: 2px solid #021D96 !important;
}


/* -----------------------------------------------------------------------------
   8) FORMULAIRE "ACCOMPAGNEMENT SOCIAL" (structure différente, volontairement)
   Les colonnes étaient centrées verticalement (Commune plus bas qu'Adresse) :
   on les aligne en haut pour un rendu propre en deux colonnes.
   (page-id-29839 actuellement)
   -------------------------------------------------------------------------- */
body.page-id-29839 .section_form.page_contact_form {
    align-items: flex-start !important;
}


/* -----------------------------------------------------------------------------
   9) (OPTIONNEL) Mise en forme d'une mention RGPD
   Si vous ajoutez la mention RGPD dans le formulaire (voir note fournie),
   ces règles la rendent discrète et alignée à gauche.
   -------------------------------------------------------------------------- */
.wpcf7 .rgpd-mention {
    font-size: 0.82em;
    line-height: 1.5;
    color: #555555;
    text-align: left;
    margin: 18px 0 10px;
}
.wpcf7 .rgpd-mention a {
    color: #021D96;
    text-decoration: underline;
}