.desktop-principale {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background-color: var(--backgroundbright);
}

.desktop-principale .div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop-principale .img-yellow {
  position: absolute;
  width: 100%;
  height: 100%;
  /*top: 45.15%;*/
  left: 0;
  object-fit: cover;
  object-position: center;
}

.desktop-principale .img-CRT-background {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

.desktop-principale .intro-section {
  display: flex;
  flex-direction: column;
  height: 833px;
  align-items: center;
  gap: 32px;
  padding: 200px 20px 0px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.desktop-principale .intro-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px; /* Hauteur de la zone de transition */
  pointer-events: none; /* Pour pouvoir cliquer à travers si besoin */
}

.desktop-principale .transition-distress {
  /*top: calc(50.00% + 416px);*/
  /*position: absolute;*/
  width: 100%;
  left: 0;
  height: 154px;
  aspect-ratio: 8.28;
  z-index: 10;
  margin-top: -1px;
}

.desktop-principale .img-trans-black {
  /*position: absolute;*/
  width: 100%;
  /*height: 100%;*/
  top: 0;
  left: 0;
  object-fit: fill;
  margin-top: -1px;
}

.desktop-principale .div-wrapper {
  display: flex;
  max-width: 1030px;
  gap: 32px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .div-wrapper-2 {
  display: inline-flex;
  gap: 16px;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .header {
  display: flex;
  flex-direction: column;
  width: 1030px;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  filter: blur(0.5px);
  /* Pour la plupart des navigateurs modernes */
  image-rendering: pixelated;
  image-rendering: crisp-edges;

  /* Pour MacOS/iOS (rendu plus tranchant) */
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

.desktop-principale .text-wrapper {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Upheaval Pro-Regular", Helvetica;
  font-weight: 400;
  color: var(--textcitrus);
  font-size: 36px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
  /*text-shadow: 
    1px 1px 0px #00ff59,*/ /* Première couche : Jaune */
    /*2px 2px 0px #ff0000; /* Deuxième couche : Noir (plus décalée) */*/
}

.desktop-principale .text-wrapper-2 {
  position: relative;
  align-self: stretch;
  font-family: "Upheaval Pro-Regular", Helvetica;
  font-weight: 400;
  color: #fcf410;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
}

.desktop-principale .content-video {
  position: relative;
  max-width: 1300px;
  width: 1030px;
  height: 391px;
}

.desktop-principale .group {
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(50.00% - 332px);
  width: 665px;
  background-color: #000000;
  border-radius: 75px;
  box-shadow: 6px 6px 22.4px 13px #00000040;
}

.desktop-principale .btn-play {
  position: absolute;
  top: calc(50.00% - 20px);
  left: calc(50.00% - 33px);
  width: 67px;
  height: 67px;
}

.desktop-principale .footer-content {
  display: flex;
  flex-direction: column;
  max-width: 1030px;
  gap: 12px;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  z-index: 10;
}

.desktop-principale .div-2 {
  display: flex;
  width: 1030px;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .DON-t-MISS-THE {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 32px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
}

.desktop-principale .input-box-btn {
  display: inline-flex;
  align-items: stretch;
  position: relative;
  flex: 0 0 auto;
  margin: 10px;
}

.desktop-principale .input-box {
  display: flex;
  width: 371px;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  position: relative;
  background-color: #ffffff;
}

/* Vrai champ <input type="email"> stylisé en pixel rétro */
.desktop-principale .email-input {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 400;
  color: rgb(15 42 140 / 0.5);
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-principale .email-input::placeholder {
  color: rgb(15 42 140 / 0.5);
  opacity: 1;
}

/* Bouton bleu cyan : version DESKTOP avec texte "SUBSCRIBE".
   En mobile, ce bouton devient un carré 50x50 avec la flèche. */
.desktop-principale .btn-subscribe {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 174px;
  height: 50px;
  padding: 0;
  position: relative;
  background-color: #00bfff;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.desktop-principale .btn-subscribe:hover,
.desktop-principale .btn-subscribe:focus-visible {
  background-color: #00a8e6;
}

/* Texte "SUBSCRIBE" : visible en desktop, caché en mobile */
.desktop-principale .btn-subscribe-text {
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  letter-spacing: 1.2px;
  text-align: center;
  line-height: 1;
}

/* Flèche : cachée en desktop, visible uniquement en mobile */
.desktop-principale .arrow-icon {
  display: none;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
}

/* Anciennes classes conservées pour rétrocompatibilité (non utilisées) */
.desktop-principale .text-wrapper-3 {
  position: relative;
  flex: 1;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Geist Mono", Helvetica;
  font-weight: 500;
  color: #000000;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.desktop-principale .text-wrapper-4 {
  position: relative;
  flex: 1;
  margin-top: -1px;
  font-family: "Upheaval Pro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 20px;
  text-align: center;
  letter-spacing: 1.2px;
  line-height: 14px;
}

.desktop-principale .no-spam-just-the {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0;
  line-height: 20px;
}

.desktop-principale .features-section {
  display: flex;
  flex-direction: column;
  height: 1012px;
  align-items: center;
  gap: 8px;
  /*padding: 0px 20px;*/
  position: relative;
  align-self: stretch;
  width: 100%;
}

.desktop-principale .transition-distress-2 {
  /*top: calc(50.00% + 343px);*/
  /*position: absolute;*/
  width: 100%;
  left: 0;
  /*aspect-ratio: 9.28;*/
  height: 120px;
  z-index: 1;
}

.desktop-principale .img-trans-yellow {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: fill;
  display: block;
}

.desktop-principale .header-text {
  display: inline-flex;
  gap: 16px;
  /*box-shadow: var(--shadow-yellow);*/
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .about-tag-team {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: "Barlow Condensed";
  font-weight: var(--heading-h1-font-weight);
  font-style: var(--heading-h1-font-style);
  color: var(--textbright);
  font-size: var(--heading-h1-font-size);
  text-align: center;
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);  
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-weight: 900;
}

.desktop-principale .a-new-take-on-the {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-h2-font-family);
  font-weight: var(--heading-h2-font-weight);
  font-style: var(--heading-h2-font-style);
  color: var(--textred);
  font-size: var(--heading-h2-font-size);
  text-align: center;
  letter-spacing: var(--heading-h2-letter-spacing);
  line-height: var(--heading-h2-line-height);
}

.desktop-principale .player-youtube-wrapper {
  position: relative;
  max-width: 1300px;
  width: 1030px;
  height: 430px;
}

.desktop-principale .player-youtube {
  position: relative;
  top: calc(50.00% - 203px);
  left: calc(50.00% - 360px);
  width: 720px;
  height: 405px;
  background-color: #000000;
  border-radius: 12px;
  box-shadow: 0px 4px 4px #00000040;
  aspect-ratio: 1.78;
}

.desktop-principale .inspired-by-classic {
  position: relative;
  width: 698px;
  margin-top: -1px;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 400;
  color: var(--collection-de-variables-text-darkblue);
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.desktop-principale .span {
  font-weight: var(--text-l-font-weight);
  font-family: var(--text-l-font-family);
  font-style: var(--text-l-font-style);
  letter-spacing: var(--text-l-letter-spacing);
  line-height: var(--text-l-line-height);
  /*font-size: var(--text-l-font-size);*/
}

.desktop-principale .text-wrapper-5 {
  font-family: var(--text-bold-l-font-family);
  font-weight: var(--text-bold-l-font-weight);
  font-style: var(--text-bold-l-font-style);
  letter-spacing: var(--text-bold-l-letter-spacing);
  line-height: var(--text-bold-l-line-height);
  /*font-size: var(--text-bold-l-font-size);*/
}

.desktop-principale .games-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 45px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop-principale .header-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
  /*box-shadow: var(--shadow-blue);*/
}

.desktop-principale .about-tag-team-2 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--heading-h1-font-family);
  font-weight: var(--heading-h1-font-weight);
  font-style: var(--heading-h1-font-style);
  color: var(--collection-de-variables-text-purple);
  font-size: var(--heading-h1-font-size);
  text-align: center;
  letter-spacing: var(--heading-h1-letter-spacing);
  line-height: var(--heading-h1-line-height);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.desktop-principale .tag-team-is-a-series {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-h2-font-family);
  font-weight: var(--heading-h2-font-weight);
  font-style: var(--heading-h2-font-style);
  color: var(--colorbluegrey);
  font-size: var(--heading-h2-font-size);
  text-align: center;
  letter-spacing: var(--heading-h2-letter-spacing);
  line-height: var(--heading-h2-line-height);
}

/* Module bannière horizontale TTA : même rapport largeur/hauteur que
   Assets/img-background-tta.png (1030×305) pour que la silhouette du
   bloc suive le visuel quel que soit la largeur (max 1030px).
   Le deuxième module (jaune, TTO) suit le même modèle. */
.desktop-principale .TTA-module {
  display: flex;
  width: 100%;
  max-width: 1030px;
  aspect-ratio: 1030 / 305;
  height: auto;
  align-items: center;
  gap: 10px;
  padding: 25px;
  position: relative;
  box-sizing: border-box;
  /* Pour que .content-module puisse prendre la même hauteur que
     img-background-tta (via calc(100cqw * 305 / 1030)). */
  container-type: inline-size;
  container-name: tta-module;
}

/* Couche de fond du module : remplit toute la boîte du module
   (avant on hardcodait 1030×305 ici aussi). */
.desktop-principale .module {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Centrage vertical du fond quand le bloc image (ratio) est plus bas
   que la hauteur du module. */
.desktop-principale .TTA-module > .module,
.desktop-principale .TTA-module-2 > .module {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fond du module TTA : image en HTML (équivalent à background-size: cover
   et background-position: 50% 50%). */
.desktop-principale .img-background-games {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 100%;
  /* Même ratio que Assets/img-background-tta.png (1030×305) pour que
     object-fit: contain sur l’img remplisse la boîte sans bandes quand
     le module est plus étroit que 1030px. */
  aspect-ratio: 1030 / 305;
  height: auto;
}

.desktop-principale .img-background-tta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover + ancrage à droite : évite la bande crème à gauche (letterboxing
     de contain ou transparence PNG) sans toucher au module jaune. */
  object-fit: cover;
  object-position: right center;
  z-index: 0;
  pointer-events: none;
}

/* Fond du module TTO : fond SVG + masque, même ratio que la bannière 1030×305. */
.desktop-principale .img-background-games-2 {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1030 / 305;
  height: auto;
}

.desktop-principale .img-background-tto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  z-index: 0;
  pointer-events: none;
}

/* Masque des personnages (SVG) : remplit toujours toute la boîte du
   module, avec un débord de 20px vers le haut pour que les têtes des
   personnages dépassent légèrement au-dessus de la bannière colorée
   (effet design d'origine). */
.desktop-principale .mask-characters {
  position: absolute;
  width: 100%;
  height: calc(100% + 20px);
  top: -20px;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.desktop-principale .TTA-module > .content-module {
  /* Facteur commun au fond 1030×305 (img-background-tta), bouton, typo .div */
  --tta-s: calc(100cqw / 1030px);
  /* Même hauteur que la bande img-background-tta (.img-background-games) :
     largeur « content » du module × 305/1030 (cf. taille intrinsèque PNG). */
  height: calc(100cqw * 305 / 1030);
  box-sizing: border-box;
  min-height: 0;
  max-width: 100%;
}

.desktop-principale .TTA-module > .content-module > .image {
  flex-shrink: 0;
  max-height: 100%;
  height: auto;
  width: auto;
  max-width: 194px;
  object-fit: contain;
}

/* Module jaune (TTO) : même échelle 1030×305 que le vert (fond, typo,
   bouton, largeur de colonne pour ne pas empiéter sur .mask-characters). */
.desktop-principale .TTA-module-2 > .content-module {
  --tto-s: calc(100cqw / 1030px);
  height: calc(100cqw * 305 / 1030);
  box-sizing: border-box;
  min-height: 0;
  max-width: 100%;
}

.desktop-principale .TTA-module-2 > .content-module > .image {
  flex-shrink: 0;
  max-height: 100%;
  height: auto;
  width: auto;
  max-width: 194px;
  object-fit: contain;
}

.desktop-principale .TTA-module-2 > .content-module .content {
  width: min(366px, 30cqw);
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.desktop-principale .TTA-module-2 > .content-module .div {
  font-size: calc(16px * var(--tto-s));
}

.desktop-principale .TTA-module-2 > .content-module .div .text-wrapper-8 {
  font-size: 2em;
  letter-spacing: 0.06em;
  text-shadow: calc(2px * var(--tto-s)) calc(2px * var(--tto-s)) 0
    rgb(189 152 0 / 50%);
}

.desktop-principale .TTA-module-2 > .content-module .div .p {
  font-size: 1.125em;
  overflow-wrap: break-word;
}

.desktop-principale .TTA-module-2 > .content-module .btn {
  width: calc(250px * var(--tto-s));
  height: calc(61px * var(--tto-s));
  aspect-ratio: auto;
}

.desktop-principale .TTA-module-2 > .content-module .btn .vector {
  left: calc(50% - 124px * var(--tto-s));
  width: calc(248px * var(--tto-s));
  aspect-ratio: 4.07;
  filter: drop-shadow(
    0 calc(4px * var(--tto-s)) calc(8px * var(--tto-s)) rgba(0, 0, 0, 0.3)
  );
}

.desktop-principale .TTA-module-2 > .content-module .btn:hover .vector,
.desktop-principale .TTA-module-2 > .content-module .btn:focus-visible .vector {
  filter: drop-shadow(
    0 calc(6px * var(--tto-s)) calc(12px * var(--tto-s)) rgba(0, 0, 0, 0.35)
  );
}

.desktop-principale .TTA-module-2 > .content-module .btn:active .vector {
  filter: drop-shadow(
    0 calc(2px * var(--tto-s)) calc(4px * var(--tto-s)) rgba(0, 0, 0, 0.3)
  );
}

.desktop-principale .TTA-module-2 > .content-module .btn .text-wrapper-7 {
  top: calc(50% - 34px * var(--tto-s));
  left: calc(50% - 139px * var(--tto-s));
  width: calc(273px * var(--tto-s));
  height: calc(67px * var(--tto-s));
  font-size: calc(35px * var(--tto-s));
  letter-spacing: calc(0.76px * var(--tto-s));
  line-height: calc(38px * var(--tto-s));
  text-shadow: 0 calc(2px * var(--tto-s)) calc(4px * var(--tto-s))
    rgba(0, 0, 0, 0.4);
}

.desktop-principale .content-module {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
}

.desktop-principale .image {
  position: relative;
  width: 194px;
  height: 250px;
  object-fit: cover;
}

.desktop-principale .content {
  display: flex;
  flex-direction: column;
  width: 366px;
  align-items: flex-start;
  gap: 12px;
  position: relative;
}

/* Réserve une bande pour les personnages (.mask-characters) à droite :
   la colonne texte suit la même échelle que le fond via cqw. */
.desktop-principale .TTA-module > .content-module .content {
  width: min(366px, 32cqw);
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.desktop-principale .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--h2-bold-font-family);
  font-weight: var(--h2-bold-font-weight);
  font-style: var(--h2-bold-font-style);
  color: var(--textbright);
  font-size: var(--h2-bold-font-size);
  letter-spacing: var(--h2-bold-letter-spacing);
  line-height: var(--h2-bold-line-height);
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgb(4 85 0 / 25%);
}

.desktop-principale .element-fighters-inspired {
  position: relative;
  align-self: stretch;
  font-family: "Barlow Semi Condensed-Bold", Helvetica;
  font-weight: 400;
  color: var(--textbright);
  font-size: 18px;
  letter-spacing: 0;
  line-height: normal;
}

/* Bloc titre + paragraphe TTA : base 16px × --tta-s, enfants en em
   (32px titre, 1.92px letter-spacing, 18px corps → identique à l’échelle 1). */
.desktop-principale .TTA-module > .content-module .div {
  font-size: calc(16px * var(--tta-s));
}

.desktop-principale .TTA-module > .content-module .div .text-wrapper-6 {
  font-size: 2em;
  letter-spacing: 0.06em;
  text-shadow: 0.0625em 0.0625em 0 rgb(4 85 0 / 25%);
}

.desktop-principale .TTA-module > .content-module .div .element-fighters-inspired {
  font-size: 1.35em;
  overflow-wrap: break-word;
}

.desktop-principale .btn {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: 250px;
  height: 61px;
  aspect-ratio: 4.07;
  cursor: pointer;
}

.desktop-principale .vector {
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(50.00% - 125px);
  width: 248px;
  aspect-ratio: 4.07;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  transition: filter 0.15s ease;
}

.desktop-principale .btn:hover .vector,
.desktop-principale .btn:focus-visible .vector {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}

.desktop-principale .btn:active .vector {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.desktop-principale .text-wrapper-7 {
  position: absolute;
  top: calc(50.00% - 34px);
  left: calc(50.00% - 139px);
  width: 273px;
  height: 67px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Semi Condensed", Helvetica;
  font-weight: 700;
  font-style: italic;
  color: var(--textbright);
  font-size: 35px;
  text-align: center;
  letter-spacing: 0.76px;
  line-height: 38px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Bouton PREORDER (TTA) : même facteur d’échelle que le fond
   img-background-tta.png (largeur de référence 1030px via cqw). */
.desktop-principale .TTA-module > .content-module .btn {
  width: calc(250px * var(--tta-s));
  height: calc(61px * var(--tta-s));
  aspect-ratio: auto;
}

.desktop-principale .TTA-module > .content-module .btn .vector {
  left: calc(50% - 124px * var(--tta-s));
  width: calc(248px * var(--tta-s));
  aspect-ratio: 4.07;
  filter: drop-shadow(
    0 calc(4px * var(--tta-s)) calc(8px * var(--tta-s)) rgba(0, 0, 0, 0.3)
  );
}

.desktop-principale .TTA-module > .content-module .btn:hover .vector,
.desktop-principale .TTA-module > .content-module .btn:focus-visible .vector {
  filter: drop-shadow(
    0 calc(6px * var(--tta-s)) calc(12px * var(--tta-s)) rgba(0, 0, 0, 0.35)
  );
}

.desktop-principale .TTA-module > .content-module .btn:active .vector {
  filter: drop-shadow(
    0 calc(2px * var(--tta-s)) calc(4px * var(--tta-s)) rgba(0, 0, 0, 0.3)
  );
}

.desktop-principale .TTA-module > .content-module .btn .text-wrapper-7 {
  top: calc(50% - 34px * var(--tta-s));
  left: calc(50% - 139px * var(--tta-s));
  width: calc(273px * var(--tta-s));
  height: calc(67px * var(--tta-s));
  font-size: calc(35px * var(--tta-s));
  letter-spacing: calc(0.76px * var(--tta-s));
  line-height: calc(38px * var(--tta-s));
  text-shadow: 0 calc(2px * var(--tta-s)) calc(4px * var(--tta-s))
    rgba(0, 0, 0, 0.4);
}

/* Texte de disponibilité sous le bouton PRE-ORDER (TTA, vert).
   Variante desktop : item flex dans .content, sous le .btn. */
.desktop-principale .cta-availability {
  margin: 0;
  font-family: "Barlow Semi Condensed", Helvetica;
  font-weight: 400;
  color: var(--textbright);
  letter-spacing: 0.2px;
}

.desktop-principale .cta-availability-desktop {
  display: block;
  margin-top: -2px;
  font-size: 15px;
  line-height: 1.2;
  text-align: left;
}

.desktop-principale .TTA-module-2 {
  display: flex;
  width: 100%;
  max-width: 1030px;
  aspect-ratio: 1030 / 305;
  height: auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 25px 11px;
  position: relative;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: tto-module;
}

.desktop-principale .text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--h2-bold-font-family);
  font-weight: var(--h2-bold-font-weight);
  font-style: var(--h2-bold-font-style);
  color: var(--textbright);
  font-size: var(--h2-bold-font-size);
  letter-spacing: var(--h2-bold-letter-spacing);
  line-height: var(--h2-bold-line-height);
  text-shadow: 2px 2px 0 rgb(189 152 0 / 50%);
}

.desktop-principale .p {
  position: relative;
  align-self: stretch;
  font-family: var(--text-l-font-family);
  font-weight: var(--text-l-font-weight);
  color: var(--textbright);
  font-size: var(--text-l-font-size);
  letter-spacing: var(--text-l-letter-spacing);
  line-height: var(--text-l-line-height);
  font-style: var(--text-l-font-style);
}

.desktop-principale .button {
  all: unset;
  box-sizing: border-box;
  position: relative;
  width: 250px;
  height: 62px;
  aspect-ratio: 4.07;
}

.desktop-principale .img {
  position: absolute;
  height: 100%;
  top: 0;
  left: calc(50.00% - 125px);
  width: 248px;
}

.desktop-principale .footer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 60px 20px;
  align-self: stretch;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--backgroundbright);
}

.desktop-principale .logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.desktop-principale .svg-scorpion-masque {
  position: relative;
  width: 90px;
  height: 90px;
}

.desktop-principale .footer-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  align-self: stretch;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .social-icons-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  flex: 0 0 auto;
}

.desktop-principale .img-2 {
  position: relative;
  width: 17px;
  height: 17px;
}

.desktop-principale .svg-social-icons {
  position: relative;
  width: 21px;
  height: 17px;
}

.desktop-principale .vector-2 {
  position: absolute;
  top: calc(50.00% - 8px);
  left: calc(50.00% - 10px);
  width: 21px;
  height: 15px;
  aspect-ratio: 1.42;
}

.desktop-principale .div-3 {
  display: inline-flex;
  gap: 20px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  color: #0f2a8c;
}

.desktop-principale .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
  font-weight: 500;
  color: var(--textblue-night);
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.desktop-principale .text-wrapper-10 {
  position: relative;
  width: fit-content;
  font-family: "Barlow", Helvetica;
  font-weight: 400;
  color: var(--textblue-night);
  font-size: 14px;
  text-align: right;
  letter-spacing: -0.56px;
  line-height: 16.8px;
  white-space: nowrap;
}

.desktop-principale .navigation {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  position: absolute;
  top: 0;
  left:0;
}

.desktop-principale .navigation-2 {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px 80px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #fef7e4;
  padding: 0 40px;
  font-weight:700;
  font-family: "Barlow Semi Condensed-Medium", Helvetica;
}

.desktop-principale .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Barlow Condensed", Helvetica;
  color: var(--textbright);
  font-size: var(--retro-menu-font-size);
  letter-spacing: var(--retro-menu-letter-spacing);
  line-height: var(--retro-menu-line-height);
  white-space: nowrap;
  font-style: italic;
  text-transform: uppercase;
}

.desktop-principale .text-wrapper-12 {
  position: relative;
  width: fit-content;
  font-family: "Barlow Condensed", Helvetica;
  color: #ffffff;
  font-size: var(--retro-menu-font-size);
  letter-spacing: var(--retro-menu-letter-spacing);
  line-height: var(--retro-menu-line-height);
  white-space: nowrap;
  font-style: italic;
}

.desktop-principale .text-wrapper-12[data-lang] {
  cursor: pointer;
  transition: opacity 0.15s ease;
  opacity: 0.55;
  user-select: none;
}

.desktop-principale .text-wrapper-12[data-lang]:hover,
.desktop-principale .text-wrapper-12[data-lang]:focus-visible {
  opacity: 1;
  outline: none;
}

.desktop-principale .text-wrapper-12[data-lang].is-active {
  opacity: 1;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* FR / EN sur une seule ligne (nav mobile + barre desktop si visible). */
.desktop-principale .navigation .nav-lang-group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.desktop-principale .navigation .nav-lang-separator {
  font-family: "Barlow Condensed", Helvetica;
  font-size: var(--retro-menu-font-size);
  font-style: italic;
  font-weight: 700;
  line-height: var(--retro-menu-line-height);
  letter-spacing: var(--retro-menu-letter-spacing);
  color: inherit;
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.desktop-principale .btn-retro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 32px;
  position: relative;
  flex: 0 0 auto;
  background-color: #fae84d;
}

.desktop-principale .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-weight: 700;
  color: #0f2a8c;
  font-size: 20px;
  letter-spacing: 1.2px;
  line-height: normal;
  white-space: nowrap;
  font-family: "Barlow Condensed", Helvetica;
}

.desktop-principale .navigation,
.desktop-principale .navigation .text-wrapper-11,
.desktop-principale .navigation .text-wrapper-12,
.desktop-principale .navigation .text-wrapper-13 {
  color: #0f2a8c;
}

.desktop-principale .tagteam-logo-pixel {
  position: absolute;
  /*top: -25px;*/
  /*left: calc(50.00% - 125px);*/
  width: 250px;
  height: 100%;
}

.desktop-principale .tagteam-logo-pixel-2 {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 33.333%);
  height: 150%;
  width: auto;
  object-fit: contain;
}

