/* --------------------------------------------------------------------
   Feuille principale, chargee sans bloquer le rendu (voir index.html).
   Elle arrive APRES le premier paint.

   REGLE : ne pas redeclarer ici une propriete deja posee dans le bloc
   <style> de index.html. Les deux se completent, ils ne se doublent pas.
   Une valeur declaree aux deux endroits produit un changement visible au
   chargement de cette feuille.
   -------------------------------------------------------------------- */



/* 1. Famille "Suisse intl" (regroupe Regular, Semibold et Italic) */

@font-face {
  font-family: 'Suisse intl';
  src: url('public/fonts/SuisseIntl-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 2. Famille "Suisse works" (regroupe les variantes WebXL et WebS) */
@font-face {
  /* Remplace Suisse Works, qui appartenait au projet d'origine. Variable sur
     la graisse (300 a 700), un seul fichier pour toutes les valeurs.
     Note : les axes SOFT et WONK de Fraunces ne sont pas dans ce fichier,
     Google Fonts ne sert que la graisse. Voir CLAUDE.md. */
  font-family: 'Fraunces';
  src: url('public/fonts/Fraunces-Variable.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* 3. Famille "Suisse intl mono" (regroupe WebS et WebXL sous un même nom) */
@font-face {
  /* Remplace Suisse Intl Mono. Usage reel : de petites etiquettes, pas du code. */
  font-family: 'IBM Plex Mono';
  src: url('public/fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('public/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}



:root {

  --font-sm: 1rem;
  --font-lg: 2rem;
  --font-xl: 2.5rem;
  --font-2xl: 3rem;
  --font-3xl: 4rem;
  --font-333xl: 5rem;
  --font-5xl: 8rem;
  --font-mega: 20rem;


  --font-mobile-xs: 0.75rem;
  --font-mobile-lg: 1.5rem;
  --font-mobile-2xl: 2.5rem;
  --font-mobile-3xl: 3rem;
  --font-mobile-4xl: 4rem;
  --font-mobile-giant: 15rem;

  /* Fond et texte, remontes du second :root, fusionne le 2026-08-14 */
  --light: #edf1e8;
  --dark: #010010;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Suisse intl", sans-serif;
  /* Le curseur vit desormais dans le bloc <style> de index.html, et nulle
     part ailleurs. Cette regle-ci pointait encore sur l'icone Brave et, la
     feuille externe etant chargee apres le bloc inline, elle l'emportait. */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-1-wrapper section,
.site-2-wrapper section,
.site-3-wrapper section,
.site-3-wrapper .hero-3,
.site-3-wrapper .outro-3 {
  margin-bottom: -1px;
}








.css-button-sliding-to-left--accent::after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background:  linear-gradient(227deg, var(--accent) 0%, #ff8971 100%);
    border-radius: 8px;
}


@media (max-width: 1024px) {
}





 



@media (max-width: 360px) {
  .css-button-sliding-to-left--accent {
    top: 8px;
    left: 8px;
    min-width: 70px;
    height: 30px;
    font-size: 0.625rem;
    padding: 4px 8px;
  }



}

.site-1-wrapper {

  --bg: #010010;
  --fg: #fff;
  --card-1: #b2b2b2;
  --card-2: #ce2017;
  --card-3: #2f2f2f;
}


.site-1-wrapper h1 {
  font-family: "Fraunces", serif;
  font-size: var(--font-3xl);
  font-weight: 500;
  line-height: 1.125;
}

.site-1-wrapper p {
  font-family: "Fraunces", serif;
  font-size: var(--font-lg);
  font-weight: 500;
  line-height: 1;
}

.site-1-wrapper .intro-heading .word {
  display: inline;
  white-space: nowrap;
}

.site-1-wrapper .intro-heading .char {
  display: inline-block;
}


.site-1-wrapper .outro-heading {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(50px);
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}



.site-1-wrapper .intro-image {
  display: none;
}
.site-1-wrapper section {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  background-color: var(--bg);
  color: var(--fg);
}

.site-1-wrapper .intro,
.site-1-wrapper .outro {
  text-align: center;
  align-content: center;

}

.site-1-wrapper .intro h1,
.site-1-wrapper .outro h1 {
  /* Etait 30%, calibre pour les slogans courts du projet d'origine. Une phrase
     de 36 caracteres y tombait sur 4 lignes, la chute sur 5. 55% tient en 2. */
  width: 55%;
  margin: 0 auto;
}

.site-1-wrapper .sticky {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-1-wrapper .sticky-header {
  position: absolute;
  top: 13.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.site-1-wrapper .sticky-header h1 {
  position: relative;
  text-align: center;
  will-change: transform, opacity;
  transform: translateY(40px);
  opacity: 0;
}

.site-1-wrapper .card-container {
  position: relative ;
  width: 75%;
  display: flex;
  perspective: 1000px;

  /* will-change: width, gap retire le 2026-08-14 : ces deux proprietes
     declenchent le layout, l'indice ne peut rien preparer et coute une
     couche gardee en reserve pour rien. */
}

.site-1-wrapper .card {
  position: relative;
  flex: 1;
  aspect-ratio: 5/7;
  transform-style: preserve-3d;
  transform-origin: top;

}

.site-1-wrapper #card-1 {
  border-radius: 20px 0 0 20px;
}

.site-1-wrapper #card-3 {
  border-radius: 0 20px 20px 0;
}

.site-1-wrapper .card-front,
.site-1-wrapper .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: inherit;
  overflow: hidden;
}

.site-1-wrapper .card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotateY(180deg);
  padding: 2rem;
}

.site-1-wrapper .card-back span {
  position: absolute;
  top: 2rem;
  left: 2rem;
  opacity: 0.4;
}

.site-1-wrapper #card-1 .card-back {
  background-color: var(--card-1);
  color: var(--bg);
}

.site-1-wrapper #card-2 .card-back {
  background-color: var(--card-2);
}

.site-1-wrapper #card-3 .card-back {
  background-color: var(--card-3);
}


@media (max-width: 1000px) {
  .site-1-wrapper h1 {
    font-size: var(--font-mobile-3xl);
  }

  .site-1-wrapper .intro h1,
  .site-1-wrapper .outro h1 {
    width: 100%;
  }

  .site-1-wrapper .sticky {
    height: max-content;
    padding: 4rem 2rem;
    flex-direction: column;
  }

  .site-1-wrapper .sticky-header {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin-bottom: 4rem;
  }

  .site-1-wrapper .sticky-header h1 {
    opacity: 1;
  }

  .site-1-wrapper .card-container {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
  }

  .site-1-wrapper .card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
       aspect-ratio: 5/7;
    border-radius: 20px !important;
  }

  .site-1-wrapper #card-1,
  .site-1-wrapper #card-2,
  .site-1-wrapper #card-3,
  .site-1-wrapper .card-back {
    transform: none;
  }


  .site-1-wrapper .intro-image {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 2rem auto 0;
    aspect-ratio: 5/7;
    border-radius: 20px;
    overflow: hidden;
  }

  .site-1-wrapper .intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.8;
     border-radius: 20px;
  }


  .site-1-wrapper .intro-image {
    opacity: 0;
    transform: translateY(30px);
     transition: opacity 0.8s ease-out 2s, transform 0.8s ease-out 1.8s;
    will-change: opacity, transform;
  }



}


