/* PASSE-PARTOUT - Premium global overrides */
:root{
  --pp-or:#E8B430;
  --pp-or-2:#F7D97A;
  --pp-deep:#090b0e;
  --pp-panel:#111418;
  --pp-panel-2:#171b21;
  --pp-line:rgba(255,255,255,.08);
  --pp-shadow:0 18px 50px rgba(0,0,0,.28);
  --pp-shadow-2:0 28px 80px rgba(0,0,0,.35);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(232,180,48,.07), transparent 60%),
    linear-gradient(180deg,#0b0d10,#090b0e 30%,#08090b 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:40px 40px;
  opacity:.12;
  z-index:0;
}
.entete,.hero,main,.appel-final,.pied,.barre-mobile,.cookies,.bandeau{position:relative;z-index:1}

/* Top navigation */
.entete{
  background:rgba(8,10,13,.82) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.18);
}
.nav a{position:relative}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,transparent,var(--pp-or),transparent);
  transform:scaleX(0);transform-origin:center;transition:transform .25s ease;
}
.nav a:hover::after,.nav a.actif::after{transform:scaleX(1)}

/* Buttons */
.btn{box-shadow:var(--pp-shadow);position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.12) 48%,transparent 100%);
  transform:translateX(-120%);transition:transform .8s ease;pointer-events:none;
}
.btn:hover::after{transform:translateX(120%)}
.btn-fantome{background:rgba(255,255,255,.02) !important}
.btn-fantome:hover{background:rgba(232,180,48,.05) !important}

/* Hero blocks */
.hero,.p-hero{
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.hero::after,.p-hero::after{
  content:"";
  position:absolute;inset:auto -10% -120px auto;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,180,48,.18),transparent 70%);filter:blur(20px);pointer-events:none;z-index:0;
}
.hero .conteneur,.p-hero .conteneur{position:relative;z-index:1}
.hero-ville{backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.avis-hero,.urgence,.premium-pill,.signature-v4-copy,.signature-v4-steps article,.artisan-photo,.artisan-texte,.photo-tile,.carte-service,.etape,.faq-item,.contact-carte,.carte-prix,.zone-bloc,.encart-conseil,.encart-assurance,.devis-bloc,.appel-final .conteneur,.pied .pied-grille > div{
  box-shadow:var(--pp-shadow);
}

/* Cards / sections */
.photo-showcase-grid,.services-grille,.etapes,.grille-assurance{gap:20px !important}
.photo-tile,.carte-service,.etape,.faq-item,.zone-bloc,.encart-conseil,.encart-assurance,.devis-bloc,.contact-carte,.carte-prix{
  background:linear-gradient(180deg,rgba(23,27,33,.94),rgba(15,18,22,.98)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-top-color:rgba(232,180,48,.28) !important;
  border-radius:18px !important;
  overflow:hidden;
}
.carte-service:hover,.photo-tile:hover,.etape:hover,.faq-item:hover{transform:translateY(-4px)}
.carte-image{border-bottom:1px solid rgba(255,255,255,.07) !important}
.carte-image img,.photo-tile img{filter:saturate(1.03) contrast(1.02)}
.carte-tete,.artisan-texte,.signature-v4-copy{position:relative}
.carte-tete::before,.signature-v4-copy::before{
  content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,180,48,.45),transparent);opacity:.9;
}
.carte-detail,.carte-devis,.signature-v4-link{position:relative;overflow:hidden}
.carte-detail::after,.carte-devis::after,.signature-v4-link::after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.08) 48%,transparent 100%);
  transform:translateX(-120%);transition:transform .75s ease;pointer-events:none;
}
.carte-detail:hover::after,.carte-devis:hover::after,.signature-v4-link:hover::after{transform:translateX(120%)}