/* Bouton hamburger : caché par défaut (uniquement visible en mobile) */
.desktop-principale .btn-burger {
  display: none;
}

/* Image pré-rendue des modules TTA / TTO : cachée en desktop,
   utilisée uniquement en mobile pour remplacer le contenu HTML
   classique des cartes (image + texte + bouton). */
.desktop-principale .module-mobile-image,
.desktop-principale .module-mobile-image-2,
.desktop-principale .module-mobile-mask,
.desktop-principale .module-mobile-mask-2,
.desktop-principale .module-mobile-packshot,
.desktop-principale .module-mobile-packshot-2,
.desktop-principale .module-mobile-button,
.desktop-principale .module-mobile-button-2,
.desktop-principale .module-mobile-text-block,
.desktop-principale .module-mobile-title,
.desktop-principale .module-mobile-desc,
.desktop-principale .module-mobile-title-2,
.desktop-principale .module-mobile-desc-2,
.desktop-principale .cta-availability-mobile {
  display: none;
}

/* Tags décoratifs "COMING SOON" / "AVAILABLE NOW" : à cheval sur le
   haut du module (moitié au-dessus, moitié sur la bannière), comme
   sur la mise en page laptop. */
.desktop-principale .module-tag {
  position: absolute;
  top: 0;
  z-index: 5;
  width: 270px;
  height: auto;
  pointer-events: none;
  transform: translateY(-50%);
}

