/* #region Variables Globales */
:root {
    --main-color: #00143F;
    --second-color: #F0F4F9;
    --tier-color: #EF6D3D;
    --accent-dark :#B74821;
    --size-h1 : clamp(1rem, 1.4vw, 3rem);
    --size-h2: clamp(1rem, 1.3vw, 2.3rem);
    --size-h3: clamp(1.1rem, 0.9vw, 2.4rem);
    --size-p: clamp(0.8rem, 0.8vw, 2.3rem);
    --size-litl: clamp(0.6rem, 0.8vw, 1.4rem);
    /* Variables pour mobile */
    --mobile-header-h: 50px;
    --mobile-panel-h: calc((100svh - var(--mobile-header-h)) / 2);
    --mobile-pad-x: clamp(1px, 1vw, 22px);
    --mobile-gap: clamp(10px, 3vw, 16px);
    --mobile-title: clamp(0.22rem, 4vw, 1.7rem);
    --mobile-text: clamp(0.8rem, 3.2vw, 1rem);
    --mobile-small: clamp(.68rem, 2.3vw, .78rem);
}

@font-face {
    font-family: 'Sora';
    src: url("../fonts/Sora/static/Sora-Regular.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url("../fonts/Manrope/static/Manrope-Regular.ttf");
    font-display: swap;
  }

* {
    box-sizing: border-box!important;
    margin: 0;
    font-family: 'Manrope';
    padding: 0;
    margin: 0;
    letter-spacing: 0.2px;
}

a{
    color: unset;
}
input::selection {
    appearance: menulist-button;
    background-image: none !important;
    background-color: light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora';
    font-weight: 400;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
h1{
  font-size: var(--size-h1);
}
.blocmw {
    height: 45vh;
    display: block;
    width: 100%;
}

.bb {
    background-color: var(--second-color);
    color: var(--main-color);
}

.bw {
    background: var(--main-color);
    /* background: linear-gradient(141deg, var(--main-color) 0%, var(--main-color) 46%, rgba(0,170,255,1) 100%); */
    color: white;
    position: relative;
}
#orientation-lock{
  display: none;
}
.scroll-container,
.scroll-area {
  max-width: auto;
  height: 90vh;
  
}

.scroll-container {
  overflow: auto;
  -webkit-scroll-snap-type: y mandatory;
      -ms-scroll-snap-type: y mandatory;
          scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
  height: 50%;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.large-header {
	position: relative;
	width: 100%;
	background: #333;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	z-index: 1;
}
.main-title {
	font-size: var(--size-h1);
}
/* #endregion Variables Globales */
/* #region Header */
#logoMW{
    height: 100%;
    width: auto;
    overflow: initial;
    margin: 1rem;
}
#divTitle{
  opacity: 0;
  transition: all 1s; /* Transition pour l'opacité */
  width: 13%;
  height: 77%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
#divTitle.divTitleDisplay{
  opacity: 1;
}
#divTitle>div {
  justify-content: space-between;
  width: 60%;
  position: absolute;
  top: 45%;
  left: 30%;
  transition: all 1s;

}
#mwnav{
  width: 34%;
  font-size: var(--size-p);
  display: flex;
  justify-content: space-around;

}

#mwnav {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
}

#mwnav a {
  position: relative;
  padding: 10px;
  text-decoration: none;
  color: var(--second-color);
  transition: color 0.3s;
}

#menumw #mwnav a.active {
  color: var(--tier-color);
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 20px;
  background: var(--tier-color);
  transition: transform 0.3s ease;
}

.titlemenumw{
  position: absolute;
    top: 0;
    height: 100%;
    filter: invert(7%) sepia(27%) saturate(7497%) hue-rotate(213deg) brightness(98%) contrast(104%);
    width: 100%;
    opacity: 0;
  transition: opacity 1s ease;
}
.navbar-light .titlemenumw.light{
  filter: invert(7%) sepia(27%) saturate(7497%) hue-rotate(213deg) brightness(98%) contrast(104%);
  opacity: 1;
}
.navbar-dark .titlemenumw.dark{
  filter: invert(90%) sepia(14%) saturate(134%) hue-rotate(186deg) brightness(106%) contrast(95%);
    opacity: 1;
}
.navbar-light #mwnav a{
  color: var(--main-color);
}
#titleW{
  transform: translateX(22%) translateY(-52%) scale(1.5);
}
#titleM{
  transform: translateX(-143%) translateY(9%) scale(1.5);
}
.mwnav{
  display: flex;
  flex-direction: row;
  transition: background-color 1s, color 1s;
}
.nav-item{
  margin: 0 1rem;
}
.navbar-brand{
  height: 8vh;
  width: auto;  
  padding: 0;
  margin: 0 1rem;

}
.navLogoMW{
  filter: invert(1);  
  opacity: 0;
  transition: opacity 1s ease;
  height: 8vh;
  position: absolute;
}
.navLogoMW.dark{
  filter: invert(90%) sepia(14%) saturate(134%) hue-rotate(186deg) brightness(106%) contrast(95%);
  z-index: 10;
    opacity: 1;

}
.navLogoMW.light{
  filter: invert(7%) sepia(27%) saturate(7497%) hue-rotate(213deg) brightness(98%) contrast(104%);
  z-index: 20;
}
.navbar-dark .navLogoMW.dark{
  opacity: 1;
}
.navbar-light .navLogoMW.light{
  opacity: 1;
}
#menumw {
    min-height: 10vh !important;
    max-height: 10vh !important;
    margin: 0;
    background-color: var(--main-color);
    color: var(--tier-color);
    transition: all 1s;
    padding: 0;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    /* position: relative; */
    /* display: -webkit-box; */
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#menumw.navbar-light{
    background-color: var(--second-color);
    color: var(--main-color)!important;
}
#menumw.navbar-dark .main-title{
  color: var(--second-color);
  line-height: 1.2;
}
#menumw.navbar-light .main-title{
  color: var(--main-color);
  line-height: 1.2;
}
#menumw.navbar-dark .navbar-brand{
  filter: unset;
}
#ancor{
  position: fixed;
  background: var(--main-color);
  width: 2rem;
  height: 2rem;
  bottom: 1rem;
  right: 2rem;
  z-index: 5000;
  border-radius: 50%;
  transition: all 1s ease;
  opacity: 0;
}
#ancor.displayAncor{
  opacity: 1;
}
.navbar-dark #ancor{
  background: var(--second-color);
}
.navbar-dark #ancor svg{
  stroke: var(--main-color);
}
#ancor svg{
    width: 2rem;
    height: 2rem;
    transform: rotate(180deg);
    stroke: var(--second-color);
}
#ancor:hover svg{
  stroke-width: 3px;
}

/* #endregion Header */
/* #region Hero */
/* Logo animation */
.blocImg{
    display: flex;
    align-items: center;
    position: absolute;
    top: 15%;
    width: 25%;
    left: 0;
    height: 50%;
    animation: logoMW 3s forwards;
    animation-delay: 1s;
    justify-content: center;
}
@keyframes logoMW {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); left: 49%; }
  }   
 @keyframes moveRightM {
    0% { transform: translateX(0); }
    100% { transform: translateX(-59%) translateY(20%); }
  }
