.header-video {
  height: 624px;
  overflow: hidden;
  position: relative; /* Ajoutez cette ligne */
  padding-bottom: 50px;
}



video {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%; /* Centre horizontalement */
  transform: translateX(-50%); /* Ajuste le centrage */
  min-width: 100%; /* Modifiez cette ligne */
  min-height: 100%; /* Ajoutez cette ligne */
  width: auto; /* Modifiez cette ligne */
  height: auto; /* Ajoutez cette ligne */
}

@media screen and (max-width: 762px){
  .header-video {
    height: 447px;
    background-color: #ffeae5;
    background-image: url("../../img/sections/bg-header-video-mobile.png");
    background-size: cover;
    background-position: top center;
  }
  video {
    display: none;
  }
}
h1 {
  font-size: 48px;
  line-height: 0.6;
  position: absolute;
  top: 182px;
  left: 0;
  right: 0;
}

h1 .big-orange {
  color : #d64420;
  font-size: 96px;
  font-family: "Raleway-Bold";
}

h1 .small-black {
  font-size: 28px;
  font-family: "Raleway-Bold";
  letter-spacing: 5px;
}

@media screen and (max-width: 762px){
  h1 {
    font-size: 32px;
    top: 30px;
    line-height: 1;
  }
  h1 .big-orange {
    font-size: 52px;
  }
  h1 .small-black {
    display: inline-block;
    padding-top: 60px;
    font-size: 22px;
  }
}

@keyframes shakeMe {
    2%, 18% {
        transform: translate3d(-5px, 0, 0);
    }
    4%, 16% {
        transform: translate3d(5px, 0, 0);
    }
    6%, 10%, 14% {
        transform: translate3d(-5px, 0, 0);
    }
    8%, 12% {
        transform: translate3d(5px, 0, 0);
    }
    18.1% {
        transform: translate3d(0px, 0, 0);
    }
}

.shake {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation-name: shakeMe;
  animation-duration: 5s;
  animation-delay: 2.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
}

.position-fil {
  padding-right: 570px;
  padding-top: 26px;
}
.bloc-fil-video{
    max-width: 660px;
    height: 100%;
    object-fit: fill;
    display:block;
    margin: 0 auto;
  }

  @media screen and (max-width: 1245px){
    .bloc-fil-video{
        max-width: 609px;
      }
      .position-fil {
        padding-right: 508px;
        padding-top: 52px;
      }
  }
  @media screen and (max-width: 1099px){
      .position-fil {
        display: none;
      }
  }

  #filvideo {
    fill: none;
    stroke: #d44727;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    /* Animation du tracé */
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 2.5s ease-in-out .2s forwards;
  }

  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }

  /* Accessibilité : pas d’animation si réduit */
  @media (prefers-reduced-motion: reduce) {
    #filvideo { animation: none; stroke-dashoffset: 0; }
  }

.btn-sous-video {
  z-index: 99;
  position: absolute;
  top: 543px;
  left: 0;
  right: 0;
  width: 99%;
}

@media screen and (max-width: 762px){
  .btn-sous-video {
    top: 350px;
  }
}

.section-entreprise-apprenante {
  background-image: url("../../img/sections/bg-section-entreprise-apprenante.png");
  background-size: cover;
  background-position: top center;
}
.section-grandir-ensemble {
  background-image: url("../../img/sections/bg-section-grandir-ensemble.png");
  background-size: cover;
  background-position: top center;
}
.titre-image {
  font-size: 24px;
}


.trapeze {
  padding: 2%;
  border: 6px dashed #d64420;
  border-radius: 30px;
  transform: perspective(200px) rotateX(-2deg);
  max-width: 1150px;
  margin: 0 auto;
}

.citation {
  text-align: center;
  color: #d64420;
  font-family: 'Raleway-Bold';
  font-size: 36px;
  line-height: 2;
  transform: perspective(200px) rotateX(2deg);
}

@media screen and (max-width: 991px) {
  .trapeze {
    padding: 2% 2% 4% 2%;
    border: none
  }
  .citation {
    font-size: 22px;
    line-height: 1.8;
  }
}


.section-collectif {
  background-image: url("../../img/sections/bg-section-collectif.jpg");
  background-size: cover;
  background-position: top center;
}

@media screen and (max-width: 991px) {
  .section-collectif {
    background-image: url("../../img/sections/bg-section-collectif-mobile.jpg");
    background-size: cover;
    background-position: top center;
  }
}


.petit-trait-orange {
  width: 5px;
  height: 26px;
  background-color: #d64420;
  margin: 0 auto;
}

