/* -----------------------------------------------------------------------------------
   GROUPE ENERGO — surcouche du template BAUEN
   Couleurs client : #212221 (noir) / #f1b619 (jaune)
   Chargé après style.css — ne modifie pas le template, il le surcharge.
----------------------------------------------------------------------------------- */

:root {
    --energo-dark: #212221;
    --energo-yellow: #f1b619;
    --topbar-h: 42px;
    --nav-h: 90px;
}

/* ============================= TOP BAR ============================= */
.topbar {
    background: var(--energo-dark);
    height: var(--topbar-h);
    width: 100%;
    position: relative;
    z-index: 100;
}
.topbar-inner {
    max-width: 100%;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 40px;
    min-width: 0;
}
.topbar-item {
    color: #fff;
    font-size: 13px;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s;
}
.topbar-item i {
    color: var(--energo-yellow);
    margin-right: 7px;
    font-size: 13px;
    vertical-align: -1px;
}
a.topbar-item:hover { color: var(--energo-yellow); }
.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.topbar-right a {
    color: #fff;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    transition: color .3s;
}
.topbar-right a:hover { color: var(--energo-yellow); }
/* Sélecteur de langue */
a.topbar-lang {
    width: auto;
    height: auto;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    transition: color .3s, border-color .3s;
}
a.topbar-lang:hover { border-color: var(--energo-yellow); color: var(--energo-yellow); }
@media screen and (max-width: 991px) {
    .topbar-address { display: none; }
    .topbar-left { gap: 20px; }
    .topbar-inner { padding: 0 20px; }
}
@media screen and (max-width: 480px) {
    .topbar-email { display: none; }
}

/* ==================== NAVBAR : dans le flux, fond blanc ==================== */
/* Le template place la nav en absolu par-dessus le slider; ici elle vit sous
   le top bar, comme sur le site de référence. .nav-scroll (custom.js) reprend
   le comportement fixe au défilement, inchangé. */
.navbar {
    position: relative;
    background: #fff;
    border-bottom: 1px solid #ececec;
}
.navbar .navbar-nav .nav-link { color: var(--energo-dark); }
.navbar .navbar-nav .nav-link:hover { color: var(--energo-yellow); }
.logo-img { width: 215px; padding: 12px 0; }
.nav-scroll .logo-img { width: 185px; }
@media screen and (max-width: 991px) {
    /* menu replié : fond blanc lisible (le template suppose une nav sur image) */
    .navbar .navbar-collapse {
        background: #fff;
        padding: 15px 20px;
        border-bottom: 1px solid #ececec;
    }
    .logo-img { width: 180px; }
}

/* ============================ HERO SPLIT ============================ */
.hero-split {
    display: flex;
    position: relative;
    min-height: calc(100vh - var(--topbar-h) - var(--nav-h));
}
.hero-half {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 40px;
    text-decoration: none;
    transition: flex-basis .5s ease;
}
@media screen and (min-width: 992px) {
    .hero-split:hover .hero-half { flex-basis: 46%; }
    .hero-split .hero-half:hover { flex-basis: 54%; }
}
.hero-dark { background: var(--energo-dark); }
.hero-yellow { background: var(--energo-yellow); }
.hero-half-inner {
    max-width: 480px;
    width: 100%;
    text-align: center;
}
.hero-kicker {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hero-half h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 44px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 15px;
    line-height: 1.15;
}
.hero-half p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}
/* Hauteurs réservées : les deux côtés restent parfaitement alignés,
   même quand le texte se réenligne pendant l'effet de survol. */
@media screen and (min-width: 992px) {
    .hero-half h1 {
        min-height: calc(2 * 1.15em); /* 2 lignes réservées */
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .hero-half p { min-height: calc(3 * 1.7em); /* 3 lignes réservées */ }
}
/* Photo produit du hero : mêmes dimensions des deux côtés */
.hero-img {
    display: block;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    margin: 0 auto;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .30);
}
.hero-img-gen { object-position: 50% 70%; } /* photo portrait : cadrer sur l'appareil */
.hero-cta {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 13px 30px;
    margin-top: 25px;
    transition: background .3s, color .3s;
}
.hero-cta i { margin-left: 8px; font-size: 12px; vertical-align: -1px; }
/* Côté sombre : accents jaunes */
.hero-dark .hero-kicker { color: var(--energo-yellow); }
.hero-dark h1 { color: #fff; }
.hero-dark p { color: rgba(255, 255, 255, .75); }
.hero-dark .hero-cta { color: var(--energo-yellow); border: 1px solid var(--energo-yellow); }
.hero-dark:hover .hero-cta,
.hero-dark:focus-visible .hero-cta { background: var(--energo-yellow); color: var(--energo-dark); }
/* Côté jaune : accents sombres */
.hero-yellow .hero-kicker { color: var(--energo-dark); opacity: .7; }
.hero-yellow h1 { color: var(--energo-dark); }
.hero-yellow p { color: rgba(33, 34, 33, .8); }
.hero-yellow .hero-cta { color: var(--energo-dark); border: 1px solid var(--energo-dark); }
.hero-yellow:hover .hero-cta,
.hero-yellow:focus-visible .hero-cta { background: var(--energo-dark); color: var(--energo-yellow); }
/* Pastille « ou » au centre */
.hero-ou {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
.hero-ou span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #fff;
    color: var(--energo-dark);
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .15);
}
@media screen and (max-width: 991px) {
    .hero-split { flex-direction: column; min-height: 0; }
    .hero-half { flex-basis: auto; padding: 60px 25px; min-height: 60vh; }
    .hero-half h1 { font-size: 34px; }
}

