@import url(https://fonts.cdnfonts.com/css/ethnocentric);
@media (max-width:768px) {
    .btn-primary-5 {
        padding: 1rem 2rem;
        border: none;
        border-radius: 30px;
        background: linear-gradient(to right, #0055A4, #ff1100);
        color: #fff;
        font-weight: 700;
        font-size: 1.2rem;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.3s ease;
        margin-bottom: 2rem;
        box-shadow: 0 0 10px rgb(0 85 164 / .7);
        position: relative;
        z-index: 2;
        display: block;
        width: 300px !important
    }
    
    .btn-primary-5:hover {
        background: #c00000;
        color: #fff;
        box-shadow: 0 0 15px #c00000
    }
    .btn-primary {
        padding: 1rem 2rem;
        border: none;
        border-radius: 30px;
        background: linear-gradient(to right, #0055A4, #ff1100);
        color: #fff;
        font-weight: 700;
        font-size: 0.85rem !important;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.3s ease;
        margin-bottom: 2rem;
        box-shadow: 0 0 10px rgb(0 85 164 / .7);
        position: relative;
        z-index: 2;
        display: block;
        margin: 40px auto;
        width: 250px !important
    }
    .btn-primary:hover {
        background: #c00000;
        color: #fff;
        box-shadow: 0 0 15px #c00000
    }
    .class_1 h1 {
        font-size: 25px !important
    }
    .class_3 h2 {
        font-size: 32px !important
    }
    .typewriter-container p {
        font-size: 25px !important;
        width: 300px !important;
        margin-left: 19px !important
    }
    .class_2 h2 {
        font-size: 30px !important
    }
    .competences {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2vw;
        width: 100%;
        max-width: 100%;
        margin-left: -73.5% !important;
        padding: 0 4vw;
        box-sizing: border-box
    }
    
    
    .produits h2 {
        font-size: 35px
    }
    .produits {
        width: 125%;
        margin-left: -13%
    }
    .produits h3 {
        font-size: 20px
    }
    
    .hero-content h1 {
        font-size: 23px;
        padding: 0 1rem;
        text-align: center
    }
    .hero-content p,
    .btn-primary-2 {
        font-size: 0.77rem !important;
        padding: .75rem 1.5rem !important;
        margin: 1rem auto !important
    }
    #a-propos .a-propos-text {
        position: static !important;
        width: 90% !important;
        font-size: 14px !important;
        padding: 15px !important;
        margin: 20px auto !important;
        transform: none !important;
        opacity: 1 !important
    }
    #a-propos img {
        margin-top: 0 !important
    }
    #a-propos {
        height: auto !important
    }
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        max-width: 100vw !important
    }
    *,
    *::before,
    *::after {
        box-sizing: inherit
    }
    .grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem
    }
    .grid .card {
        width: 100%
    }
    .video-container video {
        max-height: 300px
    }
    .savoir-faire h2 {
        font-size: 35px !important;
        width: 100%
    }
    #savoir-faire p {
        font-size: 15px !important
    }
    #savoir-faire .btn-primary {
        font-size: 8.5px !important;
        margin-left: -20%
    }
    .carousel-container {
        max-width: 100%
    }
    .carousel-track img {
        width: 175px !important;
        height: 100px !important
    }
    .invest-section h2 {
        font-size: 25px !important;
        margin-left: -2% !important
    }
    .invest-section p {
        font-size: 25px !important;
        margin-left: 0% !important
    }
    .invest-section .btn-primary {
        margin-left: 5% !important
    }
    .contact-wrapper {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem
    }
    .map-container iframe {
        width: 100% !important;
        height: 350px !important;
        margin-left: -5% !important
    }
    footer {
        padding: 2rem 1rem;
        text-align: center
    }
    #scrollTopBtn {
        width: 50px;
        height: 50px
    }
    .arrow-icon {
        width: 24px;
        height: 24px
    }
}

body {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    background-size: cover;
    color: #fff;
    overflow-x: hidden
}

main {
    max-width: 1920px;
    margin: 50px auto;
    padding: 20px;
    background-color: none;
    border-radius: 12px
}

h1,
h2 {
    text-align: center;
    color: #00f6ff;
    margin-bottom: 30px
}

.description {
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 40px;
    color: #fff
}

.competences {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 60px;
    width: 1500px;
    margin-left: -180px
}

.carousel-container {
    perspective: 2000px;
    height: 500px;
    position: relative;
    margin-bottom: 60px;
    overflow: visible;
    perspective-origin: 50% 50%
}

.carousel {
    position: relative;
    width: 100%;
    height: 400px;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 0.5s
}

.carousel img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 0 8px rgb(0 0 0 / .5);
    cursor: pointer;
    transition: transform 0.3s
}

.btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    background: rgb(0 0 0 / .5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    cursor: pointer;
    z-index: 10
}

#prevBtn {
    left: 10px;
    height: 80px;
    width: 80px
}

#nextBtn {
    right: 10px;
    height: 80px;
    width: 80px
}

.video-section {
    text-align: center;
    margin: 50px 0
}

.video-section video {
    max-width: 1920px;
    border-radius: 20px;
    box-shadow: 0 0 30px #fffa
}

.btn-primary {
    padding: 1rem 2rem;
    border: none;
    border-radius: 30px;
    background: linear-gradient(to right, #0055A4, #ff1100);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-bottom: 2rem;
    box-shadow: 0 0 10px rgb(0 85 164 / .7);
    position: relative;
    z-index: 2;
    display: block;
    margin: 40px auto
}

.btn-primary:hover {
    background: #c00000;
    color: #fff;
    box-shadow: 0 0 15px #c00000
}

.btn-primary-5 {
    padding: 1rem 2rem;
    border: none;
    border-radius: 30px;
    background: linear-gradient(to right, #0055A4, #ff1100);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.3s ease;
    margin-bottom: 2rem;
    box-shadow: 0 0 10px rgb(0 85 164 / .7);
    position: relative;
    z-index: 2;
    display: block;
    margin: 40px auto;
    width: 1300px
}

.btn-primary-5:hover {
    background: #c00000;
    color: #fff;
    box-shadow: 0 0 15px #c00000
}

footer {
    text-align: center;
    padding: 20px;
    font-size: .9rem;
    color: #aaa
}

#savoir-faire {
    text-align: center;
    padding: 5rem 1rem;
    background: none
}

#savoir-faire h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 2rem
}

.competences {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem
}





.french-flag {
    display: flex;
    width: 100%;
    height: 2.5px;
    margin-top: 0
}

.french-flag .blue {
    background-color: blue;
    flex: 1
}

.french-flag .white {
    background-color: #fff;
    flex: 1
}

.french-flag .red {
    background-color: red;
    flex: 1
}

#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    filter: brightness(1.25) contrast(1.12)
}

.video_cao {
    position: fixed;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    filter: brightness(1) contrast(1.1)
}

.video_cao_2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    filter: brightness(1) contrast(1.1)
}

.video_cao_3 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    filter: brightness(1.5) contrast(1.1)
}

.fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: opacity 2s ease-in;
    z-index: 0
}

#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #C00000;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    transition: background 0.3s, transform 0.3s
}

#scrollTopBtn:hover {
    background-color: #002060;
    transform: translateY(-3px)
}

.arrow-icon {
    width: 32px;
    height: 32px
}



.image_sav {
    filter: brightness(.7) contrast(1.1)
}

.video_sav {
    filter: brightness(.7) contrast(1.1)
}

.p_sav {
    color: linear-gradient(to right, #0055A4, #ff1100)
}

.typewriter-container {
    position: relative;
    width: 1400px;
    margin: 75px auto 0;
    font-size: 35px;
    font-style: italic;
    font-weight: 700
}

.gradient-text {
    color: #fff;
    display: block;
    text-align: center;
    margin: 0 auto;
    max-width: 1920px;
    border-radius: 10px;
    text-shadow: 2px 2px 8px rgb(0 0 0 / .632), 4px 4px 12px rgb(0 0 0 / .566);
    transform: translateZ(40px);
    perspective: 1000px
}

.cursor {
    position: absolute;
    width: 3px;
    background-color: #EF4135;
    animation: blink 0.7s infinite;
    transition: top 0.02s, left 0.02s;
    margin-top: 55px
}

@keyframes blink {
    0%,
    100% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}






.carousel-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 0 8px rgb(0 85 164 / .5);
    transition: transform 0.3s ease;
    cursor: pointer
}

.carousel-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #c00000
}

.carousel-item figcaption {
    margin-top: .5rem;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3
}

@keyframes scrollCarousel {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

@media (max-width:768px) {
    .carousel-track {
        animation: scrollCarousel 10s linear infinite;
        gap: .5rem
    }
    .carousel-item {
        width: 180px
    }
}

.carousel-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto
}

.carousel-track {
    display: flex;
    gap: 1rem;
    animation: scrollCarousel 20s linear infinite;
    align-items: flex-start
}

.carousel-item img {
    display: block;
    width: 300px;
    height: 200px;
    object-fit: cover
}

.carousel-item img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #c00000
}

.carousel-item figcaption {
    margin-top: .5rem;
    font-size: 1rem;
    color: #fff;
    line-height: 1.3
}

@keyframes scrollCarousel {
    0% {
        transform: translateX(0)
    }
    100% {
        transform: translateX(-50%)
    }
}

@media (max-width:768px) {
    .carousel-track {
        animation: scrollCarousel 10s linear infinite;
        gap: .5rem
    }
    .carousel-item {
        width: 180px
    }
}

.carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    backface-visibility: hidden
}



/*Nouvelles classes CSS*/


/* ===== NAVIGATION ===== */

