@import "menu-accueil-qCam5ti.css";

/*4) Option : scroll “smooth” vers les ancres
Ajoute juste
*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* pour compenser le header sticky */
}
.viewport{
  position: "relative";
  width: "100%";
  overflow: "hidden";
  background: "#f2f2f2";
  minHeight: 240;
}

* Reset compatible Bootstrap */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/* Forcer Bootstrap à fonctionner malgré le reset historique */
.offcanvas,
.offcanvas * ,
.accordion,
.accordion * ,
.collapse,
.collapse * ,
.navbar,
.navbar * {
  box-sizing: border-box;
}

html {
  font-size: 68.5%;
  width:100%;

}

@import url('https://fonts.googleapis.com/css2?family=Advent+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@1,200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size:1.5rem;
    font-family: 'Advent Pro', sans-serif;
    font-weight: bolder;
}

p{
    font-size: 1.0rem;
    font-family: 'Roboto', sans-serif;
}
.vert{
  background-color: #115758;
  color:#fff;
  font-size:1.6rem;
}
.vert a{
    color:#fff;
    font-size:1.4rem;
}
.vert a:hover{
  color:#61d466;
  text-decoration: none;
}

/*SLIDER*/
:root{
  /* Si --brand-500 n’est pas défini ailleurs, donne-lui une valeur par défaut */
  --brand-500: #115758;
}

/* Titre */
.page-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.title-underline{
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-500);
}

/* Accent brand */
.brand-text{
  color: var(--brand-500);
}

/* Cards */
.profil-card{
  border-left: 5px solid var(--brand-500);
}

.info-card .info-badge{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--brand-500);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-500), transparent 85%);
}

/* Flash alerts (petit détail visuel) */
.flash-alert{
  border: 0;
  border-left: 5px solid rgba(0,0,0,0.08);
}

.flash-bullet{
  width: 10px;
  height: 10px;
  margin-top: .35rem;
  border-radius: 999px;
}

.flash-bullet--success{ background: #198754; }
.flash-bullet--danger{ background: #dc3545; }

/* Bouton brand (Bootstrap-like) */
.btn-outline-brand{
  border-color: var(--brand-500);
  color: var(--brand-500);
  font-weight: 600;
}

.btn-outline-brand:hover{
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}

/* Styliser les inputs Symfony/Bootstrap si nécessaire */
.profil-card input,
.profil-card select,
.profil-card textarea{
  border-radius: 10px;
}

.profil-card input:focus,
.profil-card select:focus,
.profil-card textarea:focus{
  border-color: var(--brand-500);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-500), transparent 75%);
}



/* SLIDER */