@keyframes moveRightW {
    0% { transform: translateX(0); }
    100% { transform: translateX(44%) translateY(-21%); }
  }
@keyframes moveLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-0%); opacity: 0; }
}
@keyframes opacity {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#lettreM {
animation: moveRightM 2s forwards;
animation-delay: 2s;
}
#lettreW {
animation: moveRightW 2s forwards;
animation-delay: 2s;
}
.otrL {
animation: moveLeft 3s forwards;
animation-delay: 1s;
}
.cta-ghost {
}
.cta-ghost:hover {
  background-color: #0a1c3d;
  color: white;
  cursor: pointer;
  transform: translateX(-50%) translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  text-decoration: none;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
/* #endregion Hero */
#section1 {
  position: relative;
}


.flex{
    display: flex;
}
.fullW{
    width: 100%;
}
.fullH{
    height: 100%;
}
.centerH{
    align-items:center;
}
.centerV{
    justify-content: center;
}
#section1{
    position: relative;
    background: var(--second-color);
    color: var(--main-color);
}
#section1 .main-title{
    text-align: center;
    opacity: 0;
    animation: opacity 1s forwards;
    animation-delay: 3s;
    font-size: 3vw;
    margin-top: 1.3rem;
}
.blocImg .flex{
    height: 100%;
    margin: 1rem;
    position: absolute;
    align-items: center;
    transform: translateX(28%);
    width: 59%;
    justify-content: space-between;
}
.divSent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
}
#sentence{
    font-size: var(--size-h1);

}
#section2 {
  background-color: var(--main-color);
  color: var(--second-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem clamp(2rem, 4vw, 5rem);
  overflow: hidden;
}

#section2 canvas.canvasbw {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Wrapper global pour contenir l'image + le texte */
#section2 .content-wrapper {
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* centré verticalement dans le bloc */
  justify-content: space-between;
  gap: clamp(2rem, 4vw, 6rem);
  width: clamp(600px, 100%, 2000px);
  margin-inline: auto;
  height: 100%;
  max-width: 1600px;
}

/* Bloc image */
#container-mwa {
  flex: 1 1 clamp(250px, 35%, 400px);
  display: flex;
  justify-content: center;
  align-items: center;
}

#container-mwa img#moi {
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.2)) invert(1);
  width: clamp(13vw, 470px, 16vw);

}

/* Bloc texte */
#section2 section {
  flex: 1 1 clamp(300px, 55%, 1300px);
  display: flex;
  flex-direction: column;
  align-self: center; 
  height: 100%;
  justify-content: center;
}
@media (min-width: 1400px) {
  #section2 section {
  gap: 1.5rem;
}
}
/* Titre principal */
#section2 h2 {
  font-size: var(--size-h2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#section4 h2::before,
#section3 .wheel-sentence::before,
#section2 h2::before,
.contact-form-wrapper h2::before {
  content: "";
  width: 2rem;
  height: 3px;
  background-color: var(--tier-color);
  display: inline-block;
  font-size: var(--size-p);
  flex-shrink: 0;
}
.gap{
  margin-left: 0.4rem;
}
/* Sous-titre "Bienvenue" */
#section2 p:first-of-type {
  /* text-transform: uppercase; */
  font-weight: 500;
  color: var(--tier-color);
  margin-top: 0.5rem;
  font-size: var(--size-p)
}

/* Paragraphes principaux */
#section2 p:nth-of-type(n+2) {
  border-left: 3px solid var(--accent-dark);
  padding-left: 1rem;
  line-height: 1.75;
  font-size: var(--size-p);
  opacity: 0.95;
  margin-bottom: 0.5rem;
}
.section2-mobile {
  display: none;
}
.wrapper {
    margin: 0;
    padding: 0;
    margin-top: 10vh;
}
#section3-container {
    display: flex;
    overflow: hidden;
    align-content: center;
    gap: 2.75rem;
    flex-direction: row;
    width: clamp(600px, 100%, 1600px);
    height: 90%;
    justify-content: space-between;
}
#section3 #wheelContainer{
	display: flex;
	width: 44%;
	gap: 2rem;
	align-items: flex-start;
}
#section3 .divSec3{
    height: 90%;
    display: flex;
    position: relative;
    margin: auto 0 0;
    flex: 0 0 50%;
    justify-content: space-around;
    align-items: flex-start;
    gap: 1vw;
    /* width: 73%; */
}
/* SECTION 3 - rééquilibrage desktop */
#section3-container {
  position: relative;
  align-items: stretch;
  gap: 1.5rem;
}

/* Le bloc texte peut déborder au-dessus des cartes */
#section3 .wheel-wrap {
  position: relative;
  z-index: 5;
  /* flex: 0 0 43%; */
  overflow: visible;
  gap: 2rem;
}

/* Titre sur une seule ligne */
#section3 .wheel-sentence,
#section3 #wheelWord,
#section3 #wheelWord .inner {
  white-space: nowrap;
  overflow: visible;
}

/* On réduit un peu le titre si besoin */
#section3 .wheel-sentence,
#section3 #wheelWord {
  /* font-size: clamp(1.1rem, 1.25vw, 2.2rem); */
}

/* Les cartes prennent la place restante */
#section3 .divSec3 {
  flex: 1 1 auto;
  /* height: 100%; */
  /* align-items: flex-end; */
  /* padding-bottom: 4vh; */
  gap: clamp(1rem, 1.5vw, 2rem);
  overflow: visible;
}

/* Cartes un peu plus compactes pour respirer */
#section3 .cardPerf,
#section3 .cardGlitch,
#section3 .customCard {
  width: 30%;
  height: clamp(125px, 14vh, 180px);
}
/* SECTION 3 : fond damier gris */
#section3{
  position:relative;
  background:#f2f5f9;
}

#section3::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  --cell: 12px;
  --c1:#f2f5f9;
  --c2:#e9edf2;
  background-image:
    linear-gradient( 45deg, var(--c2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--c2) 25%, transparent 25%),
    linear-gradient( 45deg, transparent 75%, var(--c2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--c2) 75%);
  background-size: var(--cell) var(--cell);
  background-position: 
  0 0, 
  0 calc(var(--cell) / 2),
  calc(var(--cell) / 2) calc(-1 * var(--cell) / 2),
  calc(-1 * var(--cell) / 2) 0;
  mask-image:linear-gradient(to right,transparent 0 40%, black 60%);
}

#section3 .cardPerf{
  width: 50%;
  height: clamp(140px, 16vh, 200px);
  background-color: var(--main-color);
  color: var(--tier-color);
  align-content: center;
  text-align: center;
  border-radius: 14%;
  margin: 0;
  border: 1px var(--main-color) solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
