/*
Theme Name: Theme Axcio par Hexagone Stratégie (Child)
Description: Theme réalisé sur Avada par l'agence marketing digital et CRM pour les cabinets d'expertise comptable Hexagone Stratégie, pour l'usage du cabinet Axcio
Author: Hexagone Stratégie
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain: Avada
*/


/* MISE EN FORME DU TEXTE */

/*Titre en script*/
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');

.allison {
    font-family: 'Allison', cursive !important;
    font-size: 150px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    line-height: 0.1 !important;
    position: relative !important;
    padding: 0 15px !important;
}

@media (max-width: 768px) {
    .allison {
        font-size: 120px !important;
    }
}

.allisonh2 {
    font-family: 'Allison', cursive !important;
    font-size: 120px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    line-height: 0.1 !important;
    position: relative !important;
    padding: 0 15px !important;
}

@media (max-width: 768px) {
    .allisonh2 {
        font-size: 100px !important;
    }
}


.allisonh21 {
    font-family: 'Allison', cursive !important;
    font-size: 90px !important;
    font-weight: 400 !important;
    display: inline-block !important;
    line-height: 0.1 !important;
    position: relative !important;
    padding: 0 15px !important;
}

@media (max-width: 768px) {
    .allisonh2 {
        font-size: 100px !important;
    }
}
/*Fin Titre en script*/

/* Titre sur fond orange */
h1.style-orange {
    background-color: #F05F11;
    border-radius: 4px;
    padding: 5px 10px !important; 
    display: inline-block !important; 
    color: white; 
    line-height: 1.4 !important;
}
/*Fin titre sur fond orange*/

/* FIN MISE EN FORME DU TEXTE */

/*PRESENTATION DES SERVICES TABS*/

/* Structure principale */
.presentation-service-tab {
    display: flex;
    align-items: center;
    gap: 40px; /* Espace entre le logo et le texte */
    padding: 20px 0;
}

/* Zone Image */
.presentation-service-tab__image {
    flex: 0 0 150px; /* Largeur fixe du logo */
}

.presentation-service-tab__image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Zone Texte */
.presentation-service-tab__content {
    flex: 1;
}

