:root {
  --blue: #3d27da;
  --yellow: #fef37b;
  --green: #36ff7a;
  --bggreen: #c5ffd8;
  --white: #ffffff;

  --light-green: #d3f7df;
  --light-yellow: #fffbd0;
  --pink: #ff2767;
}
/* urbanist-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/urbanist-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/urbanist-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* urbanist-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/urbanist-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* urbanist-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Urbanist";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/urbanist-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* urbanist-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/urbanist-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:focus,
a:focus,
button:focus {
  outline: 2px solid var(--pink);
  outline-offset: 0.3rem;
}
h1 {
  font-size: 4.6rem;
  font-family: "Urbanist", sans-serif;
  line-height: normal;
  font-weight: 700;
  margin-bottom: 0;
}

h2,
h3 {
  font-family: "Urbanist", sans-serif;
  line-height: normal;
  font-weight: 700;
  line-height: 1.2;
}

a {
  color: currentColor;
  text-decoration: underline;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover,
a:visited {
  color: currentColor;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* Remove focus for mouse users fonction expérimentale*/
:focus:not(:focus-visible) {
  outline: none !important;
}

::-moz-selection {
  color: var(--blue);
  background-color: var(--light-yellow);
}

::selection {
  color: var(--blue);
  background-color: var(--light-yellow);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  font-family: "Urbanist", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--blue);
  background: url(../img/right-grad-yellow.svg) top right no-repeat;
}
body.slug-design-clinic-coaching-design,
body.slug-ingenierie-pedagogique,
.slug-creation-de-sites-web,
.slug-audits-daccessibilite,
.slug-plan-du-site,
.slug-home,
.archive {
  background: url(../img/circle-top.svg) right 226px no-repeat;
}
.slug-avantage-oeth-via-tih,
.slug-preparation-premier-rdv,
.single,
.slug-mentions-legales,
.slug-politique-de-confidentialite {
  background: url(../img/big-circle.svg) right 100px no-repeat;
}
.wrapper {
  position: relative;
}
.container {
  max-width: 80%;
  margin: 0 auto;
}
.container-post {
  padding-right: 16%;
}
@media (max-width: 1024px) {
  .container {
    max-width: 96%;
  }
  .container-post {
    padding-right: 2%;
  }
}
.wrapper-blue {
  background: var(--blue);
  color: var(--white);
  padding: 96px 0px;
}
.wrapper-white {
  padding: 66px 0px;
}
.site-content a[target="_blank"] {
  position: relative;
}

.site-content a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-left: 6px;
  vertical-align: -0.125em;
  --ext-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13'><path d='M2.6777 1.22434C2.67729 0.979191 2.77421 0.744346 2.94716 0.571394C3.12011 0.398442 3.35496 0.301525 3.60011 0.301933L12.322 0.321884C12.5672 0.322597 12.8025 0.42059 12.9762 0.594335C13.15 0.768081 13.248 1.00337 13.2487 1.24852L13.2686 9.97046C13.2733 10.0946 13.2529 10.2183 13.2087 10.3342C13.1645 10.4501 13.0973 10.5558 13.0112 10.645C12.9252 10.7342 12.8219 10.805 12.7077 10.8533C12.5934 10.9016 12.4705 10.9264 12.3463 10.9261C12.2221 10.9258 12.099 10.9005 11.9846 10.8517C11.8701 10.8029 11.7666 10.7315 11.6801 10.642C11.5936 10.5524 11.5259 10.4464 11.4812 10.3303C11.4364 10.2142 11.4155 10.0904 11.4196 9.96623L11.4047 3.47711L2.53742 12.3444C2.36433 12.5175 2.12925 12.6144 1.8839 12.6139C1.63854 12.6133 1.40302 12.5153 1.22913 12.3414C1.05524 12.1675 0.957241 11.932 0.956679 11.6867C0.956118 11.4413 1.05305 11.2062 1.22614 11.0331L10.0935 2.16583L3.60434 2.15098C3.35919 2.15027 3.1239 2.05228 2.95015 1.87853C2.77641 1.70479 2.67841 1.4695 2.6777 1.22434Z' fill='%23000'/></svg>");
  background-color: currentColor;
  -webkit-mask: var(--ext-icon) center/contain no-repeat;
  mask: var(--ext-icon) center/contain no-repeat;
}

/*************Evitement**********/
#evitement {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#evitement a {
  position: absolute;
  z-index: 100000;
  left: -999999px;
}

#evitement a:focus {
  position: static;
  left: 0px;
  display: inline-block;
  padding: 10px;
  background-color: var(--blue);
  color: var(--white);
  border: 1px solid var(--green);
  font-size: 1.8rem;
  font-weight: bold;
}
#backToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#backToTop:hover {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

@media (max-width: 768px) {
  #backToTop {
    position: relative;
    margin: 64px auto 32px auto;
  }
}

.header {
  display: grid;
  grid-template-columns: 1fr repeat(2, auto);
  grid-template-rows: auto;
  gap: 2rem;
  position: relative;
  padding: 2%;
}
.header-nav {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  gap: 2rem;
  align-items: center;
}

.header-nav a.logo svg {
  fill: var(--blue);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media (max-width: 1130px) {
  .header-nav a.logo svg {
    width: 180px;
    height: 27px;
  }
}
/* Base du menu */
.header-nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: flex-end;
}

/* Boutons principaux */
.header-nav-menu > li > button,
.header-nav-menu > li > a {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blue);
  font-size: 2.4rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  z-index: 1;
}
@media (max-width: 1038px) {
  .header-nav-menu > li > button,
  .header-nav-menu > li > a {
    font-size: 1.8rem;
    line-height: 1.3;
  }
}
.header-nav-menu > li > button {
  padding: 8px 24px 8px 8px;
}
.header-nav-menu > li > a {
  padding: 8px;
}
.header-nav-menu li.contact {
  padding-left: 64px;
}
@media (max-width: 1260px) {
  .header-nav-menu li.contact {
    padding-left: 0px;
  }
}
.header-nav-menu li.contact a {
  font-weight: 700;
}