#section3 .cardGlitch{
  width: 50%;
  height: clamp(140px, 16vh, 200px);
  background-color: var(--main-color);
  color: var(--tier-color);
  align-content: center;
  text-align: center;
  border-radius: 14%;
  margin: 0;
  transform: translate(0%, 0%);
  border: 1px var(--main-color) solid;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cardSec{
  backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  will-change: width, height, transform;
  overflow: hidden;
  box-shadow: 12px 13px 5px 2px rgba(0, 20, 63, 0.08);
}
.cardSec:hover {
    box-shadow: unset; 
}
#section3 .cardSec h3{
  text-transform: uppercase;
  color: var(--tier-color);
  z-index: 11;
  top: 75%;
  justify-content: center;
  align-items: center;
  font-size: var(--size-h3);
}
#glitchMorph {
  transition: filter 0.4s;
  filter: invert(49%) sepia(81%) saturate(1461%) hue-rotate(337deg) brightness(99%) contrast(90%);
  vertical-align: middle;
  width: 0.8ch;
}
.wheel-wrap {
  /* flex: 0 0 38%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 320px;
}
.wheel-sentence {
  font-size: var(--size-h2);
  font-weight: 600;
  color: var(--main-color);
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: visible;
}
#wheelWord {
  color: var(--tier-color);
  position: relative;
  display: inline-block;
  overflow: hidden;
  font-size: var(--size-h2);
  font-weight: 600;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: var(--tier-color);
}
#wheelWord .inner {
  display: inline-block;
  transform-origin: center;
}



#wheelWord .inner {
  display: inline-block;
  position: relative;
  font-weight: bold;
}
.wheel-desc {
  font-size: var(--size-p);
  line-height: 1.4;
  color: color-mix(in srgb,var(--main-color) 80%, transparent);
  min-height: 25vh; /* ← ajusté selon ta plus grande phrase */
  overflow: hidden;
  margin-bottom: 0;
  width: 90%;
}
#wheelDots {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.7em;
    margin-top: 6vh;
}
.wheel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
  transition: background 0.3s;
}
.wheel-dot.active {
  background: var(--main-color, #f34213);
}


/* === STRUCTURE PRINCIPALE DE LA PASTILLE === */
#section3 .customCard {
  width: 57%;
  height: clamp(140px, 16vh, 200px);
  margin: 0;
  color: var(--main-color);
  text-align: center;
  background-color: unset;
  border-radius: 14%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translate(0%, 0%);
  transition: height 0.5s ease 0.5s, transform 0.5s ease, box-shadow 0.5s ease 0.5s, border-radius 0.5s ease 0.5s;
  z-index: 10;
  align-items: center;
}
#section3 .customCard:hover #customSvg, .cardPerf:hover #jaug, .cardGlitch:hover #gear{
  filter: invert(0);
  top: 39%;
  transition: all 0.5s ease, top 0.5s ease, width 0.5s ease, height 0.5s ease;
}
#section3 .customCard:hover #customSvg{
  transition: all 0.5s ease, top 0.5s ease 0.5s, width 0.5s ease 0.5s, height 0.5s ease 0.5s, filter 0.5s ease;
}
#section3 .cardGlitch:hover #gear{
  height: 29%;
}
.cardSec svg{
  z-index: 15;
}
#customSvg .cls-1{
  stroke-width: 18px;
  stroke-linecap: round;

}
#customSvg .cls-2{
  stroke-linejoin: round;
}

#section3 .cardPerf:hover,
#section3 .customCard:hover,
#section3 .cardGlitch:hover{
  height: 95%;
  background: transparent;
  border-radius: 0;
}

.cardSec h3 {
  position: absolute;
  z-index: 10;
  transition: transform 0.6s ease, color 0.4s ease, top 0.5s ease;
}
.customCard h3{
  transition: transform 0.6s ease, color 0.4s ease, top 0.5s ease 0.5s;

}
#section3 .cardSec:hover h3 {
  transform: scale(1.1);
  color: var(--tier-color);
  top: 10%;
  transition: transform 0.5s ease, color 0.4s ease, top 0.5s ease;
  overflow: unset;
}
#section3 .customCard:hover h3 {
  transition: transform 0.5s ease 0.5s, color 0.4s ease, top 0.5s ease 0.5s;
}

/* === FIGCAPTION : TEXTE AU SURVOL === */
.cardSec figcaption{
  position: absolute;
  z-index: 0;
  max-width: 95%;
  margin: 0 auto;
  margin-top: 0rem;
  padding: 0.4em 1em;
  font-size: var(--size-litl);
  color: var(--main-color);
  background-color: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(15px) scale(0.985); 
  filter: blur(6px);                        
  transition: 
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    filter 0.4s ease,
    margin-top 0.5s ease;
  transition-delay: 0s;
}

.cardSec:hover figcaption {
  backdrop-filter: blur(4px);
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  margin-top: 12rem;
}

.customCard:hover figcaption {
  transition-delay: 1.4s;
}
.gear-piece {
  /* transform-box: fill-box;
  transform-origin: center; */
}


/* === BORDS ANIMÉS (BOX PARTS) === */
.box-part {
  position: absolute;
  width: 51%;
  height: 51%;
  background-color: var(--main-color);
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 0 0 transparent;
  transition: all 0.5s ease;
}

/* Survol : effet glow */
.customCard:hover .box-part {
  /* box-shadow: 0 0 8px var(--main-color); */
}

/* Animation séquentielle sur les coins */
.top-left {
  top: 0;
  left: 0;
  border-top-left-radius: 14%;
  transition: width 0.5s 0.5s, height 0.5s;
}

.top-right {
  top: 0;
  right: 0;
  border-top-right-radius: 14%;
  transition: height 0.5s 0.5s, width 0.5s;
}

.bottom-left {
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 14%;
  transition: height 0.5s 0.5s, width 0.5s;
}

.bottom-right {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 14%;
  transition: width 0.5s 0.5s, height 0.5s;
}

.customCard:hover .top-right {
  height: 2px;
  width: 100%;
  transition: height 1s, width 1s 1s;
}

.customCard:hover .top-left {
  width: 2px;
  height: 100%;
  transition: width 1s, height 1s 1s;
}

.customCard:hover .bottom-right {
  width: 2px;
  height: 100%;
  transition: width 1s, height 1s 1s;
}

.customCard:hover .bottom-left {
  height: 2px;
  width: 100%;
  transition: height 1s, width 1s 1s;
}

/* Divers */
.customCard::-webkit-scrollbar {
  display: none;
}

#section3 .cardWrench {
  background: unset;
  position: relative;
}
#section3 .cardPerf{
  transition: all 0.2s ease;
}
#section3 .cardGlitch{
  transition: all 0.5s ease;
}
/* figcaption visible au hover */
.cardGlitch:hover .glitchCaption {
  opacity: 1;
  transition: all 0.5s ease;
  transition-delay: 0.3s;
}
/* .glitchCaption{
  position: absolute;
  top: 0;
  opacity: 0;
} */
/* Style de base du texte */
.glitchText {
  display: flex;

  font-family: 'Sora', sans-serif;
  font-size: 2rem;
}
.glitchText {
  overflow: hidden;
}