.presentation-service-tab__content p {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Bouton */
.presentation-service-tab__btn {
    display: inline-block;
    padding: 12px 28px;
    background-color: #ffffff; /* Ajuste selon ta charte */
    color: #333333;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.presentation-service-tab__btn:hover {
    background-color: #f8f8f8;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Adaptabilité Mobile */
@media (max-width: 768px) {
    .presentation-service-tab {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .presentation-service-tab__image {
        flex: 0 0 auto;
        width: 120px; /* Plus petit sur mobile */
        margin: 0 auto;
    }
}
/*FIN PRESENTATION DES SERVICES TABS*/

/*CONTAINER AXCIO*/
/* --- Conteneur global --- */
/* On cible spécifiquement l'intérieur des tabs pour gagner la guerre de priorité */
.fusion-tab-content .axcio-container,
.axcio-container {
    display: flex !important;
    flex-direction: row !important; /* Force l'horizontale */
    flex-wrap: nowrap !important; /* Interdit le passage à la ligne */
    align-items: center !important;
    justify-content: space-between;
    gap: 5%; /* Utilise des % pour s'adapter à la largeur réduite des tabs */
    width: 100%;
}

/* --- Colonne Image --- */
.axcio-col-image {
    flex: 0 0 40% !important; /* Prend 40% de la largeur fixe */
    max-width: 40% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.axcio-col-image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0;
}

/* --- Colonne Contenu --- */
.axcio-col-content {
    flex: 0 0 55% !important; /* Prend les 55% restants */
    max-width: 55% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center;
}

/* --- Textes --- */
.axcio-text p {
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    font-size: 16px; /* Taille fixe pour éviter que ce soit trop gros dans l'onglet */
    line-height: 1.4;
    color: #1a1a3a;
    font-weight: 500;
}

/* --- Bouton (inchangé) --- */
.axcio-btn {
    position: relative;
    display: inline-block !important;
    padding: 10px 20px;
    background-color: #ED4C00;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: bold;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s ease;
    margin-top: 15px;
    font-size: 14px;
    border: none;
    line-height: 1.2;
}

.axcio-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #F05F11;
    z-index: -1;
    transition: width 0.3s ease-in-out;
}

.axcio-btn:hover::before {
    width: 100%;
}

/* --- Gestion des parasites WordPress (Important) --- */
/* Cache les balises <br> ou <p> vides que WP pourrait injecter entre les colonnes */
.axcio-container > br,
.axcio-container > p:empty {
    display: none !important;
}

/* --- Responsive Mobile --- */
@media (max-width: 800px) {
    .fusion-tab-content .axcio-container {
        flex-direction: column !important; /* Retour à la verticale sur mobile */
        gap: 30px;
    }
    
    .axcio-col-image, 
    .axcio-col-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center;
        align-items: center !important;
    }
}
/*CONTAIN AXCIO FIN*/

/*ANIMATIONS DU SITE*/

/*Animation background plain au hover*/
/* --- 1. LE CONTENEUR PRINCIPAL --- */
.hover-fill-blue .fusion-column-wrapper {
    position: relative !important;
    overflow: hidden !important; /* Coupe l'animation qui vient du bas */
    z-index: 1; 
    /* Cette propriété force la création d'un contexte d'empilement propre */
    isolation: isolate; 
}

/* --- 2. LE GRADIENT PERMANENT (Calque 1) --- */
/* Il est fixe et donne l'effet sombre sur l'image par défaut */
.hover-fill-blue .fusion-column-wrapper::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Votre gradient : Transparent vers Bleu Foncé */
    background: linear-gradient(to bottom, rgba(206,206,206,0) 0%, #080c59 100%) !important;
    
    z-index: 5; /* Niveau 5 : Au-dessus de l'image de fond */
    pointer-events: none; 
}

/* --- 3. L'ANIMATION BLEUE (Calque 2) --- */
/* Le rideau qui monte au survol */
.hover-fill-blue .fusion-column-wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    
    /* Le fond bleu uni */
    background-color: #080c59 !important;
    
    /* Animation : Caché en bas (101%), remonte à 0% */
    transform: translateY(101%); 
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    z-index: 10; /* Niveau 10 : Au-dessus du gradient */
}

/* Déclenchement de l'animation au survol */
.hover-fill-blue:hover .fusion-column-wrapper::after {
    transform: translateY(0);
}

/* --- 4. SAUVETAGE DU CONTENU (Calque 3 - LE PLUS IMPORTANT) --- */
/* On force TOUS les éléments possibles d'Avada à passer devant le bleu */

/* Sélectionne le Titre, le Texte, le Bouton, les Séparateurs */
.hover-fill-blue .fusion-column-wrapper .fusion-title,
.hover-fill-blue .fusion-column-wrapper .fusion-text,
.hover-fill-blue .fusion-column-wrapper .fusion-button-wrapper,
.hover-fill-blue .fusion-column-wrapper .fusion-separator,
.hover-fill-blue .fusion-column-wrapper .fusion-image-frame {
    position: relative !important;
    z-index: 100 !important; /* Niveau 100 : IMPOSSIBLE à recouvrir */
    pointer-events: auto; /* Garde le bouton cliquable */
}

/* Sécurité supplémentaire : cible tous les conteneurs directs */
.hover-fill-blue .fusion-column-wrapper > div {
    position: relative !important;
    z-index: 100 !important;
}

/* Effet LIFT-UP */
.lift-up {
  display: inline-block;
  transition: transform 0.3s ease;
}
.lift-up:hover {
  transform: translateY(-5px);
}


/* Fin Effet LIFT-UP */
/*FIN ANIMATIONS DU SITE*/

