/*
Theme Name: IS Forge
Description: Thème WordPress personnalisé pour IS Forge
Author: SPORTINGER
Author URI: https://sportinger.com/
Template: bauer
Version: 1.0.1
*/


/* ==========================================================
   PAGE ACCUEIL GENERAL – HEADER
   Zone concernée : header général du site
   Raison : personnalisation du logo, top bar et header mobile
   ========================================================== */

.site-logo-text {
    display: none;
}

#top-bar .top-bar-content {
    width: 90%;
}

.header-style-2 #site-header:after {
    background-color: #262626;
}

#main-nav-mobi {
    background-color: #262626;
}

/* ==========================================================
   PAGE ACCUEIL – CHOIX SITES
   Zone concernée : bloc #choix
   Raison : gestion des visuels, textes et effets au survol
   ========================================================== */

#choix .bauer-simple-image {
    background-color: rgb(38, 38, 38);
}

#choix .bauer-simple-image > img {
    opacity: 0.5;
}

#textchoix,
#logochoix {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white !important;
    z-index: 99;
}

#textchoix {
    opacity: 1;
    transition: 0.5s;
}

#logochoix {
    opacity: 0;
    transition: 0.5s;
    width: 100%;
}

#choice:hover #logochoix {
    opacity: 1;
}

#choice:hover #textchoix {
    opacity: 0;
}

#choice:hover .bauer-simple-image {
    background-color: rgb(206, 77, 35) !important;
}

@media screen and (min-width: 768px) and (max-width: 1330px) {
    #textchoix {
        font-size: 18px;
    }
}


/* ==========================================================
   PAGE ACTUS
   Zone concernée : widgets / recherche / commentaires
   Raison : conserver les ajustements historiques du thème enfant
   ========================================================== */

.widget.widget_archive ul li a,
.widget.widget_categories ul li a,
.widget.widget_meta ul li a,
.widget.widget_nav_menu ul li a,
.widget.widget_pages ul li a,
.widget.widget_recent_entries ul li a,
.widget.widget_recent_comments ul li a,
.widget.widget_rss ul li a {
    color: #fff;
}

.search-field::-webkit-input-placeholder {
    color: transparent;
}

.search-field:-moz-placeholder {
    color: transparent;
}

.search-field::-moz-placeholder {
    color: transparent;
}

.search-field:-ms-input-placeholder {
    color: transparent;
}

.search-field::placeholder {
    color: transparent;
}

#sidebar .widget.widget_socials .socials a,
#footer-widgets .widget.widget_socials .socials a {
    color: #F6572A;
}

#comments {
    display: none;
}


/* ==========================================================
   PAGE CONTACT
   Zone concernée : formulaire CF7
   Raison : mise en forme du champ téléphone
   ========================================================== */

.wpcf7-form .cf7-style-1 .phone-wrap {
    width: 100%;
    margin-bottom: 20px;
}

.wpcf7-form .cf7-style-1 .phone-wrap input {
    padding: 9px 25px;
    background-color: #fff;
}

.wpcf7-form input[type="tel"] {
    margin-bottom: 0;
    width: 100%;
}


/* ==========================================================
   PAGE IDP
   Zone concernée : overlays et Image Box Bauer
   Raison : ajustements spécifiques historiques
   ========================================================== */

.ult-overlay-close {
    width: 50px !important;
    height: 50px !important;
}

.bauer-image-box.style-2 .item .text-wrap {
    bottom: 20px !important;
}


/* ==========================================================
   PAGE ISP
   Zone concernée : modales, colonnes, images et blocs Bauer
   Raison : conserver les ajustements existants
   ========================================================== */

#modal1,
#modal2,
#modal3 {
    cursor: pointer;
}

.colonnegif > .vc_column-inner {
    padding: 0 !important;
}

.wpb_single_image img {
    width: 75% !important;
    height: 75% !important;
    margin: auto;
}

.statics {
    position: absolute;
}

.actives {
    opacity: 0;
    transition: all 0.33s ease-out;
}

.actives:hover {
    opacity: 100;
}

.bauer-icon-box > .wrap-inner > h1 {
    font-size: 20px !important;
    color: #F6572A;
}

.bauer-icon-box > .wrap-inner > h2 {
    font-size: 18px !important;
}

div#colonne1 {
    float: left;
    width: 33%;
    margin-right: 2.5em;
    margin-bottom: 1.25em;
    padding: 2em;
    background: #F6572A;
    color: #fff;
    text-align: center;
}