.header-nav-menu > li:hover > button,
.header-nav-menu > li:hover > a,
.header-nav-menu > li > button:hover,
.header-nav-menu > li > a:hover,
.header-nav-menu > li > button:focus,
.header-nav-menu > li > a:focus,
.header-nav-menu > li.current-menu-parent > button,
.header-nav-menu > li.current-menu-parent > a,
.header-nav-menu > li.current-menu-item > button,
.header-nav-menu > li.current-menu-item > a,
.header-nav-menu > li.current-page-ancestor > button,
.header-nav-menu > li.current-page-ancestor > a {
  color: var(--blue);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.header-nav-menu > li > button::before,
.header-nav-menu > li > a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 16px;
  left: 0px;
  right: 0px;
  bottom: 16px;
  background: var(--light-green);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;

  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.header-nav-menu > li:hover > button::before,
.header-nav-menu > li:hover > a::before,
.header-nav-menu > li > button:hover::before,
.header-nav-menu > li > button:focus::before,
.header-nav-menu > li > button:active::before,
.header-nav-menu > li > a:hover::before,
.header-nav-menu > li > a:focus::before,
.header-nav-menu > li > a:active:before,
.header-nav-menu > li.current-menu-parent > button::before,
.header-nav-menu > li.current-menu-parent > a::before,
.header-nav-menu > li.current-menu-item > button::before,
.header-nav-menu > li.current-menu-item > a::before,
.header-nav-menu > li.current-page-ancestor > button::before,
.header-nav-menu > li.current-page-ancestor > a::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

/* Sous-menus */
.main-submenu {
  position: absolute;
  min-width: 260px;
  display: none;
}

/* Affichage au survol/focus (optionnel) */
.header-nav-menu li:hover .main-submenu,
.header-nav-menu li:focus-within .main-submenu {
  display: block;
}

/* Bouton "Retour" masqué en desktop */
.main-submenu li.action {
  display: none;
}
.header-nav-menu li {
  position: relative;
}
.header-nav-menu li button[aria-haspopup="menu"]::after {
  position: absolute;
  top: 48%;
  right: 3px;
  content: "";
  display: inline-block;
  margin-left: 0.5em;
  width: 13px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M11.1706 0.589844L6.58057 5.16984L1.99057 0.589845L0.580566 1.99984L6.58057 7.99984L12.5806 1.99984L11.1706 0.589844Z' fill='%233D27DA'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
  transform-origin: center center;
  -webkit-transition: transform 0.3s ease;
  -webkit-transform-origin: center center;
}

/* Au hover, la flèche pivote vers le haut */
.header-nav-menu li button[aria-haspopup="menu"]:hover::after,
.header-nav-menu li button[aria-haspopup="menu"]:focus::after,
.header-nav-menu li button[aria-haspopup="menu"][aria-expanded="true"]::after,
.header-nav-menu li.current-menu-parent button[aria-haspopup="menu"]::after,
.header-nav-menu li.current-menu-item button[aria-haspopup="menu"]::after,
.header-nav-menu li.current-page-ancestor button[aria-haspopup="menu"]::after {
  transform: translateY(-25%) rotate(-90deg);
  -webkit-transform: translateY(-25%) rotate(-90deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M11.1706 0.589844L6.58057 5.16984L1.99057 0.589845L0.580566 1.99984L6.58057 7.99984L12.5806 1.99984L11.1706 0.589844Z' fill='%233D27DA'/%3E%3C/svg%3E");
}
/* Sous-menus en desktop apparaissent au survol */
.header-nav-menu li ul {
  position: absolute;
  top: 80%;
  left: 0;

  color: var(--blue);
  padding: 0.5rem !important;
  display: none;
  z-index: 20;
  list-style: none;
  background-color: var(--white);
  border-radius: 16px;
}
/* Pont qui occupe le vide entre le bouton et le sous-menu */
.header-nav-menu li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px; /* la même valeur que l’écart souhaité */
  display: none; /* visible seulement quand ouvert */
  pointer-events: auto; /* reçoit le survol pour garder :hover */
}

/* Ouverture */
.header-nav-menu li:hover > ul,
.header-nav-menu li:focus-within > ul {
  display: block;
}
.header-nav-menu li:hover::after,
.header-nav-menu li:focus-within::after {
  display: block;
}

/* Sous-menu réellement détaché (vrai gap) */
.header-nav-menu li > ul {
  margin-top: 0;
}

/* Afficher le sous-menu au survol du li */
.header-nav-menu li:hover ul {
  display: block;
}

/* Le bouton "Retour" n'est pas visible en desktop */
.header-nav-menu li ul li.action {
  display: none;
}

.header-nav-menu li ul li a {
  position: relative;
  display: block;
  line-height: 1.2;
  font-size: 1.8rem;
  color: var(--blue);
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  text-decoration: none;
  padding: 8px 16px 8px 8px;
}
.header-nav-menu li ul li a:hover,
.header-nav-menu li ul li a:focus,
.header-nav-menu li ul li.current-menu-item a,
.header-nav-menu li ul li.current-page-ancestor a {
  color: var(--blue);
  padding-left: 20px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.header-nav-menu li ul li a:hover::before,
.header-nav-menu li ul li a:focus::before,
.header-nav-menu li ul li.current-menu-item a::before,
.header-nav-menu li ul li.current-page-ancestor a::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 6px;
  border-radius: 32px;
  background-color: var(--blue);
  top: 16px;
  left: 0px;
}
.header-nav-menu-toggle {
  display: none;
  flex: 0 0 auto;
}
/* ---------- Styles spécifiques pour Mobile ---------- */
@media (max-width: 768px) {
  @media (max-width: 1130px) {
    .header-nav a.logo {
      margin-left: 64px;
    }
  }
  .header-nav-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--blue);
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    -webkit-transform: translateX(-100%);
    -webkit-transition: transform 0.3s ease;
    z-index: 2000;
    margin-left: 0px !important;
  }
  .header-nav-menu.mobile-open {
    transform: translateX(0);
    -webkit-transform: translateX(0);
    padding-top: 44px;
  }
  .header-nav-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--white);
    position: static;
  }
  .header-nav-menu > li > button,
  .header-nav-menu > li > a {
    font-size: 1.8rem;
    width: 100%;
    text-align: left;
    padding: 1rem;
    color: var(--white);
  }
  .header-nav-menu > li > button::before,
  .header-nav-menu > li > a::before {
    display: none;
  }
  .header-nav-menu li button[aria-haspopup="menu"]::after {
    top: 28%;
    right: 10%;
    transform: rotate(-90deg);
    width: 20px;
    height: 20px;
    background-size: 100% auto;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3l3 3 3-3' stroke='%23FFF2E3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  /* Les sous-menus en mobile */
  .header-nav-menu .main-submenu {
    display: block;
    position: fixed;
    padding-top: 44px;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100vh !important; /* Prend toute la hauteur du viewport */
    background: var(--blue);
    color: var(--white);
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    z-index: 4000;
  }
  .main-submenu {
    list-style: none;
  }
  .header-nav-menu li ul li a {
    color: var(--white);
    padding-left: 24px;
  }
  /* Par défaut, le sous-menu reste à sa position (hors écran) */
  .header-nav-menu .main-submenu:not(.active) {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
  }
  /* Quand un sous-menu est actif, il glisse pour occuper l'écran */
  .header-nav-menu .main-submenu.active {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
  /* Lorsqu'un sous-menu est ouvert, on glisse le menu principal vers la gauche */
  .header-nav-menu.slide-out > li.main-level {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    -webkit-transform: translateX(-100%);
    -webkit-transition: transform 0.3s ease;
  }
  /* Affichage du bouton "Retour" dans les sous-menus */
  .main-submenu li.action {
    display: block !important;
    padding: 1rem;
    font-size: 1.8rem;
    color: var(--white);
  }
  .main-submenu li.action button {
    position: relative;
    width: 100%;
    background: none;
    border: none;
    font-size: inherit;
    color: inherit;
    padding-left: 62px;
    font-weight: 700;
    text-align: left;
  }
  .main-submenu li.action button::before {
    position: absolute;
    top: 24%;
    left: 28px;
    content: "";
    display: inline-block;
    margin-left: 0.5em;
    width: 1.1em;
    height: 1.1em;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3l3 3 3-3' stroke='%23FFF2E3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: rotate(90deg);
    transition: transform 0.3s ease;
    transform-origin: center center;
    -webkit-transform: rotate(90deg);
    -webkit-transition: transform 0.3s ease;
    -webkit-transform-origin: center center;
  }

  /* -------- Bouton burger accessible -------- */
  /* Affiché uniquement en mobile */
  .header-nav-menu-toggle {
    display: block;
    /* Par défaut en position relative */
    position: absolute;
    top: 20px;
    left: 20px;
    width: 3rem;
    height: 3rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3000;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
  }
  /* Lorsque le menu est ouvert, on passe en position absolue en haut à gauche */
  .header-nav-menu-toggle[aria-expanded="true"] {
    position: absolute;
    top: 1rem;
    left: 1rem;
  }
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger,
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger::before,
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger::after {
    content: "";
    display: block;
    background-color: var(--white);
    height: 3px;
    width: 100%;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* Stylisation du burger (les 3 lignes) */
  .header-nav-menu-toggle .hamburger,
  .header-nav-menu-toggle .hamburger::before,
  .header-nav-menu-toggle .hamburger::after {
    content: "";
    display: block;
    background-color: var(--blue);
    height: 3px;
    width: 100%;
    border-radius: 1px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    -webkit-transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* Ligne centrale */
  .header-nav-menu-toggle .hamburger {
    position: relative;
    top: 20%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }
  /* Lignes supérieure et inférieure */
  .header-nav-menu-toggle .hamburger::before,
  .header-nav-menu-toggle .hamburger::after {
    position: absolute;
    left: 0;
  }
  .header-nav-menu-toggle .hamburger::before {
    top: -8px;
  }
  .header-nav-menu-toggle .hamburger::after {
    top: 8px;
  }
  /* Transformation en croix quand le menu est ouvert */
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger {
    background-color: transparent;
  }
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger::before {
    transform: translateY(8px) rotate(45deg);
    -webkit-transform: translateY(8px) rotate(45deg);
  }
  .header-nav-menu-toggle[aria-expanded="true"] .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
    -webkit-transform: translateY(-8px) rotate(-45deg);
  }
  .header-nav-logo {
    width: 100%;
    text-align: center;
  }
}

#btn-search {
  display: flex;
  align-items: center;

  border-radius: 100%;
  width: 42px;
  height: 42px;
  margin-top: 10px;
  align-items: center;
  border: 0px;
  background-color: transparent;
  justify-content: center;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#btn-search:hover {
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  background-color: var(--light-green);
}
.circle-bloc {
  position: relative;
  width: 360px;
  height: 360px;
  /* optionnel : centrage du bloc dans la page */
  margin: 8rem auto;
}

.circle-orange,
.circle-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  will-change: transform; /* perf */
}