/*
.main-nav {
  --nav-bg:#000;
  --nav-link-color:#fff;
  --nav-accent:linear-gradient(to right,#0055A4,#ff1100);
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px clamp(1rem,4vw,2.5rem);
  font-family:'Orbitron',sans-serif;
  background:var(--nav-bg);
  z-index:100;
  min-height:70px;
}



.main-nav .logo {
  display:flex;                  
  align-items:center;
  margin-top: -0.5%;
}

.main-nav .logo img {
  height: 50px;
  width: auto;
  max-width: 180px;
  display: block;
  object-fit: contain;
  margin: 0;                      
  vertical-align: middle;        
}



.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 3.5vw, 3.2rem);
  font-size: 16px;
  transition: opacity .3s ease, transform .35s ease;
}

.nav-links a {
  position: relative;
  color: var(--nav-link-color);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .5px;
  font-size: clamp(13px, 1.2vw, 15px);
  padding: 6px 2px;
  display: inline-block;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--nav-accent);
  transform: translateX(-50%);
  transition: width .35s;
  border-radius: 2px;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  width: 90%;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: #fff;
}

.center-link {
  text-align: center;
}




@media (max-width: 920px) {
  .main-nav {
    gap: 1rem;
    padding: 10px clamp(1rem,3vw,1.5rem);
  }
  .nav-links {
    gap: clamp(1.2rem, 2.6vw, 2rem);
  }
  .main-nav .logo img {
    height: 44px;
  }
}


@media (max-width: 780px) {
  
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(6px);
    padding: clamp(1.2rem,4vw,2rem) clamp(1rem,5vw,2rem);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65);
    transform-origin: top center;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    gap: clamp(1rem, 2.8vw, 1.6rem);
  }

  .nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a {
    font-size: clamp(14px, 4vw, 17px);
    width: 100%;
    text-align: center;
  }

  .nav-links a::after {
    bottom: -2px;
  }
}


@media (max-width: 460px) {
  .main-nav .logo img {
    height: 40px;
  }
}

*/




/* Fonts déjà importées ailleurs si besoin */
/* Reset minimal pour cette section */
.legal-wrapper,
.legal-back-wrapper,
.site-footer-legal {
  box-sizing: border-box;
  width: 100%;
  font-family: 'Orbitron', sans-serif;
}

/*fullscreen*/


/* ================== FULLSCREEN / LIGHTBOX ================== */
.fs-overlay {
  /* état initial caché */
  display: none;                 /* sera passé en flex via JS quand ouvert */
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.95);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: clamp(0.75rem, 2.5vw, 1.25rem);
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .45s ease;
}

.fs-overlay.active {
  display: flex;
  opacity: 1;
}

.fs-close {
  position: absolute;
  top: clamp(12px, 3vh, 24px);
  right: clamp(16px, 4vw, 34px);
  font-size: clamp(2.2rem, 5.5vw, 3.2rem);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  text-shadow: 0 4px 18px rgba(0,0,0,.6);
  transition: transform .35s ease, color .35s ease;
  user-select: none;
}

.fs-close:hover,
.fs-close:focus-visible {
  color: #ff3a28;
  transform: scale(1.12);
  outline: none;
}

.fs-content {
  margin: 0;
  max-width: min(60%, 1600px);
  max-height: 90%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 2vh, 1.25rem);
  position: relative;
  padding: 0;
}

.fs-image {
  width: 95%;
  height: auto;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18),
    0 0 40px -4px #fff,
    0 18px 50px -20px rgba(0,0,0,.9);
  object-fit: contain;
  background:#000;
  animation: fsIn .6s cubic-bezier(.22,.8,.25,1);
}

@keyframes fsIn {
  from { opacity:0; transform: scale(.93); }
  to   { opacity:1; transform: scale(1); }
}

.fs-caption {
  margin: 0;
  width: 95%;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.85rem, 1.6vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  line-height: 1.35;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 14px rgba(0,0,0,.65);
  min-height: 1.1em;
}

/* ======= Responsive tweaks ======= */
@media (max-width: 1100px) {
  .fs-content { max-width: 72%; }
}

@media (max-width: 880px) {
  .fs-content { max-width: 82%; }
  .fs-image { width: 100%; }
}

@media (max-width: 680px) {
  .fs-content { max-width: 92%; }
  .fs-caption { font-size: clamp(.8rem, 3.6vw, 1.05rem); }
}

@media (max-width: 480px) {
  .fs-close { top: 14px; right: 18px; }
  .fs-content { max-width: 96%; }
  .fs-caption { width: 100%; }
}

/* User prefers less motion */
@media (prefers-reduced-motion: reduce) {
  .fs-overlay,
  .fs-image {
    transition: none !important;
    animation: none !important;
  }
}

/*texte savoir faire*/

/* =========================
   SECTION SAVOIR-FAIRE INTRO
   ========================= */
.savoir-faire-intro {
  width: 100%;
  box-sizing: border-box;
  padding: clamp(2.2rem, 5vw, 5rem) clamp(1.2rem, 3vw, 3rem);
  text-align: center;
  margin: 0 auto;
  max-width: 1920px;
  position: relative;
  font-family: 'Orbitron', sans-serif;
}

.sf-title {
  margin: 0 0 clamp(1.2rem, 3vw, 2.4rem);
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.75rem, 6vw, 3rem);
  letter-spacing: .5px;
  line-height: 1.08;
  text-shadow:
    2px 2px 8px rgba(0,0,0,.63),
    4px 4px 12px rgba(0,0,0,.55);
}

.sf-text {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  max-width: clamp(680px, 90vw, 1250px);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  white-space: pre-wrap;
  color: #fff;
  line-height: 1.45;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: .4px;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  /* Animation typewriter éventuelle, tu peux adapter */
  position: relative;
}

/* Variante gradient-text si déjà existante, sinon (optionnel) */
.gradient-text {
  background: linear-gradient(to right,#ffffff 0%, #dfe9ff 40%, #ffffff 80%);
  -webkit-background-clip: text;
  color: #fff; /* fallback */
}

/* --------- RESPONSIVE FINES --------- */
@media (max-width: 1100px) {
  .sf-text {
    font-size: clamp(1rem, 2.1vw, 1.18rem);
    max-width: 1050px;
  }
}

@media (max-width: 880px) {
  .savoir-faire-intro {
    padding: clamp(2rem, 8vw, 3.5rem) 1.6rem;
  }
  .sf-text {
    max-width: 820px;
  }
}

@media (max-width: 780px) {
  .sf-title {
    font-size: clamp(1.55rem, 7vw, 2.35rem);
  }
  .sf-text {
    font-size: clamp(.95rem, 3.9vw, 1.05rem);
    max-width: 92%;
    line-height: 1.5;
  }
}

@media (max-width: 560px) {
  .savoir-faire-intro {
    padding: clamp(1.8rem, 9vw, 2.6rem) 1.2rem;
  }
  .sf-text {
    max-width: 100%;
  }
}

@media (max-width: 430px) {
  .sf-title {
    font-size: clamp(1.45rem, 8.8vw, 2.05rem);
    letter-spacing: .3px;
  }
  .sf-text {
    font-size: clamp(.9rem, 4.4vw, .98rem);
  }
}

/* Réduction animations si l’utilisateur préfère */
@media (prefers-reduced-motion: reduce) {
  .sf-title,
  .sf-text {
    animation: none !important;
    transition: none !important;
  }
}


/* ================================
   SECTION SAVOIR-FAIRE (Circles)
   ================================ */

/* Contexte section */
.class_2 { width:100%; }

.sf-block {
  width:100%;
  box-sizing:border-box;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.5rem,4vw,3.5rem) clamp(2.5rem,8vw,5rem);
  margin:0 auto;
  max-width: 1920px;
  text-align:center;
  position:relative;
  font-family:'Orbitron',sans-serif;
}

.sf-heading {
  margin:0 0 clamp(1.5rem,3vw,2.6rem);
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  letter-spacing:.6px;
  font-size: clamp(1.5rem,5vw,2.5rem);
  color:#fff;
  line-height:1.1;
  text-shadow:2px 2px 8px rgba(0,0,0,.6),4px 4px 12px rgba(0,0,0,.55);
}

/* Wrapper général */
.competences-wrapper {
  width:100%;
  padding: clamp(1.5rem,5vw,4rem) clamp(.5rem,2vw,1.5rem);
  box-sizing:border-box;
  margin:0 auto;
}

/* Conteneur flex des cercles */
.circles-container {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.8rem,4vw,4rem);
  width:100%;
  margin:0 auto;
  max-width: 1700px;
  position:relative;
}

/* Circle */
.circle {
  --circle-size: clamp(230px, 20vw, 305px);
  width: var(--circle-size);
  height: var(--circle-size);
  aspect-ratio:1/1;
  border-radius:50%;
  position:relative;
  overflow:hidden;
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  box-shadow:
    0 8px 26px -10px rgba(0,0,0,.75),
    0 0 0 2px rgba(255,255,255,.08);
  opacity:0;
  transform:translateY(50px) scale(.92);
  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,.8,.25,1),
    box-shadow .6s ease;
  will-change: transform, opacity;
}

.circle[data-aos] { opacity:1; transform:translateY(0) scale(1); } /* AOS ajoute ses classes; fallback simple */

.circle:hover {
  box-shadow:
    0 14px 42px -12px rgba(0,0,0,.85),
    0 0 0 2px rgba(255,255,255,.12),
    0 0 26px -6px rgba(0,246,255,.35);
  transform:translateY(-6px) scale(1.03);
}

.circle:focus-visible {
  outline:3px solid #ff1100;
  outline-offset:4px;
}

/* Vidéos */
.circle-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.95) contrast(1.12) saturate(1.05);
  transition:transform 1.6s ease, filter .8s ease;
  transform:scale(1);
  will-change: transform;
}

.circle:hover .circle-video {
  transform:scale(1.1);
  filter:brightness(1.08) contrast(1.2) saturate(1.1);
}

