teststyle_card/style.css

:root {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: column;
/* Typographie */
--font-family: 'Poppins', 'Montserrat', 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
--font-size-base: 16px; /* Taille par défaut */
--font-size-large: 2.5em; /* Pour les titres */
--font-size-medium: 1.5em; /* Pour les sous-titres */
--font-size-small: 1em; /* Pour le contenu */
--line-height: 1.6; /* Légèrement augmenté pour améliorer la lisibilité */


  /* Couleurs principales */
  --bg-color: rgba(19, 21, 21, 1); /* Night */
  --primary-color: rgba(206, 20, 131, 1); /* Red-violet */
  --secondary-color: rgba(125, 226, 209, 1); /* Tiffany blue */
  --neutral-color: rgba(255, 250, 251, 1); /* Snow */

  /* Couleurs additionnelles */
  --text-color: var(--neutral-color);
  --text-secondary: rgba(255, 250, 251, 0.7);
  --border-color: rgba(255, 255, 255, 0.2);
  --hover-color: rgba(125, 226, 209, 0.2);

  /* Ombres et bordures */
  --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  --box-shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.3);
  --border-radius: 12px;

  /* Espacement */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Responsivité */
  --max-width: 1200px;

  /* Transition */
  --transition-speed: 0.3s;

  /* Préférences système */
  color-scheme: light dark;
}
body {
  font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
/* Style Sources */
display: flex;
align-items: stretch;
justify-content: start;
flex-direction: column;
width: 100%;
min-width: 100%;
max-width: 100%;
height: 100%;
min-height: 100%;
flex-grow: 1;
flex-shrink: 0;
align-self: center;
overflow-x: hidden;
/* Preset */
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
}

#page-wrapper{
  /* Style Sources */
display: flex;
align-items: stretch;
justify-content: space-between;
row-gap: 0px;
column-gap: 0px;
min-height: 100svh;
min-width: 100svw;
flex-direction: column;
max-width: 100svw;
overflow-x: hidden;
overflow-y: hidden;
background-color: rgba(184, 184, 184, 0.06);
/* Inherited */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Preset */
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
outline-width: 1px;
}

.layout-container{
  /* Style Sources */
display: flex;
align-items: stretch;
justify-content: space-between;
flex-grow: 1;
flex-shrink: 0;
align-self: stretch;
flex-direction: column;
width: 100%;
height: 100%;
min-height: 100%;
order: 0;
object-fit: fill;
overflow-x: hidden;
overflow-y: hidden;
min-width: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0svw;
margin: 4px;
/* Inherited */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Preset */
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
outline-width: 1px
}

.wrapper{
  /* Style Sources */
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
max-width: min-content;
min-width: 100svw;
overflow-x: hidden;
overflow-y: hidden;
/* Inherited */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Preset */
box-sizing: border-box;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
outline-width: 1px
}

.mouse-navigation-button {
  position: absolute; /* Permet de positionner par rapport au conteneur */
  top: 50%; /* Centre verticalement */
  left: 50%; /* Centre horizontalement */
  transform: translate(-50%, -50%); /* Ajuste pour centrer le bouton au milieu */
  z-index: 1500; /* Assure que le bouton est visible au-dessus du canvas */
  padding: 15px 25px;
  background-color: var(--primary-color); /* Couleur principale */
  color: var(--neutral-color);
  font-size: var(--font-size-medium);
  font-weight: bold;
  border: none;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.mouse-navigation-button:hover {
  background-color: var(--secondary-color);
  transform: translate(-50%, -50%) scale(1.1); /* Légère mise en avant au survol */
}

.mouse-navigation-button.hidden {
  display: none; /* Masque complètement le bouton quand il est caché */
}

.logo-container {
  position: fixed; /* Fixe la position en haut à droite */
  top: 10px; /* Distance depuis le haut */
  left: 10px; /* Distance depuis la droite */
  background-color:var(--neutral-color); /* Fond neutre avec transparence */
  color: black; /* Couleur du texte */
  padding: 10px 20px; /* Espacement interne */
  border-radius: 5px; /* Coins arrondis */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Légère ombre */
  font-family: Arial, sans-serif; /* Police du texte */
  font-size: 16px; /* Taille du texte */
  z-index: 1000; /* Assure que cette div est au-dessus des autres éléments */
  text-align: center; /* Centre le texte horizontalement */
}

.logo-container:hover {
  background-color: var(--primary-color); /* Change légèrement le fond au survol */
  cursor: pointer; /* Ajoute une indication visuelle pour le clic */
}