.desktop-principale .tag-coming-soon {
  left: 40px;
}

.desktop-principale .tag-available-now {
  right: 40px;
}

.desktop-principale u {
  font-size: clamp(18px, 5vw, 36px);
}

.desktop-principale iframe {
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 50px;
}

/* ============================================================ */
/* RESPONSIVE — TABLETTE (768px – 1199px)                        */
/* ============================================================ */
/* Objectif : conserver la mise en forme laptop (modules        */
/* horizontaux, nav avec FR/EN/SHOP visible, vidéos centrées),  */
/* mais adapter les largeurs fixes pour qu'elles tiennent dans  */
/* la viewport.                                                 */
/* ------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1199px) {

  /* --- Section intro : on libère la hauteur fixe et on aère --- */
  .desktop-principale .intro-section {
    height: auto;
    padding: 160px 24px 40px;
    gap: 28px;
  }

  /* --- Header (titre + sous-titre du hero) : largeur fluide --- */
  .desktop-principale .header {
    width: 100%;
    /*max-width: 770px;*/
  }

  /* --- Wrappers principaux : largeurs fluides plafonnées --- */
  .desktop-principale .div-wrapper,
  .desktop-principale .footer-content,
  .desktop-principale .header-wrapper {
    width: 100%;
    /*max-width: 770px;*/
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
  }

  /* --- .div-2 : utilisé un peu partout (DON'T MISS, ABOUT TAG TEAM, */
  /*     paragraphes...). En desktop il est width:1030px ce qui     */
  /*     déborde la viewport en tablette → fluide.                   */
  .desktop-principale .div-2 {
    width: 100%;
    /*max-width: 770px;*/
  }

  /* --- Vidéos (intro + about) : ratio 16/9 fluide centré --- */
  .desktop-principale .content-video,
  .desktop-principale .player-youtube-wrapper {
    width: calc(100% - 48px);
    /*max-width: 770px;*/
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .desktop-principale .group,
  .desktop-principale .player-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }

  /* --- Section features : hauteur libre, pas de padding-bas      */
  /*     (sinon .img-yellow remplit ce padding et on voit une      */
  /*     bande jaune sous .transition-distress-2)                  */
  .desktop-principale .features-section {
    height: auto;
    padding: 0;
  }

  /* --- Section games : padding latéral ; modules plafonnés à 770px --- */
  .desktop-principale .games-section {
    gap: 40px;
    padding: 0 24px 0;
    box-sizing: border-box;
  }

  .desktop-principale .TTA-module,
  .desktop-principale .TTA-module-2 {
    /*max-width: 770px;*/
  }

  /* Étiquettes COMING SOON / AVAILABLE NOW : même ancre que laptop.
     align-items:center sur .module créait une bande crème au-dessus du
     fond ; le tag (top:0 + translateY(-50%)) y restait au lieu de
     chevaucher la bannière colorée. */
  .desktop-principale .TTA-module > .module,
  .desktop-principale .TTA-module-2 > .module {
    align-items: flex-start;
  }

  /* --- Footer : padding latéral confortable --- */
  .desktop-principale .footer {
    padding: 0 24px;
  }

  .desktop-principale .TTA-module > .content-module {
    top: -16px;
  }
  .desktop-principale .TTA-module > .content-module > .image {
    max-width: 150px;
  }

  .desktop-principale .TTA-module-2 > .content-module {
    top: -16px;
  }

  .desktop-principale .module-tag {
    position: absolute;
    top: 0;
    z-index: 5;
    width: 190px;
    height: auto;
    pointer-events: none;
    transform: translateY(-50%);
  }

  /* --- Navigation (FR/EN/SHOP toujours visibles, pas de burger) --- */
  /*     Aucune modification : on garde la nav laptop telle quelle. */
}

