/* =====================================================================
   Les deux polices de kuizz, servies par kuizz lui-même (15/09)
   -----------------------------------------------------------------
   Elles venaient de Google Fonts, sur les huit pages. Or kuizz se joue souvent
   dans une salle dont le wifi n'a pas Internet : la typo ne se chargeait pas et
   toute la direction graphique s'écroulait en police système. Elles sont donc
   hébergées ici. Ce sont des polices variables (un seul fichier pour toutes les
   graisses), sous licence SIL Open Font License 1.1 — les licences sont dans
   public/fonts/, elles doivent y rester.

   Le fichier « latin-ext » n'est téléchargé que si un caractère l'exige
   (unicode-range) : en usage courant, seuls les deux fichiers « latin » partent,
   soit 63 Ko, une fois, puis en cache.
   ===================================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Direction graphique « Carton » (choisie par Ané le 14/09) : papier crème, gros traits
   d'encre, ombres portées dures et aplats francs. Deux variables portent tout le style :
   --trait (le contour à l'encre) et --ombre (l'ombre portée décalée, jamais floue). */
:root {
  --bg: oklch(94.5% 0.028 88);
  --surface: #FFFFFF;
  --panel: oklch(91.5% 0.032 86);
  --border: oklch(84% 0.035 84);
  --trait: oklch(21% 0.025 60);
  --ombre: oklch(21% 0.025 60);
  --ink: oklch(21% 0.025 60);
  --ink-soft: oklch(45% 0.022 60);
  --brand: oklch(56% 0.20 258);
  --brand-dark: oklch(44% 0.19 258);
  --coral: oklch(63% 0.21 28);
  --coral-dark: oklch(50% 0.20 28);
  --teal: oklch(68% 0.13 187);
  --teal-dark: oklch(50% 0.12 187);
  --gold: oklch(83% 0.16 82);
  /* Encre à poser sur un aplat qui reste clair dans les sept thèmes — l'or (83 à 88 % de
     clarté), la sarcelle (66 à 82 %), les médailles. Volontairement figée : c'est
     l'équivalent CSS de kuizzEncreSur(), qui fait le même calcul côté JS. Sans elle, ces
     aplats prenaient `--trait`, qui devient clair dans les thèmes sombres — d'où du jaune
     pâle sur du jaune. */
  --encre-sur-aplat: oklch(21% 0.025 60);
  --gold-dark: oklch(62% 0.15 80);
  --violet: oklch(58% 0.20 300);
  --violet-dark: oklch(46% 0.19 300);
  --vrai: oklch(62% 0.17 145);
  --faux: oklch(58% 0.21 27);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
}

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

/* Anneau de focus unique pour toute l'application : plusieurs champs posaient `outline: none`
   sans rien mettre à la place, et au clavier on ne savait plus où on tapait. Les champs qui
   remplacent l'anneau par une ombre portée (recherche, champs de modale) gardent leur règle. */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -1px;
}

.theme-dropdown { position: relative; margin-right: 8px; flex: none; }

.theme-swatch { border-radius: 50%; display: flex; overflow: hidden; flex: none; }
.theme-swatch > span { flex: 1; }

.theme-dropdown-toggle {
  display: flex; align-items: center; gap: 9px; background: var(--surface); color: var(--ink);
  border: 3px solid var(--trait); border-radius: 999px; padding: 5px 14px 5px 5px;
  cursor: pointer; font: inherit; font-weight: 700; font-size: 13px;
}
.theme-dropdown-toggle:hover { background: var(--panel); }
.theme-dropdown-toggle svg { flex: none; color: var(--ink-soft); transition: transform 0.15s; }
.theme-dropdown.open .theme-dropdown-toggle svg { transform: rotate(180deg); }

.theme-dropdown-menu {
  position: absolute; top: calc(100% + 9px); right: 0; background: var(--surface);
  border: 3px solid var(--trait); border-radius: 15px; box-shadow: 6px 6px 0 var(--ombre);
  padding: 7px; min-width: 210px; z-index: 60; display: flex; flex-direction: column; gap: 2px;
  max-height: 320px; overflow-y: auto;
}
.theme-dropdown-menu[hidden] { display: none; }
.theme-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 9px;
  border: none; background: transparent; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 600; color: var(--ink); text-align: left; width: 100%;
}
.theme-dropdown-item:hover { background: var(--panel); }
.theme-dropdown-item.active { background: var(--trait); color: var(--bg); font-weight: 700; }

/* ---- compte (connexion) : même mécanique de menu déroulant que thème/langue ---- */

.account-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold); color: var(--trait);
  border: 2.5px solid var(--trait);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 13px; line-height: 1;
}
.account-btn-google { width: 100%; justify-content: center; }
.account-google-indispo {
  font-size: 12px; color: var(--ink-soft); background: var(--panel); border-radius: 10px;
  padding: 9px 10px; line-height: 1.4;
}
.account-separateur {
  display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
}
.account-separateur::before, .account-separateur::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.account-dev-input {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; margin-bottom: 8px;
}
.account-dev-input:focus { outline: none; border-color: var(--brand); }
.account-btn-dev { width: 100%; justify-content: center; }
#account-dev-form { display: flex; flex-direction: column; }

.btn-icon { padding: 9px; }
.btn-sm { padding: 6px 13px; font-size: 13px; box-shadow: 3px 3px 0 var(--ombre); }

/* Bouton « Carton » : contour à l'encre + ombre portée dure. Au survol il se soulève d'un
   pixel, à l'appui il vient se coller sur son ombre — c'est tout le vocabulaire de la
   direction, et il est réutilisé partout (cartes, menus, pastilles). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 9px 17px;
  border: 3px solid var(--trait);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ombre);
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: 4px 4px 0 var(--ombre); }
.btn-primary { background: var(--brand); color: #FFFFFF; }
.btn-ghost { background: var(--surface); color: var(--ink); }
.btn-danger { background: var(--surface); color: var(--coral-dark); }

/* ---- accueil (page d'accueil / explication) ----------------------------------
   Disposition validée sur maquette : héros asymétrique, bande des deux modes coupée
   en deux, ruban d'étapes, grille bento des fonctions, FAQ sur deux colonnes, pied
   de page en bande contrastée. Chaque bande a volontairement une forme différente.
   Toutes les couleurs passent par les variables de thème — rien en dur. */

.acc { padding-bottom: 0; }
.acc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.acc-bande { border-top: 3px solid var(--trait); border-bottom: 3px solid var(--trait); background: var(--panel); }

.acc h1, .acc h2, .acc h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -0.9px; margin: 0; }
.acc-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.3px; color: var(--ink-soft); }
.acc-puce {
  display: inline-flex; align-items: center; border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 3px 10px; background: var(--surface); color: var(--ink); font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.acc-titre-ligne { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.acc-titre-ligne h2 { font-size: 34px; }
.acc-titre-ligne span { font-size: 15px; color: var(--ink-soft); }

/* ---- héros ---- */

.acc-hero-bande { background: var(--bg); }
.acc-hero { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 54px; padding-top: 54px; padding-bottom: 58px; align-items: start; }
.acc-hero-texte { padding-top: 14px; }
.acc-hero h1 { font-size: 54px; line-height: 1.04; margin: 14px 0 0; }
.acc-surligne {
  background: var(--gold); color: var(--ink); border: 3px solid var(--trait); border-radius: 12px;
  padding: 0 12px; display: inline-block; transform: rotate(-1.5deg); box-shadow: 4px 4px 0 var(--ombre);
}
.acc-intro { font-size: 17px; line-height: 1.55; color: var(--ink-soft); max-width: 470px; margin: 22px 0 26px; }

.acc-pin {
  display: flex; align-items: stretch; border: 3px solid var(--trait); border-radius: 14px;
  background: var(--surface); box-shadow: 4px 4px 0 var(--ombre); overflow: hidden; max-width: 400px;
}
.acc-pin-champ { flex: 1; padding: 10px 18px 11px; display: flex; flex-direction: column; justify-content: center; cursor: text; }
.acc-pin-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-soft); }
.acc-pin input {
  border: none; background: transparent; width: 100%; padding: 0; color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: 5px;
}
.acc-pin input::placeholder { color: var(--border); }
.acc-pin-go {
  display: flex; align-items: center; gap: 8px; border: none; border-left: 3px solid var(--trait);
  background: var(--brand); color: #FFFFFF; padding: 0 20px; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 15px;
}
.acc-pin-go:hover { background: var(--brand-dark); }
.acc-pin-erreur { color: var(--faux); font-size: 13.5px; font-weight: 700; margin: 8px 0 0; }
.acc-pin-erreur[hidden] { display: none; }

.acc-hero-boutons { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.acc-hero-boutons .btn { text-decoration: none; }
.acc-btn-express { background: var(--teal); color: var(--ink); }

.acc-stats { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 26px; }
.acc-stat {
  display: inline-flex; align-items: center; gap: 7px; border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 6px 13px; background: var(--surface); font-size: 12.5px; color: var(--ink-soft);
}
.acc-stat b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 16px; color: var(--ink); }