.circle-video.zoom-200 { transform:scale(2); }
.circle:hover .circle-video.zoom-200 { transform:scale(2.15); }

.circle-video.cover-100 { transform:scale(1); }

/* Légende */
.circle-caption {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  padding:0 1rem;
  font-family:'Orbitron',sans-serif;
  font-size: clamp(.75rem,1.65vw,1.15rem);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  color:#fff;
  letter-spacing:.4px;
  text-shadow:
    1px 1px 4px rgba(0,0,0,.65),
    0 2px 12px rgba(0,0,0,.55);
  pointer-events:none;
  user-select:none;
}

.circle-caption br { line-height:1.15; }

/* Effet visible (si tu utilises une classe .visible en JS) */
.circle.visible {
  opacity:1;
  transform:translateY(0) scale(1);
}

/* ===================== RESPONSIVE BREAKPOINTS ===================== */

/* Légère réduction sur moyen écrans */
@media (max-width: 1200px) {
  .circles-container { gap:clamp(1.4rem,3vw,2.6rem); }
}

/* Tablettes / landscape */
@media (max-width: 980px) {
  .sf-heading { font-size: clamp(1.55rem,6vw,2.2rem); }
  .circle-caption { font-size: clamp(.7rem,2vw,1.05rem); }
}

/* ≤ 780px : recentrer / grid adaptative ou carrousel horizontal optionnel */
@media (max-width: 780px) {
  .sf-block { padding: clamp(2rem, 9vw, 3.2rem) 1.25rem clamp(2.2rem, 10vw, 3.4rem); }
  .circles-container {
    gap: clamp(1.2rem,5vw,2rem);
  }
  .circle {
    --circle-size: clamp(200px, 48vw, 260px);
  }
  .circle-caption {
    font-size: clamp(.72rem,3.4vw,.95rem);
    line-height:1.25;
  }
}

/* ≤ 560px : 2 colonnes “visuelles” (wrap naturel) */
@media (max-width: 560px) {
  .circles-container {
    gap: clamp(1rem,5vw,1.4rem);
  }
  .circle {
    --circle-size: clamp(190px, 44vw, 230px);
  }
  .circle-caption {
    padding:0 .75rem;
  }
}

/* ≤ 430px : taille minimale confortable */
@media (max-width: 430px) {
  .sf-heading {
    font-size: clamp(1.35rem, 8.5vw, 1.9rem);
    letter-spacing:.4px;
  }
  .circle {
    --circle-size: clamp(170px, 60vw, 210px);
  }
  .circle-caption {
    font-size: clamp(.68rem,4vw,.85rem);
  }
}

/* Préférence utilisateur : réduire animations */
@media (prefers-reduced-motion: reduce) {
  .circle,
  .circle-video {
    transition:none !important;
    animation:none !important;
  }
  .circle:hover { transform:none; }
  .circle:hover .circle-video { transform:none; }
}



/* ===================== UTILITAIRES (réutilisables) ===================== */
.hide-overflow { overflow:hidden !important; }
.no-pointer { pointer-events:none !important; }


/*reste page*/

/* ==== TITRES DE SECTIONS ==== */
.section-subtitle {
  font-family:'Orbitron',sans-serif;
  font-weight:700;
  text-align:center;
  margin:0 auto clamp(.9rem,2.4vw,1.4rem);
  color:#fff;
  font-size:clamp(.8rem,2.1vw,1.05rem);
  letter-spacing:.6px;
  text-shadow:2px 2px 8px rgba(0,0,0,.63),4px 4px 12px rgba(0,0,0,.56);
  width:100%;
  max-width:1100px;
  line-height:1.15;
}

.section-subtitle + .carousel-shell {
  margin-top: clamp(.3rem,1vw,.8rem);
}

.subtitle-cfd {}
.subtitle-real { margin-top: clamp(2.2rem,6vw,4rem); }

/* ==== BOUTON RETOUR ==== */
.class_4 {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: clamp(2rem,8vw,6rem) 1rem clamp(3rem,10vw,7rem);
}

.btn-retour {
  width:clamp(240px,42vw,500px);
  margin-top: clamp(2rem,7vw,6rem);
  text-align:center;
  font-family:'Orbitron',sans-serif;
  text-shadow:2px 2px 8px rgba(0,0,0,.63),4px 4px 12px rgba(0,0,0,.56);
  perspective:1000px;
  transform:translateZ(40px);
}

/* ==== CAROUSEL STRUCTURE ==== */
.carousel-shell {
  position:relative;
  width:100%;
  max-width:1600px;
  margin:0 auto clamp(2.2rem,7vw,4.8rem);
  padding: clamp(.8rem,2vw,1.5rem) clamp(.4rem,1.2vw,.9rem) clamp(1.2rem,3vw,1.9rem);
  box-sizing:border-box;
}

.carousel-track {
  position:relative;
  display:flex;
  gap: clamp(1rem,2.8vw,2rem);
  overflow:hidden;
  scroll-behavior:smooth;
  padding: .35rem .25rem .5rem;
}

.carousel-item {
  flex:0 0 clamp(240px, 30vw, 320px);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:rgba(0,0,0,.28);
  border-radius:12px;
  padding: clamp(.4rem,.9vw,.75rem);
  box-shadow:0 6px 22px -10px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition:transform .5s cubic-bezier(.22,.8,.25,1),
             box-shadow .5s ease,
             background .5s ease;
  cursor:pointer;
  isolation:isolate;
}

.carousel-item::after {
  content:attr(data-caption);
  margin-top:.55rem;
  font-size:clamp(.62rem,1.4vw,.85rem);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:500;
  letter-spacing:.4px;
  color:#fff;
  line-height:1.25;
  text-align:left;
  width:100%;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  display:block;
  min-height:1.2em;
  white-space:normal;
}

.carousel-item img {
  width:100%;
  height:clamp(140px,15vw,210px);
  object-fit:cover;
  border-radius:8px;
  display:block;
  box-shadow:0 4px 18px -6px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.08);
  transition:transform 1.1s ease, filter .7s ease;
  filter:brightness(.92) contrast(1.08) saturate(1.05);
  backface-visibility:hidden;
  will-change:transform,filter;
}

.carousel-item:hover {
  transform:translateY(-6px) scale(1.025);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.12),
             0 0 30px -10px rgba(0,246,255,.3);
  background:rgba(0,0,0,.38);
}

.carousel-item:hover img {
  transform:scale(1.12) rotate(.4deg);
  filter:brightness(1.04) contrast(1.18) saturate(1.12);
}

.carousel-item:focus-visible {
  outline:2px solid #ff1100;
  outline-offset:4px;
}

.carousel-caption {
  margin-top:.4rem;
  font-size:.8rem;
  text-align:center;
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  opacity:0;
  transition:opacity .4s ease;
}

.carousel-shell[data-showcaption="true"] .carousel-caption { opacity:1; }

/* ==== ARROWS ==== */
.btn-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width: clamp(42px,4.8vw,64px);
  height: clamp(42px,4.8vw,64px);
  border:none;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.18),rgba(0,0,0,.65));
  color:#fff;
  font-size:clamp(1.4rem,3.6vw,2.2rem);
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .4s ease, transform .4s ease, box-shadow .4s ease;
}

.btn-prev { left: clamp(-4px, .6vw, 10px); }
.btn-next { right: clamp(-4px, .6vw, 10px); }

.btn-arrow:hover,
.btn-arrow:focus-visible {
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),rgba(0,0,0,.7));
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 14px 40px -10px rgba(0,0,0,.85),
             0 0 0 1px rgba(255,255,255,.18);
  outline:none;
}

/* Masquer les flèches si peu d’items (option JS possible) */
.carousel-shell[data-small="true"] .btn-arrow { display:none; }

/* ==== SCROLL TOP BUTTON ==== */
.scroll-top {
  position:fixed;
  bottom: clamp(1.5rem,5vw,2.5rem);
  right: clamp(1.5rem,5vw,2.5rem);
  width: clamp(2.5rem,6vw,4rem);
  height: clamp(2.5rem,6vw,4rem);
  background:#c00000;
  border:none;
  border-radius:.5rem;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:999;
  transition:background .35s ease, transform .4s cubic-bezier(.22,.8,.25,1),
             box-shadow .35s ease;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12);
}

.scroll-top.visible { display:flex; }

.scroll-top:hover,
.scroll-top:focus-visible {
  background:#002060;
  transform:translateY(-6%);
  outline:none;
}

.arrow-icon {
  width:100%;
  height:100%;
  padding:.55rem;
  box-sizing:content-box;
}

/* ==== FOOTER ==== */
.site-footer-legal {
  width:100%;
  text-align:center;
  font-family:'Orbitron',sans-serif;
  font-size: clamp(.65rem,1.4vw,.9rem);
  color:#fff;
  padding: clamp(2.2rem,6vw,3.6rem) 1rem clamp(3rem,8vw,4.5rem);
  text-shadow:2px 2px 8px rgba(0,0,0,.63),4px 4px 12px rgba(0,0,0,.56);
  line-height:1.5;
  transform:translateZ(40px);
  perspective:1000px;
}

.site-footer-legal a {
  color:#fff;
  text-decoration:none;
  position:relative;
  display:inline-block;
  padding:.15rem .4rem;
  transition:color .35s ease;
}

.site-footer-legal a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background:linear-gradient(to right,#0055A4,#ff1100);
  transform:translateX(-50%);
  transition:width .4s ease;
  border-radius:2px;
}

