/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/



/* ==================================================
    GENERAL STYLES
=================================================== */

.bordure-gauche-degrade{
  border-left: 3px solid; /* épaisseur de ta bordure */
  border-image: linear-gradient(180deg, var(--bleu-fonce), var(--bleu-clair)) 3;
}

ul li::marker {
  color: var(--bleu-clair); /* couleur de la puce */
}



/* ==================================================
    BOUTONS
=================================================== */

.brxe-button.bouton-large {
    padding-inline: 30px;
}


/* PRIMARY */

.bouton-bordure-degrade-bleu-fond-bleu,
.bouton-bordure-degrade-bleu-fond-bleu:visited {
    display: inline-block;
    border-radius: 8px;
    border: 1px solid transparent;
    background: 
        var(--gradient-bleu) padding-box,
        var(--gradient-bleu) border-box;

}

.bouton-bordure-degrade-bleu-fond-bleu:hover,
.bouton-bordure-degrade-bleu-fond-bleu:focus,
.bouton-bordure-degrade-bleu-fond-bleu:active {
    background: 
        linear-gradient(#fff, #Fff) padding-box,
        var(--gradient-bleu) border-box;
}

.bouton-bordure-degrade-bleu-fond-bleu .brxe-button.bricks-background-primary,
 .bouton-bordure-degrade-bleu .brxe-button.bricks-background-primary:visited {
    background: var(--gradient-bleu);
    color: var(--blanc); /* Fallback */
}

.bouton-bordure-degrade-bleu-fond-bleu .brxe-button.bricks-background-primary:hover,
.bouton-bordure-degrade-bleu-fond-bleu .brxe-button.bricks-background-primary:focus,
.bouton-bordure-degrade-bleu-fond-bleu .brxe-button.bricks-background-primary:active {
    background: var(--gradient-bleu);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bleu-fonce); /* Fallback */
}

/* SVG au hover - couleur bleu clair */

.bouton-bordure-degrade-bleu-fond-bleu .brxe-button.bricks-background-primary svg {
    margin-left: 10px
}

.bouton-bordure-degrade-bleu-fond-bleu:hover .brxe-button.bricks-background-primary svg,
.bouton-bordure-degrade-bleu-fond-bleu:focus .brxe-button.bricks-background-primary svg,
.bouton-bordure-degrade-bleu-fond-bleu:active .brxe-button.bricks-background-primary svg,
.bouton-bordure-degrade-bleu-fond-bleu:hover .brxe-button.bricks-background-primary svg path,
.bouton-bordure-degrade-bleu-fond-bleu:focus .brxe-button.bricks-background-primary svg path,
.bouton-bordure-degrade-bleu-fond-bleu:active .brxe-button.bricks-background-primary svg path {
    fill: var(--bleu-clair);
}


/* SECONDARY */

.bouton-bordure-degrade-bleu,
.bouton-bordure-degrade-bleu:visited {
    display: inline-block;
    border-radius: 8px;
    border: 1px solid transparent;
    background: 
        linear-gradient(#fff, #Fff) padding-box,
        var(--gradient-bleu) border-box;
}

.bouton-bordure-degrade-bleu:hover,
.bouton-bordure-degrade-bleu:focus,
.bouton-bordure-degrade-bleu:active {
background: 
        var(--gradient-bleu) padding-box,
        var(--gradient-bleu) border-box;
}

.bouton-bordure-degrade-bleu .brxe-button.bricks-background-secondary,
.bouton-bordure-degrade-bleu .brxe-button.bricks-background-secondary:visited {
    background: linear-gradient(45deg, var(--bleu-fonce), var(--bleu-clair));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bleu-fonce); /* Fallback */
}

.bouton-bordure-degrade-bleu .brxe-button.bricks-background-secondary:hover,
.bouton-bordure-degrade-bleu .brxe-button.bricks-background-secondary:focus,
.bouton-bordure-degrade-bleu .brxe-button.bricks-background-secondary:active {
    background: none; /* Retire le dégradé */
    -webkit-text-fill-color: var(--blanc); /* Texte blanc */
    color: var(--blanc);
}

.bouton-bordure-degrade-bleu-fond-bleu:hover .brxe-button.bricks-background-primary svg,
.bouton-bordure-degrade-bleu:focus .brxe-button.bricks-background-secondary svg,
.bouton-bordure-degrade-bleu:active .brxe-button.bricks-background-secondary svg,
.bouton-bordure-degrade-bleu:hover .brxe-button.bricks-background-secondary svg path,
.bouton-bordure-degrade-bleu:focus .brxe-button.bricks-background-secondary svg path,
.bouton-bordure-degrade-bleu:active .brxe-button.bricks-background-secondary svg path {
    fill: var(--blanc);
}


