{"id":187,"date":"2026-06-18T15:25:31","date_gmt":"2026-06-18T15:25:31","guid":{"rendered":"https:\/\/chhems-conseils.eu\/?page_id=187"},"modified":"2026-06-18T16:17:26","modified_gmt":"2026-06-18T16:17:26","slug":"187-2","status":"publish","type":"page","link":"https:\/\/chhems-conseils.eu\/?page_id=187","title":{"rendered":"Plan du site"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Supprime tout espace ajout\u00e9 par WordPress au-dessus du nav *\/\n.site-header,\n.wp-block-group,\n.wp-site-blocks,\n.entry-content,\nheader {\n    margin-top: 0 !important;\n    padding-top: 0 !important;\n}\n\n\/* Force le nav \u00e0 coller en haut *\/\nnav {\n    margin-top: 0 !important;\n    padding-top: 0.5rem !important;\n    position: relative !important;\n    z-index: 9999 !important;\n}\n\n\/* Emp\u00eache le body de passer devant *\/\nbody {\n    position: relative !important;\n    z-index: 1 !important;\n}\n\n\n\n\n\n\/* Supprime l'espace sous le footer *\/\nbody,\n.wp-site-blocks,\n.wp-block-group,\n.entry-content {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n}\n\n\/* Footer sans marge en dessous *\/\nfooter,\n.site-footer {\n    margin-bottom: 0 !important;\n    padding-bottom: 0 !important;\n}\n\n\n\n\n\n\n\n\n\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\nbody, p, h1, h2, h3, h4, h5, h6, a, button, li {\n    font-family: \"Inter\", sans-serif !important;\n}\n<\/style>\n\n<meta charset=\"UTF-8\">\n    <title>Nos expertises<\/title>\n    <style>\n\n        \/* Reset rapide *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n\n        \/* Conteneur de la nav *\/\n        nav {\n            background: #fff;\n            padding: 0.5rem 1.5rem;\n            border-bottom: 1px solid #eee;\n            position: relative;\n            z-index: 9999;\n        }\n\n        .nav-container {\n            max-width: 1200px;\n            margin: auto;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            position: relative;\n            z-index: 9999;\n        }\n\n        .nav-logo img {\n            width: clamp(100px, 15vw, 200px);\n        }\n\n        .nav-menu {\n            list-style: none;\n            display: flex;\n            align-items: center;\n            gap: 2rem;\n        }\n\n        \/* Hamburger (hidden on desktop) *\/\n        .nav-toggle {\n            display: none;\n            position: absolute;\n            opacity: 0;\n            width: 32px;\n            height: 32px;\n            right: 1rem;\n            top: 50%;\n            transform: translateY(-50%);\n            z-index: 99999; \/* au-dessus du menu *\/\n            cursor: pointer;\n        }\n\n\n        .nav-toggle-label {\n            display: none;\n            cursor: pointer;\n            width: 32px;\n            height: 24px;\n            position: relative;\n        }\n        \/*   les 3 barres du hamburger *\/\n        .nav-toggle-label span,\n        .nav-toggle-label span::before,\n        .nav-toggle-label span::after {\n            content: \"\";\n            position: absolute;\n            width: 100%;\n            height: 3px;\n            background: #000;\n            transition: 0.3s ease;\n            border-radius: 3px;\n        }\n\n        .nav-toggle-label span {\n            top: 50%;\n            transform: translateY(-50%);\n        }\n\n        .nav-toggle-label span::before {\n            top: -8px;\n        }\n\n        .nav-toggle-label span::after {\n            top: 8px;\n        }\n\n        \/* Animation hamburger \u2192 X *\/\n        .nav-toggle:checked + .nav-toggle-label span {\n            background: transparent;\n        }\n\n        .nav-toggle:checked + .nav-toggle-label span::before {\n            top: 0;\n            transform: rotate(45deg);\n        }\n\n        .nav-toggle:checked + .nav-toggle-label span::after {\n            top: 0;\n            transform: rotate(-45deg);\n        }\n\n        @media (max-width: 600px) {\n\n            .nav-container {\n                display: grid;\n                grid-template-columns: auto 1fr auto; \/* logo | vide | hamburger *\/\n                align-items: center;\n            }\n\n            .nav-logo {\n                justify-self: start;\n            }\n\n            .nav-toggle {\n                display: block;\n            }\n\n            .nav-toggle-label {\n                display: block;\n                position: static;   \/* IMPORTANT : plus d'absolu *\/\n                justify-self: end;\n                cursor: pointer;\n                width: 32px;\n                height: 24px;\n            }\n\n            .nav-menu {\n                width: 100%;\n                top: 60px;\n            }\n        }\n\n\n        @media (max-width: 900px) {\n\n            .nav-toggle-label {\n                position: absolute;\n                right: 1.5rem;\n                top: 50%;\n                transform: translateY(-50%);\n                z-index: 99999; \/* passe devant tout *\/\n            }\n\n            .nav-menu {\n                position: absolute;\n                top: 70px;\n                left: 0;\n                width: 100%;\n                background: #fff;\n                flex-direction: column;\n                align-items: center;\n                gap: 1.2rem;\n                padding: 1.5rem 0;\n                border-bottom: 1px solid #eee;\n\n                \/* Hidden by default *\/\n                max-height: 0;\n                overflow: hidden;\n                opacity: 0;\n                transform: translateY(-10px);\n                transition: 0.3s ease;\n            }\n\n            \/* When hamburger is checked \u2192 menu visible *\/\n            .nav-toggle:checked ~ .nav-menu {\n                max-height: 500px;\n                opacity: 1;\n                transform: translateY(0);\n            }\n\n            .nav-toggle {\n                position: absolute;\n                right: 1.5rem;\n                top: 50%;\n                transform: translateY(-50%);\n                z-index: 99999;\n            }\n\n            .nav-menu {\n                position: absolute;\n                z-index: 999; \/* menu sous le hamburger *\/\n            }\n        }\n\n\n        \/* Liste horizontale *\/\n        nav ul {\n            list-style: none;\n            display: flex;\n            align-items: center;\n            gap: clamp(0.5rem, 3vw, 2rem);\n\n\n        }\n\n\n        @media (max-width: 900px) {\n            nav ul {\n                flex-wrap: wrap;\n                gap: 1rem;\n            }\n        }\n\n\n\n        @media (max-width: 600px) {\n            nav ul {\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                gap: 0.8rem;\n            }\n\n\n        }\n\n\n\n\n        \/* Liens *\/\n        nav a {\n            color: #000000;\n            text-decoration: none;\n            font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n            font-size: clamp(0.5rem, 5vw, 1.5rem);\n            padding: clamp(0.1rem, 5vw, 0.25rem) 0;\n            position: relative;\n        }\n\n        \/* Soulignement anim\u00e9 au survol *\/\n        nav a::after {\n            content: \"\";\n            position: absolute;\n            left: 0;\n            bottom: -3px;\n            width: 0;\n            height: 2px;\n\n            transition: width 0.2s ease-out;\n            background: linear-gradient(to right, #AE23E8, #27D3F5);\n\n\n        }\n\n        nav a:hover::after {\n            width: 100%;\n        }\n\n\n        \/* Lien actif *\/\n        .active {\n            color: #000000;\n            font-weight: 600;\n        }\n\n        .active::after {\n            width: 100%;\n        }\n        .btn-gradient {\n            background: transparent;\n            border: clamp(1px, 0.5vw, 2px) solid #000000;\n\n            color: #AE23E8;\n            padding:clamp(0.3rem, 2vw, 0.6rem) clamp(0.6rem, 3vw, 1.2rem);  ;\n            border-radius: clamp(6px, 5vw, 3px);\n            font-size: clamp(0.7rem, 2.5vw, 1rem);;\n            cursor: pointer;\n            transition: 0.2s ease;\n\n\n        }\n\n\n        .btn-gradient:hover {\n            background: linear-gradient(to right, #AE23E8, #27D3F5);\n            color: #000000;\n        }\n\n        h1{\n            font-size: clamp(3rem, 6vw, 6rem);\n            color:black;\n            text-align: center;\n            margin-top:30px;\n\n        }\n\n        li{\n            font-size: clamp(2em,5vw, 2.5em);\n\n        }\n\n        .footer {\n            background: linear-gradient(to right, #AE23E8, #27D3F5);\n            color: white;\n            padding: 50px 20px;\n            font-family: sans-serif;\n        }\n\n        .footer-content {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 40px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .footer-col h3 {\n            margin-bottom: 10px;\n            font-size: 1.1rem;\n        }\n\n        .footer-col a {\n            display: block;\n            color: #dfe6e9;\n            margin: 6px 0;\n            text-decoration: none;\n            transition: 0.3s;\n        }\n\n        .footer-col a:hover {\n            color: white;\n        }\n\n        .brand h2 {\n            font-size: 1.8rem;\n            margin-bottom: 10px;\n        }\n\n\n\n        .footer-bottom {\n            margin-top: 40px;\n            text-align: center;\n        }\n\n        .footer-bottom a {\n            margin: 0 15px;\n            color: #dfe6e9;\n            text-decoration: none;\n            transition: 0.3s;\n        }\n\n        .footer-bottom a:hover {\n            color: white;\n        }\n\n        \/* Responsive *\/\n        @media (max-width: 900px) {\n            .footer-content {\n                grid-template-columns: 1fr 1fr;\n            }\n        }\n\n        @media (max-width: 600px) {\n            .footer-content {\n                grid-template-columns: 1fr;\n                text-align: center;\n            }\n        }\n\n\n        body {\n            background: transparent;\n            position: relative;\n        }\n\n        \/* Bulles simples *\/\n        .bubble {\n            position: fixed;\n            border-radius: 50%;\n            opacity: 0.25; \/* l\u00e9ger pour ne pas g\u00eaner *\/\n            pointer-events: none; \/* ne bloque pas les clics *\/\n            z-index: -1; \/* derri\u00e8re tout *\/\n            animation: float 12s infinite ease-in-out;\n        }\n\n        @media (max-width: 600px) {\n            .bubble {\n                display: none;\n            }\n        }\n\n        @media (max-width: 900px) {\n            .bubble:nth-child(3) { display: none}\n            .bubble:nth-child(13) { display: none }\n\n\n            \/* etc. *\/\n        }\n\n\n        \/* Animation douce *\/\n        @keyframes float {\n            0% { transform: translateY(0); }\n            50% { transform: translateY(-40px); }\n            100% { transform: translateY(0); }\n        }\n\n\n\n    <\/style>\n\n\n\n<nav class=\"nav\">\n    <div class=\"nav-container\">\n\n        <!-- Logo -->\n        <a href=\"\/\" class=\"nav-logo\">\n            <img decoding=\"async\" src=\"http:\/\/chhems-conseils.eu\/wp-content\/uploads\/2026\/06\/logo-chhems-removebg-preview-e1781201029512.png\" alt=\"logo\">\n        <\/a>\n\n        <!-- Hamburger -->\n        <input type=\"checkbox\" id=\"nav-toggle\" class=\"nav-toggle\">\n        <label for=\"nav-toggle\" class=\"nav-toggle-label\">\n            <span><\/span>\n        <\/label>\n\n        <!-- Menu -->\n        <ul class=\"nav-menu\">\n            <li><a href=\"\/\">Accueil<\/a><\/li>\n        <li><a href=\"\/?page_id=96\">Nos expertises<\/a><\/li>\n        <li><a href=\"\/?page_id=135\">Nos secteurs<\/a><\/li>\n            <li><button class=\"btn-gradient\">Nous rejoindre<\/button><\/li>\n            <li><button class=\"btn-gradient\">Nous contacter<\/button><\/li>\n        <\/ul>\n\n    <\/div>\n<\/nav>\n\n\n<div class=\"bubble\" style=\"width:140px; height:140px; background:#AE23E8; top:5%; left:8%; animation-duration: 12s;\"><\/div>\n<div class=\"bubble\" style=\"width:90px; height:90px; background:#AE23E8; top:18%; left:22%; animation-duration: 14s;\"><\/div>\n<div class=\"bubble\" style=\"width:160px; height:160px; background:#AE23E8; top:40%; left:12%; animation-duration: 16s;\"><\/div>\n<div class=\"bubble\" style=\"width:70px; height:70px; background:#AE23E8; top:65%; left:5%; animation-duration: 10s;\"><\/div>\n<div class=\"bubble\" style=\"width:110px; height:110px; background:#AE23E8; top:80%; left:18%; animation-duration: 15s;\"><\/div>\n\n<!-- Bleues -->\n<div class=\"bubble\" style=\"width:180px; height:180px; background:#27D3F5; top:10%; left:70%; animation-duration: 13s;\"><\/div>\n<div class=\"bubble\" style=\"width:120px; height:120px; background:#27D3F5; top:30%; left:82%; animation-duration: 11s;\"><\/div>\n<div class=\"bubble\" style=\"width:150px; height:150px; background:#27D3F5; top:55%; left:65%; animation-duration: 17s;\"><\/div>\n<div class=\"bubble\" style=\"width:90px; height:90px; background:#27D3F5; top:75%; left:78%; animation-duration: 12s;\"><\/div>\n<div class=\"bubble\" style=\"width:130px; height:130px; background:#27D3F5; top:88%; left:60%; animation-duration: 14s;\"><\/div>\n\n<!-- Bleu-violet -->\n<div class=\"bubble\" style=\"width:130px; height:130px; background:#6C78EF; top:15%; left:45%; animation-duration: 10s;\"><\/div>\n<div class=\"bubble\" style=\"width:100px; height:100px; background:#6C78EF; top:35%; left:35%; animation-duration: 14s;\"><\/div>\n<div class=\"bubble\" style=\"width:150px; height:150px; background:#6C78EF; top:60%; left:48%; animation-duration: 16s;\"><\/div>\n<div class=\"bubble\" style=\"width:80px; height:80px; background:#6C78EF; top:78%; left:40%; animation-duration: 9s;\"><\/div>\n<div class=\"bubble\" style=\"width:110px; height:110px; background:#6C78EF; top:90%; left:50%; animation-duration: 18s;\"><\/div>\n\n<!-- Petites bulles bonus -->\n<div class=\"bubble\" style=\"width:50px; height:50px; background:#AE23E8; top:3%; left:90%; animation-duration: 8s;\"><\/div>\n<div class=\"bubble\" style=\"width:60px; height:60px; background:#27D3F5; top:25%; left:5%; animation-duration: 9s;\"><\/div>\n<div class=\"bubble\" style=\"width:55px; height:55px; background:#6C78EF; top:50%; left:90%; animation-duration: 11s;\"><\/div>\n<div class=\"bubble\" style=\"width:45px; height:45px; background:#AE23E8; top:70%; left:30%; animation-duration: 7s;\"><\/div>\n<div class=\"bubble\" style=\"width:65px; height:65px; background:#27D3F5; top:92%; left:75%; animation-duration: 10s;\"><\/div>\n\n\n\n\n<h1>Plan du site<\/h1>\n<div style=\"text-align: center; margin-bottom: 500px\">\n\n    <ul>\n        <li><a href=\"\/\">Accueil<\/a><\/li>\n        <li><a href=\"\/?page_id=96\">Nos expertises<\/a><\/li>\n        <li><a href=\"\/?page_id=135\">Nos secteurs<\/a><\/li>\n\n    <\/ul>\n\n<\/div>\n\n\n<footer class=\"footer\">\n    <div class=\"footer-content\">\n\n        <div class=\"footer-col brand\">\n            <img decoding=\"async\" src=\"http:\/\/chhems-conseils.eu\/wp-content\/uploads\/2026\/06\/6955ae82-53d5-4a9f-93ff-df8f83f8fcd7_removalai_preview.png\" alt=\"\" class=\"logo\">\n\n        <\/div>\n\n\n        <div class=\"footer-col\">\n            <h3>Nos expertises<\/h3>\n            <a href=\"\/?page_id=96\/#Net&amp;Sec\">Network &amp; Security<\/a>\n            <a href=\"\/?page_id=96\/#Cyber\">Cybersecurity<\/a>\n            <a href=\"\/?page_id=96\/#Sys&amp;Cloud\">Systems &amp; Cloud<\/a>\n            <a href=\"\/?page_id=96\/#Data&amp;IA\">Data &amp; IA<\/a>\n        <\/div>\n\n        <div class=\"footer-col\">\n            <h3>Nos secteurs<\/h3>\n            <a href=\"\/?page_id=135\/#Ener\">Energies<\/a>\n            <a href=\"\/?page_id=135\/#Tele\">T\u00e9l\u00e9coms<\/a>\n            <a href=\"\/?page_id=135\/#Ban&amp;Assu\">Banque\/Assurance<\/a>\n            <a href=\"\/?page_id=135\/#Env\">Environnement<\/a>\n            <a href=\"\/?page_id=135\/#Indus\">Industrie<\/a>\n            <a href=\"\/?page_id=135\/#Gdistr\">Grande Distribution<\/a>\n\n        <\/div>\n\n    <\/div>\n\n    <div class=\"footer-bottom\">\n        <a href=\"#\">Plan du site<\/a>\n    <\/div>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Nos expertises Accueil Nos expertises Nos secteurs Nous rejoindre Nous contacter Plan du site Accueil Nos expertises Nos secteurs Nos expertises Network &amp; Security Cybersecurity Systems &amp; Cloud Data &amp; IA Nos secteurs Energies T\u00e9l\u00e9coms Banque\/Assurance Environnement Industrie Grande Distribution Plan du site<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"idriss-test","meta":{"footnotes":""},"class_list":["post-187","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/pages\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=187"}],"version-history":[{"count":7,"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/pages\/187\/revisions"}],"predecessor-version":[{"id":199,"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=\/wp\/v2\/pages\/187\/revisions\/199"}],"wp:attachment":[{"href":"https:\/\/chhems-conseils.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}