.site-2-wrapper {

  --base-100: #010010;
  --base-200: #f2f5ea;
  --base-300: var(--accent);
  /* Variante du meme accent pour du TEXTE sur fond clair. Mesure : #fc694c sur
     le creme #f2f5ea ne donne que 2,62:1, sous le seuil WCAG de 3:1 pour du
     grand texte. Le corail plein reste juste pour les aplats et pour le texte
     sur fond sombre, ou il est largement au-dessus. */
  --accent-sur-clair: #b8452a;
  --base-500: #6a6a6a;   /* etait #707070 : 4,49:1 sur le creme, juste sous le seuil de 4,5 */
  background-color: var(--base-100);
  color: var(--base-500);
}


.site-2-wrapper h1 {
  font-family: "Fraunces", serif;
  text-transform: uppercase;
  font-size: var(--font-5xl);
  font-weight: 600;   /* etait 800 : Fraunces plafonne a 700, le navigateur clampait */
  line-height: 0.9;
}

.site-2-wrapper p {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-size: var(--font-sm);
  font-weight: 500;
  line-height: 1;
}

.site-2-wrapper section {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  padding: 1rem;
}
.site-2-wrapper .hero h1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;

}


.site-2-wrapper .hero,
.site-2-wrapper .outro-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}

.site-2-wrapper .hero h1{
  width: 75%;
  color: var(--base-300);
}
.site-2-wrapper .outro-2 h1 {
  width: 75%;
  color: var(--base-200);
  /* Etait 6.5rem fixe, ce qui donnait un bloc de 554px sur un ecran de 492 :
     le lien debordait de l'ecran sur mobile. En vw il suit la largeur, et le
     plafond de 6.5rem conserve la taille de bureau. */
  font-size: clamp(2.25rem, 13vw, 6.5rem);
}

.site-2-wrapper .team {

  display: flex;
  gap: 1rem;
}

.site-2-wrapper .team-member {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(242, 245, 234, 0.35);
  border-radius: 1.5rem;
  will-change: transform;
}

.site-2-wrapper .team-member-info h1 span.color-accent {
  color: var(--accent-sur-clair) !important;
}

.site-2-wrapper .team-member:nth-child(1) {
  z-index: 2;
}

.site-2-wrapper .team-member:nth-child(2) {
  z-index: 1;
}

.site-2-wrapper .team-member:nth-child(3) {
  z-index: 0;
}

.site-2-wrapper .team-member-name-initial {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.site-2-wrapper .team-member-name-initial h1 {
  color: var(--base-300);
  font-size: var(--font-mega);
  will-change: transform;
}

.site-2-wrapper .team-member-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  background-color: var(--base-200);
  border-radius: 1.5rem;
  will-change: transform;
}