.site-footer-legal a:hover::after,
.site-footer-legal a:focus-visible::after { width:90%; }
.site-footer-legal a:hover,
.site-footer-legal a:focus-visible { color:#fff; outline:none; }

/* ==== RESPONSIVE AJUSTEMENTS ==== */
@media (max-width:1100px) {
  .carousel-item { flex:0 0 clamp(220px,34vw,300px); }
}

@media (max-width:880px) {
  .section-subtitle { font-size:clamp(.78rem,2.4vw,.95rem); }
}

@media (max-width:780px) {
  .carousel-shell { padding: .6rem .25rem 1.1rem; }
  .carousel-track { gap: clamp(.85rem,2.6vw,1.2rem); }
  .carousel-item { flex:0 0 clamp(200px,52vw,260px); }
  .carousel-item img { height: clamp(150px,40vw,200px); }
  .btn-arrow { width:54px; height:54px; }
  .btn-prev { left:2px; }
  .btn-next { right:2px; }
  .btn-retour { width:clamp(230px,70vw,420px); }
}

@media (max-width:560px) {
  .carousel-item { flex:0 0 clamp(180px,66vw,230px); }
  .carousel-item img { height: clamp(130px,44vw,180px); }
  .carousel-item::after { font-size:clamp(.58rem,3.4vw,.75rem); }
  .section-subtitle { letter-spacing:.4px; }
}

@media (max-width:430px) {
  .carousel-item { flex:0 0 clamp(160px,74vw,210px); }
  .carousel-item img { height: clamp(118px,48vw,160px); }
  .btn-arrow { width:46px;height:46px;font-size:1.6rem; }
  .site-footer-legal { font-size:clamp(.62rem,3.6vw,.78rem); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item,
  .carousel-item img,
  .btn-arrow,
  .scroll-top { transition:none !important; animation:none !important; }
}


/*carousel 1 - 2*/

/* =========================================================
   CFD CIRCLES (ex-section images CFD) 
   ========================================================= */
:root {
  --cfd-bubble-size: clamp(140px, 24vw, 260px);
  --cfd-gap: clamp(1rem, 4vw, 2.4rem);
  --cfd-accent: #00f6ff;
}

.cfd-circles {
  width:100%;
  max-width:1400px;
  margin: clamp(2.5rem,7vw,5rem) auto clamp(3rem,8vw,5.5rem);
  padding: 0 clamp(1rem,4vw,2rem);
  text-align:center;
  font-family:'Orbitron',sans-serif;
  position:relative;
}

.cfd-title {
  font-size: clamp(1.2rem,4.8vw,2rem);
  color:#fff;
  margin:0 0 clamp(1.8rem,4vw,2.6rem);
  letter-spacing:.6px;
  text-shadow:0 4px 18px rgba(0,0,0,.55);
}

.cfd-circles-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cfd-bubble-size), 1fr));
  justify-content:center;
  gap: var(--cfd-gap);
  width:100%;
}

.cfd-bubble {
  width:100%;
  aspect-ratio:1/1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1200px;
}

.cfd-media-wrap {
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  overflow:hidden;
  background:#07141c;
  box-shadow:
    0 18px 38px -18px rgba(0,0,0,.9),
    0 0 0 3px rgba(255,255,255,.05),
    0 0 36px -8px rgba(0,246,255,.55);
  transition: transform .9s cubic-bezier(.22,.8,.25,1), box-shadow .7s ease;
  isolation:isolate;
}

.cfd-media-wrap::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(140deg, rgba(0,246,255,.25), rgba(0,246,255,0) 55%);
  mix-blend-mode:overlay;
  opacity:.65;
  pointer-events:none;
}

.cfd-video {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:brightness(1.1) contrast(1.08);
  transition: transform 2.4s ease, filter 1.2s ease;
  transform:scale(1.05);
}

.cfd-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,.78) 75%);
  opacity:0;
  transition: opacity .6s ease;
  padding:1rem;
}

.cfd-desc {
  font-family:'Orbitron',sans-serif;
  font-size: clamp(.65rem,1.4vw,.85rem);
  letter-spacing:.55px;
  color:#d9fdff;
  text-align:center;
  line-height:1.25;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  max-width:85%;
}

.cfd-media-wrap:hover,
.cfd-media-wrap:focus-within {
  transform:translateY(-8px) scale(1.06);
  box-shadow:
    0 26px 60px -30px rgba(0,0,0,.95),
    0 0 0 4px rgba(0,246,255,.2),
    0 0 48px -4px rgba(0,246,255,.8);
}

.cfd-media-wrap:hover .cfd-video,
.cfd-media-wrap:focus-within .cfd-video {
  transform:scale(1.22);
  filter:brightness(1.25) contrast(1.2);
}

.cfd-media-wrap:hover .cfd-overlay,
.cfd-media-wrap:focus-within .cfd-overlay {
  opacity:1;
}

.cfd-caption {
  margin: clamp(1.6rem,4vw,2.4rem) auto 0;
  min-height:1.2em;
  font-size: clamp(.6rem,1.3vw,.85rem);
  font-family:'Orbitron',sans-serif;
  letter-spacing:.5px;
  color:#ffffff;
  background: rgba(255, 255, 255, 0.12);
  padding:.55rem 1.2rem .65rem;
  border-radius:40px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 22px -6px rgba(255, 255, 255, 0.45);
  width: fit-content;
  max-width:80%;
  opacity:.9;
}

@media (max-width:680px){
  :root { --cfd-gap: clamp(.9rem,5vw,1.5rem); }
  .cfd-circles-grid { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); }
  .cfd-media-wrap { box-shadow:0 12px 32px -16px rgba(0,0,0,.85), 0 0 0 2px rgba(255,255,255,.04); }
}

@media (max-width:440px){
  .cfd-circles-grid { grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); }
  .cfd-media-wrap:hover { transform:translateY(-4px) scale(1.04); }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .cfd-video,
  .cfd-media-wrap {
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   REMOTE + INTEGRATED SCREEN CAROUSEL (QUELQUES RÉALISATIONS)
   ========================================================= */
:root {
  --remote-max: 1400px;
  --screen-height: clamp(200px, 42vw, 420px);
  --screen-item-width: clamp(160px, 22vw, 280px);
  --screen-gap: clamp(.9rem, 2vw, 1.5rem);
  --remote-accent: #00f6ff;
}

.remote-real {
  width:100%;
  max-width: var(--remote-max);
  margin: clamp(2.8rem,7vw,6rem) auto clamp(4rem,9vw,7rem);
  padding:0 clamp(1rem,4vw,2rem);
  text-align:center;
  font-family:'Orbitron',sans-serif;
  position:relative;
}

.remote-real-title {
  font-size: clamp(1.25rem,4.8vw,2.2rem);
  color:#fff;
  margin:0 0 clamp(2rem,5vw,2.8rem);
  letter-spacing:.65px;
  text-shadow:0 4px 18px rgba(0,0,0,.55);
}

.remote-drone {
  width:100%;
  position:relative;
  aspect-ratio: 2.3 / 1;
  max-width:var(--remote-max);
  margin:0 auto;
  perspective: 2400px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Ondes radio */
.remote-waves {
  position:absolute;
  width:60%;
  aspect-ratio:1/1;
  border-radius:50%;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,246,255,.2), rgba(0,246,255,0) 60%);
  animation: wavesPulse 6s ease-in-out infinite;
  filter:blur(12px);
  opacity:.35;
  pointer-events:none;
}
.remote-waves.rw-2 {
  width:78%;
  animation-delay:1.5s;
  opacity:.25;
}
.remote-waves.rw-3 {
  width:95%;
  animation-delay:3s;
  opacity:.18;
}
@keyframes wavesPulse {
  0%,100% { transform:translate(-50%,-50%) scale(.92); }
  50% { transform:translate(-50%,-50%) scale(1.08); }
}

