/* =========================
   Police (identique partout)
   ========================= */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600&display=swap");

/* =========================
   Variables & palette
   ========================= */
:root{
  --bg:      #F6F1E9;
  --surface: #FFFCF6;
  --line:    #E6DED2;
  --text:    #3F3A34;

  --primary-900: #7A5C2E;
  --primary-700: #A78654;
  --primary:     #C5A471;
  --primary-200: #EADCC8;

  --accent:  #D9C3A6;
  --muted:   #8B8278;

  --font-head: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-body: "Fredoka", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* Le hidden doit toujours l'emporter */
.share[hidden]{
  display: none !important;
}


/* =========================
   Base & reset léger
   ========================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  padding: 0;
  overflow: auto;
  align-items: center;
  line-height: 1.6;
  background: #f4f4f4;
  color: #333;
  font-family: var(--font-body);
}
h1, h2, ul, li, p {
  margin: 0; padding: 0; overflow: auto; align-items: center;
  font-family: var(--font-body);
}

h2 {
  text-align: center;
}

/* Normalise éléments de formulaire pour un rendu cross-browser */
button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit;
  -webkit-appearance: none; appearance: none;
  background: none; border-radius: 0; border: none;
}

/* Focus visible accessible, cohérent */
:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; }

/* Conteneur principal */
.container { max-width: 1000px; margin-inline: auto; padding: 48px 24px; }
section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}
p.lead { color: var(--muted); margin: 0 0 16px; }

/* =========================
   Nav (boutons home/retour)
   ========================= */
