/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* --- RÉDUCTION PADDING HERO SUR MOBILE --- */
@media (max-width: 768px) {
    #qt-services-hero {
        /* On réduit drastiquement l'espace au-dessus (modifie les 100px si besoin) */
        padding-top: 20px !important; 
        min-height: auto !important; /* Laisse le contenu dicter la hauteur */
    }
    
    #qt-services-hero .qt-content-wrapper {
        /* On supprime les marges internes qui faisaient doublon */
        padding-top: 0 !important; 
    }
}

/* --- AJUSTEMENT PADDING MOBILE BANDEAU SERVICES --- */
@media (max-width: 768px) {
    .services-quali-2026 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* =========================================
   1. FORCAGE MOBILE (PRIORITAIRE)
   ========================================= */
@media (max-width: 768px) {
    .hero-title {
        font-size: 9vw !important; /* Ajusté pour éviter la coupure */
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }
    .hero-container {
        padding-top: 160px !important; 
    }
}

/* =========================================
   2. UTILS & FIXES
   ========================================= */
.ct-map-icon img {
    vertical-align: middle;
}

/* =========================================
   3. HERO SECTION - QUALI TOITURE
   ========================================= */
.hero-quali-toiture {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-color: #000;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.hero-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-img-zoom {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    animation: zoomSlow 20s ease-in-out infinite alternate;
    opacity: 1 !important; 
}

@media (max-width: 1023px) {
    .hero-img-zoom { opacity: 0.8 !important; }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 100%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.1) 75%, rgba(0,0,0,0) 100%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-halo {
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 800px;
    height: 800px;
    max-width: 80vw;
    background: radial-gradient(circle, rgba(41, 51, 54, 0.4) 0%, rgba(0,0,0,0) 60%);
    filter: blur(250px);
    pointer-events: none;
    z-index: 1;
}

.hero-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 160px 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    justify-items: start; 
    text-align: left;
}

@media (min-width: 1024px) {
    .hero-container {
        grid-template-columns: 1.2fr 0.8fr;
        padding: 200px 40px;
        gap: 120px; 
    }
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    color: #F9943B;
    margin-bottom: 32px;
    margin-right: auto;
}

.hero-title {
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
    text-align: left;
}