/* light */

.bouton-bordure-basse-degrade-bleu,
.bouton-bordure-basse-degrade-bleu:visited {
    display: inline-block;
    position: relative;
    padding: 0px !important;
    color: var(--bleu-fonce); /* ou var(--bleu-clair) selon ce que tu veux */
}

.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light, 
.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light:visited {
    padding: 0  0 0px 0 !important;
    color: var(--noir);
}

.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light:hover,
.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light:focus,
.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light:active {
    background: var(--gradient-bleu);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bleu-fonce); /* Fallback */
}

/* Bordure basse dégradée avec ::after */
.bouton-bordure-basse-degrade-bleu .brxe-button.bricks-background-light::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-bleu);
    
}

    /* =================================================
        HEADER
    ================================================== */

    /* Liens normaux - état initial */
.brxe-nav-nested .brxe-text-link {
    color: var(--noir); /* ou la couleur que tu veux */
    text-decoration: none;
}

/* Liens normaux - au hover avec texte en dégradé bleu */
.brxe-nav-nested .brxe-text-link:hover,
.brxe-nav-nested .brxe-text-link:focus,
.brxe-nav-nested .brxe-text-link:active {
    background: linear-gradient(45deg, var(--bleu-fonce), var(--bleu-clair));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bleu-fonce); /* Fallback */
}

/* Pour le dropdown toggle aussi */
.brxe-dropdown .brx-submenu-toggle span {
    transition: background 0.3s ease;
}

.brxe-dropdown:hover .brx-submenu-toggle span {
    background: linear-gradient(45deg, var(--bleu-fonce), var(--bleu-clair));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--bleu-fonce);
}

/* SVG du dropdown au hover */
.brxe-dropdown:hover .brx-submenu-toggle svg path {
    stroke: var(--bleu-clair);
}

/* ==================================================
DIAPORAMA PLATEFORME
=================================================== */


.diaporama-plateforme .image.css-filter {
    background-position: center right;
    background-size: cover;
}

.diaporama-plateforme.gauche .image.css-filter {
    background-position: center left;
    background-size: cover;
}

.etape-plateforme :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 30px;
}


.etape-plateforme ul {
    margin: 0 !important
}

.etape-plateforme p {
    margin: 0 !important
}

.etape-plateforme {
    overflow: hidden !important;
}       

@media (min-width: 1921px) {
  .etape-plateforme {
    overflow: visible !important
  }

  .diaporama-plateforme .image.css-filter {
    background-size: contain;
    background-repeat: no-repeat;
    }
}

@media all and (max-width: 767px) {
  .etape-plateforme::before {
    display: none !important;
    }
}

@media all and (max-width: 478px) {
    .diaporama-plateforme .image.css-filter, .diaporama-plateforme.gauche .image.css-filter {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat !important;
}

}

/* ==================================================
    CARROUSEL PARTENAIRES
=================================================== */

.carrousel-partenaires .image.css-filter {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ==================================================
    FAQ ACCORDÉON
=================================================== */

/* Masquer l'icône originale */
.element-faq .brxe-icon i {
    display: none;
}

/* Icône via pseudo-élément centré */
.element-faq .brxe-icon {
    position: relative;      /* nécessaire pour le ::before */
    width: 24px;             /* largeur du conteneur */
    height: 24px;            /* hauteur du conteneur */
    display: inline-block;   /* permet de centrer le pseudo-élément */
}

/* Icône fermée */
.element-faq .brxe-icon::before {
    content: '';
    position: absolute;      /* pour centrer */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg); /* centre parfaitement */
    width: 30px;
    height: 30px;
    background-image: url('https://f-2g.com/wp-content/uploads/2025/11/faq-close.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Icône ouverte */
.element-faq.brx-open .brxe-icon::before {
    background-image: url('https://f-2g.com/wp-content/uploads/2025/11/faq-open.svg');
}

.element-faq.brx-open {
    background: linear-gradient(45deg, var(--bleu-fonce), var(--bleu-clair));
}

.element-faq.brx-open * {
    color: #fff !important;
}

/* ==================================================
    BLOG
=================================================== */

.container-blog-related:last-of-type {
    border: 0 !important
}