.site-2-wrapper .team-member-img {
  aspect-ratio: 1;
  border-radius: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.site-2-wrapper .team-member-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.site-2-wrapper .team-member-info h1 {
  font-size: var(--font-333xl);
  color: var(--base-300);
}
.site-2-wrapper .team-member-info h1 span {
  color: var(--base-100);
}

.site-2-wrapper .team-member-info p {
  color: var(--base-500);
}
.site-2-wrapper .team-member {
  transform: translateY(125%);
}

.site-2-wrapper .team-member-name-initial h1 {
  transform: scale(0);
}

.site-2-wrapper .team-member:nth-child(1) .team-member-card {
  transform: translate(300%, -50%) scale(0.75) rotate(20deg);
}

.site-2-wrapper .team-member:nth-child(2) .team-member-card {
  transform: translate(200%, -50%) scale(0.75) rotate(20deg);
}

.site-2-wrapper .team-member:nth-child(3) .team-member-card {
  transform: translate(100%, -50%) scale(0.75) rotate(20deg);
}


.site-2-wrapper .scroll-float-text {
  display: inline-block;
  overflow: visible;
}

.site-2-wrapper .scroll-float-text .char {
  display: inline-block;
  will-change: opacity, transform;
}


.site-2-wrapper .outro-2-title .word {
  display: inline-block;
  white-space: nowrap;
}

.site-2-wrapper .outro-2-title .char {
  display: inline-block;
  will-change: opacity, transform;
}


.site-2-wrapper .outro-2-title a {
  color: var(--accent);

  display: inline;
  /* Cette regle imposait display: inline, ce qui faisait de la fleche ::after
     un element en ligne : elle basculait a la ligne suivante des que le libelle
     s'allongeait. En inline-block, la boite du lien ne se scinde plus en deux
     fragments et le <br> interne controle seul la coupure. */
  display: inline-block;
  text-align: center;
}

.site-2-wrapper .outro-2-title a .word {
  display: inline;
}


.site-2-wrapper .link-box {
  color: var(--accent);
  text-decoration: none;
  background: rgba(247, 41, 0, 0.15);
  /* Etait 0.02em 0.2em, soit environ 21px a cette taille : LOOKUP montait a
     12px du bord et croisait la fleche en diagonale. */
  padding: 0.05em 0.42em 0.12em;
  border-radius: 21px;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid var(--accent);
  position: relative;
  overflow: hidden;
}


.site-2-wrapper .link-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background:  linear-gradient(227deg, var(--accent) 0%, #ca3315 100%);
  border-radius: 21px;
}


.site-2-wrapper .link-box:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(252, 105, 76, 0.4);
  background: rgba(247, 41, 0, 0.15);
  border: 1px solid var(--accent);
}


.site-2-wrapper .link-box:hover::before {
  width: 100%;
}


.site-2-wrapper .link-box::after {
  content: '→';
  /* Hors du flux : dans le flux, la fleche s'ajoutait a la seconde ligne et
     poussait LOOKUP vers la gauche, les deux lignes n'etaient plus centrees
     l'une sur l'autre. */
  position: absolute;
  right: 0.1em;
  bottom: 0.04em;
  font-size: .5em;
  opacity: 0.5;
  transform: translateX(-5px);
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.site-2-wrapper .link-box:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.site-2-wrapper .link-box .char {
  display: inline-block;
}


@media (max-width: 1000px) {

  .site-2-wrapper h1 {
    font-size: var(--font-mobile-4xl);
  }

  .site-2-wrapper .hero h1 {
    width: 100%;
    line-height: 1.1;
    margin-top: -20rem;
    margin-bottom: -30rem;
  }
  .site-2-wrapper .outro-2 h1 {
    width: 100%;
    line-height: 1.1;
    margin-top: -50rem;
    margin-bottom: -20rem;

  }

  .site-2-wrapper .team {
    height: 400svh;
    flex-direction: column;
    align-items: center;
    gap: 40svh;
    padding: 50svh 0;
  }

  .site-2-wrapper .team-member {
    max-width: 400px;
    height: auto;
    min-height: 500px;
    transform: translateY(0%) !important;
  }

  .site-2-wrapper .team-member-name-initial h1 {
    font-size: var(--font-mobile-giant);
    transform: scale(1);
  }


  .site-2-wrapper .team-member .team-member-card {
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
  }

  .site-2-wrapper .team-member-info h1 {
    font-size: var(--font-mobile-4xl);
  }

  .site-2-wrapper .team-member-img {
    width: 100%;
  }

  body {
    overflow-x: hidden;
  }

  .site-2-wrapper .team-member-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  }
  .site-2-wrapper .hero h1 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* La question doit tenir sur deux lignes comme en bureau. A 64px, "to check?"
     demande 381px pour 358 de disponible : la ligne cassait, et la question se
     lisait WHO / GETS / TO / CHECK? sur quatre lignes, deux mots-outils isoles.
     15vw donne 58px sur un ecran de 390, et le plafond garde la taille d'avant
     des que l'ecran peut la porter. */
  font-size: clamp(2.5rem, 15vw, var(--font-mobile-4xl));
}
.site-2-wrapper .team-member:nth-child(1) .team-member-card {
  transform: translate(300%, -50%) scale(0.90) rotate(20deg);
}