.hero-title-gradient {
    background: linear-gradient(to right, #1d1d1f, #F9943B, #1d1d1f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientMove 5s ease infinite;
}

.hero-description {
    color: #d1d5db;
    font-size: 1.2rem;
    max-width: 550px;
    margin-bottom: 80px;
    line-height: 1.6;
    text-align: left;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 48px;
    justify-content: flex-start;
    width: 100%;
}

.hero-actions a {
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #F9943B;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(249, 148, 59, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 8px 25px rgba(249, 148, 59, 0.6);
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    font-size: 1.1rem;
    color: #9ca3af;
    justify-content: flex-start;
}

.trust-item span {
    font-size: 1.2rem !important;
    font-weight: 600;
    color: #9ca3af;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Colonne droite : Carte */
.hero-card-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

@media (min-width: 1024px) {
    .hero-card-wrapper { justify-content: flex-end; }
}

.hero-card {
    background: rgba(20, 20, 25, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    width: 100%;
    max-width: 450px;
    animation: float 6s ease-in-out infinite;
}

.card-title {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.3s;
    margin-bottom: 8px;
}

.card-list li:hover { background: rgba(255, 255, 255, 0.05); }

.list-icon {
    margin-top: 2px;
    padding: 8px;
    background: rgba(47, 51, 54, 0.4);
    color: #000;
    border-radius: 6px;
}

.card-list strong {
    display: block;
    color: #ffffff;
    font-size: 1.3rem;
    margin-bottom: 2px;
}

.card-list span {
    font-size: 1.2rem;
    color: #9ca3af;
}

.card-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.btn-glass-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-glass-mini:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes zoomSlow {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@media (max-width: 1023px) {
    .hero-img-zoom { opacity: 0.3; }
    .hero-bg-wrapper { background-color: #000; }
    .hero-halo {
        width: 100vw;
        height: 100vw;
        left: -20%;
        bottom: 10%;
        opacity: 0.4;
    }
    .hero-content { align-items: flex-start; }
    .hero-actions { width: 100%; }
    .btn-primary, .btn-secondary { width: 100%; }
    .hero-card { margin-top: 20px; animation: none; }
}

/* =========================================
   4. SECTION STATS
   ========================================= */
.stats-quali-wow {
    position: relative;
    z-index: 1;
    margin-top: -80px;
    padding: 0 20px 60px 20px;
    background: transparent;
}

.stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .stats-container { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .stats-container { grid-template-columns: repeat(4, 1fr); }
}

.stat-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), inset 0 -2px 4px rgba(0, 0, 0, 0.05), 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    background: linear-gradient(145deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 100%);
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 30px 60px -15px rgba(0, 0, 0, 0.2);
}

.stat-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
    line-height: 1;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.stat-number-wrapper span:last-child {
    font-size: 3rem;
    font-weight: 900;
    color: #1a202c;
}

.stat-prefix {
    font-size: 1.5rem;
    font-weight: 700;
    color: #F9943B;
    transform: translateY(-5px);
}

.stat-label {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #4A5568;
    margin: 0;
}

.stat-icon-decennale img {
    height: 55px;
    width: auto;
    margin-bottom: 12px;
    display: block;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

.stat-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 4px;
}

.stat-desc {
    font-size: 0.85rem;
    color: #4A5568;
    margin: 0;
}

@media (max-width: 768px) {
    .stats-quali-wow { margin-top: -40px; }
    .stat-number-wrapper span:last-child { font-size: 2.5rem; }
}

/* =========================================
   5. SECTION SERVICES (STYLE APPLE DARK)
   ========================================= */
.services-quali-2026 {
    background-color: #f5f5f7;
    padding: 50px 24px 80px 24px;
    margin-top: 0 !important;
}

.services-container {
    max-width: 1400px;
    margin: 0 auto;
}

.services-header-apple {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;
    align-items: flex-end;
    margin-bottom: 60px;
    text-align: left;
}

.badge-apple {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.title-apple {
    font-weight: 800;
    line-height: 1.1;
    color: #1d1d1f;
    letter-spacing: -0.03em;
}

.gradient-apple {
    background: linear-gradient(90deg, #1d1d1f 0%, #F9943B 50%, #1d1d1f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineText 4s linear infinite;
}

@keyframes shineText {
    0% { background-position: 200% center; }
    100% { background-position: 0% center; }
}

.services-location { font-size: 1.3rem; color: #1d1d1f; margin-top: 15px; }
.services-description { font-size: 1.15rem; line-height: 1.5; color: #424245; margin-bottom: 25px; }
.link-apple { color: #0066cc; text-decoration: none; font-weight: 600; font-size: 1.1rem; }
.link-apple:hover span { transform: translateX(5px); transition: 0.3s; display: inline-block; }

/* ---- LA GRILLE RESPONSIVE STRICTE ---- */
.apple-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 colonnes sur PC */
    gap: 25px;
}

.apple-card {
    position: relative;
    height: 360px; /* Assez haut sur PC pour le texte */
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.6s cubic-bezier(0.15, 0, 0.15, 1);
    display: block; 
    text-decoration: none;
}

.apple-card:hover { transform: scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

.apple-card .card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.apple-card:hover .card-img { transform: scale(1.1); }

/* Isolation des classes pour éviter les conflits avec le Portfolio */
.apple-card .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.9) 100%);
    z-index: 1;
}

.apple-card .card-content {
    position: absolute;
    inset: 0;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 2;
    background: transparent; /* Force l'annulation du conflit */
    border: none;
}

.apple-card .blur-box {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 18px;
    padding: 18px;
    border-top: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    max-width: 100%; 
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
} 

.apple-card .blur-box h3 { color: #fff; font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; line-height: 1.2; }
.apple-card .blur-box p { color: rgba(255,255,255,0.9); font-size: 0.95rem; line-height: 1.3; margin: 0; }

.apple-card .btn-apple-minimal {
    color: #F9943B;
    font-weight: 700;
    font-size: 1.1rem;
    padding-left: 5px;
    transition: color 0.3s;
    margin-top: 15px;
    display: inline-block;
}

.apple-card .btn-apple-minimal:hover { color: #ffffff; }

/* ---- RESPONSIVE ---- */
@media (max-width: 1150px) {
    /* Tablette / Petit PC : 2 colonnes */
    .apple-grid { grid-template-columns: repeat(2, 1fr); }
    .apple-card { height: 320px; }
}

@media (max-width: 1024px) {
    .services-header-apple { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 768px) {
    /* Mobile : FORCE 2 COLONNES */
    .apple-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    
    /* On augmente un peu la hauteur pour tout faire rentrer */
    .apple-card { height: 320px; border-radius: 12px; } 
    .services-quali-2026 { padding: 40px 10px; }
    .apple-card .card-content { padding: 10px; }
    
    .apple-card .blur-box { padding: 12px; border-radius: 12px; }
    .apple-card .blur-box h3 { font-size: 1.05rem; margin-bottom: 6px; }
    
    /* Paragraphe visible et tronqué proprement si trop long */
    .apple-card .blur-box p { 
        display: -webkit-box; 
        -webkit-line-clamp: 4; 
        -webkit-box-orient: vertical; 
        overflow: hidden; 
        font-size: 0.8rem; 
        line-height: 1.3; 
    }
    
    .apple-card .btn-apple-minimal { font-size: 0.85rem; margin-top: 10px; padding-left: 0; }
}

/* =========================================
   6. CTA URGENCE GLOBAL
   ========================================= */
.cta-urgence-final {
    padding: 80px 24px 40px 24px;
    position: relative;
}

.cta-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #2F3336 0%, #000 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cta-col-text {
    padding: 50px 60px;
    flex: 1;
    z-index: 5;
}

.badge-urgent-2026 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 148, 59, 0.15);
    color: #F9943B;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.dot-pulse { width: 6px; height: 6px; background: #F9943B; border-radius: 50%; animation: pulse-fast 1.5s infinite; }
@keyframes pulse-fast { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

.title-emergency {
    font-size: 2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 25px;
}

.orange-glow { color: #F9943B; }
.pricing-box { margin-bottom: 30px; }
.price-tag { color: #F9943B; font-weight: 800; font-size: 1.5rem; display: block; margin-bottom: 5px; }
.price-desc { color: #d1d5db; font-size: 1rem; margin: 0; }
.action-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-call-emergency {
    background: #F9943B;
    color: #fff;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 14px;
    font-size: 1.4rem;
    font-weight: 900;
    transition: 0.3s;
}
.btn-call-emergency:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(249, 148, 59, 0.4); }
.legal-tag { color: #86868b; font-size: 0.85rem; }

/* Section et Box V2 */
.cta-urgence-final-v2 {
    padding: 60px 0px 30px 00px;
    position: relative;
    overflow: visible;
}

.cta-box-v2 {
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(135deg, #2F3336 0%, #000 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    position: relative;
    min-height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-content-v2 { padding: 50px 60px; flex: 1; }
.badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(249, 148, 59, 0.15);
    color: #F9943B;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.dot-v2 { width: 8px; height: 8px; background: #F9943B; border-radius: 50%; animation: pulse-v2 1.5s infinite; }
@keyframes pulse-v2 { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }

.title-v2 { font-size: 1.9rem; font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 15px; }
.orange-v2 { color: #F9943B; }
.price-v2-box { margin-bottom: 25px; }
.price-v2 { color: #F9943B; font-weight: 900; font-size: 1.7rem; display: block; }
.desc-v2 { color: #d1d5db; font-size: 1.1rem; margin-top: 5px; }
.btn-v2 {
    display: inline-block;
    background: #F9943B;
    color: #fff;
    text-decoration: none;
    padding: 16px 35px;
    border-radius: 14px;
    font-size: 1.5rem;
    font-weight: 900;
}

.cta-img-v2 {
    position: absolute;
    right: 30px;
    bottom: 0;
    width: 380px;
    height: auto;
    pointer-events: none;
}

.img-v2-pop {
    height: 550px;
    width: auto;
    display: block;
    filter: drop-shadow(-15px 0 30px rgba(0,0,0,0.6));
    position: absolute;
    bottom: -2px;
    right: 0;
    object-fit: contain;
}

@media (max-width: 900px) {
    .cta-urgence-final-v2 { padding-top: 80px; }
    .cta-box-v2 { flex-direction: column; text-align: center; padding-bottom: 2px; min-height: auto; }
    .cta-content-v2 { padding: 40px 20px; }
    .cta-img-v2 { position: relative; right: auto; width: 100%; display: flex; justify-content: center; margin-top: 0; }
    .img-v2-pop { position: relative; height: 380px; bottom: -2px; }
}

/* =========================================
   7. AJUSTEMENTS BOUTONS & MOBILE
   ========================================= */
@media (max-width: 1023px) {
    .hero-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        width: 100%;
    }
    .hero-actions a {
        flex: 1;
        padding: 14px 10px !important;
        font-size: 0.9rem !important;
        white-space: nowrap;
    }
    .hero-bg-wrapper { display: none !important; }
    .hero-halo {
        bottom: auto; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 150vw; height: 150vw;
        background: radial-gradient(circle at center, rgba(47, 51, 54, 0.4) 0%, rgba(0,0,0,0) 70%);
        filter: none !important; 
        z-index: 1;
    }
    .hero-quali-toiture { background: #000; }
    .hero-trust-row-left {
        flex-direction: row !important;
        justify-content: center;
        gap: 15px !important;
    }
    .trust-item { font-size: 1.5rem !important; }
    .hero-trust-row-left { justify-content: center !important; width: 100% !important; }
    .trust-item { justify-content: center !important; text-align: center !important; width: 100% !important; }
}

/* =========================================
   8. SECTION BADGES DARK (TRUST)
   ========================================= */
.trust-emergency-dark {
    background-color: #000;
    padding: 0 0px 100px 0px;
    position: relative;
    overflow: visible; 
    z-index: 10;
}

.halo-orange-reviews {
    position: absolute;
    top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(47, 51, 54, 0.2) 0%, transparent 60%);
    filter: blur(15px);
    z-index: 0;
    pointer-events: none;
}

.trust-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.trust-badges-row-overlap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    transform: translateY(-50%);
    margin-bottom: -40px;
}

.trust-card {
    position: relative;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 35px 25px;
    text-align: left;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.trust-card:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 148, 59, 0.4);
}

.trust-icon {
    color: #F9943B;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}
.trust-icon svg { width: 36px; height: 36px; }

.trust-card h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.trust-card p {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.trust-card::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(249, 148, 59, 0.25) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 1;
    pointer-events: none;
}

.card-halo-tl::before { top: -50px; left: -50px; }
.card-halo-cr::before { top: 50%; right: 100px; transform: translateY(-50%); }
.card-halo-br::before { bottom: -50px; right: -50px; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 24px;
    margin-top: 40px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.bento-card {
    position: relative;
    background-color: #0F0F0F;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bento-card:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 148, 59, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.7), inset 0 0 20px rgba(249, 148, 59, 0.05);
}

.bento-icon-box {
    width: 48px; height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bento-icon-box svg { width: 24px; height: 24px; stroke: #F9943B; }
.bento-card h3 { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
.bento-card p { color: #9ca3af; font-size: 0.95rem; line-height: 1.6; margin: 0; }

@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card { padding: 24px; }
}

.reviews-wall {
    display: flex;
    gap: 24px;
    height: 500px;
    margin-top: 40px;
    margin-bottom: 60px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.review-col { flex: 1; display: flex; flex-direction: column; }
.review-track { display: flex; flex-direction: column; gap: 24px; will-change: transform; }

.mini-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    font-size: 0.95rem;
    backdrop-filter: blur(5px);
}

.mini-card strong { display: block; color: #F9943B; margin-top: 8px; font-size: 1rem; }
.mini-card p { margin-top: 8px; color: #d1d5db; font-style: italic; line-height: 1.4; }

.col-down .review-track { animation: scrollDown 40s linear infinite; }
.col-up .review-track { animation: scrollUp 45s linear infinite; }
@keyframes scrollDown { from { transform: translateY(-33.33%); } to { transform: translateY(0); } }
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-33.33%); } }

.google-final-cta { text-align: center; margin-top: 40px; }
.btn-google-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #F9943B;
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    padding: 16px 32px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(249, 148, 59, 0.25);
}
.btn-google-view:hover { background-color: #ffaa5b; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(249, 148, 59, 0.4); }

@media (max-width: 1024px) {
    .trust-badges-row-overlap { grid-template-columns: 1fr; transform: translateY(-50px); gap: 20px; margin-bottom: 0; }
    .trust-card { text-align: center; }
    .card-halo-tl::before, .card-halo-cr::before, .card-halo-br::before { top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .reviews-wall { height: 400px; }
    .review-col:nth-child(3) { display: none; }
    .col-down .review-track { animation-duration: 25s; } 
    .col-up .review-track { animation-duration: 25s; }
    
    .trust-emergency-dark, .trust-badges-row-overlap, .trust-card { overflow: visible !important; }
    .halo-orange-reviews { width: 250px; height: 250px; opacity: 0.6; background: radial-gradient(circle, rgba(47, 51, 54, 0.8) 0%, transparent 70%); }
    .trust-card::before { width: 180px; height: 180px; filter: blur(40px); opacity: 0.8; background: radial-gradient(circle, rgba(249, 148, 59, 0.6) 0%, transparent 70%); }
    .card-halo-tl::before { top: 50px !important; left: 100px !important; }
    .card-halo-cr::before { top: 50% !important; right: 0px !important; transform: translateY(-50%) !important; }
    .card-halo-br::before { bottom: -40px !important; right: -40px !important; }
    .trust-card h3, .trust-card p, .trust-icon { position: relative; z-index: 2; }
}

@media (max-width: 600px) {
    .review-col:nth-child(2) { display: none; }
}

.trust-emergency-dark .trust-card {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 -15px 20px -10px rgba(47, 51, 54, 0.9);
    transition: all 0.3s ease;
}

.trust-emergency-dark .trust-card:hover {
    transform: translateY(-5px);
    border-color: rgba(249, 148, 59, 0.4);
    box-shadow: 0 30px 50px rgba(0,0,0,0.6), inset 0 -15px 20px -10px rgba(249, 148, 59, 0.3);
}

.google-top-widget {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 25px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
}

.google-top-widget:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); }
.g-logo-icon { height: 24px; width: auto; filter: brightness(1.2); display: block; flex-shrink: 0; }
.g-rating { font-size: 1.1rem; font-weight: 800; color: #fff; letter-spacing: 0.5px; white-space: nowrap; }
.g-stars-row { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.g-stars-row svg { width: 18px; height: 18px; }

@media (max-width: 768px) {
    .google-top-widget { padding: 6px 16px; gap: 10px; }
    .g-rating { font-size: 1rem; }
    .g-logo-icon { height: 20px; }
    .g-stars-row svg { width: 16px; height: 16px; }
}

.why-us-bento-section { margin-top: 30px; margin-bottom: 30px; position: relative; z-index: 2; }
.why-us-intro { text-align: left; max-width: 1200px; margin: 0 auto 40px auto; padding: 0 10px; }
.why-us-intro h2 { font-weight: 800; color: #fff; margin-bottom: 12px; }
.why-us-intro p { color: #F9943B; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

.trust-ticker-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 30px auto 0 auto;
    overflow: hidden;
    padding: 15px 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.trust-ticker-track { display: flex; gap: 60px; width: max-content; animation: scrollTicker 30s linear infinite; }
.ticker-item {
    display: flex; align-items: center; gap: 10px; color: #9ca3af;
    font-size: 1rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.5px; white-space: nowrap;
}
.ticker-item svg { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes scrollTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }
.trust-ticker-wrapper:hover .trust-ticker-track { animation-play-state: paused; }

@media (max-width: 900px) {
    .trust-ticker-wrapper { border-radius: 20px; margin-top: 20px; width: calc(100% - 40px); }
    .ticker-item { font-size: 0.9rem; }
}

/* =========================================
   9. MUR DE PHOTOS (STYLE HYBRIDE)
   ========================================= */
.realisations-wall-light {
    background-color: #f5f5f7;
    padding: 80px 0;
    overflow: hidden;
}

.wall-header { text-align: center; max-width: 800px; margin: 0 auto 30px auto; padding: 0 20px; }
.wall-header h2 { color: #1d1d1f; font-weight: 800; margin-bottom: 10px; }
.highlight-orange { color: #F9943B; }
.wall-header p { color: #86868b; font-weight: 500; }

.track-label {
    font-size: 1rem; font-weight: 800; color: #1d1d1f; letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: center;
    width: 100%; gap: 10px; margin: 0 0 20px 0;
}
.label-green { margin-top: 40px; }
.dot-orange, .dot-green { width: 10px; height: 10px; border-radius: 50%; display: block; }
.dot-orange { background-color: #F9943B; box-shadow: 0 0 10px rgba(249, 148, 59, 0.4); }
.dot-green { background-color: #34c759; box-shadow: 0 0 10px rgba(52, 199, 89, 0.4); }

.img-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.img-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.img-tag {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: #fff; font-size: 0.85rem; font-weight: 700;
    padding: 6px 12px; border-radius: 8px; z-index: 2; pointer-events: none;
}
.duplicate-set { display: contents; }

@media (min-width: 769px) {
    .img-card { height: 260px; width: auto; }
    .img-card img { width: auto; height: 100%; }
    .marquee-row { display: flex; overflow: hidden; padding: 10px 0; width: 100%; }
    .photo-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
    .scroll-left-to-right .photo-track { animation: scroll-reverse 60s linear infinite; }
    .scroll-right-to-left .photo-track { animation: scroll-normal 60s linear infinite; }
    .marquee-row:hover .photo-track { animation-play-state: paused; }
    @keyframes scroll-normal { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes scroll-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
}

@media (max-width: 768px) {
    .realisations-wall-light { padding: 40px 0; }
    .duplicate-set { display: contents !important; }
    .track-left .photo-track, .track-right .photo-track { animation: none !important; transform: none !important; }
    .photo-track {
        display: flex; gap: 15px; overflow-x: auto;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        padding: 0 20px 20px 20px; width: 100%; box-sizing: border-box;
    }
    .photo-track::-webkit-scrollbar { display: none; }
    .photo-track { -ms-overflow-style: none; scrollbar-width: none; }
    
    .img-card {
        width: 80vw; max-width: 320px; height: 240px;
        scroll-snap-align: center; border-radius: 16px; flex-shrink: 0;
    }
}

/* =========================================
   10. CTA PROJET (CORRIGÉ & FORCÉ)
   ========================================= */
.cta-fix-wrapper {
    display: block; width: 100%; padding: 60px 20px; box-sizing: border-box;
    position: relative; z-index: 10;
}

.cta-fix-box {
    max-width: 1100px; margin: 0 auto;
    background: linear-gradient(135deg, #2F3336 0%, #000000 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px; padding: 40px 50px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.cta-fix-text { flex: 1 1 400px; text-align: left; }
.cta-fix-title {
    font-family: inherit; font-size: 2rem !important; font-weight: 800 !important;
    color: #ffffff !important; line-height: 1.2 !important; margin: 0 0 10px 0 !important; padding: 0;
}
.cta-fix-desc { font-size: 1.15rem !important; color: #d1d5db !important; margin: 0 !important; line-height: 1.5; }

.cta-fix-actions {
    flex: 0 0 auto; display: flex; flex-direction: column;
    gap: 15px; width: 100%; max-width: 350px;
}

a.cta-btn-orange {
    display: flex !important; align-items: center; justify-content: center;
    background-color: #F9943B !important; color: #ffffff !important;
    font-size: 1.1rem !important; font-weight: 700 !important;
    padding: 16px 30px !important; border-radius: 12px !important;
    text-decoration: none !important; border: none !important;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(249, 148, 59, 0.3); cursor: pointer;
}

a.cta-btn-orange:hover {
    background-color: #ffaa5b !important; transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(249, 148, 59, 0.5);
}

a.cta-btn-ghost {
    display: flex !important; flex-direction: column !important; align-items: center; justify-content: center;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important; padding: 12px 24px !important;
    border-radius: 12px !important; text-decoration: none !important;
    transition: all 0.2s; cursor: pointer;
}

a.cta-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important; transform: translateY(-2px);
}

.urgent-label { color: #F9943B !important; font-weight: 800; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 2px; }
.phone-label { color: #fff !important; font-size: 1rem; font-weight: 500; }

@media (max-width: 900px) {
    .cta-fix-box { flex-direction: column; text-align: center; padding: 40px 24px; gap: 30px; }
    .cta-fix-text { text-align: center; flex: auto; }
    .cta-fix-title { font-size: 1.6rem !important; }
    .cta-fix-actions { width: 100%; max-width: 100%; }
}

/* --- CONFIGURATION GLOBALE MOON --- */
.moon-locations-wrapper {
    position: relative;
    background-color: #000; /* Fond noir profond */
    padding: 80px 20px;
    overflow: hidden;
    color: #fff;
    font-family: inherit; /* Utilise la police de ton site */
}

/* --- HALOS D'AMBIANCE --- */
.moon-halo {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

.moon-halo-orange {
    background: #F9943B;
    top: 15%;
    left: -10%;
}

.moon-halo-white {
    background: #ffffff;
    bottom: -10%;
    right: -10%;
    opacity: 0.1;
}

/* --- EN-TÊTE --- */
.moon-container-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
    position: relative;
    z-index: 2;
}

.moon-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #F9943B; /* Orange */
    margin-bottom: 16px;
    display: block;
}

.moon-main-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #fff;
}

.moon-gradient {
    /* Petit effet dégradé subtil sur le texte blanc */
    background: linear-gradient(to right, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.moon-description {
    color: #9ca3af; /* Gris clair */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* --- GRILLE ET CARTES --- */
.moon-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* Adapte auto : 1 colonne mobile, 2 colonnes PC */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    position: relative;
    z-index: 2;
}

.moon-glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2.5rem; /* Gros arrondi style Apple/Moon */
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 900px) {
    .moon-glass-card { 
        flex-direction: row; 
        align-items: stretch;
    }
    .moon-card-col { 
        width: 50%; 
        display: flex;
        flex-direction: column;
    }
}

.moon-glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(249, 148, 59, 0.3); /* Bordure orange au survol */
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

/* --- BADGES & MAP --- */
.moon-badge-container {
    margin-bottom: 1rem;
}

.moon-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
}

.moon-map-box {
    margin-top: auto; /* Pousse la map vers le bas si flex column */
    height: 220px;
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    position: relative;
}

.moon-map-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    /* Filtre sombre pour la map pour qu'elle s'intègre au design */
    filter: grayscale(1) invert(0.9) contrast(1.2) opacity(0.8);
    transition: all 0.6s ease;
}

/* Au survol, la map reprend ses couleurs */
.moon-glass-card:hover .moon-map-iframe {
    filter: grayscale(0) invert(0) contrast(1) opacity(1);
}

/* --- INFOS & BOUTONS --- */
.moon-info-col {
    justify-content: space-between;
}

.moon-status {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.moon-glow-dot {
    width: 8px;
    height: 8px;
    background-color: #F9943B; /* Orange */
    border-radius: 50%;
    margin-right: 10px;
    box-shadow: 0 0 10px rgba(249, 148, 59, 0.8);
    animation: moonPulse 2s infinite;
}

.moon-status-text {
    color: #F9943B; /* Orange */
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.moon-city-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
    line-height: 1.1;
    margin-top: 0;
}

.moon-city-text {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Boutons */
.moon-btn-maps {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.moon-btn-maps:hover {
    background: #F9943B; /* Orange au survol */
    border-color: #F9943B;
    color: #fff;
    box-shadow: 0 0 20px rgba(249, 148, 59, 0.4);
    transform: translateY(-2px);
}

.btn-action-orange {
    /* Style spécifique pour le 2ème bouton si tu veux varier */
    background: rgba(249, 148, 59, 0.1);
    border-color: rgba(249, 148, 59, 0.3);
    color: #F9943B;
}

.btn-action-orange:hover {
    background: #F9943B;
    color: #fff;
}

/* --- ANIMATIONS & RESPONSIVE --- */
@keyframes moonPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
}

.hidden-mobile { display: none; }
@media (min-width: 768px) { .hidden-mobile { display: block; } }

/* Ajustement Mobile */
@media (max-width: 768px) {
    .moon-locations-wrapper { padding: 60px 20px; }
    .moon-grid { grid-template-columns: 1fr; gap: 2rem; }
    .moon-glass-card { padding: 2rem; border-radius: 2rem; }
    .moon-main-title { font-size: 2rem; }
    .moon-map-box { height: 180px; }
}

/* Variante Verte pour le statut */
.moon-glow-green {
    background-color: #34c759 !important; /* Vert Apple */
    box-shadow: 0 0 10px rgba(52, 199, 89, 0.8) !important;
}

.moon-text-green {
    color: #34c759 !important;
}

/* --- SECTION CTA FORCE (Impact Visuel) --- */
.cta-force-section {
    background-color: #000; /* Fond très sombre pour contraster après les photos */
    padding: 60px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-force-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

/* Texte */
.cta-force-text {
    flex: 1;
}

.cta-force-title {
    color: #fff;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
}

.cta-force-desc {
    color: #d1d5db;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 1. Style général (PC & Mobile) : On garde la couleur */
.cta-force-desc strong {
    color: #F9943B; /* Ton Orange */
}

/* --- CORRECTION MOBILE CTA --- */
@media (max-width: 768px) {
    
    /* 1. On désactive le Flexbox sur le parent pour revenir à du texte normal */
    .cta-force-desc {
        display: block !important; 
        line-height: 1.5; /* Un peu d'air entre les lignes */
    }

    /* 2. On force le texte en gras à passer à la ligne */
    .cta-force-desc strong {
        display: block; /* Il prend toute la largeur */
        margin-top: 8px; /* Espace au-dessus */
        color: #F9943B;
    }
}

.icon-chrono {
    font-size: 1.4rem;
}

/* Boutons */
.cta-force-actions {
    display: flex;
    gap: 15px;
    flex-shrink: 0; /* Empêche les boutons de s'écraser */
}

.btn-force-primary {
    background-color: #F9943B;
    color: #fff;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(249, 148, 59, 0.3);
}

.btn-force-primary:hover {
    transform: translateY(-3px);
    background-color: #ffaa5b;
    box-shadow: 0 10px 25px rgba(249, 148, 59, 0.5);
}

.btn-force-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 15px 25px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.btn-force-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* Responsive Mobile */
@media (max-width: 900px) {
    .cta-force-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .cta-force-desc {
        justify-content: center; /* Centre le texte descriptif */
    }

    .cta-force-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-force-primary, .btn-force-secondary {
        justify-content: center;
        width: 100%;
    }
}

/* --- SECTION FAQ LIGHT (2 COLONNES) --- */
.faq-quali-section {
    background-color: #F9F9FB; /* Gris très pâle "Apple" */
    padding: 80px 20px;
    color: #1D1D1F;
    font-family: inherit;
}

.faq-container {
    /* MODIFICATION : On élargit pour laisser la place aux 2 colonnes */
    max-width: 1200px; 
    margin: 0 auto;
}

/* En-tête */
.faq-header {
    text-align: center;
    margin-bottom: 60px; /* Un peu plus d'espace */
}

.faq-subtitle {
    color: #F9943B; /* Orange */
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.faq-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1D1D1F;
    line-height: 1.2;
    margin-bottom: 15px;
}

.highlight-orange {
    color: #F9943B;
}

.faq-intro {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* --- GRILLE DES QUESTIONS (MODIFIÉ POUR 2 COLONNES) --- */
.faq-grid {
    display: grid;
    /* Création de 2 colonnes de largeur égale */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Espace entre les colonnes et les lignes */
    align-items: start; /* Empêche les cases de s'étirer bizarrement */
}

/* Style de l'accordéon */
.faq-item {
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    height: fit-content; /* Important pour l'alignement grid */
}

.faq-item:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
    border-color: rgba(249, 148, 59, 0.3);
}

/* La question (Titre cliquable) */
.faq-question {
    list-style: none;
    padding: 20px 25px;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1D1D1F;
    transition: color 0.3s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    color: #F9943B;
}

/* L'icône + / - */
.faq-icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    margin-left: 15px;
}

.faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background-color: #F9943B;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-icon::before { width: 2px; height: 14px; }
.faq-icon::after { width: 14px; height: 2px; }

/* Animation quand c'est ouvert */
details[open] .faq-icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}
details[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

details[open] .faq-question {
    color: #F9943B;
    border-bottom: 1px solid #f0f0f0;
}

/* La réponse */
.faq-answer {
    padding: 0 25px 25px 25px;
    color: #555;
    line-height: 1.6;
    font-size: 1rem;
    background-color: #fff;
    animation: fadeIn 0.4s ease-in-out;
}

.faq-answer p {
    margin-top: 15px;
    margin-bottom: 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- RESPONSIVE MOBILE & TABLETTE --- */
@media (max-width: 900px) {
    /* On repasse sur 1 seule colonne si l'écran est petit */
    .faq-grid {
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .faq-title { font-size: 1.8rem; }
    .faq-question { font-size: 1rem; padding: 15px 20px; }
    .faq-answer { padding: 0 20px 20px 20px; }
}

/* --- SECTION NAVIGATION BAS DE PAGE (CARDS FLOTTANTES) --- */
.bottom-nav-dark {
    background-color: #FFF; /* Fond noir Pleine Largeur */
    width: 100%;
    /* On ajoute un peu de padding vertical pour que les cartes ne collent pas aux sections voisines */
    padding: 30px 0; 
    overflow: hidden;
}

.bottom-nav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Colonnes égales */
    
    /* CONTRAINTES DE LARGEUR & ESPACEMENT */
    max-width: 1400px; 
    margin: 0 auto; /* Centre le bloc de 1200px au milieu de l'écran */
    gap: 50px; /* L'écart demandé entre les colonnes */
    
    /* Sécurité pour ne pas coller aux bords sur les écrans < 1300px */
    padding: 0 20px; 
}

/* La Carte (Style Apple Card) */
.nav-card {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    
    /* CONTRAINTES DE STYLE */
    height: 220px; /* Hauteur fixe */
    border-radius: 20px; /* Arrondi demandé */
    background-color: #fff;
    
    /* Petite ombre pour détacher la carte du fond noir */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.5); /* Bordure très fine pour la définition */
}

/* Image de fond */
.nav-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
    filter: brightness(0.6) saturate(0.8);
}

/* Overlay */
.nav-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0) 100%);
    z-index: 2;
    transition: all 0.6s ease;
}

/* Contenu Texte */
.nav-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 25px 30px;
    color: #fff;
}

/* Typographie */
.nav-subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #F9943B;
    margin-bottom: 8px;
    opacity: 0.9;
}

.nav-title {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.nav-cta {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.9);
    transition: all 0.3s ease;
}

.arrow {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- ANIMATIONS AU SURVOL --- */
.nav-card:hover {
    border-color: rgba(249, 148, 59, 0.3); /* La bordure devient orange subtil */
    transform: translateY(-5px); /* Légère remontée */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.nav-card:hover .nav-bg {
    transform: scale(1.1);
    filter: brightness(0.8) saturate(1);
}

.nav-card:hover .nav-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(249, 148, 59, 0.1) 100%);
}

.nav-card:hover .nav-cta { color: #F9943B; }
.nav-card:hover .arrow { transform: translateX(6px); color: #F9943B; }

/* --- RESPONSIVE --- */
/* Tablette (On réduit le gap car 100px c'est trop gros pour une tablette) */
@media (max-width: 1200px) {
    .bottom-nav-grid {
        gap: 30px; 
    }
}

/* Mobile (On passe en 1 colonne) */
@media (max-width: 900px) {
    .bottom-nav-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .nav-card {
        height: 220px; /* On garde la hauteur fixe même sur mobile */
    }
}

/* --- FOOTER DARK PREMIUM (STYLE APPLE/MOON) --- */
.footer-quali-dark {
    background-color: #000000; /* Fond noir profond */
    color: #cecece; /* Texte gris clair pour le confort des yeux */
    padding-top: 80px;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    font-size: 0.95rem;
}

/* --- HALOS D'AMBIANCE --- */
.footer-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.25; /* Très discret */
    z-index: 0;
    pointer-events: none;
}

.halo-orange {
    width: 600px;
    height: 600px;
    background: #F9943B;
    top: -200px;
    right: -100px; /* Lumière qui vient du coin haut droit */
}

.halo-white {
    width: 500px;
    height: 500px;
    background: #ffffff;
    bottom: -100px;
    left: -100px;
    opacity: 0.05; /* Juste une touche de lumière froide en bas à gauche */
}

/* --- GRILLE PRINCIPALE --- */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px 24px;
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr; /* La colonne logo est plus large */
    gap: 60px;
}

/* Colonne Identité */
.footer-brand {
    padding-right: 20px;
}

.footer-logo {
    max-width: 100px;
    height: auto;
    margin-bottom: 25px;
    display: block;
}

.footer-desc {
    line-height: 1.6;
    margin-bottom: 25px;
    color: #a1a1a6; /* Gris Apple */
}

.footer-coords p {
    margin: 5px 0;
    font-weight: 600;
    color: #fff;
}

/* Titres des colonnes */
.footer-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Listes de liens */
.footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list li {
    margin-bottom: 12px;
}

.footer-list a {
    color: #a1a1a6;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-list a:hover {
    color: #F9943B; /* Orange au survol */
    transform: translateX(5px);
}

.highlight-link {
    color: #fff !important; /* Le lien simulateur en blanc */
    font-weight: 600;
}

/* Espacement entre les deux blocs de la colonne du milieu */
.mt-small {
    margin-top: 40px;
}

/* --- BANDEAU COPYRIGHT (GRIS) --- */
.footer-bottom {
    background-color: #111111; /* Gris Anthracite foncé */
    padding: 30px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* Lien Agence Web'Up */
.agency-link {
    color: #F9943B; /* Orange */
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s;
}

.agency-link:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Une seule colonne */
        gap: 40px;
        text-align: center; /* Centré sur mobile */
    }

    .footer-brand {
        padding-right: 0;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre le logo */
    }

    .footer-halo {
        opacity: 0.15; /* Moins fort sur mobile */
    }

    .mobile-break {
        display: block; /* Force le retour à la ligne du "Propulsé par" sur mobile */
        margin-top: 5px;
    }
}

@media (min-width: 901px) {
    .mobile-break {
        display: none; /* Cache le saut de ligne sur PC */
    }
}

.text-orange {
    color: #F9943B !important; /* Ton Orange Quali Toiture */
}

/* IMPORT FONT (Si pas déjà chargée) */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;600;700;800;900&display=swap');

/* --- CONFIGURATION GLOBALE HERO --- */
#qt-services-hero {
    position: relative;
    background-color: #040201; /* NOIR QUALI */
    font-family: 'Onest', sans-serif;
    padding-top: 7rem;
    padding-bottom: 1rem;
    overflow: hidden;
    color: #ffffff;
    min-height: 100vh; /* Prend 85% de la hauteur écran */
    display: flex;
    align-items: center;
    justify-content: center;
}

#qt-services-hero * {
    box-sizing: border-box;
}

/* --- EFFETS DE FOND (GRILLE & GLOW) --- */
#qt-services-hero .qt-bg-grid {
    position: absolute;
    inset: 0;
    /* Grille subtile */
    background-image: 
        linear-gradient(to right, #222 1px, transparent 1px), 
        linear-gradient(to bottom, #222 1px, transparent 1px);
    background-size: 40px 40px;
    /* Masque dégradé pour que la grille disparaisse vers le bas */
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
}

#qt-services-hero .qt-hero-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* Glow Chaud (Orange Quali) */
#qt-services-hero .glow-top-right {
    top: -20%;
    right: -10%;
    background-color: #F9943B; 
}

/* Glow Froid (Bleu Quali) - Ajoute de la profondeur */
#qt-services-hero .glow-bottom-left {
    bottom: -20%;
    left: -10%;
    background-color: #131212; 
}

/* --- CONTENU --- */
#qt-services-hero .qt-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 10;
    width: 100%;
}

#qt-services-hero .qt-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

/* --- BADGE --- */
#qt-services-hero .qt-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    backdrop-filter: blur(5px);
    margin-bottom: 2rem;
}

#qt-services-hero .qt-pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: #F9943B;
    border-radius: 50%;
    margin-right: 12px;
    box-shadow: 0 0 10px #F9943B;
    animation: qtPulse 2s infinite;
}

#qt-services-hero .qt-badge-text {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #d1d5db;
}

@keyframes qtPulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* --- TITRES --- */
#qt-services-hero h1 {
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-transform: uppercase;
}

#qt-services-hero .text-gradient-blue {
    /* Dégradé sur le texte pour le bleu secondaire */
    background: linear-gradient(90deg, #fff, #131212);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#qt-services-hero .qt-hero-subtitle {
    font-size: 1.1rem;
    color: #9CA3AF;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-weight: 400;
    line-height: 1.6;
}

/* --- BOUTONS --- */
#qt-services-hero .qt-hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

/* Bouton Primaire (Orange) */
#qt-services-hero .qt-btn-primary {
    position: relative;
    background-color: #F9943B; /* Orange Quali */
    color: #ffffff;
    padding: 1.2rem 2.5rem;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
}

#qt-services-hero .qt-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(249, 148, 59, 0.4);
    background-color: #ffffff;
    color: #F9943B;
}

#qt-services-hero .qt-btn-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

#qt-services-hero .qt-btn-primary:hover .qt-btn-shine {
    transform: translateX(100%);
}

/* Bouton Secondaire (Urgence) */
#qt-services-hero .qt-btn-secondary {
    padding: 1.2rem 2rem;
    border-radius: 0.75rem;
    border: 1px solid #333;
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s;
}

#qt-services-hero .qt-btn-secondary:hover {
    border-color: #3B58F9; /* Bleu Quali */
    color: #3B58F9;
    background: rgba(59, 88, 249, 0.1);
}

#qt-services-hero .qt-btn-icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 10px;
}

/* --- STATS GRID --- */
#qt-services-hero .qt-hero-stats {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

#qt-services-hero .qt-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#qt-services-hero .qt-stat-val {
    font-size: 2rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
}

#qt-services-hero .qt-stat-label {
    font-size: 0.75rem;
    color: #6B7280;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

/* --- RESPONSIVE TABLETTE & DESKTOP --- */
@media (min-width: 768px) {
    #qt-services-hero .qt-hero-buttons { flex-direction: row; gap: 2rem; }
    #qt-services-hero .qt-hero-stats { grid-template-columns: repeat(4, 1fr); }
}

/* --- SECTION GRID SERVICES (LIGHT) --- */
#qt-services-grid {
    background-color: #F9FAFB; /* Gris très clair pour le fond de section */
    padding: 6rem 1rem;
    color: #111827; /* Texte presque noir */
    position: relative;
}

#qt-services-grid .qt-container {
    max-width: 1400px; /* Élargi pour bien accueillir les 4 colonnes */
    margin: 0 auto;
}

/* --- HEADER --- */
#qt-services-grid .qt-section-header {
    text-align: center;
    margin-bottom: 4rem;
}

#qt-services-grid .qt-tag {
    display: inline-block;
    color: #F9943B; /* Orange Quali */
    background: rgba(249, 148, 59, 0.1);
    border: 1px solid rgba(249, 148, 59, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

#qt-services-grid h2 {
    font-weight: 900;
    color: #111827; /* Titre sombre */
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-transform: uppercase;
}

#qt-services-grid .qt-separator {
    width: 60px;
    height: 4px;
    background-color: #F9943B;
    margin: 0 auto 1.5rem auto;
    border-radius: 2px;
}

#qt-services-grid p {
    color: #4B5563; /* Gris moyen lisible */
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --- GRILLE RESPONSIVE 4x4 --- */
#qt-services-grid .qt-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr; /* 1 colonne par défaut (Mobile) */
    gap: 2rem; 
}

/* Tablette : 2 colonnes */
@media (min-width: 768px) {
    #qt-services-grid .qt-grid-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop : 4 colonnes strictes */
@media (min-width: 1024px) {
    #qt-services-grid .qt-grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- CARTE SERVICE (BLANCHE) --- */
#qt-services-grid .qt-card-service {
    background-color: #FFFFFF; /* Carte blanche */
    border: 1px solid #E5E7EB; /* Bordure gris clair */
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    /* Ombre légère par défaut */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
}

/* Hover Général (Lift + Shadow + Bordure Orange) */
#qt-services-grid .qt-card-service:hover {
    transform: translateY(-8px);
    border-color: #F9943B; 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Hover Bleu pour Etanchéité et Hydrofuge */
#qt-services-grid .qt-card-service.blue-hover:hover {
    border-color: #3B58F9;
}

/* --- ICONE (CARRÉ NOIR) --- */
#qt-services-grid .qt-icon-box {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #040201; /* Noir Quali */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

#qt-services-grid .qt-icon-box svg {
    width: 1.8rem;
    height: 1.8rem;
}

/* Hover Icone */
#qt-services-grid .qt-card-service:hover .qt-icon-box {
    background-color: #F9943B; /* Devient Orange */
    color: #fff;
}
#qt-services-grid .qt-card-service.blue-hover:hover .qt-icon-box {
    background-color: #3B58F9; /* Devient Bleu */
}