/* ========================= PHOTOS DE CONTENU ========================= */
.photo-cover {
    display: block;
    width: 100%;
    object-fit: cover;
    background: #f4f4f4;
}
.r43 { aspect-ratio: 4 / 3; }
.r11 { aspect-ratio: 1 / 1; }

/* ===================== PLACEHOLDERS « À REMPLACER » ===================== */
.ph-img {
    position: relative;
    width: 100%;
    border: 1px dashed rgba(33, 34, 33, .35);
    background: repeating-linear-gradient(
        45deg,
        rgba(33, 34, 33, .03),
        rgba(33, 34, 33, .03) 12px,
        rgba(33, 34, 33, .06) 12px,
        rgba(33, 34, 33, .06) 24px
    );
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.ph-4x3 { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-inner { padding: 25px; max-width: 90%; }
.ph-img i {
    display: block;
    font-size: 30px;
    color: rgba(33, 34, 33, .45);
    margin-bottom: 12px;
}
.ph-label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(33, 34, 33, .65);
    margin-bottom: 8px;
}
.ph-desc {
    display: block;
    font-size: 13px;
    font-style: italic;
    line-height: 1.5;
    color: rgba(33, 34, 33, .55);
}
/* Variantes sur fonds colorés (hero) */
.ph-product { aspect-ratio: 4 / 3; max-width: 420px; margin: 0 auto; }
.ph-on-dark { border-color: rgba(255, 255, 255, .35); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .04) 12px, rgba(255, 255, 255, .08) 12px, rgba(255, 255, 255, .08) 24px); }
.ph-on-dark i { color: rgba(255, 255, 255, .55); }
.ph-on-dark .ph-label { color: rgba(255, 255, 255, .75); }
.ph-on-dark .ph-desc { color: rgba(255, 255, 255, .55); }
.ph-on-yellow { border-color: rgba(33, 34, 33, .4); background: repeating-linear-gradient(45deg, rgba(33, 34, 33, .04), rgba(33, 34, 33, .04) 12px, rgba(33, 34, 33, .08) 12px, rgba(33, 34, 33, .08) 24px); }
@media screen and (max-width: 991px) {
    .ph-product { max-width: 340px; }
    .ph-product .ph-desc { display: none; } /* garder le hero mobile compact */
}

/* ====================== BANNIÈRE PAGES INTÉRIEURES ====================== */
.banner-energo {
    background: var(--energo-dark);
    height: auto;
    min-height: 420px; /* +100px demandé */
    z-index: 0;
    padding: 60px 0;
    position: relative;
}
/* Variante avec photo d'arrière-plan + overlay 60 % */
.banner-photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.banner-photo:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(33, 34, 33, .6);
}
.banner-energo .container { position: relative; z-index: 1; }
.banner-energo h5 { color: var(--energo-yellow); }
.banner-energo h1 { color: #fff; }
/* Respiration entre la bannière et le contenu (le template n'a pas de padding-top) */
.banner-energo + .section-padding2 { padding-top: 90px; }
@media screen and (max-width: 767px) {
    .banner-energo + .section-padding2 { padding-top: 60px; }
}

/* ============================== SECTIONS ============================== */
.intro-lead { font-size: 17px; line-height: 1.9; }
.intro-brand {
    font-family: 'Oswald', sans-serif;
    font-size: 19px;
    color: var(--energo-dark);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 10px;
}
.about-sub {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: var(--energo-dark);
    margin-bottom: 20px;
}
.sub-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--energo-dark);
    margin-bottom: 30px;
}
.mt-60 { margin-top: 60px; }

/* Avantages produits */
.feat-item {
    position: relative;
    padding: 30px 30px 30px 90px;
    border: 1px solid #ececec;
    background: #fff;
    margin-bottom: 30px;
    min-height: 150px;
    transition: border-color .3s;
}
.feat-item:hover { border-color: var(--energo-yellow); }
.feat-numb {
    position: absolute;
    left: 28px;
    top: 26px;
    font-family: 'Oswald', sans-serif;
    font-size: 26px;
    font-weight: 500;
    color: var(--energo-yellow);
}
.feat-item h5 {
    font-family: 'Oswald', sans-serif;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}