.circle-orange {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #fc0 0%,
    #f95a2a 40%,
    #fc0f42 75%,
    #fc0 100%
  );
  filter: blur(33px);
  animation: spinDisk 60s linear infinite reverse;
}

@keyframes spinDisk {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.circle-blur {
  z-index: 2;
  max-width: 336px;
  max-height: 336px;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(165, 216, 240, 0.4) 100%
  );
  transition: transform 180ms ease; /* suivi doux de la souris */
}

/* Respecte le réglage d’accessibilité “réduire les animations” */
@media (prefers-reduced-motion: reduce) {
  .circle-orange {
    animation: none;
  }
  .circle-blur {
    transition: none;
  }
}
.wrapper-hero-home {
  position: relative;
  width: min(90vw, 960px);
  margin-inline: auto;
  /* parallax doux piloté en JS */
  --tx: 0px;
  --ty: 0px;
}

.hero-labels {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  transform: translate(var(--tx), var(--ty));
  transition: transform 180ms ease;
}

.hero-labels li {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: clamp(16px, 1.3vw, 22px);
  color: #4327ff; /* vérifie le contraste sur ton fond */
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--angle)) translate(var(--r))
    rotate(calc(-1 * var(--angle)));
  transition: transform 180ms ease, letter-spacing 180ms ease;
  will-change: transform;
}
@media (max-width: 908px) {
  .hero-labels {
    position: static;
    transform: none;
    display: flex; /* ou block selon ton besoin */
    flex-wrap: wrap; /* retour à la ligne si trop long */
    gap: 2rem;
    justify-content: center;
  }

  .hero-labels li {
    position: static;
    transform: none;
    white-space: normal;
    transition: none;
    font-size: 1.8rem;
  }
  .container-cta {
    margin: 64px auto 124px auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-labels {
    transition: none;
  }
  .hero-labels li {
    transition: none;
  }
}

.container-titre-home {
  text-align: center;
  padding: 32px 28%;
}
.container-titre-home h1 {
  margin: 40px auto;
  font-size: 5.8rem;
}
@media (max-width: 1500px) {
  .container-titre-home {
    padding: 32px 20%;
  }
  .container-titre-home h1 {
    font-size: 5.2rem;
  }
}

@media (max-width: 1200px) {
  .container-titre-home {
    padding: 32px 18%;
  }
  .container-titre-home h1 {
    font-size: 4.8rem;
  }
}

@media (max-width: 900px) {
  .container-titre-home {
    padding: 32px 10%;
  }
  .container-titre-home h1 {
    font-size: 4.2rem;
  }
}

@media (max-width: 480px) {
  .container-titre-home {
    padding: 32px 5%;
  }
  .container-titre-home h1 {
    font-size: 3.2rem;
  }
}

.container-cta {
  text-align: center;
  margin: 180px auto;
}

.container-cta ul {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Base */
a.cta-primary,
a.cta-primary-white,
a.cta-secondary,
a.cta-secondary-white,
a.cta-primary-ext,
a.cta-cat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-size: 2.4rem;
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  line-height: 1.2;
}

a .label {
  position: relative;
  z-index: 1;
  transition: transform 0.2s ease;
  will-change: transform;
}

/* =========================
   PRIMARY (fond bleu, texte blanc)
   ========================= */
a.cta-primary {
  background: var(--blue);
  color: var(--white);
}
a.cta-cat {
  background: var(--bggreen);
  color: var(--blue);
}

/* flèche blanche invisible au repos, entre au hover */
a.cta-primary::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
a.cta-cat::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233d27da'/%3E%3C/svg%3E");
}
a.cta-primary:hover::before,
a.cta-primary:focus-visible::before,
a.cta-cat:hover::before,
a.cta-cat:focus-visible::before {
  transform: translate(0, -50%);
  opacity: 1;
}
a.cta-primary:hover .label,
a.cta-primary:focus-visible .label,
a.cta-cat:hover .label,
a.cta-cat:focus-visible .label {
  transform: translateX(14px);
}

/* PRIMARY externe : pivote à 45° */
a.cta-primary-ext {
  background: var(--blue);
  color: var(--white);
}
a.cta-primary-ext::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%) rotate(0deg);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
a.cta-primary-ext::after {
  display: none !important;
}
a.cta-primary-ext:hover::before,
a.cta-primary-ext:focus-visible::before {
  transform: translate(0, -50%) rotate(-45deg);
  opacity: 1;
}
a.cta-primary-ext:hover .label,
a.cta-primary-ext:focus-visible .label {
  transform: translateX(14px);
}

/* =========================
   PRIMARY WHITE (fond transparent, texte/flèche blanc)
   ========================= */
a.cta-primary-white {
  background: var(--white);
  color: var(--blue);
}
a.cta-primary-white::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233D27DA'/%3E%3C/svg%3E");
}
a.cta-primary-white:hover::before,
a.cta-primary-white:focus-visible::before {
  transform: translate(0, -50%);
  opacity: 1;
}
a.cta-primary-white:hover .label,
a.cta-primary-white:focus-visible .label {
  transform: translateX(14px);
}

/* PRIMARY WHITE externe : pivote à 45° */
a.cta-primary-white-ext {
  background: var(--white);
  color: var(--blue);
}
a.cta-primary-white-ext::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%) rotate(0deg);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233D27DA'/%3E%3C/svg%3E");
}
a.cta-primary-white-ext:hover::before,
a.cta-primary-white-ext:focus-visible::before {
  transform: translate(0, -50%) rotate(45deg);
  opacity: 1;
}
a.cta-primary-white-ext:hover .label,
a.cta-primary-white-ext:focus-visible .label {
  transform: translateX(14px);
}

/* =========================
   SECONDARY (texte bleu, soulignement animé)
   ========================= */
a.cta-secondary {
  color: var(--blue);
}
a.cta-secondary::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  opacity: 1;
  transition: transform 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233D27DA'/%3E%3C/svg%3E");
}
a.cta-secondary:hover::before,
a.cta-secondary:focus-visible::before {
  transform: translate(16px, -50%);
}
a.cta-secondary:hover .label,
a.cta-secondary:focus-visible .label {
  transform: translateX(12px);
}

/* soulignement animé */
a.cta-secondary::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 26px;
  height: 1px;
  background-color: currentColor;
  bottom: 3px;
  transition: left 0.2s ease, right 0.2s ease, height 0.2s ease;
}
a.cta-secondary:hover::after,
a.cta-secondary:focus-visible::after {
  height: 3px;
  left: 48px;
  right: 12px;
}