/* --- TEXTES CARTE --- */
#qt-services-grid h3 {
    font-size: 1.3rem; /* Légèrement réduit pour tenir sur 4 colonnes */
    font-weight: 800;
    color: #111827; /* Titre Noir */
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

#qt-services-grid .qt-card-service p {
    font-size: 0.95rem;
    color: #6B7280; /* Texte gris */
    line-height: 1.5;
    margin: 0 0 2rem 0;
    text-align: left;
    max-width: 100%;
}

/* --- LIEN BAS DE CARTE --- */
#qt-services-grid .qt-link-arrow {
    margin-top: auto;
    color: #F9943B;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: transform 0.3s;
}

#qt-services-grid .qt-card-service.blue-hover .qt-link-arrow {
    color: #3B58F9;
}

#qt-services-grid .qt-card-service:hover .qt-link-arrow {
    transform: translateX(10px);
}

/* =========================================
   1. STRUCTURE SECTION & BACKGROUND
   ========================================= */
#qt-simulator-section {
    background-color: #040201; /* Noir Quali Toiture */
    padding: 6rem 1rem;
    font-family: 'Onest', sans-serif;
    color: #fff;
    border-top: 1px solid #1f2937;
    position: relative;
    overflow: hidden;
}

#qt-simulator-section * { box-sizing: border-box; }

