@font-face {
  font-family: 'ABCDiatypeSemi-Mono-Medium';
  src: url('font/ABCDiatypeSemi-Mono-Medium.woff') format('woff'),
       url('font/ABCDiatypeSemi-Mono-Medium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


:root {
  --pastille-size: 1.5vw;
  --marge: 20px;
}

/* Reset et base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: ABCDiatypeSemi-Mono-Medium,monospace;
  background-color: #ffffff;
  transition: background-color 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}
/* Éléments texte - transition de couleur */
.domaines,
.titre,
.footer {
  transition: color 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}

a, a:hover, a:visited, a:active, a:focus {
  color: inherit; /* Hérite instantanément de la couleur du parent */
  text-decoration: none;
  transition: none; /* Pas de transition propre, suit le parent */
}


.titre {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  color:black;
  font-size:8vw;
  left:0;
  width:100%;
  text-align:center;
  font-family: ABCDiatypeSemi-Mono-Medium,monospace;
}

.domaines {
  position:absolute;
  top:var(--marge);
  color:black;
  font-size: clamp(14px, 0.8vw, 18px); /* Min 14px, max 16px */
  left:var(--marge);
  width:auto;
  text-align:left;
  cursor: pointer;
  z-index: 1001; /* Au-dessus de about-content */
}

/* Quand le panneau About est ouvert, .domaines reste noir */
.domaines.about-open {
  color: black !important;
  transition: none;
}


.about-content-text-title span{
  border-bottom: 1.5px dashed currentColor; /* Utilise currentColor = hérite la couleur avec transition */
  height: 0.6em;
  transition: border-color 0.6s cubic-bezier(0.33, 0, 0.2, 1);
  transform: translateY(-6px);
}
.enConstruction {
  color: var(--accent-color);
}
.enConstruction span {
  color: var(--text-color);
  line-height: 1.1;
}

.arrow-nav {
  font-size: 2vw;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color);
  cursor: pointer;
  z-index: 2;
}

.arrow-nav.arrow-left {
  left:var(--marge);
}

.arrow-nav.arrow-right {
  right:var(--marge);
}
.arrow-nav span {
  font-size: max(1vw, 16px);
  transform: translateY(min(-0.45vw, -5px));
  display: inline-block;
}

.arrow-nav.arrow-left span.fleche {
  font-size: 2vw;
  transform: translateX(0.4vw);
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
.arrow-nav.arrow-left:hover span.fleche {
  transform: translateX(0);
  transition: transform 0.1s ease-in-out;
}
.arrow-nav.arrow-right span.fleche {
  font-size: max(2vw, 28px);
  transform: translateX(-0.4vw);
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}
.arrow-nav.arrow-right:hover span.fleche {
  transform: translateX(0);
  transition: transform 0.1s ease-in-out;
}  

/* Panneau About */
.about-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* Fermé par défaut */
  background-color: white;
  z-index: 1000;
  overflow: hidden;
  transition: height 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}

.about-content.open {
  height: 100vh; /* Fallback pour navigateurs anciens */
  height: 100dvh; /* Utilise dynamic viewport height pour iOS */
  overflow-y: auto;
}

/* Contenu du panneau About - fade in après ouverture */
.about-content-text {
  opacity: 0;
  padding: 100px var(--marge) var(--marge) var(--marge);
  transition: opacity 0.4s ease-out;
  transition-delay: 0s;
}

.about-content.open .about-content-text {
  opacity: 1;
  transition-delay: 0.5s; /* Attend que le panneau soit déployé */
}

.about-content-text .boxedText {
  max-width: 800px;
  margin: 0 0 0 20px;
}
.about-content-text-title {
  margin:60px 0 20px;;
  display: flex;
  align-items: center;
  gap: 20px;
}
.about-content-text-title h2 {font-size:18px}
.about-content-text-title span{border-bottom:1px dashed black; flex-grow: 1;}

.about-content-text .flex {
  column-count: 2;
  column-gap: 1rem;
}

.footer {
  position:absolute;
  bottom:var(--marge);
  color:black;
  font-size: clamp(14px, 0.8vw, 18px); /* Min 14px, max 16px */
  left:0;
  width:100%;
  padding:0 var(--marge);
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  z-index: 1;
}

/* Conteneur du carrousel */
.carousel {
  position: relative;
  width: 100%;
  height: 100vh; /* Fallback pour navigateurs anciens */
  height: 100dvh; /* Utilise dynamic viewport height pour iOS */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chaque slide - positionné en absolu pour empiler */
.carousel-slide {
    position: absolute;
    width: 100%;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cachées par défaut (hors écran à droite) pour éviter le flash au chargement */
  transform: translateX(100vw);
  /* Easing ultra doux - accélération et décélération très progressives */
  /* Durée dynamique via variable CSS (plus courte sur mobile) */
  transition: transform var(--slide-transition-duration, 1.4s) cubic-bezier(0.76, 0, 0.12, 1);
}

/* Conteneur du média - peut recevoir des paddings personnalisés */
.slide-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 50vw;
  max-height: 60vh;
  box-sizing: border-box;
  background-color: white;
  position:relative;
  /* Par défaut pas de padding, à définir en inline style si besoin */
}

/* Image Slider - slider d'images interne aux slides */
/* Utilise les mêmes dimensions que .slide-content par défaut */
/* Peut être surchargé en inline style si besoin */
.image-slider {
    position: relative;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}

.image-slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.image-slider-item.active {
  opacity: 1;
}

.image-slider-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Texte dans les slides - caché par défaut */
.slide-content-text {
  position: absolute;
}



.slide-content-text span {
  display: block;
  font-size: 12px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Quand la slide est visible, les spans apparaissent avec délai croissant */
.carousel-slide.visible .slide-content-text span {
  opacity: 1;
  transform: translateX(0);
}

/* Délais pour l'apparition en cascade (jusqu'à 10 lignes) */
.carousel-slide.visible .slide-content-text span:nth-child(1) { transition-delay: 0.8s; }
.carousel-slide.visible .slide-content-text span:nth-child(2) { transition-delay: 1.0s; }
.carousel-slide.visible .slide-content-text span:nth-child(3) { transition-delay: 1.2s; }
.carousel-slide.visible .slide-content-text span:nth-child(4) { transition-delay: 1.4s; }
.carousel-slide.visible .slide-content-text span:nth-child(5) { transition-delay: 1.6s; }
.carousel-slide.visible .slide-content-text span:nth-child(6) { transition-delay: 1.8s; }
.carousel-slide.visible .slide-content-text span:nth-child(7) { transition-delay: 2.0s; }
.carousel-slide.visible .slide-content-text span:nth-child(8) { transition-delay: 2.2s; }
.carousel-slide.visible .slide-content-text span:nth-child(9) { transition-delay: 2.4s; }
.carousel-slide.visible .slide-content-text span:nth-child(10) { transition-delay: 2.6s; }

/* Quand la slide part (leaving), les spans partent vers la droite en cascade */
.carousel-slide.leaving .slide-content-text span,
.carousel-slide.leaving-right .slide-content-text span {
  opacity: 0;
  transform: translateX(20px);
}

/* Délais pour la disparition en cascade */
.carousel-slide.leaving .slide-content-text span:nth-child(1),
.carousel-slide.leaving-right .slide-content-text span:nth-child(1) { transition-delay: 0s; }
.carousel-slide.leaving .slide-content-text span:nth-child(2),
.carousel-slide.leaving-right .slide-content-text span:nth-child(2) { transition-delay: 0.1s; }
.carousel-slide.leaving .slide-content-text span:nth-child(3),
.carousel-slide.leaving-right .slide-content-text span:nth-child(3) { transition-delay: 0.2s; }
.carousel-slide.leaving .slide-content-text span:nth-child(4),
.carousel-slide.leaving-right .slide-content-text span:nth-child(4) { transition-delay: 0.3s; }
.carousel-slide.leaving .slide-content-text span:nth-child(5),
.carousel-slide.leaving-right .slide-content-text span:nth-child(5) { transition-delay: 0.4s; }
.carousel-slide.leaving .slide-content-text span:nth-child(6),
.carousel-slide.leaving-right .slide-content-text span:nth-child(6) { transition-delay: 0.5s; }
.carousel-slide.leaving .slide-content-text span:nth-child(7),
.carousel-slide.leaving-right .slide-content-text span:nth-child(7) { transition-delay: 0.6s; }
.carousel-slide.leaving .slide-content-text span:nth-child(8),
.carousel-slide.leaving-right .slide-content-text span:nth-child(8) { transition-delay: 0.7s; }
.carousel-slide.leaving .slide-content-text span:nth-child(9),
.carousel-slide.leaving-right .slide-content-text span:nth-child(9) { transition-delay: 0.8s; }
.carousel-slide.leaving .slide-content-text span:nth-child(10),
.carousel-slide.leaving-right .slide-content-text span:nth-child(10) { transition-delay: 0.9s; }



.slideWatchOut .slide-content {padding: 0 0 80px 15vw}
.slideWatchOut .slide-content video {max-height: calc(60vh - 80px);max-width: calc(50vw - 15vw);}

.slideWebTangible .slide-content {padding: 20px 5vw 200px 20px}
.slideWebTangible .slide-content video {max-height: calc(60vh - 200px);max-width: calc(50vw - 10vw);}

.slideDell .slide-content {padding: 20px 20px 10vh 20px}
.slideDell .slide-content .image-slider, .slideDell .slide-content .image-slider img {max-height: calc(60vh - 10vh);max-width: calc(50vw - 40px);}


.slideConstellations .slide-content {padding: 20px 20px 10vh 20px; max-width: 50vw; max-height: calc(100% - 40px - 10vh);}
.slideConstellations .slide-content .image-slider, .slideConstellations .slide-content .image-slider img {max-height: calc(60vh - 10vh);max-width: calc(50vw - 40px);}

.slideSiphonette .slide-content {padding: 20px 20px 20px 13vw; max-width: 50vw; max-height: 100%;}

.slideModulo .slide-content video {max-height: calc(60vh - 40px);}

/* PASTILLES */
.pastille {
  position: absolute;
  width: var(--pastille-size);
  height: var(--pastille-size);
  background-color: var(--text-color);
  border-radius: 50%;
}

.pastille.leftMoins {
  left: calc(var(--pastille-size) * -1);
}
.pastille.rightMoins {
  right: calc(var(--pastille-size) * -1);
}
.pastille.leftPlus {
  left: var(--pastille-size);
}
.pastille.rightPlus {
  right: var(--pastille-size);
}

.pastille.top {
  top: 0;
}
.pastille.topMoins {
  top: calc((var(--pastille-size)) * -1);
}

.pastille.bottomMoins {
  bottom: calc((var(--pastille-size)) * -1);
}

.pastille.right {
  right: 0;
}

.pastille.left {
  left: 0;
}

.pastille.right-1-2 {
  left: calc(100% / 2 - (var(--pastille-size) / 2));
}

.pastille.top-2-5 {
  top: calc(100% / 4 * 1 - (var(--pastille-size) / 2));
}

.pastille.top-3-5 {
  top: calc(100% / 4 * 2 - (var(--pastille-size) / 2));
}

.pastille.top-4-5 {
  top: calc(100% / 4 * 3 - (var(--pastille-size) / 2));
}

.pastille.bottom {
  bottom: 0;
}

/* Animation des pastilles selon l'état de la slide */
.pastille {
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce effect */
}

/* Pastilles visibles quand la slide est en place */
.carousel-slide.visible .pastille {
  transform: scale(1);
}

/* Délais en cascade pour l'apparition des pastilles */
.carousel-slide.visible .pastille:nth-child(1) { transition-delay: 0.6s; }
.carousel-slide.visible .pastille:nth-child(2) { transition-delay: 0.7s; }
.carousel-slide.visible .pastille:nth-child(3) { transition-delay: 0.8s; }
.carousel-slide.visible .pastille:nth-child(4) { transition-delay: 0.9s; }
.carousel-slide.visible .pastille:nth-child(5) { transition-delay: 1.0s; }
.carousel-slide.visible .pastille:nth-child(6) { transition-delay: 1.1s; }

/* Pastilles masquées quand la slide part */
.carousel-slide.leaving .pastille,
.carousel-slide.leaving-right .pastille {
  transform: scale(0);
  transition-delay: 0s;
  transition-duration: 0.2s;
}


/* États des slides */

/* Caché à droite (position initiale / après sortie) */
.carousel-slide.hidden-right {
  transform: translateX(100vw);
}

/* En cours d'entrée (vient de la droite) */
.carousel-slide.entering {
  transform: translateX(100vw);
  transition: none;
}

/* Visible au centre */
.carousel-slide.visible {
  transform: translateX(0);
}

/* En cours de sortie (part vers la gauche) */
.carousel-slide.leaving {
  transform: translateX(-100vw);
}

/* En cours de sortie (part vers la droite - navigation arrière) */
.carousel-slide.leaving-right {
  transform: translateX(100vw);
}

/* Caché à gauche */
.carousel-slide.hidden-left {
  transform: translateX(-100vw);
}

/* Désactive la transition pour repositionnement instantané */
.carousel-slide.no-transition {
  transition: none !important;
}

/* Images et vidéos dans les slides */
.slide-content img,
.slide-content video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Garde le ratio, remplit l'espace disponible */
  display: block;
}


@media (max-width: 1024px) {
  .slide-content-text span {font-size:10.5px}
}

/* Responsive - tablettes */
@media (max-width: 768px) {
  .carousel-slide img,
  .carousel-slide video {
    max-width: 85vw !important;
    max-height: 70vh !important;
  }
}

/* Responsive - mobiles */
@media (max-width: 600px) {
  :root {
    --pastille-size: 10px;
  }
  .carousel-slide img,
  .carousel-slide video {
    max-width: 92vw !important;
    max-height: 60vh !important;
  }
  .titre {
    top:auto;
    top: 60px;
    padding-left: 20px;
    bottom:auto;
    text-align:left;
  }
  .slide-content {
    max-width: calc(100vw - 40px);
    width: calc(100vw - 40px);
    padding:20px !important;
    display:block;
    height:auto !important;
    max-height: 80dvh !important; /* Utilise dynamic viewport height pour iOS */
    max-width: inherit !important;
  }
  .slide-content-text {
    margin-top:50px;
    position:relative;
    left:0 !important;
    bottom:0 !important;
    top:auto !important;
    right:auto !important;
  }
  .footer {
    display: block;
    top: 20px;
    bottom: auto;
    right: 20px;
    left: auto;
     width: auto;
    padding: 0;
  }
  .footer .decoLine {
    display: none !important;
  }
  .arrow-nav {display:none}
  .about-content-text {font-size:14px;}
  .about-content-text .boxedText {margin:0}
  .carousel-slide {
    align-items: flex-end;
    padding-bottom: 20px;
  }
  .contact {margin-top:20px}
  /*
  .enConstruction span {
    background-color: transparent;
    color: var(--text-color);
  }
    */
    .hideOnMobile {display:none}

    .slide-content video, .slide-content .image-slider, .slide-content picture {
      max-height: inherit !important;
      max-width: inherit !important;
    }
    .slideSiphonette .slide-content {
      max-width: 100vw;
    }
}