/* Corps */
.remote-body {
  position:absolute;
  inset:0;
  margin:auto;
  background: linear-gradient(150deg,#000000,#000000 55%,#0a171f);
  border-radius: clamp(34px,4vw,58px);
  box-shadow:
    0 60px 120px -50px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 0 60px -12px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  overflow:hidden;
  padding: clamp(1rem,2.2vw,2rem);
  display:flex;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
}

/* Screen + carousel */
.remote-screen {
  position:relative;
  width:82%;
  height: var(--screen-height);
  background: linear-gradient(185deg,#06141c,#0c2331 65%,#06141c);
  border-radius: clamp(22px,2.6vw,34px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 38px -14px rgba(0,246,255,.5),
    0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.screen-glow {
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(0,246,255,.08) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(90deg, rgba(0,246,255,.08) 0 1px, transparent 1px 70px),
    radial-gradient(circle at 30% 30%, rgba(0,246,255,.25), rgba(0,246,255,0) 65%);
  mix-blend-mode:screen;
  opacity:.35;
  pointer-events:none;
}

.screen-track-mask {
  flex:1 1 auto;
  width:100%;
  height:100%;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
}

.screen-track {
  list-style:none;
  margin:0;
  padding:0 clamp(1.2rem,2vw,2rem);
  display:flex;
  gap: var(--screen-gap);
  align-items:center;
  height:100%;
  transition: transform .8s cubic-bezier(.22,.8,.25,1);
  will-change:transform;
}

.screen-item {
  flex:0 0 auto;
  width: var(--screen-item-width);
  height: 80%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.screen-fig {
  margin:0;
  width:100%;
  height:100%;
  position:relative;
  border-radius: clamp(14px,1.9vw,26px);
  overflow:hidden;
  background:#06141c;
  box-shadow:
    0 16px 36px -20px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 32px -8px rgba(0,246,255,.4);
  transition: transform .65s ease, box-shadow .6s ease;
  display:flex;
  flex-direction:column;
}

.screen-fig img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:brightness(1.05) contrast(1.06);
  transition: transform 1.4s ease, filter .9s ease;
}

.screen-fig figcaption {
  position:absolute;
  left:0; bottom:0;
  width:100%;
  padding:.4rem .6rem .6rem;
  margin:0;
  font-size: clamp(.55rem,1.2vw,.75rem);
  font-family:'Orbitron',sans-serif;
  letter-spacing:.45px;
  text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 70%);
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.65);
  pointer-events:none;
}

.screen-fig:hover {
  transform:translateY(-8px);
  box-shadow:
    0 26px 52px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.1),
    0 0 46px -6px rgba(0,246,255,.65);
}
.screen-fig:hover img { transform:scale(1.1); filter:brightness(1.18) contrast(1.15); }

/* Nav boutons */
.screen-nav {
  position:absolute;
  top:50%; transform:translateY(-50%);
  width: clamp(46px,4.5vw,74px);
  height: clamp(46px,4.5vw,74px);
  border:none;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #00f6ff, #004966 70%);
  color:#fff;
  font-size: clamp(1.5rem,3vw,2.4rem);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:
    0 0 0 2px rgba(0,246,255,.4),
    0 0 20px -6px rgba(0,246,255,.75),
    0 8px 22px -12px rgba(0,0,0,.85);
  transition: background .4s ease, transform .4s ease;
  z-index:6;
}
.screen-nav.prev { left: clamp(6px,.9vw,14px); }
.screen-nav.next { right: clamp(6px,.9vw,14px); }

.screen-nav:hover,
.screen-nav:focus-visible {
  background: radial-gradient(circle at 30% 30%, #33ffff, #006c90 70%);
  transform:translateY(-50%) scale(1.1);
  outline:none;
}

.screen-dots {
  position:absolute;
  bottom: clamp(.45rem,1vw,1.1rem);
  left:50%; transform:translateX(-50%);
  display:flex;
  gap: clamp(6px,1vw,12px);
  z-index:7;
}

.screen-dots button {
  width: clamp(12px,1.2vw,18px);
  height: clamp(12px,1.2vw,18px);
  border-radius:50%;
  border:none;
  background: linear-gradient(160deg,#00f6ff,#0060a0);
  opacity:.35;
  cursor:pointer;
  transition: opacity .4s ease, transform .4s ease;
  box-shadow:0 0 10px -2px rgba(0,246,255,.7);
}
.screen-dots button[aria-selected="true"] { opacity:1; transform:scale(1.3); }
.screen-dots button:hover { opacity:.8; }

.screen-caption {
  position:absolute;
  top: clamp(.45rem,1vw,1rem);
  left:50%; transform:translateX(-50%);
  background: rgba(0,246,255,0.15);
  padding:.5rem 1.1rem .6rem;
  border-radius:34px;
  font-family:'Orbitron',sans-serif;
  font-size: clamp(.55rem,1.2vw,.8rem);
  letter-spacing:.45px;
  color:#d9fbff;
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 0 0 1px rgba(0,246,255,.3), 0 0 22px -8px rgba(0,246,255,.6);
  max-width:70%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Sticks */
.remote-stick {
  position:absolute;
  top:15%;
  width: clamp(84px,8vw,130px);
  height: clamp(84px,8vw,130px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:5;
}
.rs-left { left: clamp(20px,4vw,80px); }
.rs-right { right: clamp(20px,4vw,80px); }

.rs-ring {
  position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 50% 55%, #132f3d, #09141c 65%);
  box-shadow:
    inset 0 0 0 2px rgba(0,246,255,.35),
    0 0 18px -4px rgba(0,246,255,.65);
}

.rs-head {
  position:relative;
  width: clamp(40px,3.8vw,62px);
  height: clamp(40px,3.8vw,62px);
  border-radius:50%;
  background: linear-gradient(160deg,#00f6ff,#004466);
  box-shadow:
    0 6px 14px -6px rgba(0,246,255,.7),
    0 2px 4px -2px rgba(0,246,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.15);
  animation: stickBreath 3.6s ease-in-out infinite;
}
@keyframes stickBreath {
  0%,100% { transform:translateY(0); filter:brightness(1); }
  50% { transform:translateY(3px); filter:brightness(1.2); }
}

/* Boutons */
.remote-buttons {
  position:absolute;
  top:72%;
  right: clamp(30px,4.5vw,70px);
  display:flex;
  flex-direction:column;
  gap: clamp(12px,1.6vw,22px);
  z-index:5;
}
.rbtn {
  width: clamp(14px,1.4vw,20px);
  height: clamp(14px,1.4vw,20px);
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #00f6ff, #004c66 70%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.2),
    0 0 14px -2px rgba(0,246,255,.8);
  animation: btnPulse 4.8s ease-in-out infinite;
}
.rbtn.b2 { animation-delay:.9s; }
.rbtn.b3 { animation-delay:1.8s; }
@keyframes btnPulse {
  0%,100% { transform:scale(1); filter:brightness(1); }
  50% { transform:scale(1.3); filter:brightness(1.35); }
}

/* Responsive simplifications */
@media (max-width:980px){
  .remote-body { border-radius: clamp(30px,6vw,48px); }
  .remote-stick { top:18%; }
}
@media (max-width:820px){
  .remote-stick { display:none; }
  .remote-buttons { right: clamp(16px,5vw,50px); }
  .remote-screen { width:88%; }
}
@media (max-width:620px){
  :root {
    --screen-item-width: clamp(160px,62vw,240px);
    --screen-gap: clamp(.7rem,4vw,1rem);
  }
  .remote-screen { width:92%; }
  .screen-nav { width:56px; height:56px; }
}
@media (max-width:460px){
  .remote-screen { width:96%; }
  .remote-body { padding: clamp(.8rem,4vw,1.2rem); }
  .remote-buttons { top:76%; }
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  .remote-waves,
  .rs-head,
  .rbtn,
  .screen-track {
    animation:none !important;
    transition:none !important;
  }
}


/*fullscreen*/

/* ============= FULLSCREEN IMAGE VIEWER ============= */

.img-fs-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  font-family: 'Orbitron', sans-serif;
}

.img-fs-overlay.active {
  display: flex;
  animation: fsFade .45s ease;
}

@keyframes fsFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.img-fs-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.92), rgba(0,0,0,.98));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.img-fs-figure {
  position: relative;
  max-width: min(92vw, 1800px);
  max-height: 90vh;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.75rem,2vh,1rem);
  z-index: 2;
  padding: clamp(.75rem,1.5vw,1rem) clamp(.9rem,1.8vw,1.2rem) clamp(.9rem,2vh,1.3rem);
  box-sizing: border-box;
}

.img-fs-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: clamp(12px,1.4vw,20px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 40px -4px rgba(0,246,255,.5),
    0 40px 90px -50px rgba(0,0,0,.95);
}

.img-fs-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(1.05) contrast(1.08);
  animation: scaleIn .5s cubic-bezier(.22,.8,.25,1);
  user-select: none;
}

@keyframes scaleIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.img-fs-caption {
  margin: 0;
  font-size: clamp(.7rem,1.2vw,.9rem);
  letter-spacing: .5px;
  color: #d8fdff;
  line-height: 1.3;
  text-align: center;
  background: rgba(0,246,255,0.12);
  padding: .55rem 1rem .65rem;
  border-radius: 40px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(0,246,255,.35), 0 0 22px -6px rgba(0,246,255,.45);
}

.img-fs-close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: clamp(42px,4vw,56px);
  height: clamp(42px,4vw,56px);
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: clamp(1.6rem,3.2vw,2.2rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.15),
    0 0 22px -6px rgba(255,255,255,.55);
  transition: background .35s, transform .35s;
  z-index: 2;
}

.img-fs-close:hover,
.img-fs-close:focus-visible {
  background: #111;
  transform: scale(1.1);
  outline: none;
}

.img-fs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(54px,5vw,74px);
  height: clamp(54px,5vw,74px);
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #00f6ff, #004966 70%);
  color: #fff;
  font-size: clamp(1.7rem,3.4vw,2.6rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px rgba(0,246,255,.4),
    0 0 26px -6px rgba(0,246,255,.8),
    0 10px 28px -14px rgba(0,0,0,.9);
  transition: background .35s, transform .35s;
  z-index: 3;
}

.img-fs-nav.prev { left: clamp(.4rem,1vw,1rem); }
.img-fs-nav.next { right: clamp(.4rem,1vw,1rem); }

.img-fs-nav:hover,
.img-fs-nav:focus-visible {
  background: radial-gradient(circle at 30% 30%, #33ffff, #006c90 70%);
  transform: translateY(-50%) scale(1.12);
  outline: none;
}

@media (max-width: 620px) {
  .img-fs-nav { width: 52px; height: 52px; }
  .img-fs-close { width: 46px; height: 46px; }
  .img-fs-caption { font-size: clamp(.65rem,3.2vw,.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .img-fs-overlay,
  .img-fs-stage img {
    animation: none !important;
    transition: none !important;
  }
}

.no-scroll { overflow: hidden; }


/*images cfd*/

/* ===== PANNEAU VERTICAL CFD ===== */

.cfd-panel {
  --panel-width: clamp(180px, 22vw, 300px);
  position: absolute;
  top: 50%;
  left: 50%; /* point de départ : le cercle */
  transform: translate(-50%, -50%);
  width: var(--panel-width);
  max-height: clamp(260px, 70vh, 680px);
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 22px;
  padding: clamp(.6rem,1.2vw,.9rem);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 12px 40px -12px rgba(0,0,0,.9),
    0 0 28px -6px rgba(0,246,255,.4);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.25,1);
  z-index: 150;
}

/* Quand active */
.cfd-panel.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) translateY(-10px);
}

/* Conteneur scroll interne */
.cfd-panel-inner {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #00f6ff #03333d;
  display: flex;
  flex-direction: column;
  gap: clamp(.55rem,1vw,.75rem);
  padding-right: .4rem;
}