/* SECONDARY externe : pivote à 45° */
a.cta-secondary-ext {
  color: var(--blue);
}
a.cta-secondary-ext::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(0deg);
  opacity: 1;
  transition: transform 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233D27DA'/%3E%3C/svg%3E");
}
a.cta-secondary-ext:hover::before,
a.cta-secondary-ext:focus-visible::before {
  transform: translate(16px, -50%) rotate(45deg);
}
a.cta-secondary-ext:hover .label,
a.cta-secondary-ext:focus-visible .label {
  transform: translateX(12px);
}
a.cta-secondary-ext::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 26px;
  height: 1px;
  background-color: currentColor;
  bottom: 3px;
  transition: left 0.2s ease, right 0.2s ease, height 0.2s ease;
}
a.cta-secondary-ext:hover::after,
a.cta-secondary-ext:focus-visible::after {
  height: 3px;
  left: 48px;
  right: 12px;
}

/* =========================
   SECONDARY WHITE (texte blanc, soulignement blanc)
   ========================= */
a.cta-secondary-white {
  color: var(--white);
}
a.cta-secondary-white::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  opacity: 1;
  transition: transform 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
a.cta-secondary-white:hover::before,
a.cta-secondary-white:focus-visible::before {
  transform: translate(16px, -50%);
}
a.cta-secondary-white:hover .label,
a.cta-secondary-white:focus-visible .label {
  transform: translateX(12px);
}
a.cta-secondary-white::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 26px;
  height: 1px;
  background-color: var(--white);
  bottom: 3px;
  transition: left 0.2s ease, right 0.2s ease, height 0.2s ease;
}
a.cta-secondary-white:hover::after,
a.cta-secondary-white:focus-visible::after {
  height: 3px;
  left: 48px;
  right: 12px;
}

.greenpoint {
  position: relative;
  display: block;
}
.greenpoint::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--green);
}

/* SECONDARY WHITE externe : pivote à 45° */
a.cta-secondary-white-ext {
  color: var(--white);
}
a.cta-secondary-white-ext::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 0;
  transform: translate(0, -50%) rotate(0deg);
  opacity: 1;
  transition: transform 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
a.cta-secondary-white-ext:hover::before,
a.cta-secondary-white-ext:focus-visible::before {
  transform: translate(16px, -50%) rotate(45deg);
}
a.cta-secondary-white-ext:hover .label,
a.cta-secondary-white-ext:focus-visible .label {
  transform: translateX(12px);
}
a.cta-secondary-white-ext::after {
  content: "";
  position: absolute;
  left: 32px;
  right: 26px;
  height: 1px;
  background-color: var(--white);
  bottom: 3px;
  transition: left 0.2s ease, right 0.2s ease, height 0.2s ease;
}
a.cta-secondary-white-ext:hover::after,
a.cta-secondary-white-ext:focus-visible::after {
  height: 3px;
  left: 48px;
  right: 12px;
}

/* Accessibilité : réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  a .label,
  a::before,
  a::after {
    transition: none !important;
  }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce) {
  a .label,
  a::before,
  a::after {
    transition: none !important;
  }
}
.wrapper-footer {
  position: relative;
}
.footer {
  padding-top: 32px;
}
.footer ul {
  list-style: none;
  margin: 32px auto;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 1.8rem;
}
.footer ul li {
  position: relative;
}

.footer ul li + li::before {
  content: "-";
  color: var(--blue);
  margin: 0 8px 0 0px;
}

.footer ul li a {
  padding: 8px;
  position: relative;
  text-decoration: none;
  color: var(--blue);
  transition: all 0.2s ease;
}
.footer ul li a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 8px;
  right: 8px;
  height: 1px;
  background-color: var(--blue);
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.footer ul li a:hover::after {
  bottom: 2px;
  height: 3px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.alienskull {
  position: absolute;
  top: 50%;
  left: 32px;
  transform: translateY(-50%);
  width: 76px;
  height: 42px;
  background: url(../img/alien-skull.svg) center center no-repeat;
}
.baserocket {
  position: absolute;
  bottom: -6px;
  right: 20px;
  width: 75px;
  height: 79px;
  background: url(../img/base-rocket.svg) center center no-repeat;
}
@media (max-width: 768px) {
  .alienskull {
    position: relative;
    margin: 32px auto;
    left: 0;
  }
  .baserocket {
    display: none;
  }
  #backToTop {
    right: 0px;
  }
  .footer {
    text-align: center;
  }
  .footer ul {
    display: block;
  }
  .footer ul li + li::before {
    display: none;
  }
}

.header-search {
  display: none;
  position: absolute;

  right: 10px;
  padding: 10px;
  z-index: 100;
  max-width: calc(100vw - 20px);
}

/* Classe pour afficher le formulaire au clic */
.header-search.visible {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Styles internes du formulaire */
.header-search .search-field {
  flex: 1;
  padding: 5px;
  border: 1px solid var(--blue);
  border-radius: 3px;
}

.header-search .search-submit {
  padding: 5px 10px;
  border: none;
  background: var(--white);
  color: var(--blue);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 700;
}

.header-search .close-search {
  background-color: var(--white);
  color: var(--blue);
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
}

.home-text-sub-hero {
  font-size: 4.8rem;
  line-height: 1.2;
  margin-left: 16%;
  padding-right: clamp(6%, 5vw, 42%);

  margin-bottom: clamp(166px, 5vw, 128px);
}
.prez-sf-home {
  position: relative;

  background: var(--blue) url(../img/sigle-sf-white.svg) right 102% no-repeat;

  padding-bottom: 128px;
}
.prez-sf-home::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-80%);
  width: 372px;
  height: 436px;
  background: url(../img/paon-home-hero.webp) 0 0 no-repeat;
}
@media (max-width: 768px) {
  .prez-sf-home::before {
    width: 180px;
    height: 211px;
    background: url(../img/paon-home-hero.webp) 0 0 no-repeat;
    background-size: 100% auto;
  }
}
.prez-sf-home h2 {
  font-size: 6.4rem;
  font-weight: 700;
  margin-bottom: 4rem;
  padding-right: 26%;
}
.prez-sf-home .is-layout-constrained {
  width: 80%;
  margin: 0 auto;
  padding-right: 36%;
}

@media (max-width: 1024px) {
  .prez-sf-home h2 {
    padding-right: 0%;
  }
  .prez-sf-home .is-layout-constrained {
    padding-right: 0%;
  }
  .prez-sf-home {
    padding-bottom: 328px;
  }
}

.home-text-prez-sf {
  font-size: 2.4rem;
  padding-top: 32px;
  background-color: var(--blue);
}

.home-paon .paon-img {
  position: relative;
}
.home-paon .paon-img img {
  position: absolute;
  top: 101%;
  transform: translateY(-50%);
  right: -38%;
}

.container-home-offre {
  background: #fff url(../img/bg-home-offres.svg) bottom left no-repeat;
}

.home-offres h2 {
  font-size: 6.4rem;
  font-weight: 600;
  margin-bottom: 2rem;
  padding-right: 10%;
}
@media (max-width: 1400px) {
  .home-offres h2 {
    padding-right: 0;
  }
}

.accroche-section {
  font-size: 4rem;
}
.intro-section {
  font-size: 2.4rem;
}

.home-card-offre {
  padding-right: 16%;
  margin: 16px 0px;
}
.offre-home-intro-bloc {
  padding-right: 26%;
}
@media (max-width: 1800px) {
  .home-card-offre {
    padding-right: 8%;
  }
  .offre-home-intro-bloc {
    padding-right: 16%;
  }
}
@media (max-width: 1200px) {
  .home-card-offre {
    padding-right: 0%;
  }
  .offre-home-intro-bloc {
    padding-right: 0%;
  }
}
.home-card-offre h3 {
  font-size: 3.2rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}
.home-card-offre .accroche {
  font-size: 2.8rem;
  margin-bottom: 1.6rem;
}

