{"id":3155,"date":"2025-02-26T06:52:41","date_gmt":"2025-02-26T06:52:41","guid":{"rendered":"https:\/\/clar-official.com\/?page_id=3155"},"modified":"2025-04-15T08:16:16","modified_gmt":"2025-04-15T08:16:16","slug":"bientot","status":"publish","type":"page","link":"https:\/\/clar-official.com\/","title":{"rendered":"Bient\u00f4t&#8230;"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull is-light has-accent-1-color has-text-color has-link-color wp-elements-43b92dd07df3794a8ef680218af94049\" style=\"margin-top:0;margin-bottom:0;padding-top:200px;padding-right:var(--wp--preset--spacing--50);padding-bottom:200px;padding-left:var(--wp--preset--spacing--50);min-height:100vh;aspect-ratio:unset;\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-white-background-color has-background-dim-10 has-background-dim\"><\/span><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"2046\" class=\"wp-block-cover__image-background wp-image-3097\" alt=\"\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1.png\" data-object-fit=\"cover\" srcset=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1.png 2880w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1-300x213.png 300w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1-1024x727.png 1024w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1-768x546.png 768w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1-1536x1091.png 1536w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/Untitled_Artwork-1-2048x1455.png 2048w\" sizes=\"auto, (max-width: 2880px) 100vw, 2880px\" \/><div class=\"wp-block-cover__inner-container has-global-padding is-layout-constrained wp-container-core-cover-is-layout-1 wp-block-cover-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-1 wp-block-group-is-layout-flex\"><div class=\"is-default-size aligncenter wp-block-site-logo\"><a href=\"https:\/\/clar-official.com\/\" class=\"custom-logo-link\" rel=\"home\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59.png\" class=\"custom-logo\" alt=\"Clar\" srcset=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59.png 512w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-300x300.png 300w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-150x150.png 150w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-100x100.png 100w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-270x270.png 270w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-192x192.png 192w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-180x180.png 180w, https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-32x32.png 32w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/div>\n\n\n<h2 class=\"wp-block-heading has-text-align-center is-style-text-annotation is-style-text-annotation--1\">Event<\/h2>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading has-text-align-center has-xx-large-font-size\">On peaufine les derniers d\u00e9tails\u2026Restez connect\u00e9s, l\u2019exp\u00e9rience commence ici.<\/h3>\n\n\n\n<p class=\"has-text-align-center\">Vous \u00eates sur le point de recevoir un cadeau, alors en attendant inscrivez-vous !<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button quick form-button is-style-fill\" id=\"openQuickSignup\"><a class=\"wp-block-button__link has-contrast-color has-accent-1-background-color has-text-color has-background has-link-color has-border-color has-accent-1-border-color wp-element-button\">Je m&#8217;inscris<\/a><\/div>\n<\/div>\n\n\n\n<!-- CSS (inchang\u00e9 \u2013 votre charte graphique d\u00e9j\u00e0 appliqu\u00e9e) -->\n<style>\n\n  #submitBtn {\n    position: relative;\n  }\n  \n  #submitBtn:hover::after {\n    content: attr(data-tooltip);\n    position: absolute;\n    bottom: 125%;\n    left: 50%;\n    transform: translateX(-50%);\n    background: rgba(13, 31, 60, 0.85);\n    color: #83acba;\n    padding: 8px 12px;\n    border-radius: 8px;\n    font-size: 13px;\n    line-height: 1.4;\n    white-space: normal;\n    width: 260px;\n    text-align: center;\n    pointer-events: none;\n    z-index: 99;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n  }\n  \n  #submitBtn:hover::before {\n    content: \"\";\n    position: absolute;\n    bottom: 115%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: 6px;\n    border-style: solid;\n    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;\n  }\n  \n  \n  \/* ------------------------- Inscription Modal ----------------------------- *\/\n    #inscriptionModal {\n        opacity: !important;\n    }\n      :root {\n        font-size: 16px;\n        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;\n      }\n      \/* ----------------------------- Checkbox ----------------------------- *\/\n      .form-checkbox {\n        display: flex;\n        align-items: center;\n        font-size: 14px;\n        font-weight: 400;\n        gap: 8px;\n      }\n      .form-checkbox input[type=\"checkbox\"] {\n        width: 20px;\n        height: 20px;\n        cursor: pointer;#\n      }\n      \/* ----------------------------- R\u00e9seaux sociaux ----------------------------- *\/\n      .social-icons {\n        display: flex;\n        justify-content: center;\n        gap: 12px;\n        margin-top: 20px;\n      }\n      \/* ================== TYPOGRAPHIE & BASE ================== *\/\n      h1, h2, h3, h4, h5, h6 {\n        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif !important;\n        margin: 2.5% 5%;\n      }\n      p {\n        font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif !important;\n      }\n      \/* ================== MODAL OVERLAY ================== *\/\n      \n      .modal-overlay {\n        position: fixed;\n        inset: 0;\n        background: rgba(1, 14, 35, 0.65);\n        backdrop-filter: blur(33px);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n        z-index: 10;\n        max-width: 100vw;\n        max-height: 100vh;\n        width: 100%;\n        height: 100%;\n      }\n      \n      .modal-overlay.active {\n        opacity: 1;\n        visibility: visible;\n        background: transparent;\n        max-width: 100vw;\n        width:100%;\n        max-height: 100vh;\n    \n      }\n      \n      \/* ================== MODAL CONTENT (FORMULAIRE) ================== *\/\n      .modal-content {\n        position: relative;\n        background: rgba(30, 46, 74, 0.85);\n        backdrop-filter: blur(25px);\n        padding: 30px;\n        border-radius: 12px;\n        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\n        max-width: 640px;\n        width: 95%;\n        text-align: center;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n      }\n    \n     \n      #inscriptionModal .modal-close {\n        position: absolute;\n        top: 1rem;\n        right: 0.5rem;\n        width: 2.5rem;\n        height: 2.5rem;\n        background: none;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: transform 0.2s ease-in-out;\n        font-size: 22px;\n        color: #3C5179;\n        padding: 2.5%;\n      }\n    \n    \n    \n      #inscriptionModal .modal-close:hover {\n        color: #fff;\n        transform: scale(1.1);\n      }\n      #inscriptionModal .modal-close img {\n        width: 24px !important;\n        height: auto;\n        max-width: 2.5rem;\n        transition: opacity 0.3s ease-in-out;\n        filter: brightness(0) saturate(100%) invert(24%) sepia(21%) saturate(520%) hue-rotate(196deg) brightness(92%) contrast(89%);\n      }\n    \n      \/*\n      #inscriptionModal {\n        display: flex !important;\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\n      }\n    \n      \/* Ajout\u00e9 en JS au clic *\/\n      \/*\n      #inscriptionModal.active {\n        opacity: 1;\n        visibility: visible;\n      }\n      *\/\n    \n      \/* ================== FORMULAIRE ================== *\/\n      .quickform-container {\n        justify-content: center;\n        align-items: center;\n        font-family: Arial, sans-serif;\n        text-align: center;\n        max-width: 90%;\n        margin: auto;\n      }\n      #quickForm {\n        justify-content: center;\n        align-items: center;\n        max-width: 90%;\n        margin: 0 auto;\n      }\n      .form-fields-group {\n        display: flex;\n        flex-direction: column;\n        gap: 16px;\n      }\n      .form-textbox-sidebyside {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        margin-top: 12px;\n      }\n      .row.names {\n        display: flex;\n        gap: 8px;\n      }\n      @media (max-width: 600px) {\n        .form-textbox-sidebyside {\n          flex-direction: column;\n        }\n        .row.names {\n          flex-direction: column;\n        }\n      }\n      .form-textbox-sidebyside input {\n        flex: 1;\n        padding: 12px;\n        border-radius: 6px;\n        border: 1px solid #ddd;\n        font-size: 16px;\n        box-sizing: border-box;\n        transition: 0.3s;\n      }\n      .form-textbox-sidebyside input:focus {\n        border-color: #0071e3;\n        box-shadow: 0 0 5px rgba(0, 113, 227, 0.3);\n      }\n      .submit-wrap {\n        text-align: center;\n        margin-top: 15px;\n      }\n      .submit-wrap button {\n        width: 100%;\n        padding: 12px;\n        background: #0071e3;\n        color: white;\n        border: none;\n        border-radius: 6px;\n        font-size: 16px;\n        cursor: pointer;\n      }\n    \n      \n      .quick-details-container {\n        width: 95%;\n        padding: 1.5rem;\n      }\n    \n      .section-title {\n        font-size: 1.2rem;\n      }\n      \n    \n      .social-icons {\n        display: flex;\n        justify-content: center;\n        margin-top: 20px;\n        gap: 15px;\n      }\n      .social-icons a {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 40px;\n        height: 40px;\n        border-radius: 50%;\n        background: #f0f0f0;\n        transition: transform 0.3s, box-shadow 0.3s;\n        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\n        text-decoration: none;\n      }\n      .social-icons a:hover {\n        transform: scale(1.1);\n        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);\n      }\n      .social-icons svg {\n        width: 20px;\n        height: 20px;\n        fill: rgba(30, 46, 74);\n      }\n      .social-icons img {\n        width: 24px;\n        height: 24px;\n      }\n      \n    \n      \/* ----------------------- QUICK DETAILS & R\u00c9SEAUX SOCIAUX ----------------------- *\/\n      .quick-details-button {\n        background: none;\n        border: none;\n        padding: 0;\n        cursor: pointer;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n      .quick-details-button .central-logo {\n        width: 3rem !important;\n        height: auto !important;\n        object-fit: contain !important;\n        border-radius: 8px !important;\n        display: block !important;\n        max-width: 100% !important;\n        transition: transform 0.2s ease-in-out;\n      }\n      .quick-details-button:hover .central-logo {\n        transform: scale(1.1);\n      }\n    \n      .modal-close {\n        position: absolute;\n        top: 1rem;\n        right: 1rem;\n        width: 2.4rem; \/* Taille fixe *\/\n        height: 2.4rem;\n        background: none;\n        border: none;\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transition: transform 0.2s ease-in-out;\n        z-index: 9999;\n    }\n    \n    \/* Ic\u00f4ne SVG ou image dans le bouton *\/\n    .modal-close img {\n        width: 24px;\n        height: 24px;\n        max-width: 100%;\n        filter: brightness(0) saturate(100%) invert(24%) sepia(21%) saturate(520%) hue-rotate(196deg) brightness(92%) contrast(89%);\n    }\n    \n    \/* Effet au survol *\/\n    .modal-close:hover {\n        transform: scale(1.1);\n    }\n    \n    \/* Correction sp\u00e9cifique pour QuickDetails *\/\n    #quickDetailsModal .modal-close {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    \n    #quickDetailsModal h3 {\n      font-size: 36px;\n      font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;\n      margin-top: 3.3%;\n      margin-bottom: 3.3%;\n    }\n    \n    \/* Correction pour inscriptionModal *\/\n    #inscriptionModal .modal-close {\n        top: 0.5rem;\n        right: 0.5rem;\n    }\n    \n      .switch-icon {\n        width: 1.2rem;\n        height: 1.2rem;\n        fill: #A82E2E; \/* Rouge fonc\u00e9 *\/\n        transition: fill 0.2s ease-in-out;\n      }\n      \n      .modal-close:hover .switch-icon {\n        fill: #7A1E1E; \/* Encore plus fonc\u00e9 au survol *\/\n      }\n    \n    \/* ================== IMAGES ================== *\/\n    .details-row {\n      display: flex;\n      justify-content: center; \/* Centre horizontalement *\/\n      align-items: center; \/* Centre verticalement *\/\n      gap: 1rem;\n      width: 100%;\n      max-width: 90%;\n    }\n    \n    .details-item {\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background: #152338 !important;\n      padding: 1.5rem; \/* Ajoute un espacement interne *\/\n      border-radius: 12px !important; \/* Applique l'arrondi *\/\n      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); \/* Ajoute une ombre *\/\n      overflow: hidden; \/* Assure que l'arrondi s'applique correctement *\/\n    }\n    \n    .details-item img {\n      width: 100%;\n      max-width: 80%; \/* Ajuste la taille sans d\u00e9passer *\/\n      border-radius: 12px !important; \/* Applique l'arrondi *\/\n      display: block; \/* \u00c9vite les marges blanches autour des images inline *\/\n    }\n    \n    \n    \n    \/* ==================  VID\u00c9O CENTRAGE DES IMAGES ================== *\/\n    .details-row {\n      display: flex;\n      justify-content: center; \/* Centre horizontalement *\/\n      align-items: center; \/* Centre verticalement *\/\n      gap: 2.5%;\n      width: 100%;\n      max-width: 100%;\n      margin: auto;\n      background: #152338 !important;\n    }\n    \n    .details-item {\n      flex: 1;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n    \n    .details-item img {\n      width: 100%;\n      max-width: 300px; \/* Taille max pour \u00e9viter que \u00e7a d\u00e9borde *\/\n      border-radius: 12px;\n    }\n    \n    \/* ================== VID\u00c9O CENTRAGE DU CONTENU ================== *\/\n    .details-video-wrapper {\n      width: 100%;\n      max-width: 90%;\n      \/*background: #111113; \/* Fond sombre *\/\n      \/*background: #121C34;*\/\n      background: #152338 !important;\n      \/*background: #18253f; *\/\n      padding: 1.5rem;\n      border-radius: 12px;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: auto;\n    }\n    \n    .details-video-wrapper video {\n      width: 100%;\n      height: auto;\n      max-height: 250px;\n      border-radius: 8px;\n      outline: none;\n      pointer-events: none; \/* Emp\u00eache toute interaction *\/\n    }\n    \n    \/* ================== TEXTE - SECTION \"POURQUOI CLAR ?\"================== *\/\n    .details-text-wrapper {\n      width: 100%;\n      max-width: 90%; \/* Ajuste la largeur max *\/\n      background: #f8f9fa;\n      padding: 1.5rem;\n      border-radius: 12px;\n      text-align: center; \/* Centre le texte *\/\n      font-size: 1rem;\n      font-weight: 500;\n      line-height: 1.6;\n      color: #333;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin: auto; \/* Centre compl\u00e8tement *\/\n    }\n    \n    \n    f8f9fa\n    \n      \/* ----------------------- MODAL QUICK DETAILS (omitted) ----------------------- *\/\n      .hello-text {\n        font-weight: 700;\n        font-size: 1.8rem;\n        color: #0071e3;\n        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;\n      }\n      .quickform-subtitle {\n        font-size: 1.2rem;\n        color: rgba(255, 255, 255, 0.8);\n        margin-top: 5px;\n        animation: fadeIn 1.5s ease-in-out;\n        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;\n      }\n      @keyframes fadeIn {\n        0% { opacity: 0; transform: translateY(5px); }\n        100% { opacity: 1; transform: translateY(0); }\n      }\n    \n    \n      \/* Responsive : Ajustements pour les petits \u00e9crans *\/\n      @media (max-width: 768px) {\n        .details-row {\n            flex-direction: column; \/* Empile les \u00e9l\u00e9ments en mobile *\/\n            align-items: center;\n        }\n    \n        .details-text-wrapper {\n            max-width: 90%; \/* Moins large sur mobile *\/\n        }\n    \n        .details-video-wrapper {\n            max-width: 90%;\n        }\n    }\n    \n     \n    <\/style>\n    \n    <!-- ==== MODAL INSCRIPTION ==== -->\n    <div id=\"inscriptionModal\" class=\"modal-overlay\">\n      <div class=\"modal-content\">\n        <button class=\"modal-close\">\n          <img decoding=\"async\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/switch.svg\" alt=\"Fermer\">\n        <\/button>\n        <div class=\"quickform-container\">\n          <div class=\"quickform-form-intro\">\n            <h3 class=\"quickdetails-title section-title\">\n              <span class=\"hello-text\">Hello.<\/span> Inscription\n            <\/h3>\n            <p class=\"quickform-subtitle\">En attendant la surprise&#8230;<\/p>\n          <\/div>\n          <div class=\"form-fields-group\">\n            <form id=\"quickForm\" data-form-type=\"quick-signup\" data-form-channel=\"contact\">\n              <div class=\"form-fields-group\">\n                <div class=\"form-textbox-sidebyside\">\n                  <div class=\"row names\">\n                    <input type=\"text\" id=\"firstName\" name=\"first_name\" required placeholder=\"Pr\u00e9nom\" minlength=\"2\" maxlength=\"64\">\n                    <input type=\"text\" id=\"lastName\" name=\"last_name\" required placeholder=\"Nom\" minlength=\"2\" maxlength=\"64\">\n                  <\/div>\n                <\/div>\n                <div class=\"form-textbox-sidebyside\">\n                  <div class=\"row names\">\n                    <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"Adresse e-mail\" minlength=\"2\" maxlength=\"128\">\n                    <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"Num\u00e9ro de t\u00e9l\u00e9phone\" minlength=\"10\" maxlength=\"15\">\n                  <\/div>\n                <\/div>\n              <\/div>\n              <!-- Consentement pour les e-mails -->\n              <div class=\"form-textbox-sidebyside\">\n                <label for=\"nl-acceptance\" class=\"form-checkbox\">\n                <input type=\"checkbox\" id=\"nl-acceptance\" name=\"nl_acceptance\" value=\"1\" checked>\n                  J\u2019accepte de recevoir des e-mails de votre part\n                <\/label>\n              <\/div>\n              <!-- \ud83d\udd12 Ajout du champ nonce ici -->\n              <div class=\"submit-wrap\">\n    <button type=\"submit\" id=\"submitBtn\" data-tooltip=\"Vous acceptez de partager vos informations avec nos partenaires agr\u00e9\u00e9s afin de r\u00e9pondre \u00e0 votre demande. Vos informations seront utilis\u00e9es uniquement pour les communications op\u00e9rationnelles et transactionnelles n\u00e9cessaires.\">\n      Envoyer\n    <\/button>\n  <\/div>\n          <input type=\"hidden\" id=\"disclaimer_timestamp\" name=\"disclaimer_timestamp\">\n            <\/form>\n          <\/div>\n          <!-- R\u00e9seaux sociaux -->\n          <div class=\"social-icons\">\n            <!-- Facebook -->\n            <a href=\"https:\/\/www.facebook.com\" aria-label=\"Facebook\">\n              <svg role=\"img\" viewBox=\"0 0 24 24\">\n                <title>Facebook<\/title>\n                <path d=\"M22.675 0H1.325C0.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.796.715-1.796 1.763v2.312h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.407 24 22.675V1.325C24 .593 23.407 0 22.675 0z\"\/>\n              <\/svg>\n            <\/a>\n            <!-- Twitter -->\n            <a href=\"https:\/\/twitter.com\" aria-label=\"Twitter\">\n              <svg role=\"img\" viewBox=\"0 0 24 24\">\n                <title>Twitter<\/title>\n                <path d=\"M23.954 4.569c-0.885.389-1.83.654-2.825.775a4.695 4.695 0 0 0 2.048-2.59 9.39 9.39 0 0 1-2.974 1.136 4.678 4.678 0 0 0-7.965 4.263 13.267 13.267 0 0 1-9.64-4.88 4.672 4.672 0 0 0 1.286 5.537 4.11 4.11 0 0 1-1.872-.508v.05a4.14 4.14 0 0 0 3.32 4.064 4.18 4.18 0 0 1-1.868.07 4.14 4.14 0 0 0 3.868 2.89 8.3 8.3 0 0 1-5.12 1.76 8.23 8.23 0 0 1-0.976-0.057 11.67 11.67 0 0 0 6.29 1.84c7.548 0 11.675-6.268 11.675-11.698 0-.18 0-.36-.012-.54a8.23 8.23 0 0 0 2.46-2.548z\"\/>\n              <\/svg>\n            <\/a>\n            <!-- Bouton Clar -->\n            <button class=\"quick-details-button\" id=\"openQuickDetails\">\n              <img decoding=\"async\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/01\/cropped-Image_25-01-2025_a_21.59-1.png\" alt=\"Clar\" class=\"central-logo\">\n            <\/button>\n            <!-- LinkedIn -->\n            <a href=\"https:\/\/www.linkedin.com\" aria-label=\"LinkedIn\">\n              <svg role=\"img\" viewBox=\"0 0 24 24\">\n                <title>LinkedIn<\/title>\n                <path d=\"M20.447 20.452h-3.554v-5.569c0-1.327-0.027-3.037-1.849-3.037-1.849 0-2.133 1.445-2.133 2.938v5.668h-3.554V9h3.414v1.561h0.046c0.476-0.9 1.637-1.849 3.369-1.849 3.6 0 4.268 2.368 4.268 5.451v6.289zM5.337 7.433c-1.144 0-2.072-0.928-2.072-2.072 0-1.144 0.928-2.072 2.072-2.072s2.072 0.928 2.072 2.072c0 1.144-0.928 2.072-2.072 2.072zM6.976 20.452H3.698V9h3.278v11.452zM22.225 0H1.771C0.792 0 0 0.771 0 1.723v20.553C0 23.229 0.792 24 1.771 24h20.451C23.208 24 24 23.229 24 22.277V1.723C24 0.771 23.208 0 22.225 0z\"\/>\n              <\/svg>\n            <\/a>\n            <!-- Discord -->\n            <a href=\"https:\/\/discord.com\" aria-label=\"Discord\">\n              <svg role=\"img\" viewBox=\"0 0 24 24\">\n                <title>Discord<\/title>\n                <path d=\"M20.317 4.369a19.791 19.791 0 0 0-4.885-1.515.07.07 0 0 0-.073.035c-0.212 0-0.422 0.03-0.626 0.09-1.912 0.828-3.36 1.256-4.662 1.513a.086.086 0 0 0-.042.03c-0.291 0.2-0.553 0.442-0.773 0.722-1.553-0.232-3.093-0.732-4.608-1.514a.07.07 0 0 0-.073-.035 19.736 19.736 0 0 0-4.885 1.515.066.066 0 0 0-.031.027C.533 9.101-.32 13.188.099 17.124a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.995 3.03.077.077 0 0 0 .084-.027c0-.034 0-.068 0-.102 0-1.023 0.543-1.86 1.214-2.54a9.925 9.925 0 0 1 7.518-2.981c2.724 0 5.31 1.684 6.184 4.044a9.93 9.93 0 0 1-7.518 2.981c-0.22 0-0.436-0.009-0.65-0.027 0.005 0.012 0.01 0.024 0.014 0.036 0 1.023-0.543 1.86-1.214 2.54a9.954 9.954 0 0 1-7.518 2.981c-2.724 0-5.31-1.684-6.184-4.044a9.93 9.93 0 0 0-3.76-5.231.074.074 0 0 1-.006-0.075z\"\/>\n              <\/svg>\n            <\/a>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    \n    <!-- ==== MODAL QUICK DETAILS (Unchanged) ==== -->\n    <div id=\"quickDetailsModal\" class=\"modal-overlay\">\n      <div class=\"modal-content\">\n        <button class=\"modal-close\" id=\"closeQuickDetails\">\n          <img decoding=\"async\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/switch.svg\" alt=\"Fermer\">\n        <\/button>\n        <div class=\"quick-details-container\" id=\"quickDetailsContainer\">\n          <div class=\"rubrique\">\n            <h3 class=\"quickdetails-title section-title\">Par la lucarne<\/h3>\n            <div class=\"rubrique-content quick-details-items\">\n              <div class=\"details-row\">\n                <div class=\"details-item\">\n                  <img decoding=\"async\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/about.png\" alt=\"\u00c0 propos\">\n                <\/div>\n                <div class=\"details-item\">\n                  <img decoding=\"async\" src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/schedule-us.png\" alt=\"Schedule\">\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"rubrique\">\n            <h3 class=\"quickdetails-title section-title\">\u00c0 propos de Clar<\/h3>\n            <div class=\"rubrique-content details-bottom\">\n              <div class=\"details-video details-video-wrapper\">\n                <video autoplay loop muted playsinline>\n                  <source src=\"https:\/\/clar-official.com\/wp-content\/uploads\/2025\/02\/relaxing-wave-1.mp4\" type=\"video\/mp4\">\n                  Votre navigateur ne supporte pas la lecture de vid\u00e9os.\n                <\/video>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div class=\"rubrique\">\n            <h3 class=\"quickdetails-title section-title\">Pourquoi Clar ?<\/h3>\n            <div class=\"rubrique-content details-text details-text-wrapper\">\n              <p>\n                Un site rapide, structur\u00e9 et \u00e9pur\u00e9, con\u00e7u pour incarner la philosophie de CLAR :\n                optimiser la productivit\u00e9 num\u00e9rique tout en assurant une cybers\u00e9curit\u00e9 robuste.\n                Il sert de vitrine \u00e0 une approche o\u00f9 la simplicit\u00e9 est un art, un levier de performance et de s\u00e9r\u00e9nit\u00e9 num\u00e9rique.\n              <\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n\n\n<style>\n\t\/* Banni\u00e8re principale *\/\n.cookie-banner {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  background: rgba(0,0,0,0.7);\n  color: #fff;\n  z-index: 9999;\n  font-family: sans-serif;\n  transition: transform 0.4s ease-in-out;\n}\n\n.cookie-banner.hidden {\n  transform: translateY(100%); \/* masqu\u00e9 en dessous de l\u2019\u00e9cran *\/\n}\n\n.cookie-banner-inner {\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 1.5rem;\n  background: #2e2e2e;\n  box-shadow: 0 -2px 10px rgba(0,0,0,0.3);\n}\n\n.cookie-banner h2 {\n  margin-top: 0;\n  font-size: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.cookie-banner p {\n  margin: 0.5rem 0 1rem;\n}\n\n.consent-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin: 0.5rem 0;\n}\n\n.toggle-label {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n}\n\n.toggle-label span {\n  font-size: 1rem;\n  margin-right: 1rem;\n}\n\n\/* Style du switch fa\u00e7on iOS *\/\n.toggle-switch {\n  position: relative;\n  display: inline-block;\n  width: 44px;\n  height: 24px;\n}\n\n.toggle-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background-color: #ccc;\n  border-radius: 24px;\n  transition: .4s;\n}\n\n.slider:before {\n  position: absolute;\n  content: \"\";\n  height: 18px;\n  width: 18px;\n  left: 3px;\n  bottom: 3px;\n  background-color: white;\n  border-radius: 50%;\n  transition: .4s;\n}\n\n\/* ON *\/\n.toggle-switch input:checked + .slider {\n  background-color: #2196F3;\n}\n\n.toggle-switch input:checked + .slider:before {\n  transform: translateX(20px);\n}\n\n\/* Boutons *\/\n.button-row {\n  display: flex;\n  justify-content: flex-end;\n  gap: 1rem;\n  margin-top: 1rem;\n}\n\n.button-row button {\n  padding: 0.5rem 1rem;\n  border: none;\n  cursor: pointer;\n  background: #444;\n  color: #fff;\n  border-radius: 4px;\n}\n\n.button-row button:hover {\n  background: #555;\n}\n\n\/* Lien footer *\/\n.banner-footer {\n  margin-top: 1rem;\n  text-align: center;\n}\n\n.banner-footer a {\n  color: #ccc;\n  text-decoration: underline;\n  font-size: 0.9rem;\n}\n<\/style>\n<!-- BANNI\u00c8RE DE CONSENTEMENT -->\n<div id=\"cookie-banner\" class=\"cookie-banner hidden\">\n  <div class=\"cookie-banner-inner\">\n    <h2>Vos pr\u00e9f\u00e9rences de confidentialit\u00e9<\/h2>\n    <p>Nous utilisons des cookies et collectons certaines donn\u00e9es pour am\u00e9liorer votre exp\u00e9rience.<\/p>\n\n    <div class=\"consent-row\">\n      <label class=\"toggle-label\">\n        <span>Marketing &#038; Newsletters<\/span>\n        <label class=\"toggle-switch\">\n          <input type=\"checkbox\" id=\"toggle-marketing\" name=\"marketing_opt_in\" \/>\n          <span class=\"slider\"><\/span>\n        <\/label>\n      <\/label>\n    <\/div>\n\n    <div class=\"consent-row\">\n      <label class=\"toggle-label\">\n        <span>Statistiques &#038; Analytics<\/span>\n        <label class=\"toggle-switch\">\n          <input type=\"checkbox\" id=\"toggle-analytics\" name=\"analytics_opt_in\" \/>\n          <span class=\"slider\"><\/span>\n        <\/label>\n      <\/label>\n    <\/div>\n\n    <div class=\"consent-row\">\n      <label class=\"toggle-label\">\n        <span>Personnalisation Publicit\u00e9s<\/span>\n        <label class=\"toggle-switch\">\n          <input type=\"checkbox\" id=\"toggle-ads\" name=\"ads_personalization\" \/>\n          <span class=\"slider\"><\/span>\n        <\/label>\n      <\/label>\n    <\/div>\n\n    <div class=\"button-row\">\n      <button id=\"btn-refuse-all\">Tout refuser<\/button>\n      <button id=\"btn-accept-all\">Tout accepter<\/button>\n      <button id=\"btn-save-preferences\">Enregistrer<\/button>\n    <\/div>\n\n    <p class=\"banner-footer\">\n      <a href=\"\/politique-de-confidentialite\">En savoir plus<\/a>\n    <\/p>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  const banner = document.getElementById(\"cookie-banner\");\n  const marketingToggle = document.getElementById(\"toggle-marketing\");\n  const analyticsToggle = document.getElementById(\"toggle-analytics\");\n  const adsToggle = document.getElementById(\"toggle-ads\");\n\n  \/\/ V\u00e9rifier si l'utilisateur a d\u00e9j\u00e0 choisi (localStorage par exemple)\n  const existingChoice = localStorage.getItem(\"cookieConsentChoice\");\n  if (!existingChoice) {\n    \/\/ Afficher la banni\u00e8re\n    banner.classList.remove(\"hidden\");\n  }\n\n  \/\/ Bouton \"Tout refuser\"\n  document.getElementById(\"btn-refuse-all\").addEventListener(\"click\", () => {\n    marketingToggle.checked = false;\n    analyticsToggle.checked = false;\n    adsToggle.checked = false;\n    saveConsent(false);\n  });\n\n  \/\/ Bouton \"Tout accepter\"\n  document.getElementById(\"btn-accept-all\").addEventListener(\"click\", () => {\n    marketingToggle.checked = true;\n    analyticsToggle.checked = true;\n    adsToggle.checked = true;\n    saveConsent(true);\n  });\n\n  \/\/ Bouton \"Enregistrer\"\n  document.getElementById(\"btn-save-preferences\").addEventListener(\"click\", () => {\n    saveConsent();\n  });\n\n  function saveConsent(acceptAll) {\n    \/\/ Lecture des toggles\n    const marketing = marketingToggle.checked ? 1 : 0;\n    const analytics = analyticsToggle.checked ? 1 : 0;\n    const ads       = adsToggle.checked ? 1 : 0;\n\n    \/\/ Optionnel : Envoi AJAX vers votre plugin\n    \/\/ On peut r\u00e9utiliser window.yuzForms.sendAjax ou fetch() direct\n    \/*\n    fetch('\/wp-admin\/admin-ajax.php', {\n      method: 'POST',\n      body: new URLSearchParams({\n        action: 'save_cookie_consent',\n        marketing_opt_in: marketing,\n        analytics_opt_in: analytics,\n        ads_opt_in: ads\n      })\n    }).then(r => r.json()).then(resp => {\n      console.log('Consent saved on server:', resp);\n    });\n    *\/\n\n    \/\/ On stocke localement (pour ne pas r\u00e9-afficher la banni\u00e8re)\n    localStorage.setItem(\"cookieConsentChoice\", \"done\");\n    \/\/ Masquer la banni\u00e8re\n    banner.classList.add(\"hidden\");\n    console.log(\"Consentences:\", {marketing, analytics, ads});\n  }\n});\n<\/script>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-3155","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/pages\/3155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/comments?post=3155"}],"version-history":[{"count":933,"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/pages\/3155\/revisions"}],"predecessor-version":[{"id":4550,"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/pages\/3155\/revisions\/4550"}],"wp:attachment":[{"href":"https:\/\/clar-official.com\/wp-json\/wp\/v2\/media?parent=3155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}