/* les deux cartes de mode, disposées en éventail */
.acc-eventail { position: relative; height: 296px; }
.acc-carte-mode {
  position: absolute; top: 34px; width: 266px; background: var(--surface);
  border: 3px solid var(--trait); border-radius: 20px; box-shadow: 7px 7px 0 var(--ombre);
  padding: 15px 16px 17px; transform-origin: 50% 150%;
}
.acc-carte-gauche { left: 0; transform: rotate(-9deg); z-index: 1; }
.acc-carte-droite { left: 196px; transform: rotate(9deg); z-index: 2; }
.acc-carte-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.6px; }
.acc-carte-dessin { background: color-mix(in oklab, var(--surface) 65%, var(--bg)); border: 2.5px solid var(--trait); border-radius: 12px; padding: 10px 6px 4px; }
.acc-carte-dessin svg { display: block; width: 100%; }
.acc-eventail-etiquette { text-align: center; margin-top: 6px; }
.acc-eventail-etiquette span {
  display: inline-flex; align-items: center; background: var(--gold); color: var(--ink);
  border: 3px solid var(--trait); border-radius: 12px; box-shadow: 4px 4px 0 var(--ombre);
  padding: 8px 15px; font-weight: 700; font-size: 13.5px; transform: rotate(-2deg);
}

/* ---- les deux modes : bande coupée en deux ---- */

.acc-modes-tete { padding-top: 42px; text-align: center; }
.acc-modes-tete h2 { font-size: 38px; margin: 10px 0 8px; }
.acc-modes-tete p { font-size: 16px; color: var(--ink-soft); max-width: 560px; margin: 0 auto; }
.acc-modes-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--trait); margin-top: 34px; }
.acc-moitie { padding: 40px 44px 44px; }
.acc-moitie-plateau { background: color-mix(in oklab, var(--surface) 45%, var(--panel)); }
.acc-moitie-arene { background: color-mix(in oklab, var(--surface) 78%, var(--panel)); border-left: 3px solid var(--trait); }
.acc-moitie-tete { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.acc-moitie-tete h3 { font-size: 30px; }
.acc-moitie-icone {
  width: 40px; height: 40px; border-radius: 11px; border: 3px solid var(--trait); background: var(--surface);
  box-shadow: 3px 3px 0 var(--ombre); display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.acc-moitie > p { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 14px 0 20px; max-width: 420px; }
.acc-moitie-dessin { max-width: 330px; margin-bottom: 22px; }
.acc-moitie-dessin svg { display: block; width: 100%; }
.acc-moitie ul { list-style: none; padding: 0; margin: 0; max-width: 420px; }
.acc-moitie li { position: relative; padding-left: 17px; font-size: 14.5px; line-height: 1.45; margin-bottom: 9px; }
.acc-moitie li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--trait); }

/* ---- le ruban des quatre étapes ---- */

.acc-etapes { background: var(--bg); padding: 52px 0 54px; }
.acc-ruban { position: relative; }
.acc-ruban-fil { position: absolute; left: 26px; width: calc(75% + 25px); top: 26px; border-top: 3px dashed var(--border); z-index: 1; }
.acc-ruban-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; position: relative; }
.acc-etape-num {
  width: 52px; height: 52px; border-radius: 14px; border: 3px solid var(--trait); background: var(--surface);
  box-shadow: 4px 4px 0 var(--ombre); display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px;
}
.acc-etape h3 { font-size: 19px; margin: 18px 0 6px; }
.acc-etape p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* ---- la grille bento des fonctions ---- */

.acc-fonctions { padding: 52px 0 56px; }
.acc-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: start; }
.acc-tuile { background: var(--surface); border: 3px solid var(--trait); border-radius: 16px; box-shadow: 4px 4px 0 var(--ombre); padding: 20px 22px; }
.acc-tuile-large { grid-column: span 2; }
.acc-tuile-types { grid-column: span 2; grid-row: span 2; }
.acc-tuile-express { background: color-mix(in oklab, var(--teal) 28%, var(--surface)); }
.acc-tuile-tete { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--ink); }
.acc-tuile-tete .acc-picto { display: flex; flex: none; }
.acc-tuile h3 { font-size: 18px; letter-spacing: -0.4px; }
.acc-tuile p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.acc-tuile-types h3 { font-size: 22px; }
.acc-formes { display: flex; gap: 10px; margin-bottom: 16px; }
.acc-forme {
  width: 38px; height: 38px; border-radius: 10px; border: 3px solid var(--trait);
  display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ombre);
}
.acc-types { display: grid; gap: 9px; margin-top: 16px; }
.acc-type { display: flex; gap: 10px; align-items: center; border: 2.5px solid var(--border); border-radius: 11px; padding: 9px 12px; font-size: 14px; }
.acc-type-pastille { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.acc-type span:last-child { font-size: 13px; color: var(--ink-soft); }

/* ---- FAQ ---- */

.acc-faq { background: var(--bg); padding: 50px 0 54px; }
.acc-faq h2 { font-size: 34px; margin-bottom: 20px; }
.acc-faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.acc-qr { padding: 16px 0; border-top: 2.5px solid var(--border); }
.acc-q { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.4px; margin-bottom: 5px; }
.acc-r { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---- pied de page ---- */

.acc-pied { background: var(--trait); color: var(--bg); border-top: 3px solid var(--trait); }
.acc-pied-haut { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding-top: 42px; padding-bottom: 20px; }
.acc-pied .acc-kicker { color: color-mix(in oklab, var(--bg) 72%, var(--trait)); margin-bottom: 10px; }
.acc-pied-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--bg); }
.acc-pied-marque p { font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--bg) 80%, var(--trait)); max-width: 280px; margin: 0; }
.acc-pied-col a { display: block; font-size: 14px; margin-bottom: 7px; color: color-mix(in oklab, var(--bg) 88%, var(--trait)); text-decoration: none; }
.acc-pied-col a:hover { color: var(--bg); text-decoration: underline; }
.acc-pied-bas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 2.5px solid color-mix(in oklab, var(--bg) 26%, var(--trait));
  padding: 22px 0 34px;
}
.acc-pied-suivre { font-size: 14px; color: color-mix(in oklab, var(--bg) 72%, var(--trait)); }
.acc-pied-suivre[hidden] { display: none; }
.acc-pied-spacer { flex: 1; }
.acc-pied-credit { font-size: 13px; color: color-mix(in oklab, var(--bg) 62%, var(--trait)); }
.acc-reseaux { display: flex; gap: 10px; flex-wrap: wrap; }
.acc-reseau {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  border: 3px solid var(--bg); border-radius: 12px; padding: 9px 15px;
  box-shadow: 4px 4px 0 var(--bg); color: var(--ink); font-weight: 700; font-size: 14.5px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.acc-reseau:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--bg); color: var(--ink); }
.acc-reseau:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--bg); }

/* ---- adaptations écran étroit ---- */

@media (max-width: 1080px) {
  .acc-hero { grid-template-columns: 1fr; gap: 34px; }
  .acc-hero-visuel { max-width: 470px; }
  .acc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-tuile-types, .acc-tuile-large { grid-column: span 2; }
  .acc-tuile-types { grid-row: auto; }
  .acc-ruban-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .acc-ruban-fil { display: none; }
  .acc-pied-haut { grid-template-columns: 1fr 1fr; }
}

/* Sur un petit écran la barre de l'accueil tiendrait sur trois lignes : le bouton
   « Créer un quiz » y est redondant, le même se trouve juste en dessous dans le héros. */
@media (max-width: 620px) {
  .kz-nav-accueil .btn-primary { display: none; }
}

@media (max-width: 760px) {
  .acc-wrap { padding: 0 18px; }
  .acc-hero { padding-top: 30px; padding-bottom: 34px; }
  .acc-hero h1 { font-size: 37px; }
  .acc-intro { font-size: 15px; }
  .acc-hero-boutons .btn { flex: 1; justify-content: center; }
  .acc-eventail { height: auto; display: grid; gap: 14px; }
  .acc-carte-mode { position: static; width: auto; transform: rotate(-1.2deg); }
  .acc-carte-droite { transform: rotate(1.2deg); }
  .acc-modes-tete h2 { font-size: 28px; }
  .acc-modes-split { grid-template-columns: 1fr; }
  .acc-moitie { padding: 26px 18px 28px; }
  .acc-moitie-arene { border-left: none; border-top: 3px solid var(--trait); }
  .acc-moitie-tete h3 { font-size: 25px; }
  .acc-titre-ligne h2, .acc-faq h2 { font-size: 27px; }
  .acc-ruban-grille { grid-template-columns: 1fr; gap: 18px; }
  .acc-etape { display: grid; grid-template-columns: 52px 1fr; gap: 14px; }
  .acc-etape-num { grid-row: span 2; }
  .acc-etape h3 { margin: 3px 0 4px; }
  .acc-bento { grid-template-columns: 1fr; }
  .acc-tuile-types, .acc-tuile-large { grid-column: auto; }
  .acc-faq-cols { grid-template-columns: 1fr; }
  .acc-pied-haut { grid-template-columns: 1fr 1fr; gap: 22px; }
  .acc-pied-marque { grid-column: span 2; }
}