div#colonne2 {
    float: right;
    width: 33%;
    margin-left: 2.5em;
    margin-bottom: 1.25em;
    padding: 2em;
    background: #F6572A;
    color: #fff;
    text-align: center;
}

div#centre {
    overflow: hidden;
    margin-bottom: 1.25em;
    padding: 2em;
    background: #F6572A;
    color: #fff;
    text-align: center;
}

div#colonne1off {
    float: left;
    width: 33%;
    margin-right: 2.5em;
    margin-bottom: 1.25em;
    padding: 2em;
    background: none;
}

div#colonne2off {
    float: right;
    width: 33%;
    margin-left: 2.5em;
    margin-bottom: 1.25em;
    padding: 2em;
    background: none;
}

div#centreoff {
    overflow: hidden;
    margin-bottom: 1.25em;
    padding: 2em;
    background: none;
}

@media screen and (max-width: 1440px) {

    .improve .bauer-image-box.style-2 .item .text-wrap {
        font-size: 14px;
    }

    .improve .bauer-image-box.style-2 .item .text-wrap .desc {
        margin-bottom: 20px !important;
    }
}

@media screen and (max-width: 1350px) {

    .improve .bauer-image-box.style-2 .item .text-wrap {
        font-size: 13px;
    }

    .improve .bauer-image-box.style-2 .item .text-wrap .desc {
        margin-bottom: 5px !important;
    }

    .improve .bauer-button.outline.big {
        padding: 5px 39px;
    }
}

@media screen and (max-width: 1330px) {

    div#colonne1,
    div#colonne2,
    div#centre {
        width: 100%;
    }

    div#colonne1off,
    div#colonne2off,
    div#centreoff {
        display: none;
    }
}

@media screen and (max-width: 1199px) {

    .improve .bauer-image-box.style-2 .item .text-wrap {
        font-size: inherit;
    }

    .improve .bauer-image-box.style-2 .item .text-wrap .desc {
        margin-bottom: 75px !important;
    }

    .improve .bauer-button.outline.big {
        padding: 11px 39px;
    }
}

@media screen and (max-width: 991px) {

    .improve .vc_col-sm-3 {
        width: 50%;
    }
}

@media screen and (max-width: 767px) {

    .improve .vc_col-xs-12 {
        width: 100%;
    }
}


/* ==========================================================
   PAGE ISF
   Zone concernée : navigation Cube Portfolio
   Raison : masquer l'élément d'arrêt non souhaité
   ========================================================== */

.cbp-nav-stop:after {
    display: none !important;
}

/* ==========================================================
   IS FORGE – SINGLE POSTS
   Zone concernée : tous les articles WordPress utilisant
   la classe .isforge-single-post

   Fonction :
   Centrer la colonne éditoriale et supprimer l'effet
   de l'ancienne sidebar Bauer.
   ========================================================== */

