:root {
    --violet: #6c5ce7;
    --rose-bonbon: #ffdef2;
    --rose-fonce: #f8a5c2;
    --white: #ffffff;
    --dark: #2d3436;
    --glass: rgba(255,255,255,0.85);
    --off-white: #F9F7F2;
    --slate-blue: #2F4858;
    --terracotta: #C05746;
}

/* --- RESET ET BASE --- */
* { box-sizing: border-box; margin:0; padding:0; }
html { 
    scroll-behavior: smooth; 
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; 
    scroll-padding-top: 90px;
}
body { background-color:#fffafd; 
    color: var(--dark); 
    line-height:1.7; 
    overflow-x:hidden; 
}

/* --- NAVBAR --- */
.navbar {
    position:fixed; top:0; width:100%; height:80px; z-index:1000;
    background: var(--white);
    border-bottom:1px solid var(--rose-bonbon);
    display:flex; align-items:center;
}
.video-bg-container {
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  z-index:1; /* derrière le contenu */
  overflow:hidden;
  background: var(--violet); /* couleur de secours si la vidéo ne charge pas */
}
.nav-video { width:100%; height:100%; object-fit:cover; opacity:0.6; }
.nav-content { position:relative; z-index:10; width:100%; padding:0 5%; display:flex; justify-content:space-between; align-items:center; }

.logo { display:flex; flex-direction:column; justify-content:center; line-height:1.1; }
.logo .slogan { font-size:0.75em; white-space:nowrap; }
.logo a, .nav-links a {
    text-decoration:none; color:var(--rose-bonbon); font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
    transition: opacity 0.3s;
}
.logo a { font-size: clamp(22px,3vw,42px); }
.nav-links a { font-size:0.9rem; margin-left:20px; }
.logo a:hover, .nav-links a:hover { opacity:0.7; color:var(--rose-fonce); }

/* --- BACKGROUND BLOB VAPOREUX --- */
.glass-bg {
    position:fixed; top:0; left:0; width:100%; height:100%;
    z-index:1;
    filter: blur(40px);
    pointer-events:none;
}
.blob {
    position:absolute; border-radius:50%; opacity:0.5;
    animation: float 20s infinite alternate ease-in-out;
}
.pink { width:300px; height:300px; background:var(--rose-bonbon); top:-80px; left:-80px; }
.purple { width:400px; height:400px; background:var(--violet); bottom:-120px; right:-80px; animation-delay:-5s; }
.light { width:250px; height:250px; background:#fff; top:40%; left:30%; }

@keyframes float {
    0% { transform:translate(0,0) scale(1); }
    100% { transform:translate(30px,30px) scale(1.05); }
}

/* --- CONTAINER --- */
.container {
    position:relative; z-index:10; margin-top:120px; padding:20px; max-width:1100px; margin-left:auto; margin-right:auto;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px;
}

/* --- BRIQUES --- */
.brique {
    background: var(--glass);
    backdrop-filter: blur(8px);
    border-radius:25px; padding:30px;
    box-shadow:0 8px 25px rgba(0,0,0,0.05);
    border:1px solid rgba(255,255,255,0.5);
    opacity:0; transform:translateY(40px);
    transition: all 0.6s cubic-bezier(0.2,0.8,0.2,1);
    position:relative; overflow:hidden;
}
.brique.visible { opacity:1; transform:translateY(0); }
.brique:hover { transform:translateY(-6px); border-color:var(--rose-fonce); background:white; }

.brique::after {
    content:"";
    position:absolute; top:0; left:0; right:0; bottom:0;
    background-image: radial-gradient(1.5px 1.5px at 20% 30%, var(--rose-fonce) 100%, transparent),
                      radial-gradient(1px 1px at 70% 10%, var(--violet) 100%, transparent),
                      radial-gradient(1.5px 1.5px at 40% 80%, var(--rose-fonce) 100%, transparent),
                      radial-gradient(1.5px 1.5px at 90% 45%, var(--violet) 100%, transparent);
    background-size: 120px 120px;
    opacity:0; transition:opacity 0.3s; z-index:1; pointer-events:none;
}
.brique:hover::after { opacity:0.6; animation:sparkleFade 3s infinite alternate; }
@keyframes sparkleFade { 0%{transform:scale(1)}100%{transform:scale(1.05);} }

.brique * { position:relative; z-index:2; }

/* --- GALERIE AVANT/APRES --- */
.galerie-avant-apres { display:flex; flex-direction:column; gap:20px; margin-top:20px; align-items:center; }
.cadre-photo { width:95%; position:relative; }
.photo-large { width:100%; aspect-ratio:16/9; border-radius:15px; background-size:cover; background-position:center; box-shadow:0 5px 15px rgba(0,0,0,0.05); border:1px solid rgba(255,255,255,0.8); transition:transform 0.3s ease; }
.photo-large:hover { transform:scale(1.02); }

.avant { background-image: url('../img/BandeReconstructAvant.webp'); }
.apres { background-image: url('../img/BandeReconstructApres.webp'); }

.badge { position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.8); backdrop-filter:blur(4px); padding:4px 12px; border-radius:20px; font-size:0.7rem; font-weight:600; color:var(--violet); z-index:5; text-transform:uppercase; letter-spacing:1px; }
.separateur-chic { width:100%; text-align:center; border-bottom:1px solid var(--rose-bonbon); line-height:0.1em; margin:10px 0; }
.separateur-chic span { background:#fff; padding:0 15px; color:var(--rose-fonce); font-size:0.7rem; font-weight:bold; letter-spacing:2px; }

/* --- TITRES --- */
h1 { grid-column:1/-1; text-align:center; font-family:'Playfair Display', serif; color:var(--violet); font-size:2.2rem; margin-bottom:20px; }
h2 { font-family:'Playfair Display', serif; color:var(--violet); font-size:1.6rem; margin-bottom:15px; }
.highlight { color:#d63384; font-weight:600; background:linear-gradient(to bottom,transparent 65%, var(--rose-bonbon) 65%); }

/* --- BOUTONS --- */
.cta-button { display:inline-block; background:var(--violet); color:white; padding:14px 30px; border-radius:50px; text-decoration:none; font-weight:600; margin-top:15px; transition:all 0.3s; }
.cta-button:hover { opacity:0.85; transform:translateY(-2px); }

/* --- TARIFS --- */
.tarif-list { display:flex; flex-direction:column; gap:15px; margin-top:20px; }
.tarif-item { display:flex; justify-content:space-between; padding:12px 20px; border-radius:15px; background:rgba(255,255,255,0.6); backdrop-filter:blur(5px); font-weight:500; transition:all 0.3s ease; }
.tarif-item:hover { background:white; transform:translateX(5px); border-left:3px solid var(--violet); }
.tarif-description { font-size:0.8rem; font-weight:400; font-style:italic; opacity:0.8; margin:0; }

/* --- IMAGES --- */
.image-wrapper {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement si besoin */
    width: 100%;
    padding: 10px;
}
.image-transparent { max-width:100%; filter:drop-shadow(0 10px 20px rgba(0,0,0,0.1)); transition:transform 0.3s ease;height: auto;display: block;border-radius: 15px;object-fit: contain; }
.image-transparent:hover { transform:scale(1.03); }

/* --- ANIMATION DE TEXTE --- */
.text-aesthetic {
  font-size:clamp(12px,3vw,28px); font-weight:700; text-align:center;
  background:linear-gradient(90deg,#ff00cc,#ff4fd8,#ffffff,#ff99f5,#ff00cc);
  background-size:200% auto; background-clip:text; -webkit-background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; animation:shineText 4s linear infinite;
}
@keyframes shineText { 0%{background-position:0% center}100%{background-position:200% center} }

/* --- RESPONSIVE --- */
@media (max-width:768px){
    .nav-links{display:none;}
    .container{grid-template-columns:1fr; margin-top:100px;}
    .blob{display:none;}
}

/* --- PREFERS REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce){
    * { animation:none !important; transition:none !important; }
}

/* --- WA BOX ---*/
 /* --- Conteneur en bas à droite ---*/
#wa-box {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
 /* --- Fenetre qui souvre ---*/
 #wa-chat {
    width: 280px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid var(--rose-fonce);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.15);
    margin-bottom: 15px;
    overflow: hidden;
    animation: fadeIn 0.3s ease-out;
}
/* En-tête de la fenêtre */
#wa-chat div:first-child {
    background: var(--violet);
    color: white;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Corps du message */
#wa-chat div:nth-child(2) {
    padding: 20px;
    color: var(--dark);
    font-size: 14px;
    text-align: center;
    line-height: 1.4;
}