.home-card-offre .texte {
  margin-bottom: 1.8rem;
}
.home-card-offre .cta-offre {
  margin-top: 32px;
}
.home-card-offre .cta-offre a {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding-left: 32px;
  text-decoration: none;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  font-weight: 600;
}

.home-card-offre .cta-offre a:hover,
.home-card-offre .cta-offre a:focus {
  padding-left: 40px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}

.home-card-offre .cta-offre a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0px;
  bottom: 0px;
  left: 30px;
  right: -2px;
  background-color: var(--bggreen);
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.home-card-offre .cta-offre a:hover::before,
.home-card-offre .cta-offre a:focus::before {
  left: 38px;
  right: -4px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.home-card-offre .cta-offre a::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  left: 16px;
  transform: translate(-14px, -50%);
  transition: all 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='22' height='19' viewBox='0 0 22 19' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%233d27da'/%3E%3C/svg%3E");
}
.home-card-offre .cta-offre a:hover::after,
.home-card-offre .cta-offre a:focus-visible::after {
  transform: translate(0, -50%);
}

.bloc-appel-offre {
  position: relative;
  margin: 124px 0 0 0;
  padding-bottom: 124px;
}
.bloc-appel-offre::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  background: url(../img/blue-cross.svg) 0 0 no-repeat;
  top: 50%;
  right: 30%;
  transform: translateY(-90%);
}
@media (max-width: 1128px) {
  .bloc-appel-offre::after {
    bottom: -188px;
    right: 30%;
    transform: translateY(+100%);
  }
}
.appel-offre {
  font-size: 6.4rem;
  margin-bottom: 32px;
}

.home-ref {
  font-size: 2.4rem;
}
.home-ref h2 {
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2rem;
  padding-right: 10%;
}
@media (max-width: 1400px) {
  .home-ref h2 {
    padding-right: 0;
  }
}

.home-ref .declusion {
  font-size: 4rem;
  font-weight: 600;
  margin: 64px 0;
  line-height: 1.2;
}