.global-nav{
  position:fixed; top:12px; left:12px; z-index:1000;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  background: rgba(255,252,246,.92);
  border:1px solid var(--line); border-radius:12px; padding:6px 8px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.global-nav a, .global-nav button{
  background: var(--surface); color: var(--text);
  border:1px solid var(--line); border-radius:10px;
  padding:6px 10px; text-decoration:none; cursor:pointer;
}
.global-nav a:hover, .global-nav button:hover{ background: var(--primary-200); }

/* =========================
   Boutons — unifiés (Chrome = Edge)
   ========================= */
.actions{
  display:flex; flex-wrap:wrap; gap:12px;
  justify-content:center; margin:16px 0 20px;
}
.actions .button,
.button,
.link-btn,
button.link-btn {
  -webkit-appearance: none; appearance: none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5ch;
  padding:10px 14px; border-radius:10px;
  border:1px solid var(--line);
  background:#d584f2; color:#17181f;
  font-size:16px; line-height:1; text-decoration:none; cursor:pointer;
  transition: background .2s, border-color .2s, transform .02s;
}
.actions .button:hover,
.button:hover,
.link-btn:hover,
button.link-btn:hover { background:#e27bcf; }
.actions .button:active,
.button:active,
.link-btn:active,
button.link-btn:active { transform: translateY(1px); }
.link-btn:visited { color:#17181f; }

/* Bouton “neutre” optionnel */
.back-btn{
  background: var(--primary-200); color: var(--text);
  border:1px solid var(--line); border-radius:10px; padding:8px 12px; text-decoration:none;
}
.back-btn:hover{ background:#E9DECF; }

/* Écrase toute ancienne règle contradictoire */
.button-group button:hover { background-color: #e27bcf !important; }

/* =========================
   Inputs stylés (select / checkbox chips)
   ========================= */
/* Select (ex. .col-syll) */
select, .col-syll {
  -webkit-appearance: none; appearance: none;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 34px 8px 10px; line-height: 1.1; position: relative;
  background-image:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23555' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
select:focus-visible, .col-syll:focus-visible { outline: 2px solid var(--primary-700); outline-offset: 2px; }

/* Chips = labels cliquables avec faux checkbox (rendu identique) */
.chip{
  position: relative;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line); border-radius:999px;
  padding:6px 10px; background:#fff; cursor: pointer;
}
/* cache l’input (on garde l’accessibilité) */
.chip > input[type="checkbox"]{
  position:absolute; opacity:0; inset:0; pointer-events:none;
}
/* case visuelle */
.chip::before{
  content:""; width:16px; height:16px;
  border:1px solid var(--line); border-radius:4px; background:#fff;
}
/* coche quand checked */
.chip > input[type="checkbox"]:checked + span::after{
  content:""; position:absolute; left:13px; top:50%; transform: translateY(-60%) rotate(45deg);
  width:5px; height:9px; border-right:2px solid #7c3aed; border-bottom:2px solid #7c3aed;
}

/* =========================
   Panneaux / toolbars
   ========================= */
   
.page-gen .container{max-width:1100px;padding-top:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:8px 0 12px}
.panel{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px}
.phoneme-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:12px 0}
.phoneme-list{display:flex;flex-wrap:wrap;gap:8px}
.gen-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 14px}
.cols .mots .col-titre{justify-content:center}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:8px}
.share input{min-width:260px;max-width:520px}

/* =========================
   Colonnes & listes
   ========================= */
ul.mots{
  list-style:none; padding:0; margin:0;
  border:1px solid var(--line); border-radius:10px; background:#fff;
}
ul.mots li{
  padding:12px 14px; border-bottom:1px solid var(--line);
  transition: opacity .35s, color .35s, border-color .35s;
}
ul.mots li:last-child{ border-bottom:0; }
.gone{ opacity:0; color:transparent; border-color:transparent; }
li.speaking{ color: var(--primary-900); background: rgba(197,164,113,.14); }

/* Centrage des colonnes + masquage via [hidden] */
.mots[hidden] { display: none !important; }

.cols{
  justify-content: center; display:flex; gap:16px; align-items:flex-start;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px;
}
.cols .mots{ flex:0 0 300px; max-width:300px; list-style:none; margin:0; padding:0; }
@media (max-width:420px){ .cols .mots{ flex-basis:260px; max-width:260px; } }

/* Titre collant + contrôles syllabes */
.col-titre{
  position: sticky; top: 0; z-index: 1;
  font-weight: 600; font-size: 12px; line-height: 1;
  padding: 2px 6px; border-bottom: 1px solid var(--line);
  background: #f1f5f9; display: flex; align-items: center;
}
.col-syll-wrap{ display:flex; justify-content:space-between; align-items:center; gap:6px; width:100%; }

/* Items : mot + bouton régénérer à droite */
ul.mots li.item{ display:flex; align-items:center; gap:8px; }
ul.mots li.item .syll{ flex:1 1 auto; min-width:0; }
ul.mots li.item .regen-btn{
  margin-left:auto; padding:4px 8px; line-height:1;
  border:1px solid var(--line); border-radius:6px; background:#fff; cursor:pointer;
}
ul.mots li.item .regen-btn:hover{ background: var(--primary-200); }

/* =========================
   Pages : TRAIN / CREATE / JOIN / INDEX
   ========================= */
main { padding: 0rem 2rem 0rem 2rem; width:100%; max-width:1200px; flex:1; }
header {
  font: rubik; background-color:#c333e4; color:#040404;
  padding:.5rem 1rem; text-align:center; width:100%;
}

/* Groupes de boutons d’accueil */
.button-group { display:flex; flex-direction:column; gap:10px; width:100%; max-width:300px; margin:20px auto; }
.button-group button,
.button-group .link-btn { width:100%; box-sizing:border-box; font-size:26px;  padding: 18px 24px; min-height: 56px; }
#home .button-group .link-btn,
#home .button-group button.link-btn {
  font-size: clamp(20px, 2.2vw, 24px);
  padding: 14px 18px; line-height: 1.1;
}
#home .link-btn.sub { font-size: clamp(16px, 1.8vw, 18px); padding: 10px 16px; }

/* Router */
main > section[aria-hidden="true"]  { display: none !important; }
main > section[aria-hidden="false"] { display: block; }

/* Footer */
.site-footer {
  background:#1e293b; color:#cbd5e1;
  padding:10px 10px 5px; font-family: Arial, sans-serif;
  font-size:14px; margin-top:auto; width:100%; text-align:center;
}
.footer-container { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:30px; max-width:1200px; margin:auto; }
.footer-col h4 { margin-bottom:15px; font-size:16px; color:#fff; font-weight:bold; }
.footer-col ul { list-style:none; padding:0; }
.footer-col ul li { margin-bottom:8px; font-size:16px; }
.footer-col ul li a, .social-links a { color:#cbd5e1; text-decoration:none; transition: color .3s; }
.footer-col ul li a:hover, .social-links a:hover { color:#38bdf8; }
.social-links a { margin-right:10px; }
.footer-bottom { text-align:center; margin-top:30px; border-top:1px solid #334155; padding-top:15px; font-size:13px; color:#94a3b8; }

/* Panneau contact */
#contact-panel {
  display:none; position:relative; text-align:left;
  max-width:720px; margin:12px auto 0; padding:20px;
  border:1px solid #334155; border-radius:10px;
  background:#0f172a; color:#e2e8f0;
}
body.contact-open #contact-panel { display: block; }
#contact-panel input, #contact-panel textarea { width:100%; box-sizing:border-box; }
#contact-close {
  position:absolute; top:8px; right:8px; background:transparent; border:none;
  font-size:24px; color:#e2e8f0; cursor:pointer;
}
#contact-close:hover { color:#f87171; }

/* ====== TRAIN (présentation resserrée) ====== */
/* ===== PAGE TRAIN — layout général ===== */

.page-train .container {
  max-width: 1100px;
}

/* Grille à 2 colonnes : gauche = boutons, droite = contenu */
.page-train .train-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 24px;
  align-items: flex-start;
}

/* Colonne de gauche : boutons + retour */
.page-train .train-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-train .train-sidebar button {
  width: 100%;
  padding: 10px 16px;
  font-size: 16px;
  border-radius: 10px;
}

/* Colonne de droite : titre + niveaux + listes */
.page-train .train-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-train .train-title {
  margin: 0;
  font-size: 24px;
  text-align: center;
}

/* Niveaux */
.page-train .head-levels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-train .levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-train .levels .level {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
}

.page-train .levels .level[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Mobile : on empile tout, boutons au-dessus */
@media (max-width: 600px) {
  .page-train .train-layout {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .page-train .train-title {
    text-align: center;
  }

  .page-train .levels {
    justify-content: center;
  }
}


/* Version mobile : boutons au-dessus, tout centré */
@media (max-width: 560px) {
  .page-train .train-head {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }

  .page-train .head-main {
    align-items: center;
    text-align: center;
  }

  .page-train .levels {
    justify-content: center;
  }
}

/* ====== TRAIN — colonnes de mots ====== */

/* 3 colonnes toujours visibles (sans scroll horizontal) */
.page-train .cols {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-x: clip;
}

.page-train .cols .mots {
  max-width: none !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Taille responsive des items */
.page-train ul.mots li {
  font-size: clamp(12px, 2.4vw, 16px);
  padding: clamp(6px, 1.2vw, 12px) clamp(8px, 1.6vw, 14px);
}

.page-train .col-titre {
  font-size: clamp(12px, 2.2vw, 14px);
  padding: 6px 8px;
}

/* Pas de scroll page en mode train (contenu auto-ajusté) */
body.page-train {
  overflow: hidden;
}

#fit-train {
  width: min(1100px, 100%);
  margin: 8px auto;
  transform-origin: top center;
  will-change: transform;
}

@media print {
  body.page-train { overflow: visible; }
  #fit-train { transform: none !important; }
}

@media (max-height: 800px) {
  .page-train .container { padding-top: 10px; }
  .page-train .cols { gap: 10px; }
  .page-train .col-titre { padding: 6px 8px; font-size: 13.5px; line-height: 1.25; }
  .page-train ul.mots li { padding: 8px 10px; line-height: 1.3; font-size: 15px; }
}

/* Bouton écoute colonne (train) */
.page-train .listen-col {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.page-train .listen-col:hover {
  background: var(--primary-200);
}

.page-train .listen-col.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}


/* =========================
   CREATE
   ========================= */
details.words { border:1px solid var(--line); border-radius:12px; padding:12px; background:#f8fafc; }
details.words summary { cursor:pointer; font-weight:600; margin:-12px -12px 12px; padding:12px; }
.editor { display:grid; gap:10px; }
textarea {
  width:100%; min-height:160px; font-family:inherit; font-size:16px;
  border:1px solid var(--line); border-radius:10px; padding:10px;
  background:#fff; color:var(--text);
}
.modes { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--muted); font-size:14px; }
.modes label { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--text); }
.import { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.import input[type="file"]{ display:none; }
dialog#preview { border:1px solid var(--line); border-radius:14px; padding:0; max-width:900px; width:90vw; }
dialog#preview::backdrop{ background: rgba(0,0,0,.35); }
.preview-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); background: var(--surface); }
.preview-body{ padding:16px; }
.codebar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }
input.code{
  width:12ch; text-transform:uppercase; letter-spacing:.1em;
  height:40px; padding:0 10px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text);
}

