/* section caroussel */
    .container_caroussel {
      position: relative;
      width: 95%;
      height: 50dvh;
      min-height: 460px;
      max-height: 680px;
      margin: 0 auto;
      border-radius: 16px;
      background-color: var(--blue);
      box-sizing: border-box;
    }
    
    .carousel {
      --c-radius: 12px;
      --c-ease: cubic-bezier(.2, .8, .2, 1);
      --c-delay: 6000ms;          /* remplacé par data-autoplay */
      --c-accent: #ffffff;
      position: relative;
      height: 100%;
      border-radius: var(--c-radius);
      overflow: hidden;
      isolation: isolate;
      color: #fff;
    }
    
    /*  Piste : défilement natif avec aimantation (swipe gratuit sur mobile)  */
    .carousel-track {
      display: flex;
      height: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      outline: none;
    }
    .carousel-track::-webkit-scrollbar { display: none; }
    
    .slide {
      position: relative;
      flex: 0 0 100%;
      height: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      display: flex;
      align-items: center;
      overflow: hidden;
      isolation: isolate;    /* l'image (z-index négatif) reste au-dessus du fond de la slide */
      background: #0b1530;   /* visible le temps que l'image charge */
    }
    
    /* Image de fond + voile pour garder le texte lisible */
    .slide-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -2;
    }
    .slide::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgba(5, 10, 28, .88) 0%, rgba(5, 10, 28, .6) 42%, rgba(5, 10, 28, .05) 75%);
    }
    
    /*  Contenu  */
    .slide-content {
      width: min(700px, 100%);
      padding: 24px clamp(24px, 5vw, 64px) 84px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .slide-title {
      font-size: clamp(28px, 4.2vw, 54px);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -.03em;
      text-wrap: balance;
      color: var(--white);
    }
    
    .slide-text {
      max-width: 50ch;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.55;
      color: rgba(255, 255, 255, .82);
      /* 3 lignes maximum, quoi qu'il arrive */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .slide-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }
    
    .carousel .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
      transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--c-ease);
    }
    
    /* Entrée du contenu sur la slide active : un seul mouvement, discret */
    .slide .slide-content > * {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .5s var(--c-ease), transform .5s var(--c-ease);
    }
    .slide.is-active .slide-content > * { opacity: 1; transform: none; }
    .slide.is-active .slide-content > :nth-child(2) { transition-delay: .06s; }
    .slide.is-active .slide-content > :nth-child(3) { transition-delay: .12s; }
    .slide.is-active .slide-content > :nth-child(4) { transition-delay: .18s; }
    /* Sans JS, tout reste visible */
    .carousel:not(.is-ready) .slide-content > * { opacity: 1; transform: none; }
    
    /*  Contrôles  */
    .carousel-controls {
      position: absolute;
      left: clamp(24px, 5vw, 64px);
      right: 16px;
      bottom: 16px;
      display: flex;
      align-items: center;
      gap: 14px;
      pointer-events: none;   /* laisse passer le swipe entre les boutons */
    }
    .carousel-controls > * { pointer-events: auto; }
    
    .arrows { display: flex; gap: 8px; margin-left: auto; }
    
    .ctrl {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .3);
      background: rgba(10, 16, 40, .45);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      cursor: pointer;
      transition: background-color .2s, border-color .2s, transform .2s var(--c-ease);
    }
    .ctrl:hover { background: var(--yellow); }
    .ctrl:active { transform: scale(.94); }
    .ctrl--pause { width: 36px; height: 36px; }
    
    .ic { width: 20px; height: 20px; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ctrl--pause .ic { width: 16px; height: 16px; }
    .ic-play { fill: currentColor; stroke: none; display: none; }
    .carousel.is-user-paused .ic-pause { display: none; }
    .carousel.is-user-paused .ic-play { display: block; }
    
    /* Points : celui en cours s'allonge et se remplit au rythme du défilement */
    .dots { display: flex; align-items: center; gap: 6px; }
    .dot {
      position: relative;
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(255, 255, 255, .4);
      overflow: hidden;
      cursor: pointer;
      transition: width .35s var(--c-ease), background-color .2s;
    }
    .dot::before { content: ""; position: absolute; inset: -10px -4px; }   /* zone de clic plus large */
    .dot:hover { background: rgba(255, 255, 255, .7); }
    .dot[aria-current="true"] { width: 34px; background: rgba(255, 255, 255, .35); }
    .dot-fill {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: #fff;
      transform: scaleX(0);
      transform-origin: left;
    }
    .dot[aria-current="true"] .dot-fill { transform: scaleX(1); }
    .carousel.is-auto .dot[aria-current="true"] .dot-fill {
      transform: scaleX(0);
      animation: c-progress var(--c-delay) linear forwards;
    }
    .carousel.is-paused .dot-fill { animation-play-state: paused !important; }
    @keyframes c-progress { to { transform: scaleX(1); } }
    
    /* Focus clavier visible sur fond sombre */
    .carousel :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    
    .sr-only {
      position: absolute; width: 1px; height: 1px; overflow: hidden;
      clip: rect(0 0 0 0); white-space: nowrap;
    }
    
    /* SKELETON  Carrousel Hero */
        /* Le skeleton prend la place de la slide dans le track */
        .skeleton_slide {
            position: relative;
            width: 100%;
            height: 50dvh;
            min-height: 460px;
            background: linear-gradient(90deg, #e8e8e8 0%, #f5f5f5 50%, #e8e8e8 100%);
            background-size: 200% 100%;
            animation: skeletonShine 1.4s ease-in-out infinite;
            border-radius: 12px;
            overflow: hidden;
            flex: 0 0 100%;
        }
        
        /* Contenu du skeleton positionné par-dessus */
        .skeleton_slide .skeleton_content {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 18px;
            padding: 40px 60px;
            background: linear-gradient(120deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%);
        }
        
        /* Lignes du texte */
        .skeleton_slide .skeleton_content .skeleton_line {
            height: 18px;
            border-radius: 6px;
            background: linear-gradient(90deg, #dcdcdc 0%, #ececec 50%, #dcdcdc 100%);
            background-size: 200% 100%;
            animation: skeletonShine 1.4s ease-in-out infinite;
        }
        
        /* Titre (plus grand) */
        .skeleton_slide .skeleton_content .skeleton_title {
            width: 55%;
            height: 32px;
            border-radius: 8px;
            background: linear-gradient(90deg, #d0d0d0 0%, #e5e5e5 50%, #d0d0d0 100%);
            background-size: 200% 100%;
            animation: skeletonShine 1.4s ease-in-out infinite;
        }
        
        /* Description */
        .skeleton_slide .skeleton_content .skeleton_desc   { width: 70%; }
        .skeleton_slide .skeleton_content .skeleton_desc2  { width: 60%; }
        
        /* Boutons */
        .skeleton_slide .skeleton_content .skeleton_btns {
            display: flex;
            gap: 12px;
            margin-top: 10px;
        }
        .skeleton_slide .skeleton_content .skeleton_btn {
            width: 160px;
            height: 44px;
            border-radius: 25px;
            background: linear-gradient(90deg, #d0d0d0 0%, #e5e5e5 50%, #d0d0d0 100%);
            background-size: 200% 100%;
            animation: skeletonShine 1.4s ease-in-out infinite;
        }
        
        /* Variante alignée à droite */
        .skeleton_slide .skeleton_content.align-droite {
            align-items: flex-end;
            text-align: right;
        }
        .skeleton_slide .skeleton_content.align-droite .skeleton_title,
        .skeleton_slide .skeleton_content.align-droite .skeleton_desc,
        .skeleton_slide .skeleton_content.align-droite .skeleton_desc2 {
            align-self: flex-end;
        }
        
        /* Variante centrée */
        .skeleton_slide .skeleton_content.align-centre {
            align-items: center;
            text-align: center;
        }
        .skeleton_slide .skeleton_content.align-centre .skeleton_title,
        .skeleton_slide .skeleton_content.align-centre .skeleton_desc,
        .skeleton_slide .skeleton_content.align-centre .skeleton_desc2 {
            align-self: center;
        }
        
        .carousel:has(.skeleton_slide) .carousel-controls {
            opacity: 0;
            pointer-events: none;
            transition: opacity .3s ease;
        }
        
        /* Responsive skeleton */
        @media (max-width: 768px) {
            .skeleton_slide { min-height: 300px; }
            .skeleton_slide .skeleton_content { padding: 25px 20px; gap: 12px; }
            .skeleton_slide .skeleton_content .skeleton_title { width: 75%; height: 24px; }
            .skeleton_slide .skeleton_content .skeleton_btn { width: 120px; height: 38px; }
        }
    /* SKELETON  Carrousel Hero */
/* section caroussel */
    
/* Responsive */
    @media (max-width: 720px) {
      .container_caroussel { width: calc(100% - 24px); height: auto; min-height: 0; max-height: none; }
      .carousel { height: auto; }
      .carousel-track { height: auto; }
      .slide { height: auto; min-height: 520px; align-items: flex-end; }
      .slide::before { background: linear-gradient(0deg, rgba(5, 10, 28, .94) 0%, rgba(5, 10, 28, .75) 45%, rgba(5, 10, 28, .1) 85%); }
      .slide-content { padding: 0 20px 84px; }
      .slide-cta .btn { flex: 1 1 auto; }
      .carousel-controls { left: 20px; right: 12px; bottom: 16px; }
      .ctrl { width: 42px; height: 42px; }
    }
    
    @media (max-width: 380px) {
      .slide-cta .btn { width: 100%; }
    }
    
    @media (prefers-reduced-motion: reduce) {
      .carousel-track { scroll-behavior: auto; }
      .slide .slide-content > * { transition: none; opacity: 1; transform: none; }
      .dot { transition: none; }
    }
/* Responsive */
    /* Logo officiel en surimpression (net et visible quel que soit le recadrage du fond) */
    .carousel-logo {
      position: absolute;
      top: clamp(12px, 2.2vw, 22px);
      right: clamp(12px, 2.2vw, 22px);
      z-index: 2;
      width: clamp(96px, 11vw, 150px);
      height: auto;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .94);
      box-shadow: 0 4px 16px rgba(5, 10, 28, .25);
      pointer-events: none;
    }