.cfd-panel-inner::-webkit-scrollbar {
  width: 6px;
}
.cfd-panel-inner::-webkit-scrollbar-track {
  background: #02252c;
  border-radius: 10px;
}
.cfd-panel-inner::-webkit-scrollbar-thumb {
  background: linear-gradient(#00f6ff,#006b84);
  border-radius: 10px;
}

/* Items */
.cfd-item {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 8px 26px -14px rgba(0,0,0,.8);
  opacity: 0;
  transform: translateY(18px) scale(.94);
  animation: cfdIn .6s forwards;
}

@keyframes cfdIn {
  to { opacity:1; transform: translateY(0) scale(1); }
}

.cfd-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(1) contrast(1.05);
  transition: transform 1.8s ease, filter .6s ease;
}

.cfd-item:hover .cfd-thumb {
  transform: scale(1.08);
  filter: brightness(1.08) contrast(1.15);
}

.cfd-desc-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: .4rem .6rem .5rem;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.55rem,1.1vw,.72rem);
  line-height: 1.2;
  letter-spacing: .4px;
  color: #dffcff;
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,.0));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
}

/* Lien pour clic plein écran (si recyclage de ton viewer d’images) */
.cfd-item button {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: zoom-in;
}

/* ========= Positionnement relatif au cercle ========== */
/* On part du principe que .circles-container est position:relative */
.circles-container { position: relative; }

/* Ajuste où apparaît le panneau par rapport au 3ème cercle selon viewport */
@media (min-width: 900px) {
  .cfd-panel {
    transform: translate(-50%, -50%) translate(260px, 0);
  }
  .cfd-panel.active {
    transform: translate(-50%, -50%) translate(260px, -10px);
  }
}

/* Petits écrans : panneau plein largeur en dessous */
@media (max-width: 780px) {
  .cfd-panel {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    margin-top: 1.2rem;
    border-radius: 24px;
    opacity: 0;
  }
  .cfd-panel.active {
    transform: none;
    opacity: 1;
  }
  .cfd-panel-inner {
    max-height: 60vh;
  }
}

/* Très petits */
@media (max-width: 480px) {
  .cfd-item { border-radius: 18px; }
}

/* Réduction mouvement */
@media (prefers-reduced-motion: reduce) {
  .cfd-panel,
  .cfd-item,
  .cfd-thumb {
    transition: none !important;
    animation: none !important;
  }
}


/* ============ CFD PANEL (au survol / clic du cercle CFD) ============ */
.cfd-panel {
  --panel-bg: rgba(0,0,0,0.78);
  --panel-border: rgba(255,255,255,0.15);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(2.2rem, -50%) scale(.92);
  width: clamp(220px, 26vw, 340px);
  max-height: clamp(320px, 60vh, 540px);
  background: var(--panel-bg);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: clamp(.8rem,1.8vw,1.1rem) clamp(.75rem,1.3vw,1rem);
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,.7),
    0 0 0 1px rgba(255,255,255,.07),
    0 0 30px -6px #00f6ff44;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.25,1);
  z-index: 40;
}

.cfd-panel.open {
  opacity: 1;
  transform: translate(2.2rem, -50%) scale(1);
  pointer-events: auto;
}

.cfd-panel:focus-visible {
  outline: 2px solid #ff1100;
  outline-offset: 4px;
}

.cfd-panel-close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-size: 1.15rem;
  width: 28px;
  height: 28px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .3s, transform .3s;
}
.cfd-panel-close:hover {
  background: #ff1100;
  transform: scale(1.05);
}

.cfd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #00f6ff44 transparent;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.cfd-list::-webkit-scrollbar {
  width: 8px;
}
.cfd-list::-webkit-scrollbar-track {
  background: transparent;
}
.cfd-list::-webkit-scrollbar-thumb {
  background: linear-gradient(#00f6ff,#0055A4);
  border-radius: 4px;
}

.cfd-item {
  position: relative;
  background: linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .55rem .6rem .65rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  cursor: pointer;
  transition: border-color .35s, background .35s, transform .35s;
}

.cfd-item:hover {
  border-color: rgba(0,246,255,.55);
  background: linear-gradient(135deg,rgba(0,246,255,.18),rgba(0,85,164,.15));
  transform: translateY(-3px);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(0,246,255,.3);
}

.cfd-thumb-wrap {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.cfd-thumb-wrap video,
.cfd-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cfd-info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.cfd-title {
  font-family:'Orbitron',sans-serif;
  font-size: .72rem;
  letter-spacing: .6px;
  font-weight: 600;
  color:#fff;
  text-transform: uppercase;
  line-height: 1.2;
}
.cfd-desc-short {
  font-family:'Barlow Condensed',sans-serif;
  font-size: .68rem;
  font-weight: 500;
  line-height: 1.1;
  color:#d9f9ff;
  letter-spacing: .3px;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cfd-loader {
  font-family:'Orbitron',sans-serif;
  font-size:.75rem;
  color:#fff;
  text-align:center;
  opacity:.7;
  padding:.4rem 0 .2rem;
}

/* Panel attaché visuellement au cercle */
.circle-cfd {
  position: relative;
  z-index: 41;
}

/* Affichage sur survol uniquement (desktop) */
@media (hover:hover) and (pointer:fine) {
  .circle-cfd:hover > .cfd-panel:not(.force-open) {
    opacity: 1;
    transform: translate(2.2rem, -50%) scale(1);
    pointer-events: auto;
  }
}

/* Mobile / petits écrans : panel passe dessous en plein largeur */
@media (max-width: 780px) {
  .cfd-panel {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: clamp(1.2rem,5vh,2.2rem);
    transform: translate(-50%, calc(110% + 1rem)) scale(.9);
    width: min(92%, 420px);
    max-height: min(68vh, 540px);
    border-radius: 22px;
    padding: 1rem clamp(.9rem,4vw,1.2rem) 1.15rem;
    backdrop-filter: blur(14px) saturate(1.25);
  }
  .cfd-panel.open {
    transform: translate(-50%, 0) scale(1);
  }
  /* On ne l’ouvre que par clic -> survol désactivé */
  .circle-cfd:hover > .cfd-panel:not(.force-open) {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(110% + 1rem)) scale(.9);
  }
}

/*cfd 2*/

/* Images CFD dans les bulles */
.cfd-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.cfd-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .9s cubic-bezier(.22,.8,.25,1);
  filter: brightness(.95) contrast(1.08);
}

.cfd-bubble:hover .cfd-img,
.cfd-bubble:focus-within .cfd-img {
  transform: scale(1.12);
  filter: brightness(1.05) contrast(1.15);
}

/* Overlay (si déjà défini pour .cfd-overlay tu peux ignorer) */
.cfd-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,rgba(0,0,0,.05),rgba(0,0,0,.55) 65%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: .85rem .9rem 1rem;
  opacity: 0;
  transition: opacity .5s ease;
}

.cfd-bubble:hover .cfd-overlay,
.cfd-bubble:focus-within .cfd-overlay {
  opacity: 1;
}

.cfd-desc {
  margin: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.55rem, .95vw, .75rem);
  line-height: 1.25;
  letter-spacing: .5px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}


/*bas de page*/

/* =========================
   BASE VARIABLES / THEME
   ========================= */
:root {
  --clr-gradient: linear-gradient(to right,#0055A4,#ff1100);
  --clr-gradient-hover: linear-gradient(130deg,#ff1100,#9d0000 55%,#ff3c00);
  --clr-accent: #00f6ff;
  --clr-bg-dark: #000;
  --clr-text: #ffffff;
  --radius-pill: 30px;
  --trans-fast: .25s cubic-bezier(.22,.8,.25,1);
  --shadow-btn: 0 0 10px rgba(0,85,164,.70);
  --shadow-btn-hover: 0 0 18px -2px rgba(255,30,0,.85);
}

/* =========================
   BOUTON PRINCIPAL
   ========================= */
.btn-primary {
  --btn-pad-y: 1rem;
  --btn-pad-x: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6ch;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: 3rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: clamp(.8rem, .9rem + .4vw, 1.15rem);
  letter-spacing: .5px;
  text-decoration: none;
  color: var(--clr-text);
  background: var(--clr-gradient);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  box-shadow: var(--shadow-btn);
  transition:
    background var(--trans-fast),
    box-shadow var(--trans-fast),
    transform var(--trans-fast),
    filter var(--trans-fast);
}

.btn-primary::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);
  opacity:.15;
  mix-blend-mode:overlay;
  pointer-events:none;
  transition: opacity var(--trans-fast);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--clr-gradient-hover);
  box-shadow: var(--shadow-btn-hover), 0 0 0 1px rgba(255,255,255,.15);
  transform: translateY(-2px);
  outline:none;
}

.btn-primary:hover::before,
.btn-primary:focus-visible::before { opacity:.28; }

.btn-primary:active {
  transform: translateY(0);
  filter: brightness(.95);
  box-shadow: 0 0 8px -2px rgba(255,60,0,.6);
}

/* Variante spécifique retour */
.btn-retour {
  width: clamp(220px, 40vw, 520px);
  text-align: center;
  margin-inline: auto;
  margin-top: clamp(2rem, 6vw, 5rem);
  /* Si tu veux un style légèrement différent désactive ce fond: sinon hérite */
}

/* =========================
   WRAPPER DU BOUTON RETOUR
   ========================= */
.class_4 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 7vw, 5rem) 1rem 0;
  box-sizing: border-box;
}

/* =========================
   FOOTER LÉGAL
   ========================= */
.site-footer-legal {
  width: 100%;
  margin: 0;
  padding: clamp(2.5rem, 7vw, 4rem) 1rem clamp(3.5rem, 9vw, 6rem);
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(.65rem, .55rem + .5vw, .95rem);
  line-height: 1.55;
  letter-spacing: .4px;
  color: var(--clr-text);
  background: transparent;
  position: relative;
  z-index: 1;
  text-shadow:
    2px 2px 8px rgba(0,0,0,.63),
    4px 4px 12px rgba(0,0,0,.56);
}

.site-footer-legal a {
  color: var(--clr-text);
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding: .2rem .4rem .35rem;
  font-weight: 600;
  transition: color var(--trans-fast);
  outline: none;
}