/* =========================
   JOIN
   ========================= */
.page-join .container{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.page-join h1{ margin:0 0 12px; }
.page-join .codebox{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}
.page-join #status{ width:100%; text-align:center; }

/* =========================
   INDEX (Listes disponibles)
   ========================= */
.browse{ max-width:980px; margin:32px auto; text-align:center; }
.browse > h2{ text-align:center; font-size:40px; }
.families { display:grid; gap:24px; text-align:center; }
.family > h2 { margin:0 0 8px; text-align:center; color: var(--primary-900); }
.listgrid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  gap:12px; list-style:none; padding:0; margin:0; justify-content:center;
}
.listgrid a{
  display:block; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; background:#fff; color:inherit; text-decoration:none; max-width:260px; margin-inline:auto;
}
.listgrid a small{ display:block; color: var(--muted); font-size:12px; margin-top:4px; }

/* Familles/sous-familles (phonèmes) */
.phoneme-group{
  border: 2px solid var(--primary-700);
  border-radius: 12px; padding: 10px 12px 12px; margin: 12px 0; background: #fff;
}
.phoneme-group > legend{
  font-weight:700; font-size:1.1rem; line-height:1.2; color:var(--primary-900); padding:0 6px;
}
.phoneme-group .subgroup{
  border:1px solid var(--line); border-radius:10px; background: var(--surface);
  padding:10px; margin-top:10px;
}
.phoneme-group .sublegend{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-weight:600; margin-bottom:8px; font-size:.98rem; color:var(--text);
}
.sub-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted); user-select:none; }
.sub-toggle input{ accent-color: var(--primary-700); }

