/*
Theme Name:     Nao digit Child
Theme URI:      n/a
Template:       kadence
Author:         Nao Studio
Author URI:     n/a
Description:    Child Theme Description
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

@charset "UTF-8";

/* * FONTS * */
/* ********* */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,200;0,300;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap");

.entry-content-wrap {
    padding: 0 !important;
  
}

.content-area{
	margin:0px;
}

.kb-off-canvas-inner{
	background: rgb(22, 2, 29);
    background: linear-gradient(
    0deg,
    rgba(22, 2, 29, 1) 0%,
    rgba(58, 20, 71, 1) 100%
  );
}
/* ***LOGO**** */
/* ********** */
/* Styles de base pour le cercle */
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* Pour créer un cercle */
  background: linear-gradient(-80deg, #fccda1, #ff6529, #ac45e6, #53c3d5, #42c77f, #fccda1);
  /* Gradient initial */
  background-size: 800% 800%;
  -webkit-animation: gradient 15s linear infinite;
          animation: gradient 15s linear infinite;
  /* Animation pour le fond de gradient */
  margin: auto;
  /* Centrer le cercle horizontalement */
  position: relative;
  /* Position relative pour permettre le positionnement absolu */
}

/* Style du span avec la classe NAOTitle */
.NAOTitle {
  position: absolute;
  top: 38%;
  /* Position au milieu verticalement */
  left: -50px;
  /* Ajustez cette valeur en fonction de votre mise en page */
  margin: auto;
}

h3[class*=widgettitle],
h3[class*=title-footer] {
  color: #fff;
}

/* Animation pour le fond de gradient */
@-webkit-keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.widget.widget_nav_menu ul {
  list-style-type: none !important;
  padding: 0px !important;
  color: #fff;
}

ul #menu-menu-principal {
  list-style-type: none !important;
  font-size: 1.3rem !important;
  margin-top: 50px;
}

#menu-menu-principal li a {
  color: #fff !important;
  text-decoration: none !important;
  text-align: left;
}

#menu-menu-principal li a:hover {
  font-weight: 900;
  text-decoration: underline !important;
  letter-spacing: 1.5px;

}
/* Toggle Kadence personnalisé */
.wp-block-kadence-off-canvas-trigger {
  position: relative !important;
  width: 50px !important;
  height: 50px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 9999 !important;
}

/* Masquer le SVG par défaut */
.wp-block-kadence-off-canvas-trigger svg {
  display: none !important;
}

/* Les 3 barres custom */
.wp-block-kadence-off-canvas-trigger span {
  position: absolute !important;
  width: 30px !important;
  height: 3px !important;
  border-radius: 4px !important;
  background-color: #fff !important; /* blanc par défaut */
  transition: 0.5s !important;
}

.wp-block-kadence-off-canvas-trigger span:nth-child(1) {
  transform: translateY(-10px) !important;
  width: 18px !important;
}

.wp-block-kadence-off-canvas-trigger span:nth-child(2) {
  transform: translateY(0px) !important;
  width: 30px !important;
}

.wp-block-kadence-off-canvas-trigger span:nth-child(3) {
  transform: translateY(10px) !important;
  width: 13px !important;
}

/* Animation quand le menu est ouvert (aria-expanded="true") */
.wp-block-kadence-off-canvas-trigger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0px) rotate(45deg) !important;
  width: 25px !important;
  background-color: #fff !important;
}

.wp-block-kadence-off-canvas-trigger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(0px) rotate(-45deg) !important;
  width: 25px !important;
  background-color: #fff !important;
}

.wp-block-kadence-off-canvas-trigger[aria-expanded="true"] span:nth-child(3) {
  transform: translateX(60px) !important;
  background-color: #fff !important;
}

/* Variante dynamique au scroll */
.wp-block-kadence-off-canvas-trigger.scrolled span {
  background-color: #16021d !important; /* couleur au scroll */
}

/* * GENERAL * */
/* *********** */
main {
  top: 0;
}

h1 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 800;
  color: #fff;
  font-size: 5rem;
  text-align: left;
}

