/* =========================================================================
   SITE OFFICIEL SERENIFOR - FEUILLE DE STYLE (V60 - LIGNES SEPAREES)
   ========================================================================= */

@font-face { font-family: 'Interstate-Thin'; src: url('fonts/Interstate-Thin.otf') format('opentype'); }
@font-face { font-family: 'Interstate-ExtraLight'; src: url('fonts/Interstate-ExtraLight.otf') format('opentype'); }
@font-face { font-family: 'Interstate-Light'; src: url('fonts/Interstate-Light.otf') format('opentype'); }
@font-face { font-family: 'Interstate-Regular'; src: url('fonts/Interstate-Regular.otf') format('opentype'); }
@font-face { font-family: 'Interstate-Bold'; src: url('fonts/Interstate-Bold.otf') format('opentype'); }
@font-face { font-family: 'Interstate-Black'; src: url('fonts/Interstate-Black.otf') format('opentype'); }
@font-face { font-family: 'Interstate-UltraBlack'; src: url('fonts/Interstate-UltraBlack.otf') format('opentype'); }

:root { --bleu-sombre: #084355; --bleu-clair: #488CA2; --gris-clair: #E5E4E5; --gris-fonce: #434242; --blanc: #FFFFFF; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { font-family: 'Interstate-Regular', Arial, sans-serif; margin: 0; padding: 0; color: var(--gris-fonce); background-color: var(--blanc); overflow-x: hidden; }

/* BARRE DE NAVIGATION & ELEMENTS FIXES */
.navbar { position: fixed; top: 0; width: 100%; background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0,0,0,0.05); z-index: 2000; display: flex; justify-content: center; padding: 15px 0; backdrop-filter: blur(5px); }
.nav-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 25px; }
.nav-links li a { text-decoration: none; color: var(--bleu-sombre); font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 15px; text-transform: uppercase; transition: color 0.3s; }
.nav-links li a:hover { color: var(--bleu-clair); }
.menu-toggle { display: none; font-size: 24px; color: var(--bleu-sombre); cursor: pointer; position: absolute; right: 20px; top: 12px; }

.decor-top-left { position: fixed; top: 0; left: 0; width: 32vw; max-width: 450px; z-index: 1000; pointer-events: none; }
.decor-bottom-right { position: fixed; bottom: 0; right: 0; width: 24vw; max-width: 350px; z-index: 1000; pointer-events: none; }
.footer-mentions { position: fixed; bottom: 20px; left: 0; width: 100%; text-align: center; font-size: 13px; font-family: 'Interstate-Regular', Arial, sans-serif; color: var(--gris-fonce); z-index: 1000; }
.footer-mentions a { color: var(--gris-fonce); text-decoration: underline; }

/* STRUCTURE SECTIONS */
section { height: 100vh; width: 100vw; scroll-snap-align: start; position: relative; display: flex; align-items: flex-start; box-sizing: border-box; background-color: var(--blanc); overflow: hidden;}
.decor-bureau { position: absolute; top: 0; right: 0; width: 32vw; max-width: 650px; height: auto; z-index: 5; pointer-events: none; }
.hero-container { width: 100%; max-width: 1500px; margin: 0 auto; padding-left: 0; display: flex; box-sizing: border-box; position: relative; z-index: 20; }
.hero-col-gauche { width: 68%; display: flex; flex-direction: column; align-items: flex-start; padding-top: 12vh; }

/* BADGES (Modifiés Z-index pour passer devant et inclinaison -35deg) */
.badge-header { position: relative; display: inline-block; padding: 10px 40px; color: var(--blanc); text-align: center; margin-bottom: 20px; z-index: 1005; }
.badge-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bleu-clair); transform: skew(-35deg); z-index: -1; }
.badge-pro::before { background-color: var(--bleu-sombre); } 
.badge-header .petit-texte { font-family: 'Interstate-Light', Arial, sans-serif; font-size: 14px; display: block; }
.badge-header .gros-texte { font-family: 'Interstate-Black', Arial, sans-serif; font-size: 22px; text-transform: uppercase; display: block; letter-spacing: 1px; }

/* TEXTES GLOBAUX */
.txt-bleu-clair { color: var(--bleu-clair); }
.txt-bleu-sombre-gros { color: var(--bleu-sombre); font-family: 'Interstate-Black', Arial, sans-serif; font-size: 35px; }