@media (min-width: 1500px) {
  .home-ref .wp-block-group-is-layout-constrained {
    padding-right: 45%;
    margin: 16px 0px;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .home-ref .wp-block-group-is-layout-constrained {
    padding-right: 13%;
    margin: 16px 0px;
  }
}
@media (max-width: 899px) {
  .home-ref .wp-block-group-is-layout-constrained {
    padding-right: 3%;
    margin: 16px 0px;
  }
}

.home-carnet {
  background: url(../img/bg-home-carnet.svg) right bottom no-repeat;
}
.home-carnet h2 {
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4rem;
  padding-right: 70%;
}
.home-carnet .accroche {
  font-size: 2.4rem;
}
@media (min-width: 1500px) {
  .home-carnet h2 {
    padding-right: 60%;
  }
  .home-carnet .accroche {
    padding-right: 40%;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .home-carnet h2 {
    padding-right: 30%;
  }
  .home-carnet .accroche {
    padding-right: 20%;
  }
}
@media (max-width: 899px) {
  .home-carnet h2 {
    padding-right: 5%;
  }
  .home-carnet .accroche {
    padding-right: 3%;
  }
}

/* ===== Grille ===== */
.sf-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
  margin: 64px 0px 96px 0px;
}

/* Responsive : tablette = 2 colonnes */
@media (max-width: 1024px) {
  .sf-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile = 1 colonne */
@media (max-width: 640px) {
  .sf-featured-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Card ===== */
.sf-card {
  /* pour laisser respirer la carte au hover/focus */
  transition: transform 0.2s ease;
  will-change: transform;
}

/* Lien = carte cliquable */
.sf-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ===== Media ===== */
.sf-card__media {
  margin: 0;
  overflow: hidden; /* on coupe ce qui dépasse */
  border: 2px solid var(--blue);
  position: relative;
  height: 366px;
}
.sf-card__media img {
  display: block;
  width: 100%;
  height: 366px;
  object-fit: cover;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.sf-card--featured .sf-card__media {
  height: auto;
}
.sf-card--featured .sf-card__media img {
  height: auto;
  object-fit: contain;
}
/* ===== Contenu ===== */
.sf-card__body {
  margin-top: clamp(16px, 2.2vw, 28px);
  color: var(--blue);
}

.sf-card__title {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  margin: 0 0 clamp(8px, 1.4vw, 12px);
  font-size: clamp(2rem, 1.2vw + 1.8rem, 3.2rem);
}

.sf-card a .sf-card__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: var(--bggreen);
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.sf-card a:hover .sf-card__title::before,
.sf-card a:focus .sf-card__title::before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.sf-card__excerpt {
  margin: 0;
  font-size: clamp(1.8rem, 0.4vw + 1.8rem, 2rem);
  line-height: 1.5;
}

/* Bouton/label CTA dans la carte */
.sf-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(16px, 2vw, 24px);
  font-size: 0; /* texte masqué visuellement, span aria-hidden */
  position: relative;
}

/* Icône par défaut */
.sf-card__cta::before {
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.6357 15.6476L13.7904 9.80225L19.6357 3.95694C19.7477 3.84356 19.8105 3.69061 19.8105 3.53124C19.8105 3.37187 19.7477 3.21892 19.6357 3.10555L16.8744 0.344259C16.7615 0.23138 16.6084 0.167969 16.4487 0.167969C16.2891 0.167969 16.136 0.23138 16.023 0.344259L10.1777 6.18957L4.33242 0.344259C4.21951 0.23138 4.06639 0.167969 3.90673 0.167969C3.74707 0.167969 3.59395 0.23138 3.48104 0.344259L0.719747 3.10555C0.606869 3.21846 0.543457 3.37158 0.543457 3.53124C0.543457 3.6909 0.606869 3.84402 0.719747 3.95694L6.56506 9.80225L0.719747 15.6476C0.606869 15.7605 0.543457 15.9136 0.543457 16.0733C0.543457 16.2329 0.606869 16.386 0.719747 16.4989L3.48104 19.2602C3.59395 19.3731 3.74707 19.4365 3.90673 19.4365C4.06639 19.4365 4.21951 19.3731 4.33242 19.2602L10.1777 13.4149L16.023 19.2602C16.136 19.3731 16.2891 19.4365 16.4487 19.4365C16.6084 19.4365 16.7615 19.3731 16.8744 19.2602L19.6357 16.4989C19.7486 16.386 19.812 16.2329 19.812 16.0733C19.812 15.9136 19.7486 15.7605 19.6357 15.6476Z' fill='%233d27da'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}

/* Quand le lien du titre est survolé OU focus clavier → anime l'icône du CTA */
.sf-card__link:hover ~ .sf-card__cta::before,
.sf-card__link:focus-visible ~ .sf-card__cta::before {
  transform: rotate(-45deg);
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .sf-card__cta::before {
    transition: none;
  }
}

.sf-featured-posts {
  background: radial-gradient(
    1200px 500px at 70% 80%,
    rgba(255, 232, 150, 0.25),
    transparent 60%
  );

  padding: clamp(8px, 1vw, 12px) 0;
}

.sf-card a:hover img,
.sf-card a:focus img {
  transform: scale(1.2) rotate(-2deg);
  transition: transform 0.3s ease;
  -webkit-transform: scale(1.2) rotate(-2deg);
  -webkit-transition: transform 0.3s ease;
}

.home-contact {
  position: relative;
}
.home-contact::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 54px;
  top: 0;
  right: 32px;
  background: url(../img/ninja-cyclope.svg) 0 0 no-repeat;
  transform: translateY(-53px);
  -webkit-transform: translateY(-53px);
  background-size: 100% auto;
}
.home-contact h2 {
  font-size: 6.4rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4rem;
  padding-right: 70%;
}
.home-contact .accroche {
  font-size: 2.4rem;
}
.txt-oeth {
  font-size: 2rem;
}

@media (min-width: 1500px) {
  .home-contact h2 {
    padding-right: 60%;
  }
  .home-contact .accroche {
    padding-right: 40%;
  }
  .txt-oeth {
    padding-right: 40%;
  }
  .texte-padding {
    padding-right: 40%;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .home-contact h2 {
    padding-right: 30%;
  }
  .home-contact .accroche {
    padding-right: 20%;
  }
  .txt-oeth {
    padding-right: 20%;
  }
  .texte-padding {
    padding-right: 20%;
  }
}
@media (max-width: 899px) {
  .home-contact h2 {
    padding-right: 5%;
  }
  .home-contact .accroche {
    padding-right: 3%;
  }
  .txt-oeth {
    padding-right: 3%;
  }
  .texte-padding {
    padding-right: 3%;
  }
}

.cta-contact ul {
  list-style: none;
  margin: 32px 0;
  padding: 0;
}

.cta-contact ul li {
  margin: 32px 0;
  font-size: 2rem;
}

.cta-contact ul li a {
  color: var(--white);
  padding-left: 52px;
  position: relative;
  display: flex;
  display: inline-block;
  align-items: center;
  min-height: 32px;
}
.cta-contact.page-contact ul li a {
  color: var(--blue);
}

.cta-contact ul li.mail a::before,
.cta-contact ul li.tel a::before,
.cta-contact ul li.rdv a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: contain;
}

.cta-contact ul li.mail a::before {
  width: 32px;
  height: 32px;
  background-image: url(../img/picto-mail.svg);
}
.cta-contact.page-contact ul li.mail a::before {
  background-image: url(../img/picto-mail-blue.svg);
}

.cta-contact ul li.tel a::before {
  width: 32px;
  height: 50px;
  background-image: url(../img/picto-tel.svg);
}
.cta-contact.page-contact ul li.tel a::before {
  background-image: url(../img/picto-tel-blue.svg);
}

.cta-contact ul li.rdv a::before {
  width: 32px;
  height: 38px;
  background-image: url(../img/picto-rdv.svg);
}

.site-content h1 {
  font-size: 6.4rem;
  font-weight: 600;
  margin: 124px 0px 0px 0px;
  max-width: 720px;
}
.site-content .post h1 {
  max-width: none;
}

@media (max-width: 719px) {
  .site-content h1 {
    max-width: auto;
  }
}

.site-content .top-accroche {
  font-size: 4rem;
  line-height: 1.2;
  margin-bottom: 32px;
  margin-top: 32px;
}
.bloc-image-ref .wp-block-group__inner-container {
  display: flex;
  align-items: center !important;
  justify-content: start;
  gap: 20%;
  margin: 64px 0px;
}
.img-border img {
  border: 2px solid var(--blue);
}

.site-content h2 {
  font-size: 4rem;
  font-weight: 600;
  margin: 16px 0px 24px 0px;
}

.site-content h3 {
  font-size: 3rem;
  font-weight: 600;
  margin: 32px 0px 16px 0px;
}
.site-content h4 {
  font-size: 2rem;
  font-weight: 600;
  margin: 16px 0px;
}
.site-content .accroche {
  font-size: 3rem;
  line-height: 1.3;
}
.txt-emphase-douce {
  font-size: 2.2rem;
}
.bloc-citation {
  background-color: rgba(254, 243, 123, 0.1);
  padding: 16px;
  font-size: 2rem;
  margin-right: 20%;
}
@media (max-width: 799px) {
  .bloc-citation {
    margin-right: 6px;
  }
}

.colonne-img {
  position: relative;
  flex: 1;
}

.colonne-img .img-float {
  position: sticky;
  top: 20px;
  text-align: right;
}

.logos-ref .wp-block-group__inner-container {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, max-content);
  gap: 32px;
  align-items: end;
  margin: 64px 0px 96px 0px;
}

/* Cellule cliquable */
.logos-ref a {
  padding: 8px 10px; /* confort clic, influe légèrement la largeur de colonne */
  border-radius: 8px;
  transition: transform 200ms ease;
  will-change: transform;
  text-decoration: none;
}
.logos-ref a::after {
  display: none !important;
}
/* Effet doux au hover + focus clavier */
.logos-ref a:hover,
.logos-ref a:focus-visible {
  transform: scale(1.05);
}
.logos-ref a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Logos (img ou inline SVG) : hauteur max 68px, largeur auto */
.logos-ref img,
.logos-ref svg {
  max-height: 68px;
  height: auto;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Réduction des animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) {
  .logos-ref a {
    transition: none;
  }
  .logos-ref a:hover,
  .logos-ref a:focus-visible {
    transform: none;
  }
}

/* Responsive : 3 → 2 → 1 colonnes, toujours à largeur de contenu */
@media (max-width: 1200px) {
  .logos-ref .wp-block-group__inner-container {
    grid-template-columns: repeat(3, max-content);
  }
}
@media (max-width: 900px) {
  .logos-ref .wp-block-group__inner-container {
    grid-template-columns: repeat(2, max-content);
  }
}
@media (max-width: 560px) {
  .logos-ref .wp-block-group__inner-container {
    grid-template-columns: repeat(1, max-content);
  }
}

.contact-basdepage h2 {
  font-size: 6.4rem;
  font-weight: 600;
  width: 590px;
  margin-bottom: 64px;
}
@media (max-width: 574px) {
  .contact-basdepage h2 {
    font-size: 6.4rem;
    font-weight: 600;
    width: 100%;
  }
}

.bob {
  position: relative;
}
.bob::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 20px;
  width: 99px;
  height: 117px;
  background: url(../img/bob.svg) 0 0 no-repeat;
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}
.rudy {
  position: relative;
}
.rudy::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 20px;
  width: 74px;
  height: 79px;
  background: url(../img/rudy.svg) 0 0 no-repeat;
  transform: translateY(-78px);
  -webkit-transform: translateY(-78px);
}
.souhane {
  position: relative;
}
.souhane::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 20px;
  width: 60px;
  height: 75px;
  background: url(../img/souhane.svg) 0 0 no-repeat;
  background-size: 100% auto;
  transform: translateY(-74px);
  -webkit-transform: translateY(-74px);
}
.ref-culture {
  background: #fff url(../img/bg-home-offres.svg) left bottom no-repeat;
}

.legend-photo {
  position: relative;
  display: inline-block;
  margin: 16px;
}
.legend-photo::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 28px;
  background: url(../img/smiley-white.svg) 0 0 no-repeat;
  background-size: 100% auto;
  top: 50%;
  transform: translateY(-50%);
  right: -36px;
}

.naissance-sf {
  background: var(--blue) url(../img/mini-sigle-sf.svg) right 101% no-repeat;
}
.naissance-sf .right-column img {
  border: 2px solid var(--white);
}

@media (min-width: 1500px) {
  .colonne-pad-txt {
    padding-right: 26%;
  }
}
@media (min-width: 900px) and (max-width: 1599px) {
  .colonne-pad-txt {
    padding-right: 10%;
  }
}
@media (max-width: 899px) {
  .colonne-pad-txt {
    padding-right: 2%;
  }
}

.demain {
  background: #fff url(../img/left-grad-yellow.svg) left bottom no-repeat;
}