#glitchMorph, .glitchText {
  will-change: transform;
}
.glitch-missing {
  display: inline-block;
  position: relative;
  width: 1em;
  height: 1em;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  vertical-align: middle;
  color: #ff0040;
  text-align: center;
  overflow: visible;
}

.bar {
  position: absolute;
  background: #ff0040;
  border-radius: 1px;
  display: block;
}

.bar-vert {
  left: 0;
  top: 0;
  width: 18%;
  height: 100%;
}

.bar-horiz {
  left: 0;
  height: 18%;
  width: 100%;
}

.bar-top {
  top: 0;
}
.bar-mid {
  top: 41%;
}
.bar-bot {
  bottom: 0;
} 
.cardPerf{
    position: relative;
    transition: width 0.5s ease 0.5s;
}
#jaug,
#gear,
#customSvg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  filter: invert(1);
  opacity: 0.2;
  transition: all 0.5s ease, top 0.5s ease 0.2s, width 0.5s ease, height 0.5s ease, filter 0.5s ease;
  width: 14vh;
  height: 8vh;
}
#jaug{
  height: 8vh;
  transform: translate(-50%, -70%);
}
.cardPerf:hover #jaug{
  height: 12vh;
}
#customSvg{
  transition: all 0.5s ease, top 0.5s ease 0.5s, width 0.5s ease 0.5s, height 0.5s ease 0.5s, filter 0.5s ease 0.75s;
}
#needle{
  stroke: rgb(0, 0, 0); 
    /* transform-origin: 250px 200px; */
 /* transform-box: fill-box; */
}

/* #endregion Section 3 */
/* #region Section 4 */
#section4 {
  position: relative;
  justify-content: center;
  flex-direction: column;
  background-repeat: repeat;
  background-image: url("../img/deco/section4-bg.png");
  overflow: hidden;
}

#section4 .section4-projects {
  position: relative;
  width: 100%;
  height: 45vh;
  max-width: 1600px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 18% 58% 24%;
  column-gap: 4vw;
  align-items: center;
  justify-content: center;
}

/* Titre à droite, comme avant */
#section4 .carousel-title {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  top: auto;
  margin: 0;
  min-height: 2em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--second-color);
  font-size: var(--size-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#section4 .carousel-title::before {
  content: "";
  width: 2rem;
  height: 3px;
  background-color: var(--tier-color);
  display: inline-block;
  flex: 0 0 auto;
}

/* Zone gauche : grande preview */
#section4 .project-preview {
  grid-column: 1;
  grid-row: 1 / 4;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* La grande image */
#section4 .displayCarousel {
  width: 26vw;
  height: 31vh;
  margin: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: white;
  border: 1px solid #DCE2E8;
  border-radius: 14px;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow:
    0 12px 28px rgba(255, 255, 255, 0.55),
    0 2px 8px rgba(255, 255, 255, 0.3);
}

#section4 .displayCarousel:hover {
  transform: scale(1.015);
  box-shadow:
    0 0 0 rgba(0, 0, 0, 0.55),
    0 0 0 rgba(0, 0, 0, 0.3);
}

/* Zone droite : miniatures */
#section4 .carousel {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

#section4 .carousel-images-wrapper {
  width: 90%;
  overflow-x: hidden;
  overflow-y: hidden;
}

#section4 .carousel-images {
  display: flex;
  height: 23vh;
  align-items: center;
}

#section4 .carousel-image {
  width: 12vw;
  margin: 0 10px;
  object-fit: contain;
  opacity: 0.5;
  cursor: pointer;
  border-radius: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

#section4 .carousel-image.active {
  opacity: 1;
  transform: scale(1.05);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/*
  Les boutons sont dans .project-preview dans le HTML,
  mais visuellement on les replace sous le carousel de droite.
*/
#section4 .carousel-arrow {
  position: absolute;
  z-index: 5;
  bottom: 8%;
  width: 45px;
  height: 45px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(240, 244, 249, 0.95);
  stroke: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#section4 .carousel-arrow-left {
  left: calc(50% + 2vw);
}

#section4 .carousel-arrow-right {
  right: 0;
}

#section4 .carousel-arrow svg {
  display: block;
  width: 38px;
  height: 38px;
}

#section4 .carousel-arrow svg path {
  fill: none;
  stroke: var(--main-color);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#section4 .carousel-arrow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(239, 109, 61, 1);
}
#section4 .section4-projects {
  position: relative;
}

/* Desktop : on retire le contexte de positionnement du bloc gauche */
#section4 .project-preview {
  position: static;
}

/* Les flèches deviennent positionnées par rapport à .section4-projects */
#section4 .carousel-arrow {
  position: absolute;
  bottom: 8%;
  z-index: 5;
}

/* Colonne droite : début de la zone carousel */
#section4 .carousel-arrow-left {
  left: calc(50% + 4vw);
}

/* Colonne droite : fin de la zone carousel */
#section4 .carousel-arrow-right {
  right: 0;
}
/* #endregion Section 4 */
/* #region Section 5 */
  #section5{
    overflow: hidden;
    position: relative;
  }
  #section5 img{
    height: auto;
    width: clamp(72px, 44%, 200px);
    margin: auto 1rem;
  }
  .canvaslogo{
      width: 100%;
      height: 45vh;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
  }

  .logo-container{
    display: flex;
    width: 55%;
    flex-wrap: wrap;
    align-content: space-around;
    height: 70%;
    flex-direction: row;
    justify-content: space-evenly;
  }
  .logo-column{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 17%;
  }
  .skill-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    font-family: 'Sora', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-block: 1rem;
    opacity: 0.15;
  }

  .scroll-line {
    overflow: hidden;
    white-space: nowrap;
    font-size: clamp(1.3rem, 1.5vw, 4.2rem);
    opacity: 0.4;
  }
  @keyframes scroll-right {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-75%); }
  }
  
  .scroll-line.reverse .scroll-content {
    animation-name: scroll-right;
    animation-direction: reverse;
    transform: translateX(-125%);
  }  
  .scroll-content {
      display: inline-block;
      padding-right: 8rem;
      animation: scroll-left linear infinite;
      animation-duration: 70s;
      width: 100%;
      text-align-last: justify;
      letter-spacing: 8px;
      text-transform: uppercase;
  }



  @keyframes scroll-left {
    0% { transform: translateX(-55%); }
    100% { transform: translateX(-125%); }
  }
/* #endregion Section 5 */



  /* Conteneur du carrousel */
  .wheel {
    display: flex;
    justify-content: center;
    width: 70%;
    /* Assure que le carrousel est centré horizontalement */
  }
  
  /* Slide actif */
  .activeWheel {
    /* transform: scale(1.2); */
    font-size: 1.2rem;
    transform-origin: left; /* Ajuste le point d'origine de la transformation */
    z-index: 1;
    transition: transform 0.3s ease;
  }
  #titleWheel{
    width: 100%;
    display: flex;
    height: 50%;
    align-items: center;
  }
  #startWheel{
    padding-top: 0.8rem;
    margin-right: 0.5rem;
    font-size: 1.2rem;
  }
  /* Tous les slides */
  .slick-slide {
    transition: all 0.3s ease;
    padding: 1.35rem 0;
    /* Alignement du texte à l'intérieur des slides, si nécessaire */
    text-align: left; /* Ou 'center', selon le besoin */
    display: flex; /* Utilise flexbox pour aligner le contenu */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
  }
  #container-wheel{
      display: flex;
      width: 43%;
      font-size: 0.8rem;
      flex-wrap: wrap;
      height: 80%;
  }

