/*
Theme Name: Lacroix Infogérance
Theme URI: https://lacroixinfogerance.fr
Author: Alexandre Lacroix
Description: Thème WordPress moderne pour une société d'infogérance, cybersécurité et services IT aux TPE/PME. Vidéo en encart, sections configurables et personnalisateur complet.
Version: 2.4.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: lacroix-infogerance
*/

/* Correctifs et options avancées du thème. Le style principal reste dans assets/css/main.css. */

.site-header .nav-wrap {
    min-height: var(--li-header-height, 76px);
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--li-brand-gap, 8px);
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.site-header .brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--li-logo-size, 52px);
    width: var(--li-logo-size, 52px);
    height: var(--li-logo-size, 52px);
    min-width: var(--li-logo-size, 52px);
    line-height: 0;
    overflow: hidden;
}

.site-header .brand-logo .custom-logo,
.site-header .brand-logo img {
    display: block !important;
    width: var(--li-logo-size, 52px) !important;
    height: var(--li-logo-size, 52px) !important;
    min-width: var(--li-logo-size, 52px) !important;
    max-width: var(--li-logo-size, 52px) !important;
    min-height: var(--li-logo-size, 52px) !important;
    max-height: var(--li-logo-size, 52px) !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

.site-header .brand-mark {
    width: var(--li-logo-size, 52px);
    height: var(--li-logo-size, 52px);
    border-radius: 13px;
}

.site-header .brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    line-height: 1.05;
}

