/* =====================================================================
 * ADELLE LEGACY GROUP - Overrides CSS personnalisés
 * À charger APRÈS style.css pour écraser les règles d'origine
 * =====================================================================
 * Sections :
 *   1. Fix preloader (affichage instantané)
 *   2. Dimensions images forcées (hors logo — voir 7/8/9)
 *   3. Polices (filet de sécurité)
 *   4. Lazy loading (fond pendant chargement)
 *   5. Fix visibilité chevrons menu
 *   6. Top bar : welcome + réseaux groupés à droite (desktop)
 *   7. Responsive mobile < 992px : logo réduit 44×44, top bar cachée
 *   8. Logo desktop ≥ 992px : carré 130×130 superposé en absolute
 *   9. Logo footer : carré 80×80, fond transparent sur bg-river-bed
 * ===================================================================== */

/* ============================================================
 * SECTION 1 — FIX PRELOADER
 * Force l'affichage immédiat sans attendre le fadeIn jQuery.
 * ============================================================ */
.preloader {
    display: none !important;
}

.page {
    opacity: 1 !important;
}

/* ============================================================
 * SECTION 2 — DIMENSIONS IMAGES FORCÉES
 * (logos exclus — pilotés par sections 7/8/9)
 * ============================================================ */

/* --- Slider hero : pleine largeur, hauteur fixe --- */
.swiper-slide .swiper-slide-inner img,
.swiper-slide img.swiper-slide-image {
    width: 100% !important;
    max-height: 600px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* --- Images services (cards) : 270 × 180 px --- */
.service-image img,
.service .thumbnail img,
img.service-thumb {
    width: 270px !important;
    height: 180px !important;
    object-fit: cover !important;
    object-position: center center !important;
    max-width: 100%;
}

/* --- Photos testimonials : 72 × 72 px, cercle --- */
.quote-variant-1 .quote-header img,
.testimonial-photo,
img.testimonial-img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

/* --- Logos partenaires : 170 × 75 px --- */
.partner-logo,
img.partner-img {
    width: 170px !important;
    height: 75px !important;
    object-fit: contain !important;
    object-position: center center !important;
    max-width: 100%;
}

/* --- Image calculator side : 552 × 654 px --- */
.calculator-side-image,
img.calculator-img {
    width: 100% !important;
    max-width: 552px !important;
    max-height: 654px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* --- Bandeau header de page (about, blog, contact) : pleine largeur --- */
.page-header-bg,
img.page-header-img {
    width: 100% !important;
    height: 300px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* --- Image article blog (vignette liste) : 870 × 412 px --- */
.post-thumb,
img.post-thumb-img {
    width: 100% !important;
    max-width: 870px !important;
    height: 412px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* --- Image About sections : 870 × 400 px / 436 × 288 px --- */
.about-image-large,
img.about-img-lg {
    width: 100% !important;
    max-width: 870px !important;
    height: 400px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.about-image-small,
img.about-img-sm {
    width: 100% !important;
    max-width: 436px !important;
    height: 288px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* ============================================================
 * SECTION 3 — POLICES D'ICÔNES
 * Les fichiers de polices livrés avec le template (fonts/*.woff,
 * *.woff2) sont des stubs VIDES (< 110 octets). Les vraies polices
 * (FontAwesome 4.7.0 + Material Design Icons) sont chargées via
 * <link> CDN dans parts/_head.php, AVANT ce fichier.
 * NB : on n'utilise PAS @import ici car @import n'est valide qu'en
 * tout début de fichier CSS — placé plus bas, il serait ignoré.
 * Ci-dessous : on force ces polices à primer sur les @font-face
 * vides du template, puis on substitue (3b) les polices
 * propriétaires introuvables (flaticon, arrows) par FontAwesome.
 * ============================================================ */

/* Force FontAwesome / MDI à primer sur les @font-face vides du template */
.fa,
[class*='fa-']:before {
    font-family: 'FontAwesome' !important;
}
.mdi:before,
[class^='mdi-']:before,
[class*=' mdi-']:before {
    font-family: 'Material Design Icons' !important;
}

/* ------------------------------------------------------------
 * SECTION 3b — SUBSTITUTION DES POLICES PROPRIÉTAIRES MANQUANTES
 * On remplace les icônes des polices flaticon/arrows (absentes)
 * par des équivalents FontAwesome (présents via CDN).
 * ------------------------------------------------------------ */

/* Icône RECHERCHE (police fl-bigmug-line manquante) -> loupe FA */
.rd-navbar-search-toggle span::before,
[class^='fl-bigmug-line-search']:before,
[class*=' fl-bigmug-line-search']:before {
    font-family: 'FontAwesome' !important;
    content: '\f002' !important;   /* fa-search */
}
/* État "fermer la recherche" -> croix FA */
.rd-navbar-search-toggle.active span::after,
.rd-navbar-search-toggle span::after {
    font-family: 'FontAwesome' !important;
    content: '\f00d' !important;   /* fa-times */
}

/* Icônes SERVICES (police fl-sympletts manquante) -> FA équivalents */
[class^='fl-sympletts-coin']:before,
[class*=' fl-sympletts-coin']:before {
    font-family: 'FontAwesome' !important;
    content: '\f0d6' !important;   /* fa-money */
}
[class^='fl-sympletts-coffee']:before,
[class*=' fl-sympletts-coffee']:before {
    font-family: 'FontAwesome' !important;
    content: '\f0f4' !important;   /* fa-coffee */
}

/* FLÈCHES des carrousels owl (police 'arrows' manquante) -> FA
 * Template : .owl-prev:before = \e009 (précédent), .owl-next:before = \e008 (suivant) */
.owl-carousel .owl-prev:before,
.owl-prev:before {
    font-family: 'FontAwesome' !important;
    content: '\f104' !important;   /* fa-angle-left */
}
.owl-carousel .owl-next:before,
.owl-next:before {
    font-family: 'FontAwesome' !important;
    content: '\f105' !important;   /* fa-angle-right */
}

/* ============================================================
 * SECTION 4 — LAZY LOADING
 * Indicateur visuel pendant le chargement progressif
 * ============================================================ */
img[loading="lazy"] {
    background: #f4f7f9;
}

/* ============================================================
 * SECTION 5 — FIX VISIBILITÉ MENU DÉROULANT
 * S'assure que les chevrons restent visibles même si la police
 * 'arrows' tarde à charger
 * ============================================================ */
.rd-navbar-submenu-toggle::before,
.rd-navbar-submenu-toggle::after {
    font-display: swap;
}

/* ============================================================
 * SECTION 6 — TOP BAR (desktop) : welcome + réseaux à droite
 * ============================================================ */
.rd-navbar-aside .block-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 18px;
}

.rd-navbar-aside .block-left {
    flex: 0 0 auto !important;
}

/* ============================================================
 * SECTION 7 — RESPONSIVE MOBILE (< 992px)
 * Logo réduit 44×44 dans la barre fixe, top bar welcome cachée
 * ============================================================ */
@media (max-width: 991.98px) {

    /* Reset complet de la superposition desktop */
    .rd-navbar-info,
    .rd-navbar-aside {
        padding-left: 0 !important;
        min-height: 0;
    }

    .brand {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        padding: 3px !important;
        border-radius: 4px;
        border: 0.5px solid #ebebeb;
        margin: 6px 0 6px 6px;
    }

    .brand-logo-dark,
    .brand-logo-light {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Cache la top bar welcome sur mobile */
    .rd-navbar-aside {
        display: none !important;
    }

    /* Le brand-name texte mobile (si ajouté dans _header) */
    .brand-name-mobile {
        display: inline-block !important;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        margin-left: 10px;
        vertical-align: middle;
    }
}

/* Sur desktop, on cache le brand-name texte mobile */
@media (min-width: 992px) {
    .brand-name-mobile {
        display: none !important;
    }
}

/* ============================================================
 * SECTION 8 — LOGO DESKTOP (≥ 992px) : carré 130×130 superposé
 * Pour le logo Adelle (carré) — libère 180px à gauche du header
 * et fait dépasser le logo par-dessus le top bar
 * ============================================================ */
@media (min-width: 992px) {

    /* Libère 180px à gauche du header (top bar + bandeau info) */
    .rd-navbar-info,
    .rd-navbar-aside .bg-wrap {
        padding-left: 180px !important;
    }

    /* Logo carré 130×130 superposé en absolute */
    .rd-navbar .brand {
        position: absolute !important;
        top: 8px;
        left: 24px;
        width: 130px;
        height: 130px;
        background: #fff;
        border: 0.5px solid #ebebeb;
        border-radius: 6px;
        padding: 8px;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rd-navbar .brand .brand-logo-dark,
    .rd-navbar .brand .brand-logo-light {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

/* ============================================================
 * SECTION 9 — LOGO FOOTER : carré 80×80, fond transparent
 *                          (cette section peut etre vide si pas
 *                           de regle specifique, conservee pour
 *                           l'historique de numerotation)
 * ============================================================ */

/* ============================================================
 * SECTION 10 — LOGO FOOTER : carre blanc DISCRET pour faire
 *              ressortir le logo sur le fond sombre du footer
 *              sans agrandir l'image (taille originale du template)
 * ============================================================ */
.footer-classic .brand {
    display: inline-block;
    background: #ffffff;
    padding: 6px 10px;
    border-radius: 3px;
    line-height: 0;
}
/* Contraintes pour ne pas agrandir l'image au-dela de la taille
 * native demandee par le template (79x18 environ pour le footer) */
.footer-classic .brand img {
    width: auto !important;
    max-width: 90px;
    height: auto;
}

/* ============================================================
 * SECTION 11 — LOGO HEADER MOBILE : meme traitement que le footer
 *              (fond blanc) car la navbar mobile a un fond sombre
 *              qui rend le logo invisible.
 *              S'applique sous le breakpoint lg (< 992px).
 * ============================================================ */
@media (max-width: 991.98px) {
    .rd-navbar-brand .brand,
    .rd-navbar-aside .brand {
        display: inline-block;
        background: #ffffff;
        padding: 6px 10px;
        border-radius: 3px;
        line-height: 0;
    }
    .rd-navbar-brand .brand img,
    .rd-navbar-aside .brand img {
        width: auto !important;
        max-width: 90px;
        height: auto;
    }
}
 * (option b validée — sur bg-river-bed sombre)
 * ============================================================ */
.footer-classic .brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 4px;
    background: transparent;
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
}

.footer-classic .brand .brand-logo-dark,
.footer-classic .brand .brand-logo-light {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}