{"id":2,"date":"2026-04-17T11:27:35","date_gmt":"2026-04-17T11:27:35","guid":{"rendered":"https:\/\/chernandez.fr\/?page_id=2"},"modified":"2026-04-17T14:52:23","modified_gmt":"2026-04-17T14:52:23","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/chernandez.fr\/","title":{"rendered":"Accueil"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Cyril Hernandez Consulting Cybers\u00e9curit\u00e9 PME Toulouse<\/title>\r\n <meta name=\"description\"\r\n content=\"Audit, conseil et formation en cybers\u00e9curit\u00e9 pour PME et TPE \u00e0 Toulouse. Une approche p\u00e9dagogique, concr\u00e8te et sans jargon.\">\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=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* ======================================================\r\n CHARTE \u2014 Cyril Hernandez Consulting\r\n ====================================================== *\/\r\n :root {\r\n --navy: #122035;\r\n --canard: #0F5257;\r\n --moyen: #2482B7;\r\n --blanc: #FFFFFF;\r\n --bg-soft: #F6F8FB;\r\n --border: rgba(18, 32, 53, 0.08);\r\n --muted: rgba(18, 32, 53, 0.65);\r\n --navy-80: rgba(18, 32, 53, 0.8);\r\n --blanc-80: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;\r\n font-weight: 400;\r\n color: var(--navy);\r\n background: var(--blanc);\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* ======================================================\r\n NAVIGATION\r\n ====================================================== *\/\r\n .ch-nav {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: rgba(255, 255, 255, 0.95);\r\n border-bottom: 1px solid var(--border);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n }\r\n\r\n .ch-nav__inner {\r\n max-width: 1240px;\r\n margin: 0 auto;\r\n padding: 20px 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 32px;\r\n }\r\n\r\n .ch-nav__brand {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n text-decoration: none;\r\n color: var(--navy);\r\n }\r\n\r\n .ch-nav__logo {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 8px;\r\n background: var(--navy);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--blanc);\r\n font-weight: 700;\r\n font-size: 18px;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .ch-nav__name {\r\n font-weight: 700;\r\n font-size: 17px;\r\n letter-spacing: -0.2px;\r\n line-height: 1.2;\r\n }\r\n\r\n .ch-nav__tag {\r\n font-weight: 500;\r\n font-size: 12px;\r\n color: var(--canard);\r\n letter-spacing: 0.3px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .ch-nav__menu {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n\r\n .ch-nav__link {\r\n text-decoration: none;\r\n color: var(--navy);\r\n font-weight: 500;\r\n font-size: 15px;\r\n transition: color 0.2s ease;\r\n position: relative;\r\n }\r\n\r\n .ch-nav__link:hover {\r\n color: var(--moyen);\r\n }\r\n\r\n .ch-nav__link::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -6px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--moyen);\r\n transition: width 0.25s ease;\r\n }\r\n\r\n .ch-nav__link:hover::after {\r\n width: 100%;\r\n }\r\n\r\n .ch-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 22px;\r\n border-radius: 8px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-weight: 600;\r\n font-size: 15px;\r\n text-decoration: none;\r\n cursor: pointer;\r\n border: 2px solid transparent;\r\n transition: all 0.25s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .ch-btn--primary {\r\n background: var(--moyen);\r\n color: var(--blanc);\r\n }\r\n\r\n .ch-btn--primary:hover {\r\n background: var(--canard);\r\n transform: translateY(-1px);\r\n box-shadow: 0 8px 20px rgba(15, 82, 87, 0.25);\r\n }\r\n\r\n .ch-btn--ghost {\r\n background: transparent;\r\n color: var(--blanc);\r\n border-color: rgba(255, 255, 255, 0.35);\r\n }\r\n\r\n .ch-btn--ghost:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n border-color: var(--blanc);\r\n }\r\n\r\n .ch-btn--light {\r\n background: var(--blanc);\r\n color: var(--navy);\r\n }\r\n\r\n .ch-btn--light:hover {\r\n background: var(--moyen);\r\n color: var(--blanc);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .ch-nav__burger {\r\n display: none;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 8px;\r\n }\r\n\r\n .ch-nav__burger span {\r\n display: block;\r\n width: 24px;\r\n height: 2px;\r\n background: var(--navy);\r\n margin: 5px 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n \/* ======================================================\r\n HERO\r\n ====================================================== *\/\r\n .ch-hero {\r\n position: relative;\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--canard) 100%);\r\n color: var(--blanc);\r\n overflow: hidden;\r\n padding: 120px 32px 140px;\r\n }\r\n\r\n .ch-hero::before {\r\n content: '';\r\n position: absolute;\r\n top: -200px;\r\n right: -200px;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(36, 130, 183, 0.35) 0%, transparent 70%);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n }\r\n\r\n .ch-hero::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -300px;\r\n left: -200px;\r\n width: 700px;\r\n height: 700px;\r\n background: radial-gradient(circle, rgba(15, 82, 87, 0.4) 0%, transparent 70%);\r\n border-radius: 50%;\r\n pointer-events: none;\r\n }\r\n\r\n .ch-hero__grid {\r\n position: absolute;\r\n inset: 0;\r\n background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n }\r\n\r\n .ch-hero__inner {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1240px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1.1fr 0.9fr;\r\n gap: 80px;\r\n align-items: center;\r\n }\r\n\r\n .ch-hero__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 8px 16px;\r\n border-radius: 100px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n font-size: 13px;\r\n font-weight: 500;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .ch-hero__eyebrow-dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: #4ADE80;\r\n box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);\r\n }\r\n\r\n .ch-hero__title {\r\n font-weight: 700;\r\n font-size: clamp(34px, 4.2vw, 54px);\r\n line-height: 1.1;\r\n letter-spacing: -1px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .ch-hero__title .accent {\r\n color: var(--moyen);\r\n display: block;\r\n }\r\n\r\n .ch-hero__subtitle {\r\n font-size: 18px;\r\n line-height: 1.6;\r\n color: var(--blanc-80);\r\n margin-bottom: 16px;\r\n max-width: 540px;\r\n }\r\n\r\n .ch-hero__location {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--blanc-80);\r\n margin-bottom: 40px;\r\n }\r\n\r\n .ch-hero__ctas {\r\n display: flex;\r\n gap: 14px;\r\n flex-wrap: wrap;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .ch-hero__meta {\r\n display: flex;\r\n gap: 40px;\r\n padding-top: 32px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.12);\r\n }\r\n\r\n .ch-hero__meta-item strong {\r\n display: block;\r\n font-size: 26px;\r\n font-weight: 700;\r\n color: var(--blanc);\r\n line-height: 1;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .ch-hero__meta-item span {\r\n font-size: 13px;\r\n color: var(--blanc-80);\r\n }\r\n\r\n .ch-hero__visual {\r\n position: relative;\r\n aspect-ratio: 1 \/ 1;\r\n max-width: 460px;\r\n margin-left: auto;\r\n }\r\n\r\n .ch-hero__shield {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .ch-hero__shield-bg {\r\n position: absolute;\r\n inset: 15%;\r\n background: radial-gradient(circle, rgba(36, 130, 183, 0.4) 0%, transparent 65%);\r\n border-radius: 50%;\r\n animation: pulse 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); opacity: 0.8; }\r\n 50% { transform: scale(1.08); opacity: 1; }\r\n }\r\n\r\n .ch-hero__shield-icon {\r\n position: relative;\r\n width: 55%;\r\n height: 55%;\r\n z-index: 2;\r\n filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));\r\n }\r\n\r\n .ch-hero__ring {\r\n position: absolute;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n border-radius: 50%;\r\n inset: 0;\r\n animation: rotate 30s linear infinite;\r\n }\r\n\r\n .ch-hero__ring--2 {\r\n inset: 8%;\r\n border-style: dashed;\r\n border-color: rgba(36, 130, 183, 0.3);\r\n animation-duration: 45s;\r\n animation-direction: reverse;\r\n }\r\n\r\n .ch-hero__ring--3 {\r\n inset: 18%;\r\n border-color: rgba(255, 255, 255, 0.08);\r\n animation-duration: 25s;\r\n }\r\n\r\n @keyframes rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .ch-hero__badge {\r\n position: absolute;\r\n background: var(--blanc);\r\n color: var(--navy);\r\n padding: 12px 16px;\r\n border-radius: 12px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);\r\n z-index: 3;\r\n }\r\n\r\n .ch-hero__badge--tl {\r\n top: 10%;\r\n left: -5%;\r\n animation: float 5s ease-in-out infinite;\r\n }\r\n\r\n .ch-hero__badge--br {\r\n bottom: 12%;\r\n right: -5%;\r\n animation: float 5s ease-in-out infinite 2.5s;\r\n }\r\n\r\n .ch-hero__badge-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: var(--canard);\r\n flex-shrink: 0;\r\n }\r\n\r\n .ch-hero__badge--br .ch-hero__badge-dot {\r\n background: var(--moyen);\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n\r\n \/* ======================================================\r\n PROCESS \/ STEPPER 4 \u00c9TAPES\r\n ====================================================== *\/\r\n .ch-process {\r\n background: var(--bg-soft);\r\n padding: 120px 32px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ch-process__inner {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .ch-process__header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .ch-process__eyebrow,\r\n .ch-services__eyebrow {\r\n display: inline-block;\r\n font-size: 13px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--moyen);\r\n margin-bottom: 20px;\r\n position: relative;\r\n padding: 0 40px;\r\n }\r\n\r\n .ch-process__eyebrow::before,\r\n .ch-process__eyebrow::after,\r\n .ch-services__eyebrow::before,\r\n .ch-services__eyebrow::after {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n width: 30px;\r\n height: 1px;\r\n background: var(--moyen);\r\n opacity: 0.4;\r\n }\r\n\r\n .ch-process__eyebrow::before, .ch-services__eyebrow::before { left: 0; }\r\n .ch-process__eyebrow::after, .ch-services__eyebrow::after { right: 0; }\r\n\r\n .ch-process__title,\r\n .ch-services__title {\r\n font-weight: 700;\r\n font-size: clamp(30px, 3.5vw, 44px);\r\n line-height: 1.15;\r\n letter-spacing: -0.8px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ch-process__title .accent,\r\n .ch-services__title .accent {\r\n color: var(--canard);\r\n }\r\n\r\n .ch-process__intro,\r\n .ch-services__intro {\r\n font-size: 17px;\r\n line-height: 1.65;\r\n color: var(--muted);\r\n max-width: 680px;\r\n margin: 0 auto;\r\n }\r\n\r\n .ch-steps {\r\n position: relative;\r\n max-width: 820px;\r\n margin: 0 auto;\r\n }\r\n\r\n .ch-steps::before {\r\n content: '';\r\n position: absolute;\r\n left: 35px;\r\n top: 40px;\r\n bottom: 40px;\r\n width: 2px;\r\n background: linear-gradient(to bottom, var(--moyen) 0%, var(--canard) 50%, var(--navy) 100%);\r\n opacity: 0.25;\r\n }\r\n\r\n .ch-step {\r\n position: relative;\r\n display: grid;\r\n grid-template-columns: 72px 1fr;\r\n gap: 32px;\r\n padding: 0 0 56px 0;\r\n align-items: flex-start;\r\n }\r\n\r\n .ch-step:last-child { padding-bottom: 0; }\r\n\r\n .ch-step__marker {\r\n position: relative;\r\n width: 72px;\r\n height: 72px;\r\n border-radius: 50%;\r\n background: var(--blanc);\r\n border: 2px solid var(--moyen);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 700;\r\n font-size: 22px;\r\n color: var(--navy);\r\n z-index: 2;\r\n box-shadow: 0 4px 16px rgba(36, 130, 183, 0.12);\r\n transition: all 0.35s ease;\r\n }\r\n\r\n .ch-step:nth-child(3) .ch-step__marker { border-color: var(--canard); }\r\n .ch-step:nth-child(4) .ch-step__marker { border-color: var(--navy); background: var(--navy); color: var(--blanc); }\r\n\r\n .ch-step:hover .ch-step__marker {\r\n transform: scale(1.05);\r\n box-shadow: 0 8px 24px rgba(36, 130, 183, 0.25);\r\n }\r\n\r\n .ch-step__content {\r\n background: var(--blanc);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 28px 32px;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n }\r\n\r\n .ch-step__content::before {\r\n content: '';\r\n position: absolute;\r\n left: -9px;\r\n top: 28px;\r\n width: 16px;\r\n height: 16px;\r\n background: var(--blanc);\r\n border-left: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n transform: rotate(45deg);\r\n }\r\n\r\n .ch-step:hover .ch-step__content {\r\n border-color: var(--moyen);\r\n transform: translateX(4px);\r\n box-shadow: 0 12px 32px rgba(18, 32, 53, 0.08);\r\n }\r\n\r\n .ch-step__tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n color: var(--moyen);\r\n margin-bottom: 8px;\r\n }\r\n\r\n .ch-step__title {\r\n font-weight: 700;\r\n font-size: 22px;\r\n line-height: 1.3;\r\n letter-spacing: -0.3px;\r\n margin-bottom: 12px;\r\n color: var(--navy);\r\n }\r\n\r\n .ch-step__desc {\r\n font-size: 15px;\r\n line-height: 1.65;\r\n color: var(--muted);\r\n }\r\n\r\n .ch-step__desc strong { color: var(--navy); font-weight: 600; }\r\n\r\n .ch-step__icon {\r\n position: absolute;\r\n top: 24px;\r\n right: 28px;\r\n width: 28px;\r\n height: 28px;\r\n color: var(--moyen);\r\n opacity: 0.25;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .ch-step:hover .ch-step__icon { opacity: 0.8; }\r\n\r\n .ch-process__footer {\r\n margin-top: 72px;\r\n text-align: center;\r\n padding: 32px;\r\n background: var(--blanc);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n max-width: 720px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .ch-process__footer-text {\r\n font-size: 15px;\r\n line-height: 1.65;\r\n color: var(--muted);\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ch-process__footer-text strong { color: var(--navy); font-weight: 600; }\r\n\r\n .ch-process__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n background: var(--moyen);\r\n color: var(--blanc);\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 15px;\r\n border-radius: 8px;\r\n transition: all 0.25s ease;\r\n cursor: pointer;\r\n border: none;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n\r\n .ch-process__cta:hover {\r\n background: var(--canard);\r\n transform: translateY(-1px);\r\n box-shadow: 0 8px 20px rgba(15, 82, 87, 0.25);\r\n }\r\n\r\n \/* ======================================================\r\n SERVICES \u2014 ONGLETS \/ ACCORD\u00c9ON\r\n ====================================================== *\/\r\n .ch-services {\r\n background: var(--blanc);\r\n padding: 120px 32px;\r\n position: relative;\r\n }\r\n\r\n .ch-services__inner { max-width: 1180px; margin: 0 auto; }\r\n\r\n .ch-services__header { text-align: center; margin-bottom: 64px; }\r\n\r\n .ch-services__scope {\r\n display: inline-flex;\r\n align-items: flex-start;\r\n gap: 14px;\r\n max-width: 760px;\r\n margin: 32px auto 0;\r\n padding: 18px 24px;\r\n background: rgba(36, 130, 183, 0.06);\r\n border: 1px solid rgba(36, 130, 183, 0.2);\r\n border-radius: 12px;\r\n text-align: left;\r\n font-size: 14px;\r\n line-height: 1.55;\r\n color: var(--navy);\r\n }\r\n\r\n .ch-services__scope svg { color: var(--moyen); flex-shrink: 0; margin-top: 2px; }\r\n .ch-services__scope strong { color: var(--canard); font-weight: 700; }\r\n\r\n .ch-tabs {\r\n display: flex;\r\n justify-content: center;\r\n gap: 8px;\r\n margin-bottom: 48px;\r\n flex-wrap: wrap;\r\n background: var(--bg-soft);\r\n padding: 8px;\r\n border-radius: 14px;\r\n max-width: 720px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .ch-tab {\r\n flex: 1 1 200px;\r\n min-width: 180px;\r\n padding: 16px 24px;\r\n background: transparent;\r\n border: none;\r\n border-radius: 10px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-weight: 600;\r\n font-size: 15px;\r\n color: var(--muted);\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n text-align: center;\r\n }\r\n\r\n .ch-tab:hover:not(.is-active) { color: var(--navy); background: rgba(255, 255, 255, 0.5); }\r\n .ch-tab.is-active { background: var(--navy); color: var(--blanc); box-shadow: 0 6px 16px rgba(18, 32, 53, 0.15); }\r\n .ch-tab svg { width: 18px; height: 18px; flex-shrink: 0; }\r\n\r\n .ch-panel { display: none; animation: fadeIn 0.4s ease; }\r\n .ch-panel.is-active { display: block; }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .ch-panel__grid {\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr;\r\n gap: 60px;\r\n align-items: start;\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n border-radius: 20px;\r\n padding: 56px;\r\n }\r\n\r\n .ch-panel__tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 6px 14px;\r\n border-radius: 100px;\r\n background: rgba(36, 130, 183, 0.1);\r\n border: 1px solid rgba(36, 130, 183, 0.2);\r\n color: var(--moyen);\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ch-panel__title {\r\n font-weight: 700;\r\n font-size: 32px;\r\n line-height: 1.2;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 16px;\r\n color: var(--navy);\r\n }\r\n\r\n .ch-panel__lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin-bottom: 32px; }\r\n .ch-panel__block { margin-bottom: 28px; }\r\n .ch-panel__block-title { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--canard); margin-bottom: 10px; }\r\n .ch-panel__block-text { font-size: 15px; line-height: 1.6; color: var(--navy); }\r\n\r\n .ch-panel__list { list-style: none; padding: 0; margin-bottom: 32px; }\r\n .ch-panel__list li {\r\n position: relative;\r\n padding: 10px 0 10px 32px;\r\n font-size: 15px;\r\n line-height: 1.55;\r\n color: var(--navy);\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .ch-panel__list li:last-child { border-bottom: none; }\r\n .ch-panel__list li::before {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n top: 14px;\r\n width: 18px;\r\n height: 18px;\r\n border-radius: 50%;\r\n background: var(--moyen);\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C\/polyline%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n }\r\n\r\n .ch-panel__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 14px 28px;\r\n background: var(--moyen);\r\n color: var(--blanc);\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 15px;\r\n border-radius: 8px;\r\n transition: all 0.25s ease;\r\n cursor: pointer;\r\n border: none;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n\r\n .ch-panel__cta:hover {\r\n background: var(--canard);\r\n transform: translateY(-1px);\r\n box-shadow: 0 8px 20px rgba(15, 82, 87, 0.25);\r\n }\r\n\r\n .ch-panel__visual {\r\n position: sticky;\r\n top: 100px;\r\n background: var(--blanc);\r\n border: 1px solid var(--border);\r\n border-radius: 16px;\r\n padding: 36px;\r\n text-align: center;\r\n }\r\n\r\n .ch-panel__visual-icon {\r\n width: 80px;\r\n height: 80px;\r\n margin: 0 auto 20px;\r\n border-radius: 20px;\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--canard) 100%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--blanc);\r\n box-shadow: 0 12px 24px rgba(15, 82, 87, 0.2);\r\n }\r\n\r\n .ch-panel__visual-icon svg { width: 40px; height: 40px; }\r\n .ch-panel__visual-label { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--moyen); margin-bottom: 8px; }\r\n .ch-panel__visual-title { font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--navy); margin-bottom: 16px; }\r\n\r\n .ch-panel__visual-stats {\r\n display: flex;\r\n justify-content: space-around;\r\n padding-top: 20px;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n .ch-panel__visual-stat strong { display: block; font-size: 20px; font-weight: 700; color: var(--navy); line-height: 1; margin-bottom: 4px; }\r\n .ch-panel__visual-stat span { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; text-transform: uppercase; }\r\n\r\n \/* ======================================================\r\n BRIDGE\r\n ====================================================== *\/\r\n .ch-bridge {\r\n background: linear-gradient(180deg, var(--navy) 0%, #1A2C47 100%);\r\n color: var(--blanc);\r\n padding: 120px 32px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ch-bridge::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n pointer-events: none;\r\n }\r\n\r\n .ch-bridge::after {\r\n content: '';\r\n position: absolute;\r\n top: 10%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 800px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(36, 130, 183, 0.15) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .ch-bridge__inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }\r\n\r\n .ch-bridge__header { text-align: center; max-width: 820px; margin: 0 auto 72px; }\r\n\r\n .ch-bridge__eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 8px 18px;\r\n border-radius: 100px;\r\n background: rgba(36, 130, 183, 0.15);\r\n border: 1px solid rgba(36, 130, 183, 0.3);\r\n color: var(--moyen);\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .ch-bridge__eyebrow svg { width: 14px; height: 14px; }\r\n\r\n .ch-bridge__title {\r\n font-weight: 700;\r\n font-size: clamp(30px, 3.5vw, 44px);\r\n line-height: 1.15;\r\n letter-spacing: -0.8px;\r\n margin-bottom: 20px;\r\n color: var(--blanc);\r\n }\r\n\r\n .ch-bridge__title .accent { color: var(--moyen); display: block; }\r\n\r\n .ch-bridge__intro { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.75); max-width: 680px; margin: 0 auto; }\r\n\r\n .ch-bridge__divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin: 48px auto 56px;\r\n max-width: 520px;\r\n }\r\n\r\n .ch-bridge__divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); }\r\n .ch-bridge__divider-text { font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 100px; }\r\n\r\n .ch-coach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }\r\n\r\n .ch-coach {\r\n position: relative;\r\n background: rgba(255, 255, 255, 0.04);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 40px;\r\n transition: all 0.35s ease;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .ch-coach::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: var(--brand-color, var(--moyen));\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .ch-coach:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-4px); }\r\n .ch-coach:hover::before { transform: scaleX(1); }\r\n\r\n .ch-coach--admin { --brand-color: var(--moyen); }\r\n .ch-coach--cyber { --brand-color: #4ADE80; }\r\n\r\n .ch-coach__audience {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n padding: 5px 12px;\r\n border-radius: 100px;\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n color: rgba(255, 255, 255, 0.7);\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n z-index: 2;\r\n }\r\n\r\n .ch-coach__desc strong { color: var(--blanc); font-weight: 600; }\r\n\r\n .ch-coach__format {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 14px;\r\n margin-bottom: 20px;\r\n border-radius: 10px;\r\n background: linear-gradient(135deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 70%, var(--navy)));\r\n color: var(--navy);\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-color) 30%, transparent);\r\n }\r\n\r\n .ch-coach--cyber .ch-coach__format { color: var(--navy); }\r\n .ch-coach__format svg { width: 16px; height: 16px; }\r\n .ch-coach__format-count { padding: 2px 8px; background: rgba(18, 32, 53, 0.15); border-radius: 100px; font-size: 11px; letter-spacing: 0.5px; }\r\n\r\n .ch-coach__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; margin-top: 24px; }\r\n\r\n .ch-coach__logo {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 14px;\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.12);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--brand-color);\r\n flex-shrink: 0;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .ch-coach:hover .ch-coach__logo { background: rgba(255, 255, 255, 0.12); border-color: var(--brand-color); }\r\n .ch-coach__logo svg { width: 26px; height: 26px; }\r\n .ch-coach__brand-wrap { flex: 1; }\r\n .ch-coach__brand { font-size: 20px; font-weight: 700; line-height: 1.2; margin-bottom: 4px; letter-spacing: -0.3px; color: var(--blanc); }\r\n .ch-coach__url { font-size: 13px; font-weight: 500; color: var(--brand-color); letter-spacing: 0.3px; }\r\n .ch-coach__tagline { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--blanc); margin-bottom: 16px; }\r\n .ch-coach__desc { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.7); margin-bottom: 24px; flex: 1; }\r\n\r\n .ch-coach__features { list-style: none; padding: 0; margin-bottom: 32px; }\r\n .ch-coach__features li { position: relative; padding: 8px 0 8px 26px; font-size: 14px; color: rgba(255, 255, 255, 0.85); line-height: 1.5; }\r\n .ch-coach__features li::before { content: ''; position: absolute; left: 0; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-color); opacity: 0.3; }\r\n .ch-coach__features li::after { content: ''; position: absolute; left: 4px; top: 18px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-color); }\r\n\r\n .ch-coach__cta {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 22px;\r\n background: var(--brand-color);\r\n color: var(--navy);\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 14px;\r\n border-radius: 10px;\r\n transition: all 0.25s ease;\r\n align-self: flex-start;\r\n }\r\n\r\n .ch-coach__cta:hover { transform: translateX(4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }\r\n .ch-coach__cta svg { transition: transform 0.25s ease; }\r\n .ch-coach__cta:hover svg { transform: translateX(3px); }\r\n\r\n .ch-bridge__footer { text-align: center; margin-top: 56px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }\r\n .ch-bridge__footer-text { font-size: 14px; color: rgba(255, 255, 255, 0.5); font-style: italic; }\r\n .ch-bridge__footer-text strong { color: var(--blanc); font-weight: 600; font-style: normal; }\r\n\r\n \/* ======================================================\r\n MODAL DE CONTACT MULTI-\u00c9TAPES\r\n ====================================================== *\/\r\n .ch-modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 1000;\r\n background: rgba(18, 32, 53, 0.7);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 20px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.35s ease, visibility 0.35s ease;\r\n }\r\n\r\n .ch-modal-overlay.is-open {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n .ch-modal {\r\n background: var(--blanc);\r\n border-radius: 24px;\r\n width: 100%;\r\n max-width: 620px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n position: relative;\r\n box-shadow: 0 40px 80px rgba(18, 32, 53, 0.35), 0 0 0 1px rgba(18, 32, 53, 0.06);\r\n transform: translateY(24px) scale(0.98);\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n scrollbar-width: thin;\r\n scrollbar-color: var(--border) transparent;\r\n }\r\n\r\n .ch-modal-overlay.is-open .ch-modal {\r\n transform: translateY(0) scale(1);\r\n }\r\n\r\n \/* Header modal *\/\r\n .ch-modal__header {\r\n background: linear-gradient(135deg, var(--navy) 0%, var(--canard) 100%);\r\n padding: 36px 40px 32px;\r\n border-radius: 24px 24px 0 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ch-modal__header::before {\r\n content: '';\r\n position: absolute;\r\n top: -60px;\r\n right: -60px;\r\n width: 200px;\r\n height: 200px;\r\n background: radial-gradient(circle, rgba(36, 130, 183, 0.4) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .ch-modal__close {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.12);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: var(--blanc);\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n z-index: 2;\r\n }\r\n\r\n .ch-modal__close:hover {\r\n background: rgba(255, 255, 255, 0.22);\r\n transform: rotate(90deg);\r\n }\r\n\r\n .ch-modal__close svg { width: 16px; height: 16px; }\r\n\r\n .ch-modal__header-label {\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.6);\r\n margin-bottom: 8px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .ch-modal__header-title {\r\n font-weight: 700;\r\n font-size: 26px;\r\n line-height: 1.2;\r\n letter-spacing: -0.4px;\r\n color: var(--blanc);\r\n margin-bottom: 20px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* Progress steps *\/\r\n .ch-modal__progress {\r\n display: flex;\r\n align-items: center;\r\n gap: 0;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .ch-modal__step-dot {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 6px;\r\n flex: 1;\r\n position: relative;\r\n }\r\n\r\n .ch-modal__step-dot:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n top: 14px;\r\n left: calc(50% + 16px);\r\n right: calc(-50% + 16px);\r\n height: 2px;\r\n background: rgba(255, 255, 255, 0.2);\r\n transition: background 0.4s ease;\r\n }\r\n\r\n .ch-modal__step-dot.is-done:not(:last-child)::after {\r\n background: rgba(74, 222, 128, 0.6);\r\n }\r\n\r\n .ch-modal__step-circle {\r\n width: 28px;\r\n height: 28px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.12);\r\n border: 2px solid rgba(255, 255, 255, 0.25);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 12px;\r\n font-weight: 700;\r\n color: rgba(255, 255, 255, 0.6);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ch-modal__step-dot.is-active .ch-modal__step-circle {\r\n background: var(--moyen);\r\n border-color: var(--moyen);\r\n color: var(--blanc);\r\n box-shadow: 0 0 0 4px rgba(36, 130, 183, 0.3);\r\n }\r\n\r\n .ch-modal__step-dot.is-done .ch-modal__step-circle {\r\n background: #4ADE80;\r\n border-color: #4ADE80;\r\n color: var(--navy);\r\n }\r\n\r\n .ch-modal__step-label {\r\n font-size: 10px;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n color: rgba(255, 255, 255, 0.45);\r\n text-align: center;\r\n white-space: nowrap;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .ch-modal__step-dot.is-active .ch-modal__step-label {\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n .ch-modal__step-dot.is-done .ch-modal__step-label {\r\n color: rgba(74, 222, 128, 0.8);\r\n }\r\n\r\n \/* Body modal *\/\r\n .ch-modal__body {\r\n padding: 40px;\r\n }\r\n\r\n \/* Steps container *\/\r\n .ch-form-steps {\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ch-form-step {\r\n display: none;\r\n animation: stepIn 0.35s ease forwards;\r\n }\r\n\r\n .ch-form-step.is-active {\r\n display: block;\r\n }\r\n\r\n .ch-form-step.is-leaving {\r\n animation: stepOut 0.25s ease forwards;\r\n }\r\n\r\n @keyframes stepIn {\r\n from { opacity: 0; transform: translateX(20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n @keyframes stepOut {\r\n from { opacity: 1; transform: translateX(0); }\r\n to { opacity: 0; transform: translateX(-20px); }\r\n }\r\n\r\n .ch-form-step__title {\r\n font-weight: 700;\r\n font-size: 20px;\r\n letter-spacing: -0.3px;\r\n color: var(--navy);\r\n margin-bottom: 6px;\r\n }\r\n\r\n .ch-form-step__subtitle {\r\n font-size: 14px;\r\n color: var(--muted);\r\n margin-bottom: 28px;\r\n line-height: 1.55;\r\n }\r\n\r\n \/* Choice cards (\u00e9tape 1) *\/\r\n .ch-choice-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .ch-choice {\r\n position: relative;\r\n }\r\n\r\n .ch-choice input[type=\"radio\"],\r\n .ch-choice input[type=\"checkbox\"] {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n .ch-choice__label {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n padding: 18px 20px;\r\n border: 2px solid var(--border);\r\n border-radius: 14px;\r\n cursor: pointer;\r\n transition: all 0.25s ease;\r\n background: var(--bg-soft);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .ch-choice__label::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, rgba(36, 130, 183, 0.05), rgba(15, 82, 87, 0.05));\r\n opacity: 0;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n .ch-choice input:checked + .ch-choice__label {\r\n border-color: var(--moyen);\r\n background: rgba(36, 130, 183, 0.06);\r\n box-shadow: 0 4px 16px rgba(36, 130, 183, 0.15);\r\n }\r\n\r\n .ch-choice input:checked + .ch-choice__label::before {\r\n opacity: 1;\r\n }\r\n\r\n .ch-choice__label:hover {\r\n border-color: rgba(36, 130, 183, 0.4);\r\n transform: translateY(-2px);\r\n box-shadow: 0 6px 20px rgba(18, 32, 53, 0.08);\r\n }\r\n\r\n .ch-choice__icon {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 10px;\r\n background: var(--blanc);\r\n border: 1px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--moyen);\r\n transition: all 0.25s ease;\r\n }\r\n\r\n .ch-choice input:checked + .ch-choice__label .ch-choice__icon {\r\n background: var(--moyen);\r\n border-color: var(--moyen);\r\n color: var(--blanc);\r\n }\r\n\r\n .ch-choice__icon svg { width: 18px; height: 18px; }\r\n\r\n .ch-choice__text {\r\n font-weight: 600;\r\n font-size: 14px;\r\n color: var(--navy);\r\n line-height: 1.3;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .ch-choice__check {\r\n position: absolute;\r\n top: 12px;\r\n right: 12px;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 2px solid var(--border);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.25s ease;\r\n }\r\n\r\n .ch-choice input:checked + .ch-choice__label .ch-choice__check {\r\n background: var(--moyen);\r\n border-color: var(--moyen);\r\n }\r\n\r\n .ch-choice__check::after {\r\n content: '';\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: var(--blanc);\r\n opacity: 0;\r\n transition: opacity 0.2s ease;\r\n }\r\n\r\n .ch-choice input:checked + .ch-choice__label .ch-choice__check::after {\r\n opacity: 1;\r\n }\r\n\r\n \/* Form fields *\/\r\n .ch-field {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .ch-field label {\r\n display: block;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--navy);\r\n margin-bottom: 8px;\r\n letter-spacing: 0.2px;\r\n }\r\n\r\n .ch-field label span {\r\n color: var(--moyen);\r\n margin-left: 2px;\r\n }\r\n\r\n .ch-field input,\r\n .ch-field select,\r\n .ch-field textarea {\r\n width: 100%;\r\n padding: 13px 16px;\r\n border: 2px solid var(--border);\r\n border-radius: 10px;\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 15px;\r\n font-weight: 500;\r\n color: var(--navy);\r\n background: var(--bg-soft);\r\n transition: all 0.25s ease;\r\n outline: none;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n }\r\n\r\n .ch-field input:focus,\r\n .ch-field select:focus,\r\n .ch-field textarea:focus {\r\n border-color: var(--moyen);\r\n background: var(--blanc);\r\n box-shadow: 0 0 0 4px rgba(36, 130, 183, 0.1);\r\n }\r\n\r\n .ch-field input.is-error,\r\n .ch-field select.is-error,\r\n .ch-field textarea.is-error {\r\n border-color: #E53935;\r\n box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.08);\r\n }\r\n\r\n .ch-field__error {\r\n font-size: 12px;\r\n color: #E53935;\r\n font-weight: 500;\r\n margin-top: 6px;\r\n display: none;\r\n }\r\n\r\n .ch-field__error.is-visible {\r\n display: block;\r\n }\r\n\r\n .ch-field textarea {\r\n resize: none;\r\n height: 110px;\r\n line-height: 1.55;\r\n }\r\n\r\n .ch-field select {\r\n cursor: pointer;\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23122035' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 14px center;\r\n padding-right: 44px;\r\n }\r\n\r\n .ch-field-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 16px;\r\n }\r\n\r\n \/* Privacy notice *\/\r\n .ch-privacy {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n padding: 14px 16px;\r\n background: rgba(36, 130, 183, 0.05);\r\n border: 1px solid rgba(36, 130, 183, 0.15);\r\n border-radius: 10px;\r\n font-size: 12px;\r\n line-height: 1.5;\r\n color: var(--muted);\r\n margin-bottom: 24px;\r\n }\r\n\r\n .ch-privacy svg { color: var(--moyen); flex-shrink: 0; margin-top: 1px; }\r\n\r\n \/* Recap step *\/\r\n .ch-recap {\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n border-radius: 14px;\r\n padding: 24px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .ch-recap__item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: 16px;\r\n padding: 10px 0;\r\n border-bottom: 1px solid var(--border);\r\n font-size: 14px;\r\n }\r\n\r\n .ch-recap__item:last-child { border-bottom: none; }\r\n .ch-recap__key { font-weight: 600; color: var(--muted); flex-shrink: 0; }\r\n .ch-recap__val { color: var(--navy); font-weight: 500; text-align: right; }\r\n\r\n \/* Success screen *\/\r\n .ch-success {\r\n text-align: center;\r\n padding: 20px 0 8px;\r\n }\r\n\r\n .ch-success__icon {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #4ADE80, #22C55E);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 24px;\r\n box-shadow: 0 16px 40px rgba(74, 222, 128, 0.3);\r\n animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\r\n }\r\n\r\n @keyframes successPop {\r\n from { transform: scale(0.5); opacity: 0; }\r\n to { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n .ch-success__icon svg { width: 38px; height: 38px; color: var(--blanc); }\r\n\r\n .ch-success__title {\r\n font-weight: 700;\r\n font-size: 24px;\r\n letter-spacing: -0.4px;\r\n color: var(--navy);\r\n margin-bottom: 12px;\r\n }\r\n\r\n .ch-success__text {\r\n font-size: 15px;\r\n line-height: 1.65;\r\n color: var(--muted);\r\n max-width: 380px;\r\n margin: 0 auto 28px;\r\n }\r\n\r\n .ch-success__detail {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 10px 18px;\r\n background: var(--bg-soft);\r\n border: 1px solid var(--border);\r\n border-radius: 100px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--canard);\r\n }\r\n\r\n \/* Modal footer nav *\/\r\n .ch-modal__nav {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 12px;\r\n padding-top: 24px;\r\n border-top: 1px solid var(--border);\r\n margin-top: 8px;\r\n }\r\n\r\n .ch-modal__nav-back {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: var(--muted);\r\n background: none;\r\n border: 2px solid var(--border);\r\n border-radius: 8px;\r\n padding: 11px 18px;\r\n cursor: pointer;\r\n font-family: 'Montserrat', sans-serif;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .ch-modal__nav-back:hover { color: var(--navy); border-color: rgba(18, 32, 53, 0.2); }\r\n .ch-modal__nav-back:disabled { opacity: 0; pointer-events: none; }\r\n\r\n .ch-modal__nav-next {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: var(--blanc);\r\n background: var(--moyen);\r\n border: none;\r\n border-radius: 8px;\r\n padding: 13px 24px;\r\n cursor: pointer;\r\n font-family: 'Montserrat', sans-serif;\r\n transition: all 0.25s ease;\r\n flex: 1;\r\n justify-content: center;\r\n max-width: 280px;\r\n }\r\n\r\n .ch-modal__nav-next:hover {\r\n background: var(--canard);\r\n transform: translateY(-1px);\r\n box-shadow: 0 8px 20px rgba(15, 82, 87, 0.25);\r\n }\r\n\r\n .ch-modal__nav-next:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .ch-modal__nav-next--submit {\r\n background: linear-gradient(135deg, var(--canard), var(--navy));\r\n }\r\n\r\n .ch-modal__nav-next--submit:hover {\r\n background: linear-gradient(135deg, var(--navy), var(--canard));\r\n }\r\n\r\n \/* ======================================================\r\n RESPONSIVE\r\n ====================================================== *\/\r\n @media (max-width: 960px) {\r\n .ch-nav__menu { display: none; }\r\n .ch-nav__cta { display: none; }\r\n .ch-nav__burger { display: block; }\r\n .ch-hero { padding: 80px 24px 100px; }\r\n .ch-hero__inner { grid-template-columns: 1fr; gap: 60px; }\r\n .ch-hero__visual { max-width: 340px; margin: 0 auto; }\r\n .ch-hero__meta { gap: 24px; flex-wrap: wrap; }\r\n }\r\n\r\n @media (max-width: 880px) {\r\n .ch-services { padding: 80px 20px; }\r\n .ch-services__header { margin-bottom: 40px; }\r\n .ch-tabs { display: none; }\r\n .ch-panel { display: block !important; margin-bottom: 16px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-soft); }\r\n .ch-panel__grid { display: none; grid-template-columns: 1fr; gap: 32px; padding: 28px; border-radius: 0; border: none; background: transparent; }\r\n .ch-panel.is-open .ch-panel__grid { display: block; }\r\n .ch-panel__header { display: flex !important; align-items: center; justify-content: space-between; padding: 20px 24px; cursor: pointer; background: var(--blanc); border-bottom: 1px solid transparent; transition: all 0.2s ease; }\r\n .ch-panel.is-open .ch-panel__header { border-bottom-color: var(--border); }\r\n .ch-panel__header-title { font-weight: 700; font-size: 17px; color: var(--navy); display: flex; align-items: center; gap: 12px; }\r\n .ch-panel__header-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--navy); color: var(--blanc); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\r\n .ch-panel__header-icon svg { width: 18px; height: 18px; }\r\n .ch-panel__chevron { width: 24px; height: 24px; color: var(--muted); transition: transform 0.3s ease; }\r\n .ch-panel.is-open .ch-panel__chevron { transform: rotate(180deg); color: var(--moyen); }\r\n .ch-panel__visual { position: static; padding: 24px; }\r\n .ch-panel__title { font-size: 22px; }\r\n .ch-panel__lead { font-size: 15px; margin-bottom: 20px; }\r\n }\r\n\r\n @media (min-width: 881px) {\r\n .ch-panel__header { display: none !important; }\r\n }\r\n\r\n @media (max-width: 640px) {\r\n .ch-process { padding: 80px 20px; }\r\n .ch-process__header { margin-bottom: 56px; }\r\n .ch-steps::before { left: 27px; }\r\n .ch-step { grid-template-columns: 56px 1fr; gap: 20px; padding-bottom: 40px; }\r\n .ch-step__marker { width: 56px; height: 56px; font-size: 18px; }\r\n .ch-step__content { padding: 22px 22px; }\r\n .ch-step__content::before { display: none; }\r\n .ch-step__icon { display: none; }\r\n .ch-step__title { font-size: 19px; }\r\n .ch-step__desc { font-size: 14px; }\r\n }\r\n\r\n @media (max-width: 860px) {\r\n .ch-coach-grid { grid-template-columns: 1fr; gap: 20px; }\r\n }\r\n\r\n @media (max-width: 560px) {\r\n .ch-nav__inner { padding: 16px 20px; }\r\n .ch-nav__tag { display: none; }\r\n .ch-hero { padding: 60px 20px 80px; }\r\n .ch-hero__title { font-size: 34px; }\r\n .ch-hero__subtitle { font-size: 16px; }\r\n .ch-hero__ctas { flex-direction: column; }\r\n .ch-hero__ctas .ch-btn { width: 100%; justify-content: center; }\r\n .ch-hero__badge { font-size: 11px; padding: 10px 12px; }\r\n .ch-hero__meta-item strong { font-size: 22px; }\r\n .ch-panel__visual-stats { flex-direction: column; gap: 12px; }\r\n .ch-bridge { padding: 80px 20px; }\r\n .ch-bridge__header { margin-bottom: 48px; }\r\n .ch-coach { padding: 28px 24px; }\r\n }\r\n\r\n \/* Modal responsive *\/\r\n @media (max-width: 600px) {\r\n .ch-modal {\r\n border-radius: 20px 20px 0 0;\r\n max-height: 95vh;\r\n align-self: flex-end;\r\n margin: 0 -20px;\r\n width: calc(100% + 40px);\r\n max-width: none;\r\n border-bottom-left-radius: 0;\r\n border-bottom-right-radius: 0;\r\n }\r\n\r\n .ch-modal-overlay {\r\n align-items: flex-end;\r\n padding: 0;\r\n }\r\n\r\n .ch-modal-overlay.is-open .ch-modal {\r\n transform: translateY(0);\r\n }\r\n\r\n .ch-modal__header { padding: 28px 24px 24px; border-radius: 20px 20px 0 0; }\r\n .ch-modal__header-title { font-size: 22px; }\r\n .ch-modal__body { padding: 28px 24px; }\r\n .ch-choice-grid { grid-template-columns: 1fr; }\r\n .ch-field-row { grid-template-columns: 1fr; }\r\n }\r\n \r\n \r\n .ch-nav__logo-img {\r\n height: 88px!important;\r\n width: auto;\r\n display: block;\r\n object-fit: contain;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n <!-- ============= NAV ============= -->\r\n <nav class=\"ch-nav\">\r\n <div class=\"ch-nav__inner\">\r\n <a href=\"\/\" class=\"ch-nav__brand\">\r\n <a href=\"\/\" class=\"ch-nav__brand\">\r\n <img decoding=\"async\" src=\"https:\/\/chernandez.fr\/wp-content\/uploads\/2026\/04\/LOGO_HONRIZONTAL_COULEUR_FONDTRANSP-scaled.png\" class=\"ch-nav__logo-img\" alt=\"Cyril Hernandez Consulting\"\/>\r\n <\/a>\r\n <span>\r\n \r\n <\/span>\r\n <\/a>\r\n <ul class=\"ch-nav__menu\">\r\n <li><a href=\"#methode\" class=\"ch-nav__link\">M\u00e9thode<\/a><\/li>\r\n <li><a href=\"#services\" class=\"ch-nav__link\">Services<\/a><\/li>\r\n <\/ul>\r\n <a href=\"#contact\" class=\"ch-btn ch-btn--primary ch-nav__cta open-contact\">\r\n Prendre contact\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\">\r\n <path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <button class=\"ch-nav__burger\" aria-label=\"Menu\"><span><\/span><span><\/span><span><\/span><\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- ============= HERO ============= -->\r\n <section class=\"ch-hero\">\r\n <div class=\"ch-hero__grid\"><\/div>\r\n <div class=\"ch-hero__inner\">\r\n <div>\r\n <span class=\"ch-hero__eyebrow\">\r\n <span class=\"ch-hero__eyebrow-dot\"><\/span>\r\n Disponible pour vos projets 2026\r\n <\/span>\r\n <h1 class=\"ch-hero__title\">\r\n Vous prot\u00e9gez votre activit\u00e9.\r\n <span class=\"accent\">Je prot\u00e8ge votre syst\u00e8me d'information.<\/span>\r\n <\/h1>\r\n <p class=\"ch-hero__subtitle\">\r\n Audit, conseil et formation en cybers\u00e9curit\u00e9 pour PME et TPE. Une approche p\u00e9dagogique, concr\u00e8te et sans jargon \u2014 pens\u00e9e pour les dirigeants et leurs \u00e9quipes.\r\n <\/p>\r\n <div class=\"ch-hero__location\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/>\r\n <\/svg>\r\n Bas\u00e9 \u00e0 Toulouse \u2014 interventions en Occitanie et \u00e0 distance\r\n <\/div>\r\n <div class=\"ch-hero__ctas\">\r\n <a href=\"#contact\" class=\"ch-btn ch-btn--light open-contact\">\r\n Prendre contact\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\">\r\n <path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <a href=\"#methode\" class=\"ch-btn ch-btn--ghost\">D\u00e9couvrir ma m\u00e9thode<\/a>\r\n <\/div>\r\n <div class=\"ch-hero__meta\">\r\n <div class=\"ch-hero__meta-item\"><strong>10+<\/strong><span>ann\u00e9es d'exp\u00e9rience IT<\/span><\/div>\r\n <div class=\"ch-hero__meta-item\"><strong>PME & TPE<\/strong><span>sp\u00e9cialisation B2B<\/span><\/div>\r\n <div class=\"ch-hero__meta-item\"><strong>Toulouse<\/strong><span>& Occitanie<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-hero__visual\" aria-hidden=\"true\">\r\n <div class=\"ch-hero__ring\"><\/div>\r\n <div class=\"ch-hero__ring ch-hero__ring--2\"><\/div>\r\n <div class=\"ch-hero__ring ch-hero__ring--3\"><\/div>\r\n <div class=\"ch-hero__shield\">\r\n <div class=\"ch-hero__shield-bg\"><\/div>\r\n <svg class=\"ch-hero__shield-icon\" viewBox=\"0 0 100 120\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M50 5 L90 20 V55 C90 85 72 108 50 115 C28 108 10 85 10 55 V20 Z\" fill=\"#2482B7\" fill-opacity=\"0.15\" stroke=\"#2482B7\" stroke-width=\"2\"\/>\r\n <path d=\"M50 15 L82 27 V55 C82 78 68 97 50 103 C32 97 18 78 18 55 V27 Z\" fill=\"#FFFFFF\" fill-opacity=\"0.08\" stroke=\"#FFFFFF\" stroke-width=\"1.5\"\/>\r\n <path d=\"M35 58 L46 69 L67 48\" stroke=\"#FFFFFF\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div class=\"ch-hero__badge ch-hero__badge--tl\"><span class=\"ch-hero__badge-dot\"><\/span>Audit 360\u00b0<\/div>\r\n <div class=\"ch-hero__badge ch-hero__badge--br\"><span class=\"ch-hero__badge-dot\"><\/span>Formation \u00e9quipes<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============= MA M\u00c9THODE ============= -->\r\n <section class=\"ch-process\" id=\"methode\">\r\n <div class=\"ch-process__inner\">\r\n <div class=\"ch-process__header\">\r\n <span class=\"ch-process__eyebrow\">Ma m\u00e9thode<\/span>\r\n <h2 class=\"ch-process__title\">\r\n Avancer par petits pas,<br>\r\n <span class=\"accent\">plut\u00f4t que vouloir tout faire en m\u00eame temps.<\/span>\r\n <\/h2>\r\n <p class=\"ch-process__intro\">\r\n La cybers\u00e9curit\u00e9 souffre d'un mal classique : vouloir tout traiter, partout, en m\u00eame temps. R\u00e9sultat : dispersion, et au final rien n'est vraiment s\u00e9curis\u00e9. Ma d\u00e9marche fait l'inverse \u2014 focalis\u00e9e, structur\u00e9e, et conduite avec vous.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"ch-steps\">\r\n <div class=\"ch-step\">\r\n <div class=\"ch-step__marker\">01<\/div>\r\n <div class=\"ch-step__content\">\r\n <svg class=\"ch-step__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\r\n <span class=\"ch-step__tag\">\u00c9coute<\/span>\r\n <h3 class=\"ch-step__title\">Comprendre le besoin<\/h3>\r\n <p class=\"ch-step__desc\">On commence par <strong>vous \u00e9couter<\/strong>. Vos enjeux m\u00e9tier, vos contraintes, ce que vous attendez vraiment de votre syst\u00e8me d'information. Pas d'audit standardis\u00e9 : un dialogue pour cadrer le vrai probl\u00e8me \u00e0 r\u00e9soudre, celui qui compte pour votre activit\u00e9.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-step\">\r\n <div class=\"ch-step__marker\">02<\/div>\r\n <div class=\"ch-step__content\">\r\n <svg class=\"ch-step__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><circle cx=\"12\" cy=\"12\" r=\"6\"\/><circle cx=\"12\" cy=\"12\" r=\"2\"\/><\/svg>\r\n <span class=\"ch-step__tag\">Cadrage<\/span>\r\n <h3 class=\"ch-step__title\">Choisir le p\u00e9rim\u00e8tre<\/h3>\r\n <p class=\"ch-step__desc\">Auditer un SI dans sa globalit\u00e9 est une <strong>illusion co\u00fbteuse<\/strong>. On cible ensemble la partie la plus critique \u2014 celle dont la s\u00e9curisation aura le plus d'impact sur votre activit\u00e9. Un p\u00e9rim\u00e8tre clair, c'est une action utile.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-step\">\r\n <div class=\"ch-step__marker\">03<\/div>\r\n <div class=\"ch-step__content\">\r\n <svg class=\"ch-step__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 12l2 2 4-4\"\/><path d=\"M12 2l8 4v6c0 5-3.5 9.5-8 10-4.5-.5-8-5-8-10V6l8-4z\"\/><\/svg>\r\n <span class=\"ch-step__tag\">Plan d'action<\/span>\r\n <h3 class=\"ch-step__title\">Identifier 5 axes, planifier 5 corrections<\/h3>\r\n <p class=\"ch-step__desc\">Sur le p\u00e9rim\u00e8tre choisi, je remonte les <strong>5 risques majeurs<\/strong> \u00e0 traiter en priorit\u00e9 et construis le plan de correction : quoi, quand, avec quels moyens. La mise en \u0153uvre technique revient \u00e0 vos \u00e9quipes ou \u00e0 vos prestataires \u2014 moi, je conseille, je pilote, je forme.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-step\">\r\n <div class=\"ch-step__marker\">04<\/div>\r\n <div class=\"ch-step__content\">\r\n <svg class=\"ch-step__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8\"\/><path d=\"M3 3v5h5\"\/><path d=\"M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16\"\/><path d=\"M16 16h5v5\"\/><\/svg>\r\n <span class=\"ch-step__tag\">Progression<\/span>\r\n <h3 class=\"ch-step__title\">Avancer, \u00e9tendre, recommencer<\/h3>\r\n <p class=\"ch-step__desc\">Une fois ces 5 premiers risques trait\u00e9s, on passe au p\u00e9rim\u00e8tre suivant. <strong>Progression structur\u00e9e, 5 par 5<\/strong>, pour \u00e9viter l'\u00e9cueil classique de la cybers\u00e9curit\u00e9 : vouloir tout faire, partout, en m\u00eame temps \u2014 et au final, ne rien s\u00e9curiser vraiment.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-process__footer\">\r\n <p class=\"ch-process__footer-text\">\r\n <strong>Je trace la trajectoire, vos \u00e9quipes ex\u00e9cutent.<\/strong><br>\r\n Une d\u00e9marche p\u00e9dagogique, pas descendante \u2014 vous restez ma\u00eetre des d\u00e9cisions et de votre infrastructure.\r\n <\/p>\r\n <button class=\"ch-process__cta open-contact\">\r\n Discuter de votre p\u00e9rim\u00e8tre\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\">\r\n <path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============= SERVICES ============= -->\r\n <section class=\"ch-services\" id=\"services\">\r\n <div class=\"ch-services__inner\">\r\n <div class=\"ch-services__header\">\r\n <span class=\"ch-services__eyebrow\">Services<\/span>\r\n <h2 class=\"ch-services__title\">\r\n Trois fa\u00e7ons de renforcer<br>\r\n <span class=\"accent\">la s\u00e9curit\u00e9 de votre SI.<\/span>\r\n <\/h2>\r\n <p class=\"ch-services__intro\">\r\n Audit, formation ou accompagnement de projet : chaque intervention s'adapte \u00e0 votre contexte, \u00e0 votre budget et \u00e0 la maturit\u00e9 de vos \u00e9quipes. Pas de catalogue fig\u00e9 \u2014 une r\u00e9ponse sur mesure.\r\n <\/p>\r\n <div class=\"ch-services__scope\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/>\r\n <\/svg>\r\n <span><strong>Mon champ d'intervention :<\/strong> je conseille, je forme, je pilote. Je ne manipule pas votre infrastructure \u2014 l'ex\u00e9cution technique revient \u00e0 vos \u00e9quipes internes ou \u00e0 vos prestataires.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-tabs\" role=\"tablist\">\r\n <button class=\"ch-tab is-active\" data-tab=\"audit\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>\r\n Audit & Conseil\r\n <\/button>\r\n <button class=\"ch-tab\" data-tab=\"formation\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg>\r\n Formation\r\n <\/button>\r\n <button class=\"ch-tab\" data-tab=\"gestion\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\r\n Gestion de projet\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- AUDIT -->\r\n <div class=\"ch-panel is-active is-open\" data-panel=\"audit\">\r\n <div class=\"ch-panel__header\">\r\n <div class=\"ch-panel__header-title\">\r\n <span class=\"ch-panel__header-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg><\/span>\r\n Audit & Conseil\r\n <\/div>\r\n <svg class=\"ch-panel__chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-panel__grid\">\r\n <div>\r\n <span class=\"ch-panel__tag\">Mon c\u0153ur de m\u00e9tier<\/span>\r\n <h3 class=\"ch-panel__title\">\u00c9valuer votre SI, prioriser les risques, agir sur ce qui compte.<\/h3>\r\n <p class=\"ch-panel__lead\">Un regard ext\u00e9rieur et expert sur votre syst\u00e8me d'information, pour identifier les vuln\u00e9rabilit\u00e9s r\u00e9elles et construire un plan d'action pragmatique \u2014 align\u00e9 sur votre activit\u00e9 et vos contraintes budg\u00e9taires.<\/p>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Pour qui<\/div>\r\n <div class=\"ch-panel__block-text\">Dirigeants et responsables IT de PME\/TPE qui veulent sortir du brouillard sur l'\u00e9tat r\u00e9el de leur cybers\u00e9curit\u00e9 \u2014 sans discours anxiog\u00e8ne, sans d\u00e9pense disproportionn\u00e9e.<\/div>\r\n <\/div>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Ce que vous obtenez<\/div>\r\n <ul class=\"ch-panel__list\">\r\n <li>Un p\u00e9rim\u00e8tre d'audit cibl\u00e9 sur la zone la plus critique de votre SI<\/li>\r\n <li>Une cartographie claire des 5 risques majeurs \u00e0 traiter en priorit\u00e9<\/li>\r\n <li>Un plan de correction concret, chiffr\u00e9, adapt\u00e9 \u00e0 votre budget<\/li>\r\n <li>Une restitution orale avec vous et votre \u00e9quipe, sans jargon<\/li>\r\n <\/ul>\r\n <\/div>\r\n <button class=\"ch-panel__cta open-contact\">Demander un audit\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\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"ch-panel__visual\">\r\n <div class=\"ch-panel__visual-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg><\/div>\r\n <div class=\"ch-panel__visual-label\">Mission type<\/div>\r\n <div class=\"ch-panel__visual-title\">Audit 360\u00b0 d'un p\u00e9rim\u00e8tre m\u00e9tier critique<\/div>\r\n <div class=\"ch-panel__visual-stats\">\r\n <div class=\"ch-panel__visual-stat\"><strong>2\u20134<\/strong><span>semaines<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>5 risques<\/strong><span>prioritaires<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>Plan<\/strong><span>d'action<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FORMATION -->\r\n <div class=\"ch-panel\" data-panel=\"formation\">\r\n <div class=\"ch-panel__header\">\r\n <div class=\"ch-panel__header-title\">\r\n <span class=\"ch-panel__header-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg><\/span>\r\n Formation\r\n <\/div>\r\n <svg class=\"ch-panel__chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-panel__grid\">\r\n <div>\r\n <span class=\"ch-panel__tag\">Sensibiliser & autonomiser<\/span>\r\n <h3 class=\"ch-panel__title\">Transformer vos \u00e9quipes en premi\u00e8re ligne de d\u00e9fense.<\/h3>\r\n <p class=\"ch-panel__lead\">80 % des incidents cyber commencent par une erreur humaine. Des sessions de formation concr\u00e8tes, adapt\u00e9es au niveau r\u00e9el de vos collaborateurs \u2014 du dirigeant \u00e0 l'utilisateur m\u00e9tier \u2014 pour ancrer les bons r\u00e9flexes.<\/p>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Pour qui<\/div>\r\n <div class=\"ch-panel__block-text\">Collaborateurs non-IT, \u00e9quipes techniques, comit\u00e9s de direction. Chaque format est calibr\u00e9 pour le public : pas de slides g\u00e9n\u00e9riques, pas de vocabulaire hors-sol.<\/div>\r\n <\/div>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Th\u00e9matiques possibles<\/div>\r\n <ul class=\"ch-panel__list\">\r\n <li>Sensibilisation cybers\u00e9curit\u00e9 pour collaborateurs (phishing, mots de passe, donn\u00e9es)<\/li>\r\n <li>Formation dirigeants : comprendre les enjeux sans \u00eatre technique<\/li>\r\n <li>Mont\u00e9e en comp\u00e9tence d'\u00e9quipes IT internes sur des sujets cibl\u00e9s<\/li>\r\n <li>Ateliers pratiques : simulations, exercices de cas r\u00e9els<\/li>\r\n <\/ul>\r\n <\/div>\r\n <button class=\"ch-panel__cta open-contact\">Organiser une formation\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\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"ch-panel__visual\">\r\n <div class=\"ch-panel__visual-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg><\/div>\r\n <div class=\"ch-panel__visual-label\">Format type<\/div>\r\n <div class=\"ch-panel__visual-title\">Session sur mesure, pr\u00e9sentiel ou distanciel<\/div>\r\n <div class=\"ch-panel__visual-stats\">\r\n <div class=\"ch-panel__visual-stat\"><strong>\u00bd \u2013 2j<\/strong><span>dur\u00e9e<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>Sur site<\/strong><span>ou visio<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>Cas<\/strong><span>concrets<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- GESTION -->\r\n <div class=\"ch-panel\" data-panel=\"gestion\">\r\n <div class=\"ch-panel__header\">\r\n <div class=\"ch-panel__header-title\">\r\n <span class=\"ch-panel__header-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg><\/span>\r\n Gestion de projet\r\n <\/div>\r\n <svg class=\"ch-panel__chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m6 9 6 6 6-6\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-panel__grid\">\r\n <div>\r\n <span class=\"ch-panel__tag\">Piloter vos chantiers IT<\/span>\r\n <h3 class=\"ch-panel__title\">Coordonner, cadencer, s\u00e9curiser \u2014 sans mettre les mains dans l'infra.<\/h3>\r\n <p class=\"ch-panel__lead\">Un audit sans suite reste un document. Je pilote vos projets IT et cybers\u00e9curit\u00e9 : cadrage, planification, coordination des prestataires techniques, suivi des jalons, conduite du changement. <strong>La manipulation technique revient \u00e0 vos \u00e9quipes ou \u00e0 vos prestataires \u2014 moi, je tiens la ligne.<\/strong><\/p>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Pour qui<\/div>\r\n <div class=\"ch-panel__block-text\">Dirigeants de PME\/TPE qui n'ont pas de chef de projet IT en interne et qui veulent un interlocuteur unique pour garder le cap d'un chantier \u2014 sans y passer leurs soir\u00e9es.<\/div>\r\n <\/div>\r\n <div class=\"ch-panel__block\">\r\n <div class=\"ch-panel__block-title\">Projets types (je pilote, vos prestataires ex\u00e9cutent)<\/div>\r\n <ul class=\"ch-panel__list\">\r\n <li>D\u00e9ploiement d'outils cybers\u00e9curit\u00e9 (EDR, MFA, sauvegardes, etc.)<\/li>\r\n <li>Mise en conformit\u00e9 r\u00e9glementaire (RGPD, NIS2, LPM)<\/li>\r\n <li>Migration d'infrastructure ou refonte de politique d'acc\u00e8s<\/li>\r\n <li>Coordination de prestataires externes et suivi des livrables<\/li>\r\n <\/ul>\r\n <\/div>\r\n <button class=\"ch-panel__cta open-contact\">Cadrer votre projet\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\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"ch-panel__visual\">\r\n <div class=\"ch-panel__visual-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg><\/div>\r\n <div class=\"ch-panel__visual-label\">Engagement type<\/div>\r\n <div class=\"ch-panel__visual-title\">Mission ponctuelle ou accompagnement long<\/div>\r\n <div class=\"ch-panel__visual-stats\">\r\n <div class=\"ch-panel__visual-stat\"><strong>Forfait<\/strong><span>ou TJM<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>Jalons<\/strong><span>clairs<\/span><\/div>\r\n <div class=\"ch-panel__visual-stat\"><strong>Reporting<\/strong><span>r\u00e9gulier<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============= BRIDGE ============= -->\r\n <section class=\"ch-bridge\" id=\"competences\">\r\n <div class=\"ch-bridge__inner\">\r\n <div class=\"ch-bridge__header\">\r\n <span class=\"ch-bridge__eyebrow\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z\"\/><path d=\"M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z\"\/><\/svg>\r\n Mes autres activit\u00e9s\r\n <\/span>\r\n <h2 class=\"ch-bridge__title\">Apprendre, <span class=\"accent\">ou autonomiser.<\/span><\/h2>\r\n <p class=\"ch-bridge__intro\">\r\n En parall\u00e8le de mes interventions conseil, j'ai b\u00e2ti deux offres distinctes pour la mont\u00e9e en comp\u00e9tences. Deux marques, deux publics, un m\u00eame ADN p\u00e9dagogique : <strong style=\"color: var(--blanc); font-weight: 600;\">apprendre par la pratique, \u00eatre accompagn\u00e9 sur la dur\u00e9e.<\/strong>\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"ch-bridge__divider\">\r\n <div class=\"ch-bridge__divider-line\"><\/div>\r\n <span class=\"ch-bridge__divider-text\">Deux marques \u00b7 Deux publics<\/span>\r\n <div class=\"ch-bridge__divider-line\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-coach-grid\">\r\n <div class=\"ch-coach ch-coach--admin\">\r\n <div class=\"ch-coach__audience\">Professionnels IT<\/div>\r\n <div class=\"ch-coach__head\">\r\n <div class=\"ch-coach__logo\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-coach__brand-wrap\">\r\n <div class=\"ch-coach__brand\">moncoach-admin<\/div>\r\n <div class=\"ch-coach__url\">moncoach-admin.fr<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-coach__format\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 8 2 2h5l-3 6 1 5-5-3-5 3 1-5-3-6h5z\"\/><path d=\"M12 3v5\"\/><\/svg>\r\n Programme 90 jours\r\n <\/div>\r\n <div class=\"ch-coach__tagline\">Nouveau poste ou augmentation, en 90 jours.<\/div>\r\n <p class=\"ch-coach__desc\">Programme intensif pour les professionnels IT qui veulent <strong>changer de poste<\/strong> ou <strong>n\u00e9gocier leur augmentation<\/strong>. Mise en coh\u00e9rence de votre profil avec les attendus r\u00e9els du march\u00e9, pr\u00e9paration aux entretiens, accompagnement jusqu'\u00e0 la signature.<\/p>\r\n <ul class=\"ch-coach__features\">\r\n <li>Parcours de formation technique intensif et personnalis\u00e9<\/li>\r\n <li>Pr\u00e9paration aux entretiens et \u00e0 la n\u00e9gociation salariale<\/li>\r\n <li>Accompagnement \u00e0 l'insertion \u00e0 l'emploi : jusqu'\u00e0 la signature<\/li>\r\n <li>Objectif final : nouveau poste ou augmentation sign\u00e9e<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/moncoach-admin.fr\" class=\"ch-coach__cta\" target=\"_blank\" rel=\"noopener\">\r\n D\u00e9couvrir moncoach-admin\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\"><path d=\"M7 7h10v10\"\/><path d=\"M7 17 17 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"ch-coach ch-coach--cyber\">\r\n <div class=\"ch-coach__audience\">Pour les soci\u00e9t\u00e9s<\/div>\r\n <div class=\"ch-coach__head\">\r\n <div class=\"ch-coach__logo\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><path d=\"m9 12 2 2 4-4\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-coach__brand-wrap\">\r\n <div class=\"ch-coach__brand\">moncoach-cyber<\/div>\r\n <div class=\"ch-coach__url\">moncoach-cyber.fr<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-coach__format\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m12 3-4 4 4 4 4-4-4-4z\"\/><path d=\"M12 11v10\"\/><path d=\"M3 21h18\"\/><path d=\"M8 15h8\"\/><\/svg>\r\n Masterclass Cyber\r\n <\/div>\r\n <div class=\"ch-coach__tagline\">Rendre vos \u00e9quipes autonomes sur leur cybers\u00e9curit\u00e9.<\/div>\r\n <p class=\"ch-coach__desc\"><strong>La diff\u00e9rence avec chernandez.fr ?<\/strong> Sur chernandez.fr, je d\u00e9finis et je pilote le plan d'action pour vous. Sur moncoach-cyber, les masterclass et l'accompagnement permettent \u00e0 vos \u00e9quipes \u2014 techniques et non-techniques \u2014 de construire <strong>leur propre<\/strong> hygi\u00e8ne cyber.<\/p>\r\n <ul class=\"ch-coach__features\">\r\n <li>Masterclass pour profils techniques & non-techniques<\/li>\r\n <li>Gouvernance, s\u00e9curit\u00e9 infra\/r\u00e9seau, sensibilisation<\/li>\r\n <li>Accompagnement pour ancrer les r\u00e9flexes dans la dur\u00e9e<\/li>\r\n <li>Objectif : autonomie cyber de votre soci\u00e9t\u00e9<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/moncoach-cyber.fr\" class=\"ch-coach__cta\" target=\"_blank\" rel=\"noopener\">\r\n D\u00e9couvrir moncoach-cyber\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\"><path d=\"M7 7h10v10\"\/><path d=\"M7 17 17 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-bridge__footer\">\r\n <p class=\"ch-bridge__footer-text\">\r\n <strong>Trois marques, une m\u00eame personne.<\/strong> Je conseille, je forme, je fais grandir \u2014 avec la m\u00eame rigueur partout.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============= MODAL CONTACT ============= -->\r\n <div class=\"ch-modal-overlay\" id=\"contactModal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modalTitle\">\r\n <div class=\"ch-modal\">\r\n\r\n <!-- Header avec progress -->\r\n <div class=\"ch-modal__header\">\r\n <button class=\"ch-modal__close\" id=\"modalClose\" aria-label=\"Fermer\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18M6 6l12 12\"\/><\/svg>\r\n <\/button>\r\n <div class=\"ch-modal__header-label\">Prise de contact<\/div>\r\n <div class=\"ch-modal__header-title\" id=\"modalTitle\">Parlons de votre projet<\/div>\r\n <div class=\"ch-modal__progress\" id=\"modalProgress\">\r\n <div class=\"ch-modal__step-dot is-active\" data-step=\"1\">\r\n <div class=\"ch-modal__step-circle\">1<\/div>\r\n <div class=\"ch-modal__step-label\">Besoin<\/div>\r\n <\/div>\r\n <div class=\"ch-modal__step-dot\" data-step=\"2\">\r\n <div class=\"ch-modal__step-circle\">2<\/div>\r\n <div class=\"ch-modal__step-label\">Entreprise<\/div>\r\n <\/div>\r\n <div class=\"ch-modal__step-dot\" data-step=\"3\">\r\n <div class=\"ch-modal__step-circle\">3<\/div>\r\n <div class=\"ch-modal__step-label\">Contact<\/div>\r\n <\/div>\r\n <div class=\"ch-modal__step-dot\" data-step=\"4\">\r\n <div class=\"ch-modal__step-circle\">4<\/div>\r\n <div class=\"ch-modal__step-label\">Envoi<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Body -->\r\n <div class=\"ch-modal__body\">\r\n <div class=\"ch-form-steps\">\r\n\r\n <!-- \u00c9TAPE 1 \u2014 Type de besoin -->\r\n <div class=\"ch-form-step is-active\" data-step=\"1\">\r\n <div class=\"ch-form-step__title\">Quel est votre besoin principal ?<\/div>\r\n <div class=\"ch-form-step__subtitle\">S\u00e9lectionnez une ou plusieurs options \u2014 ce n'est pas engageant, on en discutera ensemble.<\/div>\r\n <div class=\"ch-choice-grid\">\r\n <label class=\"ch-choice\">\r\n <input type=\"checkbox\" name=\"besoin\" value=\"audit\">\r\n <span class=\"ch-choice__label\">\r\n <span class=\"ch-choice__check\"><\/span>\r\n <span class=\"ch-choice__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.3-4.3\"\/><\/svg>\r\n <\/span>\r\n <span class=\"ch-choice__text\">Audit & Conseil cybers\u00e9curit\u00e9<\/span>\r\n <\/span>\r\n <\/label>\r\n <label class=\"ch-choice\">\r\n <input type=\"checkbox\" name=\"besoin\" value=\"formation\">\r\n <span class=\"ch-choice__label\">\r\n <span class=\"ch-choice__check\"><\/span>\r\n <span class=\"ch-choice__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22 10v6M2 10l10-5 10 5-10 5z\"\/><path d=\"M6 12v5c3 3 9 3 12 0v-5\"\/><\/svg>\r\n <\/span>\r\n <span class=\"ch-choice__text\">Formation \u00e9quipes<\/span>\r\n <\/span>\r\n <\/label>\r\n <label class=\"ch-choice\">\r\n <input type=\"checkbox\" name=\"besoin\" value=\"gestion\">\r\n <span class=\"ch-choice__label\">\r\n <span class=\"ch-choice__check\"><\/span>\r\n <span class=\"ch-choice__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><path d=\"M16 2v4M8 2v4M3 10h18\"\/><\/svg>\r\n <\/span>\r\n <span class=\"ch-choice__text\">Gestion de projet IT<\/span>\r\n <\/span>\r\n <\/label>\r\n <label class=\"ch-choice\">\r\n <input type=\"checkbox\" name=\"besoin\" value=\"autre\">\r\n <span class=\"ch-choice__label\">\r\n <span class=\"ch-choice__check\"><\/span>\r\n <span class=\"ch-choice__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/><\/svg>\r\n <\/span>\r\n <span class=\"ch-choice__text\">Autre \/ Je ne sais pas encore<\/span>\r\n <\/span>\r\n <\/label>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"urgence\">Niveau d'urgence<\/label>\r\n <select id=\"urgence\" name=\"urgence\">\r\n <option value=\"\" disabled selected>Choisissez une option<\/option>\r\n <option value=\"decouverte\">Je d\u00e9couvre \/ Pas d'urgence<\/option>\r\n <option value=\"mois\">Dans les prochains mois<\/option>\r\n <option value=\"semaines\">Dans les prochaines semaines<\/option>\r\n <option value=\"urgent\">C'est urgent<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u00c9TAPE 2 \u2014 Entreprise -->\r\n <div class=\"ch-form-step\" data-step=\"2\">\r\n <div class=\"ch-form-step__title\">Votre entreprise<\/div>\r\n <div class=\"ch-form-step__subtitle\">Ces informations permettent d'adapter mon approche d\u00e8s le premier \u00e9change.<\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"societe\">Nom de la soci\u00e9t\u00e9 <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"societe\" name=\"societe\" placeholder=\"Acme SAS\">\r\n <div class=\"ch-field__error\" id=\"err-societe\">Ce champ est requis.<\/div>\r\n <\/div>\r\n <div class=\"ch-field-row\">\r\n <div class=\"ch-field\">\r\n <label for=\"taille\">Taille de l'entreprise <span>*<\/span><\/label>\r\n <select id=\"taille\" name=\"taille\">\r\n <option value=\"\" disabled selected>Choisissez<\/option>\r\n <option value=\"1-10\">1 \u00e0 10 salari\u00e9s<\/option>\r\n <option value=\"11-50\">11 \u00e0 50 salari\u00e9s<\/option>\r\n <option value=\"51-250\">51 \u00e0 250 salari\u00e9s<\/option>\r\n <option value=\"250+\">Plus de 250<\/option>\r\n <\/select>\r\n <div class=\"ch-field__error\" id=\"err-taille\">Ce champ est requis.<\/div>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"secteur\">Secteur d'activit\u00e9<\/label>\r\n <select id=\"secteur\" name=\"secteur\">\r\n <option value=\"\" disabled selected>Choisissez<\/option>\r\n <option value=\"industrie\">Industrie \/ Manufacturing<\/option>\r\n <option value=\"services\">Services \/ Conseil<\/option>\r\n <option value=\"commerce\">Commerce \/ Distribution<\/option>\r\n <option value=\"sante\">Sant\u00e9 \/ M\u00e9dical<\/option>\r\n <option value=\"btp\">BTP \/ Construction<\/option>\r\n <option value=\"finance\">Finance \/ Assurance<\/option>\r\n <option value=\"collectivite\">Collectivit\u00e9 \/ Public<\/option>\r\n <option value=\"autre\">Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"contexte\">Contexte ou d\u00e9clencheur<\/label>\r\n <select id=\"contexte\" name=\"contexte\">\r\n <option value=\"\" disabled selected>Qu'est-ce qui vous am\u00e8ne ?<\/option>\r\n <option value=\"incident\">Incident ou attaque r\u00e9cente<\/option>\r\n <option value=\"audit\">Audit ou conformit\u00e9 impos\u00e9e<\/option>\r\n <option value=\"croissance\">Croissance \/ Nouveau SI<\/option>\r\n <option value=\"curiosite\">Simple curiosit\u00e9 \/ veille<\/option>\r\n <option value=\"rdv\">Recommandation ou suite \u00e0 un RDV<\/option>\r\n <option value=\"autre\">Autre<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u00c9TAPE 3 \u2014 Coordonn\u00e9es -->\r\n <div class=\"ch-form-step\" data-step=\"3\">\r\n <div class=\"ch-form-step__title\">Vos coordonn\u00e9es<\/div>\r\n <div class=\"ch-form-step__subtitle\">Pour vous recontacter \u2014 g\u00e9n\u00e9ralement sous 48h ouvr\u00e9es.<\/div>\r\n <div class=\"ch-field-row\">\r\n <div class=\"ch-field\">\r\n <label for=\"prenom\">Pr\u00e9nom <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"prenom\" name=\"prenom\" placeholder=\"Marie\">\r\n <div class=\"ch-field__error\" id=\"err-prenom\">Ce champ est requis.<\/div>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"nom\">Nom <span>*<\/span><\/label>\r\n <input type=\"text\" id=\"nom\" name=\"nom\" placeholder=\"Dupont\">\r\n <div class=\"ch-field__error\" id=\"err-nom\">Ce champ est requis.<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"email\">Adresse email <span>*<\/span><\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"marie.dupont@societe.fr\">\r\n <div class=\"ch-field__error\" id=\"err-email\">Adresse email invalide.<\/div>\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"telephone\">T\u00e9l\u00e9phone<\/label>\r\n <input type=\"tel\" id=\"telephone\" name=\"telephone\" placeholder=\"06 00 00 00 00\">\r\n <\/div>\r\n <div class=\"ch-field\">\r\n <label for=\"message\">Message compl\u00e9mentaire<\/label>\r\n <textarea id=\"message\" name=\"message\" placeholder=\"D\u00e9crivez en quelques mots votre situation ou vos questions...\"><\/textarea>\r\n <\/div>\r\n <div class=\"ch-privacy\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n <span>Vos donn\u00e9es sont utilis\u00e9es uniquement pour vous recontacter. Aucune revente, aucun d\u00e9marchage tiers. Conform\u00e9ment au RGPD, vous pouvez demander leur suppression \u00e0 tout moment.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u00c9TAPE 4 \u2014 R\u00e9capitulatif -->\r\n <div class=\"ch-form-step\" data-step=\"4\">\r\n <div class=\"ch-form-step__title\">V\u00e9rifiez avant d'envoyer<\/div>\r\n <div class=\"ch-form-step__subtitle\">Un coup d'\u0153il rapide \u2014 tout est correct ?<\/div>\r\n <div class=\"ch-recap\" id=\"recapContent\"><\/div>\r\n <div class=\"ch-privacy\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 8v4\"\/><path d=\"M12 16h.01\"\/><\/svg>\r\n <span>En envoyant ce formulaire, vous acceptez d'\u00eatre recontact\u00e9 par Cyril Hernandez Consulting dans le cadre de votre demande.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u00c9TAPE 5 \u2014 Succ\u00e8s -->\r\n <div class=\"ch-form-step\" data-step=\"5\">\r\n <div class=\"ch-success\">\r\n <div class=\"ch-success__icon\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ch-success__title\">Message bien re\u00e7u !<\/div>\r\n <p class=\"ch-success__text\">Merci pour votre prise de contact. Je reviendrai vers vous sous <strong>48h ouvr\u00e9es<\/strong> pour faire connaissance et comprendre votre situation.<\/p>\r\n <div class=\"ch-success__detail\">\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\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\r\n R\u00e9ponse sous 48h ouvr\u00e9es\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Navigation -->\r\n <div class=\"ch-modal__nav\" id=\"modalNav\">\r\n <button class=\"ch-modal__nav-back\" id=\"btnBack\" disabled>\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\"><path d=\"M19 12H5\"\/><path d=\"m12 19-7-7 7-7\"\/><\/svg>\r\n Retour\r\n <\/button>\r\n <button class=\"ch-modal__nav-next\" id=\"btnNext\">\r\n Continuer\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\"><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n(function () {\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ TABS \/ ACCORD\u00c9ON\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n const tabs = document.querySelectorAll('.ch-tab');\r\n const panels = document.querySelectorAll('.ch-panel');\r\n\r\n tabs.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n const target = tab.dataset.tab;\r\n tabs.forEach(t => t.classList.toggle('is-active', t === tab));\r\n panels.forEach(p => p.classList.toggle('is-active', p.dataset.panel === target));\r\n });\r\n });\r\n\r\n document.querySelectorAll('.ch-panel__header').forEach(header => {\r\n header.addEventListener('click', () => {\r\n const panel = header.closest('.ch-panel');\r\n const isOpen = panel.classList.contains('is-open');\r\n document.querySelectorAll('.ch-panel').forEach(p => p.classList.remove('is-open'));\r\n if (!isOpen) panel.classList.add('is-open');\r\n });\r\n });\r\n\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ MODAL\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n const overlay = document.getElementById('contactModal');\r\n const btnClose = document.getElementById('modalClose');\r\n const btnBack = document.getElementById('btnBack');\r\n const btnNext = document.getElementById('btnNext');\r\n const modalNav = document.getElementById('modalNav');\r\n const progressDots = document.querySelectorAll('.ch-modal__step-dot');\r\n\r\n let currentStep = 1;\r\n const TOTAL_STEPS = 4; \/\/ l'\u00e9tape 5 = \u00e9cran succ\u00e8s\r\n\r\n \/\/ \u2500\u2500 Ouvrir \/ Fermer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function openModal() {\r\n overlay.classList.add('is-open');\r\n document.body.style.overflow = 'hidden';\r\n resetForm();\r\n goToStep(1);\r\n }\r\n\r\n function closeModal() {\r\n overlay.classList.remove('is-open');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n function resetForm() {\r\n \/\/ D\u00e9cocher toutes les cases\r\n document.querySelectorAll('input[name=\"besoin\"]').forEach(cb => cb.checked = false);\r\n \/\/ Vider les champs texte\r\n ['societe', 'prenom', 'nom', 'email', 'telephone', 'message'].forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) el.value = '';\r\n });\r\n \/\/ R\u00e9initialiser les selects\r\n ['urgence', 'taille', 'secteur', 'contexte'].forEach(id => {\r\n const el = document.getElementById(id);\r\n if (el) el.selectedIndex = 0;\r\n });\r\n \/\/ Effacer les erreurs\r\n document.querySelectorAll('.ch-field__error').forEach(e => e.classList.remove('is-visible'));\r\n document.querySelectorAll('.is-error').forEach(e => e.classList.remove('is-error'));\r\n \/\/ Effacer l'\u00e9ventuelle erreur d'envoi\r\n const errBox = document.getElementById('send-error');\r\n if (errBox) errBox.remove();\r\n \/\/ R\u00e9afficher la nav\r\n modalNav.style.display = '';\r\n }\r\n\r\n \/\/ Tous les d\u00e9clencheurs .open-contact\r\n document.querySelectorAll('.open-contact').forEach(el => {\r\n el.addEventListener('click', e => {\r\n e.preventDefault();\r\n openModal();\r\n });\r\n });\r\n\r\n btnClose.addEventListener('click', closeModal);\r\n overlay.addEventListener('click', e => { if (e.target === overlay) closeModal(); });\r\n document.addEventListener('keydown', e => { if (e.key === 'Escape' && overlay.classList.contains('is-open')) closeModal(); });\r\n\r\n\r\n \/\/ \u2500\u2500 Navigation entre \u00e9tapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function goToStep(step) {\r\n \/\/ Retirer l'\u00e9tape courante\r\n document.querySelectorAll('.ch-form-step').forEach(s => s.classList.remove('is-active'));\r\n\r\n currentStep = step;\r\n\r\n \/\/ Afficher la nouvelle \u00e9tape\r\n const target = document.querySelector(`.ch-form-step[data-step=\"${step}\"]`);\r\n if (target) target.classList.add('is-active');\r\n\r\n \/\/ Mettre \u00e0 jour la barre de progression\r\n progressDots.forEach(dot => {\r\n const n = parseInt(dot.dataset.step);\r\n dot.classList.remove('is-active', 'is-done');\r\n if (n < step) dot.classList.add('is-done');\r\n else if (n === step) dot.classList.add('is-active');\r\n });\r\n\r\n \/\/ Bouton Retour\r\n btnBack.disabled = (step <= 1);\r\n\r\n \/\/ Bouton Suivant \/ Envoyer \/ masqu\u00e9\r\n if (step > TOTAL_STEPS) {\r\n \/\/ \u00c9cran succ\u00e8s : on cache toute la nav\r\n modalNav.style.display = 'none';\r\n } else if (step === TOTAL_STEPS) {\r\n btnNext.innerHTML = `Envoyer le message\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 2 11 13\"\/><path d=\"M22 2 15 22 11 13 2 9l20-7z\"\/>\r\n <\/svg>`;\r\n btnNext.classList.add('ch-modal__nav-next--submit');\r\n btnNext.disabled = false;\r\n buildRecap();\r\n } else {\r\n btnNext.innerHTML = `Continuer\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/>\r\n <\/svg>`;\r\n btnNext.classList.remove('ch-modal__nav-next--submit');\r\n btnNext.disabled = false;\r\n }\r\n\r\n \/\/ Scroll haut de la modale\r\n overlay.querySelector('.ch-modal').scrollTo({ top: 0, behavior: 'smooth' });\r\n }\r\n\r\n\r\n \/\/ \u2500\u2500 R\u00e9capitulatif \u00e9tape 4 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function buildRecap() {\r\n const besoinsMap = {\r\n audit: 'Audit & Conseil',\r\n formation: 'Formation \u00e9quipes',\r\n gestion: 'Gestion de projet IT',\r\n autre: 'Autre \/ \u00c0 d\u00e9finir'\r\n };\r\n const besoins = [...document.querySelectorAll('input[name=\"besoin\"]:checked')]\r\n .map(cb => besoinsMap[cb.value] || cb.value);\r\n\r\n const g = id => document.getElementById(id);\r\n const labelOpt = id => {\r\n const el = g(id);\r\n return el && el.selectedIndex > 0 ? el.options[el.selectedIndex].text : '\u2014';\r\n };\r\n\r\n const items = [\r\n { key: 'Besoin(s)', val: besoins.length ? besoins.join(', ') : 'Non pr\u00e9cis\u00e9' },\r\n { key: 'Urgence', val: labelOpt('urgence') },\r\n { key: 'Soci\u00e9t\u00e9', val: g('societe')?.value || '\u2014' },\r\n { key: 'Taille', val: labelOpt('taille') },\r\n { key: 'Secteur', val: labelOpt('secteur') },\r\n { key: 'Contexte', val: labelOpt('contexte') },\r\n { key: 'Nom', val: `${g('prenom')?.value || ''} ${g('nom')?.value || ''}`.trim() || '\u2014' },\r\n { key: 'Email', val: g('email')?.value || '\u2014' },\r\n { key: 'T\u00e9l\u00e9phone', val: g('telephone')?.value || '\u2014' },\r\n ];\r\n\r\n document.getElementById('recapContent').innerHTML = items\r\n .map(i => `<div class=\"ch-recap__item\">\r\n <span class=\"ch-recap__key\">${i.key}<\/span>\r\n <span class=\"ch-recap__val\">${i.val}<\/span>\r\n <\/div>`)\r\n .join('');\r\n }\r\n\r\n\r\n \/\/ \u2500\u2500 Validation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n function validateStep(step) {\r\n let valid = true;\r\n\r\n const setErr = (id, show) => {\r\n const field = document.getElementById(id);\r\n const msg = document.getElementById('err-' + id);\r\n if (field) field.classList.toggle('is-error', show);\r\n if (msg) msg.classList.toggle('is-visible', show);\r\n if (show) valid = false;\r\n };\r\n\r\n if (step === 2) {\r\n setErr('societe', !document.getElementById('societe').value.trim());\r\n setErr('taille', !document.getElementById('taille').value);\r\n }\r\n\r\n if (step === 3) {\r\n setErr('prenom', !document.getElementById('prenom').value.trim());\r\n setErr('nom', !document.getElementById('nom').value.trim());\r\n const email = document.getElementById('email').value.trim();\r\n setErr('email', !email || !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email));\r\n }\r\n\r\n return valid;\r\n }\r\n\r\n\r\n \/\/ \u2500\u2500 Envoi via send.php \u2192 Brevo \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n async function envoyerViaBrevo() {\r\n const besoinsMap = {\r\n audit: 'Audit & Conseil',\r\n formation: 'Formation \u00e9quipes',\r\n gestion: 'Gestion de projet IT',\r\n autre: 'Autre \/ \u00c0 d\u00e9finir'\r\n };\r\n const besoins = [...document.querySelectorAll('input[name=\"besoin\"]:checked')]\r\n .map(cb => besoinsMap[cb.value] || cb.value);\r\n\r\n const g = id => document.getElementById(id);\r\n const labelOpt = id => {\r\n const el = g(id);\r\n return el && el.selectedIndex > 0 ? el.options[el.selectedIndex].text : '\u2014';\r\n };\r\n\r\n const prenomVal = g('prenom')?.value.trim() || '';\r\n const nomVal = g('nom')?.value.trim() || '';\r\n const emailVal = g('email')?.value.trim() || '';\r\n const telVal = g('telephone')?.value.trim() || '';\r\n const societeVal= g('societe')?.value.trim() || '';\r\n const msgVal = g('message')?.value.trim() || '';\r\n\r\n \/\/ \u2500\u2500 Email HTML format\u00e9 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n const htmlContent = `<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head><meta charset=\"UTF-8\"><style>\r\n body{font-family:'Segoe UI',Arial,sans-serif;background:#F6F8FB;margin:0;padding:32px 16px}\r\n .wrap{max-width:600px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(18,32,53,.10)}\r\n .hd{background:linear-gradient(135deg,#122035,#0F5257);padding:36px 40px;color:#fff}\r\n .hd h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.3px}\r\n .hd p{margin:0;font-size:13px;opacity:.7}\r\n .bd{padding:36px 40px}\r\n .section{margin-bottom:28px}\r\n .section-title{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#0F5257;margin-bottom:12px}\r\n .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f2f5;font-size:14px}\r\n .row:last-child{border-bottom:none}\r\n .row-key{font-weight:600;color:#607080;flex-shrink:0}\r\n .row-val{color:#122035;font-weight:500;text-align:right}\r\n .msg-box{background:#F6F8FB;border-radius:10px;padding:16px;font-size:14px;line-height:1.65;color:#122035;margin-top:8px}\r\n .ft{padding:20px 40px;background:#F6F8FB;font-size:12px;color:#aab;text-align:center}\r\n .tag{display:inline-block;padding:3px 10px;border-radius:100px;background:rgba(36,130,183,.12);color:#2482B7;font-size:12px;font-weight:600;margin:2px}\r\n<\/style><\/head>\r\n<body><div class=\"wrap\">\r\n <div class=\"hd\">\r\n <h1>Nouveau contact \u2014 chernandez.fr<\/h1>\r\n <p>Re\u00e7u le ${new Date().toLocaleDateString('fr-FR',{weekday:'long',day:'numeric',month:'long',year:'numeric',hour:'2-digit',minute:'2-digit'})}<\/p>\r\n <\/div>\r\n <div class=\"bd\">\r\n <div class=\"section\">\r\n <div class=\"section-title\">Besoin(s)<\/div>\r\n <div>${besoins.length ? besoins.map(b=>`<span class=\"tag\">${b}<\/span>`).join('') : '<span class=\"tag\">Non pr\u00e9cis\u00e9<\/span>'}<\/div>\r\n <div class=\"row\" style=\"margin-top:10px\"><span class=\"row-key\">Urgence<\/span><span class=\"row-val\">${labelOpt('urgence')}<\/span><\/div>\r\n <\/div>\r\n <div class=\"section\">\r\n <div class=\"section-title\">Entreprise<\/div>\r\n <div class=\"row\"><span class=\"row-key\">Soci\u00e9t\u00e9<\/span><span class=\"row-val\">${societeVal||'\u2014'}<\/span><\/div>\r\n <div class=\"row\"><span class=\"row-key\">Taille<\/span><span class=\"row-val\">${labelOpt('taille')}<\/span><\/div>\r\n <div class=\"row\"><span class=\"row-key\">Secteur<\/span><span class=\"row-val\">${labelOpt('secteur')}<\/span><\/div>\r\n <div class=\"row\"><span class=\"row-key\">Contexte<\/span><span class=\"row-val\">${labelOpt('contexte')}<\/span><\/div>\r\n <\/div>\r\n <div class=\"section\">\r\n <div class=\"section-title\">Contact<\/div>\r\n <div class=\"row\"><span class=\"row-key\">Nom<\/span><span class=\"row-val\">${prenomVal} ${nomVal}<\/span><\/div>\r\n <div class=\"row\"><span class=\"row-key\">Email<\/span><span class=\"row-val\"><a href=\"mailto:${emailVal}\" style=\"color:#2482B7\">${emailVal}<\/a><\/span><\/div>\r\n <div class=\"row\"><span class=\"row-key\">T\u00e9l\u00e9phone<\/span><span class=\"row-val\">${telVal||'\u2014'}<\/span><\/div>\r\n <\/div>\r\n ${msgVal ? `<div class=\"section\"><div class=\"section-title\">Message<\/div><div class=\"msg-box\">${msgVal.replace(\/\\n\/g,'<br>')}<\/div><\/div>` : ''}\r\n <\/div>\r\n <div class=\"ft\">Envoy\u00e9 depuis le formulaire de contact de chernandez.fr<\/div>\r\n<\/div><\/body><\/html>`;\r\n\r\n const payload = {\r\n sender: { name: `${prenomVal} ${nomVal}`, email: 'contact@chernandez.fr' },\r\n to: [{ email: 'contact@chernandez.fr', name: 'Cyril Hernandez' }],\r\n replyTo: { email: emailVal, name: `${prenomVal} ${nomVal}` },\r\n subject: `[chernandez.fr] ${besoins.length ? besoins[0] : 'Contact'} \u2014 ${societeVal || prenomVal}`,\r\n htmlContent,\r\n };\r\n\r\n \/\/ \u2b07\ufe0f Appel vers send.php (cl\u00e9 API c\u00f4t\u00e9 serveur, jamais expos\u00e9e)\r\n const res = await fetch('https:\/\/chernandez.fr\/send.php', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify(payload),\r\n });\r\n\r\n if (!res.ok) {\r\n const err = await res.json().catch(() => ({}));\r\n throw new Error(err.message || `Erreur HTTP ${res.status}`);\r\n }\r\n\r\n return true;\r\n }\r\n\r\n\r\n \/\/ \u2500\u2500 Boutons navigation \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n btnNext.addEventListener('click', async () => {\r\n \/\/ \u00c9tapes interm\u00e9diaires : valider puis avancer\r\n if (currentStep < TOTAL_STEPS) {\r\n if (!validateStep(currentStep)) return;\r\n goToStep(currentStep + 1);\r\n return;\r\n }\r\n\r\n \/\/ \u00c9tape 4 : envoi\r\n if (currentStep === TOTAL_STEPS) {\r\n \/\/ Supprimer l'erreur pr\u00e9c\u00e9dente si elle existe\r\n document.getElementById('send-error')?.remove();\r\n\r\n \/\/ \u00c9tat chargement\r\n btnNext.disabled = true;\r\n btnBack.disabled = true;\r\n btnNext.innerHTML = `\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n style=\"animation:ch-spin .8s linear infinite\">\r\n <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/>\r\n <\/svg>\r\n Envoi en cours\u2026`;\r\n\r\n \/\/ Ajouter l'animation spin si pas d\u00e9j\u00e0 pr\u00e9sente\r\n if (!document.getElementById('ch-spin-style')) {\r\n const s = document.createElement('style');\r\n s.id = 'ch-spin-style';\r\n s.textContent = '@keyframes ch-spin{to{transform:rotate(360deg)}}';\r\n document.head.appendChild(s);\r\n }\r\n\r\n try {\r\n await envoyerViaBrevo();\r\n goToStep(5); \/\/ Succ\u00e8s \ud83c\udf89\r\n } catch (err) {\r\n console.error('Erreur Brevo:', err);\r\n\r\n \/\/ Remettre le bouton en \u00e9tat normal\r\n btnNext.disabled = false;\r\n btnBack.disabled = false;\r\n btnNext.innerHTML = `R\u00e9essayer\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/>\r\n <\/svg>`;\r\n\r\n \/\/ Afficher le message d'erreur sous la nav\r\n const errBox = document.createElement('div');\r\n errBox.id = 'send-error';\r\n errBox.style.cssText = [\r\n 'margin-top:12px',\r\n 'padding:12px 16px',\r\n 'background:#FEF2F2',\r\n 'border:1px solid #FECACA',\r\n 'border-radius:8px',\r\n 'font-size:13px',\r\n 'color:#DC2626',\r\n 'font-weight:500',\r\n 'line-height:1.5',\r\n ].join(';');\r\n errBox.textContent = `Une erreur est survenue : ${err.message}. V\u00e9rifiez votre connexion ou r\u00e9essayez dans quelques instants.`;\r\n modalNav.after(errBox);\r\n }\r\n }\r\n });\r\n\r\n btnBack.addEventListener('click', () => {\r\n if (currentStep > 1) goToStep(currentStep - 1);\r\n });\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Cyril Hernandez Consulting Cybers\u00e9curit\u00e9 PME Toulouse M\u00e9thode Services Prendre contact Disponible pour vos projets 2026 Vous prot\u00e9gez votre activit\u00e9. Je prot\u00e8ge votre syst\u00e8me d’information. Audit, conseil et formation en cybers\u00e9curit\u00e9 pour PME et TPE. Une approche p\u00e9dagogique, concr\u00e8te et sans jargon \u2014 pens\u00e9e pour les dirigeants et leurs \u00e9quipes. Bas\u00e9 \u00e0 Toulouse \u2014 interventions en […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chernandez.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":35,"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/chernandez.fr\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/chernandez.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}