:root {
    /* ==== Design tokens (portés de RECKLESS-CUP) ==== */
    --rk-bg: #ffffff;
    --rk-ink: #0a1a26;
    --rk-title: #2a4556;
    --rk-surface: #ffffff;
    --rk-elev: #ffffff;
    --rk-shell: rgba(246, 250, 252, 0.95);
    --rk-hero-bg: #e9eef4;
    --rk-hero-bg2: #dfe7ef;
    --rk-grid-line: rgba(10, 26, 38, 0.05);
    --rk-grid-line2: rgba(10, 26, 38, 0.025);
    --rk-muted: #5b7c8d;
    --rk-accent: #3fc5ff;
    --rk-accent-hover: #2ea8e0;
    --rk-accent-soft: rgba(63, 197, 255, 0.14);
    --rk-border: rgba(10, 26, 38, 0.14);
    --rk-line: rgba(10, 26, 38, 0.08);
    --rk-font-display: 'Orbitron', sans-serif;
    --rk-font-body: 'League Spartan', sans-serif;
    --rk-radius-sm: 6px;
    --rk-radius-md: 8px;
    --rk-radius-pill: 999px;
    --rk-radius-round: 50%;

    /* texte secondaire (remplace les rgba(245,245,220,x) hardcodés) */
    --c-txt-strong: rgba(10, 26, 38, 0.88);
    --c-txt: rgba(10, 26, 38, 0.75);
    --c-txt-dim: rgba(91, 124, 141, 0.85);

    /******* Text ******/
    --text-small: 12px;
    --text-detail: 14px;
    --text-body: 16px;
    /* ou 16px;*/
    --text-subtitle: 18px;
    --text-title: 24px;
    /* ou 28px;*/
    --text-main: 32px;
    /* ou 38px ou 42px;*/
  
  
    /******** Couleur — mode clair permanent ******/
    --c-principal: #0a1a26;
    --c-fond: #ffffff ;
    --c-border: rgba(10, 26, 38, 0.14);
    --c-info-p:#5b7c8d;
    --c-border-p:rgba(10, 26, 38, 0.2);

    /***partie accueil****/
    --c-right :#25B1FF; 
    --c-left :#EF6629; 

    /***partie service***/
    --c-stroke: #8c8c8c;


    /******** radius ********/
    --radius-small: 4px;
    --radius: 12px;

    
  
  }

/* ==== Dark mode ==== */
:root[data-theme='dark'] {
    --c-principal: #e8f1f5;
    --c-fond: #171717;
    --c-border: rgba(255, 255, 255, 0.16);
    --c-info-p: rgba(245, 245, 220, 0.72);
    --c-border-p: rgba(245, 245, 220, 0.3);

    --rk-bg: #10161e;
    --rk-ink: #e8f1f5;
    --rk-title: #d9e7f0;
    --rk-surface: #16202b;
    --rk-elev: #121b26;
    --rk-shell: rgba(22, 32, 43, 0.95);
    --rk-hero-bg: #0d1520;
    --rk-hero-bg2: #080f18;
    --rk-grid-line: rgba(255, 255, 255, 0.05);
    --rk-grid-line2: rgba(255, 255, 255, 0.025);
    --rk-muted: #7f96a8;
    --rk-accent: #3fc5ff;
    --rk-accent-hover: #6fd4ff;
    --rk-accent-soft: rgba(63, 197, 255, 0.16);
    --rk-border: rgba(255, 255, 255, 0.14);
    --rk-line: rgba(255, 255, 255, 0.08);

    --c-txt-strong: rgba(245, 245, 220, 0.88);
    --c-txt: rgba(245, 245, 220, 0.85);
    --c-txt-dim: rgba(245, 245, 220, 0.65);
}