.site-header .brand-text strong {
    display: block;
    margin: 0;
    color: #fff;
    font-size: var(--li-brand-title-size, 14px);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.site-header .brand-text small {
    display: block;
    margin-top: 4px;
    color: #93a4b9;
    font-size: var(--li-brand-subtitle-size, 11px);
    line-height: 1.15;
    white-space: nowrap;
}

.site-header .main-nav {
    margin-left: auto;
}

.site-footer {
    display: block;
    background: var(--li-footer-bg, #030b13);
}

.footer-grid {
    align-items: start;
}

.footer-grid > div {
    min-width: 0;
}

.footer-grid strong {
    display: block;
    margin-bottom: 10px;
    color: #fff;
}

.footer-grid p {
    margin: 0;
}

.footer-grid a:hover,
.footer-bottom a:hover {
    color: var(--primary);
}

.footer-bottom span {
    white-space: normal;
}

@media (max-width: 980px) {
    .site-header .brand-logo {
        flex-basis: var(--li-logo-size-mobile, 44px);
        width: var(--li-logo-size-mobile, 44px);
        height: var(--li-logo-size-mobile, 44px);
        min-width: var(--li-logo-size-mobile, 44px);
    }

    .site-header .brand-logo .custom-logo,
    .site-header .brand-logo img {
        width: var(--li-logo-size-mobile, 44px) !important;
        height: var(--li-logo-size-mobile, 44px) !important;
        min-width: var(--li-logo-size-mobile, 44px) !important;
        max-width: var(--li-logo-size-mobile, 44px) !important;
        min-height: var(--li-logo-size-mobile, 44px) !important;
        max-height: var(--li-logo-size-mobile, 44px) !important;
    }

    .site-header .brand-mark {
        width: var(--li-logo-size-mobile, 44px);
        height: var(--li-logo-size-mobile, 44px);
    }
}

@media (max-width: 640px) {
    .site-header .brand {
        gap: min(var(--li-brand-gap, 8px), 8px);
    }

    .site-header .brand-text strong {
        font-size: min(var(--li-brand-title-size, 14px), 13px);
    }

    .site-header .brand-text small {
        font-size: min(var(--li-brand-subtitle-size, 11px), 10px);
    }

    .footer-bottom,
    .footer-bottom .footer-links {
        align-items: flex-start;
    }
}


/* 2.3.3 - navigation pages internes, retour haut et équilibrage du hero. */
.nav-home-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 11px;
    color: #dce6f3;
    font-size: 14px;
    font-weight: 800;
    background: rgba(255,255,255,.035);
    transition: .2s ease;
}
.nav-home-link:hover {
    color: #fff;
    border-color: rgba(45,212,191,.42);
    background: rgba(45,212,191,.08);
}

/* Sur grand écran, la colonne vidéo était visuellement trop basse par rapport au titre. */
@media (min-width: 981px) {
    .hero-video-column {
        position: relative;
        top: -52px;
    }
}

@media (max-width: 980px) {
    .nav-home-link {
        width: 100%;
        justify-content: center;
    }
}


/* 2.4.0 - réassurance commerciale, diagnostic, continuité et FAQ. */
.benefits-section { background: #f6f9fc; }
.benefits-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.benefit-card { background:#fff; border:1px solid rgba(9,31,52,.10); border-radius:18px; padding:26px; box-shadow:0 14px 40px rgba(9,31,52,.06); }
.benefit-card h3 { margin:14px 0 10px; }
.benefit-card p { margin:0; }
.benefit-check { display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:50%; background:rgba(34,211,238,.12); color:#0891b2; font-weight:900; }
.diagnostic-section { padding-top:0; background:#f6f9fc; }
.diagnostic-card { display:grid; grid-template-columns:1.35fr .85fr; gap:46px; align-items:center; padding:42px 46px; border-radius:24px; background:linear-gradient(135deg,#071a2c,#0a3044); color:#fff; box-shadow:0 22px 60px rgba(2,20,36,.18); }
.diagnostic-card h2 { color:#fff; margin-top:10px; }
.diagnostic-card p { color:#c7d7e6; }
.diagnostic-side .check-list { margin-top:0; color:#dceaf4; }
.continuity-section { background:#071827; color:#fff; }
.continuity-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.continuity-grid h2 { color:#fff; }
.continuity-grid p { color:#b8cada; }
.continuity-points { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.continuity-points div { padding:22px; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(255,255,255,.035); }
.continuity-points strong,.continuity-points span { display:block; }
.continuity-points strong { margin-bottom:7px; color:#fff; }
.continuity-points span { color:#adc2d3; font-size:14px; line-height:1.55; }
.faq-section { background:#f6f9fc; }
.faq-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:64px; align-items:start; }
.faq-list { display:grid; gap:12px; }
.faq-item { background:#fff; border:1px solid rgba(9,31,52,.11); border-radius:15px; padding:0 20px; }
.faq-item summary { cursor:pointer; list-style:none; font-weight:800; padding:20px 34px 20px 0; position:relative; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:after { content:'+'; position:absolute; right:2px; top:16px; font-size:25px; font-weight:500; }
.faq-item[open] summary:after { content:'–'; }
.faq-item p { margin:0; padding:0 34px 20px 0; }
@media (max-width:980px){.benefits-grid{grid-template-columns:1fr 1fr}.diagnostic-card,.continuity-grid,.faq-grid{grid-template-columns:1fr}.continuity-grid,.faq-grid{gap:32px}.diagnostic-card{padding:32px}.continuity-points{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.benefits-grid,.continuity-points{grid-template-columns:1fr}.diagnostic-card{padding:26px 22px}}


/* 2.4.1 - finition visuelle et réassurance commerciale. */
/* Les sections claires doivent forcer une palette sombre : le thème global est blanc sur fond sombre. */
.benefits-section,
.faq-section {
    color: #0b1b2d;
}
.benefits-section h2,
.benefits-section h3,
.faq-section h2,
.faq-section h3,
.faq-item summary {
    color: #0b1b2d;
}
.benefits-section .section-head > p,
.faq-section .faq-grid > div:first-child > p,
.benefit-card p,
.faq-item p {
    color: #53697b;
}
.benefits-section .kicker,
.faq-section .kicker {
    color: #087f8c;
}
.benefit-card {
    position: relative;
    overflow: hidden;
    min-height: 225px;
}
.benefit-card:after {
    content: "";
    position: absolute;
    inset: auto -55px -65px auto;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,211,238,.10), transparent 68%);
    pointer-events: none;
}
.benefit-card h3 { font-size: 20px; line-height: 1.28; }
.benefit-card p { line-height: 1.7; }

/* Diagnostic : un vrai bloc d'appel à l'action, sans rupture visuelle. */
.diagnostic-section { padding-bottom: 100px; }
.diagnostic-card { border: 1px solid rgba(45,212,191,.16); }
.diagnostic-card .kicker { color: #5eead4; }
.diagnostic-side .check-list li { color: #dceaf4; }
.diagnostic-side .check-list li:before { color: #5eead4; }

/* Continuité : rassurer sans mettre l'indisponibilité personnelle au premier plan. */
.continuity-section { border-top: 1px solid rgba(255,255,255,.045); border-bottom: 1px solid rgba(255,255,255,.045); }
.continuity-grid > div:first-child p { max-width: 610px; }
.continuity-points div { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.continuity-points div:hover { transform: translateY(-2px); border-color: rgba(45,212,191,.28); background: rgba(45,212,191,.045); }

/* FAQ claire et lisible. */
.faq-item { box-shadow: 0 10px 28px rgba(9,31,52,.035); }
.faq-item[open] { border-color: rgba(8,145,178,.30); box-shadow: 0 14px 34px rgba(9,31,52,.07); }
.faq-item summary:after { color: #0891b2; }

/* Un peu plus de respiration entre les grands blocs sans créer de vide artificiel. */
@media (min-width: 981px) {
    .benefits-section .section-head,
    .faq-section .faq-grid { gap: 72px; }
}
@media (max-width: 640px) {
    .benefit-card { min-height: 0; }
    .diagnostic-section { padding-bottom: 72px; }
}