/* ============================================================
   STYLE GLOBAL - Bro's Perfs
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}
li{list-style:none}

/* ---------------- HEADER ---------------- */
nav{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;width:100%;min-height:110px;padding:12px 4%;transition:top .45s ease,background .3s ease;z-index:100;background:linear-gradient(to bottom,rgba(0,0,0,.82),rgba(0,0,0,0))}
nav.scrolled{background:rgba(0,0,0,.92);backdrop-filter:blur(10px)}
#logo{height:78px;width:auto;max-width:210px;object-fit:contain;transition:transform .3s ease}
#logo:hover{transform:scale(1.04)}
nav ul{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:nowrap;max-width:none;padding:0;margin:0}
nav li{white-space:nowrap}
nav li a{color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;letter-spacing:.6px;padding:8px 3px;position:relative;transition:color .3s ease}
nav li a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:#F66102;transition:width .3s ease}
nav li a:hover,nav li a.actif{color:#F66102;text-shadow:0 0 12px rgba(246,97,2,.7)}
nav li a:hover::after,nav li a.actif::after{width:100%}
#icons{display:none}
#menu-toggle{display:none;background:none;border:0;color:#F66102;font-size:30px;line-height:1;cursor:pointer;padding:8px}

/* ---------------- BANNIÈRES ---------------- */
.page-banner{position:relative;padding:190px 20px 70px;text-align:center;background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),radial-gradient(circle at center,#222 0%,#080808 60%,#000 100%);border-bottom:2px solid #F66102}
.page-banner h1{color:#fff;font-size:2.6rem;letter-spacing:3px;text-shadow:0 0 15px rgba(246,97,2,.7)}
.page-banner h1 span{color:#F66102}.page-banner p{color:#ccc;max-width:700px;margin:20px auto 0;font-size:1.05rem;line-height:1.6}

/* ---------------- HERO ---------------- */
#hero{position:relative;width:100%;min-height:100vh;overflow:hidden;padding-bottom:60px;background:#050505}
.background{position:absolute;inset:0;background:url('../img/A5Stage1TCU.jpg');background-size:cover;background-position:center;filter:brightness(.45);opacity:.35;z-index:0}
canvas{position:absolute;inset:0;width:100%;height:100%}
#particles{z-index:2;pointer-events:none}#lightning{z-index:4}.smoke{z-index:3}.flash{z-index:5}

/* ---------------- CARTES ACCUEIL ---------------- */
.realisations{padding:20px 20px 70px}
.galerie{max-width:1200px;margin:35px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:stretch}
.card{width:100%;height:430px;perspective:1000px;border-radius:20px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-7px);box-shadow:0 0 30px rgba(246,97,2,.45)}
.card-inner{width:100%;height:100%;position:relative;transition:.8s;transform-style:preserve-3d}
.card-front,.card-back{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:20px}
.card-front img{width:100%;height:100%;object-fit:cover;display:block}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:25px;background:linear-gradient(to bottom,rgba(0,0,0,.03) 20%,rgba(0,0,0,.8) 70%,rgba(0,0,0,.95) 100%);color:#fff}
.overlay h3{font-size:1.45rem;color:#fff;text-shadow:0 2px 8px #000;margin-bottom:5px}.overlay p{color:#f2f2f2;font-weight:600;text-shadow:0 2px 8px #000;margin-bottom:16px}
.card-back{transform:rotateY(180deg);background:linear-gradient(145deg,#171717,#080808);border:2px solid #F66102;padding:28px;color:#fff;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}
.card-back h3{color:#F66102;font-size:1.35rem;margin-bottom:15px}.card-back p{color:#ddd;line-height:1.55;margin-bottom:14px}.card-back ul{display:block;margin:0;padding:0}.card-back li{list-style:disc;margin:7px 0 7px 18px;color:#ddd}
.card button{position:static;transform:none;font-weight:700}.btn-info{margin-top:auto;padding:11px 16px;border:0;border-radius:10px;background:#F66102;color:#111;cursor:pointer;font-weight:700}
.card-front .btn-info{align-self:flex-start;margin-top:0}
.card.flip .card-inner{transform:rotateY(180deg)}

/* ---------------- SECTIONS ---------------- */
.section-title{text-align:center;margin:60px 0 20px;padding:0 20px}.section-title h2{color:#F66102;font-size:2.1rem;letter-spacing:2px}.section-title p{color:#ccc;margin-top:10px;line-height:1.5}
.texte{display:flex;justify-content:center;padding:20px}.qui{color:#fff;text-align:center;font-size:1.5rem;max-width:1000px;line-height:1.6}
.reseaux{display:flex;justify-content:center;align-items:center;gap:25px;margin:40px 0}.reseaux a{width:60px;height:60px;display:flex;justify-content:center;align-items:center;text-decoration:none;border:2px solid #ff7300;border-radius:50%;color:#ff7300;font-size:28px;transition:.3s}.reseaux a:hover{background:#ff7300;color:#111;transform:translateY(-6px);box-shadow:0 0 25px rgba(255,115,0,.7)}
.btn-cta{display:inline-block;margin:15px 5px 0;padding:16px 36px;background:linear-gradient(135deg,#ff7300,#ff9800);color:#fff;font-weight:700;text-decoration:none;border:0;border-radius:50px;cursor:pointer;font-size:1rem;box-shadow:0 8px 20px rgba(255,123,0,.35);transition:.3s ease}.btn-cta:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(255,123,0,.55)}.btn-cta.outline{background:transparent;border:2px solid #F66102;color:#F66102;box-shadow:none}.btn-cta.outline:hover{background:#F66102;color:#000}

/* ---------------- PRESTATIONS ---------------- */
.prestations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:40px auto;padding:0 30px 60px}.prestation-card{background:#111;border:2px solid #2a2a2a;border-radius:20px;padding:30px;transition:.35s}.prestation-card:hover{border-color:#ff7b00;transform:translateY(-6px);box-shadow:0 0 25px rgba(255,123,0,.35)}.prestation-card i{color:#F66102;font-size:1.8rem;margin-bottom:15px}.prestation-card h3{color:#ff7b00;margin-bottom:12px;font-size:1.25rem}.prestation-card p{color:#ccc;font-size:.95rem;line-height:1.6}.prestation-card ul{display:block;margin-top:15px}.prestation-card ul li{color:#fff;font-size:.9rem;padding:4px 0 4px 22px;position:relative}.prestation-card ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#F66102;position:absolute;left:0}

/* ---------------- FOOTER ---------------- */
footer{text-align:center;padding:30px 20px 50px;color:#666;font-size:.85rem}footer a{color:#F66102;text-decoration:none}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:1100px){nav{padding:12px 2.5%}nav ul{gap:12px}nav li a{font-size:.82rem}#logo{height:70px}}
@media(max-width:800px){
    nav{min-height:90px;height:90px;padding:8px 18px;background:rgba(0,0,0,.9)}
    #logo{height:72px;max-width:190px}
    #icons{display:block}
    #menu-toggle{display:block}
    nav ul{position:fixed;left:0;top:90px;width:100%;height:calc(100vh - 90px);padding:35px 20px 50px;background:rgba(0,0,0,.97);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:18px;transform:translateX(-100%);transition:transform .3s ease;overflow-y:auto}
    nav.active ul{transform:translateX(0)}
    nav li a{font-size:1.05rem;padding:8px 4px}
    .page-banner{padding:145px 20px 55px}.page-banner h1{font-size:1.9rem}
    .galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card{height:300px}.overlay{padding:17px}.overlay h3{font-size:1.1rem}.overlay p{font-size:.85rem}.btn-info{padding:9px 12px;font-size:.78rem}.card-back{padding:18px}.card-back h3{font-size:1rem}.card-back p,.card-back li{font-size:.8rem}
}
@media(max-width:560px){
    .galerie{grid-template-columns:1fr;max-width:390px}.card{height:390px}.overlay h3{font-size:1.3rem}.overlay p{font-size:.95rem}.btn-info{font-size:.85rem;padding:11px 15px}
    .btn-cta{width:calc(100% - 20px);max-width:360px;text-align:center}.prestations-grid{grid-template-columns:1fr;padding:0 18px 45px}
}


/* ---------------- SEO LOCAL / TITRE HERO ---------------- */
.hero-seo-title{position:relative;z-index:6;max-width:1050px;margin:145px auto 0;padding:0 20px;text-align:center;color:#fff;font-size:2.25rem;line-height:1.2;letter-spacing:1px;text-shadow:0 0 18px rgba(246,97,2,.55)}
#hero .hero-seo-title + .slider-1{margin-top:28px}
.seo-local{padding:20px 20px 10px}
.seo-local .section-title{max-width:950px;margin-left:auto;margin-right:auto}
@media(max-width:800px){
    .hero-seo-title{margin-top:115px;font-size:1.65rem}
    #hero .hero-seo-title + .slider-1{margin-top:22px}
}