/* ---- accueil / liste des quiz ---- */

.home { max-width: 960px; margin: 0 auto; padding: 36px 24px 60px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.home-head-titre { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.home-head h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -1.2px; margin: 0; }
.quiz-list { display: flex; flex-direction: column; gap: 12px; }
.quiz-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 5px 5px 0 var(--ombre);
  border: 3px solid var(--trait);
}
.quiz-card-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.6px; }

.badge-visibilite {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px;
  padding: 2px 9px; border-radius: 999px; flex: none; border: 2.5px solid var(--trait);
}
.badge-visibilite.public { background: var(--teal); color: var(--encre-sur-aplat); }
.badge-visibilite.prive { background: transparent; color: var(--ink); }

.empty-state { color: var(--ink-soft); text-align: center; padding: 60px 0; font-weight: 600; }

.home-subtitle { color: var(--ink-soft); font-size: 14px; margin: -8px 0 20px; }

/* ---- filtre par tag (liste "Mes quiz" / "Banque") ---- */
.search-row { max-width: 320px; flex: 1 1 240px; }
.search-input-wrap { position: relative; display: flex; align-items: center; }
.search-input-wrap svg { position: absolute; left: 14px; color: var(--ink-soft); pointer-events: none; }
.search-input {
  width: 100%; padding: 10px 14px 10px 42px; border-radius: 12px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
}
.search-input:focus { outline: none; box-shadow: 4px 4px 0 var(--ombre); }
.search-input::placeholder { color: var(--ink-soft); }
/* Chrome/Safari ajoutent une croix d'effacement native aux <input type="search"> non stylée
   (minuscule, mal alignée) : on la retire, la nôtre viendra si besoin plus tard. */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.tag-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.tag-filter-row[hidden] { display: none; }
.tag-filter-chip {
  border: 2.5px solid var(--trait); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 12.5px; font-weight: 700; border-radius: 999px;
  padding: 5px 13px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.tag-filter-chip:hover { background: var(--panel); }
.tag-filter-chip.active { background: var(--trait); color: var(--bg); }
/* La bascule « + N autres » / « Moins de tags » : même pastille, en pointillés, pour qu'on
   voie d'un coup d'œil que ce n'est pas un tag mais la commande qui replie la rangée. */
.tag-filter-plus { border-style: dashed; background: transparent; color: var(--ink-soft); }
.tag-filter-plus:hover { background: var(--panel); color: var(--ink); }

/* Comment cette partie s'est jouée — le troisième et dernier endroit où le mode apparaît
   (les deux autres : le lancement, et la partie elle-même). */
.hist-mode {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  border: 2px solid var(--border); border-radius: 999px; padding: 2px 9px;
  font-size: 11px; font-weight: 700; color: var(--ink-soft);
}

/* ---- partie express : un quiz écrit par l'IA, joué dans la foulée ---- */

/* La ligne qui porte le tri à gauche et la partie express à droite. Sur « Mes quiz » il n'y
   a pas de tri : `margin-left: auto` sur le bouton le garde à droite dans les deux cas. */
.ligne-tri { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.ligne-tri .tri-row, .ligne-tri .dossier-rail { margin: 0; }
.ligne-tri .btn-express { margin-left: auto; }

/* Violet : la seule couleur de la palette qui ne porte pas déjà une action, et elle marque
   l'IA sans crier. Le bouton est volontairement plus gros et plus haut que les autres —
   c'est le seul raccourci qui écrit un quiz tout seul, il doit s'attraper du premier coup
   d'œil au milieu d'une liste de quiz déjà écrits. D'où aussi la légère inclinaison :
   dans cette direction graphique, ce qui penche est ce qui attire. */
.btn-express {
  background: var(--violet); color: #FFFFFF; white-space: nowrap;
  font-size: 15.5px; font-weight: 800; letter-spacing: -0.2px;
  padding: 12px 18px; border-radius: 14px; gap: 10px;
  box-shadow: 5px 5px 0 var(--ombre);
  transform: rotate(-1.4deg);
}
.btn-express:hover { transform: rotate(-1.4deg) translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ombre); }
.btn-express:active { transform: rotate(-1.4deg) translate(5px, 5px); box-shadow: 0 0 0 var(--ombre); }
.btn-express:disabled { opacity: 0.55; transform: rotate(-1.4deg); box-shadow: 5px 5px 0 var(--ombre); }

/* La pastille dit ce que fait le bouton sans allonger la phrase : c'est l'IA qui écrit. */
.btn-express-badge {
  background: var(--gold); color: var(--encre-sur-aplat);
  border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 1px 8px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.7px; text-transform: uppercase;
}

/* Un éclat toutes les quelques secondes plutôt qu'une animation continue : on remarque le
   bouton sans qu'il s'agite en permanence dans le coin de l'œil. Aucun flou, comme partout
   ailleurs — c'est l'étincelle qui bouge, pas une lueur. */
.btn-express-etincelle { display: inline-flex; animation: kuizz-etincelle 3.6s ease-in-out infinite; }
@keyframes kuizz-etincelle {
  0%, 72%, 100% { transform: scale(1) rotate(0deg); }
  78% { transform: scale(1.3) rotate(-14deg); }
  84% { transform: scale(0.94) rotate(8deg); }
  90% { transform: scale(1.12) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-express-etincelle { animation: none; }
}

.modal.modal-express { max-width: 700px; max-height: 88vh; overflow-y: auto; }
.express-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.express-head h2 { margin: 0; }
.express-sous { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin-top: 2px; }
.express-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--violet); color: #FFFFFF; border: 2.5px solid var(--trait);
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.3px; box-shadow: 3px 3px 0 var(--ombre);
}
.express-label-doux { text-transform: none; letter-spacing: 0; font-weight: 600; }

.express-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.express-theme {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--surface); border: 2.5px solid var(--trait); border-radius: 12px;
  padding: 9px 11px; font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ombre);
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.15s;
}
.express-theme:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ombre); }
.express-theme.active { background: var(--gold); outline: 2.5px solid var(--trait); outline-offset: 3px; }
.express-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.express-segment { display: flex; gap: 8px; }
.express-seg-btn {
  flex: 1; min-width: 0; background: var(--surface); color: var(--ink);
  border: 2.5px solid var(--trait); border-radius: 10px; padding: 9px 4px;
  font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
/* Quatre choix de questions (10/20/30/40) au lieu de trois : un peu moins d'air entre eux. */
#express-nb .express-seg-btn { padding-left: 0; padding-right: 0; }
.express-seg-btn:hover { background: var(--panel); }
.express-seg-btn.active { background: var(--trait); color: var(--bg); }

.express-note {
  display: flex; align-items: center; gap: 9px; margin-top: 4px;
  background: var(--panel); border: 2.5px solid var(--trait); border-radius: 12px;
  padding: 10px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.45;
}
.express-note svg { flex: none; }

/* ---- le bandeau de génération, en haut de la fenêtre du mode ---- */
/*
   Le point clé de la fonctionnalité : la génération tourne PENDANT le choix du mode. Le
   bandeau dit où elle en est, sans jamais bloquer l'écran.
*/
.gen-bandeau {
  display: flex; align-items: center; gap: 11px; margin-bottom: 18px;
  border: 3px solid var(--trait); border-radius: 13px; padding: 11px 14px;
  box-shadow: 4px 4px 0 var(--ombre); color: #FFFFFF;
}
.gen-bandeau.encours { background: var(--violet); }
.gen-bandeau.pret { background: var(--vrai); }
.gen-bandeau.echec { background: var(--faux); }
.gen-corps { flex: 1; min-width: 0; }
.gen-titre { font-weight: 800; font-size: 14px; }
.gen-resume { flex: none; font-size: 12px; font-weight: 700; opacity: 0.85; }
.gen-piste { height: 7px; background: rgba(255, 255, 255, 0.3); border-radius: 999px; margin-top: 6px; overflow: hidden; }
/* Une jauge qui va et vient : on ne connaît pas l'avancement réel de l'IA, et afficher un
   faux pourcentage qui progresse serait mentir. */
.gen-jauge { width: 38%; height: 100%; background: #FFFFFF; border-radius: 999px; animation: gen-va-et-vient 1.6s ease-in-out infinite; }
@keyframes gen-va-et-vient {
  0% { margin-left: 0; }
  50% { margin-left: 62%; }
  100% { margin-left: 0; }
}
.gen-reessayer {
  flex: none; background: var(--surface); color: var(--ink); border: 2.5px solid var(--trait);
  border-radius: 999px; padding: 5px 12px; font-family: inherit; font-size: 12px;
  font-weight: 800; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .gen-jauge { animation: none; width: 100%; opacity: 0.7; }
}

@media (max-width: 620px) {
  .express-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .express-theme { font-size: 12px; padding: 8px 9px; }
  .express-deux { grid-template-columns: 1fr; gap: 0; }
  .modal.modal-express .modal-actions { flex-direction: column-reverse; }
  .modal.modal-express .modal-actions .btn { justify-content: center; min-height: 48px; }
  .gen-resume { display: none; }
}

/* ---- fenêtre du choix du mode de jeu (Plateau / Arène) ---- */

.modal.modal-modes { max-width: 736px; }
.mode-modal-sous { font-size: 13.5px; color: var(--ink-soft); font-weight: 600; margin: -14px 0 20px; }
.mode-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.mode-carte {
  position: relative; display: flex; flex-direction: column; text-align: left; padding: 0;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 16px; overflow: hidden;
  font-family: inherit; color: var(--ink); cursor: pointer;
  box-shadow: 4px 4px 0 var(--ombre);
  transition: transform 0.1s, box-shadow 0.1s;
}
.mode-carte:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
/* L'état choisi : un anneau d'encre autour de la carte plutôt qu'un remplissage — une carte
   entièrement à l'encre écraserait le dessin, qui est justement ce qui explique le mode. */
.mode-carte.active {
  outline: 3px solid var(--ink); outline-offset: 4px;
  transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ombre);
}

.mode-coche {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--trait); color: var(--surface);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  opacity: 0; transform: scale(0.6); transition: opacity 0.12s, transform 0.12s;
}
.mode-carte.active .mode-coche { opacity: 1; transform: scale(1); }