/* ==== Calques d'effets : dark only (étoiles, particules, lucioles) ==== */
.wrap, #starfield, #aurora, #fireflies-container { display: none; }
:root[data-theme='dark'] .wrap,
:root[data-theme='dark'] #starfield,
:root[data-theme='dark'] #aurora { display: block; }
:root[data-theme='dark'] #fireflies-container { display: block; }
#starfield {
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none;
}
#aurora {
    position: absolute; top: -15%; left: 0;
    width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none;
}


  /******* Appel variable *******
        var(--nom_var)
    */
  
  *, ::after, ::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* PAS de scroll-behavior:smooth ici — chaque scrollTo de ScrollTrigger
       (snap des pins) relancerait une animation CSS à chaque frame : le
       snap ramperait au lieu de se poser. Le smooth des ancres est géré
       en JS (nav.js, scrollIntoView). */
    user-select: none;
    font-family: 'League Spartan', sans-serif;
  }
  
  body {
    background-color:var(--c-fond);
    color: var(--c-principal);
    letter-spacing: 0.01em;
    transition: background 0.4s ease, color 0.4s ease;

  }
  /* la gouttière de scrollbar est toujours réservée : quand le loader ou
     un overlay masque puis rend la scrollbar, la page ne glisse pas de
     ~15px — c'était la source du CLS massif à la fin du chargement */
  html {
    scrollbar-gutter: stable;
  }
  /* scroll verrouillé UNIQUEMENT pendant le loader — via une classe
     (jamais un overflow global) : les overlays (menu, modal, focus)
     remettent `body.style.overflow = ''` qui doit toujours rendre le
     scroll, sinon la scrollbar disparait apres fermeture/resize */
  body.is-loading {
    overflow: hidden;
  }
  a {
    text-decoration: none;
    color: var(--c-principal);
    opacity: 0.8;
  }
  .body-overflow{
    overflow: hidden;
  }
  .xxx{
    overflow: initial;
  }


.container{
    position: absolute;
    display: grid;
    grid-template-rows:  minmax(80vh, auto) repeat(4 ,min-content ) ;
    grid-template-columns: 1fr repeat(8 , minmax(min-content , 14rem)) 1fr;
    justify-content: center;
    
}
.menu{
    top:0 ;
    left:0;
    position: sticky;
}

.title{
    font-size: var(--text-title);
    letter-spacing: 5px;
    padding-top: 5rem;
}


.titre{
    width: fit-content;
    height: fit-content;
    position: relative;
    line-height: 32px;
    
}

.title{
    z-index: 4;
}
.title::before{
    position: absolute;
    content: "";
    width: 40px;
    height: 40px;
    background-color: rgba(0, 132, 255, 0.658);
    
    top: 0;
    left: -15px;
    z-index: -1;
    transform: translateY(4.8rem);
}


@media screen and (max-width:625px) {
    .title{
        font-size: 14px;
        display: grid;
        align-items: flex-end;
        justify-self: center;
        padding-left: 10px;
    }
}

.content{
    font-size: var(--text-body);
    font-weight: 200;
}

.btn-p,
.btn-sec{
    position: relative;
    font-size: var(--text-body);
    background: none;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--c-border);
    color: var(--c-principal);
    opacity: 0.9;
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.25s ease;
    overflow: hidden;
}

.btn-sec{
    padding: 8px;
}

.btn-p::before,
.btn-sec::before{
    content: attr(data-text);
    position: absolute;
    color: rgb(19, 19, 19);
    display: grid;
    justify-content: center;
    align-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#276095,#5fd3f7);
    border-radius: 5px;
    clip-path: circle(0%);
    transition: .4s;
}

.btn-p:hover::before,
.btn-sec:hover::before{
    clip-path: circle(100%);
    opacity: 1;
    filter: brightness(1.05);
}

.btn-p:hover,
.btn-sec:hover{
    border-color: transparent;
    opacity: 1;
}


.info-projet ,.nom,.type{
    color: var(--c-principal);
    
}
.info-projet h4{
    color: var(--c-principal);
    opacity: 0.8;
}
.info-projet .content-portfolio{
    text-align: center;
    opacity: 0.7;
}
.nom,.type{
    
    opacity: 0.7;
}

.logo{
    position: fixed;
    /* même rangée que le burger : top + inset latéral identiques à
       .flexa, et l'img (~28px) centrée dans un slot de 40px = la
       hauteur du bouton, les deux sont optiquement alignés */
    top: 1.25rem;
    left: 1.5rem;
    height: 40px;
    display: flex;
    align-items: center;
    z-index: 900;
}

.logo img{
    width: 42px;
    margin-top: 0;
}

.logo ,.svg-menu{
    cursor: pointer;
}

.container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}


/* debut loader evolutech — recette reckless : mini-cube 3D sur voile
   de 8 bandes qui remontent en cascade (centre → bords) à la sortie */
.loaderXd{
    position: fixed;
    inset: 0;
    z-index: 1000000;
}
.loaderXd.is-out{
    pointer-events: none;
}