.logo-text {
  display: none;
  text-align: center;
}
.logo-line{
  display: flex;
  width: 50%;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.logo-item.active .logo-text {
  display: block;
}
.canvasbw{
  width: 100%;
  height: 45vh;
  position: absolute;
  z-index: 0;
}
.logo-item {
  opacity: 1;
  transition: opacity 0.1s ease-out, transform 2s ease-out;
  display: flex;
  justify-content: center;
  background-color: var(--main-color);
  align-items: stretch;
  border-radius: 13%;
  aspect-ratio: 1.6 / 1;
  position: relative;
}
.logo-item figcaption {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: var(--tier-color);
  font-family: 'Sora', sans-serif;
  text-align: center;
  z-index: 2;
  border-radius: 18%;
}

.logo-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.logo-item:hover img {
  transform: scale(1.1);
}

.logo-item:hover figcaption {
  opacity: 1;
}
.logo-column:nth-child(1) {
  transform: translateX(-1000%); /* Commence hors de l'écran à gauche */
}
.logo-column:nth-child(2) {
  transform: translateX(-1000%); /* Commence hors de l'écran à droite */
}

.logo-column:nth-child(3) {
  transform: translateX(800%); /* Commence hors de l'écran à gauche */
}

.logo-column:nth-child(4) {
  transform: translateX(800%); /* Commence hors de l'écran à droite */
}
.logo-item {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--main-color);
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.logo-item img {
  width: 55%;
  height: auto;
  transition: transform 0.4s ease;
  z-index: 1;
}

.logo-item figcaption {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  color: var(--tier-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  z-index: 3;
}
.logo-item figcaption strong {
  font-size: clamp(1.2rem, 1.2vw, 2.2rem);
  font-weight: 600;
  color: var(--tier-color);
  font-family: 'Sora', sans-serif;
}

.logo-item figcaption small {
  font-size: clamp(0.9rem, 0.85vw, 1.6rem);
  font-weight: 400;
  color: var(--second-color);
  font-family: 'Manrope', sans-serif;
}
.logo-item:hover figcaption {
  opacity: 1;
}

.logo-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 40%,
    rgba(255,255,255,040) 50%,
    transparent 60%
  );
  transform: skewX(-20deg);
  z-index: 2;
}

.logo-item:hover::before {
  animation: scan 1s forwards;
}


@keyframes scan {
  to {
    left: 100%;
  }
}
/* Animation pour les colonnes */
.logo-column.animate-left {
  transition: transform 2s ease-in-out;
  transform: translateX(0); /* Revenir à la position initiale */
}

.logo-column.animate-right {
  transition: transform 2s ease-in-out;
  transform: translateX(0); /* Revenir à la position initiale */
}
img[alt="Git"], img[alt="PHP"]{
  filter: invert(1);
}
img[alt="MySQL"] {
  transform: scale(1.2);
}
.mc-item__caption{
  border-radius: 10%;
  text-align: center;
  align-content: center;
}
#canvaeffect{
  width: 100%;
  height: 45vh;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}
/* #endregion Section 5 */
/* #region Section 6 */
#section6 {
  position: relative;
  width: 100%;
  height: 45vh;
  background-color: var(--main-color);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.canvasbw {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.contact-form-wrapper h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  margin-bottom: 0.3em;
  color: var(--tier-color);
  animation: fadeIn 0.6s ease-out;
}

.contact-form-wrapper .subtitle {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1rem, 1.2vw, 1.5rem);
  margin-bottom: 2rem;
  color: var(--second-color);
  opacity: 0.8;
  animation: fadeIn 0.8s ease-out;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-dark);
}

.btn-submit {
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  background-color: var(--tier-color);
  color: white;
  font-family: 'Sora', sans-serif;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-submit:hover {
  background-color: var(--accent-dark);
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#section6 {
  position: relative;
  height: 45vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvasbw {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact-wrapper{
  width: 1600px;
  display: flex;
  gap: 0vw;
}
.contact-form-wrapper {
  z-index: 1;
  color: var(--second-color);
  text-align: center;
  flex: 40%;
  padding: 0 2rem;
  z-index: 1;
  text-align: center;
  color: var(--second-color);
  font-family: 'Manrope', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  min-height: 80%;
}
#contact-card{
    flex: 40%;
    font-size: var(--size-p);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-form-wrapper h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.5rem, 1.6vw, 3rem);
  color: var(--second-color);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  place-self: center;
  text-transform: uppercase;
}

.contact-form-wrapper .subtitle {
  font-size: clamp(1.05rem, 1vw, 2.3rem);
  margin-bottom: 2rem;
  
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

form .rowdouble {
  display: flex;
  justify-content: space-between;
}




form textarea {
  width: 100%;
}
form textarea {
  resize: none;
  
  flex: 1;
}

form input:focus,
form textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--tier-color);
}

form button {
  white-space: nowrap;
  padding: 0.75rem 1.5rem;
  background-color: var(--tier-color);
  color: white;
  border: none;
  border-radius: 0.6rem;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  align-self: flex-end;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
form button:hover {
  background-color: var(--accent-dark);
}


form input:focus,
form textarea:focus {
  border-color: var(--tier-color); /* orange */
  box-shadow: 0 0 0 1.5px var(--tier-color);
}


form button[type="submit"] {
  font-size: 1.05rem;
  padding: 0.9rem 1.8rem;
  border-radius: 0.5rem;
}
#section6 form {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-row {
  display: flex;
  gap: 2rem;
}

.form-row > * {
  flex: 1;
}
form input,
form textarea {
  background-color: rgb(5, 15, 40);
  border: 1px solid var(--second-color); /* gris clair */
  border-radius: 0.6rem;
  color: white;
  padding: 1rem;
}
form input:focus,
form textarea:focus {
  box-shadow: 0 0 0 1px var(--tier-color);
}
form button[type="submit"] {
  font-size: 1.1rem;
  padding: 1rem 2rem;
}
form button:hover {
  transform: scale(1.05);
  background-color: var(--accent-dark);
}
#section6 .textarea-glow {
  min-height: 4.8rem;
  height: 4.8rem;
}
#section6 form input,
#section6 form textarea {
  display: block;
}

.form-success,
.form-error {
  width: 79%;
  margin: 0 auto 1rem;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.35;
  text-align: center;
  font-weight: 600;
}

.form-success {
  color: #d8ffe2;
  background: rgba(30, 132, 73, 0.22);
  border: 1px solid rgba(80, 220, 130, 0.45);
}