.mode-dessin { display: block; background: var(--panel); border-bottom: 3px solid var(--trait); padding: 14px 18px 8px; }
.mode-dessin svg { height: 152px; }
.mode-corps { display: block; padding: 15px 18px 18px; }
.mode-nom { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -0.6px; }
.mode-sous { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); margin-top: 1px; }
.mode-texte { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.5; margin-top: 10px; text-wrap: pretty; }
/* La ligne qui décide : pas « comment ça marche » mais « ce qu'il te faut ». */
.mode-besoin {
  display: flex; align-items: center; gap: 7px; margin-top: 13px;
  background: var(--panel); border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 700; line-height: 1.3;
}

.mode-actions { align-items: center; }
.mode-rappel { margin-right: auto; font-size: 12px; color: var(--ink-soft); font-weight: 600; }

/* Sur téléphone, les cartes passent à l'horizontale : le dessin garde son rôle à gauche et la
   ligne « il te faut… » reste visible sans avoir à faire défiler la fenêtre. */
@media (max-width: 620px) {
  .mode-grille { grid-template-columns: 1fr; gap: 12px; }
  .mode-carte { flex-direction: row; align-items: stretch; }
  .mode-dessin { width: 116px; flex: none; border-bottom: none; border-right: 3px solid var(--trait); display: flex; align-items: center; padding: 10px 8px; }
  .mode-dessin svg { height: auto; }
  .mode-corps { padding: 13px 14px; flex: 1; min-width: 0; }
  .mode-nom { font-size: 19px; }
  .mode-texte { display: none; }
  .mode-besoin { margin-top: 9px; background: none; border: none; padding: 0; font-size: 12px; }
  .mode-coche { top: 8px; right: 8px; width: 22px; height: 22px; }
  .mode-coche svg { width: 12px; height: 12px; }
  .mode-actions { flex-direction: column-reverse; align-items: stretch; }
  .mode-actions .btn { justify-content: center; min-height: 48px; }
  .mode-rappel { margin: 6px 0 0; text-align: center; }
}

/* ---- l'écran d'explication, montré une seule fois ---- */

.modal.modal-modes-intro { max-width: 860px; text-align: center; }
.modal.modal-modes-intro h2 { font-size: 30px; }
.mode-intro-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 24px; }
.mode-intro-carte { display: flex; flex-direction: column; align-items: center; }
.mode-intro-dessin {
  width: 100%; background: var(--panel); border: 3px solid var(--trait); border-radius: 16px;
  padding: 18px 22px 12px; box-shadow: 5px 5px 0 var(--ombre);
}
.mode-intro-carte:first-child .mode-intro-dessin { transform: rotate(-1deg); }
.mode-intro-carte:last-child .mode-intro-dessin { transform: rotate(1deg); }
.mode-intro-nom { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.8px; margin-top: 18px; }
.mode-intro-texte { font-size: 14.5px; font-weight: 500; line-height: 1.55; margin-top: 6px; max-width: 320px; text-wrap: pretty; }
@media (max-width: 680px) {
  .mode-intro-grille { grid-template-columns: 1fr; gap: 22px; }
  .modal.modal-modes-intro h2 { font-size: 24px; }
}

/* ---- rangée de dossiers (au-dessus des tags, « Mes quiz » uniquement) ---- */

.dossier-rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
/* Même piège que pour .home-actions et le menu des thèmes : une classe qui pose
   display:flex l'emporte sur le display:none par défaut de [hidden] (même spécificité,
   la règle d'auteur gagne). D'où cette règle explicite. */
.dossier-rail[hidden] { display: none; }

.dossier-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 3px solid var(--trait); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 13px; font-weight: 700; border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--ombre);
  transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
}
.dossier-chip:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ombre); }
.dossier-chip:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ombre); }
.dossier-chip.active { background: var(--trait); color: var(--bg); }
.dossier-chip.active .dossier-compte { background: var(--bg); color: var(--trait); }

.dossier-pastille { display: inline-block; border-radius: 50%; border: 2px solid var(--trait); flex: none; }
.dossier-compte {
  display: inline-block; min-width: 18px; text-align: center; font-size: 11px; font-weight: 800;
  background: var(--panel); color: var(--ink-soft); border-radius: 999px; padding: 1px 6px;
}
.dossier-chip-ajout { border-style: dashed; box-shadow: none; color: var(--ink-soft); }
.dossier-chip-ajout:hover { box-shadow: none; transform: none; background: var(--panel); }
.dossier-rail-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 4px; }
.dossier-chip-action { font-size: 12px; padding: 5px 12px; box-shadow: none; border-width: 2.5px; }
.dossier-chip-action:hover { box-shadow: none; transform: none; background: var(--panel); }
.dossier-chip-danger { color: var(--faux); }

/* ---- fenêtre modale : créer/renommer un dossier, déplacer un quiz ---- */