.site-2-wrapper .team-member:nth-child(2) .team-member-card {
  transform: translate(200%, -50%) scale(0.90) rotate(20deg);
}

.site-2-wrapper .team-member:nth-child(3) .team-member-card {
  transform: translate(100%, -50%) scale(0.90) rotate(20deg);
}

.site-2-wrapper .outro-2-title a {
  color: #ffffff;

}
  .site-2-wrapper .link-box {
    background: #fc694cd3;
    /* Bordure blanche retiree : sur le corail plein, elle detourait le bouton
       en pastille de kit. Transparente plutot qu'absente, pour que la boite
       garde exactement la meme taille qu'en bureau. */
    border-color: transparent;
    color: #fff;
  }

}


.site-3-wrapper h1 {
  font-family: "Fraunces", serif;
  font-size: var(--font-3xl);
  font-weight: 500;
  letter-spacing: -0.075rem;
  line-height: 1.125;
}

.site-3-wrapper h3 {
  font-family: "Suisse intl", sans-serif;
  font-size: var(--font-2xl);
  font-weight: 500;
  letter-spacing: -0.025rem;
  line-height: 1.125;
}

.site-3-wrapper .container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--light);
  /* will-change: background-color retire le 2026-08-14 : propriete de paint,
     pas de composition. Sur ce conteneur plein ecran, l'indice forcait une
     couche de la taille du viewport en permanence. */

}

.site-3-wrapper .hero-3,
.site-3-wrapper .outro-3 {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  align-content: center;
  text-align: center;
}

/* Le mot doit atteindre les bords : la marge laterale de 2rem l'en empechait.
   Et le bloc remonte vers le haut de sa section au lieu d'y flotter au centre. */
.site-3-wrapper .hero-3 {
  padding-left: 0;
  padding-right: 0;
  align-content: start;
  padding-top: 8svh;
}


.site-3-wrapper .hero-3-bg-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: auto;
  opacity: 0.04;
  z-index: 0;
  object-fit: cover;
}


/* Occupe le creux laisse par le filigrane du projet d'origine, qui etait a 4%
   d'opacite. Ici le mot doit se lire : la phrase qui suit commence par
   "is not charity" et n'a plus de sujet sans lui.
   Meme couleur que le reste du titre, la hierarchie passe par la taille et la
   graisse : le fond de cette section vire du clair au sombre au defilement,
   un mot en encre sombre y disparaitrait. */
.site-3-wrapper .hero-3-word {
  display: block;
  /* Cale sur la largeur d'ecran. Mesure : 13 signes en Fraunces 300 occupent
     6,23 em, donc 100vw / 6,23 = 16vw. Pas de clamp : le mot doit remplir
     l'ecran a toutes les tailles, c'est la demande. */
  font-size: 15.6vw;
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin-bottom: 0.12em;
}

.site-3-wrapper .hero-3 h1 {
  position: relative;
  z-index: 1;
  /* Etait 75% : le mot ne pouvait pas depasser 72% de l'ecran. */
  width: 100%;
  margin: 0 auto;
  color: var(--accent);
  margin-bottom: -7rem;
}

/* La phrase suit la largeur au lieu de sauter par paliers. Mesure avant :
   40px sur un ecran de 390, ce qui coupait "It is thirty years of shipping"
   en deux lignes avec "shipping" seul. 7vw donne 27px la et reste plafonne a
   4rem sur grand ecran. */
