{"id":37,"date":"2026-06-04T16:54:21","date_gmt":"2026-06-04T16:54:21","guid":{"rendered":"https:\/\/atmoz.design\/?page_id=37"},"modified":"2026-06-10T20:30:41","modified_gmt":"2026-06-10T20:30:41","slug":"main-page","status":"publish","type":"page","link":"https:\/\/atmoz.design\/en\/","title":{"rendered":"Home"},"content":{"rendered":"<section class=\"bde-section-37-100 bde-section\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<div class=\"section-container\"><div class=\"bde-columns-37-101 bde-columns\"><div class=\"bde-column-37-102 bde-column\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-37-104 bde-heading\">\n<span class=\"titre-accent-h1\">L'expertise \u00e0 360\u00b0<\/span> <br><span class=\"description-h1\">pour vos produits, votre site web et votre identit\u00e9 de marque.<\/span>\n<\/h1><h2 class=\"bde-heading-37-105 bde-heading\">\nAtmOz, studio de <a id=\"lien-laurent-glauser\" href=\"https:\/\/www.linkedin.com\/in\/laurent-glauser-0b1a1510a\/\" target=\"_blank\" rel=\"noopener noreferrer\">Laurent Glauser<\/a> \u00e0 Angers, allie ing\u00e9nierie et design pour concevoir vos projets de A \u00e0 Z, du physique au num\u00e9rique.\n<\/h2><h3 class=\"bde-heading-37-106 bde-heading\">\nPour une innovation porteuse de sens, je place l'\u00e9co-conception et la durabilit\u00e9 au c\u0153ur de chaque projet.\n<\/h3><div class=\"bde-div-37-107 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-button-37-108 bde-button\">\n    \n                        \n                        \n    \n    \n    \n    \n            \n                    \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link button-atom button-atom--custom bde-button__button\" href=\"#Realisations\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">D\u00e9couvrir mon travail \u2794<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div><div class=\"bde-button-37-109 bde-button\">\n    \n                        \n                        \n    \n    \n    \n    \n            \n                    \n            \n            \n\n    \n    \n    \n    \n    \n    <a class=\"breakdance-link button-atom button-atom--custom bde-button__button\" href=\"#tarif\" target=\"_self\" data-type=\"url\"  >\n\n    \n        <span class=\"button-atom__text\">Calcul de votre budget<\/span>\n\n        \n        \n                <\/a>\n\n    \n\n\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-37-103 bde-column\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n\n<\/div><\/div><div class=\"bde-shortcode-37-111 bde-shortcode\"><!-- Indicateur Scroll Down AtmOz (Version Souple pour Page Builders) -->\r\n<div class=\"scroll-down-atmoz\" id=\"scrollBtnAtmOz\">\r\n    <span class=\"scroll-text\">Scroll<\/span>\r\n    <div class=\"scroll-line\">\r\n        <span class=\"scroll-droplet\"><\/span>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.scroll-down-atmoz {\r\n    \/* =======================================================\r\n       PERSONNALISATION FACILE (Modifiez ces valeurs selon vos besoins)\r\n       ======================================================= *\/\r\n    --atmoz-text-size: 10px;       \/* Taille de la police du mot \"Scroll\" *\/\r\n    --atmoz-text-spacing: 5px;     \/* Espacement entre les lettres du mot \"Scroll\" *\/\r\n    --atmoz-line-height: 50px;     \/* Hauteur de la ligne verticale (ex: 50px, 80px, etc.) *\/\r\n    --atmoz-line-color: rgba(28, 32, 37, 0.10); \/* Couleur de la ligne de fond *\/\r\n    --atmoz-droplet-color: #d25433; \/* Couleur de la goutte anim\u00e9e (Terracotta) *\/\r\n    --atmoz-text-color: #1c2025;   \/* Couleur du texte *\/\r\n    --atmoz-margin-top: 20px;      \/* Marge externe au-dessus de l'\u00e9l\u00e9ment *\/\r\n    --atmoz-margin-bottom: 20px;   \/* Marge externe en-dessous de l'\u00e9l\u00e9ment *\/\r\n\r\n    \/* =======================================================\r\n       STRUCTURE (Ne pas modifier sauf si n\u00e9cessaire)\r\n       ======================================================= *\/\r\n    position: relative;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%; \/* S'adapte \u00e0 la largeur du bloc\/colonne WordPress *\/\r\n    margin-top: var(--atmoz-margin-top);\r\n    margin-bottom: var(--atmoz-margin-bottom);\r\n    cursor: pointer;\r\n    user-select: none;\r\n}\r\n\r\n\/* Style du texte *\/\r\n.scroll-down-atmoz .scroll-text {\r\n    font-family: inherit; \/* Utilise la police par d\u00e9faut de votre site *\/\r\n    font-size: var(--atmoz-text-size);\r\n    text-transform: uppercase;\r\n    letter-spacing: var(--atmoz-text-spacing);\r\n    color: var(--atmoz-text-color);\r\n    margin-bottom: 12px;\r\n    font-weight: 500;\r\n    opacity: 0.6;\r\n    transition: opacity 0.3s ease, color 0.3s ease;\r\n    text-align: center;\r\n}\r\n\r\n\/* Ligne verticale de fond *\/\r\n.scroll-down-atmoz .scroll-line {\r\n    width: 3px;\r\n    height: var(--atmoz-line-height);\r\n    background-color: var(--atmoz-line-color);\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: background-color 0.3s ease;\r\n}\r\n\r\n\/* Goutte d'eau anim\u00e9e *\/\r\n.scroll-down-atmoz .scroll-droplet {\r\n    position: absolute;\r\n    left: 0;\r\n    width: 3px;\r\n    height: 12px;\r\n    background-color: var(--atmoz-droplet-color);\r\n    border-radius: 1.5px;\r\n    transform-origin: center top;\r\n    will-change: top, transform, opacity;\r\n    animation: glide-down-atmoz 2.2s infinite ease-in-out;\r\n}\r\n\r\n\/* Effets au survol (Hover) *\/\r\n.scroll-down-atmoz:hover .scroll-text {\r\n    opacity: 1;\r\n    color: var(--atmoz-droplet-color);\r\n}\r\n\r\n.scroll-down-atmoz:hover .scroll-line {\r\n    background-color: rgba(210, 84, 51, 0.20);\r\n}\r\n\r\n\/* Animation en pourcentage s'adaptant \u00e0 n'importe quelle hauteur de ligne *\/\r\n@keyframes glide-down-atmoz {\r\n    0% {\r\n        top: -25%;\r\n        transform: scaleY(0.3);\r\n        opacity: 0;\r\n    }\r\n    15% {\r\n        top: 0%;\r\n        transform: scaleY(1);\r\n        opacity: 1;\r\n    }\r\n    60% {\r\n        top: 60%;\r\n        transform: scaleY(1);\r\n        opacity: 1;\r\n    }\r\n    75% {\r\n        top: 85%;\r\n        transform: scaleY(0.3);\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        top: 85%;\r\n        transform: scaleY(0.3);\r\n        opacity: 0;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    const btn = document.getElementById('scrollBtnAtmOz');\r\n    if (btn) {\r\n        btn.addEventListener('click', function() {\r\n            \/\/ D\u00e9filement fluide automatique d'une hauteur d'\u00e9cran (100vh)\r\n            window.scrollTo({\r\n                top: window.innerHeight,\r\n                behavior: 'smooth'\r\n            });\r\n        });\r\n    }\r\n})();\r\n<\/script><\/div><\/div>\n<\/section><section class=\"bde-section-37-112 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div id=\"Services\" class=\"bde-div-37-113 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-columns-37-115 bde-columns\"><div class=\"bde-column-37-116 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-119 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-120 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-122 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-boxes w-5 h-5\" aria-hidden=\"true\"><path d=\"M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z\"><\/path><path d=\"m7 16.5-4.74-2.85\"><\/path><path d=\"m7 16.5 5-3\"><\/path><path d=\"M7 16.5v5.17\"><\/path><path d=\"M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z\"><\/path><path d=\"m17 16.5-5-3\"><\/path><path d=\"m17 16.5 4.74-2.85\"><\/path><path d=\"M17 16.5v5.17\"><\/path><path d=\"M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z\"><\/path><path d=\"M12 8 7.26 5.15\"><\/path><path d=\"m12 8 4.74-2.85\"><\/path><path d=\"M12 13.5V8\"><\/path><\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-123 bde-heading\">\nDesign & Ing\u00e9nierie Produit\n<\/h3>\n<\/div><div class=\"bde-div-37-124 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-125 bde-text\">\nDe votre besoin jusqu'\u00e0 son industrialisation, je m'occupe de votre projet  produit dans sa globalit\u00e9. \n<\/div><ul class=\"bde-basic-list-37-126 bde-basic-list\">\n  <li  >    \n          Approche pragmatique du design o\u00f9 la forme n'est pas dissoci\u00e9e de sa fonction.\n      <\/li>\n  <li  >    \n          Expert dans les produits m\u00e9caniques issus de la plasturgie, de la m\u00e9tallurgie, et du textile.\n      <\/li>\n  <li  >    \n          Sp\u00e9cialisation domaine textile technique (bagageries, maroquinerie, \u00e9quipements professionnels).\n      <\/li>\n  <li  >    \n          Expertise en innovation \u00e9co-responsable.\n      <\/li>\n<\/ul>\n<\/div>\n<\/div><div class=\"bde-column-37-128 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-129 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-130 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-131 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-globe w-5 h-5\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"><\/path><path d=\"M2 12h20\"><\/path><\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-132 bde-heading\">\nWebDesign & Digital\n<\/h3>\n<\/div><div class=\"bde-div-37-133 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-134 bde-text\">\nJe con\u00e7ois des interfaces sur-mesure pour transformer votre vision en une exp\u00e9rience en ligne fluide et engageante.\n<\/div><ul class=\"bde-basic-list-37-135 bde-basic-list\">\n  <li  >    \n          Conception de maquettes centr\u00e9es sur l'utilisateur et de parcours de navigation intuitifs.\n      <\/li>\n  <li  >    \n          Cr\u00e9ation de sites (vitrine ou e-commerce) performants, adapt\u00e9s aux mobiles et optimis\u00e9s SEO & SEO LLM (IA).\n      <\/li>\n  <li  >    \n          Application des principes d'\u00e9co-conception web pour des pages plus l\u00e9g\u00e8res, rapides et moins \u00e9nergivores.\n      <\/li>\n<\/ul>\n<\/div>\n<\/div><div class=\"bde-column-37-136 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-137 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-138 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-139 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-palette w-5 h-5\" aria-hidden=\"true\"><path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\"><\/path><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"><\/circle><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\"><\/circle><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\"><\/circle><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\"><\/circle><\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-140 bde-heading\">\nGraphisme & Identit\u00e9 de Marque\n<\/h3>\n<\/div><div class=\"bde-div-37-141 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-142 bde-text\">\nParce que votre image est votre premier point de contact, je con\u00e7ois une identit\u00e9 visuelle forte pour en faire un v\u00e9ritable levier de visibilit\u00e9.\n<\/div><ul class=\"bde-basic-list-37-143 bde-basic-list\">\n  <li  >    \n          Conception de l'ADN visuel de votre entreprise (logo, typographies, couleurs) pour vous d\u00e9marquer sur votre march\u00e9.\n      <\/li>\n  <li  >    \n          D\u00e9clinaison de votre identit\u00e9 sur l'ensemble de vos points de contact : de l'\u00e9cran digital jusqu'au packaging physique.\n      <\/li>\n  <li  >    \n          D\u00e9marche graphique \u00e9co-responsable (sobri\u00e9t\u00e9 visuelle, \u00e9co-encrage et supports recycl\u00e9s \/ recyclables) pour une communication engag\u00e9e.\n      <\/li>\n<\/ul>\n<\/div>\n<\/div><\/div>\n<\/div><div class=\"bde-div-37-171 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-columns-37-172 bde-columns\"><div class=\"bde-column-37-181 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-182 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-183 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-184 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"#1A202C\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Cercle central -->\n  <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n  <!-- Contour engrenage -->\n  <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-185 bde-heading\">\nOutils Hardware & Atelier\n<\/h3>\n<\/div><div class=\"bde-div-37-186 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-187 bde-text\">\nAfin de tester et de prototyper vos id\u00e9es avec la plus grande r\u00e9activit\u00e9, je dispose de mon propre atelier int\u00e9gr\u00e9 :<br>\n<\/div><ul class=\"bde-basic-list-37-188 bde-basic-list\">\n  <li  >    \n          <strong>Imprimantes 3D FDM<\/strong> - pour le prototypage rapide et la validation des volumes de vos pi\u00e8ces.\n      <\/li>\n  <li  >    \n          <strong>Machines \u00e0 coudres<\/strong> - pour la conception, l'assemblage et la validation de vos projets textiles.\n      <\/li>\n  <li  >    \n          <strong>Outillage de pr\u00e9cision<\/strong> - pour le fa\u00e7onnage, l'assemblage et les finitions de vos maquettes.\n      <\/li>\n<\/ul><div class=\"bde-text-37-197 bde-text\">\nPour l'industrialisation ou des besoins tr\u00e8s sp\u00e9cifiques, je m'appuie sur un r\u00e9seau de partenaires industriels de confiance.<br>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-37-189 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-190 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-191 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-192 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"#1A202C\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- \u00c9cran principal -->\n  <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n  <!-- Barre de menu UI -->\n  <line x1=\"2\" y1=\"7\" x2=\"22\" y2=\"7\"\/>\n  <!-- Symboles de code \/ logiciel -->\n  <polyline points=\"9 14 6 11 9 8\"\/>\n  <polyline points=\"15 14 18 11 15 8\"\/>\n  <!-- Pied de l'\u00e9cran -->\n  <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\n  <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-193 bde-heading\">\nOutils Software & Num\u00e9riques\n<\/h3>\n<\/div><div class=\"bde-div-37-194 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-195 bde-text\">\nJe ma\u00eetrise un \u00e9cosyst\u00e8me de logiciels professionnels exigeants pour concevoir vos projets physiques et digitaux de A \u00e0 Z :\n<\/div><ul class=\"bde-basic-list-37-196 bde-basic-list\">\n  <li  >    \n          <strong>Ing\u00e9nierie & Mod\u00e9lisation<\/strong> - Autodesk Fusion 360 (CAO technique) et Blender 3D (mod\u00e9lisation avanc\u00e9e et rendus r\u00e9alistes).\n      <\/li>\n  <li  >    \n          <strong>Cr\u00e9ation Web sur-mesure<\/strong> - WordPress, WooCommerce, Breakdance Builder, et d\u00e9veloppement natif (PHP, HTML\/CSS, JS).\n      <\/li>\n  <li  >    \n          <strong>Design & Graphisme<\/strong> - Ma\u00eetrise des \u00e9cosyst\u00e8mes complets Suite Adobe et Suite Affinity (vectoriel, retouche, mise en page).\n      <\/li>\n<\/ul>\n<\/div>\n<\/div><\/div>\n<\/div><div id=\"Realisations\" class=\"bde-div-37-198 bde-div\">\n  \n  \n\t\n\n\n\n<h2 class=\"bde-heading-37-200 bde-heading\">\nQuelques r\u00e9alisations \u2794\n<\/h2><div class=\"bde-text-37-217 bde-text\">\nD\u00e9couvrez une s\u00e9lection de projets alliant ing\u00e9nierie produit, cr\u00e9ation digitale et identit\u00e9 de marque. Chaque r\u00e9alisation est le fruit d'une d\u00e9marche sur-mesure.\n<\/div><div class=\"bde-advanced-tabs-37-201 bde-advanced-tabs\">\n\n\n        \n      <select aria-label=\"Content tabs\" class=\"bde-tabs__select js-tab-select\">\n      \n              <option value=\"tab-bde-advanced-tabs-37-201-1\" data-value=\"1\">\n          Design \/ Ing\u00e9nierie Produit\n        <\/option>\n              <option value=\"tab-bde-advanced-tabs-37-201-2\" data-value=\"2\">\n          Web Design\n        <\/option>\n              <option value=\"tab-bde-advanced-tabs-37-201-3\" data-value=\"3\">\n          Graphisme\n        <\/option>\n          <\/select>\n  \n  \n  <div class=\"bde-tabs__tabslist-container bde-tabs__tabslist-container--dropdown is-horizontal js-tabs-container\">\n    <div class=\"bde-tabs__tabslist bde-tabs__tabslist--tabs js-tablist\" role=\"tablist\" aria-label=\"Content tabs\" aria-orientation=\"horizontal\" data-tabs-id=\"bde-advanced-tabs-37-201\">\n      \n              <button role=\"tab\" aria-selected=\"false\" class=\"bde-tabs__tab js-tab\" aria-controls=\"tab-panel-bde-advanced-tabs-37-201-1\" id=\"tab-bde-advanced-tabs-37-201-1\" data-value=\"1\">\n                    <span class=\"bde-tabs__tab-title\">Design \/ Ing\u00e9nierie Produit<\/span>\n        <\/button>\n              <button role=\"tab\" aria-selected=\"false\" class=\"bde-tabs__tab js-tab\" aria-controls=\"tab-panel-bde-advanced-tabs-37-201-2\" id=\"tab-bde-advanced-tabs-37-201-2\" data-value=\"2\">\n                    <span class=\"bde-tabs__tab-title\">Web Design<\/span>\n        <\/button>\n              <button role=\"tab\" aria-selected=\"false\" class=\"bde-tabs__tab js-tab\" aria-controls=\"tab-panel-bde-advanced-tabs-37-201-3\" id=\"tab-bde-advanced-tabs-37-201-3\" data-value=\"3\">\n                    <span class=\"bde-tabs__tab-title\">Graphisme<\/span>\n        <\/button>\n          <\/div>\n  <\/div>\n\n<div class=\"bde-tabs-content-container\">\n  <div class=\"bde-advanced-tabs-content-37-202 bde-advanced-tabs-content\"><div tabindex=\"0\" role=\"tabpanel\" class=\"bde-tabs__panel js-panel\" id=\"\" aria-labelledby=\"\">\r\n  <div class=\"bde-tabs__panel-content\">\r\n    <div class=\"bde-grid-37-219 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-218 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-227 bde-heading\">\nDesign Produit et ing\u00e9nierie<br>\n<\/h4><div class=\"bde-text-37-228 bde-text\">\nConception de produits physiques techniques, durables et r\u00e9parables. Sp\u00e9cialis\u00e9 dans les textiles performants et l'innovation \u00e9co-responsable, je poss\u00e8de une forte expertise en \u00c9quipements de Protection Individuelle (EPI), forg\u00e9e aupr\u00e8s de r\u00e9f\u00e9rences du secteur (Courant, Petzl, Parade).\n<\/div><div class=\"bde-text-37-231 bde-text\">\nSensibilit\u00e9 & Expertise\n<\/div><div class=\"bde-div-37-233 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-230 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-232 bde-text\">\n CAO \/ DAO \n<\/div>\n<\/div><div class=\"bde-div-37-234 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-235 bde-text\">\nConception\n<\/div>\n<\/div><div class=\"bde-div-37-236 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-237 bde-text\">\nEPI et Normes\n<\/div>\n<\/div><div class=\"bde-div-37-238 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-239 bde-text\">\nM\u00e9canique\n<\/div>\n<\/div><div class=\"bde-div-37-240 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-241 bde-text\">\nDesign\n<\/div>\n<\/div><div class=\"bde-div-37-242 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-243 bde-text\">\nTechPack\n<\/div>\n<\/div><div class=\"bde-div-37-244 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-245 bde-text\">\nInnovation\n<\/div>\n<\/div><div class=\"bde-div-37-246 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-247 bde-text\">\nPlastique\n<\/div>\n<\/div><div class=\"bde-div-37-248 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-249 bde-text\">\nTextile\n<\/div>\n<\/div><div class=\"bde-div-37-250 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-251 bde-text\">\nM\u00e9tallurgie\n<\/div>\n<\/div><div class=\"bde-div-37-252 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-253 bde-text\">\nEconomie Circulaire\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-37-254 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-255 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Petzl-Expert.webp\" alt=\"Sac Petzl Expert\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Petzl-Expert.webp 592w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Petzl-Expert-271x300.webp 271w\" sizes=\"(max-width: 592px) 100vw, 592px\"><h3 class=\"bde-heading-37-256 bde-heading\">\nSacs PETZL Expert\n<\/h3><div class=\"bde-text-37-257 bde-text\">\nD\u00e9velopp\u00e9 quand j'\u00e9tais Ing\u00e9nieur Textile chez PETZL, ce sac technique est innovant dans son usage (architecture asym\u00e9trique (2\/3 - 1\/3) \/ volet ext\u00e9rieur pour le mat\u00e9riel critique (mousquetons, longes...) \/ syst\u00e8me de rabat qui garde le dos du porteur propre.)\n<\/div>\n<\/div><div class=\"bde-div-37-258 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-259 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Beal-MadMax.webp\" alt=\"Sac Beal MadMax\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Beal-MadMax.webp 771w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Beal-MadMax-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Beal-MadMax-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Sac-Beal-MadMax-768x768.webp 768w\" sizes=\"(max-width: 771px) 100vw, 771px\"><h3 class=\"bde-heading-37-260 bde-heading\">\nSacs BEAL MadMax\n<\/h3><div class=\"bde-text-37-261 bde-text\">\nCon\u00e7u pour le compte de BEAL via mon partenaire \/ fabricant de sac. J'ai pu intervenir sur la conception de la structure \/ du chassis, ainsi que sur le design complet du sac. La partie graphique du projet a \u00e9t\u00e9 ajout\u00e9 en interne chez BEAL.\n<\/div>\n<\/div><div class=\"bde-div-37-262 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-263 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle.webp\" alt=\"Beal buckle\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle.webp 1601w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle-768x768.webp 768w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Beal-buckle-1536x1536.webp 1536w\" sizes=\"(max-width: 1601px) 100vw, 1601px\"><h3 class=\"bde-heading-37-264 bde-heading\">\nBoucle forme G pour les produits BEAL\n<\/h3><div class=\"bde-text-37-265 bde-text\">\nJ'ai eu l'opportunit\u00e9 de concevoir, designer et d\u00e9velopper une boucle en forme de G pour la soci\u00e9t\u00e9 BEAL, pr\u00eate pour sa production.\n<\/div>\n<\/div><div class=\"bde-div-37-266 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-267 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Bag-Cycle.webp\" alt=\"Bag Cycle\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Bag-Cycle.webp 1121w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Bag-Cycle-300x284.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Bag-Cycle-1024x969.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Bag-Cycle-768x727.webp 768w\" sizes=\"(max-width: 1121px) 100vw, 1121px\"><h3 class=\"bde-heading-37-268 bde-heading\">\nSac 2 en 1 pour cyclistes urbains\n<\/h3><div class=\"bde-text-37-269 bde-text\">\nUn pr\u00e9-projet fait avec la marque Lecyclo.com. Le but \u00e9tait de concevoir un produit au design atypique, innovant, \u00e9co-responsable et avec un usage 2 en 1 sans perte de confort.\n<\/div>\n<\/div><div class=\"bde-div-37-270 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-271 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Honos-Carabiner.webp\" alt=\"Honos Carabiner\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Honos-Carabiner.webp 811w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Honos-Carabiner-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Honos-Carabiner-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Honos-Carabiner-768x768.webp 768w\" sizes=\"(max-width: 811px) 100vw, 811px\"><h3 class=\"bde-heading-37-272 bde-heading\">\nMousqueton Porte outils\n<\/h3><div class=\"bde-text-37-273 bde-text\">\nCon\u00e7u lors de mon exp\u00e9rience salarial chez COURANT, j'ai \u00e9t\u00e9 en charge de d\u00e9velopper ce mousqueton de son id\u00e9e jusqu'\u00e0 son industrialisation.\n<\/div>\n<\/div><div class=\"bde-div-37-274 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-275 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/ODIN-Carabiner.webp\" alt=\"ODIN Carabiner\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/ODIN-Carabiner.webp 892w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/ODIN-Carabiner-300x257.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/ODIN-Carabiner-768x659.webp 768w\" sizes=\"(max-width: 892px) 100vw, 892px\"><h3 class=\"bde-heading-37-276 bde-heading\">\nMousqueton Semi-Permanent\n<\/h3><div class=\"bde-text-37-277 bde-text\">\nLors de mon exp\u00e9rience chez COURANT, j'ai pu d\u00e9velopper un mousqueton semi-permanent, rond, et \u00e0 ouverture atypique lat\u00e9rale.\n<\/div>\n<\/div><div class=\"bde-div-37-278 bde-div bg-orange\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-283 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-282 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- 3 carr\u00e9s de projets -->\n  <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\n  <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"\/>\n  <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"\/>\n  <!-- Le symbole + en bas \u00e0 droite -->\n  <line x1=\"17.5\" y1=\"14\" x2=\"17.5\" y2=\"21\"\/>\n  <line x1=\"14\" y1=\"17.5\" x2=\"21\" y2=\"17.5\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-280 bde-heading\">\nEt bien d'autres projets\n<\/h3><div class=\"bde-text-37-281 bde-text\">\nDe l'\u00e9quipement EPI \u00e0 l'objet du quotidien, j'accompagne de nombreuses entreprises dans leur d\u00e9veloppement. Et si la prochaine belle r\u00e9alisation \u00e9tait la v\u00f4tre ?\n<\/div><a class=\"bde-text-link-37-347 bde-text-link breakdance-link\" href=\"#tarif\" target=\"_self\" data-type=\"url\">\n  Parler de mon projet \u2794\n\n<\/a>\n<\/div>\n<\/div><div class=\"bde-div-37-342 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-343 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-344 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Corps du cadenas -->\n  <rect x=\"5\" y=\"11\" width=\"14\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n  <!-- Anse du cadenas -->\n  <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n  <!-- Petit trou de serrure (optionnel, pour le d\u00e9tail) -->\n  <path d=\"M12 15v2\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><div class=\"bde-text-37-345 bde-text\">\nPour des raisons \u00e9videntes de confidentialit\u00e9 industrielle et strat\u00e9gique, une partie de mes travaux ne peut \u00eatre d\u00e9voil\u00e9e ici. Pour d\u00e9couvrir des projets d\u00e9monstratifs suppl\u00e9mentaires ou \u00e9changer sur vos besoins sp\u00e9cifiques, <a id=\"lien-solliciter\" href=\"#contact\" >n'h\u00e9sitez pas \u00e0 me solliciter<\/a>.\n<\/div>\n<\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div><div class=\"bde-advanced-tabs-content-37-284 bde-advanced-tabs-content\"><div tabindex=\"0\" role=\"tabpanel\" class=\"bde-tabs__panel js-panel\" id=\"\" aria-labelledby=\"\">\r\n  <div class=\"bde-tabs__panel-content\">\r\n    <div class=\"bde-grid-37-285 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-286 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-287 bde-heading\">\nWeb Design<br>\n<\/h4><div class=\"bde-text-37-288 bde-text\">\nConception d'\u00e9cosyst\u00e8mes digitaux sur-mesure, performants et centr\u00e9s sur vos utilisateurs. Sp\u00e9cialis\u00e9 dans le design d'interfaces (UX\/UI) et l'\u00e9co-conception web, je d\u00e9veloppe des sites vitrines et e-commerce qui allient esth\u00e9tisme, accessibilit\u00e9 technique et faible empreinte carbone.\n<\/div><div class=\"bde-text-37-289 bde-text\">\nSensibilit\u00e9 & Expertise\n<\/div><div class=\"bde-div-37-290 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-291 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-292 bde-text\">\nUX \/ UI Design\n<\/div>\n<\/div><div class=\"bde-div-37-293 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-294 bde-text\">\n\u00c9co-conception Web\n<\/div>\n<\/div><div class=\"bde-div-37-295 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-296 bde-text\">\nWordpress\n<\/div>\n<\/div><div class=\"bde-div-37-297 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-298 bde-text\">\nBreakdance\n<\/div>\n<\/div><div class=\"bde-div-37-299 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-300 bde-text\">\nCustom PHP\/JS\/CSS\n<\/div>\n<\/div><div class=\"bde-div-37-301 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-302 bde-text\">\nSEO\n<\/div>\n<\/div><div class=\"bde-div-37-303 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-304 bde-text\">\nSEO LLM\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-37-313 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-314 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_.webp\" alt=\"lanslo.fr\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_.webp 1870w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_-300x146.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_-1024x497.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_-768x373.webp 768w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lanslo.fr_-1536x745.webp 1536w\" sizes=\"(max-width: 1870px) 100vw, 1870px\"><h3 class=\"bde-heading-37-315 bde-heading\">\nlanslo.fr\n<\/h3><div class=\"bde-text-37-316 bde-text\">\nLanslo est une marque avant gardiste dans le domaine de la maroquinerie, avec une vision radicalement ancr\u00e9e dans l'\u00e9conomie circulaire. <br><br>Etant \u00e9galement co-fondateur de cette marque, j'ai d\u00e9velopp\u00e9 l'ensemble du site vitrine avec un syst\u00e8me e-commerce pr\u00eat \u00e0 basculer, un syst\u00e8me membre unique, et une zone \"backstage\" collaboratif entre les membres et la marque, 100% transparent.\n<\/div>\n<\/div><div class=\"bde-div-37-317 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-318 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_.webp\" alt=\"lalchimiedesbulles.fr\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_.webp 1875w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_-300x145.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_-1024x495.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_-768x371.webp 768w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/lalchimiedesbulles.fr_-1536x742.webp 1536w\" sizes=\"(max-width: 1875px) 100vw, 1875px\"><h3 class=\"bde-heading-37-319 bde-heading\">\nlalchimiedes<br>bulles.fr\n<\/h3><div class=\"bde-text-37-320 bde-text\">\nCon\u00e7u pour le compte d'une graphiste ind\u00e9pendante. Elle souhaitait un site vitrine int\u00e9ractif et unique, envelopp\u00e9 dans son univers graphique.\n<\/div>\n<\/div><div class=\"bde-div-37-321 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-322 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design.webp\" alt=\"atmoz.design\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design.webp 1885w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design-300x139.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design-1024x475.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design-768x356.webp 768w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/atmoz.design-1536x713.webp 1536w\" sizes=\"(max-width: 1885px) 100vw, 1885px\"><h3 class=\"bde-heading-37-323 bde-heading\">\natmoz.design\n<\/h3><div class=\"bde-text-37-324 bde-text\">\nLe site sur lequel vous naviguez a \u00e9t\u00e9 con\u00e7u par mes soins. L'id\u00e9e \u00e9tait de faire un site simple, accessible, performant, et \u00e9co-responsable.\n<\/div>\n<\/div><div class=\"bde-div-37-337 bde-div bg-petrol\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-338 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-339 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Fen\u00eatre de navigateur \/ Interface web -->\n  <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" ry=\"2\"\/>\n  <!-- Barre de navigation du site web -->\n  <line x1=\"3\" y1=\"8\" x2=\"21\" y2=\"8\"\/>\n  <!-- Symbole + central pour dire \"Plus de projets\" -->\n  <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"\/>\n  <line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-340 bde-heading\">\nEt bien d'autres sites\n<\/h3><div class=\"bde-text-37-341 bde-text\">\nDu site vitrine sur-mesure \u00e0 la plateforme e-commerce complexe, je vous accompagne dans leur d\u00e9veloppement digital. Et si la prochaine belle r\u00e9alisation \u00e9tait la v\u00f4tre ?\n<\/div><a class=\"bde-text-link-37-346 bde-text-link breakdance-link\" href=\"#tarif\" target=\"_self\" data-type=\"url\">\n  Parler de mon projet \u2794\n\n<\/a>\n<\/div>\n<\/div><div class=\"bde-div-37-213 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-216 bde-div bg-petrol\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-215 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Corps du cadenas -->\n  <rect x=\"5\" y=\"11\" width=\"14\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n  <!-- Anse du cadenas -->\n  <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n  <!-- Petit trou de serrure (optionnel, pour le d\u00e9tail) -->\n  <path d=\"M12 15v2\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><div class=\"bde-text-37-214 bde-text\">\nPour des raisons \u00e9videntes de confidentialit\u00e9 industrielle et strat\u00e9gique, une partie de mes travaux ne peut \u00eatre d\u00e9voil\u00e9e ici. Pour d\u00e9couvrir des projets d\u00e9monstratifs suppl\u00e9mentaires ou \u00e9changer sur vos besoins sp\u00e9cifiques, <a id=\"lien-solliciterB\" href=\"#contact\" >n'h\u00e9sitez pas \u00e0 me solliciter<\/a>.\n<\/div>\n<\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div><div class=\"bde-advanced-tabs-content-37-352 bde-advanced-tabs-content\"><div tabindex=\"0\" role=\"tabpanel\" class=\"bde-tabs__panel js-panel\" id=\"\" aria-labelledby=\"\">\r\n  <div class=\"bde-tabs__panel-content\">\r\n    <div class=\"bde-grid-37-353 bde-grid\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-354 bde-div\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-355 bde-heading\">\nIdentit\u00e9 de Marque, Packaging & \u00c9co-Branding<br>\n<\/h4><div class=\"bde-text-37-356 bde-text\">\nConception d'identit\u00e9s visuelles fortes, coh\u00e9rentes et m\u00e9morables pour votre entreprise. Sp\u00e9cialis\u00e9 dans la cr\u00e9ation de logos, le design de packaging et l'\u00e9co-branding, je fa\u00e7onne l'image de votre marque en privil\u00e9giant une communication engag\u00e9e, des supports durables et des encres responsables.\n<\/div><div class=\"bde-text-37-357 bde-text\">\nSensibilit\u00e9 & Expertise\n<\/div><div class=\"bde-div-37-358 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-359 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-360 bde-text\">\nDirection Artistique\n<\/div>\n<\/div><div class=\"bde-div-37-361 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-362 bde-text\">\nIdentit\u00e9 Visuelle & Logos\n<\/div>\n<\/div><div class=\"bde-div-37-363 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-364 bde-text\">\nDesign de Packaging\n<\/div>\n<\/div><div class=\"bde-div-37-365 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-366 bde-text\">\n\u00c9co-Branding & Print\n<\/div>\n<\/div><div class=\"bde-div-37-367 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-368 bde-text\">\nChartes Graphiques\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-37-381 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-382 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite.webp\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite.webp 1658w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite-768x768.webp 768w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LANSLO-Identite-1536x1536.webp 1536w\" sizes=\"(max-width: 1658px) 100vw, 1658px\"><h3 class=\"bde-heading-37-383 bde-heading\">\nBranding LANSLO\n<\/h3><div class=\"bde-text-37-384 bde-text\">\nCo-d\u00e9velopp\u00e9 avec Kilian Garry, Co-fondateur de la marque premium LANSLO, nous avons travaill\u00e9 sur une idendit\u00e9 forte, volontairement disruptive, et engageante.\n<\/div>\n<\/div><div class=\"bde-div-37-385 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-386 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LOLYMP-IDENTITE.webp\" alt=\"Branding salle de sport\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LOLYMP-IDENTITE.webp 842w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LOLYMP-IDENTITE-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LOLYMP-IDENTITE-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/LOLYMP-IDENTITE-768x768.webp 768w\" sizes=\"(max-width: 842px) 100vw, 842px\"><h3 class=\"bde-heading-37-387 bde-heading\">\nBranding L'OLYMP\n<\/h3><div class=\"bde-text-37-388 bde-text\">\nUn branding pour une salle de sport qui se voulait humaine et original, inspir\u00e9 du sport antique grec.\n<\/div>\n<\/div><div class=\"bde-div-37-389 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-390 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite.webp\" alt=\"RhinoEvac branding\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite.webp 1387w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/RhinoEVAC-Identite-768x769.webp 768w\" sizes=\"(max-width: 1387px) 100vw, 1387px\"><h3 class=\"bde-heading-37-391 bde-heading\">\nBranding RhinoEvac\n<\/h3><div class=\"bde-text-37-392 bde-text\">\nDans le cas d'une refonte d'identit\u00e9, pour une marque d'\u00e9quipements \u00e0 destination des pompiers RhiniEvac, j'ai donc con\u00e7u une toute nouvelle ADN, sans perdre le \"caract\u00e8re\" souhait\u00e9.\n<\/div>\n<\/div><div class=\"bde-div-37-393 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-394 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz.webp\" alt=\"identit\u00e9 visuelle AtmOz\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz.webp 1387w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Branding-AtmOz-768x768.webp 768w\" sizes=\"(max-width: 1387px) 100vw, 1387px\"><h3 class=\"bde-heading-37-395 bde-heading\">\nBranding AtmOz\n<\/h3><div class=\"bde-text-37-396 bde-text\">\nCr\u00e9ation de l'identit\u00e9 visuelle compl\u00e8te pour AtmOz. \n<\/div>\n<\/div><div class=\"bde-div-37-397 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-398 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette.webp\" alt=\"Logo Photographe\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette.webp 1387w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/Logo-regard-noisette-768x768.webp 768w\" sizes=\"(max-width: 1387px) 100vw, 1387px\"><h3 class=\"bde-heading-37-399 bde-heading\">\nLogotype Simple pour photographe\n<\/h3><div class=\"bde-text-37-400 bde-text\">\nLogotype pour une photographe.\n<\/div>\n<\/div><div class=\"bde-div-37-401 bde-div\">\n              \n  \n  \n\t\n\n  <div class=\"section-background-overlay\"><\/div>\n\n\n<img decoding=\"async\" class=\"bde-image2-37-402 bde-image2\" src=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite.webp\" alt=\"Alain Glauser Identit\u00e9 Visuelle\" loading=\"lazy\" srcset=\"https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite.webp 1387w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite-300x300.webp 300w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite-1024x1024.webp 1024w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite-150x150.webp 150w, https:\/\/atmoz.design\/wp-content\/uploads\/2026\/06\/AG-Identite-768x768.webp 768w\" sizes=\"(max-width: 1387px) 100vw, 1387px\"><h3 class=\"bde-heading-37-403 bde-heading\">\nBranding Pour AG Etudes Conseils Expertise\n<\/h3><div class=\"bde-text-37-404 bde-text\">\nBranding pour une soci\u00e9t\u00e9 de conseil dans le domaine BTP des hydrocarbures.\n<\/div>\n<\/div><div class=\"bde-div-37-405 bde-div bg-orange\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-406 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-407 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"48\" height=\"48\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Plume vectorielle -->\n  <path d=\"M12 19l7-7 3 3-7 7-3-3z\"\/>\n  <path d=\"M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z\"\/>\n  <path d=\"M2 2l7.586 7.586\"\/>\n  <circle cx=\"11\" cy=\"11\" r=\"2\"\/>\n  <!-- Symbole + en haut \u00e0 droite -->\n  <line x1=\"18\" y1=\"3\" x2=\"24\" y2=\"3\"\/>\n  <line x1=\"21\" y1=\"0\" x2=\"21\" y2=\"6\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><h3 class=\"bde-heading-37-408 bde-heading\">\nEt bien d'autres projets\n<\/h3><div class=\"bde-text-37-409 bde-text\">\nDe l'\u00e9quipement EPI \u00e0 l'objet du quotidien, j'accompagne de nombreuses entreprises dans leur d\u00e9veloppement. Et si la prochaine belle r\u00e9alisation \u00e9tait la v\u00f4tre ?\n<\/div><a class=\"bde-text-link-37-410 bde-text-link breakdance-link\" href=\"#tarif\" target=\"_self\" data-type=\"url\">\n  Parler de mon projet \u2794\n\n<\/a>\n<\/div>\n<\/div><div class=\"bde-div-37-411 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-412 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-code-block-37-413 bde-code-block\">\n\n  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"#F4F6F7\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n  <!-- Corps du cadenas -->\n  <rect x=\"5\" y=\"11\" width=\"14\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n  <!-- Anse du cadenas -->\n  <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n  <!-- Petit trou de serrure (optionnel, pour le d\u00e9tail) -->\n  <path d=\"M12 15v2\"\/>\n<\/svg>\n\n\n<\/div>\n<\/div><div class=\"bde-text-37-414 bde-text\">\nPour des raisons \u00e9videntes de confidentialit\u00e9 industrielle et strat\u00e9gique, une partie de mes travaux ne peut \u00eatre d\u00e9voil\u00e9e ici. Pour d\u00e9couvrir des projets d\u00e9monstratifs suppl\u00e9mentaires ou \u00e9changer sur vos besoins sp\u00e9cifiques, <a id=\"lien-solliciterC\" href=\"#contact\" >n'h\u00e9sitez pas \u00e0 me solliciter<\/a>.\n<\/div>\n<\/div>\r\n  <\/div>\r\n<\/div>\r\n<\/div>\n<\/div>\n\n\n<\/div>\n<\/div><\/div>\n<\/section><section id=\"tarif\" class=\"bde-section-37-415 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h2 class=\"bde-heading-37-422 bde-heading\">\nTarification & Simulation\n<\/h2><div class=\"bde-shortcode-37-417 bde-shortcode\">        <!-- INJECTION DES STYLES CSS PERSONNALIS\u00c9S STRICTEMENT LIMIT\u00c9S AU CONTENEUR DU SIMULATEUR -->\r\n        <style id=\"atmoz-sim-root-variables-and-design\">\r\n            \/* Variables isol\u00e9es sur la classe du simulateur *\/\r\n            .atmoz-sim {\r\n                --atmoz-accent: #D95427;\r\n                --atmoz-petrol: #007D8A;\r\n                --atmoz-charcoal: #1A202C;\r\n                --atmoz-bg: #FCFDFD;\r\n                --atmoz-grey-light: #F4F6F7;\r\n            }\r\n\r\n            \/* Code CSS personnalis\u00e9 configur\u00e9 en administration *\/\r\n            .atmoz-sim {\r\n    --atmoz-petrol: #0094b6;\r\n    --atmoz-charcoal: #1A202C;\r\n    --atmoz-bg: #FCFDFD;\r\n    --atmoz-grey-light: #F4F6F7;\r\n\r\n    font-family: 'Oxygen', sans-serif;\r\n    color: var(--atmoz-charcoal);\r\n    max-width: 100%;\r\n    margin: 0px;\r\n    padding: 0px;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.atmoz-sim .atmoz-sim-grid {\r\n    display: grid;\r\n    grid-template-columns: 1.5fr 1fr;\r\n    gap: 40px;\r\n    align-items: start;\r\n}\r\n\r\n@media (max-width: 900px) {\r\n    .atmoz-sim .atmoz-sim-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 30px;\r\n    }\r\n}\r\n\r\n.atmoz-sim .atmoz-sim-heading {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    font-size: 1rem;\r\n    margin-bottom: 20px;\r\n    color: var(--atmoz-accent);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-weight: bold;\r\n}\r\n\r\n.atmoz-sim .atmoz-sim-heading span {\r\n    color: var(--atmoz-accent);\r\n    font-weight: bold;\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-group {\r\n    display: grid;\r\n    grid-template-columns: repeat(2, 1fr);\r\n    gap: 16px;\r\n    margin-bottom: 40px;\r\n}\r\n\r\n@media (max-width: 600px) {\r\n    .atmoz-sim .atmoz-radio-group {\r\n        grid-template-columns: 1fr;\r\n    }\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-card {\r\n    border: 2px solid var(--atmoz-charcoal);\r\n    padding: 24px;\r\n    background: var(--atmoz-bg);\r\n    cursor: pointer;\r\n    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.25);\r\n    position: relative;\r\n    user-select: none;\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-card:hover {\r\n    background: var(--atmoz-grey-light);\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-card.active {\r\n    border-color: var(--atmoz-accent);\r\n    background: var(--atmoz-grey-light);\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-card input[type=\"radio\"] {\r\n    display: none;\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-title {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-weight: 700;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    font-size: 1.1rem;\r\n    margin: 0 0 8px 0;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n}\r\n\r\n.atmoz-sim .atmoz-radio-desc {\r\n    font-size: 0.9rem;\r\n    line-height: 1.4;\r\n    color: #555;\r\n    margin: 0;\r\n}\r\n\r\n.atmoz-sim .atmoz-options-section {\r\n    margin-bottom: 40px;\r\n    display: none;\r\n}\r\n\r\n.atmoz-sim .atmoz-options-section.visible {\r\n    display: block;\r\n    animation: atmozFadeIn 0.35s ease;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 12px;\r\n}\r\n\r\n\/* Alignement \u00e9tir\u00e9 pour loger le bouton d'aide noir sur toute la hauteur *\/\r\n.atmoz-sim .atmoz-checkbox-wrapper {\r\n    display: flex;\r\n    align-items: stretch;\r\n    justify-content: space-between;\r\n    border: 2px solid var(--atmoz-charcoal);\r\n    padding: 0;\r\n    background: var(--atmoz-bg);\r\n    cursor: pointer;\r\n    user-select: none;\r\n    transition: all 0.2s ease;\r\n    overflow: hidden;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-wrapper:hover {\r\n    background: var(--atmoz-grey-light);\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-wrapper.checked {\r\n    border-color: var(--atmoz-charcoal);\r\n    background: var(--atmoz-grey-light);\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-wrapper input[type=\"checkbox\"] {\r\n    display: none;\r\n}\r\n\r\n\/* Zone interne blanche contenant les textes et le prix *\/\r\n.atmoz-sim .atmoz-checkbox-content {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-grow: 1;\r\n    padding: 14px 20px;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-left {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 14px;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-custom {\r\n    width: 18px;\r\n    height: 18px;\r\n    border: 2px solid var(--atmoz-charcoal);\r\n    background: #FFF;\r\n    position: relative;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-wrapper.checked .atmoz-checkbox-custom::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 2px;\r\n    left: 2px;\r\n    right: 2px;\r\n    bottom: 2px;\r\n    background: var(--atmoz-charcoal);\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-name {\r\n    font-size: 0.95rem;\r\n    font-weight: 500;\r\n}\r\n\r\n.atmoz-sim .atmoz-checkbox-price {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-weight: 700;\r\n    font-size: 0.95rem;\r\n    margin-right: 5px;\r\n}\r\n\r\n\/* Bloc d'aide noir \u00e0 l'extr\u00e9mit\u00e9 droite *\/\r\n.atmoz-sim .atmoz-help-icon {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 48px;\r\n    background: var(--atmoz-charcoal);\r\n    color: #FFFFFF;\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-size: 1.15rem;\r\n    font-weight: bold;\r\n    border-left: 2px solid var(--atmoz-charcoal);\r\n    cursor: help;\r\n    flex-shrink: 0;\r\n    margin-left: 0;\r\n    border-radius: 0;\r\n    transition: background-color 0.2s ease;\r\n}\r\n\r\n.atmoz-sim .atmoz-help-icon:hover,\r\n.atmoz-sim .atmoz-help-icon.active {\r\n    background: var(--atmoz-accent);\r\n    color: #FFFFFF;\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-box {\r\n    border: 2px solid var(--atmoz-charcoal);\r\n    background: var(--atmoz-grey-light);\r\n    padding: 30px;\r\n    position: sticky;\r\n    top: 100px;\r\n    box-sizing: border-box;\r\n    background-image: radial-gradient(rgba(26, 32, 44, 0.08) 1px, transparent 1px);\r\n    background-size: 15px 15px;\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-title {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-size: 1.2rem;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    margin-top: 0;\r\n    margin-bottom: 25px;\r\n    border-bottom: 2px solid var(--atmoz-charcoal);\r\n    padding-bottom: 12px;\r\n    color: var(--atmoz-accent);\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-row {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 15px;\r\n    font-size: 1rem;\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-label {\r\n    font-weight: 500;\r\n    color: #555;\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-value {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-weight: 700;\r\n}\r\n\r\n.atmoz-sim .atmoz-summary-total {\r\n    border-top: 2px dashed rgba(26, 32, 44, 0.2);\r\n    margin-top: 25px;\r\n    padding-top: 25px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: baseline;\r\n}\r\n\r\n.atmoz-sim .atmoz-total-label {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-weight: bold;\r\n    text-transform: uppercase;\r\n    letter-spacing: 1px;\r\n    font-size: 1.1rem;\r\n}\r\n\r\n.atmoz-sim .atmoz-total-price {\r\n    font-family: 'Oxygen Mono', monospace;\r\n    font-size: 1.8rem;\r\n    font-weight: 700;\r\n    color: var(--atmoz-accent);\r\n}\r\n\r\n.atmoz-sim .atmoz-btn {\r\n    display: block;\r\n    width: 100%;\r\n    font-family: 'Oxygen Mono', monospace;\r\n    text-align: center;\r\n    font-weight: bold;\r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    padding: 16px 20px;\r\n    box-sizing: border-box;\r\n    border: 2px solid var(--atmoz-charcoal);\r\n    border-radius: 0;\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n    text-decoration: none;\r\n    font-size: 0.95rem;\r\n    margin-top: 25px;\r\n}\r\n\r\n.atmoz-sim .atmoz-btn-primary {\r\n    background: var(--atmoz-accent);\r\n    color: #FFFFFF;\r\n    border-color: var(--atmoz-accent);\r\n}\r\n\r\n.atmoz-sim .atmoz-btn-primary:hover {\r\n    background: var(--atmoz-charcoal);\r\n    color: #FFFFFF;\r\n    border-color: var(--atmoz-charcoal);\r\n}\r\n\r\n.atmoz-sim .atmoz-btn-secondary {\r\n    background: transparent;\r\n    color: var(--atmoz-charcoal);\r\n    font-size: 0.8rem;\r\n    padding: 10px 15px;\r\n    letter-spacing: 1px;\r\n    margin-top: 15px;\r\n    border-color: rgba(26, 32, 44, 0.4);\r\n}\r\n\r\n.atmoz-sim .atmoz-btn-secondary:hover {\r\n    background: rgba(26, 32, 44, 0.05);\r\n    border-color: var(--atmoz-charcoal);\r\n}\r\n\r\n.atmoz-sim .atmoz-disclaimer-text {\r\n    font-size: 0.75rem;\r\n    line-height: 1.4;\r\n    color: #666;\r\n    margin: 15px 0 0 0;\r\n    text-align: justify;\r\n    font-style: italic;\r\n}\r\n\r\n@keyframes atmozFadeIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(10px);\r\n    }\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}        <\/style>\r\n\r\n        <!-- STRUCTURE HTML FRONT-END -->\r\n        <div class=\"atmoz-sim\" id=\"atmoz-sim-container\">\r\n            <div class=\"atmoz-sim-grid\">\r\n                \r\n                <!-- COLONNE GAUCHE : S\u00c9LECTION DES \u00c9TAPES -->\r\n                <div class=\"atmoz-sim-steps\">\r\n                    \r\n                    <!-- \u00c9TAPE 1 : CHOIX DU PROJET -->\r\n                    <div class=\"atmoz-sim-heading\">\r\n                        <span>01.<\/span> Select your project pillar                    <\/div>\r\n                    \r\n                    <div class=\"atmoz-radio-group\">\r\n                        <label class=\"atmoz-radio-card active\">\r\n                            <input type=\"radio\" name=\"project_type\" value=\"produit\" checked \/>\r\n                            <div class=\"atmoz-radio-title\">Product<\/div>\r\n                            <p class=\"atmoz-radio-desc\">Engineering, mechanics, technical textiles and eco-design of your physical products.<\/p>\r\n                        <\/label>\r\n                        \r\n                        <label class=\"atmoz-radio-card\">\r\n                            <input type=\"radio\" name=\"project_type\" value=\"web\" \/>\r\n                            <div class=\"atmoz-radio-title\">Web & Digital<\/div>\r\n                            <p class=\"atmoz-radio-desc\">Creation of vitrine and e-commerce websites, UX\/UI, and high-performance eco-design.<\/p>\r\n                        <\/label>\r\n                        \r\n                        <label class=\"atmoz-radio-card\">\r\n                            <input type=\"radio\" name=\"project_type\" value=\"graphisme\" \/>\r\n                            <div class=\"atmoz-radio-title\">Graphics<\/div>\r\n                            <p class=\"atmoz-radio-desc\">Visual brand identity, logos, style guides, eco-branding, and sustainable packaging.<\/p>\r\n                        <\/label>\r\n                        \r\n                        <label class=\"atmoz-radio-card\">\r\n                            <input type=\"radio\" name=\"project_type\" value=\"global\" \/>\r\n                            <div class=\"atmoz-radio-title\">Global Project<\/div>\r\n                            <p class=\"atmoz-radio-desc\">The ultimate alliance of physical engineering and digital for a complete project from A to Z.<\/p>\r\n                        <\/label>\r\n                    <\/div>\r\n\r\n                    <!-- \u00c9TAPE 2 : S\u00c9LECTION DES OPTIONS (DYNAMIQUE) -->\r\n                    <div class=\"atmoz-sim-heading\">\r\n                        <span>02.<\/span> Configure your needs                    <\/div>\r\n\r\n                    <!-- Options Pilier Produit -->\r\n                    <div class=\"atmoz-options-section visible\" id=\"options-produit\">\r\n                        <div class=\"atmoz-checkbox-grid\">\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"2500\" data-name=\"Cadrage\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"produit_opt_0\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Cadrage<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 2500 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"\u00c9tude approfondie de votre besoin, analyse fonctionnelle, d\u00e9finition de la ligne directrice et r\u00e9daction du cahier des charges technique.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"4500\" data-name=\"Conception\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"produit_opt_1\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Conception<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 4500 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Architecture produit et conception technique 3D d\u00e9taill\u00e9e sous Autodesk Fusion 360 (CAO solide\/surfacique, ou Illustrator si textile).\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"3500\" data-name=\"D\u00e9veloppement\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"produit_opt_2\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">D\u00e9veloppement<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 3500 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"D\u00e9veloppement du concept, et Prototypage it\u00e9ratif, sourcing des mati\u00e8res \u00e9co-con\u00e7ues\/techniques, essais lab. \/ terrain\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"3500\" data-name=\"Industrialisation\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"produit_opt_3\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Industrialisation<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 3500 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Sourcing et s\u00e9lection des partenaires industriels de production, calcul fin des co\u00fbts, suivi de pr\u00e9-production et lancement de la fabrication.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                    <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Options Pilier Web -->\r\n                    <div class=\"atmoz-options-section\" id=\"options-web\">\r\n                        <div class=\"atmoz-checkbox-grid\">\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"500\" data-name=\"Site Vitrine Simple (Landing Page)\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"web_opt_0\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Site Vitrine Simple (Landing Page)<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 500 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Site vitrine simple, id\u00e9al pour un portfolio par exemple\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"1390\" data-name=\"Site Internet Complet (4-5 pages)\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"web_opt_1\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Site Internet Complet (4-5 pages)<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 1390 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Site complet, id\u00e9al pour PME ou toutes soci\u00e9t\u00e9s souhaitant augmenter sa visibilit\u00e9\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"1990\" data-name=\"Boutique en Ligne (E-commerce)\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"web_opt_2\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Boutique en Ligne (E-commerce)<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 1990 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Boutique en ligne compl\u00e8te avec gestion de panier, paiements s\u00e9curis\u00e9s et catalogue produits dynamique.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"300\" data-name=\"R\u00e9daction + SEO s\u00e9mantique et LLM\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"web_opt_3\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">R\u00e9daction + SEO s\u00e9mantique et LLM<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 300 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"R\u00e9daction optimis\u00e9e pour les moteurs de recherche traditionnels et pour la visibilit\u00e9 sur les IA g\u00e9n\u00e9ratives.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                    <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Options Pilier Graphisme -->\r\n                    <div class=\"atmoz-options-section\" id=\"options-graphisme\">\r\n                        <div class=\"atmoz-checkbox-grid\">\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"450\" data-name=\"Cr\u00e9ation du Logotype\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"graphisme_opt_0\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Cr\u00e9ation du Logotype<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 450 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Recherche et cr\u00e9ation de votre logotype sur-mesure (fichiers vectoriels fournis), incluant la d\u00e9finition de votre palette de couleurs primaires, le choix de vos polices de caract\u00e8res de base et les d\u00e9clinaisons de formats essentiels pour tous vos supports (Web et Print).\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"1300\" data-name=\"Charte Graphique Compl\u00e8te\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"graphisme_opt_1\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Charte Graphique Compl\u00e8te<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 1300 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"\u00c9laboration du guide complet de votre identit\u00e9 visuelle (Brand Guidelines). Comprend la direction artistique globale, les r\u00e8gles d&#039;utilisation de votre logo, la d\u00e9finition des \u00e9l\u00e9ments graphiques secondaires (motifs, ic\u00f4nes, style d&#039;images) et des exemples de mise en situation concrets (r\u00e9seaux sociaux, pr\u00e9sentations).\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"750\" data-name=\"Design de packaging\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"graphisme_opt_2\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Design de packaging<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 750 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"Conception graphique et technique de vos emballages, \u00e9tiquettes, bo\u00eetes ou flacons. Comprend le trac\u00e9 de d\u00e9coupe, l&#039;optimisation visuelle et la mise en conformit\u00e9 technique pour les imprimeurs, pens\u00e9e en parfaite synergie avec les contraintes de votre produit physique.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                            <label class=\"atmoz-checkbox-wrapper\" data-price=\"350\" data-name=\"Supports Print complexes\">\r\n                                    <div class=\"atmoz-checkbox-content\">\r\n                                        <div class=\"atmoz-checkbox-left\">\r\n                                            <input type=\"checkbox\" name=\"atmoz_opts[]\" value=\"graphisme_opt_3\" \/>\r\n                                            <div class=\"atmoz-checkbox-custom\"><\/div>\r\n                                            <span class=\"atmoz-checkbox-name\">Supports Print complexes<\/span>\r\n                                        <\/div>\r\n                                        <span class=\"atmoz-checkbox-price\">+ 350 \u20ac<\/span>\r\n                                    <\/div>\r\n                                                                            <span class=\"atmoz-help-icon\" data-tooltip=\"D\u00e9clinaison de votre identit\u00e9 visuelle sur des supports de communication imprim\u00e9s denses ou techniques (brochure commerciale de plusieurs pages, catalogue de produits, fiches techniques d&#039;ing\u00e9nierie ou rapport d&#039;activit\u00e9 annuel). Fichiers pr\u00eats pour l&#039;impression fournis.\">?<\/span>\r\n                                                                    <\/label>\r\n                                                    <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n                <!-- COLONNE DROITE : PANNEAU DE R\u00c9SUM\u00c9 DYNAMIQUE -->\r\n                <div class=\"atmoz-sim-summary\">\r\n                    <div class=\"atmoz-summary-box\">\r\n                        <h3 class=\"atmoz-summary-title\">Project Estimate<\/h3>\r\n                        \r\n                        <div class=\"atmoz-summary-row\">\r\n                            <span class=\"atmoz-summary-label\">Project Type:<\/span>\r\n                            <span class=\"atmoz-summary-value\" id=\"summary-project-type\">Product<\/span>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"atmoz-summary-row\">\r\n                            <span class=\"atmoz-summary-label\">Average duration:<\/span>\r\n                            <span class=\"atmoz-summary-value\" id=\"summary-duration\">6 mois \u00e0 1 an<\/span>\r\n                        <\/div>\r\n\r\n                        <!-- Lignes Relatives au TJM (si configur\u00e9 en admin sup\u00e9rieur \u00e0 0) -->\r\n                                                    <div class=\"atmoz-summary-row atmoz-tjm-row\">\r\n                                <span class=\"atmoz-summary-label\">Average Day Rate:<\/span>\r\n                                <span class=\"atmoz-summary-value\">500 \u20ac \/ day<\/span>\r\n                            <\/div>\r\n                            <div class=\"atmoz-summary-row atmoz-days-row\" style=\"display: none;\" id=\"atmoz-summary-days-container\">\r\n                                <span class=\"atmoz-summary-label\">Estimated days:<\/span>\r\n                                <span class=\"atmoz-summary-value\" id=\"summary-work-days\">0 days<\/span>\r\n                            <\/div>\r\n                        \r\n                        <div class=\"atmoz-summary-row\" style=\"margin-top: 15px; flex-direction: column; align-items: flex-start; gap: 8px;\">\r\n                            <span class=\"atmoz-summary-label\" style=\"font-size: 0.9rem;\">Needs:<\/span>\r\n                            <div id=\"summary-options-list\" style=\"font-size: 0.85rem; color: #555; line-height: 1.5; font-style: italic;\">No option selected<\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"atmoz-summary-total\">\r\n                            <span class=\"atmoz-total-label\">Est. Budget<\/span>\r\n                            <span class=\"atmoz-total-price\" id=\"atmoz-total-price-display\">0 \u20ac<\/span>\r\n                        <\/div>\r\n\r\n                        <!-- Bouton Principal (Lien URL pour Fluent Forms Pro) -->\r\n                        <a href=\"#contact\" class=\"atmoz-btn atmoz-btn-primary\" id=\"atmoz-cta-primary\">\r\n                            Fill out the form \u2794                        <\/a>\r\n\r\n                        <!-- Bouton Secondaire (Mailto direct) -->\r\n                        <a href=\"mailto:contact@atmoz.design\" class=\"atmoz-btn atmoz-btn-secondary\" id=\"atmoz-cta-secondary\">\r\n                            Send direct email                        <\/a>\r\n\r\n                        <!-- Mention de mise en garde du simulateur -->\r\n                                                    <p class=\"atmoz-disclaimer-text\">\r\n                                Ce simulateur est l\u00e0 pour vous donner une id\u00e9e et ne constitue pas un devis.                            <\/p>\r\n                                            <\/div>\r\n                <\/div>\r\n\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- SCRIPT D'ANIMATION ET DE CALCUL VANILLA JS DU SIMULATEUR -->\r\n        <script type=\"text\/javascript\">\r\n            document.addEventListener(\"DOMContentLoaded\", function () {\r\n                const config = {\"is_en\":true,\"currency\":\"\\u20ac\",\"contactUrl\":\"#contact\",\"email\":\"contact@atmoz.design\",\"pricePrefix\":\"\\u00c0 partir de\",\"tjm\":500,\"durations\":{\"produit\":\"6 mois \\u00e0 1 an\",\"web\":\"1 \\u00e0 3 mois\",\"graphisme\":\"1 semaine \\u00e0 1 mois\",\"global\":\"6 \\u00e0 24 mois\"},\"options\":{\"produit\":[{\"id\":\"produit_opt_0\",\"name\":\"Cadrage\",\"price\":2500,\"desc\":\"\\u00c9tude approfondie de votre besoin, analyse fonctionnelle, d\\u00e9finition de la ligne directrice et r\\u00e9daction du cahier des charges technique.\"},{\"id\":\"produit_opt_1\",\"name\":\"Conception\",\"price\":4500,\"desc\":\"Architecture produit et conception technique 3D d\\u00e9taill\\u00e9e sous Autodesk Fusion 360 (CAO solide\\\/surfacique, ou Illustrator si textile).\"},{\"id\":\"produit_opt_2\",\"name\":\"D\\u00e9veloppement\",\"price\":3500,\"desc\":\"D\\u00e9veloppement du concept, et Prototypage it\\u00e9ratif, sourcing des mati\\u00e8res \\u00e9co-con\\u00e7ues\\\/techniques, essais lab. \\\/ terrain\"},{\"id\":\"produit_opt_3\",\"name\":\"Industrialisation\",\"price\":3500,\"desc\":\"Sourcing et s\\u00e9lection des partenaires industriels de production, calcul fin des co\\u00fbts, suivi de pr\\u00e9-production et lancement de la fabrication.\"}],\"web\":[{\"id\":\"web_opt_0\",\"name\":\"Site Vitrine Simple (Landing Page)\",\"price\":500,\"desc\":\"Site vitrine simple, id\\u00e9al pour un portfolio par exemple\"},{\"id\":\"web_opt_1\",\"name\":\"Site Internet Complet (4-5 pages)\",\"price\":1390,\"desc\":\"Site complet, id\\u00e9al pour PME ou toutes soci\\u00e9t\\u00e9s souhaitant augmenter sa visibilit\\u00e9\"},{\"id\":\"web_opt_2\",\"name\":\"Boutique en Ligne (E-commerce)\",\"price\":1990,\"desc\":\"Boutique en ligne compl\\u00e8te avec gestion de panier, paiements s\\u00e9curis\\u00e9s et catalogue produits dynamique.\"},{\"id\":\"web_opt_3\",\"name\":\"R\\u00e9daction + SEO s\\u00e9mantique et LLM\",\"price\":300,\"desc\":\"R\\u00e9daction optimis\\u00e9e pour les moteurs de recherche traditionnels et pour la visibilit\\u00e9 sur les IA g\\u00e9n\\u00e9ratives.\"}],\"graphisme\":[{\"id\":\"graphisme_opt_0\",\"name\":\"Cr\\u00e9ation du Logotype\",\"price\":450,\"desc\":\"Recherche et cr\\u00e9ation de votre logotype sur-mesure (fichiers vectoriels fournis), incluant la d\\u00e9finition de votre palette de couleurs primaires, le choix de vos polices de caract\\u00e8res de base et les d\\u00e9clinaisons de formats essentiels pour tous vos supports (Web et Print).\"},{\"id\":\"graphisme_opt_1\",\"name\":\"Charte Graphique Compl\\u00e8te\",\"price\":1300,\"desc\":\"\\u00c9laboration du guide complet de votre identit\\u00e9 visuelle (Brand Guidelines). Comprend la direction artistique globale, les r\\u00e8gles d&#039;utilisation de votre logo, la d\\u00e9finition des \\u00e9l\\u00e9ments graphiques secondaires (motifs, ic\\u00f4nes, style d&#039;images) et des exemples de mise en situation concrets (r\\u00e9seaux sociaux, pr\\u00e9sentations).\"},{\"id\":\"graphisme_opt_2\",\"name\":\"Design de packaging\",\"price\":750,\"desc\":\"Conception graphique et technique de vos emballages, \\u00e9tiquettes, bo\\u00eetes ou flacons. Comprend le trac\\u00e9 de d\\u00e9coupe, l&#039;optimisation visuelle et la mise en conformit\\u00e9 technique pour les imprimeurs, pens\\u00e9e en parfaite synergie avec les contraintes de votre produit physique.\"},{\"id\":\"graphisme_opt_3\",\"name\":\"Supports Print complexes\",\"price\":350,\"desc\":\"D\\u00e9clinaison de votre identit\\u00e9 visuelle sur des supports de communication imprim\\u00e9s denses ou techniques (brochure commerciale de plusieurs pages, catalogue de produits, fiches techniques d&#039;ing\\u00e9nierie ou rapport d&#039;activit\\u00e9 annuel). Fichiers pr\\u00eats pour l&#039;impression fournis.\"}]}};\r\n                const container = document.getElementById(\"atmoz-sim-container\");\r\n                if (!container) return;\r\n\r\n                \/\/ Cr\u00e9ation et injection du conteneur de bulle d'aide flottant (Anti-clipping pour overflow: hidden)\r\n                let tooltipEl = document.getElementById(\"atmoz-global-tooltip\");\r\n                if (!tooltipEl) {\r\n                    tooltipEl = document.createElement(\"div\");\r\n                    tooltipEl.id = \"atmoz-global-tooltip\";\r\n                    tooltipEl.style.position = \"absolute\";\r\n                    tooltipEl.style.background = \"var(--atmoz-charcoal, #1A202C)\";\r\n                    tooltipEl.style.color = \"#FFF\";\r\n                    tooltipEl.style.padding = \"10px 14px\";\r\n                    tooltipEl.style.fontSize = \"0.8rem\";\r\n                    tooltipEl.style.lineHeight = \"1.4\";\r\n                    tooltipEl.style.width = \"240px\";\r\n                    tooltipEl.style.boxShadow = \"0 4px 12px rgba(0,0,0,0.15)\";\r\n                    tooltipEl.style.border = \"1px solid rgba(255,255,255,0.2)\";\r\n                    tooltipEl.style.zIndex = \"999999\";\r\n                    tooltipEl.style.display = \"none\";\r\n                    tooltipEl.style.pointerEvents = \"none\";\r\n                    tooltipEl.style.fontFamily = \"'Oxygen', sans-serif\";\r\n                    tooltipEl.style.boxSizing = \"border-box\";\r\n                    document.body.appendChild(tooltipEl);\r\n                }\r\n\r\n                \/\/ DOM Elements (s\u00e9lections cibl\u00e9es \u00e0 l'int\u00e9rieur du conteneur)\r\n                const radioCards = container.querySelectorAll(\".atmoz-radio-card\");\r\n                const optionSections = container.querySelectorAll(\".atmoz-options-section\");\r\n                const checkboxes = container.querySelectorAll('.atmoz-checkbox-wrapper input[type=\"checkbox\"]');\r\n                const checkboxWrappers = container.querySelectorAll('.atmoz-checkbox-wrapper');\r\n                const helpIcons = container.querySelectorAll(\".atmoz-help-icon\");\r\n                \r\n                \/\/ Displays\r\n                const summaryProjectType = container.querySelector(\"#summary-project-type\");\r\n                const summaryDuration = container.querySelector(\"#summary-duration\");\r\n                const summaryOptionsList = container.querySelector(\"#summary-options-list\");\r\n                const totalPriceDisplay = container.querySelector(\"#atmoz-total-price-display\");\r\n                const ctaPrimary = container.querySelector(\"#atmoz-cta-primary\");\r\n                const ctaSecondary = container.querySelector(\"#atmoz-cta-secondary\");\r\n\r\n                \/\/ \u00c9tat interne du simulateur (variables globales au wrapper DOM)\r\n                let activeType = \"produit\";\r\n                let currentTotal = 0;\r\n                let currentSelectedOptions = [];\r\n                let currentFormattedMessage = \"\";\r\n\r\n                \/\/ Gestion du changement des Boutons Radios (\u00c9tape 1)\r\n                const projectTypeInputs = container.querySelectorAll('input[name=\"project_type\"]');\r\n                projectTypeInputs.forEach(input => {\r\n                    input.addEventListener(\"change\", function () {\r\n                        \/\/ Supprimer la classe \"active\" de toutes les cartes\r\n                        radioCards.forEach(card => card.classList.remove(\"active\"));\r\n                        \r\n                        \/\/ Ajouter la classe \"active\" \u00e0 la carte s\u00e9lectionn\u00e9e\r\n                        const parentCard = this.closest(\".atmoz-radio-card\");\r\n                        if (parentCard) {\r\n                            parentCard.classList.add(\"active\");\r\n                        }\r\n                        \r\n                        activeType = this.value;\r\n                        \r\n                        \/\/ D\u00e9cocher les checkboxes des piliers non concern\u00e9s\r\n                        if (activeType !== \"global\") {\r\n                            checkboxes.forEach(chk => {\r\n                                const section = chk.closest(\".atmoz-options-section\");\r\n                                if (section && section.id !== `options-${activeType}`) {\r\n                                    chk.checked = false;\r\n                                    const wrapper = chk.closest('.atmoz-checkbox-wrapper');\r\n                                    if (wrapper) {\r\n                                        wrapper.classList.remove(\"checked\");\r\n                                    }\r\n                                }\r\n                            });\r\n                        }\r\n\r\n                        updateUI();\r\n                    });\r\n                });\r\n\r\n                \/\/ Rendre les cartes radios enti\u00e8rement cliquables\r\n                radioCards.forEach(card => {\r\n                    card.addEventListener(\"click\", function(e) {\r\n                        const input = this.querySelector('input[type=\"radio\"]');\r\n                        if (input && e.target !== input) {\r\n                            input.checked = true;\r\n                            \/\/ D\u00e9clencher manuellement l'\u00e9v\u00e9nement change pour mettre \u00e0 jour l'interface\r\n                            input.dispatchEvent(new Event('change'));\r\n                        }\r\n                    });\r\n                });\r\n\r\n                \/\/ Gestion du changement des Cases \u00e0 Cocher (\u00c9tape 2)\r\n                checkboxes.forEach(chk => {\r\n                    chk.addEventListener(\"change\", function () {\r\n                        const wrapper = this.closest('.atmoz-checkbox-wrapper');\r\n                        if (wrapper) {\r\n                            if (this.checked) {\r\n                                wrapper.classList.add(\"checked\");\r\n                            } else {\r\n                                wrapper.classList.remove(\"checked\");\r\n                            }\r\n                        }\r\n                        calculateTotal();\r\n                    });\r\n                });\r\n\r\n                \/\/ Rendre la ligne enti\u00e8re de la case \u00e0 cocher cliquable\r\n                checkboxWrappers.forEach(wrapper => {\r\n                    wrapper.addEventListener(\"click\", function(e) {\r\n                        const input = this.querySelector('input[type=\"checkbox\"]');\r\n                        \r\n                        \/\/ Si l'utilisateur clique sur le (?) d'aide, on ne fait rien pour ne pas perturber la s\u00e9lection\r\n                        if (e.target.classList.contains(\"atmoz-help-icon\")) {\r\n                            return;\r\n                        }\r\n\r\n                        \/\/ \u00c9viter de d\u00e9clencher deux fois si l'utilisateur clique directement sur l'input natif invisible\r\n                        if (input && e.target !== input) {\r\n                            e.preventDefault();\r\n                            input.checked = !input.checked;\r\n                            input.dispatchEvent(new Event('change'));\r\n                        }\r\n                    });\r\n                });\r\n\r\n                \/\/ Moteur de positionnement dynamique des bulles d'aide flottantes (au survol \/ clic)\r\n                helpIcons.forEach(icon => {\r\n                    const showTooltip = () => {\r\n                        const text = icon.getAttribute(\"data-tooltip\");\r\n                        tooltipEl.textContent = text;\r\n                        tooltipEl.style.display = \"block\";\r\n\r\n                        \/\/ Calcul de la position par rapport au viewport et au d\u00e9filement (scroll)\r\n                        const rect = icon.getBoundingClientRect();\r\n                        const scrollY = window.pageYOffset || document.documentElement.scrollTop;\r\n                        const scrollX = window.pageXOffset || document.documentElement.scrollLeft;\r\n\r\n                        const tooltipHeight = tooltipEl.offsetHeight;\r\n                        const tooltipWidth = tooltipEl.offsetWidth;\r\n\r\n                        \/\/ Positionner au-dessus et centr\u00e9 horizontalement par rapport \u00e0 l'ic\u00f4ne (?)\r\n                        const top = rect.top + scrollY - tooltipHeight - 10;\r\n                        const left = rect.left + scrollX + (rect.width \/ 2) - (tooltipWidth \/ 2);\r\n\r\n                        tooltipEl.style.top = `${top}px`;\r\n                        tooltipEl.style.left = `${left}px`;\r\n                    };\r\n\r\n                    const hideTooltip = () => {\r\n                        tooltipEl.style.display = \"none\";\r\n                    };\r\n\r\n                    icon.addEventListener(\"mouseenter\", showTooltip);\r\n                    icon.addEventListener(\"mouseleave\", hideTooltip);\r\n                    \r\n                    icon.addEventListener(\"click\", function (e) {\r\n                        e.stopPropagation(); \/\/ \u00c9vite de d\u00e9clencher la ligne de s\u00e9lection de l'option parent\r\n                        \r\n                        const wasActive = this.classList.contains(\"active\");\r\n                        helpIcons.forEach(i => i.classList.remove(\"active\"));\r\n                        \r\n                        if (!wasActive) {\r\n                            this.classList.add(\"active\");\r\n                            showTooltip();\r\n                        } else {\r\n                            hideTooltip();\r\n                        }\r\n                    });\r\n                });\r\n\r\n                \/\/ Fermer l'infobulle ouverte si on clique n'importe o\u00f9 ailleurs sur la page\r\n                document.addEventListener(\"click\", function () {\r\n                    helpIcons.forEach(icon => icon.classList.remove(\"active\"));\r\n                    tooltipEl.style.display = \"none\";\r\n                });\r\n\r\n                \/\/ Ajuster dynamiquement l'infobulle si l'utilisateur d\u00e9file ou redimensionne\r\n                window.addEventListener(\"scroll\", () => { tooltipEl.style.display = \"none\"; });\r\n                window.addEventListener(\"resize\", () => { tooltipEl.style.display = \"none\"; });\r\n\r\n                \/\/ Mise \u00e0 jour de l'affichage global (Options & R\u00e9sum\u00e9)\r\n                function updateUI() {\r\n                    \/\/ 1. Afficher les bonnes sections d'options\r\n                    optionSections.forEach(section => {\r\n                        section.classList.remove(\"visible\");\r\n                    });\r\n\r\n                    if (activeType === \"global\") {\r\n                        \/\/ En mode Projet Global 360\u00b0, on affiche toutes les sections d'options\r\n                        optionSections.forEach(section => {\r\n                            section.classList.add(\"visible\");\r\n                        });\r\n                        summaryProjectType.textContent = config.is_en ? \"Global 360\u00b0 Project\" : \"Projet Global 360\u00b0\";\r\n                        summaryDuration.textContent = config.durations.global;\r\n                    } else {\r\n                        \/\/ Mode pilier unique\r\n                        const targetSection = container.querySelector(`#options-${activeType}`);\r\n                        if (targetSection) {\r\n                            targetSection.classList.add(\"visible\");\r\n                        }\r\n                        \r\n                        \/\/ Formatage du nom du pilier pour l'affichage du r\u00e9sum\u00e9\r\n                        let displayTypeName = config.is_en ? \"Product\" : \"Produit\";\r\n                        if (activeType === \"web\") displayTypeName = \"Web & Digital\";\r\n                        if (activeType === \"graphisme\") displayTypeName = config.is_en ? \"Graphic Design\" : \"Graphisme \/ Branding\";\r\n                        \r\n                        summaryProjectType.textContent = displayTypeName;\r\n                        summaryDuration.textContent = config.durations[activeType];\r\n                    }\r\n\r\n                    calculateTotal();\r\n                }\r\n\r\n                \/\/ Calcul du prix total et g\u00e9n\u00e9ration dynamique des URL de contact\r\n                function calculateTotal() {\r\n                    let total = 0;\r\n                    let selectedOptionsNames = [];\r\n                    let selectedOptionsDetailed = [];\r\n\r\n                    \/\/ On filtre les cases coch\u00e9es qui sont visibles \u00e0 l'\u00e9cran\r\n                    checkboxes.forEach(chk => {\r\n                        const wrapper = chk.closest('.atmoz-checkbox-wrapper');\r\n                        const section = chk.closest(\".atmoz-options-section\");\r\n                        \r\n                        if (wrapper && section && chk.checked && section.classList.contains(\"visible\")) {\r\n                            const price = parseInt(wrapper.getAttribute(\"data-price\"), 10) || 0;\r\n                            \/\/ R\u00e9cup\u00e9ration intelligente du nom pour \u00eatre compatible avec les traductions TranslatePress dans le DOM\r\n                            const nameEl = wrapper.querySelector('.atmoz-checkbox-name');\r\n                            const name = nameEl ? nameEl.textContent.trim() : (wrapper.getAttribute(\"data-name\") || \"\");\r\n                            total += price;\r\n                            selectedOptionsNames.push(name);\r\n                            selectedOptionsDetailed.push(`${name} (${price} ${config.currency})`);\r\n                        }\r\n                    });\r\n\r\n                    \/\/ D\u00e9termination du libell\u00e9 de pilier\r\n                    let projectTypeLabel = \"PRODUIT\";\r\n                    if (config.is_en) {\r\n                        projectTypeLabel = \"PRODUCT\";\r\n                        if (activeType === \"web\") projectTypeLabel = \"WEB & DIGITAL\";\r\n                        if (activeType === \"graphisme\") projectTypeLabel = \"GRAPHIC DESIGN\";\r\n                        if (activeType === \"global\") projectTypeLabel = \"GLOBAL 360\u00b0 PROJECT\";\r\n                    } else {\r\n                        if (activeType === \"web\") projectTypeLabel = \"WEB & DIGITAL\";\r\n                        if (activeType === \"graphisme\") projectTypeLabel = \"GRAPHISME\";\r\n                        if (activeType === \"global\") projectTypeLabel = \"PROJET GLOBAL 360\u00b0\";\r\n                    }\r\n\r\n                    \/\/ Formatage du pr\u00e9fixe de prix et montant total\r\n                    const prefix = config.pricePrefix.trim();\r\n                    const separator = prefix ? \" \" : \"\";\r\n                    const totalFormattedStr = total === 0 ? `0 ${config.currency}` : `${prefix}${separator}${total.toLocaleString()} ${config.currency}`;\r\n\r\n                    \/\/ Construction de la trame textuelle enrichie demand\u00e9e\r\n                    const noneSelectedText = config.is_en ? \"No option selected\" : \"Aucune option s\u00e9lectionn\u00e9e\";\r\n                    const optionsListStr = selectedOptionsDetailed.length > 0 \r\n                        ? selectedOptionsDetailed.join(\"\\n- \") \r\n                        : noneSelectedText;\r\n\r\n                    let formattedMessage = \"\";\r\n                    if (config.is_en) {\r\n                        formattedMessage = `Hello Laurent,\\n\\n` +\r\n                            `I would like to discuss my project [project name] and get a quote based on the configured options:\\n` +\r\n                            `${projectTypeLabel} :\\n- ${optionsListStr}\\n\\n` +\r\n                            `INDICATIVE ESTIMATED TOTAL: ${totalFormattedStr} Excl. Tax\\n\\n` +\r\n                            `Thank you in advance for your feedback on the technical feasibility of these elements!`;\r\n                    } else {\r\n                        formattedMessage = `Bonjour Laurent,\\n\\n` +\r\n                            `Je souhaiterais \u00e9changer sur mon projet [intitul\u00e9 du projet] et b\u00e9n\u00e9ficier d'un devis bas\u00e9 sur les options configur\u00e9es :\\n` +\r\n                            `${projectTypeLabel} :\\n- ${optionsListStr}\\n\\n` +\r\n                            `TOTAL ESTIMATIF INDICATIF : ${totalFormattedStr} HT\\n\\n` +\r\n                            `Merci d'avance pour votre retour sur la faisabilit\u00e9 technique de ces \u00e9l\u00e9ments !`;\r\n                    }\r\n\r\n                    \/\/ Enregistrement de l'\u00e9tat global\r\n                    currentTotal = total;\r\n                    currentSelectedOptions = selectedOptionsNames;\r\n                    currentFormattedMessage = formattedMessage;\r\n\r\n                    \/\/ Mise \u00e0 jour de l'affichage du prix total dans l'interface\r\n                    totalPriceDisplay.textContent = totalFormattedStr;\r\n\r\n                    \/\/ Calcul de la charge estim\u00e9e en jours-homme (si TJM sup\u00e9rieur \u00e0 0)\r\n                    if (config.tjm > 0) {\r\n                        const daysContainer = container.querySelector(\"#atmoz-summary-days-container\");\r\n                        const daysDisplay = container.querySelector(\"#summary-work-days\");\r\n                        if (daysContainer && daysDisplay) {\r\n                            if (total > 0) {\r\n                                const days = Math.round((total \/ config.tjm) * 10) \/ 10;\r\n                                const dayText = config.is_en ? `day${days > 1 ? 's' : ''}` : `jour${days > 1 ? 's' : ''}`;\r\n                                daysDisplay.textContent = `${days} ${dayText}`;\r\n                                daysContainer.style.display = \"flex\";\r\n                            } else {\r\n                                daysContainer.style.display = \"none\";\r\n                            }\r\n                        }\r\n                    }\r\n\r\n                    \/\/ Affichage de la liste des options coch\u00e9es dans le panneau de r\u00e9sum\u00e9\r\n                    if (selectedOptionsNames.length > 0) {\r\n                        summaryOptionsList.innerHTML = selectedOptionsNames.map(opt => `\u2022 ${opt}`).join(\"<br>\");\r\n                    } else {\r\n                        summaryOptionsList.textContent = config.is_en ? \"No option selected\" : \"Aucun besoin s\u00e9lectionn\u00e9\";\r\n                    }\r\n\r\n                    \/\/ G\u00e9n\u00e9ration dynamique de l'URL pour Fluent Forms Pro (Lien fallback par param\u00e8tres d'URL avec message enrichi)\r\n                    const paramSeparator = config.contactUrl.includes(\"?\") ? \"&\" : \"?\";\r\n                    const finalContactUrl = `${config.contactUrl}${paramSeparator}prix=${total}&options=${encodeURIComponent(formattedMessage)}`;\r\n                    ctaPrimary.setAttribute(\"href\", finalContactUrl);\r\n\r\n                    \/\/ G\u00e9n\u00e9ration dynamique du lien Mailto (Lien Secondaire avec message enrichi)\r\n                    const subjectPrefix = config.is_en ? \"AtmOz project simulation - \" : \"Simulation de projet AtmOz - \";\r\n                    const mailSubject = encodeURIComponent(`${subjectPrefix}${summaryProjectType.textContent}`);\r\n                    const mailBody = encodeURIComponent(formattedMessage);\r\n                    ctaSecondary.setAttribute(\"href\", `mailto:${config.email}?subject=${mailSubject}&body=${mailBody}`);\r\n                }\r\n\r\n                \/\/ Interception du clic sur le bouton principal de rappel \/ formulaire pour traitement dynamique sans rechargement\r\n                ctaPrimary.addEventListener(\"click\", function(e) {\r\n                    const contactUrl = this.getAttribute(\"href\");\r\n                    const isAnchor = contactUrl.includes(\"#contact\") || contactUrl.startsWith(\"#contact\");\r\n\r\n                    if (isAnchor) {\r\n                        e.preventDefault();\r\n\r\n                        \/\/ 1. Remplissage automatique des champs de Fluent Forms d\u00e9tect\u00e9s sur la page\r\n                        const prixFields = document.querySelectorAll('input[name=\"prix\"], [data-name=\"prix\"], .fluentform [name=\"prix\"]');\r\n                        const optionsFields = document.querySelectorAll('textarea[name=\"options\"], input[name=\"options\"], .fluentform [name=\"options\"]');\r\n\r\n                        if (prixFields.length > 0) {\r\n                            prixFields.forEach(field => {\r\n                                field.value = currentTotal;\r\n                                field.dispatchEvent(new Event('change', { bubbles: true }));\r\n                                field.dispatchEvent(new Event('input', { bubbles: true }));\r\n                            });\r\n                        }\r\n\r\n                        if (optionsFields.length > 0) {\r\n                            optionsFields.forEach(field => {\r\n                                field.value = currentFormattedMessage;\r\n                                field.dispatchEvent(new Event('change', { bubbles: true }));\r\n                                field.dispatchEvent(new Event('input', { bubbles: true }));\r\n                            });\r\n                        }\r\n\r\n                        \/\/ 2. D\u00e9filement fluide natif vers le conteneur #contact\r\n                        const targetElement = document.querySelector(\"#contact\");\r\n                        if (targetElement) {\r\n                            targetElement.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\r\n                        } else {\r\n                            window.location.href = contactUrl;\r\n                        }\r\n                    }\r\n                });\r\n\r\n                \/\/ Initialisation au chargement de la page\r\n                updateUI();\r\n            });\r\n        <\/script>\r\n        <\/div><\/div>\n<\/section><section id=\"profil\" class=\"bde-section-37-416 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-37-418 bde-columns\"><div class=\"bde-column-37-419 bde-column\">\n  \n  \n\t\n\n\n\n\n<\/div><div class=\"bde-column-37-420 bde-column\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-37-421 bde-heading\">\nLaurent Glauser\n<\/h1><h1 class=\"bde-heading-37-442 bde-heading\">\nprofil pluridisciplinaire\n<\/h1><div class=\"bde-text-37-423 bde-text\">\nJe m'appelle Laurent Glauser. Fort de plus de 10 ans d'exp\u00e9rience en ing\u00e9nierie et design, partag\u00e9e entre la rigueur industrielle et la cr\u00e9ativit\u00e9, je propose aujourd\u2019hui un accompagnement global \u00e0 360\u00b0 : de l\u2019\u00e9tude de votre besoin produit jusqu\u2019\u00e0 sa mat\u00e9rialisation physique, tout en fa\u00e7onnant votre identit\u00e9 graphique et votre pr\u00e9sence en ligne.<br><br>En confiant l\u2019ensemble de votre \u00e9cosyst\u00e8me \u00e0 AtmOz, vous rationalisez vos co\u00fbts et vos d\u00e9lais de d\u00e9veloppement en dialoguant avec un interlocuteur unique. Cette synergie \u00e9limine toute d\u00e9perdition d\u2019information entre le prototypage technique de votre produit et le marketing de votre marque.<br><br>Bienvenue dans mon univers. J'ai h\u00e2te de collaborer avec vous et de donner vie \u00e0 vos futurs projets !\n<\/div>\n<\/div><\/div><div class=\"bde-div-37-424 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-columns-37-426 bde-columns\"><div class=\"bde-column-37-427 bde-column bg-petrol\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-431 bde-heading\">\n+10 ans\n<\/h4><div class=\"bde-text-37-432 bde-text\">\nDe savoir-faire technique et cr\u00e9atif\n<\/div>\n<\/div><div class=\"bde-column-37-433 bde-column bg-petrol\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-434 bde-heading\">\n3\n<\/h4><div class=\"bde-text-37-435 bde-text\">\n<span class=\"titre-profil-exp\">Expertises<\/span><br>Produit, Digital et Graphique\n<\/div>\n<\/div><div class=\"bde-column-37-436 bde-column bg-petrol\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-437 bde-heading\">\n+40\n<\/h4><div class=\"bde-text-37-438 bde-text\">\n<span class=\"titre-profil-exp\">Projets<\/span><br>d\u00e9j\u00e0 r\u00e9alis\u00e9s\n<\/div>\n<\/div><div class=\"bde-column-37-439 bde-column bg-petrol\">\n  \n  \n\t\n\n\n\n<h4 class=\"bde-heading-37-440 bde-heading\">\n0\n<\/h4><div class=\"bde-text-37-441 bde-text\">\n<span class=\"titre-profil-exp\">Interm\u00e9diaire<\/span><br>pour une r\u00e9activit\u00e9 maximale et des co\u00fbts optimis\u00e9s.\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-37-443 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-37-444 bde-columns\"><div class=\"bde-column-37-445 bde-column\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-467 bde-div\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-37-447 bde-heading\">\nD\u00e9marrons l\u2019\u00e9tude ensemble<br>\n<\/h1><div class=\"bde-text-37-465 bde-text\">\nQue vous ayez un cahier des charges abouti ou simplement une id\u00e9e sur un carnet de croquis, je vous aiguille sur la meilleure faisabilit\u00e9 industrielle et technologique.<br>\n<\/div><div class=\"bde-fancy-divider-37-466 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator   \">\n  \t  <\/div>\n<\/div>\n\n<\/div>\n<\/div><div class=\"bde-div-37-478 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-37-468 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-470 bde-text\">\nT\u00e9l\u00e9phone Direct<br>\n<\/div><a class=\"bde-text-link-37-473 bde-text-link breakdance-link\" href=\"tel: 33635203422\" target=\"_self\" data-type=\"url\">\n  +33 (0)6 35 20 34 22\n\n<\/a>\n<\/div><div class=\"bde-div-37-474 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-37-475 bde-text\">\nMessagerie Directe\n<\/div><a class=\"bde-text-link-37-476 bde-text-link breakdance-link\" href=\"mailto: contact@atmoz.design\" target=\"_self\" data-type=\"url\">\n  contact@atmoz.design\n\n<\/a>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-37-446 bde-column\">\n  \n  \n\t\n\n\n\n<h1 class=\"bde-heading-37-477 bde-heading\">\nTransmettre un message s\u00e9curis\u00e9\n<\/h1><div id=\"contact\" class=\"bde-shortcode-37-464 bde-shortcode\"><div class='fluentform ff-default fluentform_wrapper_3 ffs_custom_wrap'><form data-form_id=\"3\" id=\"fluentform_3\" class=\"frm-fluent-form fluent_form_3 ff-el-form-top ff_form_instance_3_1 ff-form-loading ffs_custom\" data-form_instance=\"ff_form_instance_3_1\" method=\"POST\" ><fieldset  style=\"border: none!important;margin: 0!important;padding: 0!important;background-color: transparent!important;box-shadow: none!important;outline: none!important; min-inline-size: 100%;\">\n                    <legend class=\"ff_screen_reader_title\" style=\"display: block; margin: 0!important;padding: 0!important;height: 0!important;text-indent: -999999px;width: 0!important;overflow:hidden;\">Contact Form<\/legend><input type='hidden' name='__fluent_form_embded_post_id' value='37' \/><input type=\"hidden\" id=\"_fluentform_3_fluentformnonce\" name=\"_fluentform_3_fluentformnonce\" value=\"2f813fa4c9\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/37\" \/><div data-type=\"name-element\" data-name=\"names\" class=\" ff-field_container ff-name-field-wrapper\" ><div class='ff-t-container'><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_first_name_' id='label_ff_3_names_first_name_' >Pr\u00e9nom<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[first_name]\" id=\"ff_3_names_first_name_\" class=\"ff-el-form-control\" placeholder=\"Pr\u00e9nom\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><div class='ff-t-cell '><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_names_last_name_' id='label_ff_3_names_last_name_' >Nom de Famille<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"names[last_name]\" id=\"ff_3_names_last_name_\" class=\"ff-el-form-control\" placeholder=\"Nom de Famille\" aria-invalid=\"false\" aria-required=false><\/div><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_email' id='label_ff_3_email' aria-label=\"Email\">Email<\/label><\/div><div class='ff-el-input--content'><input type=\"email\" name=\"email\" id=\"ff_3_email\" class=\"ff-el-form-control\" placeholder=\"Adresse Email\" data-name=\"email\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_subject' id='label_ff_3_subject' aria-label=\"Sujet\">Sujet<\/label><\/div><div class='ff-el-input--content'><input type=\"text\" name=\"subject\" class=\"ff-el-form-control\" placeholder=\"Sujet\" data-name=\"subject\" id=\"ff_3_subject\"  aria-invalid=\"false\" aria-required=true><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label asterisk-right\"><label for='ff_3_prix' id='label_ff_3_prix' aria-label=\"Budget\">Budget<\/label><\/div><div class='ff-el-input--content'><div class=\"ff_input-group\"><input type=\"number\" name=\"prix\" value=\"\" id=\"ff_3_prix\" class=\"ff-el-form-control\" data-name=\"prix\" inputmode=\"numeric\" step=\"any\"  aria-invalid=\"false\" aria-required=false><div class=\"ff_input-group-append\"><span class=\"ff_input-group-text\">\u20ac<\/span><\/div><\/div><\/div><\/div><div class='ff-el-group'><div class=\"ff-el-input--label ff-el-is-required asterisk-right\"><label for='ff_3_options' id='label_ff_3_options' aria-label=\"Votre Message\">Votre Message<\/label><\/div><div class='ff-el-input--content'><textarea aria-required=\"true\" aria-labelledby=\"label_ff_3_options\" name=\"options\" id=\"ff_3_options\" class=\"ff-el-form-control\" placeholder=\"Votre Message\" rows=\"4\" cols=\"2\" data-name=\"options\" ><\/textarea><\/div><\/div><div class='ff-el-group ff-text-right ff_submit_btn_wrapper'><button type=\"submit\" class=\"ff-btn ff-btn-submit ff-btn-md ff_btn_style wpf_has_custom_css\"  aria-label=\"Envoyer la demande\">Envoyer la demande<\/button><\/div>\t\t<div id=\"cf-turnstile-fluent-1325125312\"\r\n\t\tclass=\"cf-turnstile\" \t\tdata-sitekey=\"0x4AAAAAADg_WR48cm9yyVUl\"\r\n\t\tdata-theme=\"light\"\r\n\t\tdata-language=\"auto\"\r\n\t\tdata-size=\"normal\"\r\n\t\tdata-retry=\"auto\" data-retry-interval=\"1000\"\r\n\t\tdata-refresh-expired=\"auto\"\r\n\t\tdata-refresh-timeout=\"auto\"\r\n\t\tdata-action=\"fluent-form-3\"\r\n\t\tdata-callback=\"turnstileFluentCallback\"\r\n\t\t\t\tdata-appearance=\"interaction-only\"><\/div>\r\n\t\t\t\t<style>#cf-turnstile-fluent-1325125312 iframe { margin-bottom: 15px; }<\/style>\r\n\t\t\t\t<style>#cf-turnstile-fluent-1325125312 { margin-left: -15px; }<\/style>\r\n\t\t<\/fieldset><\/form><div id='fluentform_3_errors' class='ff-errors-in-stack ff_form_instance_3_1 ff-form-loading_errors ff_form_instance_3_1_errors'><\/div><\/div>            <script type=\"text\/javascript\">\n                window.fluent_form_ff_form_instance_3_1 = {\"id\":\"3\",\"ajaxUrl\":\"https:\\\/\\\/atmoz.design\\\/wp-admin\\\/admin-ajax.php\",\"settings\":{\"layout\":{\"labelPlacement\":\"top\",\"asteriskPlacement\":\"asterisk-right\",\"helpMessagePlacement\":\"with_label\",\"errorMessagePlacement\":\"inline\",\"cssClassName\":\"\"},\"restrictions\":{\"denyEmptySubmission\":{\"enabled\":false}}},\"form_instance\":\"ff_form_instance_3_1\",\"form_id_selector\":\"fluentform_3\",\"rules\":{\"names[first_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"}},\"names[middle_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"}},\"names[last_name]\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"}},\"email\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"},\"email\":{\"value\":true,\"message\":\"This field must contain a valid email\",\"global\":true,\"global_message\":\"Ce champ doit contenir un e-mail valide\"}},\"subject\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"}},\"prix\":{\"required\":{\"value\":false,\"message\":\"This field is required\",\"global_message\":\"Ce champ est obligatoire\",\"global\":true},\"numeric\":{\"value\":true,\"message\":\"This field must contain numeric value\",\"global_message\":\"Ce champ doit contenir une valeur num\\u00e9rique\",\"global\":true},\"min\":{\"value\":\"\",\"message\":\"Validation fails for minimum value\",\"global_message\":\"\\u00c9chec de la validation pour la valeur minimale\",\"global\":true},\"max\":{\"value\":\"\",\"message\":\"Validation fails for maximum value\",\"global_message\":\"\\u00c9chec de la validation pour la valeur maximale\",\"global\":true},\"digits\":{\"value\":\"\",\"message\":\"Validation fails for limited digits\",\"global_message\":\"La validation \\u00e9choue pour un nombre limit\\u00e9 de chiffres\",\"global\":true}},\"options\":{\"required\":{\"value\":true,\"message\":\"This field is required\",\"global\":true,\"global_message\":\"Ce champ est obligatoire\"}}},\"debounce_time\":300,\"file_upload_settings\":[]};\n                            <\/script>\n            <\/div>\n<\/div><\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>L&rsquo;expertise \u00e0 360\u00b0 pour vos produits, votre site web et votre identit\u00e9 de marque. AtmOz, studio de Laurent Glauser \u00e0 Angers, allie ing\u00e9nierie et design pour concevoir vos projets de A \u00e0 Z, du physique au num\u00e9rique. Pour une innovation porteuse de sens, je place l&rsquo;\u00e9co-conception et la durabilit\u00e9 au c\u0153ur de chaque projet. D\u00e9couvrir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":205,"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"predecessor-version":[{"id":333,"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/pages\/37\/revisions\/333"}],"wp:attachment":[{"href":"https:\/\/atmoz.design\/en\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}