.dossier-couleurs { display: flex; gap: 10px; }
.dossier-couleur {
  width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--trait); cursor: pointer;
  box-shadow: 2px 2px 0 var(--ombre); padding: 0;
}
.dossier-couleur.active { outline: 3px solid var(--ink); outline-offset: 3px; }
.dossier-liste { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.dossier-option {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: 2.5px solid var(--trait); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 12px;
  padding: 10px 13px; cursor: pointer;
}
.dossier-option:hover { background: var(--panel); }
.dossier-option.active { background: var(--trait); color: var(--bg); }

/* ---- pastilles de tags sur une carte de quiz ---- */
.tag-chip-mini {
  border: 2px solid var(--trait); background: var(--surface); color: var(--ink); font-family: inherit;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; cursor: pointer;
}
.tag-chip-mini:hover { background: var(--gold); }

/* ---- fenêtre modale (ex. création d'un nouveau quiz) ---- */

.modal-backdrop {
  position: fixed; inset: 0; background: color-mix(in oklab, var(--trait) 55%, transparent); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--surface); border: 4px solid var(--trait); border-radius: 18px; padding: 26px;
  width: 100%; max-width: 420px; box-shadow: 8px 8px 0 var(--ombre);
  /* Sur un petit écran, une modale un peu haute (création de quiz, réglages) dépassait des
     deux côtés sans pouvoir défiler : le bouton de validation devenait inatteignable. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.modal h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.7px; margin: 0 0 18px; }
.modal-field { margin-bottom: 18px; }
.modal-field label { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; color: var(--ink-soft); margin-bottom: 6px; }
.modal-field input[type="text"] {
  width: 100%; padding: 11px 14px; border-radius: 11px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
}
.modal-field input[type="text"]:focus { outline: none; box-shadow: 4px 4px 0 var(--ombre); }
.modal-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-toggle-row .modal-toggle-text { font-size: 14px; }
.modal-toggle-row .modal-toggle-hint { font-size: 12px; color: var(--ink-soft); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---- fenêtre modale : génération d'un lot de quiz par IA ---- */

.modal-generer { max-width: 480px; }
.modal-field textarea {
  width: 100%; padding: 11px 14px; border-radius: 11px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; resize: vertical;
}
.modal-field textarea:focus { outline: none; box-shadow: 4px 4px 0 var(--ombre); }
.modal-field-row { display: flex; gap: 14px; }
.modal-field-row > div { flex: 1; }
.modal-field-row input[type="number"] {
  width: 100%; padding: 11px 14px; border-radius: 11px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600;
}
.modal-field-row input[type="number"]:focus { outline: none; box-shadow: 4px 4px 0 var(--ombre); }
.modele-liste { display: flex; flex-direction: column; gap: 8px; max-height: 180px; overflow-y: auto; }
.modal-field .modele-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px;
  border: 2.5px solid var(--trait); border-radius: 11px; cursor: pointer; font-size: 13px;
  text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: 400;
}
.modele-item:has(input:checked) { background: var(--gold); }
.modele-item input[type="radio"] { margin: 0; flex: none; }
.modele-nom { font-weight: 700; }
.modele-desc { flex-basis: 100%; color: var(--ink-soft); font-size: 12px; }
.difficulte-switch { display: flex; gap: 8px; }
.difficulte-btn {
  flex: 1; padding: 10px; border-radius: 11px; border: 2.5px solid var(--trait); background: var(--surface);
  color: var(--ink); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.difficulte-btn.active { background: var(--trait); color: var(--bg); }
.modal-hint { font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.5; }

.historique-detail { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.historique-detail[hidden] { display: none; }
.historique-detail .lb-row {
  display: flex; align-items: center; gap: 14px; background: var(--surface); border: 2.5px solid var(--trait);
  border-radius: 11px; padding: 8px 15px; font-weight: 700;
}
.historique-detail .rank { color: var(--ink-soft); width: 22px; }
.historique-detail .name { flex: 1; }
.historique-detail .score { color: var(--ink-soft); font-size: 14px; }
.historique-detail .lb-row { cursor: pointer; }
.historique-detail .lb-row .chevron { color: var(--ink-soft); transition: transform 0.15s; flex: none; }
.historique-detail .lb-row.ouvert .chevron { transform: rotate(90deg); }

.historique-qdetail { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 12px; }
.historique-qdetail[hidden] { display: none; }
.historique-qrow {
  display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600;
  padding: 7px 11px; background: var(--surface); border: 2px solid var(--trait); border-radius: 9px;
}
.historique-qrow .qnum { color: var(--ink-soft); font-weight: 800; flex: none; width: 24px; }
.historique-qrow .qtexte { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.historique-qrow .qtemps { color: var(--ink-soft); font-size: 12px; flex: none; }
.historique-qrow .qicone { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--trait); display: flex; align-items: center; justify-content: center; color: var(--trait); font-size: 12px; }
.historique-qrow.correcte .qicone { background: var(--vrai); }
.historique-qrow.incorrecte .qicone { background: var(--faux); }
.historique-qvide { color: var(--ink-soft); font-size: 12px; padding: 4px 12px 12px; }

/* ---- éditeur ---- */

.editor-shell { display: flex; flex-direction: column; height: 100vh; }

.editor-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: color-mix(in oklab, var(--surface) 55%, var(--bg));
  border-bottom: 3px solid var(--trait);
}
.editor-topbar input.titre {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.6px;
  font-size: 21px;
  color: var(--ink);
  border: none;
  background: transparent;
  flex: 0 1 340px;
  min-width: 0;
}
.editor-topbar input.titre:focus { text-decoration: underline; }
.save-status { font-size: 12px; color: var(--ink-soft); font-weight: 700; min-width: 90px; }

.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--ink);
  border: 2.5px solid var(--trait);
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 5px 3px 12px;
}
.tag-chip-remove {
  border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 13px;
  line-height: 1; padding: 3px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.tag-chip-remove:hover { background: var(--coral); color: #FFFFFF; }
.tag-input {
  border: none; background: transparent; font: inherit; font-size: 13px; color: var(--ink);
  min-width: 140px; flex: 1;
}
.tag-input::placeholder { color: var(--ink-soft); }


.editor-body { flex: 1; display: flex; overflow: hidden; }

.sidebar {
  width: 260px;
  background: var(--panel);
  border-right: 3px solid var(--trait);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 8px;
  overflow-y: auto;
}
/* C'est un <button> depuis le 15/09 (navigation au clavier) : on neutralise donc les
   styles par défaut du navigateur, l'apparence ne change pas d'un pixel. */
.question-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 11px;
  padding: 9px 11px;
  border: 2.5px solid var(--trait);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.question-item .del { display: flex; cursor: pointer; border-radius: 6px; padding: 2px; }
.question-item.active { background: var(--gold); box-shadow: 4px 4px 0 var(--ombre); }
.question-item.dragging { transition: none; z-index: 5; box-shadow: 6px 6px 0 var(--ombre); opacity: 0.97; }
.question-item .grip { flex: none; color: var(--ink-soft); opacity: 0.35; cursor: grab; touch-action: none; }
.question-item:hover .grip, .question-item.dragging .grip { opacity: 0.8; }
.question-item.dragging .grip { cursor: grabbing; }
.question-item.active .bar { background: var(--trait); opacity: 1; }
.question-item.active .meta { color: var(--trait); }
.question-item .txt { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ce qui ne sera pas joué (16/09) — voir lib/questions.js. Trois marques, de la plus discrète
   à la plus insistante : la pastille sur la vignette, le compteur en tête de colonne, et le
   bandeau en haut du panneau. Avant, ces questions étaient écartées au lancement sans un mot.
   Le « ! » reste à sa place quand la vignette est survolée, contrairement à la corbeille qui
   n'apparaît qu'au survol : une alerte qui se cache n'alerte personne. */
.q-alerte {
  width: 20px; height: 20px; flex: none; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--coral); color: #FFFFFF;
  border: 2.5px solid var(--trait); border-radius: 50%;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 12px;
}
.question-item .q-alerte + .del { margin-left: 6px; }
.sidebar-incompletes { color: var(--coral-dark); }
.bandeau-incompletes {
  display: flex; align-items: center; gap: 12px;
  background: var(--coral); color: #FFFFFF;
  border: 3px solid var(--trait); border-radius: 14px; box-shadow: 5px 5px 0 var(--ombre);
  padding: 12px 18px; font-weight: 700; font-size: 15px;
}
.bandeau-incompletes svg { flex: none; }
.bandeau-incompletes strong { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
/* Encre et contour figés : ce bouton est posé sur un aplat blanc, lui-même sur un bandeau
   corail. En thème sombre, `--ink` et `--trait` s'éclaircissent tous les deux — on obtenait
   du blanc sur blanc, sans contour. Même raison que --encre-sur-aplat ailleurs. */
.bandeau-lien {
  margin-left: auto; flex: none; cursor: pointer;
  background: #FFFFFF; color: var(--encre-sur-aplat);
  border: 2.5px solid var(--encre-sur-aplat); border-radius: 999px;
  padding: 5px 13px; font-family: inherit; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.bandeau-lien:hover { background: var(--gold); }

/* Doublon repéré pendant l'écriture (16/09) — même règle de comparaison que le moteur de jeu
   (public/texte.js). Doré et non corail : ce n'est pas une erreur, c'est une remarque, et
   deux questions proches sont parfois voulues. */
.avertissement-jumelle {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  background: var(--gold); color: var(--encre-sur-aplat);
  border: 2.5px solid var(--trait); border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; font-weight: 700;
}
.avertissement-jumelle svg { flex: none; }

/* Le même bandeau, dans la fenêtre de lancement : plus compact, et son lien est un vrai <a>
   vers l'éditeur plutôt qu'un bouton. */
.modal-incompletes { margin-top: 14px; font-size: 14px; padding: 10px 15px; box-shadow: 4px 4px 0 var(--ombre); }
.modal-incompletes .bandeau-lien { text-decoration: none; }

/* « Joué il y a 3 j » (16/09), à côté du badge de visibilité. Volontairement neutre : c'est
   un repère, pas une distinction — un quiz déjà joué n'est ni mieux ni moins bien. */
.badge-deja-joue {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  background: var(--panel); color: var(--ink-soft);
  border: 2.5px solid var(--trait); border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px; padding: 2px 8px;
  text-transform: uppercase; white-space: nowrap;
}
.badge-deja-joue svg { flex: none; }

/* Prénom refusé (16/09) : déjà pris dans la partie, ou grossier. Le champ est marqué plutôt
   qu'un message posé seul sous le formulaire — il y a trois champs, il faut savoir lequel. */
.champ-refuse { border-color: var(--faux) !important; box-shadow: 5px 5px 0 var(--faux) !important; }
/* Avatar déjà choisi par quelqu'un d'autre. Grisé et non retiré : la grille garde sa forme,
   et on comprend que l'avatar existe mais qu'il est pris. */
.avatar-picker-item.pris { opacity: 0.28; filter: grayscale(1); cursor: default; }
.join-erreur-champ {
  width: 260px; margin: -4px auto 0; color: var(--faux);
  font-size: 13.5px; font-weight: 700; text-align: center; text-wrap: pretty;
}
.join-erreur-champ[hidden] { display: none; }
.question-item .del { margin-left: auto; opacity: 0; color: var(--ink-soft); }
.question-item:hover .del { opacity: 1; }

.add-question {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2.5px dashed var(--trait);
  border-radius: 12px;
  padding: 11px;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
.add-question:hover { background: var(--surface); }

.main-panel { flex: 1; padding: 28px 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.no-question { color: var(--ink-soft); font-weight: 600; padding: 60px 0; text-align: center; }

.type-tabs { display: flex; gap: 8px; }
.type-tab {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  border-radius: 999px;
  padding: 7px 16px;
  border: 2.5px solid var(--trait);
  cursor: pointer;
  font-family: inherit;
}
.type-tab:hover:not(.active):not(:disabled) { background: var(--panel); }
.type-tab.active { background: var(--trait); color: var(--bg); }
.type-tab:disabled { opacity: 0.45; cursor: not-allowed; }

.card {
  background: var(--surface);
  border-radius: 16px;
  border: 3px solid var(--trait);
  box-shadow: 5px 5px 0 var(--ombre);
  padding: 20px 22px;
}
.card-label { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 10px; letter-spacing: 0.3px; }
.card-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-label-row .card-label { margin-bottom: 0; }
.btn-regen-ia {
  border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 8px; color: var(--ink-soft); transition: background 0.15s, color 0.15s; flex: none;
}
.btn-regen-ia:hover { background: var(--gold); color: var(--trait); }
.btn-regen-ia:disabled { opacity: 0.4; cursor: default; }
.question-text {
  width: 100%;
  border: none;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -0.6px;
  font-size: 23px;
  color: var(--ink);
  background: transparent;
  resize: vertical;
  min-height: 32px;
}

.settings-row { display: flex; gap: 18px; }
.settings-col { width: 230px; display: flex; flex-direction: column; gap: 12px; }
.setting-card { background: var(--surface); border: 3px solid var(--trait); border-radius: 13px; box-shadow: 4px 4px 0 var(--ombre); padding: 13px 15px; }
.setting-card select {
  width: 100%;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  border: none;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.toggle-row { display: flex; align-items: center; justify-content: space-between; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
  position: absolute; inset: 0; background: var(--surface); border: 2.5px solid var(--trait);
  border-radius: 999px; cursor: pointer; transition: background 0.15s;
}
.switch .track::before {
  content: ""; position: absolute; width: 13px; height: 13px; left: 3px; top: 3px; background: var(--trait);
  border-radius: 50%; transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--coral); }
.switch input:checked + .track::before { transform: translateX(18px); background: var(--surface); }

.media-drop {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 3px dashed var(--trait);
  border-radius: 16px;
  padding: 24px;
  color: var(--ink-soft);
  background: var(--surface);
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.media-drop.drag-over { background: var(--gold); color: var(--trait); border-style: solid; }
.media-drop img,
.media-drop video { max-height: 110px; max-width: 100%; border-radius: 8px; border: 2.5px solid var(--trait); }
.media-drop-filled { cursor: default; gap: 10px; position: relative; }
.media-actions { display: flex; gap: 8px; }
.media-remove, .media-recadrer { font-size: 12px; padding: 7px 14px; }
/* Sous-ligne de la zone vide : rappelle les formats acceptés en plus de l'image. */
.media-drop-sous { font-size: 11.5px; font-weight: 600; opacity: 0.75; }
/* Étiquette du type de média réellement stocké (image / GIF / vidéo) — utile pour
   comprendre d'un coup d'œil pourquoi le bouton « Recadrer » est absent sur un GIF. */
.media-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--trait); color: var(--bg);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 999px; padding: 3px 9px;
}

/* ---- fenêtre modale : recadrage d'image (zoom + déplacement) ---- */

.modal-recadrage { max-width: 480px; }

/* ---- fenêtre modale : statistiques d'un quiz ---- */

.modal-stats { max-width: 560px; max-height: 82vh; overflow-y: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.stats-tile {
  background: var(--surface); border: 2.5px solid var(--trait); border-radius: 13px; padding: 14px 16px; text-align: center;
}
.stats-tile-wide { grid-column: 1 / -1; }
.stats-tile-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; letter-spacing: -0.8px; color: var(--ink); }
.stats-tile-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-top: 2px; }
.stats-detail-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.4px; margin: 22px 0 10px; }
.stats-question-list { display: flex; flex-direction: column; gap: 12px; }
.stats-question-row { }
.stats-question-texte { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.stats-question-bar { height: 12px; border-radius: 999px; background: var(--surface); border: 2.5px solid var(--trait); overflow: hidden; }
.stats-question-fill { height: 100%; border-radius: 999px; }
.stats-question-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.crop-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 14px; background: #1a1620; cursor: grab; touch-action: none;
}
.crop-frame.crop-frame-glisse { cursor: grabbing; }
.crop-frame img {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  max-width: none; max-height: none; user-select: none; pointer-events: none;
}
.crop-zoom-slider { width: 100%; margin-top: 14px; accent-color: var(--brand); }

.answers-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.answer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 13px;
  padding: 11px 15px;
  border: 3px solid var(--trait);
  background: var(--surface);
}
.answer-row.correct { background: var(--shape-color); box-shadow: 4px 4px 0 var(--ombre); }
.answer-row input.answer-text {
  flex: 1;
  border: none;
  background: transparent;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  font-family: inherit;
}
.answer-row .correct-toggle {
  width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--trait);
  background: var(--surface); cursor: pointer; padding: 0; flex: none; display: flex; align-items: center; justify-content: center;
}

.answer-text-fixe { flex: 1; font-weight: 700; font-size: 15px; color: var(--ink); }

.answers-grid-1col { grid-template-columns: 1fr; }
.answer-row-libre { background: var(--surface); }
.answer-row-ordre { gap: 10px; }

.qh-ordre-num {
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--trait); border: 2.5px solid var(--trait); font-weight: 800; font-size: 12px; flex: none;
}