/*CHECLISTS*/ 
/*Checklists avec coche bleu encerclé*/
/* Conteneur principal de la ligne */
    .axcio-checklist-item {
        display: flex;              /* Aligne l'icône et le texte côte à côte */
        align-items: center;        /* Centre verticalement l'icône par rapport au texte */
        gap: 20px;                  /* Espace entre l'icône et le texte (comme sur la capture) */
    }

    /* Gestion de l'icône */
    .axcio-checklist-icon {
        width: 20px;                /* Largeur de l'icône (ajustez si besoin) */
        height: 20px;               /* Hauteur de l'icône */
        min-width: 20px;            /* Empêche l'icône de s'écraser sur mobile */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Gestion de l'image SVG */
    .axcio-checklist-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Le texte (le style est hérité du builder) */
    .axcio-text-content {
        flex: 1;                    /* Prend toute la place restante */
        line-height: 1.4;           /* Un interligne confortable pour la lecture */
    }
/* Fin checklists avec coche bleu encerclé*/
.question-client {
  display: flex;
  align-items: center;      /* vrai centrage vertical */
  justify-content: left;
  gap: 16px;                /* espace clair entre image et texte */
}

.question-client img {
  display: block;           /* supprime l’alignement inline par défaut */
  height: 44px;             /* ajuste selon ton design */
  width: auto;
}

.question-client span {
  line-height: 1.2;         /* évite que le texte "descende" visuellement */
}

/* Checklist contact */
.axcio-contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre les lignes (téléphone, email...) */
}

.axcio-contact-row {
    display: flex !important; /* !important force l'affichage côte à côte */
    align-items: center;      /* Centre verticalement l'image et le texte */
    justify-content: flex-start;
    flex-direction: row;      /* Assure que ça ne s'empile pas */
    gap: 20px;                /* Espace entre l'image et le texte */
    text-align: left;
}

.axcio-contact-row img {
    margin: 0 !important;     /* Enlève les marges parasites du thème */
    display: block;
    width: auto;              /* Garde la taille naturelle du SVG */
    max-height: 100px;         /* Sécurité pour ne pas avoir une icône géante */
}

.axcio-contact-row span {
    line-height: 1.2;         /* Un interlignage propre */
    margin: 0;
    padding: 0;
	}

/* Fin checklist contact */
	