.site-3-wrapper .hero-3-phrase {
  display: block;
  font-size: clamp(1.4rem, 7vw, 4rem);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .site-3-wrapper .hero-3 h1 {
    /* Le dernier arret etait #edf1e8, soit exactement la couleur du fond de
       cette section : le texte s'eteignait dans le decor. Mesure avant
       correction, les deux dernieres lignes tombaient a 2,27:1 et 1,64:1,
       sous le seuil WCAG de 3:1 pour du grand texte.
       Le corail pur ne peut pas servir ici non plus : #fc694c sur #edf1e8
       ne donne que 2,46:1. Les arrets bas passent donc sur des coraux brules
       qui tiennent le contraste tout en gardant la descente chaude. */
    background: linear-gradient(to bottom, #010010 0%, #c14a2c 60%, #9e3620 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.site-3-wrapper .outro-3 h1 {
  width: 75%;
  margin: 0 auto;
   line-height: 1.05;

}

.site-3-wrapper .outro-3 {
  background-color: var(--dark);
  color: var(--light);

}

.site-3-wrapper .outro-3::before {
  content: '';
  position: absolute;
  top: -5.5vh;
  left: 0;
  width: 100%;
  height: 5.5vh;
  background-color: var(--dark);
  z-index: 1;
}

.site-3-wrapper .marquee {
  position: relative;
  width: 100%;
  height: 50svh;
  overflow: hidden;
}

.site-3-wrapper .marquee-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 150%;
  height: 100%;
}

.site-3-wrapper .marquee-images {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
  width: 200%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  will-change: transform;
}

.site-3-wrapper .marquee-img {
  flex: 1;
  width: 100%;
  aspect-ratio: 5/3;
  overflow: hidden;
}

.site-3-wrapper .marquee-img img {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}


.site-3-wrapper .marquee-img:hover img {
  transform: scale(1.2);
}

.site-3-wrapper .horizontal-scroll {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.site-3-wrapper .horizontal-scroll-wrapper {
  position: relative;
  width: 300%;
  height: 100dvh;
  display: flex;
  will-change: transform;
}

.site-3-wrapper .horizontal-slide {
  flex: 1;
  height: 100%;
  display: flex;
  gap: 2rem;
  padding: 2rem;
}

.site-3-wrapper .horizontal-slide:not(.horizontal-spacer) {
  background-color: var(--dark);
  color: var(--light);
}

.site-3-wrapper .horizontal-slide .col:nth-child(1) {
  flex: 3;
}

.site-3-wrapper .horizontal-slide .col:nth-child(2) {
  flex: 2;
}

.site-3-wrapper .horizontal-scroll .col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-3-wrapper .horizontal-slide .col h3,
.site-3-wrapper .horizontal-slide .col img {
  width: 75%;
}

.site-3-wrapper .horizontal-slide .col img {
  height: 75%;
}


.site-3-wrapper .horizontal-slide:nth-last-child(2) .col img {

  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 0%,
    100% 100%,
    0% 100%,
    0% 0%
  );

  transition: clip-path 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s ease;
}


.site-3-wrapper .horizontal-slide:nth-last-child(2) .col img:hover {
  clip-path: polygon(
    35% 0%,
    80% 0%,
    100% 10%,
    100% 100%,
    0% 100%,
    0% 25%
  );
  transform: scale(1.03) rotate(1deg);
}


.site-3-wrapper .horizontal-slide:last-child .col img {

    clip-path: polygon(50% 10%, 75% 50%, 50% 100%, 25% 50%);
  transition: clip-path 0.3s ease, transform 0.3s ease;
}


.site-3-wrapper .horizontal-slide:last-child .col img:hover {
  clip-path: polygon(40% 0%, 100% 40%, 50% 100%, 0% 50%);
  transform: scale(1.05);
}


@media (max-width: 1000px) {
  .site-3-wrapper h1 {
    font-size: var(--font-mobile-2xl);
    letter-spacing: -0.05rem;
  }

  .site-3-wrapper h3 {
    font-size: var(--font-mobile-lg);
  }

  .site-3-wrapper .hero-3 h1,
  .site-3-wrapper .outro-3 h1 {
    width: 100%;
  }

  /* Le mot en haut, la phrase en bas, l'espace reparti entre les deux. Mesure
     avant : la phrase finissait a 310px d'une section de 844, ce qui laissait
     533px de vide d'un coup avant le carrousel, soit 63% de la section. Le
     projet d'origine separait deja les deux, mais par accident : le mot y
     etait un filigrane en position absolue, pas un morceau du titre. */
  .site-3-wrapper .hero-3 {
    padding-bottom: 12svh;
  }

  .site-3-wrapper .hero-3 h1 {
    display: grid;
    align-content: space-between;
    min-height: 80svh;
  }

  /* Le -12rem herite remontait le titre AU-DESSUS de sa section : mesure a
     -124px du haut, donc le mot etait coupe. La position verticale est
     desormais tenue par le padding-top de la section, pas par une marge
     negative. outro-3 garde la sienne, elle n'a pas le meme probleme. */
  .site-3-wrapper .outro-3 h1 {
    margin-top: -12rem;
  }
  .site-3-wrapper .outro-3 h1 {
   font-size: var(--font-mobile-3xl);

  }

  .site-3-wrapper .marquee-wrapper {
    width: 300%;
  }

  .site-3-wrapper .horizontal-slide {
    padding: 4rem;
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .site-3-wrapper .horizontal-slide .col:nth-child(1) {
    align-items: flex-start;
  }

  .site-3-wrapper .horizontal-slide .col h3 {
    width: 100%;
  }

  .site-3-wrapper .horizontal-slide .col img {
    width: 100%;
    height: 100%;
  }


  .site-3-wrapper .horizontal-slide:last-child .col img {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}


.site-4-wrapper {
  --site4-bg: #010010;
  --site4-fg: #edf1e8;
  --site4-accent: var(--accent);
  background-color: var(--site4-bg);
  color: var(--site4-fg);
}


.site-4-wrapper h1 {
  font-family: "Fraunces", serif;
  font-size: var(--font-3xl);
  font-weight: 500;
  line-height: 1;
}

.site-4-wrapper p {
  font-family: "Suisse intl", sans-serif;
  font-size: var(--font-sm);
  font-weight: 400;
  line-height: 1.5;
}


.site-4-wrapper .intro-4,
.site-4-wrapper .outro-4 {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: -40dvh;

}

.site-4-wrapper .intro-4 h1,
.site-4-wrapper .outro-4 h1 {
  width: 75%;
  margin: 0 auto;


}


.site-4-wrapper .stack-section {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
    overflow: visible !important;
  z-index: 100;
   margin-bottom: -20dvh;
}


.site-4-wrapper .stack {
  display: grid;
  grid-template-areas: "stack";
  perspective: 5000px;
  position: relative;
  width: 40vmin;
  height: 40vmin;
  transition: transform 0.3s ease;
   overflow: visible;
}


.site-4-wrapper .stack::before {
  display: none;
}

.site-4-wrapper .stack:hover::before {
  background: #1a1a2e;
}


.site-4-wrapper .stack:hover .card {
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  transform:
    rotateX(45deg) rotate(45deg)
    translateZ(var(--z-offset))
    translateY(20vh)
    translateX(20vh);
}


.site-4-wrapper .stack:hover .card:nth-child(1) { --z-offset: 75vh; }
.site-4-wrapper .stack:hover .card:nth-child(2) { --z-offset: 50vh; }
.site-4-wrapper .stack:hover .card:nth-child(3) { --z-offset: 25vh; }
.site-4-wrapper .stack:hover .card:nth-child(4) { --z-offset: 0vh; }
.site-4-wrapper .stack:hover .card:nth-child(5) { --z-offset: -25vh; }


.site-4-wrapper .stack:hover .card::after {
  opacity: 1;
  transform: rotate(-45deg) rotateY(45deg) translateX(0px);
}


.site-4-wrapper .stack:hover .card:nth-child(1)::after { transition-delay: 1.5s; }
.site-4-wrapper .stack:hover .card:nth-child(2)::after { transition-delay: 1.7s; }
.site-4-wrapper .stack:hover .card:nth-child(3)::after { transition-delay: 1.9s; }
.site-4-wrapper .stack:hover .card:nth-child(4)::after { transition-delay: 2.1s; }
.site-4-wrapper .stack:hover .card:nth-child(5)::after { transition-delay: 2.3s; }


.site-4-wrapper .stack:hover .card.content {
  background: transparent;
  color: var(--site4-fg);
  border-color: transparent;
  transition:
    border-color 1s cubic-bezier(0.85, 0, 0.15, 1) 0s,
    background-color 1s cubic-bezier(0.85, 0, 0.15, 1) 0s,
    color 1s cubic-bezier(0.85, 0, 0.15, 1) 0s,
    transform 2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
}


.site-4-wrapper .stack:hover .card.padding {
  transition-delay: 0.1s;
}

.site-4-wrapper .stack:hover .card.border {
  transition-delay: 0.2s;
}

.site-4-wrapper .stack:hover .card.background {
  background: var(--site4-fg);
  transition:
    background-color 2s cubic-bezier(0.85, 0, 0.15, 1) 0.3s,
    transform 2s cubic-bezier(0.85, 0, 0.15, 1) 0.2s;
}

.site-4-wrapper .stack:hover .card.box-shadow {
  transition-delay: 0.4s;
  box-shadow:
    0 -1px 25px rgba(0, 0, 0, 0.4),
    0 7.6px 6.1px rgba(0, 0, 0, 0.051),
    0 14.3px 11.5px rgba(0, 0, 0, 0.059),
    0 25.5px 20.5px rgba(0, 0, 0, 0.07),
    0 47.6px 38.4px rgba(0, 0, 0, 0.094),
    0 114px 92px rgba(0, 0, 0, 0.19);
}


.site-4-wrapper .card {
  grid-area: stack;
  --z-offset: 0;

  transition: transform 4s ease;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: var(--site4-fg);
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}


.site-4-wrapper .card:nth-child(1) { z-index: 5; }
.site-4-wrapper .card:nth-child(2) { z-index: 4; }
.site-4-wrapper .card:nth-child(3) { z-index: 3; }
.site-4-wrapper .card:nth-child(4) { z-index: 2; }
.site-4-wrapper .card:nth-child(5) { z-index: 1; }


.site-4-wrapper .card::after {
  content: "One more step";
  position: absolute;
  left: -45%;
  top: 110%;
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--font-sm);
  text-shadow: 0 1px 3px rgba(255, 0, 0, 0.75);
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  opacity: 0;
  transition: opacity 0.5s ease 0s, transform 0.5s ease;
  transform: rotate(-45deg) rotateY(45deg) translateX(20px);
  background: rgba(53, 53, 53, 0.384);
}


.site-4-wrapper .card.content {
  transition:
    border-color 4s ease,
    background-color 5s ease 2s,
    color 4s ease 0s,
    transform 4s ease 0s;
  padding: 5vmin;
  font-size: max(2.5vmin, 0.9rem);
  line-height: 1.5;
  background: var(--site4-fg);
  border: 5px solid var(--site4-accent);
  color: var(--site4-bg);
}

.site-4-wrapper .card.content::after {
  content: "Create a wallet";
  left: -50%;
}

.site-4-wrapper .card.content p:first-of-type {
  margin-top: 0;
}


.site-4-wrapper .card.padding {
  background: transparent;
  transition-delay: 0.1s;
}

.site-4-wrapper .card.padding::after {
  content: "Save 12 words";
}

.site-4-wrapper .card.padding::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 0%, 0% 100%,
    5vmin 100%, 5vmin 5vmin,
    calc(100% - 5vmin) 5vmin,
    calc(100% - 5vmin) calc(100% - 5vmin),
    5vmin calc(100% - 5vmin), 5vmin 100%,
    100% 100%, 100% 0%
  );
  background: repeating-linear-gradient(
    -45deg,
    #edf1e8, #edf1e8 1px,
    rgba(255, 255, 255, 0.05) 1px,
    rgba(255, 255, 255, 0.05) 10px
  );
}