.site-footer-legal a::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:0;
  height:2px;
  background: var(--clr-gradient);
  border-radius:2px;
  transform:translateX(-50%);
  transition: width var(--trans-fast);
}

.site-footer-legal a:hover::after,
.site-footer-legal a:focus-visible::after { width:90%; }
.site-footer-legal a:hover,
.site-footer-legal a:focus-visible { color:#fff; }

.site-footer-legal a:focus-visible {
  outline:2px solid #ff1100;
  outline-offset:4px;
}

/* Séparateur visuel optionnel (ligne douce) */
.site-footer-legal::before {
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width: min(78%, 1100px);
  height:1px;
  transform:translateX(-50%);
  background: linear-gradient(90deg,transparent,#ffffff55 35%,#ffffff55 65%,transparent);
  opacity:.25;
  pointer-events:none;
}

/* =========================
   BOUTON SCROLL TOP
   ========================= */
.scroll-top {
  position: fixed;
  bottom: clamp(1.4rem, 4vw, 2.4rem);
  right: clamp(1.4rem, 4vw, 2.4rem);
  width: clamp(2.8rem, 3.2rem + 1vw, 4rem);
  height: clamp(2.8rem, 3.2rem + 1vw, 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c00000;
  border: none;
  border-radius: .85rem;
  cursor: pointer;
  padding: 0;
  box-shadow:
    0 10px 26px -12px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.12);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    background var(--trans-fast),
    transform var(--trans-fast),
    opacity var(--trans-fast),
    box-shadow var(--trans-fast);
  z-index: 999;
}

.scroll-top.visible {
  opacity:1;
  visibility:visible;
  transform: translateY(0);
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background:#002060;
  transform: translateY(-4px);
  box-shadow:
    0 14px 40px -14px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.18);
  outline:none;
}

.scroll-top:active {
  transform: translateY(0);
}

.arrow-icon {
  width: 60%;
  height: 60%;
  display:block;
  pointer-events:none;
}

/* =========================
   RESPONSIVE AJUSTEMENTS
   ========================= */

@media (max-width: 680px) {
  .btn-primary {
    font-size: clamp(.75rem, 3.2vw, .95rem);
    --btn-pad-y: .85rem;
    --btn-pad-x: 1.75rem;
  }
  .btn-retour {
    width: clamp(220px, 75vw, 420px);
  }
  .site-footer-legal {
    padding: clamp(2rem, 10vw, 3.2rem) .9rem clamp(2.6rem, 12vw, 4.2rem);
  }
}

@media (max-width: 430px) {
  .btn-primary {
    font-size: clamp(.7rem,4.1vw,.85rem);
    letter-spacing: .4px;
  }
  .scroll-top {
    border-radius: .7rem;
  }
}

/* Réduction des animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .scroll-top {
    transition: none !important;
    animation: none !important;
  }
}


/*toggle 2*/

/* Bouton burger */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 40px;
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  z-index: 100;
}

.menu-toggle span {
  width: 100%;
  height: 3px;
  background: #ffffff;
  display: block;
  border-radius: 3px;
  transition: transform .4s ease, opacity .35s ease, background .35s;
}

/* État ouvert */
.menu-toggle.open span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ===== Responsive ≤ 920px : on commence à compacter ===== */
/*
@media (max-width: 920px) {
  .main-nav {
    gap: 1rem;
    padding: 10px clamp(1rem,3vw,1.5rem);
  }
  .nav-links {
    gap: clamp(1.2rem, 2.6vw, 2rem);
  }
  .main-nav .logo img {
    height: 44px;
  }
}

*/

/* ===== Mobile ≤ 780px : menu déroulant ===== */
@media (max-width: 780px) {
  .menu-toggle {
    display: flex;
  }
}

/* Accessibilité focus */
.menu-toggle:focus-visible
{
  outline: 2px solid #ff1100;
  outline-offset: 3px;
}

/*circles 3*/

/* === FIX CERCLES MOBILE (forcer carrés consistants) === */
.circles-container,
.competences {
  /* enlever largeurs fixes héritées */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: clamp(0.9rem, 4vw, 1.4rem) !important;
  box-sizing: border-box;
}

.circle {
  position: relative !important;
  flex: 0 1 auto !important;
  aspect-ratio: 1 / 1 !important;
  width: clamp(160px, 44vw, 210px) !important; /* adapte si tu veux plus grand */
  height: auto !important; /* laisse aspect-ratio faire le job */
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: 2px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.7) !important;
  background:#000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.circle-video,
.circle video,
.circle > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important; /* neutralise zooms agressifs qui peuvent tromper l'œil */
}

.circle-caption {
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%,-50%) !important;
  width:90% !important;
  font-size: clamp(.6rem, 3.4vw, .78rem) !important;
  line-height:1.15 !important;
  padding:0 .25rem !important;
  pointer-events:none !important;
}

/* Supprime les vieilles marges négatives sur mobile */
@media (max-width: 780px){
  .competences { margin-left: 0 !important; }
}

/* Sécurité : si un parent force une height */
[class*="competences"] .circle[style] {
  height: auto !important;
}



/*circles videos 2*/

/* ====== SAVOIR-FAIRE (SECTION CERCLES) ====== */

#savoir-faire.sf {
  --sf-max: 1700px;
  --sf-gap: clamp(1rem, 3vw, 3rem);
  --sf-circle-size: clamp(150px, 22vw, 310px);
  --sf-bg: transparent;
  --sf-caption-fs: clamp(.65rem, 1.5vw, 1.05rem);

  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3.5rem);
  background: var(--sf-bg);
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  position: relative;
}

.sf__title {
  margin: 0 0 clamp(2rem, 5vw, 3.2rem);
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .6px;
  color: #fff;
  text-shadow: 2px 2px 8px rgba(0,0,0,.6), 4px 4px 12px rgba(0,0,0,.55);
}

/* Container */
.sf__circles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sf-gap);
  max-width: var(--sf-max);
  margin: 0 auto;
  padding: 0;
}

/* Circle */
.sf__circle {
  width: var(--sf-circle-size);
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  margin: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 26px -12px rgba(0,0,0,.85),
    0 0 0 2px rgba(255,255,255,.07);
  transition:
    transform .9s cubic-bezier(.22,.8,.25,1),
    box-shadow .6s ease;
  isolation: isolate;
}

.sf__circle:hover,
.sf__circle:focus-visible {
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 18px 50px -20px rgba(0,0,0,.9),
    0 0 0 2px rgba(255,255,255,.12),
    0 0 30px -6px rgba(0,246,255,.45);
  outline: none;
}

/* Media (video) */
.sf__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.95) contrast(1.12) saturate(1.05);
  transition: transform 1.6s ease, filter .9s ease;
  transform: scale(1);
  will-change: transform;
}

.sf__media--zoom { transform: scale(2); }

.sf__circle:hover .sf__media--zoom,
.sf__circle:focus-visible .sf__media--zoom {
  transform: scale(2.15);
}

.sf__circle:hover .sf__media:not(.sf__media--zoom),
.sf__circle:focus-visible .sf__media:not(.sf__media--zoom) {
  transform: scale(1.1);
  filter: brightness(1.08) contrast(1.2) saturate(1.1);
}

/* Caption */
.sf__caption {
  position: absolute;
  inset: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  font-size: var(--sf-caption-fs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .45px;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,.65), 0 2px 12px rgba(0,0,0,.55);
  font-family: 'Orbitron', sans-serif;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ===== Responsive affinement ===== */

@media (max-width: 1080px) {
  #savoir-faire.sf { --sf-circle-size: clamp(150px, 26vw, 280px); }
}

@media (max-width: 860px) {
  #savoir-faire.sf {
    padding: clamp(2rem, 8vw, 3.8rem) clamp(1rem,5vw,2.2rem);
  }
  .sf__title { font-size: clamp(1.55rem, 6.4vw, 2.3rem); }
}

@media (max-width: 680px) {
  #savoir-faire.sf { --sf-circle-size: clamp(155px, 44vw, 230px); }
  .sf__caption { font-size: clamp(.62rem, 3.5vw, .9rem); }
}

@media (max-width: 480px) {
  #savoir-faire.sf { --sf-circle-size: clamp(150px, 48vw, 210px); }
  .sf__caption { font-size: clamp(.6rem, 4.1vw, .82rem); }
}

@media (prefers-reduced-motion: reduce) {
  .sf__circle,
  .sf__media {
    transition: none !important;
  }
  .sf__circle:hover,
  .sf__circle:focus-visible {
    transform: none;
  }
}

/* Fallback (vieux Safari sans aspect-ratio) */
@supports not (aspect-ratio: 1 / 1) {
  .sf__circle {
    height: var(--sf-circle-size);
  }
}

/*drapeaux*/

.lang-switcher {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;       /* petit espace à gauche des drapeaux */
  flex-shrink: 0;
}

/* 5) Styles communs aux drapeaux */
.lang-flag {
  display: block;
  margin-left: 0.50rem; 
   

}

/* 6) Dimensions des images (desktop) */
.lang-flag img {
  display: block;
  width: 45px;
  height: 30px;
  
}

/* 7) Option « clamp » pour une taille qui s’adapte en continu */
/*.lang-flag img {
  width: clamp(18px, 4vw, 24px);
}*/

/* 8) Media queries — iPhones et petits écrans */

@media (max-width: 880px) {
  .lang-flag img {
  display: block;
  width: 22.5px;
  height: 15px;
  
}
}

@media (max-width: 768px) {
  .lang-flag img {
  display: block;
  width: 22.5px;
  height: 15px;
  
}
}

@media (max-width: 480px) {
  .lang-flag img {
  display: block;
  width: 22.5px;
  height: 15px;
  
}
}

