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;}

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

@font-face {
    font-family: 'Blouyaade';
    src: url('Blouyaade.woff2') format('woff2'),
        url('Blouyaade.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================================================================
=========================================================== 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;
  font-weight: bold;
  font-size: 1.2rem;
  z-index: 100;
}

/* Container principal des deux côtés */
.top-row {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Côté gauche */
.left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Côté droit */
.right {
  margin-left: auto;      /* pousse le bloc complètement à droite */
}

/* Texte du lien à droite aligné au bord */
.right a {
  display: block;
  width: 100%;
  text-align: right;
  color: white;
  text-decoration: none;
}

.right a:hover {
  color: transparent;
}

/* Desktop links (left) */
.desktop-links a {
  margin-right: 20px;
  color: white;
  text-decoration: none;
}

.desktop-links a:hover {
  color: transparent;
}

/* Bouton menu mobile */
.mobile-menu-btn {
  display: none;
  cursor: pointer;
  color: white;
}

.dropdown {
  display: flex;                /* nécessaire pour flex-direction */
  flex-direction: column;
  position: absolute;
  top: 100%;                    /* juste en dessous de la barre */
  left: 0;
  width: 100%;                  /* même largeur que .top-bar */
  background: #b9b9b9;
  border-radius: 0 0 12px 12px; /* coins arrondis seulement en bas */
  box-sizing: border-box;
  padding: 12px;
  
  /* Animation / Transition */
  overflow: hidden;
  max-height: 0;                /* caché par défaut */
  opacity: 0;
  margin-top: -10px;                 /* on gère la distance via top */
  z-index: 101;
}

.dropdown a {
  display: block;
  padding: 6px 0;
  color: white;
  text-decoration: none;
}

.dropdown a:hover {
  color: transparent;
}

/* ------------------------------------------------------ RESPONSIVE ----------------------------------------------------- */
@media (max-width: 768px) {
  .header {font-size: 1.8rem;}
  .top-bar {width: 93%; top: 55px; flex-direction: column; align-items: stretch;}
  .top-row {width: 100%; justify-content: space-between;}
  .desktop-links {display: none;}
  .mobile-menu-btn {display: inline-block;} /*ou inline-block*/
  .dropdown a {color: white; margin-left: 5px; font-size: 1.8rem; line-height: 1.4rem}

  /* Quand le menu est ouvert */
  .top-bar.open .dropdown {display: flex; max-height: 500px; /* assez grand pour contenir tous les liens */ opacity: 1;}
  .top-row {flex-wrap: wrap;align-items: center;}
  .right {width: 40%; margin-left: 0; order: 2; /* on peut le placer après le menu */}
  .right a {text-align: right;  /* toujours collé à droite */}
  .left {width: 40%; justify-content: flex-start; order: 1;}
}


/* ==========================================================================================================================
============================================================ DWNLD ==========================================================
========================================================================================================================== */


.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;
}

@media (max-width: 768px) {.download {margin: 15px;}}

/* ==========================================================================================================================
========================================================= PAGE PROJET =======================================================
========================================================================================================================== */

#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;
}

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

  /* Mot/Phrase à gauche */
  .controls-left {
    grid-column: 1;   /* ← colonne 1 */
    grid-row: 1;
  }

  /* Couleur à droite */
  .controls-right {
    grid-column: 2;   /* ← colonne 2 */
    grid-row: 1;
  }

  /* Slider en dessous pleine largeur */
  .controls-center {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
    padding: 0 10px; /* 10px de chaque côté */
  }

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

  #typo-tester {padding: 15px;}
}



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


/* ==========================================================================================================================
========================================================= GLYPHES =======================================================
========================================================================================================================== */

.glyphs {
  width: 100%;
  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: 5px;
}

.glyph {
  aspect-ratio: 1 / 1; /* toujours carré */
  padding-top: 5px;
  font-size: 30px;
  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-top: 70px;
  /* 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;}
  .glyphs {margin-top: 5px; padding: 15px;}
  .glyph-grid {grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));}
  .glyph {width: 50px; height: 50px; padding-top: 8px;}
}


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

.categorie {
  width: 100%;
  padding-left: 30px;
  background: transparent;
  font-size: 2rem;
  margin-top: 15px;
  margin-bottom: 5px;
  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 */
}

/* ------------------------------------------------------ RESPONSIVE ----------------------------------------------------- */
@media (max-width: 768px) {
  .categorie {font-size: 1.3rem; padding-left: 15px;}
  .wrapper {padding: 15px;}
  .row {flex-direction: column; gap: 10px;}
  .media {width: 100%;}
}


/* --------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------- 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 ----------------------------------------------------- */

@media (max-width: 768px) {
  .flex-bar {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes égales */
    gap: 2px 13px; /* espace vertical / horizontal */
    padding-left: 15px;
    padding-right: 15px;
    font-size: 0.9rem;
  }

  .logo {padding: 15px;}

  .flex-col, .flex-colr {
    text-align: left; /* tout aligné à gauche en mobile */
  }
}