#qt-simulator-section .qt-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* =========================================
   2. WIDGET CONTAINER
   ========================================= */
.panhub-sim-widget {
    background-color: #131212; /* Gris Anthracite */
    border: 1px solid #333;
    border-radius: 24px;
    padding: 40px;
    max-width: 650px;
    margin: 0 auto;
    color: #fff;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease;
}

/* =========================================
   3. HEADER DU WIDGET
   ========================================= */
.sim-header { text-align: center; margin-bottom: 30px; transition: opacity 0.5s; }

.sim-tag {
    display: inline-block;
    background: rgba(249, 148, 59, 0.15); /* Orange Transp */
    color: #F9943B; /* Orange Vif */
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    border: 1px solid rgba(249, 148, 59, 0.2);
}

.sim-header h2 { margin: 0 0 10px 0; color: #fff; font-weight: 800; }
.sim-subtitle { color: #9CA3AF; margin-bottom: 25px; }

/* Barre de Progression */
.progress-container { display: flex; align-items: center; gap: 15px; font-size: 0.85rem; color: #888; }
.progress-bar-bg { flex-grow: 1; height: 6px; background: #2a2a2a; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; width: 33%; background: linear-gradient(90deg, #F9943B, #ffb347); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 10px rgba(249, 148, 59, 0.6); }

/* =========================================
   4. ÉTAPES & QUESTIONS
   ========================================= */
.sim-step { display: none; }
.sim-step.active { display: block; animation: slideUpFade 0.5s forwards; }
@keyframes slideUpFade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.step-question { text-align: center; font-size: 1.3rem; margin-bottom: 5px; font-weight: 700; color: #eee; }
.step-sub { text-align: center; color: #666; font-size: 0.9rem; margin-bottom: 30px; }

/* Options (Grille de boutons) */
.sim-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.sim-options-grid.three-cols { grid-template-columns: 1fr 1fr 1fr; }
.sim-options-row { display: flex; justify-content: center; gap: 20px; }

.sim-option-btn {
    background-color: #080504; /* Noir profond */
    border: 1px solid #333;
    color: #ddd;
    padding: 20px;
    border-radius: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    text-align: center;
    font-family: 'Onest', sans-serif;
}

.sim-option-btn:hover {
    border-color: #F9943B;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.sim-option-btn.selected {
    border-color: #F9943B;
    background: rgba(249, 148, 59, 0.1);
    color: #F9943B;
}

.sim-option-btn.big { width: 120px; padding: 25px; font-size: 1.2rem; }
.sim-option-btn.small { padding: 12px; font-size: 0.9rem; }

/* Inputs (Âge maison) */
.sim-label { display: block; font-size: 0.9rem; color: #999; margin-bottom: 10px; margin-left: 5px;}
.input-wrapper { position: relative; max-width: 100%; margin-bottom: 25px; }
.sim-input {
    width: 100%;
    background-color: #080504;
    border: 1px solid #333;
    color: #fff;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.1rem;
    outline: none;
    transition: border-color 0.3s;
    font-family: 'Onest', sans-serif;
}
.sim-input:focus { border-color: #F9943B; }
.unit { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: #666; font-weight: bold; }

/* Bouton Action (Calculer) */
.sim-action-btn { 
    display: block; width: 100%; 
    background: #F9943B; color: #fff; border: none; 
    padding: 20px; border-radius: 12px; 
    font-weight: 800; font-size: 1.1rem; 
    cursor: pointer; transition: 0.3s; 
    text-transform: uppercase; letter-spacing: 1px; 
    font-family: 'Onest', sans-serif;
}
.sim-action-btn:hover { background: #fff; color: #F9943B; transform: translateY(-2px); }

/* =========================================
   5. LOADING SCREEN
   ========================================= */
.loading-box { text-align: center; padding: 40px 20px; }
.spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.1); border-top: 4px solid #F9943B; border-radius: 50%; margin: 0 auto 30px auto; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.loading-steps { margin-top: 30px; display: inline-block; text-align: left; }
.l-step { color: #444; margin-bottom: 10px; font-size: 0.9rem; display: flex; align-items: center; gap: 10px; transition: all 0.4s; }
.l-step.done { color: #fff; transform: translateX(5px); }
.l-step.done::before { content: "✓"; color: #F9943B; font-weight: bold; }

/* =========================================
   6. RÉSULTATS & CARTE PERTES
   ========================================= */
.result-box { text-align: center; animation: popIn 0.6s; }
.confetti-icon { font-size: 3rem; margin-bottom: 15px; display:block; }

.result-card {
    background: #080504; border: 1px solid #333;
    border-radius: 20px; padding: 25px; margin: 25px 0;
}
.res-label { font-size: 0.8rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.result-saving { font-size: 2.8rem; font-weight: 800; color: #ef4444; margin: 5px 0; line-height: 1.1; } /* ROUGE ALERTE */
.res-sub { font-size: 0.85rem; color: #666; font-style: italic; }

.disclaimer { font-size: 0.7rem; color: #444; margin-top: 20px; }

/* =========================================
   7. INTEGRATION WPFORMS (CUSTOM STYLE)
   ========================================= */
/* Conteneur Form */
.sim-form-wrapper {
    margin-top: 30px;
    border-top: 1px solid #333;
    padding-top: 20px;
    text-align: left;
}
.form-intro { color: #F9943B; font-weight: 700; margin-bottom: 15px; text-align: center; font-size: 0.95rem; }

/* Styles forcés sur WPForms pour coller au Dark Mode */
#qtSimWidget .wpforms-container input[type="text"],
#qtSimWidget .wpforms-container input[type="email"],
#qtSimWidget .wpforms-container input[type="tel"],
#qtSimWidget .wpforms-container textarea,
#qtSimWidget .wpforms-container select {
    background-color: #080504 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    font-family: 'Onest', sans-serif !important;
    box-shadow: none !important;
}

#qtSimWidget .wpforms-container input:focus,
#qtSimWidget .wpforms-container select:focus {
    border-color: #F9943B !important;
    outline: none !important;
}

#qtSimWidget .wpforms-container label {
    color: #aaa !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
}

#qtSimWidget .wpforms-container button[type="submit"] {
    background-color: #F9943B !important;
    color: #fff !important;
    border: none !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 15px 30px !important;
    border-radius: 50px !important;
    width: 100% !important;
    font-family: 'Onest', sans-serif !important;
    margin-top: 10px !important;
    transition: all 0.3s !important;
}

#qtSimWidget .wpforms-container button[type="submit"]:hover {
    background-color: #fff !important;
    color: #F9943B !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(249, 148, 59, 0.3);
}

/* Cache les descriptions inutiles */
#qtSimWidget .wpforms-field-description { display: none !important; }

/* =========================================
   8. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 600px) {
    .panhub-sim-widget { padding: 25px 20px; }
    .sim-options-grid { grid-template-columns: 1fr; }
    .sim-options-row { flex-direction: column; align-items: center; }
    .sim-option-btn.big { width: 100%; }
    .sim-form-wrapper { padding-top: 10px; }
}

/* --- SECTION PROCESS (LIGHT + SCROLL) --- */
#qt-process-section {
    background-color: #F9FAFB;
    padding: 6rem 1rem;
    font-family: 'Onest', sans-serif;
    color: #111827;
    position: relative;
    overflow: hidden;
}

#qt-process-section .qt-container { max-width: 1000px; margin: 0 auto; position: relative; }

/* Header */
#qt-process-section .qt-section-header { text-align: center; margin-bottom: 5rem; }
#qt-process-section .qt-tag {
    display: inline-block; color: #F9943B; background: rgba(249, 148, 59, 0.1);
    border: 1px solid rgba(249, 148, 59, 0.2); padding: 6px 14px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem;
}
#qt-process-section h2 { font-weight: 900; color: #111827; margin-bottom: 1.5rem; text-transform: uppercase; }
#qt-process-section .qt-separator { width: 60px; height: 4px; background-color: #F9943B; margin: 0 auto 1.5rem auto; border-radius: 2px; }
#qt-process-section p { color: #4B5563; max-width: 700px; margin: 0 auto; font-size: 1.1rem; line-height: 1.6; }

/* --- TIMELINE WRAPPER --- */
.timeline-wrapper { position: relative; padding: 20px 0; width: 100%; margin-bottom: 4rem; }

/* LIGNE CENTRALE */
.timeline-line-container {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
    transform: translateX(-50%); z-index: 0;
}

.timeline-line-bg {
    position: absolute; inset: 0; background: #E5E7EB; border-radius: 4px; z-index: 1;
}

/* LA BARRE DE PROGRESSION (ANIMÉE PAR JS) */
.timeline-line-progress {
    position: absolute; top: 0; left: 0; right: 0;
    height: 0%; /* Change via JS */
    background: #F9943B; /* Orange */
    box-shadow: 0 0 15px rgba(249, 148, 59, 0.6);
    border-radius: 4px;
    z-index: 2; /* Au dessus du gris */
    transition: height 0.1s linear; /* Fluide */
}

/* --- ITEMS --- */
.timeline-item { position: relative; width: 50%; margin-bottom: 3rem; z-index: 5; opacity: 0.5; transition: opacity 0.5s ease; }
.timeline-item.active { opacity: 1; } /* S'allume quand actif */

.timeline-item.left { left: 0; padding-right: 50px; text-align: right; }
.timeline-item.right { left: 50%; padding-left: 50px; text-align: left; }

/* MARQUEUR (ROND) */
.timeline-marker {
    position: absolute; top: 0;
    width: 50px; height: 50px;
    background: #fff;
    border: 3px solid #E5E7EB; /* Gris par défaut */
    border-radius: 50%;
    color: #9CA3AF;
    font-size: 1.2rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    transition: all 0.4s ease;
}

/* Position Ronds */
.timeline-item.left .timeline-marker { right: -25px; }
.timeline-item.right .timeline-marker { left: -25px; }

/* ÉTAT ACTIF (Quand la barre passe dessus) */
.timeline-item.active .timeline-marker {
    background: #F9943B;
    border-color: #F9943B;
    color: #fff;
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(249, 148, 59, 0.5);
}

/* --- CONTENU --- */
.timeline-content {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    text-align: left; 
}

/* ÉTAT ACTIF (Carte) */
.timeline-item.active .timeline-content {
    border-color: #F9943B; /* Bordure orange */
    box-shadow: 0 10px 25px rgba(249, 148, 59, 0.15);
}

.timeline-content h3 { font-size: 1.25rem; font-weight: 800; color: #111827; margin-top: 0; margin-bottom: 1rem; text-transform: uppercase; }
.timeline-content p { font-size: 1rem; color: #6B7280; line-height: 1.6; margin: 0; }
.timeline-content strong { color: #F9943B; font-weight: 700; }

/* FLÈCHES (Triangles) */
.timeline-content::before {
    content: ''; position: absolute; top: 15px; width: 0; height: 0; border-style: solid;
}
.timeline-item.left .timeline-content::before {
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #FFFFFF;
    filter: drop-shadow(1px 0 0 #E5E7EB);
}
.timeline-item.right .timeline-content::before {
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-color: transparent #FFFFFF transparent transparent;
    filter: drop-shadow(-1px 0 0 #E5E7EB);
}

/* Adaptation Flèches Active */
.timeline-item.left.active .timeline-content::before { filter: drop-shadow(1px 0 0 #F9943B); }
.timeline-item.right.active .timeline-content::before { filter: drop-shadow(-1px 0 0 #F9943B); }

/* BOUTON */
.process-cta { text-align: center; margin-top: 2rem; }
.qt-btn-process {
    display: inline-block; background-color: #111827; color: #fff;
    padding: 1rem 2rem; border-radius: 0.75rem; font-weight: 700; text-transform: uppercase; text-decoration: none;
    transition: all 0.3s;
}
.qt-btn-process:hover { background-color: #F9943B; transform: translateY(-3px); }

/* MOBILE */
@media (max-width: 768px) {
    .timeline-line-container { left: 20px; transform: translateX(0); }
    .timeline-item { width: 100%; left: 0 !important; padding-left: 60px !important; padding-right: 0 !important; text-align: left !important; }
    .timeline-item.left .timeline-marker, .timeline-item.right .timeline-marker { left: -5px; right: auto; }
    .timeline-content::before { left: -10px !important; right: auto !important; border-width: 10px 10px 10px 0 !important; border-color: transparent #FFFFFF transparent transparent !important; filter: drop-shadow(-1px 0 0 #E5E7EB); }
    /* Mobile active fleches */
    .timeline-item.active .timeline-content::before { filter: drop-shadow(-1px 0 0 #F9943B); }
}

/* --- SECTION REALISATIONS (DARK) --- */
#qt-realisations {
    background-color: #040201; /* Noir Quali */
    padding: 6rem 1rem;
    font-family: 'Onest', sans-serif;
    color: #fff;
    border-top: 1px solid #1f2937;
    position: relative;
}

#qt-realisations .qt-container { max-width: 1200px; margin: 0 auto; }

/* HEADER */
#qt-realisations .qt-section-header { text-align: center; margin-bottom: 4rem; }
#qt-realisations .qt-tag {
    display: inline-block; color: #F9943B; border: 1px solid rgba(249, 148, 59, 0.3);
    padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; background: rgba(249, 148, 59, 0.05);
}
#qt-realisations h2 { font-weight: 900; color: #fff; margin-bottom: 1.5rem; line-height: 1.1; text-transform: uppercase; }
#qt-realisations .qt-separator { width: 60px; height: 4px; background-color: #F9943B; margin: 0 auto 1.5rem auto; border-radius: 2px; }
#qt-realisations p { color: #9CA3AF; max-width: 700px; margin: 0 auto; font-size: 1.1rem; }

/* --- GRILLE --- */
.qt-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 768px) {
    .qt-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .qt-projects-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- CARTE PROJET --- */
.qt-project-card {
    background-color: #131212;
    border: 1px solid #333;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.4s ease;
    display: flex; flex-direction: column;
}

.qt-project-card:hover {
    transform: translateY(-8px);
    border-color: #F9943B;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* --- ZONE SPLIT IMAGE (50/50) --- */
.qt-split-view {
    display: flex;
    width: 100%;
    aspect-ratio: 16/10; /* Format rectangulaire */
    position: relative;
    border-bottom: 1px solid #333;
}

.qt-img-box {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.qt-img-box img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Zoom au survol */
.qt-project-card:hover .qt-img-box img { transform: scale(1.1); }

/* SEPARATEUR CENTRAL */
.split-divider {
    position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; background: #fff;
    transform: translateX(-50%);
    z-index: 10;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* BADGES AVANT / APRES */
.label-badge {
    position: absolute;
    top: 10px;
    font-size: 0.7rem; font-weight: 800;
    padding: 4px 8px; border-radius: 4px;
    z-index: 5;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.label-badge.before {
    left: 10px;
    background: rgba(0,0,0,0.7); color: #ccc;
    border: 1px solid #555;
}

.label-badge.after {
    right: 10px;
    background: #F9943B; color: #fff;
    border: 1px solid #fff;
}

/* --- CONTENU TEXTE --- */
.qt-project-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }

.project-meta {
    display: flex; justify-content: space-between;
    font-size: 0.8rem; color: #999; margin-bottom: 0.8rem;
    font-weight: 600; text-transform: uppercase;
}
.meta-loc { color: #fff; }

.qt-project-content h3 {
    font-size: 1.2rem; font-weight: 800; color: #fff;
    margin: 0 0 1.5rem 0; line-height: 1.4;
}

/* BOUTON LIEN */
.qt-link-btn {
    margin-top: auto; /* Pousse en bas */
    color: #F9943B;
    font-weight: 700; font-size: 0.9rem;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
    transition: gap 0.3s;
}

.qt-project-card:hover .qt-link-btn { gap: 15px; color: #fff; }

/* --- SECTION CTA FINAL (STYLE MOON) --- */
#qt-final-cta {
    background-color: #040201; /* Noir Quali */
    padding: 6rem 1rem;
    font-family: 'Onest', sans-serif;
    color: #fff;
    border-top: 1px solid #1f2937;
    position: relative;
    overflow: hidden;
    text-align: center;
}

#qt-final-cta .qt-container { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }

/* --- EFFETS MOON (HALOS) --- */
.qt-halo {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

.halo-orange {
    width: 400px; height: 400px;
    background: #F9943B;
    top: -100px; right: -100px;
}

.halo-white {
    width: 300px; height: 300px;
    background: rgba(255,255,255,0.1);
    bottom: -50px; left: -50px;
}

/* Fond Grille */
.cta-bg-map {
    position: absolute; inset: 0;
    background-image: radial-gradient(#222 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3; pointer-events: none; z-index: 1;
}

/* --- CONTENU --- */
.cta-content-wrapper { margin-bottom: 4rem; }

/* Tag Pulsant */
.qt-tag-pulse {
    display: inline-block; background: rgba(249, 148, 59, 0.15); color: #F9943B;
    padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem;
    border: 1px solid rgba(249, 148, 59, 0.3);
    animation: pulseOrange 2s infinite;
}

@keyframes pulseOrange {
    0% { box-shadow: 0 0 0 0 rgba(249, 148, 59, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(249, 148, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 148, 59, 0); }
}

/* Titre */
.moon-gradient-title {
    font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 1.5rem; color: #fff;
}

.cta-text { font-size: 1.2rem; color: #D1D5DB; max-width: 600px; margin: 0 auto 3rem auto; font-weight: 400; }

/* BOUTONS */
.cta-actions {
    display: flex; flex-direction: column; gap: 1rem;
    justify-content: center; align-items: center;
    margin-bottom: 3rem;
}
@media (min-width: 640px) { .cta-actions { flex-direction: row; gap: 2rem; } }

.btn-phone-big {
    background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2);
    padding: 1rem 2rem; border-radius: 12px; font-size: 1.3rem; font-weight: 800;
    text-decoration: none; display: flex; align-items: center; gap: 10px;
    backdrop-filter: blur(10px); transition: transform 0.3s, background 0.3s;
}
.btn-phone-big:hover { transform: scale(1.05); background: rgba(255,255,255,0.2); }

.btn-quote-big {
    background: #F9943B; color: #fff;
    padding: 1rem 2rem; border-radius: 12px;
    font-size: 1.1rem; font-weight: 800; text-transform: uppercase;
    text-decoration: none; transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 10px 30px rgba(249, 148, 59, 0.2);
}
.btn-quote-big:hover {
    transform: translateY(-3px); background: #fff; color: #F9943B;
    box-shadow: 0 15px 40px rgba(249, 148, 59, 0.4);
}

/* BADGES */
.cta-trust-badges {
    display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap;
    font-size: 0.9rem; font-weight: 600; color: #9CA3AF;
}

/* --- SEO LOCAL (LISTE VILLES) --- */
.qt-local-seo {
    border-top: 1px solid rgba(255,255,255,0.1); padding-top: 3rem;
    text-align: center;
}
.qt-local-seo h3 {
    font-size: 0.9rem; color: #F9943B; text-transform: uppercase; margin-bottom: 1.5rem; letter-spacing: 2px; font-weight: 800;
}

.city-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}

.city-list li {
    font-size: 0.85rem; color: #ccc;
    background: rgba(255,255,255,0.05); padding: 6px 14px; border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s; cursor: default;
}
.city-list li:hover { color: #fff; border-color: #F9943B; background: rgba(249, 148, 59, 0.1); }

    /* --- CONFIGURATION COULEURS QUALI TOITURE --- */
    :root {
        --qt-black: #040201;
        --qt-orange: #F9943B;
        --qt-gray: #f8fafc;
        --qt-border: #e2e8f0;
        --qt-text: #334155;
    }

/* =========================================
   11. HERO COUVERTURE (DARK ARTISAN PREMIUM)
   ========================================= */

/* --- CONFIGURATION HERO COUVERTURE --- */
#qt-couverture-hero {
    background-color: #151718; /* Ton Vert/Gris demandé */
    /* Ajout d'un dégradé radial subtil pour créer de la profondeur (effet spot) */
    background-image: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    padding: 160px 20px 120px 20px;
    font-family: 'Onest', sans-serif;
    color: #fff;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

#qt-couverture-hero .qt-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero-cov-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile d'abord */
    gap: 60px; /* Plus d'espace pour aérer */
    align-items: center;
}

/* --- TEXTE & CONTENU --- */
.hero-cov-content {
    position: relative;
    z-index: 2;
}

.cov-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #F9943B;
    background: rgba(249, 148, 59, 0.1); /* Fond léger pour le tag */
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(249, 148, 59, 0.2);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 25px;
}

.orange-line {
    width: 20px;
    height: 2px;
    background-color: #F9943B;
    border-radius: 2px;
}

#qt-couverture-hero h1 {
    font-weight: 900; /* Plus gras */
    line-height: 1.05;
    margin-bottom: 25px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.text-orange { 
    color: #F9943B;
    /* Petit effet de lumière sur le texte orange */
    text-shadow: 0 0 30px rgba(249, 148, 59, 0.3);
}

.hero-cov-desc {
    font-size: 1.15rem;
    color: #d1d5db; /* Gris plus clair pour meilleur contraste */
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 600px;
    font-weight: 400;
}

/* --- BOUTONS (Stylisés) --- */
.hero-cov-actions {
    display: flex;
    gap: 15px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.btn-solid-orange {
    background: #F9943B;
    color: #fff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #F9943B;
    box-shadow: 0 10px 20px rgba(249, 148, 59, 0.2);
}

.btn-solid-orange:hover {
    background: #fff;
    color: #F9943B;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(249, 148, 59, 0.3);
}

.btn-outline-white {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    color: #fff;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

/* --- TRUST INDICATORS (Style Badges) --- */
.cov-trust-row {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: #e2e8f0;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cov-trust-item {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px 12px;
    border-radius: 6px;
}

/* --- IMAGE (Avec Effet Glow Arrière) --- */
.hero-cov-image {
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative; /* Pour positionner le halo */
}

/* Le Halo lumineux derrière l'image */
.hero-cov-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(249, 148, 59, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 0;
    pointer-events: none;
}

.cover-img-fixed {
    width: 100%;
    height: 380px; /* Un peu plus grand */
    object-fit: cover;
    border-radius: 20px; /* Arrondis plus modernes */
    /* Ombre portée plus profonde pour le relief */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
}

.hero-cov-image:hover .cover-img-fixed {
    transform: scale(1.02); /* Petit zoom sympa au survol */
}

/* --- RESPONSIVE DESKTOP --- */
@media (min-width: 1024px) {
    .hero-cov-grid {
        grid-template-columns: 1.1fr 0.9fr; /* Ratio texte/image équilibré */
    }
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 991px) {
    #qt-couverture-hero {
        padding-top: 140px;
        text-align: center;
        background-position: center; /* Centre le spot lumineux */
    }

    .cov-tag {
        justify-content: center;
        margin: 0 auto 20px auto;
    }
    
    .hero-cov-desc {
        margin: 0 auto 35px auto;
        font-size: 1.05rem;
    }
    
    .hero-cov-actions {
        justify-content: center;
        flex-direction: column; /* Boutons l'un sous l'autre sur mobile */
        gap: 12px;
    }
    
    .btn-solid-orange, .btn-outline-white {
        width: 100%;
        justify-content: center;
    }
    
    .cov-trust-row {
        justify-content: center;
        border-top: none; /* Moins chargé sur mobile */
    }
    
    .hero-cov-image {
        margin-top: 40px;
    }
    
    .cover-img-fixed {
        height: 300px; /* Plus petit sur mobile */
    }
}

/* =========================================
   12. ÉTUDES DE CAS (DESIGN FINAL)
   ========================================= */

/* Variables locales pour les études de cas */
:root {
    --qt-black: #040201;
    --qt-orange: #F9943B;
    --qt-gray: #f8fafc;
    --qt-border: #e2e8f0;
    --qt-text: #334155;
}

/* 1. CONTENEUR PRINCIPAL */
.qt-case-study-box {
    padding: 60px 50px;
    max-width: 1100px;
    margin: 40px auto;
    border-radius: 24px;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); 
    font-family: 'Onest', sans-serif; 
    color: var(--qt-text); 
    line-height: 1.6; 
    border: 1px solid var(--qt-gray);
}

/* 2. TITRES */
.qt-case-title {
    font-size: 2.5rem; 
    font-weight: 800; 
    color: var(--qt-black); 
    margin: 0 0 15px 0; 
    letter-spacing: -1px; 
    line-height: 1.1;
}

.qt-case-h2 {
    color: var(--qt-black); 
    font-weight: 800; 
    margin: 40px 0 20px 0; 
    border-left: 4px solid var(--qt-orange); 
    padding-left: 15px;
}

/* 3. GRILLE DES CHIFFRES CLÉS */
.qt-data-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-bottom: 40px; 
    background: var(--qt-gray); 
    padding: 25px; 
    border-radius: 16px;
    border: 1px solid var(--qt-border);
}

.qt-data-item { text-align: center; }

.qt-data-val { 
    display: block; 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: var(--qt-orange); 
    line-height: 1.2; 
}

.qt-data-label { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--qt-black); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* 4. GALERIE PHOTO INTELLIGENTE */
.qt-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.qt-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    height: 250px;
    background: #eee;
}

.qt-gallery-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.qt-gallery-item:hover { transform: translateY(-3px); }
.qt-gallery-item:hover img { transform: scale(1.05); }

.qt-img-badge {
    position: absolute; 
    bottom: 10px; 
    left: 10px;
    background: rgba(4, 2, 1, 0.8); 
    color: #fff;
    padding: 4px 10px; 
    border-radius: 6px;
    font-size: 0.75rem; 
    font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* 5. BOUTON ACTION */
.qt-btn-action {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    background: var(--qt-orange); 
    color: #fff;
    padding: 15px 40px; 
    border-radius: 50px;
    font-weight: 800; 
    font-size: 1.1rem; 
    text-decoration: none;
    transition: all 0.3s ease; 
    box-shadow: 0 10px 20px rgba(249, 148, 59, 0.3);
}

.qt-btn-action:hover { 
    transform: scale(1.05); 
    background: var(--qt-black); 
}

/* 6. VERSION MOBILE */
@media (max-width: 768px) {
    .qt-case-study-box { 
        padding: 30px 15px; 
        border-radius: 0; 
        margin: 0; 
        box-shadow: none; 
        border: none; 
    }
    
    .qt-data-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    
    .qt-gallery-grid { 
        grid-template-columns: 1fr; 
    }
    
    .qt-gallery-item { 
        height: 280px; 
    }
    
    .qt-case-title {
        font-size: 1.8rem;
    }
}
/* FIN DU FICHIER CSS */

/* =========================================
   12. SECTION INTRO (BANDEAU 2)
   ========================================= */
#qt-couverture-intro {
    background-color: #ffffff;
    padding: 100px 20px;
    font-family: 'Onest', sans-serif;
    color: #334155;
    overflow: hidden;
}

#qt-couverture-intro .qt-container {
    max-width: 1200px;
    margin: 0 auto;
}

.intro-grid-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
}

/* COLONNE TEXTE */
.qt-tag-intro {
    font-size: 0.8rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 2px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

#qt-couverture-intro h2 {
    font-weight: 900;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 25px;
}

.intro-main-p {
    font-size: 1.2rem;
    color: #0f172a;
    line-height: 1.6;
    margin-bottom: 20px;
}

.intro-desc {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* GRILLE PROBLÈMES */
.problem-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.problem-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s;
}

.problem-item:hover {
    transform: translateY(-3px);
    border-color: #F9943B;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.prob-icon { font-size: 1.4rem; }
.problem-item strong { font-size: 0.95rem; color: #334155; font-weight: 700; }

/* BOUTON LIEN */
.btn-text-arrow {
    color: #F9943B;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s;
}

.btn-text-arrow:hover { gap: 15px; color: #0f172a; }

/* COLONNE IMAGE */
.intro-img-col {
    position: relative;
}

.img-frame-rotate {
    position: relative;
    border-radius: 24px;
    overflow: visible;
}

.img-frame-rotate img {
    width: 100%;
    max-width: 450px;
    height: auto;
    border-radius: 24px;
    box-shadow: 20px 20px 0px #F3F4F6; /* Ombre solide graphique */
    transform: rotate(2deg);
    transition: transform 0.5s;
}

.img-frame-rotate:hover img { transform: rotate(0deg); }

/* BADGE FLOTTANT */
.float-badge-exp {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #040201;
    color: #fff;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.big-num { font-size: 2.5rem; font-weight: 900; color: #F9943B; line-height: 1; }
.small-txt { font-size: 0.85rem; font-weight: 600; line-height: 1.3; text-transform: uppercase; }

/* RESPONSIVE */
@media (min-width: 992px) {
    .intro-grid-split { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    #qt-couverture-intro { padding: 60px 20px; }
    .intro-grid-split { grid-template-columns: 1fr; gap: 40px; }
    .img-frame-rotate img { transform: rotate(0); box-shadow: 10px 10px 0px #F3F4F6; }
    .float-badge-exp { bottom: -10px; left: 10px; padding: 15px 20px; }
}

/* --- CSS TECHNO GIANNI (ADAPTÉ QUALI TOITURE) --- */
    
    /* 1. CONTENEUR PRINCIPAL */
    .glb-box {
        padding: 60px 50px;
        max-width: 1100px;
        margin: 40px auto;
        border-radius: 24px;
        width: 100%;
        box-sizing: border-box;
        background: #ffffff; 
        box-shadow: 0 10px 40px rgba(0,0,0,0.08); 
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
        color: #334155; 
        line-height: 1.6; 
        border: 1px solid #f1f5f9;
    }

    /* 2. GRILLES */
    .glb-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    .glb-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    /* 3. CARTES (TYPE CARTE MOBILE) */
    .glb-card-inner {
        display: flex;
        flex-direction: column;
        align-items: center;    
        justify-content: flex-start;
        text-align: center;     
        height: 100%;
        width: 100%;
    }
    .glb-card-mobile-fix {
        background: #f8fafc; 
        border: 1px solid #e2e8f0; 
        border-radius: 16px; 
        padding: 25px 20px;
        transition: transform 0.3s;
    }
    .glb-card-mobile-fix:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        border-color: #F9943B;
    }

    /* 4. BOUTON ACTION (Style Gianni mais Orange) */
    .glb-btn {
        display: inline-flex; 
        align-items: center; 
        justify-content: center; 
        gap: 10px; 
        background: #F9943B; /* Orange Quali */
        color: #fff; 
        padding: 15px 40px; 
        border-radius: 50px; 
        font-weight: 800; 
        font-size: 1.1rem; 
        text-decoration: none; 
        transition: all 0.3s ease; 
        box-shadow: 0 10px 20px rgba(249, 148, 59, 0.3);
    }
    .glb-btn:hover { transform: scale(1.05); background: #000e1f; }

    /* 5. TABLEAUX (Scroll Mobile) */
    .glb-table-wrapper {
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 30px;
    }
    .glb-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
        min-width: 600px; /* Force le scroll */
    }
    .glb-table thead { background: #000e1f; color: #fff; }
    .glb-table th { padding: 15px; text-align: left; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; }
    .glb-table td { padding: 12px 15px; border-bottom: 1px solid #e2e8f0; }
    .glb-price { font-weight: 800; color: #F9943B; }
    
    /* 6. MOBILE RESPONSIVE */
    @media (max-width: 768px) {
        .glb-box { padding: 30px 15px; border-radius: 0; box-shadow: none; border: none; margin: 0; }
        .glb-title-main { font-size: 2rem !important; line-height: 1.2 !important; }
        .glb-grid, .glb-grid-2 { grid-template-columns: 1fr; gap: 20px; }
    }


/* ==========================================================================
   STYLE PAGE À PROPOS - QUALI TOITURE (V6 - Titre scindé Orange + Halo Noir)
   ========================================================================== */

.quali-about-box {
    max-width: 900px !important;
    margin: 0 auto !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('https://quali-toiture.fr/wp-content/uploads/2026/02/Couvreur-Quali-Toiture-Toulon-en-tenu-de-travail.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    padding: 60px 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    font-family: inherit !important;
    color: #334155 !important;
    position: relative !important;
}

.quali-about-box h1 {
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

/* Première partie en noir */
.title-part-black {
    color: #0f172a !important;
}

/* Deuxième partie en ORANGE avec le HALO NOIR */
.title-part-halo {
    color: #F9943B !important; 
    display: inline-block; 
    margin-top: 8px; 
    /* Halo noir renforcé pour faire ressortir l'orange */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.quali-about-box h2 {
    color: #1e293b !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    font-weight: 700 !important;
    border-left: 4px solid #F9943B !important;
    padding-left: 15px !important;
    text-transform: none !important;
}

.quali-about-box p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
}

.quali-engagements-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

.quali-engagement-card {
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 25px !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(249, 148, 59, 0.25) !important;
    border: 1px solid rgba(249, 148, 59, 0.15) !important;
    transition: all 0.3s ease !important;
}

.quali-engagement-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 0 25px rgba(249, 148, 59, 0.5) !important;
}

.quali-engagement-card h3 {
    font-size: 1.15rem !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

.quali-engagement-card p {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

.quali-about-cta-container {
    text-align: center !important;
    margin-top: 50px !important;
}

.quali-btn {
    display: inline-block !important;
    background-color: #F9943B !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: none !important;
    padding: 15px 35px !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-size: 1.1rem !important;
    box-shadow: 0 4px 15px rgba(249, 148, 59, 0.3) !important;
}

.quali-btn:hover {
    background-color: #e0812e !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .quali-about-box {
        padding: 40px 20px !important;
        border-radius: 12px !important;
    }
    .quali-engagements-grid {
        grid-template-columns: 1fr !important;
    }
}

/* --- RESET & VARIABLES QUALI TOITURE --- */
:root {
    --primary: #F9943B;
    --dark: #121212;
    --surface: #F8FAFB;
    --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.quali-contact-wrapper {
    background-color: var(--surface);
    color: var(--dark);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    line-height: 1.5;
}

.quali-contact-wrapper * { box-sizing: border-box; outline: none; }
.quali-contact-wrapper img { margin: 0; padding: 0; display: block; max-width: 100%; height: auto; }
.quali-contact-wrapper a { text-decoration: none; transition: color 0.3s; }
.quali-contact-wrapper h1, .quali-contact-wrapper h2, .quali-contact-wrapper h3, .quali-contact-wrapper p { margin-top: 0; }

/* --- SECTION SPLIT --- */
.split-section {
    position: relative;
    padding: 80px 20px 60px;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* CARTE ÉQUIPE */
.team-unified-card {
    position: relative; background-color: #121212; border-radius: 32px;
    overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; width: 100%;
}
.team-img-wrapper { width: 100%; position: relative; padding-top: 56.25%; overflow: hidden; }
.team-img-full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.team-unified-card:hover .team-img-full { transform: scale(1.03); }

.team-text-area { position: relative; padding: 40px; background: #121212; z-index: 1; }
.halo-orange-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 120%; height: 150%;
    background: radial-gradient(circle, rgba(249, 148, 59, 0.4) 0%, rgba(249, 148, 59, 0) 70%);
    filter: blur(60px); z-index: -1; pointer-events: none; opacity: 0.8;
}
.team-text-area h2 { margin-bottom: 10px; color: #fff; letter-spacing: -0.02em; position: relative; border: none; padding-left: 0; }
.team-text-area p { font-size: 1.2rem; color: rgba(255, 255, 255, 0.8); margin: 0; position: relative; }

/* INFOS */
.info-wrapper { display: flex; flex-direction: column; gap: 30px; width: 100%; }
.info-title-block h3 { font-size: 2.5rem; margin-bottom: 15px; line-height: 1.1; color: var(--dark); border: none; padding-left: 0; }
.info-title-block p { font-size: 1.2rem; color: #666; margin: 0; }
.widget-grid { display: flex; flex-direction: column; gap: 20px; }

.info-widget-clean {
    background: #fff; padding: 25px 35px; border-radius: 24px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04);
    display: flex; flex-direction: column; justify-content: center;
    color: var(--dark); transition: all 0.2s;
}
.info-widget-clean:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); border-color: rgba(249, 148, 59, 0.3); }
.w-label { font-size: 0.9rem; text-transform: uppercase; font-weight: 700; color: #999; margin-bottom: 6px; letter-spacing: 0.05em; display: block; }
.w-value { font-size: 1.25rem; font-weight: 700; color: var(--dark); display: block; }
a.info-widget-clean .w-value { color: var(--primary); }

/* FORMULAIRE */
.form-section { padding: 40px 20px 100px; z-index: 10; position: relative; }
.form-container {
    max-width: 1000px; margin: 0 auto;
    background: #FFFFFF; border-radius: 32px; padding: 60px;
    box-shadow: 0 20px 80px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.03);
}
.form-header { text-align: center; margin-bottom: 40px; }
.status-pill {
    display: inline-flex; align-items: center; gap: 8px; background: #FFF5EC; color: #E67E22;
    padding: 8px 16px; border-radius: 100px; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 20px;
}
.status-dot { width: 8px; height: 8px; background: #F9943B; border-radius: 50%; box-shadow: 0 0 8px #F9943B; }
.form-header h3 { font-size: 2.5rem; color: var(--dark); margin: 0; border: none; padding-left: 0; }

/* RESPONSIVE */
@media (max-width: 968px) {
    .split-section { grid-template-columns: 1fr; gap: 40px; }
    .form-container { padding: 30px; }
    .team-text-area { text-align: center; }
}

/* Ajustement du padding supérieur uniquement sur mobile (écrans < 1024px) */
    @media (max-width: 1023px) {
        #qt-services-hero .qt-content-wrapper {
            padding-top: 110px !important;
            padding-bottom: 0px !important;
        }
    }

/* =========================================
   SECTION LEAD MAGNET DARK (DIAGNOSTIC)
   ========================================= */
.lm-dark-section {
    background-color: #040201; 
    padding-top: 80px; 
    padding-bottom: 100px; 
    border-top: 1px solid rgba(255,255,255,0.05);
}

.lm-dark-container {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; /* Padding de base sur PC */
}

.lm-dark-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 60px; 
    align-items: center;
}

.lm-text-col h2 { 
    font-weight: 800; 
    line-height: 1.1; 
    margin-bottom: 25px; 
    color: #fff;
}

/* --- Iframe (Desktop) --- */
.lm-dark-crop {
    position: relative; 
    width: 100%; 
    max-width: 480px; 
    margin: 0 auto; 
    border-radius: 20px; 
    background: #131212; 
    border: 1px solid #333; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5); 
    overflow: hidden !important; 
    transition: height 0.3s ease;
}

#frame-lead-magnet-dark {
    border: none; 
    background: transparent; 
    display: block; 
    margin-bottom: -50px; 
    width: 100%;
}
/* --- AJUSTEMENTS MOBILE (VRAI FULL LARGEUR) --- */
@media (max-width: 992px) {
    .lm-dark-section {
        padding-top: 40px;
        padding-bottom: 0px; 
    }
    
    .lm-dark-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* 1. On enlève le padding du conteneur parent sur mobile */
    .lm-dark-container {
        padding: 0; 
    }

    /* 2. On remet du padding UNIQUEMENT sur le texte pour qu'il respire */
    .lm-text-col {
        padding: 0 20px;
    }

    /* 3. L'iframe prend 100% de l'espace, sans bordures ni arrondis */
    .lm-dark-crop {
        margin-top: 10px;
        max-width: 100%; 
        border-radius: 0; 
        border-left: none; 
        border-right: none;
    }
}

/* =========================================
   BLOC GUIDES EXPERTS - ISOLÉ ET SÉCURISÉ
   ========================================= */
.qt-uf-expert-section {
    padding: 80px 20px;
    background-color: #f8fafb;
    border-top: 1px solid #e2e8f0;
    font-family: inherit;
}

.qt-uf-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.qt-uf-header {
    text-align: center;
    margin-bottom: 40px;
}

.qt-uf-sur-titre {
    color: #F9943B;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 10px;
}

.qt-uf-header h2 {
    font-weight: 900;
    color: #0f172a;
    margin-top: 0;
}

/* Grille stricte : 2 colonnes forcées sur PC */
.qt-uf-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.qt-uf-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.qt-uf-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(249, 148, 59, 0.15);
    border-color: #F9943B;
}

.qt-uf-tag {
    display: inline-block;
    padding: 6px 12px;
    background: rgba(249, 148, 59, 0.1);
    color: #F9943B;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 50px;
    margin-bottom: 20px;
    align-self: flex-start;
}

.qt-uf-card h3 {
    font-weight: 800;
    color: #131212;
    margin-bottom: 15px;
    margin-top: 0;
}

.qt-uf-desc {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.qt-uf-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.qt-uf-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #0f172a;
    margin-bottom: 12px;
    font-weight: 600;
}

.qt-uf-list svg {
    flex-shrink: 0;
}

.qt-uf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    background-color: #0f172a;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    text-align: center;
}

.qt-uf-card:hover .qt-uf-btn {
    background-color: #F9943B;
    color: #ffffff;
}

/* Passage en 1 colonne stricte sur Mobile et petite Tablette */
@media (max-width: 900px) {
    .qt-uf-grid {
        grid-template-columns: 1fr;
    }
    .qt-uf-card {
        padding: 30px 20px;
    }
}

/* =========================================
   PORTFOLIO URGENCE QUALI TOITURE
   ========================================= */
.panhub-portfolio-section { 
    background-color: #050505; 
    padding: 6rem 1rem; 
    color: #fff; 
    border-top: 1px solid #1f2937; 
}

.panhub-portfolio-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.portfolio-header { 
    text-align: center; 
    margin-bottom: 4rem; 
}

.portfolio-tag { 
    color: #F9943B; 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    font-size: 0.85rem; 
    display: block; 
    margin-bottom: 0.5rem; 
}

.portfolio-header h2 { 
    font-weight: 900; 
    color: #fff; 
    margin: 0 0 1.5rem 0; 
}

.portfolio-separator { 
    width: 80px; 
    height: 4px; 
    background: linear-gradient(90deg, transparent, #F9943B, transparent); 
    margin: 0 auto; 
    border-radius: 2px; 
}

/* Grille Masonry pure CSS */
.masonry-grid { 
    column-count: 1; 
    column-gap: 2rem; 
}

@media (min-width: 768px) { 
    .masonry-grid { column-count: 2; } 
}

.masonry-item { 
    break-inside: avoid; 
    margin-bottom: 2rem; 
}

.portfolio-card {
    background-color: #131212;
    border: 1px solid #1f2937;
    border-radius: 1.5rem; 
    overflow: hidden; 
    position: relative; 
    transition: all 0.4s ease; 
    cursor: pointer;
}

.portfolio-card:hover { 
    border-color: #F9943B; 
    transform: translateY(-5px); 
    box-shadow: 0 15px 40px rgba(0,0,0,0.5); 
}

.card-image-wrapper { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
}

.card-image-wrapper.aspect-landscape { aspect-ratio: 16/9; }
.card-image-wrapper.aspect-portrait { aspect-ratio: 3/4; }

.card-image-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

.portfolio-card:hover .card-image-wrapper img { 
    transform: scale(1.08); 
}

.overlay-gradient { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 60%; 
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
    z-index: 1; 
    opacity: 0.8; 
}

.card-content { 
    padding: 1.5rem 2rem; 
    position: relative; 
    z-index: 2; 
    background-color: #111; 
    border-top: 1px solid #1f2937; 
}

/* Badges d'intervention */
.tech-badge { 
    display: inline-block; 
    padding: 4px 10px; 
    background-color: rgba(249, 148, 59, 0.15); 
    color: #F9943B; 
    font-size: 0.75rem; 
    font-weight: 800; 
    text-transform: uppercase; 
    border-radius: 4px; 
    margin-bottom: 0.75rem; 
}

.tech-badge.badge-blue { background-color: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.tech-badge.badge-red { background-color: rgba(239, 68, 68, 0.15); color: #ef4444; }
.tech-badge.badge-orange { background-color: rgba(249, 148, 59, 0.15); color: #F9943B; }

.card-content h3 { 
    font-size: 1.25rem; 
    font-weight: 700; 
    color: #fff; 
    margin: 0 0 0.5rem 0; 
}

.card-content p { 
    font-size: 0.95rem; 
    color: #9CA3AF; 
    margin: 0; 
}

.portfolio-card:hover .card-content { 
    background: linear-gradient(to bottom, #161616, #111); 
}

@media (max-width: 768px) {
    .trust-emergency-dark .reviews-header-block {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 5px; /* Ajout du padding droite et gauche */
    }

    .trust-emergency-dark .google-top-widget {
        justify-content: center;
        margin: 0 auto 15px auto;
    }

    .trust-emergency-dark .g-stars-row {
        justify-content: center;
    }

    .trust-emergency-dark .google-final-cta {
        text-align: center;
        display: flex;
        justify-content: center;
        width: 100%;
        margin-top: 20px;
        padding: 0 5px; /* Ajout du padding droite et gauche */
    }
}

/* forcer le fond des boutons orange pour le texte blanc */
.qt-btn-primary, 
.qt-btn-primary span,
.btn-v2, 
.btn-force-orange, 
.btn-force-primary {
    background-color: #C65A11 !important; 
    color: #FFFFFF !important;
    border-color: #C65A11 !important;
}

/* bouton d'urgence avec fond semi-transparent */
a.btn-v2[style*="background"] {
    background-color: #2b2b2b !important;
    color: #FFFFFF !important;
}

/* textes et labels orange */
.craft-label,
.highlight-orange {
    color: #C65A11 !important; 
}

/* textes verts (statut d'intervention) */
.moon-status-text.moon-text-green {
    color: #1E6B1E !important; 
}

/* textes gris sur les sections claires (doit être très foncé) */
.craft-section span, 
.craft-section div,
.moon-city-text, 
.moon-city-text strong,
.footer-bottom, 
#year {
    color: #F9943B !important; 
}

/* Gestion de la taille du titre H2 */
.craft-section h2 {
    font-size: 2.5rem !important; /* Tu peux modifier cette valeur (ex: 2rem, 3rem, ou 40px) */
}

/* Gestion de la taille du titre H2 sur Mobile */
@media (max-width: 768px) {
    .craft-section h2 {
        font-size: 1.5em !important;
    }
}

/* ajustement des cartes en verre et des halos lumineux pour le texte */
.moon-glass-card,
.moon-halo {
    color: #1a1a1a !important;
}

/* =========================================
   ÉTUDES DE CAS CHANTIER (DESIGN)
   ========================================= */

/* Variables locales pour les études de cas */
:root {
    --qt-black: #040201;
    --qt-orange: #F9943B;
    --qt-gray: #f8fafc;
    --qt-border: #e2e8f0;
    --qt-text: #334155;
}

/* 1. CONTENEUR PRINCIPAL */
.qt-case-study-box {
    padding: 60px 50px;
    max-width: 1100px;
    margin: 40px auto;
    border-radius: 24px;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); 
    font-family: 'Onest', sans-serif; 
    color: var(--qt-text); 
    line-height: 1.6; 
    border: 1px solid var(--qt-gray);
}

/* 2. TITRES */
.qt-case-title {
    font-size: 2.5rem; 
    font-weight: 800; 
    color: var(--qt-black); 
    margin: 0 0 15px 0; 
    letter-spacing: -1px; 
    line-height: 1.1;
}

.qt-case-h2 {
    color: var(--qt-black); 
    font-weight: 800; 
    margin: 40px 0 20px 0; 
    border-left: 4px solid var(--qt-orange); 
    padding-left: 15px;
}

/* 3. GRILLE DES CHIFFRES CLÉS */
.qt-data-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    margin-bottom: 40px; 
    background: var(--qt-gray); 
    padding: 25px; 
    border-radius: 16px;
    border: 1px solid var(--qt-border);
}

.qt-data-item { 
    text-align: center; 
}

.qt-data-val { 
    display: block; 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: var(--qt-orange); 
    line-height: 1.2; 
}

.qt-data-label { 
    font-size: 0.9rem; 
    font-weight: 600; 
    color: var(--qt-black); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* 4. GALERIE PHOTO INTELLIGENTE */
.qt-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-bottom: 30px;
}

.qt-gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    height: 250px;
    background: #eee;
}

.qt-gallery-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover; 
    transition: transform 0.5s ease;
}

.qt-gallery-item:hover { 
    transform: translateY(-3px); 
}

.qt-gallery-item:hover img { 
    transform: scale(1.05); 
}

.qt-img-badge {
    position: absolute; 
    bottom: 10px; 
    left: 10px;
    background: rgba(4, 2, 1, 0.8); 
    color: #fff;
    padding: 4px 10px; 
    border-radius: 6px;
    font-size: 0.75rem; 
    font-weight: 700;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* 5. BOUTON ACTION */
.qt-btn-action {
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px;
    background: var(--qt-orange); 
    color: #fff;
    padding: 15px 40px; 
    border-radius: 50px;
    font-weight: 800; 
    font-size: 1.1rem; 
    text-decoration: none;
    transition: all 0.3s ease; 
    box-shadow: 0 10px 20px rgba(249, 148, 59, 0.3);
}

.qt-btn-action:hover { 
    transform: scale(1.05); 
    background: var(--qt-black); 
    color: #ffffff;
}

/* 6. VERSION MOBILE */
@media (max-width: 768px) {
    .qt-case-study-box { 
        padding: 30px 15px; 
        border-radius: 0; 
        margin: 0; 
        box-shadow: none; 
        border: none; 
    }
    
    .qt-data-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
    }
    
    .qt-gallery-grid { 
        grid-template-columns: 1fr; 
    }
    
    .qt-gallery-item { 
        height: 280px; 
    }
    
    .qt-case-title {
        font-size: 1.8rem;
    }
}

/* =========================================
   SECTION PROTOCOLE URGENCE (DARK THEME)
   ========================================= */
#qt-process-urgence {
    background-color: #040201;
    color: #fff;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 6rem 1rem;
    position: relative;
    overflow: hidden;
    font-family: 'Onest', sans-serif;
}

#qt-process-urgence .qt-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* En-tête */
#qt-process-urgence .qt-section-header {
    text-align: center;
    margin-bottom: 5rem;
}

#qt-process-urgence .qt-tag {
    display: inline-block;
    background: rgba(249, 148, 59, 0.1);
    color: #F9943B;
    border: 1px solid rgba(249, 148, 59, 0.2);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

#qt-process-urgence h2 {
    font-weight: 900;
    color: #fff;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    line-height: 1.1;
}

#qt-process-urgence .qt-separator {
    width: 60px;
    height: 4px;
    background-color: #F9943B;
    margin: 0 auto 1.5rem auto;
    border-radius: 2px;
}

#qt-process-urgence .header-desc {
    color: #9ca3af;
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Ligne de progression */
#qt-process-urgence .timeline-wrapper {
    position: relative;
    padding: 20px 0;
    width: 100%;
    margin-bottom: 4rem;
}

#qt-process-urgence .timeline-line-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    z-index: 0;
}

#qt-process-urgence .timeline-line-bg {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    z-index: 1;
}

#qt-process-urgence .timeline-line-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: #F9943B;
    box-shadow: 0 0 15px rgba(249, 148, 59, 0.6);
    border-radius: 4px;
    z-index: 2;
    transition: height 0.1s linear;
}

/* Éléments de la Timeline (Inactifs par défaut) */
#qt-process-urgence .timeline-item {
    position: relative;
    width: 50%;
    margin-bottom: 3rem;
    z-index: 5;
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

#qt-process-urgence .timeline-item.left { left: 0; padding-right: 50px; text-align: right; }
#qt-process-urgence .timeline-item.right { left: 50%; padding-left: 50px; text-align: left; }

#qt-process-urgence .timeline-marker {
    position: absolute;
    top: 0;
    width: 50px;
    height: 50px;
    background-color: #040201;
    border: 3px solid #333;
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.4s ease;
}

#qt-process-urgence .timeline-item.left .timeline-marker { right: -25px; }
#qt-process-urgence .timeline-item.right .timeline-marker { left: -25px; }

#qt-process-urgence .timeline-content {
    background-color: #131212;
    border: 1px solid #333;
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
    text-align: left;
}

#qt-process-urgence .timeline-content h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

#qt-process-urgence .timeline-content p {
    font-size: 1rem;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0;
}

/* Flèches des cartes */
#qt-process-urgence .timeline-content::before {
    content: '';
    position: absolute;
    top: 15px;
    width: 0;
    height: 0;
    border-style: solid;
    transition: filter 0.3s ease;
}

#qt-process-urgence .timeline-item.left .timeline-content::before {
    right: -10px;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #131212;
    filter: drop-shadow(1px 0 0 #333);
}

#qt-process-urgence .timeline-item.right .timeline-content::before {
    left: -10px;
    border-width: 10px 10px 10px 0;
    border-color: transparent #131212 transparent transparent;
    filter: drop-shadow(-1px 0 0 #333);
}

/* --- ÉTATS ACTIFS (Gérés par le JS) --- */
#qt-process-urgence .timeline-item.active {
    opacity: 1;
}

#qt-process-urgence .timeline-item.active .timeline-marker {
    background-color: #F9943B;
    border-color: #F9943B;
    color: #fff;
    box-shadow: 0 0 20px rgba(249, 148, 59, 0.6);
    transform: scale(1.15);
}

#qt-process-urgence .timeline-item.active .timeline-content {
    border-color: #F9943B;
    box-shadow: 0 10px 25px rgba(249, 148, 59, 0.15);
}

#qt-process-urgence .timeline-item.left.active .timeline-content::before {
    filter: drop-shadow(1px 0 0 #F9943B);
}

#qt-process-urgence .timeline-item.right.active .timeline-content::before {
    filter: drop-shadow(-1px 0 0 #F9943B);
}

/* CTA Bas */
#qt-process-urgence .process-cta {
    text-align: center;
    margin-top: 2rem;
}

#qt-process-urgence .process-cta p {
    margin-bottom: 20px;
    color: #fff;
    font-weight: 600;
}

#qt-process-urgence .qt-btn-process {
    background-color: #F9943B;
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}

#qt-process-urgence .qt-btn-process:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(249, 148, 59, 0.4);
}

/* Responsive Mobile */
@media (max-width: 768px) {
    #qt-process-urgence .timeline-line-container { left: 20px; transform: translateX(0); }
    #qt-process-urgence .timeline-item { width: 100%; left: 0 !important; padding-left: 60px !important; padding-right: 0 !important; text-align: left !important; }
    #qt-process-urgence .timeline-item.left .timeline-marker, 
    #qt-process-urgence .timeline-item.right .timeline-marker { left: -5px !important; right: auto !important; }
    
    #qt-process-urgence .timeline-item.left .timeline-content::before,
    #qt-process-urgence .timeline-item.right .timeline-content::before {
        left: -10px !important;
        right: auto !important;
        border-width: 10px 10px 10px 0 !important;
        border-color: transparent #131212 transparent transparent !important;
        filter: drop-shadow(-1px 0 0 #333) !important;
    }
    #qt-process-urgence .timeline-item.active .timeline-content::before {
        filter: drop-shadow(-1px 0 0 #F9943B) !important;
    }
}

/* =========================================
   BANDEAU SERVICES DÉFILANT (CARROUSEL) - DARK
   ========================================= */
.services-marquee-section {
    background-color: #040201; /* Fond Noir Quali Toiture */
    padding: 80px 0; 
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05); /* Séparation propre */
}

/* En-tête centré */
.services-header-centered {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px auto;
    padding: 0 20px;
}

/* Style du badge sur fond sombre */
.services-header-centered .badge-apple {
    display: inline-block;
    margin-bottom: 15px;
    background: rgba(249, 148, 59, 0.1);
    color: #F9943B;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.services-header-centered .title-apple {
    font-weight: 900;
    color: #ffffff; /* Titre en blanc */
    margin-bottom: 20px;
    margin-top: 0;
}

/* Dégradé adapté au fond noir (Blanc -> Orange -> Blanc) */
.services-header-centered .gradient-apple {
    background: linear-gradient(90deg, #ffffff 0%, #F9943B 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineText 4s linear infinite;
}

.services-header-centered .services-description {
    font-size: 1.15rem;
    color: #9ca3af; /* Texte gris clair lisible */
    line-height: 1.6;
    margin: 0;
}

/* Le conteneur du défilement */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
}

/* La piste qui bouge */
.marquee-track {
    display: flex;
    gap: 25px;
    width: max-content;
    animation: scroll-marquee 50s linear infinite;
    padding: 10px 0;
}

.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-group {
    display: flex;
    gap: 25px;
    width: max-content;
}

/* Cartes (Ajustement des bordures pour le Dark Mode) */
.marquee-card {
    width: 320px; 
    height: 380px; 
    flex-shrink: 0; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Bordure adaptée au fond sombre */
}

@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12.5px)); } 
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .services-marquee-section { padding: 50px 0; }
    .services-header-centered .services-description { font-size: 1rem; }
    .marquee-card { width: 280px; height: 340px; }
    .marquee-track { gap: 15px; animation-duration: 40s; }
    .marquee-group { gap: 15px; }
    @keyframes scroll-marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 7.5px)); } 
    }
}
@media (max-width: 768px) {
    body .footer-list a[href*="mentions-legales"],
    body .footer-list a[href*="mentions-legales"]:visited,
    body .footer-list a[href*="mentions-legales"]:active {
        color: #a1a1a6 !important;
        -webkit-text-fill-color: #a1a1a6 !important;
        text-decoration: none !important;
    }
}
/* Couleur du texte classique (uniquement dans la politique de cookies) */
#cmplz-document, 
#cmplz-document p, 
#cmplz-document li, 
#cmplz-document span,
#cmplz-document div {
    color: #1e293b !important;
}

/* Titres en orange (uniquement dans la politique de cookies) */
#cmplz-document h1, 
#cmplz-document h2, 
#cmplz-document h3, 
#cmplz-document h4,
#cmplz-document h5,
#cmplz-document h6 {
    color: #F9943B !important;
}

.quali-about-box {
    margin-top: 150px !important;
}

/* Ta correction existante */
@media (max-width: 768px) {
    .quali-about-box {
        margin-top: 120px !important;
    }
}