.isforge-single-post #site-content,
.isforge-single-post .site-content,
.isforge-single-post #inner-content,
.isforge-single-post .inner-content-wrap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.isforge-single-post .hentry,
.isforge-single-post article {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.isforge-single-post .post-media,
.isforge-single-post .post-media img,
.isforge-single-post .featured-image,
.isforge-single-post .featured-image img {
    width: 100% !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}


/* ==========================================================
   IS FORGE – PAGE BLOG
   Zone concernée : /blog/ via la classe .isforge-blog

   Fonction :
   - mobile : 1 colonne ;
   - tablette : 2 colonnes ;
   - desktop : 3 colonnes.
   ========================================================== */

.isforge-blog #site-content,
.isforge-blog .site-content,
.isforge-blog #inner-content,
.isforge-blog .inner-content-wrap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.isforge-blog .inner-content-wrap {
    display: block;
}

.isforge-blog .inner-content-wrap > article {
    width: 100% !important;
    margin-bottom: 35px !important;
    float: none !important;
}

.isforge-blog article .post-media,
.isforge-blog article .post-media img {
    width: 100% !important;
}

.isforge-blog article .post-media img {
    display: block;
    height: auto !important;
}

@media only screen and (min-width: 768px) {

    .isforge-blog .inner-content-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 30px;
        row-gap: 45px;
    }

    .isforge-blog .inner-content-wrap > article {
        margin: 0 !important;
    }

    .isforge-blog .bauer-pagination {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {

    .isforge-blog .inner-content-wrap {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================
   IS FORGE – CTA "DEVENEZ REVENDEUR"
   Zone concernée : rangées WPBakery portant .cta-center

   Fonction :
   Centrer horizontalement le bouton Bauer.

   Raison :
   Certains styles Bauer peuvent neutraliser text-align:center.
   ========================================================== */

.cta-center .button-wrap {
    display: flex !important;
    justify-content: center !important;
}


/* ==========================================================
   IS FORGE – TOP MENU BAUER
   Zone concernée : barre supérieure du header (#top-bar)

   Fonction :
   - forcer l'affichage horizontal du Top Menu ;
   - centrer verticalement les éléments ;
   - conserver l'espacement entre les liens ;
   - texte orange + fond gris clair au survol.

   Raison :
   Dans le fichier CSS du thème enfant, certaines règles Bauer
   chargées ensuite peuvent reprendre la priorité.
   Les règles sont donc volontairement renforcées.
   ========================================================== */

#top-bar .top-bar-socials,
#top-bar .top-bar-socials .inner {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#top-bar .top-bar-socials .inner {
    flex-direction: row !important;
}

#top-bar ul.top-bar-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#top-bar ul.top-bar-menu > li {
    display: block !important;
    float: none !important;
    width: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   IS FORGE – LIENS DU TOP MENU
   Zone concernée : liens directs du Top Menu
   Fonction : alignement horizontal et comportement du hover
   ========================================================== */

#top-bar ul.top-bar-menu > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    padding: 7px 10px !important;

    color: #5f6f8f !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-decoration: none !important;

    background-color: transparent !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease !important;
}


/* ==========================================================
   IS FORGE – HOVER DU TOP MENU
   Fonction :
   Texte orange IS Forge + léger fond gris au survol.
   ========================================================== */

#top-bar ul.top-bar-menu > li > a:hover,
#top-bar ul.top-bar-menu > li:hover > a {
    color: #f15a24 !important;
    background-color: #eeeeee !important;
}


/* ==========================================================
   IS FORGE – POLYLANG
   Zone concernée : élément English / langue du Top Menu
   ========================================================== */

#top-bar ul.top-bar-menu > li.lang-item > a {
    gap: 5px !important;
}

#top-bar ul.top-bar-menu > li.lang-item > a > span {
    margin-left: 0 !important;
    color: inherit !important;
}

#top-bar ul.top-bar-menu > li.lang-item > a > img {
    flex: 0 0 auto !important;
}


/* ==========================================================
   IS FORGE – RESPONSIVE TOP MENU
   Zone concernée : écrans inférieurs à 992 px
   Fonction : autoriser le retour à la ligne si nécessaire.
   ========================================================== */

@media (max-width: 991px) {

    #top-bar ul.top-bar-menu {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    #top-bar ul.top-bar-menu > li > a {
        padding: 6px 8px !important;
    }
}


/* ==========================================================
   IS FORGE – IMAGES DE RÉFÉRENCES
   Zone concernée : section .references-grid

   Fonction :
   Imposer un ratio 4:3 identique aux images.

   Raison :
   Uniformiser les Image Box Bauer sans déformer les visuels.
   ========================================================== */

.references-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
/* ==========================================================
   IS FORGE – MENU "DEVENIR DISTRIBUTEUR"
   Fonction : afficher le lien en orange dans le menu principal
   ========================================================== */

#main-nav > ul > li.menu-devenir-distributeur > a {
    color: #F6572A !important;
}

/*
 * TABLEAU CARACTÉRISTIQUES TECHNIQUES IS FORGE
 * Zone : pages produits E-TTNA / E-KKLA
 * Fonction : harmoniser l'affichage des données techniques avec l'identité du site.
 * Le tableau reste volontairement sobre, lisible et responsive.
 */

.isforge-tech-table {
    width: 100%;
    margin-top: 30px;
}

.isforge-tech-table table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e8e8e8;
}

.isforge-tech-table th,
.isforge-tech-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    vertical-align: middle;
}

.isforge-tech-table th {
    width: 55%;
    font-weight: 600;
    color: #07162f;
    background: #f7f8f9;
}

.isforge-tech-table td {
    width: 45%;
    font-weight: 600;
    color: #07162f;
    background: #ffffff;
}

.isforge-tech-table tr:last-child th,
.isforge-tech-table tr:last-child td {
    border-bottom: 0;
}

.isforge-tech-table-note {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #777777;
}

/* Responsive mobile */
@media (max-width: 767px) {
    .isforge-tech-table th,
    .isforge-tech-table td {
        padding: 13px 15px;
    }

    .isforge-tech-table th {
        width: 60%;
    }

    .isforge-tech-table td {
        width: 40%;
    }
}

