/* * Interactions — réactivation des animations et correctifs d'états. * * PIÈGE DE SPÉCIFICITÉ, à retenir pour toute correction future sur cette page : * le CSS du design system est inline dans le , donc il est TOUJOURS chargé * après cette feuille, qui est dans le . À !important et spécificité égaux, * c'est lui qui gagne. Toute règle écrite ici doit donc être strictement plus * spécifique que celle qu'elle remplace, jamais seulement !important. * * Les trois cibles réelles, mesurées dans le navigateur : * .na-native-testimonials .na-carousel-viewport (0,2,0) overflow-x:hidden * #na-quiz-modal button:focus-visible (1,1,1) survol indigo * .na-proof-avatar,.na-avatar,.na-star-unit (0,1,0) transition:none */ /* --- 0. hero : métadonnées lisibles et lien vers le parcours -------------- */ .elementor-151 .na-hero .na-kicker, .elementor-151 .na-hero .na-kicker p, .elementor-151 .na-hero .na-caption, .elementor-151 .na-hero .na-caption p { font-size: 17px !important; line-height: 1.4 !important; } .elementor-151 .na-hero .na-caption a { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 4px !important; } .elementor-151 .na-hero .na-caption a:hover { color: var( --bambou, #dcff66 ) !important; } .elementor-151 .na-hero .na-caption a:focus-visible { outline: 2px solid var( --bambou, #dcff66 ) !important; outline-offset: 4px !important; border-radius: 2px; } .elementor-151 #parcours { scroll-margin-top: 24px; } /* --- 1. glow des avatars et des étoiles ------------------------------------ */ .elementor-151 .na-hero-proof .na-proof-avatar, .elementor-151 .na-hero-proof .na-star-unit, .elementor-151 .na-testimonial-card .na-avatar, .elementor-151 .na-testimonial-card .na-star-unit { transition: transform 0.42s cubic-bezier( 0.22, 0.61, 0.36, 1 ), filter 0.42s ease, box-shadow 0.42s ease, text-shadow 0.42s ease, color 0.42s ease !important; transition-duration: 0.42s !important; } .elementor-151 .na-native-testimonials .na-testimonial-card { transition: transform 0.5s cubic-bezier( 0.22, 0.61, 0.36, 1 ), box-shadow 0.5s ease !important; transition-duration: 0.5s !important; } /* --- 2. carrousel : défilement latéral et glissement ----------------------- */ /* * overflow-x était forcé à "hidden" : le défilement latéral était tout simplement * impossible, à la souris comme au doigt. Et le snap "mandatory" reprenait la main * pendant le défilement programmé, ce qui produisait le saut au lieu du glissement. */ .elementor-151 .na-native-testimonials .na-carousel-viewport, .elementor-151 .na-carousel .na-carousel-viewport { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity !important; scroll-behavior: auto !important; /* l'animation est pilotée en JS */ -webkit-overflow-scrolling: touch !important; touch-action: pan-x pan-y !important; cursor: grab; } .elementor-151 .na-native-testimonials .na-carousel-viewport.is-na-dragging, .elementor-151 .na-carousel .na-carousel-viewport.is-na-dragging { cursor: grabbing; scroll-snap-type: none !important; } /* --- 3. quiz : deux états, pas trois --------------------------------------- */ /* * Mesuré dans le navigateur : le CSS inline contient exactement * #na-quiz-modal .na-choice-card[aria-pressed="true"] -> indigo !important * soit la même spécificité (1,2,0) que ma première tentative. À égalité, c'est le * dernier chargé qui gagne, et l'inline est plus bas dans le document. La classe * est donc répétée (.na-choice-card.na-choice-card) pour monter à (1,3,0) sans * dépendre de la structure du DOM. * * Trois règles produisaient trois apparences pour deux états : * [aria-pressed=true] -> indigo translucide (sélectionnée) * button:hover/:focus-visible-> indigo opaque (celle sous le curseur) * button:active -> indigo opaque (au clic) * D'où une carte sélectionnée qui changeait de couleur au survol. */ #na-quiz-modal .na-choice-card.na-choice-card { transition: border-color 0.2s ease, background-color 0.2s ease !important; } /* SÉLECTIONNÉE — un seul aspect, quel que soit le survol, le focus ou le clic. */ #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"], #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:hover, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:focus, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:focus-visible, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:active { background: rgba( 130, 126, 252, 0.18 ) !important; border-color: var( --indigo, #827efc ) !important; transform: none !important; } #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"] strong, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"] span, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:hover strong, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:hover span, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:active strong, #na-quiz-modal .na-choice-card.na-choice-card[aria-pressed="true"]:active span { color: var( --vert-fonce, #004131 ) !important; } /* NON SÉLECTIONNÉE — un seul aspect au survol, nettement distinct de la sélection. */ #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]), #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]):active { background: rgba( 253, 247, 231, 0.92 ) !important; border-color: rgba( 0, 65, 49, 0.2 ) !important; transform: none !important; } #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]):hover, #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]):focus-visible { background: rgba( 255, 255, 255, 0.96 ) !important; border-color: rgba( 130, 126, 252, 0.32 ) !important; transform: none !important; } #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]) strong, #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]) span, #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]):hover strong, #na-quiz-modal .na-choice-card.na-choice-card:not([aria-pressed="true"]):hover span { color: var( --vert-fonce, #004131 ) !important; } /* --- 4. douleurs : liste-accordéon mobile first --------------------------- */ /* * Les cartes conservent l'ordre naturel de Gutenberg et partagent un axe de * lecture unique avec le titre et la fin du bloc. Les couleurs et les polices * viennent toujours du design system. */ .elementor-151 .na-section-indigo > .na-shell { align-items: flex-start !important; } .elementor-151 .na-section-indigo > .na-shell > .na-heading { align-self: stretch !important; width: min( 860px, 100% ) !important; max-width: none !important; margin: 0 !important; text-align: left !important; } .elementor-151 .na-section-indigo > .na-shell > .na-heading .elementor-heading-title, .elementor-151 .na-section-indigo > .na-shell > .na-heading h2 { margin: 0 0 28px !important; text-align: left !important; } .elementor-151 .na-card-grid { display: grid !important; grid-template-columns: minmax( 0, 1fr ) !important; gap: 12px !important; width: min( 860px, 100% ) !important; margin: 0 !important; border-top: 0 !important; } /* Sans JavaScript, cette liste ordonnée garde toutes les descriptions visibles. */ .elementor-151 .na-card-grid > .na-problem-card { position: relative !important; display: grid !important; grid-template-columns: 48px minmax( 0, 1fr ) !important; grid-template-rows: auto auto !important; gap: 0 14px !important; align-items: center !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 76px !important; margin: 0 !important; padding: 16px 48px 16px 16px !important; border: 1px solid rgba( 0, 65, 49, 0.14 ) !important; border-radius: 12px !important; background: rgba( 255, 245, 226, 0.76 ) !important; box-shadow: 0 5px 16px rgba( 0, 65, 49, 0.045 ) !important; overflow: hidden !important; translate: none !important; transition: border-color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease !important; } .elementor-151 .na-card-grid > .na-problem-card::after { content: "" !important; display: block !important; position: absolute !important; inset: 0 auto 0 0 !important; width: 4px !important; height: auto !important; background: var( --problem-accent, var( --indigo, #827efc ) ) !important; opacity: 0.82 !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: start !important; width: 44px !important; height: 44px !important; margin: 0 !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-icon img { width: 36px !important; height: 36px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-title { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; margin: 0 !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-title .elementor-heading-title, .elementor-151 .na-card-grid > .na-problem-card .na-problem-title h3 { margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1.25 !important; color: var( --vert-fonce, #004131 ) !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-text { position: static !important; grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 7px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-text p, .elementor-151 .na-card-grid > .na-problem-card .na-problem-text .elementor-widget-container { font-size: 16px !important; line-height: 1.5 !important; color: rgba( 0, 65, 49, 0.78 ) !important; } /* * La classe n'existe qu'après initialisation. Le bouton couvre la carte et son * signe +/− rend l'action explicite au toucher comme au clavier. */ .elementor-151 .na-card-grid > .na-problem-card.is-na-problem-disclosure:not( .is-na-problem-open ) .na-problem-text { max-height: 0 !important; margin-top: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; transform: translateY( -4px ) !important; pointer-events: none !important; transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.28s !important; } .elementor-151 .na-card-grid > .na-problem-card.is-na-problem-disclosure.is-na-problem-open { border-color: var( --problem-accent, var( --indigo, #827efc ) ) !important; background: rgba( 255, 245, 226, 0.96 ) !important; box-shadow: 0 9px 24px rgba( 0, 65, 49, 0.08 ) !important; } .elementor-151 .na-card-grid > .na-problem-card.is-na-problem-disclosure.is-na-problem-open .na-problem-text { max-height: var( --na-problem-text-height, 240px ) !important; margin-top: 7px !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle { appearance: none !important; position: absolute !important; inset: 0 !important; z-index: 3 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::before, .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::after { content: "" !important; position: absolute !important; top: 38px !important; background: var( --vert-fonce, #004131 ) !important; border-radius: 99px !important; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s ease !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::before { right: 18px !important; width: 16px !important; height: 2px !important; transform: translateY( -50% ) !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::after { right: 25px !important; width: 2px !important; height: 16px !important; transform: translateY( -50% ) !important; } .elementor-151 .na-card-grid > .na-problem-card.is-na-problem-open .na-problem-toggle::after { opacity: 0 !important; transform: translateY( -50% ) rotate( 90deg ) !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle:focus-visible { outline: 2px solid var( --indigo, #827efc ) !important; outline-offset: -4px !important; } /* Survol visuel uniquement : il ne révèle jamais une description. */ @media ( hover: hover ) and ( pointer: fine ) { .elementor-151 .na-card-grid > .na-problem-card:has( .na-problem-toggle:hover ) { border-color: rgba( 130, 126, 252, 0.42 ) !important; box-shadow: 0 8px 22px rgba( 0, 65, 49, 0.075 ) !important; } .elementor-151 .na-card-grid > .na-problem-card.is-na-problem-disclosure:not( .is-na-problem-open ):has( .na-problem-toggle:hover ) .na-problem-text { max-height: 0 !important; opacity: 0 !important; visibility: hidden !important; transform: translateY( -4px ) !important; } } /* La conclusion rassurante ferme la liste sans prendre l'apparence d'un CTA. */ .elementor-151 .na-card-grid > .na-intro { width: 100% !important; max-width: none !important; margin: 8px 0 0 !important; padding: 18px 18px 18px 20px !important; border-left: 4px solid var( --indigo, #827efc ) !important; border-radius: 0 12px 12px 0 !important; background: rgba( 130, 126, 252, 0.08 ) !important; } .elementor-151 .na-card-grid > .na-intro p { margin: 0 !important; font-size: 17px !important; line-height: 1.48 !important; color: var( --vert-fonce, #004131 ) !important; } .elementor-151 .na-card-grid > .na-intro p:empty { display: none !important; } @media ( min-width: 641px ) { .elementor-151 .na-card-grid { gap: 14px !important; } .elementor-151 .na-card-grid > .na-problem-card { grid-template-columns: 64px minmax( 0, 1fr ) !important; min-height: 92px !important; padding: 20px 64px 20px 22px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-icon { width: 52px !important; height: 52px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-icon img { width: 42px !important; height: 42px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-title .elementor-heading-title, .elementor-151 .na-card-grid > .na-problem-card .na-problem-title h3 { font-size: 19px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-text p, .elementor-151 .na-card-grid > .na-problem-card .na-problem-text .elementor-widget-container { font-size: 18px !important; } .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::before, .elementor-151 .na-card-grid > .na-problem-card .na-problem-toggle::after { top: 46px !important; } .elementor-151 .na-card-grid > .na-intro { padding: 21px 24px !important; } .elementor-151 .na-card-grid > .na-intro p { font-size: 19px !important; } } /* --- 5. bénéfices : titre centré, texte progressif ------------------------- */ .elementor-151 .na-benefit-plasma-section .na-benefit { --na-benefit-closed-height: 176px; } /* * Le titre et le paragraphe conservent leur mise en page d'origine. JavaScript * mesure cette géométrie et fournit la translation qui place le titre exactement * au centre de la carte. Au survol, la translation revient à zéro pendant que le * paragraphe apparaît à sa droite. * * La classe d'amélioration n'existe que lorsque le script a réussi : sans * JavaScript, le texte reste visible et les cartes gardent leur rendu précédent. */ .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure { height: auto !important; min-height: var( --na-benefit-closed-height ) !important; max-height: var( --na-benefit-closed-height ) !important; transition: max-height 0.36s ease, transform 0.24s ease, border-color 0.24s ease, background-color 0.24s ease, box-shadow 0.24s ease !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure h3 { position: relative !important; z-index: 2 !important; transform: translate( var( --na-benefit-title-rest-x, 0 ), var( --na-benefit-title-rest-y, 0 ) ) !important; transform-origin: center !important; transition: transform 0.34s cubic-bezier( 0.22, 1, 0.36, 1 ) !important; will-change: transform; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure p { position: relative !important; z-index: 2 !important; opacity: 0 !important; visibility: hidden !important; transform: translateX( 14px ) !important; pointer-events: none !important; transition: opacity 0.28s ease, transform 0.34s cubic-bezier( 0.22, 1, 0.36, 1 ), visibility 0s linear 0.34s !important; will-change: opacity, transform; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure .na-benefit-toggle { appearance: none !important; position: absolute !important; inset: 0 !important; z-index: 4 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure .na-benefit-toggle:focus-visible { outline: 3px solid var( --vert-fonce, #004131 ) !important; outline-offset: -6px !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-open h3, .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-open p { transform: none !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-open p { opacity: 1 !important; visibility: visible !important; transition-delay: 0s !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-initializing, .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-initializing h3, .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-initializing p { transition: none !important; } @media ( hover: hover ) and ( pointer: fine ) { .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure:has( .na-benefit-toggle:hover ) h3, .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure:has( .na-benefit-toggle:hover ) p { transform: none !important; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure:has( .na-benefit-toggle:hover ) p { opacity: 1 !important; visibility: visible !important; transition-delay: 0s !important; } } @media ( max-width: 640px ) { .elementor-151 .na-benefit-plasma-section .na-benefit { --na-benefit-closed-height: 132px; } .elementor-151 .na-benefit-plasma-section .na-benefit.is-na-benefit-disclosure.is-na-benefit-open { max-height: 320px !important; } } /* --- 6. dévoilement au défilement (section « problèmes ») ------------------ */ /* * La classe .na-reveal est posée par le JavaScript, jamais écrite dans le HTML : * si le script ne s'exécute pas, rien n'est masqué et la section reste lisible. * * Actif sur toutes les tailles d'écran. Le mouvement est volontairement court * (14 px) pour rester discret sur grand écran, où les cartes sont visibles d'un * seul coup d'oeil. */ .elementor-151 .na-section-indigo .na-reveal { opacity: 0; transform: translateY( 14px ); /* * !important obligatoire : elementor-frontend.css contient, sous * @media (prefers-reduced-motion: reduce), la règle `html * { transition-duration: 0s !important }` * qui annule toutes les transitions de la page. Une spécificité supérieure ne * suffit pas face à un !important — c'est ce qui faisait apparaître les cartes * d'un bloc au lieu de les faire monter en fondu. */ transition: opacity 0.58s cubic-bezier( 0.22, 0.61, 0.36, 1 ), transform 0.58s cubic-bezier( 0.22, 0.61, 0.36, 1 ) !important; will-change: opacity, transform; } .elementor-151 .na-section-indigo .na-reveal.is-na-revealed { opacity: 1; transform: none; } /* Un peu plus d'amplitude sur mobile, où l'on découvre les cartes une par une. */ @media ( max-width: 1020px ) { .elementor-151 .na-section-indigo .na-reveal { transform: translateY( 20px ); } } /* --- 7. FAQ native (core/details) ------------------------------------------ */ /* * La FAQ était un accordéon Elementor dans un bloc HTML : illisible et non * modifiable dans l'éditeur. Elle utilise maintenant core/details, donc le titre * et la réponse s'éditent directement, et le dépliage marche sans JavaScript. * * Les sélecteurs visent les éléments `details` / `summary` et non `.wp-block-details` : * la passe de nettoyage retire tous les `wp-block-*` du rendu final. */ .elementor-151 .na-faq details { background: rgba( 255, 245, 226, 0.08 ); border: 1px solid rgba( 255, 245, 226, 0.18 ); border-radius: 8px; margin: 0 0 10px; overflow: hidden; } .elementor-151 .na-faq details:last-child { margin-bottom: 0; } .elementor-151 .na-faq summary { position: relative; list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; font-size: 16px; line-height: 1.22; font-weight: 700; color: var( --beige, #fff5e2 ); transition: background-color 0.2s ease !important; } /* Le chevron par défaut du navigateur est remplacé par un + / − maison. */ .elementor-151 .na-faq summary::-webkit-details-marker, .elementor-151 .na-faq summary::marker { display: none; content: ''; } .elementor-151 .na-faq summary::after { content: ''; position: absolute; right: 16px; top: 50%; width: 13px; height: 13px; margin-top: -6px; /* Deux traits croisés : le vertical disparaît à l'ouverture, il reste un « − ». */ background: linear-gradient( var( --bambou, #dcff66 ), var( --bambou, #dcff66 ) ) center / 100% 2px no-repeat, linear-gradient( var( --bambou, #dcff66 ), var( --bambou, #dcff66 ) ) center / 2px 100% no-repeat; transition: transform 0.28s ease, opacity 0.28s ease !important; } .elementor-151 .na-faq details[open] summary::after { background: linear-gradient( var( --bambou, #dcff66 ), var( --bambou, #dcff66 ) ) center / 100% 2px no-repeat; transform: rotate( 180deg ); } .elementor-151 .na-faq summary:hover, .elementor-151 .na-faq details[open] summary { background: rgba( 255, 245, 226, 0.12 ); } .elementor-151 .na-faq summary:focus-visible { outline: 2px solid var( --bambou, #dcff66 ); outline-offset: -2px; } .elementor-151 .na-faq details > p, .elementor-151 .na-faq details > *:not( summary ) { margin: 0; padding: 4px 16px 16px; font-size: 15px; line-height: 1.5; color: rgba( 255, 245, 226, 0.8 ); } /* --- 8. confirmation du numéro avant Calendly ----------------------------- */ .elementor-151 .na-phone-confirmation { display: grid; gap: 9px; padding: 16px; border: 1px solid rgba( 130, 126, 252, 0.4 ); border-radius: 12px; background: rgba( 130, 126, 252, 0.08 ); color: var( --vert-fonce, #004131 ); } .elementor-151 .na-phone-confirmation p { margin: 0; } .elementor-151 .na-phone-confirmation-call { font-size: 17px; line-height: 1.4; } .elementor-151 .na-phone-confirmation-call strong { white-space: nowrap; color: var( --vert-fonce, #004131 ); } .elementor-151 .na-phone-confirmation-fallback { font-size: 14px; line-height: 1.45; color: rgba( 0, 65, 49, 0.75 ); } .elementor-151 .na-quiz-form label.na-phone-confirmation-check { display: flex; grid-template-columns: none; align-items: flex-start; gap: 9px; font-weight: 700; line-height: 1.45; } .elementor-151 .na-quiz-form .na-phone-confirmation-check input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; min-width: 18px; min-height: 18px; padding: 0; margin-top: 3px; } .elementor-151 .na-phone-confirmation-edit { justify-self: start; padding: 0; border: 0; background: transparent; color: var( --vert-fonce, #004131 ); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .elementor-151 .na-phone-confirmation-edit:focus-visible { outline: 2px solid var( --indigo, #827efc ); outline-offset: 3px; }