.elementor-kit-10{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-10 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */:root{
  --strx-navy:#13192D;
  --strx-navy2:#1E2740;
  --strx-blue:#0087CC;
  --strx-teal:#12959B;
  --strx-green:#7AB929;
  --strx-line:#E1E6ED;
  --strx-radius:14px;
  --strx-lift:-6px;          /* hauteur du soulèvement au survol */
  --strx-speed:.38s;         /* vitesse des animations */
  --strx-glass:.72;          /* opacité du verre, 1 = opaque */
  --strx-blur:14px;          /* intensité du flou */
}

/* --- 2. Cartes claires : verre dépoli et survol ---------------------------
   Elementor n'applique pas les classes CSS aux conteneurs. On cible donc
   les cartes par le widget qu'elles contiennent, avec :has().             */
.strx-card,
.e-con:has(> .strx-deliver){
  background: rgba(255,255,255,var(--strx-glass)) !important;
  -webkit-backdrop-filter: blur(var(--strx-blur)) saturate(150%);
  backdrop-filter: blur(var(--strx-blur)) saturate(150%);
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: var(--strx-radius) !important;
  box-shadow: 0 1px 2px rgba(19,25,45,.04), 0 10px 28px rgba(19,25,45,.07) !important;
  transition: transform var(--strx-speed) cubic-bezier(.2,.75,.3,1),
              box-shadow var(--strx-speed) ease,
              border-color var(--strx-speed) ease;
}
.strx-card:hover,
.e-con:has(> .strx-deliver):hover{
  transform: translateY(var(--strx-lift));
  box-shadow: 0 2px 4px rgba(19,25,45,.05), 0 22px 50px rgba(19,25,45,.14) !important;
  border-color: rgba(19,25,45,.16) !important;
}

/* --- 3. Icônes hexagonales ------------------------------------------------ */
.strx-ic{ transition: transform var(--strx-speed) cubic-bezier(.2,.75,.3,1); }
.strx-card:hover .strx-ic,
.e-con:has(> .strx-deliver):hover .strx-ic{ transform: translateY(-3px) scale(1.07); }
.strx-ic svg path[opacity]{ transition: opacity var(--strx-speed) ease; }
.strx-card:hover .strx-ic svg path[opacity],
.e-con:has(> .strx-deliver):hover .strx-ic svg path[opacity]{ opacity:.9; }

/* --- 4. Bloc Livrable des cartes claires ---------------------------------- */
.strx-deliver .elementor-widget-container{
  background: rgba(19,25,45,.045);
  border-top: 1px solid rgba(19,25,45,.07);
  border-radius: 0 0 calc(var(--strx-radius) - 1px) calc(var(--strx-radius) - 1px);
}
.strx-deliver .strx-k{
  margin:0 0 5px; font-size:10px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:#8B93A5;
}
.strx-deliver .strx-v{ margin:0; }

/* --- 5. Bande de grands chiffres ------------------------------------------ */
.strx-figs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:34px 0 50px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.strx-fig{ padding:34px 26px; border-left:1px solid rgba(255,255,255,.14); }
.strx-fig:first-child{ border-left:0; padding-left:0; }
.strx-n{
  font-size:76px; font-weight:800; letter-spacing:-4px; line-height:.92;
  background:linear-gradient(118deg,#7AB929 0%,#12959B 52%,#0087CC 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.strx-u{ margin-top:6px; font-size:17px; font-weight:700; color:#fff; letter-spacing:-.2px; }
.strx-c{
  margin-top:10px; font-size:13px; font-weight:600; letter-spacing:1.3px;
  text-transform:uppercase; color:rgba(255,255,255,.42);
}

/* --- 6. Cartes sur fond navy : halo qui suit le curseur -------------------
   Les deux variables --sx et --sy sont mises à jour par le script placé
   dans Elementor > Éléments personnalisés > Code.
   Les cartes sont repérées par le widget Livrable qu'elles contiennent,
   Elementor n'appliquant pas les classes CSS aux conteneurs.              */
.e-con:has(> .strx-liv){
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .42s cubic-bezier(.2,.75,.3,1),
             border-color .42s ease,
             box-shadow .42s ease;
}

/* lueur diffuse, centrée sur la position du curseur */
.e-con:has(> .strx-liv)::before{
  content:"";
  position:absolute; inset:-1px; z-index:0;
  pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(480px circle at var(--sx,50%) var(--sy,50%),
    rgba(122,185,41,.20) 0%,
    rgba(18,149,155,.13) 26%,
    rgba(0,135,204,.08) 46%,
    transparent 66%);
}
.e-con:has(> .strx-liv):hover::before{ opacity:1; }

/* liseré lumineux sur la bordure, au même point */
.e-con:has(> .strx-liv)::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none; border-radius:inherit; opacity:0;
  transition:opacity .35s ease; padding:1px;
  background:radial-gradient(340px circle at var(--sx,50%) var(--sy,50%),
    rgba(122,185,41,.85) 0%,
    rgba(18,149,155,.45) 34%,
    transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.e-con:has(> .strx-liv):hover::after{ opacity:1; }

/* le contenu reste au-dessus de la lueur */
.e-con:has(> .strx-liv) > *{ position:relative; z-index:2; }

.e-con:has(> .strx-liv):hover{
  transform:translateY(-6px);
  border-color:rgba(122,185,41,.30) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.30);
}

/* bloc Livrable des cartes navy */
.strx-liv .elementor-widget-container{
  border-top:1px solid rgba(255,255,255,.13);
  transition:border-color .42s ease;
}
.e-con:has(> .strx-liv):hover .strx-liv .elementor-widget-container{
  border-top-color:rgba(122,185,41,.42);
}
.strx-liv .strx-k2{
  margin:0 0 5px; font-size:10px; font-weight:700; letter-spacing:1.6px;
  text-transform:uppercase; color:rgba(255,255,255,.45);
}
.strx-liv .strx-v2{ margin:0; }

/* --- 7. Fenêtre modale ---------------------------------------------------- */
.strx-modal{
  position:fixed !important; inset:0 !important; z-index:99999;
  display:none !important; align-items:center; justify-content:center;
  background:rgba(10,15,30,.74);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  padding:24px;
}
.strx-modal.is-open{ display:flex !important; }
.strx-modal > .e-con-inner{
  background:#fff; border-radius:16px; max-width:920px; width:100%;
  max-height:90vh; overflow:auto; position:relative;
  box-shadow:0 30px 80px rgba(19,25,45,.38);
}
/* dans la modale, l'autodiagnostic occupe toute la largeur sans double cadre */
.strx-modal .sxd-quiz,
.strx-modal .sxd-res{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.strx-x{
  position:absolute; top:10px; right:16px; font-size:30px; line-height:1;
  color:#8B93A5; cursor:pointer; font-weight:400; z-index:5;
}
.strx-x:hover{ color:var(--strx-navy); }

/* --- 8. Fonds vitrés et encadrés ------------------------------------------ */
.strx-glass{
  background-image:
    radial-gradient(circle at 10% 15%, rgba(0,135,204,.13), transparent 46%),
    radial-gradient(circle at 90% 85%, rgba(122,185,41,.11), transparent 46%);
}
.strx-note{
  background: rgba(255,255,255,.7) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.85) !important;
}

/* --- 9. Boutons de parcours et visuel du hero ----------------------------- */
.strx-pill .elementor-button{
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.strx-pill .elementor-button:hover{ transform: translateY(-2px); }
.strx-shot img{ border-radius:16px; box-shadow:0 24px 60px rgba(19,25,45,.16); }

/* --- 10. Mise en forme des articles WordPress ----------------------------- */
.single-post .entry-content{
  font-family:Montserrat,sans-serif; color:#232A3A; line-height:1.8;
  max-width:820px; margin:0 auto;
}
.single-post .entry-content h2{
  font-size:26px; font-weight:800; color:var(--strx-navy);
  margin:44px 0 14px; padding-top:26px; border-top:1px solid var(--strx-line);
}
.single-post .entry-content h3{ font-size:19px; font-weight:700; color:var(--strx-navy); margin:26px 0 8px; }
.single-post .entry-content p,
.single-post .entry-content li{ font-size:16.5px; }
.single-post .entry-content a{
  color:var(--strx-blue); text-decoration:none;
  border-bottom:1px solid rgba(0,135,204,.3);
}
.single-post .entry-content img{ border-radius:12px; max-width:100%; height:auto; }
.single-post .entry-content blockquote{
  border-left:3px solid var(--strx-green); background:#F5F7FA;
  padding:18px 24px; margin:28px 0; border-radius:0 10px 10px 0;
}

/* --- 11. Respiration sur tablette ----------------------------------------- */
@media (min-width:768px) and (max-width:1024px){
  body .elementor > .e-con.e-con-boxed > .e-con-inner{
    padding-left:28px !important; padding-right:28px !important;
  }
  .strx-n{ font-size:62px; letter-spacing:-3px; }
  .strx-fig{ padding:28px 20px; }
}

/* --- 12. Respiration sur mobile ------------------------------------------- */
@media (max-width:767px){
  body .elementor > .e-con.e-con-boxed > .e-con-inner,
  body .elementor > .e-con > .e-con-inner{
    padding-left:20px !important; padding-right:20px !important;
  }
  body .elementor > .e-con.e-con-full,
  .strx-section{ padding-left:20px !important; padding-right:20px !important; }

  html, body{ overflow-x:hidden; }
  .elementor img{ max-width:100%; height:auto; }
  .elementor h1, .elementor h2, .elementor h3{ overflow-wrap:break-word; }

  .strx-figs{ grid-template-columns:1fr; margin:28px 0 38px; }
  .strx-fig{
    border-left:0; border-top:1px solid rgba(255,255,255,.14);
    padding:24px 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .strx-fig:first-child{ border-top:0; padding-top:6px; }
  .strx-n{ font-size:54px; letter-spacing:-2.5px; }
  .strx-u{ margin-top:0; }
  .strx-c{ margin-top:0; width:100%; }

  .strx-card:hover,
  .e-con:has(> .strx-deliver):hover,
  .e-con:has(> .strx-liv):hover{ transform:none; }
  .e-con:has(> .strx-liv):hover::before,
  .e-con:has(> .strx-liv):hover::after{ opacity:0; }
  .strx-modal{ padding:16px; }
  .strx-modal > .e-con-inner{ max-height:92vh; }
}

/* --- 13. Accessibilité ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .strx-card, .strx-card:hover,
  .e-con:has(> .strx-deliver), .e-con:has(> .strx-liv),
  .strx-ic, .strx-pill .elementor-button{
    transition:none !important; transform:none !important;
  }
}

/* --- 14. Pied de page -----------------------------------------------------
   Le pied de page porte l'identifiant #colophon et la classe
   .footer-width-fixer. On cible par l'identifiant pour la spécificité.     */
body #colophon a,
body .footer-width-fixer a,
body footer[role="contentinfo"] a{
  color:#13192D !important;
  text-decoration:none !important;
  border-bottom:0 !important;
  transition:color .22s ease;
}
body #colophon a:hover,
body .footer-width-fixer a:hover,
body footer[role="contentinfo"] a:hover{
  color:#0087CC !important;
}

/* texte courant du pied de page */
body #colophon,
body .footer-width-fixer{
  color:#13192D;
}

/* liens téléphone et courriel en texte courant, jamais les boutons */
body .elementor a[href^="tel:"]:not(.elementor-button):not([class*="button"]),
body .elementor a[href^="mailto:"]:not(.elementor-button):not([class*="button"]){
  color:#13192D !important;
}
body .elementor a[href^="tel:"]:not(.elementor-button):not([class*="button"]):hover,
body .elementor a[href^="mailto:"]:not(.elementor-button):not([class*="button"]):hover{
  color:#0087CC !important;
}

/* --- 17. Boutons Appeler et Écrire de la page Contact ---------------------
   Fond navy, texte blanc, puis inversion au survol.                        */
body .elementor .elementor-button[href^="tel:"],
body .elementor .elementor-button[href^="mailto:"]{
  background-color:#13192D !important;
  color:#FFFFFF !important;
  border:1px solid #13192D !important;
  border-radius:6px !important;
  font-family:Montserrat,sans-serif !important;
  font-weight:700 !important;
  text-decoration:none !important;
  transition:background-color .24s ease, color .24s ease,
             border-color .24s ease, transform .24s ease;
}
body .elementor .elementor-button[href^="tel:"] .elementor-button-text,
body .elementor .elementor-button[href^="mailto:"] .elementor-button-text,
body .elementor .elementor-button[href^="tel:"] span,
body .elementor .elementor-button[href^="mailto:"] span{
  color:#FFFFFF !important;
}
body .elementor .elementor-button[href^="tel:"]:hover,
body .elementor .elementor-button[href^="mailto:"]:hover{
  background-color:#7AB929 !important;
  border-color:#7AB929 !important;
  color:#13192D !important;
  transform:translateY(-2px);
}
body .elementor .elementor-button[href^="tel:"]:hover .elementor-button-text,
body .elementor .elementor-button[href^="mailto:"]:hover .elementor-button-text,
body .elementor .elementor-button[href^="tel:"]:hover span,
body .elementor .elementor-button[href^="mailto:"]:hover span{
  color:#13192D !important;
}

/* --- 15. Formulaire conditionné au questionnaire --------------------------
   Le formulaire reste masqué tant que le diagnostic n'est pas terminé.
   La règle s'applique à tout conteneur réunissant le questionnaire et le
   formulaire : fenêtre modale, section de page ou page dédiée.            */
.e-con:has(.sxd:not(.is-done)) .elementor-widget-form,
.strx-modal:has(.sxd:not(.is-done)) .elementor-widget-form{
  display:none !important;
}
.e-con:has(.sxd.is-done) .elementor-widget-form{
  animation:sxdGate .5s ease both;
  margin-top:26px; padding-top:26px; border-top:1px solid #E6EBF1;
}
@keyframes sxdGate{ from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* --- 16. Habillage du formulaire aux couleurs Stradaxis ------------------- */
.elementor-widget-form .elementor-field-group > label{
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.6px; color:#13192D !important;
}
.elementor-widget-form .elementor-field-textual{
  border:1px solid #E1E6ED !important; border-radius:9px !important;
  padding:13px 15px !important; font-family:Montserrat,sans-serif !important;
  font-size:15px !important; background:#fff !important;
  transition:border-color .22s, box-shadow .22s;
}
.elementor-widget-form .elementor-field-textual:focus{
  border-color:#0087CC !important;
  box-shadow:0 0 0 3px rgba(0,135,204,.14) !important; outline:none !important;
}
.elementor-widget-form .elementor-button[type="submit"]{
  background:#7AB929 !important; color:#13192D !important;
  font-family:Montserrat,sans-serif !important; font-weight:700 !important;
  border-radius:5px !important; padding:15px 30px !important;
  transition:background .22s, transform .22s;
}
.elementor-widget-form .elementor-button[type="submit"]:hover{
  background:#8FCE3A !important; transform:translateY(-2px);
}
.elementor-widget-form .elementor-field-type-acceptance label{
  font-size:12.5px !important; font-weight:500 !important; color:#5C6579 !important;
  line-height:1.6;
}

/* dans la fenêtre modale, pas de double cadre autour du questionnaire */
.strx-modal .sxd-quiz,
.strx-modal .sxd-res{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}/* End custom CSS */