.form-error {
  color: #ffe1dc;
  background: rgba(183, 72, 33, 0.22);
  border: 1px solid rgba(239, 109, 61, 0.55);
}

.hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
#section6 form textarea {
  height: 100%;
  min-height: 100%;
}
/* #endregion Section 6 */
.fa-wrench{
  font-size: 9rem;
  color: var(--main-color);
  right: 0;
  top: 0;
  position: absolute;
  transform: translateY(3%);
  margin: auto;
}
.backWrench{
  transition: width 2s ease 1s, height 1s ease 1s;
  width: 100%;
  height: 100%;
  background-color: var(--main-color);
  color: var(--tier-color);
  align-content: center;
  text-align: center;
  margin-left: auto;
  border-radius: 14%;
}
.cardWrench:hover .backWrench{
  width: 10px;
  height: 0;
  color: var(--main-color);
}

.element-svg-glow {
  color: #fff;
  font-family: sans-serif;
  width: 48%;
  z-index: 0;
  overflow: visible;
  background: var(--main-color, #222);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--main-color, #222);
  border-radius: 0.6rem;
}
.element-svg-glow input {
  width: 100%; 
  height: auto;
  color: white;
  z-index: 2;
  font-size: 1rem;
}
.glow-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 3; 
  overflow: visible!important;
  width: 100%;
  height: 100%;
}
#glow-dot {
  transition: filter 0.2s;
}
.textarea-glow {
  width: 100%;
}
textarea {
  font-size: 1rem;
}

textarea::placeholder {
  font-size: 1rem;
}
@media (max-width : 1024px){
  /* === ORIENTATION LOCK === */
  #orientation-lock {
    display: none;
  }

  @media (max-width: 1024px) and (orientation: landscape) {
      #orientation-lock {
          position: fixed;
          inset: 0;
          z-index: 999999;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 1.5rem;
          padding: 2rem;
          background: var(--main-color);
          color: var(--second-color);
          text-align: center;
      }

      #orientation-lock p {
          font-family: 'Sora', monospace;
          font-size: clamp(1.4rem, 4vw, 2.4rem);
          line-height: 1.25;
          max-width: 80vw;
      }

      .phone-rotate-icon {
          width: 5rem;
          height: 5rem;
          border: 2px solid var(--tier-color);
          border-radius: 1.2rem;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--tier-color);
          font-size: 3rem;
          animation: rotatePhoneHint 1.4s ease-in-out infinite;
      }

      body {
          overflow: hidden;
      }
  }

  @keyframes rotatePhoneHint {
      0%, 100% {
          transform: rotate(90deg);
      }
      50% {
          transform: rotate(0deg);
      }
  }
  /* === FIN ORIENTATION LOCK === */
  /* #region Menu Mobile */

  html, body {
    height: 100%;
    overflow: hidden;
    background: var(--main-color);
  }
  .wrapper {
    margin-top: var(--mobile-header-h);
    height: calc(100svh - var(--mobile-header-h));
    overflow: hidden;
    background: var(--main-color);
  }
  #menumw {
    height: var(--mobile-header-h);
    min-height: var(--mobile-header-h)!important;
    max-height: var(--mobile-header-h)!important;
    padding: 0 1vw;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--main-color);
    justify-content: space-between;
  }
  #mwnav a.active {
      color: var(--tier-color);
      background: rgba(239, 109, 61, .1);
      border-color: rgba(239, 109, 61, .45);
  }
  .navLogoMW {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    inset: 0;
  }
  .navbar-brand {
      width: 37px;
      /* min-width: 90px; */
      height: 37px;
      margin: 5px 0;
      padding: 0px;
      position: relative;
  }
  #mwnav {
    flex: 1 1 auto;
    width: 82%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    padding: .15rem 0;
  }
  #mwnav a {
      flex: 0 0 auto;
      min-height: 18px;
      padding: 0px 2px;
      border-radius: 10px;
      font-size: 2.6vw;
      line-height: 2;
      text-decoration: none;
      color: var(--second-color);
      background: rgba(240, 244, 249, .08);
      /* border: 1px solid rgba(240, 244, 249, .14); */
  }
  #divTitle{
    display: none;
  }
  /* #endregion Menu Mobile */
  /* #region toutes sections Mobile */
  .scroll-area, .blocmw{
      height: var(--mobile-panel-h);
      min-height: var(--mobile-panel-h);
      max-height: var(--mobile-panel-h);
      width: 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      overflow: hidden;
  }
      .scroll-container {
      height: 100%;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-padding-top: 0;
      background: var(--main-color);
  }
  /* #endregion toutes sections Mobile */
  /* #region Section 1 Mobile */
  /* === SECTION 1 ===  */
    #section1 #logoMW {
      width: 34vw;
      height: auto ;
      margin: 0;
      display: block;
      filter: drop-shadow(0 8px 18px rgba(0, 20, 63, .12));
  }
  #section1 .main-title, #section1 a{
    display: none;
  }
      .blocImg {
      position: relative;
      inset: auto;
      left: auto;
      top: auto;
      width: auto;
      height: auto;
      margin: 0 ;
      transform: none;
      animation: none;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #section1{
      padding: 0 var(--mobile-pad-x);
      background: var(--second-color);
      display: flex;
      align-items: center;
      justify-content: center;
  }
      #section1 .fullW.fullH {
      margin-top: -18%;
      position: relative;
      z-index: 2;
      height: 62%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: .45rem;
  }
  #section1 #logoMW {
      width: 34vw;
      height: auto;
      margin: 0;
      display: block;
      filter: drop-shadow(0 8px 18px rgba(0, 20, 63, .12));
  }
      #section1 .otrL, #section1 #lettreM, #section1 #lettreW {
      animation: none;
      transform: none;
      opacity: 1;
  }
  
  #canvasSecOne {
      position: absolute;
      inset: 0;
      pointer-events: none;
      width: 100%;
      height: 100%;
  }
  .divSent {
    width: 100%;
    position: relative;
    inset: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .divSent::before {
    content: "MIROWEB";
    display: block;
    font-family: 'Sora', monospace;
    font-size: 11vw;
    line-height: .95;
    letter-spacing: .06em;
    color: var(--main-color);
    font-weight: 700;
  }
  #sentence {
    margin-top: 2rem;
    position: absolute;
    top: calc(100% + .2rem);
    width: 100%;
    min-height: 1.35em;
    font-family: 'Sora', monospace;
    font-size: 5vw;
    line-height: 1.15;
    text-align: center;
    color: var(--main-color);
    font-weight: 600;
  }
  /* #endregion Section 1 Mobile */
  /* #region Section 2 Mobile */
  #section2 {
    padding: 0 var(--mobile-pad-x);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}
  
  #section2 .section2-desktop {
    display: none;
  }

  #section2 .section2-mobile {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 93%;
    padding: 1rem 0.3rem 1.4rem;
  }

  #section2 .section2-mobile-head {
    display: grid;
    grid-template-columns: 34% 1fr;
    gap: 0.1rem;
    align-items: center;
  }

  #section2 .section2-mobile-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .section2-mobile-img img {
    width: 28vw;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, .2)) invert(1);
  }

  #section2 .section2-mobile-title h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    font-size: var(--mobile-title);
    line-height: 1.08;
    letter-spacing: -0.04em;
  }

  #section2 .section2-mobile-title h2::before {
    content: "";
    width: 1.8rem;
    /* min-width: 1.35rem; */
    height: 2px;
    background-color: var(--tier-color);
    display: inline-block;
  }
  #section2 .section2-mobile h3{
    text-transform: uppercase;
    font-weight: 500;
    color: var(--tier-color);
    margin-top: 1rem;
    font-size: 3.4vw;
    margin-left: 10%;
  }
  #section2 .section2-mobile-title p {
    margin: 0.65rem 0 0;
    color: var(--tier-color);
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }

  #section2 .section2-mobile-texts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    overflow: auto;
  }

  #section2 .section2-mobile-texts p {
    margin: 0;
    padding-left: 0.5rem;
    border-left: 1px solid var(--tier-color);
    font-size: var(--mobile-text);
    line-height: 1.35;
    color: var(--second-color);
  }

  #section2 canvas.canvasbw {
    opacity: 0.35;
  }
  /* #endregion Section 2 Mobile */
  /* #region Section 3 Mobile */
  #section3-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--mobile-gap);
    padding: var(--mobile-pad-y) var(--mobile-pad-x);
    overflow: hidden;
    width: 99%;
    height: 100%;
  }

  #section3::before {
    mask-image: none;
    opacity: 0.55;
    z-index: -2;
  }

  #section3 .wheel-wrap {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    justify-content: flex-start;
    /* min-height: 61%; */
    /* padding: 0.35rem; */
    gap: 0vh;
    margin-left: -3vw;
  }

  #section3 .wheel-sentence {
    width: 100%;
    display: block;
    font-size: var(--mobile-title);
    line-height: 1.08;
    margin: 0;
    display: flex;
    /* white-space: unset; */
    /* overflow: unset; */
  }

  #section3 .wheel-sentence::before {
    display: block;
    width: 1.4rem;
    height: 3px;
    /* margin-bottom: 0.55rem; */
    content: "";
    width: 1rem;
    /* min-width: 1.35rem; */
    height: 2px;
    background-color: var(--tier-color);
    display: inline-block;
  }

  #wheelWord {
    display: block;
    font-size: var(--mobile-title);
    line-height: 1.08;
    margin-top: 0.1rem;
    width: fit-content;
  }

  .wheel-desc {
    width: 100%;
    min-height: 50%;
    margin-top: 0.65rem;
    font-size: var(--mobile-text);
    line-height: 1.3;
  }

  #wheelDots {
    order: 2;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
  }

  .wheel-dot {
    /* width: 30px; */
    /* height: 30px; */
  }