/* =========================
   Sous-menu (Créer une liste)
   ========================= */
.submenu { width:100%; max-width:300px; margin:0 auto; position:relative; }
.sub-buttons { display:flex; flex-direction:column; gap:8px; padding-top:8px; margin-left:14px; padding-left:10px; border-left:3px solid var(--line); }
.sub-buttons[hidden] { display:none !important; }
.link-btn.sub { background: var(--primary-200); color: var(--text); border: 1px solid var(--line); }
.link-btn.sub:hover, .link-btn.sub:focus-visible { background: var(--primary); color:#fff; border-color: var(--primary); }
.has-sub[aria-expanded="true"] { outline: 2px solid rgba(0,0,0,.06); outline-offset: 2px; }

/* =========================
   Home : centrage
   ========================= */
#home{ display:grid; place-items:center; text-align:center; min-height:40vh; }

/* =========================
   Masquages utilitaires
   ========================= */
.listgrid[hidden] { display: none; }
body:has(#browse[aria-hidden="true"]) .global-nav { display: none; }
.browse[aria-hidden="true"]  { display: none !important; }
.browse[aria-hidden="false"] { display: block; }


/* ===== PATCH CROSS-BROWSER (version corrigée – garde browse intact) ===== */

/* 1) Apparence par défaut des boutons simples (hors .browse) */
button,
[type="button"],
[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #d584f2;
  color: #17181f;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .02s;
}

/* Exceptions : les liens/boutons de la grille “browse” gardent leur style */
.browse button,
.browse a,
.browse .link-btn,
.browse .button {
  all: unset;
  display: block;
  color: inherit;
  cursor: pointer;
}

/* États hover/active communs */
button:hover,
[type="button"]:hover,
[type="submit"]:hover { background: #e27bcf; }
button:active,
[type="button"]:active,
[type="submit"]:active { transform: translateY(1px); }

/* 2) Apparence des champs de saisie : uniquement dans les sections concernées */
.page-create input[type="text"],
.page-create input[type="email"],
.page-create input[type="number"],
.page-create input[type="search"],
.page-create input[type="password"],
.page-create textarea,
.page-create select,
.page-join input[type="text"],
.page-join textarea,
#contact-panel input,
#contact-panel textarea {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 1.2;
  box-shadow: none;
}

.page-create input::placeholder,
.page-join input::placeholder,
textarea::placeholder { color: #9aa0a6; }

input[readonly] {
  background: #fbfbfb;
  color: var(--text);
  opacity: 1;
}

/* 3) Select : rétablit la flèche native cross-browser */
.page-create select,
.page-join select {
  -webkit-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(transparent, transparent),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23555' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  padding-right: 34px;
}

/* 4) Spécifiques CREATE & JOIN */
.page-create .editor .hint,
.page-join .hint { color: var(--muted); }

.page-join .codebox input[type="text"]#codeIn {
  width: 12ch;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* 5) Footer collé en bas */
html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
main.container { flex: 1 0 auto; }
.site-footer {
  margin-top: auto;
  width: 100%;
}

/* 6) Panel contact : reste dans le footer */
#contact-panel { position: relative; }

/* 7) Focus visible : commun et discret */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary-700);
  outline-offset: 2px;
}


/* ===== PATCH CREATE — aligner PDF / CODE / LANCER sans toucher browse ===== */

