{"id":499,"date":"2026-07-15T13:01:27","date_gmt":"2026-07-15T11:01:27","guid":{"rendered":"https:\/\/sauxgroupe.fr\/?page_id=499"},"modified":"2026-07-16T14:17:57","modified_gmt":"2026-07-16T12:17:57","slug":"demande-de-devis","status":"publish","type":"page","link":"https:\/\/sauxgroupe.fr\/?page_id=499","title":{"rendered":"Demande De Devis"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* ======================================================\n                PAGE DEMANDE DE DEVIS\n                SAUX GROUPE\n====================================================== *\/\n\n.quote-page{\n\n    padding:120px 30px;\n\n    background:\n    radial-gradient(circle at top left,#1c63ff20 0%,transparent 35%),\n    radial-gradient(circle at bottom right,#d4af3720 0%,transparent 35%),\n    linear-gradient(180deg,#04070d,#071529);\n\n    overflow:hidden;\n\n}\n\n\/* ================= TITRE ================= *\/\n\n.quote-header{\n\n    max-width:900px;\n\n    margin:auto;\n\n    text-align:center;\n\n    margin-bottom:80px;\n\n}\n\n.quote-badge{\n\n    display:inline-block;\n\n    padding:12px 28px;\n\n    border-radius:40px;\n\n    border:1px solid rgba(255,215,0,.45);\n\n    background:rgba(255,215,0,.08);\n\n    color:#FFD700;\n\n    font-weight:bold;\n\n    letter-spacing:2px;\n\n    margin-bottom:25px;\n\n}\n\n.quote-header h1{\n\n    font-size:64px;\n\n    color:white;\n\n    margin-bottom:25px;\n\n    font-weight:900;\n\n}\n\n.quote-header h1 span{\n\n    display:block;\n\n    background:linear-gradient(90deg,#2D7FFF,#FFD700);\n\n    -webkit-background-clip:text;\n\n    -webkit-text-fill-color:transparent;\n\n}\n\n.quote-header p{\n\n    color:#d7d7d7;\n\n    font-size:20px;\n\n    line-height:2;\n\n}\n\n\/* ================= CONTENU ================= *\/\n\n.quote-container{\n\n    max-width:1500px;\n\n    margin:auto;\n\n    display:grid;\n\n    grid-template-columns:400px 1fr;\n\n    gap:50px;\n\n}\n\n\/* ================= SERVICES ================= *\/\n\n.service-card{\n\n    background:rgba(10,22,45,.80);\n\n    backdrop-filter:blur(18px);\n\n    border:1px solid rgba(255,255,255,.08);\n\n    border-radius:22px;\n\n    padding:35px;\n\n    text-align:center;\n\n    margin-bottom:30px;\n\n    cursor:pointer;\n\n    transition:.35s;\n\n}\n\n.service-card:hover{\n\n    transform:translateY(-8px);\n\n    border-color:#FFD700;\n\n    box-shadow:\n\n    0 20px 40px rgba(0,0,0,.45),\n\n    0 0 25px rgba(255,215,0,.25);\n\n}\n\n.service-icon{\n\n    width:90px;\n\n    height:90px;\n\n    margin:auto;\n\n    border-radius:50%;\n\n    background:linear-gradient(135deg,#2D7FFF,#FFD700);\n\n    display:flex;\n\n    justify-content:center;\n\n    align-items:center;\n\n    font-size:42px;\n\n    margin-bottom:20px;\n\n}\n\n.service-card h3{\n\n    color:white;\n\n    margin-bottom:20px;\n\n    font-size:28px;\n\n}\n\n.service-card p{\n\n    color:#d8d8d8;\n\n    line-height:1.9;\n\n}\n\n\/* ================= FORMULAIRE ================= *\/\n\n.quote-right{\n\n    background:rgba(10,22,45,.82);\n\n    backdrop-filter:blur(18px);\n\n    border-radius:25px;\n\n    border:1px solid rgba(255,255,255,.08);\n\n    padding:45px;\n\n}\n\n.quote-right label{\n\n    display:block;\n\n    color:#FFD700;\n\n    margin-top:20px;\n\n    margin-bottom:10px;\n\n    font-weight:700;\n\n}\n\n.row{\n\n    display:grid;\n\n    grid-template-columns:1fr 1fr;\n\n    gap:20px;\n\n}\n\ninput,\nselect,\ntextarea{\n\n    width:100%;\n\n    padding:16px;\n\n    border-radius:14px;\n\n    border:1px solid rgba(255,255,255,.15);\n\n    background:#081529;\n\n    color:white;\n\n    font-size:16px;\n\n    transition:.3s;\n\n    box-sizing:border-box;\n\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus{\n\n    border-color:#FFD700;\n\n    outline:none;\n\n    box-shadow:0 0 15px rgba(255,215,0,.25);\n\n}\n\ntextarea{\n\n    resize:vertical;\n\n}\n\n.checkbox{\n\n    display:flex;\n\n    align-items:center;\n\n    gap:12px;\n\n    margin-top:30px;\n\n    color:#d8d8d8;\n\n}\n\n.checkbox input{\n\n    width:20px;\n\n    height:20px;\n\n}\n\nbutton{\n\n    margin-top:35px;\n\n    width:100%;\n\n    padding:18px;\n\n    border:none;\n\n    border-radius:50px;\n\n    background:linear-gradient(90deg,#2D7FFF,#FFD700);\n\n    color:#081529;\n\n    font-size:18px;\n\n    font-weight:800;\n\n    cursor:pointer;\n\n    transition:.35s;\n\n}\n\nbutton:hover{\n\n    transform:translateY(-5px);\n\n    box-shadow:\n\n    0 20px 40px rgba(255,215,0,.35);\n\n}\n\n\/* ================= RESPONSIVE ================= *\/\n\n@media(max-width:1100px){\n\n.quote-container{\n\ngrid-template-columns:1fr;\n\n}\n\n}\n\n@media(max-width:768px){\n\n.quote-page{\n\npadding:80px 20px;\n\n}\n\n.quote-header h1{\n\nfont-size:42px;\n\n}\n\n.quote-header p{\n\nfont-size:17px;\n\n}\n\n.row{\n\ngrid-template-columns:1fr;\n\n}\n\n.quote-right{\n\npadding:25px;\n\n}\n\n}\n\/*==================================================\nDEVIS RESPONSIVE\n==================================================*\/\n\n@media (max-width:768px){\n\n.quote-page{\n\n    padding:70px 20px !important;\n\n}\n\n.quote-header{\n\n    text-align:center;\n\n}\n\n.quote-header h1{\n\n    font-size:38px !important;\n    line-height:1.2;\n\n}\n\n.quote-header p{\n\n    font-size:17px;\n    line-height:1.7;\n\n}\n\n.quote-container{\n\n    display:flex !important;\n    flex-direction:column !important;\n    gap:30px;\n\n}\n\n.quote-left,\n.quote-right{\n\n    width:100% !important;\n    max-width:100% !important;\n\n}\n\n.service-card{\n\n    width:100% !important;\n    margin-bottom:20px;\n\n}\n\n.row{\n\n    display:flex !important;\n    flex-direction:column !important;\n    gap:18px;\n\n}\n\n.row>div{\n\n    width:100% !important;\n\n}\n\n.quote-right{\n\n    padding:25px 20px !important;\n\n}\n\n.quote-right input,\n.quote-right select,\n.quote-right textarea,\n.quote-right button{\n\n    width:100% !important;\n    box-sizing:border-box;\n\n}\n\n.quote-right textarea{\n\n    min-height:180px;\n\n}\n\n.quote-right button{\n\n    margin-top:15px;\n    padding:18px;\n    font-size:18px;\n\n}\n\n.checkbox{\n\n    display:flex;\n    align-items:flex-start;\n    gap:12px;\n\n}\n\n.checkbox span{\n\n    flex:1;\n    line-height:1.5;\n\n}\n\n}\n\n\n\/*==================================================\nPETITS TELEPHONES\n==================================================*\/\n\n@media (max-width:480px){\n\n.quote-page{\n\n    padding:50px 15px !important;\n\n}\n\n.quote-header h1{\n\n    font-size:30px !important;\n\n}\n\n.quote-header p{\n\n    font-size:16px;\n\n}\n\n.service-card{\n\n    padding:25px 20px !important;\n\n}\n\n.service-icon{\n\n    width:70px;\n    height:70px;\n    font-size:34px;\n\n}\n\n.quote-right{\n\n    padding:20px 15px !important;\n\n}\n\n.quote-right input,\n.quote-right select,\n.quote-right textarea{\n\n    font-size:16px;\n\n}\n\n.quote-right button{\n\n    font-size:17px;\n\n}\n\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n\nconst serviceCards = document.querySelectorAll(\".service-card\");\nconst serviceSelect = document.getElementById(\"service\");\nconst prestationSelect = document.getElementById(\"prestation\");\nconst form = document.getElementById(\"quoteForm\");\n\nconst prestations = {\n\n    \"Do Technologies\":[\n        \"D\u00e9pannage informatique\",\n        \"Cr\u00e9ation de site Internet\",\n        \"Maintenance\",\n        \"Cybers\u00e9curit\u00e9\",\n        \"R\u00e9seaux\",\n        \"Serveurs\",\n        \"Sauvegardes\",\n        \"Autre\"\n    ],\n\n    \"DJ VIP LUXURY\":[\n        \"Mariage\",\n        \"Anniversaire\",\n        \"Soir\u00e9e priv\u00e9e\",\n        \"Comit\u00e9 d'entreprise\",\n        \"Sonorisation\",\n        \"\u00c9clairage\",\n        \"Karaok\u00e9\",\n        \"Autre\"\n    ],\n\n    \"Les deux\":[\n        \"Projet combin\u00e9\"\n    ]\n\n};\n\n\/*==========================\nClique sur les cartes\n==========================*\/\n\nserviceCards.forEach(card=>{\n\ncard.addEventListener(\"click\",()=>{\n\nserviceCards.forEach(c=>c.classList.remove(\"active\"));\n\ncard.classList.add(\"active\");\n\nlet value=\"\";\n\nif(card.dataset.service===\"do\")\nvalue=\"Do Technologies\";\n\nif(card.dataset.service===\"dj\")\nvalue=\"DJ VIP LUXURY\";\n\nserviceSelect.value=value;\n\nupdatePrestations();\n\n});\n\n});\n\n\/*==========================\nListe d\u00e9roulante dynamique\n==========================*\/\n\nfunction updatePrestations(){\n\nprestationSelect.innerHTML=\"\";\n\nconst list=prestations[serviceSelect.value]||[];\n\nlist.forEach(item=>{\n\nconst option=document.createElement(\"option\");\n\noption.textContent=item;\n\noption.value=item;\n\nprestationSelect.appendChild(option);\n\n});\n\n}\n\nserviceSelect.addEventListener(\"change\",updatePrestations);\n\n\/*==========================\nValidation\n==========================*\/\n\nform.addEventListener(\"submit\",function(e){\n\ne.preventDefault();\n\nconst required=form.querySelectorAll(\"input[required], textarea, select\");\n\nlet ok=true;\n\nrequired.forEach(field=>{\n\nif(field.value.trim()===\"\"){\n\nfield.style.borderColor=\"red\";\n\nok=false;\n\n}else{\n\nfield.style.borderColor=\"#FFD700\";\n\n}\n\n});\n\nif(!ok){\n\nalert(\"Merci de compl\u00e9ter tous les champs obligatoires.\");\n\nreturn;\n\n}\n\nalert(\"Votre demande de devis est pr\u00eate \u00e0 \u00eatre envoy\u00e9e.\");\n\n});\n\n});\n<\/script>\n\n<section class=\"quote-page\">\n\n    <div class=\"quote-header\">\n\n        <span class=\"quote-badge\">\n            \ud83d\udccb DEMANDE DE DEVIS\n        <\/span>\n\n        <h1>\n            Obtenez votre\n            <span>devis gratuit<\/span>\n        <\/h1>\n\n        <p>\n\n            Vous avez un projet informatique ou un \u00e9v\u00e9nement \u00e0 organiser ?\n\n            D\u00e9crivez-nous votre besoin et recevez une proposition\n            personnalis\u00e9e, gratuite et sans engagement.\n\n        <\/p>\n\n    <\/div>\n\n    <div class=\"quote-container\">\n\n        <div class=\"quote-left\">\n\n            <div class=\"service-card\" data-service=\"do\">\n\n                <div class=\"service-icon\">\n                    \ud83d\udcbb\n                <\/div>\n\n                <h3>Do Technologies<\/h3>\n\n                <p>\n\n                    D\u00e9pannage informatique<br>\n                    Cr\u00e9ation de sites Internet<br>\n                    R\u00e9seaux &amp; Serveurs<br>\n                    Cybers\u00e9curit\u00e9<br>\n                    Maintenance\n\n                <\/p>\n\n            <\/div>\n\n            <div class=\"service-card\" data-service=\"dj\">\n\n                <div class=\"service-icon\">\n                    \ud83c\udfa7\n                <\/div>\n\n                <h3>DJ VIP LUXURY<\/h3>\n\n                <p>\n\n                    Mariages<br>\n                    Anniversaires<br>\n                    Soir\u00e9es priv\u00e9es<br>\n                    Comit\u00e9s d&rsquo;entreprise<br>\n                    Sonorisation\n\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n        <div class=\"quote-right\">\n\n            <form id=\"quoteForm\" action=\"\/send.php\" method=\"POST\" enctype=\"multipart\/form-data\">\n\n                <div class=\"row\">\n\n                    <div>\n\n                        <label>Nom *<\/label>\n\n                        <input type=\"text\" name=\"Nom\" required=\"\">\n\n                    <\/div>\n\n                    <div>\n\n                        <label>Pr\u00e9nom *<\/label>\n\n                        <input type=\"text\" name=\"Prenom\" required=\"\">\n\n                    <\/div>\n\n                <\/div>\n\n                <div class=\"row\">\n\n                    <div>\n\n                        <label>T\u00e9l\u00e9phone *<\/label>\n\n                        <input type=\"tel\" name=\"Telephone\" required=\"\">\n\n                    <\/div>\n\n                    <div>\n\n                        <label>Email *<\/label>\n\n                        <input type=\"email\" name=\"Email\" required=\"\">\n\n                    <\/div>\n\n                <\/div>\n\n                <label>Entreprise (facultatif)<\/label>\n\n                <input type=\"text\" name=\"Entreprise\">\n\n                <label>Activit\u00e9 concern\u00e9e *<\/label>\n\n                <select id=\"service\" name=\"Activite\" required=\"\">\n\n                    <option value=\"\">Choisir&#8230;<\/option>\n\n                    <option>Do Technologies<\/option>\n\n                    <option>DJ VIP LUXURY<\/option>\n\n                    <option>Les deux<\/option>\n\n                <\/select>\n\n                <label>Type de prestation *<\/label>\n\n                <select id=\"prestation\" name=\"Prestation\" required=\"\">\n\n                    <option value=\"\">Choisir une activit\u00e9<\/option>\n\n                <\/select>\n\n                <div class=\"row\">\n\n                    <div>\n\n                        <label>Date souhait\u00e9e<\/label>\n\n                        <input type=\"date\" name=\"Date\">\n\n                    <\/div>\n\n                    <div>\n\n                        <label>Budget estimatif<\/label>\n\n                        <input type=\"text\" name=\"Budget\" placeholder=\"Ex : 500 \u20ac\">\n\n                    <\/div>\n\n                <\/div>\n\n                <label>Adresse de l&rsquo;intervention<\/label>\n\n                <input type=\"text\" name=\"Adresse\">\n\n                <label>D\u00e9crivez votre projet *<\/label>\n\n                <textarea rows=\"8\" name=\"Message\" required=\"\"><\/textarea>\n\n                <label>Ajouter un document<\/label>\n\n                <input type=\"file\" name=\"Document\">\n\n                <div class=\"checkbox\">\n\n                    <input type=\"checkbox\" required=\"\">\n\n                    <span>\n\n                        J&rsquo;accepte la politique de confidentialit\u00e9.\n\n                    <\/span>\n\n                <\/div>\n\n                <button type=\"submit\">\n\n                    \ud83d\ude80 Recevoir mon devis gratuit\n\n                <\/button>\n\n            <\/form>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udccb DEMANDE DE DEVIS Obtenez votre devis gratuit Vous avez un projet informatique ou un \u00e9v\u00e9nement \u00e0 organiser ? D\u00e9crivez-nous votre besoin et recevez une proposition personnalis\u00e9e, gratuite et sans engagement. \ud83d\udcbb Do Technologies D\u00e9pannage informatique Cr\u00e9ation de sites Internet R\u00e9seaux &amp; Serveurs Cybers\u00e9curit\u00e9 Maintenance \ud83c\udfa7 DJ VIP LUXURY Mariages Anniversaires Soir\u00e9es priv\u00e9es Comit\u00e9s d&rsquo;entreprise [&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-499","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/pages\/499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=499"}],"version-history":[{"count":4,"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/pages\/499\/revisions"}],"predecessor-version":[{"id":561,"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=\/wp\/v2\/pages\/499\/revisions\/561"}],"wp:attachment":[{"href":"https:\/\/sauxgroupe.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}