.site-4-wrapper .card.border {
  background: transparent;
  transition-delay: 0.2s;
}

.site-4-wrapper .card.border::after {
  content: "Fund it with gas";
  color: var(--site4-accent);
}

.site-4-wrapper .card.border::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% 0%, 0% 100%,
    5px 100%, 5px 5px,
    calc(100% - 5px) 5px,
    calc(100% - 5px) calc(100% - 5px),
    5px calc(100% - 5px), 5px 100%,
    100% 100%, 100% 0%
  );
  background: linear-gradient(var(--site4-accent), var(--site4-accent));
}


.site-4-wrapper .card.background {
  transition:
    background-color 4s ease 0.3s,
    transform 4s ease 0.3s;

}

.site-4-wrapper .card.background::after {
  content: "Approve the contract";
}


.site-4-wrapper .card.box-shadow {
  background:  rgba(148, 135, 192, 0.489);
  transition:
    box-shadow 4s ease 0.4s,
    transform 4s ease 0.4s;

  box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.02),
    0 6.7px 5.3px rgba(0, 0, 0, 0.028),
    0 12.5px 10px rgba(0, 0, 0, 0.035),
    0 22.3px 17.9px rgba(0, 0, 0, 0.042),
    0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.07);
}

.site-4-wrapper .card.box-shadow::after {
  content: "Sign to continue";
}