h2.titre-cross {
  position: relative;
  display: inline-block;
}
h2.titre-cross::after {
  content: "";
  position: absolute;
  width: 39px;
  height: 39px;
  background: url(../img/blue-cross.svg) 0 0 no-repeat;
  background-size: 100% auto;
  top: 50%;
  right: -128px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
h3.titre-cross {
  position: relative;
  display: inline-block;
}
h3.titre-cross::after {
  content: "";
  position: absolute;
  width: 39px;
  height: 39px;
  background: url(../img/blue-cross.svg) 0 0 no-repeat;
  background-size: 100% auto;
  top: 50%;
  right: -400px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
@media (max-width: 768px) {
  h3.titre-cross::after {
    right: -52px;
  }
}
/* Liste avec puces "capsule" 13x6 */
.ul-bullets-pill {
  list-style: none;
  margin: 32px 0 !important;
  padding: 0;
  --bullet-w: 13px;
  --bullet-h: 6px;
  --bullet-gap: 10px; /* espace puce ↔ texte */
}
.ol-bullets-pill {
  margin: 32px 0px 32px 16px !important;
  padding: 0;
  --bullet-w: 8px;
  --bullet-h: 6px;
  --bullet-gap: 4px; /* espace puce ↔ texte */
}

.ul-bullets-pill > li,
.ol-bullets-pill > li {
  position: relative;
  padding-inline-start: calc(var(--bullet-w) + var(--bullet-gap));
  margin-bottom: 8px;
}

/* Puce capsule, héritant de la couleur du texte */
.ul-bullets-pill > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0; /* RTL-friendly */
  top: 0.7em; /* ajuste l’alignement vertical */
  transform: translateY(-50%);
  inline-size: var(--bullet-w); /* 13px */
  block-size: var(--bullet-h); /* 6px */
  border-radius: 32px;
  background: currentColor; /* suit la couleur du texte */
}

/* Optionnel : espacement vertical entre items */
.ul-bullets-pill > li + li {
  margin-block-start: 0.35em;
}

.today {
  position: relative;
}
.today::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 54px;
  top: 0;
  right: 32px;
  background: url(../img/ninja-cyclope.svg) 0 0 no-repeat;
  transform: translateY(-53px);
  -webkit-transform: translateY(-53px);
  background-size: 100% auto;
}
.emphase-big {
  font-size: 4rem;
}

.deroule-clinic {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 2rem;

  display: flex;
  flex-direction: column;
  gap: 38px; /* espace ENTRE les <li>, pas au-dessus/au-dessous */
}

.deroule-clinic li {
  position: relative;
  padding-left: 92px;
  padding-bottom: 24px; /* place pour la barre verte */
  margin: 0; /* important : on retire margin-top/bottom */
}

.deroule-clinic li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 68px;
  height: 16px;
  background-color: var(--bggreen);
}

/* Numéros */
.deroule-clinic li.first::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 44px;
  width: 22px;
  height: 67px;
  background: url(../img/one.svg) no-repeat 0 0 / 100% auto;
}
.deroule-clinic li.second::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 50px;
  width: 46px;
  height: 68px;
  background: url(../img/two.svg) no-repeat 0 0 / 100% auto;
}
.deroule-clinic li.third::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 50px;
  width: 44px;
  height: 70px;
  background: url(../img/three.svg) no-repeat 0 0 / 100% auto;
}
.deroule-clinic li.fourth::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 50px;
  width: 47px;
  height: 67px;
  background: url(../img/four.svg) no-repeat 0 0 / 100% auto;
}

.cards-clinic {
  margin-bottom: 64px;
}
.card-clinic {
  background: var(--blue);
  padding: 32px;
  color: var(--white);
  margin-right: 32px;
}

.card-clinic h3 {
  position: relative;
  font-size: 3.2rem;
  font-weight: 700;
  padding-left: 32px;
  margin: 0px 0px 24px 0px;
}
.card-clinic h3::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  background: url(../img/white-small-cross.svg) 0 0 no-repeat;
  background-size: 100% auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.card-clinic .emphase {
  color: #fef37b;
  font-size: 2.4rem;
  margin: 32px 0px 16px 0px;
}
.declusion-clinic {
  position: relative;
  font-size: 4rem;
  line-height: 1.2;
  width: 20%;
  margin: 64px auto;
  padding-left: 60px;
}

.declusion-clinic::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: url(../img/blue-cross.svg) 0 0 no-repeat;
  background-size: 100% auto;
  top: 10px;
  left: 0px;
}
@media (min-width: 1900px) {
  .declusion-clinic {
    width: 20%;
  }
}
@media (min-width: 1100px) and (max-width: 1899px) {
  .declusion-clinic {
    width: 40%;
  }
}
@media (max-width: 1099px) {
  .declusion-clinic {
    width: 80%;
  }
}
.clinic-cas {
  padding-top: 16px !important;
}
.clinic-qui {
  font-size: 2rem;
  position: relative;
}
.clinic-qui::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 54px;
  top: 0;
  right: 32px;
  background: url(../img/ninja-cyclope.svg) 0 0 no-repeat;
  transform: translateY(-53px);
  -webkit-transform: translateY(-53px);
  background-size: 100% auto;
}

.clinic-gain {
  font-size: 2rem;
}

.barre-grad {
  position: relative;
  margin-left: 46px;
}
.barre-grad::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42px;
  width: 9px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(254, 243, 123, 0.5) 0%,
    #3d27da 100%
  );
}

/* Conteneur principal */
.details-faq {
  margin: 1rem 0;
  background: transparent;
  border: none;
}

@media (min-width: 1500px) {
  .details-faq {
    padding-right: 40%;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .details-faq {
    padding-right: 16%;
  }
}
@media (max-width: 899px) {
  .details-faq {
    padding-right: 3%;
  }
}

/* Le résumé (titre cliquable) */
.details-faq summary {
  list-style: none; /* enlever le triangle natif */
  cursor: pointer;
  font-size: 2.4rem;
  color: var(--white);
  padding: 8px 8px 8px 24px;
  position: relative;
}

/* Icone personnalisée (chevron) */
.details-faq summary::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--white);
  font-size: 5rem;
  line-height: 0.6;
  transition: transform 0.2s ease;
}

/* Quand le details est ouvert : rotation */
.details-faq[open] summary::before {
  transform: rotate(90deg);
}

.details-faq p,
.details-faq div {
  margin: 0.5rem 0 1rem 2rem;
  font-size: 1.8rem;
}

.details-faq summary:focus {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
}
.details-faq .ul-bullets-pill {
  margin: 8px 0px 0px 28px !important;
}

.faq {
  background: var(--blue) url(../img/point-faq.svg) 92% 106% no-repeat;
}

@media (max-width: 1149px) {
  .faq {
    background: var(--blue) url(../img/point-faq.svg) 92% 101% no-repeat;
    background-size: 120px auto;
    padding-bottom: 124px;
  }
}

.pedago-lms,
.web-diff,
.accompagnement-audit,
.apres-web,
.articles-ressources {
  background: #fff url(../img/left-grad-yellow.svg) left bottom no-repeat;
}

.formule-liste {
  font-size: 2rem;
}
.formules-pedago,
.prix-web,
.accompagnement-audit {
  background: url(../img/bg-right-yellowgrad.svg) right bottom no-repeat;
}
.list-post {
  background: #fff url(../img/bg-top-left.svg) left top no-repeat;
}
.ninja {
  position: relative;
}
.ninja::before {
  content: "";
  position: absolute;
  width: 74px;
  height: 54px;
  top: 0;
  right: 32px;
  background: url(../img/ninja-cyclope.svg) 0 0 no-repeat;
  transform: translateY(-53px);
  -webkit-transform: translateY(-53px);
  background-size: 100% auto;
}

.yellow-card {
  color: var(--yellow);
}

.contact-inter-nom {
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  margin-top: 16px;
}
.contact-inter-legend {
  text-align: center;
}