.reorder-buttons { display: flex; flex-direction: column; gap: 2px; flex: none; }
.reorder-btn {
  width: 24px; height: 19px; border: 2px solid var(--trait); background: var(--surface); color: var(--ink);
  border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.reorder-btn:hover:not(:disabled) { background: var(--gold); }
.reorder-btn:disabled { opacity: 0.3; cursor: default; }

/* Cibles tactiles : sur petit écran, réorganiser les réponses et cocher la bonne se font au
   doigt. En dessous de ~44 px on rate une fois sur deux. */
@media (pointer: coarse) {
  .reorder-btn { width: 40px; height: 34px; }
  .correct-toggle { width: 40px; height: 40px; }
  .tag-chip-remove { padding: 9px; }
  .question-item .del { padding: 8px; }
}

@media (max-width: 720px) {
  .editor-body { flex-direction: column; }
  .sidebar { width: auto; flex-direction: row; overflow-x: auto; }
  .settings-row { flex-direction: column; }
  .settings-col { width: auto; flex-direction: row; }
  .answers-grid { grid-template-columns: 1fr; }
  .main-panel { padding: 20px; }
}

/* =====================================================================
   Navigation partagée (voir nav.js) — refonte « Carton » du 14/09.
   Quatre destinations, une action principale, un menu pour tout le reste.
   ===================================================================== */

.kz-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 28px;
  background: color-mix(in oklab, var(--surface) 55%, var(--bg));
  border-bottom: 3px solid var(--trait);
  position: relative;
  z-index: 40;
}
/* Bouton « retour en haut » (16/09) — voir nav.js, qui l'installe et décide quand le montrer.
   z-index 30 : au-dessus du contenu, mais SOUS la barre du haut (40), les menus déroulants
   (60) et les fenêtres modales (100) — il ne doit jamais passer par-dessus ce sur quoi on est
   en train de cliquer. `visibility` autant qu'`opacity` : un bouton seulement transparent
   reste attrapable à la tabulation, et on tabulait sur un bouton invisible. */