.loader-grid{
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.loader-bar{
    background: var(--rk-elev);
    width: calc(100% + 1px);
    transform: translateY(0);
    will-change: transform;
}
.loaderXd.is-out .loader-bar{
    transform: translateY(-101%);
    transition: transform .75s cubic-bezier(.22, 1, .36, 1);
}
/* cascade centre → extérieur */
.loaderXd.is-out .loader-bar:nth-child(4),
.loaderXd.is-out .loader-bar:nth-child(5){ transition-delay: 0s; }
.loaderXd.is-out .loader-bar:nth-child(3),
.loaderXd.is-out .loader-bar:nth-child(6){ transition-delay: .07s; }
.loaderXd.is-out .loader-bar:nth-child(2),
.loaderXd.is-out .loader-bar:nth-child(7){ transition-delay: .14s; }
.loaderXd.is-out .loader-bar:nth-child(1),
.loaderXd.is-out .loader-bar:nth-child(8){ transition-delay: .21s; }

.mini-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%) scale(0.42);
    transform-origin: 50% 50%;
    perspective: 1000px;
    transition: transform .45s ease-in, opacity .45s ease-in;
}
.mini-container.is-out{
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
}

.mini-cube{
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: mini-cube3d 1.8s ease-in-out infinite;
}

@keyframes mini-cube3d {
    0%   { transform: rotateX(-50deg) rotateY(-20deg) translateY(20px) scale3d(0.97, 0.97, 0.97); }
    25%  { transform: rotateX(-50deg) rotateY(70deg)  translateY(38px) scale3d(0.6, 0.7, 0.6); }
    50%  { transform: rotateX(-50deg) rotateY(160deg) translateY(15px) scale3d(0.7, 0.8, 0.7); }
    75%  { transform: rotateX(-50deg) rotateY(250deg) translateY(45px) scale3d(0.6, 0.6, 0.6); }
    100% { transform: rotateX(-50deg) rotateY(340deg) translateY(20px) scale3d(0.97, 0.97, 0.97); }
}

.mini-face{
    position: absolute;
    box-sizing: border-box;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, var(--rk-accent), var(--rk-accent-hover));
    border: 1px solid color-mix(in srgb, var(--rk-accent-hover) 70%, #ffffff);
}
.mini-front  { transform: translateZ(74px); }
.mini-back   { transform: translateZ(-74px); }
.mini-left   { right: 74px; transform: rotateY(-90deg); }
.mini-right  { left: 74px;  transform: rotateY(90deg); }
.mini-top    { bottom: 74px; transform: rotateX(90deg); }
.mini-bottom { top: 74px;    transform: rotateX(-90deg); }

@media (prefers-reduced-motion: reduce) {
    .mini-cube {
        animation-play-state: paused;
    }
    .loaderXd.is-out .loader-bar {
        transition-duration: .01ms;
    }
}
/* fin loader evolutech */

.blur-active{
    
    left: 0%;
    right: 0%;
    top: 0%;
    width: 150%;
    height: 200vh;
    min-height: 1000px;
    background-color: rgba(41, 41, 41, 0.685);
    opacity: 0.3;
    z-index: 11;
    position: fixed;
  }
.body-blur{
  filter:  blur(5px);
}
 
  
.active {
    animation: slide .4s ease-in-out forwards;
}
.deactive {
    animation: inverse .5s ease-in-out forwards;
}
    @keyframes inverse {
    0% {
    
        opacity: 1;
        transform: translateX(10px);
    }
    60% {
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
       
    }
}  


@keyframes slide {
    0% {
    
        opacity: 0.3; 
        transform: translateX(0px);
    }

    98% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-10px);
        opacity:0.9;
    }
}

.round {
    position:absolute;
    
    
    display: none;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows:  repeat(3, 1fr);
    align-items: center;
    justify-items: center;


    width: 180px;
    height: 180px;    
    
    margin-right: 500px;
   background-color: var(--c-fond);
   opacity: 0.3;
    border-bottom-left-radius: 10px;
    box-shadow: -5px 5px 10px  hsla(0, 0%, 0%, 0.185);
    backdrop-filter: blur(10px);
    z-index: -1;
    opacity: 0;
    overflow: hidden;
    left: -120px;
   
}


.ico1{
    grid-row: 1/2;
}
.ico2{
    grid-row: 2/3;
}
.ico3{
    grid-row: 3/4;
}
.ico4{
    grid-row: 3/4;
    grid-column: 2/3;
}
.ico5{
    grid-row: 3/4;
    grid-column: 3/4;
}

.ico1, .ico2 , .ico3 , .ico4 , .ico5{
    cursor: pointer;
    
}

.menu-mini-1{
    
    width: 30px;
    height: 30px;
}
.menu-mini-2{
    width: 30px;
    height: 30px;
}
.menu-mini-3{
    width: 30px;
    height: 30px;
}
.menu-mini-4{
    width: 30px;
    height: 30px;
}
.menu-mini-5{
    width: 30px;

height: 30px;
}