h2 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 800;
  color: #16021d;
  font-size: 2.1rem;
  margin-top: 20px;
  text-align: left;
}

h3 {
  font-family: "Inter Tight", sans-serif;
  font-weight: 800;
  color: #16021d;
  font-size: 1.2rem;
  margin-top: 18px;
}

p {
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  color: #6a709d;
  font-size: 1rem;
  text-align: left;
}

span.vague-vert {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #42c77f;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
span.vague-vert::before {
  content: url(../images/vague-vert.png);
  margin-right: 10px;
}

span.vague-orange {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #ff6529;
  text-transform: uppercase;
  font-weight: bold;
}
span.vague-orange::before {
  content: url(../images/vague-orange.png);
  margin-right: 10px;
}

span.vague-Rose {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #ff3c62;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
span.vague-Rose::before {
  content: url(../images/vague-Rose.png);
  margin-right: 10px;
}

span.vague-rouge {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #f33a38;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
span.vague-rouge::before {
  content: url(../images/vague-rouge.png);
  margin-right: 10px;
}

span.vague-bleu {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #53c3d5;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
span.vague-bleu::before {
  content: url(../images/vague-bleu.png);
  margin-right: 10px;
}

span.vague-violette {
  font-family: "Inter Tight", sans-serif;
  letter-spacing: 1.5px;
  color: #ac45e6;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
}
span.vague-violette::before {
  content: url(../images/vague-violette.png);
  margin-right: 10px;
}

.bk_other {
  background: linear-gradient(150deg, #fccda1, #FF6529);
  background-size: 200% 100% !important;
  -webkit-animation: bk_other 22s ease infinite;
          animation: bk_other 22s ease infinite;
}

@-webkit-keyframes bk_other {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_other {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bk_gp {
  background: linear-gradient(150deg, #fccda1, #88ebff);
  background-size: 200% 100% !important;
  -webkit-animation: bk_gp 22s ease infinite;
          animation: bk_gp 22s ease infinite;
}

@-webkit-keyframes bk_gp {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_gp {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bk_dev {
  background: linear-gradient(150deg, #fccda1, #fc6ea9);
  background-size: 200% 100% !important;
  -webkit-animation: bk_dev 22s ease infinite;
          animation: bk_dev 22s ease infinite;
}

@-webkit-keyframes bk_dev {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_dev {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bk_coach {
  background: linear-gradient(130deg, #fccda1, #90fec0);
  background-size: 200% 100% !important;
  -webkit-animation: bk_coach 22s ease infinite;
          animation: bk_coach 22s ease infinite;
}

@-webkit-keyframes bk_coach {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_coach {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bk_audit {
  background: linear-gradient(130deg, #fccda1, #d386fe);
  background-size: 200% 100% !important;
  -webkit-animation: bk_audit 22s ease infinite;
          animation: bk_audit 22s ease infinite;
}

@-webkit-keyframes bk_audit {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_audit {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bk_ux {
  background: linear-gradient(130deg, #fccda1, #f33a38);
  background-size: 200% 100% !important;
  -webkit-animation: bk_ux 22s ease infinite;
          animation: bk_ux 22s ease infinite;
}

@-webkit-keyframes bk_ux {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes bk_ux {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Style des boutons */
.btn-color .btn {
  text-align: left;
  color: #fff !important;
}

/* Style pour le bouton btn-dev */
.btn-color .btn-dev {
  background-color: transparent;
  background-image: url("../images/Nao_logo_animals5.png");
  background-size: 50px;
  background-repeat: no-repeat;
  padding-left: 75px !important;
  background-position: 10px center;
  margin: 5px;
  place-items: center;
  border: transparent;
  --box-border--border: linear-gradient(180deg, #ff6ea8 0%, #fccda1 100%);
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  max-width: 24ch;
  font-size: 0.7rem;
}

.btn-color .btn-dev::before,
.btn-color .btn-gp::before,
.btn-color .btn-coach::before,
.btn-color .btn-ux::before,
.btn-color .btn-audit::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--box-border--border);
  -webkit-mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
          mask: var(--box--border__top-left) 0 0/0.625rem 0.625rem, var(--box--border__top) 0.625rem 0/calc(100% - 1.25rem) 0.625rem, var(--box--border__top-right) 100% 0/0.625rem 0.625rem, var(--box--border__left) 0 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__right) 100% 0.625rem/0.625rem calc(100% - 1.25rem), var(--box--border__bottom-left) 0 100%/0.625rem 0.625rem, var(--box--border__bottom) 0.625rem 100%/calc(100% - 1.25rem) 0.625rem, var(--box--border__bottom-right) 100% 100%/0.625rem 0.625rem;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Style pour le bouton btn-dev au survol */
.btn-color .btn-dev:hover {
  border: none;
  background-color: #ff6ea8;
  padding-left: none !important;
}

/* Style pour le bouton btn-gp */
.btn-color .btn-gp {
  background-color: transparent;
  background-image: url("../images/Nao_logo_animals1.png");
  background-repeat: no-repeat !important;
  background-size: 50px;
  padding-left: 75px !important;
  background-position: 10px center !important;
  margin: 5px;
  place-items: center;
  border: transparent;
  --box-border--border: linear-gradient(180deg, #53c3d5 0%, #fccda1 100%);
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  max-width: 24ch;
  font-size: 0.7rem;
}

/* Style pour le bouton btn-gp au survol */
.btn-color .btn-gp:hover {
  border: none;
  background-color: #53c3d5 !important;
}

/* Style pour le bouton btn-coach */
.btn-color .btn-coach {
  background-color: transparent;
  background-image: url("../images/Nao_logo_animals4.png");
  background-size: 50px;
  background-repeat: no-repeat !important;
  padding-left: 75px !important;
  background-position: 10px center !important;
  margin: 5px;
  place-items: center;
  border: transparent;
  --box-border--border: linear-gradient(180deg, #42c77f 0%, #fccda1 100%);
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  max-width: 24ch;
  font-size: 0.7rem;
}

/* Style pour le bouton btn-coach au survol */
.btn-color .btn-coach:hover {
  border: none;
  background-color: #42c77f !important;
}

/* Style pour le bouton btn-ux */
.btn-color .btn-ux {
  background-color: transparent;
  background-image: url("../images/Nao_logo_animals3.png");
  background-repeat: no-repeat !important;
  background-size: 50px;
  padding-left: 75px !important;
  background-position: 10px center !important;
  margin: 5px;
  place-items: center;
  border: transparent;
  --box-border--border: linear-gradient(180deg, #ff6529 0%, #fccda1 100%);
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  max-width: 24ch;
  font-size: 0.7rem;
}

/* Style pour le bouton btn-ux au survol */
.btn-color .btn-ux:hover {
  border: none;
  background-color: #ff6529 !important;
}

/* Style pour le bouton btn-ux */
.btn-color .btn-audit {
  background-color: transparent;
  background-image: url("../images/Nao_logo_animals2.png");
  background-repeat: no-repeat !important;
  background-size: 50px;
  padding-left: 75px !important;
  background-position: 10px center !important;
  margin: 5px;
  place-items: center;
  border: transparent;
  --box-border--border: linear-gradient(180deg, #ac45e6 0%, #fccda1 100%);
  /* classic 9-slide-scaling with 2px border 4px rounded corners. change `rx` and `ry` parameters to adjust border-radius */
  --box--border__top-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__top: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='1' x2='101' y2='1' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__top-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='1' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  --box--border__left: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='1' y1='-1' x2='1' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__right: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='10' height='100' viewBox='0 0 10 100' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='9' y1='-1' x2='9' y2='101' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-left: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='-9' width='18' height='18' rx='4' ry='4' stroke='%23000' stroke-width='2' /></svg>");
  --box--border__bottom: url("data:image/svg+xml,<svg preserveAspectRatio='none' width='100' height='10' viewBox='0 0 100 10' fill='none' xmlns='http://www.w3.org/2000/svg'><line x1='-1' y1='9' x2='101' y2='9' stroke='%23000' stroke-width='2'/></svg>");
  --box--border__bottom-right: url("data:image/svg+xml,<svg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='-9' y='-9' width='18' height='18' rx='4' ry='4' stroke='black' stroke-width='2' /></svg>");
  padding: 1rem;
  position: relative;
  resize: both;
  overflow: hidden;
  font-weight: 400;
  width: 100%;
  max-width: 24ch;
  font-size: 0.7rem;
}

/* Style pour le bouton btn-audit au survol */
.btn-color .btn-audit:hover {
  border: none;
  background-color: #ac45e6 !important;
}

.bloc-img-zone1 {
  background-image: url("../images/ellipse3.png") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 500px;
}

.bloc-img-zone1-corpo {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 500px;
}

.bk-zone2 {
  background-repeat: no-repeat;
  background-size: contain;
}

img.img1-zone2 {
  margin-bottom: 15px;
}

img.img2-zone2 {
  margin-top: 15px;
}

img.img3-zone2 {
  margin-top: 30px;
  width: 200px;
}

a.ctaWhite {
  background-color: #fff !important;
  color: #53c3d5 !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
}
a.ctaWhite:hover {
  background-color: #53c3d5 !important;
  color: #fff !important;
}

a.ctaBlue {
  background-color: #53c3d5 !important;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaBlue:hover {
  background-color: #fff !important;
  color: #53c3d5;
}

a.ctaOrange {
  background-color: #ff6529;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none;
  margin-right: 20px;
}
a.ctaOrange:hover {
  background-color: #fff !important;
  color: #ff6529;
}

a.ctaWhiteOrange {
  background-color: #fff !important;
  color: #ff6529 !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaWhiteOrange:hover {
  background-color: #ff6529 !important;
  color: #fff;
}

a.ctaPurple {
  background-color: #ac45e6;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none;
  margin-right: 20px;
}
a.ctaPurple:hover {
  background-color: #fff;
  color: #ac45e6;
}

a.ctaWhitePurple {
  background-color: #fff !important;
  color: #ac45e6 !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaWhitePurple:hover {
  background-color: #ac45e6 !important;
  color: #fff !important;
}

a.ctaGreen {
  background-color: #42c77f;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none;
  margin-right: 20px;
}
a.ctaGreen:hover {
  background-color: #fff;
  color: #16021d !important;
}

a.ctaWhiteGreen {
  background-color: #fff !important;
  color: #42c77f !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaWhiteGreen:hover {
  background-color: #42c77f !important;
  color: #fff !important;
}

a.ctaPink {
  background-color: #ff3c62;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none;
  margin-right: 20px;
}
a.ctaPink:hover {
  background-color: #fff;
  color: #ff3c62;
}

a.ctaWhitePink {
  background-color: #fff !important;
  color: #ff3c62 !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaWhitePink:hover {
  background-color: #ff3c62 !important;
  color: #fff !important;
}

a.ctaRed {
  background-color: #f33a38;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none;
  margin-right: 20px;
}
a.ctaRed:hover {
  background-color: #fff;
  color: #f33a38;
}

a.ctaWhiteRed {
  background-color: #fff !important;
  color: #f33a38 !important;
  padding: 10px;
  border: none;
  border-radius: 50px;
  font-weight: bold;
  font-family: "Inter Tight", sans-serif;
  text-decoration: none !important;
  margin-right: 20px;
}
a.ctaWhiteRed:hover {
  background-color: #f33a38 !important;
  color: #fff !important;
}

.motif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
  /* Supérieur à l'élément parent pour superposition */
}

/* Style pour l'infographie (superposé sur le motif) */
.infographie {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain !important;
  z-index: 3;
  /* Encore supérieur au motif pour superposition */
}

/* ***BLOC LIST*** */
.container.row.bloc_list {
  margin: auto !important;
}

.img_bloc {
  height: auto;
  width: 70%;
  margin: auto !important;
}

.background-img {
  background-size: contain;
}

/* ****BLOC MEA ICON**** */
.bg_darkPurple {
  background: rgb(22, 2, 29);
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(22, 2, 29)), to(rgb(58, 20, 71)));
  background: linear-gradient(0deg, rgb(22, 2, 29) 0%, rgb(58, 20, 71) 100%);
}

.whiteTxt {
  color: #fff !important;
}

/* ***BLOC TEAM*** */
hr.hr-team {
  width: 20%;
  margin: auto;
  color: #16021d !important;
  height: 2px !important;
  background-color: #16021d;
  border: none;
  opacity: 1 !important;
}

@media screen and (min-width: 2300px) {
  img.bk-Home.h-auto.w-auto {
    width: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  .col2-zone2 {
    margin-left: 20px;
  }
}
@media screen and (max-width: 1024px) {
  .bloc-img-zone1-corpo {
    display: none !important;
  }
  .bloc-img-zone1 {
    display: none !important;
  }
  h1 {
    font-size: 4rem;
  }
}
@media screen and (max-width: 768px) {
  .bloc-img-zone1 {
    display: none;
  }
  .bloc-img-zone1-corpo {
    display: none !important;
  }
  .btn-color .btn-dev,
.btn-color .btn-gp,
.btn-color .btn-coach,
.btn-color .btn-ux,
.btn-color .btn-audit {
    font-size: 0.5rem !important;
    padding: 10px !important;
    background-image: none !important;
    text-align: center;
  }
  .container-comp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /* Centrer les blocs dans le conteneur */
  }
  /* Masquer les indicateurs de carrousel */
  /* Masquer les icônes de navigation précédente et suivante */
}
@media screen and (max-width: 768px) and (max-width: 548px) {
  .cta-header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  .cta-header a {
    margin: 10px 0;
    /* Espacement entre les boutons */
  }
  .motif,
.infographie {
    display: none !important;
  }
  .sectionH1 p {
    text-align: center;
  }
  .bloc-img-zone1 {
    display: none;
  }
  .bloc-img-zone1-corpo {
    display: none !important;
  }
  h1 {
    font-size: 2rem !important;
    text-align: center;
  }
  h2 {
    font-size: 1.5rem !important;
    margin-bottom: 20px !important;
  }
  h3 {
    font-size: 1rem !important;
  }
  h3 span {
    font-size: 1rem !important;
  }
  p {
    font-size: 0.9rem !important;
  }
  p.number_bloc_list {
    font-size: 2rem !important;
  }
  b {
    font-size: 0.9rem;
  }
  span {
    font-size: 0.9rem !important;
  }
  .card-text p {
    font-size: 0.9rem !important;
  }
  .headerH1 {
    text-align: center;
  }
  .circle {
    width: 50px;
    height: 50px;
    margin: auto !important;
  }
  .NAOTitle {
    top: 24%;
    /* Position au milieu verticalement */
    left: -30px;
  }
  span.NAOTitle img {
    width: 80px !important;
  }
  .btn-color {
    display: none;
  }
  .dots-img {
    width: 10% !important;
  }
  .img-dots-container {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .img-bloc-list {
    width: 70%;
  }
  .col1 {
    margin: inherit;
  }
  .card-row.row {
    -webkit-box-pack: normal;
        -ms-flex-pack: normal;
            justify-content: normal;
  }
  .container {
    padding: 10px !important;
  }
  .footer-row {
    margin: auto !important;
    padding: 20px !important;
  }
}
@media screen and (max-width: 768px) {
  .navbar-toggler {
    color: #fff !important;
    z-index: 999 !important;
  }
}
@media screen and (max-width: 768px) {
  .carousel-indicators {
    display: none !important;
  }
}
@media screen and (max-width: 768px) {
  .carousel-control-prev-icon,
.carousel-control-next-icon {
    display: none !important;
  }
}
@media screen and (max-width: 1200px) {
  .col-md-12 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
  .sectionH1 p {
    text-align: center !important;
  }
  .sectionH1 {
    margin: auto;
  }
  .sakura-bk {
    display: none;
  }
  .infographie {
    display: none !important;
  }
  .dots-img {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .col-md-3 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 33 !important;
  }
}