.site-4-wrapper .mobile-prompt {
  display: none;
}

@media (hover: none) {
  .site-4-wrapper .desktop-prompt {
    display: none;
  }

  .site-4-wrapper .mobile-prompt {
    display: inline;
  }


  .site-4-wrapper .stack:active .card {
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
    transform:
      rotateX(45deg) rotate(45deg)
      translateZ(var(--z-offset))
      translateY(20vh)
      translateX(20vh);
  }
}


@media (max-width: 1000px) {
  .site-4-wrapper h1 {
    font-size: var(--font-mobile-3xl);
  }

  .site-4-wrapper .intro-4 h1,
  .site-4-wrapper .outro-4 h1 {
    width: 100%;

  }

  .site-4-wrapper .stack {
    width: 60vw;
    height: 60vw;
  }

  .site-4-wrapper .card::after {
    left: -20%;
    top: 70%;
    font-size: var(--font-mobile-xs);
  }

  .site-4-wrapper .card.content::after {
    left: -23%;
  }
}

@media (orientation: landscape) and (min-width: 1000px) {
  .site-4-wrapper .stack {
    width: 40vh;
    height: 40vh;
  }
}


.site5-wrapper {
  width: 200px;
  height: 100%;
  margin: -200px auto 0;

  perspective: 1000px;
  backface-visibility: hidden;

}
.pulse-button {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -70px;
  margin-top: -70px;
  display: block;
  width: 140px;
  height: 140px;
  /* Etait Fraunces en 300 a 24px : une serif maigre sur un aplat sature se lave,
     meme avec un contraste de 7:1. Traite comme ce qu'il est, une etiquette
     d'interface, dans la mono qui porte deja toutes les autres etiquettes de la
     page (( scale one ), les numeros de la FAQ, LinkedIn). */
  font-size: 0.95rem;
  font-weight: 600;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  text-align: center;
  line-height: 140px;
  letter-spacing: 0.09em;
  /* Blanc sur le corail plein donnait 2,89:1, sous le seuil de 3:1. L'encre
     sombre du site y monte a environ 7:1 et reste lisible. */
  color: var(--dark);
  border: none;
  /* 140x140 avec line-height: 140px, c'est le centrage d'un disque. Le 0%
     l'aplatissait en carre, ce qui lisait comme un element non style. */
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 0 transparent;   /* etait un vert rgba(2,255,31), etranger a la palette */
  animation: pulse 1.5s infinite;
}

.pulse-button:hover {
  animation: none;
  background: #ce2017;
  transition: ease-in .4s;
}


.pulse-button::before {
  content: attr(data-tooltip-keys);


  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);


  background-color: #9066cf ;
  color: #ffffff;
  padding: 10px 16px;


  font-size: var(--font-sm);
  font-weight: 400;
  font-family: "IBM Plex Mono", monospace;
  white-space: nowrap;
  letter-spacing: normal;
  line-height: 1.4;
  text-align: center;


  display: block;
  width: max-content;
  max-width: 250px;


  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;


  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
  z-index: 9999;
}


.pulse-button::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);

  border: 6px solid transparent;
  border-top-color: #9066cf;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;

  z-index: 9999;
}


.pulse-button:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(-5px);
}

.pulse-button:hover::after {
  opacity: 1;
}


@keyframes pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 var(--accent);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px transparent;
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 transparent;
  }
}