#section3 #wheelContainer{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 89%;
	gap: 0.5rem;
	min-height: 38%;
	padding-top: 1vh;
	justify-content: space-between;
}
  #section3 .divSec3 {
    order: 3;
    width: 92%;
    flex: 1 1 auto;
    height: 77px;
    display: flex;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    align-items: stretch;
    overflow: hidden;
  }

  #section3 .cardPerf,
  #section3 .cardGlitch,
  #section3 .customCard {
    width: 100%;
    height: 96%;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border: 1px solid rgba(0, 20, 63, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  #section3 .cardSec h3 {
    top: 8%;
    transform: none;
    font-size: var(--mobile-text);
    line-height: 1;
    width: 100%;
    text-align: center;
    color: var(--tier-color);
    position: unset;
    /* min-height: 2.2rem; */
    margin-top: 0.3rem;
    margin-bottom: 0;
  }

  #section3 .customCard h3 {
    top: 8%;
    position: unset;
    /* margin-top: 20px; */
  }

  #section3 .cardSec figcaption {
    opacity: 1;
    transform: none;
    filter: none;
    overflow: auto;
    max-width: 95%;
    padding: 0rem 0rem;
    font-size: var(--mobile-text);
    line-height: 1.2;
    color: var(--main-color);
    background: transparent;
    backdrop-filter: none;
    transition: none;
    position: unset;
    margin-top: unset;
  }
  
  #section3 .cardSec figcaption p {
    margin: 0;
    height: auto;
  }

  #section3 .customCard #customSvg, #section3 .cardPerf #jaug,#section3 .cardGlitch #gear {
    /* top: 30%; */
    width: 88%;
    /* min-height: 21px; */
    opacity: 0.18;
    filter: invert(0);
    transform: unset;
    /* margin: auto; */
    position: unset;
    left: unset;
    top: unset;
    /* margin: auto; */
    height: 29%;
  }

  #section3 .customCard .top-right,
  #section3 .customCard .bottom-left {
    height: 2px;
    width: 100%;
  }

  #section3 .customCard .top-left,
  #section3 .customCard .bottom-right {
    width: 2px;
    height: 100%;
  }

  #section3 .customCard .top-left,
  #section3 .customCard .top-right,
  #section3 .customCard .bottom-left,
  #section3 .customCard .bottom-right {
    display: none;
  }
  /* #endregion Section 3 Mobile */
  /* #region Section 4 Mobile */
  #section4 {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#section4 .section4-projects {
  width: 100%;
  height: 100%;
  padding: 1.2rem var(--mobile-pad-x) 1.4rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 1rem;
  align-items: stretch;
  justify-content: stretch;
  max-width: none;
  column-gap: 0;
}

/* Reset des positions desktop */
#section4 .carousel-title,
#section4 .project-preview,
#section4 .carousel {
  grid-column: 1;
}

#section4 .carousel-title {
  grid-row: 1;
  position: relative;
  margin: 0 0 0.5remrem 0;
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 4.4vw;
  line-height: 1.05;
  color: var(--second-color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#section4 .carousel-title::before {
  content: "";
  width: 1.35rem;
  min-width: 1.35rem;
  height: 2px;
  margin: 0;
  background: var(--tier-color);
  display: inline-block;
}

#section4 .project-preview {
  grid-row: 2;
  position: relative;
  width: 100%;
  height: 90%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#section4 .displayCarousel {
  width: min(88vw, 420px);
  height: min(26vh, 230px);
  min-height: 0;
  margin: 0 auto;
  border-radius: 10px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: white;
  border: 1px solid rgba(220, 226, 232, 0.9);
  box-shadow:
    0 0 0 1px rgba(240, 244, 249, 0.18),
    0 0 22px rgba(240, 244, 249, 0.25);
}

#section4 .displayCarousel:hover {
  transform: none;
}

/* En mobile on garde uniquement la grande preview */
#section4 .carousel {
  display: none;
}

#section4 .carousel-arrow {
  position: absolute;
  bottom: 0.15rem;
  z-index: 5;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 2px solid rgba(239, 109, 61, 0.85);
  border-radius: 50%;
  background: rgba(0, 20, 63, 0.82);
  box-shadow:
    0 0 0 4px rgba(240, 244, 249, 0.08),
    0 0 22px rgba(239, 109, 61, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

#section4 .carousel-arrow-left {
  left: 2rem;
}