.axcio-solution {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Configuration de l'alignement */
.axcio-solution li {
    display: flex;             /* Active le mode flexible */
    align-items: center;       /* Centre verticalement l'icône et le texte */
    margin-bottom: 10px;       /* Espace entre chaque ligne */
}

/* Configuration de l'icône */
.axcio-solution li::before {
    content: '';
    display: inline-block;
    
    /* Taille de l'icône */
    width: 24px; 
    height: 24px;
    
    /* L'image SVG */
    background-image: url('http://dev.axcio.fr/wp-content/uploads/2026/01/Icon-de-checklist.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Espacement entre l'icône et le texte */
    margin-right: 15px; 
    
    /* Empêche l'icône de s'écraser */
    flex-shrink: 0; 
}
	
/*FIN CHECLISTS*/ 

/*COUNTER ORANGE*/
/* Bloc principal */
.count-block {
  background-color: #F05F11; /* Couleur demandée */
  color: white;              /* Texte en blanc */
  border-radius: 5px;        /* Léger arrondi conservé (supprimez cette ligne si vous voulez des coins carrés) */
  padding: 12px 20px;
  box-shadow: none;          /* Aucune ombre */
  border: none;              /* Aucune bordure (ni latérale, ni contour) */
  display: inline-block;
  margin-bottom: 10px;
}

/* Le chiffre */
.counter {
  font-family: 'Noto Sans', sans-serif; /* Nouvelle police */
  font-weight: 700;
  font-size: 24px;
  color: white;
}

/* Le libellé (ex: collaborateurs) */
.label {
  font-family: 'Noto Sans', sans-serif; /* Nouvelle police */
  font-weight: 300;
  font-size: 18px;
  margin-left: 4px;
  color: white;
}
/*FIN COUNTER ORANGE*/

/*COUNTER CIEL*/
/* Bloc principal */
.count-block-blue {
  background-color: #EDF2FB; /* Bleu Ciel demandé */
  color: #080E59;            /* Texte Bleu Foncé demandé */
  border-radius: 5px;
  padding: 12px 20px;
  box-shadow: none;
  border: none;
  display: inline-block;
  margin-bottom: 10px;
}

/* Le chiffre */
.counter-blue {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #080E59; /* Texte Bleu Foncé */
}

/* Le libellé */
.label-blue {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 300;
  font-size: 18px;
  margin-left: 4px;
  color: #080E59; /* Texte Bleu Foncé */
}
/*FIN COUNTER CIEL*/

/*EFFET TEXTE*/ 
.menu-container{
  width: 100%;
  overflow: hidden; /* empêche tout débordement qui perturbe le layout */
}

.lien-anime{
  display:block;
  color:#fff;
  text-decoration:none;
  font-size:16px;
  position:relative;
  padding-left: 0;
  transition: padding-left .3s ease; /* au lieu de transform */
}

.lien-anime::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-3px;
  height:2px;
  width:0;
  background:#ff6b35;
  transition: width .3s ease;
}

.lien-anime:hover,
.lien-anime:focus{
  padding-left: 8px; /* “décalage” visuel sans changer la géométrie flex */
}

.lien-anime:hover::after,
.lien-anime:focus::after{
  width:100%;
}
  /* --- FIN STYLE DE BASE DU LIEN --- */

  /* --- STYLE LIEN BLEU --- */
  .lien-anime-bleu {
	color: #0B2089;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    display: inline-block;
    
    /* Transition décalage à droite) */
    transition: transform 0.3s ease-out;
  }

  /* --- CRÉATION DE LA LIGNE INVISIBLE (Pseudo-élément) --- */
  .lien-anime-bleu::after {
    content: ''; /* Obligatoire pour créer l'élément */
    position: absolute;
    left: 0;
    bottom: 0; /* Se colle en bas du lien */
    
    height: 2px; /* Épaisseur de la ligne */
    width: 0%;   /* Au départ, la ligne est invisible (largeur 0) */
    
    background-color: #ff6b35; /* La couleur orange d'accentuation */
    
    /* Transition pour l'EFFET 2 (l'apparition de la ligne) */
    transition: width 0.3s ease-out;
  }

  /* --- LES ACTIONS AU SURVOL (HOVER) --- */
  
  /* Action 1 : Le texte entier se décale */
  .lien-anime-bleu:hover {
    transform: translateX(10px); /* Décale de 10px vers la droite */
  }
  
  /* Action 2 : La ligne en dessous s'étend */
  .lien-anime-bleu:hover::after {
    width: 100%; /* La largeur passe à 100% */
  }
  /* --- FIN STYLE LIEN BLEU --- */

/*FIN EFFET TEXTE*/ 

/* Forcer les mentions à passer sur une nouvelle ligne */
.footer-mentions{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  order: 999 !important;
  margin-top: 20px;
}

/* Assure que la rangée du footer peut “wrap” */
.fusion-footer .fusion-row,
.fusion-footer .fusion-builder-row{
  flex-wrap: wrap !important;
}

/* Le parent */
.hovercard{
  position: relative;
  overflow: hidden;      /* cache le texte quand fermé */
  height: 550px;
}

/* Le titre bouge */
.hovercard__title{
  transform: translateY(0);
  transition: transform .25s ease;
}

/* Le texte est caché au repos */
.hovercard__text{
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  transition: max-height .35s ease, opacity .2s ease, transform .25s ease;
}

/* Au hover : le titre monte + le texte s'affiche */
.hovercard:hover .hovercard__title{
  transform: translateY(-10px);
}

.hovercard:hover .hovercard__text{
  max-height: 300px; /* augmente si ton texte est plus long */
  opacity: 1;
  transform: translateY(0);
}