@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.7);
  }
  70% {
    -webkit-transform: scale(1);
    box-shadow: 0 0 0 50px transparent;
  }
  100% {
    -webkit-transform: scale(0.9);
    box-shadow: 0 0 0 0 transparent;
  }
}



/* Style pour l'accordéon FAQy */
.faq-wrapper {
  background-color: #010010;
  padding: 4rem 2rem;
  width: 100%;
}

.faq-section {
  max-width: 46rem;
  margin: 0 auto;
  color: var(--light);
}

/* Aligne le titre sur le texte des questions, pas sur le numero. */
.faq-section h2 {
  font-family: "Fraunces", serif;
  font-size: var(--font-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: left;
  margin: 0 0 2.75rem;
  padding-left: 3.5rem;
}

/* Un filet, et rien d'autre. Le fond plein en accent, la carte, l'ombre et la
   bordure faisaient trois fois le meme travail et cassaient le systeme : sur
   le reste de la page l'accent souligne un mot, il ne remplit pas des blocs. */
.faq-item {
  border-top: 1px solid rgba(237, 241, 232, 0.16);
}

.faq-item:last-of-type {
  border-bottom: 1px solid rgba(237, 241, 232, 0.16);
}

/* La case reste dans le parcours clavier. display:none la retirait, ce qui
   rendait l'accordeon inutilisable sans souris. */
.faq-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.faq-question {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  padding: 1.4rem 0;
  cursor: pointer;
}

.faq-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.faq-question h3 {
  font-family: "Fraunces", serif;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
  transition: color 0.25s ease;
}

.faq-question:hover h3,
.faq-checkbox:checked ~ .faq-question h3 {
  color: var(--accent);
}

.faq-checkbox:focus-visible ~ .faq-question {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Le marqueur : une croix dont la barre verticale se couche a l'ouverture.
   Deux traits de 1px valent mieux qu'un signe + emprunte a un kit. */
.faq-toggle {
  position: relative;
  justify-self: end;
  align-self: center;
  width: 0.9rem;
  height: 0.9rem;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: transform 0.35s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.25s ease;
}

.faq-toggle::before {
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.faq-toggle::after {
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.faq-checkbox:checked ~ .faq-question .faq-toggle::after {
  transform: translateX(-50%) scaleY(0);
  opacity: 0;
}

/* 0fr vers 1fr : la reponse s'ouvre a sa hauteur reelle. L'ancien
   max-height: 500px aurait coupe les reponses developpees. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.85, 0, 0.15, 1);
}

.faq-checkbox:checked ~ .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-checkbox:checked ~ .faq-answer .faq-answer-inner {
  opacity: 1;
}

.faq-answer-body {
  padding: 0 1.5rem 2rem 3.5rem;
  max-width: 34rem;
}

.faq-answer p {
  margin: 0 0 0.9rem;
  line-height: 1.62;
  font-size: 0.98rem;
  color: color-mix(in srgb, var(--light) 78%, transparent);
  text-align: left;
}

.faq-lede {
  font-size: 1.06rem;
  color: var(--light);
}

.faq-chute {
  color: var(--light);
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-lien a {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.faq-lien a:hover,
.faq-lien a:focus-visible {
  border-bottom-color: var(--accent);
}

@media (max-width: 37.5em) {
  .faq-section h2 { padding-left: 0; }
  .faq-question { grid-template-columns: 2.5rem minmax(0, 1fr) 1.25rem; }
  .faq-question h3 { font-size: 1.15rem; }
  .faq-answer-body { padding: 0 0 1.6rem 2.5rem; }
}

#back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(252, 105, 76, 0.4);
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}

#back-to-top:hover {
  background: #ce2017;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(252, 105, 76, 0.6);
}

.footer-1 {
    position: relative;
    background-color: #010010;
    color: #7a7a7a;   /* etait #727272 : 4,33:1 sur le fond nuit, sous 4,5 */
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    z-index: 9999;
    width: 100%;
    min-height: 40px;
    margin-top: 0;
}

.footer-1 .text {
    font-size: 0.75rem; /* 12px */
    font-family: "Suisse intl", sans-serif;
    opacity: 0.7;
}

.footer-1 .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
    opacity: 0.75;
    /* Portait une image auparavant. Depuis qu'il porte du texte, il tombait
       sur le bleu par defaut du navigateur, seule couleur etrangere de la page. */
    color: var(--accent);
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.footer-1 .logo-link:hover,
.footer-1 .logo-link:focus-visible {
    opacity: 1;
}

.footer-1 .logo-link img {
    display: block;
    object-fit: contain;
}

@media (max-width: 37.5em) { /* 600px */
    .footer-1 {
        padding: 0.625rem 0.9375rem; /* 10px 15px */
        font-size: 0.75rem; /* 12px */
        margin-top: 0;
    }
    .footer-1 .text {
        font-size: 0.625rem; /* 10px */
    }
}

@media (max-width: 25em) { /* 400px */
    .footer-1 {
        flex-direction: column;
        gap: 0;
        font-size: 0.625rem; /* 10px */
    }
}