.all-blocs {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.bloc-gris {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 21px 21px 26px 28px;
  border-radius: 30px;
}

.bloc-gris p {
  color : #d64420;
  font-size: 21px;
  font-family: "Raleway-SemiBold";
}

.bloc-gris span {
  color : #d64420;
  font-size: 40px;
  font-family: "Raleway-Bold";
}

.bloc-noir {
  background-color: #000000;
  display: inline-block;
  border-radius: 30px;
  color: #ffffff;
}

.bloc-noir p {
  color: #ffffff;
}
.bloc-noir span {
  color: #ffffff;
}
.bloc-flex {
  display: flex;
}

.bloc-noir .bloc-gauche {
  border-right: 3px solid #ffffff;
  padding: 10px 10px 10px 20px;
  min-width: 125px;
}
.bloc-noir .bloc-gauche p {
  font-size: 24px;
}
.bloc-noir .bloc-gauche p span {
  font-size: 40px;
}
.bloc-noir .bloc-droite {
  padding: 21px 21px 26px 32px;
}
.bloc-noir .bloc-droite p {
  font-size: 24px;
  line-height: 2;
}



@media screen and (max-width: 576px) {
  .bloc-flex {
    flex-direction: column;
  }
  .bloc-noir .bloc-gauche {
    border-right: none;
    border-bottom: 3px solid #ffffff;
  }
  .flex-icon-text {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}


.bloc-orange {
  display: inline-block;
  background-color: #d64420;
  padding: 10px 21px 26px 35px;
  border-radius: 30px;
}

.bloc-orange p {
  color : #ffffff;
  font-size: 32px;
  font-family: "Raleway-SemiBold";
}

.bloc-orange span {
  color : #ffffff;
  font-size: 53px;
  font-family: "Raleway-Bold";
}

.section-deux-marques {
  background-image: url("../../img/sections/bg-section-deux-marques.png");
  background-size: cover;
  background-position: top center;
}

.bloc-iscod{
  max-width: 600px;
  margin: 0 auto;
  position:relative;
}

.bloc-visiplus{
  max-width: 600px;
  margin: 0 auto;
  position:relative;
}

@media screen and (min-width: 1199px){
  .bloc-iscod{
    margin: 0 auto!important;
  }

  .bloc-visiplus{
    margin: 0 auto!important;
  }
}
.ruban-rose{
  position:absolute;
  left:8px; right:8px;
  top:1px; height:100px;
  background:#ff2e63;
  z-index:0;
  -webkit-clip-path: polygon(92% 3%, 73% 0, 3% 0, 19% 67%, 49% 63%, 75% 66%, 99% 43%, 98% 5%);
          clip-path: polygon(92% 3%, 73% 0, 3% 0, 19% 67%, 49% 63%, 75% 66%, 99% 43%, 98% 5%);
}

.bloc-bleu{
  position:relative;
  background:#242f6d;
  color:#fff;
  padding:20px 40px 40px 50px;
  z-index:2;
  -webkit-clip-path: polygon(
    0 0, 3% 8%, 3% 91%, 0 100%, 42% 97%, 100% 100%, 100% 0, 78% 8%
  );
          clip-path: polygon(
    0 0, 3% 8%, 3% 91%, 0 100%, 42% 97%, 100% 100%, 100% 0, 78% 8%
  );
}
.bloc-bleu p{ margin:0 0 14px; color:#ffffff; }

.bloc-visiplus-orange{
  background-image: url("../../img/sections/bg-bloc-visiplus-orange.png");
  background-size: cover;
  background-position: left;
  position:relative;
  background-color:#FB4D41;
  color:#fff;
  padding:20px 60px 40px 40px;
  border-radius: 30px;
  z-index:2;
}
.bloc-visiplus-orange p{ margin:0 0 14px; color:#ffffff; }

.btn-iscod{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-20px;
  background:#ff2e63;
  color:#fff;
  padding:10px 20px;
  white-space:nowrap;
  z-index: 10;
  border: 2px solid #ff2e63;
  transition: 0.5s;
}

.btn-iscod:hover{
  background:#fff;
  color:#ff2e63;
}

.btn-visiplus{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-20px;
  background:#103144;
  color:#fff;
  padding:10px 20px;
  white-space:nowrap;
  border-radius: 10px;
  z-index: 10;
  border: 2px solid #103144;
  transition: 0.5s;
}
.btn-visiplus:hover{
  background:#fff;
  color:#103144;
}
@media screen and (max-width: 1199px){
  .bloc-bleu{
    padding:30px 20px 40px 40px;
  }
  .bloc-bleu p{ font-size: 15px;}
}

@media screen and (max-width: 576px){
  .bloc-visiplus-orange{
    padding:20px 30px 40px 30px;
  }
  .bloc-bleu{
    padding:30px 20px 40px 30px;
  }
}

.section-rse {
  background-image: url("../../img/sections/bg-section-rse.png");
  background-size: cover;
  background-position: top center;
}

.section-rse .text-intro {
  font-family: "Raleway-Bold";
  max-width: 870px;
  margin: 0 auto;
}

.section-rse .bloc-nqt {
  display: flex;
  justify-content: space-between;
  max-width: 810px;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}

.section-rse .bloc-nqt p {
  max-width: 470px;
}
.section-rse .bloc-nqt img {
  margin: 0 auto;
}

.section-grandir {
  background-image: url("../../img/sections/bg-section-grandir.png");
  background-size: cover;
  background-position: top center;
}

.section3btn{
  position:relative;
  margin:0 auto;
  display:flex;
  justify-content: space-between;
  max-width: 800px;
}

.text-gauche {
  font-size: 24px;
  max-width: 425px;
  font-family: "Raleway-SemiBold";
}
.decouvrez{
  color:#d64420;
  font-family: "Raleway-SemiBold";
}

.ctas{position:relative;
  display:flex;
  flex-direction:column;
  gap:31px;
  align-items:flex-start;
}

.btnoir{
  padding:10px 18px;
  background:#000; color:#fff;
}
.btnoir:hover{
  background:#d64420;
}

/* SVG couvrant toute la section */
.fils{
  position:absolute;
  pointer-events:none;
}
.fil{
  fill:none;
  stroke:#d64420;
  stroke-width:3;
  opacity:0;
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 600ms cubic-bezier(.22,1,.36,1), opacity 160ms linear;
}
@media screen and (max-width: 992px){
  .section3btn{
    display:inline-block;
  }
  .fils{
    display: none;
  }
  .text-gauche {
    max-width: 800px;
  }
  .ctas {
    text-align: center;
    align-items: center;
    padding-top: 30px;
  }
}

@media screen and (max-width: 576px) {
  .text-gauche {
    font-size: 20px;
  }
}