:root{
      --brand-500: #115758;
    }

    /* Container slider full screen */
    .stack-slider{
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      background: #000;
    }

    /* Zone des slides */
    .stack-slider__stage{
      position: absolute;
      inset: 0;
    }

    /* Slides superposées */
    .stack-slider__slide{
      position: absolute;
      inset: 0;
      margin: 0;

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      /* invisible par défaut */
      opacity: 0;
      transform: translateX(100%); /* "hors écran" à droite */
      transition: transform 700ms ease, opacity 700ms ease; /* DURÉE 700ms */
      will-change: transform, opacity;

      z-index: 1;
    }

    /* slide active */
    .stack-slider__slide.is-active{
      opacity: 1;
      transform: translateX(0);
      z-index: 3;
    }

    /* slide sortante vers la gauche (next) */
    .stack-slider__slide.is-leaving-left{
      opacity: 0;
      transform: translateX(-100%);
      z-index: 2;
    }

    /* slide sortante vers la droite (prev) */
    .stack-slider__slide.is-leaving-right{
      opacity: 0;
      transform: translateX(100%);
      z-index: 2;
    }

    /* slide entrante depuis la gauche (prev) */
    .stack-slider__slide.is-entering-left{
      opacity: 1;
      transform: translateX(0);
      z-index: 3;
    }

    /* overlay (optionnel) */
    .stack-slider__overlay{
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
      z-index: 4;
      pointer-events: none;
    }

    /* Texte au-dessus */
    .stack-slider__content{
      position: relative;
      z-index: 5;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 24px;
      color: #fff;
      max-width: 900px;
    }

    .stack-slider__title{
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 900;
      margin: 30px 0px 0px 80px;
    }
    .stack-slider__title button{
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 900;
      color:#115758;
      padding:10px 25px;
      border-radius:25px;
      background-color: transparent;
      border: 1.5px solid #115758;
    }
    .stack-slider__title button:hover{
      font-size: clamp(2rem, 4vw, 3.2rem);
      font-weight: 900;
      color:#61d466;
      border: 1.5px solid #61d466;
    }
    .stack-slider__subtitle{
      margin: 30px 0px 0px 50px;
      color: rgba(255,255,255,.85);
      font-size: 1.1rem;
      margin: 0px 0px 0px 100px;
    }

    /* Boutons */
    .stack-slider__btn{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 6;

      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(0,0,0,.35);
      color: #fff;

      font-size: 28px;
      line-height: 40px;
      cursor: pointer;
    }

    .stack-slider__btn--prev{ left: 16px; }
    .stack-slider__btn--next{ right: 16px; }

    .stack-slider__btn:hover{
      background: rgba(0,0,0,.55);
      border-color: rgba(255,255,255,.6);
    }

    /* Dots */
    .stack-slider__dots{
      position: absolute;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      z-index: 7;

      display: flex;
      gap: 8px;
    }

    .stack-slider__dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.7);
      background: rgba(255,255,255,.15);
      cursor: pointer;
    }

    .stack-slider__dot.is-active{
      background: var(--brand-500);
      border-color: var(--brand-500);
    }

    /* Compteur 1/N (en bas à droite) */
    .stack-slider__counter{
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 8;

      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.22);
      color: rgba(255,255,255,.95);
      font-weight: 700;
      letter-spacing: .02em;
    }

    .stack-slider__counterTotal{
      color: rgba(255,255,255,.80);
    }

    @media (max-width: 576px){
      .stack-slider__btn{
        width: 40px;
        height: 40px;
        font-size: 24px;
      }
    }

    /* MINI SLIDER*/
    /* MINI SLIDER*/
    /* MINI SLIDER*/
    /* Core slider track (si pas déjà présent) */
  /* =============================
   1) VERROUILLAGE DE LA TAILLE
   ============================= */

/* La taille définie au départ NE CHANGE JAMAIS */
.kit-hero__visualText{
  height: 240px;          /* <= FIXE */
  width: 100%;
  position: relative;
  overflow: hidden;
  
  /* optionnel: look */
  border-radius: 16px;
}

/* Si ton .kit-hero__visualText avait du texte avant, on force zéro marge/padding */
.kit-hero__visualText{
  margin: 0;
  padding: 0;
}

/* =============================
   2) MINI SLIDER (track infini)
   ============================= */

  .miniTrackSlider{
    /* le slider remplit la zone fixe */
    position: absolute;     /* <- ne peut pas influencer la hauteur du parent */
    inset: 0;
    width: 100%;
    max-width:140px;
    margin-left:25%;
    align-items: center;;
    height: 100%;
    margin-top:20%;
    max-height:140px;
    border-radius: 16px;
    overflow: hidden;
    text-align:center;
    /* placeholder (pendant chargement) */
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
  }

  /* Effet shimmer tant que les images ne sont pas prêtes */
  .miniTrackSlider:not(.is-ready)::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.12),
      rgba(255,255,255,.05)
    );
    animation: miniSliderShimmer 1.2s infinite linear;
    pointer-events: none;
  }
  @keyframes miniSliderShimmer{
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
  }
  .miniTrackSlider.is-ready::after{
    display: none;
  }

  .miniTrackSlider__viewport{
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .miniTrackSlider__track{
    height: 100%;
    display: flex;
    transform: translate3d(0,0,0);
    will-change: transform;
  }

  .miniTrackSlider__slide{
    flex: 0 0 100%;
    height: 100%;
    position: relative;
  }

  /* PAS DE NOIR : cover + block */
/* ✅ Image: hauteur MAX 240px + remplissage propre */
.miniTrackSlider__img{
  width: 100%;
  max-width:240px;
  height: 100%;          /* remplit la slide (qui fait 240px) */
  max-height: 240px;     /* <= demande: ne dépasse jamais 240px */
  display: block;
  object-fit: cover;     /* pas de bandes noires */
  object-position: center;
}


/*  ACCUEIL  */

/* ===== HERO ===== */
.kit-hero{
  position: relative;
  /* si ta classe .vert met déjà une couleur de fond, ok */
}

.kit-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: .85rem;
}