/* ==========================================================
   IS FORGE – PASTILLES E-TTNA / E-KKLA
   Zone concernée : pastilles .number des Image Box style 3

   Fonction :
   Imposer l'orange IS Forge en permanence sur les pastilles.

   Raison :
   Uniformiser l'affichage des références produits sans
   dépendre du comportement hover des cartes cliquables.
   ========================================================== */

.bauer-image-box.style-3.has-number .number {
    background-color: #F6572A !important;
}

/* ==========================================================
   IS FORGE – LOGO HEADER CLIQUABLE
   Zone concernée : logo principal IS Forge
   Fonction : réactiver le lien natif vers l'accueil.
   Raison : une ancienne feuille CSS applique encore
   pointer-events:none sur .main-logo.
   ========================================================== */

#site-logo .main-logo {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/**
 * IS FORGE – BOUTON CONTACT DU MENU PRINCIPAL
 * Zone concernée : menu principal desktop Bauer.
 *
 * Fonction :
 * - conserver la hauteur native de 100 px du lien Bauer ;
 * - centrer verticalement un bouton Contact de 180 × 46 px ;
 * - conserver l'alignement du menu et la compatibilité Polylang.
 *
 * Raison :
 * Bauer utilise un lien <a> de 100 px de haut dans #main-nav.
 * Le CTA est donc créé sur le <span> et centré dans ces 100 px.
 */

#main-nav > ul > li.menu-contact-button {
    margin-left: 25px !important;
}

/* Le lien conserve les 100 px de hauteur du menu Bauer */
#main-nav > ul > li.menu-contact-button > a {
    width: 180px !important;
    height: 100px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
}

/* Le bouton visible */
#main-nav > ul > li.menu-contact-button > a > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 180px !important;
    height: 46px !important;
    box-sizing: border-box !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #F35C27 !important;
    color: #FFFFFF !important;
    border-radius: 30px !important;

    font-family: "Poppins", sans-serif;
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Survol */
#main-nav > ul > li.menu-contact-button > a:hover > span {
    opacity: 0.85;
}


/**
 * IS FORGE – BOUTON CONTACT MOBILE
 * Ne pas imposer les 100 px du menu desktop à la navigation mobile.
 */
@media (max-width: 991px) {

    .menu-contact-button {
        margin-left: 0 !important;
    }

    .menu-contact-button > a {
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    .menu-contact-button > a > span {
        width: 180px !important;
        height: 46px !important;
    }
}

/**
 * IS FORGE – TRADUCTION DE LA BOTTOM BAR
 * Zone concernée : copyright de la Bottom Bar Bauer.
 *
 * Fonction :
 * Afficher le copyright français ou anglais selon la langue
 * active dans Polylang.
 *
 * Raison :
 * Le champ Copyright du Customizer Bauer est global et ne permet
 * pas nativement de définir une valeur différente par langue.
 */

/* Par défaut, masque la version anglaise */
.copyright-en {
    display: none;
}

/* Pages anglaises Polylang */
html[lang^="en"] .copyright-fr {
    display: none;
}

html[lang^="en"] .copyright-en {
    display: inline;
}


/* ==========================================================
   IS FORGE — CARTE DISTRIBUTEUR
   Page Contact : hiérarchie visuelle des distributeurs.
   Le pays est volontairement mis en avant par rapport au nom
   du distributeur pour faciliter la recherche géographique.
   ========================================================== */

.isf-distributor-card {
    padding: 28px 25px;
    border: 1px solid #eeeeee;
    background: #ffffff;
    height: 100%;
}

.isf-distributor-country {
    margin-bottom: 12px;
    color: #07152e;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 600;
    text-transform: uppercase;
}

.isf-distributor-name {
    margin-bottom: 16px;
    color: #07152e;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
}

.isf-distributor-status {
    margin-bottom: 8px;
    color: #f15a29;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    text-transform: uppercase;
}

.isf-distributor-text {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
}

.isf-distributor-link {
    color: #f15a29;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.isf-distributor-link:hover {
    text-decoration: underline;
}

/* ==========================================================
 * IS FORGE – Drapeaux des cartes distributeurs
 * Zone concernée : page Contact / cartes distributeurs.
 * Fonction : uniformiser l'affichage des drapeaux SVG.
 * Raison : garantir un rendu identique sur tous les navigateurs
 * et systèmes, indépendamment du support des emojis.
 * ========================================================== */

.isf-distributor-flags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    height: 18px;
}