/* Signature / artisan */
.signature-v4-copy,.signature-v4-steps article,.artisan-photo,.artisan-texte{border-radius:22px !important;border:1px solid rgba(255,255,255,.08) !important}
.signature-v4-copy{background:linear-gradient(180deg,rgba(17,21,27,.96),rgba(12,15,19,.98)) !important}
.signature-v4-steps article{background:linear-gradient(180deg,rgba(19,23,29,.95),rgba(12,15,19,.98)) !important}
.artisan-photo{overflow:hidden}
.artisan-photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.artisan-points li{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);padding:10px 12px;border-radius:14px}

/* Footer and final CTA */
.appel-final .conteneur{
  background:linear-gradient(180deg,rgba(16,19,24,.96),rgba(10,12,16,.99));
  border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(232,180,48,.28);
  border-radius:24px;
  padding:30px 22px;
}
.pied{background:linear-gradient(180deg,#090b0d,#07080a) !important;border-top:1px solid rgba(255,255,255,.07) !important}
.pied .pied-grille > div{
  background:linear-gradient(180deg,rgba(17,20,24,.96),rgba(10,12,16,.99));
  padding:20px;border-radius:18px;border:1px solid rgba(255,255,255,.07);
}
.pied-bas{border-top-color:rgba(255,255,255,.08) !important}

/* Mobile call bar */
.barre-mobile{
  position:fixed !important;left:10px !important;right:10px !important;bottom:10px !important;
  border:1px solid rgba(255,255,255,.09) !important;border-radius:18px !important;
  background:rgba(8,10,13,.92) !important;backdrop-filter:blur(14px);
  box-shadow:var(--pp-shadow-2) !important;
}
.barre-mobile .btn{margin:0;box-shadow:none}
@media (min-width:720px){
  .barre-mobile{display:grid !important;max-width:460px !important;margin:0 auto !important}
}

/* Generic page hero visuals */
.p-hero{position:relative;padding:58px 0 !important;background:linear-gradient(180deg,#0d1014,#090b0e) !important}
.p-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-size:cover !important;background-position:center right !important;background-repeat:no-repeat !important;
}
.page-ouverture-de-porte .p-hero::before,
.page-changement-de-serrure .p-hero::before,
.page-tarifs .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.88) 54%,rgba(8,10,13,.40) 100%),url('https://images.pexels.com/photos/17325288/pexels-photo-17325288/free-photo-of-keys-in-open-door.jpeg?auto=compress&dpr=1&h=900&w=1500');
}
.page-porte-blindee .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.88) 54%,rgba(8,10,13,.36) 100%),url('https://images.pexels.com/photos/5599753/pexels-photo-5599753.jpeg?auto=compress&dpr=1&h=900&w=1500');
}
.page-apres-effraction .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.88) 54%,rgba(8,10,13,.40) 100%),url('https://images.unsplash.com/photo-1710518077503-2ccc1038b39b?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=75&w=1500');
}
.page-interphone-videosurveillance .p-hero::before,
.page-contact .p-hero::before,
.page-merci .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.88) 54%,rgba(8,10,13,.38) 100%),url('https://images.pexels.com/photos/6682880/pexels-photo-6682880.jpeg?auto=compress&dpr=1&h=900&w=1500');
}
.page-volet-roulant-rideau-metallique .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.88) 54%,rgba(8,10,13,.38) 100%),url('https://images.unsplash.com/photo-1558711756-e9046ea0a514?auto=format&fit=crop&fm=jpg&ixlib=rb-4.1.0&q=75&w=1500');
}
body[class*="page-serrurier-"] .p-hero::before,
.page-espace .p-hero::before,
.page-mentions-legales .p-hero::before{
  background-image:linear-gradient(90deg,rgba(8,10,13,.98) 0%,rgba(8,10,13,.89) 54%,rgba(8,10,13,.38) 100%),url('https://images.pexels.com/photos/31656146/pexels-photo-31656146.jpeg?auto=compress&dpr=1&h=900&w=1500');
}

/* Responsive */
@media (min-width:960px){
  .services-grille{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .photo-showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:719px){
  .appell-final .conteneur{padding:22px 16px}
  .pied .pied-grille > div{padding:16px}
}