@media (min-width: 1800px) {
  .form-sf .gform_wrapper {
    padding-right: 54%;
  }
}
@media (min-width: 1500px) and (max-width: 1799px) {
  .form-sf .gform_wrapper {
    padding-right: 32%;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .form-sf .gform_wrapper {
    padding-right: 16%;
  }
}
@media (max-width: 899px) {
  .form-sf .gform_wrapper {
    padding-right: 0px;
  }
}

.form-sf
  .gform-theme--framework:where(:not(.gform_editor))
  .gfield--type-section {
  border: 0;
}
.form-sf .gform_description {
  margin-bottom: 16px;
}

.form-sf
  .gform-theme--framework
  .gform-field-label:where(:not([class*="gform-field-label--type-"])) {
  font-weight: 600;
  margin-bottom: 16px !important;
}

.form-sf .gform-theme--foundation .gform_footer {
  margin-block-start: 64px !important;
}
.intro-page-carnet {
  font-size: 2rem;
  margin: 32px 5% 32px 8px;
}
.intro-cat {
  font-size: 2.8rem;
  font-weight: 600;
  margin-top: 64px;
  margin-left: 8px;
}
.liste-categories {
  margin: 32px 0px 128px 8px !important;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.alaune h2 {
  font-size: 6rem;
  margin-bottom: 32px;
}
.sf-card--featured {
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 16px;
}
@media (min-width: 1600px) {
  .sf-card--featured {
    padding-right: 20%;
  }
}
@media (min-width: 900px) and (max-width: 1599px) {
  .sf-card--featured {
    padding-right: 10%;
  }
}
@media (max-width: 899px) {
  .sf-card--featured {
    grid-template-columns: 1fr;
    padding-right: 3%;
  }
  .sf-card__highlight {
    margin-top: 16px;
  }
}
.sf-card--featured .sf-card__media img {
  width: 80%;
  height: auto;
  border: 2px solid var(--white);
}
.sf-card--featured .sf-card__body {
  color: var(--white);
}
.sf-card--featured .bloc-right-une {
  align-self: center;
}
.sf-card__highlight {
  font-size: 2.4rem;
}

.sf-card--featured a.sf-card__link {
  position: relative;
  color: var(--white);

  margin: 64px 0px 16px 0px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.sf-card--featured a.sf-card__link:hover,
.sf-card--featured a.sf-card__link:focus {
  color: var(--bggreen);
  padding-left: 52px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.sf-card--featured a.sf-card__link h3 {
  margin: 0px;
}

.sf-card--featured a.sf-card__link::before {
  content: "";
  position: absolute;
  width: 22px;
  height: 19px;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  opacity: 0;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23fff'/%3E%3C/svg%3E");
}
.sf-card--featured a.sf-card__link:hover::before,
.sf-card--featured a.sf-card__link:focus::before {
  left: 20px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'%3E%3Cpath d='M11.3949 1.14336C11.6117 0.925873 11.9055 0.803711 12.2119 0.803711C12.5182 0.803711 12.8121 0.925873 13.0289 1.14336L20.7361 8.88597C20.9526 9.10373 21.0742 9.39892 21.0742 9.70669C21.0742 10.0145 20.9526 10.3096 20.7361 10.5274L13.0289 18.27C12.923 18.3841 12.7954 18.4756 12.6536 18.5391C12.5118 18.6026 12.3587 18.6367 12.2034 18.6395C12.0482 18.6422 11.894 18.6135 11.7501 18.5551C11.6061 18.4967 11.4753 18.4098 11.3656 18.2995C11.2558 18.1892 11.1692 18.0578 11.1111 17.9132C11.053 17.7686 11.0244 17.6137 11.0271 17.4578C11.0299 17.3018 11.0639 17.148 11.127 17.0056C11.1902 16.8631 11.2813 16.7349 11.3949 16.6286L17.1291 10.8681H1.42171C1.1151 10.8681 0.821045 10.7457 0.604236 10.5279C0.387427 10.3101 0.265625 10.0147 0.265625 9.70669C0.265625 9.39867 0.387427 9.10326 0.604236 8.88546C0.821045 8.66766 1.1151 8.54529 1.42171 8.54529H17.1291L11.3949 2.7848C11.1784 2.56703 11.0568 2.27185 11.0568 1.96408C11.0568 1.65631 11.1784 1.36112 11.3949 1.14336Z' fill='%23c5ffd8'/%3E%3C/svg%3E");
}
.sf-card--featured a.sf-card__link:hover::before,
.sf-card--featured a.sf-card__link:focus::before {
  transform: translate(0, -50%);
  opacity: 1;
}
.sf-card--featured a.sf-card__link:hover .label,
.sf-card--featured a.sf-card__link:focus .label {
  transform: translateX(14px);
}
.sf-card__reading {
  margin: 32px 0px;
}

/* ===== Grille ===== */
.sf-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 56px);
  margin: 64px 0px 96px 0px;
}

@media (min-width: 900px) and (max-width: 1499px) {
  .sf-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .sf-grid {
    grid-template-columns: 1fr;
  }
}

.post h1 {
  margin-bottom: 16px;
}

@media (min-width: 1500px) {
  .post h1 {
    padding-right: 40%;
  }
}
@media (min-width: 900px) and (max-width: 1499px) {
  .post h1 {
    padding-right: 20%;
  }
}
@media (max-width: 899px) {
  .post h1 {
    padding-right: 3%;
  }
}
.byline img.avatar {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 8px;
}
.author-avatar {
  block-size: auto;
}
.entry-meta {
  margin: 24px 0px 8px 8px;
}
.author-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 64px;
  grid-row-gap: 0px;
}
.author-avatar-wrap img {
  margin-top: 110px;
}
.author-infos {
  margin-left: 8px;
}
.author-bio {
  margin: 32px 0px;
}
.wrapper-footer-post {
  padding: 64px 0px;
}
.post-navigation {
  margin: 32px 0px;
}

.bloc-mea {
  background-color: var(--bggreen);
  padding: 32px;
  font-size: 2rem;
  margin: 64px 32px 32px 0px;
}
.post-intro {
  font-size: 2rem;
}
/* Décalage natif des ancres (utile si header fixe) */
:where([id]) {
  scroll-margin-top: var(--scroll-offset, 96px);
}

/* Visuel du lien actif */
.sommaire-article a[aria-current="true"] {
  background-color: var(--yellow);
}

.site-sitemap .skip-links {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 1rem;
}
.site-sitemap .skip-link {
  padding: 0.25rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
}
.site-sitemap .sitemap__section {
  margin-block: 2rem;
}

.site-sitemap .sitemap__list,
.site-sitemap .sitemap__tree,
.site-sitemap .sitemap__cpt {
  margin: 16px;
  padding-left: 2.4rem;
}
.site-sitemap .sitemap__list li {
  margin: 0.25rem 0;
}
.site-sitemap .sitemap__date {
  opacity: 0.9;
}
.site-sitemap .sitemap__more {
  margin: 0.5rem 0 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-sitemap a:hover {
    text-decoration: underline;
  }
}

.search-form-wrapper-page {
  margin: 32px 0;
}
.search-form-wrapper-page input[type="submit"] {
  background-color: var(--blue);
  color: var(--white);
  padding: 8px 16px;
  font-size: 2rem;
  border-radius: 10px;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  border: transparent;
}
.search-form-wrapper-page input[type="submit"]:hover {
  background-color: #14028f;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
}
.search-form-wrapper-page input {
  border: 1px solid var(--blue);
  padding: 8px 16px;
  margin-right: 8px;
  border-radius: 10px;
}
.nav-links a {
  font-size: 2.4rem;
  background-color: var(--blue);
  color: var(--white);
  padding: 6px;
  border-radius: 6px;
  text-decoration: none;
}
.nav-links span {
  font-size: 2.4rem;

  padding: 6px;
}
.sf-latest-posts {
  margin: 32px 0;
}
.sf-lp__header {
  margin-bottom: 4rem;
}
.sf-lp__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.sf-lp__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
}
.sf-lp__card .sf-card__body {
  margin-top: 0;
}
.sf-lp__card img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  border: 2px solid var(--blue);
}
.site-content h3.sf-card__title {
  margin-top: 0 !important;
}
.sf-lp__card-title a:focus,
.sf-lp__card-title a:hover {
  text-decoration: underline;
}
.sf-lp__excerpt {
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 2040px) {
  .sf-lp__card .sf-card__body {
    padding-right: 16%;
  }
}