/* Bouton dans la fenêtre */
#wa-chat a {
    display: block;
    background: var(--rose-fonce);
    color: white;
    text-align: center;
    padding: 12px;
    margin: 0 20px 20px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 13px;
    transition: 0.3s;
}

#wa-chat a:hover {
    background: var(--violet);
}

/* Le bouton rond avec l'émoji */
#wa-box div[onclick] {
    width: 60px;
    height: 60px;
    background: var(--violet);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.4);
    font-size: 28px;
    transition: transform 0.3s ease;
}

#wa-box div[onclick]:hover {
    transform: scale(1.1);
}

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

/* --- SPECIFIQUE CONTACT LARGE --- */
.brique-large {
    grid-column: 1 / -1; /* Force la brique à prendre toute la largeur de la grille */
    max-width: 100%;
}

.contact-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    align-items: center;
}

.contact-action-box {
    flex: 1;
    text-align: center;
}

.tally-wrapper {
    flex: 2; /* Donne plus de place au formulaire qu'au bouton WA */
    min-height: 450px;
}

.wa-btn {
    background: #25D366 !important;
    width: 100%;
    max-width: 300px;
}

.separateur-vertical {
    display: flex;
    align-items: center;
    color: var(--rose-fonce);
    font-weight: bold;
    font-size: 0.8rem;
}

.separateur-vertical::before, .separateur-vertical::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rose-bonbon);
    margin: 0 15px;
    min-width: 50px;
}

/* --- ADAPTATION MOBILE --- */
@media (max-width: 768px) {
    .contact-wrapper {
        flex-direction: column;
    }
    .separateur-vertical {
        width: 100%;
        margin: 20px 0;
    }
    .separateur-vertical::before, .separateur-vertical::after {
        min-width: 20px;
    }
    .tally-wrapper {
        width: 100%;
    }
}
/* --- FOOTER --- */
.site-footer {
    background-color: var(--violet); /* Ta couleur de référence */
    padding: 60px 20px 110px 20px; /* Espace pour le bouton WhatsApp */
    text-align: center;
    margin-top: 80px;
    border-top: 1px solid var(--rose-bonbon);
    position: relative;
    z-index: 10;
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-logo .text-aesthetic {
    font-family: 'Playfair Display', serif; /* Même police que le H1/H2 et Header */
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.site-footer p {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.footer-links a {
    font-family: 'Montserrat', sans-serif; /* Même police que la Nav-links */
    color: var(--rose-bonbon);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateY(-2px);
}

.footer-copyright {
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 0.7rem;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Adaptation Mobile */
@media (max-width: 768px) {
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
}