.kit-hero__title{
  color: #fff;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  margin: 0;
}

.kit-hero__lead{
  color: rgba(255,255,255,.85);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 60ch;
}

.btn-brand{
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 16px;
}

.btn-brand:hover{
  filter: brightness(.95);
  color: #fff;
}

.btn-outline-brand{
  border: 1px solid var(--brand-500);
  color: var(--brand-500);
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 16px;
  background: rgba(255,255,255,.05);
}

.btn-outline-brand:hover{
  background: var(--brand-500);
  color: #fff;
}

.kit-hero__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.kit-hero__metaItem{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.kit-hero__metaNumber{
  font-weight: 900;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.1;
}

.kit-hero__metaLabel{
  color: rgba(255,255,255,.75);
  font-size: .85rem;
}

.kit-hero__visual{
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  min-height: 280px;
  overflow: hidden;
}

.kit-hero__visualInner{
  padding: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kit-hero__visualTitle{
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.kit-hero__visualText{
  color: rgba(255,255,255,.85);
}

/* ===== CARDS ===== */
.kit-card{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
}

.kit-card__header{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,0));
}

.kit-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--brand-500);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.kit-card__title{
  font-weight: 900;
  margin: 0;
  letter-spacing: -0.01em;
}

.kit-card__subtitle{
  color: rgba(0,0,0,.6);
  margin: 0;
}

.kit-card__body{
  padding: 18px 20px;
  color: rgba(0,0,0,.78);
  line-height: 1.65;
}

/* Steps */
.kit-steps{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.kit-step{
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.kit-step__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-500);
  margin-top: .45rem;
  box-shadow: 0 0 0 6px rgba(59,130,246,.12);
}

.kit-step__title{
  font-weight: 800;
  margin-bottom: 2px;
  color: rgba(0,0,0,.85);
}

.kit-step__text{
  color: rgba(0,0,0,.70);
  font-size: .95rem;
}

/* Lists */
.kit-list{
  margin: 12px 0 0 0;
  padding-left: 1.2rem;
}

.kit-list li{
  margin: 6px 0;
}



/*  Footer  */

.site-footer{
  background: #0b1220;
  color: rgba(255,255,255,.85);
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.site-footer__logo{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--brand-500);
  box-shadow: 0 0 0 6px rgba(59,130,246,.15);
}

.site-footer__name{
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.01em;
}

.site-footer__desc{
  max-width: 56ch;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}

.site-footer__links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.site-footer__link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.site-footer__link:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}

.site-footer__bottom{
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  flex-wrap: wrap;
}

.site-footer__miniLink{
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-weight: 700;
}

.site-footer__miniLink:hover{
  color: #fff;
  text-decoration: underline;
}

.site-footer__sep{
  margin: 0 8px;
  opacity: .6;
}

@media (max-width: 576px){
  .site-footer__links{
    grid-template-columns: 1fr;
  }
}



/* Zone globale stable */
.kit-hero__visualText{
  height: 350px;     /* hauteur stable = hauteur du bloc image */
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}


/* Responsive : sur petit écran, texte passe en dessous (toujours hauteur fixe ?)
   Si tu veux garder 240px fixe sur mobile, mieux vaut réduire le texte.
*/
@media (max-width: 576px){
  .miniSliderRow{
    grid-template-columns: 1fr; /* slider au-dessus */
    height: auto;               /* sinon ça coupe */
  }
  .kit-hero__visualText{
    height: auto;               /* idem */
  }
  .miniTrackSlider, .miniSliderText{
    height: 240px;
  }
}