#section4 .carousel-arrow-right {
  right: 2rem;
}

#section4 .carousel-arrow svg {
  width: 2rem;
  height: 2rem;
}

#section4 .carousel-arrow svg path {
  fill: none;
  stroke: var(--second-color);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#section4 .carousel-arrow:active {
  transform: scale(0.92);
}

#section4 .carousel-arrow-left {
  animation: arrowPulseLeft 1.8s ease-in-out infinite;
}

#section4 .carousel-arrow-right {
  animation: arrowPulseRight 1.8s ease-in-out infinite;
}

@keyframes arrowPulseLeft {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes arrowPulseRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
  /* #endregion Section 4 Mobile */
  /* #region Section 5 Mobile */
  
  #section5 {
    padding: var(--mobile-pad-y) var(--mobile-pad-x);
    align-items: center;
    justify-content: center;
    background: var(--second-color);
  }

  #section5 .logo-container {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 86%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-evenly;
  }

  #section5 .canva-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  #section5 .canvaslogo {
    width: 100%;
    height: 100%;
    opacity: 0.75;
  }

  #section5 .logo-column {
    width: calc(42% - 0.35rem);
    height: calc(49% - 0.35rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.55rem;
  }

  /*
    Important :
    on NE reset PAS le transform de départ des .logo-column.
    Sinon on tue l'animation d'arrivée.
    Les nth-child desktop restent donc utilisés.
  */

  #section5 .logo-column.animate-left,
  #section5 .logo-column.animate-right {
    transition: transform 1.4s ease-in-out;
    transform: translateX(0);
  }

  #section5 .logo-item {
    width: 100%;
    flex: 1 1 0;
    /* min-height: 0; */
    height: fit-content;
    aspect-ratio: auto;
    border-radius: 0.3rem;
    padding: 0 0.55rem;
    display: grid;
    grid-template-columns: 31% 1fr;
    gap: 0.55rem;
    align-items: center;
    background: rgba(0, 20, 63, 0.94);
    box-shadow: 0 0 0 1px rgba(0, 20, 63, 0.14);
    overflow: hidden;
  }

  #section5 .logo-item img {
    width: 80%;
    max-width: 5.15rem;
    height: auto;
    margin: 0;
    justify-self: center;
    align-self: center;
    transform: none;
  }

  #section5 .logo-item figcaption {
    position: static;
    inset: auto;
    opacity: 1;
    transform: none;
    filter: none;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    transition: none;
  }

  #section5 .logo-item figcaption strong {
    font-size: var(--mobile-title);
    line-height: 1.05;
    color: var(--tier-color);
  }

  #section5 .logo-item figcaption small {
    font-size: var(--mobile-text);
    line-height: 1.1;
    color: var(--second-color);
  }

  #section5 .logo-item:hover,
  #section5 .logo-item:hover img {
    transform: none;
    box-shadow: 0 0 0 1px rgba(0, 20, 63, 0.14);
  }

  #section5 .logo-item::before {
    display: none;
  }

  #section5 .skill-bg {
    opacity: 0.16;
    justify-content: space-evenly;
    padding-block: 0.4rem;
  }

  #section5 .scroll-line {
    font-size: var(--mobile-text);
    opacity: 0.55;
  }

  #section5 .scroll-content {
    animation-duration: 95s;
    letter-spacing: 4px;
    padding-right: 3rem;
    word-spacing: 1.2rem;
    width: auto;
  }
  /* #endregion Section 5 Mobile */
  /* #region Section 6 Mobile */
#section6 {
  padding: 0 var(--mobile-pad-x);
  align-items: center;
  justify-content: center;
  background: var(--main-color);
}

#section6 .contact-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 88%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  gap: calc(var(--mobile-gap) * 1.35);
}

/* FORMULAIRE */
#section6 .contact-form-wrapper {
  width: 100%;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--mobile-gap);
  text-align: left;
}

#section6 .contact-form-wrapper h2 {
  margin: 0;
  place-self: unset;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--mobile-title);
  line-height: 1.05;
  color: var(--second-color);
  align-self: center;
  font-weight: 600;
}

#section6 .contact-form-wrapper h2::before {
  content: "";
  width: 1rem;
  /* min-width: 2.35rem; */
  height: 2px;
  background: var(--tier-color);
  display: inline-block;
}

#section6 .contact-form-wrapper .subtitle {
  /* margin: 0 0 0.15rem; */
  font-size: var(--mobile-text);
  line-height: 1.15;
  color: var(--second-color);
  opacity: 0.86;
  text-align: center;
}

#section6 form {
  width: 79%;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  height: 60%;
  justify-content: center;
}

#section6 form .rowdouble {
  display: flex;
  margin-bottom: 1rem;
  gap: 2rem;
}

/* IMPORTANT : on garde les wrappers en vraies boîtes pour le glow */
#section6 .element-svg-glow {
  width: 100%;
  /* height: 3.15rem; */
  position: relative;
  overflow: visible;
  border-radius: 0.7rem;
  background: rgb(5, 15, 40);
}

#section6 .textarea-glow {
  min-height: 2.8rem;
}

#section6 .glow-svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible !important;
  pointer-events: none;
  z-index: 3;
}

#section6 form input,
#section6 form textarea {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0.3rem;
  border: 1px solid rgba(240, 244, 249, 0.62);
  border-radius: 0.2rem;
  background: transparent;
  color: var(--second-color);
  font-size: var(--mobile-text);
  line-height: 1.15;
}

#section6 form textarea {
  /* min-height: 5.9rem; */
  resize: none;
}

#section6 form input::placeholder,
#section6 form textarea::placeholder {
  color: rgba(240, 244, 249, 0.65);
  font-size: var(--mobile-text);
}

#section6 form input:focus,
#section6 form textarea:focus {
  box-shadow: 0 0 0 1px var(--tier-color);
  border-color: var(--tier-color);
}

/* bouton moins énorme, plus propre */
#section6 form button[type="submit"] {
  align-self: flex-end;
  width: auto;
  min-width: 36%;
  margin-top: 1.1rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.7rem;
  font-size: var(--mobile-text);
  line-height: 1;
  background: var(--tier-color);
}

/* INFOS CONTACT : compact, pas en carte */
#section6 #contact-card {
  width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  text-align: center;
}

#section6 #contact-card h2 {
  margin: 0;
  font-size: var(--mobile-text);
  line-height: 1.05;
  color: var(--second-color);
}

#section6 #contact-card .subtitle {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: var(--mobile-text);
  line-height: 1.15;
  color: var(--second-color);
  justify-content: center;
}

#section6 #contact-card .separator {
  display: none;
}

#section6 #contact-card a,
#section6 #contact-card span {
  color: var(--tier-color);
  text-decoration: none;
  font-size: var(--mobile-text);
}

#section6 canvas.canvasbw {
  opacity: 0.35;
}
/* #endregion Section 6 Mobile */
}