/* ========= LANG SWITCHER ========= */
.lang-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:14px;
  flex-shrink:0;
  z-index:120;                 /* au-dessus du nav */
}

/* Bouton principal (FR / EN + chevron) */
.lang-btn{
  display:flex;
  align-items:center;
  gap:.35rem;
  background:none;
  border:0;
  padding:.25rem .5rem;
  font:inherit;
  color:#fff;
  cursor:pointer;
  line-height:1 !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.lang-btn .chevron{
  width:10px;
  height:6px;
  transition:transform .2s;
  
}
.lang-btn[aria-expanded="true"] .chevron{
  transform:rotate(180deg);
}

/* Liste déroulante */
.lang-list{
  position:absolute;
  top:calc(100% + .35rem);
  right:0;
  background:#000;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  box-shadow:0 6px 22px -8px rgba(0,0,0,.65);
  padding:.25rem 0;
  margin:0;
  list-style:none;
  animation:drop .15s ease-out;
  width:max-content;
  max-width:calc(100vw - 1rem - env(safe-area-inset-right));
  overflow:auto;                       /* scroll interne si nécessaire */
  -webkit-overflow-scrolling:touch;    /* fluidité iOS */
}
.lang-list[hidden]{ display:none !important; }

.lang-list a{
  display:block;
  padding:.45rem .9rem;
  text-decoration:none;
  color:#fff;
  font-size:14px;
  line-height:1.2;
  white-space:nowrap;                  /* 2 lettres ne poseront pas problème */
  outline:none;
}
.lang-list a:hover,
.lang-list a:focus-visible{
  background:#1b1b1b;
}

/* Petite anim */
@keyframes drop{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:translateY(0);}
}

/* ------- Sécurités responsive ------- */
@media (max-width:780px){
  /* Place le switcher dans le coin droit du nav mobile */
  .lang-switcher{
    position:absolute;
    right:clamp(.6rem, 4vw, 1.2rem);
    top:50%;
    transform:translateY(-50%);
  }
  .lang-list{
    max-width:calc(100vw - .8rem - env(safe-area-inset-right));
  }
}

/* Préférence utilisateur : moins d’animations */
@media (prefers-reduced-motion: reduce){
  .lang-btn .chevron,
  .lang-list{
    transition:none !important;
    animation:none !important;
  }
}

/* =============================
   CAROUSEL 2D + LIGHTBOX (RGL)
   ============================= */
:root {
  --rgl-accent: #00f6ff;
  --rgl-gap: clamp(.8rem, 2vw, 1.4rem);
  --rgl-slide-w: clamp(200px, 70vw, 360px);
  --rgl-cap-fs: clamp(.7rem, 2.6vw, 1rem);
  --rgl-radius: 18px;
  --rgl-bg-dark: #000;
}

.rgl-section {
  width: 100%;
  margin: clamp(2.5rem, 8vw, 5rem) auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

.rgl-title {
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  margin: 0 0 clamp(1.8rem, 5vw, 3rem);
  letter-spacing: .6px;
  text-shadow: 2px 2px 8px rgba(0,0,0,.6), 4px 4px 12px rgba(0,0,0,.55);
}

/* ===== Carousel wrapper ===== */
.rgl-carousel {
  position: relative;
  max-width: 1700px;
  margin: 0 auto;
  padding: clamp(.6rem, 2vw, 1.1rem) 0;
}

/* Track */
.rgl-track {
  display: flex;
  gap: var(--rgl-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 0 1rem;
  margin: 0;
  list-style: none;
}

.rgl-track::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

.rgl-slide {
  flex: 0 0 var(--rgl-slide-w);
  scroll-snap-align: start;
  position: relative;
}

.rgl-fig {
  margin: 0;
  position: relative;
  border-radius: var(--rgl-radius);
  overflow: hidden;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  cursor: zoom-in;
  transition: transform .6s cubic-bezier(.22,.8,.25,1), box-shadow .6s ease;
}

.rgl-fig:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 36px -16px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12), 0 0 26px -6px rgba(0,246,255,.38);
}

.rgl-fig img {
  width: 100%;
  height: clamp(140px, 40vw, 230px);
  object-fit: cover;
  display: block;
  filter: brightness(.96) contrast(1.08);
  transition: transform 1.3s ease, filter .7s ease;
}

.rgl-fig:hover img {
  transform: scale(1.08);
  filter: brightness(1.08) contrast(1.18);
}

.rgl-cap {
  margin: 0;
  padding: .45rem .7rem .6rem;
  font-size: var(--rgl-cap-fs);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  color: #fff;
  text-align: left;
  letter-spacing: .4px;
  line-height: 1.25;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.7);
  pointer-events: none;
}

/* ===== Arrows ===== */
.rgl-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(75px, 5vw, 80px);
  height: clamp(75px, 5vw, 80px);
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.2), rgba(0,0,0,.75));
  color: white;
  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .35s ease, background .35s ease, opacity .3s;
}

.rgl-prev { left: clamp(-6px, .8vw, 8px); }
.rgl-next { right: clamp(-6px, .8vw, 8px); }

.rgl-arrow:hover, .rgl-arrow:focus-visible {
  transform: translateY(-50%) scale(1.08);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.32), rgba(0,0,0,.82));
  outline: none;
}

/***** Masquer auto les flèches si peu d'items *****/
.rgl-carousel[data-small="true"] .rgl-arrow { display: none; }

/* ===== Dots ===== */
.rgl-dots {
  display: flex;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 12px);
  margin-top: .6rem;
}

.rgl-dots button {
  width: clamp(10px, 1.2vw, 14px);
  height: clamp(10px, 1.2vw, 14px);
  border-radius: 50%;
  border: none;
  
  opacity: .3;
  cursor: pointer;
  transition: opacity .3s, transform .3s;
}

.rgl-dots button[aria-selected="true"] {
  opacity: 1;
  transform: scale(1.25);
}

/* ===================== LIGHTBOX ===================== */
.rgl-lightbox[hidden] { display: none; }

.rgl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(.8rem, 2vw, 1.2rem);
  box-sizing: border-box;
  animation: rglFade .4s ease;
}

@keyframes rglFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.rgl-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.rgl-lightbox-figure {
  position: relative;
  max-width: min(96vw, 1800px);
  max-height: 92vh;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(.6rem, 1.6vh, 1rem);
  z-index: 1;
}

.rgl-lightbox-stage {
  position: relative;
  flex: 1 1 auto;
  background: #000;
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 40px -4px rgba(0,246,255,.5), 0 40px 90px -50px rgba(0,0,0,.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rgl-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(1.05) contrast(1.08);
  animation: rglScaleIn .45s cubic-bezier(.22,.8,.25,1);
  user-select: none;
}

@keyframes rglScaleIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.rgl-lightbox-caption {
  margin: 0 auto;
  width: fit-content;
  max-width: 90%;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(.7rem, 1.5vw, 1rem);
  line-height: 1.35;
  color: #d8fdff;
  text-align: center;
  background: rgba(0,246,255,.12);
  padding: .55rem 1rem .65rem;
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(0,246,255,.35), 0 0 22px -6px rgba(0,246,255,.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.rgl-lightbox-close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: clamp(42px, 4vw, 58px);
  height: clamp(42px, 4vw, 58px);
  border: none;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 0 22px -6px rgba(255,255,255,.55);
  transition: background .3s, transform .3s;
  z-index: 2;
}

.rgl-lightbox-close:hover,
.rgl-lightbox-close:focus-visible {
  background: #111;
  transform: scale(1.08);
  outline: none;
}

.rgl-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(52px, 5vw, 74px);
  height: clamp(52px, 5vw, 74px);
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #000000, #000000 70%);
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 26px -6px rgba(0, 0, 0, 0.8), 0 10px 28px -14px rgba(0,0,0,.9);
  transition: background .3s, transform .3s;
  z-index: 2;
}

.rgl-lightbox-prev { left: .5rem; }
.rgl-lightbox-next { right: .5rem; }

.rgl-lightbox-nav:hover,
.rgl-lightbox-nav:focus-visible {
  background: radial-gradient(circle at 30% 30%, #33ffff, #006c90 70%);
  transform: translateY(-50%) scale(1.12);
  outline: none;
}

/* Disable body scroll when lightbox open */
.rgl-no-scroll { overflow: hidden !important; touch-action: none; }

/* ===== Responsive tweaks ===== */
@media (max-width: 680px) {
  :root { --rgl-slide-w: clamp(180px, 72vw, 260px); }
  .rgl-fig img { height: clamp(130px, 48vw, 200px); }
  .rgl-arrow { width: 50px; height: 50px; font-size: 1.6rem; }
  .rgl-lightbox-nav { width: 50px; height: 50px; }
  .rgl-lightbox-close { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .rgl-fig,
  .rgl-fig img,
  .rgl-arrow,
  .rgl-lightbox,
  .rgl-lightbox-img,
  .rgl-lightbox-nav {
    transition: none !important;
    animation: none !important;
  }
}


/*nav links mobile*/

@media (max-width: 780px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 42% !important;
    flex-direction: column;
    background: rgba(0,0,0,0.94);
    backdrop-filter: blur(6px);
    padding: clamp(1.2rem,4vw,2rem) clamp(1rem,5vw,2rem);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 14px 34px -10px rgba(0,0,0,0.65);
    transform-origin: top center;
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-start; /* commence à gauche */
    margin-left: 29% !important;
  }

  .nav-links.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* Décalage vers la droite */
    margin-left: clamp(40px, 15vw, 80px);
  }

  .nav-links a {
    width: 100%;
    text-align: center !important;
    padding-left: clamp(1rem, 5vw, 2rem) !important;
    padding-right: clamp(1rem, 5vw, 2rem) !important;
    font-size: clamp(14px, 4vw, 17px);
  }
}

@media (max-width: 780px) {

  .nav-links a{

    margin-right: -500% !important;



  }

  


}