.feat-item p { margin-bottom: 0; }

/* Encadré « Idéale pour » */
.ideal-box {
    background: var(--energo-dark);
    padding: 35px 40px;
}
.ideal-box h5 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    color: var(--energo-yellow);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 15px;
    margin-bottom: 12px;
}
.ideal-box p { color: rgba(255, 255, 255, .85); margin-bottom: 0; }

/* Bande CTA */
.cta-energo { background: #f4f4f4; }
.cta-energo h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    margin-bottom: 15px;
}
.cta-energo .butn-dark a:hover span { color: var(--energo-dark); }

/* Divers */
.link-accent { color: var(--energo-yellow); border-bottom: 1px solid var(--energo-yellow); }
.link-accent:hover { color: var(--energo-dark); border-color: var(--energo-dark); }
.temp-note { font-style: italic; color: #999; }
.mt-40 { margin-top: 40px; }

/* ============================ FOOTER SOMBRE ============================ */
/* Inversion : fond foncé, textes pâles; les titres restent jaunes. */
.main-footer.dark {
    background: var(--energo-dark);
    color: rgba(255, 255, 255, .8);
    border-top: none;
}
.main-footer .fotcont p,
.main-footer .fotcont p a { color: rgba(255, 255, 255, .8); transition: color .3s; }
.main-footer .fotcont p a:hover { color: var(--energo-yellow); }
.main-footer .sub-footer { border-top: 1px solid rgba(255, 255, 255, .1); }
.main-footer .sub-footer p { color: rgba(255, 255, 255, .55); }
.main-footer .sub-footer p a { color: rgba(255, 255, 255, .55); }
.main-footer .sub-footer p a:hover { color: var(--energo-yellow); }
.main-footer .abot .social-icon a {
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
}
.main-footer .abot .social-icon a:hover {
    border-color: var(--energo-yellow);
    color: var(--energo-yellow);
}
.footer-logo { margin-top: 0; }
.footer-logo img { width: 165px; height: auto; }
@media screen and (max-width: 767px) {
    .footer-logo { text-align: left; }
}

/* ============================ PAGE CONTACT ============================ */
.contact-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--energo-dark);
    position: relative;
    padding-bottom: 14px;
    margin-bottom: 22px;
}
.contact-heading:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--energo-yellow);
}
.contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.contact-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 10px 0;
    font-size: 16px;
    color: var(--energo-dark);
}
.contact-list li i {
    color: var(--energo-yellow);
    font-size: 17px;
    flex: 0 0 auto;
    transform: translateY(2px);
}
.contact-list li a { color: var(--energo-dark); transition: color .3s; }
.contact-list li a:hover { color: var(--energo-yellow); }

/* Carte du formulaire */
.contact-card {
    background: #fff;
    border: 1px solid #ececec;
    border-top: 3px solid var(--energo-yellow);
    box-shadow: 0 12px 35px rgba(33, 34, 33, .07);
    padding: 45px 45px 40px;
}
.contact-card-sub { margin-bottom: 25px; }
.contact-card .form-group { margin-bottom: 22px; }
.contact-card label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--energo-dark);
    margin-bottom: 8px;
}
.contact-card label span { color: var(--energo-yellow); }
.contact-card input:not([type="submit"]),
.contact-card textarea {
    width: 100%;
    background: #fafafa;
    border: 1px solid #e6e6e6;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--energo-dark);
    transition: border-color .3s, background .3s;
}
.contact-card input:not([type="submit"]):focus,
.contact-card textarea:focus {
    background: #fff;
    border-color: var(--energo-yellow);
    outline: none;
}
.contact-card textarea { resize: vertical; min-height: 130px; }
.contact-card input[type="submit"] {
    width: 100%;
    background: var(--energo-dark);
    color: var(--energo-yellow);
    padding: 15px 24px;
    cursor: pointer;
    transition: background .3s, color .3s;
}
.contact-card input[type="submit"]:hover {
    background: var(--energo-yellow);
    color: var(--energo-dark);
}
@media screen and (max-width: 767px) {
    .contact-card { padding: 30px 22px 25px; }
}

/* Carte Google pleine largeur */
.map-full {
    width: 100%;
    line-height: 0; /* supprime l'espace sous l'iframe */
    background: #f4f4f4;
}
.map-full iframe {
    display: block;
    width: 100%;
    height: 480px;
    border: 0;
    filter: grayscale(25%);
}
@media screen and (max-width: 767px) {
    .map-full iframe { height: 340px; }
}

.footer a, .main-footer a { transition: color .3s; }

/* Honeypot du formulaire : hors écran, jamais display:none (certains bots vérifient) */
.ph-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}