#home , #services rect , #groupe circle , #groupe path, #portfolio rect , #portfolio polyline , #contact {
    stroke: var(--c-principal);
    stroke-width: 7px;
}

#services rect{
    stroke: var(--c-principal);
    stroke-width: 7px;
}

#groupe circle , #groupe path{
    stroke: var(--c-principal);
    stroke-width: 7px;
}

#portfolio rect , #portfolio polyline{
    stroke: var(--c-principal);
    stroke-width: 7px;
}

#contact {
    stroke: var(--c-principal);
    stroke-width: 7px;
}
 .ico{
    position: relative;
 }
.ico::before{
    content: "";
    transform: translateX(-7px) translateY(-7px);
    position: absolute;
    background-color: var(--c-principal);
    width: 45px;
    height: 45px;
    border-radius: 5px;
    opacity: 0;
    transition: 0.1s ease-in-out ;
    
}

.ico:hover::before {
    opacity: 0.3;
}
.ico.active::before{
    opacity: 0.1;
}

.link a {
    text-decoration: none;
}

.activa{
    filter: blur(7px);
}


/* .text-cyan, button {
    font-family: 'Orbitron', sans-serif!important;
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 40px #0ff;
} */


  
.text-normal , a , a::before{
    font-family: 'League Spartan', sans-serif!important;
}



/*****cards ***/
.scroll-section {
    height: 80vh;  /* hauteur visible de la section, ajuste selon besoin */
    margin-bottom: 10rem; /* pour étirer la page et permettre plus de scroll */
  }
  
  #webgl {
    display: block;
    width: 100%;
    height: 100%;
  }
  .card-fullscreen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.95);
    color: #0a1a26;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
  }
  .card-fullscreen.visible {
    opacity: 1;
    pointer-events: all;
  }
  .card-fullscreen img {
    max-height: 60vh;
    border-radius: 15px;
  }
  .card-fullscreen h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #2ea8e0;
  }
  .card-fullscreen p {
    font-size: 1.2rem;
    max-width: 600px;
    text-align: center;
    margin: 0.5rem 0 30px;
    color: #5b7c8d;
    line-height: 1.6;
  }
  #closeCard {
    padding: 3px 6px;
    font-size: 1rem;
    background: rgba(82, 82, 82, 0.521);
    border: none;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  @media (max-width: 768px) {
    .card-fullscreen h2 { font-size: 1.8rem; }
    .card-fullscreen p { font-size: 1rem; max-width: 90%; }
  }
  #sceneContainer {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: transparent!important;
  }
  #skillTreeCanvas {
    display: block;
    width: 100%;
    height: 100%;
  }
  #infoPanel {
    position: fixed;
    top: 100px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem;
    border-radius: 8px;
    color: #0a1a26;
    max-width: 260px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    font-size: 0.95rem;
    opacity: 0;
  }
  #infoPanel h2 {
    color: #00ffff;
    margin: 0 0 0.5rem;
  }
  .label-link {
    position: absolute;
    cursor: pointer;
    color: #0ff;
    font-family: 'League Spartan', sans-serif;
    pointer-events: auto;
    opacity: 0;
  }
  .label-link:hover {
    color: #6a0dad;
  }


/*** cards 3d **/

/* Container */
.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    padding: 2rem;
    justify-items: center;
  }

  /* Carte de base */

  .card-front,
.card-back {
  /* ... vos autres règles ... */
  clip-path: url(#cardClips);
}
 .cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem;
  justify-items: center;
}

/* Carte de base */
.card-wrapper {
  position: relative;
  width: 244px;
  height: 300px;
  perspective: 600px;
}
.card-front,
.card-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transform-style: preserve-3d;
  transform-origin: center;

  /* Découpage selon votre SVG */
  clip-path: url(#cardClips);
}
.card-front {
  background-size: cover;
  background-position: center;
  z-index: 1;
}
.card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(99, 99, 100);
}
.card-back {
  background: #727272;
  border: 1px solid #ccc;
  opacity: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem;
}
.card-back h3 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-align: center;
}
.card-back p {
  text-align: center;
  margin: 0.5rem 0;
  flex: 1;
}
.card-back .btn {
  display: block;
  margin: 1rem auto 0;
  padding: 0.5rem 1rem;
  border: 2px solid #333;
  border-radius: 1.5rem;
  text-align: center;
  width: fit-content;
}



  
  canvas#webgl {
  touch-action: pan-y!important; /* ✅ autorise le scroll vertical */
  -webkit-user-select: none!important;
  user-select: none!important;
}