BT Plus \u2014 Quel entretien pour mon r\u00e9seau ?<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue-900:#07294a;\r\n --blue-800:#0a3666;\r\n --blue-700:#0d4f8b;\r\n --blue-500:#1c7ec9;\r\n --blue-300:#7cc0ee;\r\n --blue-100:#d6ebfb;\r\n --blue-50:#eef6fc;\r\n --orange:#f4a61a;\r\n --orange-dark:#d98a0c;\r\n --ink:#0c2238;\r\n --slate:#48637d;\r\n --paper:#ffffff;\r\n\r\n --font-display:\"Sora\",sans-serif;\r\n --font-body:\"Inter\",sans-serif;\r\n\r\n --shadow-sm:0 2px 10px rgba(7,41,74,.06);\r\n --shadow-md:0 18px 40px -16px rgba(7,41,74,.30);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n font-family:var(--font-body);\r\n color:var(--ink);\r\n background:var(--paper);\r\n -webkit-font-smoothing:antialiased;\r\n line-height:1.6;\r\n }\r\n\r\n \/* ---------- Hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n overflow:hidden;\r\n background:\r\n radial-gradient(1100px 520px at 78% -8%, var(--blue-100), transparent 60%),\r\n linear-gradient(180deg,#fbfdff 0%,var(--blue-50) 100%);\r\n }\r\n .hero-inner{\r\n max-width:1200px;margin:0 auto;\r\n padding:40px 24px 150px;\r\n display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;\r\n position:relative;\r\n }\r\n @media(max-width:940px){\r\n .hero-inner{grid-template-columns:1fr;padding:28px 24px 130px;gap:34px}\r\n }\r\n\r\n \/* ============================================\r\n BADGE 24\/24\r\n ============================================ *\/\r\n .badge-247 {\r\n position:absolute;\r\n top:20px;\r\n right:24px;\r\n background:#ffffff;\r\n border-radius:14px;\r\n padding:12px 16px;\r\n box-shadow:var(--shadow-md);\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n z-index:10;\r\n border:1px solid var(--blue-100);\r\n animation:floaty 6s ease-in-out infinite;\r\n animation-delay:0.3s;\r\n }\r\n\r\n .badge-247 .fic {\r\n width:38px;\r\n height:38px;\r\n border-radius:10px;\r\n display:grid;\r\n place-items:center;\r\n flex-shrink:0;\r\n background:var(--blue-50);\r\n color:var(--blue-700);\r\n }\r\n\r\n .badge-247 .fic svg {\r\n width:20px;\r\n height:20px;\r\n }\r\n\r\n .badge-247 b {\r\n font-family:var(--font-display);\r\n display:block;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n }\r\n\r\n .badge-247 small {\r\n color:var(--slate);\r\n font-size:.74rem;\r\n }\r\n\r\n @keyframes floaty{\r\n 0%,100%{transform:translateY(0)}\r\n 50%{transform:translateY(-12px)}\r\n }\r\n\r\n @media(max-width:600px){\r\n .badge-247{\r\n top:12px;\r\n right:12px;\r\n padding:8px 12px;\r\n gap:8px;\r\n }\r\n .badge-247 .fic{\r\n width:30px;\r\n height:30px;\r\n }\r\n .badge-247 b{\r\n font-size:.85rem;\r\n }\r\n .badge-247 small{\r\n font-size:.65rem;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n CONTENU TEXTE - QUEL ENTRETIEN POUR MON R\u00c9SEAU ?\r\n ============================================ *\/\r\n h1{\r\n font-family:var(--font-display);font-weight:800;\r\n font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;\r\n letter-spacing:-.025em;color:var(--blue-900);margin:18px 0 0;\r\n }\r\n h1 .accent{\r\n color:var(--orange);position:relative;white-space:nowrap;\r\n }\r\n h1 .accent::after{\r\n content:\"\";position:absolute;left:0;right:0;bottom:.06em;height:.16em;\r\n background:rgba(244,166,26,.28);border-radius:4px;z-index:-1;\r\n transform:scaleX(0);transform-origin:left;animation:underline 1s .8s ease forwards;\r\n }\r\n @keyframes underline{to{transform:scaleX(1)}}\r\n\r\n .lead{\r\n margin-top:18px;font-size:1.08rem;color:var(--slate);max-width:560px;\r\n }\r\n\r\n \/* public cible - chips *\/\r\n .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}\r\n .chip{\r\n display:inline-flex;align-items:center;gap:7px;\r\n background:#fff;border:1px solid var(--blue-100);\r\n padding:8px 13px;border-radius:11px;font-size:.86rem;font-weight:600;color:var(--blue-800);\r\n box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s, border-color .2s;\r\n }\r\n .chip svg{width:16px;height:16px;color:var(--blue-500)}\r\n .chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-300)}\r\n\r\n \/* trust strip *\/\r\n .trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px}\r\n .trust div{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--slate);font-weight:500}\r\n .trust svg{width:18px;height:18px;color:#1faa6b;flex-shrink:0}\r\n\r\n \/* ---------- Visual ---------- *\/\r\n .visual{position:relative;display:grid;place-items:center;min-height:380px}\r\n .disc{\r\n position:relative;\r\n width:min(420px,90%);\r\n aspect-ratio:1;\r\n border-radius:50%;\r\n overflow:hidden;\r\n box-shadow:0 40px 70px -25px rgba(13,79,139,.7);\r\n display:grid;\r\n place-items:center;\r\n }\r\n\r\n .disc img{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n z-index:1;\r\n }\r\n\r\n .disc .overlay{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:100%;\r\n height:100%;\r\n background:rgba(7,41,74,0.30);\r\n z-index:2;\r\n border-radius:50%;\r\n }\r\n\r\n .ring{\r\n position:absolute;\r\n border:2px solid rgba(255,255,255,0.5);\r\n border-radius:50%;\r\n inset:0;\r\n opacity:0;\r\n z-index:3;\r\n animation:ripple 4s linear infinite;\r\n pointer-events:none;\r\n }\r\n .ring:nth-child(3){animation-delay:1.3s}\r\n .ring:nth-child(4){animation-delay:2.6s}\r\n @keyframes ripple{\r\n 0%{transform:scale(.55);opacity:.6}\r\n 80%{opacity:0}\r\n 100%{transform:scale(1.18);opacity:0}\r\n }\r\n\r\n .disc-content{\r\n position:relative;\r\n z-index:4;\r\n text-align:center;\r\n color:#ffffff;\r\n padding:20px;\r\n }\r\n\r\n .disc-content .icon-badge{\r\n display:inline-block;\r\n background:rgba(255,255,255,0.15);\r\n backdrop-filter:blur(6px);\r\n padding:6px 16px;\r\n border-radius:100px;\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:.7rem;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n color:#fff;\r\n border:1px solid rgba(255,255,255,0.2);\r\n margin-bottom:10px;\r\n }\r\n\r\n .disc-content .big-number{\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:3.8rem;\r\n line-height:1;\r\n color:#fff;\r\n text-shadow:0 4px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .disc-content .big-number span{\r\n font-size:1.4rem;\r\n font-weight:500;\r\n opacity:0.8;\r\n }\r\n\r\n .disc-content .desc{\r\n font-family:var(--font-body);\r\n font-weight:500;\r\n font-size:.95rem;\r\n color:rgba(255,255,255,0.9);\r\n margin-top:4px;\r\n }\r\n\r\n \/* ============================================\r\n FLOATING CARDS\r\n ============================================ *\/\r\n .float{\r\n position:absolute;\r\n background:#fff;\r\n border-radius:14px;\r\n padding:12px 15px;\r\n box-shadow:var(--shadow-md);\r\n display:flex;\r\n align-items:center;\r\n gap:11px;\r\n font-size:.85rem;\r\n animation:floaty 6s ease-in-out infinite;\r\n z-index:10;\r\n }\r\n .float .fic{\r\n width:38px;\r\n height:38px;\r\n border-radius:10px;\r\n display:grid;\r\n place-items:center;\r\n flex-shrink:0;\r\n }\r\n .float b{\r\n font-family:var(--font-display);\r\n display:block;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n }\r\n .float small{\r\n color:var(--slate);\r\n font-size:.74rem;\r\n }\r\n .float.one{\r\n top:6%;\r\n left:-4%;\r\n animation-delay:.2s;\r\n }\r\n .float.one .fic{\r\n background:#fff3df;\r\n color:var(--orange-dark);\r\n }\r\n .float.two{\r\n bottom:10%;\r\n right:-6%;\r\n animation-delay:1.6s;\r\n }\r\n .float.two .fic{\r\n background:var(--blue-50);\r\n color:var(--blue-700);\r\n }\r\n @media(max-width:560px){\r\n .float.one{left:0}\r\n .float.two{right:0}\r\n }\r\n\r\n \/* ---------- Animated waves ---------- *\/\r\n .waves{\r\n position:absolute;\r\n left:0;\r\n right:0;\r\n bottom:0;\r\n line-height:0;\r\n z-index:1;\r\n pointer-events:none;\r\n }\r\n .waves svg{\r\n display:block;\r\n width:100%;\r\n height:120px;\r\n }\r\n .wave-back use{animation:wavemove 11s linear infinite;opacity:.55}\r\n .wave-mid use{animation:wavemove 8s linear infinite reverse;opacity:.8}\r\n .wave-front use{animation:wavemove 6s linear infinite}\r\n @keyframes wavemove{\r\n 0%{transform:translateX(0)}\r\n 100%{transform:translateX(-50%)}\r\n }\r\n\r\n \/* ---------- entrance ---------- *\/\r\n .reveal{\r\n opacity:0;\r\n transform:translateY(22px);\r\n animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;\r\n }\r\n .d1{animation-delay:.05s}\r\n .d2{animation-delay:.16s}\r\n .d3{animation-delay:.27s}\r\n .d4{animation-delay:.38s}\r\n .d5{animation-delay:.49s}\r\n .reveal-r{\r\n opacity:0;\r\n transform:scale(.94);\r\n animation:pop .8s .3s cubic-bezier(.2,.7,.3,1) forwards;\r\n }\r\n @keyframes rise{\r\n to{opacity:1;transform:translateY(0)}\r\n }\r\n @keyframes pop{\r\n to{opacity:1;transform:scale(1)}\r\n }\r\n\r\n @media(prefers-reduced-motion:reduce){\r\n *{animation:none!important;transition:none!important}\r\n .reveal,.reveal-r{opacity:1;transform:none}\r\n h1 .accent::after{transform:scaleX(1)}\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media(max-width:768px){\r\n .disc{\r\n width:min(340px,85%);\r\n }\r\n .disc-content .big-number{\r\n font-size:2.8rem;\r\n }\r\n .disc-content .big-number span{\r\n font-size:1.1rem;\r\n }\r\n .disc-content .desc{\r\n font-size:.8rem;\r\n }\r\n .disc-content .icon-badge{\r\n font-size:.6rem;\r\n padding:4px 12px;\r\n }\r\n }\r\n\r\n @media(max-width:480px){\r\n .disc{\r\n width:min(280px,80%);\r\n }\r\n .disc-content .big-number{\r\n font-size:2.2rem;\r\n }\r\n .disc-content .big-number span{\r\n font-size:.9rem;\r\n }\r\n .disc-content .desc{\r\n font-size:.7rem;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <header class=\"hero\">\r\n <div class=\"hero-inner\">\r\n\r\n \r\n \r\n \r\n <div class=\"badge-247\">\r\n <span class=\"fic\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n <path d=\"M12 7v5l3 2\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span>\r\n <b>24h\/24<\/b>\r\n <small>Entretien & pr\u00e9vention<\/small>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"content\">\r\n <h1 class=\"reveal d2\">\r\n Quel entretien <br>pour <span class=\"accent\">mon r\u00e9seau ?<\/span>\r\n <\/h1>\r\n\r\n <p class=\"lead reveal d3\">\r\n Chaque r\u00e9seau est unique. Nous vous guidons vers le programme d'entretien\r\n adapt\u00e9 \u00e0 votre type de canalisation, votre usage et votre budget.\r\n <strong>Syndics, h\u00f4teliers, gestionnaires de copropri\u00e9t\u00e9 et particuliers<\/strong> :\r\n trouvez la solution qui vous correspond.\r\n <\/p>\r\n\r\n <div class=\"chips reveal d4\">\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 12h6l2 5 4-12 2 7h4\"\/><\/svg>Syndics<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-9-9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg>H\u00f4teliers<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><path d=\"m16 10 6-3v10l-6-3\"\/><\/svg>Gestionnaires<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7h18\"\/><path d=\"M6 7v13h12V7\"\/><path d=\"M9 7V4h6v3\"\/><\/svg>Particuliers<\/span>\r\n <\/div>\r\n\r\n <div class=\"trust reveal d5\">\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Programme sur mesure<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Devis personnalis\u00e9<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Suivi r\u00e9gulier<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Rapports d'intervention<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"visual reveal-r\">\r\n <div class=\"disc\">\r\n \r\n <img decoding=\"async\"\r\n src=\"http:\/\/sci-bme.fr\/wp-content\/uploads\/2026\/06\/remplacement-station-relevage_-2.jpg\"\r\n alt=\"Entretien et maintenance des r\u00e9seaux\"\r\n loading=\"lazy\"\r\n \/>\r\n \r\n <div class=\"overlay\"><\/div>\r\n\r\n \r\n <span class=\"ring\"><\/span>\r\n <span class=\"ring\"><\/span>\r\n <span class=\"ring\"><\/span>\r\n\r\n \r\n <div class=\"disc-content\">\r\n <span class=\"icon-badge\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;margin-right:6px;\">\r\n <path d=\"M12 2v4M12 22v-4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\/>\r\n <\/svg>\r\n Entretien programm\u00e9\r\n <\/span>\r\n <div class=\"big-number\">\r\n 98 <span>%<\/span>\r\n <\/div>\r\n <div class=\"desc\">de nos clients recommandent un entretien r\u00e9gulier<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"float one\">\r\n <span class=\"fic\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg>\r\n <\/span>\r\n <span><b>\u2248 30 min<\/b><small>analyse de vos besoins<\/small><\/span>\r\n <\/div>\r\n\r\n <div class=\"float two\">\r\n <span class=\"fic\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><path d=\"M21 12a9 9 0 1 1-9-9c2.5 0 4.8 1 6.4 2.6\"\/><\/svg>\r\n <\/span>\r\n <span><b>3 200+<\/b><small>contrats d'entretien actifs<\/small><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"waves\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\">\r\n <defs>\r\n <path id=\"w\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/>\r\n <\/defs>\r\n <g class=\"wave-back\"><use href=\"#w\" x=\"0\" fill=\"#d6ebfb\"\/><use href=\"#w\" x=\"176\" fill=\"#d6ebfb\"\/><\/g>\r\n <g class=\"wave-mid\"><use href=\"#w\" x=\"0\" fill=\"#a9d4f3\"\/><use href=\"#w\" x=\"176\" fill=\"#a9d4f3\"\/><\/g>\r\n <g class=\"wave-front\"><use href=\"#w\" x=\"0\" fill=\"#ffffff\"\/><use href=\"#w\" x=\"176\" fill=\"#ffffff\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n <\/header>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c570057 e-con-full e-flex e-con e-parent\" data-id=\"c570057\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90ddc34 elementor-widget elementor-widget-html\" data-id=\"90ddc34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>BT Plus \u2014 Estimation de risque r\u00e9seau<\/title>\r\n <style>\r\n \/* ============================================\r\n BASE & RESET\r\n ============================================ *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #ffffff;\r\n color: #0a1a2b;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ============================================\r\n SECTION QUIZ\r\n ============================================ *\/\r\n .quiz-section {\r\n padding: 5rem 5% 6rem;\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n background:\r\n radial-gradient(1100px 520px at 78% -8%, #d6ebfb, transparent 60%),\r\n linear-gradient(180deg, #fbfdff 0%, #eef6fc 100%);\r\n overflow: hidden;\r\n }\r\n\r\n .quiz-section__container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n width: 100%;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ============================================\r\n EN-TETE\r\n ============================================ *\/\r\n .quiz-section__header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .quiz-section__badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.7rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 0.4rem 1.4rem 0.4rem 1rem;\r\n border-radius: 2rem;\r\n background: rgba(28, 126, 201, 0.07);\r\n color: #1c7ec9;\r\n border: 1px solid rgba(28, 126, 201, 0.12);\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n .quiz-section__badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #22c55e;\r\n animation: pulseDot 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.3; transform: scale(0.6); }\r\n }\r\n\r\n .quiz-section__title {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(2rem, 3.6vw, 3.2rem);\r\n letter-spacing: -0.03em;\r\n color: #07294a;\r\n line-height: 1.1;\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .quiz-section__title .highlight {\r\n background: linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .quiz-section__subtitle {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: clamp(1rem, 1.1vw, 1.15rem);\r\n color: #6b7f94;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n line-height: 1.7;\r\n }\r\n\r\n .quiz-section__subtitle .source {\r\n display: inline-block;\r\n background: #eef6fc;\r\n padding: 0 8px;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n color: #0d4f8b;\r\n font-size: .8rem;\r\n }\r\n\r\n \/* ============================================\r\n WIDGET QUIZ\r\n ============================================ *\/\r\n .quiz {\r\n background: #ffffff;\r\n border-radius: 24px;\r\n padding: 2.5rem;\r\n border: 1px solid #eef2f6;\r\n box-shadow: 0 4px 24px rgba(7, 41, 74, 0.06);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .quiz:hover {\r\n box-shadow: 0 8px 40px rgba(7, 41, 74, 0.10);\r\n border-color: #d6ebfb;\r\n }\r\n\r\n \/* ============================================\r\n PROGRESSION\r\n ============================================ *\/\r\n .quiz__progress {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .quiz__progress-bar {\r\n flex: 1;\r\n height: 6px;\r\n background: #eef2f6;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .quiz__progress-fill {\r\n height: 100%;\r\n width: 25%;\r\n background: linear-gradient(90deg, #1c7ec9, #f4a61a);\r\n border-radius: 3px;\r\n transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .quiz__progress-text {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.8rem;\r\n color: #6b7f94;\r\n white-space: nowrap;\r\n min-width: 50px;\r\n text-align: right;\r\n }\r\n\r\n \/* ============================================\r\n QUESTIONS\r\n ============================================ *\/\r\n .quiz__question {\r\n display: none;\r\n animation: fadeSlide 0.5s ease-out forwards;\r\n }\r\n\r\n .quiz__question--active {\r\n display: block;\r\n }\r\n\r\n @keyframes fadeSlide {\r\n from { opacity: 0; transform: translateX(20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n .quiz__question-number {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n color: #1c7ec9;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .quiz__question-text {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: clamp(1.2rem, 1.5vw, 1.6rem);\r\n color: #07294a;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .quiz__question-context {\r\n font-size: 0.85rem;\r\n color: #6b7f94;\r\n margin-bottom: 1.5rem;\r\n padding: 0.6rem 1rem;\r\n background: #f8fafc;\r\n border-radius: 8px;\r\n border-left: 3px solid #1c7ec9;\r\n }\r\n\r\n .quiz__question-context strong {\r\n color: #07294a;\r\n }\r\n\r\n .quiz__question-context .source-link {\r\n color: #1c7ec9;\r\n text-decoration: none;\r\n font-weight: 500;\r\n }\r\n .quiz__question-context .source-link:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n \/* ============================================\r\n OPTIONS\r\n ============================================ *\/\r\n .quiz__options {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.6rem;\r\n }\r\n\r\n .quiz__option {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 0.9rem 1.2rem;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n color: #07294a;\r\n }\r\n\r\n .quiz__option:hover {\r\n border-color: #d6ebfb;\r\n background: #f0f7fd;\r\n transform: translateX(4px);\r\n }\r\n\r\n .quiz__option--selected {\r\n border-color: #1c7ec9;\r\n background: #eef6fc;\r\n }\r\n\r\n .quiz__option--selected .quiz__option-radio {\r\n border-color: #1c7ec9;\r\n background: #1c7ec9;\r\n }\r\n\r\n .quiz__option--selected .quiz__option-radio::after {\r\n content: '';\r\n display: block;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #ffffff;\r\n }\r\n\r\n .quiz__option-radio {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 2px solid #d6ebfb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .quiz__option-text {\r\n flex: 1;\r\n }\r\n\r\n .quiz__option-hint {\r\n font-size: 0.7rem;\r\n color: #6b7f94;\r\n font-weight: 400;\r\n margin-left: 0.5rem;\r\n }\r\n\r\n \/* ============================================\r\n NAVIGATION\r\n ============================================ *\/\r\n .quiz__nav {\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 1rem;\r\n margin-top: 2rem;\r\n padding-top: 1.5rem;\r\n border-top: 1px solid #eef2f6;\r\n }\r\n\r\n .btn--quiz {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.02em;\r\n text-decoration: none;\r\n padding: 0.7rem 1.8rem;\r\n border-radius: 2.5rem;\r\n transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n cursor: pointer;\r\n border: none;\r\n text-align: center;\r\n }\r\n\r\n .btn--quiz--prev {\r\n background: #f0f4f8;\r\n color: #6b7f94;\r\n }\r\n\r\n .btn--quiz--prev:hover {\r\n background: #e6ecf2;\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--prev:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n transform: none !important;\r\n }\r\n\r\n .btn--quiz--next {\r\n background: linear-gradient(135deg, #f4a61a 0%, #e0960e 100%);\r\n box-shadow: 0 4px 16px rgba(244, 166, 26, 0.25);\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--next:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 8px 30px rgba(244, 166, 26, 0.40);\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--next:disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n transform: none !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .btn--quiz .btn__icon {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .btn--quiz:hover .btn__icon {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================\r\n RESULTAT\r\n ============================================ *\/\r\n .quiz__result {\r\n display: none;\r\n animation: fadeSlide 0.6s ease-out forwards;\r\n text-align: center;\r\n padding: 1rem 0;\r\n }\r\n\r\n .quiz__result--active {\r\n display: block;\r\n }\r\n\r\n .quiz__result-score {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .quiz__result-circle {\r\n position: relative;\r\n width: 130px;\r\n height: 130px;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .quiz__result-circle svg {\r\n transform: rotate(-90deg);\r\n width: 130px;\r\n height: 130px;\r\n }\r\n\r\n .quiz__result-circle svg circle {\r\n transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .quiz__result-number {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: 2.6rem;\r\n color: #07294a;\r\n line-height: 1;\r\n }\r\n\r\n .quiz__result-number small {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: #6b7f94;\r\n }\r\n\r\n .quiz__result-label {\r\n display: inline-block;\r\n padding: 0.3rem 1.5rem;\r\n border-radius: 100px;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .quiz__result-label--faible {\r\n background: #dcfce7;\r\n color: #166534;\r\n }\r\n .quiz__result-label--moyen {\r\n background: #fef9c3;\r\n color: #854d0e;\r\n }\r\n .quiz__result-label--eleve {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n }\r\n .quiz__result-label--critique {\r\n background: #fecaca;\r\n color: #7f1d1d;\r\n }\r\n\r\n .quiz__result-title {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(1.4rem, 2vw, 1.8rem);\r\n color: #07294a;\r\n margin: 0.5rem 0 0.3rem;\r\n }\r\n\r\n .quiz__result-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: 1rem;\r\n color: #6b7f94;\r\n max-width: 550px;\r\n margin: 0 auto 1.5rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .quiz__result-details {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.6rem 1.5rem;\r\n max-width: 500px;\r\n margin: 0 auto 1.5rem;\r\n text-align: left;\r\n padding: 1rem 1.5rem;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n border: 1px solid #eef2f6;\r\n }\r\n\r\n .quiz__result-detail {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .quiz__result-detail-label {\r\n color: #6b7f94;\r\n }\r\n\r\n .quiz__result-detail-value {\r\n font-weight: 600;\r\n color: #07294a;\r\n }\r\n\r\n .quiz__result-sources {\r\n font-size: 0.75rem;\r\n color: #6b7f94;\r\n max-width: 550px;\r\n margin: 0 auto 1.5rem;\r\n padding: 0.8rem 1.2rem;\r\n background: #f0f7fd;\r\n border-radius: 8px;\r\n border: 1px solid #d6ebfb;\r\n text-align: left;\r\n }\r\n\r\n .quiz__result-sources strong {\r\n color: #07294a;\r\n }\r\n\r\n .quiz__result-sources a {\r\n color: #1c7ec9;\r\n text-decoration: none;\r\n }\r\n .quiz__result-sources a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n .quiz__result-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 1rem;\r\n }\r\n\r\n .btn--quiz--restart {\r\n background: #f0f4f8;\r\n color: #6b7f94;\r\n }\r\n\r\n .btn--quiz--restart:hover {\r\n background: #e6ecf2;\r\n color: #07294a;\r\n }\r\n\r\n \/* ============================================\r\n CTA ROUGE \"PARLER \u00c0 UN EXPERT\" \u2014 TEXTE BLANC\r\n ============================================ *\/\r\n .btn--quiz--cta {\r\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\r\n box-shadow: 0 4px 16px rgba(220, 38, 38, 0.30);\r\n color: #ffffff !important; \/* Texte blanc garanti *\/\r\n padding: 0.9rem 2.2rem;\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n border-radius: 2.5rem;\r\n border: none;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n cursor: pointer;\r\n font-family: 'Sora', sans-serif;\r\n }\r\n\r\n .btn--quiz--cta:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 8px 30px rgba(220, 38, 38, 0.50);\r\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n color: #ffffff !important;\r\n }\r\n\r\n .btn--quiz--cta .btn__icon {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .btn--quiz--cta:hover .btn__icon {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .quiz-section {\r\n padding: 3.5rem 1.5rem 4rem;\r\n min-height: auto;\r\n }\r\n\r\n .quiz {\r\n padding: 1.8rem;\r\n }\r\n\r\n .quiz__question-text {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .quiz__option {\r\n font-size: 0.85rem;\r\n padding: 0.7rem 1rem;\r\n }\r\n\r\n .quiz__nav {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn--quiz {\r\n flex: 1;\r\n justify-content: center;\r\n padding: 0.6rem 1.2rem;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .btn--quiz--cta {\r\n flex: 1;\r\n justify-content: center;\r\n padding: 0.7rem 1.2rem;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .quiz__result-details {\r\n grid-template-columns: 1fr;\r\n gap: 0.4rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .quiz {\r\n padding: 1.2rem;\r\n border-radius: 16px;\r\n }\r\n\r\n .quiz__question-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .quiz__option {\r\n font-size: 0.8rem;\r\n padding: 0.6rem 0.8rem;\r\n gap: 0.6rem;\r\n }\r\n\r\n .btn--quiz {\r\n font-size: 0.65rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .btn--quiz--cta {\r\n font-size: 0.7rem;\r\n padding: 0.6rem 1rem;\r\n }\r\n\r\n .quiz__result-circle {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .quiz__result-circle svg {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .quiz__result-number {\r\n font-size: 2rem;\r\n }\r\n\r\n .quiz__result-number small {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"quiz-section\">\r\n <div class=\"quiz-section__container\">\r\n\r\n \r\n <div class=\"quiz-section__header\">\r\n <div class=\"quiz-section__badge\">\r\n <span class=\"dot\"><\/span>\r\n Estimation basee sur des donnees publiques\r\n <\/div>\r\n <h2 class=\"quiz-section__title\">\r\n Quel est le <span class=\"highlight\">risque<\/span> de votre reseau ?\r\n <\/h2>\r\n <p class=\"quiz-section__subtitle\">\r\n Repondez a 4 questions pour obtenir une <strong>estimation indicative<\/strong>\r\n du risque de sinistre, basee sur les statistiques de\r\n <span class=\"source\">Eaufrance<\/span>,\r\n <span class=\"source\">France Assureurs<\/span> et\r\n <span class=\"source\">SDES<\/span>.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz\" id=\"quizApp\">\r\n\r\n \r\n <div class=\"quiz__progress\">\r\n <div class=\"quiz__progress-bar\">\r\n <div class=\"quiz__progress-fill\" id=\"progressFill\"><\/div>\r\n <\/div>\r\n <span class=\"quiz__progress-text\" id=\"progressText\">1\/4<\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"quizQuestions\">\r\n\r\n \r\n <div class=\"quiz__question quiz__question--active\" data-question=\"0\">\r\n <div class=\"quiz__question-number\">Question 1 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quel est votre type de batiment ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee France Assureurs :<\/strong> les degats des eaux representent\r\n <strong>44 %<\/strong> des sinistres habitation.\r\n <a href=\"https:\/\/www.franceassureurs.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"copropriete\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Copropriete<\/span>\r\n <span class=\"quiz__option-hint\">(risque de sinistre en cascade)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"syndic\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Syndic \/ Gestionnaire<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"tertiaire\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Tertiaire (bureau, commerce)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"collectivite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Collectivite \/ ERP<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"1\">\r\n <div class=\"quiz__question-number\">Question 2 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quand a eu lieu le dernier entretien de vos reseaux ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee Eaufrance :<\/strong> en France, <strong>18,8 %<\/strong> de l'eau distribuee\r\n est perdue par fuite (2023).\r\n <a href=\"https:\/\/www.eaufrance.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"recent\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Moins d'1 an<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"moyen\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">1 a 3 ans<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"ancien\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Plus de 3 ans<\/span>\r\n <span class=\"quiz__option-hint\">(facteur de risque majore)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"jamais\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Jamais realise<\/span>\r\n <span class=\"quiz__option-hint\">(risque tres eleve)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"2\">\r\n <div class=\"quiz__question-number\">Question 3 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Avez-vous deja rencontre des problemes ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee Observatoire de la securite :<\/strong> en moyenne,\r\n <strong>4 160<\/strong> degats des eaux par jour en France.\r\n <a href=\"https:\/\/www.observatoire-securite.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"urgent\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Oui, en urgence (debouchage, refoulement)<\/span>\r\n <span class=\"quiz__option-hint\">(signal d'alerte fort)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"occasionnel\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Oui, occasionnellement<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"rare\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Non, jamais de probleme<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"3\">\r\n <div class=\"quiz__question-number\">Question 4 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quel est votre objectif principal ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee SDES :<\/strong> l'anciennete du parc immobilier est un\r\n <strong>facteur de risque majeur<\/strong> pour les sinistres lies a l'eau.\r\n <a href=\"https:\/\/www.statistiques.developpement-durable.gouv.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"conformite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Assurer la conformite reglementaire<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"prevention\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Prevenir les problemes et les couts<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"renovation\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Renover \/ moderniser mes reseaux<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"tranquilite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Avoir une tranquillite d'esprit totale<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__result\" id=\"quizResult\">\r\n <div class=\"quiz__result-score\">\r\n <div class=\"quiz__result-circle\">\r\n <svg viewBox=\"0 0 120 120\">\r\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"#eef2f6\" stroke-width=\"10\"\/>\r\n <circle id=\"resultCircle\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"#1c7ec9\" stroke-width=\"10\"\r\n stroke-linecap=\"round\" stroke-dasharray=\"314.16\" stroke-dashoffset=\"314.16\"\/>\r\n <\/svg>\r\n <div class=\"quiz__result-number\">\r\n <span id=\"resultScore\">--<\/span><small>\/100<\/small>\r\n <\/div>\r\n <\/div>\r\n <span class=\"quiz__result-label\" id=\"resultLabel\">--<\/span>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-title\" id=\"resultTitle\">--<\/div>\r\n <div class=\"quiz__result-desc\" id=\"resultDesc\">--<\/div>\r\n\r\n <div class=\"quiz__result-details\">\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Risque de fuite (moy. nat.)<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFuite\">18,8 %<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Frequence des sinistres<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFrequence\">44 %<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Facteur principal<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFacteur\">--<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Recommandation<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailRecommandation\">--<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-sources\">\r\n <strong>Sources :<\/strong>\r\n Eaufrance (18,8 % de fuites),\r\n France Assureurs (44 % des sinistres),\r\n SDES (anciennete = facteur de risque),\r\n Observatoire securite (4 160 sinistres\/jour).\r\n <a href=\"#\" style=\"color:#1c7ec9;text-decoration:none;\">En savoir plus<\/a>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-actions\">\r\n <button class=\"btn--quiz btn--quiz--restart\" id=\"restartQuiz\">\r\n Refaire l'estimation\r\n <\/button>\r\n \r\n <a href=\"tel:0186957777\" class=\"btn--quiz--cta\">\r\n <span class=\"btn__icon\">\ud83d\udcde<\/span>\r\n Parler \u00e0 un expert\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__nav\" id=\"quizNav\">\r\n <button class=\"btn--quiz btn--quiz--prev\" id=\"prevBtn\" disabled>\r\n Precedent\r\n <\/button>\r\n <button class=\"btn--quiz btn--quiz--next\" id=\"nextBtn\">\r\n Suivant\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ ============================================\r\n \/\/ CONFIGURATION\r\n \/\/ ============================================\r\n const questions = document.querySelectorAll('.quiz__question');\r\n const totalQuestions = questions.length;\r\n let currentQuestion = 0;\r\n let answers = {};\r\n\r\n \/\/ Elements DOM\r\n const progressFill = document.getElementById('progressFill');\r\n const progressText = document.getElementById('progressText');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const quizNav = document.getElementById('quizNav');\r\n const quizResult = document.getElementById('quizResult');\r\n const quizQuestions = document.getElementById('quizQuestions');\r\n\r\n const resultCircle = document.getElementById('resultCircle');\r\n const resultScore = document.getElementById('resultScore');\r\n const resultLabel = document.getElementById('resultLabel');\r\n const resultTitle = document.getElementById('resultTitle');\r\n const resultDesc = document.getElementById('resultDesc');\r\n const detailFuite = document.getElementById('detailFuite');\r\n const detailFrequence = document.getElementById('detailFrequence');\r\n const detailFacteur = document.getElementById('detailFacteur');\r\n const detailRecommandation = document.getElementById('detailRecommandation');\r\n\r\n const circumference = 314.16;\r\n\r\n \/\/ ============================================\r\n \/\/ ALGORITHME BASE SUR DES STATISTIQUES REELLES\r\n \/\/ ============================================\r\n\r\n function calculerEstimation(data) {\r\n \/\/ ---- Base : 18,8 % de fuites (Eaufrance) ----\r\n let score = 18.8;\r\n\r\n \/\/ ---- Facteur type de batiment (France Assureurs) ----\r\n const typeFactors = {\r\n 'copropriete': { poids: 10, label: 'Copropriete \u2013 risque en cascade' },\r\n 'syndic': { poids: 8, label: 'Syndic \u2013 gestion multi-reseaux' },\r\n 'tertiaire': { poids: 6, label: 'Tertiaire \u2013 usage intensif' },\r\n 'collectivite': { poids: 12, label: 'Collectivite \u2013 grands volumes' }\r\n };\r\n if (data.type && typeFactors[data.type]) {\r\n score += typeFactors[data.type].poids;\r\n }\r\n\r\n \/\/ ---- Facteur anciennete de l'entretien (SDES \/ Cerema) ----\r\n const entretienFactors = {\r\n 'recent': { poids: 0, label: 'Entretien recent \u2013 risque maitrise' },\r\n 'moyen': { poids: 8, label: 'Entretien 1-3 ans \u2013 risque modere' },\r\n 'ancien': { poids: 18, label: 'Entretien > 3 ans \u2013 risque eleve' },\r\n 'jamais': { poids: 28, label: 'Jamais entretenu \u2013 risque critique' }\r\n };\r\n if (data.entretien && entretienFactors[data.entretien]) {\r\n score += entretienFactors[data.entretien].poids;\r\n }\r\n\r\n \/\/ ---- Facteur problemes constates (Observatoire securite) ----\r\n const problemeFactors = {\r\n 'urgent': { poids: 22, label: 'Urgence \u2013 signal fort' },\r\n 'occasionnel': { poids: 10, label: 'Problemes occasionnels' },\r\n 'rare': { poids: -5, label: 'Aucun probleme signale' }\r\n };\r\n if (data.probleme && problemeFactors[data.probleme]) {\r\n score += problemeFactors[data.probleme].poids;\r\n }\r\n\r\n \/\/ ---- Facteur objectif (France Assureurs \/ SDES) ----\r\n const objectifFactors = {\r\n 'conformite': { poids: 2, label: 'Conformite \u2013 approche minimale' },\r\n 'prevention': { poids: 0, label: 'Prevention \u2013 bonne approche' },\r\n 'renovation': { poids: 8, label: 'Renovation \u2013 modernisation necessaire' },\r\n 'tranquilite': { poids: 4, label: 'Tranquillite \u2013 approche sereine' }\r\n };\r\n if (data.objectif && objectifFactors[data.objectif]) {\r\n score += objectifFactors[data.objectif].poids;\r\n }\r\n\r\n \/\/ ---- Normalisation ----\r\n score = Math.max(0, Math.min(100, Math.round(score)));\r\n\r\n \/\/ ---- Niveau de risque ----\r\n let niveau, label, couleur;\r\n if (score < 30) {\r\n niveau = 'faible';\r\n label = 'Risque Faible';\r\n couleur = '#22c55e';\r\n } else if (score < 50) {\r\n niveau = 'moyen';\r\n label = 'Risque Moyen';\r\n couleur = '#eab308';\r\n } else if (score < 70) {\r\n niveau = 'eleve';\r\n label = 'Risque Eleve';\r\n couleur = '#f97316';\r\n } else {\r\n niveau = 'critique';\r\n label = 'Risque Critique';\r\n couleur = '#ef4444';\r\n }\r\n\r\n \/\/ ---- Recommandation ----\r\n let recommandation;\r\n if (score < 30) recommandation = 'Surveillance annuelle recommandee';\r\n else if (score < 50) recommandation = 'Inspection camera tous les 2 ans';\r\n else if (score < 70) recommandation = 'Inspection camera dans l\\'annee';\r\n else recommandation = 'Audit d\\'urgence + plan de renovation';\r\n\r\n \/\/ ---- Facteur principal ----\r\n let facteurPrincipal = 'Age du reseau';\r\n if (data.entretien === 'jamais' || data.entretien === 'ancien') facteurPrincipal = 'Anciennete de l\\'entretien';\r\n else if (data.probleme === 'urgent') facteurPrincipal = 'Problemes urgents constates';\r\n else if (data.type === 'collectivite' || data.type === 'copropriete') facteurPrincipal =\r\n 'Densite \/ occupation';\r\n\r\n return {\r\n score: score,\r\n niveau: niveau,\r\n label: label,\r\n couleur: couleur,\r\n recommandation: recommandation,\r\n facteurPrincipal: facteurPrincipal,\r\n details: {\r\n fuite: '18,8 % (moyenne nationale)',\r\n frequence: '44 % des sinistres habitation'\r\n }\r\n };\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ FONCTIONS DU QUIZ\r\n \/\/ ============================================\r\n\r\n function updateProgress() {\r\n const progress = ((currentQuestion + 1) \/ totalQuestions) * 100;\r\n progressFill.style.width = progress + '%';\r\n progressText.textContent = (currentQuestion + 1) + '\/' + totalQuestions;\r\n }\r\n\r\n function showQuestion(index) {\r\n questions.forEach((q, i) => {\r\n q.classList.toggle('quiz__question--active', i === index);\r\n });\r\n\r\n prevBtn.disabled = index === 0;\r\n if (index === totalQuestions - 1) {\r\n const hasAnswer = answers[index] !== undefined;\r\n nextBtn.textContent = hasAnswer ? 'Voir mon estimation' : 'Terminer';\r\n nextBtn.disabled = !hasAnswer;\r\n } else {\r\n nextBtn.textContent = 'Suivant';\r\n nextBtn.disabled = false;\r\n }\r\n\r\n updateProgress();\r\n }\r\n\r\n function selectOption(option) {\r\n const parent = option.closest('.quiz__question');\r\n const questionIndex = parseInt(parent.dataset.question);\r\n\r\n parent.querySelectorAll('.quiz__option').forEach(opt => {\r\n opt.classList.remove('quiz__option--selected');\r\n });\r\n option.classList.add('quiz__option--selected');\r\n\r\n const value = option.dataset.value;\r\n\r\n \/\/ Mapper selon la question\r\n const questionMap = {\r\n 0: 'type',\r\n 1: 'entretien',\r\n 2: 'probleme',\r\n 3: 'objectif'\r\n };\r\n const key = questionMap[questionIndex];\r\n answers[key] = value;\r\n\r\n if (questionIndex === totalQuestions - 1) {\r\n nextBtn.textContent = 'Voir mon estimation';\r\n nextBtn.disabled = false;\r\n }\r\n }\r\n\r\n function showResult() {\r\n const data = {\r\n type: answers.type || 'copropriete',\r\n entretien: answers.entretien || 'jamais',\r\n probleme: answers.probleme || 'urgent',\r\n objectif: answers.objectif || 'renovation'\r\n };\r\n\r\n const result = calculerEstimation(data);\r\n\r\n \/\/ Cercle\r\n const offset = circumference - (result.score \/ 100) * circumference;\r\n resultCircle.style.strokeDashoffset = offset;\r\n resultCircle.style.stroke = result.couleur;\r\n\r\n \/\/ Score\r\n resultScore.textContent = result.score;\r\n\r\n \/\/ Label\r\n resultLabel.textContent = result.label;\r\n resultLabel.className = 'quiz__result-label quiz__result-label--' + result.niveau;\r\n\r\n \/\/ Titre et description\r\n const titres = {\r\n faible: 'Votre reseau semble en bon etat',\r\n moyen: 'Une vigilance est recommandee',\r\n eleve: 'Un risque significatif est identifie',\r\n critique: 'Une urgence est a envisager'\r\n };\r\n resultTitle.textContent = titres[result.niveau] || 'Estimation de votre risque';\r\n resultDesc.textContent = 'Cette estimation est basee sur les statistiques publiques. Un diagnostic terrain permet de confirmer l\\'etat reel.';\r\n\r\n \/\/ Details\r\n detailFuite.textContent = result.details.fuite;\r\n detailFrequence.textContent = result.details.frequence;\r\n detailFacteur.textContent = result.facteurPrincipal;\r\n detailRecommandation.textContent = result.recommandation;\r\n\r\n \/\/ Afficher\r\n quizQuestions.style.display = 'none';\r\n quizNav.style.display = 'none';\r\n quizResult.classList.add('quiz__result--active');\r\n\r\n \/\/ Animation\r\n quizResult.style.animation = 'none';\r\n setTimeout(() => {\r\n quizResult.style.animation = 'fadeSlide 0.6s ease-out forwards';\r\n }, 10);\r\n }\r\n\r\n function resetQuiz() {\r\n currentQuestion = 0;\r\n answers = {};\r\n\r\n document.querySelectorAll('.quiz__option').forEach(opt => {\r\n opt.classList.remove('quiz__option--selected');\r\n });\r\n\r\n quizResult.classList.remove('quiz__result--active');\r\n quizQuestions.style.display = 'block';\r\n quizNav.style.display = 'flex';\r\n\r\n showQuestion(0);\r\n nextBtn.textContent = 'Suivant';\r\n nextBtn.disabled = false;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ EVENEMENTS\r\n \/\/ ============================================\r\n\r\n document.querySelectorAll('.quiz__option').forEach(option => {\r\n option.addEventListener('click', function() {\r\n selectOption(this);\r\n });\r\n });\r\n\r\n prevBtn.addEventListener('click', function() {\r\n if (currentQuestion > 0) {\r\n currentQuestion--;\r\n showQuestion(currentQuestion);\r\n }\r\n });\r\n\r\n nextBtn.addEventListener('click', function() {\r\n if (currentQuestion === totalQuestions - 1) {\r\n const requiredKeys = ['type', 'entretien', 'probleme', 'objectif'];\r\n const allAnswered = requiredKeys.every(k => answers[k] !== undefined);\r\n if (allAnswered) {\r\n showResult();\r\n } else {\r\n alert('Veuillez repondre a toutes les questions avant de voir le resultat.');\r\n }\r\n } else {\r\n const questionMap = { 0: 'type', 1: 'entretien', 2: 'probleme', 3: 'objectif' };\r\n const key = questionMap[currentQuestion];\r\n if (answers[key] !== undefined) {\r\n currentQuestion++;\r\n showQuestion(currentQuestion);\r\n } else {\r\n alert('Veuillez selectionner une reponse avant de continuer.');\r\n }\r\n }\r\n });\r\n\r\n document.getElementById('restartQuiz').addEventListener('click', resetQuiz);\r\n\r\n \/\/ ============================================\r\n \/\/ INIT\r\n \/\/ ============================================\r\n showQuestion(0);\r\n\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4929a6b e-con-full e-flex e-con e-parent\" data-id=\"4929a6b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bb68cf elementor-widget elementor-widget-html\" data-id=\"1bb68cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n<title>BT Plus \u2014 Les b\u00e9n\u00e9fices de l'entretien pr\u00e9ventif<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue-900:#07294a;\r\n --blue-800:#0a3666;\r\n --blue-700:#0d4f8b;\r\n --blue-500:#1c7ec9;\r\n --blue-300:#7cc0ee;\r\n --blue-100:#d6ebfb;\r\n --blue-50:#eef6fc;\r\n --orange:#f4a61a;\r\n --orange-dark:#d98a0c;\r\n --ink:#0c2238;\r\n --slate:#48637d;\r\n --paper:#ffffff;\r\n --red:#dc3545;\r\n --green:#28a745;\r\n\r\n --font-display:\"Sora\",sans-serif;\r\n --font-body:\"Inter\",sans-serif;\r\n\r\n --shadow-sm:0 2px 10px rgba(7,41,74,.06);\r\n --shadow-md:0 18px 40px -16px rgba(7,41,74,.30);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n font-family:var(--font-body);\r\n color:var(--ink);\r\n background:var(--paper);\r\n -webkit-font-smoothing:antialiased;\r\n line-height:1.6;\r\n }\r\n\r\n \/* ============================================\r\n SECTION B\u00c9N\u00c9FICES\r\n ============================================ *\/\r\n .benefices {\r\n padding:80px 24px 100px;\r\n background:\r\n radial-gradient(ellipse at 20% 50%, var(--blue-50), transparent 60%),\r\n radial-gradient(ellipse at 80% 50%, var(--blue-100), transparent 60%),\r\n var(--paper);\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n\r\n .benefices__container {\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:1;\r\n }\r\n\r\n \/* ============================================\r\n EN-T\u00caTE\r\n ============================================ *\/\r\n .benefices__header {\r\n text-align:center;\r\n max-width:780px;\r\n margin:0 auto 50px;\r\n }\r\n\r\n .benefices__badge {\r\n display:inline-flex;\r\n align-items:center;\r\n gap:0.6rem;\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:0.7rem;\r\n letter-spacing:0.1em;\r\n text-transform:uppercase;\r\n padding:0.4rem 1.4rem 0.4rem 1rem;\r\n border-radius:2rem;\r\n background:rgba(28,126,201,0.07);\r\n color:var(--blue-500);\r\n border:1px solid rgba(28,126,201,0.12);\r\n margin-bottom:1.2rem;\r\n }\r\n\r\n .benefices__badge .dot {\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:var(--blue-500);\r\n animation:pulseDot 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%,100%{opacity:1;transform:scale(1)}\r\n 50%{opacity:0.3;transform:scale(0.6)}\r\n }\r\n\r\n .benefices__title {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:clamp(2rem,3.6vw,3.2rem);\r\n letter-spacing:-0.03em;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n margin-bottom:0.8rem;\r\n }\r\n\r\n .benefices__title .highlight {\r\n background:linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n }\r\n\r\n .benefices__subtitle {\r\n font-family:var(--font-body);\r\n font-weight:400;\r\n font-size:clamp(1rem,1.1vw,1.15rem);\r\n color:var(--slate);\r\n max-width:600px;\r\n margin:0 auto;\r\n line-height:1.7;\r\n }\r\n\r\n \/* ============================================\r\n GRILLE DES B\u00c9N\u00c9FICES\r\n ============================================ *\/\r\n .benefices__grid {\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:24px;\r\n margin-top:20px;\r\n }\r\n\r\n .benefices__card {\r\n background:var(--paper);\r\n border-radius:20px;\r\n border:1px solid var(--blue-100);\r\n padding:30px 24px 28px;\r\n box-shadow:var(--shadow-sm);\r\n transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n text-align:center;\r\n }\r\n\r\n .benefices__card:hover {\r\n transform:translateY(-8px);\r\n border-color:var(--blue-300);\r\n box-shadow:var(--shadow-md);\r\n }\r\n\r\n \/* Nombre *\/\r\n .benefices__card-number {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:2.8rem;\r\n line-height:1;\r\n color:rgba(28,126,201,0.06);\r\n margin-bottom:8px;\r\n transition:color 0.3s ease;\r\n }\r\n\r\n .benefices__card:hover .benefices__card-number {\r\n color:rgba(28,126,201,0.12);\r\n }\r\n\r\n \/* Titre *\/\r\n .benefices__card-title {\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n margin-bottom:8px;\r\n }\r\n\r\n .benefices__card-title .highlight {\r\n background:linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n }\r\n\r\n .benefices__card-desc {\r\n font-size:0.85rem;\r\n color:var(--slate);\r\n line-height:1.6;\r\n }\r\n\r\n \/* ============================================\r\n BANDEAU CHIFFRES CL\u00c9S\r\n ============================================ *\/\r\n .benefices__chiffres {\r\n margin-top:50px;\r\n background:var(--blue-900);\r\n border-radius:20px;\r\n padding:40px 50px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:30px;\r\n color:#fff;\r\n box-shadow:0 20px 50px -12px rgba(7,41,74,0.35);\r\n }\r\n\r\n .benefices__chiffres-item {\r\n text-align:center;\r\n }\r\n\r\n .benefices__chiffres-item .number {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:2.4rem;\r\n color:var(--orange);\r\n display:block;\r\n line-height:1;\r\n }\r\n\r\n .benefices__chiffres-item .label {\r\n font-size:0.85rem;\r\n color:rgba(255,255,255,0.7);\r\n margin-top:4px;\r\n }\r\n\r\n .benefices__chiffres-item .sub {\r\n font-size:0.7rem;\r\n color:rgba(255,255,255,0.4);\r\n margin-top:2px;\r\n }\r\n\r\n \/* ============================================\r\n ANIMATIONS\r\n ============================================ *\/\r\n .reveal-benefice {\r\n opacity:0;\r\n transform:translateY(30px);\r\n animation:slideUp 0.7s cubic-bezier(0.2,0.7,0.3,1) forwards;\r\n }\r\n\r\n .reveal-benefice:nth-child(1){animation-delay:0.05s}\r\n .reveal-benefice:nth-child(2){animation-delay:0.12s}\r\n .reveal-benefice:nth-child(3){animation-delay:0.19s}\r\n .reveal-benefice:nth-child(4){animation-delay:0.26s}\r\n\r\n @keyframes slideUp {\r\n to{opacity:1;transform:translateY(0)}\r\n }\r\n\r\n @media(prefers-reduced-motion:reduce){\r\n .reveal-benefice{opacity:1;transform:none;animation:none}\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media(max-width:1024px){\r\n .benefices__grid {\r\n grid-template-columns:repeat(2,1fr);\r\n gap:20px;\r\n }\r\n\r\n .benefices__chiffres {\r\n grid-template-columns:repeat(3,1fr);\r\n padding:30px 24px;\r\n }\r\n }\r\n\r\n @media(max-width:640px){\r\n .benefices {\r\n padding:50px 16px 70px;\r\n }\r\n\r\n .benefices__grid {\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n }\r\n\r\n .benefices__card {\r\n padding:24px 20px;\r\n text-align:left;\r\n display:flex;\r\n gap:16px;\r\n align-items:flex-start;\r\n }\r\n\r\n .benefices__card-number {\r\n font-size:2rem;\r\n margin-bottom:0;\r\n flex-shrink:0;\r\n min-width:40px;\r\n }\r\n\r\n .benefices__card-content {\r\n flex:1;\r\n }\r\n\r\n .benefices__card-title {\r\n font-size:0.95rem;\r\n margin-bottom:4px;\r\n }\r\n\r\n .benefices__card-desc {\r\n font-size:0.8rem;\r\n }\r\n\r\n .benefices__chiffres {\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n padding:24px;\r\n }\r\n\r\n .benefices__chiffres-item .number {\r\n font-size:1.8rem;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"benefices\">\r\n <div class=\"benefices__container\">\r\n\r\n \r\n <div class=\"benefices__header\">\r\n <span class=\"benefices__badge\">\r\n <span class=\"dot\"><\/span>\r\n Pourquoi anticiper ?\r\n <\/span>\r\n <h2 class=\"benefices__title\">\r\n Les b\u00e9n\u00e9fices <span class=\"highlight\">d'un entretien pr\u00e9ventif<\/span>\r\n <\/h2>\r\n <p class=\"benefices__subtitle\">\r\n Un r\u00e9seau bien entretenu, c'est moins de pannes, moins de co\u00fbts et plus de s\u00e9r\u00e9nit\u00e9.\r\n Voici ce que vous gagnez en agissant avant qu'il ne soit trop tard.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__grid\">\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">01<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">\u00c9conomies <span class=\"highlight\">durables<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Un entretien r\u00e9gulier co\u00fbte jusqu'\u00e0 5 fois moins cher qu'une intervention d'urgence.\r\n Anticipez pour ma\u00eetriser votre budget.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">02<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Tranquillit\u00e9 <span class=\"highlight\">d'esprit<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Finis les stress des d\u00e9bordements et des refoulements.\r\n Vous dormez sur vos deux oreilles avec un r\u00e9seau sous contr\u00f4le.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">03<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Conformit\u00e9 <span class=\"highlight\">assur\u00e9e<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Respectez les normes environnementales et r\u00e9glementaires\r\n avec un r\u00e9seau toujours en conformit\u00e9.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">04<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Patrimoine <span class=\"highlight\">pr\u00e9serv\u00e9<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Un r\u00e9seau entretenu, c'est un b\u00e2timent qui se d\u00e9grade moins vite.\r\n Vous prot\u00e9gez la valeur de votre patrimoine immobilier.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9acf402 e-con-full e-flex e-con e-parent\" data-id=\"9acf402\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c301154 elementor-widget elementor-widget-html\" data-id=\"c301154\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n.contact { padding: 5rem 5% 6rem; position: relative; min-height: 100vh; display: flex; align-items: center;\r\n background: radial-gradient(1100px 520px at 78% -8%, #d6ebfb, transparent 60%), linear-gradient(180deg, #fbfdff 0%, #eef6fc 100%);\r\n overflow: hidden; box-sizing: border-box; }\r\n.contact *, .contact *::before, .contact *::after { box-sizing: border-box; }\r\n.contact__waves { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; z-index: 0; pointer-events: none; }\r\n.contact__waves svg { display: block; width: 100%; height: 80px; }\r\n.contact__waves .wave-back use { animation: wavemove 11s linear infinite; opacity: 0.55; }\r\n.contact__waves .wave-mid use { animation: wavemove 8s linear infinite reverse; opacity: 0.8; }\r\n.contact__waves .wave-front use { animation: wavemove 6s linear infinite; }\r\n@keyframes wavemove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\r\n.contact__container { max-width: 1280px; margin: 0 auto; width: 100%; position: relative; z-index: 1; }\r\n.contact__header { text-align: center; max-width: 780px; margin: 0 auto 3.5rem; }\r\n.contact__badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1.4rem 0.4rem 1rem; border-radius: 2rem; background: rgba(28, 126, 201, 0.07); color: #1c7ec9; border: 1px solid rgba(28, 126, 201, 0.12); margin-bottom: 1.2rem; }\r\n.contact__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #1c7ec9; animation: pulseDot 2s ease-in-out infinite; }\r\n@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.6); } }\r\n.contact__title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.03em; color: #07294a; line-height: 1.1; margin-bottom: 0.8rem; }\r\n.contact__title .highlight { background: linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.contact__subtitle { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(1rem, 1.1vw, 1.15rem); color: #6b7f94; max-width: 600px; margin: 0 auto; line-height: 1.7; }\r\n.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }\r\n.contact__form { background: #ffffff; border-radius: 24px; padding: 2.5rem; border: 1px solid #eef2f6; box-shadow: 0 2px 12px rgba(7, 41, 74, 0.04); transition: all 0.4s ease; position: relative; }\r\n.contact__form:hover { box-shadow: 0 8px 40px rgba(7, 41, 74, 0.08); border-color: #d6ebfb; }\r\n.contact__form-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; color: #07294a; margin-bottom: 0.3rem; }\r\n.contact__form-subtitle { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.9rem; color: #6b7f94; margin-bottom: 1.5rem; }\r\n.contact__form-group { margin-bottom: 1.2rem; }\r\n.contact__form-group label { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.7rem; color: #6b7f94; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }\r\n.contact__form-group label .required { color: #dc2626; }\r\n.contact__form-group input, .contact__form-group select, .contact__form-group textarea { width: 100%; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid #eef2f6; background: #f8fafc; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #07294a; transition: all 0.3s ease; outline: none; }\r\n.contact__form-group input:focus, .contact__form-group select:focus, .contact__form-group textarea:focus { border-color: #1c7ec9; background: #ffffff; box-shadow: 0 0 0 4px rgba(28, 126, 201, 0.06); }\r\n.contact__form-group input::placeholder, .contact__form-group textarea::placeholder { color: #b0c0d0; }\r\n.contact__form-group select option { background: #ffffff; color: #07294a; }\r\n.contact__form-group textarea { resize: vertical; min-height: 100px; }\r\n.contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.contact__form-group--file { position: relative; }\r\n.contact__form-group--file .file-drop-zone { border: 2px dashed #eef2f6; border-radius: 12px; padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.3s ease; background: #f8fafc; }\r\n.contact__form-group--file .file-drop-zone:hover { border-color: #1c7ec9; background: #eef6fc; }\r\n.contact__form-group--file .file-drop-zone.dragover { border-color: #f4a61a; background: rgba(244, 166, 26, 0.04); }\r\n.contact__form-group--file .file-drop-zone i { font-size: 2rem; color: #1c7ec9; display: block; margin-bottom: 0.5rem; }\r\n.contact__form-group--file .file-drop-zone p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.85rem; color: #6b7f94; margin: 0; }\r\n.contact__form-group--file .file-drop-zone .file-types { font-size: 0.7rem; color: #b0c0d0; margin-top: 0.3rem; }\r\n.contact__form-group--file input[type=\"file\"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }\r\n.contact__form-group--file .file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }\r\n.contact__form-group--file .file-item { display: inline-flex; align-items: center; gap: 0.5rem; background: #eef6fc; padding: 0.3rem 0.8rem 0.3rem 0.6rem; border-radius: 20px; font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #1c7ec9; border: 1px solid #d6ebfb; }\r\n.contact__form-group--file .file-item i { font-size: 0.8rem; color: #1c7ec9; }\r\n.contact__form-group--file .file-item .file-remove { cursor: pointer; color: #6b7f94; transition: color 0.3s ease; font-size: 0.7rem; }\r\n.contact__form-group--file .file-item .file-remove:hover { color: #dc2626; }\r\n\r\n\/* ---- Consentement RGPD ---- *\/\r\n.contact__consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.5rem; }\r\n.contact__consent input[type=\"checkbox\"] { width: 18px; height: 18px; min-width: 18px; margin-top: 0.15rem; accent-color: #1c7ec9; cursor: pointer; flex-shrink: 0; }\r\n.contact__consent label { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.8rem; line-height: 1.5; color: #6b7f94; text-transform: none; letter-spacing: 0; margin-bottom: 0; cursor: pointer; }\r\n.contact__consent label .required { color: #dc2626; }\r\n.contact__consent label a { color: #1c7ec9; text-decoration: underline; }\r\n.contact__consent label a:hover { color: #07294a; }\r\n\r\n.btn--contact { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; text-decoration: none; padding: 0.9rem 2.4rem; border-radius: 3rem; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; border: none; text-align: center; background: linear-gradient(135deg, #f4a61a 0%, #e0960e 100%); box-shadow: 0 4px 16px rgba(244, 166, 26, 0.25); color: #07294a; width: 100%; }\r\n.btn--contact:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(244, 166, 26, 0.40); color: #07294a; }\r\n.btn--contact .btn__icon { transition: transform 0.3s ease; }\r\n.btn--contact:hover .btn__icon { transform: translateX(4px); }\r\n.contact__info { display: flex; flex-direction: column; gap: 1.2rem; }\r\n.contact__info-card { background: #ffffff; border-radius: 16px; padding: 1.5rem 1.8rem; border: 1px solid #eef2f6; transition: all 0.4s ease; display: flex; align-items: center; gap: 1.2rem; box-shadow: 0 2px 8px rgba(7, 41, 74, 0.03); }\r\n.contact__info-card:hover { transform: translateX(6px); border-color: #1c7ec9; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.08); }\r\n.contact__info-icon { width: 50px; height: 50px; border-radius: 14px; background: #f0f4f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }\r\n.contact__info-card:hover .contact__info-icon { background: #eef6fc; }\r\n.contact__info-icon i { font-size: 1.3rem; color: #1c7ec9; }\r\n.contact__info-content h4 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; color: #07294a; margin-bottom: 0.1rem; }\r\n.contact__info-content p, .contact__info-content a { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.9rem; color: #6b7f94; text-decoration: none; transition: color 0.3s ease; }\r\n.contact__info-content a:hover { color: #1c7ec9; }\r\n.contact__hours { background: #ffffff; border-radius: 16px; padding: 1.5rem 1.8rem; border: 1px solid #eef2f6; box-shadow: 0 2px 8px rgba(7, 41, 74, 0.03); transition: all 0.4s ease; }\r\n.contact__hours:hover { border-color: #d6ebfb; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.06); }\r\n.contact__hours-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; color: #6b7f94; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.8rem; }\r\n.contact__hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; }\r\n.contact__hours-day { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; color: #6b7f94; }\r\n.contact__hours-time { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; color: #07294a; text-align: right; }\r\n.contact__hours-time .urgent { color: #1c7ec9; font-weight: 700; }\r\n.contact__map { border-radius: 16px; overflow: hidden; border: 1px solid #eef2f6; height: 200px; background: #f8fafc; transition: all 0.4s ease; }\r\n.contact__map:hover { border-color: #d6ebfb; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.06); }\r\n.contact__map iframe { width: 100%; height: 100%; border: none; }\r\n@media (max-width: 992px) {\r\n .contact__grid { grid-template-columns: 1fr; gap: 2rem; }\r\n .contact__form { padding: 2rem; }\r\n .contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n .contact__hours-grid { grid-template-columns: 1fr 1fr; }\r\n .contact__map { height: 180px; }\r\n}\r\n@media (max-width: 768px) {\r\n .contact { padding: 3.5rem 1.5rem 4rem; min-height: auto; }\r\n .contact__form { padding: 1.5rem; border-radius: 16px; }\r\n .contact__form-row { grid-template-columns: 1fr; gap: 0; }\r\n .contact__info { grid-template-columns: 1fr; gap: 1rem; }\r\n .contact__info-card { padding: 1.2rem 1.5rem; }\r\n .contact__hours { padding: 1.2rem 1.5rem; }\r\n .contact__hours-grid { grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; }\r\n .contact__hours-day { font-size: 0.75rem; }\r\n .contact__hours-time { font-size: 0.75rem; }\r\n .contact__map { height: 150px; }\r\n .btn--contact { padding: 0.7rem 1.8rem; font-size: 0.75rem; }\r\n .contact__form-group--file .file-drop-zone { padding: 1rem; }\r\n .contact__form-group--file .file-drop-zone i { font-size: 1.5rem; }\r\n .contact__waves svg { height: 40px; }\r\n}\r\n@media (max-width: 480px) {\r\n .contact__form { padding: 1rem; }\r\n .contact__info-card { padding: 1rem; }\r\n .contact__info-icon { width: 40px; height: 40px; }\r\n .contact__info-icon i { font-size: 1rem; }\r\n .contact__hours { padding: 1rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"contact\">\r\n <div class=\"contact__container\">\r\n\r\n <div class=\"contact__header\">\r\n <span class=\"contact__badge\"><span class=\"dot\"><\/span> Contactez-nous<\/span>\r\n <h2 class=\"contact__title\">Pret a <span class=\"highlight\">securiser<\/span> vos reseaux ?<\/h2>\r\n <p class=\"contact__subtitle\">Une question, un devis, une urgence ? Notre equipe est a votre ecoute 24h\/24 et 7j\/7.<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact__grid\">\r\n\r\n \r\n <div class=\"contact__form\">\r\n <h3 class=\"contact__form-title\">Demandez un diagnostic<\/h3>\r\n <p class=\"contact__form-subtitle\">Remplissez le formulaire et nous vous recontacterons sous 24h.<\/p>\r\n\r\n \r\n <form id=\"contactForm\"\r\n action=\"https:\/\/formsubmit.co\/info-contact@btplus.fr\"\r\n method=\"POST\"\r\n enctype=\"multipart\/form-data\">\r\n\r\n <input type=\"hidden\" name=\"_subject\" value=\"Nouvelle demande de diagnostic - Site BT Plus\">\r\n <input type=\"hidden\" name=\"_template\" value=\"table\">\r\n \r\n <input type=\"hidden\" name=\"_cc\" value=\"marketing@btgroup-france.com\">\r\n <input type=\"text\" name=\"_honey\" style=\"display:none\">\r\n \r\n\r\n <div class=\"contact__form-row\">\r\n <div class=\"contact__form-group\">\r\n <label for=\"nom\">Nom complet <span class=\"required\">*<\/span><\/label>\r\n <input type=\"text\" id=\"nom\" name=\"Nom complet\" placeholder=\"Jean Dupont\" required \/>\r\n <\/div>\r\n <div class=\"contact__form-group\">\r\n <label for=\"email\">Email <span class=\"required\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"jean@exemple.fr\" required \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__form-row\">\r\n <div class=\"contact__form-group\">\r\n <label for=\"telephone\">Telephone <span class=\"required\">*<\/span><\/label>\r\n <input type=\"tel\" id=\"telephone\" name=\"Telephone\" placeholder=\"01 23 45 67 89\" required \/>\r\n <\/div>\r\n <div class=\"contact__form-group\">\r\n <label for=\"cp\">Code postal<\/label>\r\n <input type=\"text\" id=\"cp\" name=\"Code postal\" placeholder=\"75000\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"type_batiment\">Type de batiment<\/label>\r\n <select id=\"type_batiment\" name=\"Type de batiment\">\r\n <option value=\"\">Selectionnez...<\/option>\r\n <option value=\"copropriete\">Copropriete<\/option>\r\n <option value=\"syndic\">Syndic<\/option>\r\n <option value=\"bailleur\">Bailleur social<\/option>\r\n <option value=\"erp\">ERP (Etablissement recevant du public)<\/option>\r\n <option value=\"tertiaire\">Tertiaire (bureau, commerce)<\/option>\r\n <option value=\"collectivite\">Collectivite<\/option>\r\n <option value=\"particulier\">Particulier<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"type_besoin\">Type de besoin<\/label>\r\n <select id=\"type_besoin\" name=\"Type de besoin\">\r\n <option value=\"\">Selectionnez...<\/option>\r\n <option value=\"urgence\">Urgence (debouchage, curage)<\/option>\r\n <option value=\"entretien\">Entretien preventif<\/option>\r\n <option value=\"diagnostic\">Diagnostic \/ Inspection<\/option>\r\n <option value=\"travaux\">Travaux \/ Renovation<\/option>\r\n <option value=\"contrat\">Contrat d'entretien<\/option>\r\n <option value=\"devis\">Demande de devis<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"message\">Message<\/label>\r\n <textarea id=\"message\" name=\"Message\" placeholder=\"Decrivez votre situation...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group contact__form-group--file\">\r\n <label>Ajouter une photo <span style=\"font-weight:400;text-transform:none;color:#b0c0d0;\">(optionnel - une seule)<\/span><\/label>\r\n <div class=\"file-drop-zone\" id=\"fileDropZone\">\r\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\r\n <p>Glissez une photo ici ou cliquez pour la selectionner<\/p>\r\n <div class=\"file-types\">JPG, PNG, GIF - une seule photo, 5MB max<\/div>\r\n <input type=\"file\" id=\"fileInput\" name=\"attachment\" accept=\"image\/*\" \/>\r\n <\/div>\r\n <div class=\"file-list\" id=\"fileList\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact__consent\">\r\n <input type=\"checkbox\" id=\"consent\" name=\"Consentement RGPD\" value=\"J'accepte\" required \/>\r\n <label for=\"consent\">\r\n J'accepte que les informations saisies dans ce formulaire soient utilisees par BT Plus\r\n afin de traiter ma demande et de me recontacter. Conformement au RGPD, je dispose d'un\r\n droit d'acces, de rectification et de suppression de mes donnees, que je peux exercer en\r\n ecrivant a <a href=\"mailto:info-contact@btplus.fr\">info-contact@btplus.fr<\/a>.\r\n <a href=\"\/politique-de-confidentialite\" target=\"_blank\" rel=\"noopener\">En savoir plus<\/a>.\r\n <span class=\"required\">*<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn--contact\">\r\n Envoyer <span class=\"btn__icon\">→<\/span>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact__info\">\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-phone\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Telephone<\/h4><p><a href=\"tel:+331 86 95 77 77\">01 86 95 77 77<\/a><\/p><\/div>\r\n <\/div>\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-envelope\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Email<\/h4><p><a href=\"mailto:contact@btplus-intervention.fr\">info-contact@btplus.fr<\/a><\/p><\/div>\r\n <\/div>\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Adresse<\/h4><p>13 Rue Camille Desmoulins,\r\n92130 Issy-les-Moulineaux<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__hours\">\r\n <div class=\"contact__hours-title\">Horaires d'ouverture<\/div>\r\n <div class=\"contact__hours-grid\">\r\n <span class=\"contact__hours-day\">Lundi - Vendredi<\/span><span class=\"contact__hours-time\">08:00 - 20:00<\/span>\r\n <span class=\"contact__hours-day\">Samedi<\/span><span class=\"contact__hours-time\">09:00 - 18:00<\/span>\r\n <span class=\"contact__hours-day\">Dimanche & jours feries<\/span><span class=\"contact__hours-time\"><span class=\"urgent\">Urgence 24\/7<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__map\">\r\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2623.5!2d2.366!3d48.916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2f8e5c8b3d%3A0x8e5c8b3d47e66e2f!2sAubervilliers!5e0!3m2!1sfr!2sfr!4v1700000000000\" allowfullscreen loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__waves\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\">\r\n <defs><path id=\"w9\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/><\/defs>\r\n <g class=\"wave-back\"><use href=\"#w9\" x=\"0\" fill=\"#d6ebfb\"\/><use href=\"#w9\" x=\"176\" fill=\"#d6ebfb\"\/><\/g>\r\n <g class=\"wave-mid\"><use href=\"#w9\" x=\"0\" fill=\"#a9d4f3\"\/><use href=\"#w9\" x=\"176\" fill=\"#a9d4f3\"\/><\/g>\r\n <g class=\"wave-front\"><use href=\"#w9\" x=\"0\" fill=\"#ffffff\"\/><use href=\"#w9\" x=\"176\" fill=\"#ffffff\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n var fileInput = document.getElementById('fileInput');\r\n var fileList = document.getElementById('fileList');\r\n var dropZone = document.getElementById('fileDropZone');\r\n if (!fileInput || !dropZone) return;\r\n var perFileMax = 5 * 1024 * 1024;\r\n var totalMax = 10 * 1024 * 1024;\r\n\r\n function updateFileList(files) {\r\n fileList.innerHTML = '';\r\n Array.from(files).forEach(function (file, index) {\r\n var item = document.createElement('span');\r\n item.className = 'file-item';\r\n var icon = file.type.indexOf('image\/') === 0 ? 'fa-image' : 'fa-file';\r\n item.innerHTML = '<i class=\"fas ' + icon + '\"><\/i><span>' + file.name + '<\/span><span class=\"file-remove\" data-index=\"' + index + '\"><i class=\"fas fa-times\"><\/i><\/span>';\r\n fileList.appendChild(item);\r\n });\r\n document.querySelectorAll('.file-remove').forEach(function (btn) {\r\n btn.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n var idx = parseInt(this.dataset.index);\r\n var dt = new DataTransfer();\r\n Array.from(fileInput.files).filter(function (_, i) { return i !== idx; }).forEach(function (f) { dt.items.add(f); });\r\n fileInput.files = dt.files;\r\n updateFileList(fileInput.files);\r\n });\r\n });\r\n }\r\n\r\n function applyFiles(candidate) {\r\n var valid = candidate.filter(function (f) { return f.type.indexOf('image\/') === 0 && f.size <= perFileMax; });\r\n if (candidate.length > 1) alert('Une seule photo peut etre envoyee. Seule la premiere a ete conservee.');\r\n else if (valid.length !== candidate.length) alert('Fichier ignore (image uniquement, 5MB max).');\r\n var dt = new DataTransfer();\r\n if (valid.length > 0) dt.items.add(valid[0]);\r\n fileInput.files = dt.files;\r\n updateFileList(fileInput.files);\r\n }\r\n\r\n dropZone.addEventListener('click', function (e) { if (e.target === this || e.target.closest('.file-drop-zone')) fileInput.click(); });\r\n fileInput.addEventListener('change', function () { applyFiles(Array.from(this.files)); });\r\n dropZone.addEventListener('dragover', function (e) { e.preventDefault(); this.classList.add('dragover'); });\r\n dropZone.addEventListener('dragleave', function (e) { e.preventDefault(); this.classList.remove('dragover'); });\r\n dropZone.addEventListener('drop', function (e) {\r\n e.preventDefault(); this.classList.remove('dragover');\r\n applyFiles(Array.from(e.dataTransfer.files));\r\n });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BT Plus \u2014 Quel entretien pour mon r\u00e9seau ? 24h\/24 Entretien & pr\u00e9vention Quel entretien pour mon r\u00e9seau ? Chaque r\u00e9seau est unique. Nous vous guidons vers le programme d’entretien adapt\u00e9 \u00e0 votre type de canalisation, votre usage et votre budget. Syndics, h\u00f4teliers, gestionnaires de copropri\u00e9t\u00e9 et particuliers : trouvez la solution qui vous correspond. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1403","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":17,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions"}],"predecessor-version":[{"id":2646,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions\/2646"}],"wp:attachment":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBT Plus \u2014 Quel entretien pour mon r\u00e9seau ?<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue-900:#07294a;\r\n --blue-800:#0a3666;\r\n --blue-700:#0d4f8b;\r\n --blue-500:#1c7ec9;\r\n --blue-300:#7cc0ee;\r\n --blue-100:#d6ebfb;\r\n --blue-50:#eef6fc;\r\n --orange:#f4a61a;\r\n --orange-dark:#d98a0c;\r\n --ink:#0c2238;\r\n --slate:#48637d;\r\n --paper:#ffffff;\r\n\r\n --font-display:\"Sora\",sans-serif;\r\n --font-body:\"Inter\",sans-serif;\r\n\r\n --shadow-sm:0 2px 10px rgba(7,41,74,.06);\r\n --shadow-md:0 18px 40px -16px rgba(7,41,74,.30);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n font-family:var(--font-body);\r\n color:var(--ink);\r\n background:var(--paper);\r\n -webkit-font-smoothing:antialiased;\r\n line-height:1.6;\r\n }\r\n\r\n \/* ---------- Hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n overflow:hidden;\r\n background:\r\n radial-gradient(1100px 520px at 78% -8%, var(--blue-100), transparent 60%),\r\n linear-gradient(180deg,#fbfdff 0%,var(--blue-50) 100%);\r\n }\r\n .hero-inner{\r\n max-width:1200px;margin:0 auto;\r\n padding:40px 24px 150px;\r\n display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;\r\n position:relative;\r\n }\r\n @media(max-width:940px){\r\n .hero-inner{grid-template-columns:1fr;padding:28px 24px 130px;gap:34px}\r\n }\r\n\r\n \/* ============================================\r\n BADGE 24\/24\r\n ============================================ *\/\r\n .badge-247 {\r\n position:absolute;\r\n top:20px;\r\n right:24px;\r\n background:#ffffff;\r\n border-radius:14px;\r\n padding:12px 16px;\r\n box-shadow:var(--shadow-md);\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n z-index:10;\r\n border:1px solid var(--blue-100);\r\n animation:floaty 6s ease-in-out infinite;\r\n animation-delay:0.3s;\r\n }\r\n\r\n .badge-247 .fic {\r\n width:38px;\r\n height:38px;\r\n border-radius:10px;\r\n display:grid;\r\n place-items:center;\r\n flex-shrink:0;\r\n background:var(--blue-50);\r\n color:var(--blue-700);\r\n }\r\n\r\n .badge-247 .fic svg {\r\n width:20px;\r\n height:20px;\r\n }\r\n\r\n .badge-247 b {\r\n font-family:var(--font-display);\r\n display:block;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n }\r\n\r\n .badge-247 small {\r\n color:var(--slate);\r\n font-size:.74rem;\r\n }\r\n\r\n @keyframes floaty{\r\n 0%,100%{transform:translateY(0)}\r\n 50%{transform:translateY(-12px)}\r\n }\r\n\r\n @media(max-width:600px){\r\n .badge-247{\r\n top:12px;\r\n right:12px;\r\n padding:8px 12px;\r\n gap:8px;\r\n }\r\n .badge-247 .fic{\r\n width:30px;\r\n height:30px;\r\n }\r\n .badge-247 b{\r\n font-size:.85rem;\r\n }\r\n .badge-247 small{\r\n font-size:.65rem;\r\n }\r\n }\r\n\r\n \/* ============================================\r\n CONTENU TEXTE - QUEL ENTRETIEN POUR MON R\u00c9SEAU ?\r\n ============================================ *\/\r\n h1{\r\n font-family:var(--font-display);font-weight:800;\r\n font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.06;\r\n letter-spacing:-.025em;color:var(--blue-900);margin:18px 0 0;\r\n }\r\n h1 .accent{\r\n color:var(--orange);position:relative;white-space:nowrap;\r\n }\r\n h1 .accent::after{\r\n content:\"\";position:absolute;left:0;right:0;bottom:.06em;height:.16em;\r\n background:rgba(244,166,26,.28);border-radius:4px;z-index:-1;\r\n transform:scaleX(0);transform-origin:left;animation:underline 1s .8s ease forwards;\r\n }\r\n @keyframes underline{to{transform:scaleX(1)}}\r\n\r\n .lead{\r\n margin-top:18px;font-size:1.08rem;color:var(--slate);max-width:560px;\r\n }\r\n\r\n \/* public cible - chips *\/\r\n .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}\r\n .chip{\r\n display:inline-flex;align-items:center;gap:7px;\r\n background:#fff;border:1px solid var(--blue-100);\r\n padding:8px 13px;border-radius:11px;font-size:.86rem;font-weight:600;color:var(--blue-800);\r\n box-shadow:var(--shadow-sm);transition:transform .2s, box-shadow .2s, border-color .2s;\r\n }\r\n .chip svg{width:16px;height:16px;color:var(--blue-500)}\r\n .chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--blue-300)}\r\n\r\n \/* trust strip *\/\r\n .trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px}\r\n .trust div{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--slate);font-weight:500}\r\n .trust svg{width:18px;height:18px;color:#1faa6b;flex-shrink:0}\r\n\r\n \/* ---------- Visual ---------- *\/\r\n .visual{position:relative;display:grid;place-items:center;min-height:380px}\r\n .disc{\r\n position:relative;\r\n width:min(420px,90%);\r\n aspect-ratio:1;\r\n border-radius:50%;\r\n overflow:hidden;\r\n box-shadow:0 40px 70px -25px rgba(13,79,139,.7);\r\n display:grid;\r\n place-items:center;\r\n }\r\n\r\n .disc img{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n z-index:1;\r\n }\r\n\r\n .disc .overlay{\r\n position:absolute;\r\n top:0;\r\n left:0;\r\n width:100%;\r\n height:100%;\r\n background:rgba(7,41,74,0.30);\r\n z-index:2;\r\n border-radius:50%;\r\n }\r\n\r\n .ring{\r\n position:absolute;\r\n border:2px solid rgba(255,255,255,0.5);\r\n border-radius:50%;\r\n inset:0;\r\n opacity:0;\r\n z-index:3;\r\n animation:ripple 4s linear infinite;\r\n pointer-events:none;\r\n }\r\n .ring:nth-child(3){animation-delay:1.3s}\r\n .ring:nth-child(4){animation-delay:2.6s}\r\n @keyframes ripple{\r\n 0%{transform:scale(.55);opacity:.6}\r\n 80%{opacity:0}\r\n 100%{transform:scale(1.18);opacity:0}\r\n }\r\n\r\n .disc-content{\r\n position:relative;\r\n z-index:4;\r\n text-align:center;\r\n color:#ffffff;\r\n padding:20px;\r\n }\r\n\r\n .disc-content .icon-badge{\r\n display:inline-block;\r\n background:rgba(255,255,255,0.15);\r\n backdrop-filter:blur(6px);\r\n padding:6px 16px;\r\n border-radius:100px;\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:.7rem;\r\n letter-spacing:.06em;\r\n text-transform:uppercase;\r\n color:#fff;\r\n border:1px solid rgba(255,255,255,0.2);\r\n margin-bottom:10px;\r\n }\r\n\r\n .disc-content .big-number{\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:3.8rem;\r\n line-height:1;\r\n color:#fff;\r\n text-shadow:0 4px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .disc-content .big-number span{\r\n font-size:1.4rem;\r\n font-weight:500;\r\n opacity:0.8;\r\n }\r\n\r\n .disc-content .desc{\r\n font-family:var(--font-body);\r\n font-weight:500;\r\n font-size:.95rem;\r\n color:rgba(255,255,255,0.9);\r\n margin-top:4px;\r\n }\r\n\r\n \/* ============================================\r\n FLOATING CARDS\r\n ============================================ *\/\r\n .float{\r\n position:absolute;\r\n background:#fff;\r\n border-radius:14px;\r\n padding:12px 15px;\r\n box-shadow:var(--shadow-md);\r\n display:flex;\r\n align-items:center;\r\n gap:11px;\r\n font-size:.85rem;\r\n animation:floaty 6s ease-in-out infinite;\r\n z-index:10;\r\n }\r\n .float .fic{\r\n width:38px;\r\n height:38px;\r\n border-radius:10px;\r\n display:grid;\r\n place-items:center;\r\n flex-shrink:0;\r\n }\r\n .float b{\r\n font-family:var(--font-display);\r\n display:block;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n }\r\n .float small{\r\n color:var(--slate);\r\n font-size:.74rem;\r\n }\r\n .float.one{\r\n top:6%;\r\n left:-4%;\r\n animation-delay:.2s;\r\n }\r\n .float.one .fic{\r\n background:#fff3df;\r\n color:var(--orange-dark);\r\n }\r\n .float.two{\r\n bottom:10%;\r\n right:-6%;\r\n animation-delay:1.6s;\r\n }\r\n .float.two .fic{\r\n background:var(--blue-50);\r\n color:var(--blue-700);\r\n }\r\n @media(max-width:560px){\r\n .float.one{left:0}\r\n .float.two{right:0}\r\n }\r\n\r\n \/* ---------- Animated waves ---------- *\/\r\n .waves{\r\n position:absolute;\r\n left:0;\r\n right:0;\r\n bottom:0;\r\n line-height:0;\r\n z-index:1;\r\n pointer-events:none;\r\n }\r\n .waves svg{\r\n display:block;\r\n width:100%;\r\n height:120px;\r\n }\r\n .wave-back use{animation:wavemove 11s linear infinite;opacity:.55}\r\n .wave-mid use{animation:wavemove 8s linear infinite reverse;opacity:.8}\r\n .wave-front use{animation:wavemove 6s linear infinite}\r\n @keyframes wavemove{\r\n 0%{transform:translateX(0)}\r\n 100%{transform:translateX(-50%)}\r\n }\r\n\r\n \/* ---------- entrance ---------- *\/\r\n .reveal{\r\n opacity:0;\r\n transform:translateY(22px);\r\n animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;\r\n }\r\n .d1{animation-delay:.05s}\r\n .d2{animation-delay:.16s}\r\n .d3{animation-delay:.27s}\r\n .d4{animation-delay:.38s}\r\n .d5{animation-delay:.49s}\r\n .reveal-r{\r\n opacity:0;\r\n transform:scale(.94);\r\n animation:pop .8s .3s cubic-bezier(.2,.7,.3,1) forwards;\r\n }\r\n @keyframes rise{\r\n to{opacity:1;transform:translateY(0)}\r\n }\r\n @keyframes pop{\r\n to{opacity:1;transform:scale(1)}\r\n }\r\n\r\n @media(prefers-reduced-motion:reduce){\r\n *{animation:none!important;transition:none!important}\r\n .reveal,.reveal-r{opacity:1;transform:none}\r\n h1 .accent::after{transform:scaleX(1)}\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media(max-width:768px){\r\n .disc{\r\n width:min(340px,85%);\r\n }\r\n .disc-content .big-number{\r\n font-size:2.8rem;\r\n }\r\n .disc-content .big-number span{\r\n font-size:1.1rem;\r\n }\r\n .disc-content .desc{\r\n font-size:.8rem;\r\n }\r\n .disc-content .icon-badge{\r\n font-size:.6rem;\r\n padding:4px 12px;\r\n }\r\n }\r\n\r\n @media(max-width:480px){\r\n .disc{\r\n width:min(280px,80%);\r\n }\r\n .disc-content .big-number{\r\n font-size:2.2rem;\r\n }\r\n .disc-content .big-number span{\r\n font-size:.9rem;\r\n }\r\n .disc-content .desc{\r\n font-size:.7rem;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <header class=\"hero\">\r\n <div class=\"hero-inner\">\r\n\r\n \r\n \r\n \r\n <div class=\"badge-247\">\r\n <span class=\"fic\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"9\"\/>\r\n <path d=\"M12 7v5l3 2\"\/>\r\n <\/svg>\r\n <\/span>\r\n <span>\r\n <b>24h\/24<\/b>\r\n <small>Entretien & pr\u00e9vention<\/small>\r\n <\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"content\">\r\n <h1 class=\"reveal d2\">\r\n Quel entretien <br>pour <span class=\"accent\">mon r\u00e9seau ?<\/span>\r\n <\/h1>\r\n\r\n <p class=\"lead reveal d3\">\r\n Chaque r\u00e9seau est unique. Nous vous guidons vers le programme d'entretien\r\n adapt\u00e9 \u00e0 votre type de canalisation, votre usage et votre budget.\r\n <strong>Syndics, h\u00f4teliers, gestionnaires de copropri\u00e9t\u00e9 et particuliers<\/strong> :\r\n trouvez la solution qui vous correspond.\r\n <\/p>\r\n\r\n <div class=\"chips reveal d4\">\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 12h6l2 5 4-12 2 7h4\"\/><\/svg>Syndics<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 1 1-9-9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg>H\u00f4teliers<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"\/><path d=\"m16 10 6-3v10l-6-3\"\/><\/svg>Gestionnaires<\/span>\r\n <span class=\"chip\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 7h18\"\/><path d=\"M6 7v13h12V7\"\/><path d=\"M9 7V4h6v3\"\/><\/svg>Particuliers<\/span>\r\n <\/div>\r\n\r\n <div class=\"trust reveal d5\">\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Programme sur mesure<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Devis personnalis\u00e9<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Suivi r\u00e9gulier<\/div>\r\n <div><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"\/><\/svg>Rapports d'intervention<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"visual reveal-r\">\r\n <div class=\"disc\">\r\n \r\n <img decoding=\"async\"\r\n src=\"http:\/\/sci-bme.fr\/wp-content\/uploads\/2026\/06\/remplacement-station-relevage_-2.jpg\"\r\n alt=\"Entretien et maintenance des r\u00e9seaux\"\r\n loading=\"lazy\"\r\n \/>\r\n \r\n <div class=\"overlay\"><\/div>\r\n\r\n \r\n <span class=\"ring\"><\/span>\r\n <span class=\"ring\"><\/span>\r\n <span class=\"ring\"><\/span>\r\n\r\n \r\n <div class=\"disc-content\">\r\n <span class=\"icon-badge\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:inline-block;vertical-align:middle;margin-right:6px;\">\r\n <path d=\"M12 2v4M12 22v-4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83\"\/>\r\n <\/svg>\r\n Entretien programm\u00e9\r\n <\/span>\r\n <div class=\"big-number\">\r\n 98 <span>%<\/span>\r\n <\/div>\r\n <div class=\"desc\">de nos clients recommandent un entretien r\u00e9gulier<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"float one\">\r\n <span class=\"fic\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5l3 2\"\/><\/svg>\r\n <\/span>\r\n <span><b>\u2248 30 min<\/b><small>analyse de vos besoins<\/small><\/span>\r\n <\/div>\r\n\r\n <div class=\"float two\">\r\n <span class=\"fic\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><path d=\"M21 12a9 9 0 1 1-9-9c2.5 0 4.8 1 6.4 2.6\"\/><\/svg>\r\n <\/span>\r\n <span><b>3 200+<\/b><small>contrats d'entretien actifs<\/small><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"waves\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\">\r\n <defs>\r\n <path id=\"w\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/>\r\n <\/defs>\r\n <g class=\"wave-back\"><use href=\"#w\" x=\"0\" fill=\"#d6ebfb\"\/><use href=\"#w\" x=\"176\" fill=\"#d6ebfb\"\/><\/g>\r\n <g class=\"wave-mid\"><use href=\"#w\" x=\"0\" fill=\"#a9d4f3\"\/><use href=\"#w\" x=\"176\" fill=\"#a9d4f3\"\/><\/g>\r\n <g class=\"wave-front\"><use href=\"#w\" x=\"0\" fill=\"#ffffff\"\/><use href=\"#w\" x=\"176\" fill=\"#ffffff\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n <\/header>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c570057 e-con-full e-flex e-con e-parent\" data-id=\"c570057\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90ddc34 elementor-widget elementor-widget-html\" data-id=\"90ddc34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>BT Plus \u2014 Estimation de risque r\u00e9seau<\/title>\r\n <style>\r\n \/* ============================================\r\n BASE & RESET\r\n ============================================ *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #ffffff;\r\n color: #0a1a2b;\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ============================================\r\n SECTION QUIZ\r\n ============================================ *\/\r\n .quiz-section {\r\n padding: 5rem 5% 6rem;\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n background:\r\n radial-gradient(1100px 520px at 78% -8%, #d6ebfb, transparent 60%),\r\n linear-gradient(180deg, #fbfdff 0%, #eef6fc 100%);\r\n overflow: hidden;\r\n }\r\n\r\n .quiz-section__container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n width: 100%;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ============================================\r\n EN-TETE\r\n ============================================ *\/\r\n .quiz-section__header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .quiz-section__badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.7rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 0.4rem 1.4rem 0.4rem 1rem;\r\n border-radius: 2rem;\r\n background: rgba(28, 126, 201, 0.07);\r\n color: #1c7ec9;\r\n border: 1px solid rgba(28, 126, 201, 0.12);\r\n margin-bottom: 1.2rem;\r\n }\r\n\r\n .quiz-section__badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #22c55e;\r\n animation: pulseDot 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.3; transform: scale(0.6); }\r\n }\r\n\r\n .quiz-section__title {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(2rem, 3.6vw, 3.2rem);\r\n letter-spacing: -0.03em;\r\n color: #07294a;\r\n line-height: 1.1;\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .quiz-section__title .highlight {\r\n background: linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .quiz-section__subtitle {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: clamp(1rem, 1.1vw, 1.15rem);\r\n color: #6b7f94;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n line-height: 1.7;\r\n }\r\n\r\n .quiz-section__subtitle .source {\r\n display: inline-block;\r\n background: #eef6fc;\r\n padding: 0 8px;\r\n border-radius: 4px;\r\n font-weight: 600;\r\n color: #0d4f8b;\r\n font-size: .8rem;\r\n }\r\n\r\n \/* ============================================\r\n WIDGET QUIZ\r\n ============================================ *\/\r\n .quiz {\r\n background: #ffffff;\r\n border-radius: 24px;\r\n padding: 2.5rem;\r\n border: 1px solid #eef2f6;\r\n box-shadow: 0 4px 24px rgba(7, 41, 74, 0.06);\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .quiz:hover {\r\n box-shadow: 0 8px 40px rgba(7, 41, 74, 0.10);\r\n border-color: #d6ebfb;\r\n }\r\n\r\n \/* ============================================\r\n PROGRESSION\r\n ============================================ *\/\r\n .quiz__progress {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .quiz__progress-bar {\r\n flex: 1;\r\n height: 6px;\r\n background: #eef2f6;\r\n border-radius: 3px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n .quiz__progress-fill {\r\n height: 100%;\r\n width: 25%;\r\n background: linear-gradient(90deg, #1c7ec9, #f4a61a);\r\n border-radius: 3px;\r\n transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n\r\n .quiz__progress-text {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.8rem;\r\n color: #6b7f94;\r\n white-space: nowrap;\r\n min-width: 50px;\r\n text-align: right;\r\n }\r\n\r\n \/* ============================================\r\n QUESTIONS\r\n ============================================ *\/\r\n .quiz__question {\r\n display: none;\r\n animation: fadeSlide 0.5s ease-out forwards;\r\n }\r\n\r\n .quiz__question--active {\r\n display: block;\r\n }\r\n\r\n @keyframes fadeSlide {\r\n from { opacity: 0; transform: translateX(20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n .quiz__question-number {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 600;\r\n font-size: 0.7rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n color: #1c7ec9;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .quiz__question-text {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: clamp(1.2rem, 1.5vw, 1.6rem);\r\n color: #07294a;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .quiz__question-context {\r\n font-size: 0.85rem;\r\n color: #6b7f94;\r\n margin-bottom: 1.5rem;\r\n padding: 0.6rem 1rem;\r\n background: #f8fafc;\r\n border-radius: 8px;\r\n border-left: 3px solid #1c7ec9;\r\n }\r\n\r\n .quiz__question-context strong {\r\n color: #07294a;\r\n }\r\n\r\n .quiz__question-context .source-link {\r\n color: #1c7ec9;\r\n text-decoration: none;\r\n font-weight: 500;\r\n }\r\n .quiz__question-context .source-link:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n \/* ============================================\r\n OPTIONS\r\n ============================================ *\/\r\n .quiz__options {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.6rem;\r\n }\r\n\r\n .quiz__option {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding: 0.9rem 1.2rem;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 500;\r\n font-size: 0.95rem;\r\n color: #07294a;\r\n }\r\n\r\n .quiz__option:hover {\r\n border-color: #d6ebfb;\r\n background: #f0f7fd;\r\n transform: translateX(4px);\r\n }\r\n\r\n .quiz__option--selected {\r\n border-color: #1c7ec9;\r\n background: #eef6fc;\r\n }\r\n\r\n .quiz__option--selected .quiz__option-radio {\r\n border-color: #1c7ec9;\r\n background: #1c7ec9;\r\n }\r\n\r\n .quiz__option--selected .quiz__option-radio::after {\r\n content: '';\r\n display: block;\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #ffffff;\r\n }\r\n\r\n .quiz__option-radio {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 2px solid #d6ebfb;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .quiz__option-text {\r\n flex: 1;\r\n }\r\n\r\n .quiz__option-hint {\r\n font-size: 0.7rem;\r\n color: #6b7f94;\r\n font-weight: 400;\r\n margin-left: 0.5rem;\r\n }\r\n\r\n \/* ============================================\r\n NAVIGATION\r\n ============================================ *\/\r\n .quiz__nav {\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 1rem;\r\n margin-top: 2rem;\r\n padding-top: 1.5rem;\r\n border-top: 1px solid #eef2f6;\r\n }\r\n\r\n .btn--quiz {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.8rem;\r\n letter-spacing: 0.02em;\r\n text-decoration: none;\r\n padding: 0.7rem 1.8rem;\r\n border-radius: 2.5rem;\r\n transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n cursor: pointer;\r\n border: none;\r\n text-align: center;\r\n }\r\n\r\n .btn--quiz--prev {\r\n background: #f0f4f8;\r\n color: #6b7f94;\r\n }\r\n\r\n .btn--quiz--prev:hover {\r\n background: #e6ecf2;\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--prev:disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n transform: none !important;\r\n }\r\n\r\n .btn--quiz--next {\r\n background: linear-gradient(135deg, #f4a61a 0%, #e0960e 100%);\r\n box-shadow: 0 4px 16px rgba(244, 166, 26, 0.25);\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--next:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 8px 30px rgba(244, 166, 26, 0.40);\r\n color: #07294a;\r\n }\r\n\r\n .btn--quiz--next:disabled {\r\n opacity: 0.3;\r\n cursor: not-allowed;\r\n transform: none !important;\r\n box-shadow: none !important;\r\n }\r\n\r\n .btn--quiz .btn__icon {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .btn--quiz:hover .btn__icon {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================\r\n RESULTAT\r\n ============================================ *\/\r\n .quiz__result {\r\n display: none;\r\n animation: fadeSlide 0.6s ease-out forwards;\r\n text-align: center;\r\n padding: 1rem 0;\r\n }\r\n\r\n .quiz__result--active {\r\n display: block;\r\n }\r\n\r\n .quiz__result-score {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .quiz__result-circle {\r\n position: relative;\r\n width: 130px;\r\n height: 130px;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .quiz__result-circle svg {\r\n transform: rotate(-90deg);\r\n width: 130px;\r\n height: 130px;\r\n }\r\n\r\n .quiz__result-circle svg circle {\r\n transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .quiz__result-number {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: 2.6rem;\r\n color: #07294a;\r\n line-height: 1;\r\n }\r\n\r\n .quiz__result-number small {\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: #6b7f94;\r\n }\r\n\r\n .quiz__result-label {\r\n display: inline-block;\r\n padding: 0.3rem 1.5rem;\r\n border-radius: 100px;\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .quiz__result-label--faible {\r\n background: #dcfce7;\r\n color: #166534;\r\n }\r\n .quiz__result-label--moyen {\r\n background: #fef9c3;\r\n color: #854d0e;\r\n }\r\n .quiz__result-label--eleve {\r\n background: #fee2e2;\r\n color: #991b1b;\r\n }\r\n .quiz__result-label--critique {\r\n background: #fecaca;\r\n color: #7f1d1d;\r\n }\r\n\r\n .quiz__result-title {\r\n font-family: 'Sora', sans-serif;\r\n font-weight: 800;\r\n font-size: clamp(1.4rem, 2vw, 1.8rem);\r\n color: #07294a;\r\n margin: 0.5rem 0 0.3rem;\r\n }\r\n\r\n .quiz__result-desc {\r\n font-family: 'Inter', sans-serif;\r\n font-weight: 400;\r\n font-size: 1rem;\r\n color: #6b7f94;\r\n max-width: 550px;\r\n margin: 0 auto 1.5rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .quiz__result-details {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 0.6rem 1.5rem;\r\n max-width: 500px;\r\n margin: 0 auto 1.5rem;\r\n text-align: left;\r\n padding: 1rem 1.5rem;\r\n background: #f8fafc;\r\n border-radius: 12px;\r\n border: 1px solid #eef2f6;\r\n }\r\n\r\n .quiz__result-detail {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .quiz__result-detail-label {\r\n color: #6b7f94;\r\n }\r\n\r\n .quiz__result-detail-value {\r\n font-weight: 600;\r\n color: #07294a;\r\n }\r\n\r\n .quiz__result-sources {\r\n font-size: 0.75rem;\r\n color: #6b7f94;\r\n max-width: 550px;\r\n margin: 0 auto 1.5rem;\r\n padding: 0.8rem 1.2rem;\r\n background: #f0f7fd;\r\n border-radius: 8px;\r\n border: 1px solid #d6ebfb;\r\n text-align: left;\r\n }\r\n\r\n .quiz__result-sources strong {\r\n color: #07294a;\r\n }\r\n\r\n .quiz__result-sources a {\r\n color: #1c7ec9;\r\n text-decoration: none;\r\n }\r\n .quiz__result-sources a:hover {\r\n text-decoration: underline;\r\n }\r\n\r\n .quiz__result-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 1rem;\r\n }\r\n\r\n .btn--quiz--restart {\r\n background: #f0f4f8;\r\n color: #6b7f94;\r\n }\r\n\r\n .btn--quiz--restart:hover {\r\n background: #e6ecf2;\r\n color: #07294a;\r\n }\r\n\r\n \/* ============================================\r\n CTA ROUGE \"PARLER \u00c0 UN EXPERT\" \u2014 TEXTE BLANC\r\n ============================================ *\/\r\n .btn--quiz--cta {\r\n background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);\r\n box-shadow: 0 4px 16px rgba(220, 38, 38, 0.30);\r\n color: #ffffff !important; \/* Texte blanc garanti *\/\r\n padding: 0.9rem 2.2rem;\r\n font-size: 0.9rem;\r\n font-weight: 700;\r\n border-radius: 2.5rem;\r\n border: none;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n cursor: pointer;\r\n font-family: 'Sora', sans-serif;\r\n }\r\n\r\n .btn--quiz--cta:hover {\r\n transform: translateY(-2px) scale(1.02);\r\n box-shadow: 0 8px 30px rgba(220, 38, 38, 0.50);\r\n background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\r\n color: #ffffff !important;\r\n }\r\n\r\n .btn--quiz--cta .btn__icon {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .btn--quiz--cta:hover .btn__icon {\r\n transform: translateX(4px);\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media (max-width: 768px) {\r\n .quiz-section {\r\n padding: 3.5rem 1.5rem 4rem;\r\n min-height: auto;\r\n }\r\n\r\n .quiz {\r\n padding: 1.8rem;\r\n }\r\n\r\n .quiz__question-text {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .quiz__option {\r\n font-size: 0.85rem;\r\n padding: 0.7rem 1rem;\r\n }\r\n\r\n .quiz__nav {\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn--quiz {\r\n flex: 1;\r\n justify-content: center;\r\n padding: 0.6rem 1.2rem;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .btn--quiz--cta {\r\n flex: 1;\r\n justify-content: center;\r\n padding: 0.7rem 1.2rem;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .quiz__result-details {\r\n grid-template-columns: 1fr;\r\n gap: 0.4rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .quiz {\r\n padding: 1.2rem;\r\n border-radius: 16px;\r\n }\r\n\r\n .quiz__question-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .quiz__option {\r\n font-size: 0.8rem;\r\n padding: 0.6rem 0.8rem;\r\n gap: 0.6rem;\r\n }\r\n\r\n .btn--quiz {\r\n font-size: 0.65rem;\r\n padding: 0.5rem 1rem;\r\n }\r\n\r\n .btn--quiz--cta {\r\n font-size: 0.7rem;\r\n padding: 0.6rem 1rem;\r\n }\r\n\r\n .quiz__result-circle {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .quiz__result-circle svg {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .quiz__result-number {\r\n font-size: 2rem;\r\n }\r\n\r\n .quiz__result-number small {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"quiz-section\">\r\n <div class=\"quiz-section__container\">\r\n\r\n \r\n <div class=\"quiz-section__header\">\r\n <div class=\"quiz-section__badge\">\r\n <span class=\"dot\"><\/span>\r\n Estimation basee sur des donnees publiques\r\n <\/div>\r\n <h2 class=\"quiz-section__title\">\r\n Quel est le <span class=\"highlight\">risque<\/span> de votre reseau ?\r\n <\/h2>\r\n <p class=\"quiz-section__subtitle\">\r\n Repondez a 4 questions pour obtenir une <strong>estimation indicative<\/strong>\r\n du risque de sinistre, basee sur les statistiques de\r\n <span class=\"source\">Eaufrance<\/span>,\r\n <span class=\"source\">France Assureurs<\/span> et\r\n <span class=\"source\">SDES<\/span>.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz\" id=\"quizApp\">\r\n\r\n \r\n <div class=\"quiz__progress\">\r\n <div class=\"quiz__progress-bar\">\r\n <div class=\"quiz__progress-fill\" id=\"progressFill\"><\/div>\r\n <\/div>\r\n <span class=\"quiz__progress-text\" id=\"progressText\">1\/4<\/span>\r\n <\/div>\r\n\r\n \r\n <div id=\"quizQuestions\">\r\n\r\n \r\n <div class=\"quiz__question quiz__question--active\" data-question=\"0\">\r\n <div class=\"quiz__question-number\">Question 1 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quel est votre type de batiment ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee France Assureurs :<\/strong> les degats des eaux representent\r\n <strong>44 %<\/strong> des sinistres habitation.\r\n <a href=\"https:\/\/www.franceassureurs.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"copropriete\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Copropriete<\/span>\r\n <span class=\"quiz__option-hint\">(risque de sinistre en cascade)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"syndic\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Syndic \/ Gestionnaire<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"tertiaire\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Tertiaire (bureau, commerce)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"collectivite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Collectivite \/ ERP<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"1\">\r\n <div class=\"quiz__question-number\">Question 2 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quand a eu lieu le dernier entretien de vos reseaux ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee Eaufrance :<\/strong> en France, <strong>18,8 %<\/strong> de l'eau distribuee\r\n est perdue par fuite (2023).\r\n <a href=\"https:\/\/www.eaufrance.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"recent\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Moins d'1 an<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"moyen\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">1 a 3 ans<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"ancien\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Plus de 3 ans<\/span>\r\n <span class=\"quiz__option-hint\">(facteur de risque majore)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"jamais\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Jamais realise<\/span>\r\n <span class=\"quiz__option-hint\">(risque tres eleve)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"2\">\r\n <div class=\"quiz__question-number\">Question 3 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Avez-vous deja rencontre des problemes ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee Observatoire de la securite :<\/strong> en moyenne,\r\n <strong>4 160<\/strong> degats des eaux par jour en France.\r\n <a href=\"https:\/\/www.observatoire-securite.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"urgent\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Oui, en urgence (debouchage, refoulement)<\/span>\r\n <span class=\"quiz__option-hint\">(signal d'alerte fort)<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"occasionnel\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Oui, occasionnellement<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"rare\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Non, jamais de probleme<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__question\" data-question=\"3\">\r\n <div class=\"quiz__question-number\">Question 4 sur 4<\/div>\r\n <div class=\"quiz__question-text\">Quel est votre objectif principal ?<\/div>\r\n <div class=\"quiz__question-context\">\r\n <strong>Donnee SDES :<\/strong> l'anciennete du parc immobilier est un\r\n <strong>facteur de risque majeur<\/strong> pour les sinistres lies a l'eau.\r\n <a href=\"https:\/\/www.statistiques.developpement-durable.gouv.fr\/\" target=\"_blank\" class=\"source-link\">(source)<\/a>\r\n <\/div>\r\n <div class=\"quiz__options\">\r\n <div class=\"quiz__option\" data-value=\"conformite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Assurer la conformite reglementaire<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"prevention\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Prevenir les problemes et les couts<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"renovation\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Renover \/ moderniser mes reseaux<\/span>\r\n <\/div>\r\n <div class=\"quiz__option\" data-value=\"tranquilite\">\r\n <span class=\"quiz__option-radio\"><\/span>\r\n <span class=\"quiz__option-text\">Avoir une tranquillite d'esprit totale<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__result\" id=\"quizResult\">\r\n <div class=\"quiz__result-score\">\r\n <div class=\"quiz__result-circle\">\r\n <svg viewBox=\"0 0 120 120\">\r\n <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"#eef2f6\" stroke-width=\"10\"\/>\r\n <circle id=\"resultCircle\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"none\" stroke=\"#1c7ec9\" stroke-width=\"10\"\r\n stroke-linecap=\"round\" stroke-dasharray=\"314.16\" stroke-dashoffset=\"314.16\"\/>\r\n <\/svg>\r\n <div class=\"quiz__result-number\">\r\n <span id=\"resultScore\">--<\/span><small>\/100<\/small>\r\n <\/div>\r\n <\/div>\r\n <span class=\"quiz__result-label\" id=\"resultLabel\">--<\/span>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-title\" id=\"resultTitle\">--<\/div>\r\n <div class=\"quiz__result-desc\" id=\"resultDesc\">--<\/div>\r\n\r\n <div class=\"quiz__result-details\">\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Risque de fuite (moy. nat.)<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFuite\">18,8 %<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Frequence des sinistres<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFrequence\">44 %<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Facteur principal<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailFacteur\">--<\/span>\r\n <\/div>\r\n <div class=\"quiz__result-detail\">\r\n <span class=\"quiz__result-detail-label\">Recommandation<\/span>\r\n <span class=\"quiz__result-detail-value\" id=\"detailRecommandation\">--<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-sources\">\r\n <strong>Sources :<\/strong>\r\n Eaufrance (18,8 % de fuites),\r\n France Assureurs (44 % des sinistres),\r\n SDES (anciennete = facteur de risque),\r\n Observatoire securite (4 160 sinistres\/jour).\r\n <a href=\"#\" style=\"color:#1c7ec9;text-decoration:none;\">En savoir plus<\/a>\r\n <\/div>\r\n\r\n <div class=\"quiz__result-actions\">\r\n <button class=\"btn--quiz btn--quiz--restart\" id=\"restartQuiz\">\r\n Refaire l'estimation\r\n <\/button>\r\n \r\n <a href=\"tel:0186957777\" class=\"btn--quiz--cta\">\r\n <span class=\"btn__icon\">\ud83d\udcde<\/span>\r\n Parler \u00e0 un expert\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"quiz__nav\" id=\"quizNav\">\r\n <button class=\"btn--quiz btn--quiz--prev\" id=\"prevBtn\" disabled>\r\n Precedent\r\n <\/button>\r\n <button class=\"btn--quiz btn--quiz--next\" id=\"nextBtn\">\r\n Suivant\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ ============================================\r\n \/\/ CONFIGURATION\r\n \/\/ ============================================\r\n const questions = document.querySelectorAll('.quiz__question');\r\n const totalQuestions = questions.length;\r\n let currentQuestion = 0;\r\n let answers = {};\r\n\r\n \/\/ Elements DOM\r\n const progressFill = document.getElementById('progressFill');\r\n const progressText = document.getElementById('progressText');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const quizNav = document.getElementById('quizNav');\r\n const quizResult = document.getElementById('quizResult');\r\n const quizQuestions = document.getElementById('quizQuestions');\r\n\r\n const resultCircle = document.getElementById('resultCircle');\r\n const resultScore = document.getElementById('resultScore');\r\n const resultLabel = document.getElementById('resultLabel');\r\n const resultTitle = document.getElementById('resultTitle');\r\n const resultDesc = document.getElementById('resultDesc');\r\n const detailFuite = document.getElementById('detailFuite');\r\n const detailFrequence = document.getElementById('detailFrequence');\r\n const detailFacteur = document.getElementById('detailFacteur');\r\n const detailRecommandation = document.getElementById('detailRecommandation');\r\n\r\n const circumference = 314.16;\r\n\r\n \/\/ ============================================\r\n \/\/ ALGORITHME BASE SUR DES STATISTIQUES REELLES\r\n \/\/ ============================================\r\n\r\n function calculerEstimation(data) {\r\n \/\/ ---- Base : 18,8 % de fuites (Eaufrance) ----\r\n let score = 18.8;\r\n\r\n \/\/ ---- Facteur type de batiment (France Assureurs) ----\r\n const typeFactors = {\r\n 'copropriete': { poids: 10, label: 'Copropriete \u2013 risque en cascade' },\r\n 'syndic': { poids: 8, label: 'Syndic \u2013 gestion multi-reseaux' },\r\n 'tertiaire': { poids: 6, label: 'Tertiaire \u2013 usage intensif' },\r\n 'collectivite': { poids: 12, label: 'Collectivite \u2013 grands volumes' }\r\n };\r\n if (data.type && typeFactors[data.type]) {\r\n score += typeFactors[data.type].poids;\r\n }\r\n\r\n \/\/ ---- Facteur anciennete de l'entretien (SDES \/ Cerema) ----\r\n const entretienFactors = {\r\n 'recent': { poids: 0, label: 'Entretien recent \u2013 risque maitrise' },\r\n 'moyen': { poids: 8, label: 'Entretien 1-3 ans \u2013 risque modere' },\r\n 'ancien': { poids: 18, label: 'Entretien > 3 ans \u2013 risque eleve' },\r\n 'jamais': { poids: 28, label: 'Jamais entretenu \u2013 risque critique' }\r\n };\r\n if (data.entretien && entretienFactors[data.entretien]) {\r\n score += entretienFactors[data.entretien].poids;\r\n }\r\n\r\n \/\/ ---- Facteur problemes constates (Observatoire securite) ----\r\n const problemeFactors = {\r\n 'urgent': { poids: 22, label: 'Urgence \u2013 signal fort' },\r\n 'occasionnel': { poids: 10, label: 'Problemes occasionnels' },\r\n 'rare': { poids: -5, label: 'Aucun probleme signale' }\r\n };\r\n if (data.probleme && problemeFactors[data.probleme]) {\r\n score += problemeFactors[data.probleme].poids;\r\n }\r\n\r\n \/\/ ---- Facteur objectif (France Assureurs \/ SDES) ----\r\n const objectifFactors = {\r\n 'conformite': { poids: 2, label: 'Conformite \u2013 approche minimale' },\r\n 'prevention': { poids: 0, label: 'Prevention \u2013 bonne approche' },\r\n 'renovation': { poids: 8, label: 'Renovation \u2013 modernisation necessaire' },\r\n 'tranquilite': { poids: 4, label: 'Tranquillite \u2013 approche sereine' }\r\n };\r\n if (data.objectif && objectifFactors[data.objectif]) {\r\n score += objectifFactors[data.objectif].poids;\r\n }\r\n\r\n \/\/ ---- Normalisation ----\r\n score = Math.max(0, Math.min(100, Math.round(score)));\r\n\r\n \/\/ ---- Niveau de risque ----\r\n let niveau, label, couleur;\r\n if (score < 30) {\r\n niveau = 'faible';\r\n label = 'Risque Faible';\r\n couleur = '#22c55e';\r\n } else if (score < 50) {\r\n niveau = 'moyen';\r\n label = 'Risque Moyen';\r\n couleur = '#eab308';\r\n } else if (score < 70) {\r\n niveau = 'eleve';\r\n label = 'Risque Eleve';\r\n couleur = '#f97316';\r\n } else {\r\n niveau = 'critique';\r\n label = 'Risque Critique';\r\n couleur = '#ef4444';\r\n }\r\n\r\n \/\/ ---- Recommandation ----\r\n let recommandation;\r\n if (score < 30) recommandation = 'Surveillance annuelle recommandee';\r\n else if (score < 50) recommandation = 'Inspection camera tous les 2 ans';\r\n else if (score < 70) recommandation = 'Inspection camera dans l\\'annee';\r\n else recommandation = 'Audit d\\'urgence + plan de renovation';\r\n\r\n \/\/ ---- Facteur principal ----\r\n let facteurPrincipal = 'Age du reseau';\r\n if (data.entretien === 'jamais' || data.entretien === 'ancien') facteurPrincipal = 'Anciennete de l\\'entretien';\r\n else if (data.probleme === 'urgent') facteurPrincipal = 'Problemes urgents constates';\r\n else if (data.type === 'collectivite' || data.type === 'copropriete') facteurPrincipal =\r\n 'Densite \/ occupation';\r\n\r\n return {\r\n score: score,\r\n niveau: niveau,\r\n label: label,\r\n couleur: couleur,\r\n recommandation: recommandation,\r\n facteurPrincipal: facteurPrincipal,\r\n details: {\r\n fuite: '18,8 % (moyenne nationale)',\r\n frequence: '44 % des sinistres habitation'\r\n }\r\n };\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ FONCTIONS DU QUIZ\r\n \/\/ ============================================\r\n\r\n function updateProgress() {\r\n const progress = ((currentQuestion + 1) \/ totalQuestions) * 100;\r\n progressFill.style.width = progress + '%';\r\n progressText.textContent = (currentQuestion + 1) + '\/' + totalQuestions;\r\n }\r\n\r\n function showQuestion(index) {\r\n questions.forEach((q, i) => {\r\n q.classList.toggle('quiz__question--active', i === index);\r\n });\r\n\r\n prevBtn.disabled = index === 0;\r\n if (index === totalQuestions - 1) {\r\n const hasAnswer = answers[index] !== undefined;\r\n nextBtn.textContent = hasAnswer ? 'Voir mon estimation' : 'Terminer';\r\n nextBtn.disabled = !hasAnswer;\r\n } else {\r\n nextBtn.textContent = 'Suivant';\r\n nextBtn.disabled = false;\r\n }\r\n\r\n updateProgress();\r\n }\r\n\r\n function selectOption(option) {\r\n const parent = option.closest('.quiz__question');\r\n const questionIndex = parseInt(parent.dataset.question);\r\n\r\n parent.querySelectorAll('.quiz__option').forEach(opt => {\r\n opt.classList.remove('quiz__option--selected');\r\n });\r\n option.classList.add('quiz__option--selected');\r\n\r\n const value = option.dataset.value;\r\n\r\n \/\/ Mapper selon la question\r\n const questionMap = {\r\n 0: 'type',\r\n 1: 'entretien',\r\n 2: 'probleme',\r\n 3: 'objectif'\r\n };\r\n const key = questionMap[questionIndex];\r\n answers[key] = value;\r\n\r\n if (questionIndex === totalQuestions - 1) {\r\n nextBtn.textContent = 'Voir mon estimation';\r\n nextBtn.disabled = false;\r\n }\r\n }\r\n\r\n function showResult() {\r\n const data = {\r\n type: answers.type || 'copropriete',\r\n entretien: answers.entretien || 'jamais',\r\n probleme: answers.probleme || 'urgent',\r\n objectif: answers.objectif || 'renovation'\r\n };\r\n\r\n const result = calculerEstimation(data);\r\n\r\n \/\/ Cercle\r\n const offset = circumference - (result.score \/ 100) * circumference;\r\n resultCircle.style.strokeDashoffset = offset;\r\n resultCircle.style.stroke = result.couleur;\r\n\r\n \/\/ Score\r\n resultScore.textContent = result.score;\r\n\r\n \/\/ Label\r\n resultLabel.textContent = result.label;\r\n resultLabel.className = 'quiz__result-label quiz__result-label--' + result.niveau;\r\n\r\n \/\/ Titre et description\r\n const titres = {\r\n faible: 'Votre reseau semble en bon etat',\r\n moyen: 'Une vigilance est recommandee',\r\n eleve: 'Un risque significatif est identifie',\r\n critique: 'Une urgence est a envisager'\r\n };\r\n resultTitle.textContent = titres[result.niveau] || 'Estimation de votre risque';\r\n resultDesc.textContent = 'Cette estimation est basee sur les statistiques publiques. Un diagnostic terrain permet de confirmer l\\'etat reel.';\r\n\r\n \/\/ Details\r\n detailFuite.textContent = result.details.fuite;\r\n detailFrequence.textContent = result.details.frequence;\r\n detailFacteur.textContent = result.facteurPrincipal;\r\n detailRecommandation.textContent = result.recommandation;\r\n\r\n \/\/ Afficher\r\n quizQuestions.style.display = 'none';\r\n quizNav.style.display = 'none';\r\n quizResult.classList.add('quiz__result--active');\r\n\r\n \/\/ Animation\r\n quizResult.style.animation = 'none';\r\n setTimeout(() => {\r\n quizResult.style.animation = 'fadeSlide 0.6s ease-out forwards';\r\n }, 10);\r\n }\r\n\r\n function resetQuiz() {\r\n currentQuestion = 0;\r\n answers = {};\r\n\r\n document.querySelectorAll('.quiz__option').forEach(opt => {\r\n opt.classList.remove('quiz__option--selected');\r\n });\r\n\r\n quizResult.classList.remove('quiz__result--active');\r\n quizQuestions.style.display = 'block';\r\n quizNav.style.display = 'flex';\r\n\r\n showQuestion(0);\r\n nextBtn.textContent = 'Suivant';\r\n nextBtn.disabled = false;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ EVENEMENTS\r\n \/\/ ============================================\r\n\r\n document.querySelectorAll('.quiz__option').forEach(option => {\r\n option.addEventListener('click', function() {\r\n selectOption(this);\r\n });\r\n });\r\n\r\n prevBtn.addEventListener('click', function() {\r\n if (currentQuestion > 0) {\r\n currentQuestion--;\r\n showQuestion(currentQuestion);\r\n }\r\n });\r\n\r\n nextBtn.addEventListener('click', function() {\r\n if (currentQuestion === totalQuestions - 1) {\r\n const requiredKeys = ['type', 'entretien', 'probleme', 'objectif'];\r\n const allAnswered = requiredKeys.every(k => answers[k] !== undefined);\r\n if (allAnswered) {\r\n showResult();\r\n } else {\r\n alert('Veuillez repondre a toutes les questions avant de voir le resultat.');\r\n }\r\n } else {\r\n const questionMap = { 0: 'type', 1: 'entretien', 2: 'probleme', 3: 'objectif' };\r\n const key = questionMap[currentQuestion];\r\n if (answers[key] !== undefined) {\r\n currentQuestion++;\r\n showQuestion(currentQuestion);\r\n } else {\r\n alert('Veuillez selectionner une reponse avant de continuer.');\r\n }\r\n }\r\n });\r\n\r\n document.getElementById('restartQuiz').addEventListener('click', resetQuiz);\r\n\r\n \/\/ ============================================\r\n \/\/ INIT\r\n \/\/ ============================================\r\n showQuestion(0);\r\n\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4929a6b e-con-full e-flex e-con e-parent\" data-id=\"4929a6b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bb68cf elementor-widget elementor-widget-html\" data-id=\"1bb68cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n<meta charset=\"UTF-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n<title>BT Plus \u2014 Les b\u00e9n\u00e9fices de l'entretien pr\u00e9ventif<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --blue-900:#07294a;\r\n --blue-800:#0a3666;\r\n --blue-700:#0d4f8b;\r\n --blue-500:#1c7ec9;\r\n --blue-300:#7cc0ee;\r\n --blue-100:#d6ebfb;\r\n --blue-50:#eef6fc;\r\n --orange:#f4a61a;\r\n --orange-dark:#d98a0c;\r\n --ink:#0c2238;\r\n --slate:#48637d;\r\n --paper:#ffffff;\r\n --red:#dc3545;\r\n --green:#28a745;\r\n\r\n --font-display:\"Sora\",sans-serif;\r\n --font-body:\"Inter\",sans-serif;\r\n\r\n --shadow-sm:0 2px 10px rgba(7,41,74,.06);\r\n --shadow-md:0 18px 40px -16px rgba(7,41,74,.30);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0}\r\n html{scroll-behavior:smooth}\r\n body{\r\n font-family:var(--font-body);\r\n color:var(--ink);\r\n background:var(--paper);\r\n -webkit-font-smoothing:antialiased;\r\n line-height:1.6;\r\n }\r\n\r\n \/* ============================================\r\n SECTION B\u00c9N\u00c9FICES\r\n ============================================ *\/\r\n .benefices {\r\n padding:80px 24px 100px;\r\n background:\r\n radial-gradient(ellipse at 20% 50%, var(--blue-50), transparent 60%),\r\n radial-gradient(ellipse at 80% 50%, var(--blue-100), transparent 60%),\r\n var(--paper);\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n\r\n .benefices__container {\r\n max-width:1200px;\r\n margin:0 auto;\r\n position:relative;\r\n z-index:1;\r\n }\r\n\r\n \/* ============================================\r\n EN-T\u00caTE\r\n ============================================ *\/\r\n .benefices__header {\r\n text-align:center;\r\n max-width:780px;\r\n margin:0 auto 50px;\r\n }\r\n\r\n .benefices__badge {\r\n display:inline-flex;\r\n align-items:center;\r\n gap:0.6rem;\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:0.7rem;\r\n letter-spacing:0.1em;\r\n text-transform:uppercase;\r\n padding:0.4rem 1.4rem 0.4rem 1rem;\r\n border-radius:2rem;\r\n background:rgba(28,126,201,0.07);\r\n color:var(--blue-500);\r\n border:1px solid rgba(28,126,201,0.12);\r\n margin-bottom:1.2rem;\r\n }\r\n\r\n .benefices__badge .dot {\r\n width:6px;\r\n height:6px;\r\n border-radius:50%;\r\n background:var(--blue-500);\r\n animation:pulseDot 2s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%,100%{opacity:1;transform:scale(1)}\r\n 50%{opacity:0.3;transform:scale(0.6)}\r\n }\r\n\r\n .benefices__title {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:clamp(2rem,3.6vw,3.2rem);\r\n letter-spacing:-0.03em;\r\n color:var(--blue-900);\r\n line-height:1.1;\r\n margin-bottom:0.8rem;\r\n }\r\n\r\n .benefices__title .highlight {\r\n background:linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n }\r\n\r\n .benefices__subtitle {\r\n font-family:var(--font-body);\r\n font-weight:400;\r\n font-size:clamp(1rem,1.1vw,1.15rem);\r\n color:var(--slate);\r\n max-width:600px;\r\n margin:0 auto;\r\n line-height:1.7;\r\n }\r\n\r\n \/* ============================================\r\n GRILLE DES B\u00c9N\u00c9FICES\r\n ============================================ *\/\r\n .benefices__grid {\r\n display:grid;\r\n grid-template-columns:repeat(4,1fr);\r\n gap:24px;\r\n margin-top:20px;\r\n }\r\n\r\n .benefices__card {\r\n background:var(--paper);\r\n border-radius:20px;\r\n border:1px solid var(--blue-100);\r\n padding:30px 24px 28px;\r\n box-shadow:var(--shadow-sm);\r\n transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);\r\n text-align:center;\r\n }\r\n\r\n .benefices__card:hover {\r\n transform:translateY(-8px);\r\n border-color:var(--blue-300);\r\n box-shadow:var(--shadow-md);\r\n }\r\n\r\n \/* Nombre *\/\r\n .benefices__card-number {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:2.8rem;\r\n line-height:1;\r\n color:rgba(28,126,201,0.06);\r\n margin-bottom:8px;\r\n transition:color 0.3s ease;\r\n }\r\n\r\n .benefices__card:hover .benefices__card-number {\r\n color:rgba(28,126,201,0.12);\r\n }\r\n\r\n \/* Titre *\/\r\n .benefices__card-title {\r\n font-family:var(--font-display);\r\n font-weight:700;\r\n font-size:1.05rem;\r\n color:var(--blue-900);\r\n margin-bottom:8px;\r\n }\r\n\r\n .benefices__card-title .highlight {\r\n background:linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%);\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n background-clip:text;\r\n }\r\n\r\n .benefices__card-desc {\r\n font-size:0.85rem;\r\n color:var(--slate);\r\n line-height:1.6;\r\n }\r\n\r\n \/* ============================================\r\n BANDEAU CHIFFRES CL\u00c9S\r\n ============================================ *\/\r\n .benefices__chiffres {\r\n margin-top:50px;\r\n background:var(--blue-900);\r\n border-radius:20px;\r\n padding:40px 50px;\r\n display:grid;\r\n grid-template-columns:repeat(3,1fr);\r\n gap:30px;\r\n color:#fff;\r\n box-shadow:0 20px 50px -12px rgba(7,41,74,0.35);\r\n }\r\n\r\n .benefices__chiffres-item {\r\n text-align:center;\r\n }\r\n\r\n .benefices__chiffres-item .number {\r\n font-family:var(--font-display);\r\n font-weight:800;\r\n font-size:2.4rem;\r\n color:var(--orange);\r\n display:block;\r\n line-height:1;\r\n }\r\n\r\n .benefices__chiffres-item .label {\r\n font-size:0.85rem;\r\n color:rgba(255,255,255,0.7);\r\n margin-top:4px;\r\n }\r\n\r\n .benefices__chiffres-item .sub {\r\n font-size:0.7rem;\r\n color:rgba(255,255,255,0.4);\r\n margin-top:2px;\r\n }\r\n\r\n \/* ============================================\r\n ANIMATIONS\r\n ============================================ *\/\r\n .reveal-benefice {\r\n opacity:0;\r\n transform:translateY(30px);\r\n animation:slideUp 0.7s cubic-bezier(0.2,0.7,0.3,1) forwards;\r\n }\r\n\r\n .reveal-benefice:nth-child(1){animation-delay:0.05s}\r\n .reveal-benefice:nth-child(2){animation-delay:0.12s}\r\n .reveal-benefice:nth-child(3){animation-delay:0.19s}\r\n .reveal-benefice:nth-child(4){animation-delay:0.26s}\r\n\r\n @keyframes slideUp {\r\n to{opacity:1;transform:translateY(0)}\r\n }\r\n\r\n @media(prefers-reduced-motion:reduce){\r\n .reveal-benefice{opacity:1;transform:none;animation:none}\r\n }\r\n\r\n \/* ============================================\r\n RESPONSIVE\r\n ============================================ *\/\r\n @media(max-width:1024px){\r\n .benefices__grid {\r\n grid-template-columns:repeat(2,1fr);\r\n gap:20px;\r\n }\r\n\r\n .benefices__chiffres {\r\n grid-template-columns:repeat(3,1fr);\r\n padding:30px 24px;\r\n }\r\n }\r\n\r\n @media(max-width:640px){\r\n .benefices {\r\n padding:50px 16px 70px;\r\n }\r\n\r\n .benefices__grid {\r\n grid-template-columns:1fr;\r\n gap:16px;\r\n }\r\n\r\n .benefices__card {\r\n padding:24px 20px;\r\n text-align:left;\r\n display:flex;\r\n gap:16px;\r\n align-items:flex-start;\r\n }\r\n\r\n .benefices__card-number {\r\n font-size:2rem;\r\n margin-bottom:0;\r\n flex-shrink:0;\r\n min-width:40px;\r\n }\r\n\r\n .benefices__card-content {\r\n flex:1;\r\n }\r\n\r\n .benefices__card-title {\r\n font-size:0.95rem;\r\n margin-bottom:4px;\r\n }\r\n\r\n .benefices__card-desc {\r\n font-size:0.8rem;\r\n }\r\n\r\n .benefices__chiffres {\r\n grid-template-columns:1fr;\r\n gap:20px;\r\n padding:24px;\r\n }\r\n\r\n .benefices__chiffres-item .number {\r\n font-size:1.8rem;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <section class=\"benefices\">\r\n <div class=\"benefices__container\">\r\n\r\n \r\n <div class=\"benefices__header\">\r\n <span class=\"benefices__badge\">\r\n <span class=\"dot\"><\/span>\r\n Pourquoi anticiper ?\r\n <\/span>\r\n <h2 class=\"benefices__title\">\r\n Les b\u00e9n\u00e9fices <span class=\"highlight\">d'un entretien pr\u00e9ventif<\/span>\r\n <\/h2>\r\n <p class=\"benefices__subtitle\">\r\n Un r\u00e9seau bien entretenu, c'est moins de pannes, moins de co\u00fbts et plus de s\u00e9r\u00e9nit\u00e9.\r\n Voici ce que vous gagnez en agissant avant qu'il ne soit trop tard.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__grid\">\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">01<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">\u00c9conomies <span class=\"highlight\">durables<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Un entretien r\u00e9gulier co\u00fbte jusqu'\u00e0 5 fois moins cher qu'une intervention d'urgence.\r\n Anticipez pour ma\u00eetriser votre budget.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">02<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Tranquillit\u00e9 <span class=\"highlight\">d'esprit<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Finis les stress des d\u00e9bordements et des refoulements.\r\n Vous dormez sur vos deux oreilles avec un r\u00e9seau sous contr\u00f4le.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">03<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Conformit\u00e9 <span class=\"highlight\">assur\u00e9e<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Respectez les normes environnementales et r\u00e9glementaires\r\n avec un r\u00e9seau toujours en conformit\u00e9.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"benefices__card reveal-benefice\">\r\n <div class=\"benefices__card-number\">04<\/div>\r\n <div class=\"benefices__card-content\">\r\n <h3 class=\"benefices__card-title\">Patrimoine <span class=\"highlight\">pr\u00e9serv\u00e9<\/span><\/h3>\r\n <p class=\"benefices__card-desc\">\r\n Un r\u00e9seau entretenu, c'est un b\u00e2timent qui se d\u00e9grade moins vite.\r\n Vous prot\u00e9gez la valeur de votre patrimoine immobilier.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9acf402 e-con-full e-flex e-con e-parent\" data-id=\"9acf402\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c301154 elementor-widget elementor-widget-html\" data-id=\"c301154\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\" \/>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\" \/>\r\n\r\n<style>\r\n.contact { padding: 5rem 5% 6rem; position: relative; min-height: 100vh; display: flex; align-items: center;\r\n background: radial-gradient(1100px 520px at 78% -8%, #d6ebfb, transparent 60%), linear-gradient(180deg, #fbfdff 0%, #eef6fc 100%);\r\n overflow: hidden; box-sizing: border-box; }\r\n.contact *, .contact *::before, .contact *::after { box-sizing: border-box; }\r\n.contact__waves { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; z-index: 0; pointer-events: none; }\r\n.contact__waves svg { display: block; width: 100%; height: 80px; }\r\n.contact__waves .wave-back use { animation: wavemove 11s linear infinite; opacity: 0.55; }\r\n.contact__waves .wave-mid use { animation: wavemove 8s linear infinite reverse; opacity: 0.8; }\r\n.contact__waves .wave-front use { animation: wavemove 6s linear infinite; }\r\n@keyframes wavemove { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }\r\n.contact__container { max-width: 1280px; margin: 0 auto; width: 100%; position: relative; z-index: 1; }\r\n.contact__header { text-align: center; max-width: 780px; margin: 0 auto 3.5rem; }\r\n.contact__badge { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1.4rem 0.4rem 1rem; border-radius: 2rem; background: rgba(28, 126, 201, 0.07); color: #1c7ec9; border: 1px solid rgba(28, 126, 201, 0.12); margin-bottom: 1.2rem; }\r\n.contact__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #1c7ec9; animation: pulseDot 2s ease-in-out infinite; }\r\n@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.6); } }\r\n.contact__title { font-family: 'Sora', sans-serif; font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.2rem); letter-spacing: -0.03em; color: #07294a; line-height: 1.1; margin-bottom: 0.8rem; }\r\n.contact__title .highlight { background: linear-gradient(135deg, #f4a61a 0%, #d98a0c 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n.contact__subtitle { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(1rem, 1.1vw, 1.15rem); color: #6b7f94; max-width: 600px; margin: 0 auto; line-height: 1.7; }\r\n.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }\r\n.contact__form { background: #ffffff; border-radius: 24px; padding: 2.5rem; border: 1px solid #eef2f6; box-shadow: 0 2px 12px rgba(7, 41, 74, 0.04); transition: all 0.4s ease; position: relative; }\r\n.contact__form:hover { box-shadow: 0 8px 40px rgba(7, 41, 74, 0.08); border-color: #d6ebfb; }\r\n.contact__form-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.3rem; color: #07294a; margin-bottom: 0.3rem; }\r\n.contact__form-subtitle { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.9rem; color: #6b7f94; margin-bottom: 1.5rem; }\r\n.contact__form-group { margin-bottom: 1.2rem; }\r\n.contact__form-group label { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.7rem; color: #6b7f94; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }\r\n.contact__form-group label .required { color: #dc2626; }\r\n.contact__form-group input, .contact__form-group select, .contact__form-group textarea { width: 100%; padding: 0.8rem 1rem; border-radius: 12px; border: 1px solid #eef2f6; background: #f8fafc; font-family: 'Inter', sans-serif; font-size: 0.9rem; color: #07294a; transition: all 0.3s ease; outline: none; }\r\n.contact__form-group input:focus, .contact__form-group select:focus, .contact__form-group textarea:focus { border-color: #1c7ec9; background: #ffffff; box-shadow: 0 0 0 4px rgba(28, 126, 201, 0.06); }\r\n.contact__form-group input::placeholder, .contact__form-group textarea::placeholder { color: #b0c0d0; }\r\n.contact__form-group select option { background: #ffffff; color: #07294a; }\r\n.contact__form-group textarea { resize: vertical; min-height: 100px; }\r\n.contact__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n.contact__form-group--file { position: relative; }\r\n.contact__form-group--file .file-drop-zone { border: 2px dashed #eef2f6; border-radius: 12px; padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.3s ease; background: #f8fafc; }\r\n.contact__form-group--file .file-drop-zone:hover { border-color: #1c7ec9; background: #eef6fc; }\r\n.contact__form-group--file .file-drop-zone.dragover { border-color: #f4a61a; background: rgba(244, 166, 26, 0.04); }\r\n.contact__form-group--file .file-drop-zone i { font-size: 2rem; color: #1c7ec9; display: block; margin-bottom: 0.5rem; }\r\n.contact__form-group--file .file-drop-zone p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.85rem; color: #6b7f94; margin: 0; }\r\n.contact__form-group--file .file-drop-zone .file-types { font-size: 0.7rem; color: #b0c0d0; margin-top: 0.3rem; }\r\n.contact__form-group--file input[type=\"file\"] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }\r\n.contact__form-group--file .file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }\r\n.contact__form-group--file .file-item { display: inline-flex; align-items: center; gap: 0.5rem; background: #eef6fc; padding: 0.3rem 0.8rem 0.3rem 0.6rem; border-radius: 20px; font-family: 'Inter', sans-serif; font-size: 0.75rem; color: #1c7ec9; border: 1px solid #d6ebfb; }\r\n.contact__form-group--file .file-item i { font-size: 0.8rem; color: #1c7ec9; }\r\n.contact__form-group--file .file-item .file-remove { cursor: pointer; color: #6b7f94; transition: color 0.3s ease; font-size: 0.7rem; }\r\n.contact__form-group--file .file-item .file-remove:hover { color: #dc2626; }\r\n\r\n\/* ---- Consentement RGPD ---- *\/\r\n.contact__consent { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.5rem; }\r\n.contact__consent input[type=\"checkbox\"] { width: 18px; height: 18px; min-width: 18px; margin-top: 0.15rem; accent-color: #1c7ec9; cursor: pointer; flex-shrink: 0; }\r\n.contact__consent label { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.8rem; line-height: 1.5; color: #6b7f94; text-transform: none; letter-spacing: 0; margin-bottom: 0; cursor: pointer; }\r\n.contact__consent label .required { color: #dc2626; }\r\n.contact__consent label a { color: #1c7ec9; text-decoration: underline; }\r\n.contact__consent label a:hover { color: #07294a; }\r\n\r\n.btn--contact { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; text-decoration: none; padding: 0.9rem 2.4rem; border-radius: 3rem; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; border: none; text-align: center; background: linear-gradient(135deg, #f4a61a 0%, #e0960e 100%); box-shadow: 0 4px 16px rgba(244, 166, 26, 0.25); color: #07294a; width: 100%; }\r\n.btn--contact:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(244, 166, 26, 0.40); color: #07294a; }\r\n.btn--contact .btn__icon { transition: transform 0.3s ease; }\r\n.btn--contact:hover .btn__icon { transform: translateX(4px); }\r\n.contact__info { display: flex; flex-direction: column; gap: 1.2rem; }\r\n.contact__info-card { background: #ffffff; border-radius: 16px; padding: 1.5rem 1.8rem; border: 1px solid #eef2f6; transition: all 0.4s ease; display: flex; align-items: center; gap: 1.2rem; box-shadow: 0 2px 8px rgba(7, 41, 74, 0.03); }\r\n.contact__info-card:hover { transform: translateX(6px); border-color: #1c7ec9; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.08); }\r\n.contact__info-icon { width: 50px; height: 50px; border-radius: 14px; background: #f0f4f8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }\r\n.contact__info-card:hover .contact__info-icon { background: #eef6fc; }\r\n.contact__info-icon i { font-size: 1.3rem; color: #1c7ec9; }\r\n.contact__info-content h4 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; color: #07294a; margin-bottom: 0.1rem; }\r\n.contact__info-content p, .contact__info-content a { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.9rem; color: #6b7f94; text-decoration: none; transition: color 0.3s ease; }\r\n.contact__info-content a:hover { color: #1c7ec9; }\r\n.contact__hours { background: #ffffff; border-radius: 16px; padding: 1.5rem 1.8rem; border: 1px solid #eef2f6; box-shadow: 0 2px 8px rgba(7, 41, 74, 0.03); transition: all 0.4s ease; }\r\n.contact__hours:hover { border-color: #d6ebfb; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.06); }\r\n.contact__hours-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.85rem; color: #6b7f94; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.8rem; }\r\n.contact__hours-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; }\r\n.contact__hours-day { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; color: #6b7f94; }\r\n.contact__hours-time { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.85rem; color: #07294a; text-align: right; }\r\n.contact__hours-time .urgent { color: #1c7ec9; font-weight: 700; }\r\n.contact__map { border-radius: 16px; overflow: hidden; border: 1px solid #eef2f6; height: 200px; background: #f8fafc; transition: all 0.4s ease; }\r\n.contact__map:hover { border-color: #d6ebfb; box-shadow: 0 8px 30px -8px rgba(7, 41, 74, 0.06); }\r\n.contact__map iframe { width: 100%; height: 100%; border: none; }\r\n@media (max-width: 992px) {\r\n .contact__grid { grid-template-columns: 1fr; gap: 2rem; }\r\n .contact__form { padding: 2rem; }\r\n .contact__info { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }\r\n .contact__hours-grid { grid-template-columns: 1fr 1fr; }\r\n .contact__map { height: 180px; }\r\n}\r\n@media (max-width: 768px) {\r\n .contact { padding: 3.5rem 1.5rem 4rem; min-height: auto; }\r\n .contact__form { padding: 1.5rem; border-radius: 16px; }\r\n .contact__form-row { grid-template-columns: 1fr; gap: 0; }\r\n .contact__info { grid-template-columns: 1fr; gap: 1rem; }\r\n .contact__info-card { padding: 1.2rem 1.5rem; }\r\n .contact__hours { padding: 1.2rem 1.5rem; }\r\n .contact__hours-grid { grid-template-columns: 1fr 1fr; gap: 0.3rem 0.8rem; }\r\n .contact__hours-day { font-size: 0.75rem; }\r\n .contact__hours-time { font-size: 0.75rem; }\r\n .contact__map { height: 150px; }\r\n .btn--contact { padding: 0.7rem 1.8rem; font-size: 0.75rem; }\r\n .contact__form-group--file .file-drop-zone { padding: 1rem; }\r\n .contact__form-group--file .file-drop-zone i { font-size: 1.5rem; }\r\n .contact__waves svg { height: 40px; }\r\n}\r\n@media (max-width: 480px) {\r\n .contact__form { padding: 1rem; }\r\n .contact__info-card { padding: 1rem; }\r\n .contact__info-icon { width: 40px; height: 40px; }\r\n .contact__info-icon i { font-size: 1rem; }\r\n .contact__hours { padding: 1rem; }\r\n}\r\n<\/style>\r\n\r\n<section class=\"contact\">\r\n <div class=\"contact__container\">\r\n\r\n <div class=\"contact__header\">\r\n <span class=\"contact__badge\"><span class=\"dot\"><\/span> Contactez-nous<\/span>\r\n <h2 class=\"contact__title\">Pret a <span class=\"highlight\">securiser<\/span> vos reseaux ?<\/h2>\r\n <p class=\"contact__subtitle\">Une question, un devis, une urgence ? Notre equipe est a votre ecoute 24h\/24 et 7j\/7.<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact__grid\">\r\n\r\n \r\n <div class=\"contact__form\">\r\n <h3 class=\"contact__form-title\">Demandez un diagnostic<\/h3>\r\n <p class=\"contact__form-subtitle\">Remplissez le formulaire et nous vous recontacterons sous 24h.<\/p>\r\n\r\n \r\n <form id=\"contactForm\"\r\n action=\"https:\/\/formsubmit.co\/info-contact@btplus.fr\"\r\n method=\"POST\"\r\n enctype=\"multipart\/form-data\">\r\n\r\n <input type=\"hidden\" name=\"_subject\" value=\"Nouvelle demande de diagnostic - Site BT Plus\">\r\n <input type=\"hidden\" name=\"_template\" value=\"table\">\r\n \r\n <input type=\"hidden\" name=\"_cc\" value=\"marketing@btgroup-france.com\">\r\n <input type=\"text\" name=\"_honey\" style=\"display:none\">\r\n \r\n\r\n <div class=\"contact__form-row\">\r\n <div class=\"contact__form-group\">\r\n <label for=\"nom\">Nom complet <span class=\"required\">*<\/span><\/label>\r\n <input type=\"text\" id=\"nom\" name=\"Nom complet\" placeholder=\"Jean Dupont\" required \/>\r\n <\/div>\r\n <div class=\"contact__form-group\">\r\n <label for=\"email\">Email <span class=\"required\">*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"jean@exemple.fr\" required \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__form-row\">\r\n <div class=\"contact__form-group\">\r\n <label for=\"telephone\">Telephone <span class=\"required\">*<\/span><\/label>\r\n <input type=\"tel\" id=\"telephone\" name=\"Telephone\" placeholder=\"01 23 45 67 89\" required \/>\r\n <\/div>\r\n <div class=\"contact__form-group\">\r\n <label for=\"cp\">Code postal<\/label>\r\n <input type=\"text\" id=\"cp\" name=\"Code postal\" placeholder=\"75000\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"type_batiment\">Type de batiment<\/label>\r\n <select id=\"type_batiment\" name=\"Type de batiment\">\r\n <option value=\"\">Selectionnez...<\/option>\r\n <option value=\"copropriete\">Copropriete<\/option>\r\n <option value=\"syndic\">Syndic<\/option>\r\n <option value=\"bailleur\">Bailleur social<\/option>\r\n <option value=\"erp\">ERP (Etablissement recevant du public)<\/option>\r\n <option value=\"tertiaire\">Tertiaire (bureau, commerce)<\/option>\r\n <option value=\"collectivite\">Collectivite<\/option>\r\n <option value=\"particulier\">Particulier<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"type_besoin\">Type de besoin<\/label>\r\n <select id=\"type_besoin\" name=\"Type de besoin\">\r\n <option value=\"\">Selectionnez...<\/option>\r\n <option value=\"urgence\">Urgence (debouchage, curage)<\/option>\r\n <option value=\"entretien\">Entretien preventif<\/option>\r\n <option value=\"diagnostic\">Diagnostic \/ Inspection<\/option>\r\n <option value=\"travaux\">Travaux \/ Renovation<\/option>\r\n <option value=\"contrat\">Contrat d'entretien<\/option>\r\n <option value=\"devis\">Demande de devis<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group\">\r\n <label for=\"message\">Message<\/label>\r\n <textarea id=\"message\" name=\"Message\" placeholder=\"Decrivez votre situation...\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"contact__form-group contact__form-group--file\">\r\n <label>Ajouter une photo <span style=\"font-weight:400;text-transform:none;color:#b0c0d0;\">(optionnel - une seule)<\/span><\/label>\r\n <div class=\"file-drop-zone\" id=\"fileDropZone\">\r\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\r\n <p>Glissez une photo ici ou cliquez pour la selectionner<\/p>\r\n <div class=\"file-types\">JPG, PNG, GIF - une seule photo, 5MB max<\/div>\r\n <input type=\"file\" id=\"fileInput\" name=\"attachment\" accept=\"image\/*\" \/>\r\n <\/div>\r\n <div class=\"file-list\" id=\"fileList\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact__consent\">\r\n <input type=\"checkbox\" id=\"consent\" name=\"Consentement RGPD\" value=\"J'accepte\" required \/>\r\n <label for=\"consent\">\r\n J'accepte que les informations saisies dans ce formulaire soient utilisees par BT Plus\r\n afin de traiter ma demande et de me recontacter. Conformement au RGPD, je dispose d'un\r\n droit d'acces, de rectification et de suppression de mes donnees, que je peux exercer en\r\n ecrivant a <a href=\"mailto:info-contact@btplus.fr\">info-contact@btplus.fr<\/a>.\r\n <a href=\"\/politique-de-confidentialite\" target=\"_blank\" rel=\"noopener\">En savoir plus<\/a>.\r\n <span class=\"required\">*<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn--contact\">\r\n Envoyer <span class=\"btn__icon\">→<\/span>\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"contact__info\">\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-phone\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Telephone<\/h4><p><a href=\"tel:+331 86 95 77 77\">01 86 95 77 77<\/a><\/p><\/div>\r\n <\/div>\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-envelope\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Email<\/h4><p><a href=\"mailto:contact@btplus-intervention.fr\">info-contact@btplus.fr<\/a><\/p><\/div>\r\n <\/div>\r\n <div class=\"contact__info-card\">\r\n <div class=\"contact__info-icon\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\r\n <div class=\"contact__info-content\"><h4>Adresse<\/h4><p>13 Rue Camille Desmoulins,\r\n92130 Issy-les-Moulineaux<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__hours\">\r\n <div class=\"contact__hours-title\">Horaires d'ouverture<\/div>\r\n <div class=\"contact__hours-grid\">\r\n <span class=\"contact__hours-day\">Lundi - Vendredi<\/span><span class=\"contact__hours-time\">08:00 - 20:00<\/span>\r\n <span class=\"contact__hours-day\">Samedi<\/span><span class=\"contact__hours-time\">09:00 - 18:00<\/span>\r\n <span class=\"contact__hours-day\">Dimanche & jours feries<\/span><span class=\"contact__hours-time\"><span class=\"urgent\">Urgence 24\/7<\/span><\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__map\">\r\n <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d2623.5!2d2.366!3d48.916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e2f8e5c8b3d%3A0x8e5c8b3d47e66e2f!2sAubervilliers!5e0!3m2!1sfr!2sfr!4v1700000000000\" allowfullscreen loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact__waves\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\">\r\n <defs><path id=\"w9\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" \/><\/defs>\r\n <g class=\"wave-back\"><use href=\"#w9\" x=\"0\" fill=\"#d6ebfb\"\/><use href=\"#w9\" x=\"176\" fill=\"#d6ebfb\"\/><\/g>\r\n <g class=\"wave-mid\"><use href=\"#w9\" x=\"0\" fill=\"#a9d4f3\"\/><use href=\"#w9\" x=\"176\" fill=\"#a9d4f3\"\/><\/g>\r\n <g class=\"wave-front\"><use href=\"#w9\" x=\"0\" fill=\"#ffffff\"\/><use href=\"#w9\" x=\"176\" fill=\"#ffffff\"\/><\/g>\r\n <\/svg>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n var fileInput = document.getElementById('fileInput');\r\n var fileList = document.getElementById('fileList');\r\n var dropZone = document.getElementById('fileDropZone');\r\n if (!fileInput || !dropZone) return;\r\n var perFileMax = 5 * 1024 * 1024;\r\n var totalMax = 10 * 1024 * 1024;\r\n\r\n function updateFileList(files) {\r\n fileList.innerHTML = '';\r\n Array.from(files).forEach(function (file, index) {\r\n var item = document.createElement('span');\r\n item.className = 'file-item';\r\n var icon = file.type.indexOf('image\/') === 0 ? 'fa-image' : 'fa-file';\r\n item.innerHTML = '<i class=\"fas ' + icon + '\"><\/i><span>' + file.name + '<\/span><span class=\"file-remove\" data-index=\"' + index + '\"><i class=\"fas fa-times\"><\/i><\/span>';\r\n fileList.appendChild(item);\r\n });\r\n document.querySelectorAll('.file-remove').forEach(function (btn) {\r\n btn.addEventListener('click', function (e) {\r\n e.stopPropagation();\r\n var idx = parseInt(this.dataset.index);\r\n var dt = new DataTransfer();\r\n Array.from(fileInput.files).filter(function (_, i) { return i !== idx; }).forEach(function (f) { dt.items.add(f); });\r\n fileInput.files = dt.files;\r\n updateFileList(fileInput.files);\r\n });\r\n });\r\n }\r\n\r\n function applyFiles(candidate) {\r\n var valid = candidate.filter(function (f) { return f.type.indexOf('image\/') === 0 && f.size <= perFileMax; });\r\n if (candidate.length > 1) alert('Une seule photo peut etre envoyee. Seule la premiere a ete conservee.');\r\n else if (valid.length !== candidate.length) alert('Fichier ignore (image uniquement, 5MB max).');\r\n var dt = new DataTransfer();\r\n if (valid.length > 0) dt.items.add(valid[0]);\r\n fileInput.files = dt.files;\r\n updateFileList(fileInput.files);\r\n }\r\n\r\n dropZone.addEventListener('click', function (e) { if (e.target === this || e.target.closest('.file-drop-zone')) fileInput.click(); });\r\n fileInput.addEventListener('change', function () { applyFiles(Array.from(this.files)); });\r\n dropZone.addEventListener('dragover', function (e) { e.preventDefault(); this.classList.add('dragover'); });\r\n dropZone.addEventListener('dragleave', function (e) { e.preventDefault(); this.classList.remove('dragover'); });\r\n dropZone.addEventListener('drop', function (e) {\r\n e.preventDefault(); this.classList.remove('dragover');\r\n applyFiles(Array.from(e.dataTransfer.files));\r\n });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BT Plus \u2014 Quel entretien pour mon r\u00e9seau ? 24h\/24 Entretien & pr\u00e9vention Quel entretien pour mon r\u00e9seau ? Chaque r\u00e9seau est unique. Nous vous guidons vers le programme d’entretien adapt\u00e9 \u00e0 votre type de canalisation, votre usage et votre budget. Syndics, h\u00f4teliers, gestionnaires de copropri\u00e9t\u00e9 et particuliers : trouvez la solution qui vous correspond. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1403","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1403"}],"version-history":[{"count":17,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions"}],"predecessor-version":[{"id":2646,"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/pages\/1403\/revisions\/2646"}],"wp:attachment":[{"href":"https:\/\/sci-bme.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1403"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}