.isf-distributor-flags svg {
    display: block;
    width: 24px;
    height: 16px;
    flex: 0 0 auto;
}

/* =========================================================
 * IS FORGE – ACTUALITÉS / NEWS DANS LE MENU MOBILE
 * Les liens Actualités / News sont ajoutés au Primary Menu
 * afin d'être repris par le menu mobile Bauer.
 * Ils sont masqués uniquement sur desktop car déjà présents
 * dans le Top Menu.
 * ========================================================= */

@media screen and (min-width: 993px) {
    #main-nav .isf-mobile-only {
        display: none !important;
    }
}

/* ==========================================================
 * IS FORGE – Espacement entre les 2 cartes produits
 * Mobile uniquement : ajoute 30 px avant la carte E-KKLA.
 * Aucun impact sur l'affichage desktop.
 * ========================================================== */

@media (max-width: 767px) {
    .vc_inner .vc_col-md-4:nth-of-type(3) {
        margin-top: 30px !important;
    }
}


/* ==========================================================
 * IS FORGE – SÉLECTEUR DE LANGUE POLYLANG
 * Zone concernée : sélecteur de langue du menu principal.
 * Fonction : supprimer la barre orange sous le sélecteur actif.
 * ========================================================== */

#main-nav a[href="#pll_switcher"]::before,
#main-nav a[href="#pll_switcher"]::after,
#main-nav > ul > li:has(> a[href="#pll_switcher"])::before,
#main-nav > ul > li:has(> a[href="#pll_switcher"])::after {
    display: none !important;
}


/* =========================================================
   IS FORGE - HEADER DES SINGLE POSTS ET DE LA PAGE 404
   Zone : articles du blog + page 404
   Fonction : harmonise le header avec le header blanc
   utilisé sur le reste du site.
   Raison : Bauer applique à ces gabarits les couleurs du
   Header Style 2, initialement prévu pour un fond sombre.
   La classe .isf-404 est ajoutée via un filtre body_class
   dans functions.php (la classe native .error404 étant
   absente du <body> sur ce site).
   ========================================================= */

/* Fond blanc du header */
body.is-single-post #site-header,
body.is-single-post #site-header::after,
body.isf-404 #site-header,
body.isf-404 #site-header::after {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Couleur normale des liens du menu principal */
body.is-single-post #main-nav > ul > li > a,
body.isf-404 #main-nav > ul > li > a {
    color: #07152e !important;
}

/* État hover des liens du menu */
body.is-single-post #main-nav > ul > li > a:hover,
body.isf-404 #main-nav > ul > li > a:hover {
    color: #f15a29 !important;
}

/* Lien "Devenir distributeur" : conserve l'orange */
body.is-single-post #main-nav > ul > li.menu-devenir-distributeur > a,
body.isf-404 #main-nav > ul > li.menu-devenir-distributeur > a {
    color: #f15a29 !important;
}

/* Bouton Contact : conserve son fonctionnement graphique */
body.is-single-post #main-nav > ul > li.menu-contact-button > a,
body.isf-404 #main-nav > ul > li.menu-contact-button > a {
    color: #ffffff !important;
}

/* Sélecteur de langue */
body.is-single-post #main-nav > ul > li.pll-parent-menu-item > a,
body.isf-404 #main-nav > ul > li.pll-parent-menu-item > a {
    color: #07152e !important;
}

/* =========================================================
   IS FORGE - MENU BURGER SUR LES SINGLE POSTS ET LA 404
   Zone : header mobile des articles et de la page 404
   Fonction : affiche les 3 traits du menu burger en bleu foncé.
   Raison : Bauer conserve les traits blancs du Header Style 2,
   invisibles sur un header blanc.
   ========================================================= */

@media screen and (max-width: 991px) {

    body.is-single-post #site-header .mobile-button::before,
    body.is-single-post #site-header .mobile-button::after,
    body.is-single-post #site-header .mobile-button span,
    body.is-single-post #site-header .mobile-button span::before,
    body.is-single-post #site-header .mobile-button span::after,
    body.isf-404 #site-header .mobile-button::before,
    body.isf-404 #site-header .mobile-button::after,
    body.isf-404 #site-header .mobile-button span,
    body.isf-404 #site-header .mobile-button span::before,
    body.isf-404 #site-header .mobile-button span::after {
        background-color: #07152e !important;
        border-color: #07152e !important;
    }

}