/* Ligne d’actions : 3 “blocs” (PDF) | (Codebar) | (Lancer), centrés */
.page-create .controls .row{
  display: grid;
  grid-template-columns: auto auto auto; /* PDF | CODE | LANCER */
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* Le bloc "codebar" reste compact et centré */
.page-create .codebar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Hauteurs/rythme identiques pour tous les contrôles de la ligne */
.page-create .controls .row > button,
.page-create .codebar > button,
.page-create .codebar > input.code{
  height: 40px;
  padding: 0 12px;          /* même padding horizontal */
  line-height: 40px;        /* aligne l’icône/texte visuellement */
  border-radius: 10px;
}

/* Le champ CODE reste étroit et aligné */
.page-create .codebar > input.code{
  width: 12ch;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
}

/* Sur petits écrans, on passe en pile, toujours centré */
@media (max-width: 640px){
  .page-create .controls .row{
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .page-create .codebar{
    flex-wrap: wrap;
  }
}

/* (sécurité) — aucune altération de browse ; ce patch n’ajoute AUCUNE règle sur .browse/.listgrid */

/* ===== Centrer les noms des listes dans browse ===== */
.listgrid a {
  text-align: center;          /* centre le nom et le <small> */
  justify-content: center;     /* au cas où un display flex existe */
  align-items: center;
}

/* Optionnel : centre aussi le petit sous-texte (<small>) */
.listgrid a small {
  text-align: center;
  display: block;
  margin-top: 4px;
}

/* ===== BROWSE — centrer familles ET sous-familles, sans toucher aux cartes ===== */

/* 1) Titres de FAMILLE (h2/h3/h4 ou bouton .family-toggle dans/ hors du h2) */
#browse .families .family > h2,
#browse .families .family > h3,
#browse .families .family > h4{
  text-align: center !important;
}
#browse .families .family > .family-toggle,
#browse .families .family > h2 > .family-toggle{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

/* 2) Titres de SOUS-FAMILLE (ex. En CP / En CE1 / En CE2…)
      — couvre plusieurs structures possibles pour être robuste */
#browse .families .family .subfamily-title,
#browse .families .family .subFamille-title,
#browse .families .family .subfamily > h3,
#browse .families .family .subfamily > h4,
#browse .families .family h3.subfamily,
#browse .families .family h4.subfamily,
#browse .families .family [data-subfamily-title]{
  display: inline-block;
  text-align: center !important;
  margin-left: auto;   /* centre l’élément lui-même */
  margin-right: auto;
}

/* Si un header de sous-famille est un conteneur flex, on force le centrage de son contenu */
#browse .families .family .subfamily header,
#browse .families .family .subfamily .header{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3) IMPORTANT : on ne change PAS l’écart entre familles, ni le style des cartes
   — donc aucune modif de .families (gap/margins) ni de .listgrid a (cadre) */

   /* ===== BROWSE — sous-familles centrées + cartes encadrées ===== */

/* 1) SOUS-FAMILLES — on couvre plusieurs structures possibles */
#browse .families .family .subfamily-title,
#browse .families .family .subFamille-title,
#browse .families .family .subfamily > h2,
#browse .families .family .subfamily > h3,
#browse .families .family .subfamily > h4,
#browse .families .family h3.subfamily,
#browse .families .family h4.subfamily,
#browse .families .family [data-subfamily-title],
/* cas courant : un bouton/toggle pour le titre de sous-famille */
#browse .families .family .subfamily > .family-toggle,
#browse .families .family > .subfamily-toggle,
#browse .families .family h3 > .subfamily-toggle,
#browse .families .family h4 > .subfamily-toggle {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Si le conteneur du titre est en flex, centre le contenu */
#browse .families .family .subfamily header,
#browse .families .family .subfamily .header {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* 2) CARTES DE LISTES — rétablit le cadre (border + fond) */
#browse .listgrid a {
  display: block !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 12px 14px !important;
  text-decoration: none !important;
  color: inherit !important;
  text-align: center;              /* noms centrés */
  max-width: 260px;                /* largeur confortable, comme avant */
  margin-inline: auto;             /* au centre de la colonne */
}

/* Effet au survol conservé */
#browse .listgrid a:hover {
  background: var(--primary-200) !important;
  border-color: var(--primary-700) !important;
}

/* 3) On ne touche PAS aux espacements entre familles :
   donc AUCUN changement sur .families (gap/margins) */

   /* le conteneur de carte doit pouvoir positionner le bouton */
.listgrid li { position: relative; }

/* petit bouton PDF dans le coin bas-droit */
.pdf-btn{
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: .25rem .5rem;
  font: inherit;
  line-height: 1;
  border: 1px solid #c9ced6;
  background: #f6f8fb;
  border-radius: 6px;
  cursor: pointer;
}
.pdf-btn:hover{ background: #eef2f7; }

/* Position du bouton PDF */
.listgrid li {
  position: relative;
}

/* Bouton PDF stylé (picto encadré) */
.pdf-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Hover = effet relief */
.pdf-btn:hover {
  background: #f9fafb;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

/* Active = enfoncé */
.pdf-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}