.kz-haut-de-page {
  position: fixed; right: 26px; bottom: 26px; z-index: 30;
  width: 54px; height: 54px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink); cursor: pointer;
  border: 3px solid var(--trait); border-radius: 50%; box-shadow: 4px 4px 0 var(--ombre);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, background 0.15s;
}
.kz-haut-de-page.visible { opacity: 1; visibility: visible; transform: none; }
.kz-haut-de-page:hover { background: var(--gold); color: var(--encre-sur-aplat); }
/* Même geste que les autres boutons de kuizz : il s'enfonce dans son ombre au clic. */
.kz-haut-de-page:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ombre); }
@media (max-width: 560px) {
  /* 46 px : plus discret sur un petit écran, et toujours au-dessus des 44 px d'une cible
     tactile confortable. Collé au bord (10 px) plutôt qu'aligné sur la marge de la page :
     posé à 16 px comme le contenu, il tombait pile sur le bouton « ⋯ » des cartes, qui est
     à droite lui aussi. Là, il mord sur la marge, pas sur une commande. */
  .kz-haut-de-page { width: 46px; height: 46px; right: 10px; bottom: 14px; }
  .kz-haut-de-page svg { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .kz-haut-de-page { transition: opacity 0.01s, visibility 0.01s; transform: none; }
  .kz-haut-de-page.visible { transform: none; }
}

.kz-nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.kz-nav-brand:hover { color: var(--ink); }
.kz-nav-tabs { display: flex; gap: 4px; }
.kz-nav-tab {
  font-size: 15px; font-weight: 700; padding: 9px 16px; border-radius: 11px;
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.kz-nav-tab:hover { background: var(--panel); color: var(--ink); }
.kz-nav-tab.on { background: var(--trait); color: var(--bg); }
.kz-nav-tab.on:hover { color: var(--bg); }
.kz-nav-spacer { flex: 1; }

/* Bouton « scindé » : l'action évidente à gauche, les deux autres façons de créer un quiz
   (IA, import) derrière le chevron — au lieu de trois boutons qui se disputent l'attention. */
.kz-split { position: relative; display: flex; align-items: stretch; gap: 2px; flex: none; }
.kz-split-main, .kz-split-more {
  border: 3px solid var(--trait); background: var(--brand); color: #FFFFFF;
  box-shadow: 4px 4px 0 var(--ombre); cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.kz-split-main { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px 3px 3px 12px; }
.kz-split-more { width: 34px; display: flex; align-items: center; justify-content: center; border-radius: 3px 12px 12px 3px; }
.kz-split-main:hover, .kz-split-more:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.kz-split-main:active, .kz-split-more:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }
.kz-split.open .kz-split-more svg { transform: rotate(180deg); }
.kz-split-more svg { transition: transform 0.15s; }

/* Menu déroulant générique de la refonte : même carton, même ombre dure. */
.kz-menu {
  position: absolute; top: calc(100% + 9px); right: 0; min-width: 230px; z-index: 60;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 14px;
  box-shadow: 6px 6px 0 var(--ombre); padding: 6px;
  display: flex; flex-direction: column; gap: 1px;
}
.kz-menu[hidden] { display: none; }
.kz-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 9px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.kz-menu-item:hover { background: var(--panel); color: var(--ink); }
.kz-menu-item.on { background: var(--trait); color: var(--bg); font-weight: 700; }
.kz-menu-item svg { flex: none; }
.kz-menu-item-danger { color: var(--coral-dark); }
.kz-menu-item-danger:hover { background: var(--coral); color: #FFFFFF; }
.kz-menu-valeur { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.kz-menu-item.on .kz-menu-valeur { color: var(--bg); }
.kz-menu-sep { height: 2.5px; background: var(--trait); opacity: 0.16; margin: 5px 9px; }
.kz-menu-retour {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 11px; border-radius: 9px; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft);
}
.kz-menu-retour:hover { background: var(--panel); color: var(--ink); }

.kz-compte { position: relative; flex: none; }
.kz-compte-toggle {
  display: flex; align-items: center; gap: 8px; background: var(--surface); color: var(--ink);
  border: 3px solid var(--trait); border-radius: 999px; padding: 4px 13px 4px 4px;
  cursor: pointer; font: inherit; font-weight: 700; font-size: 14px;
  /* Toute la barre du haut tient sur la même hauteur : boutons, roue de réglages et
     pastille du compte — connecté (avec l'avatar) comme déconnecté. */
  min-height: 40px;
}
.kz-compte-toggle:hover { background: var(--panel); }
.kz-compte-toggle > svg:first-child { margin-left: 8px; }
.kz-compte-nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kz-menu-compte { min-width: 262px; }
.kz-menu-connexion { padding: 6px 5px 2px; display: flex; flex-direction: column; gap: 9px; }
.kz-menu-connexion .btn { width: 100%; justify-content: center; }

/* Menu « ⋯ » d'une ligne (carte de quiz, historique). */
.kz-plus { position: relative; flex: none; }
.kz-plus-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--ink); border: 3px solid var(--trait); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ombre); cursor: pointer; padding: 0;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.kz-plus-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.kz-plus.open .kz-plus-btn { background: var(--trait); color: var(--bg); transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }
.kz-menu-plus { min-width: 238px; }

/* =====================================================================
   Carte de quiz refondue : vignette, titre lisible, deux actions, un menu.
   ===================================================================== */

.quiz-card-vignette {
  flex: none; width: 58px; height: 58px; border-radius: 14px; border: 3px solid var(--trait);
  display: flex; align-items: center; justify-content: center;
}
.quiz-card-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.quiz-card-title-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.quiz-card-ligne2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quiz-card-meta { font-size: 13.5px; color: var(--ink-soft); }
.quiz-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; }
.quiz-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; flex: none; }

/* =====================================================================
   Voix et favoris sur les quiz publics (15/09)
   Rien n'est retiré de la carte : une colonne s'insère entre le titre et les
   boutons, tenue par deux filets, pour que le geste « je vote » ne se confonde
   pas avec le geste « je lance ».
   ===================================================================== */

.quiz-card-social {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  align-self: stretch; padding: 0 16px;
  border-left: 3px solid var(--border); border-right: 3px solid var(--border);
}

.vote-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 13px 6px 10px; border: 3px solid var(--trait); border-radius: 999px;
  background: var(--surface); color: var(--ink); box-shadow: 3px 3px 0 var(--ombre);
  font: inherit; cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}
.vote-pill svg { flex: none; }
.vote-nb { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 15px; }
.vote-pill:hover { background: var(--panel); }
.vote-pill.active { background: var(--brand); color: #FFFFFF; }
.vote-pill.active:hover { background: var(--brand); }
/* Quiz privé, ou le sien : le compteur reste lisible mais ne se propose plus au clic —
   pas d'ombre portée, donc plus rien qui « dépasse » et appelle le doigt. */
.vote-pill.inerte {
  background: var(--panel); color: var(--ink-soft); border-color: var(--border);
  box-shadow: none; cursor: default;
}
.vote-pill.inerte:hover { background: var(--panel); }

.fav-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border: 3px solid var(--trait); border-radius: 12px;
  background: var(--surface); color: var(--ink-soft); box-shadow: 3px 3px 0 var(--ombre);
  cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s;
}
.fav-btn:hover { background: var(--panel); color: var(--ink); }
/* `--gold` est clair dans les sept thèmes (83 à 88 % de clarté) : l'étoile posée dessus
   prend donc toujours l'encre sombre, et non `--trait` qui devient clair dans les thèmes
   sombres — on y verrait du jaune pâle sur du jaune. Même raison pour le filtre « Favoris »
   actif et pour les médailles. */
.fav-btn.active { background: var(--gold); color: var(--encre-sur-aplat); }

/* Même rebond que les confettis de fin de partie : court, franc, jamais flou. */
.vote-pop, .fav-pop { animation: kuizz-pop 0.32s ease; }
@keyframes kuizz-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Médaille du podium, posée dans le coin de la vignette. */
.quiz-card-vignette { position: relative; }
.quiz-card-medaille {
  position: absolute; top: -10px; left: -10px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--trait); border-radius: 999px; color: var(--encre-sur-aplat);
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 13px;
}
/* Or, argent, bronze sont des couleurs de métal, pas des couleurs de thème : elles ne
   changent pas d'un thème à l'autre, sinon un podium en thème Nuit ne ressemblerait plus
   à un podium. Toutes les trois sont claires, le chiffre reste donc en encre sombre. */
.medaille-1 { background: oklch(83% 0.16 82); }
.medaille-2 { background: oklch(82% 0.012 250); }
.medaille-3 { background: oklch(72% 0.09 55); }

/* ---- rangée de tri de « Quiz Public » ---- */
.tri-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.tri-row[hidden] { display: none; }
.tri-seg {
  display: inline-flex; gap: 4px; padding: 4px; flex: none;
  border: 3px solid var(--trait); border-radius: 14px;
  background: var(--surface); box-shadow: 4px 4px 0 var(--ombre);
}
.tri-seg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: none; border-radius: 10px; background: transparent;
  color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tri-seg-btn svg { flex: none; }
.tri-seg-btn:hover { background: var(--panel); }
.tri-seg-btn.active, .tri-seg-btn.active:hover { background: var(--trait); color: var(--bg); font-weight: 800; }

