body{background-color: #000000;color:#eee;font-family:sans-serif;margin:0}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{background-color: #000000;position:sticky;top:0}
.header-inner{display:flex;justify-content:space-between;align-items:center}
.brand{color:#fff;text-decoration:none;font-weight:bold}
.nav{display:flex;gap:16px}
.nav a{color:#aaa;text-decoration:none}
.btn{padding:10px 16px;border-radius:8px;text-decoration:none}
.btn.gradient{background-color: #000000;color:#fff}
.btn.ghost{border:1px solid #444;color:#fff}
.hero h1{font-size:42px}
.section-head h2{font-size:28px;margin:12px 0}
.placeholder{background-color: #000000;border-radius:12px;border:1px solid #2a2a3a;position:relative}
.ph-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:14px}
/* Vidéos */
.long-video{margin:0 auto 24px;aspect-ratio:16/9;max-width:46vw}
.short-videos-row{display:flex;gap:16px;justify-content:center}
.short-video{aspect-ratio:9/16;flex:1;max-width:280px}
/* Miniatures */
.grid-miniatures{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.thumb{height:180px}
/* Services */
.grid-services{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.card{background-color: #000000;border-radius:12px;padding:16px;color:#ccc}
/* About */
.about-text{max-width:700px;color:#bbb}
/* Contact */
.contact-options{display:flex;gap:16px;flex-wrap:wrap}
/* Footer */
.site-footer{padding:20px;background-color: #000000;margin-top:40px;color:#777;text-align:center}
/* Responsive */
@media(max-width:768px){
  .long-video{max-width:100%}
  .short-videos-row{flex-direction:column;align-items:center}
  .short-video{max-width:100%;width:100%}
  .grid-miniatures,.grid-services{grid-template-columns:1fr}
}


/* === CTA centré dans le header === */
.center-cta{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3; /* au-dessus de l'overlay (z-index:1) et du fond */
  pointer-events:none; /* éviter d'empêcher les clics sur la nav */

  
  

  flex-direction: column;
  gap: 4px;
  position: relative;
  top: -40px;}
.center-cta .btn{
  pointer-events:auto; /* réactiver le clic sur le bouton */
}
/* S'assurer que la barre du haut reste cliquable et par-dessus le fond */
.header-inner{
  position:relative;
  z-index:3;
}


/* Centrer le titre Montage Vidéo */
.center-title {
    text-align: center;
    width: 100%;
}

/* Donner aux cartes d'offres la même taille que les miniatures */
.grid-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.grid-services .card {
    width: 250px; /* Même taille que les miniatures */
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    background-color: #000000;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.grid-services .card:hover {
    transform: scale(1.05);
}


/* Image floutée du header */
header {
    background: url('header_background_final.png') no-repeat center center/cover;
}


/* Override uniquement le fond du header, sans toucher au reste */



/* Image du header mise à jour */
header.site-header {
    background-image: url('495072314_3036144219881742_4760721121982401160_n.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/* ================= PREMIUM THEME ================= */

/* Fond global du site */
body {
    background-color: #000000 !important;
    color: #e4e4e4;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
}

/* Titres premium */
h1, h2, h3, h4 {
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Sections premium avec légère transparence et glow */
section {
    backdrop-
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(31, 111, 235, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
    margin: 20px auto;
}

/* Boutons premium */
.btn, .gradient {
    background-color: #000000;
    color: #fff !important;
    padding: 12px 28px;
    font-weight: bold;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.5);
    transition: all 0.3s ease-in-out;
}

.btn:hover, .gradient:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 24px rgba(31, 111, 235, 0.7);
}

/* Cartes des offres et miniatures */
.grid-services .card,
.grid-miniatures .card,
.grid-videos .card {
    backdrop-
    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(31, 111, 235, 0.35);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.grid-services .card:hover,
.grid-miniatures .card:hover,
.grid-videos .card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 6px 28px rgba(108, 99, 255, 0.6);
}

/* Titres des packs */
.grid-services .card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/* Navigation haut de page */
nav a {
    color: #fff !important;
    font-weight: 500;
    margin: 0 12px;
    transition: color 0.3s;
}

nav a:hover {
    color: #FFD700 !important;
}

/* Header : garder l'image du header mais ajouter un overlay doux */
header.site-header {
    position: relative;
    background-image: url('495072314_3036144219881742_4760721121982401160_n.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

header.site-header::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-
    z-index: 1;
}

header .header-inner {
    position: relative;
    z-index: 2;
}

/* --------- PREMIUM HEADER UPDATE --------- */
header.site-header {
    background-image: url('header_premium_black.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

header.site-header nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 30px !important;
}

header.site-header nav ul {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
}

header.site-header nav ul li a {
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: color 0.3s ease-in-out !important;
}

header.site-header nav ul li a:hover {
    color: #FFD700 !important;
}

header.site-header .cta-button {
    background-color: #000000 !important;
    color: white !important;
    padding: 12px 28px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease-in-out !important;
}

header.site-header .cta-button:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 0 20px rgba(31,111,235,0.7) !important;
}
/* --------- END PREMIUM HEADER UPDATE --------- */

/* --------- PREMIUM BACKGROUND UPDATE --------- */
body {
    background-color: #000000 !important;
    color: #fff !important;
}
section, .section, .container {
    background-color: transparent !important;
}
/* --------- END BACKGROUND UPDATE --------- */

/* --------- PREMIUM BACKGROUND FIX --------- */
body {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}
section, .section, .container {
    background-color: transparent !important;
}
/* --------- END PREMIUM BACKGROUND FIX --------- */


/* --- Boutons blancs avec glow premium --- */

button, .btn, input[type="button"], input[type="submit"] {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
button:hover, .btn:hover, input[type="button"]:hover, input[type="submit"]:hover {
    box-shadow: 0 0 24px rgba(255, 255, 255, 1);
    transform: scale(1.05);
}



/* ===== Vizo Creation insertion (generated) ===== */
.vizo-creation-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 8px 0 24px;
  z-index: 5;
}

.vizo-divider {
  width: min(92%, 1100px);
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 12px rgba(255,255,255,0.35);
  border-radius: 2px;
}

.vizo-creation-text {
  font-family: "Poppins", "Montserrat", "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: clamp(22px, 2.7vw, 36px);
  color: #1e4822;
  text-align: center;
  line-height: 1.1;
}

/* Reposition hero/leader image higher to leave room under the horizontal line */
header.site-header {
  background-position: center 30%;
}

header.site-header img, .site-header .header-image, .site-header .hero img {
  transform: translateY(-40px);
}



/* ===== Vizo Creation Title Override ===== */


header.site-header img,
.site-header .header-image,
.site-header .hero img {
  transform: translateY(-60px); /* On remonte un peu l'image du leader */
}



/* ===== Nouveau style pour Vizo Creation ===== */






/* On remonte l'image du leader */
header.site-header img,
.site-header .header-image,
.site-header .hero img {
    transform: translateY(-50px);
}


/* === Vizo Creation Hero Section === */






/* === FIXED HERO STYLES === */



/* Spacing for other sections */
.services, .about, .portfolio, .pricing, .contact, section{ margin-top:250px !important; padding-top:80px !important; }

/* === POSITIONNEMENT FINAL HERO === */



/* Décaler le reste des sections */
.services, .about, .portfolio, .pricing, .contact, section {
    margin-top: 300px !important;
    padding-top: 80px !important;
}

/* SAFETY HERO RULES - injected */
.hero-content{margin-top:345px !important;}
.hero-title{color:#FFFFFF !important; text-shadow:none !important;}
.hero-subtitle{color:#E0E0E0 !important;}
.services, .about, .portfolio, .pricing, .contact, section{margin-top:300px !important; padding-top:80px !important;}


.center-cta a{ pointer-events:auto; }


.vizo-title {
  transform: translateY(-40%);

  font-size: 36px;
  font-weight: 700;
  text-align: center;
}


/* User-requested header image replacement and cleanup */
#vizo-hero-overlay { display: none !important; }
.center-cta { display: none !important; }
.vizo-title { display: none !important; }
.site-header { background-size: cover !important; background-position: center !important; }
/* Ensure responsive display for any inline inserted img */
#reader, .header-image, .reader-img { display: none !important; }



/* === CUSTOM PATCH VIZO === */
/* Rendre le header noir et supprimer tout son contenu */
header.site-header {
    background: #000 !important;
    background-image: none !important;
}

/* Masquer tout le contenu du header */
header.site-header * {
    display: none !important;
}
/* === END PATCH === */



/* === CUSTOM PATCH VIZO SPACING & STYLE === */
/* Réduction de l'espacement entre les sections */
section, .section {
    margin: 40px 0 !important;
    padding: 40px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
/* === END PATCH === */



/* === CUSTOM PATCH VIZO FINAL SPACING === */
.services, .about, .portfolio, .pricing, .contact, section {
    margin-top: 60px !important;  /* Réduction drastique */
    padding-top: 30px !important; /* Plus compact */
}

.hero-content {
    margin-top: 80px !important;  /* Centrage harmonieux */
}
/* === END PATCH === */



/* === CUSTOM PATCH VIZO CENTER SECTIONS === */
#miniatures, .miniatures,
#offres, .offers,
#why-vizo, .why-vizo {
    width: 100%;
    max-width: 1200px;  /* Largeur maximale pour un rendu propre */
    margin: 0 auto !important; /* Centre la section */
    text-align: center !important; /* Centre le contenu interne */
    display: block;
    justify-content: center;
    align-items: center;
}
/* === END PATCH === */



/* === CUSTOM PATCH VIZO CENTER SECTIONS FINAL === */

/* Miniatures */
#miniatures, .miniatures {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    text-align: center !important;
    display: block;
    justify-content: center;
    align-items: center;
}

/* Nos Offres */
#services, .services {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    text-align: center !important;
    display: block;
    justify-content: center;
    align-items: center;
}

/* Pourquoi VIZO CRÉATION ? */
.vizo-title, #vizo-title {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    text-align: center !important;
    display: block;
    justify-content: center;
    align-items: center;
}

/* === END PATCH === */



/* === CUSTOM PATCH POURQUOI VIZO CRÉATION === */
#apropos, .about {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
/* === END PATCH === */



/* === PATCH: CARDS TEMPLATE STYLE (inspiré du modèle fourni) === */
.pricing-cards { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; align-items:stretch; }

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  flex: 1 1 280px;
  min-width: 240px;
}

.card .avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(13,110,253,0.08); /* blue tint */
  display: flex;
  align-items:center;
  justify-content:center;
  margin-top: -42px;
  border: 4px solid #ffffff;
  box-shadow: 0 6px 16px rgba(2,6,23,0.08);
  overflow: hidden;
}

.card .brand {
  font-weight:700;
  color: #0d6efd; /* blue accent (replace green) */
  margin-top: 10px;
  font-size: 14px;
  text-transform: none;
}

.card h3 { margin: 10px 0 6px; font-size: 20px; color: #0b1220; }
.card .features { list-style:none; padding:0; margin:8px 0 14px; color:#334155; }
.card .features .feature { padding:6px 0; font-size:14px; }
.card .cta .btn { display:inline-block; padding:10px 18px; border-radius:8px; background:#0d6efd; color:#fff; text-decoration:none; }

/* Responsive smaller */
@media (max-width:720px){
  .card { max-width: 100%; flex: 1 1 100%; }
  .card .avatar { width:64px; height:64px; margin-top:-32px; }
}
/* === END PATCH === */


/* === FIXES APPLIQUÉS AUTOMATIQUEMENT === */
.site-header {
  position: relative; /* pour centrer les absolus */
}

.center-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}

.hero, .full-width-section {
  width: 100% !important; /* au lieu de 100vw qui décale */
  max-width: 100%;
}


/* VIZO FORCE FIX - appended 20250911T162754Z */

/* Ensure header and centering */
.site-header{position:relative!important;}
.center-cta, .site-header .center-cta{position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:9999!important;}
.container{margin:0 auto!important;box-sizing:border-box!important;}
.hero, .full-width-section{width:100% !important;max-width:100% !important;}
html,body{overflow-x:hidden!important;}