html, body {height: 100%; margin: 0; font-family: Helvetica, Arial, sans-serif; background: white;}
* {margin: 0; padding: 0; box-sizing: border-box;}
img {pointer-events: none;}
body#no-protection img {pointer-events: auto;}
::selection {background: white; color: #c2c2c2;}
a {text-decoration:none; color: #c2c2c2;}

/* ---------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------- */

/* HEADER */

.header {
  width: 100%;
  position: absolute;
  top: 15px;
  text-align: center;
  font-size: 2.6rem;
  color: #b9b9b9;
  font-weight: bold;
  letter-spacing: -1px;
  z-index: 10;
}

.top-bar {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  background: #b9b9b9;
  border-radius: 12px;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 100;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.left {
  display: flex;
  align-items: center;
}

.right {
  display: flex;
  align-items: center;
}

.top-bar a {
  color: white;
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
}

.top-bar a:hover {
  color: transparent;
}

/* DESKTOP NAV */
.desktop-links a {
  margin-right: 20px;
}

.mobile-menu-btn {
  display: none;
  cursor: pointer;
  color: white;
  font-weight: bold;
}

.dropdown {
  display: none;
  flex-direction: column;
  margin-top: 10px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.dropdown a {
  padding: 6px 0;
}

@media (max-width: 768px) {
  .top-bar { width: 90%;flex-direction: column; align-items: stretch;}
  .top-row {width: 100%; justify-content: space-between;}
  .desktop-links {display: none;}
  .mobile-menu-btn {display: block;}
  .dropdown a {color: white;}

  /* Quand le menu est ouvert */
  .top-bar.open .dropdown {
    display: flex;
    max-height: 500px; /* assez grand pour contenir tous les liens */
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------------------------- */

.download {
  width: (100% - 30px);
  margin: 30px;
  padding: 60px;
  text-align: center;
  background: white;
  border-radius: 12px;
  border: 1px solid #0096eb;
  color: #0096eb;
  font-weight: bold;
  font-size: 2.6rem;
}

.download:hover {
  background: #0096eb;
  border: 1px solid #0096eb;
  color: white;
}


/* ------------------ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklm nopqrstuvwxyz---------------------------------------------------------------------- */

/* PAGE */
/* CONTENEUR PRINCIPAL */
#typo-tester {
  display: flex;
  flex-direction: column;
  gap: 90px;
  padding: 30px;
}

/* BARRE CONTROLS */
.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f2f2f2;
  padding: 10px 20px;
  border-radius: 16px;
}

/* BLOCS GAUCHE / CENTRE / DROITE */
.controls-left,
.controls-center,
.controls-right {
  display: flex;
  align-items: center;
  height: 60px; /* hauteur identique */
}

.controls-center {
  display: flex;
  font-size: 0.9rem;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.controls-center label {
  display: flex;
  flex-direction: row;   /* ← important */
  align-items: center;   /* centre verticalement */
  gap: 20px;
}

/* SELECT */
select {
  appearance: none;
  border: 1px solid white;
  font-size: 0.9rem;
  padding: 10px 20px;
  background: white;
  color: black;
  border-radius: 10px;
  cursor: pointer;
}

/* SLIDER RESET */
input[type="range"] {
  -webkit-appearance: none;
  width: 450px;
  background: transparent;
}

/* TRACK */
input[type="range"]::-webkit-slider-runnable-track {
  height: 0.75px;
  background: black;
}

input[type="range"]::-moz-range-track {
  height: 0.75px;
  background: black;
}

/* THUMB */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: black;
  border-radius: 50%;
  margin-top: -7px;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: black;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .controls-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }

  /* Couleur à gauche */
  .controls-right {
    grid-column: 1;
    grid-row: 1;
  }

  /* Mot/Phrase à droite */
  .controls-left {
    grid-column: 2;
    grid-row: 1;
  }

  /* Slider en dessous pleine largeur */
  .controls-center {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
  }

  .controls-left select,
  .controls-right select,
  .controls-center input[type="range"] {
    width: 100%;
  }
}



/* TEXTE */
.tester-text {
  min-height: 30vh;
  outline: none;
  font-size: 130px;
  line-height: 1.1;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}


/* TABLEAU DE GLYPHES */
.glyphs {
  width: 100%;
  margin-top: 30px;
  padding: 30px; /* padding gauche / droite + haut / bas */
  box-sizing: border-box;
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 10px;
}

.glyph {
  aspect-ratio: 1 / 1; /* toujours carré */
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f2f2f2;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
}
.glyph:hover {
  background: transparent;
}
.glyph.zoom::after {
  content: attr(data-char);
  position: absolute;
  top: 50%;
  left: 50%;

  /* centrage */
  transform: translate(-50%, -50%);

  /* cadre */
  width: 180px;
  height: 180px;
  background: black;
  border-radius: 12px; /* enlève si tu veux un carré strict */
  padding-bottom: 30px;
  /* centrage du caractère */
  display: flex;
  align-items: center;
  justify-content: center;

  /* typo */
  font-size: 150px;
  color: white;
  font-family: inherit;

  /* comportement */
  pointer-events: none;
  z-index: 10;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .controls-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .controls-center {
    justify-content: center;
    gap: 10px;
  }
  .tester-text { font-size: 50px; min-height: 20vh; }
  .glyph { width: 40px; height: 40px; font-size: 20px; }
  .glyph.zoom::after { font-size: 50px; }
}





/* ---------------------------------------------------------------------------------------- */

.categorie {
  width: 100%;
  background: transparent;
  font-size: 2rem;
  padding: 30px;
  margin-top: 70px;
  margin-bottom: -70px;
  font-weight: bold;
  letter-spacing: -1px;
}

.wrapper {
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin-top: 0px;
    padding: 30px;
}

.row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.media {
    flex: 1;
    overflow: hidden;
}

.media img,
.media video {
    width: 100%;
    height: 100%; /* CHANGEMENT ICI */
    display: block;
    border-radius: 12px;
    object-fit: cover; /* CHANGEMENT ICI */
}

/* ---------------------------------------------------------------------------------------- */

/* FOOTER */
.flex-bar {
  width: 100%;
  margin: 10px auto;
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  padding-top: 100px;
  padding-left: 30px;
  padding-right: 30px;
  font-size: 0.9rem;
}

.flex-colr {
  flex: 1;
  text-align: right;
  color: #b9b9b9;
}

.flex-col {
  flex: 1;
  text-align: left;
  color: #b9b9b9;
}

.flex-col a {
  color: #b9b9b9;
  text-decoration: none;
  display: inline-block;
}

.flex-col a:hover {
  color: transparent;
}

.logo {
  width: 100%;
  padding: 30px;
  background: transparent;
}

.logo img {
  width: 100%;
}

/* Responsive : empilement vertical sur écrans ≤ 768px */
@media (max-width: 1024px) {

}