.tri-favoris {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 10px 15px; border: 3px solid var(--trait); border-radius: 14px;
  background: var(--surface); color: var(--ink-soft); box-shadow: 4px 4px 0 var(--ombre);
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tri-favoris svg { flex: none; }
.tri-favoris:hover { background: var(--panel); color: var(--ink); }
.tri-favoris.active { background: var(--gold); color: var(--encre-sur-aplat); }
.tri-favoris-compte {
  min-width: 20px; padding: 0 6px; border: 2px solid var(--trait); border-radius: 999px;
  background: var(--panel); font-size: 12px; font-weight: 800; text-align: center;
}
.tri-favoris.active .tri-favoris-compte { background: var(--surface); }

/* =====================================================================
   Tableau de bord
   ===================================================================== */

.dash { max-width: 1060px; margin: 0 auto; padding: 32px 24px 60px; display: flex; flex-direction: column; gap: 28px; }
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.dash-bonjour { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -1.4px; line-height: 1; margin: 0 0 8px; }
.dash-sous-titre { color: var(--ink-soft); font-size: 15px; margin: 0; }
.dash-section-titre { font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink-soft); }
.dash-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.dash-lien {
  font-size: 14px; font-weight: 700; color: var(--brand); text-decoration: none;
  border-bottom: 2.5px solid var(--brand);
}
.dash-reprendre { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.dash-carte {
  display: flex; align-items: center; gap: 16px; background: var(--surface);
  border: 3px solid var(--trait); border-radius: 16px; box-shadow: 5px 5px 0 var(--ombre); padding: 16px 18px;
}
.dash-carte-titre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-carte-meta { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
/* Quatre compteurs depuis l'ajout des voix (15/09) : quatre colonnes sur grand écran, deux
   sur une largeur intermédiaire — trois colonnes laissaient le quatrième tout seul sur une
   deuxième ligne. */
.dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 1100px) { .dash-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.dash-stat {
  display: flex; align-items: center; gap: 15px; background: var(--surface);
  border: 3px solid var(--trait); border-radius: 16px; box-shadow: 5px 5px 0 var(--ombre); padding: 17px 20px;
}
.dash-stat-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -1.4px; }
.dash-stat-label { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink-soft); }
.dash-parties { background: var(--surface); border: 3px solid var(--trait); border-radius: 16px; box-shadow: 5px 5px 0 var(--ombre); padding: 4px 6px; }
.dash-partie {
  display: flex; align-items: center; gap: 16px; padding: 13px 14px; text-decoration: none; color: var(--ink);
  border-radius: 11px;
}
.dash-partie:hover { background: var(--panel); color: var(--ink); }
.dash-partie + .dash-partie { border-top: 2.5px solid color-mix(in oklab, var(--trait) 16%, transparent); }
.dash-partie-pastille { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--trait); }
.dash-partie-titre { font-weight: 700; font-size: 15px; width: 260px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-partie-col { font-size: 14px; color: var(--ink-soft); flex: none; }
.dash-partie-gagnant { font-size: 14px; color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-partie-voir { font-size: 13.5px; font-weight: 700; flex: none; }
.dash-vide { color: var(--ink-soft); font-weight: 600; padding: 26px 14px; text-align: center; }

@media (max-width: 860px) {
  .kz-nav { flex-wrap: wrap; gap: 12px; padding: 12px 18px; }
  .kz-nav-tabs { order: 3; width: 100%; overflow-x: auto; }
  .kz-nav-spacer { display: none; }
  .dash-reprendre, .dash-stats { grid-template-columns: 1fr; }
  .dash-partie-titre { width: auto; flex: 1; }
  .dash-partie-col, .dash-partie-gagnant { display: none; }
  /* La carte se plie en deux rangées plutôt que de laisser flotter ses morceaux : le titre
     en haut, la ligne « voix, favori, actions » en bas, séparée par un filet horizontal.
     Une grille tient les quatre blocs en place, là où `flex-wrap` les laissait retomber
     n'importe où selon la longueur du titre. */
  .quiz-card {
    display: grid;
    /* `minmax(max-content, auto)` et non `auto` : sinon, dès qu'un bouton de plus apparaît à
       droite (« Éditer » sur ses propres quiz), la colonne de gauche se fait écraser et
       l'étoile passe sous le bouton « Lancer ». Ici elle ne descend jamais sous la largeur
       de son contenu. */
    grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
    grid-template-areas: "vignette corps" "social actions";
    gap: 13px 16px;
    align-items: center;
  }
  .quiz-card-vignette { grid-area: vignette; }
  .quiz-card-corps { grid-area: corps; }
  /* Les deux filets verticaux n'ont plus de sens une fois la ligne rompue : un seul filet
     horizontal sépare désormais les deux rangées. */
  .quiz-card-social {
    grid-area: social; align-self: stretch; justify-content: flex-start;
    padding: 13px 0 0; border: none; border-top: 3px solid var(--border);
  }
  .quiz-card-actions {
    /* Si les trois boutons ne tiennent pas (ses propres quiz, où « Éditer » s'ajoute),
       le « ⋯ » passe à la ligne plutôt que de sortir de la carte. */
    grid-area: actions; justify-content: flex-end; flex-wrap: wrap;
    padding: 13px 0 0; border-top: 3px solid var(--border); gap: 8px;
  }
  /* Les boutons de la carte se resserrent un peu sur petit écran. */
  .quiz-card-actions .btn { padding: 9px 12px; font-size: 13.5px; }
  /* Le bouton express passe pleine largeur : sur téléphone, une ligne à lui seul le rend
     plus lisible qu'un bouton coincé au bout d'une rangée qui se replie. */
  .ligne-tri .btn-express { margin-left: 0; width: 100%; justify-content: center; }
  /* Le mot « Favoris » disparaît : l'étoile suffit, et le compteur se met en pastille. */
  .tri-favoris span:not(.tri-favoris-compte) { display: none; }
  .tri-favoris { position: relative; padding: 10px; }
  .tri-favoris .tri-favoris-compte {
    position: absolute; top: -9px; right: -9px; background: var(--gold);
    border-width: 2.5px; line-height: 1.35;
  }
}

/* Sous 560 px, cinq contrôles (voix, étoile, Lancer, Éditer, ⋯) ne tiennent plus sur une
   seule ligne : plutôt que de les laisser retomber en escalier, la carte prend une troisième
   rangée. Les voix et l'étoile gardent leur taille — ce sont des cibles de doigt, pas des
   icônes de décoration. */
@media (max-width: 560px) {
  .quiz-card { grid-template-areas: "vignette corps" "social social" "actions actions"; }
  .quiz-card-social { padding: 13px 0 0; }
  .quiz-card-actions { padding: 0; border-top: none; }
}

/* ---- éditeur : barre du haut, colonne des questions, panneau de réglages (refonte 14/09) ---- */

.editor-retour {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px; border: 3px solid var(--trait);
  background: var(--surface); color: var(--ink); text-decoration: none;
}
.editor-retour:hover { background: var(--panel); color: var(--ink); }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--ink-soft); padding: 2px 4px 4px;
}
.sidebar-espace { flex: 1; min-height: 10px; }
.editor-reglages-btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--surface); border: 3px solid var(--trait); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ombre); padding: 10px 13px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 13.5px; color: var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.editor-reglages-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ombre); }
.editor-reglages-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ombre); }

/* Une question dans la colonne : son numéro, son type, sa durée et son ×2 — de quoi relire
   tout son quiz d'un coup d'œil sans cliquer sur chaque question. */
.question-item .q-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--trait);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 12px;
}
.question-item.active .q-num { background: var(--trait); color: var(--gold); }
.question-item .q-ligne { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.question-item .q-type {
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  border: 2px solid var(--trait); border-radius: 999px; padding: 0 6px;
}
.question-item .q-duree { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.question-item.active .q-duree { color: var(--ink); }
.question-item .q-x2 {
  font-size: 10.5px; font-weight: 800; color: var(--trait);
  background: var(--gold); border: 2px solid var(--trait); border-radius: 999px; padding: 0 5px;
}
.question-item.active .q-x2 { background: var(--surface); }

.editor-tags-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  border: 3px solid var(--trait); border-radius: 11px; padding: 8px 10px; background: var(--surface);
  min-height: 46px;
}
.editor-tags-box .tag-input { min-width: 110px; font-size: 14px; }
.modal-toggle-row .modal-toggle-text { font-weight: 700; }

/* La bonne réponse prend l'aplat de sa forme : le texte bascule en encre ou en blanc selon
   que cet aplat est clair (turquoise, doré) ou sombre (corail, violet). */
.answer-row.correct { color: var(--shape-ink, var(--ink)); }
.answer-row.correct input.answer-text,
.answer-row.correct .answer-text-fixe { color: var(--shape-ink, var(--ink)); }
.answer-row.correct input.answer-text::placeholder { color: color-mix(in oklab, var(--shape-ink, var(--ink)) 60%, transparent); }
.answer-row.correct .correct-toggle { background: var(--shape-ink, var(--trait)); color: var(--shape-color); border-color: var(--shape-ink, var(--trait)); }

/* Bouton roue de réglages : même pastille que le menu du compte, mais carrée puisqu'elle
   ne porte qu'une icône. Le décalage de 8 px que `.kz-compte-toggle > svg:first-child`
   applique pour aligner l'avatar n'a rien à faire ici — sans quoi la roue est collée à
   droite au lieu d'être au centre. */
.kz-reglages-toggle {
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  justify-content: center; gap: 0; flex: none;
}
.kz-reglages-toggle > svg:first-child { margin-left: 0; }

/* Carte « Rejoindre une partie » du tableau de bord, posée légèrement de travers comme
   sur la maquette — c'est la seule action du tableau de bord qui ne crée rien. */
.dash-rejoindre {
  display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink);
  background: var(--gold); border: 3px solid var(--trait); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ombre); padding: 13px 20px; transform: rotate(-1.2deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dash-rejoindre:hover { color: var(--ink); transform: rotate(-1.2deg) translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ombre); }
.dash-rejoindre-titre { font-size: 15px; font-weight: 700; }
.dash-rejoindre-sous { font-size: 12.5px; color: color-mix(in oklab, var(--trait) 72%, transparent); }

/* Bloc « nombre d'équipes » du mode équipes : n'apparaît que quand la bascule est activée
   (voir kuizzBlocEquipesHtml), d'où la règle [hidden] explicite — sans elle, le
   `display: flex` de .modal-field l'emporterait sur le display:none par défaut, piège déjà
   rencontré trois fois dans ce projet. */
.equipes-nb-row { display: block; }
.equipes-nb-row[hidden] { display: none; }
.equipes-nb-row .difficulte-switch { max-width: 220px; }
.equipes-nb-row .modal-hint { margin-top: 8px; }