{"id":118,"date":"2026-09-14T13:58:14","date_gmt":"2026-09-14T11:58:14","guid":{"rendered":"https:\/\/demo.jouglet-web.fr\/electricien\/?page_id=118"},"modified":"2026-09-14T13:58:14","modified_gmt":"2026-09-14T11:58:14","slug":"eclairage","status":"publish","type":"page","link":"https:\/\/demo.jouglet-web.fr\/electricien\/eclairage\/","title":{"rendered":"\u00c9clairage"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-layout-flow wp-block-group-is-layout-flow\">\n<!-- =========================================================\n     WEB JOUGLET STUDIO\n     MOD\u00c8LE \u00c9LECTRICIEN \u2014 \u00c9CLAIRAGE\n\n     URL :\n     https:\/\/demo.jouglet-web.fr\/electricien\/eclairage\/\n\n     NOVA \u00c9LEC \u2014 entreprise fictive\n     ========================================================= -->\n\n<div class=\"wj-lighting\">\n\n<style>\n\/* =========================================================\n   BASE\n   ========================================================= *\/\n\n.wj-lighting{\n    --navy:#071828;\n    --navy2:#0b2239;\n    --blue:#1687ff;\n    --blue-dark:#0668ce;\n    --cyan:#7dcbff;\n    --soft:#f4f8fc;\n    --soft-blue:#eaf5ff;\n    --white:#ffffff;\n    --text:#102436;\n    --muted:#607487;\n    --border:#dce7f0;\n    --shadow:0 18px 50px rgba(7,24,40,.10);\n\n    width:100vw;\n    margin-left:calc(50% - 50vw);\n    overflow:clip;\n\n    background:#fff;\n    color:var(--text);\n\n    font-family:\n        Inter,\n        ui-sans-serif,\n        -apple-system,\n        BlinkMacSystemFont,\n        \"Segoe UI\",\n        Roboto,\n        Arial,\n        sans-serif;\n\n    line-height:1.6;\n    -webkit-font-smoothing:antialiased;\n}\n\n.wj-lighting *,\n.wj-lighting *::before,\n.wj-lighting *::after{\n    box-sizing:border-box;\n}\n\n.wj-lighting img{\n    display:block;\n    max-width:100%;\n}\n\n.wj-lighting h1,\n.wj-lighting h2,\n.wj-lighting h3,\n.wj-lighting p{\n    margin-top:0;\n}\n\n.wj-lighting h1,\n.wj-lighting h2,\n.wj-lighting h3{\n    line-height:1.08;\n    letter-spacing:-.035em;\n}\n\n.wj-lighting a{\n    color:inherit;\n    text-decoration:none;\n}\n\n.wj-container{\n    width:min(1180px,calc(100% - 40px));\n    margin-inline:auto;\n}\n\n.wj-kicker{\n    display:inline-flex;\n    align-items:center;\n    gap:9px;\n\n    margin-bottom:15px;\n\n    color:var(--blue-dark);\n\n    font-size:.76rem;\n    font-weight:800;\n    letter-spacing:.11em;\n    text-transform:uppercase;\n}\n\n.wj-kicker::before{\n    content:\"\";\n\n    width:28px;\n    height:2px;\n\n    border-radius:99px;\n\n    background:var(--blue);\n}\n\n.wj-section-head{\n    max-width:760px;\n    margin-bottom:38px;\n}\n\n.wj-section-head h2{\n    margin-bottom:13px;\n\n    color:var(--navy);\n\n    font-size:clamp(2rem,4vw,3.4rem);\n}\n\n.wj-section-head p{\n    max-width:650px;\n\n    margin:0;\n\n    color:var(--muted);\n}\n\n.wj-btn{\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n\n    min-height:50px;\n\n    padding:0 21px;\n\n    border:1px solid transparent;\n    border-radius:13px;\n\n    font-size:.9rem;\n    font-weight:800;\n\n    transition:\n        transform .2s ease,\n        background .2s ease;\n}\n\n.wj-btn:hover{\n    transform:translateY(-2px);\n}\n\n.wj-btn-primary{\n    background:var(--blue);\n    color:#fff !important;\n\n    box-shadow:0 12px 28px rgba(22,135,255,.23);\n}\n\n.wj-btn-primary:hover{\n    background:var(--blue-dark);\n}\n\n.wj-btn-light{\n    border-color:rgba(255,255,255,.24);\n\n    background:rgba(255,255,255,.07);\n\n    color:#fff !important;\n}\n\n\n\/* =========================================================\n   HERO\n   ========================================================= *\/\n\n.wj-hero{\n    position:relative;\n\n    min-height:680px;\n\n    overflow:hidden;\n\n    background:var(--navy);\n\n    color:#fff;\n}\n\n.wj-hero-media{\n    position:absolute;\n    inset:0;\n}\n\n.wj-hero-media img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n    object-position:center;\n}\n\n.wj-hero-media::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            90deg,\n            rgba(4,18,31,.97) 0%,\n            rgba(4,18,31,.91) 41%,\n            rgba(4,18,31,.48) 70%,\n            rgba(4,18,31,.15) 100%\n        );\n}\n\n.wj-hero-inner{\n    position:relative;\n    z-index:2;\n\n    min-height:680px;\n\n    display:flex;\n    align-items:center;\n}\n\n.wj-hero-content{\n    max-width:740px;\n\n    padding:75px 0;\n}\n\n.wj-hero .wj-kicker{\n    color:#8bd1ff;\n}\n\n.wj-hero h1{\n    margin-bottom:20px;\n\n    color:#fff;\n\n    font-size:clamp(2.8rem,6vw,5.3rem);\n}\n\n.wj-hero h1 span{\n    color:var(--cyan);\n}\n\n.wj-hero-lead{\n    max-width:650px;\n\n    margin-bottom:29px;\n\n    color:#c8d7e3;\n\n    font-size:1.05rem;\n}\n\n.wj-hero-actions{\n    display:flex;\n    flex-wrap:wrap;\n\n    gap:11px;\n}\n\n.wj-hero-trust{\n    display:flex;\n    flex-wrap:wrap;\n\n    gap:18px;\n\n    margin-top:35px;\n\n    color:#d7e3ec;\n\n    font-size:.79rem;\n    font-weight:700;\n}\n\n.wj-hero-trust span{\n    display:flex;\n    align-items:center;\n\n    gap:7px;\n}\n\n.wj-hero-trust i{\n    width:19px;\n    height:19px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:50%;\n\n    background:rgba(22,135,255,.17);\n\n    color:#8bd2ff;\n\n    font-size:.65rem;\n    font-style:normal;\n}\n\n\n\/* =========================================================\n   INTRO\n   ========================================================= *\/\n\n.wj-intro{\n    padding:100px 0;\n\n    background:#fff;\n}\n\n.wj-intro-grid{\n    display:grid;\n\n    grid-template-columns:.9fr 1.1fr;\n\n    gap:72px;\n\n    align-items:center;\n}\n\n.wj-intro-copy{\n    max-width:520px;\n}\n\n.wj-intro-copy h2{\n    margin-bottom:18px;\n\n    color:var(--navy);\n\n    font-size:clamp(2.1rem,4vw,3.55rem);\n}\n\n.wj-intro-copy > p{\n    color:var(--muted);\n\n    font-size:.96rem;\n}\n\n.wj-intro-note{\n    margin-top:25px;\n\n    padding:16px 17px;\n\n    border-left:3px solid var(--blue);\n    border-radius:0 12px 12px 0;\n\n    background:var(--soft);\n\n    color:#4d6679;\n\n    font-size:.8rem;\n}\n\n\n\/* VISUEL *\/\n\n.wj-intro-visual{\n    position:relative;\n\n    min-height:560px;\n}\n\n.wj-intro-photo{\n    position:absolute;\n\n    inset:0 55px 55px 0;\n\n    overflow:hidden;\n\n    border-radius:27px;\n\n    background:#dbe7ef;\n\n    box-shadow:0 20px 55px rgba(7,24,40,.10);\n}\n\n.wj-intro-photo img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.wj-intro-photo::after{\n    content:\"\";\n\n    position:absolute;\n    inset:0;\n\n    background:\n        linear-gradient(\n            180deg,\n            transparent 48%,\n            rgba(5,20,34,.34) 100%\n        );\n}\n\n.wj-intro-caption{\n    position:absolute;\n    z-index:3;\n\n    left:22px;\n    bottom:22px;\n\n    padding:9px 12px;\n\n    border:1px solid rgba(255,255,255,.55);\n    border-radius:10px;\n\n    background:rgba(255,255,255,.92);\n\n    color:var(--navy);\n\n    font-size:.7rem;\n    font-weight:800;\n\n    box-shadow:0 9px 25px rgba(7,24,40,.15);\n}\n\n\n\/* CARTE FLOTTANTE *\/\n\n.wj-intro-floating{\n    position:absolute;\n\n    right:0;\n    bottom:0;\n\n    width:265px;\n\n    padding:20px;\n\n    border-radius:20px;\n\n    background:var(--navy);\n\n    color:#fff;\n\n    box-shadow:0 22px 55px rgba(7,24,40,.24);\n}\n\n.wj-intro-floating-head{\n    display:flex;\n    align-items:center;\n\n    gap:11px;\n\n    margin-bottom:15px;\n}\n\n.wj-intro-floating-icon{\n    width:41px;\n    height:41px;\n\n    flex:none;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:12px;\n\n    background:var(--blue);\n}\n\n.wj-intro-floating-head strong{\n    display:block;\n\n    font-size:.86rem;\n}\n\n.wj-intro-floating-head span{\n    display:block;\n\n    color:#94abba;\n\n    font-size:.65rem;\n}\n\n.wj-intro-floating-list{\n    display:grid;\n\n    gap:7px;\n}\n\n.wj-intro-floating-list div{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n\n    padding:8px 9px;\n\n    border-radius:9px;\n\n    background:rgba(255,255,255,.055);\n\n    color:#dce7ef;\n\n    font-size:.68rem;\n    font-weight:700;\n}\n\n.wj-intro-floating-list i{\n    width:7px;\n    height:7px;\n\n    border-radius:50%;\n\n    background:#69caff;\n\n    box-shadow:0 0 0 4px rgba(105,202,255,.10);\n}\n\n\n\/* =========================================================\n   TROIS R\u00d4LES DE LA LUMI\u00c8RE\n   ========================================================= *\/\n\n.wj-roles{\n    padding:90px 0;\n\n    background:var(--soft);\n}\n\n.wj-roles-grid{\n    display:grid;\n\n    grid-template-columns:repeat(3,1fr);\n\n    gap:12px;\n}\n\n.wj-role-card{\n    position:relative;\n\n    min-height:285px;\n\n    padding:26px;\n\n    overflow:hidden;\n\n    border:1px solid var(--border);\n    border-radius:20px;\n\n    background:#fff;\n\n    transition:\n        transform .2s ease,\n        box-shadow .2s ease,\n        border-color .2s ease;\n}\n\n.wj-role-card:hover{\n    transform:translateY(-4px);\n\n    border-color:#bdddFA;\n\n    box-shadow:var(--shadow);\n}\n\n.wj-role-card::after{\n    content:attr(data-number);\n\n    position:absolute;\n\n    right:17px;\n    top:8px;\n\n    color:#edf3f7;\n\n    font-size:4.5rem;\n    font-weight:900;\n    line-height:1;\n}\n\n.wj-role-icon{\n    position:relative;\n    z-index:2;\n\n    width:45px;\n    height:45px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    margin-bottom:45px;\n\n    border-radius:13px;\n\n    background:var(--soft-blue);\n\n    color:var(--blue);\n\n    font-size:.72rem;\n    font-weight:900;\n}\n\n.wj-role-card h3{\n    position:relative;\n    z-index:2;\n\n    margin-bottom:8px;\n\n    color:var(--navy);\n\n    font-size:1.08rem;\n}\n\n.wj-role-card p{\n    position:relative;\n    z-index:2;\n\n    margin-bottom:17px;\n\n    color:var(--muted);\n\n    font-size:.79rem;\n}\n\n.wj-role-card span{\n    position:relative;\n    z-index:2;\n\n    color:var(--blue-dark);\n\n    font-size:.66rem;\n    font-weight:800;\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   ZONES LUMINEUSES\n   ========================================================= *\/\n\n.wj-zones{\n    padding:100px 0;\n\n    background:var(--navy);\n\n    color:#fff;\n}\n\n.wj-zones .wj-kicker{\n    color:#8bd1ff;\n}\n\n.wj-zones-grid{\n    display:grid;\n\n    grid-template-columns:.78fr 1.22fr;\n\n    gap:70px;\n\n    align-items:start;\n}\n\n.wj-zones-copy{\n    position:sticky;\n\n    top:30px;\n}\n\n.wj-zones-copy h2{\n    margin-bottom:16px;\n\n    color:#fff;\n\n    font-size:clamp(2rem,4vw,3.35rem);\n}\n\n.wj-zones-copy p{\n    color:#b8cad7;\n}\n\n.wj-zones-note{\n    margin-top:25px;\n\n    padding:15px;\n\n    border-left:3px solid var(--blue);\n    border-radius:0 11px 11px 0;\n\n    background:rgba(255,255,255,.05);\n\n    color:#d8e4ec;\n\n    font-size:.79rem;\n}\n\n.wj-zones-list{\n    display:grid;\n\n    gap:10px;\n}\n\n.wj-zone{\n    display:grid;\n\n    grid-template-columns:48px 1fr auto;\n\n    gap:14px;\n\n    align-items:center;\n\n    padding:18px;\n\n    border:1px solid rgba(255,255,255,.09);\n    border-radius:16px;\n\n    background:rgba(255,255,255,.045);\n}\n\n.wj-zone-icon{\n    width:43px;\n    height:43px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:12px;\n\n    background:rgba(22,135,255,.18);\n\n    color:#8bd2ff;\n\n    font-size:.69rem;\n    font-weight:900;\n}\n\n.wj-zone strong{\n    display:block;\n\n    margin-bottom:2px;\n\n    color:#fff;\n\n    font-size:.9rem;\n}\n\n.wj-zone span{\n    display:block;\n\n    color:#9fb3c2;\n\n    font-size:.7rem;\n}\n\n.wj-zone small{\n    padding:6px 9px;\n\n    border-radius:99px;\n\n    background:rgba(255,255,255,.06);\n\n    color:#82ceff;\n\n    font-size:.57rem;\n    font-weight:800;\n\n    text-transform:uppercase;\n}\n\n\n\/* =========================================================\n   INT\u00c9RIEUR\n   ========================================================= *\/\n\n.wj-interior{\n    padding:100px 0;\n\n    background:#fff;\n}\n\n.wj-interior-box{\n    display:grid;\n\n    grid-template-columns:1.03fr .97fr;\n\n    overflow:hidden;\n\n    border-radius:27px;\n\n    background:var(--soft-blue);\n}\n\n.wj-interior-media{\n    position:relative;\n\n    min-height:520px;\n}\n\n.wj-interior-media img{\n    position:absolute;\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n.wj-interior-content{\n    padding:52px;\n}\n\n.wj-interior-content h2{\n    margin-bottom:16px;\n\n    color:var(--navy);\n\n    font-size:clamp(2rem,4vw,3.25rem);\n}\n\n.wj-interior-content > p{\n    color:var(--muted);\n}\n\n.wj-interior-points{\n    display:grid;\n\n    grid-template-columns:1fr 1fr;\n\n    gap:8px;\n\n    margin:26px 0 29px;\n}\n\n.wj-interior-points span{\n    padding:11px 12px;\n\n    border:1px solid #d0e5f7;\n    border-radius:11px;\n\n    background:#fff;\n\n    color:#3b586d;\n\n    font-size:.72rem;\n    font-weight:700;\n}\n\n.wj-interior-points span::before{\n    content:\"\u2713\";\n\n    margin-right:7px;\n\n    color:var(--blue);\n\n    font-weight:900;\n}\n\n\n\/* =========================================================\n   EXT\u00c9RIEUR\n   ========================================================= *\/\n\n.wj-exterior{\n    padding:0 0 100px;\n\n    background:#fff;\n}\n\n.wj-exterior-grid{\n    display:grid;\n\n    grid-template-columns:.92fr 1.08fr;\n\n    gap:65px;\n\n    align-items:center;\n}\n\n.wj-exterior-copy h2{\n    margin-bottom:16px;\n\n    color:var(--navy);\n\n    font-size:clamp(2rem,4vw,3.25rem);\n}\n\n.wj-exterior-copy > p{\n    color:var(--muted);\n}\n\n.wj-exterior-list{\n    display:grid;\n\n    gap:9px;\n\n    margin-top:25px;\n}\n\n.wj-exterior-item{\n    display:grid;\n\n    grid-template-columns:39px 1fr;\n\n    gap:12px;\n\n    padding:13px 14px;\n\n    border:1px solid var(--border);\n    border-radius:13px;\n\n    background:#fff;\n}\n\n.wj-exterior-item-icon{\n    width:35px;\n    height:35px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:10px;\n\n    background:var(--soft-blue);\n\n    color:var(--blue);\n\n    font-size:.68rem;\n    font-weight:900;\n}\n\n.wj-exterior-item strong{\n    display:block;\n\n    margin-bottom:2px;\n\n    color:var(--navy);\n\n    font-size:.82rem;\n}\n\n.wj-exterior-item span{\n    display:block;\n\n    color:var(--muted);\n\n    font-size:.7rem;\n}\n\n.wj-exterior-visual{\n    position:relative;\n\n    min-height:500px;\n}\n\n.wj-exterior-photo{\n    position:absolute;\n\n    inset:0;\n\n    overflow:hidden;\n\n    border-radius:26px;\n\n    background:#dce6ed;\n\n    box-shadow:0 18px 50px rgba(7,24,40,.09);\n}\n\n.wj-exterior-photo img{\n    width:100%;\n    height:100%;\n\n    object-fit:cover;\n}\n\n\n\/* =========================================================\n   TEMP\u00c9RATURE & AMBIANCE\n   ========================================================= *\/\n\n.wj-mood{\n    padding:90px 0;\n\n    background:var(--soft);\n}\n\n.wj-mood-grid{\n    display:grid;\n\n    grid-template-columns:repeat(3,1fr);\n\n    gap:12px;\n}\n\n.wj-mood-card{\n    min-height:270px;\n\n    display:flex;\n    flex-direction:column;\n    justify-content:flex-end;\n\n    padding:24px;\n\n    border-radius:20px;\n\n    background:#fff;\n\n    border:1px solid var(--border);\n}\n\n.wj-mood-bar{\n    height:7px;\n\n    margin-bottom:35px;\n\n    border-radius:99px;\n\n    background:\n        linear-gradient(\n            90deg,\n            #ffbe6d,\n            #fff0c8\n        );\n}\n\n.wj-mood-card:nth-child(2) .wj-mood-bar{\n    background:\n        linear-gradient(\n            90deg,\n            #ffe6b8,\n            #f7fbff\n        );\n}\n\n.wj-mood-card:nth-child(3) .wj-mood-bar{\n    background:\n        linear-gradient(\n            90deg,\n            #f3f8ff,\n            #a9dcff\n        );\n}\n\n.wj-mood-card span{\n    display:block;\n\n    margin-bottom:9px;\n\n    color:var(--blue-dark);\n\n    font-size:.67rem;\n    font-weight:800;\n\n    text-transform:uppercase;\n    letter-spacing:.07em;\n}\n\n.wj-mood-card h3{\n    margin-bottom:8px;\n\n    color:var(--navy);\n\n    font-size:1.08rem;\n}\n\n.wj-mood-card p{\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:.77rem;\n}\n\n\n\/* =========================================================\n   PROCESS\n   ========================================================= *\/\n\n.wj-process{\n    padding:100px 0;\n\n    background:#fff;\n}\n\n.wj-process-grid{\n    display:grid;\n\n    grid-template-columns:repeat(4,1fr);\n\n    gap:12px;\n}\n\n.wj-process-step{\n    position:relative;\n\n    min-height:215px;\n\n    padding:23px;\n\n    border:1px solid var(--border);\n    border-radius:18px;\n\n    background:#fff;\n}\n\n.wj-process-step::before{\n    content:attr(data-step);\n\n    position:absolute;\n\n    right:17px;\n    top:10px;\n\n    color:#edf3f7;\n\n    font-size:3rem;\n    font-weight:900;\n    line-height:1;\n}\n\n.wj-process-icon{\n    position:relative;\n    z-index:2;\n\n    width:42px;\n    height:42px;\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    margin-bottom:36px;\n\n    border-radius:12px;\n\n    background:var(--navy);\n\n    color:#fff;\n\n    font-size:.7rem;\n    font-weight:900;\n}\n\n.wj-process-step h3{\n    position:relative;\n    z-index:2;\n\n    margin-bottom:7px;\n\n    color:var(--navy);\n\n    font-size:.97rem;\n}\n\n.wj-process-step p{\n    position:relative;\n    z-index:2;\n\n    margin:0;\n\n    color:var(--muted);\n\n    font-size:.76rem;\n}\n\n\n\/* =========================================================\n   SERVICES LI\u00c9S\n   ========================================================= *\/\n\n.wj-related{\n    padding:90px 0;\n\n    background:var(--soft);\n}\n\n.wj-related-grid{\n    display:grid;\n\n    grid-template-columns:repeat(3,1fr);\n\n    gap:12px;\n}\n\n.wj-related-card{\n    padding:24px;\n\n    border:1px solid var(--border);\n    border-radius:18px;\n\n    background:#fff;\n}\n\n.wj-related-card span{\n    display:block;\n\n    margin-bottom:17px;\n\n    color:var(--blue-dark);\n\n    font-size:.67rem;\n    font-weight:800;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n}\n\n.wj-related-card h3{\n    margin-bottom:7px;\n\n    color:var(--navy);\n\n    font-size:1.03rem;\n}\n\n.wj-related-card p{\n    min-height:46px;\n\n    margin-bottom:16px;\n\n    color:var(--muted);\n\n    font-size:.77rem;\n}\n\n.wj-related-card a{\n    color:var(--blue-dark);\n\n    font-size:.8rem;\n    font-weight:800;\n}\n\n\n\/* =========================================================\n   FAQ\n   ========================================================= *\/\n\n.wj-faq{\n    padding:95px 0;\n\n    background:#fff;\n}\n\n.wj-faq-grid{\n    display:grid;\n\n    grid-template-columns:.72fr 1.28fr;\n\n    gap:70px;\n}\n\n.wj-faq-intro h2{\n    margin-bottom:12px;\n\n    color:var(--navy);\n\n    font-size:clamp(2rem,4vw,3.1rem);\n}\n\n.wj-faq-intro p{\n    color:var(--muted);\n}\n\n.wj-faq-list{\n    display:grid;\n\n    gap:9px;\n}\n\n.wj-faq details{\n    border:1px solid var(--border);\n    border-radius:14px;\n\n    background:var(--soft);\n}\n\n.wj-faq summary{\n    position:relative;\n\n    padding:18px 48px 18px 19px;\n\n    cursor:pointer;\n    list-style:none;\n\n    color:var(--navy);\n\n    font-size:.9rem;\n    font-weight:800;\n}\n\n.wj-faq summary::-webkit-details-marker{\n    display:none;\n}\n\n.wj-faq summary::after{\n    content:\"+\";\n\n    position:absolute;\n\n    right:18px;\n    top:50%;\n\n    transform:translateY(-50%);\n\n    color:var(--blue);\n\n    font-size:1.25rem;\n}\n\n.wj-faq details[open] summary::after{\n    content:\"\u2212\";\n}\n\n.wj-faq details p{\n    margin:0;\n\n    padding:0 19px 18px;\n\n    color:var(--muted);\n\n    font-size:.8rem;\n}\n\n\n\/* =========================================================\n   CTA FINAL\n   ========================================================= *\/\n\n.wj-final{\n    padding:0 0 88px;\n\n    background:#fff;\n}\n\n.wj-final-box{\n    position:relative;\n\n    overflow:hidden;\n\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n\n    gap:40px;\n\n    padding:48px 52px;\n\n    border-radius:27px;\n\n    background:var(--navy);\n\n    color:#fff;\n}\n\n.wj-final-box::after{\n    content:\"\";\n\n    position:absolute;\n\n    width:360px;\n    height:360px;\n\n    right:-180px;\n    top:-190px;\n\n    border-radius:50%;\n\n    background:rgba(22,135,255,.22);\n}\n\n.wj-final-content{\n    position:relative;\n    z-index:2;\n}\n\n.wj-final-content span{\n    display:block;\n\n    margin-bottom:9px;\n\n    color:#86d1ff;\n\n    font-size:.7rem;\n    font-weight:800;\n    letter-spacing:.08em;\n    text-transform:uppercase;\n}\n\n.wj-final-content h2{\n    max-width:690px;\n\n    margin-bottom:9px;\n\n    color:#fff;\n\n    font-size:clamp(2rem,4vw,3rem);\n}\n\n.wj-final-content p{\n    max-width:650px;\n\n    margin:0;\n\n    color:#b5c7d3;\n}\n\n.wj-final-action{\n    position:relative;\n    z-index:2;\n\n    flex:none;\n}\n\n\n\/* =========================================================\n   DEMO\n   ========================================================= *\/\n\n.wj-demo-note{\n    padding:18px 20px;\n\n    border-top:1px solid var(--border);\n\n    text-align:center;\n\n    color:#7a8995;\n\n    font-size:.72rem;\n}\n\n.wj-demo-note strong{\n    color:#526878;\n}\n\n\n\/* =========================================================\n   TABLETTE\n   ========================================================= *\/\n\n@media(max-width:980px){\n\n    .wj-intro-grid,\n    .wj-exterior-grid{\n        grid-template-columns:1fr;\n\n        gap:40px;\n    }\n\n    .wj-intro-copy{\n        max-width:700px;\n    }\n\n    .wj-intro-visual{\n        min-height:500px;\n    }\n\n    .wj-roles-grid,\n    .wj-mood-grid{\n        grid-template-columns:1fr 1fr;\n    }\n\n    .wj-zones-grid{\n        grid-template-columns:1fr;\n\n        gap:35px;\n    }\n\n    .wj-zones-copy{\n        position:static;\n    }\n\n    .wj-interior-box{\n        grid-template-columns:1fr;\n    }\n\n    .wj-interior-media{\n        min-height:350px;\n    }\n\n    .wj-process-grid{\n        grid-template-columns:1fr 1fr;\n    }\n\n    .wj-related-grid{\n        grid-template-columns:1fr 1fr;\n    }\n\n    .wj-faq-grid{\n        grid-template-columns:1fr;\n\n        gap:35px;\n    }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media(max-width:700px){\n\n    .wj-container{\n        width:min(100% - 28px,1180px);\n    }\n\n\n    \/* HERO *\/\n\n    .wj-hero,\n    .wj-hero-inner{\n        min-height:590px;\n    }\n\n    .wj-hero-media img{\n        object-position:61% center;\n    }\n\n    .wj-hero-media::after{\n        background:\n            linear-gradient(\n                180deg,\n                rgba(4,18,31,.60) 0%,\n                rgba(4,18,31,.88) 47%,\n                rgba(4,18,31,.98) 100%\n            );\n    }\n\n    .wj-hero-content{\n        padding:48px 0 58px;\n    }\n\n    .wj-hero h1{\n        font-size:clamp(2.45rem,12vw,3.8rem);\n    }\n\n    .wj-hero-lead{\n        font-size:.94rem;\n    }\n\n    .wj-hero-actions{\n        display:grid;\n\n        grid-template-columns:1fr 1fr;\n    }\n\n    .wj-btn{\n        min-height:47px;\n\n        padding:0 14px;\n\n        font-size:.82rem;\n    }\n\n    .wj-hero-trust{\n        gap:9px 14px;\n\n        margin-top:25px;\n\n        font-size:.71rem;\n    }\n\n\n    \/* INTRO *\/\n\n    .wj-intro{\n        padding:64px 0;\n    }\n\n    .wj-intro-grid{\n        gap:32px;\n    }\n\n    .wj-intro-copy h2{\n        font-size:clamp(2rem,9vw,2.9rem);\n    }\n\n    .wj-intro-visual{\n        min-height:390px;\n    }\n\n    .wj-intro-photo{\n        inset:0 35px 45px 0;\n\n        border-radius:21px;\n    }\n\n    .wj-intro-floating{\n        width:215px;\n\n        padding:16px;\n\n        border-radius:16px;\n    }\n\n    .wj-intro-caption{\n        left:14px;\n        bottom:60px;\n\n        padding:7px 9px;\n\n        font-size:.61rem;\n    }\n\n\n    \/* R\u00d4LES *\/\n\n    .wj-roles{\n        padding:63px 0;\n    }\n\n    .wj-section-head{\n        margin-bottom:27px;\n    }\n\n    .wj-roles-grid{\n        display:flex;\n\n        gap:10px;\n\n        overflow-x:auto;\n\n        margin-inline:-14px;\n\n        padding:0 14px 10px;\n\n        scroll-snap-type:x mandatory;\n\n        scrollbar-width:none;\n    }\n\n    .wj-roles-grid::-webkit-scrollbar{\n        display:none;\n    }\n\n    .wj-role-card{\n        min-width:82%;\n        min-height:220px;\n\n        padding:20px;\n\n        scroll-snap-align:start;\n    }\n\n    .wj-role-icon{\n        margin-bottom:30px;\n    }\n\n\n    \/* ZONES *\/\n\n    .wj-zones{\n        padding:64px 0;\n    }\n\n    .wj-zones-grid{\n        gap:28px;\n    }\n\n    .wj-zone{\n        grid-template-columns:40px 1fr;\n\n        gap:11px;\n\n        padding:14px;\n    }\n\n    .wj-zone small{\n        grid-column:2;\n\n        width:max-content;\n    }\n\n\n    \/* INTERIOR *\/\n\n    .wj-interior{\n        padding:64px 0;\n    }\n\n    .wj-interior-box{\n        border-radius:21px;\n    }\n\n    .wj-interior-media{\n        min-height:270px;\n    }\n\n    .wj-interior-content{\n        padding:28px 22px;\n    }\n\n    .wj-interior-points{\n        grid-template-columns:1fr 1fr;\n\n        gap:7px;\n    }\n\n    .wj-interior-points span{\n        padding:9px;\n\n        font-size:.66rem;\n    }\n\n\n    \/* EXTERIOR *\/\n\n    .wj-exterior{\n        padding-bottom:64px;\n    }\n\n    .wj-exterior-grid{\n        gap:30px;\n    }\n\n    .wj-exterior-visual{\n        min-height:300px;\n    }\n\n    .wj-exterior-photo{\n        border-radius:21px;\n    }\n\n\n    \/* MOOD *\/\n\n    .wj-mood{\n        padding:63px 0;\n    }\n\n    .wj-mood-grid{\n        display:flex;\n\n        gap:10px;\n\n        overflow-x:auto;\n\n        margin-inline:-14px;\n\n        padding:0 14px 10px;\n\n        scroll-snap-type:x mandatory;\n\n        scrollbar-width:none;\n    }\n\n    .wj-mood-grid::-webkit-scrollbar{\n        display:none;\n    }\n\n    .wj-mood-card{\n        min-width:80%;\n        min-height:220px;\n\n        padding:20px;\n\n        scroll-snap-align:start;\n    }\n\n\n    \/* PROCESS *\/\n\n    .wj-process{\n        padding:64px 0;\n    }\n\n    .wj-process-grid{\n        grid-template-columns:1fr 1fr;\n\n        gap:8px;\n    }\n\n    .wj-process-step{\n        min-height:205px;\n\n        padding:17px;\n    }\n\n\n    \/* RELATED *\/\n\n    .wj-related{\n        padding:63px 0;\n    }\n\n    .wj-related-grid{\n        display:flex;\n\n        gap:10px;\n\n        overflow-x:auto;\n\n        margin-inline:-14px;\n\n        padding:0 14px 10px;\n\n        scroll-snap-type:x mandatory;\n\n        scrollbar-width:none;\n    }\n\n    .wj-related-grid::-webkit-scrollbar{\n        display:none;\n    }\n\n    .wj-related-card{\n        min-width:82%;\n\n        scroll-snap-align:start;\n    }\n\n\n    \/* FAQ *\/\n\n    .wj-faq{\n        padding:63px 0;\n    }\n\n\n    \/* FINAL *\/\n\n    .wj-final{\n        padding-bottom:58px;\n    }\n\n    .wj-final-box{\n        display:block;\n\n        padding:28px 22px;\n\n        border-radius:20px;\n    }\n\n    .wj-final-action{\n        margin-top:22px;\n    }\n\n    .wj-final-action .wj-btn{\n        width:100%;\n    }\n\n}\n\n\n\/* =========================================================\n   PETIT MOBILE\n   ========================================================= *\/\n\n@media(max-width:420px){\n\n    .wj-hero-actions{\n        grid-template-columns:1fr;\n    }\n\n    .wj-intro-visual{\n        min-height:355px;\n    }\n\n    .wj-intro-floating{\n        width:190px;\n    }\n\n    .wj-interior-points,\n    .wj-process-grid{\n        grid-template-columns:1fr;\n    }\n\n    .wj-role-card,\n    .wj-related-card{\n        min-width:88%;\n    }\n\n    .wj-mood-card{\n        min-width:86%;\n    }\n\n}\n\n\n\/* =========================================================\n   ACCESSIBILIT\u00c9\n   ========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n\n    .wj-lighting *,\n    .wj-lighting *::before,\n    .wj-lighting *::after{\n        transition:none !important;\n    }\n\n}\n<\/style>\n\n\n<!-- =========================================================\n     HERO\n     ========================================================= -->\n\n<section class=\"wj-hero\">\n\n<div class=\"wj-hero-media\">\n\n    <img\n        src=\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&#038;fit=crop&#038;w=1600&#038;q=82\"\n        srcset=\"\n        https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&#038;fit=crop&#038;w=800&#038;q=78 800w,\n        https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&#038;fit=crop&#038;w=1200&#038;q=80 1200w,\n        https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?auto=format&#038;fit=crop&#038;w=1600&#038;q=82 1600w\"\n        sizes=\"100vw\"\n        width=\"1600\"\n        height=\"1067\"\n        fetchpriority=\"high\"\n        decoding=\"async\"\n        alt=\"\u00c9clairage int\u00e9rieur moderne dans un salon\">\n\n<\/div>\n\n\n<div class=\"wj-container wj-hero-inner\">\n\n<div class=\"wj-hero-content\">\n\n    <div class=\"wj-kicker\">\n        \u00c9clairage int\u00e9rieur &#038; ext\u00e9rieur\n    <\/div>\n\n    <h1>\n        La lumi\u00e8re au bon endroit,\n        <span>au bon moment.<\/span>\n    <\/h1>\n\n    <p class=\"wj-hero-lead\">\n        \u00c9clairage principal, ambiance, plan de travail ou ext\u00e9rieur :\n        un projet lumineux r\u00e9ussi associe confort, visibilit\u00e9\n        et int\u00e9gration \u00e0 l\u2019architecture du b\u00e2timent.\n    <\/p>\n\n\n    <div class=\"wj-hero-actions\">\n\n        <a class=\"wj-btn wj-btn-primary\"\n           href=\"https:\/\/demo.jouglet-web.fr\/electricien\/contact\/\">\n            \u00c9tudier mon \u00e9clairage\n        <\/a>\n\n        <a class=\"wj-btn wj-btn-light\"\n           href=\"https:\/\/demo.jouglet-web.fr\/electricien\/services\/\">\n            Voir les services\n        <\/a>\n\n    <\/div>\n\n\n    <div class=\"wj-hero-trust\">\n\n        <span>\n            <i>\u2713<\/i>\n            Int\u00e9rieur\n        <\/span>\n\n        <span>\n            <i>\u2713<\/i>\n            Ext\u00e9rieur\n        <\/span>\n\n        <span>\n            <i>\u2713<\/i>\n            \u00c9clairage sur mesure\n        <\/span>\n\n    <\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     INTRO\n     ========================================================= -->\n\n<section class=\"wj-intro\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-intro-grid\">\n\n\n<div class=\"wj-intro-copy\">\n\n    <div class=\"wj-kicker\">\n        Concevoir la lumi\u00e8re\n    <\/div>\n\n    <h2>\n        Un seul plafonnier ne r\u00e9pond pas \u00e0 tous les usages.\n    <\/h2>\n\n    <p>\n        Une pi\u00e8ce peut n\u00e9cessiter plusieurs types d\u2019\u00e9clairage :\n        une lumi\u00e8re g\u00e9n\u00e9rale pour circuler, un \u00e9clairage cibl\u00e9\n        pour travailler ou cuisiner, puis une ambiance plus douce\n        pour les moments de d\u00e9tente.\n    <\/p>\n\n    <div class=\"wj-intro-note\">\n        Penser l\u2019\u00e9clairage d\u00e8s le d\u00e9but d\u2019une r\u00e9novation permet\n        de placer les points lumineux et les commandes l\u00e0 o\u00f9\n        ils seront r\u00e9ellement utiles.\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-intro-visual\">\n\n    <div class=\"wj-intro-photo\">\n\n        <img\n            src=\"https:\/\/images.unsplash.com\/photo-1600566753086-00f18fb6b3ea?auto=format&#038;fit=crop&#038;w=1100&#038;q=80\"\n            width=\"1100\"\n            height=\"1000\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            alt=\"Int\u00e9rieur moderne avec diff\u00e9rents points lumineux\">\n\n        <div class=\"wj-intro-caption\">\n            Fonction \u2022 confort \u2022 ambiance\n        <\/div>\n\n    <\/div>\n\n\n    <div class=\"wj-intro-floating\">\n\n        <div class=\"wj-intro-floating-head\">\n\n            <div class=\"wj-intro-floating-icon\">\n                \u2726\n            <\/div>\n\n            <div>\n                <strong>Projet lumi\u00e8re<\/strong>\n                <span>Plusieurs niveaux d\u2019\u00e9clairage<\/span>\n            <\/div>\n\n        <\/div>\n\n\n        <div class=\"wj-intro-floating-list\">\n\n            <div>\n                <span>\u00c9clairage g\u00e9n\u00e9ral<\/span>\n                <i><\/i>\n            <\/div>\n\n            <div>\n                <span>\u00c9clairage cibl\u00e9<\/span>\n                <i><\/i>\n            <\/div>\n\n            <div>\n                <span>Ambiance<\/span>\n                <i><\/i>\n            <\/div>\n\n            <div>\n                <span>Ext\u00e9rieur<\/span>\n                <i><\/i>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     R\u00d4LES\n     ========================================================= -->\n\n<section class=\"wj-roles\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-section-head\">\n\n    <div class=\"wj-kicker\">\n        Trois fonctions\n    <\/div>\n\n    <h2>\n        Tous les \u00e9clairages n\u2019ont pas le m\u00eame r\u00f4le.\n    <\/h2>\n\n    <p>\n        Associer plusieurs fonctions permet d\u2019obtenir\n        un r\u00e9sultat plus confortable qu\u2019un \u00e9clairage unique.\n    <\/p>\n\n<\/div>\n\n\n<div class=\"wj-roles-grid\">\n\n\n<article class=\"wj-role-card\"\n         data-number=\"01\">\n\n    <div class=\"wj-role-icon\">\n        01\n    <\/div>\n\n    <h3>\n        \u00c9clairer\n    <\/h3>\n\n    <p>\n        Apporter une lumi\u00e8re homog\u00e8ne permettant\n        de circuler et d\u2019utiliser la pi\u00e8ce confortablement.\n    <\/p>\n\n    <span>\n        Lumi\u00e8re g\u00e9n\u00e9rale\n    <\/span>\n\n<\/article>\n\n\n<article class=\"wj-role-card\"\n         data-number=\"02\">\n\n    <div class=\"wj-role-icon\">\n        02\n    <\/div>\n\n    <h3>\n        Travailler\n    <\/h3>\n\n    <p>\n        Concentrer davantage de lumi\u00e8re sur les zones\n        qui n\u00e9cessitent une bonne visibilit\u00e9.\n    <\/p>\n\n    <span>\n        Lumi\u00e8re fonctionnelle\n    <\/span>\n\n<\/article>\n\n\n<article class=\"wj-role-card\"\n         data-number=\"03\">\n\n    <div class=\"wj-role-icon\">\n        03\n    <\/div>\n\n    <h3>\n        Cr\u00e9er une ambiance\n    <\/h3>\n\n    <p>\n        Utiliser des points lumineux secondaires\n        pour rendre l\u2019espace plus chaleureux.\n    <\/p>\n\n    <span>\n        Lumi\u00e8re d\u2019ambiance\n    <\/span>\n\n<\/article>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     ZONES\n     ========================================================= -->\n\n<section class=\"wj-zones\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-zones-grid\">\n\n\n<div class=\"wj-zones-copy\">\n\n    <div class=\"wj-kicker\">\n        Pi\u00e8ce par pi\u00e8ce\n    <\/div>\n\n    <h2>\n        Chaque zone demande une lumi\u00e8re diff\u00e9rente.\n    <\/h2>\n\n    <p>\n        Le besoin d\u2019un plan de travail n\u2019est pas celui\n        d\u2019un salon ou d\u2019une entr\u00e9e. Le projet est donc \u00e9tudi\u00e9\n        selon la fonction r\u00e9elle de chaque espace.\n    <\/p>\n\n    <div class=\"wj-zones-note\">\n        L\u2019objectif est d\u2019\u00e9viter les zones sombres\n        sans pour autant multiplier inutilement les luminaires.\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-zones-list\">\n\n\n<div class=\"wj-zone\">\n\n    <div class=\"wj-zone-icon\">\n        01\n    <\/div>\n\n    <div>\n        <strong>S\u00e9jour<\/strong>\n        <span>Lumi\u00e8re g\u00e9n\u00e9rale et ambiances compl\u00e9mentaires.<\/span>\n    <\/div>\n\n    <small>\n        Confort\n    <\/small>\n\n<\/div>\n\n\n<div class=\"wj-zone\">\n\n    <div class=\"wj-zone-icon\">\n        02\n    <\/div>\n\n    <div>\n        <strong>Cuisine<\/strong>\n        <span>\u00c9clairage pr\u00e9cis du plan de travail et des zones techniques.<\/span>\n    <\/div>\n\n    <small>\n        Fonction\n    <\/small>\n\n<\/div>\n\n\n<div class=\"wj-zone\">\n\n    <div class=\"wj-zone-icon\">\n        03\n    <\/div>\n\n    <div>\n        <strong>Chambre<\/strong>\n        <span>\u00c9clairage doux avec commandes adapt\u00e9es aux usages.<\/span>\n    <\/div>\n\n    <small>\n        Ambiance\n    <\/small>\n\n<\/div>\n\n\n<div class=\"wj-zone\">\n\n    <div class=\"wj-zone-icon\">\n        04\n    <\/div>\n\n    <div>\n        <strong>Circulations<\/strong>\n        <span>\u00c9clairer clairement entr\u00e9es, couloirs et escaliers.<\/span>\n    <\/div>\n\n    <small>\n        Rep\u00e9rage\n    <\/small>\n\n<\/div>\n\n\n<div class=\"wj-zone\">\n\n    <div class=\"wj-zone-icon\">\n        05\n    <\/div>\n\n    <div>\n        <strong>Ext\u00e9rieur<\/strong>\n        <span>Mettre en lumi\u00e8re les acc\u00e8s et zones de passage.<\/span>\n    <\/div>\n\n    <small>\n        Ext\u00e9rieur\n    <\/small>\n\n<\/div>\n\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     INT\u00c9RIEUR\n     ========================================================= -->\n\n<section class=\"wj-interior\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-interior-box\">\n\n\n<div class=\"wj-interior-media\">\n\n    <img\n        src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?auto=format&#038;fit=crop&#038;w=1100&#038;q=80\"\n        width=\"1100\"\n        height=\"950\"\n        loading=\"lazy\"\n        decoding=\"async\"\n        alt=\"Salon avec \u00e9clairage architectural moderne\">\n\n<\/div>\n\n\n<div class=\"wj-interior-content\">\n\n    <div class=\"wj-kicker\">\n        \u00c9clairage int\u00e9rieur\n    <\/div>\n\n    <h2>\n        Faire dispara\u00eetre la technique pour laisser place \u00e0 l\u2019ambiance.\n    <\/h2>\n\n    <p>\n        Spots, suspensions, appliques ou \u00e9clairages indirects\n        peuvent \u00eatre combin\u00e9s selon le style du logement\n        et les usages de chaque zone.\n    <\/p>\n\n\n    <div class=\"wj-interior-points\">\n\n        <span>Spots<\/span>\n        <span>Suspensions<\/span>\n        <span>Appliques<\/span>\n        <span>\u00c9clairage indirect<\/span>\n        <span>Variations d\u2019ambiance<\/span>\n        <span>Commandes adapt\u00e9es<\/span>\n\n    <\/div>\n\n\n    <a class=\"wj-btn wj-btn-primary\"\n       href=\"https:\/\/demo.jouglet-web.fr\/electricien\/contact\/\">\n        \u00c9tudier mon \u00e9clairage int\u00e9rieur\n    <\/a>\n\n<\/div>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     EXT\u00c9RIEUR\n     ========================================================= -->\n\n<section class=\"wj-exterior\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-exterior-grid\">\n\n\n<div class=\"wj-exterior-copy\">\n\n    <div class=\"wj-kicker\">\n        \u00c9clairage ext\u00e9rieur\n    <\/div>\n\n    <h2>\n        Prolonger la lumi\u00e8re autour de la maison.\n    <\/h2>\n\n    <p>\n        L\u2019\u00e9clairage ext\u00e9rieur facilite les d\u00e9placements\n        et permet de valoriser les entr\u00e9es, terrasses,\n        fa\u00e7ades ou cheminements sans sur\u00e9clairer les espaces.\n    <\/p>\n\n\n    <div class=\"wj-exterior-list\">\n\n\n<div class=\"wj-exterior-item\">\n\n    <div class=\"wj-exterior-item-icon\">\n        01\n    <\/div>\n\n    <div>\n        <strong>Entr\u00e9e &#038; acc\u00e8s<\/strong>\n        <span>\u00c9clairer clairement les zones de passage.<\/span>\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-exterior-item\">\n\n    <div class=\"wj-exterior-item-icon\">\n        02\n    <\/div>\n\n    <div>\n        <strong>Terrasse<\/strong>\n        <span>Cr\u00e9er une ambiance adapt\u00e9e aux soir\u00e9es ext\u00e9rieures.<\/span>\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-exterior-item\">\n\n    <div class=\"wj-exterior-item-icon\">\n        03\n    <\/div>\n\n    <div>\n        <strong>Fa\u00e7ade<\/strong>\n        <span>Mettre en valeur certains volumes du b\u00e2timent.<\/span>\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-exterior-item\">\n\n    <div class=\"wj-exterior-item-icon\">\n        04\n    <\/div>\n\n    <div>\n        <strong>Automatismes<\/strong>\n        <span>Associer certains \u00e9clairages \u00e0 des commandes ou d\u00e9tecteurs.<\/span>\n    <\/div>\n\n<\/div>\n\n\n    <\/div>\n\n<\/div>\n\n\n<div class=\"wj-exterior-visual\">\n\n    <div class=\"wj-exterior-photo\">\n\n        <img\n            src=\"https:\/\/images.unsplash.com\/photo-1600566753051-f0b89df2dd90?auto=format&#038;fit=crop&#038;w=1100&#038;q=80\"\n            width=\"1100\"\n            height=\"950\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            alt=\"Maison moderne avec \u00e9clairage ext\u00e9rieur\">\n\n    <\/div>\n\n<\/div>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     AMBIANCE\n     ========================================================= -->\n\n<section class=\"wj-mood\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-section-head\">\n\n    <div class=\"wj-kicker\">\n        Ambiance lumineuse\n    <\/div>\n\n    <h2>\n        La sensation de lumi\u00e8re compte autant que sa puissance.\n    <\/h2>\n\n    <p>\n        Selon la pi\u00e8ce et l\u2019ambiance recherch\u00e9e,\n        la perception de la lumi\u00e8re peut \u00eatre tr\u00e8s diff\u00e9rente.\n    <\/p>\n\n<\/div>\n\n\n<div class=\"wj-mood-grid\">\n\n\n<article class=\"wj-mood-card\">\n\n    <div class=\"wj-mood-bar\"><\/div>\n\n    <span>\n        Chaleureux\n    <\/span>\n\n    <h3>\n        Pour les espaces de d\u00e9tente.\n    <\/h3>\n\n    <p>\n        Une ambiance plus douce convient particuli\u00e8rement\n        aux salons, chambres et zones de repos.\n    <\/p>\n\n<\/article>\n\n\n<article class=\"wj-mood-card\">\n\n    <div class=\"wj-mood-bar\"><\/div>\n\n    <span>\n        \u00c9quilibr\u00e9\n    <\/span>\n\n    <h3>\n        Pour les espaces polyvalents.\n    <\/h3>\n\n    <p>\n        Un \u00e9clairage plus neutre permet de conserver\n        une bonne visibilit\u00e9 tout en restant confortable.\n    <\/p>\n\n<\/article>\n\n\n<article class=\"wj-mood-card\">\n\n    <div class=\"wj-mood-bar\"><\/div>\n\n    <span>\n        Fonctionnel\n    <\/span>\n\n    <h3>\n        Pour les zones techniques.\n    <\/h3>\n\n    <p>\n        Une lumi\u00e8re plus franche peut \u00eatre adapt\u00e9e\n        \u00e0 certaines zones n\u00e9cessitant davantage de pr\u00e9cision.\n    <\/p>\n\n<\/article>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     PROCESS\n     ========================================================= -->\n\n<section class=\"wj-process\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-section-head\">\n\n    <div class=\"wj-kicker\">\n        Votre projet lumi\u00e8re\n    <\/div>\n\n    <h2>\n        De l\u2019usage de la pi\u00e8ce au positionnement des luminaires.\n    <\/h2>\n\n    <p>\n        Un \u00e9clairage r\u00e9ussi est pr\u00e9par\u00e9 avant l\u2019installation\n        des points lumineux.\n    <\/p>\n\n<\/div>\n\n\n<div class=\"wj-process-grid\">\n\n\n<article class=\"wj-process-step\"\n         data-step=\"01\">\n\n    <div class=\"wj-process-icon\">\n        01\n    <\/div>\n\n    <h3>\n        Usages\n    <\/h3>\n\n    <p>\n        Comprendre comment chaque zone sera r\u00e9ellement utilis\u00e9e.\n    <\/p>\n\n<\/article>\n\n\n<article class=\"wj-process-step\"\n         data-step=\"02\">\n\n    <div class=\"wj-process-icon\">\n        02\n    <\/div>\n\n    <h3>\n        Implantation\n    <\/h3>\n\n    <p>\n        D\u00e9finir les points lumineux et leurs commandes.\n    <\/p>\n\n<\/article>\n\n\n<article class=\"wj-process-step\"\n         data-step=\"03\">\n\n    <div class=\"wj-process-icon\">\n        03\n    <\/div>\n\n    <h3>\n        Installation\n    <\/h3>\n\n    <p>\n        Pr\u00e9parer les circuits et int\u00e9grer les \u00e9quipements.\n    <\/p>\n\n<\/article>\n\n\n<article class=\"wj-process-step\"\n         data-step=\"04\">\n\n    <div class=\"wj-process-icon\">\n        04\n    <\/div>\n\n    <h3>\n        Ambiance\n    <\/h3>\n\n    <p>\n        V\u00e9rifier le r\u00e9sultat et ajuster les usages si n\u00e9cessaire.\n    <\/p>\n\n<\/article>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     SERVICES LI\u00c9S\n     ========================================================= -->\n\n<section class=\"wj-related\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-section-head\">\n\n    <div class=\"wj-kicker\">\n        Services associ\u00e9s\n    <\/div>\n\n    <h2>\n        L\u2019\u00e9clairage peut s\u2019int\u00e9grer \u00e0 un projet \u00e9lectrique plus large.\n    <\/h2>\n\n<\/div>\n\n\n<div class=\"wj-related-grid\">\n\n\n<article class=\"wj-related-card\">\n\n    <span>\n        Connect\u00e9\n    <\/span>\n\n    <h3>\n        Domotique\n    <\/h3>\n\n    <p>\n        Centraliser les \u00e9clairages et cr\u00e9er diff\u00e9rents sc\u00e9narios.\n    <\/p>\n\n    <a href=\"https:\/\/demo.jouglet-web.fr\/electricien\/domotique\/\">\n        D\u00e9couvrir \u2192\n    <\/a>\n\n<\/article>\n\n\n<article class=\"wj-related-card\">\n\n    <span>\n        Habitat\n    <\/span>\n\n    <h3>\n        R\u00e9novation \u00e9lectrique\n    <\/h3>\n\n    <p>\n        Repenser les points lumineux lors d\u2019une r\u00e9novation du logement.\n    <\/p>\n\n    <a href=\"https:\/\/demo.jouglet-web.fr\/electricien\/renovation-electrique\/\">\n        D\u00e9couvrir \u2192\n    <\/a>\n\n<\/article>\n\n\n<article class=\"wj-related-card\">\n\n    <span>\n        Protection\n    <\/span>\n\n    <h3>\n        S\u00e9curit\u00e9 &#038; \u00e9quipements\n    <\/h3>\n\n    <p>\n        Utiliser l\u2019\u00e9clairage ext\u00e9rieur pour mieux identifier les acc\u00e8s.\n    <\/p>\n\n    <a href=\"https:\/\/demo.jouglet-web.fr\/electricien\/securite\/\">\n        D\u00e9couvrir \u2192\n    <\/a>\n\n<\/article>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     FAQ\n     ========================================================= -->\n\n<section class=\"wj-faq\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-faq-grid\">\n\n\n<div class=\"wj-faq-intro\">\n\n    <div class=\"wj-kicker\">\n        Questions fr\u00e9quentes\n    <\/div>\n\n    <h2>\n        Avant de modifier votre \u00e9clairage.\n    <\/h2>\n\n    <p>\n        Quelques r\u00e9ponses utiles pour pr\u00e9parer\n        un projet int\u00e9rieur ou ext\u00e9rieur.\n    <\/p>\n\n<\/div>\n\n\n<div class=\"wj-faq-list\">\n\n\n<details>\n\n    <summary>\n        Faut-il multiplier les spots pour bien \u00e9clairer une pi\u00e8ce ?\n    <\/summary>\n\n    <p>\n        Pas forc\u00e9ment. Le nombre et l\u2019emplacement des points lumineux\n        d\u00e9pendent de la pi\u00e8ce, de ses dimensions et des usages recherch\u00e9s.\n    <\/p>\n\n<\/details>\n\n\n<details>\n\n    <summary>\n        Peut-on m\u00e9langer plusieurs types de luminaires ?\n    <\/summary>\n\n    <p>\n        Oui. Associer lumi\u00e8re g\u00e9n\u00e9rale, \u00e9clairage cibl\u00e9\n        et \u00e9clairage d\u2019ambiance permet souvent d\u2019obtenir\n        un r\u00e9sultat plus confortable.\n    <\/p>\n\n<\/details>\n\n\n<details>\n\n    <summary>\n        Peut-on automatiser l\u2019\u00e9clairage ext\u00e9rieur ?\n    <\/summary>\n\n    <p>\n        Selon le projet, certains \u00e9clairages peuvent \u00eatre associ\u00e9s\n        \u00e0 des commandes, d\u00e9tecteurs ou automatismes adapt\u00e9s.\n    <\/p>\n\n<\/details>\n\n\n<details>\n\n    <summary>\n        Quand faut-il penser \u00e0 l\u2019\u00e9clairage lors d\u2019une r\u00e9novation ?\n    <\/summary>\n\n    <p>\n        Le plus t\u00f4t possible, id\u00e9alement lorsque l\u2019am\u00e9nagement\n        des pi\u00e8ces et le mobilier principal sont d\u00e9j\u00e0 d\u00e9finis.\n    <\/p>\n\n<\/details>\n\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     CTA FINAL\n     ========================================================= -->\n\n<section class=\"wj-final\">\n\n<div class=\"wj-container\">\n\n<div class=\"wj-final-box\">\n\n\n<div class=\"wj-final-content\">\n\n    <span>\n        Votre \u00e9clairage\n    <\/span>\n\n    <h2>\n        Vous souhaitez repenser la lumi\u00e8re de votre logement ?\n    <\/h2>\n\n    <p>\n        \u00c9tudions les usages, les ambiances et les zones importantes\n        afin de cr\u00e9er un \u00e9clairage confortable et coh\u00e9rent.\n    <\/p>\n\n<\/div>\n\n\n<div class=\"wj-final-action\">\n\n    <a class=\"wj-btn wj-btn-primary\"\n       href=\"https:\/\/demo.jouglet-web.fr\/electricien\/contact\/\">\n        \u00c9tudier mon projet\n    <\/a>\n\n<\/div>\n\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     NOTE D\u00c9MONSTRATION\n     ========================================================= -->\n\n<div class=\"wj-demo-note\">\n\n    <strong>NOVA \u00c9LEC est une entreprise fictive.<\/strong>\n    Site de d\u00e9monstration Web Jouglet \u2013 Web &amp; Informatique.\n\n<\/div>\n\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u00c9clairage int\u00e9rieur &#038; ext\u00e9rieur La lumi\u00e8re au bon endroit, au bon moment. \u00c9clairage principal, ambiance, plan de travail ou ext\u00e9rieur : un projet lumineux r\u00e9ussi associe confort, visibilit\u00e9 et int\u00e9gration \u00e0 l\u2019architecture du b\u00e2timent. \u00c9tudier mon \u00e9clairage Voir les services \u2713 Int\u00e9rieur \u2713 Ext\u00e9rieur \u2713 \u00c9clairage sur mesure Concevoir la lumi\u00e8re Un seul plafonnier ne [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-118","page","type-page","status-publish","hentry"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":8}},"_links":{"self":[{"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/pages\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":1,"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/pages\/118\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/pages\/118\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/demo.jouglet-web.fr\/electricien\/wp-json\/wp\/v2\/media?parent=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}