/* ============================================================
   [COMPONENT] Images
   ============================================================ */

.image-square {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}


/* ============================================================
   [COMPONENT] SVG inside <a> / divider
   ============================================================ */

/* 1) Le SVG ne doit pas hériter du comportement inline de <a> */
a svg, .divider svg {
  display: block;
  margin: 0 auto;        /* centre horizontalement */
  line-height: 0;
}


/* ============================================================
   [COMPONENT] Text superposed
   ============================================================ */

.text.superposed {
  position: relative;
  display: inline-block;
}

.text.superposed.second {
  position: absolute;
  top: 60%; /* Ajuste selon le décalage souhaité */
  left: 0;
  width: 100%; /* Occupe tout l'espace */
  height: 20px; /* Ajuste la taille pour capter les clics */
}


/* ============================================================
   [COMPONENT] Tabbed content (tabs/items)
   ============================================================ */

.tabbed-content a.no-underline {
  text-decoration: none !important;
}

.tabbed-content a.no-underline:hover {
  text-decoration: none !important;
}

/* Styles from "style.css" of "haut-de-page & bas-de-page.html" */
.tabbed-content {
  background: transparent;
  width: calc(100% - 2em);
  max-width: 100%;
  padding: 1em;
  margin: 1em auto;
}

.tabs {
  display: flex;
  justify-content: center;
   
}

.tabs ul {
  margin: 0;
  padding: 0 0 1em 0;
  display: flex;
  justify-content: center;
  width: 100%;
   
}

.tabs ul li {
  list-style: none;
  margin: 0 5px;
  flex-grow: 1;
  text-align: center;
  position: relative;
}

.tabs ul li a {
  padding: 0.5em 1em;
  text-align: center;
  display: block;
}

.item {
  margin-bottom: 2px;
}

.item {
    display: none; /* Par défaut, caché */
}

.item.active {
    display: block; /* Affiché lorsque la classe active est présente */
}

.item.active .item-content {
  padding: 1em;
  transition: opacity 0.3s ease-in-out;
  text-align: center;
}

.links-container {
  display: flex;
  justify-content: center;
  gap: 1em;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.tabbed-content .tabs {
  display: none;
}

.tabbed-content .item {
  min-height: 2em;
}

.tabbed-content .item::before {
  content: attr(data-title);
}

.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
}

.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}


/* ============================================================
   [COMPONENT] Header logo
   ============================================================ */

.tusseau-header-logo-container {
  position: relative;
  width: 100%;
  max-width: 100px; /* Optional max width */
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

.tusseau-header-logo-container img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}


/* ============================================================
   [COMPONENT] Serie layout / description
   ============================================================ */

.serie {
  display: flex;
  flex-wrap: nowrap; /* garde image + texte côte à côte */
  justify-content: center;
  align-items: flex-start;
  margin: 60px auto;
  max-width: 3000px;
  padding: 0 40px;
  box-sizing: border-box;
  overflow-x: auto; /* scroll horizontal si trop petit */
  column-gap: clamp(40px, 5vw, 250px);
}

.serie-slideshow img.active {
  opacity: 1;
  z-index: 1;
}

.serie-description {
  max-width: 800px;
  min-width: 250px;
  flex-shrink: 1;
  flex-grow: 0;
  font-size: clamp(1em, 1.1vw, 1.2em); /* ← adapte la taille du texte */
  line-height: 1.6;
}

.serie-description h2 {
  font-size: clamp(1.4em, 2vw, 1.7em); /* ← adaptatif aussi */
  margin-bottom: 10px;
}

.serie-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* Empêche les contrôles visuels natifs */
}


/* ============================================================
   [COMPONENT] Data encoding grid + cards
   ============================================================ */

.data-encoding {
  display: grid;

  /* 🟩 Responsive, 3 grands carrés max, mais adaptatif */
  grid-template-columns: repeat(auto-fit, minmax(clamp(320px, 32vw, 540px), 1fr));

  /* 🟨 Espacement élégant */
  column-gap: 60px;
  row-gap: 60px;

  /* 🟦 Centrage parfait */
  justify-content: center;
  align-items: start;

  /* 🟥 Contrainte visuelle globale pour éviter le débordement */
  max-width: 1800px;
  margin: 40px auto;
  padding: 0 30px;
}

.dataX-xyz {
  width: 100%;
  max-width: 540px; /* ← utile pour forcer un max visuel propre */
  text-align: center;
}

.dataX-xyzhome {
  width: 100%;
  max-width: 1000px; /* ← utile pour forcer un max visuel propre */
  text-align: center;
}

.data-xyz {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}


/* ============================================================
   [COMPONENT] Canvas size variants
   ============================================================ */