/* ============================================================ */
/* RESPONSIVE — MOBILE (< 768px)                                 */
/* ============================================================ */
/* Section 1 : Intro / Hero                                      */
/* ------------------------------------------------------------ */
@media (max-width: 767px) {

  /* Conteneur principal : on libère la hauteur fixe */
  .desktop-principale {
    height: auto;
  }

  /* --- Intro section --- */
  .desktop-principale .intro-section {
    height: auto;
    padding: 120px 16px 40px;
    gap: 24px;
  }

  /* Header (titre + sous-titre) */
  .desktop-principale .header {
    width: 100%;
  }

  .desktop-principale .text-wrapper {
    font-size: clamp(18px, 8vw, 28px);
    line-height: 0.8;
  }

  .desktop-principale .text-wrapper-2 {
    font-size: clamp(16px, 5vw, 24px);
    line-height: 1.2;
  }

  /* Zone vidéo : largeur fluide + ratio 16/9 */
  .desktop-principale .content-video {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .desktop-principale .group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
  }

  .desktop-principale .btn-play {
    width: 56px;
    height: 56px;
    top: calc(50% - 28px);
    left: calc(50% - 28px);
  }

  /* Footer-content (subscribe) */
  .desktop-principale .footer-content {
    width: 100%;
    padding: 0 8px;
  }

  .desktop-principale .div-2 {
    width: 100%;
  }

  .desktop-principale .DON-t-MISS-THE {
    font-size: clamp(18px, 5.5vw, 26px);
    line-height: 1.2;
  }

  /* L'input + bouton-icône restent côte à côte sur mobile */
  .desktop-principale .input-box-btn {
    width: 100%;
    max-width: 460px;
  }

  .desktop-principale .input-box {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 0 14px;
    /* height: 50px; héritée du desktop */
  }

  .desktop-principale .email-input {
    font-size: 16px;
    letter-spacing: 0.5px;
  }

  /* Bouton subscribe : passe en carré et affiche la flèche en mobile */
  .desktop-principale .btn-subscribe {
    width: 50px;
  }

  .desktop-principale .btn-subscribe-text {
    display: none;
  }

  .desktop-principale .arrow-icon {
    display: block;
  }

  .desktop-principale .no-spam-just-the {
    font-size: 14px;
    line-height: 1.3;
  }

  /* ---------------------------------------------------------- */
  /* Section 2 : Features (yellow background + About Tag Team)  */
  /* ---------------------------------------------------------- */

  /* Conteneur : on libère la hauteur fixe (1012px).
     PAS de padding latéral ici, sinon le fond jaune et la bande
     de transition n'iraient pas jusqu'aux bords de l'écran. */
  .desktop-principale .features-section {
    height: auto;
    padding: 0;
    gap: 24px;
  }

  /* Bande de transition : moins haute pour ne pas écraser le visuel */
  .desktop-principale .transition-distress {
    height: 10px;
  }

  /* Titre principal "ABOUT TAG TEAM" (h1 — 60px desktop) */
  .desktop-principale .about-tag-team {
    font-size: clamp(50px, 8vw, 50px);
    letter-spacing: 1.5px;
    line-height: 1.1;
    margin-bottom: 15px;
  }

  /* Sous-titre "A NEW TAKE..." (h2 — 32px desktop) */
  .desktop-principale .a-new-take-on-the {
    font-size: clamp(18px, 5.5vw, 28px);
    letter-spacing: 1px;
    line-height: 1.2;
  }

  /* Player YouTube : largeur fluide avec marge latérale,
     ratio 16/9 conservé. La marge se fait via calc() pour
     ne PAS toucher au .features-section (sinon le fond jaune
     et la bande de transition seraient rétrécis). */
  .desktop-principale .player-youtube-wrapper {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .desktop-principale .player-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }

  /* Texte descriptif "Inspired by classic..." */
  .desktop-principale .inspired-by-classic {
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
  }

  /* Padding latéral pour les blocs de texte (titre + description),
     SANS toucher à features-section pour préserver les bords. */
  .desktop-principale .div-wrapper {
    padding: 0 16px;
  }

  /* ---------------------------------------------------------- */
  /* Section 3 : Games (TAG TEAM COLLECTION + 2 cartes)         */
  /* En mobile, on remplace tout le contenu HTML des modules    */
  /* (background + personnages + packshot + texte + bouton)     */
  /* par une seule image pré-rendue par module.                 */
  /* ---------------------------------------------------------- */

  .desktop-principale .transition-distress-2 {
    height: 60px;
  }

  /* En-tête de section (TAG TEAM COLLECTION + sous-titre) */
  .desktop-principale .about-tag-team-2 {
    font-size: clamp(50px, 8vw, 50px);
    letter-spacing: 1.5px;
    line-height: 1.1;
    margin-bottom: 15px;
    margin-top: 10px;
  }

  .desktop-principale .tag-team-is-a-series {
    font-size: clamp(15px, 4.2vw, 32px);
    letter-spacing: 0.5px;
    line-height: 1.3;
  }

  /* Le wrapper du module devient juste un conteneur pour l'image.
     On annule explicitement l'aspect-ratio hérité du desktop sinon
     le module serait écrasé en bannière horizontale ; en mobile il
     doit prendre la hauteur naturelle du SVG vector_green/yellow. */
  .desktop-principale .TTA-module,
  .desktop-principale .TTA-module-2 {
    display: block;
    width: calc(100% - 24px);
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    margin: 0 auto;
  }

  /* Cacher tout le contenu desktop (background + content-module) */
  .desktop-principale .TTA-module > .module,
  .desktop-principale .TTA-module > .content-module,
  .desktop-principale .TTA-module-2 > .module,
  .desktop-principale .TTA-module-2 > .content-module {
    display: none;
  }

  /* Afficher l'image de fond. Le SVG vector_green a déjà sa propre
     forme/découpe : pas besoin de border-radius ni corner-shape. */
  .desktop-principale .module-mobile-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .desktop-principale .module-mobile-image-2 {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Mask des personnages : superposition au-dessus de l'image de fond,
     même boîte (inset: 0), opacité 60%, mêmes coins arrondis. */
  .desktop-principale .module-mobile-mask {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    border-radius: 20px;
    corner-shape: bevel;
    pointer-events: none;
  }

  .desktop-principale .module-mobile-mask-2 {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    border-radius: 20px;
    corner-shape: bevel;
    pointer-events: none;
  }

  /* Packshot du jeu : centré horizontalement, abaissé pour laisser
     la place au titre + description en haut. */
  .desktop-principale .module-mobile-packshot {
    display: block;
    position: absolute;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 67%;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }

  .desktop-principale .module-mobile-packshot-2 {
    display: block;
    position: absolute;
    top: 51%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 77%;
    height: auto;
    z-index: 2;
    pointer-events: none;
  }

  /* Bouton PRE-ORDER : conteneur <button> contenant le SVG jaune en
     fond et le texte "PRE-ORDER" superposé. Centré horizontalement
     en bas du module. */
    .desktop-principale .module-mobile-button {
    all: unset;
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: auto;
    z-index: 3;
    cursor: pointer;
  }

  /* Texte de disponibilité (TTA) : juste sous le bouton PRE-ORDER,
     sans déplacer le bouton. Positionné en bas du module. */
  .desktop-principale .cta-availability-mobile {
    display: block;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    margin: 0;
    font-size: clamp(10px, 2.6vw, 13px);
    line-height: 1.15;
    text-align: center;
    z-index: 3;
    pointer-events: none;
  }

  .desktop-principale .cta-availability-desktop {
    display: none;
  }

  .desktop-principale .module-mobile-button-2 {
    all: unset;
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: auto;
    z-index: 3;
    cursor: pointer;
  }

  .desktop-principale .module-mobile-button-bg {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: filter 0.15s ease;
  }

  .desktop-principale .module-mobile-button:hover .module-mobile-button-bg,
  .desktop-principale .module-mobile-button-2:hover .module-mobile-button-bg,
  .desktop-principale .module-mobile-button:focus-visible .module-mobile-button-bg,
  .desktop-principale .module-mobile-button-2:focus-visible .module-mobile-button-bg {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
  }

  .desktop-principale .module-mobile-button:active .module-mobile-button-bg,
  .desktop-principale .module-mobile-button-2:active .module-mobile-button-bg {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }

  .desktop-principale .module-mobile-button-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    width: 100%;
    font-family: "Barlow Semi Condensed", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: clamp(26px, 9vw, 38px);
    line-height: 1;
    letter-spacing: 0.5px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
    pointer-events: none;
    font-style: italic;
  }

  /* Tag COMING SOON : réaffiché en mobile, recentré en haut du module
     pour le premier module uniquement (le second utilise une image
     pré-rendue qui le contient déjà). */
  .desktop-principale .module-tag {
    display: none;
  }

  .desktop-principale .TTA-module .module-tag.tag-coming-soon {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 65%;
    z-index: 3;
  }

  .desktop-principale .TTA-module-2 .module-tag.tag-available-now {
    display: block;
    top: 0;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 75%;
    z-index: 3;
  }

  /* Bloc titre + description regroupés dans un conteneur flex column.
     Positionné en absolu sur le module mobile, centré verticalement
     entre le tag "COMING SOON" / "AVAILABLE NOW" en haut et le
     packshot en bas. Le gap interne sépare le titre de la description
     de manière cohérente entre les deux modules. */
  .desktop-principale .module-mobile-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 2.5vw, 14px);
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: 3;
    pointer-events: none;
  }

  /* Le module jaune a un packshot positionné un peu plus haut
     (top: 51% vs 59%) : on remonte donc le bloc texte en conséquence. */
  .desktop-principale .module-mobile-text-block-2 {
    top: 18%;
  }

  /* Titre overlay : "TAG TEAM ARTHUR'S LEGACY".
     Police "Barlow Condensed" weight 800 italic. -webkit-text-stroke
     ajoute un contour de la même couleur qui épaissit les traits. */
  .desktop-principale .module-mobile-title {
    display: block;
    width: 100%;
    margin: 0;
    font-family: "Barlow Condensed", Helvetica;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-stroke: 0.5px #ffffff;
    font-size: clamp(22px, 11.5vw, 38px);
    line-height: 1;
    text-align: center;
    text-shadow: 2px 2px 0 rgb(4 85 0 / 32%);
    font-style: italic;
    letter-spacing: 2px;
  }

  .desktop-principale .module-mobile-title-2 {
    display: block;
    width: 100%;
    margin: 0;
    font-family: "Barlow Condensed", Helvetica;
    font-weight: 800;
    color: #ffffff;
    -webkit-text-stroke: 0.5px #ffffff;
    font-size: clamp(22px, 11.5vw, 38px);
    line-height: 1;
    text-align: center;
    text-shadow: 2px 2px 0 rgb(189 152 0 / 64%);
    font-style: italic;
    letter-spacing: 2px;
  }

  /* Description sous le titre. La largeur reste à 75% pour conserver
     une mesure de lecture confortable, le centrage est assuré par
     align-items: center du conteneur flex. */
  .desktop-principale .module-mobile-desc {
    display: block;
    width: 75%;
    margin: 0;
    font-family: "Barlow Semi Condensed", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: clamp(14px, 3.4vw, 15px);
    line-height: 1.25;
    text-align: center;
  }

  .desktop-principale .module-mobile-desc-2 {
    display: block;
    width: 75%;
    margin: 0;
    font-family: "Barlow Semi Condensed", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: clamp(14px, 3.4vw, 15px);
    line-height: 1.25;
    text-align: center;
  }

  .desktop-principale .module-mobile-desc strong,
  .desktop-principale .module-mobile-desc-2 strong {
    font-weight: 700;
  }

  /* ---------------------------------------------------------- */
  /* Section 4 : Footer                                         */
  /* ---------------------------------------------------------- */

  .desktop-principale .footer {
    padding: 40px 16px;
    gap: 16px;
  }

  /* Liens DISCOVER / TAG TEAM COLLECTION / SHOP : on autorise le wrap */
  .desktop-principale .footer-header > .div-3 {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
  }

  .desktop-principale .text-wrapper-9 {
    font-size: 15px;
  }

  /* Copyright peut s'enrouler */
  .desktop-principale .text-wrapper-10 {
    white-space: normal;
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    padding: 0 8px;
  }

  /* ---------------------------------------------------------- */
  /* Section 5 : Navigation mobile (logo centré + burger jaune) */
  /* ---------------------------------------------------------- */

  .desktop-principale .navigation {
    width: 100%;
    left: 0;
    padding: 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 110px;
  }

  /* Tout le menu desktop (about / collection / FR / EN / SHOP) caché.
     Sera remplacé par un menu déroulant qui s'ouvrira via le burger. */
  .desktop-principale .navigation-2 {
    display: none;
  }

  /* Bouton hamburger : carré jaune en haut à droite */
  .desktop-principale .btn-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 18px;
    right: 16px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    background-color: #fcf410;
    cursor: pointer;
    transition: background-color 0.15s ease;
    z-index: 20;
  }

  .desktop-principale .btn-burger:hover,
  .desktop-principale .btn-burger:focus-visible {
    background-color: #ffe600;
  }

  .desktop-principale .burger-icon {
    width: 28px;
    height: 28px;
    display: block;
    flex: 0 0 auto;
  }

  /* Logo pixel : centré horizontalement et verticalement dans la nav,
     plus grand qu'avant pour matcher la maquette */
  .desktop-principale .tagteam-logo-pixel {
    position: relative;
    width: 200px;
    height: 80px;
    margin: 0 auto;
  }

  /* ---------------------------------------------------------- */
  /* Menu déroulant mobile : visible quand on tape le burger    */
  /* ---------------------------------------------------------- */
  .desktop-principale .navigation.is-open .navigation-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    padding: 86px 16px 32px;
    background-color: #fef7e4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 25;
  }

  .desktop-principale .navigation.is-open .navigation-2 .div-3 {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
  }

  .desktop-principale .navigation.is-open .navigation-2 .text-wrapper-11,
  .desktop-principale .navigation.is-open .navigation-2 .text-wrapper-12,
  .desktop-principale .navigation.is-open .navigation-2 .nav-lang-separator {
    font-size: clamp(18px, 5vw, 24px);
  }

  /* Burger toujours visible au-dessus du panneau quand le menu est ouvert */
  .desktop-principale .navigation.is-open .btn-burger {
    background-color: #ffe600;
    position: fixed;
    z-index: 30;
  }

  .desktop-principale .tagteam-logo-pixel-2 {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 5.333%);
    height: 100%;
    width: auto;
    object-fit: contain;
  }
}