/* PAGES 1 à 3 (Identiques, raccourcies pour l'espace ici mais à garder entières) */
.hero-logos { width: 96%; display: flex; align-items: flex-start; margin-top: 10px; margin-left: 65px; margin-bottom: 85px; }
.logo-complet { width: 100%; height: auto; } 
.hero-text-block { width: 100%; text-align: left; margin-top: 25px; margin-left: 17px; }
.hero-title { font-family: 'Interstate-Bold', Arial, sans-serif; font-weight: normal; color: var(--bleu-clair); font-size: clamp(40px, 6.2vw, 79px); text-transform: uppercase; margin: 0; line-height: 1; letter-spacing: 1.8px; }
.hero-subtitle { font-family: 'Interstate-Regular', Arial, sans-serif; font-weight: normal; color: var(--bleu-sombre); font-size: clamp(24px, 3.8vw, 52px); text-transform: uppercase; margin: 15px 0 70px 183px; line-height: 1; letter-spacing: 1px; }
.hero-desc { font-family: 'Interstate-ExtraLight', Arial, sans-serif; font-weight: normal; font-size: clamp(24px, 3.5vw, 48px); color: var(--gris-fonce); margin: 0; line-height: 1.4; margin-left: 102px; }
.hero-desc strong { font-family: 'Interstate-Bold', Arial, sans-serif; font-weight: normal; color: #000000; }

.presentation-container { width: 100%; height: 100vh; position: relative; }
.presentation-title-1 { position: absolute; top: 220px; left: 305px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 60px; color: #000000; line-height: 1; }
.presentation-title-2 { position: absolute; top: 280px; left: 210px; font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 65px; text-transform: uppercase; color: #000000; line-height: 1; }
.presentation-title-3 { position: absolute; top: 340px; left: 330px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 60px; color: #000000; line-height: 1; }
.presentation-title-4 { position: absolute; top: 400px; left: 470px; font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 65px; text-transform: uppercase; color: #000000; line-height: 1; }
.presentation-name { position: absolute; top: 550px; right: 400px; font-size: 42px; line-height: 1; color: var(--bleu-clair); text-align: right; }
.presentation-name .prenom { font-family: 'Interstate-Light', Arial, sans-serif; }
.presentation-name .nom { font-family: 'Interstate-Black', Arial, sans-serif; }
.presentation-text { position: absolute; top: 610px; right: 400px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 20px; color: var(--gris-fonce); line-height: 1.7; text-align: right; width: 70%; }
.presentation-text strong { font-family: 'Interstate-Bold', Arial, sans-serif; color: var(--gris-fonce); }
.presentation-photo { position: absolute; bottom: 0; right: 5%; width: 400px; z-index: 10; }
.photo-profil { width: 100%; height: auto; display: block; }

.services-container { width: 100%; height: 100vh; position: relative; }
.services-title-1 { position: absolute; top: 150px; left: 350px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 28px; color: #000000; }
.services-title-1 strong { font-family: 'Interstate-Black', Arial, sans-serif; }
.services-title-2 { position: absolute; top: 200px; left: 300px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 50px; color: var(--bleu-clair); }
.services-title-2 strong { font-family: 'Interstate-Black', Arial, sans-serif; color: var(--bleu-sombre); }
.services-title-3 { position: absolute; top: 260px; left: 350px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 50px; color: var(--bleu-clair); }
.services-title-3 strong { font-family: 'Interstate-Black', Arial, sans-serif; color: var(--bleu-sombre); }
.services-text-1 { position: absolute; top: 360px; left: 200px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 22px; color: var(--gris-fonce); }
.services-text-1 strong { font-family: 'Interstate-Black', Arial, sans-serif; color: #000000; }
.services-text-2 { position: absolute; top: 420px; left: 250px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 30px; color: var(--gris-fonce); }
.services-text-2 strong { font-family: 'Interstate-Black', Arial, sans-serif; color: var(--bleu-sombre); }
.services-text-3 { position: absolute; top: 460px; left: 400px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 30px; color: var(--gris-fonce); }
.services-card-particulier { position: absolute; top: 550px; left: 100px; width: 500px; }
.services-card-pro { position: absolute; top: 550px; left: 700px; width: 500px; }
.services-list-intro { font-size: 18px; margin-bottom: 10px; }
.services-list-intro strong { font-family: 'Interstate-Bold', Arial, sans-serif; }
.services-list { list-style: none; padding: 0; margin: 0 0 20px 10px; font-size: 16px; line-height: 1.6; }
.services-list li::before { content: '. '; font-weight: bold; }
.services-footer-note { font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 16px; }
.note-particulier { color: var(--bleu-clair); }
.note-pro { color: var(--bleu-sombre); }

/* =========================================================================
   PAGE 4 : PROFESSIONNELS (Avec les nouvelles lignes séparées et coordonnées Y ajustées)
   ========================================================================= */
.pro-container { width: 100%; height: 100vh; position: relative; }
.badge-pro-pos { position: absolute; top: 80px; left: 150px; }
.pro-title-1 { position: absolute; top: 150px; left: 300px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 35px; color: #000; }
.pro-title-1 strong { font-family: 'Interstate-Black', Arial, sans-serif; }
.pro-title-2 { position: absolute; top: 190px; left: 350px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 40px; color: #000; }
.pro-title-2 strong { font-family: 'Interstate-Black', Arial, sans-serif; }

.pro-intro-1 { position: absolute; top: 250px; left: 200px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 25px; }
.pro-intro-2 { position: absolute; top: 285px; left: 200px; font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 25px; color: var(--bleu-sombre); }
.pro-intro-3 { position: absolute; top: 320px; left: 200px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 25px; }

.pro-cards-wrapper { position: absolute; top: 500px; left: 100px; display: flex; gap: 40px; width: 1400px; }
.pro-card { flex: 1; border-left: 2px solid var(--gris-clair); padding-left: 15px; }
.pro-card-title { font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 16px; color: var(--bleu-sombre); margin-bottom: 15px; text-transform: uppercase; }
.pro-card-desc { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 15px; line-height: 1.4; }

.pro-footer-1 { position: absolute; top: 700px; right: 200px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 20px; }
.pro-footer-2 { position: absolute; top: 730px; right: 200px; font-family: 'Interstate-Black', Arial, sans-serif; font-size: 35px; color: var(--bleu-sombre); }
.pro-footer-3 { position: absolute; top: 770px; right: 200px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 20px; }

/* =========================================================================
   PAGE 5 : PARTICULIERS (Lignes séparées)
   ========================================================================= */
.part-container { width: 100%; height: 100vh; position: relative; }
.badge-part-pos { position: absolute; top: 80px; left: 250px; }
.part-banner-promo { position: absolute; top: 100px; left: 0; width: 400px; height: auto; }

.part-title-1 { position: absolute; top: 100px; left: 550px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 45px; color: #000; }
.part-title-1 strong { font-family: 'Interstate-Black', Arial, sans-serif; font-size: 55px; }
.part-title-2 { position: absolute; top: 160px; left: 550px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 40px; color: #000; }

.part-subtitle-1 { position: absolute; top: 250px; right: 200px; font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 30px; color: var(--bleu-sombre); }
.part-subtitle-2 { position: absolute; top: 290px; right: 200px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 25px; color: var(--bleu-clair); }
.part-subtitle-3 { position: absolute; top: 320px; right: 200px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 25px; color: var(--bleu-clair); }

.part-cards-wrapper { position: absolute; top: 400px; left: 100px; display: flex; gap: 40px; width: 1200px; }
.part-card { flex: 1; border-left: 2px solid var(--gris-clair); padding-left: 15px; }
.part-card-title { font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 16px; color: var(--bleu-clair); margin-bottom: 15px; text-transform: uppercase; }
.part-card-desc { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 15px; line-height: 1.4; margin-bottom: 15px; }
.part-card-price { font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 16px; color: var(--bleu-clair); }
.petit-gris { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 12px; color: var(--gris-fonce); }

.part-mentions-bas { position: absolute; top: 600px; left: 150px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 13px; text-align: center; width: 1000px; }

.part-rdv-1 { position: absolute; top: 680px; right: 250px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 22px; color: var(--bleu-sombre); }
.part-rdv-2 { position: absolute; top: 710px; right: 250px; font-family: 'Interstate-Black', Arial, sans-serif; font-size: 35px; color: var(--bleu-clair); }

/* =========================================================================
   PAGE 6 : PARTENAIRES
   ========================================================================= */
.partenaires-container { width: 100%; height: 100vh; position: relative; }
.partenaires-title-1 { position: absolute; top: 120px; left: 350px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 40px; color: #000; }
.partenaires-title-2 { position: absolute; top: 160px; left: 400px; font-family: 'Interstate-Black', Arial, sans-serif; font-size: 55px; color: #000; }
.partenaires-intro { position: absolute; top: 240px; left: 300px; font-family: 'Interstate-Light', Arial, sans-serif; font-size: 20px; color: var(--bleu-clair); width: 800px; text-align: center; }

.partenaires-soustitre { position: absolute; top: 320px; left: 200px; font-family: 'Interstate-Bold', Arial, sans-serif; font-size: 25px; color: var(--gris-fonce); }
.partenaire-bloc { position: absolute; top: 380px; left: 200px; display: flex; gap: 40px; align-items: flex-start; width: 800px; }
.partenaire-gauche { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 14px; }
.logo-partenaire { width: 150px; height: auto; margin-bottom: 10px; }
.partenaire-droite { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 16px; line-height: 1.5; border-left: 2px solid var(--gris-clair); padding-left: 20px; }

.partenaires-footer-1 { position: absolute; top: 650px; right: 250px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 22px; }
.partenaires-footer-2 { position: absolute; top: 680px; right: 250px; font-family: 'Interstate-Black', Arial, sans-serif; font-size: 35px; color: var(--bleu-clair); }

/* =========================================================================
   PAGE 7 : CONTACT
   ========================================================================= */
.contact-container { width: 100%; height: 100vh; position: relative; }
.contact-title-1 { position: absolute; top: 100px; left: 350px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 35px; color: #000; }
.contact-title-2 { position: absolute; top: 140px; left: 400px; font-family: 'Interstate-Black', Arial, sans-serif; font-size: 50px; color: #000; }

.contact-form-title { position: absolute; top: 280px; left: 150px; font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 25px; color: #000; }
.badge-contact-pro { position: absolute; top: 400px; left: 200px; transform: scale(0.8); z-index: 1005; }
.badge-contact-part { position: absolute; top: 500px; left: 350px; transform: scale(0.8); z-index: 1005; }

.contact-infos { position: absolute; top: 300px; left: 650px; font-family: 'Interstate-Regular', Arial, sans-serif; }
.contact-nom { font-family: 'Interstate-Light', Arial, sans-serif; font-size: 30px; color: #000; }
.contact-nom strong { font-family: 'Interstate-Black', Arial, sans-serif; }
.contact-titre { font-size: 20px; color: var(--bleu-clair); margin-bottom: 15px; }
.contact-coordonnees { font-size: 22px; line-height: 1.6; color: var(--bleu-sombre); }

.contact-zone-bleue { position: absolute; bottom: 100px; right: 100px; text-align: center; color: var(--blanc); background-color: var(--bleu-clair); padding: 40px; border-radius: 20px 0 20px 0; }
.icone-map-img { width: 50px; height: auto; margin-bottom: 15px; }
.contact-dep-1, .contact-dep-2, .contact-dep-3 { font-family: 'Interstate-Regular', Arial, sans-serif; font-size: 25px; line-height: 1.2; }
.contact-frais-1, .contact-frais-2, .contact-frais-3 { font-family: 'Interstate-Light', Arial, sans-serif; font-size: 15px; line-height: 1.4; }

/* =========================================================================
   VERSION MOBILE (Sécurité Globale - Modifiée pour englober les nouvelles classes)
   ========================================================================= */
@media (max-width: 900px) {
    .menu-toggle { display: block; }
    .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--blanc); box-shadow: 0 5px 10px rgba(0,0,0,0.1); padding: 20px 0; text-align: center; }
    .nav-links.active { display: flex; }
    .decor-top-left, .decor-bottom-right { width: 40vw; max-width: 150px; z-index: 1; }
    .footer-mentions { position: fixed; z-index: 1000; font-size: 11px; bottom: 10px; background: rgba(255,255,255,0.8); padding: 5px; }
    html { scroll-snap-type: y mandatory; }
    section { height: 100vh; padding: 80px 15px 40px 15px; scroll-snap-align: start; align-items: center; justify-content: center; overflow-y: auto; overflow-x: hidden; }
    .decor-bureau { display: none; }
    
    .hero-col-gauche, .presentation-container, .services-container, .pro-container, .part-container, .partenaires-container, .contact-container { flex-direction: column; justify-content: flex-start; align-items: center; height: auto; text-align: center; width: 100%; }
    
    /* Annuler toutes les positions Y/X des nouvelles lignes séparées */
    .pro-title-1, .pro-title-2, .pro-intro-1, .pro-intro-2, .pro-intro-3, .pro-cards-wrapper, .pro-footer-1, .pro-footer-2, .pro-footer-3,
    .part-title-1, .part-title-2, .part-subtitle-1, .part-subtitle-2, .part-subtitle-3, .part-cards-wrapper, .part-mentions-bas, .part-rdv-1, .part-rdv-2,
    .partenaires-title-1, .partenaires-title-2, .partenaires-intro, .partenaires-soustitre, .partenaire-bloc, .partenaires-footer-1, .partenaires-footer-2,
    .contact-title-1, .contact-title-2, .contact-form-title, .badge-contact-pro, .badge-contact-part, .contact-infos, .contact-zone-bleue, .part-banner-promo, .badge-pro-pos, .badge-part-pos {
        position: relative; top: auto; left: auto; right: auto; width: 100%; margin-bottom: 10px; text-align: center;
    }
    
    /* Nettoyages spécifiques mobile */
    .pro-cards-wrapper, .part-cards-wrapper { flex-direction: column; width: 90%; gap: 15px; }
    .pro-card, .part-card { border-left: none; border-bottom: 1px solid var(--gris-clair); padding-bottom: 10px; }
    .part-banner-promo { width: 80%; }
    .partenaire-bloc { flex-direction: column; width: 90%; align-items: center; }
    .partenaire-droite { border-left: none; border-top: 1px solid var(--gris-clair); padding-top: 10px; padding-left: 0; margin-top: 10px; }
    .contact-zone-bleue { border-radius: 10px; width: 90%; margin: 0 auto; box-sizing: border-box; }
}