/* Variantes de tailles

<canvas class="canvas canvas-200" width="1920" height="1920"></canvas>
<canvas class="canvas canvas-180" width="1728" height="1728"></canvas>
<canvas class="canvas canvas-170" width="1632" height="1632"></canvas>
<canvas class="canvas canvas-160" width="1536" height="1536"></canvas>
<canvas class="canvas canvas-150" width="1440" height="1440"></canvas>
<canvas class="canvas canvas-145" width="1392" height="1392"></canvas>
<canvas class="canvas canvas-140" width="1344" height="1344"></canvas>
<canvas class="canvas canvas-135" width="1296" height="1296"></canvas>
<canvas class="canvas canvas-130" width="1248" height="1248"></canvas>
<canvas class="canvas canvas-125" width="1200" height="1200"></canvas>
<canvas class="canvas canvas-120" width="1152" height="1152"></canvas>
<canvas class="canvas canvas-115" width="1104" height="1104"></canvas>
<canvas class="canvas canvas-110" width="1056" height="1056"></canvas>
<canvas class="canvas canvas-100" width="960" height="960"></canvas>
<canvas class="canvas canvas-95"  width="912" height="912"></canvas>
<canvas class="canvas canvas-90"  width="864" height="864"></canvas>
<canvas class="canvas canvas-85"  width="816" height="816"></canvas>
<canvas class="canvas canvas-80"  width="768" height="768"></canvas>
<canvas class="canvas canvas-75"  width="720" height="720"></canvas>
 */
.canvas-200 { width: 200%; max-width: 2000px; }
.canvas-180 { width: 180%; max-width: 1800px; }
.canvas-170 { width: 170%; max-width: 1700px; }
.canvas-160 { width: 160%; max-width: 1600px; }
.canvas-150 { width: 150%; max-width: 1500px; }
.canvas-145 { width: 145%; max-width: 1450px; }
.canvas-140 { width: 140%; max-width: 1400px; }
.canvas-135 { width: 135%; max-width: 1350px; }
.canvas-130 { width: 130%; max-width: 1300px; }
.canvas-125 { width: 125%; max-width: 1250px; }
.canvas-120 { width: 120%; max-width: 1200px; }
.canvas-115 { width: 115%; max-width: 1150px; }
.canvas-110 { width: 110%; max-width: 1100px; }
.canvas-100 { width: 100%; max-width: 960px; }
.canvas-95  { width: 95%;  max-width: 960px; }
.canvas-90  { width: 90%;  max-width: 960px; }
.canvas-85  { width: 85%;  max-width: 960px; }
.canvas-80  { width: 80%;  max-width: 960px; }
.canvas-75  { width: 75%;  max-width: 960px; }


/* ============================================================
   [COMPONENT] Canvas wrappers
   ============================================================ */

.canvas-wrapper {
  position: relative;
  width: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.canvas-wrapper-sharp {
  position: relative;
  width: auto;
  max-width: none;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}


/* ============================================================
   [COMPONENT] Bio layout
   ============================================================ */

.bio {
  display: flex;
  flex-wrap: nowrap; /* image + texte côte à côte */
  justify-content: center;
  align-items: flex-start;
  margin: 60px auto;
  max-width: 3000px;
  padding: 0 40px;
  box-sizing: border-box;
  overflow-x: auto;
  column-gap: clamp(40px, 5vw, 250px);
}

.bio-description {
  max-width: 500px;           /* 🔽 rétréci ici */
  min-width: 250px;
  flex-shrink: 1;
  flex-grow: 0;
  font-size: clamp(1em, 1.1vw, 1.2em);
  line-height: 1.6;
}

.bio-description h2 {
  font-size: clamp(1.4em, 2vw, 1.7em);
  margin-bottom: 10px;
}

.bio .xyz-controls {
  display: none !important;
}


/* ============================================================
   [COMPONENT] Carousel layout
   ============================================================ */

.carousel-ensemble {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px; /* espace entre les carrousels */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}

/* LES FLÈCHES */
.carousel-controls {
  position: absolute; /* ✅ Ici !! */
  bottom: 20px; /* ✅ collées au bas de l'image */
  left: 50%;
  transform: translateX(-50%); /* ✅ bien centrées */
  display: flex;
  gap: 30px;
  z-index: 5; /* ✅ passe au-dessus de l’image */
  pointer-events: none; /* ✅ pour que l’image sous les boutons soit cliquable sauf boutons */
}


/* ============================================================
   [COMPONENT] Misc / variants
   ============================================================ */

.data-xyz.canvas-expand {
  width: 110%;
  max-width: 1100px;
}

.data-encoding {
  justify-items: center; /* Ajoute ce centrage vertical par cellule */
}